@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/cx-chat/components/user-input/ConversationInput.js

@@ -1,6 +1,7 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useFileUpload } from "@ai-matrx/media/files/engine/handler/hooks/useFileUpload";
-import React, {
+import {
   useState,
   useRef,
   useEffect,
@@ -271,148 +272,168 @@ function ConversationInput({
   const inputBoxClass = seamless ? "flex flex-col w-full bg-background" : singleLine ? "flex flex-col w-full bg-background border border-border rounded-b-2xl rounded-t-none border-t-0 py-1" : "flex flex-col w-full bg-background border border-border rounded-3xl py-2";
   return (
     // Outer wrapper: no border, no background — just stacks children vertically
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col w-full" }, hasVariables && useGuidedVars && /* @__PURE__ */ React.createElement(
-      GuidedVariableInputs,
-      {
-        conversationId,
-        disabled: isExecuting,
-        seamless: true
-      }
-    ), hasVariables && !useGuidedVars && /* @__PURE__ */ React.createElement("div", { className: "max-h-[30dvh] md:max-h-[45dvh] overflow-y-auto overscroll-contain rounded-xl mb-1" }, /* @__PURE__ */ React.createElement(
-      StackedVariableInputs,
-      {
-        conversationId,
-        disabled: isExecuting,
-        minimal: true
-      }
-    )), /* @__PURE__ */ React.createElement("div", { className: inputBoxClass }, resources.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "px-3" }, /* @__PURE__ */ React.createElement(
-      ResourceChips,
-      {
-        resources,
-        onRemove: (index) => {
-          const r = resources[index];
-          if (!r) return;
-          dispatch(
-            removeResource({
-              conversationId,
-              resourceId: r.resourceId
-            })
-          );
-        },
-        onPreview: (resource, _index) => {
-          setPreviewResource(resource);
-          setPreviewSheetOpen(true);
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
+      hasVariables && useGuidedVars && /* @__PURE__ */ jsx(
+        GuidedVariableInputs,
+        {
+          conversationId,
+          disabled: isExecuting,
+          seamless: true
         }
-      }
-    )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, showResourcePicker && /* @__PURE__ */ React.createElement(
-      PlusAttachMenu,
-      {
-        conversationId,
-        foldToolbarExtras: compact,
-        onDebugClick: isAdmin ? openDebugWindow : void 0,
-        showDebugActive: isAdmin,
-        side: "top",
-        align: "start",
-        trigger: isUploading ? /* @__PURE__ */ React.createElement(
-          TapTargetButtonTransparent,
+      ),
+      hasVariables && !useGuidedVars && /* @__PURE__ */ jsx("div", { className: "max-h-[30dvh] md:max-h-[45dvh] overflow-y-auto overscroll-contain rounded-xl mb-1", children: /* @__PURE__ */ jsx(
+        StackedVariableInputs,
+        {
+          conversationId,
+          disabled: isExecuting,
+          minimal: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: inputBoxClass, children: [
+        resources.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(
+          ResourceChips,
+          {
+            resources,
+            onRemove: (index) => {
+              const r = resources[index];
+              if (!r) return;
+              dispatch(
+                removeResource({
+                  conversationId,
+                  resourceId: r.resourceId
+                })
+              );
+            },
+            onPreview: (resource, _index) => {
+              setPreviewResource(resource);
+              setPreviewSheetOpen(true);
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          showResourcePicker && /* @__PURE__ */ jsx(
+            PlusAttachMenu,
+            {
+              conversationId,
+              foldToolbarExtras: compact,
+              onDebugClick: isAdmin ? openDebugWindow : void 0,
+              showDebugActive: isAdmin,
+              side: "top",
+              align: "start",
+              trigger: isUploading ? /* @__PURE__ */ jsx(
+                TapTargetButtonTransparent,
+                {
+                  ariaLabel: "Uploading...",
+                  icon: /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-muted-foreground" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                PlusTapButton,
+                {
+                  variant: "transparent",
+                  ariaLabel: "Add attachments"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: content,
+              onChange: (e) => dispatch(
+                setUserInputText({
+                  conversationId,
+                  text: e.target.value
+                })
+              ),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled: isDisabled,
+              className: [
+                "flex-1 resize-none bg-transparent text-[16px] text-foreground placeholder:text-muted-foreground/70",
+                "focus:outline-none overflow-y-auto leading-[18px]",
+                singleLine ? "py-[7px] min-h-[34px] max-h-[34px]" : "py-[9px] min-h-[36px] max-h-[200px]"
+              ].join(" "),
+              rows: 1
+            }
+          ),
+          showSettings && /* @__PURE__ */ jsx(
+            RunControlsMenu,
+            {
+              conversationId,
+              variant: "gear",
+              side: "top",
+              align: "end"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputActionButtons,
+            {
+              showVoice,
+              onTranscriptionComplete: handleTranscriptionComplete,
+              isExecuting,
+              isDisabled,
+              isUploading,
+              sendButtonVariant,
+              onSubmit: () => handleSubmit(),
+              onDebugClick: isAdmin ? openDebugWindow : void 0
+            }
+          )
+        ] }),
+        showModelPicker && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(
+          ModelListDropdown,
           {
-            ariaLabel: "Uploading...",
-            icon: /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin text-muted-foreground" })
+            value: currentModelId,
+            onValueChange: handleModelSelect,
+            pinnedOfferingId,
+            onOfferingPinChange: handleOfferingPinChange,
+            inputModalities: [],
+            className: "text-muted-foreground hover:text-foreground"
           }
-        ) : /* @__PURE__ */ React.createElement(
-          PlusTapButton,
+        ) }),
+        showSubmitOnEnterToggle && !touchOnly && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-3", children: /* @__PURE__ */ jsxs(
+          "button",
           {
-            variant: "transparent",
-            ariaLabel: "Add attachments"
+            className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground",
+            onClick: () => setSubmitOnEnter(!submitOnEnter),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `w-6 h-3.5 rounded-full transition-colors ${submitOnEnter ? "bg-primary" : "bg-muted"} relative`,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `absolute top-0.5 w-2.5 h-2.5 rounded-full bg-background border border-primary transition-transform ${submitOnEnter ? "translate-x-[13px]" : "translate-x-0.5"}`
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(CornerDownLeft, { className: "w-3 h-3" })
+            ]
           }
-        )
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "textarea",
-      {
-        ref: textareaRef,
-        value: content,
-        onChange: (e) => dispatch(
-          setUserInputText({
-            conversationId,
-            text: e.target.value
-          })
-        ),
-        onKeyDown: handleKeyDown,
-        placeholder,
-        disabled: isDisabled,
-        className: [
-          "flex-1 resize-none bg-transparent text-[16px] text-foreground placeholder:text-muted-foreground/70",
-          "focus:outline-none overflow-y-auto leading-[18px]",
-          singleLine ? "py-[7px] min-h-[34px] max-h-[34px]" : "py-[9px] min-h-[36px] max-h-[200px]"
-        ].join(" "),
-        rows: 1
-      }
-    ), showSettings && /* @__PURE__ */ React.createElement(
-      RunControlsMenu,
-      {
-        conversationId,
-        variant: "gear",
-        side: "top",
-        align: "end"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputActionButtons,
-      {
-        showVoice,
-        onTranscriptionComplete: handleTranscriptionComplete,
-        isExecuting,
-        isDisabled,
-        isUploading,
-        sendButtonVariant,
-        onSubmit: () => handleSubmit(),
-        onDebugClick: isAdmin ? openDebugWindow : void 0
-      }
-    )), showModelPicker && /* @__PURE__ */ React.createElement("div", { className: "px-3" }, /* @__PURE__ */ React.createElement(
-      ModelListDropdown,
-      {
-        value: currentModelId,
-        onValueChange: handleModelSelect,
-        pinnedOfferingId,
-        onOfferingPinChange: handleOfferingPinChange,
-        inputModalities: [],
-        className: "text-muted-foreground hover:text-foreground"
-      }
-    )), showSubmitOnEnterToggle && !touchOnly && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 px-3" }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        className: "flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground",
-        onClick: () => setSubmitOnEnter(!submitOnEnter)
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `w-6 h-3.5 rounded-full transition-colors ${submitOnEnter ? "bg-primary" : "bg-muted"} relative`
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
+        ) })
+      ] }),
+      showFooter && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2 pb-1", children: [
+        hasVariables ? /* @__PURE__ */ jsx(
+          BackToStartButton,
           {
-            className: `absolute top-0.5 w-2.5 h-2.5 rounded-full bg-background border border-primary transition-transform ${submitOnEnter ? "translate-x-[13px]" : "translate-x-0.5"}`
+            onBack: onBackToStart ?? (() => {
+            }),
+            agentName
           }
-        )
-      ),
-      /* @__PURE__ */ React.createElement(CornerDownLeft, { className: "w-3 h-3" })
-    ))), showFooter && /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mt-2 pb-1" }, hasVariables ? /* @__PURE__ */ React.createElement(
-      BackToStartButton,
-      {
-        onBack: onBackToStart ?? (() => {
-        }),
-        agentName
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      ResponseModeButtons,
-      {
-        disabled: isExecuting,
-        selectedAgentId: null,
-        onModeSelect: onAgentModeSelect ?? (() => {
-        })
-      }
-    ), hasVariables && /* @__PURE__ */ React.createElement(Button, { variant: "outline", icon: useGuidedVars ? /* @__PURE__ */ React.createElement(List, null) : /* @__PURE__ */ React.createElement(Layers, null), onClick: () => router.push(toggleUrl), title: useGuidedVars ? "Switch to classic variable view" : "Switch to guided variable view", "aria-label": useGuidedVars ? "Switch to classic variable view" : "Switch to guided variable view" })))
+        ) : /* @__PURE__ */ jsx(
+          ResponseModeButtons,
+          {
+            disabled: isExecuting,
+            selectedAgentId: null,
+            onModeSelect: onAgentModeSelect ?? (() => {
+            })
+          }
+        ),
+        hasVariables && /* @__PURE__ */ jsx(Button, { variant: "outline", icon: useGuidedVars ? /* @__PURE__ */ jsx(List, {}) : /* @__PURE__ */ jsx(Layers, {}), onClick: () => router.push(toggleUrl), title: useGuidedVars ? "Switch to classic variable view" : "Switch to guided variable view", "aria-label": useGuidedVars ? "Switch to classic variable view" : "Switch to guided variable view" })
+      ] })
+    ] })
   );
 }
 var ConversationInput_default = ConversationInput;

package/dist/cx-chat/components/user-input/InpuControlButtons.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { ChevronLeft } from "lucide-react";
 import { Chip, ChipSet, Button } from "@ai-matrx/design-system/controls";
 import { useResponseModeAgents } from "../agent/useResponseModeAgents.js";
@@ -9,38 +10,38 @@ function ResponseModeButtons({
 }) {
   const { modes, modeForAgent } = useResponseModeAgents();
   const activeMode = selectedAgentId ? modeForAgent(selectedAgentId) : "text";
-  return /* @__PURE__ */ React.createElement(ChipSet, { className: "justify-center" }, modes.map((entry) => {
+  return /* @__PURE__ */ jsx(ChipSet, { className: "justify-center", children: modes.map((entry) => {
     const isActive = activeMode === entry.mode;
     const isMapped = entry.agentId !== null;
     const unresolved = entry.mandateKey !== null && entry.error !== null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Chip,
       {
-        key: entry.mode,
         asChild: true,
         pressed: isActive,
         label: entry.mode,
-        title: unresolved ? `Not available yet \u2014 no agent is assigned (${entry.mandateKey})` : void 0
+        title: unresolved ? `Not available yet \u2014 no agent is assigned (${entry.mandateKey})` : void 0,
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (disabled || !entry.agentId) return;
+              onModeSelect?.(entry.mode, entry.agentId);
+            },
+            disabled: disabled || !isMapped
+          }
+        )
       },
-      /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => {
-            if (disabled || !entry.agentId) return;
-            onModeSelect?.(entry.mode, entry.agentId);
-          },
-          disabled: disabled || !isMapped
-        }
-      )
+      entry.mode
     );
-  }));
+  }) });
 }
 function BackToStartButton({
   onBack,
   agentName
 }) {
-  return /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronLeft, null), onClick: onBack, title: "Back to agent selection" }, agentName || "Back");
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronLeft, {}), onClick: onBack, title: "Back to agent selection", children: agentName || "Back" });
 }
 export {
   BackToStartButton,

package/dist/cx-chat/components/user-input/InputActionButtons.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2, Bug } from "lucide-react";
 import { TapTargetButtonSolid } from "@ai-matrx/tap-target";
 import { ArrowUpTapButton } from "@ai-matrx/tap-target/buttons";
@@ -17,34 +18,38 @@ function InputActionButtons({
   const bgColor = sendButtonVariant === "gray" ? "bg-muted" : "bg-blue-600";
   const hoverBgColor = sendButtonVariant === "gray" ? "hover:bg-muted/80" : "hover:bg-blue-700";
   const iconColor = sendButtonVariant === "gray" ? "text-foreground" : "text-white";
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, onDebugClick && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Bug, null), glyphTone: "warning", onClick: onDebugClick, title: "Debug instance state", "aria-label": "Debug instance state" }), showVoice && /* @__PURE__ */ React.createElement(
-    MicrophoneIconButton,
-    {
-      variant: "icon-only",
-      size: "md",
-      onTranscriptionComplete
-    }
-  ), isExecuting ? /* @__PURE__ */ React.createElement(
-    TapTargetButtonSolid,
-    {
-      ariaLabel: "Sending...",
-      bgColor,
-      hoverBgColor,
-      iconColor,
-      icon: /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin" })
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    ArrowUpTapButton,
-    {
-      variant: "solid",
-      onClick: onSubmit,
-      disabled: isDisabled || isUploading,
-      ariaLabel: "Send message",
-      bgColor,
-      hoverBgColor,
-      iconColor
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    onDebugClick && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Bug, {}), glyphTone: "warning", onClick: onDebugClick, title: "Debug instance state", "aria-label": "Debug instance state" }),
+    showVoice && /* @__PURE__ */ jsx(
+      MicrophoneIconButton,
+      {
+        variant: "icon-only",
+        size: "md",
+        onTranscriptionComplete
+      }
+    ),
+    isExecuting ? /* @__PURE__ */ jsx(
+      TapTargetButtonSolid,
+      {
+        ariaLabel: "Sending...",
+        bgColor,
+        hoverBgColor,
+        iconColor,
+        icon: /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin" })
+      }
+    ) : /* @__PURE__ */ jsx(
+      ArrowUpTapButton,
+      {
+        variant: "solid",
+        onClick: onSubmit,
+        disabled: isDisabled || isUploading,
+        ariaLabel: "Send message",
+        bgColor,
+        hoverBgColor,
+        iconColor
+      }
+    )
+  ] });
 }
 export {
   InputActionButtons

package/dist/cx-chat/components/user-input/StackedVariableInputs.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import { ChevronRight, ChevronUp } from "lucide-react";
 import { Label } from "@ai-matrx/design-system";
 import {
@@ -65,11 +66,11 @@ function StackedVariableInputs({
   if (variableDefaults.length === 0) {
     return null;
   }
-  const variableInputs = /* @__PURE__ */ React.createElement(React.Fragment, null, variableDefaults.map((variable, index) => {
+  const variableInputs = /* @__PURE__ */ jsx(Fragment, { children: variableDefaults.map((variable, index) => {
     const isExpanded = expandedVariable === variable.name;
     const rawValue = values[variable.name] ?? variable.defaultValue ?? "";
     const value = typeof rawValue === "string" ? rawValue : String(rawValue ?? "");
-    return /* @__PURE__ */ React.createElement("div", { key: variable.name }, isExpanded ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { children: isExpanded ? /* @__PURE__ */ jsxs(
       Popover,
       {
         open: expandedVariable === variable.name,
@@ -77,79 +78,92 @@ function StackedVariableInputs({
           if (!open) {
             handleExpandedVariableChange(null);
           }
-        }
-      },
-      /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "w-full flex items-center gap-2 pl-3 pr-3 h-10 bg-background border-b border-border cursor-pointer hover:bg-accent transition-colors group",
-          onClick: () => handleExpandedVariableChange(variable.name)
-        },
-        /* @__PURE__ */ React.createElement(Label, { className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer" }, variableRunLabel(variable), ":"),
-        /* @__PURE__ */ React.createElement("div", { className: "flex-1 text-xs text-foreground min-w-0" }, value ? /* @__PURE__ */ React.createElement("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis block" }, value.replace(/\n/g, " \u21B5 ")) : /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, variable.helpText || "Enter value...")),
-        /* @__PURE__ */ React.createElement(ChevronUp, { className: "w-3.5 h-3.5 text-primary flex-shrink-0 transition-colors" })
-      )),
-      /* @__PURE__ */ React.createElement(
-        PopoverContent,
-        {
-          className: "w-[500px] max-h-[500px] p-3 border-border overflow-y-auto scrollbar-thin",
-          align: "center",
-          side: "top",
-          sideOffset: 8
         },
-        /* @__PURE__ */ React.createElement(
-          VariableInputComponent,
-          {
-            value,
-            onChange: (newValue) => handleVariableChange(variable.name, newValue),
-            variableName: variable.name,
-            label: variableRunLabel(variable),
-            customComponent: variable.customComponent,
-            onRequestClose: () => handleExpandedVariableChange(null),
-            helpText: variable.helpText,
-            compact
-          }
-        )
-      )
-    ) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 pl-3 pr-3 h-10 bg-background border-b border-border hover:bg-accent transition-colors focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 group" }, /* @__PURE__ */ React.createElement(
-      Label,
-      {
-        className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer",
-        onClick: () => handleExpandedVariableChange(variable.name)
-      },
-      variableRunLabel(variable),
-      ":"
-    ), /* @__PURE__ */ React.createElement(
-      "input",
-      {
-        type: "text",
-        value: value.includes("\n") ? value.replace(/\n/g, " \u21B5 ") : value,
-        onChange: (e) => handleVariableChange(variable.name, e.target.value),
-        onKeyDown: (e) => handleVariableKeyDown(e, index),
-        placeholder: variable.helpText || "Enter value...",
-        className: "flex-1 text-base md:text-xs bg-transparent border-none outline-none focus:outline-none text-foreground placeholder:text-muted-foreground min-w-0",
-        "data-variable-index": index,
-        disabled
+        children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "w-full flex items-center gap-2 pl-3 pr-3 h-10 bg-background border-b border-border cursor-pointer hover:bg-accent transition-colors group",
+              onClick: () => handleExpandedVariableChange(variable.name),
+              children: [
+                /* @__PURE__ */ jsxs(Label, { className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer", children: [
+                  variableRunLabel(variable),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 text-xs text-foreground min-w-0", children: value ? /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap overflow-hidden text-ellipsis block", children: value.replace(/\n/g, " \u21B5 ") }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: variable.helpText || "Enter value..." }) }),
+                /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5 text-primary flex-shrink-0 transition-colors" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "w-[500px] max-h-[500px] p-3 border-border overflow-y-auto scrollbar-thin",
+              align: "center",
+              side: "top",
+              sideOffset: 8,
+              children: /* @__PURE__ */ jsx(
+                VariableInputComponent,
+                {
+                  value,
+                  onChange: (newValue) => handleVariableChange(variable.name, newValue),
+                  variableName: variable.name,
+                  label: variableRunLabel(variable),
+                  customComponent: variable.customComponent,
+                  onRequestClose: () => handleExpandedVariableChange(null),
+                  helpText: variable.helpText,
+                  compact
+                }
+              )
+            }
+          )
+        ]
       }
-    ), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: () => handleExpandedVariableChange(variable.name), disabled, title: "Expand to full editor", "aria-label": "Expand to full editor" })));
-  }));
+    ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-3 pr-3 h-10 bg-background border-b border-border hover:bg-accent transition-colors focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 group", children: [
+      /* @__PURE__ */ jsxs(
+        Label,
+        {
+          className: "text-xs font-medium text-muted-foreground whitespace-nowrap flex-shrink-0 cursor-pointer",
+          onClick: () => handleExpandedVariableChange(variable.name),
+          children: [
+            variableRunLabel(variable),
+            ":"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: value.includes("\n") ? value.replace(/\n/g, " \u21B5 ") : value,
+          onChange: (e) => handleVariableChange(variable.name, e.target.value),
+          onKeyDown: (e) => handleVariableKeyDown(e, index),
+          placeholder: variable.helpText || "Enter value...",
+          className: "flex-1 text-base md:text-xs bg-transparent border-none outline-none focus:outline-none text-foreground placeholder:text-muted-foreground min-w-0",
+          "data-variable-index": index,
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(ChevronRight, {}), onClick: () => handleExpandedVariableChange(variable.name), disabled, title: "Expand to full editor", "aria-label": "Expand to full editor" })
+    ] }) }, variable.name);
+  }) });
   if (minimal) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: "bg-card rounded-xl border border-border overflow-hidden",
-        "data-variable-inputs": true
-      },
-      variableInputs
+        "data-variable-inputs": true,
+        children: variableInputs
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "bg-card rounded-xl border border-border overflow-hidden",
-      "data-variable-inputs": true
-    },
-    variableInputs
+      "data-variable-inputs": true,
+      children: variableInputs
+    }
   );
 }
 var StackedVariableInputs_default = StackedVariableInputs;