@pactor-app/chat 1.44.0 → 1.47.0

package/dist/components/index.cjs

@@ -0,0 +1,2651 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  AgentStatus: () => AgentStatus,
+  ArtifactPanel: () => ArtifactPanel,
+  Attachment: () => Attachment,
+  Bubble: () => Bubble,
+  ChatMessage: () => ChatMessage,
+  ChatPage: () => ChatPage,
+  Citation: () => Citation,
+  Composer: () => Composer,
+  ConversationList: () => ConversationList,
+  MessageList: () => MessageList,
+  Prompt: () => Prompt,
+  Sender: () => Sender,
+  StepsPanel: () => StepsPanel,
+  StreamingText: () => StreamingText,
+  Suggestion: () => Suggestion,
+  Thinking: () => Thinking,
+  ToolCall: () => ToolCall,
+  Welcome: () => Welcome,
+  buildArtifactBlob: () => buildArtifactBlob,
+  buildArtifactTree: () => buildArtifactTree,
+  downloadArtifact: () => downloadArtifact,
+  registerChatComponents: () => registerChatComponents,
+  resolveArtifactFilename: () => resolveArtifactFilename,
+  saveBlob: () => saveBlob
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/AgentStatus/index.tsx
+var import_components = require("@pactor-app/ui/components");
+var import_jsx_runtime = require("react/jsx-runtime");
+var statusMeta = {
+  running: { icon: "loader-circle", className: "text-info", spin: true },
+  waiting: { icon: "clock", className: "text-warning" },
+  done: { icon: "circle-check", className: "text-success" },
+  error: { icon: "circle-x", className: "text-destructive" }
+};
+function AgentStatus({ status = "running", text, elapsed, className, style }) {
+  const meta = statusMeta[status];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-slot": "agent-status",
+      "data-status": status,
+      className: cn("flex items-center gap-2 text-sm", className),
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cn(meta.className, meta.spin && "animate-spin motion-reduce:animate-none"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { name: meta.icon, size: "sm" }) }),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-slot": "agent-status-text", children: text }) : null,
+        elapsed !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { "data-slot": "agent-status-elapsed", className: "text-xs text-muted-foreground", children: [
+          "\u5DF2\u7528\u65F6 ",
+          elapsed,
+          "s"
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ArtifactPanel/index.tsx
+var import_react2 = require("react");
+var import_components2 = require("@pactor-app/ui/components");
+var import_components3 = require("@pactor-app/ui/components");
+var import_components4 = require("@pactor-app/ui/components");
+var import_components5 = require("@pactor-app/ui/components");
+var import_components6 = require("@pactor-app/ui/components");
+
+// src/components/ArtifactPanel/artifact.ts
+var ARTIFACT_IMAGE_EXTENSIONS = [
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "avif",
+  "bmp",
+  "ico"
+];
+function resolveArtifactFileType(artifact) {
+  const declared = artifact.fileType?.trim().toLowerCase().replace(/^\./, "");
+  if (declared) {
+    return declared;
+  }
+  const match = /\.([A-Za-z0-9]+)$/.exec(artifact.title.trim());
+  return match ? match[1].toLowerCase() : null;
+}
+function isImageArtifact(artifact) {
+  const ext = resolveArtifactFileType(artifact);
+  return ext !== null && ARTIFACT_IMAGE_EXTENSIONS.includes(ext);
+}
+var ARTIFACT_ICON_BY_EXTENSION = {
+  // 表格数据
+  csv: "table",
+  tsv: "table",
+  xls: "table",
+  xlsx: "table",
+  // 数据 / 数据库
+  json: "database",
+  sql: "database",
+  // 脚本
+  sh: "terminal",
+  bash: "terminal",
+  zsh: "terminal",
+  // 代码 / 配置
+  js: "code",
+  mjs: "code",
+  cjs: "code",
+  jsx: "code",
+  ts: "code",
+  mts: "code",
+  cts: "code",
+  tsx: "code",
+  py: "code",
+  rb: "code",
+  go: "code",
+  rs: "code",
+  java: "code",
+  kt: "code",
+  c: "code",
+  h: "code",
+  cc: "code",
+  cpp: "code",
+  cs: "code",
+  swift: "code",
+  php: "code",
+  css: "code",
+  scss: "code",
+  less: "code",
+  html: "code",
+  vue: "code",
+  svelte: "code",
+  yaml: "code",
+  yml: "code",
+  toml: "code",
+  xml: "code",
+  // 文档 / 文本
+  md: "file-text",
+  markdown: "file-text",
+  mdx: "file-text",
+  txt: "file-text",
+  text: "file-text",
+  log: "file-text",
+  rst: "file-text",
+  pdf: "file-text",
+  doc: "file-text",
+  docx: "file-text"
+};
+function resolveArtifactIconName(artifact) {
+  const ext = resolveArtifactFileType(artifact);
+  if (ext !== null) {
+    if (ARTIFACT_IMAGE_EXTENSIONS.includes(ext)) {
+      return "image";
+    }
+    const name = ARTIFACT_ICON_BY_EXTENSION[ext];
+    if (name !== void 0) {
+      return name;
+    }
+  }
+  if (artifact.kind === "code") {
+    return "code";
+  }
+  if (artifact.kind === "dsl") {
+    return "layout-grid";
+  }
+  return ext === null ? "file-text" : "file";
+}
+function buildArtifactTree(artifacts) {
+  const root = { name: "", path: "", children: [] };
+  for (const artifact of artifacts) {
+    const segments = artifact.id.split("/").filter(Boolean);
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const path = segments.slice(0, i + 1).join("/");
+      let child = node.children.find(
+        (item) => item.path === path && item.artifact === void 0
+      );
+      if (!child) {
+        child = { name: segments[i], path, children: [] };
+        node.children.push(child);
+      }
+      node = child;
+    }
+    node.children.push({
+      name: artifact.title,
+      path: artifact.id,
+      artifact,
+      children: []
+    });
+  }
+  const sortLevel = (nodes) => {
+    nodes.sort((a, b) => {
+      const dirDelta = Number(b.artifact === void 0) - Number(a.artifact === void 0);
+      return dirDelta !== 0 ? dirDelta : a.name.localeCompare(b.name);
+    });
+    for (const item of nodes) {
+      sortLevel(item.children);
+    }
+  };
+  sortLevel(root.children);
+  return root.children;
+}
+
+// src/components/ArtifactPanel/download.ts
+var KIND_EXTENSIONS = {
+  markdown: "md",
+  text: "txt",
+  code: "txt",
+  dsl: "json"
+};
+function resolveArtifactFilename(artifact) {
+  const title = artifact.title.trim() || "artifact";
+  if (/\.[A-Za-z0-9]+$/.test(title)) {
+    return title;
+  }
+  const ext = resolveArtifactFileType(artifact) ?? KIND_EXTENSIONS[artifact.kind];
+  return `${title}.${ext}`;
+}
+function dataUrlToBlob(dataUrl) {
+  const comma = dataUrl.indexOf(",");
+  const meta = dataUrl.slice(0, comma);
+  const payload = dataUrl.slice(comma + 1);
+  const mime = /^data:([^;,]+)/.exec(meta)?.[1] ?? "application/octet-stream";
+  if (meta.includes(";base64")) {
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return new Blob([bytes], { type: mime });
+  }
+  return new Blob([decodeURIComponent(payload)], { type: mime });
+}
+function isRemoteUrl(raw) {
+  return /^https?:\/\//.test(raw.trim());
+}
+function buildArtifactBlob(artifact) {
+  if (artifact.kind === "dsl" && typeof artifact.content === "object") {
+    return new Blob([JSON.stringify(artifact.content, null, 2)], {
+      type: "application/json"
+    });
+  }
+  const raw = String(artifact.content);
+  if (isImageArtifact(artifact)) {
+    const trimmed = raw.trim();
+    if (trimmed.startsWith("data:")) {
+      return dataUrlToBlob(trimmed);
+    }
+    if (trimmed.startsWith("<svg") || trimmed.startsWith("<?xml")) {
+      return new Blob([raw], { type: "image/svg+xml" });
+    }
+    if (isRemoteUrl(trimmed)) {
+      return null;
+    }
+  }
+  const ext = resolveArtifactFileType(artifact);
+  const mime = ext === "md" || artifact.kind === "markdown" ? "text/markdown" : "text/plain";
+  return new Blob([raw], { type: `${mime};charset=utf-8` });
+}
+function saveBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+async function downloadArtifact(artifact) {
+  const filename = resolveArtifactFilename(artifact);
+  const raw = String(artifact.content ?? "").trim();
+  if (isImageArtifact(artifact) && isRemoteUrl(raw)) {
+    try {
+      const response = await fetch(raw);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      saveBlob(await response.blob(), filename);
+      return;
+    } catch {
+      window.open(raw, "_blank", "noopener");
+      return;
+    }
+  }
+  const blob = buildArtifactBlob(artifact);
+  if (blob) {
+    saveBlob(blob, filename);
+  }
+}
+
+// src/components/ArtifactPanel/dsl-preview.tsx
+var import_core = require("@pactor-app/core");
+var import_runtime = require("@pactor-app/runtime");
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ARTIFACT_DENIED_TYPE = "ChatDenied";
+function ArtifactDenied({ deniedType }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      "data-slot": "artifact-denied",
+      "data-denied-type": deniedType,
+      className: "rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground",
+      children: [
+        "\u8BE5\u7EC4\u4EF6\u4E0D\u5141\u8BB8\u5728\u4EA7\u7269\u9884\u89C8\u4E2D\u4F7F\u7528",
+        deniedType ? `\uFF1A${deniedType}` : ""
+      ]
+    }
+  );
+}
+function guardArtifactDsl(node, registry) {
+  const type = node.type ?? "(reference)";
+  if (type !== ARTIFACT_DENIED_TYPE && !registry.has(type)) {
+    return {
+      type: ARTIFACT_DENIED_TYPE,
+      props: { deniedType: type }
+    };
+  }
+  if (node.children === void 0) {
+    return node;
+  }
+  if (!Array.isArray(node.children)) {
+    return {
+      type: ARTIFACT_DENIED_TYPE,
+      props: { deniedType: `${type}(remote)` }
+    };
+  }
+  if (node.children.length === 0) {
+    return node;
+  }
+  return {
+    ...node,
+    // 数组中混排的引用元素同样无法静态过白名单：替换为受控占位
+    children: node.children.map(
+      (child) => (0, import_core.isDslSourceRef)(child) ? { type: ARTIFACT_DENIED_TYPE, props: { deniedType: "(remote)" } } : guardArtifactDsl(child, registry)
+    )
+  };
+}
+function useArtifactPreviewRuntime(safeRegistry, user) {
+  return (0, import_react.useMemo)(() => {
+    if (!safeRegistry) {
+      return void 0;
+    }
+    const components = new import_core.Registry("ArtifactPreviewRegistry");
+    components.register(ARTIFACT_DENIED_TYPE, ArtifactDenied);
+    for (const name of safeRegistry.list()) {
+      components.register(name, safeRegistry.get(name));
+    }
+    const context = (0, import_runtime.createRuntimeContext)({ components, user });
+    (0, import_runtime.registerBuiltinActions)(context.actions);
+    return { context, engine: new import_runtime.ActionEngine(context) };
+  }, [safeRegistry, user]);
+}
+var ArtifactDslGuard = class extends import_react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    console.warn("[@pactor-app/ui] DSL \u4EA7\u7269\u6E32\u67D3\u5931\u8D25\uFF0C\u5DF2\u964D\u7EA7\u5C55\u793A", error);
+  }
+  render() {
+    return this.state.failed ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        "data-slot": "artifact-denied",
+        className: "rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground",
+        children: "DSL \u4EA7\u7269\u6E32\u67D3\u5931\u8D25\uFF0C\u5DF2\u964D\u7EA7\u5C55\u793A"
+      }
+    ) : this.props.children;
+  }
+};
+function ArtifactDslNode({ node }) {
+  const { renderChildren } = (0, import_runtime.useRenderer)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: renderChildren([node]) });
+}
+function ArtifactDslContent({
+  content,
+  runtime,
+  style
+}) {
+  const node = typeof content === "object" && content !== null && !Array.isArray(content) && typeof content.type === "string" ? content : void 0;
+  if (!node || !runtime) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        "data-slot": "artifact-denied",
+        className: "rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground",
+        style,
+        children: node ? "DSL \u9884\u89C8\u4E0D\u53EF\u7528\uFF08\u672A\u6CE8\u5165 Safe Registry\uFF09" : "DSL \u4EA7\u7269\u5185\u5BB9\u65E0\u6548"
+      }
+    );
+  }
+  const guarded = guardArtifactDsl(node, runtime.context.components);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_runtime.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArtifactDslGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArtifactDslNode, { node: guarded }) }) });
+}
+
+// src/components/ArtifactPanel/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ArtifactKindIcon({ artifact }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components5.Icon, { name: resolveArtifactIconName(artifact), size: 13 });
+}
+function ArtifactListView({
+  nodes,
+  activeId,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { "data-slot": "artifact-panel-list", className: "flex flex-col gap-0.5", children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    ArtifactTreeRow,
+    {
+      node,
+      activeId,
+      onSelect
+    },
+    node.path
+  )) });
+}
+function ArtifactTreeRow({
+  node,
+  activeId,
+  onSelect
+}) {
+  const [open, setOpen] = (0, import_react2.useState)(true);
+  if (node.artifact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-slot": "artifact-panel-list-item",
+        "data-active": node.artifact.id === activeId,
+        className: "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent data-[active=true]:bg-accent",
+        onClick: () => onSelect?.(node.artifact.id),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactKindIcon, { artifact: node.artifact }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate", children: node.artifact.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: node.artifact.kind })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-slot": "artifact-panel-list-folder",
+        "aria-expanded": open,
+        "data-open": open,
+        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__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
+            {
+              className: "inline-flex transition-transform data-[open=true]:rotate-90",
+              "data-open": open,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components5.Icon, { name: "chevron-right", size: 12 })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components5.Icon, { name: "folder", size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate", children: node.name })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      ArtifactListView,
+      {
+        nodes: node.children,
+        activeId,
+        onSelect
+      }
+    ) })
+  ] });
+}
+function ArtifactImageContent({ artifact }) {
+  const raw = String(artifact.content).trim();
+  const src = raw.startsWith("<svg") || raw.startsWith("<?xml") ? `data:image/svg+xml;utf8,${encodeURIComponent(raw)}` : raw;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-slot": "artifact-panel-image", className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src, alt: artifact.title, className: "max-w-full rounded-md" }) });
+}
+function ArtifactContent({
+  artifact,
+  runtime,
+  viewers
+}) {
+  const ext = resolveArtifactFileType(artifact);
+  const custom = (ext ? viewers?.[ext] : void 0) ?? viewers?.[artifact.kind];
+  if (custom) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: custom(artifact) });
+  }
+  if (isImageArtifact(artifact)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactImageContent, { artifact });
+  }
+  switch (artifact.kind) {
+    case "markdown":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components6.Markdown, { content: String(artifact.content) });
+    case "code":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_components3.CodeBlock,
+        {
+          code: String(artifact.content),
+          language: artifact.language
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "pre",
+        {
+          "data-slot": "artifact-panel-text",
+          className: "text-sm break-words whitespace-pre-wrap",
+          children: String(artifact.content)
+        }
+      );
+    case "dsl":
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactDslContent, { content: artifact.content, runtime });
+    default:
+      return null;
+  }
+}
+function ArtifactPanel({
+  artifact,
+  artifacts,
+  activeArtifactId,
+  onSelectArtifact,
+  title = "\u4EA7\u7269",
+  emptyText = "\u6682\u65E0\u4EA7\u7269",
+  inspector,
+  header,
+  view: viewProp,
+  onViewChange,
+  viewRequest,
+  onViewRequestConsumed,
+  resizable = false,
+  onClose,
+  onDownload,
+  safeRegistry,
+  user,
+  artifactViewers,
+  className,
+  style
+}) {
+  const runtime = useArtifactPreviewRuntime(safeRegistry, user);
+  const [innerView, setInnerView] = (0, import_react2.useState)("content");
+  const viewControlled = viewProp !== void 0;
+  const view = viewControlled ? viewProp : innerView;
+  const switchView = (next) => {
+    if (!viewControlled) {
+      setInnerView(next);
+    }
+    onViewChange?.(next);
+  };
+  const activeId = activeArtifactId ?? artifact?.id;
+  (0, import_react2.useEffect)(() => {
+    switchView("content");
+  }, [activeId]);
+  (0, import_react2.useEffect)(() => {
+    if (viewRequest != null) {
+      switchView("list");
+      onViewRequestConsumed?.();
+    }
+  }, [viewRequest]);
+  const hasArtifacts = artifacts !== void 0 && artifacts.length > 0;
+  const panelRef = (0, import_react2.useRef)(null);
+  const [width, setWidth] = (0, import_react2.useState)(null);
+  const handleResizeStart = (event) => {
+    event.preventDefault();
+    const panel = panelRef.current;
+    if (!panel) {
+      return;
+    }
+    const startWidth = panel.getBoundingClientRect().width;
+    const startX = event.clientX;
+    const prevUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    const onMove = (moveEvent) => {
+      const hostRect = panel.parentElement?.getBoundingClientRect();
+      const hostWidth = hostRect !== void 0 && hostRect.width > 0 ? hostRect.width : window.innerWidth;
+      const maxWidth = Math.min(600, hostWidth * 2 / 3);
+      const next = startWidth + (startX - moveEvent.clientX);
+      setWidth(Math.round(Math.min(Math.max(next, 480), maxWidth)));
+    };
+    const onUp = () => {
+      document.body.style.userSelect = prevUserSelect;
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+  };
+  const headerTitle = view === "list" ? "\u4EA7\u7269\u76EE\u5F55" : artifact?.title ?? title;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "aside",
+    {
+      ref: panelRef,
+      "data-slot": "artifact-panel",
+      "data-kind": artifact?.kind,
+      className: cn(
+        "flex h-full min-w-0 flex-col",
+        resizable && "relative shrink-0",
+        className
+      ),
+      style: width !== null ? { ...style, width: `${width}px` } : style,
+      children: [
+        resizable ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            "data-slot": "artifact-panel-resize",
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "\u62D6\u52A8\u8C03\u6574\u9762\u677F\u5BBD\u5EA6",
+            className: "absolute top-0 left-0 z-10 h-full w-1 cursor-col-resize touch-none hover:bg-accent",
+            onPointerDown: handleResizeStart
+          }
+        ) : null,
+        header !== void 0 && header !== null ? header : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-2.5", children: [
+          hasArtifacts ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_components2.Button,
+            {
+              icon: "list",
+              variant: "text",
+              tooltip: view === "list" ? "\u8FD4\u56DE\u5185\u5BB9" : "\u4EA7\u7269\u76EE\u5F55",
+              onClick: () => switchView(view === "list" ? "content" : "list")
+            }
+          ) : null,
+          hasArtifacts ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_components4.DropdownMenu,
+            {
+              items: artifacts.map((item) => ({
+                label: item.title,
+                value: item.id,
+                icon: resolveArtifactIconName(item)
+              })),
+              onSelect: (id) => onSelectArtifact?.(id),
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "span",
+                {
+                  "data-slot": "artifact-panel-menu-trigger",
+                  className: "flex min-w-0 cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-sm font-medium hover:bg-accent",
+                  children: [
+                    view !== "list" && artifact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArtifactKindIcon, { artifact }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate", children: headerTitle }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_components5.Icon, { name: "chevron-down", size: 12 })
+                  ]
+                }
+              )
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate px-1.5 text-sm font-medium", children: headerTitle }),
+          view !== "list" && artifact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 rounded-md bg-accent px-1.5 py-0.5 text-xs text-muted-foreground", children: artifact.kind }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1" }),
+          artifact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_components2.Button,
+            {
+              icon: "download",
+              variant: "text",
+              tooltip: "\u4E0B\u8F7D\u4EA7\u7269",
+              className: "px-2",
+              onClick: () => onDownload ? onDownload(artifact) : void downloadArtifact(artifact)
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_components2.Button,
+            {
+              icon: "x",
+              variant: "text",
+              tooltip: "\u6536\u8D77\u4EA7\u7269\u533A",
+              className: "px-2",
+              onClick: () => onClose?.()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "scrollbar-subtle min-h-0 flex-1 overflow-auto p-4", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ArtifactListView,
+          {
+            nodes: buildArtifactTree(artifacts),
+            activeId,
+            onSelect: onSelectArtifact
+          }
+        ) : inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          ArtifactContent,
+          {
+            artifact,
+            runtime,
+            viewers: artifactViewers
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm text-muted-foreground", children: emptyText }) })
+      ]
+    }
+  );
+}
+
+// src/components/Attachment/index.tsx
+var import_components7 = require("@pactor-app/ui/components");
+var import_components8 = require("@pactor-app/ui/components");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var kindIcon = { image: "image", text: "file-text", video: "video", audio: "music", other: "file" };
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+function Attachment({ items = [], onRemove, onRetry, onClick, className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "attachment", className: cn("flex flex-wrap gap-2", className), style, children: items.map((item, index) => {
+    const key = item.id ?? index;
+    const kind = (0, import_components7.inferKind)(item.name, item.fileType);
+    const status = item.status ?? "done";
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        "data-slot": "attachment-item",
+        "data-status": status,
+        className: cn(
+          "flex w-56 flex-col rounded-md border border-border px-2 py-1.5",
+          onClick && "cursor-pointer"
+        ),
+        onClick: onClick ? () => onClick(item) : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components8.Icon, { name: kindIcon[kind], size: "sm" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm", children: item.name }),
+            status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "shrink-0 animate-spin text-muted-foreground motion-reduce:animate-none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components8.Icon, { name: "loader-circle", size: "sm" }) }) : null,
+            status === "error" && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-slot": "attachment-retry",
+                "aria-label": `\u91CD\u8BD5 ${item.name}`,
+                className: "shrink-0 text-destructive hover:opacity-80",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onRetry(key);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components8.Icon, { name: "refresh-ccw", size: "sm" })
+              }
+            ) : null,
+            onRemove ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-slot": "attachment-remove",
+                "aria-label": `\u79FB\u9664 ${item.name}`,
+                className: "shrink-0 text-muted-foreground hover:text-foreground",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  onRemove(key);
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components8.Icon, { name: "x", size: "sm" })
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-0.5 flex items-center gap-1.5 pl-5 text-xs", children: [
+            item.fileSize !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", children: formatSize(item.fileSize) }) : null,
+            status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-destructive", children: "\u4E0A\u4F20\u5931\u8D25" }) : null
+          ] }),
+          status === "uploading" && item.progress !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "attachment-progress", className: "mt-1 ml-5 h-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-full bg-primary transition-[width]", style: { width: `${item.progress}%` } }) }) : null
+        ]
+      },
+      key
+    );
+  }) });
+}
+
+// src/components/Bubble/index.tsx
+var import_ui = require("@pactor-app/ui/ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Bubble({ align = "start", variant = "muted", className, style, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui.Bubble, { variant, align, className, style, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui.BubbleContent, { children }) });
+}
+
+// src/components/ChatMessage/index.tsx
+var import_components13 = require("@pactor-app/ui/components");
+var import_components14 = require("@pactor-app/ui/components");
+var import_components15 = require("@pactor-app/ui/components");
+
+// src/components/Sender/index.tsx
+var import_components9 = require("@pactor-app/ui/components");
+var import_components10 = require("@pactor-app/ui/components");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Sender({ name, avatar, avatarText, icon, hideAvatar = false, role, time, align = "start", className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-slot": "sender",
+      className: cn("flex items-center gap-2", align === "end" && "flex-row-reverse", className),
+      style,
+      children: [
+        hideAvatar ? null : icon && !avatar ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            "data-slot": "sender-icon",
+            className: "flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components10.Icon, { name: icon, size: "sm" })
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_components9.Avatar, { src: avatar, fallback: avatarText ?? name?.slice(0, 1) ?? "?", className: "size-7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex min-w-0 items-baseline gap-1.5", align === "end" && "flex-row-reverse"), children: [
+          name ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-slot": "sender-name", className: "truncate text-sm font-medium", children: name }) : null,
+          role ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-slot": "sender-role", className: "shrink-0 text-xs text-muted-foreground", children: role }) : null,
+          time ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-slot": "sender-time", className: "shrink-0 text-xs text-muted-foreground", children: time }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/StreamingText/index.tsx
+var import_react3 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function StreamingText({ content = "", streaming, typing, speed = 2, className, style }) {
+  const [revealed, setRevealed] = (0, import_react3.useState)(typing ? 0 : content.length);
+  (0, import_react3.useEffect)(() => {
+    if (!typing) {
+      setRevealed(content.length);
+      return;
+    }
+    setRevealed(0);
+    const timer = window.setInterval(() => {
+      setRevealed((value) => {
+        if (value >= content.length) {
+          window.clearInterval(timer);
+          return value;
+        }
+        return Math.min(content.length, value + speed);
+      });
+    }, 24);
+    return () => window.clearInterval(timer);
+  }, [content, typing, speed]);
+  const typingDone = !typing || revealed >= content.length;
+  const showCursor = streaming || typing && !typingDone;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { "data-slot": "streaming-text", className: cn("whitespace-pre-wrap", className), style, children: [
+    typing ? content.slice(0, revealed) : content,
+    showCursor ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        "data-slot": "streaming-text-cursor",
+        "aria-hidden": "true",
+        className: "ml-0.5 inline-block animate-pulse text-primary motion-reduce:animate-none",
+        children: "\u258D"
+      }
+    ) : null
+  ] });
+}
+
+// src/components/Thinking/index.tsx
+var import_react4 = require("react");
+var import_components11 = require("@pactor-app/ui/components");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Thinking({
+  content,
+  status = "thinking",
+  title,
+  expanded,
+  defaultExpanded,
+  onToggle,
+  className,
+  style
+}) {
+  const [innerExpanded, setInnerExpanded] = (0, import_react4.useState)(defaultExpanded ?? status === "thinking");
+  const isExpanded = expanded ?? innerExpanded;
+  const resolvedTitle = title ?? (status === "thinking" ? "\u601D\u8003\u4E2D\u2026" : "\u601D\u8003\u5B8C\u6210");
+  const toggle = () => {
+    if (expanded === void 0) {
+      setInnerExpanded(!isExpanded);
+    }
+    onToggle?.(!isExpanded);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      "data-slot": "thinking",
+      "data-status": status,
+      className: cn("w-full", className),
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-slot": "thinking-trigger",
+            "aria-expanded": isExpanded,
+            className: "flex w-full cursor-pointer items-center gap-2 py-1 text-left text-sm",
+            onClick: toggle,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-muted-foreground", status === "thinking" && "animate-pulse motion-reduce:animate-none"), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components11.Icon, { name: "brain", size: "sm" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-slot": "thinking-title", className: "text-muted-foreground", children: resolvedTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_components11.Icon, { name: isExpanded ? "chevron-down" : "chevron-right", size: "sm" }) })
+            ]
+          }
+        ),
+        isExpanded && content ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            "data-slot": "thinking-content",
+            className: "py-1 pl-6 text-sm whitespace-pre-wrap text-muted-foreground",
+            children: content
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/ToolCall/index.tsx
+var import_react5 = require("react");
+var import_components12 = require("@pactor-app/ui/components");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var statusIcon = {
+  running: { icon: "loader-circle", className: "text-info", spin: true },
+  done: { icon: "circle-check", className: "text-success" },
+  error: { icon: "circle-x", className: "text-destructive" }
+};
+function renderValue(value) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function ToolCall({ name, params, status = "done", result, durationMs, defaultExpanded, className, style }) {
+  const [expanded, setExpanded] = (0, import_react5.useState)(defaultExpanded ?? status === "running");
+  const meta = statusIcon[status];
+  const paramsText = renderValue(params);
+  const hasDetail = Boolean(paramsText) || Boolean(result);
+  const headerInner = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components12.Icon, { name: "terminal", size: "sm" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-slot": "tool-call-name", className: "min-w-0 truncate font-medium", children: name ?? "\u5DE5\u5177\u8C03\u7528" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("shrink-0", meta.className, meta.spin && "animate-spin motion-reduce:animate-none"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components12.Icon, { name: meta.icon, size: "sm" }) }),
+    durationMs !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+      (durationMs / 1e3).toFixed(1),
+      "s"
+    ] }) : null,
+    hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "shrink-0 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_components12.Icon, { name: expanded ? "chevron-down" : "chevron-right", size: "sm" }) }) : null
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      "data-slot": "tool-call",
+      "data-status": status,
+      className: cn("w-full", className),
+      style,
+      children: [
+        hasDetail ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-slot": "tool-call-trigger",
+            "aria-expanded": expanded,
+            className: "flex w-full cursor-pointer items-center gap-2 py-1 text-left text-sm",
+            onClick: () => setExpanded((value) => !value),
+            children: headerInner
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            "data-slot": "tool-call-trigger",
+            className: "flex w-full items-center gap-2 py-1 text-left text-sm",
+            children: headerInner
+          }
+        ),
+        hasDetail && expanded ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "data-slot": "tool-call-body", className: "flex flex-col gap-2 py-1 pl-6", children: [
+          paramsText ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs font-medium text-muted-foreground", children: "\u53C2\u6570" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-xs font-medium text-muted-foreground", children: "\u7ED3\u679C" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { "data-slot": "tool-call-result", className: "mt-1 overflow-x-auto text-xs whitespace-pre-wrap text-muted-foreground", children: result })
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ChatMessage/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function PartView({
+  part,
+  role,
+  onOpenArtifacts
+}) {
+  if (role === "system" && (part.type === "text" || part.type === "markdown")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        "data-slot": "chat-message-system-part",
+        className: "w-full text-center text-xs text-muted-foreground",
+        children: part.type === "markdown" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components14.Markdown, { content: part.content }) : part.content
+      }
+    );
+  }
+  switch (part.type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Bubble, { align: role === "user" ? "end" : "start", variant: role === "user" ? "default" : "muted", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm whitespace-pre-wrap", children: part.content }) });
+    case "markdown":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Bubble, { align: role === "user" ? "end" : "start", variant: role === "user" ? "default" : "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components14.Markdown, { content: part.content }) });
+    case "thinking":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Thinking, { content: part.content, status: part.status ?? "done" });
+    case "tool-call":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolCall, { name: part.name, params: part.params, status: part.status ?? "done", result: part.result });
+    case "tool-result":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-slot": "chat-message-status", className: "flex w-fit items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components13.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__ */ (0, import_jsx_runtime10.jsxs)(
+        "button",
+        {
+          type: "button",
+          "data-slot": "chat-message-artifacts",
+          className: cn(artifactsClass, "cursor-pointer hover:text-foreground"),
+          onClick: onOpenArtifacts,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components13.Icon, { name: "package", size: "sm" }),
+            label,
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components13.Icon, { name: "chevron-right", size: 12 })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-slot": "chat-message-artifacts", className: artifactsClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components13.Icon, { name: "package", size: "sm" }),
+        label
+      ] });
+    }
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-slot": "chat-message-error", className: "flex items-center gap-1.5 text-sm text-destructive", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_components13.Icon, { name: "circle-alert", size: "sm" }),
+        part.message
+      ] });
+    default:
+      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 = false,
+  actions = [],
+  onAction,
+  onOpenArtifacts,
+  className,
+  style
+}) {
+  const isUser = role === "user";
+  const isSystem = role === "system";
+  const senderName = isUser ? "\u6211" : agent?.name ?? "\u52A9\u624B";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      "data-slot": "chat-message",
+      "data-role": role,
+      "data-status": status,
+      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 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Sender,
+          {
+            name: senderName,
+            avatarText: isUser ? void 0 : agent?.icon ? void 0 : senderName.slice(0, 1),
+            time,
+            align: isUser ? "end" : "start"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsx)(PartView, { part, role, onOpenArtifacts }, index)),
+          status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StreamingText, { content: "", streaming: true }) : null
+        ] }),
+        actions.length > 0 && (status === "completed" || status === "error") ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)(import_components15.Tooltip, { content: label, side: "top", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "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__ */ (0, import_jsx_runtime10.jsx)(import_components13.Icon, { name: iconName, size: "sm" })
+              }
+            ) }, action.name);
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "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/ChatPage/index.tsx
+var import_runtime2 = require("@pactor-app/runtime");
+var import_react10 = require("react");
+var import_ui2 = require("@pactor-app/ui/ui");
+var import_components22 = require("@pactor-app/ui/components");
+var import_components23 = require("@pactor-app/ui/components");
+var import_components24 = require("@pactor-app/ui/components");
+var import_components25 = require("@pactor-app/ui/components");
+var import_components26 = require("@pactor-app/ui/components");
+
+// src/components/Composer/index.tsx
+var import_react7 = require("react");
+var import_components17 = require("@pactor-app/ui/components");
+var import_components18 = require("@pactor-app/ui/components");
+
+// src/components/Composer/mention-input.tsx
+var import_react6 = require("react");
+var import_server = require("react-dom/server");
+var import_components16 = require("@pactor-app/ui/components");
+var import_jsx_runtime11 = require("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 = (0, import_react6.forwardRef)(
+  function MentionInput2({
+    value,
+    placeholder,
+    disabled,
+    sources,
+    chips,
+    onChipsChange,
+    onChange,
+    onSubmit,
+    className,
+    style
+  }, ref) {
+    const fieldRef = (0, import_react6.useRef)(null);
+    const [menu, setMenu] = (0, import_react6.useState)(null);
+    const [empty, setEmpty] = (0, import_react6.useState)(true);
+    const suppressSyncRef = (0, import_react6.useRef)(false);
+    const composingRef = (0, import_react6.useRef)(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 = (0, import_server.renderToStaticMarkup)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_components16.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();
+    };
+    (0, import_react6.useImperativeHandle)(ref, () => ({
+      insertChip: (item, source) => {
+        fieldRef.current?.focus();
+        insertChipElement(item, source);
+      },
+      focus: () => fieldRef.current?.focus()
+    }));
+    (0, import_react6.useEffect)(() => {
+      const field = fieldRef.current;
+      if (field && value === "" && serializeNode(field).trim() !== "") {
+        suppressSyncRef.current = true;
+        field.innerHTML = "";
+        setEmpty(true);
+        setMenu(null);
+        suppressSyncRef.current = false;
+      }
+    }, [value]);
+    (0, import_react6.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "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__ */ (0, import_jsx_runtime11.jsx)("span", { className: "pointer-events-none absolute top-3 left-4 text-sm text-muted-foreground", children: placeholder }) : null,
+      menu ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: "fixed inset-0 z-40",
+            onMouseDown: (event) => {
+              event.preventDefault();
+              closeMenu();
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-2 py-1 text-xs text-muted-foreground", children: menu.source.label }),
+              menuItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-2 py-2 text-xs text-muted-foreground", children: "\u65E0\u5339\u914D\u9879" }) : menuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "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__ */ (0, import_jsx_runtime11.jsx)(import_components16.Icon, { name: chipIcon(item, menu.source), size: "sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.label })
+                  ]
+                },
+                item.id
+              ))
+            ]
+          }
+        )
+      ] }) : null
+    ] });
+  }
+);
+
+// src/components/Composer/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var toolButtonClass = "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 detectMention(text, caret) {
+  const beforeCaret = text.slice(0, caret);
+  const match = /(?:^|\s)@([^\s@]*)$/.exec(beforeCaret);
+  return match ? match[1] : null;
+}
+function Composer({
+  value,
+  placeholder,
+  disabled,
+  loading,
+  streaming = false,
+  onStop,
+  rows,
+  attachments = [],
+  onRemoveAttachment,
+  onRetryAttachment,
+  onAttachmentClick,
+  onAttachFiles,
+  onChange,
+  onSubmit,
+  models,
+  model,
+  onModelChange,
+  contexts,
+  contextItems,
+  onContextItemsChange,
+  onMentionTrigger,
+  onPlusMenu,
+  toolbarStart,
+  toolbarEnd,
+  hideToolbar = false,
+  footer,
+  className,
+  style
+}) {
+  const renderer = (0, import_components17.useOptionalRenderer)();
+  const textControlled = value !== void 0;
+  const [innerText, setInnerText] = (0, import_react7.useState)("");
+  const text = textControlled ? value : innerText;
+  const [dragOver, setDragOver] = (0, import_react7.useState)(false);
+  const [plusOpen, setPlusOpen] = (0, import_react7.useState)(false);
+  const [modelOpen, setModelOpen] = (0, import_react7.useState)(false);
+  const fileInputRef = (0, import_react7.useRef)(null);
+  const mentionRef = (0, import_react7.useRef)(null);
+  const sources = (contexts ?? []).filter(
+    // 调用方接管 '@' 提及时对应源不启用内建行内提及（回调优先）
+    (source) => !(onMentionTrigger !== void 0 && source.trigger === "@")
+  );
+  const rich = sources.length > 0;
+  const plusSources = sources.filter((s) => s.trigger === "+");
+  const plusEnabled = plusSources.length > 0 || onPlusMenu !== void 0;
+  const modelEnabled = models !== void 0 && models.length > 0;
+  const currentModel = models?.find((m) => m.value === model) ?? models?.[0];
+  const [innerChips, setInnerChips] = (0, import_react7.useState)([]);
+  const chipsControlled = contextItems !== void 0;
+  const chips = chipsControlled ? contextItems : innerChips;
+  const handleChipsChange = (next) => {
+    if (!chipsControlled) {
+      setInnerChips(next);
+    }
+    onContextItemsChange?.(next);
+  };
+  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) {
+        handleChipsChange([...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 renderSlot = (slot) => (0, import_react7.isValidElement)(slot) || typeof slot !== "object" || slot === null ? slot : renderer?.renderChildren([slot]) ?? null;
+  const builtinToolbarStart = plusEnabled || onAttachFiles ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    plusEnabled ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\u6DFB\u52A0\u4E0A\u4E0B\u6587",
+        title: "\u6DFB\u52A0\u4E0A\u4E0B\u6587",
+        className: toolButtonClass,
+        onClick: (event) => {
+          if (onPlusMenu) {
+            onPlusMenu(event.currentTarget.getBoundingClientRect());
+            return;
+          }
+          setPlusOpen((prev) => !prev);
+          setModelOpen(false);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components18.Icon, { name: "plus", size: "sm" })
+      }
+    ) : null,
+    onAttachFiles ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\u6DFB\u52A0\u9644\u4EF6",
+        title: "\u6DFB\u52A0\u9644\u4EF6",
+        className: toolButtonClass,
+        onClick: () => fileInputRef.current?.click(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components18.Icon, { name: "paperclip", size: "sm" })
+      }
+    ) : null
+  ] }) : void 0;
+  const builtinToolbarEnd = modelEnabled ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "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__ */ (0, import_jsx_runtime12.jsx)(import_components18.Icon, { name: "chevrons-up-down", size: 12 })
+      ]
+    }
+  ) : void 0;
+  const toolbarStartSlot = toolbarStart !== void 0 && toolbarStart !== null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    renderSlot(toolbarStart),
+    builtinToolbarStart
+  ] }) : builtinToolbarStart;
+  const toolbarEndSlot = toolbarEnd !== void 0 && toolbarEnd !== null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    builtinToolbarEnd,
+    renderSlot(toolbarEnd)
+  ] }) : builtinToolbarEnd;
+  const handleBubbleChange = (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLTextAreaElement)) {
+      return;
+    }
+    const query = detectMention(
+      target.value,
+      target.selectionStart ?? target.value.length
+    );
+    if (query !== null) {
+      onMentionTrigger?.(query, target.getBoundingClientRect());
+    }
+  };
+  const activePopover = plusOpen ? "plus" : modelOpen ? "model" : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "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);
+        }
+      },
+      onChange: onMentionTrigger !== void 0 && !rich ? handleBubbleChange : void 0,
+      children: [
+        attachments.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Attachment,
+          {
+            items: attachments,
+            onRemove: onRemoveAttachment,
+            onRetry: onRetryAttachment,
+            onClick: onAttachmentClick
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(dragOver && "rounded-xl ring-2 ring-ring/50"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_components17.ChatInput,
+          {
+            value: text,
+            placeholder,
+            disabled: disabled || loading,
+            streaming,
+            onStop,
+            rows,
+            hideSend: hideToolbar,
+            toolbarStart: hideToolbar ? void 0 : toolbarStartSlot,
+            toolbarEnd: hideToolbar ? void 0 : toolbarEndSlot,
+            footer,
+            field: rich ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              MentionInput,
+              {
+                ref: mentionRef,
+                value: text,
+                placeholder,
+                disabled: disabled || loading,
+                sources,
+                chips,
+                onChipsChange: handleChipsChange,
+                onChange: handleChange,
+                onSubmit: handleSubmit
+              }
+            ) : void 0,
+            onChange: handleChange,
+            onSubmit: handleSubmit
+          }
+        ) }),
+        onAttachFiles ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            hidden: true,
+            onChange: (event) => {
+              emitFiles(Array.from(event.target.files ?? []));
+              event.target.value = "";
+            }
+          }
+        ) : null,
+        activePopover !== null ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fixed inset-0 z-40", onClick: closePopovers }),
+          activePopover === "model" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-slot": "composer-model-popover", className: cn(popoverPanelClass, "right-0 left-auto w-48"), role: "listbox", children: models.map((option) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": option.value === currentModel?.value,
+              className: popoverItemClass,
+              onClick: () => {
+                onModelChange?.(option.value);
+                closePopovers();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+                option.value === currentModel?.value ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components18.Icon, { name: "check", size: 14 }) : null
+              ]
+            },
+            option.value
+          )) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-slot": "composer-context-popover", className: popoverPanelClass, role: "listbox", children: plusSources.map(
+            (source) => source.items.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-2 py-1 text-xs text-muted-foreground", children: source.label }),
+              source.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: popoverItemClass,
+                  onClick: () => selectContext(item, source),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_components18.Icon, { name: item.icon ?? source.icon ?? "file-text", size: "sm" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.label })
+                  ]
+                },
+                item.id
+              ))
+            ] }, source.trigger)
+          ) })
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ConversationList/index.tsx
+var import_react8 = require("react");
+var import_components19 = require("@pactor-app/ui/components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ConversationList({ items = [], activeId, searchable, onSelect, onDelete, className, style }) {
+  const [innerActive, setInnerActive] = (0, import_react8.useState)();
+  const [keyword, setKeyword] = (0, import_react8.useState)("");
+  const active = activeId ?? innerActive;
+  const filtered = (0, import_react8.useMemo)(() => {
+    const query = keyword.trim().toLowerCase();
+    if (!query) return items;
+    return items.filter(
+      (item) => item.title.toLowerCase().includes(query) || (item.description ?? "").toLowerCase().includes(query)
+    );
+  }, [items, keyword]);
+  const select = (id) => {
+    if (activeId === void 0) {
+      setInnerActive(id);
+    }
+    onSelect?.(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-slot": "conversation-list", className: cn("flex w-full flex-col gap-1", className), style, children: [
+    searchable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "absolute top-1/2 left-2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components19.Icon, { name: "search", size: "sm" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "input",
+        {
+          "data-slot": "conversation-list-search",
+          value: keyword,
+          placeholder: "\u641C\u7D22\u4F1A\u8BDD",
+          className: "h-8 w-full rounded-md border border-border bg-background pr-2 pl-7 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          onChange: (event) => setKeyword(event.target.value)
+        }
+      )
+    ] }) : null,
+    filtered.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        "data-slot": "conversation-list-item",
+        "data-active": item.id === active || void 0,
+        className: cn(
+          "group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent",
+          item.id === active && "bg-accent"
+        ),
+        onClick: () => select(item.id),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("truncate text-sm", item.id === active && "font-medium"), children: item.title }),
+            item.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "truncate text-xs text-muted-foreground", children: item.description }) : null
+          ] }),
+          item.time ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.time }) : null,
+          onDelete ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              type: "button",
+              "data-slot": "conversation-list-delete",
+              "aria-label": `\u5220\u9664 ${item.title}`,
+              className: "shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-destructive",
+              onClick: (event) => {
+                event.stopPropagation();
+                onDelete(item.id);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_components19.Icon, { name: "trash-2", size: "sm" })
+            }
+          ) : null
+        ]
+      },
+      item.id
+    )),
+    filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "px-2 py-4 text-center text-sm text-muted-foreground", children: "\u65E0\u5339\u914D\u4F1A\u8BDD" }) : null
+  ] });
+}
+
+// src/components/MessageList/index.tsx
+var import_react9 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function MessageList({ messages = [], autoScroll = true, onAction, onOpenArtifacts, className, style }) {
+  const listRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!autoScroll) return;
+    const el = listRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [messages, autoScroll]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "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__ */ (0, import_jsx_runtime14.jsx)(
+        ChatMessage,
+        {
+          ...message,
+          onAction: (action) => onAction?.({ id: message.id, action }),
+          onOpenArtifacts: onOpenArtifacts ? () => onOpenArtifacts({ id: message.id }) : void 0
+        },
+        message.id ?? index
+      ))
+    }
+  );
+}
+
+// src/components/Welcome/index.tsx
+var import_components21 = require("@pactor-app/ui/components");
+
+// src/components/Prompt/index.tsx
+var import_components20 = require("@pactor-app/ui/components");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Prompt({ title, description, icon, value, disabled, onSelect, className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "prompt",
+      disabled,
+      className: cn(
+        "flex items-start gap-2.5 rounded-md border border-border p-3 text-left transition-colors hover:border-primary disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      style,
+      onClick: () => onSelect?.(value ?? title ?? ""),
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "mt-0.5 shrink-0 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_components20.Icon, { name: icon, size: "sm" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "data-slot": "prompt-title", className: "block text-sm font-medium", children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "data-slot": "prompt-description", className: "mt-0.5 block text-xs text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Welcome/index.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Welcome({
+  title = "\u6709\u4EC0\u4E48\u53EF\u4EE5\u5E2E\u4F60\uFF1F",
+  description,
+  icon = "chat",
+  prompts = [],
+  onSelect,
+  titleClassName,
+  descriptionClassName,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      "data-slot": "welcome",
+      className: cn("flex w-full flex-col items-center gap-4 py-10 text-center", className),
+      style,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { "data-slot": "welcome-icon", className: "text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_components21.Icon, { name: icon, size: "lg" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "data-slot": "welcome-title", className: cn("text-xl font-semibold", titleClassName), children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { "data-slot": "welcome-description", className: cn("mt-1 text-sm text-muted-foreground", descriptionClassName), children: description }) : null
+        ] }),
+        prompts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(
+          Prompt,
+          {
+            title: item.title,
+            description: item.description,
+            icon: item.icon,
+            value: item.value,
+            onSelect
+          },
+          `${item.title}-${index}`
+        )) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/ChatPage/index.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function ChatPage({
+  brand,
+  menuItems = [],
+  activeMenuKey,
+  railItems = [],
+  railFooterItems = [],
+  menuAction,
+  onMenuSelect,
+  onMenuAction,
+  conversationSectionTitle,
+  conversationSectionCollapsed,
+  defaultConversationSectionCollapsed = false,
+  onConversationSectionToggle,
+  conversations = [],
+  activeConversationId,
+  onSelectConversation,
+  onDeleteConversation,
+  moreLabel,
+  onMore,
+  footerSectionTitle,
+  footerItems = [],
+  footerSectionCollapsed,
+  defaultFooterSectionCollapsed = false,
+  onFooterSectionToggle,
+  conversationTitle,
+  conversationHeaderAction,
+  onConversationHeaderAction,
+  conversationRailItems = [],
+  hideArtifactRailItem = false,
+  activeConversationRailKey,
+  onConversationRailChange,
+  messages = [],
+  sending,
+  composerPlaceholder,
+  welcome,
+  onSend,
+  onMessageAction,
+  models,
+  model,
+  onModelChange,
+  contexts,
+  contextItems,
+  onContextItemsChange,
+  attachments,
+  onAttachFiles,
+  onRemoveAttachment,
+  onRetryAttachment,
+  composerFooter,
+  composerBottom,
+  artifactTitle = "\u4EA7\u7269",
+  artifacts = [],
+  activeArtifactId,
+  onSelectArtifact,
+  artifactEmptyText = "\u6682\u65E0\u4EA7\u7269\uFF0C\u53D1\u9001\u6D88\u606F\u540E\u751F\u6210\u7684\u6587\u4EF6\u5C06\u5C55\u793A\u5728\u8FD9\u91CC",
+  safeRegistry,
+  user,
+  artifactViewers,
+  onDownloadArtifact,
+  artifactOpen,
+  defaultArtifactOpen = false,
+  onArtifactOpenChange,
+  content,
+  className,
+  style
+}) {
+  const controlled = artifactOpen !== void 0;
+  const [innerOpen, setInnerOpen] = (0, import_react10.useState)(defaultArtifactOpen);
+  const open = controlled ? artifactOpen === true : innerOpen;
+  const setOpen = (next) => {
+    if (!controlled) setInnerOpen(next);
+    onArtifactOpenChange?.(next);
+  };
+  const railControlled = activeConversationRailKey !== void 0;
+  const [activeRailInner, setActiveRailInner] = (0, import_react10.useState)(null);
+  const activeRailKey = railControlled ? activeConversationRailKey : activeRailInner;
+  const setActiveRailKey = (next) => {
+    if (!railControlled) setActiveRailInner(next);
+    onConversationRailChange?.(next);
+  };
+  const visibleRailItems = conversationRailItems.filter((item) => item.hidden !== true);
+  const activeRailItem = visibleRailItems.find(
+    (item) => item.key === activeRailKey
+  );
+  const activePanelItem = activeRailItem?.display === "panel" && activeRailItem.content !== void 0 ? activeRailItem : void 0;
+  const activePopoverItem = activeRailItem !== void 0 && activeRailItem.display !== "panel" && activeRailItem.content !== void 0 ? activeRailItem : void 0;
+  const toggleRailItem = (item) => {
+    const next = activeRailKey === item.key ? null : item.key;
+    if (next !== null && item.display === "panel") {
+      setOpen(false);
+    }
+    setActiveRailKey(next);
+  };
+  const toggleArtifact = () => {
+    if (!open && activePanelItem) {
+      setActiveRailKey(null);
+    }
+    setOpen(!open);
+  };
+  (0, import_react10.useEffect)(() => {
+    if (!activePopoverItem) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setActiveRailKey(null);
+    };
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (target.closest("[data-slot=chat-page-rail-popover]") || target.closest("[data-slot=chat-page-conv-rail]")) {
+        return;
+      }
+      setActiveRailKey(null);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onPointerDown);
+    };
+  });
+  const { renderChildren } = (0, import_runtime2.useRenderer)();
+  const renderSlot = (slot) => (0, import_react10.isValidElement)(slot) || typeof slot !== "object" || slot === null ? slot : renderChildren([slot]);
+  const convCollControlled = conversationSectionCollapsed !== void 0;
+  const [convCollapsedInner, setConvCollapsedInner] = (0, import_react10.useState)(
+    defaultConversationSectionCollapsed
+  );
+  const convCollapsed = convCollControlled ? conversationSectionCollapsed === true : convCollapsedInner;
+  const toggleConvSection = () => {
+    const next = !convCollapsed;
+    if (!convCollControlled) setConvCollapsedInner(next);
+    onConversationSectionToggle?.(next);
+  };
+  const footerCollControlled = footerSectionCollapsed !== void 0;
+  const [footerCollapsedInner, setFooterCollapsedInner] = (0, import_react10.useState)(
+    defaultFooterSectionCollapsed
+  );
+  const footerCollapsed = footerCollControlled ? footerSectionCollapsed === true : footerCollapsedInner;
+  const toggleFooterSection = () => {
+    const next = !footerCollapsed;
+    if (!footerCollControlled) setFooterCollapsedInner(next);
+    onFooterSectionToggle?.(next);
+  };
+  const railVisible = railItems.length > 0 || railFooterItems.length > 0;
+  const railButton = (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components26.Tooltip, { content: item.label, side: "right", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_components22.Button,
+    {
+      icon: item.icon,
+      variant: "text",
+      onClick: () => onMenuSelect?.(item.key)
+    }
+  ) }, item.key);
+  const convRailButton = (item, active, onClick) => {
+    const button = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_components22.Button,
+      {
+        icon: item.icon,
+        variant: "text",
+        className: cn(active ? "bg-accent text-accent-foreground" : void 0, "px-2"),
+        onClick
+      }
+    );
+    return item.label !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components26.Tooltip, { content: item.label, side: "left", children: button }, item.key) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: button }, item.key);
+  };
+  const convRailVisible = !hideArtifactRailItem || visibleRailItems.length > 0;
+  const convRail = convRailVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      "data-slot": "chat-page-conv-rail",
+      className: "relative flex w-(--pactor-chat-rail-width) shrink-0 flex-col items-center gap-1 px-1 py-2",
+      children: [
+        !hideArtifactRailItem ? convRailButton(
+          {
+            key: "artifact",
+            icon: open ? "panel-right-close" : "package",
+            label: open ? "\u6536\u8D77\u4EA7\u7269\u533A" : artifactTitle
+          },
+          open,
+          toggleArtifact
+        ) : null,
+        visibleRailItems.map(
+          (item) => convRailButton(item, activeRailKey === item.key, () => toggleRailItem(item))
+        ),
+        activePopoverItem ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            "data-slot": "chat-page-rail-popover",
+            className: "absolute right-full top-0 z-10 mr-2 overflow-auto rounded-lg border border-border bg-popover shadow-md",
+            style: {
+              width: "var(--pactor-chat-rail-popover-width)",
+              maxWidth: "calc(100cqw - 2rem)",
+              maxHeight: "calc(100% - 1rem)"
+            },
+            children: renderSlot(activePopoverItem.content)
+          }
+        ) : null
+      ]
+    }
+  ) : null;
+  const chatArea = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { "data-slot": "chat-page-conversation", className: "flex h-full min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        "data-slot": "chat-page-conversation-header",
+        className: "flex shrink-0 items-center justify-between border-b border-border px-4 py-2.5",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components25.Text, { text: conversationTitle, strong: true }),
+          conversationHeaderAction ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components26.Tooltip, { content: conversationHeaderAction.tooltip ?? conversationHeaderAction.label, side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_components22.Button,
+            {
+              text: conversationHeaderAction.label,
+              icon: conversationHeaderAction.icon,
+              variant: "text",
+              onClick: () => onConversationHeaderAction?.()
+            }
+          ) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "div",
+        {
+          "data-slot": "chat-page-conversation-body",
+          className: "mx-auto flex min-h-0 w-[61.8cqw] max-w-full flex-col",
+          children: [
+            messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              Welcome,
+              {
+                title: welcome?.title,
+                description: welcome?.description,
+                prompts: welcome?.prompts,
+                style: { flex: 1 },
+                onSelect: (value) => onSend?.(value)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              MessageList,
+              {
+                messages,
+                className: "scrollbar-subtle",
+                style: { flex: 1, minHeight: 0, padding: 16 },
+                onAction: onMessageAction,
+                onOpenArtifacts: () => setOpen(true)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              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__ */ (0, import_jsx_runtime17.jsx)("div", { "data-slot": "chat-page-composer-bottom", className: "shrink-0 px-4 pb-2 text-center", children: renderSlot(composerBottom) }) : null
+          ]
+        }
+      ),
+      convRail
+    ] })
+  ] });
+  const activeArtifact = artifacts.find((item) => item.id === activeArtifactId) ?? (activeArtifactId === void 0 || activeArtifactId === "" ? artifacts[artifacts.length - 1] : void 0);
+  const artifactPanel = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      "data-slot": "chat-page-artifact",
+      className: "flex h-full min-w-0 flex-col border-l border-border bg-muted",
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        ArtifactPanel,
+        {
+          artifact: activeArtifact,
+          artifacts,
+          activeArtifactId,
+          title: artifactTitle,
+          emptyText: artifactEmptyText,
+          safeRegistry,
+          user,
+          artifactViewers,
+          onSelectArtifact: (id) => onSelectArtifact?.(id),
+          onDownload: onDownloadArtifact,
+          onClose: () => setOpen(false)
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      "data-slot": "chat-page",
+      className: cn("flex w-full overflow-hidden", className),
+      style: { height: "100vh", ...style },
+      children: [
+        railVisible ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "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__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-1" }),
+              railFooterItems.map(railButton)
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "div",
+          {
+            "data-slot": "chat-page-menu",
+            className: "flex h-full w-[250px] shrink-0 flex-col gap-2 overflow-hidden border-r border-border px-2 py-3",
+            children: [
+              brand ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex shrink-0 items-center justify-between px-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components25.Text, { text: brand.title, strong: true, size: "large" }),
+                  brand.version !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components25.Text, { text: brand.version, type: "secondary", size: "small" }) : null
+                ] }),
+                menuAction ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_components22.Button,
+                  {
+                    text: menuAction.label,
+                    icon: menuAction.icon,
+                    size: "small",
+                    onClick: () => onMenuAction?.()
+                  }
+                ) : null
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "scrollbar-subtle max-h-[40%] min-h-0 shrink-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_components24.Menu,
+                {
+                  items: menuItems,
+                  selectedKey: activeMenuKey,
+                  onSelect: (key) => onMenuSelect?.(key)
+                }
+              ) }),
+              conversationSectionTitle !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "chat-page-section-toggle",
+                  "aria-expanded": !convCollapsed,
+                  className: "flex w-full shrink-0 cursor-pointer items-center justify-between px-2 pt-2",
+                  onClick: toggleConvSection,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      import_components25.Text,
+                      {
+                        text: `${conversationSectionTitle} (${conversations.length})`,
+                        type: "secondary",
+                        className: "text-sm",
+                        strong: true
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components23.Icon, { name: convCollapsed ? "chevron-right" : "chevron-down", size: 14 })
+                  ]
+                }
+              ) : null,
+              !convCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { "data-slot": "chat-page-section-body", className: "scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-y-auto", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  ConversationList,
+                  {
+                    items: conversations,
+                    activeId: activeConversationId,
+                    onSelect: (id) => onSelectConversation?.(id),
+                    onDelete: (id) => onDeleteConversation?.(id)
+                  }
+                ),
+                moreLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components22.Button, { text: `${moreLabel} >>`, variant: "link", size: "small", onClick: () => onMore?.() }) }) : null
+              ] }) : null,
+              footerSectionTitle !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "data-slot": "chat-page-section-toggle",
+                  "aria-expanded": !footerCollapsed,
+                  className: "flex w-full shrink-0 cursor-pointer items-center justify-between px-2 pt-2",
+                  onClick: toggleFooterSection,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components25.Text, { text: footerSectionTitle, type: "secondary", className: "text-sm", strong: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_components23.Icon, { name: footerCollapsed ? "chevron-right" : "chevron-down", size: 14 })
+                  ]
+                }
+              ) : null,
+              !footerCollapsed && footerItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-slot": "chat-page-section-body", className: "scrollbar-subtle min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_components24.Menu,
+                {
+                  items: footerItems,
+                  onSelect: (key) => onMenuSelect?.(key)
+                }
+              ) }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "@container h-full min-w-0 flex-1", children: content !== void 0 ? renderSlot(content) : open || activePanelItem ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui2.PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui2.Panel, { defaultSize: "62%", children: chatArea }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui2.ResizableHandle, { withHandle: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui2.Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: activePanelItem ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              "data-slot": "chat-page-rail-panel",
+              className: "flex h-full min-w-0 flex-col border-l border-border bg-muted",
+              children: renderSlot(activePanelItem.content)
+            }
+          ) : artifactPanel })
+        ] }) : chatArea })
+      ]
+    }
+  );
+}
+
+// src/components/Citation/index.tsx
+var import_ui3 = require("@pactor-app/ui/ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Citation({ items = [], start = 1, className, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "data-slot": "citation", className: cn("inline-flex gap-1 align-super", className), style, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui3.HoverCard, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_ui3.HoverCardTrigger,
+      {
+        "data-slot": "citation-marker",
+        className: "cursor-pointer rounded-sm border border-border px-1 text-xs leading-4 text-primary hover:bg-accent",
+        children: [
+          "[",
+          start + index,
+          "]"
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui3.HoverCardContent, { "data-slot": "citation-card", className: "w-72", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-sm font-medium", children: item.title }),
+      item.snippet ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-1 line-clamp-3 text-xs text-muted-foreground", children: item.snippet }) : null,
+      item.url ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "a",
+        {
+          href: item.url,
+          target: "_blank",
+          rel: "noreferrer",
+          className: "mt-1 block truncate text-xs text-primary hover:underline",
+          children: item.url
+        }
+      ) : null
+    ] })
+  ] }, `${item.title}-${index}`)) });
+}
+
+// src/components/StepsPanel/index.tsx
+var import_components27 = require("@pactor-app/ui/components");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function StepsPanel({
+  title = "\u6267\u884C\u6B65\u9AA4",
+  steps = [],
+  emptyText = "\u5F53\u524D\u4F1A\u8BDD\u6682\u65E0\u6267\u884C\u6B65\u9AA4",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      "data-slot": "steps-panel",
+      className: cn("px-3.5 py-3 text-foreground", className),
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mb-1 text-[13px] font-semibold", children: title }),
+        steps.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "py-4 text-center text-[13px] text-muted-foreground", children: emptyText }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ol", { children: steps.map((step, index) => {
+          const status = step.status ?? "pending";
+          return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            "li",
+            {
+              "data-status": status,
+              className: cn(
+                "relative flex gap-2 py-1.5",
+                // 步骤之间的连接线（对齐 16px 图标中心）
+                'not-last:before:absolute not-last:before:left-[7.5px] not-last:before:top-7 not-last:before:-bottom-1 not-last:before:w-px not-last:before:bg-border not-last:before:content-[""]'
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "flex h-5 w-4 shrink-0 items-center justify-center",
+                      status !== "pending" && "text-primary"
+                    ),
+                    children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_components27.Icon, { name: "check-circle", size: 16 }) : status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      import_components27.Icon,
+                      {
+                        name: "loading",
+                        size: 16,
+                        className: "animate-spin motion-reduce:animate-none"
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-1.5 rounded-full bg-muted-foreground/50" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    "div",
+                    {
+                      className: cn(
+                        "text-[13px] leading-5",
+                        status === "pending" && "text-muted-foreground"
+                      ),
+                      children: step.title
+                    }
+                  ),
+                  step.description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-0.5 text-xs leading-[18px] text-muted-foreground", children: step.description }) : null
+                ] }),
+                step.duration ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "shrink-0 text-xs leading-5 text-muted-foreground", children: step.duration }) : null
+              ]
+            },
+            `${step.title}-${index}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/Suggestion/index.tsx
+var import_components28 = require("@pactor-app/ui/components");
+var import_jsx_runtime20 = require("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__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "suggestion",
+      className: cn("flex flex-wrap gap-2", justify === "center" && "justify-center", className),
+      style,
+      children: items.map((item, index) => {
+        const { label, value, icon } = normalize(item);
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "button",
+          {
+            type: "button",
+            "data-slot": "suggestion-item",
+            "data-value": value,
+            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__ */ (0, import_jsx_runtime20.jsx)(import_components28.Icon, { name: icon, size: "sm" }) : null,
+              label
+            ]
+          },
+          `${value}-${index}`
+        );
+      })
+    }
+  );
+}
+
+// src/components/index.ts
+function registerChatComponents(registry) {
+  const components = {
+    AgentStatus,
+    ArtifactPanel,
+    Attachment,
+    Bubble,
+    ChatMessage,
+    ChatPage,
+    Citation,
+    Composer,
+    ConversationList,
+    MessageList,
+    Prompt,
+    Sender,
+    StepsPanel,
+    StreamingText,
+    Suggestion,
+    Thinking,
+    ToolCall,
+    Welcome
+  };
+  for (const [type, component] of Object.entries(components)) {
+    if (!registry.has(type)) {
+      registry.register(type, component);
+    }
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentStatus,
+  ArtifactPanel,
+  Attachment,
+  Bubble,
+  ChatMessage,
+  ChatPage,
+  Citation,
+  Composer,
+  ConversationList,
+  MessageList,
+  Prompt,
+  Sender,
+  StepsPanel,
+  StreamingText,
+  Suggestion,
+  Thinking,
+  ToolCall,
+  Welcome,
+  buildArtifactBlob,
+  buildArtifactTree,
+  downloadArtifact,
+  registerChatComponents,
+  resolveArtifactFilename,
+  saveBlob
+});