@pactor-app/chat 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -410,9 +410,13 @@ interface ChatInput {
      */
     contexts?: ChatContextItem[];
 }
+/** 传输层发送选项 */
+interface ChatTransportSendOptions {
+    signal?: AbortSignal;
+}
 /** Chat 传输层：发送输入，返回流式事件 */
 interface ChatTransport {
-    send(input: ChatInput): AsyncIterable<ChatEvent>;
+    send(input: ChatInput, options?: ChatTransportSendOptions): AsyncIterable<ChatEvent>;
 }
 /** runChatTurn 的可选定制（id 生成等，测试可注入确定性 id） */
 interface RunChatTurnOptions {

package/dist/index.js

@@ -431,6 +431,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");
@@ -453,15 +463,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);
@@ -796,8 +806,8 @@ import { useRenderer as useRenderer4 } from "@pactor-app/runtime";
 import {
   Component as Component3,
   isValidElement,
-  useRef as useRef12,
-  useState as useState14,
+  useRef as useRef13,
+  useState as useState15,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 
@@ -862,10 +872,10 @@ import { MarkdownRenderer as MarkdownRenderer2 } from "@pactor-app/markdown";
 import { DslRenderer as DslRenderer2, useRenderer as useRenderer3 } from "@pactor-app/runtime";
 import {
   Component as Component2,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useMemo,
-  useRef as useRef3,
-  useState as useState4
+  useRef as useRef4,
+  useState as useState5
 } from "react";
 
 // src/view/PartRenderer.tsx
@@ -873,6 +883,43 @@ import { Icon } from "@pactor-app/ui/components";
 import { MarkdownRenderer } from "@pactor-app/markdown";
 import { DslRenderer, useRenderer as useRenderer2 } from "@pactor-app/runtime";
 
+// src/hooks/use-throttled-value.ts
+import { useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
+function useThrottledValue(value, intervalMs, enabled) {
+  const [shown, setShown] = useState4(value);
+  const lastUpdateRef = useRef3(0);
+  const timerRef = useRef3(void 0);
+  useEffect2(() => {
+    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 {
@@ -1119,7 +1166,8 @@ function SmoothText({ content, streaming }) {
 }
 function SmoothMarkdown({ content, streaming }) {
   const shown = useSmoothStreamText(content, streaming);
-  return /* @__PURE__ */ jsx3(MarkdownRenderer, { content: shown });
+  const throttled = useThrottledValue(shown, 100, streaming);
+  return /* @__PURE__ */ jsx3(MarkdownRenderer, { content: throttled });
 }
 function PartRenderer({ part, runtime, scope, streaming = false, onOpenArtifact }) {
   switch (part.type) {
@@ -1331,13 +1379,13 @@ function ArtifactPanel({
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
-  const closeRef = useRef3(onClose);
+  const closeRef = useRef4(onClose);
   closeRef.current = onClose;
-  useEffect2(() => {
+  useEffect3(() => {
     setChatChromeHandlers({ panelClose: () => closeRef.current?.() });
   }, []);
-  const panelRef = useRef3(null);
-  const [width, setWidth] = useState4(null);
+  const panelRef = useRef4(null);
+  const [width, setWidth] = useState5(null);
   const handleResizeStart = (event) => {
     event.preventDefault();
     const panel = panelRef.current;
@@ -1414,18 +1462,18 @@ function ArtifactPanel({
 // src/view/ChatView.tsx
 import { Icon as Icon9 } from "@pactor-app/ui/components";
 import { Registry as Registry3 } from "@pactor-app/core";
-import { useEffect as useEffect8, useMemo as useMemo3, useRef as useRef10, useState as useState12, useSyncExternalStore } from "react";
+import { useEffect as useEffect9, useMemo as useMemo3, useRef as useRef11, useState as useState13, useSyncExternalStore } from "react";
 
 // src/view/Composer.tsx
 import { Icon as Icon6 } from "@pactor-app/ui/components";
-import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef6, useState as useState8 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef7, useState as useState9 } from "react";
 
 // src/view/AnchoredPopover.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef4,
-  useState as useState5
+  useRef as useRef5,
+  useState as useState6
 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function AnchoredPopover({
@@ -1436,8 +1484,8 @@ function AnchoredPopover({
   role = "dialog",
   sideOffset = 8
 }) {
-  const ref = useRef4(null);
-  const [position, setPosition] = useState5(null);
+  const ref = useRef5(null);
+  const [position, setPosition] = useState6(null);
   useLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -1456,7 +1504,7 @@ function AnchoredPopover({
       }
     );
   }, [anchorRect, sideOffset]);
-  useEffect3(() => {
+  useEffect4(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       const element = ref.current;
@@ -1504,7 +1552,7 @@ function AnchoredPopover({
 
 // src/view/ModelChip.tsx
 import { Icon as Icon4 } from "@pactor-app/ui/components";
-import { useEffect as useEffect4, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState7 } from "react";
 
 // src/view/chrome/model-select.tsx
 function buildModelSelectFragment(props) {
@@ -1536,8 +1584,8 @@ function ModelChip({
   model,
   onModelChange
 }) {
-  const chipRef = useRef5(null);
-  const [anchor, setAnchor] = useState6(null);
+  const chipRef = useRef6(null);
+  const [anchor, setAnchor] = useState7(null);
   const currentOption = models.find((option) => option.value === model) ?? models[0];
   return /* @__PURE__ */ jsxs3(Fragment4, { children: [
     /* @__PURE__ */ jsxs3(
@@ -1588,9 +1636,9 @@ function ModelSelect({
   model,
   onModelChange
 }) {
-  const changeRef = useRef5(onModelChange);
+  const changeRef = useRef6(onModelChange);
   changeRef.current = onModelChange;
-  useEffect4(() => {
+  useEffect5(() => {
     setChatChromeHandlers({
       modelChange: (value) => changeRef.current?.(value)
     });
@@ -1818,7 +1866,7 @@ function buildComposerFragment(props) {
 }
 
 // src/view/context-sources.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function sourceCacheKey(source) {
   return `${source.service ?? ""}:${JSON.stringify(source.params ?? {})}`;
@@ -1854,8 +1902,8 @@ function ContextSourceList({
   cache,
   onSelect
 }) {
-  const [resolutions, setResolutions] = useState7([]);
-  useEffect5(() => {
+  const [resolutions, setResolutions] = useState8([]);
+  useEffect6(() => {
     let cancelled = false;
     const initial = sources.map(
       (source) => source.items ? { status: "ready", items: source.items } : { status: "loading" }
@@ -1955,12 +2003,12 @@ function Composer({
   composerFooter,
   hideToolbar = false
 }) {
-  const [text, setText] = useState8("");
-  const [dragOver, setDragOver] = useState8(false);
-  const inputRef = useRef6(null);
-  const fileInputRef = useRef6(null);
-  const plusButtonRef = useRef6(null);
-  const composingRef = useRef6(false);
+  const [text, setText] = useState9("");
+  const [dragOver, setDragOver] = useState9(false);
+  const inputRef = useRef7(null);
+  const fileInputRef = useRef7(null);
+  const plusButtonRef = useRef7(null);
+  const composingRef = useRef7(false);
   const modelChipEnabled = models !== void 0 && models.length > 0;
   const mentionSources = useMemo2(
     () => contextSources?.filter((source) => source.trigger === "@") ?? [],
@@ -1972,9 +2020,9 @@ function Composer({
   );
   const builtinMentionEnabled = onMentionTrigger === void 0 && mentionSources.length > 0;
   const builtinPlusEnabled = onPlusMenu === void 0 && plusSources.length > 0;
-  const [mentionState, setMentionState] = useState8(null);
-  const [plusAnchor, setPlusAnchor] = useState8(null);
-  const sourceCacheRef = useRef6(null);
+  const [mentionState, setMentionState] = useState9(null);
+  const [plusAnchor, setPlusAnchor] = useState9(null);
+  const sourceCacheRef = useRef7(null);
   if (sourceCacheRef.current === null) {
     sourceCacheRef.current = /* @__PURE__ */ new Map();
   }
@@ -2008,7 +2056,7 @@ function Composer({
     onSend?.(value);
     setText("");
   };
-  const sendRef = useRef6(send);
+  const sendRef = useRef7(send);
   sendRef.current = send;
   useLayoutEffect3(() => {
     setChatChromeHandlers({ composerSubmit: () => sendRef.current() });
@@ -2427,15 +2475,15 @@ function EmptyState({
 }
 
 // src/view/MessageBubble.tsx
-import { useRef as useRef9, useState as useState11 } from "react";
+import { useRef as useRef10, useState as useState12 } from "react";
 
 // src/view/ActivityTrace.tsx
 import { Icon as Icon7 } from "@pactor-app/ui/components";
 import { MarkdownRenderer as MarkdownRenderer3 } from "@pactor-app/markdown";
-import { useEffect as useEffect6, useRef as useRef7, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState10 } from "react";
 import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function usePinnedCollapse(autoOpen) {
-  const [state, setState] = useState9("auto");
+  const [state, setState] = useState10("auto");
   const open = state === "auto" ? autoOpen : state === "pinned-open";
   const toggle = () => {
     setState(open ? "pinned-closed" : "pinned-open");
@@ -2461,8 +2509,8 @@ function statusText(message, mode, toolCount) {
 }
 function useElapsedSeconds(startedAt, active) {
   const compute = () => Math.max(0, Math.floor((Date.now() - startedAt) / 1e3));
-  const [elapsed, setElapsed] = useState9(compute);
-  useEffect6(() => {
+  const [elapsed, setElapsed] = useState10(compute);
+  useEffect7(() => {
     if (!active) {
       setElapsed(compute());
       return;
@@ -2513,7 +2561,7 @@ function formatDetail(value) {
   }
 }
 function TraceRow({ entry }) {
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState10(false);
   const summary = summarizeArgs(entry.args);
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -2550,6 +2598,7 @@ function ThinkingCard({
   answerPhase
 }) {
   const partStreaming = part.status === "streaming";
+  const shown = useThrottledValue(part.content, 120, partStreaming);
   const { open, toggle } = usePinnedCollapse(partStreaming && !answerPhase);
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -2572,7 +2621,7 @@ function ThinkingCard({
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-thinking__body", children: /* @__PURE__ */ jsx12(MarkdownRenderer3, { content: part.content }) })
+        open && /* @__PURE__ */ jsx12("div", { className: "pactor-chat-thinking__body", children: partStreaming ? /* @__PURE__ */ jsx12("div", { className: "pactor-chat-thinking__text", children: shown }) : /* @__PURE__ */ jsx12(MarkdownRenderer3, { content: part.content }) })
       ]
     }
   );
@@ -2586,7 +2635,7 @@ function ActivityTrace({ message }) {
   );
   const answerPhase = mode === "responding" || !streaming;
   const { open, toggle } = usePinnedCollapse(!answerPhase);
-  const mountTimeRef = useRef7(0);
+  const mountTimeRef = useRef8(0);
   if (mountTimeRef.current === 0) {
     mountTimeRef.current = Date.now();
   }
@@ -2634,7 +2683,7 @@ function ActivityTrace({ message }) {
 
 // src/view/MessageActions.tsx
 import { Icon as Icon8 } from "@pactor-app/ui/components";
-import { useEffect as useEffect7, useRef as useRef8, useState as useState10 } from "react";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState11 } from "react";
 
 // src/view/chrome/message-actions.tsx
 function buildMessageActionsFragment(args) {
@@ -2760,13 +2809,13 @@ function MessageActions({
   callService,
   onMessageAction
 }) {
-  const [copied, setCopied] = useState10(false);
-  const dispatchRef = useRef8(
+  const [copied, setCopied] = useState11(false);
+  const dispatchRef = useRef9(
     () => {
     }
   );
-  const visibleActionsRef = useRef8([]);
-  useEffect7(() => {
+  const visibleActionsRef = useRef9([]);
+  useEffect8(() => {
     setMessageActionDispatcher(message.id, (actionId) => {
       const action = visibleActionsRef.current.find((a) => a.id === actionId);
       if (action) {
@@ -2880,7 +2929,7 @@ function MessageEditForm({
   onConfirm,
   onCancel
 }) {
-  const [text, setText] = useState11(initialText);
+  const [text, setText] = useState12(initialText);
   const confirm = () => {
     const value = text.trim();
     if (!value) {
@@ -2944,7 +2993,7 @@ function MessageBubble({
   onMessageAction,
   onOpenArtifact
 }) {
-  const [editing, setEditing] = useState11(false);
+  const [editing, setEditing] = useState12(false);
   const bubbleScope = {
     conversation: scope?.conversation ?? {},
     message: { id: message.id },
@@ -2952,7 +3001,7 @@ function MessageBubble({
   };
   const streaming = message.status === "streaming";
   const live = message.status === "pending" || message.status === "streaming";
-  const wasLiveRef = useRef9(live);
+  const wasLiveRef = useRef10(live);
   if (live) {
     wasLiveRef.current = true;
   }
@@ -3087,8 +3136,8 @@ function ChatView({
     () => ({ conversation: { id: conversationId }, params }),
     [conversationId, params]
   );
-  const notifiedArtifactsRef = useRef10(/* @__PURE__ */ new Set());
-  useEffect8(() => {
+  const notifiedArtifactsRef = useRef11(/* @__PURE__ */ new Set());
+  useEffect9(() => {
     if (!onArtifact) {
       return;
     }
@@ -3107,7 +3156,7 @@ function ChatView({
       });
     }
   }, [messages, onArtifact]);
-  const abortRef = useRef10(null);
+  const abortRef = useRef11(null);
   const { containerRef, isFollowing, scrollToBottom } = useChatAutoScroll({
     messageCount: messages.length,
     lastContentLength: lastContentLength(messages),
@@ -3118,7 +3167,7 @@ function ChatView({
     model,
     onModelChange
   });
-  const [contextChips, setContextChips] = useState12([]);
+  const [contextChips, setContextChips] = useState13([]);
   const handleContextChipsChange = (chips) => {
     setContextChips(chips);
     onContextsChange?.(chips);
@@ -3150,11 +3199,11 @@ function ChatView({
     abortRef.current?.abort();
     abortRef.current = null;
   };
-  const handleSendRef = useRef10(handleSend);
+  const handleSendRef = useRef11(handleSend);
   handleSendRef.current = handleSend;
-  const onOpenArtifactRef = useRef10(onOpenArtifact);
+  const onOpenArtifactRef = useRef11(onOpenArtifact);
   onOpenArtifactRef.current = onOpenArtifact;
-  useEffect8(() => {
+  useEffect9(() => {
     setChatChromeHandlers({
       sendSuggestion: (text) => handleSendRef.current(text),
       openArtifact: (artifact) => onOpenArtifactRef.current?.(artifact)
@@ -3261,7 +3310,7 @@ function ChatView({
 
 // src/view/WorkspaceHeader.tsx
 import { Icon as Icon10 } from "@pactor-app/ui/components";
-import { useEffect as useEffect9, useRef as useRef11, useState as useState13 } from "react";
+import { useEffect as useEffect10, useRef as useRef12, useState as useState14 } from "react";
 
 // src/export-markdown.ts
 var ROLE_LABELS = {
@@ -3358,10 +3407,10 @@ function WorkspaceHeader({
   onTitleChange
 }) {
   const hasActions = headerActions !== void 0 && headerActions.length > 0;
-  const [overrideTitle, setOverrideTitle] = useState13(null);
-  const [editing, setEditing] = useState13(false);
-  const [draft, setDraft] = useState13("");
-  const prevTitleRef = useRef11(title);
+  const [overrideTitle, setOverrideTitle] = useState14(null);
+  const [editing, setEditing] = useState14(false);
+  const [draft, setDraft] = useState14("");
+  const prevTitleRef = useRef12(title);
   if (prevTitleRef.current !== title) {
     prevTitleRef.current = title;
     if (overrideTitle !== null) {
@@ -3369,7 +3418,7 @@ function WorkspaceHeader({
     }
   }
   const displayTitle = overrideTitle ?? title;
-  const [theme, setTheme] = useState13(readCurrentTheme);
+  const [theme, setTheme] = useState14(readCurrentTheme);
   const commitTitle = () => {
     setEditing(false);
     const next = draft.trim();
@@ -3396,9 +3445,9 @@ function WorkspaceHeader({
     store.clear();
     onClear?.();
   };
-  const handlersRef = useRef11({ handleExport, handleTheme, handleClear });
+  const handlersRef = useRef12({ handleExport, handleTheme, handleClear });
   handlersRef.current = { handleExport, handleTheme, handleClear };
-  useEffect9(() => {
+  useEffect10(() => {
     setChatChromeHandlers({
       headerAction: (name) => {
         const handlers2 = handlersRef.current;
@@ -3582,12 +3631,12 @@ function ChatComposition({
   onArtifact,
   onOpenArtifact
 }) {
-  const storeRef = useRef12(null);
+  const storeRef = useRef13(null);
   if (storeRef.current === null) {
     storeRef.current = services.store ?? services.storeFactory?.() ?? new ConversationStore();
   }
   const store = storeRef.current;
-  const artifactStoreRef = useRef12(null);
+  const artifactStoreRef = useRef13(null);
   if (artifactStoreRef.current === null) {
     artifactStoreRef.current = services.artifactStore ?? new ArtifactStore();
   }
@@ -3611,7 +3660,7 @@ function ChatComposition({
       artifactStore.open(next);
     }
   };
-  const [attachments, setAttachments] = useState14([]);
+  const [attachments, setAttachments] = useState15([]);
   const handleAttachFiles = services.onAttachFiles ? (files) => {
     void Promise.resolve(services.onAttachFiles(files)).then(
       (created) => {
@@ -3848,7 +3897,7 @@ function createChatWorkspace(services) {
 
 // src/view/Chat.tsx
 import { createComponentRegistry, Icon as Icon11, RailTooltip } from "@pactor-app/ui/components";
-import { Fragment as Fragment10, useEffect as useEffect10, useRef as useRef13 } from "react";
+import { Fragment as Fragment10, useEffect as useEffect11, useRef as useRef14 } from "react";
 
 // src/view/chrome/menu.tsx
 function buildSidebarMenuFragment(props) {
@@ -3936,13 +3985,13 @@ function ChatSidebarMenu({
   onMenuSelect
 }) {
   const drawer = useSidebarDrawer();
-  const menuRef = useRef13(menu);
+  const menuRef = useRef14(menu);
   menuRef.current = menu;
-  const selectRef = useRef13(onMenuSelect);
+  const selectRef = useRef14(onMenuSelect);
   selectRef.current = onMenuSelect;
-  const drawerRef = useRef13(drawer);
+  const drawerRef = useRef14(drawer);
   drawerRef.current = drawer;
-  useEffect10(() => {
+  useEffect11(() => {
     setChatChromeHandlers({
       menuSelect: (key) => {
         const item = menuRef.current.find((entry) => entry.key === key);
@@ -4040,7 +4089,7 @@ function Chat({
   onMenuSelect
 }) {
   const services = useChatServices();
-  useEffect10(() => {
+  useEffect11(() => {
     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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/chat",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Pactor chat: AI message rendering protocol (message model, streaming reducer, safe registry, capability action) and chat runtime view (ChatView / MessageBubble / PartRenderer / Composer / chat layout)",
   "keywords": [
     "pactor",
@@ -49,11 +49,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@pactor-app/core": "1.2.0",
-    "@pactor-app/markdown": "1.2.0",
-    "@pactor-app/permission": "1.2.0",
-    "@pactor-app/runtime": "1.2.0",
-    "@pactor-app/ui": "1.2.0"
+    "@pactor-app/core": "1.3.0",
+    "@pactor-app/ui": "1.3.0",
+    "@pactor-app/permission": "1.3.0",
+    "@pactor-app/markdown": "1.3.0",
+    "@pactor-app/runtime": "1.3.0"
   },
   "peerDependencies": {
     "react": ">=18"