@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/variable-input-variations/AgentVariableForm.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { variableValueToInputText } from "../../../utils/variable-utils.js";
 import { useState } from "react";
 import { useAppSelector, useAppDispatch } from "../../../../store/hooks.js";
@@ -53,24 +54,34 @@ function AgentVariableForm({ conversationId }) {
     return String(val).length > 0;
   }).length;
   const setValue = (name, value) => dispatch(setUserVariableValue({ conversationId, name, value }));
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col max-h-72 border-b border-border overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    DisclosureHeader,
-    {
-      open: showVariables,
-      onClick: () => dispatch(toggleVariablePanel(conversationId)),
-      chevron: "end",
-      title: showVariables ? "Fill in the details below" : `${filledCount}/${definitions.length} details provided`,
-      className: "shrink-0"
-    }
-  ), showVariables && /* @__PURE__ */ React.createElement("div", { className: "border-t border-border flex-1 min-h-0 overflow-y-auto" }, /* @__PURE__ */ React.createElement(BoundVariableChips, { conversationId }), /* @__PURE__ */ React.createElement("div", { className: "px-2.5 py-2" }, visibleDefs.map((def, i) => /* @__PURE__ */ React.createElement("div", { key: def.name }, i > 0 && /* @__PURE__ */ React.createElement("div", { className: "border-t border-border my-2" }), isControlVariable(def) && !(i > 0 && isControlVariable(visibleDefs[i - 1])) && /* @__PURE__ */ React.createElement("p", { className: "pb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" }, "Settings"), /* @__PURE__ */ React.createElement(
-    VariableField,
-    {
-      conversationId,
-      def,
-      value: userValues[def.name] ?? def.defaultValue ?? "",
-      onChange: (v) => setValue(def.name, v)
-    }
-  ))))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col max-h-72 border-b border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      DisclosureHeader,
+      {
+        open: showVariables,
+        onClick: () => dispatch(toggleVariablePanel(conversationId)),
+        chevron: "end",
+        title: showVariables ? "Fill in the details below" : `${filledCount}/${definitions.length} details provided`,
+        className: "shrink-0"
+      }
+    ),
+    showVariables && /* @__PURE__ */ jsxs("div", { className: "border-t border-border flex-1 min-h-0 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx(BoundVariableChips, { conversationId }),
+      /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2", children: visibleDefs.map((def, i) => /* @__PURE__ */ jsxs("div", { children: [
+        i > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-border my-2" }),
+        isControlVariable(def) && !(i > 0 && isControlVariable(visibleDefs[i - 1])) && /* @__PURE__ */ jsx("p", { className: "pb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Settings" }),
+        /* @__PURE__ */ jsx(
+          VariableField,
+          {
+            conversationId,
+            def,
+            value: userValues[def.name] ?? def.defaultValue ?? "",
+            onChange: (v) => setValue(def.name, v)
+          }
+        )
+      ] }, def.name)) })
+    ] })
+  ] });
 }
 function FieldLabel({
   fieldId,
@@ -78,21 +89,27 @@ function FieldLabel({
   required,
   helpText
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "mb-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ React.createElement(
-    Label,
-    {
-      htmlFor: fieldId,
-      className: "text-xs font-medium text-foreground"
-    },
-    name
-  ), required && /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: "text-destructive text-xs select-none",
-      "aria-label": "required"
-    },
-    "*"
-  )), helpText && /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground leading-snug mt-0.5" }, helpText));
+  return /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          htmlFor: fieldId,
+          className: "text-xs font-medium text-foreground",
+          children: name
+        }
+      ),
+      required && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-destructive text-xs select-none",
+          "aria-label": "required",
+          children: "*"
+        }
+      )
+    ] }),
+    helpText && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground leading-snug mt-0.5", children: helpText })
+  ] });
 }
 const OPTION_ROW = "flex items-center gap-2 px-1.5 py-1 rounded hover:bg-accent/50 transition-colors cursor-pointer";
 const OPTION_INDICATOR = "h-3.5 w-3.5 shrink-0";
@@ -101,7 +118,7 @@ function VariableField({ conversationId, def, value, onChange }) {
   const formattedName = humanizeIdentifier(def.name);
   const cc = def.customComponent;
   const fieldId = `var-${def.name}`;
-  const fieldLabel = /* @__PURE__ */ React.createElement(
+  const fieldLabel = /* @__PURE__ */ jsx(
     FieldLabel,
     {
       fieldId,
@@ -111,59 +128,80 @@ function VariableField({ conversationId, def, value, onChange }) {
     }
   );
   if (!cc || cc.type === "textarea") {
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement(
-      VoiceTextarea,
-      {
-        id: fieldId,
-        value: variableValueToInputText(value),
-        placeholder: `Enter ${formattedName.toLowerCase()}...`,
-        onChange: (e) => onChange(e.target.value),
-        autoGrow: true,
-        minHeight: 28,
-        maxHeight: 120,
-        className: "text-xs bg-transparent",
-        style: IOS_INPUT_STYLE
-      }
-    ));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      /* @__PURE__ */ jsx(
+        VoiceTextarea,
+        {
+          id: fieldId,
+          value: variableValueToInputText(value),
+          placeholder: `Enter ${formattedName.toLowerCase()}...`,
+          onChange: (e) => onChange(e.target.value),
+          autoGrow: true,
+          minHeight: 28,
+          maxHeight: 120,
+          className: "text-xs bg-transparent",
+          style: IOS_INPUT_STYLE
+        }
+      )
+    ] });
   }
   if (cc.type === "toggle" || cc.type === "light-switch") {
     const offLabel = cc.toggleValues?.[0] ?? "No";
     const onLabel = cc.toggleValues?.[1] ?? "Yes";
     const checked = value === true || value === "true" || value === onLabel;
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 px-1" }, /* @__PURE__ */ React.createElement(
-      Switch,
-      {
-        id: fieldId,
-        checked,
-        onCheckedChange: (c) => onChange(c ? onLabel : offLabel),
-        className: "origin-left"
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-foreground" }, checked ? onLabel : offLabel)));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            id: fieldId,
+            checked,
+            onCheckedChange: (c) => onChange(c ? onLabel : offLabel),
+            className: "origin-left"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground", children: checked ? onLabel : offLabel })
+      ] })
+    ] });
   }
   if (cc.type === "radio" || cc.type === "pill-toggle" || cc.type === "selection-list" || cc.type === "buttons") {
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement(
-      RadioField,
-      {
-        cc,
-        value,
-        onChange,
-        fieldId
-      }
-    ));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      /* @__PURE__ */ jsx(
+        RadioField,
+        {
+          cc,
+          value,
+          onChange,
+          fieldId
+        }
+      )
+    ] });
   }
   if (cc.type === "checkbox") {
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement(
-      CheckboxField,
-      {
-        cc,
-        value,
-        onChange,
-        fieldId
-      }
-    ));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      /* @__PURE__ */ jsx(
+        CheckboxField,
+        {
+          cc,
+          value,
+          onChange,
+          fieldId
+        }
+      )
+    ] });
   }
   if (cc.type === "select") {
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement(Select, { value: variableValueToInputText(value), onValueChange: (v) => onChange(v) }, /* @__PURE__ */ React.createElement(SelectTrigger, { id: fieldId, className: "h-7 text-xs bg-transparent" }, /* @__PURE__ */ React.createElement(SelectValue, { placeholder: "Choose..." })), /* @__PURE__ */ React.createElement(SelectContent, null, (cc.options ?? []).map((opt) => /* @__PURE__ */ React.createElement(SelectItem, { key: opt, value: opt, className: "text-xs" }, formatText(opt))))));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      /* @__PURE__ */ jsxs(Select, { value: variableValueToInputText(value), onValueChange: (v) => onChange(v), children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id: fieldId, className: "h-7 text-xs bg-transparent", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose..." }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: (cc.options ?? []).map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, className: "text-xs", children: formatText(opt) }, opt)) })
+      ] })
+    ] });
   }
   if (cc && isMediaVariableType(cc.type)) {
     const sharedProps = {
@@ -174,38 +212,54 @@ function VariableField({ conversationId, def, value, onChange }) {
       resourceContext: cc.resource_context,
       conversationId
     };
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, cc.type === "image" && /* @__PURE__ */ React.createElement(ImageVariableInput, { ...sharedProps }), cc.type === "audio" && /* @__PURE__ */ React.createElement(AudioVariableInput, { ...sharedProps }), cc.type === "video" && /* @__PURE__ */ React.createElement(VideoVariableInput, { ...sharedProps }), cc.type === "document" && /* @__PURE__ */ React.createElement(DocumentVariableInput, { ...sharedProps }), cc.type === "youtube" && /* @__PURE__ */ React.createElement(YoutubeVariableInput, { ...sharedProps }));
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      cc.type === "image" && /* @__PURE__ */ jsx(ImageVariableInput, { ...sharedProps }),
+      cc.type === "audio" && /* @__PURE__ */ jsx(AudioVariableInput, { ...sharedProps }),
+      cc.type === "video" && /* @__PURE__ */ jsx(VideoVariableInput, { ...sharedProps }),
+      cc.type === "document" && /* @__PURE__ */ jsx(DocumentVariableInput, { ...sharedProps }),
+      cc.type === "youtube" && /* @__PURE__ */ jsx(YoutubeVariableInput, { ...sharedProps })
+    ] });
   }
   if (cc.type === "number" || cc.type === "slider") {
-    return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs("div", { children: [
+      fieldLabel,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: fieldId,
+            type: "number",
+            value: value === void 0 || value === null || value === "" ? "" : String(value),
+            placeholder: "0",
+            min: cc.min,
+            max: cc.max,
+            step: cc.step ?? 1,
+            onChange: (e) => {
+              const raw = e.target.value;
+              onChange(raw === "" ? "" : parseFloat(raw));
+            },
+            className: "w-28",
+            style: IOS_INPUT_STYLE
+          }
+        ),
+        (cc.min !== void 0 || cc.max !== void 0) && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground shrink-0", children: cc.min !== void 0 && cc.max !== void 0 ? `${cc.min}\u2013${cc.max}` : cc.min !== void 0 ? `min ${cc.min}` : `max ${cc.max}` })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    fieldLabel,
+    /* @__PURE__ */ jsx(
       Input,
       {
         id: fieldId,
-        type: "number",
-        value: value === void 0 || value === null || value === "" ? "" : String(value),
-        placeholder: "0",
-        min: cc.min,
-        max: cc.max,
-        step: cc.step ?? 1,
-        onChange: (e) => {
-          const raw = e.target.value;
-          onChange(raw === "" ? "" : parseFloat(raw));
-        },
-        className: "w-28",
+        value: variableValueToInputText(value),
+        placeholder: `Enter ${formattedName.toLowerCase()}...`,
+        onChange: (e) => onChange(e.target.value),
         style: IOS_INPUT_STYLE
       }
-    ), (cc.min !== void 0 || cc.max !== void 0) && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground shrink-0" }, cc.min !== void 0 && cc.max !== void 0 ? `${cc.min}\u2013${cc.max}` : cc.min !== void 0 ? `min ${cc.min}` : `max ${cc.max}`)));
-  }
-  return /* @__PURE__ */ React.createElement("div", null, fieldLabel, /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      id: fieldId,
-      value: variableValueToInputText(value),
-      placeholder: `Enter ${formattedName.toLowerCase()}...`,
-      onChange: (e) => onChange(e.target.value),
-      style: IOS_INPUT_STYLE
-    }
-  ));
+    )
+  ] });
 }
 function RadioField({
   cc,
@@ -219,7 +273,7 @@ function RadioField({
   const [otherText, setOtherText] = useState(isOtherSelected ? strValue : "");
   const useGrid = options.length > 3;
   const needsScroll = options.length > 8;
-  const content = /* @__PURE__ */ React.createElement(
+  const content = /* @__PURE__ */ jsxs(
     RadioGroup,
     {
       value: isOtherSelected ? "__other__" : strValue,
@@ -230,26 +284,34 @@ function RadioField({
           onChange(v);
         }
       },
-      className: cn(useGrid ? "grid grid-cols-2 gap-x-2 gap-y-0" : "gap-0")
-    },
-    options.map((opt) => /* @__PURE__ */ React.createElement("label", { key: opt, className: OPTION_ROW }, /* @__PURE__ */ React.createElement(
-      RadioGroupItem,
-      {
-        value: opt,
-        id: `${fieldId}-${opt}`,
-        className: OPTION_INDICATOR
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: OPTION_LABEL }, formatText(opt)))),
-    cc.allowOther && /* @__PURE__ */ React.createElement("label", { className: cn(OPTION_ROW, "col-span-full") }, /* @__PURE__ */ React.createElement(
-      RadioGroupItem,
-      {
-        value: "__other__",
-        id: `${fieldId}-other`,
-        className: OPTION_INDICATOR
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: OPTION_LABEL }, "Other"))
+      className: cn(useGrid ? "grid grid-cols-2 gap-x-2 gap-y-0" : "gap-0"),
+      children: [
+        options.map((opt) => /* @__PURE__ */ jsxs("label", { className: OPTION_ROW, children: [
+          /* @__PURE__ */ jsx(
+            RadioGroupItem,
+            {
+              value: opt,
+              id: `${fieldId}-${opt}`,
+              className: OPTION_INDICATOR
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: OPTION_LABEL, children: formatText(opt) })
+        ] }, opt)),
+        cc.allowOther && /* @__PURE__ */ jsxs("label", { className: cn(OPTION_ROW, "col-span-full"), children: [
+          /* @__PURE__ */ jsx(
+            RadioGroupItem,
+            {
+              value: "__other__",
+              id: `${fieldId}-other`,
+              className: OPTION_INDICATOR
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: OPTION_LABEL, children: "Other" })
+        ] })
+      ]
+    }
   );
-  const otherInput = isOtherSelected && /* @__PURE__ */ React.createElement("div", { className: "mt-1 pl-6" }, /* @__PURE__ */ React.createElement(
+  const otherInput = isOtherSelected && /* @__PURE__ */ jsx("div", { className: "mt-1 pl-6", children: /* @__PURE__ */ jsx(
     VoiceTextarea,
     {
       value: otherText === "__other__" ? "" : otherText,
@@ -264,11 +326,17 @@ function RadioField({
       className: "text-xs bg-transparent",
       style: IOS_INPUT_STYLE
     }
-  ));
+  ) });
   if (needsScroll) {
-    return /* @__PURE__ */ React.createElement("div", { className: "max-h-36 overflow-y-auto" }, content, otherInput);
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-36 overflow-y-auto", children: [
+      content,
+      otherInput
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, content, otherInput);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    content,
+    otherInput
+  ] });
 }
 function CheckboxField({
   cc,
@@ -287,48 +355,56 @@ function CheckboxField({
     const next = checked ? [...selected, opt] : selected.filter((s) => s !== opt);
     onChange(next);
   };
-  const content = /* @__PURE__ */ React.createElement(
+  const content = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(useGrid ? "grid grid-cols-2 gap-x-2 gap-y-0" : "space-y-0")
-    },
-    options.map((opt) => /* @__PURE__ */ React.createElement("label", { key: opt, className: OPTION_ROW }, /* @__PURE__ */ React.createElement(
-      Checkbox,
-      {
-        id: `${fieldId}-${opt}`,
-        checked: selected.includes(opt),
-        onCheckedChange: (c) => toggle(opt, c === true),
-        className: OPTION_INDICATOR
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: OPTION_LABEL }, formatText(opt)))),
-    cc.allowOther && /* @__PURE__ */ React.createElement("label", { className: cn(OPTION_ROW, "col-span-full") }, /* @__PURE__ */ React.createElement(
-      Checkbox,
-      {
-        id: `${fieldId}-other`,
-        checked: isOtherChecked,
-        onCheckedChange: (c) => {
-          if (c) {
-            if (otherText) {
-              onChange([
-                ...selected.filter((s) => options.includes(s)),
-                otherText
-              ]);
-            } else {
-              onChange([
-                ...selected.filter((s) => options.includes(s)),
-                "__other__"
-              ]);
+      className: cn(useGrid ? "grid grid-cols-2 gap-x-2 gap-y-0" : "space-y-0"),
+      children: [
+        options.map((opt) => /* @__PURE__ */ jsxs("label", { className: OPTION_ROW, children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: `${fieldId}-${opt}`,
+              checked: selected.includes(opt),
+              onCheckedChange: (c) => toggle(opt, c === true),
+              className: OPTION_INDICATOR
             }
-          } else {
-            onChange(selected.filter((s) => options.includes(s)));
-            setOtherText("");
-          }
-        },
-        className: OPTION_INDICATOR
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: OPTION_LABEL }, "Other"))
+          ),
+          /* @__PURE__ */ jsx("span", { className: OPTION_LABEL, children: formatText(opt) })
+        ] }, opt)),
+        cc.allowOther && /* @__PURE__ */ jsxs("label", { className: cn(OPTION_ROW, "col-span-full"), children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: `${fieldId}-other`,
+              checked: isOtherChecked,
+              onCheckedChange: (c) => {
+                if (c) {
+                  if (otherText) {
+                    onChange([
+                      ...selected.filter((s) => options.includes(s)),
+                      otherText
+                    ]);
+                  } else {
+                    onChange([
+                      ...selected.filter((s) => options.includes(s)),
+                      "__other__"
+                    ]);
+                  }
+                } else {
+                  onChange(selected.filter((s) => options.includes(s)));
+                  setOtherText("");
+                }
+              },
+              className: OPTION_INDICATOR
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: OPTION_LABEL, children: "Other" })
+        ] })
+      ]
+    }
   );
-  const otherInput = isOtherChecked && /* @__PURE__ */ React.createElement("div", { className: "mt-1 pl-6" }, /* @__PURE__ */ React.createElement(
+  const otherInput = isOtherChecked && /* @__PURE__ */ jsx("div", { className: "mt-1 pl-6", children: /* @__PURE__ */ jsx(
     VoiceTextarea,
     {
       value: otherText === "__other__" ? "" : otherText,
@@ -346,11 +422,17 @@ function CheckboxField({
       className: "text-xs bg-transparent",
       style: IOS_INPUT_STYLE
     }
-  ));
+  ) });
   if (needsScroll) {
-    return /* @__PURE__ */ React.createElement("div", { className: "max-h-36 overflow-y-auto" }, content, otherInput);
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-36 overflow-y-auto", children: [
+      content,
+      otherInput
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, content, otherInput);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    content,
+    otherInput
+  ] });
 }
 export {
   AgentVariableForm