@adecore/agents-react 0.31.12 → 0.33.0

package/dist/chat/ui/intelligent-ui/renderers/inputs.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { createContext, useContext, useId } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
@@ -7,61 +7,528 @@ import { formatNumber } from '@adecore/ui/format';
 import { uiChildrenOf, uiNodeLabel, uiOwnLabel, uiWithUnit } from '../node-text.js';
 import { useTruncated } from '../use-truncated.js';
 import { bindingOf, PENDING } from './binding.js';
-const ChecklistContext = createContext({ values: [], enabled: false, toggle: () => undefined });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ChecklistContext = createContext({
+  values: [],
+  enabled: false,
+  toggle: () => undefined
+});
 /* The rows of a checklist as one named group. */
-function ChecklistGroup({ pending, children }) {
-    const { t } = useTranslation('agent-chat');
-    return (_jsx("div", { role: "group", "aria-label": t('blocks.checklist'), className: clsx('chat-ui-nodes flex flex-col gap-1.5', pending && PENDING), children: children }));
+function ChecklistGroup(t0) {
+  const $ = _c(8);
+  const {
+    pending,
+    children
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let t1;
+  if ($[0] !== t) {
+    t1 = t("blocks.checklist");
+    $[0] = t;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = pending && PENDING;
+  let t3;
+  if ($[2] !== t2) {
+    t3 = clsx("chat-ui-nodes flex flex-col gap-1.5", t2);
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== children || $[5] !== t1 || $[6] !== t3) {
+    t4 = /*#__PURE__*/_jsx("div", {
+      role: "group",
+      "aria-label": t1,
+      className: t3,
+      children: children
+    });
+    $[4] = children;
+    $[5] = t1;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  return t4;
 }
-export function ChecklistRenderer({ node, children, context }) {
-    const binding = bindingOf(node, context);
-    const values = binding?.value ?? node.props.value;
-    const toggle = (value) => {
-        binding?.onValueChange(values.includes(value) ? values.filter((entry) => entry !== value) : [...values, value]);
+export function ChecklistRenderer(t0) {
+  const $ = _c(16);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  let t1;
+  if ($[0] !== context || $[1] !== node) {
+    t1 = bindingOf(node, context);
+    $[0] = context;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const binding = t1;
+  const values = binding?.value ?? node.props.value;
+  let t2;
+  if ($[3] !== binding || $[4] !== values) {
+    t2 = value => {
+      binding?.onValueChange(values.includes(value) ? values.filter(entry => entry !== value) : [...values, value]);
     };
-    return (_jsx(ChecklistContext, { value: { values, enabled: binding !== null, toggle }, children: _jsx(ChecklistGroup, { pending: !node.complete, children: children }) }));
+    $[3] = binding;
+    $[4] = values;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const toggle = t2;
+  const t3 = binding !== null;
+  let t4;
+  if ($[6] !== t3 || $[7] !== toggle || $[8] !== values) {
+    t4 = {
+      values,
+      enabled: t3,
+      toggle
+    };
+    $[6] = t3;
+    $[7] = toggle;
+    $[8] = values;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = !node.complete;
+  let t6;
+  if ($[10] !== children || $[11] !== t5) {
+    t6 = /*#__PURE__*/_jsx(ChecklistGroup, {
+      pending: t5,
+      children: children
+    });
+    $[10] = children;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t4 || $[14] !== t6) {
+    t7 = /*#__PURE__*/_jsx(ChecklistContext, {
+      value: t4,
+      children: t6
+    });
+    $[13] = t4;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
 }
 /* The whole tile is the label, ringed in the accent while checked; a link inside it keeps its own click and checks nothing. */
-export function ItemRenderer({ node, children }) {
-    const list = useContext(ChecklistContext);
-    const { value } = node.props;
-    const checked = list.values.includes(value);
-    const toggleRow = (event) => {
-        if (list.enabled && !event.target.closest('button, a')) {
-            list.toggle(value);
-        }
+export function ItemRenderer(t0) {
+  const $ = _c(22);
+  const {
+    node,
+    children
+  } = t0;
+  const list = useContext(ChecklistContext);
+  const {
+    value
+  } = node.props;
+  let checked;
+  let t1;
+  let toggleRow;
+  if ($[0] !== list || $[1] !== value) {
+    checked = list.values.includes(value);
+    toggleRow = event => {
+      if (list.enabled && !event.target.closest("button, a")) {
+        list.toggle(value);
+      }
     };
-    return (_jsxs("div", { className: clsx('flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs text-text', checked && 'ring-2 ring-accent ring-inset', list.enabled && 'hover:bg-surface-active'), onClick: toggleRow, children: [_jsx(Checkbox, { className: "mt-0.5", checked: checked, onCheckedChange: () => list.toggle(value), label: uiNodeLabel(node), disabled: !list.enabled }), _jsx("div", { className: "min-w-0 grow", children: children })] }));
+    t1 = clsx("flex min-h-10 items-start gap-3 rounded-xl bg-ui-tile px-3 py-2.5 text-xs text-text", checked && "ring-2 ring-accent ring-inset", list.enabled && "hover:bg-surface-active");
+    $[0] = list;
+    $[1] = value;
+    $[2] = checked;
+    $[3] = t1;
+    $[4] = toggleRow;
+  } else {
+    checked = $[2];
+    t1 = $[3];
+    toggleRow = $[4];
+  }
+  let t2;
+  if ($[5] !== list || $[6] !== value) {
+    t2 = () => list.toggle(value);
+    $[5] = list;
+    $[6] = value;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== node) {
+    t3 = uiNodeLabel(node);
+    $[8] = node;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const t4 = !list.enabled;
+  let t5;
+  if ($[10] !== checked || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Checkbox, {
+      className: "mt-0.5",
+      checked: checked,
+      onCheckedChange: t2,
+      label: t3,
+      disabled: t4
+    });
+    $[10] = checked;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== children) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: "min-w-0 grow",
+      children: children
+    });
+    $[15] = children;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== t1 || $[18] !== t5 || $[19] !== t6 || $[20] !== toggleRow) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      className: t1,
+      onClick: toggleRow,
+      children: [t5, t6]
+    });
+    $[17] = t1;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = toggleRow;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  return t7;
 }
-export function SwitchRenderer({ node, children, context }) {
-    const binding = bindingOf(node, context);
-    return (_jsxs("div", { className: clsx('chat-ui-flat flex min-h-11 items-center justify-between gap-3 rounded-xl bg-ui-tile px-3 py-2 text-xs', !node.complete && PENDING), children: [_jsx("span", { className: "min-w-0 font-medium text-text", children: children }), _jsx(Switch, { checked: binding?.value ?? node.props.value, onCheckedChange: (next) => binding?.onValueChange(next), label: uiNodeLabel(node), disabled: binding === null })] }));
+export function SwitchRenderer(t0) {
+  const $ = _c(20);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  let t1;
+  if ($[0] !== context || $[1] !== node) {
+    t1 = bindingOf(node, context);
+    $[0] = context;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const binding = t1;
+  const t2 = !node.complete && PENDING;
+  let t3;
+  if ($[3] !== t2) {
+    t3 = clsx("chat-ui-flat flex min-h-11 items-center justify-between gap-3 rounded-xl bg-ui-tile px-3 py-2 text-xs", t2);
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== children) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 font-medium text-text",
+      children: children
+    });
+    $[5] = children;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const t5 = binding?.value ?? node.props.value;
+  let t6;
+  if ($[7] !== binding) {
+    t6 = next => binding?.onValueChange(next);
+    $[7] = binding;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== node) {
+    t7 = uiNodeLabel(node);
+    $[9] = node;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  const t8 = binding === null;
+  let t9;
+  if ($[11] !== t5 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8) {
+    t9 = /*#__PURE__*/_jsx(Switch, {
+      checked: t5,
+      onCheckedChange: t6,
+      label: t7,
+      disabled: t8
+    });
+    $[11] = t5;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== t3 || $[17] !== t4 || $[18] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: t3,
+      children: [t4, t9]
+    });
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t9;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  return t10;
 }
 /* Its children are the label, read as text: the slider writes its own label line. */
-export function SliderRenderer({ node, context }) {
-    const binding = bindingOf(node, context);
-    const { value, min, max, step, unit } = node.props;
-    return (_jsx(Slider, { value: binding?.value ?? value, onValueChange: (next) => binding?.onValueChange(next), min: min, max: max, step: step, 
-        // The slider prints its unit right after the number, so the space a unit stands apart with comes from here.
-        unit: uiWithUnit('', unit), label: uiNodeLabel(node), disabled: binding === null, className: clsx('chat-ui-flat rounded-xl bg-ui-tile p-3', !node.complete && PENDING) }));
+export function SliderRenderer(t0) {
+  const $ = _c(21);
+  const {
+    node,
+    context
+  } = t0;
+  let t1;
+  if ($[0] !== context || $[1] !== node) {
+    t1 = bindingOf(node, context);
+    $[0] = context;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const binding = t1;
+  const {
+    value,
+    min,
+    max,
+    step,
+    unit
+  } = node.props;
+  const t2 = binding?.value ?? value;
+  let t3;
+  if ($[3] !== binding) {
+    t3 = next => binding?.onValueChange(next);
+    $[3] = binding;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== unit) {
+    t4 = uiWithUnit("", unit);
+    $[5] = unit;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== node) {
+    t5 = uiNodeLabel(node);
+    $[7] = node;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const t6 = binding === null;
+  const t7 = !node.complete && PENDING;
+  let t8;
+  if ($[9] !== t7) {
+    t8 = clsx("chat-ui-flat rounded-xl bg-ui-tile p-3", t7);
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== max || $[12] !== min || $[13] !== step || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== t8) {
+    t9 = /*#__PURE__*/_jsx(Slider, {
+      value: t2,
+      onValueChange: t3,
+      min: min,
+      max: max,
+      step: step,
+      unit: t4,
+      label: t5,
+      disabled: t6,
+      className: t8
+    });
+    $[11] = max;
+    $[12] = min;
+    $[13] = step;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t8;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  return t9;
 }
 /* A label longer than this reads as a sentence, which wraps badly beside another; the options then stand in a column. */
 const SIDE_BY_SIDE_LABEL = 24;
 /* Left aligned, never the full width. Each Option is a segment by its place, since a value may be any scalar. */
-export function SegmentedRenderer({ node, context }) {
-    const { t } = useTranslation('agent-chat');
-    const binding = bindingOf(node, context);
-    const current = binding?.value ?? node.props.value;
-    const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
-    const picked = options.find((option) => option.value === current)?.id ?? '';
-    return (_jsx("div", { className: clsx(!node.complete && PENDING), children: _jsx(Segmented, { value: picked, options: options, label: t('blocks.options'), orientation: options.some((option) => option.label.length > SIDE_BY_SIDE_LABEL) ? 'vertical' : 'horizontal', disabled: binding === null, onValueChange: (id) => {
-                const option = options[Number(id)];
-                if (option !== undefined) {
-                    binding?.onValueChange(option.value);
-                }
-            } }) }));
+export function SegmentedRenderer(t0) {
+  const $ = _c(31);
+  const {
+    node,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let t1;
+  if ($[0] !== context || $[1] !== node) {
+    t1 = bindingOf(node, context);
+    $[0] = context;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const binding = t1;
+  const current = binding?.value ?? node.props.value;
+  let T0;
+  let options;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  if ($[3] !== current || $[4] !== node || $[5] !== t) {
+    options = uiChildrenOf(node, "Option").map(_temp);
+    const picked = options.find(option_0 => option_0.value === current)?.id ?? "";
+    const t7 = !node.complete && PENDING;
+    if ($[13] !== t7) {
+      t6 = clsx(t7);
+      $[13] = t7;
+      $[14] = t6;
+    } else {
+      t6 = $[14];
+    }
+    T0 = Segmented;
+    t2 = picked;
+    t3 = options;
+    if ($[15] !== t) {
+      t4 = t("blocks.options");
+      $[15] = t;
+      $[16] = t4;
+    } else {
+      t4 = $[16];
+    }
+    t5 = options.some(_temp2) ? "vertical" : "horizontal";
+    $[3] = current;
+    $[4] = node;
+    $[5] = t;
+    $[6] = T0;
+    $[7] = options;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    T0 = $[6];
+    options = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    t6 = $[12];
+  }
+  const t7 = binding === null;
+  let t8;
+  if ($[17] !== binding || $[18] !== options) {
+    t8 = id => {
+      const option_2 = options[Number(id)];
+      if (option_2 !== undefined) {
+        binding?.onValueChange(option_2.value);
+      }
+    };
+    $[17] = binding;
+    $[18] = options;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== T0 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t7 || $[26] !== t8) {
+    t9 = /*#__PURE__*/_jsx(T0, {
+      value: t2,
+      options: t3,
+      label: t4,
+      orientation: t5,
+      disabled: t7,
+      onValueChange: t8
+    });
+    $[20] = T0;
+    $[21] = t2;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t7;
+    $[26] = t8;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  let t10;
+  if ($[28] !== t6 || $[29] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      className: t6,
+      children: t9
+    });
+    $[28] = t6;
+    $[29] = t9;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  return t10;
 }
 /* The longest a text field takes when its agent names none; the schema allows up to 1024. */
+function _temp2(option_1) {
+  return option_1.label.length > SIDE_BY_SIDE_LABEL;
+}
+function _temp(option, index) {
+  return {
+    id: String(index),
+    label: uiNodeLabel(option),
+    value: option.props.value
+  };
+}
 const DEFAULT_MAX_LENGTH = 256;
 /* The count under a field appears once the field is this full, and never nags before. */
 const COUNT_FROM = 0.8;
@@ -69,37 +536,371 @@ const COUNT_FROM = 0.8;
  * A line of text: the label above the field, which stops taking characters at its limit. Nothing here binds
  * a key or submits on Enter, so the value reaches the agent only through a Choice.
  */
-export function TextFieldRenderer({ node, children, context }) {
-    const { t } = useTranslation('agent-chat');
-    const id = useId();
-    const binding = bindingOf(node, context);
-    const { maxLength = DEFAULT_MAX_LENGTH, placeholder } = node.props;
-    const value = binding?.value ?? node.props.value;
-    const countId = `${id}-count`;
-    const counting = value.length >= maxLength * COUNT_FROM;
-    return (_jsxs("div", { className: clsx('flex flex-col gap-1.5', !node.complete && PENDING), children: [_jsx("label", { htmlFor: id, className: "px-0.5 text-2xs text-text-muted", children: children }), _jsx(Input, { id: id, value: value, size: "sm", maxLength: maxLength, placeholder: placeholder, disabled: binding === null, "aria-describedby": counting ? countId : undefined, className: "border-transparent bg-ui-tile", onChange: (event) => binding?.onValueChange(event.target.value) }), counting && (_jsx("span", { id: countId, className: "text-xs text-text-muted tabular-nums", children: t('blocks.textField.count', { used: formatNumber(value.length), max: formatNumber(maxLength) }) }))] }));
+export function TextFieldRenderer(t0) {
+  const $ = _c(29);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const id = useId();
+  let t1;
+  if ($[0] !== context || $[1] !== node) {
+    t1 = bindingOf(node, context);
+    $[0] = context;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const binding = t1;
+  const {
+    maxLength: t2,
+    placeholder
+  } = node.props;
+  const maxLength = t2 === undefined ? DEFAULT_MAX_LENGTH : t2;
+  const value = binding?.value ?? node.props.value;
+  const countId = `${id}-count`;
+  const counting = value.length >= maxLength * COUNT_FROM;
+  const t3 = !node.complete && PENDING;
+  let t4;
+  if ($[3] !== t3) {
+    t4 = clsx("flex flex-col gap-1.5", t3);
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== children || $[6] !== id) {
+    t5 = /*#__PURE__*/_jsx("label", {
+      htmlFor: id,
+      className: "px-0.5 text-2xs text-text-muted",
+      children: children
+    });
+    $[5] = children;
+    $[6] = id;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const t6 = binding === null;
+  const t7 = counting ? countId : undefined;
+  let t8;
+  if ($[8] !== binding) {
+    t8 = event => binding?.onValueChange(event.target.value);
+    $[8] = binding;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== id || $[11] !== maxLength || $[12] !== placeholder || $[13] !== t6 || $[14] !== t7 || $[15] !== t8 || $[16] !== value) {
+    t9 = /*#__PURE__*/_jsx(Input, {
+      id: id,
+      value: value,
+      size: "sm",
+      maxLength: maxLength,
+      placeholder: placeholder,
+      disabled: t6,
+      "aria-describedby": t7,
+      className: "border-transparent bg-ui-tile",
+      onChange: t8
+    });
+    $[10] = id;
+    $[11] = maxLength;
+    $[12] = placeholder;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = value;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== countId || $[19] !== counting || $[20] !== maxLength || $[21] !== t || $[22] !== value.length) {
+    t10 = counting && /*#__PURE__*/_jsx("span", {
+      id: countId,
+      className: "text-xs text-text-muted tabular-nums",
+      children: t("blocks.textField.count", {
+        used: formatNumber(value.length),
+        max: formatNumber(maxLength)
+      })
+    });
+    $[18] = countId;
+    $[19] = counting;
+    $[20] = maxLength;
+    $[21] = t;
+    $[22] = value.length;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] !== t10 || $[25] !== t4 || $[26] !== t5 || $[27] !== t9) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: t4,
+      children: [t5, t9, t10]
+    });
+    $[24] = t10;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t9;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  return t11;
 }
 /*
  * Left aligned, never the full width. Like Segmented, each Option is an item by its place, since a value may be any scalar.
  * The text beside its options is its label, drawn above it and read as its name.
  */
-export function SelectRenderer({ node, context }) {
-    const { t } = useTranslation('agent-chat');
-    const binding = bindingOf(node, context);
-    const current = binding?.value ?? node.props.value;
-    const options = uiChildrenOf(node, 'Option').map((option, index) => ({ id: String(index), label: uiNodeLabel(option), value: option.props.value }));
-    const label = uiOwnLabel(node);
-    return (_jsxs("div", { className: clsx('flex flex-col items-start gap-1.5', !node.complete && PENDING), children: [label !== '' && _jsx("span", { className: "px-0.5 text-2xs text-text-muted", children: label }), _jsx(Select, { value: options.find((option) => option.value === current)?.id ?? null, items: options.map((option) => ({ value: option.id, label: option.label })), label: label === '' ? t('blocks.options') : label, disabled: binding === null || options.length === 0, onValueChange: (id) => {
-                    const option = options[Number(id)];
-                    if (option !== undefined) {
-                        binding?.onValueChange(option.value);
-                    }
-                } })] }));
+export function SelectRenderer(t0) {
+  const $ = _c(35);
+  const {
+    node,
+    context
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let t1;
+  if ($[0] !== context || $[1] !== node) {
+    t1 = bindingOf(node, context);
+    $[0] = context;
+    $[1] = node;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const binding = t1;
+  const current = binding?.value ?? node.props.value;
+  let T0;
+  let label;
+  let options;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[3] !== current || $[4] !== node) {
+    options = uiChildrenOf(node, "Option").map(_temp3);
+    let t6;
+    if ($[12] !== node) {
+      t6 = uiOwnLabel(node);
+      $[12] = node;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
+    }
+    label = t6;
+    const t7 = !node.complete && PENDING;
+    if ($[14] !== t7) {
+      t4 = clsx("flex flex-col items-start gap-1.5", t7);
+      $[14] = t7;
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    if ($[16] !== label) {
+      t5 = label !== "" && /*#__PURE__*/_jsx("span", {
+        className: "px-0.5 text-2xs text-text-muted",
+        children: label
+      });
+      $[16] = label;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    T0 = Select;
+    t2 = options.find(option_0 => option_0.value === current)?.id ?? null;
+    t3 = options.map(_temp4);
+    $[3] = current;
+    $[4] = node;
+    $[5] = T0;
+    $[6] = label;
+    $[7] = options;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    T0 = $[5];
+    label = $[6];
+    options = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+  }
+  let t6;
+  if ($[18] !== label || $[19] !== t) {
+    t6 = label === "" ? t("blocks.options") : label;
+    $[18] = label;
+    $[19] = t;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  const t7 = binding === null || options.length === 0;
+  let t8;
+  if ($[21] !== binding || $[22] !== options) {
+    t8 = id => {
+      const option_2 = options[Number(id)];
+      if (option_2 !== undefined) {
+        binding?.onValueChange(option_2.value);
+      }
+    };
+    $[21] = binding;
+    $[22] = options;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  let t9;
+  if ($[24] !== T0 || $[25] !== t2 || $[26] !== t3 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8) {
+    t9 = /*#__PURE__*/_jsx(T0, {
+      value: t2,
+      items: t3,
+      label: t6,
+      disabled: t7,
+      onValueChange: t8
+    });
+    $[24] = T0;
+    $[25] = t2;
+    $[26] = t3;
+    $[27] = t6;
+    $[28] = t7;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  let t10;
+  if ($[31] !== t4 || $[32] !== t5 || $[33] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: t4,
+      children: [t5, t9]
+    });
+    $[31] = t4;
+    $[32] = t5;
+    $[33] = t9;
+    $[34] = t10;
+  } else {
+    t10 = $[34];
+  }
+  return t10;
 }
 /* Runs its local action once its own node closed; like an input, it closes once the block is answered. A label cut to the button's one line reads whole in its tooltip. */
-export function ButtonRenderer({ node, children, context }) {
-    const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
-    const label = uiNodeLabel(node);
-    const [measure, truncated] = useTruncated();
-    return (_jsx("div", { className: clsx(!node.complete && PENDING), children: _jsx(Tooltip, { label: label, disabled: !truncated, children: _jsx(Button, { variant: "secondary", size: "sm", className: "max-w-full", disabled: !enabled, onClick: () => node.onAction?.(), children: _jsx("span", { ref: measure, className: "min-w-0 truncate", children: children }) }) }) }));
+function _temp4(option_1) {
+  return {
+    value: option_1.id,
+    label: option_1.label
+  };
+}
+function _temp3(option, index) {
+  return {
+    id: String(index),
+    label: uiNodeLabel(option),
+    value: option.props.value
+  };
 }
+export function ButtonRenderer(t0) {
+  const $ = _c(20);
+  const {
+    node,
+    children,
+    context
+  } = t0;
+  const enabled = node.onAction !== undefined && node.complete && context.answer === null && node.props.disabled !== true;
+  let t1;
+  if ($[0] !== node) {
+    t1 = uiNodeLabel(node);
+    $[0] = node;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const label = t1;
+  const [measure, truncated] = useTruncated();
+  const t2 = !node.complete && PENDING;
+  let t3;
+  if ($[2] !== t2) {
+    t3 = clsx(t2);
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = !truncated;
+  const t5 = !enabled;
+  let t6;
+  if ($[4] !== node) {
+    t6 = () => node.onAction?.();
+    $[4] = node;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  let t7;
+  if ($[6] !== children || $[7] !== measure) {
+    t7 = /*#__PURE__*/_jsx("span", {
+      ref: measure,
+      className: "min-w-0 truncate",
+      children: children
+    });
+    $[6] = children;
+    $[7] = measure;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== t5 || $[10] !== t6 || $[11] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      size: "sm",
+      className: "max-w-full",
+      disabled: t5,
+      onClick: t6,
+      children: t7
+    });
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== label || $[14] !== t4 || $[15] !== t8) {
+    t9 = /*#__PURE__*/_jsx(Tooltip, {
+      label: label,
+      disabled: t4,
+      children: t8
+    });
+    $[13] = label;
+    $[14] = t4;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] !== t3 || $[18] !== t9) {
+    t10 = /*#__PURE__*/_jsx("div", {
+      className: t3,
+      children: t9
+    });
+    $[17] = t3;
+    $[18] = t9;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  return t10;
+}