@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/cx-chat/components/variable-inputs/CheckboxGroupInput.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { Label } from "@ai-matrx/design-system";
 import { Checkbox } from "../../../ui/checkbox.js";
 import { Textarea } from "@ai-matrx/design-system";
@@ -65,68 +66,94 @@ function CheckboxGroupInput({
     const newSelected = [...regularSelectedItems, `Other: ${text}`];
     onChange(newSelected.join("\n"));
   };
-  return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-4" }, value && hasNonOptionValues && /* @__PURE__ */ React.createElement("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1" }, "Current values:"), /* @__PURE__ */ React.createElement("div", { className: compact ? "text-xs text-amber-900 dark:text-amber-200 space-y-0.5" : "text-sm text-amber-900 dark:text-amber-200 space-y-0.5" }, regularSelectedItems.map((item, idx) => /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex items-center gap-2" }, !options.includes(item) && /* @__PURE__ */ React.createElement("span", { className: compact ? "text-[11px] bg-amber-200 dark:bg-amber-800 px-1 rounded" : "text-xs bg-amber-200 dark:bg-amber-800 px-1 rounded" }, "Custom"), /* @__PURE__ */ React.createElement("span", null, item)))), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1" }, "Select options below to replace")), /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-2" }, options.map((option, index) => {
-    const displayOption = toDisplayValue(option);
-    const actualOption = option;
-    const isChecked = regularSelectedItems.includes(actualOption);
-    const itemKey = isEmptyOrWhitespace(option) ? `empty-${index}` : option;
-    const itemId = `${variableName}-${displayOption}-${index}`;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: itemKey,
-        className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
-        onClick: () => handleToggle(displayOption, !isChecked)
-      },
-      /* @__PURE__ */ React.createElement(
-        Checkbox,
-        {
-          checked: isChecked,
-          onCheckedChange: (checked) => handleToggle(displayOption, checked),
-          id: itemId
-        }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Label,
-        {
-          htmlFor: itemId,
-          className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer"
-        },
-        displayOption
-      )
-    );
-  }), allowOther && /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-2" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
-      onClick: () => handleOtherToggle(!isOtherChecked)
-    },
-    /* @__PURE__ */ React.createElement(
-      Checkbox,
-      {
-        checked: isOtherChecked,
-        onCheckedChange: (checked) => handleOtherToggle(checked),
-        id: `${variableName}-other`
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      Label,
-      {
-        htmlFor: `${variableName}-other`,
-        className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer"
-      },
-      "Other"
-    )
-  ), isOtherChecked && /* @__PURE__ */ React.createElement("div", { className: compact ? "ml-6 pl-2" : "ml-9 pl-3" }, /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: customText,
-      onChange: (e) => handleCustomTextChange(e.target.value),
-      placeholder: "Enter custom value...",
-      className: compact ? "min-h-[60px] text-xs" : "min-h-[80px] text-sm",
-      autoFocus: true
-    }
-  )))), !compact && selectedItems.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "pt-2 border-t border-border" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Selected: ", selectedItems.length, " item", selectedItems.length !== 1 ? "s" : "")));
+  return /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-4", children: [
+    value && hasNonOptionValues && /* @__PURE__ */ jsxs("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1", children: "Current values:" }),
+      /* @__PURE__ */ jsx("div", { className: compact ? "text-xs text-amber-900 dark:text-amber-200 space-y-0.5" : "text-sm text-amber-900 dark:text-amber-200 space-y-0.5", children: regularSelectedItems.map((item, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        !options.includes(item) && /* @__PURE__ */ jsx("span", { className: compact ? "text-[11px] bg-amber-200 dark:bg-amber-800 px-1 rounded" : "text-xs bg-amber-200 dark:bg-amber-800 px-1 rounded", children: "Custom" }),
+        /* @__PURE__ */ jsx("span", { children: item })
+      ] }, idx)) }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1", children: "Select options below to replace" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-2", children: [
+      options.map((option, index) => {
+        const displayOption = toDisplayValue(option);
+        const actualOption = option;
+        const isChecked = regularSelectedItems.includes(actualOption);
+        const itemKey = isEmptyOrWhitespace(option) ? `empty-${index}` : option;
+        const itemId = `${variableName}-${displayOption}-${index}`;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
+            onClick: () => handleToggle(displayOption, !isChecked),
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isChecked,
+                  onCheckedChange: (checked) => handleToggle(displayOption, checked),
+                  id: itemId
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: itemId,
+                  className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer",
+                  children: displayOption
+                }
+              )
+            ]
+          },
+          itemKey
+        );
+      }),
+      allowOther && /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
+            onClick: () => handleOtherToggle(!isOtherChecked),
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isOtherChecked,
+                  onCheckedChange: (checked) => handleOtherToggle(checked),
+                  id: `${variableName}-other`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: `${variableName}-other`,
+                  className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer",
+                  children: "Other"
+                }
+              )
+            ]
+          }
+        ),
+        isOtherChecked && /* @__PURE__ */ jsx("div", { className: compact ? "ml-6 pl-2" : "ml-9 pl-3", children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: customText,
+            onChange: (e) => handleCustomTextChange(e.target.value),
+            placeholder: "Enter custom value...",
+            className: compact ? "min-h-[60px] text-xs" : "min-h-[80px] text-sm",
+            autoFocus: true
+          }
+        ) })
+      ] })
+    ] }),
+    !compact && selectedItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "pt-2 border-t border-border", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+      "Selected: ",
+      selectedItems.length,
+      " item",
+      selectedItems.length !== 1 ? "s" : ""
+    ] }) })
+  ] });
 }
 export {
   CheckboxGroupInput

package/dist/cx-chat/components/variable-inputs/NumberInput.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Input } from "@ai-matrx/design-system/controls";
 import { Button } from "@ai-matrx/design-system/controls";
 import { Minus, Plus } from "lucide-react";
@@ -33,35 +33,46 @@ function NumberInput({
   };
   const canDecrement = min === void 0 || numValue > min;
   const canIncrement = max === void 0 || numValue < max;
-  return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-4" }, value && !isValidNumber && /* @__PURE__ */ React.createElement("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1" }, "Current value:"), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200" }, value), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1" }, "Enter a valid number below to replace")), /* @__PURE__ */ React.createElement("div", { className: compact ? "flex items-center gap-1" : "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      onClick: handleDecrement,
-      disabled: !canDecrement
-    },
-    /* @__PURE__ */ React.createElement(Minus, { className: compact ? "w-3 h-3" : "w-4 h-4" })
-  ), /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      type: "text",
-      value,
-      onChange: handleInputChange,
-      numeric: true,
-      align: "center",
-      placeholder: "0"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type: "button",
-      variant: "outline",
-      onClick: handleIncrement,
-      disabled: !canIncrement
-    },
-    /* @__PURE__ */ React.createElement(Plus, { className: compact ? "w-3 h-3" : "w-4 h-4" })
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-4", children: [
+    value && !isValidNumber && /* @__PURE__ */ jsxs("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1", children: "Current value:" }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200", children: value }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1", children: "Enter a valid number below to replace" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: compact ? "flex items-center gap-1" : "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: handleDecrement,
+          disabled: !canDecrement,
+          children: /* @__PURE__ */ jsx(Minus, { className: compact ? "w-3 h-3" : "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value,
+          onChange: handleInputChange,
+          numeric: true,
+          align: "center",
+          placeholder: "0"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: handleIncrement,
+          disabled: !canIncrement,
+          children: /* @__PURE__ */ jsx(Plus, { className: compact ? "w-3 h-3" : "w-4 h-4" })
+        }
+      )
+    ] })
+  ] });
 }
 export {
   NumberInput

package/dist/cx-chat/components/variable-inputs/RadioGroupInput.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { Label } from "@ai-matrx/design-system";
 import { RadioGroup, RadioGroupItem } from "@ai-matrx/design-system";
 import { Textarea } from "@ai-matrx/design-system";
@@ -56,51 +57,68 @@ function RadioGroupInput({
     onChange(`Other: ${text}`);
   };
   const showNonMatchingValue = value && !isValueInOptions && !isOtherValue;
-  return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-0" : "space-y-4" }, showNonMatchingValue && /* @__PURE__ */ React.createElement("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1" }, "Current value:"), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200" }, value || "(empty)"), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1" }, "Select an option below to replace")), /* @__PURE__ */ React.createElement(RadioGroup, { value: selectedOption, onValueChange: handleOptionChange }, /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-0" : "space-y-1" }, options.map((option, index) => {
-    const displayOption = toDisplayValue(option);
-    const itemKey = isEmptyOrWhitespace(option) ? `empty-${index}` : option;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: itemKey,
-        className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
-        onClick: () => handleOptionChange(displayOption)
-      },
-      /* @__PURE__ */ React.createElement(RadioGroupItem, { value: displayOption, id: `${variableName}-${displayOption}-${index}` }),
-      /* @__PURE__ */ React.createElement(
-        Label,
-        {
-          htmlFor: `${variableName}-${displayOption}-${index}`,
-          className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer"
-        },
-        displayOption
-      )
-    );
-  }), allowOther && /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-2" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
-      onClick: () => handleOptionChange("Other")
-    },
-    /* @__PURE__ */ React.createElement(RadioGroupItem, { value: "Other", id: `${variableName}-other` }),
-    /* @__PURE__ */ React.createElement(
-      Label,
-      {
-        htmlFor: `${variableName}-other`,
-        className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer"
-      },
-      "Other"
-    )
-  ), selectedOption === "Other" && /* @__PURE__ */ React.createElement("div", { className: compact ? "ml-6 pl-2" : "ml-9 pl-3" }, /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: customText,
-      onChange: (e) => handleCustomTextChange(e.target.value),
-      placeholder: "Enter custom value...",
-      className: compact ? "min-h-[60px] text-xs" : "min-h-[80px] text-sm",
-      autoFocus: true
-    }
-  ))))));
+  return /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-0" : "space-y-4", children: [
+    showNonMatchingValue && /* @__PURE__ */ jsxs("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1", children: "Current value:" }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200", children: value || "(empty)" }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1", children: "Select an option below to replace" })
+    ] }),
+    /* @__PURE__ */ jsx(RadioGroup, { value: selectedOption, onValueChange: handleOptionChange, children: /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-0" : "space-y-1", children: [
+      options.map((option, index) => {
+        const displayOption = toDisplayValue(option);
+        const itemKey = isEmptyOrWhitespace(option) ? `empty-${index}` : option;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
+            onClick: () => handleOptionChange(displayOption),
+            children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: displayOption, id: `${variableName}-${displayOption}-${index}` }),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: `${variableName}-${displayOption}-${index}`,
+                  className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer",
+                  children: displayOption
+                }
+              )
+            ]
+          },
+          itemKey
+        );
+      }),
+      allowOther && /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: compact ? "flex items-center space-x-2 p-1 bg-background rounded border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer" : "flex items-center space-x-3 p-3 bg-background rounded-lg border-border hover:border-gray-300 dark:hover:border-gray-600 transition-colors cursor-pointer",
+            onClick: () => handleOptionChange("Other"),
+            children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: "Other", id: `${variableName}-other` }),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: `${variableName}-other`,
+                  className: compact ? "flex-1 text-xs cursor-pointer" : "flex-1 text-sm cursor-pointer",
+                  children: "Other"
+                }
+              )
+            ]
+          }
+        ),
+        selectedOption === "Other" && /* @__PURE__ */ jsx("div", { className: compact ? "ml-6 pl-2" : "ml-9 pl-3", children: /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: customText,
+            onChange: (e) => handleCustomTextChange(e.target.value),
+            placeholder: "Enter custom value...",
+            className: compact ? "min-h-[60px] text-xs" : "min-h-[80px] text-sm",
+            autoFocus: true
+          }
+        ) })
+      ] })
+    ] }) })
+  ] });
 }
 export {
   RadioGroupInput

package/dist/cx-chat/components/variable-inputs/SelectInput.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ai-matrx/design-system";
 import { Textarea } from "@ai-matrx/design-system";
 const EMPTY_VALUE_PLACEHOLDER = "(empty)";
@@ -55,20 +56,36 @@ function SelectInput({
     onChange(`Other: ${text}`);
   };
   const showNonMatchingValue = value && !isValueInOptions && !isOtherValue;
-  return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-4" }, showNonMatchingValue && /* @__PURE__ */ React.createElement("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1" }, "Current value:"), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200" }, value || "(empty)"), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1" }, "Select an option below to replace")), /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-3" }, /* @__PURE__ */ React.createElement(Select, { value: selectedOption, onValueChange: handleSelectChange }, /* @__PURE__ */ React.createElement(SelectTrigger, { className: compact ? "w-full h-8 text-xs" : "w-full" }, /* @__PURE__ */ React.createElement(SelectValue, { placeholder: "Choose an option..." })), /* @__PURE__ */ React.createElement(SelectContent, null, options.map((option, index) => {
-    const displayOption = toDisplayValue(option);
-    const itemKey = isEmptyOrWhitespace(option) ? `empty-${index}` : option;
-    return /* @__PURE__ */ React.createElement(SelectItem, { key: itemKey, value: displayOption }, displayOption);
-  }), allowOther && /* @__PURE__ */ React.createElement(SelectItem, { value: "Other" }, "Other"))), selectedOption === "Other" && /* @__PURE__ */ React.createElement("div", { className: compact ? "pt-1" : "pt-2" }, /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: customText,
-      onChange: (e) => handleCustomTextChange(e.target.value),
-      placeholder: "Enter custom value...",
-      className: compact ? "min-h-[60px] text-xs" : "min-h-[80px] text-sm",
-      autoFocus: true
-    }
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-4", children: [
+    showNonMatchingValue && /* @__PURE__ */ jsxs("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1", children: "Current value:" }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200", children: value || "(empty)" }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1", children: "Select an option below to replace" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-3", children: [
+      /* @__PURE__ */ jsxs(Select, { value: selectedOption, onValueChange: handleSelectChange, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: compact ? "w-full h-8 text-xs" : "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose an option..." }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          options.map((option, index) => {
+            const displayOption = toDisplayValue(option);
+            const itemKey = isEmptyOrWhitespace(option) ? `empty-${index}` : option;
+            return /* @__PURE__ */ jsx(SelectItem, { value: displayOption, children: displayOption }, itemKey);
+          }),
+          allowOther && /* @__PURE__ */ jsx(SelectItem, { value: "Other", children: "Other" })
+        ] })
+      ] }),
+      selectedOption === "Other" && /* @__PURE__ */ jsx("div", { className: compact ? "pt-1" : "pt-2", children: /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          value: customText,
+          onChange: (e) => handleCustomTextChange(e.target.value),
+          placeholder: "Enter custom value...",
+          className: compact ? "min-h-[60px] text-xs" : "min-h-[80px] text-sm",
+          autoFocus: true
+        }
+      ) })
+    ] })
+  ] });
 }
 export {
   SelectInput

package/dist/cx-chat/components/variable-inputs/TextareaInput.js

@@ -1,4 +1,5 @@
-import React, { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import { VoiceTextarea } from "../../../host/ui-slots.js";
 import { toast } from "../../../host/notify.js";
 import { variableInputPlaceholder } from "../../../agents/components/inputs/input-components/variablePlaceholder.js";
@@ -16,7 +17,7 @@ function TextareaInput({
       hasSelectedRef.current = true;
     }
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     VoiceTextarea,
     {
       value,

package/dist/cx-chat/components/variable-inputs/ToggleInput.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Label } from "@ai-matrx/design-system";
 import { Switch } from "../../../ui/switch.js";
 function ToggleInput({
@@ -13,13 +13,33 @@ function ToggleInput({
   const handleToggle = (checked) => {
     onChange(checked ? onLabel : offLabel);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: compact ? "space-y-1" : "space-y-4" }, value && value !== onLabel && value !== offLabel && /* @__PURE__ */ React.createElement("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1" }, "Current value:"), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200" }, value), /* @__PURE__ */ React.createElement("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1" }, "Select an option below to replace")), /* @__PURE__ */ React.createElement("div", { className: compact ? "flex items-center justify-between p-2 bg-background rounded border-border" : "flex items-center justify-between p-4 bg-background rounded-lg border-border" }, /* @__PURE__ */ React.createElement("div", { className: compact ? "" : "space-y-1" }, /* @__PURE__ */ React.createElement(Label, { className: compact ? "text-xs font-medium" : "text-sm font-medium" }, offLabel, " / ", onLabel), !compact && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Currently: ", /* @__PURE__ */ React.createElement("span", { className: "font-medium" }, isOn ? onLabel : offLabel))), /* @__PURE__ */ React.createElement(
-    Switch,
-    {
-      checked: isOn,
-      onCheckedChange: handleToggle
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: compact ? "space-y-1" : "space-y-4", children: [
+    value && value !== onLabel && value !== offLabel && /* @__PURE__ */ jsxs("div", { className: compact ? "p-1.5 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded" : "p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] font-medium text-amber-800 dark:text-amber-300 mb-0.5" : "text-xs font-medium text-amber-800 dark:text-amber-300 mb-1", children: "Current value:" }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-xs text-amber-900 dark:text-amber-200" : "text-sm text-amber-900 dark:text-amber-200", children: value }),
+      /* @__PURE__ */ jsx("p", { className: compact ? "text-[11px] text-amber-700 dark:text-amber-400 mt-0.5" : "text-xs text-amber-700 dark:text-amber-400 mt-1", children: "Select an option below to replace" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: compact ? "flex items-center justify-between p-2 bg-background rounded border-border" : "flex items-center justify-between p-4 bg-background rounded-lg border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: compact ? "" : "space-y-1", children: [
+        /* @__PURE__ */ jsxs(Label, { className: compact ? "text-xs font-medium" : "text-sm font-medium", children: [
+          offLabel,
+          " / ",
+          onLabel
+        ] }),
+        !compact && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+          "Currently: ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: isOn ? onLabel : offLabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: isOn,
+          onCheckedChange: handleToggle
+        }
+      )
+    ] })
+  ] });
 }
 export {
   ToggleInput

package/dist/host/bare-host-chrome.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { TooltipProvider } from "@ai-matrx/design-system";
 import { createAssociationsStore } from "@ai-matrx/associations/core";
@@ -41,7 +42,7 @@ function BareHostChrome({ host, children }) {
     catalog: createModelCatalog({ client: host.db }),
     favorites: createModelFavorites({ client: host.db })
   }));
-  return /* @__PURE__ */ React.createElement(TooltipProvider, { delayDuration: 200 }, /* @__PURE__ */ React.createElement(AgentCatalogProvider, { catalog }, /* @__PURE__ */ React.createElement(AssociationsProvider, { store: associations }, /* @__PURE__ */ React.createElement(ModelCatalogProvider, { catalog: models.catalog, favorites: models.favorites }, children))));
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsx(AgentCatalogProvider, { catalog, children: /* @__PURE__ */ jsx(AssociationsProvider, { store: associations, children: /* @__PURE__ */ jsx(ModelCatalogProvider, { catalog: models.catalog, favorites: models.favorites, children }) }) }) });
 }
 export {
   BareHostChrome

package/dist/host/chrome.js

@@ -1,41 +1,42 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { getChatHost } from "./configure.js";
 import { useChatHost } from "./react.js";
 function PageHeaderPortal(props) {
   const { HeaderCenter } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(HeaderCenter, { ...props });
+  return /* @__PURE__ */ jsx(HeaderCenter, { ...props });
 }
 function PageHeaderRightPortal(props) {
   const { HeaderRight } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(HeaderRight, { ...props });
+  return /* @__PURE__ */ jsx(HeaderRight, { ...props });
 }
 function HeaderActionsSlot(props) {
   const { HeaderActionsSlot: Slot } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(Slot, { ...props });
+  return /* @__PURE__ */ jsx(Slot, { ...props });
 }
 function RouteHeader(props) {
   const { RouteHeader: Header } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(Header, { ...props });
+  return /* @__PURE__ */ jsx(Header, { ...props });
 }
 function HeaderControlSet(props) {
   const { HeaderControlSet: Controls } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(Controls, { ...props });
+  return /* @__PURE__ */ jsx(Controls, { ...props });
 }
 function ShellChromeMode(props) {
   const { CanvasChromeMode } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(CanvasChromeMode, { ...props });
+  return /* @__PURE__ */ jsx(CanvasChromeMode, { ...props });
 }
 function IconButton(props) {
   const { IconButton: Button } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(Button, { ...props });
+  return /* @__PURE__ */ jsx(Button, { ...props });
 }
 function NavTooltipProvider(props) {
   const { NavTooltipProvider: Provider } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(Provider, { ...props });
+  return /* @__PURE__ */ jsx(Provider, { ...props });
 }
 function NavItemTooltip(props) {
   const { NavItemTooltip: Tooltip } = useChatHost().chrome;
-  return /* @__PURE__ */ React.createElement(Tooltip, { ...props });
+  return /* @__PURE__ */ jsx(Tooltip, { ...props });
 }
 function usePhonePageActions() {
   return useChatHost().chrome.usePhonePageActions();

package/dist/host/configure.js

@@ -98,12 +98,18 @@ function resolveChatHost(host) {
     () => ref.notify,
     () => ref.diagnostics
   );
-  const serverPort = host.server ?? createDefaultServer(
+  const sessionServer = createDefaultServer(
     () => ref.identity,
     () => ref.org
   );
+  const serverPort = host.server ?? sessionServer;
+  const hostHeaders = host.server?.headers?.bind(host.server);
   const server = {
     ...serverPort,
+    headers: hostHeaders ? async () => ({
+      ...await sessionServer.headers(),
+      ...await hostHeaders()
+    }) : sessionServer.headers,
     api: serverPort.api ?? (hasDatabase || host.server ? defaultServerApi(() => ref) : createNoServerApi(
       reportNoDatabase,
       defaultServerApi(() => ref)

package/dist/host/conversation-hooks-react.d.ts

@@ -1,2 +1,9 @@
+import { type ConversationHostHooks } from "./conversation-hooks.js";
 /** The sentence holding this conversation's composer (host/conversation-hooks `held`), or null. */
 export declare function useConversationHeld(conversationId: string | null | undefined): string | null;
+/**
+ * This conversation's host hooks, re-read when a host registers or releases
+ * them — a bubble rendered before the host's effect ran still follows the
+ * host's display hooks the moment they land.
+ */
+export declare function useConversationHooks(conversationId: string | null | undefined): ConversationHostHooks | undefined;