@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/agent-widgets/chat-assistant/AgentChatAssistant.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { useAppDispatch, useAppSelector } from "../../../../store/hooks.js";
 import { selectInstanceDisplayTitle } from "../../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
@@ -103,7 +104,7 @@ function AgentChatAssistant({
   }, [onClose]);
   const bottomOffset = 16 + stackIndex * 56;
   const rightOffset = 16 + stackIndex * 340;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `fixed z-[200] transition-all duration-300 ${isExiting ? "opacity-0 translate-y-4" : "opacity-100 translate-y-0"}`,
@@ -112,36 +113,48 @@ function AgentChatAssistant({
         right: `${rightOffset}px`,
         transform: `translate(${position.x}px, ${position.y}px)`,
         zIndex: 200 + stackIndex
-      }
-    },
-    isOpen && /* @__PURE__ */ React.createElement("div", { className: "mb-2 animate-in slide-in-from-bottom-4 fade-in-0 duration-300" }, /* @__PURE__ */ React.createElement("div", { className: "w-80 max-h-[75dvh] rounded-xl overflow-hidden flex flex-col shadow-2xl border border-border/50 bg-background/80 backdrop-blur-xl" }, /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "flex items-center justify-between px-3 py-1.5 border-b border-border/40 cursor-grab active:cursor-grabbing touch-none select-none shrink-0 bg-muted/20",
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp
       },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement(GripHorizontal, { className: "w-3 h-3 text-muted-foreground/40 shrink-0" }), isExecuting && /* @__PURE__ */ React.createElement("div", { className: "w-1.5 h-1.5 rounded-full bg-primary animate-pulse shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-medium text-foreground/80 truncate" }, title)),
-      /* @__PURE__ */ React.createElement("div", { className: "shrink-0", "data-no-drag": true }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), "aria-label": "Dismiss", onClick: handleDismiss }))
-    ), /* @__PURE__ */ React.createElement(
-      AssistantCardStack,
-      {
-        conversationId,
-        surfaceKey
-      }
-    ), /* @__PURE__ */ React.createElement(CompactAssistantInput, { conversationId }))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React.createElement(
-      AssistantControlBar,
-      {
-        isOpen,
-        onToggle: handleToggle,
-        unreadCount,
-        heartbeatInterval,
-        onHeartbeatUp: increaseHeartbeat,
-        onHeartbeatDown: decreaseHeartbeat
-      }
-    ))
+      children: [
+        isOpen && /* @__PURE__ */ jsx("div", { className: "mb-2 animate-in slide-in-from-bottom-4 fade-in-0 duration-300", children: /* @__PURE__ */ jsxs("div", { className: "w-80 max-h-[75dvh] rounded-xl overflow-hidden flex flex-col shadow-2xl border border-border/50 bg-background/80 backdrop-blur-xl", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between px-3 py-1.5 border-b border-border/40 cursor-grab active:cursor-grabbing touch-none select-none shrink-0 bg-muted/20",
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ jsx(GripHorizontal, { className: "w-3 h-3 text-muted-foreground/40 shrink-0" }),
+                  isExecuting && /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-primary animate-pulse shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground/80 truncate", children: title })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "shrink-0", "data-no-drag": true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Dismiss", onClick: handleDismiss }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AssistantCardStack,
+            {
+              conversationId,
+              surfaceKey
+            }
+          ),
+          /* @__PURE__ */ jsx(CompactAssistantInput, { conversationId })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          AssistantControlBar,
+          {
+            isOpen,
+            onToggle: handleToggle,
+            unreadCount,
+            heartbeatInterval,
+            onHeartbeatUp: increaseHeartbeat,
+            onHeartbeatDown: decreaseHeartbeat
+          }
+        ) })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/agent-widgets/chat-assistant/AssistantCardStack.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useMemo } from "react";
 import { AgentAssistantMessage } from "../../../../ui/lazy/AgentAssistantMessage.js";
 import { useAppSelector, useAppDispatch } from "../../../../store/hooks.js";
@@ -73,50 +74,57 @@ function AssistantCardStack({
   const hasVariables = variableDefs.length > 0;
   const hasMessages = displayMessages.length > 0 || showPlanningIndicator;
   const showVariables = hasVariables && (showVariablePanel || !hasMessages);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto scroll-smooth flex flex-col" }, showVariables && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(
-    ChatAssistantVariableInputs,
-    {
-      conversationId,
-      onSubmit: handleVariableSubmit
-    }
-  )), hasMessages ? /* @__PURE__ */ React.createElement("div", { className: "flex-1 space-y-3 px-3 py-2" }, displayMessages.map((msg) => {
-    if (msg.role === "user") {
-      return /* @__PURE__ */ React.createElement(
-        AgentUserMessage,
-        {
-          key: msg.key,
-          conversationId,
-          messageId: msg.messageId,
-          surfaceKey,
-          compact: true
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 min-h-0 overflow-y-auto scroll-smooth flex flex-col", children: [
+    showVariables && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
+      ChatAssistantVariableInputs,
+      {
+        conversationId,
+        onSubmit: handleVariableSubmit
+      }
+    ) }),
+    hasMessages ? /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3 px-3 py-2", children: [
+      displayMessages.map((msg) => {
+        if (msg.role === "user") {
+          return /* @__PURE__ */ jsx(
+            AgentUserMessage,
+            {
+              conversationId,
+              messageId: msg.messageId,
+              surfaceKey,
+              compact: true
+            },
+            msg.key
+          );
         }
-      );
-    }
-    if (msg.role === "assistant") {
-      return /* @__PURE__ */ React.createElement(
-        AgentAssistantMessage,
+        if (msg.role === "assistant") {
+          return /* @__PURE__ */ jsx(
+            AgentAssistantMessage,
+            {
+              conversationId,
+              requestId: msg.requestId ?? void 0,
+              messageId: msg.messageId,
+              isStreamActive: msg.isStreamActive,
+              surfaceKey,
+              compact: true
+            },
+            msg.key
+          );
+        }
+        return null;
+      }),
+      showPlanningIndicator && /* @__PURE__ */ jsx("div", { className: "px-1 py-1", children: /* @__PURE__ */ jsx(
+        AgentPlanningIndicator,
         {
-          key: msg.key,
-          conversationId,
-          requestId: msg.requestId ?? void 0,
-          messageId: msg.messageId,
-          isStreamActive: msg.isStreamActive,
-          surfaceKey,
-          compact: true
+          compact: true,
+          label: phase === "reasoning" ? "Reasoning..." : void 0
         }
-      );
-    }
-    return null;
-  }), showPlanningIndicator && /* @__PURE__ */ React.createElement("div", { className: "px-1 py-1" }, /* @__PURE__ */ React.createElement(
-    AgentPlanningIndicator,
-    {
-      compact: true,
-      label: phase === "reasoning" ? "Reasoning..." : void 0
-    }
-  )), /* @__PURE__ */ React.createElement("div", { ref: bottomRef })) : (
-    /* Empty state */
-    !hasVariables && /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex items-center justify-center px-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground/50 text-center" }, "Send a message to get started"))
-  ));
+      ) }),
+      /* @__PURE__ */ jsx("div", { ref: bottomRef })
+    ] }) : (
+      /* Empty state */
+      !hasVariables && /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center px-4", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground/50 text-center", children: "Send a message to get started" }) })
+    )
+  ] });
 }
 export {
   AssistantCardStack

package/dist/agents/components/agent-widgets/chat-assistant/AssistantControlBar.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@ai-matrx/design-system/controls";
 import {
   MessageSquare,
@@ -17,51 +18,64 @@ function AssistantControlBar({
   onHistoryToggle,
   onSettingsToggle
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, isOpen && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5 mr-1 animate-in fade-in-0 slide-in-from-right-2 duration-200" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0 bg-muted/50 rounded-lg border border-border" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(ChevronDown, null),
-      "aria-label": "Decrease frequency",
-      variant: "quiet",
-      onClick: onHeartbeatDown,
-      title: "Decrease frequency"
-    }
-  ), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground tabular-nums w-7 text-center" }, heartbeatInterval > 0 ? `${heartbeatInterval}s` : "off"), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(ChevronUp, null),
-      "aria-label": "Increase frequency",
-      variant: "quiet",
-      onClick: onHeartbeatUp,
-      title: "Increase frequency"
-    }
-  )), onHistoryToggle && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(History, null),
-      "aria-label": "History",
-      variant: "quiet",
-      onClick: onHistoryToggle,
-      title: "History"
-    }
-  ), onSettingsToggle && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      icon: /* @__PURE__ */ React.createElement(Settings, null),
-      "aria-label": "Settings",
-      variant: "quiet",
-      onClick: onSettingsToggle,
-      title: "Settings"
-    }
-  )), /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: onToggle,
-      className: "relative rounded-full p-2.5 shadow-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2"
-    },
-    /* @__PURE__ */ React.createElement(MessageSquare, { className: "w-5 h-5" }),
-    unreadCount > 0 && !isOpen && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold rounded-full bg-destructive text-destructive-foreground animate-in zoom-in-50 duration-200" }, unreadCount > 99 ? "99+" : unreadCount)
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 mr-1 animate-in fade-in-0 slide-in-from-right-2 duration-200", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0 bg-muted/50 rounded-lg border border-border", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+            "aria-label": "Decrease frequency",
+            variant: "quiet",
+            onClick: onHeartbeatDown,
+            title: "Decrease frequency"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground tabular-nums w-7 text-center", children: heartbeatInterval > 0 ? `${heartbeatInterval}s` : "off" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+            "aria-label": "Increase frequency",
+            variant: "quiet",
+            onClick: onHeartbeatUp,
+            title: "Increase frequency"
+          }
+        )
+      ] }),
+      onHistoryToggle && /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(History, {}),
+          "aria-label": "History",
+          variant: "quiet",
+          onClick: onHistoryToggle,
+          title: "History"
+        }
+      ),
+      onSettingsToggle && /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(Settings, {}),
+          "aria-label": "Settings",
+          variant: "quiet",
+          onClick: onSettingsToggle,
+          title: "Settings"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: onToggle,
+        className: "relative rounded-full p-2.5 shadow-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2",
+        children: [
+          /* @__PURE__ */ jsx(MessageSquare, { className: "w-5 h-5" }),
+          unreadCount > 0 && !isOpen && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold rounded-full bg-destructive text-destructive-foreground animate-in zoom-in-50 duration-200", children: unreadCount > 99 ? "99+" : unreadCount })
+        ]
+      }
+    )
+  ] });
 }
 export {
   AssistantControlBar

package/dist/agents/components/agent-widgets/chat-assistant/AssistantMessageCard.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Webhook } from "lucide-react";
 import { RichDocument } from "@ai-matrx/rich-content/rich-document/RichDocument";
 function AssistantMessageCard({
@@ -6,20 +7,26 @@ function AssistantMessageCard({
   timestamp,
   isStreaming
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "w-72 bg-card border border-border rounded-xl shadow-sm animate-in slide-in-from-bottom-2 duration-200 overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "p-0.5 rounded-full bg-primary/10 shrink-0 mt-0.5" }, /* @__PURE__ */ React.createElement(Webhook, { className: "w-3 h-3 text-primary" })), /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 text-xs leading-relaxed [&_p]:m-0 [&_pre]:text-[10px] [&_code]:text-[10px] overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    RichDocument,
-    {
-      imagePolicy: "ai",
-      content,
-      source: { type: "raw" },
-      isStreamActive: isStreaming,
-      actionsVariant: isStreaming ? "none" : "icon-only",
-      actionsPosition: "top-right",
-      actionsBehavior: "hover-only",
-      actions: { exclude: ["announcements", "preferences"] },
-      hideCopyButton: true
-    }
-  )))), timestamp && /* @__PURE__ */ React.createElement("div", { className: "px-3 pb-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground" }, timestamp)));
+  return /* @__PURE__ */ jsxs("div", { className: "w-72 bg-card border border-border rounded-xl shadow-sm animate-in slide-in-from-bottom-2 duration-200 overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-0.5 rounded-full bg-primary/10 shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(Webhook, { className: "w-3 h-3 text-primary" }) }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-xs leading-relaxed [&_p]:m-0 [&_pre]:text-[10px] [&_code]:text-[10px] overflow-hidden", children: /* @__PURE__ */ jsx(
+        RichDocument,
+        {
+          imagePolicy: "ai",
+          content,
+          source: { type: "raw" },
+          isStreamActive: isStreaming,
+          actionsVariant: isStreaming ? "none" : "icon-only",
+          actionsPosition: "top-right",
+          actionsBehavior: "hover-only",
+          actions: { exclude: ["announcements", "preferences"] },
+          hideCopyButton: true
+        }
+      ) })
+    ] }) }),
+    timestamp && /* @__PURE__ */ jsx("div", { className: "px-3 pb-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: timestamp }) })
+  ] });
 }
 export {
   AssistantMessageCard

package/dist/agents/components/agent-widgets/chat-assistant/ChatAssistantVariableInputs.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../../store/hooks.js";
 import { setUserVariableValue } from "../../../redux/execution-system/instance-variable-values/instance-variable-values.slice.js";
@@ -24,16 +25,24 @@ function ChatAssistantVariableInputs({
     const val = userValues[def.name];
     return val !== void 0 && val !== null && val !== "";
   }).length;
-  return /* @__PURE__ */ React.createElement("div", { className: "border-b border-border/40" }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: isExpanded ? /* @__PURE__ */ React.createElement(ChevronDown, null) : /* @__PURE__ */ React.createElement(ChevronRight, null), onClick: () => setIsExpanded(!isExpanded), className: "w-full" }, "Quick Questions", filledCount, "/", variableDefs.length), isExpanded && /* @__PURE__ */ React.createElement("div", { className: "px-3 pb-2 space-y-1.5" }, variableDefs.map((variable) => /* @__PURE__ */ React.createElement(
-    MicroVariableRow,
-    {
-      key: variable.name,
-      conversationId,
-      variable,
-      value: userValues[variable.name],
-      dispatch
-    }
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/40", children: [
+    /* @__PURE__ */ jsxs(Button, { variant: "quiet", icon: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}), onClick: () => setIsExpanded(!isExpanded), className: "w-full", children: [
+      "Quick Questions",
+      filledCount,
+      "/",
+      variableDefs.length
+    ] }),
+    isExpanded && /* @__PURE__ */ jsx("div", { className: "px-3 pb-2 space-y-1.5", children: variableDefs.map((variable) => /* @__PURE__ */ jsx(
+      MicroVariableRow,
+      {
+        conversationId,
+        variable,
+        value: userValues[variable.name],
+        dispatch
+      },
+      variable.name
+    )) })
+  ] });
 }
 function MicroVariableRow({
   conversationId,
@@ -48,60 +57,65 @@ function MicroVariableRow({
       setUserVariableValue({ conversationId, name: variable.name, value: v })
     );
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      className: "text-[10px] font-medium text-muted-foreground shrink-0 w-16 truncate",
-      title: variableRunLabel(variable)
-    },
-    variableRunLabel(variable),
-    variable.required && /* @__PURE__ */ React.createElement("span", { className: "text-destructive" }, "*")
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, type === "textarea" ? /* @__PURE__ */ React.createElement(MicroText, { value: value ?? "", onChange: setValue }) : type === "toggle" ? /* @__PURE__ */ React.createElement(
-    MicroToggle,
-    {
-      value,
-      labels: comp?.toggleValues ?? ["On", "Off"],
-      onChange: setValue
-    }
-  ) : type === "radio" ? /* @__PURE__ */ React.createElement(
-    MicroChips,
-    {
-      options: comp?.options ?? [],
-      selected: value ?? "",
-      onSelect: setValue,
-      multi: false
-    }
-  ) : type === "checkbox" ? /* @__PURE__ */ React.createElement(
-    MicroChips,
-    {
-      options: comp?.options ?? [],
-      selected: value ?? [],
-      onSelect: setValue,
-      multi: true
-    }
-  ) : type === "select" ? /* @__PURE__ */ React.createElement(
-    MicroSelect,
-    {
-      options: comp?.options ?? [],
-      value: value ?? "",
-      onChange: setValue
-    }
-  ) : type === "number" ? /* @__PURE__ */ React.createElement(
-    MicroNumber,
-    {
-      value: value ?? comp?.min ?? 0,
-      min: comp?.min,
-      max: comp?.max,
-      step: comp?.step ?? 1,
-      onChange: setValue
-    }
-  ) : /* @__PURE__ */ React.createElement(MicroText, { value: value ?? "", onChange: setValue })));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "text-[10px] font-medium text-muted-foreground shrink-0 w-16 truncate",
+        title: variableRunLabel(variable),
+        children: [
+          variableRunLabel(variable),
+          variable.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: type === "textarea" ? /* @__PURE__ */ jsx(MicroText, { value: value ?? "", onChange: setValue }) : type === "toggle" ? /* @__PURE__ */ jsx(
+      MicroToggle,
+      {
+        value,
+        labels: comp?.toggleValues ?? ["On", "Off"],
+        onChange: setValue
+      }
+    ) : type === "radio" ? /* @__PURE__ */ jsx(
+      MicroChips,
+      {
+        options: comp?.options ?? [],
+        selected: value ?? "",
+        onSelect: setValue,
+        multi: false
+      }
+    ) : type === "checkbox" ? /* @__PURE__ */ jsx(
+      MicroChips,
+      {
+        options: comp?.options ?? [],
+        selected: value ?? [],
+        onSelect: setValue,
+        multi: true
+      }
+    ) : type === "select" ? /* @__PURE__ */ jsx(
+      MicroSelect,
+      {
+        options: comp?.options ?? [],
+        value: value ?? "",
+        onChange: setValue
+      }
+    ) : type === "number" ? /* @__PURE__ */ jsx(
+      MicroNumber,
+      {
+        value: value ?? comp?.min ?? 0,
+        min: comp?.min,
+        max: comp?.max,
+        step: comp?.step ?? 1,
+        onChange: setValue
+      }
+    ) : /* @__PURE__ */ jsx(MicroText, { value: value ?? "", onChange: setValue }) })
+  ] });
 }
 function MicroText({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "input",
     {
       type: "text",
@@ -117,7 +131,7 @@ function MicroToggle({
   labels,
   onChange
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-0.5" }, labels.map((label) => /* @__PURE__ */ React.createElement(Button, { variant: "outline", pressed: !!(value === label), key: label, onClick: () => onChange(label), className: "flex-1" }, label)));
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: labels.map((label) => /* @__PURE__ */ jsx(Button, { variant: "outline", pressed: !!(value === label), onClick: () => onChange(label), className: "flex-1", children: label }, label)) });
 }
 function MicroChips({
   options,
@@ -136,23 +150,25 @@ function MicroChips({
       onSelect(opt);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap gap-0.5" }, options.map((opt) => /* @__PURE__ */ React.createElement(Button, { variant: "outline", pressed: !!isSelected(opt), key: opt, onClick: () => handleClick(opt) }, opt)));
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-0.5", children: options.map((opt) => /* @__PURE__ */ jsx(Button, { variant: "outline", pressed: !!isSelected(opt), onClick: () => handleClick(opt), children: opt }, opt)) });
 }
 function MicroSelect({
   options,
   value,
   onChange
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "select",
     {
       className: "w-full h-6 px-1.5 text-[11px] bg-muted/40 border border-border/60 rounded focus:outline-none focus:ring-1 focus:ring-primary/40 appearance-none",
       style: { fontSize: "16px" },
       value,
-      onChange: (e) => onChange(e.target.value)
-    },
-    /* @__PURE__ */ React.createElement("option", { value: "" }, "Select..."),
-    options.map((opt) => /* @__PURE__ */ React.createElement("option", { key: opt, value: opt }, opt))
+      onChange: (e) => onChange(e.target.value),
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+      ]
+    }
   );
 }
 function MicroNumber({
@@ -172,7 +188,11 @@ function MicroNumber({
     const clamped = max !== void 0 ? Math.min(max, next) : next;
     onChange(clamped);
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5" }, /* @__PURE__ */ React.createElement(Button, { variant: "outline", icon: /* @__PURE__ */ React.createElement(Minus, null), "aria-label": "Decrease", onClick: decrement }), /* @__PURE__ */ React.createElement("span", { className: "w-8 text-center text-[10px] font-medium tabular-nums" }, value), /* @__PURE__ */ React.createElement(Button, { variant: "outline", icon: /* @__PURE__ */ React.createElement(Plus, null), "aria-label": "Increase", onClick: increment }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Minus, {}), "aria-label": "Decrease", onClick: decrement }),
+    /* @__PURE__ */ jsx("span", { className: "w-8 text-center text-[10px] font-medium tabular-nums", children: value }),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Plus, {}), "aria-label": "Increase", onClick: increment })
+  ] });
 }
 export {
   ChatAssistantVariableInputs