@pactor-app/ui 1.21.0 → 1.23.0

package/dist/{chunk-XXOY57SN.js → chunk-VTCNWVKQ.js}

@@ -2,7 +2,7 @@ import {
   Icon,
   Menu,
   Sidebar
-} from "./chunk-7WB4TS55.js";
+} from "./chunk-44DAGWXZ.js";
 import {
   Alert,
   AlertDescription,
@@ -1611,6 +1611,7 @@ function Command2({
 import { useRenderer as useRenderer5 } from "@pactor-app/runtime";
 import { ArrowUp } from "lucide-react";
 import {
+  isValidElement,
   useRef as useRef3,
   useState as useState10
 } from "react";
@@ -1625,6 +1626,7 @@ function ChatInput({
   toolbarEnd,
   header,
   footer,
+  field,
   onChange,
   onSubmit,
   className,
@@ -1635,6 +1637,8 @@ function ChatInput({
   const [draft, setDraft] = useState10("");
   const text = controlled ? value : draft;
   const canSubmit = !disabled && text.trim() !== "";
+  const customField = field !== void 0 && field !== null;
+  const renderSlot = (slot) => isValidElement(slot) || typeof slot !== "object" || slot === null ? slot : renderChildren([slot]);
   const composingRef = useRef3(false);
   const handleChange = (next) => {
     if (!controlled) {
@@ -1670,8 +1674,8 @@ function ChatInput({
       ),
       style,
       children: [
-        header ? /* @__PURE__ */ jsx26("div", { className: "px-3 pt-3", children: renderChildren([header]) }) : null,
-        /* @__PURE__ */ jsx26(
+        header ? /* @__PURE__ */ jsx26("div", { className: "px-3 pt-3", children: renderSlot(header) }) : null,
+        customField ? field : /* @__PURE__ */ jsx26(
           Textarea,
           {
             value: text,
@@ -1686,9 +1690,9 @@ function ChatInput({
           }
         ),
         toolbarStart || toolbarEnd || !hideSend ? /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1 px-2 pb-2", children: [
-          toolbarStart ? renderChildren([toolbarStart]) : null,
+          toolbarStart ? renderSlot(toolbarStart) : null,
           /* @__PURE__ */ jsx26("span", { className: "flex-1" }),
-          toolbarEnd ? renderChildren([toolbarEnd]) : null,
+          toolbarEnd ? renderSlot(toolbarEnd) : null,
           hideSend ? null : /* @__PURE__ */ jsx26(
             Button,
             {
@@ -1702,7 +1706,7 @@ function ChatInput({
             }
           )
         ] }) : null,
-        footer ? /* @__PURE__ */ jsx26("div", { className: "border-t border-border px-3 py-2", children: renderChildren([footer]) }) : null
+        footer ? /* @__PURE__ */ jsx26("div", { className: "border-t border-border px-3 py-2", children: renderSlot(footer) }) : null
       ]
     }
   );
@@ -2138,7 +2142,8 @@ function DatePicker(props) {
             onSelect: handleRangeDaySelect,
             modifiers: rangeModifiers,
             modifiersClassNames: rangeModifierClassNames,
-            locale: dfLocale
+            locale: dfLocale,
+            showOutsideDays: false
           }
         )
       }
@@ -2152,7 +2157,8 @@ function DatePicker(props) {
         onSelect: handleRangeDaySelect,
         modifiers: rangeModifiers,
         modifiersClassNames: rangeModifierClassNames,
-        locale: dfLocale
+        locale: dfLocale,
+        showOutsideDays: false
       }
     ) })
   ] }) : /* @__PURE__ */ jsx31(
@@ -7557,7 +7563,14 @@ function ArtifactTreeRow({
         className: "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent",
         onClick: () => setOpen((value) => !value),
         children: [
-          /* @__PURE__ */ jsx113("span", { className: "inline-flex transition-transform data-[open=true]:rotate-90", "data-open": open, children: /* @__PURE__ */ jsx113(Icon, { name: "chevron-right", size: 12 }) }),
+          /* @__PURE__ */ jsx113(
+            "span",
+            {
+              className: "inline-flex transition-transform data-[open=true]:rotate-90",
+              "data-open": open,
+              children: /* @__PURE__ */ jsx113(Icon, { name: "chevron-right", size: 12 })
+            }
+          ),
           /* @__PURE__ */ jsx113(Icon, { name: "folder", size: 13 }),
           /* @__PURE__ */ jsx113("span", { className: "min-w-0 flex-1 truncate", children: node.name })
         ]
@@ -7689,6 +7702,7 @@ function ArtifactPanel({
               icon: "download",
               variant: "text",
               tooltip: "\u4E0B\u8F7D\u4EA7\u7269",
+              className: "px-2",
               onClick: () => onDownload ? onDownload(artifact) : void downloadArtifact(artifact)
             }
           ) : null,
@@ -7698,11 +7712,12 @@ function ArtifactPanel({
               icon: "x",
               variant: "text",
               tooltip: "\u6536\u8D77\u4EA7\u7269\u533A",
+              className: "px-2",
               onClick: () => onClose?.()
             }
           )
         ] }),
-        /* @__PURE__ */ jsx113("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ jsx113(
+        /* @__PURE__ */ jsx113("div", { className: "scrollbar-subtle min-h-0 flex-1 overflow-auto p-4", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ jsx113(
           ArtifactListView,
           {
             nodes: buildArtifactTree(artifacts),
@@ -7873,7 +7888,7 @@ function Thinking({
     {
       "data-slot": "thinking",
       "data-status": status,
-      className: cn("w-full overflow-hidden rounded-md border border-border bg-muted/50", className),
+      className: cn("w-full", className),
       style,
       children: [
         /* @__PURE__ */ jsxs82(
@@ -7882,12 +7897,12 @@ function Thinking({
             type: "button",
             "data-slot": "thinking-trigger",
             "aria-expanded": isExpanded,
-            className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
+            className: "flex w-full cursor-pointer items-center gap-2 py-1 text-left text-sm",
             onClick: toggle,
             children: [
               /* @__PURE__ */ jsx118("span", { className: cn("text-muted-foreground", status === "thinking" && "animate-pulse motion-reduce:animate-none"), children: /* @__PURE__ */ jsx118(Icon, { name: "brain", size: "sm" }) }),
-              /* @__PURE__ */ jsx118("span", { "data-slot": "thinking-title", className: "flex-1 text-muted-foreground", children: resolvedTitle }),
-              /* @__PURE__ */ jsx118(Icon, { name: isExpanded ? "chevron-down" : "chevron-right", size: "sm" })
+              /* @__PURE__ */ jsx118("span", { "data-slot": "thinking-title", className: "text-muted-foreground", children: resolvedTitle }),
+              /* @__PURE__ */ jsx118("span", { className: "text-muted-foreground", children: /* @__PURE__ */ jsx118(Icon, { name: isExpanded ? "chevron-down" : "chevron-right", size: "sm" }) })
             ]
           }
         ),
@@ -7895,7 +7910,7 @@ function Thinking({
           "div",
           {
             "data-slot": "thinking-content",
-            className: "border-t border-border px-3 py-2 text-sm whitespace-pre-wrap text-muted-foreground",
+            className: "py-1 pl-6 text-sm whitespace-pre-wrap text-muted-foreground",
             children: content
           }
         ) : null
@@ -7906,7 +7921,7 @@ function Thinking({
 
 // src/components/chat/ToolCall/index.tsx
 import { useState as useState40 } from "react";
-import { jsx as jsx119, jsxs as jsxs83 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx119, jsxs as jsxs83 } from "react/jsx-runtime";
 var statusIcon3 = {
   running: { icon: "loader-circle", className: "text-info", spin: true },
   done: { icon: "circle-check", className: "text-success" },
@@ -7925,42 +7940,51 @@ function ToolCall({ name, params, status = "done", result, durationMs, defaultEx
   const [expanded, setExpanded] = useState40(defaultExpanded ?? status === "running");
   const meta = statusIcon3[status];
   const paramsText = renderValue(params);
+  const hasDetail = Boolean(paramsText) || Boolean(result);
+  const headerInner = /* @__PURE__ */ jsxs83(Fragment11, { children: [
+    /* @__PURE__ */ jsx119("span", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx119(Icon, { name: "terminal", size: "sm" }) }),
+    /* @__PURE__ */ jsx119("span", { "data-slot": "tool-call-name", className: "min-w-0 truncate font-medium", children: name ?? "\u5DE5\u5177\u8C03\u7528" }),
+    /* @__PURE__ */ jsx119("span", { className: cn("shrink-0", meta.className, meta.spin && "animate-spin motion-reduce:animate-none"), children: /* @__PURE__ */ jsx119(Icon, { name: meta.icon, size: "sm" }) }),
+    durationMs !== void 0 ? /* @__PURE__ */ jsxs83("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+      (durationMs / 1e3).toFixed(1),
+      "s"
+    ] }) : null,
+    hasDetail ? /* @__PURE__ */ jsx119("span", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx119(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: "sm" }) }) : null
+  ] });
   return /* @__PURE__ */ jsxs83(
     "div",
     {
       "data-slot": "tool-call",
       "data-status": status,
-      className: cn("w-full overflow-hidden rounded-md border border-border", className),
+      className: cn("w-full", className),
       style,
       children: [
-        /* @__PURE__ */ jsxs83(
+        hasDetail ? /* @__PURE__ */ jsx119(
           "button",
           {
             type: "button",
             "data-slot": "tool-call-trigger",
             "aria-expanded": expanded,
-            className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm",
+            className: "flex w-full cursor-pointer items-center gap-2 py-1 text-left text-sm",
             onClick: () => setExpanded((value) => !value),
-            children: [
-              /* @__PURE__ */ jsx119("span", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ jsx119(Icon, { name: "terminal", size: "sm" }) }),
-              /* @__PURE__ */ jsx119("span", { "data-slot": "tool-call-name", className: "min-w-0 flex-1 truncate font-medium", children: name ?? "\u5DE5\u5177\u8C03\u7528" }),
-              /* @__PURE__ */ jsx119("span", { className: cn("shrink-0", meta.className, meta.spin && "animate-spin motion-reduce:animate-none"), children: /* @__PURE__ */ jsx119(Icon, { name: meta.icon, size: "sm" }) }),
-              durationMs !== void 0 ? /* @__PURE__ */ jsxs83("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
-                (durationMs / 1e3).toFixed(1),
-                "s"
-              ] }) : null,
-              /* @__PURE__ */ jsx119(Icon, { name: expanded ? "chevron-down" : "chevron-right", size: "sm" })
-            ]
+            children: headerInner
+          }
+        ) : /* @__PURE__ */ jsx119(
+          "div",
+          {
+            "data-slot": "tool-call-trigger",
+            className: "flex w-full items-center gap-2 py-1 text-left text-sm",
+            children: headerInner
           }
         ),
-        expanded ? /* @__PURE__ */ jsxs83("div", { "data-slot": "tool-call-body", className: "flex flex-col gap-2 border-t border-border px-3 py-2", children: [
+        hasDetail && expanded ? /* @__PURE__ */ jsxs83("div", { "data-slot": "tool-call-body", className: "flex flex-col gap-2 py-1 pl-6", children: [
           paramsText ? /* @__PURE__ */ jsxs83("div", { children: [
             /* @__PURE__ */ jsx119("div", { className: "text-xs font-medium text-muted-foreground", children: "\u53C2\u6570" }),
-            /* @__PURE__ */ jsx119("pre", { "data-slot": "tool-call-params", className: "mt-1 overflow-x-auto rounded-sm bg-muted p-2 text-xs whitespace-pre-wrap", children: paramsText })
+            /* @__PURE__ */ jsx119("pre", { "data-slot": "tool-call-params", className: "mt-1 overflow-x-auto text-xs whitespace-pre-wrap text-muted-foreground", children: paramsText })
           ] }) : null,
           result ? /* @__PURE__ */ jsxs83("div", { children: [
             /* @__PURE__ */ jsx119("div", { className: "text-xs font-medium text-muted-foreground", children: "\u7ED3\u679C" }),
-            /* @__PURE__ */ jsx119("pre", { "data-slot": "tool-call-result", className: "mt-1 overflow-x-auto rounded-sm bg-muted p-2 text-xs whitespace-pre-wrap", children: result })
+            /* @__PURE__ */ jsx119("pre", { "data-slot": "tool-call-result", className: "mt-1 overflow-x-auto text-xs whitespace-pre-wrap text-muted-foreground", children: result })
           ] }) : null
         ] }) : null
       ]
@@ -7970,12 +7994,26 @@ function ToolCall({ name, params, status = "done", result, durationMs, defaultEx
 
 // src/components/chat/ChatMessage/index.tsx
 import { jsx as jsx120, jsxs as jsxs84 } from "react/jsx-runtime";
-function PartView({ part, role }) {
+function PartView({
+  part,
+  role,
+  onOpenArtifacts
+}) {
+  if (role === "system" && (part.type === "text" || part.type === "markdown")) {
+    return /* @__PURE__ */ jsx120(
+      "div",
+      {
+        "data-slot": "chat-message-system-part",
+        className: "w-full text-center text-xs text-muted-foreground",
+        children: part.type === "markdown" ? /* @__PURE__ */ jsx120(MarkdownDslComponent, { content: part.content }) : part.content
+      }
+    );
+  }
   switch (part.type) {
     case "text":
       return /* @__PURE__ */ jsx120(Bubble2, { align: role === "user" ? "end" : "start", variant: role === "user" ? "default" : "muted", children: /* @__PURE__ */ jsx120("span", { className: "text-sm whitespace-pre-wrap", children: part.content }) });
     case "markdown":
-      return /* @__PURE__ */ jsx120(Bubble2, { align: role === "user" ? "end" : "start", variant: role === "user" ? "default" : "ghost", children: /* @__PURE__ */ jsx120(MarkdownDslComponent, { content: part.content, className: "text-sm" }) });
+      return /* @__PURE__ */ jsx120(Bubble2, { align: role === "user" ? "end" : "start", variant: role === "user" ? "default" : "ghost", children: /* @__PURE__ */ jsx120(MarkdownDslComponent, { content: part.content }) });
     case "thinking":
       return /* @__PURE__ */ jsx120(Thinking, { content: part.content, status: part.status ?? "done" });
     case "tool-call":
@@ -7983,10 +8021,31 @@ function PartView({ part, role }) {
     case "tool-result":
       return /* @__PURE__ */ jsx120("pre", { "data-slot": "chat-message-tool-result", className: "overflow-x-auto rounded-md bg-muted p-2 text-xs whitespace-pre-wrap", children: part.content });
     case "status":
-      return /* @__PURE__ */ jsxs84("div", { "data-slot": "chat-message-status", className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+      return /* @__PURE__ */ jsxs84("div", { "data-slot": "chat-message-status", className: "flex w-fit items-center gap-1.5 text-muted-foreground", children: [
         /* @__PURE__ */ jsx120(Icon, { name: "clock", size: "sm" }),
         part.text
       ] });
+    case "artifacts": {
+      const artifactsClass = "flex w-fit items-center gap-1.5 text-muted-foreground";
+      const label = `\u5DF2\u751F\u6210 ${part.count} \u4E2A\u4EA7\u7269`;
+      return onOpenArtifacts ? /* @__PURE__ */ jsxs84(
+        "button",
+        {
+          type: "button",
+          "data-slot": "chat-message-artifacts",
+          className: cn(artifactsClass, "cursor-pointer hover:text-foreground"),
+          onClick: onOpenArtifacts,
+          children: [
+            /* @__PURE__ */ jsx120(Icon, { name: "package", size: "sm" }),
+            label,
+            /* @__PURE__ */ jsx120(Icon, { name: "chevron-right", size: 12 })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs84("div", { "data-slot": "chat-message-artifacts", className: artifactsClass, children: [
+        /* @__PURE__ */ jsx120(Icon, { name: "package", size: "sm" }),
+        label
+      ] });
+    }
     case "error":
       return /* @__PURE__ */ jsxs84("div", { "data-slot": "chat-message-error", className: "flex items-center gap-1.5 text-sm text-destructive", children: [
         /* @__PURE__ */ jsx120(Icon, { name: "circle-alert", size: "sm" }),
@@ -7996,19 +8055,31 @@ function PartView({ part, role }) {
       return null;
   }
 }
+var ACTION_ICON_BY_NAME = {
+  copy: "copy",
+  retry: "rotate-ccw",
+  regenerate: "refresh-ccw",
+  edit: "pencil",
+  like: "thumbs-up",
+  dislike: "thumbs-down",
+  share: "share",
+  delete: "trash"
+};
 function ChatMessage({
   role = "assistant",
   parts = [],
   status = "completed",
   agent,
   time,
-  showSender = true,
+  showSender = false,
   actions = [],
   onAction,
+  onOpenArtifacts,
   className,
   style
 }) {
   const isUser = role === "user";
+  const isSystem = role === "system";
   const senderName = isUser ? "\u6211" : agent?.name ?? "\u52A9\u624B";
   return /* @__PURE__ */ jsxs84(
     "div",
@@ -8016,10 +8087,16 @@ function ChatMessage({
       "data-slot": "chat-message",
       "data-role": role,
       "data-status": status,
-      className: cn("flex w-full flex-col gap-1.5", isUser && "items-end", className),
+      className: cn(
+        "flex w-full flex-col gap-1.5",
+        isUser && "items-end",
+        // system 居中弱提示（参考 @pactor-app/chat MessageBubble）
+        isSystem && "items-center text-muted-foreground",
+        className
+      ),
       style,
       children: [
-        showSender && role !== "system" ? /* @__PURE__ */ jsx120(
+        showSender ? /* @__PURE__ */ jsx120(
           Sender,
           {
             name: senderName,
@@ -8028,35 +8105,454 @@ function ChatMessage({
             align: isUser ? "end" : "start"
           }
         ) : null,
-        /* @__PURE__ */ jsxs84("div", { className: cn("flex min-w-0 w-full max-w-full flex-col gap-2", isUser && "items-end"), children: [
-          parts.map((part, index) => /* @__PURE__ */ jsx120(PartView, { part, role }, index)),
+        /* @__PURE__ */ jsxs84("div", { className: cn("flex min-w-0 w-full max-w-full flex-col gap-2", isUser && "items-end", isSystem && "items-center"), children: [
+          parts.map((part, index) => /* @__PURE__ */ jsx120(PartView, { part, role, onOpenArtifacts }, index)),
           status === "streaming" ? /* @__PURE__ */ jsx120(StreamingText, { content: "", streaming: true }) : null
         ] }),
-        actions.length > 0 && (status === "completed" || status === "error") ? /* @__PURE__ */ jsx120("div", { "data-slot": "chat-message-actions", className: "flex items-center gap-1", children: actions.map((action) => /* @__PURE__ */ jsxs84(
-          "button",
-          {
-            type: "button",
-            "data-slot": "chat-message-action",
-            "data-action": action.name,
-            className: "flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
-            onClick: () => onAction?.(action.name),
-            children: [
-              action.icon ? /* @__PURE__ */ jsx120(Icon, { name: action.icon, size: "sm" }) : null,
-              action.label ?? action.name
-            ]
-          },
-          action.name
-        )) }) : null
+        actions.length > 0 && (status === "completed" || status === "error") ? /* @__PURE__ */ jsx120("div", { "data-slot": "chat-message-actions", className: "flex items-center gap-1 mt-2", children: actions.map((action) => {
+          const label = action.label ?? action.name;
+          const iconName = action.icon ?? ACTION_ICON_BY_NAME[action.name];
+          if (iconName) {
+            return /* @__PURE__ */ jsx120(Tooltip2, { content: label, side: "top", children: /* @__PURE__ */ jsx120(
+              "button",
+              {
+                type: "button",
+                "data-slot": "chat-message-action",
+                "data-action": action.name,
+                "aria-label": label,
+                className: "flex cursor-pointer items-center rounded-sm p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
+                onClick: () => onAction?.(action.name),
+                children: /* @__PURE__ */ jsx120(Icon, { name: iconName, size: "sm" })
+              }
+            ) }, action.name);
+          }
+          return /* @__PURE__ */ jsx120(
+            "button",
+            {
+              type: "button",
+              "data-slot": "chat-message-action",
+              "data-action": action.name,
+              className: "flex items-center cursor-pointer gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
+              onClick: () => onAction?.(action.name),
+              children: label
+            },
+            action.name
+          );
+        }) }) : null
       ]
     }
   );
 }
 
 // src/components/chat/ChatPage/index.tsx
-import { useState as useState42 } from "react";
+import { useRenderer as useRenderer18 } from "@pactor-app/runtime";
+import { isValidElement as isValidElement2, useState as useState44 } from "react";
 
 // src/components/chat/Composer/index.tsx
-import { jsx as jsx121, jsxs as jsxs85 } from "react/jsx-runtime";
+import {
+  useRef as useRef9,
+  useState as useState42
+} from "react";
+
+// src/components/chat/Composer/mention-input.tsx
+import {
+  forwardRef,
+  useEffect as useEffect34,
+  useImperativeHandle,
+  useRef as useRef8,
+  useState as useState41
+} from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Fragment as Fragment12, jsx as jsx121, jsxs as jsxs85 } from "react/jsx-runtime";
+var NBSP = "\xA0";
+var CHIP_ATTR = "data-mention-chip";
+function escapeRegExp(text) {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function isChipElement(node) {
+  return node instanceof HTMLElement && node.hasAttribute(CHIP_ATTR);
+}
+function serializeNode(node) {
+  let out = "";
+  node.childNodes.forEach((child) => {
+    if (child.nodeType === Node.TEXT_NODE) {
+      out += (child.textContent ?? "").replace(/\u00A0/g, " ");
+    } else if (isChipElement(child)) {
+      out += `${child.dataset["trigger"] ?? ""}${child.dataset["label"] ?? ""}`;
+    } else if (child instanceof HTMLBRElement) {
+      out += "\n";
+    } else if (child instanceof HTMLElement) {
+      const inner = serializeNode(child).replace(/\n$/, "");
+      out += (out === "" || out.endsWith("\n") ? "" : "\n") + inner + "\n";
+    }
+  });
+  return out;
+}
+function collectChips(field) {
+  return Array.from(field.querySelectorAll(`[${CHIP_ATTR}]`)).map((el) => ({
+    id: el.dataset["id"] ?? "",
+    label: el.dataset["label"] ?? "",
+    trigger: el.dataset["trigger"] ?? ""
+  }));
+}
+function detectActiveMention(field, sources) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) {
+    return null;
+  }
+  const anchor = selection.anchorNode;
+  if (!anchor || anchor.nodeType !== Node.TEXT_NODE || !field.contains(anchor)) {
+    return null;
+  }
+  const caretOffset = selection.anchorOffset;
+  const beforeCaret = (anchor.textContent ?? "").slice(0, caretOffset);
+  for (const source of sources) {
+    const trigger = source.trigger;
+    const match = new RegExp(
+      `(?:^|\\s)${escapeRegExp(trigger)}([^\\s${escapeRegExp(trigger)}]*)$`
+    ).exec(beforeCaret);
+    if (match) {
+      const query = match[1] ?? "";
+      return {
+        source,
+        query,
+        node: anchor,
+        triggerStart: caretOffset - query.length - trigger.length,
+        caretOffset
+      };
+    }
+  }
+  return null;
+}
+function chipIcon(item, source) {
+  return item.icon ?? source.icon ?? (source.trigger === "@" ? "user" : "file-text");
+}
+var MentionInput = forwardRef(
+  function MentionInput2({
+    value,
+    placeholder,
+    disabled,
+    sources,
+    chips,
+    onChipsChange,
+    onChange,
+    onSubmit,
+    className,
+    style
+  }, ref) {
+    const fieldRef = useRef8(null);
+    const [menu, setMenu] = useState41(null);
+    const [empty, setEmpty] = useState41(true);
+    const suppressSyncRef = useRef8(false);
+    const composingRef = useRef8(false);
+    const emitChips = () => {
+      if (suppressSyncRef.current || !fieldRef.current) {
+        return;
+      }
+      onChipsChange?.(collectChips(fieldRef.current));
+    };
+    const serialize = () => fieldRef.current ? serializeNode(fieldRef.current).replace(/\n$/, "") : "";
+    const buildChipElement = (item, source) => {
+      const chip = document.createElement("span");
+      chip.setAttribute(CHIP_ATTR, "");
+      chip.dataset["id"] = item.id;
+      chip.dataset["label"] = item.label;
+      chip.dataset["trigger"] = item.trigger ?? source.trigger;
+      chip.contentEditable = "false";
+      chip.className = "mx-0.5 inline-flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 align-middle text-xs text-foreground";
+      const iconMarkup = renderToStaticMarkup(
+        /* @__PURE__ */ jsx121(Icon, { name: chipIcon(item, source), size: 12 })
+      );
+      const label = document.createElement("span");
+      label.textContent = item.label;
+      chip.innerHTML = iconMarkup;
+      chip.appendChild(label);
+      return chip;
+    };
+    const insertChipElement = (item, source, replace) => {
+      const field = fieldRef.current;
+      if (!field) {
+        return;
+      }
+      const chip = buildChipElement(item, source);
+      let caretNode;
+      if (replace) {
+        const { node, start, end } = replace;
+        const text = node.textContent ?? "";
+        node.textContent = text.slice(0, start);
+        caretNode = document.createTextNode(`${NBSP}${text.slice(end)}`);
+        node.after(chip, caretNode);
+      } else {
+        caretNode = document.createTextNode(NBSP);
+        const selection2 = window.getSelection();
+        if (selection2 && selection2.rangeCount > 0 && selection2.anchorNode !== null && field.contains(selection2.anchorNode)) {
+          const range = selection2.getRangeAt(0);
+          range.deleteContents();
+          range.insertNode(caretNode);
+          range.insertNode(chip);
+        } else {
+          field.append(chip, caretNode);
+        }
+      }
+      const selection = window.getSelection();
+      if (selection) {
+        const range = document.createRange();
+        range.setStart(caretNode, 1);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      setEmpty(false);
+      onChange?.(serialize());
+      emitChips();
+    };
+    useImperativeHandle(ref, () => ({
+      insertChip: (item, source) => {
+        fieldRef.current?.focus();
+        insertChipElement(item, source);
+      },
+      focus: () => fieldRef.current?.focus()
+    }));
+    useEffect34(() => {
+      const field = fieldRef.current;
+      if (field && value === "" && serializeNode(field).trim() !== "") {
+        suppressSyncRef.current = true;
+        field.innerHTML = "";
+        setEmpty(true);
+        setMenu(null);
+        suppressSyncRef.current = false;
+      }
+    }, [value]);
+    useEffect34(() => {
+      const field = fieldRef.current;
+      if (!field) {
+        return;
+      }
+      const keep = new Set(chips.map((chip) => `${chip.trigger}:${chip.id}`));
+      const stale = Array.from(field.querySelectorAll(`[${CHIP_ATTR}]`)).filter(
+        (el) => !keep.has(
+          `${el.dataset["trigger"]}:${el.dataset["id"]}`
+        )
+      );
+      if (stale.length > 0) {
+        suppressSyncRef.current = true;
+        stale.forEach((el) => el.remove());
+        suppressSyncRef.current = false;
+        setEmpty(serializeNode(field).trim() === "");
+      }
+    }, [chips]);
+    const closeMenu = () => setMenu(null);
+    const filteredItems = (state) => state.query ? state.source.items.filter((item) => item.label.includes(state.query)) : state.source.items;
+    const refreshMenu = () => {
+      const field = fieldRef.current;
+      if (!field) {
+        return;
+      }
+      const active = detectActiveMention(field, sources);
+      if (!active) {
+        setMenu(null);
+        return;
+      }
+      const range = document.createRange();
+      range.setStart(active.node, active.triggerStart);
+      range.setEnd(active.node, active.caretOffset);
+      const rect = typeof range.getBoundingClientRect === "function" ? range.getBoundingClientRect() : field.getBoundingClientRect();
+      setMenu((prev) => ({
+        source: active.source,
+        query: active.query,
+        left: rect.left,
+        top: rect.top,
+        // 过滤结果变化后候选下标钳制在有效范围内（DSL 每次渲染产出新
+        // props 对象，source 按 trigger 比较而非引用）
+        activeIndex: Math.min(
+          prev?.source.trigger === active.source.trigger ? prev.activeIndex : 0,
+          Math.max(filteredItems({ source: active.source, query: active.query, left: 0, top: 0, activeIndex: 0 }).length - 1, 0)
+        )
+      }));
+    };
+    const selectMenuItem = (item) => {
+      const field = fieldRef.current;
+      if (!field || !menu) {
+        return;
+      }
+      const active = detectActiveMention(field, sources);
+      insertChipElement(
+        { ...item, trigger: item.trigger ?? menu.source.trigger },
+        menu.source,
+        active && active.source.trigger === menu.source.trigger ? { node: active.node, start: active.triggerStart, end: active.caretOffset } : void 0
+      );
+      setMenu(null);
+    };
+    const handleInput = () => {
+      const field = fieldRef.current;
+      if (!field) {
+        return;
+      }
+      if ((field.textContent ?? "") === "" && field.querySelector(`[${CHIP_ATTR}]`) === null) {
+        field.innerHTML = "";
+      }
+      setEmpty(serializeNode(field).trim() === "");
+      onChange?.(serialize());
+      refreshMenu();
+    };
+    const handleKeyDown = (event) => {
+      if (menu) {
+        const items = filteredItems(menu);
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          if (items.length > 0) {
+            const delta = event.key === "ArrowDown" ? 1 : -1;
+            setMenu({
+              ...menu,
+              activeIndex: (menu.activeIndex + delta + items.length) % items.length
+            });
+          }
+          return;
+        }
+        if (event.key === "Enter" && !composingRef.current && !event.nativeEvent.isComposing) {
+          event.preventDefault();
+          const item = items[Math.min(menu.activeIndex, items.length - 1)];
+          if (item) {
+            selectMenuItem(item);
+          } else {
+            closeMenu();
+          }
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeMenu();
+          return;
+        }
+      }
+      if (event.key === "Enter" && !event.shiftKey && !composingRef.current && !event.nativeEvent.isComposing) {
+        event.preventDefault();
+        const text = serialize();
+        if (text.trim() !== "" && !disabled) {
+          onSubmit?.(text);
+        }
+        return;
+      }
+      if (event.key === "Backspace") {
+        const selection = window.getSelection();
+        const field = fieldRef.current;
+        if (!selection || !selection.isCollapsed || !field) {
+          return;
+        }
+        let chip = null;
+        const anchor = selection.anchorNode;
+        if (anchor === field && selection.anchorOffset > 0) {
+          const before = field.childNodes[selection.anchorOffset - 1];
+          if (isChipElement(before)) {
+            chip = before;
+          }
+        } else if (anchor?.nodeType === Node.TEXT_NODE && selection.anchorOffset === 0) {
+          if (isChipElement(anchor.previousSibling)) {
+            chip = anchor.previousSibling;
+          }
+        }
+        if (chip) {
+          event.preventDefault();
+          chip.remove();
+          onChange?.(serialize());
+          emitChips();
+          setEmpty(serializeNode(field).trim() === "");
+        }
+      }
+    };
+    const menuItems = menu ? filteredItems(menu) : [];
+    const activeIndex = Math.min(menu?.activeIndex ?? 0, Math.max(menuItems.length - 1, 0));
+    return /* @__PURE__ */ jsxs85("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx121(
+        "div",
+        {
+          ref: fieldRef,
+          "data-slot": "mention-input",
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-placeholder": placeholder,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          className: cn(
+            "min-h-[60px] w-full px-4 pt-3 pb-1 text-sm whitespace-pre-wrap break-words outline-none",
+            className
+          ),
+          style,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          onCompositionStart: () => {
+            composingRef.current = true;
+          },
+          onCompositionEnd: () => {
+            composingRef.current = false;
+          },
+          onPaste: (event) => {
+            event.preventDefault();
+            const text = event.clipboardData?.getData("text/plain") ?? "";
+            if (text) {
+              document.execCommand("insertText", false, text);
+            }
+          }
+        }
+      ),
+      empty && placeholder !== void 0 ? /* @__PURE__ */ jsx121("span", { className: "pointer-events-none absolute top-3 left-4 text-sm text-muted-foreground", children: placeholder }) : null,
+      menu ? /* @__PURE__ */ jsxs85(Fragment12, { children: [
+        /* @__PURE__ */ jsx121(
+          "div",
+          {
+            className: "fixed inset-0 z-40",
+            onMouseDown: (event) => {
+              event.preventDefault();
+              closeMenu();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs85(
+          "div",
+          {
+            "data-slot": "mention-menu",
+            role: "listbox",
+            className: "scrollbar-subtle fixed z-50 max-h-72 w-64 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+            style: {
+              left: menu.left,
+              bottom: typeof window === "undefined" ? void 0 : window.innerHeight - menu.top + 6
+            },
+            children: [
+              /* @__PURE__ */ jsx121("div", { className: "px-2 py-1 text-xs text-muted-foreground", children: menu.source.label }),
+              menuItems.length === 0 ? /* @__PURE__ */ jsx121("div", { className: "px-2 py-2 text-xs text-muted-foreground", children: "\u65E0\u5339\u914D\u9879" }) : menuItems.map((item, index) => /* @__PURE__ */ jsxs85(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": index === activeIndex,
+                  className: cn(
+                    "flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm",
+                    index === activeIndex ? "bg-accent" : "hover:bg-accent"
+                  ),
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    selectMenuItem(item);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx121(Icon, { name: chipIcon(item, menu.source), size: "sm" }),
+                    /* @__PURE__ */ jsx121("span", { className: "min-w-0 flex-1 truncate", children: item.label })
+                  ]
+                },
+                item.id
+              ))
+            ]
+          }
+        )
+      ] }) : null
+    ] });
+  }
+);
+
+// src/components/chat/Composer/index.tsx
+import { Fragment as Fragment13, jsx as jsx122, jsxs as jsxs86 } from "react/jsx-runtime";
+var toolButtonClass3 = "flex cursor-pointer items-center rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground";
+var popoverPanelClass = "absolute bottom-full left-0 z-50 mb-2 max-h-72 w-64 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md";
+var popoverItemClass = "flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent";
 function Composer({
   value,
   placeholder,
@@ -8066,33 +8562,236 @@ function Composer({
   attachments = [],
   onRemoveAttachment,
   onRetryAttachment,
+  onAttachFiles,
   onChange,
   onSubmit,
+  models,
+  model,
+  onModelChange,
+  contexts,
+  contextItems,
+  onContextItemsChange,
+  footer,
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs85("div", { "data-slot": "composer", className: cn("flex w-full flex-col gap-2", className), style, children: [
-    attachments.length > 0 ? /* @__PURE__ */ jsx121(Attachment, { items: attachments, onRemove: onRemoveAttachment, onRetry: onRetryAttachment }) : null,
-    /* @__PURE__ */ jsx121(
-      ChatInput,
+  const textControlled = value !== void 0;
+  const [innerText, setInnerText] = useState42("");
+  const text = textControlled ? value : innerText;
+  const [dragOver, setDragOver] = useState42(false);
+  const [plusOpen, setPlusOpen] = useState42(false);
+  const [modelOpen, setModelOpen] = useState42(false);
+  const fileInputRef = useRef9(null);
+  const mentionRef = useRef9(null);
+  const sources = contexts ?? [];
+  const rich = sources.length > 0;
+  const plusSources = sources.filter((s) => s.trigger === "+");
+  const plusEnabled = plusSources.length > 0;
+  const modelEnabled = models !== void 0 && models.length > 0;
+  const currentModel = models?.find((m) => m.value === model) ?? models?.[0];
+  const chips = contextItems ?? [];
+  const closePopovers = () => {
+    setPlusOpen(false);
+    setModelOpen(false);
+  };
+  const handleChange = (next) => {
+    if (!textControlled) {
+      setInnerText(next);
+    }
+    onChange?.(next);
+  };
+  const handleSubmit = (submitted) => {
+    onSubmit?.(submitted);
+    if (!textControlled) {
+      setInnerText("");
+    }
+    closePopovers();
+  };
+  const selectContext = (item, source) => {
+    if (rich) {
+      mentionRef.current?.insertChip(item, source);
+    } else {
+      const chip = { ...item, trigger: item.trigger ?? source.trigger };
+      const duplicated = chips.some(
+        (existing) => existing.id === chip.id && existing.trigger === chip.trigger
+      );
+      if (!duplicated) {
+        onContextItemsChange?.([...chips, chip]);
+      }
+    }
+    closePopovers();
+  };
+  const emitFiles = (files) => {
+    if (files.length > 0 && onAttachFiles) {
+      onAttachFiles(files);
+    }
+  };
+  const handleDrop = (event) => {
+    if (!onAttachFiles) {
+      return;
+    }
+    event.preventDefault();
+    setDragOver(false);
+    emitFiles(Array.from(event.dataTransfer?.files ?? []));
+  };
+  const toolbarStart = plusEnabled || onAttachFiles ? /* @__PURE__ */ jsxs86(Fragment13, { children: [
+    plusEnabled ? /* @__PURE__ */ jsx122(
+      "button",
       {
-        value,
-        placeholder,
-        disabled: disabled || loading,
-        rows,
-        onChange,
-        onSubmit
+        type: "button",
+        "aria-label": "\u6DFB\u52A0\u4E0A\u4E0B\u6587",
+        title: "\u6DFB\u52A0\u4E0A\u4E0B\u6587",
+        className: toolButtonClass3,
+        onClick: () => {
+          setPlusOpen((prev) => !prev);
+          setModelOpen(false);
+        },
+        children: /* @__PURE__ */ jsx122(Icon, { name: "plus", size: "sm" })
       }
-    )
-  ] });
+    ) : null,
+    onAttachFiles ? /* @__PURE__ */ jsx122(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
+        title: "\u6DFB\u52A0\u9644\u4EF6",
+        className: toolButtonClass3,
+        onClick: () => fileInputRef.current?.click(),
+        children: /* @__PURE__ */ jsx122(Icon, { name: "paperclip", size: "sm" })
+      }
+    ) : null
+  ] }) : void 0;
+  const toolbarEnd = modelEnabled ? /* @__PURE__ */ jsxs86(
+    "button",
+    {
+      type: "button",
+      "aria-label": "\u9009\u62E9\u6A21\u578B",
+      title: "\u9009\u62E9\u6A21\u578B",
+      className: "flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground",
+      onClick: () => {
+        setModelOpen((prev) => !prev);
+        setPlusOpen(false);
+      },
+      children: [
+        currentModel?.label,
+        /* @__PURE__ */ jsx122(Icon, { name: "chevrons-up-down", size: 12 })
+      ]
+    }
+  ) : void 0;
+  const activePopover = plusOpen ? "plus" : modelOpen ? "model" : null;
+  return /* @__PURE__ */ jsxs86(
+    "div",
+    {
+      "data-slot": "composer",
+      className: cn("relative flex w-full flex-col gap-2", className),
+      style,
+      onDragOver: (event) => {
+        if (onAttachFiles) {
+          event.preventDefault();
+          setDragOver(true);
+        }
+      },
+      onDragLeave: () => setDragOver(false),
+      onDrop: handleDrop,
+      onPaste: (event) => {
+        const files = Array.from(event.clipboardData?.files ?? []);
+        if (files.length > 0 && onAttachFiles) {
+          event.preventDefault();
+          emitFiles(files);
+        }
+      },
+      children: [
+        attachments.length > 0 ? /* @__PURE__ */ jsx122(Attachment, { items: attachments, onRemove: onRemoveAttachment, onRetry: onRetryAttachment }) : null,
+        /* @__PURE__ */ jsx122("div", { className: cn(dragOver && "rounded-xl ring-2 ring-ring/50"), children: /* @__PURE__ */ jsx122(
+          ChatInput,
+          {
+            value: text,
+            placeholder,
+            disabled: disabled || loading,
+            rows,
+            toolbarStart,
+            toolbarEnd,
+            footer,
+            field: rich ? /* @__PURE__ */ jsx122(
+              MentionInput,
+              {
+                ref: mentionRef,
+                value: text,
+                placeholder,
+                disabled: disabled || loading,
+                sources,
+                chips,
+                onChipsChange: onContextItemsChange,
+                onChange: handleChange,
+                onSubmit: handleSubmit
+              }
+            ) : void 0,
+            onChange: handleChange,
+            onSubmit: handleSubmit
+          }
+        ) }),
+        onAttachFiles ? /* @__PURE__ */ jsx122(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            hidden: true,
+            onChange: (event) => {
+              emitFiles(Array.from(event.target.files ?? []));
+              event.target.value = "";
+            }
+          }
+        ) : null,
+        activePopover !== null ? /* @__PURE__ */ jsxs86(Fragment13, { children: [
+          /* @__PURE__ */ jsx122("div", { className: "fixed inset-0 z-40", onClick: closePopovers }),
+          activePopover === "model" ? /* @__PURE__ */ jsx122("div", { "data-slot": "composer-model-popover", className: cn(popoverPanelClass, "right-0 left-auto w-48"), role: "listbox", children: models.map((option) => /* @__PURE__ */ jsxs86(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": option.value === currentModel?.value,
+              className: popoverItemClass,
+              onClick: () => {
+                onModelChange?.(option.value);
+                closePopovers();
+              },
+              children: [
+                /* @__PURE__ */ jsx122("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+                option.value === currentModel?.value ? /* @__PURE__ */ jsx122(Icon, { name: "check", size: 14 }) : null
+              ]
+            },
+            option.value
+          )) }) : /* @__PURE__ */ jsx122("div", { "data-slot": "composer-context-popover", className: popoverPanelClass, role: "listbox", children: plusSources.map(
+            (source) => source.items.length === 0 ? null : /* @__PURE__ */ jsxs86("div", { children: [
+              /* @__PURE__ */ jsx122("div", { className: "px-2 py-1 text-xs text-muted-foreground", children: source.label }),
+              source.items.map((item) => /* @__PURE__ */ jsxs86(
+                "button",
+                {
+                  type: "button",
+                  className: popoverItemClass,
+                  onClick: () => selectContext(item, source),
+                  children: [
+                    /* @__PURE__ */ jsx122(Icon, { name: item.icon ?? source.icon ?? "file-text", size: "sm" }),
+                    /* @__PURE__ */ jsx122("span", { className: "min-w-0 flex-1 truncate", children: item.label })
+                  ]
+                },
+                item.id
+              ))
+            ] }, source.trigger)
+          ) })
+        ] }) : null
+      ]
+    }
+  );
 }
 
 // src/components/chat/ConversationList/index.tsx
-import { useMemo as useMemo6, useState as useState41 } from "react";
-import { jsx as jsx122, jsxs as jsxs86 } from "react/jsx-runtime";
+import { useMemo as useMemo6, useState as useState43 } from "react";
+import { jsx as jsx123, jsxs as jsxs87 } from "react/jsx-runtime";
 function ConversationList({ items = [], activeId, searchable, onSelect, onDelete, className, style }) {
-  const [innerActive, setInnerActive] = useState41();
-  const [keyword, setKeyword] = useState41("");
+  const [innerActive, setInnerActive] = useState43();
+  const [keyword, setKeyword] = useState43("");
   const active = activeId ?? innerActive;
   const filtered = useMemo6(() => {
     const query = keyword.trim().toLowerCase();
@@ -8107,10 +8806,10 @@ function ConversationList({ items = [], activeId, searchable, onSelect, onDelete
     }
     onSelect?.(id);
   };
-  return /* @__PURE__ */ jsxs86("div", { "data-slot": "conversation-list", className: cn("flex w-full flex-col gap-1", className), style, children: [
-    searchable ? /* @__PURE__ */ jsxs86("div", { className: "relative mb-1", children: [
-      /* @__PURE__ */ jsx122("span", { className: "absolute top-1/2 left-2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx122(Icon, { name: "search", size: "sm" }) }),
-      /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsxs87("div", { "data-slot": "conversation-list", className: cn("flex w-full flex-col gap-1", className), style, children: [
+    searchable ? /* @__PURE__ */ jsxs87("div", { className: "relative mb-1", children: [
+      /* @__PURE__ */ jsx123("span", { className: "absolute top-1/2 left-2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx123(Icon, { name: "search", size: "sm" }) }),
+      /* @__PURE__ */ jsx123(
         "input",
         {
           "data-slot": "conversation-list-search",
@@ -8121,7 +8820,7 @@ function ConversationList({ items = [], activeId, searchable, onSelect, onDelete
         }
       )
     ] }) : null,
-    filtered.map((item) => /* @__PURE__ */ jsxs86(
+    filtered.map((item) => /* @__PURE__ */ jsxs87(
       "div",
       {
         "data-slot": "conversation-list-item",
@@ -8132,12 +8831,12 @@ function ConversationList({ items = [], activeId, searchable, onSelect, onDelete
         ),
         onClick: () => select(item.id),
         children: [
-          /* @__PURE__ */ jsxs86("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx122("div", { className: cn("truncate text-sm", item.id === active && "font-medium"), children: item.title }),
-            item.description ? /* @__PURE__ */ jsx122("div", { className: "truncate text-xs text-muted-foreground", children: item.description }) : null
+          /* @__PURE__ */ jsxs87("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx123("div", { className: cn("truncate text-sm", item.id === active && "font-medium"), children: item.title }),
+            item.description ? /* @__PURE__ */ jsx123("div", { className: "truncate text-xs text-muted-foreground", children: item.description }) : null
           ] }),
-          item.time ? /* @__PURE__ */ jsx122("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.time }) : null,
-          onDelete ? /* @__PURE__ */ jsx122(
+          item.time ? /* @__PURE__ */ jsx123("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.time }) : null,
+          onDelete ? /* @__PURE__ */ jsx123(
             "button",
             {
               type: "button",
@@ -8148,41 +8847,42 @@ function ConversationList({ items = [], activeId, searchable, onSelect, onDelete
                 event.stopPropagation();
                 onDelete(item.id);
               },
-              children: /* @__PURE__ */ jsx122(Icon, { name: "trash-2", size: "sm" })
+              children: /* @__PURE__ */ jsx123(Icon, { name: "trash-2", size: "sm" })
             }
           ) : null
         ]
       },
       item.id
     )),
-    filtered.length === 0 ? /* @__PURE__ */ jsx122("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "\u65E0\u5339\u914D\u4F1A\u8BDD" }) : null
+    filtered.length === 0 ? /* @__PURE__ */ jsx123("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "\u65E0\u5339\u914D\u4F1A\u8BDD" }) : null
   ] });
 }
 
 // src/components/chat/MessageList/index.tsx
-import { useEffect as useEffect34, useRef as useRef8 } from "react";
-import { jsx as jsx123 } from "react/jsx-runtime";
-function MessageList({ messages = [], autoScroll = true, onAction, className, style }) {
-  const listRef = useRef8(null);
-  useEffect34(() => {
+import { useEffect as useEffect35, useRef as useRef10 } from "react";
+import { jsx as jsx124 } from "react/jsx-runtime";
+function MessageList({ messages = [], autoScroll = true, onAction, onOpenArtifacts, className, style }) {
+  const listRef = useRef10(null);
+  useEffect35(() => {
     if (!autoScroll) return;
     const el = listRef.current;
     if (el) {
       el.scrollTop = el.scrollHeight;
     }
   }, [messages, autoScroll]);
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx124(
     "div",
     {
       ref: listRef,
       "data-slot": "message-list",
       className: cn("flex w-full flex-col gap-4 overflow-y-auto", className),
       style,
-      children: messages.map((message, index) => /* @__PURE__ */ jsx123(
+      children: messages.map((message, index) => /* @__PURE__ */ jsx124(
         ChatMessage,
         {
           ...message,
-          onAction: (action) => onAction?.({ id: message.id, action })
+          onAction: (action) => onAction?.({ id: message.id, action }),
+          onOpenArtifacts: onOpenArtifacts ? () => onOpenArtifacts({ id: message.id }) : void 0
         },
         message.id ?? index
       ))
@@ -8191,9 +8891,9 @@ function MessageList({ messages = [], autoScroll = true, onAction, className, st
 }
 
 // src/components/chat/Prompt/index.tsx
-import { jsx as jsx124, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs88 } from "react/jsx-runtime";
 function Prompt({ title, description, icon, value, disabled, onSelect, className, style }) {
-  return /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs88(
     "button",
     {
       type: "button",
@@ -8206,10 +8906,10 @@ function Prompt({ title, description, icon, value, disabled, onSelect, className
       style,
       onClick: () => onSelect?.(value ?? title ?? ""),
       children: [
-        icon ? /* @__PURE__ */ jsx124("span", { className: "mt-0.5 shrink-0 text-primary", children: /* @__PURE__ */ jsx124(Icon, { name: icon, size: "sm" }) }) : null,
-        /* @__PURE__ */ jsxs87("span", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx124("span", { "data-slot": "prompt-title", className: "block text-sm font-medium", children: title }),
-          description ? /* @__PURE__ */ jsx124("span", { "data-slot": "prompt-description", className: "mt-0.5 block text-xs text-muted-foreground", children: description }) : null
+        icon ? /* @__PURE__ */ jsx125("span", { className: "mt-0.5 shrink-0 text-primary", children: /* @__PURE__ */ jsx125(Icon, { name: icon, size: "sm" }) }) : null,
+        /* @__PURE__ */ jsxs88("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx125("span", { "data-slot": "prompt-title", className: "block text-sm font-medium", children: title }),
+          description ? /* @__PURE__ */ jsx125("span", { "data-slot": "prompt-description", className: "mt-0.5 block text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -8217,7 +8917,7 @@ function Prompt({ title, description, icon, value, disabled, onSelect, className
 }
 
 // src/components/chat/Welcome/index.tsx
-import { jsx as jsx125, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs89 } from "react/jsx-runtime";
 function Welcome({
   title = "\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u4F60\uFF1F",
   description,
@@ -8227,19 +8927,19 @@ function Welcome({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsxs89(
     "div",
     {
       "data-slot": "welcome",
       className: cn("flex w-full flex-col items-center gap-4 py-10 text-center", className),
       style,
       children: [
-        /* @__PURE__ */ jsx125("span", { "data-slot": "welcome-icon", className: "text-primary", children: /* @__PURE__ */ jsx125(Icon, { name: icon, size: "lg" }) }),
-        /* @__PURE__ */ jsxs88("div", { children: [
-          /* @__PURE__ */ jsx125("div", { "data-slot": "welcome-title", className: "text-xl font-semibold", children: title }),
-          description ? /* @__PURE__ */ jsx125("div", { "data-slot": "welcome-description", className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsx126("span", { "data-slot": "welcome-icon", className: "text-primary", children: /* @__PURE__ */ jsx126(Icon, { name: icon, size: "lg" }) }),
+        /* @__PURE__ */ jsxs89("div", { children: [
+          /* @__PURE__ */ jsx126("div", { "data-slot": "welcome-title", className: "text-xl font-semibold", children: title }),
+          description ? /* @__PURE__ */ jsx126("div", { "data-slot": "welcome-description", className: "mt-1 text-sm text-muted-foreground", children: description }) : null
         ] }),
-        prompts.length > 0 ? /* @__PURE__ */ jsx125("div", { "data-slot": "welcome-prompts", className: "grid w-full max-w-xl grid-cols-1 gap-3 text-left sm:grid-cols-2", children: prompts.map((item, index) => /* @__PURE__ */ jsx125(
+        prompts.length > 0 ? /* @__PURE__ */ jsx126("div", { "data-slot": "welcome-prompts", className: "grid w-full max-w-xl grid-cols-1 gap-3 text-left sm:grid-cols-2", children: prompts.map((item, index) => /* @__PURE__ */ jsx126(
           Prompt,
           {
             title: item.title,
@@ -8256,7 +8956,7 @@ function Welcome({
 }
 
 // src/components/chat/ChatPage/index.tsx
-import { jsx as jsx126, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs90 } from "react/jsx-runtime";
 function ChatPage({
   brand,
   menuItems = [],
@@ -8282,12 +8982,26 @@ function ChatPage({
   defaultFooterSectionCollapsed = false,
   onFooterSectionToggle,
   conversationTitle,
+  conversationHeaderAction,
+  onConversationHeaderAction,
   messages = [],
   sending,
   composerPlaceholder,
   welcome,
   onSend,
   onMessageAction,
+  models,
+  model,
+  onModelChange,
+  contexts,
+  contextItems,
+  onContextItemsChange,
+  attachments,
+  onAttachFiles,
+  onRemoveAttachment,
+  onRetryAttachment,
+  composerFooter,
+  composerBottom,
   artifactTitle = "\u4EA7\u7269",
   artifacts = [],
   activeArtifactId,
@@ -8298,20 +9012,22 @@ function ChatPage({
   artifactViewers,
   onDownloadArtifact,
   artifactOpen,
-  defaultArtifactOpen = true,
+  defaultArtifactOpen = false,
   onArtifactOpenChange,
   className,
   style
 }) {
   const controlled = artifactOpen !== void 0;
-  const [innerOpen, setInnerOpen] = useState42(defaultArtifactOpen);
+  const [innerOpen, setInnerOpen] = useState44(defaultArtifactOpen);
   const open = controlled ? artifactOpen === true : innerOpen;
   const setOpen = (next) => {
     if (!controlled) setInnerOpen(next);
     onArtifactOpenChange?.(next);
   };
+  const { renderChildren } = useRenderer18();
+  const renderSlot = (slot) => isValidElement2(slot) || typeof slot !== "object" || slot === null ? slot : renderChildren([slot]);
   const convCollControlled = conversationSectionCollapsed !== void 0;
-  const [convCollapsedInner, setConvCollapsedInner] = useState42(
+  const [convCollapsedInner, setConvCollapsedInner] = useState44(
     defaultConversationSectionCollapsed
   );
   const convCollapsed = convCollControlled ? conversationSectionCollapsed === true : convCollapsedInner;
@@ -8321,7 +9037,7 @@ function ChatPage({
     onConversationSectionToggle?.(next);
   };
   const footerCollControlled = footerSectionCollapsed !== void 0;
-  const [footerCollapsedInner, setFooterCollapsedInner] = useState42(
+  const [footerCollapsedInner, setFooterCollapsedInner] = useState44(
     defaultFooterSectionCollapsed
   );
   const footerCollapsed = footerCollControlled ? footerSectionCollapsed === true : footerCollapsedInner;
@@ -8331,7 +9047,7 @@ function ChatPage({
     onFooterSectionToggle?.(next);
   };
   const railVisible = railItems.length > 0 || railFooterItems.length > 0;
-  const railButton = (item) => /* @__PURE__ */ jsx126(Tooltip2, { content: item.label, side: "right", children: /* @__PURE__ */ jsx126(
+  const railButton = (item) => /* @__PURE__ */ jsx127(Tooltip2, { content: item.label, side: "right", children: /* @__PURE__ */ jsx127(
     Button2,
     {
       icon: item.icon,
@@ -8339,17 +9055,25 @@ function ChatPage({
       onClick: () => onMenuSelect?.(item.key)
     }
   ) }, item.key);
-  const chatArea = /* @__PURE__ */ jsxs89("div", { "data-slot": "chat-page-conversation", className: "flex h-full min-w-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxs89(
+  const chatArea = /* @__PURE__ */ jsxs90("div", { "data-slot": "chat-page-conversation", className: "flex h-full min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs90(
       "div",
       {
         className: "flex shrink-0 items-center justify-between border-b border-border px-4 py-2.5",
         children: [
-          /* @__PURE__ */ jsx126(Text, { text: conversationTitle, strong: true }),
-          /* @__PURE__ */ jsx126(Tooltip2, { content: artifactTitle, side: "bottom", children: /* @__PURE__ */ jsx126(
+          /* @__PURE__ */ jsx127(Text, { text: conversationTitle, strong: true }),
+          conversationHeaderAction ? /* @__PURE__ */ jsx127(Tooltip2, { content: conversationHeaderAction.tooltip ?? conversationHeaderAction.label, side: "bottom", children: /* @__PURE__ */ jsx127(
             Button2,
             {
-              icon: "panel-right-open",
+              text: conversationHeaderAction.label,
+              icon: conversationHeaderAction.icon,
+              variant: "text",
+              onClick: () => onConversationHeaderAction?.()
+            }
+          ) }) : /* @__PURE__ */ jsx127(Tooltip2, { content: open ? "\u6536\u8D77\u4EA7\u7269\u533A" : artifactTitle, side: "bottom", children: /* @__PURE__ */ jsx127(
+            Button2,
+            {
+              icon: open ? "panel-right-close" : "panel-right-open",
               variant: "text",
               onClick: () => setOpen(!open)
             }
@@ -8357,40 +9081,63 @@ function ChatPage({
         ]
       }
     ),
-    messages.length === 0 ? /* @__PURE__ */ jsx126(
-      Welcome,
-      {
-        title: welcome?.title,
-        description: welcome?.description,
-        prompts: welcome?.prompts,
-        style: { flex: 1 },
-        onSelect: (value) => onSend?.(value)
-      }
-    ) : /* @__PURE__ */ jsx126(
-      MessageList,
-      {
-        messages,
-        style: { flex: 1, minHeight: 0, padding: 16 },
-        onAction: onMessageAction
-      }
-    ),
-    /* @__PURE__ */ jsx126(
-      Composer,
+    /* @__PURE__ */ jsxs90(
+      "div",
       {
-        placeholder: composerPlaceholder,
-        loading: sending,
-        style: { padding: 16, borderTop: "1px solid var(--border)", flexShrink: 0 },
-        onSubmit: (text) => onSend?.(text)
+        "data-slot": "chat-page-conversation-body",
+        className: "mx-auto flex min-h-0 w-[61.8cqw] max-w-full flex-1 flex-col",
+        children: [
+          messages.length === 0 ? /* @__PURE__ */ jsx127(
+            Welcome,
+            {
+              title: welcome?.title,
+              description: welcome?.description,
+              prompts: welcome?.prompts,
+              style: { flex: 1 },
+              onSelect: (value) => onSend?.(value)
+            }
+          ) : /* @__PURE__ */ jsx127(
+            MessageList,
+            {
+              messages,
+              className: "scrollbar-subtle",
+              style: { flex: 1, minHeight: 0, padding: 16 },
+              onAction: onMessageAction,
+              onOpenArtifacts: () => setOpen(true)
+            }
+          ),
+          /* @__PURE__ */ jsx127(
+            Composer,
+            {
+              placeholder: composerPlaceholder,
+              loading: sending,
+              models,
+              model,
+              contexts,
+              contextItems,
+              attachments,
+              footer: composerFooter,
+              style: { padding: 16, paddingBottom: composerBottom ? 8 : 16, flexShrink: 0 },
+              onModelChange,
+              onContextItemsChange,
+              onAttachFiles,
+              onRemoveAttachment,
+              onRetryAttachment,
+              onSubmit: (text) => onSend?.(text)
+            }
+          ),
+          composerBottom ? /* @__PURE__ */ jsx127("div", { "data-slot": "chat-page-composer-bottom", className: "shrink-0 px-4 pb-2 text-center", children: renderSlot(composerBottom) }) : null
+        ]
       }
     )
   ] });
   const activeArtifact = artifacts.find((item) => item.id === activeArtifactId) ?? (activeArtifactId === void 0 || activeArtifactId === "" ? artifacts[artifacts.length - 1] : void 0);
-  const artifactPanel = /* @__PURE__ */ jsx126(
+  const artifactPanel = /* @__PURE__ */ jsx127(
     "div",
     {
       "data-slot": "chat-page-artifact",
       className: "flex h-full min-w-0 flex-col border-l border-border bg-muted",
-      children: /* @__PURE__ */ jsx126(
+      children: /* @__PURE__ */ jsx127(
         ArtifactPanel,
         {
           artifact: activeArtifact,
@@ -8408,37 +9155,37 @@ function ChatPage({
       )
     }
   );
-  return /* @__PURE__ */ jsxs89(
+  return /* @__PURE__ */ jsxs90(
     "div",
     {
       "data-slot": "chat-page",
       className: cn("flex w-full overflow-hidden", className),
       style: { height: "100vh", ...style },
       children: [
-        railVisible ? /* @__PURE__ */ jsxs89(
+        railVisible ? /* @__PURE__ */ jsxs90(
           "div",
           {
             "data-slot": "chat-page-rail",
             className: "flex h-full w-[52px] shrink-0 flex-col items-center gap-1 border-r border-border py-2.5",
             children: [
               railItems.map(railButton),
-              /* @__PURE__ */ jsx126("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsx127("div", { className: "flex-1" }),
               railFooterItems.map(railButton)
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs89(
+        /* @__PURE__ */ jsxs90(
           "div",
           {
             "data-slot": "chat-page-menu",
-            className: "flex h-full w-[264px] shrink-0 flex-col gap-2 overflow-auto border-r border-border px-2 py-3",
+            className: "flex h-full w-[264px] shrink-0 flex-col gap-2 overflow-hidden border-r border-border px-2 py-3",
             children: [
-              brand ? /* @__PURE__ */ jsxs89("div", { className: "flex items-center justify-between px-2", children: [
-                /* @__PURE__ */ jsxs89("div", { className: "flex flex-col gap-0.5", children: [
-                  /* @__PURE__ */ jsx126(Text, { text: brand.title, strong: true, size: "large" }),
-                  brand.version !== void 0 ? /* @__PURE__ */ jsx126(Text, { text: brand.version, type: "secondary", size: "small" }) : null
+              brand ? /* @__PURE__ */ jsxs90("div", { className: "flex shrink-0 items-center justify-between px-2", children: [
+                /* @__PURE__ */ jsxs90("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx127(Text, { text: brand.title, strong: true, size: "large" }),
+                  brand.version !== void 0 ? /* @__PURE__ */ jsx127(Text, { text: brand.version, type: "secondary", size: "small" }) : null
                 ] }),
-                menuAction ? /* @__PURE__ */ jsx126(
+                menuAction ? /* @__PURE__ */ jsx127(
                   Button2,
                   {
                     text: menuAction.label,
@@ -8448,24 +9195,24 @@ function ChatPage({
                   }
                 ) : null
               ] }) : null,
-              /* @__PURE__ */ jsx126(
+              /* @__PURE__ */ jsx127("div", { className: "scrollbar-subtle max-h-[40%] min-h-0 shrink-0 overflow-y-auto", children: /* @__PURE__ */ jsx127(
                 Menu,
                 {
                   items: menuItems,
                   selectedKey: activeMenuKey,
                   onSelect: (key) => onMenuSelect?.(key)
                 }
-              ),
-              conversationSectionTitle !== void 0 ? /* @__PURE__ */ jsxs89(
+              ) }),
+              conversationSectionTitle !== void 0 ? /* @__PURE__ */ jsxs90(
                 "button",
                 {
                   type: "button",
                   "data-slot": "chat-page-section-toggle",
                   "aria-expanded": !convCollapsed,
-                  className: "flex w-full cursor-pointer items-center justify-between px-2 pt-2",
+                  className: "flex w-full shrink-0 cursor-pointer items-center justify-between px-2 pt-2",
                   onClick: toggleConvSection,
                   children: [
-                    /* @__PURE__ */ jsx126(
+                    /* @__PURE__ */ jsx127(
                       Text,
                       {
                         text: `${conversationSectionTitle} (${conversations.length})`,
@@ -8474,48 +9221,50 @@ function ChatPage({
                         strong: true
                       }
                     ),
-                    /* @__PURE__ */ jsx126(Icon, { name: convCollapsed ? "chevron-right" : "chevron-down", size: 14 })
+                    /* @__PURE__ */ jsx127(Icon, { name: convCollapsed ? "chevron-right" : "chevron-down", size: 14 })
                   ]
                 }
               ) : null,
-              !convCollapsed ? /* @__PURE__ */ jsx126(
-                ConversationList,
-                {
-                  items: conversations,
-                  activeId: activeConversationId,
-                  onSelect: (id) => onSelectConversation?.(id),
-                  onDelete: (id) => onDeleteConversation?.(id)
-                }
-              ) : null,
-              !convCollapsed && moreLabel !== void 0 ? /* @__PURE__ */ jsx126("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx126(Button2, { text: `${moreLabel} >>`, variant: "link", size: "small", onClick: () => onMore?.() }) }) : null,
-              footerSectionTitle !== void 0 ? /* @__PURE__ */ jsxs89(
+              !convCollapsed ? /* @__PURE__ */ jsxs90("div", { "data-slot": "chat-page-section-body", className: "scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-y-auto", children: [
+                /* @__PURE__ */ jsx127(
+                  ConversationList,
+                  {
+                    items: conversations,
+                    activeId: activeConversationId,
+                    onSelect: (id) => onSelectConversation?.(id),
+                    onDelete: (id) => onDeleteConversation?.(id)
+                  }
+                ),
+                moreLabel !== void 0 ? /* @__PURE__ */ jsx127("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx127(Button2, { text: `${moreLabel} >>`, variant: "link", size: "small", onClick: () => onMore?.() }) }) : null
+              ] }) : null,
+              footerSectionTitle !== void 0 ? /* @__PURE__ */ jsxs90(
                 "button",
                 {
                   type: "button",
                   "data-slot": "chat-page-section-toggle",
                   "aria-expanded": !footerCollapsed,
-                  className: "flex w-full cursor-pointer items-center justify-between px-2 pt-2",
+                  className: "flex w-full shrink-0 cursor-pointer items-center justify-between px-2 pt-2",
                   onClick: toggleFooterSection,
                   children: [
-                    /* @__PURE__ */ jsx126(Text, { text: footerSectionTitle, type: "secondary", className: "text-sm", strong: true }),
-                    /* @__PURE__ */ jsx126(Icon, { name: footerCollapsed ? "chevron-right" : "chevron-down", size: 14 })
+                    /* @__PURE__ */ jsx127(Text, { text: footerSectionTitle, type: "secondary", className: "text-sm", strong: true }),
+                    /* @__PURE__ */ jsx127(Icon, { name: footerCollapsed ? "chevron-right" : "chevron-down", size: 14 })
                   ]
                 }
               ) : null,
-              !footerCollapsed && footerItems.length > 0 ? /* @__PURE__ */ jsx126(
+              !footerCollapsed && footerItems.length > 0 ? /* @__PURE__ */ jsx127("div", { "data-slot": "chat-page-section-body", className: "scrollbar-subtle min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx127(
                 Menu,
                 {
                   items: footerItems,
                   onSelect: (key) => onMenuSelect?.(key)
                 }
-              ) : null
+              ) }) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsx126("div", { className: "h-full min-w-0 flex-1", children: open ? /* @__PURE__ */ jsxs89(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
-          /* @__PURE__ */ jsx126(Panel, { defaultSize: "62%", children: chatArea }),
-          /* @__PURE__ */ jsx126(ResizableHandle, { withHandle: true }),
-          /* @__PURE__ */ jsx126(Panel, { defaultSize: "38%", minSize: "320px", maxSize: "760px", children: artifactPanel })
+        /* @__PURE__ */ jsx127("div", { className: "@container h-full min-w-0 flex-1", children: open ? /* @__PURE__ */ jsxs90(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
+          /* @__PURE__ */ jsx127(Panel, { defaultSize: "62%", children: chatArea }),
+          /* @__PURE__ */ jsx127(ResizableHandle, { withHandle: true }),
+          /* @__PURE__ */ jsx127(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: artifactPanel })
         ] }) : chatArea })
       ]
     }
@@ -8523,10 +9272,10 @@ function ChatPage({
 }
 
 // src/components/chat/Citation/index.tsx
-import { jsx as jsx127, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs91 } from "react/jsx-runtime";
 function Citation({ items = [], start = 1, className, style }) {
-  return /* @__PURE__ */ jsx127("span", { "data-slot": "citation", className: cn("inline-flex gap-1 align-super", className), style, children: items.map((item, index) => /* @__PURE__ */ jsxs90(HoverCard, { children: [
-    /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsx128("span", { "data-slot": "citation", className: cn("inline-flex gap-1 align-super", className), style, children: items.map((item, index) => /* @__PURE__ */ jsxs91(HoverCard, { children: [
+    /* @__PURE__ */ jsxs91(
       HoverCardTrigger,
       {
         "data-slot": "citation-marker",
@@ -8538,10 +9287,10 @@ function Citation({ items = [], start = 1, className, style }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs90(HoverCardContent, { "data-slot": "citation-card", className: "w-72", children: [
-      /* @__PURE__ */ jsx127("div", { className: "text-sm font-medium", children: item.title }),
-      item.snippet ? /* @__PURE__ */ jsx127("div", { className: "mt-1 line-clamp-3 text-xs text-muted-foreground", children: item.snippet }) : null,
-      item.url ? /* @__PURE__ */ jsx127(
+    /* @__PURE__ */ jsxs91(HoverCardContent, { "data-slot": "citation-card", className: "w-72", children: [
+      /* @__PURE__ */ jsx128("div", { className: "text-sm font-medium", children: item.title }),
+      item.snippet ? /* @__PURE__ */ jsx128("div", { className: "mt-1 line-clamp-3 text-xs text-muted-foreground", children: item.snippet }) : null,
+      item.url ? /* @__PURE__ */ jsx128(
         "a",
         {
           href: item.url,
@@ -8556,13 +9305,13 @@ function Citation({ items = [], start = 1, className, style }) {
 }
 
 // src/components/chat/Suggestion/index.tsx
-import { jsx as jsx128, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs92 } from "react/jsx-runtime";
 function normalize(item) {
   if (typeof item === "string") return { label: item, value: item };
   return { label: item.label, value: item.value ?? item.label, icon: item.icon };
 }
 function Suggestion({ items = [], justify = "start", onSelect, className, style }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       "data-slot": "suggestion",
@@ -8570,7 +9319,7 @@ function Suggestion({ items = [], justify = "start", onSelect, className, style
       style,
       children: items.map((item, index) => {
         const { label, value, icon } = normalize(item);
-        return /* @__PURE__ */ jsxs91(
+        return /* @__PURE__ */ jsxs92(
           "button",
           {
             type: "button",
@@ -8579,7 +9328,7 @@ function Suggestion({ items = [], justify = "start", onSelect, className, style
             className: "flex items-center gap-1.5 rounded-full border border-border px-3 py-1 text-sm transition-colors hover:bg-accent",
             onClick: () => onSelect?.(value),
             children: [
-              icon ? /* @__PURE__ */ jsx128(Icon, { name: icon, size: "sm" }) : null,
+              icon ? /* @__PURE__ */ jsx129(Icon, { name: icon, size: "sm" }) : null,
               label
             ]
           },
@@ -8591,7 +9340,7 @@ function Suggestion({ items = [], justify = "start", onSelect, className, style
 }
 
 // src/components/chart/EChartBase/index.tsx
-import { useEffect as useEffect35, useRef as useRef9, useState as useState43 } from "react";
+import { useEffect as useEffect36, useRef as useRef11, useState as useState45 } from "react";
 
 // src/components/chart/echarts-modules.ts
 import * as echarts from "echarts/core";
@@ -8643,7 +9392,7 @@ echarts.use([
 ]);
 
 // src/components/chart/EChartBase/index.tsx
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
 function EChartBase({
   option,
   height = 256,
@@ -8652,12 +9401,12 @@ function EChartBase({
   style,
   slot
 }) {
-  const hostRef = useRef9(null);
-  const chartRef = useRef9(null);
-  const onSelectRef = useRef9(onSelect);
+  const hostRef = useRef11(null);
+  const chartRef = useRef11(null);
+  const onSelectRef = useRef11(onSelect);
   onSelectRef.current = onSelect;
-  const [failed, setFailed] = useState43(false);
-  useEffect35(() => {
+  const [failed, setFailed] = useState45(false);
+  useEffect36(() => {
     const host = hostRef.current;
     if (!host) return;
     let chart = null;
@@ -8676,22 +9425,22 @@ function EChartBase({
         dataIndex: params.dataIndex
       });
     });
-    const observer = new ResizeObserver(() => chart?.resize());
-    observer.observe(host);
+    const observer2 = new ResizeObserver(() => chart?.resize());
+    observer2.observe(host);
     return () => {
-      observer.disconnect();
+      observer2.disconnect();
       chart?.dispose();
       chartRef.current = null;
     };
   }, []);
-  useEffect35(() => {
+  useEffect36(() => {
     try {
       chartRef.current?.setOption(option, { notMerge: true });
     } catch {
     }
   }, [option]);
   if (failed) {
-    return /* @__PURE__ */ jsx129(
+    return /* @__PURE__ */ jsx130(
       "div",
       {
         "data-slot": "chart-fallback",
@@ -8704,7 +9453,7 @@ function EChartBase({
       }
     );
   }
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx130(
     "div",
     {
       ref: hostRef,
@@ -9140,6 +9889,9 @@ function buildComposedOption(input, theme) {
   };
 }
 
+// src/components/chart/lib/use-chart-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/components/chart/lib/color.ts
 var LPAREN = String.fromCharCode(40);
 var RPAREN = String.fromCharCode(41);
@@ -9236,9 +9988,67 @@ function getChartTheme() {
     return FALLBACK_THEME;
   }
 }
+function resetChartTheme() {
+  cached = null;
+}
+var CHART_SKIN_CHANGE_EVENT = "pactor:skin-change";
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var scheduled = false;
+function scheduleNotify() {
+  if (scheduled) return;
+  scheduled = true;
+  const enqueue = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+  enqueue(() => {
+    scheduled = false;
+    resetChartTheme();
+    for (const listener of [...listeners]) {
+      listener();
+    }
+  });
+}
+function handleResourceLoad(event) {
+  const target = event.target;
+  if (target instanceof HTMLLinkElement || target instanceof HTMLStyleElement) {
+    scheduleNotify();
+  }
+}
+function subscribeChartTheme(listener) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  listeners.add(listener);
+  if (!observer) {
+    observer = new MutationObserver(scheduleNotify);
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    document.addEventListener("load", handleResourceLoad, true);
+    window.addEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+      document.removeEventListener("load", handleResourceLoad, true);
+      window.removeEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+    }
+  };
+}
+
+// src/components/chart/lib/use-chart-theme.ts
+function useChartTheme() {
+  return useSyncExternalStore(subscribeChartTheme, getChartTheme, getChartTheme);
+}
 
 // src/components/chart/AreaChart/index.tsx
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 function AreaChart({
   data = [],
   xKey,
@@ -9254,9 +10064,9 @@ function AreaChart({
 }) {
   const option = buildAreaOption(
     { data, xKey, yKeys, stacked, fillOpacity, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx131(
     EChartBase,
     {
       slot: "area-chart",
@@ -9270,7 +10080,7 @@ function AreaChart({
 }
 
 // src/components/chart/BarChart/index.tsx
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 function BarChart2({
   data = [],
   yKey,
@@ -9285,9 +10095,9 @@ function BarChart2({
 }) {
   const option = buildBarOption(
     { data, yKey, yKeys: xKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx132(
     EChartBase,
     {
       slot: "bar-chart",
@@ -9301,7 +10111,7 @@ function BarChart2({
 }
 
 // src/components/chart/BubbleChart/index.tsx
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 function BubbleChart({
   data = [],
   xKey,
@@ -9317,9 +10127,9 @@ function BubbleChart({
 }) {
   const option = buildBubbleOption(
     { data, xKey, yKey, sizeKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx133(
     EChartBase,
     {
       slot: "bubble-chart",
@@ -9333,7 +10143,7 @@ function BubbleChart({
 }
 
 // src/components/chart/ColumnChart/index.tsx
-import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 function ColumnChart({
   data = [],
   xKey,
@@ -9348,9 +10158,9 @@ function ColumnChart({
 }) {
   const option = buildColumnOption(
     { data, xKey, yKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx134(
     EChartBase,
     {
       slot: "column-chart",
@@ -9364,7 +10174,7 @@ function ColumnChart({
 }
 
 // src/components/chart/ComposedChart/index.tsx
-import { jsx as jsx134 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 function ComposedChart({
   data = [],
   xKey,
@@ -9378,9 +10188,9 @@ function ComposedChart({
 }) {
   const option = buildComposedOption(
     { data, xKey, series, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx135(
     EChartBase,
     {
       slot: "composed-chart",
@@ -9394,7 +10204,7 @@ function ComposedChart({
 }
 
 // src/components/chart/DonutChart/index.tsx
-import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
 function DonutChart({
   data = [],
   nameKey,
@@ -9424,9 +10234,9 @@ function DonutChart({
       colors,
       title
     },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx136(
     EChartBase,
     {
       slot: "donut-chart",
@@ -9440,7 +10250,7 @@ function DonutChart({
 }
 
 // src/components/chart/FunnelChart/index.tsx
-import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 function FunnelChart2({
   data = [],
   nameKey,
@@ -9455,9 +10265,9 @@ function FunnelChart2({
 }) {
   const option = buildFunnelOption(
     { data, nameKey, valueKey, sort, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx137(
     EChartBase,
     {
       slot: "funnel-chart",
@@ -9471,7 +10281,7 @@ function FunnelChart2({
 }
 
 // src/components/chart/GaugeChart/index.tsx
-import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
 function GaugeChart2({
   value = 0,
   min,
@@ -9486,9 +10296,9 @@ function GaugeChart2({
 }) {
   const option = buildGaugeOption(
     { value, min, max, thresholds, unit, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsx138(
     EChartBase,
     {
       slot: "gauge-chart",
@@ -9502,7 +10312,7 @@ function GaugeChart2({
 }
 
 // src/components/chart/Heatmap/index.tsx
-import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 function Heatmap({
   data = [],
   xKey,
@@ -9516,9 +10326,9 @@ function Heatmap({
 }) {
   const option = buildHeatmapOption(
     { data, xKey, yKey, valueKey, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx138(
+  return /* @__PURE__ */ jsx139(
     EChartBase,
     {
       slot: "heatmap",
@@ -9532,7 +10342,7 @@ function Heatmap({
 }
 
 // src/components/chart/LineChart/index.tsx
-import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
 function LineChart2({
   data = [],
   xKey,
@@ -9549,9 +10359,9 @@ function LineChart2({
 }) {
   const option = buildLineOption(
     { data, xKey, yKeys, smooth, showArea, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx139(
+  return /* @__PURE__ */ jsx140(
     EChartBase,
     {
       slot: "line-chart",
@@ -9565,8 +10375,8 @@ function LineChart2({
 }
 
 // src/components/chart/MapChart/index.tsx
-import { useEffect as useEffect36, useState as useState44 } from "react";
-import { jsx as jsx140 } from "react/jsx-runtime";
+import { useEffect as useEffect37, useState as useState46 } from "react";
+import { jsx as jsx141 } from "react/jsx-runtime";
 var fetchedMaps = /* @__PURE__ */ new Set();
 function hasRegisteredMap(mapName) {
   try {
@@ -9588,7 +10398,8 @@ function MapChart2({
   className,
   style
 }) {
-  const [loadState, setLoadState] = useState44(
+  const theme = useChartTheme();
+  const [loadState, setLoadState] = useState46(
     () => geoJson || !geoJsonUrl || hasRegisteredMap(mapName) ? "idle" : "loading"
   );
   if (geoJson) {
@@ -9597,7 +10408,7 @@ function MapChart2({
     } catch {
     }
   }
-  useEffect36(() => {
+  useEffect37(() => {
     if (geoJson || !geoJsonUrl || hasRegisteredMap(mapName) || fetchedMaps.has(mapName)) {
       setLoadState("idle");
       return;
@@ -9622,7 +10433,7 @@ function MapChart2({
     };
   }, [geoJson, geoJsonUrl, mapName]);
   if (geoJsonUrl && !geoJson && loadState === "loading") {
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx141(
       "div",
       {
         "data-slot": "map-chart-loading",
@@ -9632,7 +10443,7 @@ function MapChart2({
     );
   }
   if (!geoJson && loadState === "error") {
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx141(
       Empty2,
       {
         title: "\u5730\u56FE\u52A0\u8F7D\u5931\u8D25",
@@ -9644,7 +10455,7 @@ function MapChart2({
   }
   if (!geoJson && !hasRegisteredMap(mapName)) {
     console.warn(`[MapChart] \u5730\u56FE "${mapName}" \u672A\u6CE8\u518C\uFF1A\u8BF7\u4F20\u5165 geoJson / geoJsonUrl\uFF0C\u6216\u5728\u5E94\u7528\u542F\u52A8\u65F6 echarts.registerMap`);
-    return /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsx141(
       Empty2,
       {
         title: "\u5730\u56FE\u672A\u6CE8\u518C",
@@ -9654,8 +10465,8 @@ function MapChart2({
       }
     );
   }
-  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, getChartTheme());
-  return /* @__PURE__ */ jsx140(
+  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, theme);
+  return /* @__PURE__ */ jsx141(
     EChartBase,
     {
       slot: "map-chart",
@@ -9670,7 +10481,7 @@ function MapChart2({
 
 // src/components/chart/MetricCard/index.tsx
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
-import { jsx as jsx141, jsxs as jsxs92 } from "react/jsx-runtime";
+import { jsx as jsx142, jsxs as jsxs93 } from "react/jsx-runtime";
 function MetricCard({
   title,
   value,
@@ -9683,15 +10494,15 @@ function MetricCard({
 }) {
   const showTrend = typeof trend === "number" && trend !== 0;
   const rising = (trend ?? 0) > 0;
-  return /* @__PURE__ */ jsxs92(
+  return /* @__PURE__ */ jsxs93(
     "div",
     {
       "data-slot": "metric-card",
       className: cn("rounded-lg border bg-card p-4 text-card-foreground shadow-sm", className),
       style,
       children: [
-        title ? /* @__PURE__ */ jsx141("div", { "data-slot": "metric-card-title", className: "text-sm text-muted-foreground", children: title }) : null,
-        /* @__PURE__ */ jsxs92(
+        title ? /* @__PURE__ */ jsx142("div", { "data-slot": "metric-card-title", className: "text-sm text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsxs93(
           "div",
           {
             "data-slot": "metric-card-value",
@@ -9703,7 +10514,7 @@ function MetricCard({
             ]
           }
         ),
-        showTrend ? /* @__PURE__ */ jsxs92(
+        showTrend ? /* @__PURE__ */ jsxs93(
           "div",
           {
             "data-slot": "metric-card-trend",
@@ -9713,10 +10524,10 @@ function MetricCard({
               rising ? "text-success" : "text-destructive"
             ),
             children: [
-              rising ? /* @__PURE__ */ jsx141(ArrowUpRight, { className: "size-4" }) : /* @__PURE__ */ jsx141(ArrowDownRight, { className: "size-4" }),
+              rising ? /* @__PURE__ */ jsx142(ArrowUpRight, { className: "size-4" }) : /* @__PURE__ */ jsx142(ArrowDownRight, { className: "size-4" }),
               Math.abs(trend ?? 0),
               "%",
-              trendLabel ? /* @__PURE__ */ jsx141("span", { className: "ml-1 text-muted-foreground", children: trendLabel }) : null
+              trendLabel ? /* @__PURE__ */ jsx142("span", { className: "ml-1 text-muted-foreground", children: trendLabel }) : null
             ]
           }
         ) : null
@@ -9726,7 +10537,7 @@ function MetricCard({
 }
 
 // src/components/chart/PieChart/index.tsx
-import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx143 } from "react/jsx-runtime";
 function PieChart2({
   data = [],
   nameKey,
@@ -9741,9 +10552,9 @@ function PieChart2({
 }) {
   const option = buildPieOption(
     { data, nameKey, valueKey, showLabel, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx142(
+  return /* @__PURE__ */ jsx143(
     EChartBase,
     {
       slot: "pie-chart",
@@ -9757,7 +10568,7 @@ function PieChart2({
 }
 
 // src/components/chart/RadarChart/index.tsx
-import { jsx as jsx143 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
 function RadarChart2({
   data = [],
   indicatorKey,
@@ -9771,9 +10582,9 @@ function RadarChart2({
 }) {
   const option = buildRadarOption(
     { data, indicatorKey, yKeys, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx143(
+  return /* @__PURE__ */ jsx144(
     EChartBase,
     {
       slot: "radar-chart",
@@ -9787,7 +10598,7 @@ function RadarChart2({
 }
 
 // src/components/chart/SankeyChart/index.tsx
-import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx145 } from "react/jsx-runtime";
 function SankeyChart2({
   nodes = [],
   links = [],
@@ -9797,8 +10608,8 @@ function SankeyChart2({
   className,
   style
 }) {
-  const option = buildSankeyOption({ nodes, links, title }, getChartTheme());
-  return /* @__PURE__ */ jsx144(
+  const option = buildSankeyOption({ nodes, links, title }, useChartTheme());
+  return /* @__PURE__ */ jsx145(
     EChartBase,
     {
       slot: "sankey-chart",
@@ -9812,7 +10623,7 @@ function SankeyChart2({
 }
 
 // src/components/chart/ScatterChart/index.tsx
-import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
 function ScatterChart2({
   data = [],
   xKey,
@@ -9827,9 +10638,9 @@ function ScatterChart2({
 }) {
   const option = buildScatterOption(
     { data, xKey, yKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx146(
     EChartBase,
     {
       slot: "scatter-chart",
@@ -9843,7 +10654,7 @@ function ScatterChart2({
 }
 
 // src/components/chart/TreeChart/index.tsx
-import { jsx as jsx146 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
 function TreeChart2({
   data = [],
   title,
@@ -9857,9 +10668,9 @@ function TreeChart2({
 }) {
   const option = buildTreeOption(
     { data, title, orient, edgeShape, initialTreeDepth },
-    getChartTheme()
+    useChartTheme()
   );
-  return /* @__PURE__ */ jsx146(
+  return /* @__PURE__ */ jsx147(
     EChartBase,
     {
       slot: "tree-chart",