@pactor-app/chat 1.1.0 → 1.3.0

package/dist/index.cjs

@@ -45,6 +45,7 @@ __export(index_exports, {
   applyChatEvent: () => applyChatEvent,
   buildChatScope: () => buildChatScope,
   collectMessageText: () => collectMessageText,
+  createChatComponentRegistry: () => createChatComponentRegistry,
   createChatId: () => createChatId,
   createChatRuntime: () => createChatRuntime,
   createChatWorkspace: () => createChatWorkspace,
@@ -499,6 +500,16 @@ function pairToolTraces(parts) {
 }
 
 // src/transport.ts
+function markCancelled(store, messageId) {
+  const message = store.getMessage(messageId);
+  if (!message) {
+    return;
+  }
+  const parts = message.parts.map(
+    (part) => "status" in part && (part.status === "streaming" || part.status === "pending") ? { ...part, status: "ready" } : part
+  );
+  store.updateMessage(messageId, { status: "cancelled", parts });
+}
 async function runChatTurn(store, transport, input, options = {}) {
   const userMessageId = options.userMessageId ?? createChatId("msg");
   const assistantMessageId = options.assistantMessageId ?? createChatId("msg");
@@ -521,15 +532,15 @@ async function runChatTurn(store, transport, input, options = {}) {
     createdAt: Date.now()
   });
   try {
-    for await (const event of transport.send(input)) {
+    for await (const event of transport.send(input, { signal: options.signal })) {
       if (options.signal?.aborted) {
-        store.updateMessage(assistantMessageId, { status: "cancelled" });
+        markCancelled(store, assistantMessageId);
         return { userMessageId, assistantMessageId };
       }
       applyChatEvent(store, { ...event, messageId: assistantMessageId });
     }
     if (options.signal?.aborted) {
-      store.updateMessage(assistantMessageId, { status: "cancelled" });
+      markCancelled(store, assistantMessageId);
       return { userMessageId, assistantMessageId };
     }
     const message = store.getMessage(assistantMessageId);
@@ -857,7 +868,7 @@ function useChatAutoScroll({
 
 // src/chat-composition.tsx
 var import_runtime5 = require("@pactor-app/runtime");
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/hooks/use-chat-model.ts
 var import_react3 = require("react");
@@ -915,13 +926,50 @@ var import_components4 = require("@pactor-app/ui/components");
 var import_core3 = require("@pactor-app/core");
 var import_markdown2 = require("@pactor-app/markdown");
 var import_runtime4 = require("@pactor-app/runtime");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/view/PartRenderer.tsx
 var import_components2 = require("@pactor-app/ui/components");
 var import_markdown = require("@pactor-app/markdown");
 var import_runtime3 = require("@pactor-app/runtime");
 
+// src/hooks/use-throttled-value.ts
+var import_react4 = require("react");
+function useThrottledValue(value, intervalMs, enabled) {
+  const [shown, setShown] = (0, import_react4.useState)(value);
+  const lastUpdateRef = (0, import_react4.useRef)(0);
+  const timerRef = (0, import_react4.useRef)(void 0);
+  (0, import_react4.useEffect)(() => {
+    if (!enabled) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = void 0;
+      }
+      setShown(value);
+      return;
+    }
+    const now = Date.now();
+    const elapsed = now - lastUpdateRef.current;
+    if (elapsed >= intervalMs) {
+      lastUpdateRef.current = now;
+      setShown(value);
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      lastUpdateRef.current = Date.now();
+      setShown(value);
+      timerRef.current = void 0;
+    }, intervalMs - elapsed);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = void 0;
+      }
+    };
+  }, [value, intervalMs, enabled]);
+  return enabled ? shown : value;
+}
+
 // src/view/chrome/artifact-card.tsx
 function buildArtifactCardFragment(artifact) {
   return {
@@ -976,7 +1024,7 @@ function buildArtifactCardFragment(artifact) {
 
 // src/view/chrome/ChromeSlot.tsx
 var import_runtime2 = require("@pactor-app/runtime");
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/view/chrome/actions.ts
 var handlers = {};
@@ -1110,7 +1158,7 @@ function ChromeSlotInner({
   const rendered = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pactor-chat-chrome", children: renderer.renderChildren([fragment.node]) });
   return wrap ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: wrap(rendered) }) : rendered;
 }
-var ChromeSlotGuard = class extends import_react4.Component {
+var ChromeSlotGuard = class extends import_react5.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -1168,7 +1216,8 @@ function SmoothText({ content, streaming }) {
 }
 function SmoothMarkdown({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_markdown.MarkdownRenderer, { content: shown });
+  const throttled = useThrottledValue(shown, 100, streaming);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_markdown.MarkdownRenderer, { content: throttled });
 }
 function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact }) {
   switch (part.type) {
@@ -1309,7 +1358,7 @@ function buildPanelHeaderFragment(props) {
 // src/view/ArtifactPanel.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function useArtifactRuntime(safeRegistry, user) {
-  return (0, import_react5.useMemo)(() => {
+  return (0, import_react6.useMemo)(() => {
     if (!safeRegistry) {
       return void 0;
     }
@@ -1321,7 +1370,7 @@ function useArtifactRuntime(safeRegistry, user) {
     return createChatRuntime({ safeRegistry: components, user });
   }, [safeRegistry, user]);
 }
-var ArtifactDslGuard = class extends import_react5.Component {
+var ArtifactDslGuard = class extends import_react6.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -1380,13 +1429,13 @@ function ArtifactPanel({
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
-  const closeRef = (0, import_react5.useRef)(onClose);
+  const closeRef = (0, import_react6.useRef)(onClose);
   closeRef.current = onClose;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     setChatChromeHandlers({ panelClose: () => closeRef.current?.() });
   }, []);
-  const panelRef = (0, import_react5.useRef)(null);
-  const [width, setWidth] = (0, import_react5.useState)(null);
+  const panelRef = (0, import_react6.useRef)(null);
+  const [width, setWidth] = (0, import_react6.useState)(null);
   const handleResizeStart = (event) => {
     event.preventDefault();
     const panel = panelRef.current;
@@ -1463,14 +1512,14 @@ function ArtifactPanel({
 // src/view/ChatView.tsx
 var import_components10 = require("@pactor-app/ui/components");
 var import_core4 = require("@pactor-app/core");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/view/Composer.tsx
 var import_components7 = require("@pactor-app/ui/components");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/view/AnchoredPopover.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function AnchoredPopover({
   anchorRect,
@@ -1480,9 +1529,9 @@ function AnchoredPopover({
   role = "dialog",
   sideOffset = 8
 }) {
-  const ref = (0, import_react6.useRef)(null);
-  const [position, setPosition] = (0, import_react6.useState)(null);
-  (0, import_react6.useLayoutEffect)(() => {
+  const ref = (0, import_react7.useRef)(null);
+  const [position, setPosition] = (0, import_react7.useState)(null);
+  (0, import_react7.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element) return;
     const height = element.offsetHeight;
@@ -1500,7 +1549,7 @@ function AnchoredPopover({
       }
     );
   }, [anchorRect, sideOffset]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       const element = ref.current;
@@ -1548,7 +1597,7 @@ function AnchoredPopover({
 
 // src/view/ModelChip.tsx
 var import_components5 = require("@pactor-app/ui/components");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/view/chrome/model-select.tsx
 function buildModelSelectFragment(props) {
@@ -1580,8 +1629,8 @@ function ModelChip({
   model,
   onModelChange
 }) {
-  const chipRef = (0, import_react7.useRef)(null);
-  const [anchor, setAnchor] = (0, import_react7.useState)(null);
+  const chipRef = (0, import_react8.useRef)(null);
+  const [anchor, setAnchor] = (0, import_react8.useState)(null);
   const currentOption = models.find((option) => option.value === model) ?? models[0];
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1632,9 +1681,9 @@ function ModelSelect({
   model,
   onModelChange
 }) {
-  const changeRef = (0, import_react7.useRef)(onModelChange);
+  const changeRef = (0, import_react8.useRef)(onModelChange);
   changeRef.current = onModelChange;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     setChatChromeHandlers({
       modelChange: (value) => changeRef.current?.(value)
     });
@@ -1650,13 +1699,13 @@ function ModelSelect({
 
 // src/view/chrome/composer.tsx
 var import_components6 = require("@pactor-app/ui/components");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var ComposerBridgeContext = (0, import_react8.createContext)(
+var ComposerBridgeContext = (0, import_react9.createContext)(
   null
 );
 function useComposerBridge() {
-  const bridge = (0, import_react8.useContext)(ComposerBridgeContext);
+  const bridge = (0, import_react9.useContext)(ComposerBridgeContext);
   if (!bridge) {
     throw new Error(
       "[@pactor-app/chat] ChatComposer* \u5185\u90E8\u7EC4\u4EF6\u4EC5\u53EF\u5728 Composer chrome \u7247\u6BB5\u5185\u6E32\u67D3"
@@ -1862,7 +1911,7 @@ function buildComposerFragment(props) {
 }
 
 // src/view/context-sources.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function sourceCacheKey(source) {
   return `${source.service ?? ""}:${JSON.stringify(source.params ?? {})}`;
@@ -1898,8 +1947,8 @@ function ContextSourceList({
   cache,
   onSelect
 }) {
-  const [resolutions, setResolutions] = (0, import_react9.useState)([]);
-  (0, import_react9.useEffect)(() => {
+  const [resolutions, setResolutions] = (0, import_react10.useState)([]);
+  (0, import_react10.useEffect)(() => {
     let cancelled = false;
     const initial = sources.map(
       (source) => source.items ? { status: "ready", items: source.items } : { status: "loading" }
@@ -1999,26 +2048,26 @@ function Composer({
   composerFooter,
   hideToolbar = false
 }) {
-  const [text, setText] = (0, import_react10.useState)("");
-  const [dragOver, setDragOver] = (0, import_react10.useState)(false);
-  const inputRef = (0, import_react10.useRef)(null);
-  const fileInputRef = (0, import_react10.useRef)(null);
-  const plusButtonRef = (0, import_react10.useRef)(null);
-  const composingRef = (0, import_react10.useRef)(false);
+  const [text, setText] = (0, import_react11.useState)("");
+  const [dragOver, setDragOver] = (0, import_react11.useState)(false);
+  const inputRef = (0, import_react11.useRef)(null);
+  const fileInputRef = (0, import_react11.useRef)(null);
+  const plusButtonRef = (0, import_react11.useRef)(null);
+  const composingRef = (0, import_react11.useRef)(false);
   const modelChipEnabled = models !== void 0 && models.length > 0;
-  const mentionSources = (0, import_react10.useMemo)(
+  const mentionSources = (0, import_react11.useMemo)(
     () => contextSources?.filter((source) => source.trigger === "@") ?? [],
     [contextSources]
   );
-  const plusSources = (0, import_react10.useMemo)(
+  const plusSources = (0, import_react11.useMemo)(
     () => contextSources?.filter((source) => source.trigger === "+") ?? [],
     [contextSources]
   );
   const builtinMentionEnabled = onMentionTrigger === void 0 && mentionSources.length > 0;
   const builtinPlusEnabled = onPlusMenu === void 0 && plusSources.length > 0;
-  const [mentionState, setMentionState] = (0, import_react10.useState)(null);
-  const [plusAnchor, setPlusAnchor] = (0, import_react10.useState)(null);
-  const sourceCacheRef = (0, import_react10.useRef)(null);
+  const [mentionState, setMentionState] = (0, import_react11.useState)(null);
+  const [plusAnchor, setPlusAnchor] = (0, import_react11.useState)(null);
+  const sourceCacheRef = (0, import_react11.useRef)(null);
   if (sourceCacheRef.current === null) {
     sourceCacheRef.current = /* @__PURE__ */ new Map();
   }
@@ -2037,7 +2086,7 @@ function Composer({
     setMentionState(null);
     setPlusAnchor(null);
   };
-  (0, import_react10.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     const input = inputRef.current;
     if (input) {
       input.style.height = "auto";
@@ -2052,9 +2101,9 @@ function Composer({
     onSend?.(value);
     setText("");
   };
-  const sendRef = (0, import_react10.useRef)(send);
+  const sendRef = (0, import_react11.useRef)(send);
   sendRef.current = send;
-  (0, import_react10.useLayoutEffect)(() => {
+  (0, import_react11.useLayoutEffect)(() => {
     setChatChromeHandlers({ composerSubmit: () => sendRef.current() });
   }, []);
   const syncText = (value, caret, rect) => {
@@ -2471,15 +2520,15 @@ function EmptyState({
 }
 
 // src/view/MessageBubble.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/view/ActivityTrace.tsx
 var import_components8 = require("@pactor-app/ui/components");
 var import_markdown3 = require("@pactor-app/markdown");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function usePinnedCollapse(autoOpen) {
-  const [state, setState] = (0, import_react11.useState)("auto");
+  const [state, setState] = (0, import_react12.useState)("auto");
   const open = state === "auto" ? autoOpen : state === "pinned-open";
   const toggle = () => {
     setState(open ? "pinned-closed" : "pinned-open");
@@ -2505,8 +2554,8 @@ function statusText(message, mode, toolCount) {
 }
 function useElapsedSeconds(startedAt, active) {
   const compute = () => Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
-  const [elapsed, setElapsed] = (0, import_react11.useState)(compute);
-  (0, import_react11.useEffect)(() => {
+  const [elapsed, setElapsed] = (0, import_react12.useState)(compute);
+  (0, import_react12.useEffect)(() => {
     if (!active) {
       setElapsed(compute());
       return;
@@ -2557,7 +2606,7 @@ function formatDetail(value) {
   }
 }
 function TraceRow({ entry }) {
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react12.useState)(false);
   const summary = summarizeArgs(entry.args);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -2594,6 +2643,7 @@ function ThinkingCard({
   answerPhase
 }) {
   const partStreaming = part.status === "streaming";
+  const shown = useThrottledValue(part.content, 120, partStreaming);
   const { open, toggle } = usePinnedCollapse(partStreaming && !answerPhase);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
@@ -2616,7 +2666,7 @@ function ThinkingCard({
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-thinking__body", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_markdown3.MarkdownRenderer, { content: part.content }) })
+        open && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-thinking__body", children: partStreaming ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pactor-chat-thinking__text", children: shown }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_markdown3.MarkdownRenderer, { content: part.content }) })
       ]
     }
   );
@@ -2630,7 +2680,7 @@ function ActivityTrace({ message }) {
   );
   const answerPhase = mode === "responding" || !streaming;
   const { open, toggle } = usePinnedCollapse(!answerPhase);
-  const mountTimeRef = (0, import_react11.useRef)(0);
+  const mountTimeRef = (0, import_react12.useRef)(0);
   if (mountTimeRef.current === 0) {
     mountTimeRef.current = Date.now();
   }
@@ -2678,7 +2728,7 @@ function ActivityTrace({ message }) {
 
 // src/view/MessageActions.tsx
 var import_components9 = require("@pactor-app/ui/components");
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/view/chrome/message-actions.tsx
 function buildMessageActionsFragment(args) {
@@ -2804,13 +2854,13 @@ function MessageActions({
   callService,
   onMessageAction
 }) {
-  const [copied, setCopied] = (0, import_react12.useState)(false);
-  const dispatchRef = (0, import_react12.useRef)(
+  const [copied, setCopied] = (0, import_react13.useState)(false);
+  const dispatchRef = (0, import_react13.useRef)(
     () => {
     }
   );
-  const visibleActionsRef = (0, import_react12.useRef)([]);
-  (0, import_react12.useEffect)(() => {
+  const visibleActionsRef = (0, import_react13.useRef)([]);
+  (0, import_react13.useEffect)(() => {
     setMessageActionDispatcher(message.id, (actionId) => {
       const action = visibleActionsRef.current.find((a) => a.id === actionId);
       if (action) {
@@ -2924,7 +2974,7 @@ function MessageEditForm({
   onConfirm,
   onCancel
 }) {
-  const [text, setText] = (0, import_react13.useState)(initialText);
+  const [text, setText] = (0, import_react14.useState)(initialText);
   const confirm = () => {
     const value = text.trim();
     if (!value) {
@@ -2988,7 +3038,7 @@ function MessageBubble({
   onMessageAction,
   onOpenArtifact
 }) {
-  const [editing, setEditing] = (0, import_react13.useState)(false);
+  const [editing, setEditing] = (0, import_react14.useState)(false);
   const bubbleScope = {
     conversation: scope?.conversation ?? {},
     message: { id: message.id },
@@ -2996,7 +3046,7 @@ function MessageBubble({
   };
   const streaming = message.status === "streaming";
   const live = message.status === "pending" || message.status === "streaming";
-  const wasLiveRef = (0, import_react13.useRef)(live);
+  const wasLiveRef = (0, import_react14.useRef)(live);
   if (live) {
     wasLiveRef.current = true;
   }
@@ -3103,14 +3153,14 @@ function ChatView({
   onMessageAction,
   composerBottom
 }) {
-  const messages = (0, import_react14.useSyncExternalStore)(
+  const messages = (0, import_react15.useSyncExternalStore)(
     (listener) => store.subscribe(listener),
     () => store.getMessages()
   );
   const isStreaming = messages.some(
     (message) => message.status === "pending" || message.status === "streaming"
   );
-  const runtime = (0, import_react14.useMemo)(() => {
+  const runtime = (0, import_react15.useMemo)(() => {
     if (!safeRegistry) {
       return void 0;
     }
@@ -3127,12 +3177,12 @@ function ChatView({
       user
     });
   }, [safeRegistry, capabilities, permission, confirm, user]);
-  const scope = (0, import_react14.useMemo)(
+  const scope = (0, import_react15.useMemo)(
     () => ({ conversation: { id: conversationId }, params }),
     [conversationId, params]
   );
-  const notifiedArtifactsRef = (0, import_react14.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react14.useEffect)(() => {
+  const notifiedArtifactsRef = (0, import_react15.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react15.useEffect)(() => {
     if (!onArtifact) {
       return;
     }
@@ -3151,7 +3201,7 @@ function ChatView({
       });
     }
   }, [messages, onArtifact]);
-  const abortRef = (0, import_react14.useRef)(null);
+  const abortRef = (0, import_react15.useRef)(null);
   const { containerRef, isFollowing, scrollToBottom } = useChatAutoScroll({
     messageCount: messages.length,
     lastContentLength: lastContentLength(messages),
@@ -3162,7 +3212,7 @@ function ChatView({
     model,
     onModelChange
   });
-  const [contextChips, setContextChips] = (0, import_react14.useState)([]);
+  const [contextChips, setContextChips] = (0, import_react15.useState)([]);
   const handleContextChipsChange = (chips) => {
     setContextChips(chips);
     onContextsChange?.(chips);
@@ -3194,11 +3244,11 @@ function ChatView({
     abortRef.current?.abort();
     abortRef.current = null;
   };
-  const handleSendRef = (0, import_react14.useRef)(handleSend);
+  const handleSendRef = (0, import_react15.useRef)(handleSend);
   handleSendRef.current = handleSend;
-  const onOpenArtifactRef = (0, import_react14.useRef)(onOpenArtifact);
+  const onOpenArtifactRef = (0, import_react15.useRef)(onOpenArtifact);
   onOpenArtifactRef.current = onOpenArtifact;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setChatChromeHandlers({
       sendSuggestion: (text) => handleSendRef.current(text),
       openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact)
@@ -3305,7 +3355,7 @@ function ChatView({
 
 // src/view/WorkspaceHeader.tsx
 var import_components11 = require("@pactor-app/ui/components");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/export-markdown.ts
 var ROLE_LABELS = {
@@ -3402,10 +3452,10 @@ function WorkspaceHeader({
   onTitleChange
 }) {
   const hasActions = headerActions !== void 0 && headerActions.length > 0;
-  const [overrideTitle, setOverrideTitle] = (0, import_react15.useState)(null);
-  const [editing, setEditing] = (0, import_react15.useState)(false);
-  const [draft, setDraft] = (0, import_react15.useState)("");
-  const prevTitleRef = (0, import_react15.useRef)(title);
+  const [overrideTitle, setOverrideTitle] = (0, import_react16.useState)(null);
+  const [editing, setEditing] = (0, import_react16.useState)(false);
+  const [draft, setDraft] = (0, import_react16.useState)("");
+  const prevTitleRef = (0, import_react16.useRef)(title);
   if (prevTitleRef.current !== title) {
     prevTitleRef.current = title;
     if (overrideTitle !== null) {
@@ -3413,7 +3463,7 @@ function WorkspaceHeader({
     }
   }
   const displayTitle = overrideTitle ?? title;
-  const [theme, setTheme] = (0, import_react15.useState)(readCurrentTheme);
+  const [theme, setTheme] = (0, import_react16.useState)(readCurrentTheme);
   const commitTitle = () => {
     setEditing(false);
     const next = draft.trim();
@@ -3440,9 +3490,9 @@ function WorkspaceHeader({
     store.clear();
     onClear?.();
   };
-  const handlersRef = (0, import_react15.useRef)({ handleExport, handleTheme, handleClear });
+  const handlersRef = (0, import_react16.useRef)({ handleExport, handleTheme, handleClear });
   handlersRef.current = { handleExport, handleTheme, handleClear };
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setChatChromeHandlers({
       headerAction: (name) => {
         const handlers2 = handlersRef.current;
@@ -3554,7 +3604,7 @@ function DslNodeSlotInner({ node }) {
   const { renderChildren } = (0, import_runtime5.useRenderer)();
   return renderChildren([node]);
 }
-var DslSlotGuard = class extends import_react16.Component {
+var DslSlotGuard = class extends import_react17.Component {
   constructor() {
     super(...arguments);
     this.state = { failed: false };
@@ -3575,7 +3625,7 @@ function DslNodeSlot({ node }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslSlotGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DslNodeSlotInner, { node }) });
 }
 function isDslNodeValue(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && !(0, import_react16.isValidElement)(value) && typeof value.type === "string";
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(0, import_react17.isValidElement)(value) && typeof value.type === "string";
 }
 function resolveSlot(slot) {
   if (slot === void 0 || slot === null) {
@@ -3626,18 +3676,18 @@ function ChatComposition({
   onArtifact,
   onOpenArtifact
 }) {
-  const storeRef = (0, import_react16.useRef)(null);
+  const storeRef = (0, import_react17.useRef)(null);
   if (storeRef.current === null) {
     storeRef.current = services.store ?? services.storeFactory?.() ?? new ConversationStore();
   }
   const store = storeRef.current;
-  const artifactStoreRef = (0, import_react16.useRef)(null);
+  const artifactStoreRef = (0, import_react17.useRef)(null);
   if (artifactStoreRef.current === null) {
     artifactStoreRef.current = services.artifactStore ?? new ArtifactStore();
   }
   const artifactStore = artifactStoreRef.current;
   const panelControlled = panelOpen !== void 0 || artifact !== void 0;
-  const storeArtifact = (0, import_react16.useSyncExternalStore)(
+  const storeArtifact = (0, import_react17.useSyncExternalStore)(
     (listener) => artifactStore.subscribe(listener),
     () => artifactStore.get()
   );
@@ -3655,7 +3705,7 @@ function ChatComposition({
       artifactStore.open(next);
     }
   };
-  const [attachments, setAttachments] = (0, import_react16.useState)([]);
+  const [attachments, setAttachments] = (0, import_react17.useState)([]);
   const handleAttachFiles = services.onAttachFiles ? (files) => {
     void Promise.resolve(services.onAttachFiles(files)).then(
       (created) => {
@@ -3795,9 +3845,9 @@ function ChatComposition({
 }
 
 // src/chat-services.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var ChatServicesContext = (0, import_react17.createContext)(null);
+var ChatServicesContext = (0, import_react18.createContext)(null);
 function ChatServicesProvider({
   value,
   children
@@ -3805,7 +3855,7 @@ function ChatServicesProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChatServicesContext.Provider, { value, children });
 }
 function useChatServices() {
-  return (0, import_react17.useContext)(ChatServicesContext);
+  return (0, import_react18.useContext)(ChatServicesContext);
 }
 
 // src/chat-workspace.tsx
@@ -3892,7 +3942,7 @@ function createChatWorkspace(services) {
 
 // src/view/Chat.tsx
 var import_components12 = require("@pactor-app/ui/components");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/view/chrome/menu.tsx
 function buildSidebarMenuFragment(props) {
@@ -3980,13 +4030,13 @@ function ChatSidebarMenu({
   onMenuSelect
 }) {
   const drawer = useSidebarDrawer();
-  const menuRef = (0, import_react18.useRef)(menu);
+  const menuRef = (0, import_react19.useRef)(menu);
   menuRef.current = menu;
-  const selectRef = (0, import_react18.useRef)(onMenuSelect);
+  const selectRef = (0, import_react19.useRef)(onMenuSelect);
   selectRef.current = onMenuSelect;
-  const drawerRef = (0, import_react18.useRef)(drawer);
+  const drawerRef = (0, import_react19.useRef)(drawer);
   drawerRef.current = drawer;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setChatChromeHandlers({
       menuSelect: (key) => {
         const item = menuRef.current.find((entry) => entry.key === key);
@@ -4027,7 +4077,7 @@ function ChatSidebarMenu({
           ]
         }
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react18.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react19.Fragment, { children: [
         groupLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pactor-chat-menu__group", children: groupLabel }) : null,
         collapsed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_components12.RailTooltip, { label: item.label, children: button }) : button
       ] }, item.key);
@@ -4084,7 +4134,7 @@ function Chat({
   onMenuSelect
 }) {
   const services = useChatServices();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!services) {
       console.warn(
         "[@pactor-app/chat] Chat \u672A\u68C0\u6D4B\u5230 ChatServicesProvider\uFF1A\u8BF7\u5728\u5E94\u7528\u6839\u90E8\u4EE5 <ChatServicesProvider> \u6CE8\u5165 transport \u7B49\u670D\u52A1"
@@ -4188,6 +4238,11 @@ function registerChatComponent(registry) {
   }
   registerChatShellComponent(registry);
 }
+function createChatComponentRegistry() {
+  const registry = (0, import_components12.createComponentRegistry)();
+  registerChatComponent(registry);
+  return registry;
+}
 
 // src/view/ChatLayout.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -4230,6 +4285,7 @@ function registerChatLayout(layoutRegistry) {
   applyChatEvent,
   buildChatScope,
   collectMessageText,
+  createChatComponentRegistry,
   createChatId,
   createChatRuntime,
   createChatWorkspace,