@xpert-ai/chatkit-ui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -66,8 +66,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
-var React22 = __toESM(require("react"), 1);
-var import_lucide_react11 = require("lucide-react");
+var React26 = __toESM(require("react"), 1);
+var import_lucide_react15 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -681,6 +681,10 @@ function ParentMessengerProvider({
           }
           return;
         }
+        const requestHumanInput = params.planMode === true || params.state?.[import_chatkit_types2.STATE_VARIABLE_HUMAN]?.planMode === true ? {
+          ...humanInput,
+          planMode: true
+        } : humanInput;
         const newMessage = {
           id: createMessageId(),
           type: "human",
@@ -694,11 +698,11 @@ function ParentMessengerProvider({
         const requestOptions = buildInjectedRequestOptions({
           defaults: latestOptionsRef.current?.request,
           state: params.state,
-          humanInput
+          humanInput: requestHumanInput
         });
         stream?.submit(
           {
-            input: humanInput,
+            input: requestHumanInput,
             ...requestOptions.state ? { state: requestOptions.state } : {}
           },
           {
@@ -961,6 +965,11 @@ function getBusyComposerShortcutFollowUpMode(useQueueShortcut) {
   return useQueueShortcut ? "queue" : "steer";
 }
 
+// src/lib/todos.ts
+function countCompletedTodos(items) {
+  return items.filter((item) => item.status === "completed").length;
+}
+
 // src/providers/Stream.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_meta = {};
@@ -1115,6 +1124,9 @@ var en_US_default = {
       manualQueueHint: "Ready to send as a new run",
       steerHint: "Injects after the current tool call"
     },
+    todos: {
+      summary: "{{total}} tasks, {{completed}} completed"
+    },
     errors: {
       loadMessages: "Failed to load thread messages",
       createThread: "Failed to create thread",
@@ -1146,8 +1158,22 @@ var en_US_default = {
   composer: {
     openMenu: "Open menu",
     addAttachment: "Add attachment",
+    planMode: "Plan mode",
     removeReference: "Remove reference",
-    quoteSelection: "Quote selection"
+    quoteSelection: "Quote selection",
+    requestUserInput: {
+      title: "Input requested",
+      recommended: "Recommended",
+      other: "Other",
+      otherPlaceholder: "Type a custom answer",
+      continue: "Continue",
+      dismiss: "Dismiss",
+      previousQuestion: "Previous question",
+      nextQuestion: "Next question",
+      questionProgress: "{{current}} of {{total}}",
+      optionInfo: "Details for {{label}}",
+      submit: "Continue"
+    }
   },
   sheet: {
     close: "Close"
@@ -1174,7 +1200,58 @@ var en_US_default = {
     reasoning: "Reasoning",
     loading: "Loading",
     thinking: "Thinking",
-    answering: "Answering"
+    answering: "Answering",
+    requestUserInputResult: {
+      title: "Selections confirmed",
+      option: "Option",
+      other: "Other"
+    },
+    toolGroup: {
+      status: {
+        running: "Processing",
+        success: "Processed",
+        fail: "Processing failed"
+      },
+      inputTitle: "Input",
+      outputTitle: "Output",
+      errorTitle: "Error",
+      jsonTitle: "JSON",
+      jsonTree: "Tree",
+      jsonRaw: "Raw",
+      copy: "Copy",
+      copied: "Copied",
+      separator: ", ",
+      categories: {
+        files: {
+          one: "{{count}} file",
+          other: "{{count}} files"
+        },
+        searches: {
+          one: "{{count}} search",
+          other: "{{count}} searches"
+        },
+        commands: {
+          one: "{{count}} command",
+          other: "{{count}} commands"
+        },
+        lists: {
+          one: "{{count}} list",
+          other: "{{count}} lists"
+        },
+        tasks: {
+          one: "{{count}} task",
+          other: "{{count}} tasks"
+        },
+        knowledges: {
+          one: "{{count}} knowledge result",
+          other: "{{count}} knowledge results"
+        },
+        tools: {
+          one: "{{count}} tool",
+          other: "{{count}} tools"
+        }
+      }
+    }
   }
 };
 
@@ -1219,6 +1296,9 @@ var zh_CN_default = {
       manualQueueHint: "\u4FDD\u7559\u4E3A\u5F85\u53D1\u9001\uFF0C\u53EF\u624B\u52A8\u5F00\u542F\u65B0\u4E00\u8F6E",
       steerHint: "\u5F53\u524D\u5DE5\u5177\u8C03\u7528\u5B8C\u6210\u540E\u6CE8\u5165"
     },
+    todos: {
+      summary: "\u5171 {{total}} \u4E2A\u4EFB\u52A1\uFF0C\u5DF2\u7ECF\u5B8C\u6210 {{completed}} \u4E2A"
+    },
     errors: {
       loadMessages: "\u52A0\u8F7D\u7EBF\u7A0B\u6D88\u606F\u5931\u8D25",
       createThread: "\u521B\u5EFA\u7EBF\u7A0B\u5931\u8D25",
@@ -1250,8 +1330,22 @@ var zh_CN_default = {
   composer: {
     openMenu: "\u6253\u5F00\u83DC\u5355",
     addAttachment: "\u6DFB\u52A0\u9644\u4EF6",
+    planMode: "\u8BA1\u5212\u6A21\u5F0F",
     removeReference: "\u79FB\u9664\u5F15\u7528",
-    quoteSelection: "\u5F15\u7528\u9009\u4E2D\u5185\u5BB9"
+    quoteSelection: "\u5F15\u7528\u9009\u4E2D\u5185\u5BB9",
+    requestUserInput: {
+      title: "\u9700\u8981\u4F60\u7684\u8F93\u5165",
+      recommended: "\u63A8\u8350",
+      other: "\u5176\u4ED6",
+      otherPlaceholder: "\u8F93\u5165\u81EA\u5B9A\u4E49\u56DE\u7B54",
+      continue: "\u7EE7\u7EED",
+      dismiss: "\u5173\u95ED",
+      previousQuestion: "\u4E0A\u4E00\u4E2A\u95EE\u9898",
+      nextQuestion: "\u4E0B\u4E00\u4E2A\u95EE\u9898",
+      questionProgress: "{{current}} / {{total}}",
+      optionInfo: "{{label}} \u7684\u8BF4\u660E",
+      submit: "\u7EE7\u7EED"
+    }
   },
   sheet: {
     close: "\u5173\u95ED"
@@ -1278,7 +1372,58 @@ var zh_CN_default = {
     reasoning: "\u63A8\u7406",
     loading: "\u6B63\u5728\u52A0\u8F7D",
     thinking: "\u6B63\u5728\u601D\u8003",
-    answering: "\u6B63\u5728\u751F\u6210"
+    answering: "\u6B63\u5728\u751F\u6210",
+    requestUserInputResult: {
+      title: "\u5DF2\u786E\u8BA4\u9009\u62E9",
+      option: "\u9009\u9879",
+      other: "\u5176\u4ED6"
+    },
+    toolGroup: {
+      status: {
+        running: "\u6B63\u5728\u5904\u7406",
+        success: "\u5DF2\u5904\u7406",
+        fail: "\u5904\u7406\u5931\u8D25"
+      },
+      inputTitle: "\u8F93\u5165",
+      outputTitle: "\u8F93\u51FA",
+      errorTitle: "\u9519\u8BEF",
+      jsonTitle: "JSON",
+      jsonTree: "\u6811\u5F62",
+      jsonRaw: "\u539F\u59CB",
+      copy: "\u590D\u5236",
+      copied: "\u5DF2\u590D\u5236",
+      separator: "\uFF0C",
+      categories: {
+        files: {
+          one: "{{count}} \u4E2A\u6587\u4EF6",
+          other: "{{count}} \u4E2A\u6587\u4EF6"
+        },
+        searches: {
+          one: "{{count}} \u4E2A\u641C\u7D22",
+          other: "{{count}} \u4E2A\u641C\u7D22"
+        },
+        commands: {
+          one: "{{count}} \u4E2A\u547D\u4EE4",
+          other: "{{count}} \u4E2A\u547D\u4EE4"
+        },
+        lists: {
+          one: "{{count}} \u4E2A\u5217\u8868",
+          other: "{{count}} \u4E2A\u5217\u8868"
+        },
+        tasks: {
+          one: "{{count}} \u4E2A\u4EFB\u52A1",
+          other: "{{count}} \u4E2A\u4EFB\u52A1"
+        },
+        knowledges: {
+          one: "{{count}} \u4E2A\u77E5\u8BC6\u7ED3\u679C",
+          other: "{{count}} \u4E2A\u77E5\u8BC6\u7ED3\u679C"
+        },
+        tools: {
+          one: "{{count}} \u4E2A\u5DE5\u5177\u8C03\u7528",
+          other: "{{count}} \u4E2A\u5DE5\u5177\u8C03\u7528"
+        }
+      }
+    }
   }
 };
 
@@ -1714,6 +1859,8 @@ function ComposerMenu({
   onAttachmentClick,
   onToolSelect,
   selectedTool,
+  planModeEnabled = false,
+  onPlanModeChange,
   disabled = false
 }) {
   const { t } = useChatkitTranslation();
@@ -1722,9 +1869,6 @@ function ComposerMenu({
   const roundedClass = getRoundedClass(theme.radius);
   const attachmentsEnabled = composer?.attachments?.enabled ?? false;
   const tools = composer?.tools ?? [];
-  if (!attachmentsEnabled && tools.length === 0) {
-    return null;
-  }
   const handleAttachmentClick = () => {
     onAttachmentClick?.();
     setOpen(false);
@@ -1733,6 +1877,9 @@ function ComposerMenu({
     onToolSelect?.(tool);
     setOpen(false);
   };
+  const handlePlanModeToggle = () => {
+    onPlanModeChange?.(!planModeEnabled);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Button,
@@ -1772,8 +1919,46 @@ function ComposerMenu({
                 ]
               }
             ),
-            tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "my-1 h-px bg-border" })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "my-1 h-px bg-border" })
           ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "switch",
+              "aria-checked": planModeEnabled,
+              onClick: handlePlanModeToggle,
+              className: cn(
+                "flex items-center gap-3 px-3 py-2 text-sm hover:bg-muted transition-colors",
+                roundedClass,
+                planModeEnabled && "bg-muted"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ListChecks, { size: 16 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.planMode") }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full transition-colors",
+                      planModeEnabled ? "bg-primary" : "bg-muted-foreground/20"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-block h-5 w-5 rounded-full bg-background shadow-sm transition-transform",
+                          planModeEnabled ? "translate-x-[18px]" : "translate-x-0.5"
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "my-1 h-px bg-border" }),
           tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "button",
             {
@@ -2096,19 +2281,23 @@ function HistorySidebar({
     setOpen(false);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Sheet, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        disabled,
-        className: "h-8 w-8 cursor-pointer",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.History, { size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: t("history.threadHistory") })
-        ]
-      }
-    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          disabled,
+          className: "h-8 w-8 cursor-pointer",
+          "aria-label": t("history.threadHistory"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.History, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: t("history.threadHistory") })
+          ]
+        }
+      ) }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipContent, { side: "bottom", children: t("history.threadHistory") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SheetContent, { side: "right", className: "w-80 p-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetTitle, { children: t("history.title") }) }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -2197,6 +2386,7 @@ function PendingFollowUps({
   onSendNow,
   onEdit,
   onRemove,
+  attachToComposer = true,
   className
 }) {
   const { t } = useChatkitTranslation();
@@ -2219,8 +2409,9 @@ function PendingFollowUps({
     "div",
     {
       className: cn(
-        "space-y-2 mx-2 p-2 border border-border border-b-0",
-        rounded.top,
+        "space-y-2 mx-2 p-2 border border-border",
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
@@ -2451,162 +2642,899 @@ function PendingFollowUps({
   );
 }
 
-// src/components/thread/messages/ai.tsx
-var React15 = __toESM(require("react"), 1);
-var import_lucide_react8 = require("lucide-react");
-
-// src/components/ui/badge.tsx
+// src/components/composer/pending-todos.tsx
 var React11 = __toESM(require("react"), 1);
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var base = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
-var variants = {
-  default: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  outline: "border-input text-foreground"
-};
-var Badge = React11.forwardRef(
-  ({ className, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
+function useRoundedClasses2() {
+  const { theme } = useTheme();
+  return {
+    top: theme.radius ? {
+      pill: "rounded-t-full",
+      round: "rounded-t-xl",
+      soft: "rounded-t-lg",
+      sharp: "rounded-t-none"
+    }[theme.radius] : "rounded-t-lg",
+    panel: getRoundedClass(theme.radius, "rounded-lg")
+  };
+}
+function TodoStatusIcon({ status }) {
+  if (status === "completed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.CheckCircle2, { className: "mt-1 h-4 w-4 shrink-0 text-emerald-600" });
   }
-);
-Badge.displayName = "Badge";
-
-// src/components/ui/card.tsx
-var React12 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Card = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  if (status === "in_progress") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.CircleDashed, { className: "mt-1 h-4 w-4 shrink-0 text-foreground/70" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Circle, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground" });
+}
+function PendingTodos({
+  snapshot,
+  attachToComposer = true,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses2();
+  const listId = React11.useId();
+  const [isCollapsed, setIsCollapsed] = React11.useState(false);
+  React11.useEffect(() => {
+    setIsCollapsed(false);
+  }, [snapshot?.componentId]);
+  if (!snapshot || snapshot.items.length === 0) {
+    return null;
+  }
+  const completedCount = countCompletedTodos(snapshot.items);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
-      ref,
+      "aria-live": "polite",
       className: cn(
-        "rounded-xl border bg-background/80 text-foreground shadow-[0_14px_40px_-30px_rgba(15,23,42,0.5)] backdrop-blur",
+        "mx-2 border border-border bg-background/95 px-3 py-3 shadow-sm",
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
         className
       ),
-      ...props
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between gap-3 text-left",
+            "aria-expanded": !isCollapsed,
+            "aria-controls": listId,
+            onClick: () => setIsCollapsed((prev) => !prev),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ListTodo, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: t("chat.todos.summary", {
+                  total: snapshot.items.length,
+                  completed: completedCount
+                }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                import_lucide_react6.ChevronDown,
+                {
+                  className: cn(
+                    "h-4 w-4 text-muted-foreground transition-transform",
+                    isCollapsed ? null : "rotate-180"
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ol", { id: listId, className: "mt-3 space-y-2.5", children: snapshot.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "li",
+          {
+            className: "grid min-w-0 grid-cols-[16px_24px_minmax(0,1fr)] items-start gap-2 overflow-hidden",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TodoStatusIcon, { status: item.status }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "span",
+                {
+                  className: cn(
+                    "text-sm leading-6 text-foreground",
+                    item.status === "completed" ? "text-muted-foreground" : null
+                  ),
+                  children: [
+                    index + 1,
+                    "."
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  title: item.content,
+                  className: cn(
+                    "block min-w-0 truncate text-sm leading-6 text-foreground",
+                    item.status === "completed" ? "text-muted-foreground line-through" : item.status === "in_progress" ? "font-medium" : null
+                  ),
+                  children: item.content
+                }
+              )
+            ]
+          },
+          item.id
+        )) })
+      ]
     }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
-CardDescription.displayName = "CardDescription";
-var CardContent = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
-);
-CardContent.displayName = "CardContent";
-var CardFooter = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
-);
-CardFooter.displayName = "CardFooter";
-var CardAction = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
-);
-CardAction.displayName = "CardAction";
-
-// src/components/ui/tabs.tsx
-var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TabsContext = React13.createContext(null);
-function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
-  const [internalValue, setInternalValue] = React13.useState(defaultValue ?? "");
-  const activeValue = value ?? internalValue;
-  const setValue = React13.useCallback(
-    (nextValue) => {
-      if (value === void 0) setInternalValue(nextValue);
-      onValueChange?.(nextValue);
-    },
-    [onValueChange, value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("w-full", className), ...props }) });
 }
-var TabsList = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "div",
-    {
-      ref,
-      className: cn(
-        "inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-        className
-      ),
-      role: "tablist",
-      ...props
-    }
-  )
-);
-TabsList.displayName = "TabsList";
-var TabsTrigger = React13.forwardRef(
-  ({ className, value, onClick, ...props }, ref) => {
-    const context = React13.useContext(TabsContext);
-    if (!context) {
-      throw new Error("TabsTrigger must be used within Tabs");
+
+// src/components/composer/request-user-input-panel.tsx
+var React12 = __toESM(require("react"), 1);
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function useRoundedClasses3() {
+  const { theme } = useTheme();
+  const density = theme.density ?? "normal";
+  const densityClasses = {
+    compact: {
+      section: "px-3.5 py-2",
+      eyebrow: "mb-0 text-[11px]",
+      title: "text-[15px] leading-5",
+      pager: "gap-1.5 text-xs",
+      pagerButton: "h-6 w-6",
+      pagerIcon: "h-3.5 w-3.5",
+      choices: "mt-2.5 space-y-0.5",
+      row: "min-h-8 grid-cols-[28px_minmax(0,1fr)_auto] gap-2 px-2.5 py-1",
+      otherRow: "min-h-8 grid-cols-[28px_minmax(0,1fr)] gap-2 px-2.5 py-1",
+      input: "h-6",
+      footer: "mt-2.5 gap-2",
+      dismissButton: "h-7",
+      continueButton: "h-8 px-3.5",
+      continueIcon: "h-5 min-w-5"
+    },
+    normal: {
+      section: "px-4 py-2.5",
+      eyebrow: "mb-0.5 text-xs",
+      title: "text-base leading-5",
+      pager: "gap-2 text-sm",
+      pagerButton: "h-7 w-7",
+      pagerIcon: "h-4 w-4",
+      choices: "mt-3 space-y-0.5",
+      row: "min-h-9 grid-cols-[30px_minmax(0,1fr)_auto] gap-2.5 px-2.5 py-1.5",
+      otherRow: "min-h-9 grid-cols-[30px_minmax(0,1fr)] gap-2.5 px-2.5 py-1.5",
+      input: "h-6",
+      footer: "mt-3 gap-3",
+      dismissButton: "h-7",
+      continueButton: "h-8 px-4",
+      continueIcon: "h-5 min-w-5"
+    },
+    spacious: {
+      section: "px-5 py-3",
+      eyebrow: "mb-0.5 text-xs",
+      title: "text-base leading-5",
+      pager: "gap-2 text-sm",
+      pagerButton: "h-7 w-7",
+      pagerIcon: "h-4 w-4",
+      choices: "mt-4 space-y-1",
+      row: "min-h-10 grid-cols-[32px_minmax(0,1fr)_auto] gap-3 px-3 py-2",
+      otherRow: "min-h-10 grid-cols-[32px_minmax(0,1fr)] gap-3 px-3 py-2",
+      input: "h-7",
+      footer: "mt-4 gap-3",
+      dismissButton: "h-8",
+      continueButton: "h-9 px-4",
+      continueIcon: "h-5 min-w-5"
     }
-    const isActive = context.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "button",
-      {
-        ref,
-        type: "button",
-        role: "tab",
-        "aria-selected": isActive,
-        "data-state": isActive ? "active" : "inactive",
-        className: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-          className
-        ),
-        onClick: (event) => {
-          context.setValue(value);
-          onClick?.(event);
-        },
-        ...props
-      }
-    );
+  }[density] ?? {
+    section: "px-4 py-2.5",
+    eyebrow: "mb-0.5 text-xs",
+    title: "text-base leading-5",
+    pager: "gap-2 text-sm",
+    pagerButton: "h-7 w-7",
+    pagerIcon: "h-4 w-4",
+    choices: "mt-3 space-y-0.5",
+    row: "min-h-9 grid-cols-[30px_minmax(0,1fr)_auto] gap-2.5 px-2.5 py-1.5",
+    otherRow: "min-h-9 grid-cols-[30px_minmax(0,1fr)] gap-2.5 px-2.5 py-1.5",
+    input: "h-6",
+    footer: "mt-3 gap-3",
+    dismissButton: "h-7",
+    continueButton: "h-8 px-4",
+    continueIcon: "h-5 min-w-5"
+  };
+  return {
+    top: theme.radius ? {
+      pill: "rounded-t-3xl",
+      round: "rounded-t-xl",
+      soft: "rounded-t-lg",
+      sharp: "rounded-t-none"
+    }[theme.radius] : "rounded-t-lg",
+    panel: getRoundedClass(theme.radius, "rounded-lg"),
+    control: getRoundedClass(theme.radius, "rounded-md"),
+    density: densityClasses
+  };
+}
+function parseRecommendedLabel(label) {
+  const recommendedPattern = /\s*(?:\((?:recommended)\)|（推荐）)\s*$/i;
+  return {
+    label: label.replace(recommendedPattern, "").trim() || label,
+    recommended: recommendedPattern.test(label)
+  };
+}
+function getAnswerForQuestion(question, draft) {
+  if (!draft) return null;
+  if (draft.type === "other") {
+    const value = draft.otherText.trim();
+    if (!value) return null;
+    return {
+      id: question.id,
+      question: question.question,
+      type: "other",
+      value
+    };
   }
-);
-TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React13.forwardRef(
-  ({ className, value, ...props }, ref) => {
-    const context = React13.useContext(TabsContext);
-    if (!context) {
-      throw new Error("TabsContent must be used within Tabs");
-    }
-    if (context.value !== value) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "div",
-      {
-        ref,
-        role: "tabpanel",
-        className: cn(
-          "mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
-          className
-        ),
-        ...props
-      }
+  const option = question.options[draft.optionIndex];
+  if (!option) return null;
+  return {
+    id: question.id,
+    question: question.question,
+    type: "option",
+    value: option.label,
+    label: option.label,
+    description: option.description
+  };
+}
+function getSelectedChoiceIndex(question, draft) {
+  if (!draft) return -1;
+  if (draft.type === "other") return question.options.length;
+  return draft.optionIndex;
+}
+function RequestUserInputPanel({
+  request,
+  onSubmit,
+  onDismiss,
+  attachToComposer = true,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses3();
+  const [drafts, setDrafts] = React12.useState({});
+  const [currentQuestionIndex, setCurrentQuestionIndex] = React12.useState(0);
+  const otherInputRef = React12.useRef(null);
+  const questions = request?.params.questions ?? [];
+  React12.useEffect(() => {
+    setDrafts({});
+    setCurrentQuestionIndex(0);
+  }, [request?.id]);
+  React12.useEffect(() => {
+    if (questions.length === 0) return;
+    setCurrentQuestionIndex(
+      (index) => Math.min(Math.max(index, 0), questions.length - 1)
     );
-  }
-);
-TabsContent.displayName = "TabsContent";
-
-// src/components/thread/markdown-text.tsx
-var import_react_markdown = __toESM(require("react-markdown"), 1);
-var import_remark_gfm = __toESM(require("remark-gfm"), 1);
-var import_rehype_katex = __toESM(require("rehype-katex"), 1);
-var import_remark_math = __toESM(require("remark-math"), 1);
-var import_react6 = require("react");
-var import_lucide_react7 = require("lucide-react");
-
-// src/components/thread/syntax-highlighter.tsx
-var import_react_syntax_highlighter = require("react-syntax-highlighter");
+  }, [questions.length]);
+  const setQuestionDraft = React12.useCallback(
+    (questionId, draft) => {
+      setDrafts((previous) => ({
+        ...previous,
+        [questionId]: draft
+      }));
+    },
+    []
+  );
+  const focusOtherInput = React12.useCallback(() => {
+    window.setTimeout(() => otherInputRef.current?.focus(), 0);
+  }, []);
+  const selectOption = React12.useCallback(
+    (question, optionIndex) => {
+      const previousDraft = drafts[question.id];
+      setQuestionDraft(question.id, {
+        type: "option",
+        optionIndex,
+        otherText: previousDraft?.otherText ?? ""
+      });
+    },
+    [drafts, setQuestionDraft]
+  );
+  const selectOther = React12.useCallback(
+    (question, otherText2) => {
+      const previousDraft = drafts[question.id];
+      setQuestionDraft(question.id, {
+        type: "other",
+        otherText: otherText2 ?? (previousDraft?.type === "other" ? previousDraft.otherText : previousDraft?.otherText) ?? ""
+      });
+      focusOtherInput();
+    },
+    [drafts, focusOtherInput, setQuestionDraft]
+  );
+  const goToQuestion = React12.useCallback(
+    (index) => {
+      if (questions.length === 0) return;
+      setCurrentQuestionIndex(
+        Math.min(Math.max(index, 0), questions.length - 1)
+      );
+    },
+    [questions.length]
+  );
+  const answers = React12.useMemo(
+    () => questions.map((question) => getAnswerForQuestion(question, drafts[question.id])).filter((answer) => Boolean(answer)),
+    [drafts, questions]
+  );
+  const canSubmit = answers.length === questions.length;
+  const currentQuestion = questions[currentQuestionIndex] ?? null;
+  const currentDraft = currentQuestion ? drafts[currentQuestion.id] : void 0;
+  const currentAnswer = currentQuestion ? getAnswerForQuestion(currentQuestion, currentDraft) : null;
+  const isLastQuestion = currentQuestionIndex === questions.length - 1;
+  const buildAnswersFromDrafts = React12.useCallback(
+    (nextDrafts) => questions.map((question) => getAnswerForQuestion(question, nextDrafts[question.id])).filter((answer) => Boolean(answer)),
+    [questions]
+  );
+  const submitOrFocusFirstMissing = React12.useCallback(
+    (nextDrafts) => {
+      const nextAnswers = buildAnswersFromDrafts(nextDrafts);
+      if (nextAnswers.length === questions.length) {
+        onSubmit(nextAnswers);
+        return;
+      }
+      const firstMissingIndex = questions.findIndex(
+        (question) => !getAnswerForQuestion(question, nextDrafts[question.id])
+      );
+      if (firstMissingIndex >= 0) {
+        goToQuestion(firstMissingIndex);
+      }
+    },
+    [buildAnswersFromDrafts, goToQuestion, onSubmit, questions]
+  );
+  const activateOption = React12.useCallback(
+    (question, optionIndex) => {
+      const previousDraft = drafts[question.id];
+      const nextDrafts = {
+        ...drafts,
+        [question.id]: {
+          type: "option",
+          optionIndex,
+          otherText: previousDraft?.otherText ?? ""
+        }
+      };
+      setDrafts(nextDrafts);
+      if (isLastQuestion) {
+        submitOrFocusFirstMissing(nextDrafts);
+        return;
+      }
+      goToQuestion(currentQuestionIndex + 1);
+    },
+    [
+      currentQuestionIndex,
+      drafts,
+      goToQuestion,
+      isLastQuestion,
+      submitOrFocusFirstMissing
+    ]
+  );
+  const chooseChoiceByIndex = React12.useCallback(
+    (choiceIndex) => {
+      if (!currentQuestion) return;
+      if (choiceIndex < 0) return;
+      if (choiceIndex < currentQuestion.options.length) {
+        selectOption(currentQuestion, choiceIndex);
+        return;
+      }
+      if (choiceIndex === currentQuestion.options.length) {
+        selectOther(currentQuestion);
+      }
+    },
+    [currentQuestion, selectOption, selectOther]
+  );
+  const moveCurrentChoice = React12.useCallback(
+    (direction) => {
+      if (!currentQuestion) return;
+      const choiceCount = currentQuestion.options.length + 1;
+      const currentIndex = getSelectedChoiceIndex(currentQuestion, currentDraft);
+      const nextIndex = currentIndex === -1 ? direction === 1 ? 0 : choiceCount - 1 : (currentIndex + direction + choiceCount) % choiceCount;
+      chooseChoiceByIndex(nextIndex);
+    },
+    [chooseChoiceByIndex, currentDraft, currentQuestion]
+  );
+  const handleContinue = React12.useCallback(() => {
+    if (!currentAnswer) return;
+    if (!isLastQuestion) {
+      goToQuestion(currentQuestionIndex + 1);
+      return;
+    }
+    if (canSubmit) {
+      onSubmit(answers);
+      return;
+    }
+    const firstMissingIndex = questions.findIndex(
+      (question) => !getAnswerForQuestion(question, drafts[question.id])
+    );
+    if (firstMissingIndex >= 0) {
+      goToQuestion(firstMissingIndex);
+    }
+  }, [
+    answers,
+    canSubmit,
+    currentAnswer,
+    currentQuestionIndex,
+    drafts,
+    goToQuestion,
+    isLastQuestion,
+    onSubmit,
+    questions
+  ]);
+  React12.useEffect(() => {
+    if (!request) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      const target = event.target;
+      const targetTag = target?.tagName;
+      const isTypingTarget = target?.isContentEditable || targetTag === "INPUT" || targetTag === "TEXTAREA" || targetTag === "SELECT";
+      if (event.key === "Escape" || event.key === "Esc") {
+        if (onDismiss) {
+          event.preventDefault();
+          onDismiss();
+        }
+        return;
+      }
+      if (isTypingTarget && event.key !== "Enter") {
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleContinue();
+        return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        goToQuestion(currentQuestionIndex - 1);
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        goToQuestion(currentQuestionIndex + 1);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        moveCurrentChoice(-1);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        moveCurrentChoice(1);
+        return;
+      }
+      if (/^[1-9]$/.test(event.key)) {
+        const choiceIndex = Number(event.key) - 1;
+        if (currentQuestion && choiceIndex < currentQuestion.options.length + 1) {
+          event.preventDefault();
+          chooseChoiceByIndex(choiceIndex);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [
+    chooseChoiceByIndex,
+    currentQuestion,
+    currentQuestionIndex,
+    goToQuestion,
+    handleContinue,
+    moveCurrentChoice,
+    onDismiss,
+    request
+  ]);
+  if (!request || !currentQuestion) {
+    return null;
+  }
+  const handleOtherTextChange = (value) => {
+    setDrafts((previous) => ({
+      ...previous,
+      [currentQuestion.id]: {
+        type: "other",
+        otherText: value
+      }
+    }));
+  };
+  const otherText = currentDraft?.otherText ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "section",
+    {
+      "aria-label": t("composer.requestUserInput.title"),
+      "aria-live": "polite",
+      className: cn(
+        "mx-2 border border-border bg-background/95 shadow-sm",
+        rounded.density.section,
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: cn(
+                  "font-medium text-muted-foreground",
+                  rounded.density.eyebrow
+                ),
+                children: currentQuestion.header
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "h3",
+              {
+                className: cn(
+                  "font-semibold text-foreground",
+                  rounded.density.title
+                ),
+                children: currentQuestion.question
+              }
+            )
+          ] }),
+          questions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex shrink-0 items-center font-medium text-muted-foreground",
+                rounded.density.pager
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => goToQuestion(currentQuestionIndex - 1),
+                    disabled: currentQuestionIndex === 0,
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-full hover:bg-muted disabled:pointer-events-none disabled:opacity-35",
+                      rounded.density.pagerButton
+                    ),
+                    "aria-label": t("composer.requestUserInput.previousQuestion"),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ChevronLeft, { className: rounded.density.pagerIcon })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "min-w-12 text-center", children: t("composer.requestUserInput.questionProgress", {
+                  current: currentQuestionIndex + 1,
+                  total: questions.length
+                }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => goToQuestion(currentQuestionIndex + 1),
+                    disabled: currentQuestionIndex === questions.length - 1,
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-full hover:bg-muted disabled:pointer-events-none disabled:opacity-35",
+                      rounded.density.pagerButton
+                    ),
+                    "aria-label": t("composer.requestUserInput.nextQuestion"),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ChevronRight, { className: rounded.density.pagerIcon })
+                  }
+                )
+              ]
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: rounded.density.choices, children: [
+          currentQuestion.options.map((option, optionIndex) => {
+            const selected = currentDraft?.type === "option" && currentDraft.optionIndex === optionIndex;
+            const parsedLabel = parseRecommendedLabel(option.label);
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                onClick: () => activateOption(currentQuestion, optionIndex),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    activateOption(currentQuestion, optionIndex);
+                  }
+                },
+                "aria-pressed": selected,
+                "aria-label": `${optionIndex + 1}. ${option.label}`,
+                className: cn(
+                  "grid cursor-pointer items-center text-left transition-colors",
+                  rounded.density.row,
+                  rounded.panel,
+                  selected ? "bg-muted text-foreground" : "text-foreground/90 hover:bg-muted/55"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground", children: [
+                    optionIndex + 1,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline min-w-0 text-sm font-semibold leading-5", children: parsedLabel.label }),
+                    parsedLabel.recommended ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ml-1.5 inline-flex items-center gap-1 text-sm font-semibold text-primary", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Check, { className: "h-3.5 w-3.5" }),
+                      "(",
+                      t("composer.requestUserInput.recommended"),
+                      ")"
+                    ] }) : null
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+                    option.description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (event) => event.stopPropagation(),
+                          onKeyDown: (event) => event.stopPropagation(),
+                          title: option.description,
+                          className: "inline-flex h-7 w-7 items-center justify-center rounded-full hover:bg-background/80 hover:text-foreground",
+                          "aria-label": t("composer.requestUserInput.optionInfo", {
+                            label: parsedLabel.label
+                          }),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Info, { className: "h-4 w-4" })
+                        }
+                      ) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        TooltipContent,
+                        {
+                          side: "top",
+                          sideOffset: 6,
+                          className: "max-w-72 text-left leading-5",
+                          children: option.description
+                        }
+                      )
+                    ] }) : null,
+                    selected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: "hidden items-center gap-0.5 sm:flex",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ArrowUp, { className: "h-4 w-4 opacity-45" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.ArrowDown, { className: "h-4 w-4 opacity-45" })
+                        ]
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              `${currentQuestion.id}-${optionIndex}`
+            );
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "label",
+            {
+              className: cn(
+                "grid items-center transition-colors",
+                rounded.density.otherRow,
+                rounded.panel,
+                currentDraft?.type === "other" ? "bg-muted text-foreground" : "hover:bg-muted/55"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground", children: [
+                  currentQuestion.options.length + 1,
+                  "."
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "input",
+                  {
+                    ref: otherInputRef,
+                    value: otherText,
+                    onChange: (event) => handleOtherTextChange(event.target.value),
+                    onFocus: () => selectOther(currentQuestion, otherText),
+                    placeholder: t("composer.requestUserInput.otherPlaceholder"),
+                    className: cn(
+                      "min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground",
+                      rounded.density.input
+                    )
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-end",
+              rounded.density.footer
+            ),
+            children: [
+              onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDismiss,
+                  className: cn(
+                    "inline-flex items-center gap-2 text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground",
+                    rounded.density.dismissButton
+                  ),
+                  children: [
+                    t("composer.requestUserInput.dismiss"),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("kbd", { className: "rounded-full bg-muted px-2 py-1 text-xs font-semibold text-muted-foreground", children: "ESC" })
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  disabled: !currentAnswer,
+                  onClick: handleContinue,
+                  className: cn(
+                    "inline-flex items-center gap-2 bg-primary text-sm font-semibold text-background transition-all",
+                    rounded.density.continueButton,
+                    "hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40",
+                    rounded.panel
+                  ),
+                  children: [
+                    t("composer.requestUserInput.continue"),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-flex items-center justify-center rounded-full bg-background/20",
+                          rounded.density.continueIcon
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.CornerDownLeft, { className: "h-3.5 w-3.5" })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/thread/messages/ai.tsx
+var React19 = __toESM(require("react"), 1);
+var import_lucide_react12 = require("lucide-react");
+
+// src/components/ui/badge.tsx
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var base = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
+var variants = {
+  default: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  outline: "border-input text-foreground"
+};
+var Badge = React13.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/ui/card.tsx
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Card = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border bg-background/80 text-foreground shadow-[0_14px_40px_-30px_rgba(15,23,42,0.5)] backdrop-blur",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var CardAction = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
+);
+CardAction.displayName = "CardAction";
+
+// src/components/ui/tabs.tsx
+var React15 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TabsContext = React15.createContext(null);
+function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
+  const [internalValue, setInternalValue] = React15.useState(defaultValue ?? "");
+  const activeValue = value ?? internalValue;
+  const setValue = React15.useCallback(
+    (nextValue) => {
+      if (value === void 0) setInternalValue(nextValue);
+      onValueChange?.(nextValue);
+    },
+    [onValueChange, value]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("w-full", className), ...props }) });
+}
+var TabsList = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      role: "tablist",
+      ...props
+    }
+  )
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React15.forwardRef(
+  ({ className, value, onClick, ...props }, ref) => {
+    const context = React15.useContext(TabsContext);
+    if (!context) {
+      throw new Error("TabsTrigger must be used within Tabs");
+    }
+    const isActive = context.value === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": isActive,
+        "data-state": isActive ? "active" : "inactive",
+        className: cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          className
+        ),
+        onClick: (event) => {
+          context.setValue(value);
+          onClick?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React15.forwardRef(
+  ({ className, value, ...props }, ref) => {
+    const context = React15.useContext(TabsContext);
+    if (!context) {
+      throw new Error("TabsContent must be used within Tabs");
+    }
+    if (context.value !== value) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        className: cn(
+          "mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+
+// src/components/thread/markdown-text.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_rehype_katex = __toESM(require("rehype-katex"), 1);
+var import_remark_math = __toESM(require("remark-math"), 1);
+var import_react6 = require("react");
+var import_lucide_react9 = require("lucide-react");
+
+// src/components/thread/syntax-highlighter.tsx
+var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_tsx = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/tsx"), 1);
 var import_python = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/python"), 1);
 var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
 var import_react4 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("js", import_tsx.default);
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("jsx", import_tsx.default);
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("ts", import_tsx.default);
@@ -2617,7 +3545,7 @@ var SyntaxHighlighter = ({
   language,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_syntax_highlighter.PrismAsyncLight,
     {
       language,
@@ -2637,15 +3565,15 @@ var SyntaxHighlighter = ({
 // src/components/thread/mermaid-block.tsx
 var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_mermaid = __toESM(require("mermaid"), 1);
-var import_lucide_react6 = require("lucide-react");
-var React14 = __toESM(require("react"), 1);
+var import_lucide_react8 = require("lucide-react");
+var React16 = __toESM(require("react"), 1);
 
 // src/components/thread/tooltip-icon-button.tsx
 var import_react5 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Button,
       {
         variant: "ghost",
@@ -2655,17 +3583,17 @@ var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side
         ref,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sr-only", children: tooltip })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: tooltip })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { side, children: tooltip })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TooltipContent, { side, children: tooltip })
   ] }) });
 });
 TooltipIconButton.displayName = "TooltipIconButton";
 
 // src/components/thread/mermaid-block.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var HEX_COLOR_PATTERN = /^#([\da-f]{3,8})$/i;
 var MERMAID_DIRECTIVE_PATTERN = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 var MERMAID_FRONTMATTER_PATTERN = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
@@ -2913,24 +3841,24 @@ function MermaidPreviewDialog({
   svgMarkup,
   title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Dialog.Content, { className: "fixed inset-[5vh] z-50 flex flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-2xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-border px-5 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Dialog.Content, { className: "fixed inset-[5vh] z-50 flex flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-2xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-border px-5 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "button",
           {
             type: "button",
             className: "inline-flex size-10 items-center justify-center rounded-full border border-border bg-card text-muted-foreground transition-colors hover:text-foreground",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.X, { className: "size-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: closeLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.X, { className: "size-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: closeLabel })
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1 overflow-auto bg-card p-6", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 overflow-auto bg-card p-6", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           "data-slot": "mermaid-preview",
@@ -2944,24 +3872,24 @@ function MermaidPreviewDialog({
 function MermaidBlock({ code }) {
   const { t } = useChatkitTranslation();
   const { theme, isDarkMode } = useTheme();
-  const containerRef = React14.useRef(null);
-  const renderHostRef = React14.useRef(null);
-  const renderSequenceRef = React14.useRef(0);
-  const copyResetTimeoutRef = React14.useRef(null);
-  const diagramId = React14.useId().replace(/:/g, "");
-  const [activeTab, setActiveTab] = React14.useState("diagram");
-  const [isCopied, setIsCopied] = React14.useState(false);
-  const [isPreviewOpen, setIsPreviewOpen] = React14.useState(false);
-  const [isRendering, setIsRendering] = React14.useState(true);
-  const [renderError, setRenderError] = React14.useState(null);
-  const [svgMarkup, setSvgMarkup] = React14.useState(null);
-  const normalizedCode = React14.useMemo(() => normalizeMermaidCode(code), [code]);
-  const clearCopyResetTimeout = React14.useCallback(() => {
+  const containerRef = React16.useRef(null);
+  const renderHostRef = React16.useRef(null);
+  const renderSequenceRef = React16.useRef(0);
+  const copyResetTimeoutRef = React16.useRef(null);
+  const diagramId = React16.useId().replace(/:/g, "");
+  const [activeTab, setActiveTab] = React16.useState("diagram");
+  const [isCopied, setIsCopied] = React16.useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = React16.useState(false);
+  const [isRendering, setIsRendering] = React16.useState(true);
+  const [renderError, setRenderError] = React16.useState(null);
+  const [svgMarkup, setSvgMarkup] = React16.useState(null);
+  const normalizedCode = React16.useMemo(() => normalizeMermaidCode(code), [code]);
+  const clearCopyResetTimeout = React16.useCallback(() => {
     if (copyResetTimeoutRef.current === null) return;
     window.clearTimeout(copyResetTimeoutRef.current);
     copyResetTimeoutRef.current = null;
   }, []);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     let isActive = true;
     async function runRender() {
       const container = containerRef.current;
@@ -2999,17 +3927,17 @@ function MermaidBlock({ code }) {
       }
     };
   }, [diagramId, isDarkMode, normalizedCode, theme]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     clearCopyResetTimeout();
     setIsCopied(false);
   }, [activeTab, clearCopyResetTimeout, code]);
-  React14.useEffect(
+  React16.useEffect(
     () => () => {
       clearCopyResetTimeout();
     },
     [clearCopyResetTimeout]
   );
-  const handleDownload = React14.useCallback(() => {
+  const handleDownload = React16.useCallback(() => {
     if (!svgMarkup) return;
     const blob = new Blob([svgMarkup], {
       type: "image/svg+xml;charset=utf-8"
@@ -3023,7 +3951,7 @@ function MermaidBlock({ code }) {
     anchor.remove();
     window.URL.revokeObjectURL(url);
   }, [diagramId, svgMarkup]);
-  const handleCopyCode = React14.useCallback(() => {
+  const handleCopyCode = React16.useCallback(() => {
     if (!code || isCopied) return;
     navigator.clipboard.writeText(code).then(() => {
       setIsCopied(true);
@@ -3037,21 +3965,21 @@ function MermaidBlock({ code }) {
   }, [clearCopyResetTimeout, code, isCopied]);
   const hasRenderedDiagram = svgMarkup !== null && !renderError;
   const statusMessage = isRendering ? t("markdown.mermaid.rendering") : t("markdown.mermaid.failed");
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Tabs,
       {
         className: "w-full",
         onValueChange: (value) => setActiveTab(value),
         value: activeTab,
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             ref: containerRef,
             "data-slot": "mermaid-block",
             className: "relative overflow-hidden text-card-foreground",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "div",
                 {
                   ref: renderHostRef,
@@ -3060,62 +3988,62 @@ function MermaidBlock({ code }) {
                   "data-slot": "mermaid-render-host"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Code2Icon, { className: "size-4" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.mermaid.title") })
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Code2Icon, { className: "size-4" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.mermaid.title") })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       TooltipIconButton,
                       {
                         onClick: handleDownload,
                         tooltip: t("markdown.mermaid.download"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.DownloadIcon, { className: "size-4" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.DownloadIcon, { className: "size-4" })
                       }
                     ) : null,
-                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       TooltipIconButton,
                       {
                         onClick: () => setIsPreviewOpen(true),
                         tooltip: t("markdown.mermaid.fullScreen"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.ExpandIcon, { className: "size-4" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.ExpandIcon, { className: "size-4" })
                       }
                     ) : null,
-                    activeTab === "code" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    activeTab === "code" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       TooltipIconButton,
                       {
                         onClick: handleCopyCode,
                         tooltip: t("markdown.copy"),
-                        children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.CopyIcon, { className: "size-4" })
+                        children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CopyIcon, { className: "size-4" })
                       }
                     ) : null
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(TabsList, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsTrigger, { value: "diagram", children: t("markdown.mermaid.diagram") }),
-                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsTrigger, { value: "code", children: t("markdown.mermaid.code") })
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TabsList, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsTrigger, { value: "diagram", children: t("markdown.mermaid.diagram") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsTrigger, { value: "code", children: t("markdown.mermaid.code") })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "border-t border-border pt-4", children: [
-                renderError ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { role: "alert", className: "mb-4 text-sm font-medium text-destructive", children: t("markdown.mermaid.failed") }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsContent, { value: "diagram", className: "mt-0 space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border-t border-border pt-4", children: [
+                renderError ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { role: "alert", className: "mb-4 text-sm font-medium text-destructive", children: t("markdown.mermaid.failed") }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsContent, { value: "diagram", className: "mt-0 space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "div",
                   {
                     className: cn(
                       "relative overflow-auto rounded-[calc(var(--radius)+0.5rem)] border border-border bg-background p-4",
                       hasRenderedDiagram ? "[&_svg]:mx-auto [&_svg]:h-auto [&_svg]:w-full [&_svg]:max-w-none" : "min-h-[14rem]"
                     ),
-                    children: hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    children: hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                       "div",
                       {
                         "data-slot": "mermaid-diagram",
                         dangerouslySetInnerHTML: { __html: svgMarkup }
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-h-[12rem] flex-col items-center justify-center gap-3 text-center text-muted-foreground", children: [
-                      isRendering ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.Loader2, { className: "size-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.TriangleAlert, { className: "size-5 text-destructive" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex min-h-[12rem] flex-col items-center justify-center gap-3 text-center text-muted-foreground", children: [
+                      isRendering ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.Loader2, { className: "size-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.TriangleAlert, { className: "size-5 text-destructive" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         "p",
                         {
                           className: cn("text-sm font-medium", !isRendering && "text-destructive"),
@@ -3126,12 +4054,12 @@ function MermaidBlock({ code }) {
                     ] })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsContent, { value: "code", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsContent, { value: "code", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "pre",
                   {
                     "data-slot": "mermaid-code",
                     className: "overflow-x-auto rounded-[calc(var(--radius)+0.5rem)] border border-border bg-zinc-950 px-4 py-4 text-sm text-zinc-50",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("code", { className: "block whitespace-pre font-mono", children: code })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("code", { className: "block whitespace-pre font-mono", children: code })
                   }
                 ) })
               ] })
@@ -3140,7 +4068,7 @@ function MermaidBlock({ code }) {
         )
       }
     ),
-    svgMarkup ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    svgMarkup ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       MermaidPreviewDialog,
       {
         closeLabel: t("sheet.close"),
@@ -3155,7 +4083,13 @@ function MermaidBlock({ code }) {
 
 // src/components/thread/markdown-text.tsx
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var markdownTableMinWidth = "max(7rem, calc(8rem * var(--density-spacing, 1)))";
+var markdownTableCellPaddingInline = "calc(var(--density-padding, 1rem) * 1.25)";
+var markdownTableCellPaddingBlock = "max(0.5rem, calc(var(--density-padding, 1rem) * 0.75))";
+var markdownTableLineHeight = "max(1.375rem, calc(1.5rem * var(--density-spacing, 1)))";
+var markdownInlineCodePaddingInline = "max(0.25rem, calc(var(--density-gap, 0.5rem) * 0.75))";
+var markdownInlineCodePaddingBlock = "max(0.125rem, calc(var(--density-gap, 0.5rem) * 0.5))";
 var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
   if (typeof child === "string" || typeof child === "number") {
     return String(child);
@@ -3184,23 +4118,23 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       TooltipIconButton,
       {
         tooltip: t("markdown.copy"),
         onClick: onCopy,
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CopyIcon, {}),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CheckIcon, {})
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CopyIcon, {}),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.CheckIcon, {})
         ]
       }
     )
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h1",
     {
       className: cn(
@@ -3210,7 +4144,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h2",
     {
       className: cn(
@@ -3220,7 +4154,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h3",
     {
       className: cn(
@@ -3230,7 +4164,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h4",
     {
       className: cn(
@@ -3240,7 +4174,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h5",
     {
       className: cn(
@@ -3250,21 +4184,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "p",
     {
       className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "a",
     {
       className: cn(
@@ -3280,7 +4214,7 @@ var defaultComponents = {
     className,
     node: _node,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "blockquote",
     {
       className: cn(
@@ -3290,21 +4224,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
       ...props
     }
   ),
-  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "ol",
     {
       className: cn("my-5 list-outside list-decimal pl-8 [&>li]:mt-2", className),
       ...props
     }
   ),
-  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "hr",
     {
       className: cn("my-5 border-b", className),
@@ -3314,55 +4248,89 @@ var defaultComponents = {
   table: ({
     className,
     node: _node,
+    style,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    "table",
+  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
     {
-      className: cn(
-        "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
-        className
-      ),
-      ...props
+      "data-slot": "markdown-table-container",
+      className: "my-5 max-w-full overflow-x-auto rounded-xl border border-border bg-background",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "table",
+        {
+          className: cn(
+            "min-w-full w-max border-separate border-spacing-0 text-sm",
+            className
+          ),
+          style: {
+            lineHeight: markdownTableLineHeight,
+            ...style
+          },
+          ...props
+        }
+      )
     }
   ),
-  th: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  th: ({
+    className,
+    node: _node,
+    style,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "th",
     {
       className: cn(
-        "bg-muted border-border border-y border-l px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        "bg-muted/80 border-border border-l text-left align-top font-semibold whitespace-normal break-words first:border-l-0 first:rounded-tl-xl last:rounded-tr-xl [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       ),
+      style: {
+        minWidth: markdownTableMinWidth,
+        paddingInline: markdownTableCellPaddingInline,
+        paddingBlock: markdownTableCellPaddingBlock,
+        ...style
+      },
       ...props
     }
   ),
-  td: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  td: ({
+    className,
+    node: _node,
+    style,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "td",
     {
       className: cn(
-        "border-border border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        "border-border border-t border-l text-left align-top whitespace-normal break-words first:border-l-0 [&[align=center]]:text-center [&[align=right]]:text-right [&_code]:break-words [&_code]:whitespace-pre-wrap [&_code]:[overflow-wrap:anywhere]",
         className
       ),
+      style: {
+        minWidth: markdownTableMinWidth,
+        paddingInline: markdownTableCellPaddingInline,
+        paddingBlock: markdownTableCellPaddingBlock,
+        ...style
+      },
       ...props
     }
   ),
-  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "tr",
     {
       className: cn(
-        "m-0 p-0 even:bg-muted/50 [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        "m-0 p-0 even:bg-muted/30 [&:last-child>td:first-child]:rounded-bl-xl [&:last-child>td:last-child]:rounded-br-xl",
         className
       ),
       ...props
     }
   ),
-  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
       ...props
     }
   ),
-  pre: ({ className, children, node: _node }) => import_react6.Children.toArray(children).length === 1 && (isMermaidBlockChild(import_react6.Children.toArray(children)[0]) || isMermaidCodeElement(import_react6.Children.toArray(children)[0])) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  pre: ({ className, children, node: _node }) => import_react6.Children.toArray(children).length === 1 && (isMermaidBlockChild(import_react6.Children.toArray(children)[0]) || isMermaidCodeElement(import_react6.Children.toArray(children)[0])) ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       className: cn(
@@ -3376,6 +4344,7 @@ var defaultComponents = {
     className,
     children,
     node: _node,
+    style,
     ...props
   }) => {
     const match = /language-([\w-]+)/.exec(className || "");
@@ -3385,17 +4354,17 @@ var defaultComponents = {
       const language = match[1];
       const normalizedCode = code.replace(/\n$/, "");
       if (language === "mermaid") {
-        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MermaidBlock, { code: normalizedCode });
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MermaidBlock, { code: normalizedCode });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           CodeHeader,
           {
             language,
             code: normalizedCode
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           SyntaxHighlighter,
           {
             language,
@@ -3406,58 +4375,861 @@ var defaultComponents = {
       ] });
     }
     if (isBlockCode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "code",
         {
           className: cn(
             "block min-w-full whitespace-pre px-4 py-4 font-mono text-inherit",
             className
           ),
-          ...props,
-          children: code.replace(/\n$/, "")
-        }
-      );
+          ...props,
+          children: code.replace(/\n$/, "")
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "code",
+      {
+        className: cn(
+          "bg-muted rounded font-mono text-[0.9em] font-semibold whitespace-pre-wrap [overflow-wrap:anywhere]",
+          className
+        ),
+        style: {
+          paddingInline: markdownInlineCodePaddingInline,
+          paddingBlock: markdownInlineCodePaddingBlock,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+};
+var MarkdownTextImpl = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_markdown.default,
+    {
+      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
+      rehypePlugins: [import_rehype_katex.default],
+      components: defaultComponents,
+      children
+    }
+  ) });
+};
+var MarkdownText = (0, import_react6.memo)(MarkdownTextImpl);
+
+// src/components/thread/messages/tool-component-group.tsx
+var React17 = __toESM(require("react"), 1);
+var import_lucide_react10 = require("lucide-react");
+
+// src/i18n/localized-text.ts
+function resolveLocalizedText(value, language) {
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed || null;
+  }
+  if (!value || typeof value !== "object") return null;
+  const localized = value;
+  const normalizedLanguage = language.trim();
+  const underscoredLanguage = normalizedLanguage.replace(/-/g, "_");
+  const languagePrefix = normalizedLanguage.split("-")[0];
+  const preferredKeys = normalizedLanguage.startsWith("zh") ? [
+    normalizedLanguage,
+    underscoredLanguage,
+    "zh_Hans",
+    "zh-Hans",
+    "zh_CN",
+    "zh-CN",
+    "zh",
+    "en_US",
+    "en-US",
+    "en"
+  ] : [
+    normalizedLanguage,
+    underscoredLanguage,
+    "en_US",
+    "en-US",
+    "en",
+    languagePrefix,
+    "zh_Hans",
+    "zh-Hans",
+    "zh_CN",
+    "zh-CN",
+    "zh"
+  ];
+  for (const key of preferredKeys) {
+    const candidate = localized[key];
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+  }
+  for (const candidate of Object.values(localized)) {
+    if (typeof candidate === "string" && candidate.trim()) {
+      return candidate.trim();
+    }
+  }
+  return null;
+}
+
+// src/components/thread/messages/tool-component-group.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var toolStatusConfig = {
+  success: {
+    iconClass: "border-green-500 text-green-700",
+    icon: import_lucide_react10.CheckCircle2
+  },
+  fail: {
+    iconClass: "border-red-500 text-red-700",
+    icon: import_lucide_react10.XCircle
+  },
+  running: {
+    iconClass: "border-blue-500 text-blue-700",
+    icon: import_lucide_react10.Loader2
+  }
+};
+var TOOL_GROUP_CATEGORY_ORDER = [
+  "files",
+  "searches",
+  "commands",
+  "lists",
+  "tasks",
+  "knowledges",
+  "tools"
+];
+var TOOL_GROUP_TOKEN_CATEGORY = {
+  file: "files",
+  files: "files",
+  web_search: "searches",
+  search: "searches",
+  searches: "searches",
+  program: "commands",
+  command: "commands",
+  commands: "commands",
+  shell: "commands",
+  terminal: "commands",
+  list: "lists",
+  lists: "lists",
+  task: "tasks",
+  tasks: "tasks",
+  todo: "tasks",
+  todos: "tasks",
+  knowledge: "knowledges",
+  knowledges: "knowledges",
+  retriever: "knowledges",
+  retrieval: "knowledges",
+  tool: "tools",
+  tools: "tools"
+};
+var TOOL_CALL_OUTPUT_RENDERERS = {};
+function getToolStepData(content) {
+  return content.data ?? {};
+}
+function safeJson(value) {
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+function formatDisplayValue(value) {
+  return typeof value === "string" ? value : safeJson(value);
+}
+function parseStepDate(value) {
+  if (value instanceof Date) {
+    const timestamp2 = value.getTime();
+    return Number.isNaN(timestamp2) ? null : timestamp2;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? null : timestamp;
+}
+function formatStepDuration(durationMs) {
+  if (durationMs < 1e3) {
+    return `${durationMs}ms`;
+  }
+  if (durationMs < 1e4) {
+    return `${(durationMs / 1e3).toFixed(1)}s`;
+  }
+  if (durationMs < 6e4) {
+    return `${Math.round(durationMs / 1e3)}s`;
+  }
+  const hours = Math.floor(durationMs / 36e5);
+  const minutes = Math.floor(durationMs % 36e5 / 6e4);
+  const seconds = Math.floor(durationMs % 6e4 / 1e3);
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
+function useToolStepDurationLabel(data) {
+  const [durationNow, setDurationNow] = React17.useState(() => Date.now());
+  const createdAt = parseStepDate(data.created_date);
+  const endedAt = parseStepDate(data.end_date);
+  const status = data.status;
+  React17.useEffect(() => {
+    if (status !== "running" || createdAt === null || endedAt !== null) {
+      return;
+    }
+    setDurationNow(Date.now());
+    const timer = window.setInterval(() => {
+      setDurationNow(Date.now());
+    }, 100);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [createdAt, endedAt, status]);
+  if (createdAt === null) return null;
+  const durationMs = Math.max(0, (endedAt ?? durationNow) - createdAt);
+  return formatStepDuration(durationMs);
+}
+function isJsonObjectValue(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function canUseAsJsonValue(value) {
+  if (value === null) return true;
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    return true;
+  }
+  if (Array.isArray(value)) {
+    return value.every(canUseAsJsonValue);
+  }
+  if (typeof value === "object") {
+    return Object.values(value).every(canUseAsJsonValue);
+  }
+  return false;
+}
+function parseJsonString(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const first = trimmed[0];
+  if (first !== "{" && first !== "[") return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    return canUseAsJsonValue(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function detectJsonValue(value) {
+  if (typeof value === "string") {
+    const parsed = parseJsonString(value);
+    if (parsed !== null) {
+      return {
+        kind: "json",
+        value: parsed,
+        raw: safeJson(parsed)
+      };
+    }
+    return { kind: "text", text: value };
+  }
+  if (canUseAsJsonValue(value) && value !== null && typeof value === "object") {
+    return {
+      kind: "json",
+      value,
+      raw: safeJson(value)
+    };
+  }
+  return { kind: "text", text: formatDisplayValue(value) };
+}
+function isComponentContent(content) {
+  return content.type === "component";
+}
+function isTextContent(content) {
+  return content.type === "text";
+}
+function isReasoningContent(content) {
+  return content.type === "reasoning";
+}
+function isWidgetComponent(content) {
+  const data = content.data;
+  return data?.type === "Widget" && Array.isArray(data.widgets);
+}
+function isGroupableToolComponent(content) {
+  if (!content || typeof content === "string") return false;
+  return isComponentContent(content) && !isWidgetComponent(content) && content.data?.category === "Tool";
+}
+function isSkippableToolGroupSeparator(content) {
+  if (typeof content === "string") return !content.trim();
+  if (!content) return true;
+  if (isTextContent(content)) {
+    return !content.text?.trim();
+  }
+  if (isReasoningContent(content)) {
+    return !content.text?.trim();
+  }
+  return false;
+}
+function normalizeToolToken(value) {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+  return normalized || null;
+}
+function classifyToolToken(value) {
+  const normalized = normalizeToolToken(
+    typeof value === "string" ? value : resolveLocalizedText(value, "en-US")
+  );
+  if (!normalized) return null;
+  const directMatch = TOOL_GROUP_TOKEN_CATEGORY[normalized];
+  if (directMatch) return directMatch;
+  if (normalized.includes("search")) return "searches";
+  if (normalized.includes("file")) return "files";
+  if (normalized.includes("command") || normalized.includes("cmd") || normalized.includes("program") || normalized.includes("exec") || normalized.startsWith("run_") || normalized.includes("_run")) {
+    return "commands";
+  }
+  if (normalized.includes("list")) return "lists";
+  if (normalized.includes("task") || normalized.includes("todo")) return "tasks";
+  if (normalized.includes("knowledge") || normalized.includes("retriever")) {
+    return "knowledges";
+  }
+  return null;
+}
+function getToolGroupCategory(content) {
+  const data = getToolStepData(content);
+  return classifyToolToken(data.type) ?? classifyToolToken(data.tool) ?? classifyToolToken(data.title) ?? classifyToolToken(data.message) ?? "tools";
+}
+function getToolGroupCategoryCounts(items) {
+  return items.reduce((counts, item) => {
+    const category = getToolGroupCategory(item);
+    counts[category] = (counts[category] ?? 0) + 1;
+    return counts;
+  }, {});
+}
+function getToolGroupDisplayStatus(items) {
+  if (items.some((item) => getToolStepData(item).status === "fail")) {
+    return "fail";
+  }
+  return "success";
+}
+function getToolActivityLabel(content, language) {
+  const data = getToolStepData(content);
+  const runningCandidates = [data.message, data.title, data.tool, data.type];
+  const completedCandidates = [data.title, data.message, data.tool, data.type];
+  const candidates = data.status === "running" ? runningCandidates : completedCandidates;
+  for (const candidate of candidates) {
+    const label = resolveLocalizedText(candidate, language);
+    if (label) return label;
+  }
+  return "Tool";
+}
+function flushPendingTools(units, pendingTools) {
+  if (pendingTools.length === 0) return;
+  units.push({
+    type: "tool-group",
+    items: pendingTools.map((tool) => tool.item),
+    startIndex: pendingTools[0].index
+  });
+  pendingTools.length = 0;
+}
+function buildToolComponentRenderUnits(content, options) {
+  const units = [];
+  const pendingTools = [];
+  content.forEach((item, index) => {
+    if (isGroupableToolComponent(item) && options?.shouldGroupComponent?.(item) !== false) {
+      pendingTools.push({ item, index });
+      return;
+    }
+    if (isSkippableToolGroupSeparator(item)) {
+      return;
+    }
+    if (item === void 0) {
+      return;
+    }
+    flushPendingTools(units, pendingTools);
+    units.push({ type: "item", item, index });
+  });
+  flushPendingTools(units, pendingTools);
+  return units;
+}
+function getToolCallOutputRenderer(data) {
+  const keys = [data.tool, data.type].filter(
+    (value) => typeof value === "string" && Boolean(value.trim())
+  );
+  for (const key of keys) {
+    const renderer = TOOL_CALL_OUTPUT_RENDERERS[key];
+    if (renderer) return renderer;
+  }
+  return DefaultToolCallOutput;
+}
+function getJsonValueSummary(value) {
+  if (Array.isArray(value)) {
+    return `Array(${value.length})`;
+  }
+  if (isJsonObjectValue(value)) {
+    return `Object(${Object.keys(value).length})`;
+  }
+  return "JSON";
+}
+function formatJsonPrimitive(value) {
+  if (value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  return String(value);
+}
+function JsonTreeNode({
+  label,
+  value,
+  depth = 0
+}) {
+  const isArray = Array.isArray(value);
+  const isObject = isJsonObjectValue(value);
+  const isExpandable = isArray || isObject;
+  const [isExpanded, setIsExpanded] = React17.useState(depth < 2);
+  if (!isExpandable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 gap-2 leading-6", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "shrink-0 font-medium text-foreground/80", children: [
+        label,
+        ":"
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "span",
+        {
+          className: cn(
+            "min-w-0 wrap-break-word",
+            typeof value === "string" ? "text-emerald-700" : typeof value === "number" ? "text-blue-700" : typeof value === "boolean" ? "text-purple-700" : "text-muted-foreground"
+          ),
+          children: formatJsonPrimitive(value)
+        }
+      )
+    ] });
+  }
+  const entries = isArray ? value.map((item, index) => [String(index), item]) : Object.entries(value);
+  const summary = isArray ? `Array(${value.length})` : `Object(${entries.length})`;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "flex min-w-0 items-center gap-1 leading-6 text-left hover:text-foreground",
+        "aria-expanded": isExpanded,
+        onClick: () => setIsExpanded((prev) => !prev),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_lucide_react10.ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
+                isExpanded && "rotate-90"
+              )
+            }
+          ),
+          label ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "min-w-0 truncate font-medium text-foreground/80", children: [
+            label,
+            ":"
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "shrink-0 text-muted-foreground", children: summary })
+        ]
+      }
+    ),
+    isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ml-4 border-l border-border/70 pl-3", children: entries.map(([entryLabel, entryValue]) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      JsonTreeNode,
+      {
+        label: entryLabel,
+        value: entryValue,
+        depth: depth + 1
+      },
+      entryLabel
+    )) }) : null
+  ] });
+}
+function JsonTreeView({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "min-w-0 font-mono text-[11px]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(JsonTreeNode, { value }) });
+}
+function RawJsonBlock({ raw }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word font-mono text-[11px]", children: raw });
+}
+function PlainTextBlock({ value, destructive = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "pre",
+    {
+      className: cn(
+        "whitespace-pre-wrap wrap-break-word",
+        destructive && "text-destructive"
+      ),
+      children: value
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "code",
+  );
+}
+function ToolCallCopyButton({ value }) {
+  const { t } = useChatkitTranslation();
+  const [isCopied, setIsCopied] = React17.useState(false);
+  const resetTimeoutRef = React17.useRef(null);
+  const clearResetTimeout = React17.useCallback(() => {
+    if (resetTimeoutRef.current === null) return;
+    window.clearTimeout(resetTimeoutRef.current);
+    resetTimeoutRef.current = null;
+  }, []);
+  React17.useEffect(() => clearResetTimeout, [clearResetTimeout]);
+  const handleCopy = React17.useCallback(() => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+    void navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+      clearResetTimeout();
+      resetTimeoutRef.current = window.setTimeout(() => {
+        setIsCopied(false);
+        resetTimeoutRef.current = null;
+      }, 1500);
+    }).catch(() => void 0);
+  }, [clearResetTimeout, value]);
+  const label = isCopied ? t("message.toolGroup.copied") : t("message.toolGroup.copy");
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+      "aria-label": label,
+      title: label,
+      onClick: handleCopy,
+      children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+    }
+  );
+}
+function ToolCallValueBlock({
+  value,
+  destructive = false
+}) {
+  const { t } = useChatkitTranslation();
+  const detected = detectJsonValue(value);
+  if (detected.kind === "text") {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallCopyButton, { value: detected.text }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlainTextBlock, { value: detected.text, destructive })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
+        t("message.toolGroup.jsonTitle"),
+        " \xB7 ",
+        getJsonValueSummary(detected.value)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallCopyButton, { value: detected.raw }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TabsList, { className: "rounded-md p-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(JsonTreeView, { value: detected.value }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RawJsonBlock, { raw: detected.raw }) })
+  ] });
+}
+function DefaultToolCallOutput({ data }) {
+  const { t } = useChatkitTranslation();
+  const output = data.output ?? null;
+  const error = data.error ?? null;
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallValueBlock, { value: error, destructive: true })
+    ] });
+  }
+  if (output === null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallValueBlock, { value: output })
+  ] });
+}
+function ToolCallDetails({ content }) {
+  const { t } = useChatkitTranslation();
+  const data = getToolStepData(content);
+  const OutputRenderer = getToolCallOutputRenderer(data);
+  const hasInput = data.input !== void 0 && data.input !== null;
+  const hasOutput = data.error !== void 0 || data.output !== void 0;
+  if (!hasInput && !hasOutput) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: [
+    hasInput && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallValueBlock, { value: data.input })
+    ] }),
+    hasInput && hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-2" }) : null,
+    hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(OutputRenderer, { content, data }) : null
+  ] });
+}
+function ToolCallRow({ content }) {
+  const { i18n: i18n2 } = useChatkitTranslation();
+  const data = getToolStepData(content);
+  const status = data.status;
+  const itemConfig = status ? toolStatusConfig[status] : null;
+  const ItemStatusIcon = itemConfig?.icon;
+  const hasError = status === "fail" || Boolean(data.error);
+  const label = getToolActivityLabel(content, i18n2.language);
+  const detailsId = React17.useId();
+  const hasDetails = data.input !== void 0 || data.error !== void 0 || data.output !== void 0;
+  const durationLabel = useToolStepDurationLabel(data);
+  const [isExpanded, setIsExpanded] = React17.useState(false);
+  React17.useEffect(() => {
+    if (status === "running" && data.output !== void 0) {
+      setIsExpanded(true);
+    }
+  }, [data.output, status]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("li", { className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "button",
       {
+        type: "button",
         className: cn(
-          "bg-muted rounded px-1.5 py-0.5 font-mono text-[0.9em] font-semibold break-all",
-          className
+          "flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
+          hasDetails && "cursor-pointer hover:text-foreground",
+          hasError && "text-destructive hover:text-destructive"
         ),
-        ...props,
-        children
+        "aria-expanded": hasDetails ? isExpanded : void 0,
+        "aria-controls": hasDetails ? detailsId : void 0,
+        disabled: !hasDetails,
+        onClick: () => {
+          if (hasDetails) setIsExpanded((prev) => !prev);
+        },
+        children: [
+          ItemStatusIcon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            ItemStatusIcon,
+            {
+              className: cn(
+                "h-3.5 w-3.5 shrink-0",
+                itemConfig?.iconClass,
+                status === "running" && "animate-spin"
+              )
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 flex-1 truncate", title: label, children: label }),
+          durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
+          hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_lucide_react10.ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
+                isExpanded && "rotate-90"
+              )
+            }
+          ) : null
+        ]
       }
-    );
+    ),
+    hasDetails && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { id: detailsId, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallDetails, { content }) }) : null
+  ] });
+}
+function ToolComponentGroup({
+  items,
+  hasFollowingItem
+}) {
+  const { t } = useChatkitTranslation();
+  const contentId = React17.useId();
+  const groupStatus = getToolGroupDisplayStatus(items);
+  const [isExpanded, setIsExpanded] = React17.useState(!hasFollowingItem);
+  const categoryCounts = getToolGroupCategoryCounts(items);
+  const categorySummary = TOOL_GROUP_CATEGORY_ORDER.flatMap((category) => {
+    const count = categoryCounts[category] ?? 0;
+    if (count === 0) return [];
+    return [
+      t(
+        `message.toolGroup.categories.${category}.${count === 1 ? "one" : "other"}`,
+        { count }
+      )
+    ];
+  }).join(t("message.toolGroup.separator"));
+  const summary = `${t(`message.toolGroup.status.${groupStatus}`)} ${categorySummary}`;
+  const config = toolStatusConfig[groupStatus];
+  const StatusIcon = config.icon;
+  React17.useEffect(() => {
+    setIsExpanded(!hasFollowingItem);
+  }, [hasFollowingItem, items.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "px-1 py-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center justify-between gap-3 text-left opacity-60 hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-muted",
+        "aria-expanded": isExpanded,
+        "aria-controls": contentId,
+        onClick: () => setIsExpanded((prev) => !prev),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              StatusIcon,
+              {
+                className: cn(
+                  "h-4 w-4 shrink-0",
+                  config.iconClass
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate", children: summary })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_lucide_react10.ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
+                isExpanded && "rotate-90"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { id: contentId, className: "mt-2 max-h-[200px] space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolCallRow, { content: item }, item.id ?? `tool-item-${index}`)) })
+  ] });
+}
+
+// src/components/thread/messages/request-user-input-result-card.tsx
+var React18 = require("react");
+var import_chatkit_types4 = require("@xpert-ai/chatkit-types");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function isRecord2(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function readString(record, keys) {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.trim()) {
+      return value.trim();
+    }
   }
-};
-var MarkdownTextImpl = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_markdown.default,
+  return null;
+}
+function getToolCallId(value) {
+  if (!isRecord2(value)) return null;
+  return readString(value, ["id"]);
+}
+function getToolCallName(value) {
+  if (!isRecord2(value)) return null;
+  return readString(value, ["name"]);
+}
+function pushClientToolCallsFromRecord(record, calls) {
+  const clientToolCalls = record.clientToolCalls;
+  if (Array.isArray(clientToolCalls)) {
+    calls.push(...clientToolCalls);
+  }
+}
+function collectPotentialToolCalls(messages) {
+  const calls = [];
+  const messageList = Array.isArray(messages) ? messages : [messages];
+  for (const message of messageList) {
+    const rawMessage = message;
+    pushClientToolCallsFromRecord(rawMessage, calls);
+  }
+  return calls;
+}
+function findRequestUserInputClientToolCallById(messages, id) {
+  if (!id) return null;
+  return collectPotentialToolCalls(messages).find(
+    (call) => getToolCallId(call) === id && getToolCallName(call) === import_chatkit_types4.REQUEST_USER_INPUT_TOOL_NAME
+  ) ?? null;
+}
+function normalizeAnswer(value) {
+  if (!isRecord2(value)) return null;
+  const id = readString(value, ["id"]);
+  const question = readString(value, ["question"]);
+  const answerValue = readString(value, ["value"]);
+  const type = readString(value, ["type"]);
+  if (!id || !question || !answerValue || type !== "option" && type !== "other") {
+    return null;
+  }
+  const label = readString(value, ["label"]);
+  const description = readString(value, ["description"]);
+  return {
+    id,
+    question,
+    value: answerValue,
+    type,
+    ...label ? { label } : {},
+    ...description ? { description } : {}
+  };
+}
+function parseResultOutput(output) {
+  let result = output;
+  if (typeof output === "string") {
+    try {
+      result = JSON.parse(output);
+    } catch {
+      return null;
+    }
+  }
+  if (!isRecord2(result) || !Array.isArray(result.answers)) {
+    return null;
+  }
+  const answers = result.answers.map(normalizeAnswer);
+  if (answers.some((answer) => answer === null)) {
+    return null;
+  }
+  return answers;
+}
+function getRequestUserInputResultCardData(content, messages) {
+  const data = isRecord2(content.data) ? content.data : null;
+  if (data?.status !== "success") {
+    return null;
+  }
+  const toolCall = findRequestUserInputClientToolCallById(messages, content.id);
+  if (!toolCall) {
+    return null;
+  }
+  const answers = parseResultOutput(data.output);
+  if (!answers || answers.length === 0) {
+    return null;
+  }
+  return {
+    toolCallId: content.id,
+    answers
+  };
+}
+function RequestUserInputResultCard({
+  result,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "section",
     {
-      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
-      rehypePlugins: [import_rehype_katex.default],
-      components: defaultComponents,
-      children
+      "aria-label": t("message.requestUserInputResult.title"),
+      className: cn(
+        "rounded-lg border border-border bg-muted/25 px-3 py-2.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react11.CheckCircle2, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: t("message.requestUserInputResult.title") })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "div",
+          {
+            className: "rounded-md bg-background/70 px-2.5 py-2",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: t(
+                  answer.type === "other" ? "message.requestUserInputResult.other" : "message.requestUserInputResult.option"
+                ) })
+              ] }),
+              answer.description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
+            ]
+          },
+          `${answer.id}-${index}`
+        )) })
+      ]
     }
-  ) });
-};
-var MarkdownText = (0, import_react6.memo)(MarkdownTextImpl);
+  );
+}
 
 // src/components/thread/messages/widget.tsx
 var import_a2ui_react = require("@xpert-ai/a2ui-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function WidgetMessage({ messageId, data }) {
   const widgets = Array.isArray(data.widgets) ? data.widgets : [];
   if (widgets.length === 0) return null;
   const baseSurfaceId = `widget-${messageId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
     const config = widget?.config;
     if (!config || typeof config !== "object") {
       return null;
     }
     const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       import_a2ui_react.SurfaceRenderer,
       {
         surfaceId,
@@ -3469,58 +5241,44 @@ function WidgetMessage({ messageId, data }) {
 }
 
 // src/components/thread/messages/ai.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-function isTextContent(content) {
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function isTextContent2(content) {
   return content.type === "text";
 }
-function isReasoningContent(content) {
+function isReasoningContent2(content) {
   return content.type === "reasoning";
 }
 function isImageContent(content) {
   return content.type === "image_url";
 }
-function isComponentContent(content) {
+function isComponentContent2(content) {
   return content.type === "component";
 }
-var statusConfig = {
-  success: {
-    iconClass: "border-green-500 text-green-700",
-    icon: import_lucide_react8.CheckCircle2
-  },
-  fail: {
-    iconClass: "border-red-500 text-red-700",
-    icon: import_lucide_react8.XCircle
-  },
-  running: {
-    iconClass: "border-blue-500 text-blue-700",
-    icon: import_lucide_react8.Loader2
-  }
-};
-function isWidgetComponent(content) {
+function isWidgetComponent2(content) {
   const data = content.data;
   return data?.type === "Widget" && Array.isArray(data.widgets);
 }
 function isMemoryContent(content) {
   return content.type === "memory";
 }
-function safeJson(value) {
+function safeJson2(value) {
   try {
     return JSON.stringify(value, null, 2);
   } catch {
     return String(value);
   }
 }
-function formatDisplayValue(value) {
-  return typeof value === "string" ? value : safeJson(value);
+function formatDisplayValue2(value) {
+  return typeof value === "string" ? value : safeJson2(value);
 }
 function ReasoningBlock({ reasoning }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -3528,40 +5286,87 @@ function ReasoningBlock({ reasoning }) {
 function ImageBlock({ content }) {
   const imageUrl = typeof content.image_url === "string" ? content.image_url : typeof content.image_url?.url === "string" ? content.image_url.url : null;
   if (!imageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson(content) })
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson2(content) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson(content.data ?? []) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson2(content.data ?? []) }) })
   ] });
 }
+function parseStepDate2(value) {
+  if (value instanceof Date) {
+    const timestamp2 = value.getTime();
+    return Number.isNaN(timestamp2) ? null : timestamp2;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? null : timestamp;
+}
+function formatStepDuration2(durationMs) {
+  if (durationMs < 1e3) {
+    return `${durationMs}ms`;
+  }
+  if (durationMs < 1e4) {
+    return `${(durationMs / 1e3).toFixed(1)}s`;
+  }
+  if (durationMs < 6e4) {
+    return `${Math.round(durationMs / 1e3)}s`;
+  }
+  const hours = Math.floor(durationMs / 36e5);
+  const minutes = Math.floor(durationMs % 36e5 / 6e4);
+  const seconds = Math.floor(durationMs % 6e4 / 1e3);
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
 function ComponentBlock({ content }) {
-  const [isExpanded, setIsExpanded] = React15.useState(false);
-  const contentRef = React15.useRef(null);
-  const shouldAutoScrollRef = React15.useRef(true);
-  const previousScrollTopRef = React15.useRef(0);
-  const data = content.data ?? {};
+  const { i18n: i18n2 } = useChatkitTranslation();
+  const [isExpanded, setIsExpanded] = React19.useState(false);
+  const contentRef = React19.useRef(null);
+  const shouldAutoScrollRef = React19.useRef(true);
+  const previousScrollTopRef = React19.useRef(0);
+  const [durationNow, setDurationNow] = React19.useState(() => Date.now());
+  const data = getToolStepData(content);
   const category = data.category ?? "Component";
-  const title = data.tool && category === "Tool" ? data.tool : data.title ?? data.type ?? "Component";
+  const title = getToolActivityLabel(content, i18n2.language);
   const status = data.status ?? null;
   const message = data.message ?? null;
   const output = data.output ?? null;
   const error = data.error ?? null;
   const fallback = message ?? output ?? data.data ?? data;
   const hasOutput = message !== null || output !== null;
-  React15.useEffect(() => {
+  const createdAt = parseStepDate2(data.created_date);
+  const endedAt = parseStepDate2(data.end_date);
+  const durationMs = createdAt === null ? null : Math.max(0, (endedAt ?? durationNow) - createdAt);
+  const durationLabel = durationMs === null ? null : formatStepDuration2(durationMs);
+  React19.useEffect(() => {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
-  React15.useEffect(() => {
+  React19.useEffect(() => {
+    if (status !== "running" || createdAt === null || endedAt !== null) {
+      return;
+    }
+    setDurationNow(Date.now());
+    const timer = window.setInterval(() => {
+      setDurationNow(Date.now());
+    }, 100);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [createdAt, endedAt, status]);
+  React19.useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
     previousScrollTopRef.current = element.scrollTop;
@@ -3581,7 +5386,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React15.useEffect(() => {
+  React19.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -3592,23 +5397,27 @@ function ComponentBlock({ content }) {
     }
     element.scrollTop = element.scrollHeight;
   }, [isExpanded, output, status]);
-  const config = status ? statusConfig[status] : null;
+  const config = status ? toolStatusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardTitle, { className: "text-sm truncate", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardTitle, { className: "text-sm truncate", children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+        durationLabel && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Clock3, { className: "h-3 w-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: durationLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             className: "text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": isExpanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_lucide_react8.ChevronDown,
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_lucide_react12.ChevronDown,
               {
                 className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")
               }
@@ -3617,55 +5426,83 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
-      data.input && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue(data.input) }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue(fallback) })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+      data.input && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(data.input) }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue2(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(fallback) })
     ] })
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson2(content) }) })
   ] });
 }
-function renderContentItem(content, index, messageId) {
+function renderContentItem(content, index, message, lookupMessages) {
+  const messageId = message.id;
   if (typeof content === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownText, { children: content }),
-      ";"
-    ] }, `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MarkdownText, { children: content }) }, `text-${index}`);
   }
-  if (isTextContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+  if (isTextContent2(content)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
-  if (isReasoningContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+  if (isReasoningContent2(content)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
-  if (isComponentContent(content)) {
-    if (isWidgetComponent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+  if (isComponentContent2(content)) {
+    const requestUserInputResult = getRequestUserInputResultCardData(
+      content,
+      lookupMessages
+    );
+    if (requestUserInputResult) {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
+    }
+    if (isWidgetComponent2(content)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+}
+function renderContentUnit(unit, message, lookupMessages, hasFollowingItem) {
+  if (unit.type === "item") {
+    return renderContentItem(unit.item, unit.index, message, lookupMessages);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToolComponentGroup, { items: unit.items, hasFollowingItem })
+    },
+    `tool-group-${unit.startIndex}-${unit.items[0]?.id ?? "tool"}-${unit.items.length}`
+  );
 }
-function renderContent(content, messageId) {
+function renderContent(message, lookupMessages) {
+  const content = message.content;
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MarkdownText, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
+  const renderUnits = buildToolComponentRenderUnits(content, {
+    shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-3", children: renderUnits.map(
+    (unit, index) => renderContentUnit(
+      unit,
+      message,
+      lookupMessages,
+      index < renderUnits.length - 1
+    )
+  ) });
 }
 function AssistantStreamingIndicator({
   status,
@@ -3677,23 +5514,24 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
-    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
     ] }),
-    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: labelMap[status] })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: labelMap[status] })
   ] });
 }
 function AssistantMessage({
   message,
+  messages,
   className,
   isStreaming = false,
   streamingStatus
@@ -3702,43 +5540,44 @@ function AssistantMessage({
   const hasContent = hasRenderableMessageContent(message.content);
   const hasReasoning = hasRenderableReasoning(message.reasoning);
   const resolvedStreamingStatus = streamingStatus ?? getAssistantStreamingStatus(message, isStreaming);
-  const answerNode = renderContent(message.content, message.id);
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
+  const lookupMessages = messages?.length ? messages : [message];
+  const answerNode = renderContent(message, lookupMessages);
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
   if (!hasRenderableAssistantMessage(message) && !resolvedStreamingStatus) return null;
   const streamingClass = isStreaming ? "streaming-active" : "";
   if (!hasRenderableAssistantMessage(message) && resolvedStreamingStatus) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
   }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         Tabs,
         {
           defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
           className: "w-full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TabsList, { className: "", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TabsList, { className: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
           ]
         }
       ),
-      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
     hasReasoning ? reasoningNode : answerNode,
-    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
   ] });
 }
 
 // src/components/thread/MessageActions.tsx
-var React16 = __toESM(require("react"), 1);
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var React20 = __toESM(require("react"), 1);
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function MessageActions({
   content,
   isAssistant = false,
@@ -3747,7 +5586,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React16.useState(false);
+  const [copied, setCopied] = React20.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -3760,7 +5599,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       className: cn(
@@ -3768,7 +5607,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             type: "button",
@@ -3778,17 +5617,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Copy, { size: 14 })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.Copy, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             type: "button",
             onClick: onRetry,
             className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
             title: t("messageActions.regenerate"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.RefreshCw, { size: 14 })
           }
         )
       ]
@@ -3797,20 +5636,20 @@ function MessageActions({
 }
 
 // src/components/thread/StartScreen.tsx
-var React17 = require("react");
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var React21 = require("react");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Lightbulb, { size: 20 }),
-    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Sparkles, { size: 20 }),
-    "write": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Pencil, { size: 20 }),
-    "search": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Search, { size: 20 }),
-    "globe": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Globe, { size: 20 }),
-    "book-open": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.BookOpen, { size: 20 }),
-    "compass": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Lightbulb, { size: 20 }),
+    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Sparkles, { size: 20 }),
+    "write": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Pencil, { size: 20 }),
+    "search": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Search, { size: 20 }),
+    "globe": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Globe, { size: 20 }),
+    "book-open": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.BookOpen, { size: 20 }),
+    "compass": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -3818,9 +5657,9 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "button",
       {
         type: "button",
@@ -3831,8 +5670,8 @@ function StartScreen({ startScreen, onPromptClick, className }) {
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
         ]
       },
       `prompt-${index}`
@@ -3841,13 +5680,13 @@ function StartScreen({ startScreen, onPromptClick, className }) {
 }
 
 // src/components/ui/chatkit-avatar.tsx
-var React19 = require("react");
+var React23 = require("react");
 
 // src/components/ui/avatar.tsx
-var React18 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Avatar = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -3859,7 +5698,7 @@ var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var AvatarImage = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -3868,7 +5707,7 @@ var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var AvatarFallback = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -3882,7 +5721,7 @@ var AvatarFallback = React18.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/ui/chatkit-avatar.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function asRecord(value) {
   return value && typeof value === "object" ? value : null;
 }
@@ -3955,21 +5794,21 @@ function ChatkitAvatar({
   const fallbackStyle = {
     ...avatar?.background ? { background: avatar.background } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
-    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
+    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       AvatarFallback,
       {
         className: cn(roundedClass, "text-sm font-medium text-foreground", fallbackClassName),
         style: fallbackStyle,
-        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
+        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
       }
     )
   ] });
 }
 
 // src/hooks/useThreads.ts
-var React20 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -4007,16 +5846,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isReady,
     isLoading: isStreamLoading
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React20.useState([]);
-  const [isLoading, setIsLoading] = React20.useState(false);
-  const [error, setError] = React20.useState(null);
-  const upsertThreadRecord = React20.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React24.useState([]);
+  const [isLoading, setIsLoading] = React24.useState(false);
+  const [error, setError] = React24.useState(null);
+  const upsertThreadRecord = React24.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React20.useCallback(async () => {
+  const refreshThreads = React24.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -4032,7 +5871,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React20.useCallback(
+  const createThread = React24.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -4046,7 +5885,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React20.useCallback(
+  const updateThread = React24.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -4055,7 +5894,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React20.useCallback(
+  const deleteThread = React24.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -4063,11 +5902,11 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React20.useEffect(() => {
+  React24.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React20.useEffect(() => {
+  React24.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const busyStatus = "busy";
@@ -4088,7 +5927,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React20.useEffect(() => {
+  React24.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -4102,7 +5941,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React20.useMemo(
+  const threads = React24.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -4119,10 +5958,10 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 
 // src/components/thread/context-usage-indicator.tsx
-var React21 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 
 // src/components/ui/progress-circle.tsx
-var import_jsx_runtime26 = (
+var import_jsx_runtime30 = (
   // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
   // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
   require("react/jsx-runtime")
@@ -4146,7 +5985,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
     fill: "none",
     strokeWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "svg",
     {
       role: "progressbar",
@@ -4157,8 +5996,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
       "aria-valuemax": 100,
       ...restSvgProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "circle",
           {
             ...commonParams,
@@ -4176,7 +6015,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -4209,20 +6048,20 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React21.useState(null);
-  const [usedContextSize, setUsedContextSize] = React21.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React21.useState(null);
-  const latestRealtimeUsageRef = React21.useRef({
+  const [maxContextSize, setMaxContextSize] = React25.useState(null);
+  const [usedContextSize, setUsedContextSize] = React25.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React25.useState(null);
+  const latestRealtimeUsageRef = React25.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React21.useMemo(
+  const realtimeUsage = React25.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
-  React21.useEffect(() => {
+  React25.useEffect(() => {
     if (!stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
@@ -4242,18 +6081,18 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [stream.client, stream.assistantId]);
-  React21.useEffect(() => {
+  React25.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React21.useEffect(() => {
+  React25.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React21.useEffect(() => {
+  React25.useEffect(() => {
     if (!stream.client) {
       setUsedContextSize(null);
       return;
@@ -4318,8 +6157,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
         type: "button",
@@ -4328,19 +6167,19 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 
 // src/components/chat.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
@@ -4432,8 +6271,8 @@ function ReferenceChip({
 }) {
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
-  const Icon = reference.type === "quote" ? import_lucide_react11.Quote : reference.type === "image" ? import_lucide_react11.ImageIcon : import_lucide_react11.FileText;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const Icon = reference.type === "quote" ? import_lucide_react15.Quote : reference.type === "image" ? import_lucide_react15.ImageIcon : import_lucide_react15.FileText;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cn(
@@ -4442,7 +6281,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -4452,8 +6291,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               className: cn(
@@ -4463,7 +6302,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          metaLine && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               className: cn(
@@ -4474,7 +6313,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "button",
           {
             type: "button",
@@ -4485,7 +6324,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.X, { size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.X, { size: 12 })
           }
         )
       ]
@@ -4509,20 +6348,20 @@ function Chat({
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
   const { theme } = useTheme();
-  const [isHistoryLoading, setIsHistoryLoading] = React22.useState(false);
-  const [historyError, setHistoryError] = React22.useState(null);
-  const [assistantName, setAssistantName] = React22.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React22.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React26.useState(false);
+  const [historyError, setHistoryError] = React26.useState(null);
+  const [assistantName, setAssistantName] = React26.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React26.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React22.useState(false);
-  const [streamingNow, setStreamingNow] = React22.useState(() => Date.now());
-  const loadingStartTimeRef = React22.useRef(null);
-  const lastStreamOutputAtRef = React22.useRef(null);
-  React22.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React26.useState(false);
+  const [streamingNow, setStreamingNow] = React26.useState(() => Date.now());
+  const loadingStartTimeRef = React26.useRef(null);
+  const lastStreamOutputAtRef = React26.useRef(null);
+  React26.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -4545,7 +6384,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -4555,7 +6394,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -4564,52 +6403,55 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  const [draft, setDraft] = React22.useState("");
-  const [selectedTool, setSelectedTool] = React22.useState(
+  const [draft, setDraft] = React26.useState("");
+  const [selectedTool, setSelectedTool] = React26.useState(
     null
   );
-  const [attachments, setAttachments] = React22.useState([]);
-  const [references, setReferences] = React22.useState([]);
-  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React22.useState(false);
-  const [quoteSelection, setQuoteSelection] = React22.useState(null);
-  const [isAtBottom, setIsAtBottom] = React22.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React22.useState(false);
+  const [planModeEnabled, setPlanModeEnabled] = React26.useState(false);
+  const [attachments, setAttachments] = React26.useState([]);
+  const [references, setReferences] = React26.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React26.useState(false);
+  const [quoteSelection, setQuoteSelection] = React26.useState(null);
+  const [isAtBottom, setIsAtBottom] = React26.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React26.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React22.useRef(null);
-  const fileInputRef = React22.useRef(null);
-  const composerInputRef = React22.useRef(null);
-  const shouldAutoScrollRef = React22.useRef(true);
-  const forceFollowRef = React22.useRef(false);
-  const previousMessageCountRef = React22.useRef(0);
-  const previousScrollTopRef = React22.useRef(0);
-  const autoScrollFrameRef = React22.useRef(null);
-  const isPointerDownRef = React22.useRef(false);
-  const lastTouchYRef = React22.useRef(null);
+  const viewportRef = React26.useRef(null);
+  const fileInputRef = React26.useRef(null);
+  const composerInputRef = React26.useRef(null);
+  const shouldAutoScrollRef = React26.useRef(true);
+  const forceFollowRef = React26.useRef(false);
+  const previousMessageCountRef = React26.useRef(0);
+  const previousScrollTopRef = React26.useRef(0);
+  const autoScrollFrameRef = React26.useRef(null);
+  const isPointerDownRef = React26.useRef(false);
+  const lastTouchYRef = React26.useRef(null);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React22.useMemo(
+  const messages = React26.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
   const trimmedDraft = draft.trim();
   const hasReferences = references.length > 0;
-  const pendingFollowUps = React22.useMemo(
+  const pendingFollowUps = React26.useMemo(
     () => [...stream.pendingFollowUps ?? []].sort(
       (a, b) => a.createdAt - b.createdAt
     ),
     [stream.pendingFollowUps]
   );
-  const clearQuoteSelection = React22.useCallback(() => {
+  const hasPendingFollowUps = pendingFollowUps.length > 0;
+  const hasPendingRequestUserInput = Boolean(stream.pendingRequestUserInput);
+  const clearQuoteSelection = React26.useCallback(() => {
     setQuoteSelection(null);
   }, []);
   useParentMessenger({
-    onSetComposerValue: React22.useCallback(
+    onSetComposerValue: React26.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -4632,11 +6474,11 @@ function Chat({
       },
       [composer?.tools]
     ),
-    onFocusComposer: React22.useCallback(() => {
+    onFocusComposer: React26.useCallback(() => {
       composerInputRef.current?.focus();
     }, [])
   });
-  const syncQuoteSelection = React22.useCallback(() => {
+  const syncQuoteSelection = React26.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -4681,23 +6523,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React22.useCallback(() => {
+  const cancelPendingAutoScroll = React26.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React22.useCallback(() => {
+  const disableAutoFollow = React26.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React22.useCallback(() => {
+  const enableAutoFollow = React26.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React22.useCallback(
+  const scrollToBottom = React26.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -4719,7 +6561,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -4800,14 +6642,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (!shouldAutoScrollRef.current) {
@@ -4826,7 +6668,7 @@ function Chat({
     clientSecret: effectiveClientSecret
   });
   const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React22.useMemo(() => {
+  const missingConfigShortMessage = React26.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlShort");
@@ -4838,7 +6680,7 @@ function Chat({
         return t("chat.missingConfigShort");
     }
   }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React22.useMemo(() => {
+  const missingConfigDetailMessage = React26.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlDetail");
@@ -4852,8 +6694,8 @@ function Chat({
   }, [missingConfigKind, t]);
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachments.some((a) => a.status === "uploading");
-  const isSendDisabled = !trimmedDraft && !hasReferences || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
-  const resizeComposerInput = React22.useCallback(() => {
+  const isSendDisabled = !trimmedDraft && !hasReferences || hasPendingRequestUserInput || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
+  const resizeComposerInput = React26.useCallback(() => {
     const textarea = composerInputRef.current;
     if (!textarea) {
       return;
@@ -4866,16 +6708,16 @@ function Chat({
     textarea.style.height = `${nextHeight}px`;
     textarea.style.overflowY = textarea.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     resizeComposerInput();
   }, [draft, resizeComposerInput]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -4892,14 +6734,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React22.useEffect(() => {
+  React26.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -4930,7 +6772,7 @@ function Chat({
     mimetype: a.storageFile?.mimetype ?? a.file.type,
     size: a.storageFile?.size ?? a.file.size
   }));
-  const submitDraft = React22.useCallback(
+  const submitDraft = React26.useCallback(
     (followUpOverride) => {
       if (isSendDisabled) return;
       const filesToSend = uploadedFiles.length > 0 ? [...uploadedFiles] : void 0;
@@ -4960,6 +6802,9 @@ function Chat({
       if (filesToSend) {
         inputPayload.files = filesToSend;
       }
+      if (planModeEnabled) {
+        inputPayload.planMode = true;
+      }
       const requestOptions = buildInjectedRequestOptions({
         defaults: options?.request,
         humanInput: inputPayload
@@ -4994,6 +6839,7 @@ function Chat({
       references,
       scrollToBottom,
       selectedTool,
+      planModeEnabled,
       stream,
       trimmedDraft,
       uploadedFiles,
@@ -5004,7 +6850,7 @@ function Chat({
     event.preventDefault();
     submitDraft();
   };
-  const handleEditPendingFollowUp = React22.useCallback(
+  const handleEditPendingFollowUp = React26.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -5031,7 +6877,7 @@ function Chat({
     },
     [pendingFollowUps, stream]
   );
-  const handleQuoteSelection = React22.useCallback(() => {
+  const handleQuoteSelection = React26.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -5047,7 +6893,7 @@ function Chat({
   const handleAttachmentClick = () => {
     fileInputRef.current?.click();
   };
-  const uploadContextFile = React22.useCallback(
+  const uploadContextFile = React26.useCallback(
     (file) => stream.client.contexts.uploadFile(file),
     [stream.client]
   );
@@ -5073,7 +6919,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React22.useCallback(
+  const handleComposerPaste = React26.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -5152,18 +6998,18 @@ function Chat({
       uploadContextFile
     ]
   );
-  const alternateFollowUpShortcutLabel = React22.useMemo(() => {
+  const alternateFollowUpShortcutLabel = React26.useMemo(() => {
     if (typeof navigator === "undefined") {
       return "\u2318Enter";
     }
     const platform = navigator.platform || navigator.userAgent;
     return /Mac|iPhone|iPad|iPod/i.test(platform) ? "\u2318Enter" : "Ctrl+Enter";
   }, []);
-  const followUpShortcutLabels = React22.useMemo(
+  const followUpShortcutLabels = React26.useMemo(
     () => getComposerFollowUpShortcutLabels(alternateFollowUpShortcutLabel),
     [alternateFollowUpShortcutLabel]
   );
-  const uploadFile = React22.useCallback(
+  const uploadFile = React26.useCallback(
     async (localId, file) => {
       try {
         const result = await uploadContextFile(file);
@@ -5186,7 +7032,7 @@ function Chat({
     },
     [uploadContextFile]
   );
-  const handleRetryUpload = React22.useCallback(
+  const handleRetryUpload = React26.useCallback(
     (localId) => {
       const attachment = attachments.find((a) => a.localId === localId);
       if (!attachment || attachment.status !== "error") return;
@@ -5257,10 +7103,23 @@ function Chat({
       content: prompt
     };
     const nextFollowUpMode = stream.isLoading ? stream.followUpBehavior : void 0;
+    const inputPayload = {
+      input: prompt,
+      ...planModeEnabled ? { planMode: true } : {}
+    };
+    const requestOptions = buildInjectedRequestOptions({
+      defaults: options?.request,
+      humanInput: inputPayload
+    });
     stream.submit(
-      { input: { input: prompt } },
+      {
+        input: inputPayload,
+        ...requestOptions.state ? { state: requestOptions.state } : {}
+      },
       {
         ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
+        ...requestOptions.context ? { context: requestOptions.context } : {},
+        ...requestOptions.config ? { config: requestOptions.config } : {},
         ...!nextFollowUpMode ? {
           optimisticValues: (prev) => {
             const prevMessages = prev?.messages ?? [];
@@ -5271,7 +7130,7 @@ function Chat({
     );
     scrollToBottom(true, true);
   };
-  const loadConversationMessages = React22.useCallback(
+  const loadConversationMessages = React26.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -5357,18 +7216,18 @@ function Chat({
     }
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
-  const currentThread = React22.useMemo(
+  const currentThread = React26.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const errorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React22.useMemo(() => {
+  const threadErrorMessage = React26.useMemo(() => {
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
     return message || t("thread.errorToast");
   }, [currentThread, t]);
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       ref: viewportRef,
@@ -5377,10 +7236,10 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 ChatkitAvatar,
                 {
                   avatar: assistantAvatar,
@@ -5388,10 +7247,10 @@ function Chat({
                   label: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "truncate", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "h2",
                 {
                   className: "text-lg font-semibold truncate",
@@ -5399,27 +7258,30 @@ function Chat({
                   children: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: handleNewThread,
-                disabled: missingConfig || isHistoryLoading,
-                className: cn(
-                  "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
-                  "text-muted-foreground hover:text-foreground hover:bg-muted",
-                  "transition-colors duration-150",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                title: t("history.newThread"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.Pencil, { size: 16 })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Tooltip, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleNewThread,
+                  disabled: missingConfig || isHistoryLoading,
+                  className: cn(
+                    "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md",
+                    "text-muted-foreground hover:text-foreground hover:bg-muted",
+                    "transition-colors duration-150",
+                    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
+                  ),
+                  "aria-label": t("history.newThread"),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.Pencil, { size: 16 })
+                }
+              ) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipContent, { side: "bottom", children: t("history.newThread") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               HistorySidebar,
               {
                 threads,
@@ -5433,18 +7295,18 @@ function Chat({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-          historyError && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+          historyError && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-4", children: [
             messages.map((message, index) => {
               const messageType = String(message.type);
               const isAssistantMessage = messageType === "assistant" || messageType === "ai";
@@ -5471,7 +7333,7 @@ function Chat({
               if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanReferences.length === 0) {
                 return null;
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "div",
                 {
                   className: cn(
@@ -5479,8 +7341,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       "div",
                       {
                         ...canQuoteMessage ? {
@@ -5492,18 +7354,24 @@ function Chat({
                           message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                           // AI messages: use chat-specific foreground color
                         ),
-                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                           AssistantMessage,
                           {
                             message: {
                               ...message,
                               type: "assistant"
                             },
+                            messages: messages.slice(0, index + 1).map(
+                              (item) => ({
+                                ...item,
+                                type: String(item.type) === "ai" ? "assistant" : item.type
+                              })
+                            ),
                             isStreaming: isStreamingMessage,
                             streamingStatus
                           }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             ReferenceChip,
                             {
                               reference,
@@ -5511,29 +7379,29 @@ function Chat({
                             },
                             getReferenceKey(reference)
                           )) }),
-                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.FileText, { size: 12 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.FileText, { size: 12 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       MessageActions,
                       {
                         content: messageContent,
@@ -5569,7 +7437,7 @@ function Chat({
                 stream.isLoading,
                 { now: streamingNow }
               );
-              return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 AssistantStreamingIndicator,
                 {
                   status: fallbackStreamingStatus ?? "loading"
@@ -5578,7 +7446,7 @@ function Chat({
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Button,
           {
             type: "button",
@@ -5591,10 +7459,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.ArrowDown, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.ArrowDown, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -5603,7 +7471,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               Button,
               {
                 type: "button",
@@ -5615,16 +7483,16 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.Quote, { size: 14 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -5635,7 +7503,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "div",
             {
               className: cn(
@@ -5643,16 +7511,16 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  import_lucide_react11.Loader2,
+                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  import_lucide_react15.Loader2,
                   {
                     size: 14,
                     className: "animate-spin text-muted-foreground"
                   }
                 ),
-                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.FileText, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.FileText, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.FileText, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.FileText, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "span",
                   {
                     className: cn(
@@ -5662,17 +7530,17 @@ function Chat({
                     children: item.file.name
                   }
                 ),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRetryUpload(item.localId),
                     className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                     title: t("chat.retryUpload"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.RefreshCw, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.RefreshCw, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5681,14 +7549,14 @@ function Chat({
                       "ml-1 rounded-full p-0.5",
                       item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.X, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             ReferenceChip,
             {
               reference,
@@ -5702,19 +7570,27 @@ function Chat({
             },
             getReferenceKey(reference)
           )) }),
-          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setSelectedTool(null),
                 className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
-                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react11.X, { size: 12 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.X, { size: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            PendingTodos,
+            {
+              snapshot: stream.todos,
+              attachToComposer: !hasPendingFollowUps,
+              className: hasPendingFollowUps ? "mb-2" : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             PendingFollowUps,
             {
               items: pendingFollowUps,
@@ -5725,10 +7601,20 @@ function Chat({
               canSendNow: stream.canSendPendingFollowUpNow,
               onSendNow: (id) => stream.sendPendingFollowUpNow(id),
               onEdit: handleEditPendingFollowUp,
-              onRemove: stream.removePendingFollowUp
+              onRemove: stream.removePendingFollowUp,
+              attachToComposer: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            RequestUserInputPanel,
+            {
+              request: stream.pendingRequestUserInput,
+              onSubmit: stream.submitRequestUserInput,
+              onDismiss: stream.stop,
+              attachToComposer: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "div",
             {
               className: cn(
@@ -5740,17 +7626,19 @@ function Chat({
                 getRoundedClass(theme.radius)
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   ComposerMenu,
                   {
                     composer,
                     onAttachmentClick: handleAttachmentClick,
                     onToolSelect: handleToolSelect,
                     selectedTool,
-                    disabled: missingConfig || isHistoryLoading
+                    planModeEnabled,
+                    onPlanModeChange: setPlanModeEnabled,
+                    disabled: missingConfig || isHistoryLoading || hasPendingRequestUserInput
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "textarea",
                   {
                     ref: composerInputRef,
@@ -5760,7 +7648,7 @@ function Chat({
                     onKeyDown: handleComposerKeyDown,
                     rows: 1,
                     placeholder: inputPlaceholder,
-                    disabled: missingConfig || isHistoryLoading,
+                    disabled: missingConfig || isHistoryLoading || hasPendingRequestUserInput,
                     className: cn(
                       "min-h-8 max-h-32 flex-1 resize-none bg-transparent py-1 pr-2 text-sm leading-5 text-foreground outline-none",
                       "placeholder:text-muted-foreground",
@@ -5768,12 +7656,12 @@ function Chat({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   SendButton,
                   {
                     disabled: isSendDisabled,
                     isLoading: stream.isLoading,
-                    showStop: stream.isLoading && !trimmedDraft,
+                    showStop: stream.isLoading && (!trimmedDraft || hasPendingRequestUserInput),
                     onStop: () => stream.stop(),
                     stopLabel: t("chat.stop"),
                     sendLabel: t("chat.send"),
@@ -5792,7 +7680,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "p",
             {
               className: cn(
@@ -5802,9 +7690,9 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] })
       ]
@@ -5813,11 +7701,11 @@ function Chat({
 }
 
 // src/components/ui/input.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Input = React23.forwardRef(
+var React27 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Input = React27.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "input",
       {
         ref,
@@ -5834,10 +7722,10 @@ var Input = React23.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/separator.tsx
-var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Separator = React24.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var React28 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Separator = React28.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       ref,