@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/input-components/ScalarVariableInput.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { datetimeLocalValue } from "@ai-matrx/kit/dates";
 import { Input } from "@ai-matrx/design-system";
 import { ProTextarea } from "../../../../host/ui-slots.js";
@@ -30,7 +31,7 @@ function ScalarVariableInput({
   disabled
 }) {
   if (kind === "markdown") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ProTextarea,
       {
         value,
@@ -46,49 +47,55 @@ function ScalarVariableInput({
     );
   }
   if (kind === "percent") {
-    return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-      Input,
-      {
-        type: "number",
-        min: 0,
-        max: 100,
-        value,
-        onChange: (e) => onChange(e.target.value),
-        placeholder: PLACEHOLDER.percent,
-        disabled,
-        "aria-label": humanizeIdentifier(variableName),
-        style: { fontSize: "16px" },
-        className: "pr-7"
-      }
-    ), /* @__PURE__ */ React.createElement("span", { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground" }, "%"));
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          min: 0,
+          max: 100,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder: PLACEHOLDER.percent,
+          disabled,
+          "aria-label": humanizeIdentifier(variableName),
+          style: { fontSize: "16px" },
+          className: "pr-7"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: "%" })
+    ] });
   }
   if (kind === "color") {
     const isHex = /^#[0-9a-fA-F]{6}$/.test(value);
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "color",
-        value: isHex ? value : "#000000",
-        onChange: (e) => onChange(e.target.value),
-        disabled,
-        "aria-label": `${variableName} color`,
-        className: "h-9 w-12 shrink-0 cursor-pointer rounded border border-border bg-transparent p-1"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      Input,
-      {
-        value,
-        onChange: (e) => onChange(e.target.value),
-        placeholder: PLACEHOLDER.color,
-        disabled,
-        "aria-label": humanizeIdentifier(variableName),
-        style: { fontSize: "16px" },
-        className: cn("flex-1 font-mono")
-      }
-    ));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: isHex ? value : "#000000",
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          "aria-label": `${variableName} color`,
+          className: "h-9 w-12 shrink-0 cursor-pointer rounded border border-border bg-transparent p-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder: PLACEHOLDER.color,
+          disabled,
+          "aria-label": humanizeIdentifier(variableName),
+          style: { fontSize: "16px" },
+          className: cn("flex-1 font-mono")
+        }
+      )
+    ] });
   }
   const current = kind === "datetime" ? datetimeLocalValue(value) : value;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Input,
     {
       type: NATIVE_TYPE[kind],

package/dist/agents/components/inputs/input-components/SelectInput.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Select,
   SelectContent,
@@ -58,50 +58,55 @@ function SelectInput({
     const btnBase = compact ? "w-full min-w-0 whitespace-normal break-words text-left px-2 py-1 text-xs rounded border transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" : "w-full min-w-0 whitespace-normal break-words text-left px-3 py-1.5 text-sm rounded border transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring";
     const btnSelected = "bg-primary border-primary text-primary-foreground hover:bg-primary/90";
     const btnUnselected = "bg-transparent border-border text-foreground hover:bg-accent hover:border-accent-foreground/20";
-    return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-2" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { className: compact ? "space-y-1" : "space-y-2", children: /* @__PURE__ */ jsxs(
       "div",
       {
         style: isMultiCol ? {
           display: "grid",
           gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
           gap
-        } : { display: "flex", flexDirection: "column", gap }
-      },
-      options.map((option, index) => {
-        const isSelected = selectedOption === option;
-        return /* @__PURE__ */ React.createElement(
-          "button",
-          {
-            key: `${option}-${index}`,
-            type: "button",
-            onClick: () => handleSelectChange(option),
-            className: `${btnBase} ${isSelected ? btnSelected : btnUnselected}`
-          },
-          option || "(empty)"
-        );
-      }),
-      allowOther && /* @__PURE__ */ React.createElement("div", { style: isMultiCol ? { gridColumn: "1 / -1" } : void 0 }, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleSelectChange("Other"),
-          className: `${btnBase} ${selectedOption === "Other" ? btnSelected : btnUnselected}`
-        },
-        "Other"
-      ), selectedOption === "Other" && /* @__PURE__ */ React.createElement("div", { className: "pt-1" }, /* @__PURE__ */ React.createElement(
-        ProTextarea,
-        {
-          value: customText,
-          onChange: (e) => handleCustomTextChange(e.target.value),
-          placeholder: "Enter any text, markdown, or custom value...",
-          className: compact ? "min-h-[80px] text-xs" : "min-h-[100px] text-sm",
-          ref: focusWithoutScroll
-        }
-      )))
-    ));
+        } : { display: "flex", flexDirection: "column", gap },
+        children: [
+          options.map((option, index) => {
+            const isSelected = selectedOption === option;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSelectChange(option),
+                className: `${btnBase} ${isSelected ? btnSelected : btnUnselected}`,
+                children: option || "(empty)"
+              },
+              `${option}-${index}`
+            );
+          }),
+          allowOther && /* @__PURE__ */ jsxs("div", { style: isMultiCol ? { gridColumn: "1 / -1" } : void 0, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleSelectChange("Other"),
+                className: `${btnBase} ${selectedOption === "Other" ? btnSelected : btnUnselected}`,
+                children: "Other"
+              }
+            ),
+            selectedOption === "Other" && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(
+              ProTextarea,
+              {
+                value: customText,
+                onChange: (e) => handleCustomTextChange(e.target.value),
+                placeholder: "Enter any text, markdown, or custom value...",
+                className: compact ? "min-h-[80px] text-xs" : "min-h-[100px] text-sm",
+                ref: focusWithoutScroll
+              }
+            ) })
+          ] })
+        ]
+      }
+    ) });
   }
   const choice = choiceControlFor(options);
-  const otherEditor = selectedOption === "Other" && /* @__PURE__ */ React.createElement(
+  const otherEditor = selectedOption === "Other" && /* @__PURE__ */ jsx(
     ProTextarea,
     {
       value: customText,
@@ -113,45 +118,57 @@ function SelectInput({
   );
   if (choice === "aspect-ratio" || choice === "searchable") {
     const withOther = allowOther ? [...options, "Other"] : options;
-    return /* @__PURE__ */ React.createElement("div", { className: cn(compact ? "space-y-1" : "space-y-1.5", "min-w-0") }, choice === "aspect-ratio" ? /* @__PURE__ */ React.createElement(
-      AspectRatioSelect,
-      {
-        value: selectedOption,
-        onChange: handleSelectChange,
-        options: withOther,
-        compact,
-        ariaLabel: variableName
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      OptionCombobox,
+    return /* @__PURE__ */ jsxs("div", { className: cn(compact ? "space-y-1" : "space-y-1.5", "min-w-0"), children: [
+      choice === "aspect-ratio" ? /* @__PURE__ */ jsx(
+        AspectRatioSelect,
+        {
+          value: selectedOption,
+          onChange: handleSelectChange,
+          options: withOther,
+          compact,
+          ariaLabel: variableName
+        }
+      ) : /* @__PURE__ */ jsx(
+        OptionCombobox,
+        {
+          value: selectedOption,
+          onChange: handleSelectChange,
+          options: withOther,
+          compact,
+          ariaLabel: variableName,
+          placeholder: "Choose an option..."
+        }
+      ),
+      otherEditor
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(compact ? "space-y-1" : "space-y-1.5", "min-w-0"), children: [
+    /* @__PURE__ */ jsxs(Select, { value: selectedOption, onValueChange: handleSelectChange, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: dropdownTriggerClassName(compact), children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose an option..." }) }),
+      /* @__PURE__ */ jsxs(SelectContent, { className: "max-w-[var(--radix-select-trigger-width)]", children: [
+        options.map((option, index) => /* @__PURE__ */ jsx(
+          SelectItem,
+          {
+            value: option || `__empty_${index}`,
+            className: dropdownItemClassName,
+            children: option || "(empty)"
+          },
+          `${option}-${index}`
+        )),
+        allowOther && /* @__PURE__ */ jsx(SelectItem, { value: "Other", className: dropdownItemClassName, children: "Other" })
+      ] })
+    ] }),
+    selectedOption === "Other" && /* @__PURE__ */ jsx(
+      ProTextarea,
       {
-        value: selectedOption,
-        onChange: handleSelectChange,
-        options: withOther,
-        compact,
-        ariaLabel: variableName,
-        placeholder: "Choose an option..."
+        value: customText,
+        onChange: (e) => handleCustomTextChange(e.target.value),
+        placeholder: "Enter any text, markdown, or custom value...",
+        className: compact ? "min-h-[80px] text-xs" : "min-h-[100px] text-sm",
+        ref: focusWithoutScroll
       }
-    ), otherEditor);
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: cn(compact ? "space-y-1" : "space-y-1.5", "min-w-0") }, /* @__PURE__ */ React.createElement(Select, { value: selectedOption, onValueChange: handleSelectChange }, /* @__PURE__ */ React.createElement(SelectTrigger, { className: dropdownTriggerClassName(compact) }, /* @__PURE__ */ React.createElement(SelectValue, { placeholder: "Choose an option..." })), /* @__PURE__ */ React.createElement(SelectContent, { className: "max-w-[var(--radix-select-trigger-width)]" }, options.map((option, index) => /* @__PURE__ */ React.createElement(
-    SelectItem,
-    {
-      key: `${option}-${index}`,
-      value: option || `__empty_${index}`,
-      className: dropdownItemClassName
-    },
-    option || "(empty)"
-  )), allowOther && /* @__PURE__ */ React.createElement(SelectItem, { value: "Other", className: dropdownItemClassName }, "Other"))), selectedOption === "Other" && /* @__PURE__ */ React.createElement(
-    ProTextarea,
-    {
-      value: customText,
-      onChange: (e) => handleCustomTextChange(e.target.value),
-      placeholder: "Enter any text, markdown, or custom value...",
-      className: compact ? "min-h-[80px] text-xs" : "min-h-[100px] text-sm",
-      ref: focusWithoutScroll
-    }
-  ));
+    )
+  ] });
 }
 export {
   SelectInput

package/dist/agents/components/inputs/input-components/SliderInput.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@ai-matrx/design-system";
 function SliderInput({
   value,
@@ -12,35 +12,42 @@ function SliderInput({
   const withUnit = (n) => unit ? `${n}${unit === "%" || unit === "s" ? "" : " "}${unit}` : String(n);
   const numValue = parseFloat(value);
   const safeValue = isNaN(numValue) ? min : Math.min(Math.max(numValue, min), max);
-  return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: compact ? "text-[11px] text-muted-foreground" : "text-xs text-muted-foreground"
-    },
-    withUnit(min)
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: compact ? "text-xs font-medium tabular-nums" : "text-sm font-medium tabular-nums"
-    },
-    withUnit(safeValue)
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: compact ? "text-[11px] text-muted-foreground" : "text-xs text-muted-foreground"
-    },
-    withUnit(max)
-  )), /* @__PURE__ */ React.createElement(
-    Slider,
-    {
-      value: [safeValue],
-      min,
-      max,
-      step,
-      onValueChange: ([v]) => onChange(String(v)),
-      className: "w-full"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: compact ? "text-[11px] text-muted-foreground" : "text-xs text-muted-foreground",
+          children: withUnit(min)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: compact ? "text-xs font-medium tabular-nums" : "text-sm font-medium tabular-nums",
+          children: withUnit(safeValue)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: compact ? "text-[11px] text-muted-foreground" : "text-xs text-muted-foreground",
+          children: withUnit(max)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value: [safeValue],
+        min,
+        max,
+        step,
+        onValueChange: ([v]) => onChange(String(v)),
+        className: "w-full"
+      }
+    )
+  ] });
 }
 export {
   SliderInput

package/dist/agents/components/inputs/input-components/TableVariableInput.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { TableChooser } from "../../../../host/ui-slots.js";
 import { useTablesEverywhere } from "../../../../host/ui-slots.js";
@@ -17,7 +18,7 @@ function TableVariableInput({
   const tables = useTablesEverywhere();
   const ids = readTableReference(value);
   if (type === "table") {
-    return /* @__PURE__ */ React.createElement("div", { "data-table-variable": variableName }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { "data-table-variable": variableName, children: /* @__PURE__ */ jsx(
       TableChooser,
       {
         tables,
@@ -26,29 +27,34 @@ function TableVariableInput({
         readonly,
         label: null
       }
-    ));
+    ) });
   }
   const nameOf = (id) => tables.rows.find((t) => t.table_id === id)?.table_name ?? (tables.loading ? "\u2026" : "Table unavailable");
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5", "data-table-variable": variableName }, ids.length > 0 && /* @__PURE__ */ React.createElement("ul", { className: "flex flex-wrap gap-1.5", "aria-label": "Chosen tables" }, ids.map((id) => /* @__PURE__ */ React.createElement(
-    "li",
-    {
-      key: id,
-      className: "inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted/50 py-0.5 pl-2.5 pr-1 text-xs text-foreground"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "truncate" }, nameOf(id)),
-    !readonly && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), "aria-label": `Remove ${nameOf(id)}`, onClick: () => onChange(tableReferenceValue("tables", ids.filter((x) => x !== id))), className: "shrink-0" })
-  ))), /* @__PURE__ */ React.createElement(
-    TableChooser,
-    {
-      tables,
-      value: null,
-      exclude: ids,
-      onSelect: (id) => onChange(tableReferenceValue("tables", [...ids, id])),
-      readonly,
-      label: null,
-      placeholder: ids.length > 0 ? "Add another table\u2026" : "Choose tables\u2026"
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", "data-table-variable": variableName, children: [
+    ids.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-1.5", "aria-label": "Chosen tables", children: ids.map((id) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted/50 py-0.5 pl-2.5 pr-1 text-xs text-foreground",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: nameOf(id) }),
+          !readonly && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": `Remove ${nameOf(id)}`, onClick: () => onChange(tableReferenceValue("tables", ids.filter((x) => x !== id))), className: "shrink-0" })
+        ]
+      },
+      id
+    )) }),
+    /* @__PURE__ */ jsx(
+      TableChooser,
+      {
+        tables,
+        value: null,
+        exclude: ids,
+        onSelect: (id) => onChange(tableReferenceValue("tables", [...ids, id])),
+        readonly,
+        label: null,
+        placeholder: ids.length > 0 ? "Add another table\u2026" : "Choose tables\u2026"
+      }
+    )
+  ] });
 }
 function TableReferenceNames({ value }) {
   const tables = useTablesEverywhere();
@@ -57,7 +63,7 @@ function TableReferenceNames({ value }) {
   const names = ids.map(
     (id) => tables.rows.find((t) => t.table_id === id)?.table_name ?? (tables.loading ? "\u2026" : "Table unavailable")
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, names.join(", "));
+  return /* @__PURE__ */ jsx(Fragment, { children: names.join(", ") });
 }
 export {
   TableReferenceNames,

package/dist/agents/components/inputs/input-components/TextareaInput.js

@@ -1,4 +1,5 @@
-import React, { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import { ProTextarea } from "../../../../host/ui-slots.js";
 import { toast } from "../../../../host/notify.js";
 import { variableInputPlaceholder } from "./variablePlaceholder.js";
@@ -24,7 +25,7 @@ function TextareaInput({
       hasSelectedRef.current = true;
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ProTextarea,
     {
       ref: textareaRef,

package/dist/agents/components/inputs/input-components/ToggleInput.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@ai-matrx/design-system";
 import { LightSwitchToggle } from "../../../../host/ui-slots.js";
 import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
@@ -17,7 +17,7 @@ function ToggleInput({
   const handleToggle = (checked) => {
     onChange(checked ? onLabel : offLabel);
   };
-  return threeDMode ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center pb-4" }, /* @__PURE__ */ React.createElement(
+  return threeDMode ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center pb-4", children: /* @__PURE__ */ jsx(
     LightSwitchToggle,
     {
       value: isOn,
@@ -27,30 +27,32 @@ function ToggleInput({
       width: "w-64",
       height: "h-12"
     }
-  )) : (
+  ) }) : (
     // The switch says what it is set to, next to it — the field's own label
     // already names it. "Off / On · Currently: On" said the same thing twice.
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsxs(
       "label",
       {
-        className: compact ? "inline-flex min-h-7 cursor-pointer items-center gap-2" : "inline-flex min-h-9 cursor-pointer items-center gap-2.5"
-      },
-      /* @__PURE__ */ React.createElement(
-        Switch,
-        {
-          size: "sm",
-          checked: isOn,
-          onCheckedChange: handleToggle,
-          "aria-label": humanizeIdentifier(variableName)
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: compact ? "text-xs font-medium text-foreground" : "text-sm font-medium text-foreground"
-        },
-        isOn ? onLabel : offLabel
-      )
+        className: compact ? "inline-flex min-h-7 cursor-pointer items-center gap-2" : "inline-flex min-h-9 cursor-pointer items-center gap-2.5",
+        children: [
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              size: "sm",
+              checked: isOn,
+              onCheckedChange: handleToggle,
+              "aria-label": humanizeIdentifier(variableName)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: compact ? "text-xs font-medium text-foreground" : "text-sm font-medium text-foreground",
+              children: isOn ? onLabel : offLabel
+            }
+          )
+        ]
+      }
     )
   );
 }