@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,6 +1,7 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { variableValueToInputText } from "../../../utils/variable-utils.js";
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import { ChevronLeft, ChevronRight, ChevronDown, Check } from "lucide-react";
 import { Checkbox } from "../../../../ui/checkbox.js";
 import { Input } from "@ai-matrx/design-system";
@@ -30,7 +31,7 @@ function InlineCustomInput({
   onChange,
   placeholder = "Or type your own answer..."
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-2 pt-2 border-t border-border/40" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: "mt-2 pt-2 border-t border-border/40", children: /* @__PURE__ */ jsx(
     "input",
     {
       type: "text",
@@ -39,7 +40,7 @@ function InlineCustomInput({
       placeholder,
       className: "w-full text-base md:text-sm bg-textured border-none outline-none text-foreground placeholder:text-muted-foreground py-1 px-2 rounded"
     }
-  ));
+  ) });
 }
 function GuidedSelect({
   value,
@@ -69,59 +70,69 @@ function GuidedSelect({
     }
     setShowOther(false);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, options.map((option) => {
-    const isActive = value === option;
-    return /* @__PURE__ */ React.createElement(
-      "div",
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+      options.map((option) => {
+        const isActive = value === option;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => handleSelect(option),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleSelect(option);
+              }
+            },
+            className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              isActive && /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: isActive ? "font-medium" : "", children: option || "(empty)" })
+            ] })
+          },
+          option
+        );
+      }),
+      allowOther && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: handleOtherClick,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleOtherClick();
+            }
+          },
+          className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+          children: "Other..."
+        }
+      )
+    ] }),
+    showOther && /* @__PURE__ */ jsx(
+      ProTextarea,
       {
-        key: option,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => handleSelect(option),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleSelect(option);
-          }
+        value: otherText,
+        onChange: (e) => {
+          setOtherText(e.target.value);
+          onChange(`Other: ${e.target.value}`);
         },
-        className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, isActive && /* @__PURE__ */ React.createElement(Check, { className: "w-3.5 h-3.5 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: isActive ? "font-medium" : "" }, option || "(empty)"))
-    );
-  }), allowOther && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      onClick: handleOtherClick,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleOtherClick();
-        }
-      },
-      className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-    },
-    "Other..."
-  )), showOther && /* @__PURE__ */ React.createElement(
-    ProTextarea,
-    {
-      value: otherText,
-      onChange: (e) => {
-        setOtherText(e.target.value);
-        onChange(`Other: ${e.target.value}`);
-      },
-      placeholder: "Type your answer...",
-      className: "min-h-[60px] text-base md:text-sm mt-1",
-      autoFocus: true
-    }
-  ), !showOther && /* @__PURE__ */ React.createElement(
-    InlineCustomInput,
-    {
-      value: isCustom ? value : "",
-      onChange: handleCustomChange
-    }
-  ));
+        placeholder: "Type your answer...",
+        className: "min-h-[60px] text-base md:text-sm mt-1",
+        autoFocus: true
+      }
+    ),
+    !showOther && /* @__PURE__ */ jsx(
+      InlineCustomInput,
+      {
+        value: isCustom ? value : "",
+        onChange: handleCustomChange
+      }
+    )
+  ] });
 }
 function GuidedCheckbox({
   value,
@@ -156,68 +167,85 @@ function GuidedCheckbox({
     if (v === "") return;
     onChange(v);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "grid gap-1.5" }, options.map((option) => {
-    const isActive = selected.includes(option);
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: option,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => toggle(option),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            toggle(option);
-          }
-        },
-        className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        Checkbox,
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+      options.map((option) => {
+        const isActive = selected.includes(option);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => toggle(option),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggle(option);
+              }
+            },
+            className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+            children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isActive,
+                  tabIndex: -1,
+                  className: "pointer-events-none shrink-0"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: isActive ? "font-medium" : "", children: option || "(empty)" })
+            ] })
+          },
+          option
+        );
+      }),
+      allowOther && /* @__PURE__ */ jsx(
+        "div",
         {
-          checked: isActive,
-          tabIndex: -1,
-          className: "pointer-events-none shrink-0"
-        }
-      ), /* @__PURE__ */ React.createElement("span", { className: isActive ? "font-medium" : "" }, option || "(empty)"))
-    );
-  }), allowOther && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      role: "button",
-      tabIndex: 0,
-      onClick: handleOtherToggle,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleOtherToggle();
+          role: "button",
+          tabIndex: 0,
+          onClick: handleOtherToggle,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleOtherToggle();
+            }
+          },
+          className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: showOther,
+                tabIndex: -1,
+                className: "pointer-events-none shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: "Other..." })
+          ] })
         }
-      },
-      className: `w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all border cursor-pointer ${showOther ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-      Checkbox,
+      )
+    ] }),
+    showOther && /* @__PURE__ */ jsx(
+      ProTextarea,
       {
-        checked: showOther,
-        tabIndex: -1,
-        className: "pointer-events-none shrink-0"
+        value: otherText,
+        onChange: (e) => {
+          setOtherText(e.target.value);
+          const regular = selected.filter((s) => !s.startsWith("Other: "));
+          onChange([...regular, `Other: ${e.target.value}`].join("\n"));
+        },
+        placeholder: "Type your answer...",
+        className: "min-h-[60px] text-base md:text-sm mt-1",
+        autoFocus: true
       }
-    ), /* @__PURE__ */ React.createElement("span", null, "Other..."))
-  )), showOther && /* @__PURE__ */ React.createElement(
-    ProTextarea,
-    {
-      value: otherText,
-      onChange: (e) => {
-        setOtherText(e.target.value);
-        const regular = selected.filter((s) => !s.startsWith("Other: "));
-        onChange([...regular, `Other: ${e.target.value}`].join("\n"));
-      },
-      placeholder: "Type your answer...",
-      className: "min-h-[60px] text-base md:text-sm mt-1",
-      autoFocus: true
-    }
-  ), selected.length > 0 && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, selected.length, " selected"), !showOther && /* @__PURE__ */ React.createElement(InlineCustomInput, { value: "", onChange: handleCustomChange }));
+    ),
+    selected.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      selected.length,
+      " selected"
+    ] }),
+    !showOther && /* @__PURE__ */ jsx(InlineCustomInput, { value: "", onChange: handleCustomChange })
+  ] });
 }
 function GuidedToggle({
   value,
@@ -233,32 +261,35 @@ function GuidedToggle({
   const handleCustomChange = (v) => {
     onChange(v || offLabel);
   };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-2" }, [offLabel, onLabel].map((label) => {
-    const isActive = value === label;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: label,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => handleSelect(label),
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            handleSelect(label);
-          }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: [offLabel, onLabel].map((label) => {
+      const isActive = value === label;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => handleSelect(label),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelect(label);
+            }
+          },
+          className: `px-4 py-3 rounded-lg text-sm font-medium text-center transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`,
+          children: label
         },
-        className: `px-4 py-3 rounded-lg text-sm font-medium text-center transition-all border cursor-pointer ${isActive ? "bg-primary/10 border-primary text-foreground ring-1 ring-primary/30" : "bg-textured border-border hover:bg-accent hover:border-foreground/20 text-foreground"}`
-      },
-      label
-    );
-  })), /* @__PURE__ */ React.createElement(
-    InlineCustomInput,
-    {
-      value: value !== offLabel && value !== onLabel ? value : "",
-      onChange: handleCustomChange
-    }
-  ));
+        label
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      InlineCustomInput,
+      {
+        value: value !== offLabel && value !== onLabel ? value : "",
+        onChange: handleCustomChange
+      }
+    )
+  ] });
 }
 function GuidedNumber({
   value,
@@ -270,51 +301,58 @@ function GuidedNumber({
   const num = parseFloat(value) || 0;
   const canDec = min === void 0 || num > min;
   const canInc = max === void 0 || num < max;
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center gap-3" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "outline",
-      icon: /* @__PURE__ */ React.createElement(Minus, null),
-      "aria-label": "Decrease",
-      onClick: () => canDec && onChange((num - step).toString()),
-      disabled: !canDec
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center min-w-[120px]" }, /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      type: "text",
-      value,
-      onChange: (e) => {
-        const v = e.target.value;
-        if (v === "" || v === "-" || !isNaN(parseFloat(v))) onChange(v);
-      },
-      className: "w-full text-center text-2xl font-semibold h-12",
-      placeholder: "0"
-    }
-  )), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "outline",
-      icon: /* @__PURE__ */ React.createElement(Plus, null),
-      "aria-label": "Increase",
-      onClick: () => canInc && onChange((num + step).toString()),
-      disabled: !canInc
-    }
-  )), /* @__PURE__ */ React.createElement(
-    InlineCustomInput,
-    {
-      value: "",
-      onChange: (v) => onChange(v),
-      placeholder: "Or type a number..."
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          icon: /* @__PURE__ */ jsx(Minus, {}),
+          "aria-label": "Decrease",
+          onClick: () => canDec && onChange((num - step).toString()),
+          disabled: !canDec
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-w-[120px]", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value,
+          onChange: (e) => {
+            const v = e.target.value;
+            if (v === "" || v === "-" || !isNaN(parseFloat(v))) onChange(v);
+          },
+          className: "w-full text-center text-2xl font-semibold h-12",
+          placeholder: "0"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          icon: /* @__PURE__ */ jsx(Plus, {}),
+          "aria-label": "Increase",
+          onClick: () => canInc && onChange((num + step).toString()),
+          disabled: !canInc
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      InlineCustomInput,
+      {
+        value: "",
+        onChange: (v) => onChange(v),
+        placeholder: "Or type a number..."
+      }
+    )
+  ] });
 }
 function GuidedTextarea({
   value,
   onChange,
   variableName
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ProTextarea,
     {
       value,
@@ -334,7 +372,7 @@ function GuidedVariableContent({
 }) {
   const cc = variable.customComponent;
   if (!cc || cc.type === "textarea") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       GuidedTextarea,
       {
         value: variableValueToInputText(value),
@@ -352,12 +390,12 @@ function GuidedVariableContent({
       resourceContext: cc.resource_context,
       conversationId
     };
-    if (cc.type === "image") return /* @__PURE__ */ React.createElement(ImageVariableInput, { ...sharedProps });
-    if (cc.type === "audio") return /* @__PURE__ */ React.createElement(AudioVariableInput, { ...sharedProps });
-    if (cc.type === "video") return /* @__PURE__ */ React.createElement(VideoVariableInput, { ...sharedProps });
+    if (cc.type === "image") return /* @__PURE__ */ jsx(ImageVariableInput, { ...sharedProps });
+    if (cc.type === "audio") return /* @__PURE__ */ jsx(AudioVariableInput, { ...sharedProps });
+    if (cc.type === "video") return /* @__PURE__ */ jsx(VideoVariableInput, { ...sharedProps });
     if (cc.type === "document")
-      return /* @__PURE__ */ React.createElement(DocumentVariableInput, { ...sharedProps });
-    if (cc.type === "youtube") return /* @__PURE__ */ React.createElement(YoutubeVariableInput, { ...sharedProps });
+      return /* @__PURE__ */ jsx(DocumentVariableInput, { ...sharedProps });
+    if (cc.type === "youtube") return /* @__PURE__ */ jsx(YoutubeVariableInput, { ...sharedProps });
   }
   const strValue = variableValueToInputText(value);
   const strOnChange = (v) => onChange(v);
@@ -368,7 +406,7 @@ function GuidedVariableContent({
     case "selection-list":
     case "buttons":
       if (!cc.options?.length) {
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           GuidedTextarea,
           {
             value: strValue,
@@ -377,7 +415,7 @@ function GuidedVariableContent({
           }
         );
       }
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedSelect,
         {
           value: strValue,
@@ -389,7 +427,7 @@ function GuidedVariableContent({
       );
     case "checkbox":
       if (!cc.options?.length) {
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ jsx(
           GuidedTextarea,
           {
             value: strValue,
@@ -398,7 +436,7 @@ function GuidedVariableContent({
           }
         );
       }
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedCheckbox,
         {
           value: strValue,
@@ -409,7 +447,7 @@ function GuidedVariableContent({
       );
     case "toggle":
     case "light-switch":
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedToggle,
         {
           value: strValue,
@@ -420,7 +458,7 @@ function GuidedVariableContent({
       );
     case "number":
     case "slider":
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedNumber,
         {
           value: strValue,
@@ -431,7 +469,7 @@ function GuidedVariableContent({
         }
       );
     default:
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         GuidedTextarea,
         {
           value: strValue,
@@ -528,7 +566,7 @@ function AgentVariablesGuided({
   if (!shouldShowVariables || !showVariablePanel || allDefinitions.length === 0)
     return null;
   if (total === 0 || !variable) {
-    return /* @__PURE__ */ React.createElement(BoundVariableChips, { conversationId });
+    return /* @__PURE__ */ jsx(BoundVariableChips, { conversationId });
   }
   const value = values[variable.name] ?? variable.defaultValue ?? "";
   const formattedName = variableRunLabel(variable);
@@ -539,14 +577,13 @@ function AgentVariablesGuided({
   }).length;
   const outerRadius = seamless ? "rounded-t-xl rounded-b-none" : "rounded-xl";
   const collapsedRadius = seamless ? "rounded-t-xl rounded-b-none" : "rounded-xl";
-  const progressDots = /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, variableDefaults.map((v, i) => {
+  const progressDots = /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: variableDefaults.map((v, i) => {
     const raw = values[v.name] ?? v.defaultValue ?? "";
     const filled = String(raw ?? "").trim() !== "";
     const isCurrent = i === activeIndex;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "span",
       {
-        key: v.name,
         role: "button",
         tabIndex: 0,
         onClick: (e) => {
@@ -563,66 +600,108 @@ function AgentVariablesGuided({
         },
         className: `rounded-full transition-all cursor-pointer ${isCurrent ? "w-5 h-2 bg-primary" : filled ? "w-2 h-2 bg-primary/40" : "w-2 h-2 bg-muted-foreground/20"}`,
         title: variableRunLabel(v)
-      }
+      },
+      v.name
     );
-  }));
+  }) });
   if (isCollapsed) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BoundVariableChips, { conversationId }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          `w-full bg-card border border-border ${collapsedRadius} ${seamless ? "border-b-0" : ""}`,
-          disabled && "opacity-50 pointer-events-none"
-        )
-      },
-      /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BoundVariableChips, { conversationId }),
+      /* @__PURE__ */ jsx(
         "div",
         {
-          role: "button",
-          tabIndex: 0,
-          onClick: handleToggleCollapse,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleToggleCollapse();
+          className: cn(
+            `w-full bg-card border border-border ${collapsedRadius} ${seamless ? "border-b-0" : ""}`,
+            disabled && "opacity-50 pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: handleToggleCollapse,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleToggleCollapse();
+                }
+              },
+              className: `w-full flex items-center justify-between px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer ${collapsedRadius}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  progressDots,
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground truncate", children: [
+                    answeredCount,
+                    "/",
+                    total,
+                    " answered"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" })
+              ]
             }
-          },
-          className: `w-full flex items-center justify-between px-3 py-2 hover:bg-accent/50 transition-colors cursor-pointer ${collapsedRadius}`
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, progressDots, /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground truncate" }, answeredCount, "/", total, " answered")),
-        /* @__PURE__ */ React.createElement(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" })
+          )
+        }
       )
-    ));
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BoundVariableChips, { conversationId }), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        `flex flex-col h-64 max-h-64 w-full overflow-hidden bg-muted border border-border ${outerRadius} ${seamless ? "border-b-0" : ""}`,
-        disabled && "opacity-50 pointer-events-none"
-      ),
-      onKeyDown: handleKeyDown
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "px-3 pt-2.5 pb-2 border-b border-border/40 shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, progressDots, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: handleSkipAll }, "Skip questions")), /* @__PURE__ */ React.createElement("p", { className: "mt-1.5 text-xs text-muted-foreground leading-snug break-words min-w-0 w-full" }, formattedName, helpText && /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, ": ", helpText))),
-    /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 min-h-0 pb-3" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BoundVariableChips, { conversationId }),
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: scrollRef,
-        className: "h-full overflow-y-scroll overscroll-contain px-3 py-2"
-      },
-      /* @__PURE__ */ React.createElement(
-        GuidedVariableContent,
-        {
-          conversationId,
-          variable,
-          value,
-          onChange: handleChange,
-          onAutoAdvance: goNext
-        }
-      )
-    ), isScrollable && /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute bottom-0 inset-x-0 h-8 z-10 bg-gradient-to-t from-muted to-transparent" })),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border/50 shrink-0" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronLeft, null), onClick: goPrev, disabled: activeIndex === 0 }, "Prev"), /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground" }, activeIndex + 1, " of ", total), activeIndex < total - 1 ? /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: goNext }, "Next") : /* @__PURE__ */ React.createElement(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ React.createElement(Check, null), iconEnd: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: handleSkipAll }, "Done"))
-  ));
+        className: cn(
+          `flex flex-col h-64 max-h-64 w-full overflow-hidden bg-muted border border-border ${outerRadius} ${seamless ? "border-b-0" : ""}`,
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2 border-b border-border/40 shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              progressDots,
+              /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: handleSkipAll, children: "Skip questions" })
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1.5 text-xs text-muted-foreground leading-snug break-words min-w-0 w-full", children: [
+              formattedName,
+              helpText && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                ": ",
+                helpText
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0 pb-3", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: scrollRef,
+                className: "h-full overflow-y-scroll overscroll-contain px-3 py-2",
+                children: /* @__PURE__ */ jsx(
+                  GuidedVariableContent,
+                  {
+                    conversationId,
+                    variable,
+                    value,
+                    onChange: handleChange,
+                    onAutoAdvance: goNext
+                  }
+                )
+              }
+            ),
+            isScrollable && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 inset-x-0 h-8 z-10 bg-gradient-to-t from-muted to-transparent" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border/50 shrink-0", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronLeft, {}), onClick: goPrev, disabled: activeIndex === 0, children: "Prev" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              activeIndex + 1,
+              " of ",
+              total
+            ] }),
+            activeIndex < total - 1 ? /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", iconEnd: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: goNext, children: "Next" }) : /* @__PURE__ */ jsx(Button, { variant: "quiet", tone: "primary", icon: /* @__PURE__ */ jsx(Check, {}), iconEnd: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: handleSkipAll, children: "Done" })
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 export {
   AgentVariablesGuided