@agentscope-ai/chat 1.1.65 → 1.1.67

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Request/Actions.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { SparkCopyLine } from "@agentscope-ai/icons";
 import { AgentScopeRuntimeContentType, IAgentScopeRuntimeRequest } from "../types";
 import { Bubble } from "@agentscope-ai/chat";
@@ -27,10 +28,13 @@ export default function RequestActions(props: {
     },
   ] : [];
 
-  const actions = (requestActionsOptions.list || defaultActions).map(i => ({
-    ...i,
-    onClick: () => { i.onClick?.({ data: props.data }); },
-  }));
+  const actions = (requestActionsOptions.list || defaultActions).map(i => {
+    const res = { ...i } as any;
+    if (i.render) {
+      res.children = React.createElement(i.render, { data: props.data });
+    }
+    return { ...res, onClick: () => { i.onClick?.({ data: props.data }); } };
+  });
 
   if (!actions.length) return null;
 

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Request/Builder.tsx

@@ -101,6 +101,9 @@ class AgentScopeRuntimeRequestBuilder {
     }
 
     this.data = {
+      // Client-side send timestamp (seconds), aligns with response.created_at.
+      // Backend has not yet returned, so this represents the local send moment.
+      created_at: Math.floor(Date.now() / 1000),
       input: [
         {
           role: 'user',
@@ -113,7 +116,10 @@ class AgentScopeRuntimeRequestBuilder {
   }
 
   handleApproval(input) {
-    this.data = { input };
+    this.data = {
+      created_at: Math.floor(Date.now() / 1000),
+      input,
+    };
     return this.data;
   }
 }

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Request/Card.tsx

@@ -3,10 +3,13 @@ import { AgentScopeRuntimeContentType, IAgentScopeRuntimeRequest } from '../type
 import { useMemo } from 'react';
 import { Bubble } from '@agentscope-ai/chat';
 import Actions from './Actions';
+import { useChatAnywhereOptions } from '../../Context/ChatAnywhereOptionsContext';
 
 export default function AgentScopeRuntimeRequestCard(props: {
   data: IAgentScopeRuntimeRequest;
 }) {
+  const onFileCardClick = useChatAnywhereOptions(v => v.api?.onFileCardClick);
+
   const cards = useMemo(() => {
 
     return props.data.input[0].content.reduce<any>((p, c) => {
@@ -63,6 +66,7 @@ export default function AgentScopeRuntimeRequestCard(props: {
           p.push({
             code: 'Files',
             data: [{ url: c.file_url, name: c.file_name || c.fileName, size: c.file_size }],
+            onClick: onFileCardClick,
           });
         } else {
           fileCard.data.push({ url: c.file_url, name: c.file_name || c.fileName, size: c.file_size });
@@ -70,7 +74,7 @@ export default function AgentScopeRuntimeRequestCard(props: {
       }
       return p;
     }, []);
-  }, [props.data.input]);
+  }, [props.data.input, onFileCardClick]);
 
   if (!cards?.length) return null;
 

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Actions.tsx

@@ -40,7 +40,7 @@ export default function Tools(props: {
 
   const actions = compact([
     ...actionsOptionsList.map(i => {
-      const res = i;
+      const res = { ...i } as any;
 
       if (i.render) {
         res.children = React.createElement(i.render, { data: props });

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Builder.tsx

@@ -107,10 +107,41 @@ class AgentScopeRuntimeResponseBuilder {
 
   handleResponse(data: IAgentScopeRuntimeResponse) {
     this.data = produce(this.data, (draft) => {
-      if (!data.output) {
-        data.output = [];
-      }
+      const existingOutput = draft.output || [];
+      const incomingOutput = data.output;
+
       Object.assign(draft, data);
+
+      // If incoming response has no output or empty output, preserve the
+      // accumulated output from streaming to avoid losing intermediate
+      // tool-call messages that were already collected.
+      if (!incomingOutput || incomingOutput.length === 0) {
+        draft.output = existingOutput;
+      } else if (existingOutput.length > 0) {
+        // Merge by id: prefer the version with non-empty content to avoid
+        // a partial-update response wiping out previously accumulated
+        // tool-call data (Bug 2 of issue #4644).
+        const existingMap = new Map(existingOutput.map(m => [m.id, m]));
+        const incomingIds = new Set(incomingOutput.map(m => m.id));
+        const merged = incomingOutput.map(incoming => {
+          const existing = existingMap.get(incoming.id);
+          if (!existing) return incoming;
+          // Prefer the message with content already populated.
+          const incomingHasContent = incoming.content?.length > 0;
+          const existingHasContent = existing.content?.length > 0;
+          if (existingHasContent && !incomingHasContent) {
+            return { ...incoming, content: existing.content };
+          }
+          return incoming;
+        });
+        // Append existing-only messages (not present in incoming).
+        for (const existing of existingOutput) {
+          if (!incomingIds.has(existing.id)) {
+            merged.push(existing);
+          }
+        }
+        draft.output = merged;
+      }
     });
   }
 
@@ -157,7 +188,27 @@ class AgentScopeRuntimeResponseBuilder {
           } else if (data.type === AgentScopeRuntimeContentType.IMAGE) {
             (lastContent as IImageContent).image_url = (data as IImageContent).image_url;
           } else if (data.type === AgentScopeRuntimeContentType.DATA) {
-            (lastContent as IDataContent).data = (data as IDataContent).data;
+            const isStreamingToolInput = [
+              AgentScopeRuntimeMessageType.PLUGIN_CALL,
+              AgentScopeRuntimeMessageType.TOOL_CALL,
+              AgentScopeRuntimeMessageType.MCP_CALL,
+            ].includes(msg.type as AgentScopeRuntimeMessageType);
+
+            if (isStreamingToolInput) {
+              const oldData = (lastContent as IDataContent).data || {};
+              const newData = (data as IDataContent).data || {};
+              const merged: Record<string, any> = { ...oldData };
+              for (const [key, value] of Object.entries(newData)) {
+                if (typeof value === 'string' && typeof merged[key] === 'string') {
+                  merged[key] = merged[key] + value;
+                } else {
+                  merged[key] = value;
+                }
+              }
+              (lastContent as IDataContent).data = merged;
+            } else {
+              (lastContent as IDataContent).data = (data as IDataContent).data;
+            }
           }
         } else {
           msg.content.push(data);

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Message.tsx

@@ -9,6 +9,7 @@ import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext
 
 const Message = React.memo(function ({ data }: { data: IAgentScopeRuntimeMessage }) {
   const replaceMediaURL = useChatAnywhereOptions(v => v.api?.replaceMediaURL);
+  const onFileCardClick = useChatAnywhereOptions(v => v.api?.onFileCardClick);
   const formatMediaURL = React.useCallback((url?: string) => {
     if (!url) return url;
     return replaceMediaURL?.(url) || url;
@@ -36,7 +37,7 @@ const Message = React.memo(function ({ data }: { data: IAgentScopeRuntimeMessage
               url: formatMediaURL(item.file_url),
               name: item.file_name || item.fileName || item.file_id,
               size: item.file_size,
-            }]}></Files>
+            }]} onClick={onFileCardClick}></Files>
           case AgentScopeRuntimeContentType.AUDIO:
             return <Audios key={index} data={[{ src: formatMediaURL(item.audio_url || item.data) }]}></Audios>
           default:

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/Response/Tool.tsx

@@ -1,12 +1,28 @@
-import React from "react";
-import { AgentScopeRuntimeRunStatus, IAgentScopeRuntimeMessage, IDataContent } from "../types";
+import React, { useEffect, useState } from "react";
+import { AgentScopeRuntimeMessageType, AgentScopeRuntimeRunStatus, IAgentScopeRuntimeMessage, IDataContent } from "../types";
 import { ToolCall } from '@agentscope-ai/chat';
 import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
 import Approval from "./Approval";
 
+// output展示后，2s自动关闭
+const OUTPUT_AUTO_COLLAPSE_MS = 2000;
+
 const Tool = React.memo(function ({ data, isApproval = false }: { data: IAgentScopeRuntimeMessage, isApproval?: boolean }) {
   const customToolRenderConfig = useChatAnywhereOptions(v => v.customToolRenderConfig) || {};
 
+  const isOutput = [
+    AgentScopeRuntimeMessageType.PLUGIN_CALL_OUTPUT,
+    AgentScopeRuntimeMessageType.TOOL_CALL_OUTPUT,
+    AgentScopeRuntimeMessageType.MCP_CALL_OUTPUT,
+  ].includes(data.type);
+
+  const [autoCollapsed, setAutoCollapsed] = useState(false);
+  useEffect(() => {
+    if (!isOutput || autoCollapsed) return;
+    const timer = setTimeout(() => setAutoCollapsed(true), OUTPUT_AUTO_COLLAPSE_MS);
+    return () => clearTimeout(timer);
+  }, [isOutput, autoCollapsed]);
+
   if (!data.content?.length) return null;
   const content = data.content as IDataContent<{
     name: string;
@@ -19,13 +35,21 @@ const Tool = React.memo(function ({ data, isApproval = false }: { data: IAgentSc
   const serverLabel = `${content[0].data.server_label ? content[0].data.server_label + ' / ' : ''}`
   const title = `${serverLabel}${toolName}`
 
+  const isInput = [
+    AgentScopeRuntimeMessageType.PLUGIN_CALL,
+    AgentScopeRuntimeMessageType.TOOL_CALL,
+    AgentScopeRuntimeMessageType.MCP_CALL,
+  ].includes(data.type);
+
+  const defaultOpen = isInput || (isOutput && !autoCollapsed);
+
   let node
 
   if (customToolRenderConfig[toolName]) {
     const C = customToolRenderConfig[toolName];
     node = <C data={data} />
   } else {
-    node = <ToolCall loading={loading} defaultOpen={false} title={title === 'undefined' ? '' : title} input={content[0]?.data?.arguments} output={content[1]?.data?.output}></ToolCall>
+    node = <ToolCall key={autoCollapsed ? 'collapsed' : 'open'} loading={loading} defaultOpen={defaultOpen} title={title === 'undefined' ? '' : title} input={content[0]?.data?.arguments} output={content[1]?.data?.output}></ToolCall>
   }
 
   return <>
@@ -35,5 +59,4 @@ const Tool = React.memo(function ({ data, isApproval = false }: { data: IAgentSc
 })
 
 
-export default Tool;
-
+export default Tool;

package/components/AgentScopeRuntimeWebUI/core/AgentScopeRuntime/types.tsx

@@ -123,6 +123,7 @@ export interface IAgentScopeRuntimeError {
 }
 
 export interface IAgentScopeRuntimeRequest {
+  created_at?: number;
   input: {
     role: AgentScopeRuntimeMessageRole | string;
     type: AgentScopeRuntimeMessageType;

package/components/AgentScopeRuntimeWebUI/core/Chat/hooks/useChatController.tsx

@@ -9,30 +9,49 @@ import { InputProps } from "../Input";
 import useChatMessageHandler from "./useChatMessageHandler";
 import useChatRequest from "./useChatRequest";
 import useChatSessionHandler from "./useChatSessionHandler";
+import { useChatAnywhereOptions } from "../../Context/ChatAnywhereOptionsContext";
 import ReactDOM from "react-dom";
 // import mockdata from '../../mock/mock.json'
 
 /**
- * 聊天控制器 Hook - 协调所有聊天相关操作
+ * Chat controller hook — coordinates all chat-related operations.
  */
 export default function useChatController() {
   const setLoading = useContextSelector(ChatAnywhereInputContext, v => v.setLoading);
   const currentSessionId = useContextSelector(ChatAnywhereSessionsContext, v => v.currentSessionId);
+  const apiOptions = useChatAnywhereOptions(v => v.api);
+  const apiOptionsRef = useRef(apiOptions);
+  useEffect(() => {
+    apiOptionsRef.current = apiOptions;
+  }, [apiOptions]);
 
   const currentQARef = useRef<{
     request?: IAgentScopeRuntimeWebUIMessage;
     response?: IAgentScopeRuntimeWebUIMessage;
     abortController?: AbortController;
-  }>({});
-
-  // 消息处理
+    /**
+     * Unique identifier for the currently active SSE request. Incremented on
+     * every new submit / cancel / session-switch. processSSEResponse checks its
+     * own requestId against this value before every write — a mismatch means
+     * the stream is stale and should stop writing (prevents cross-session
+     * leakage and ghost writes from cancelled runs, related to issue #4644).
+     */
+    activeRequestId: number;
+    /**
+     * Snapshot of the session id associated with the active request.
+     * Used to detect stale requests after a session switch.
+     */
+    activeSessionId?: string;
+  }>({ activeRequestId: 0 });
+
+  // Message handler
   const messageHandler = useChatMessageHandler({ currentQARef });
 
-  // 会话处理
+  // Session handler
   const sessionHandler = useChatSessionHandler();
 
   /**
-   * 完成响应
+   * Finalize the current response and reset UI loading state.
    */
   const finishResponse = useCallback((status: 'finished' | 'interrupted' = 'finished') => {
     if (!currentQARef.current.response) return;
@@ -46,7 +65,7 @@ export default function useChatController() {
     sessionHandler.syncSessionMessages(messageHandler.getMessages());
   }, [setLoading, messageHandler, sessionHandler]);
 
-  // API 请求处理
+  // API request handling
   const { request, reconnect } = useChatRequest({
     currentQARef,
     updateMessage: messageHandler.updateMessage,
@@ -55,90 +74,148 @@ export default function useChatController() {
   });
 
   /**
-   * 处理用户提交
+   * Handle user message submission.
    */
   const handleSubmit = useCallback<InputProps['onSubmit']>(async (data) => {
-    // 1. 确保会话存在
+    // 0. Abort any previous in-flight SSE. We do NOT call the cancel API here
+    //    — the user is sending a new message, not explicitly cancelling.
+    //    Cancel is only invoked from handleCancel.
+    currentQARef.current.abortController?.abort();
+
+    // 1. Ensure session exists FIRST. Bumping activeRequestId before this can
+    //    race with the [currentSessionId] effect below: ensureSession may set
+    //    a new sessionId, that effect then bumps activeRequestId again, and
+    //    our own myRequestId becomes stale → the guard after sleep(100) bails
+    //    out and the request is silently dropped. Establishing the session
+    //    first guarantees the effect (if any) has flushed before we snapshot
+    //    myRequestId.
     await sessionHandler.ensureSession(data.query);
 
-    // 2. 更新会话名称（如果是第一条消息）
+    const myRequestId = ++currentQARef.current.activeRequestId;
+    // Snapshot current session id for downstream SSE guard checks
+    currentQARef.current.activeSessionId = sessionHandler.getCurrentSessionId();
+
+    // 2. Update session name (only for the first message)
     const messages = messageHandler.getMessages();
     if (sessionHandler.getCurrentSessionId()) {
       await sessionHandler.updateSessionName(data.query, messages);
     }
 
-    // 3. 创建用户请求消息
+    // 3. Create user request message
     messageHandler.createRequestMessage(data);
     setLoading(true);
     await sleep(100);
 
-    // 4. 创建助手响应消息
+    // If requestId changed during the sleep (session switch / cancel / new submit), bail out
+    if (myRequestId !== currentQARef.current.activeRequestId) return;
+
+    // 4. Create assistant response placeholder
     messageHandler.createResponseMessage();
 
-    // 5. 获取历史消息并发起请求
+    // 5. Gather history messages and fire the request
     const historyMessages = messageHandler.getHistoryMessages();
     await sessionHandler.syncSessionMessages(messageHandler.getMessages());
 
-    await request(historyMessages, data.biz_params);
+    await request(historyMessages, data.biz_params, myRequestId);
     // mockRequest(mockdata);
-  }, [messageHandler, sessionHandler, request]);
+  }, [messageHandler, sessionHandler, request, setLoading]);
 
 
   const handleApproval = useCallback(async ({ input }) => {
+    currentQARef.current.abortController?.abort();
+    // Snapshot the current session id BEFORE bumping requestId, then bump.
+    // Order matches handleSubmit so a concurrent session-change effect cannot
+    // invalidate myRequestId between the bump and the sleep guard below.
+    currentQARef.current.activeSessionId = sessionHandler.getCurrentSessionId();
+    const myRequestId = ++currentQARef.current.activeRequestId;
+
     messageHandler.createApprovalMessage(input);
 
     setLoading(true);
     await sleep(100);
 
+    if (myRequestId !== currentQARef.current.activeRequestId) return;
+
     messageHandler.createResponseMessage();
     const historyMessages = messageHandler.getHistoryMessages();
     await sessionHandler.syncSessionMessages(messageHandler.getMessages());
 
-    await request(historyMessages);
-  }, [messageHandler, sessionHandler, request]);
+    await request(historyMessages, undefined, myRequestId);
+  }, [messageHandler, sessionHandler, request, setLoading]);
 
   /**
-   * 处理取消
-   * 1. 标记 interrupted 并重置 UI（finishResponse）
-   * 2. abort SSE 连接 —— Stream 内部的 Promise.race 会立即 reject AbortError，
-   *    processSSEResponse 的 catch 会检测 interrupted 状态并调用 cancel API
+   * Handle cancel / stop.
+   * 1. Mark response as interrupted and reset UI (finishResponse).
+   * 2. Invoke the cancel API immediately — do NOT wait for the next SSE
+   *    chunk to deliver the cancellation (fixes "backend keeps running
+   *    after stop" issue).
+   * 3. Abort the SSE connection — its catch branch will see
+   *    msgStatus === 'interrupted' and call builder.cancel() to flip the
+   *    in-progress TEXT content to Canceled, so the trailing Markdown
+   *    cursor ("...") disappears.
+   *
+   * NOTE: we intentionally do NOT bump activeRequestId here. Doing so
+   * would make isStillActive() in processSSEResponse return false for
+   * this very cancel, which would short-circuit the catch branch before
+   * builder.cancel() runs and leave the trailing cursor blinking forever.
+   * Stale-chunk protection still holds: abort() breaks the SSE loop
+   * immediately, and the next submit / session switch will bump
+   * activeRequestId on its own.
    */
   const handleCancel = useCallback(() => {
     finishResponse('interrupted');
+    const sessionId = sessionHandler.getCurrentSessionId();
+    const cancelFn = apiOptionsRef.current.cancel;
+    if (cancelFn && sessionId) {
+      try {
+        cancelFn({ session_id: sessionId });
+      } catch (e) {
+        console.error('cancel api failed:', e);
+      }
+    }
     currentQARef.current.abortController?.abort();
-  }, [finishResponse]);
+  }, [finishResponse, sessionHandler]);
 
   /**
-   * 处理重新生成
+   * Handle regenerate (retry the last assistant response).
    */
   const handleRegenerate = useCallback(async (messageId: string) => {
+    currentQARef.current.abortController?.abort();
+    currentQARef.current.activeSessionId = sessionHandler.getCurrentSessionId();
+    const myRequestId = ++currentQARef.current.activeRequestId;
+
     setLoading(true);
 
-    // 1. 移除旧消息
+    // 1. Remove old message
     messageHandler.removeMessageById(messageId);
 
-    // 2. 创建新的响应消息
+    // 2. Create new response placeholder
     currentQARef.current.abortController = new AbortController();
     messageHandler.createResponseMessage();
 
-    // 3. 发起请求
+    // 3. Fire the request
     const historyMessages = messageHandler.getHistoryMessages();
-    await request(historyMessages);
-  }, [messageHandler, request]);
+    await request(historyMessages, undefined, myRequestId);
+  }, [messageHandler, request, sessionHandler, setLoading]);
 
   /**
-   * 处理 SSE 重连（切回未完成的对话时）
+   * Handle SSE reconnection (when switching back to an unfinished conversation).
    * If the reconnect API returns no body or the stream ends without a completion event,
    * treat it as idle: remove the empty placeholder and reset loading.
    */
   const handleReconnect = useCallback(async (sessionId: string) => {
     currentQARef.current.abortController?.abort();
     currentQARef.current.abortController = new AbortController();
+    const myRequestId = ++currentQARef.current.activeRequestId;
+    currentQARef.current.activeSessionId = sessionId;
     setLoading(true);
 
     messageHandler.createResponseMessage();
 
-    await reconnect(sessionId);
+    await reconnect(sessionId, myRequestId);
+
+    // If session was switched or a new request fired during reconnect, bail out
+    if (myRequestId !== currentQARef.current.activeRequestId) return;
 
     // If the response is still in 'generating' state after reconnect completes,
     // onFinish() was never called (no response body, or stream closed without a completion event).
@@ -154,21 +231,40 @@ export default function useChatController() {
     }
   }, [messageHandler, reconnect, setLoading]);
 
-  // 监听会话切换，断开当前 SSE 连接（不通知后端取消）并重置状态
+  // On session switch: abort current SSE (without notifying backend cancel)
+  // and reset state. Also increment activeRequestId so any residual SSE
+  // chunks from the old session are discarded, preventing cross-session leakage.
+  //
+  // IMPORTANT: only bump on a real session change. Running this on initial
+  // mount or when sessionId merely transitions from undefined → <same id>
+  // (e.g. after route navigate / refreshKey churn) would invalidate the
+  // myRequestId taken by an in-flight handleSubmit and silently drop the
+  // outgoing chat request — that was the regression that made existing
+  // sessions unable to send messages until a new chat was created.
   useEffect(() => {
+    const prevSessionId = currentQARef.current.activeSessionId;
+    if (!prevSessionId || prevSessionId === currentSessionId) {
+      // First mount, or no real switch: just sync the snapshot, do not bump.
+      currentQARef.current.activeSessionId = currentSessionId;
+      return;
+    }
+
     currentQARef.current.abortController?.abort();
     currentQARef.current = {
       request: undefined,
       response: undefined,
       abortController: undefined,
+      activeRequestId: currentQARef.current.activeRequestId + 1,
+      activeSessionId: currentSessionId,
     };
 
     return () => {
       currentQARef.current.abortController?.abort();
+      currentQARef.current.activeRequestId += 1;
     };
   }, [currentSessionId]);
 
-  // 监听重连事件
+  // Listen for reconnect events
   useChatAnywhereEventEmitter({
     type: 'handleReconnect',
     callback: async (data) => {
@@ -176,7 +272,7 @@ export default function useChatController() {
     }
   }, [handleReconnect]);
 
-  // 监听重新生成事件
+  // Listen for regenerate events
   useChatAnywhereEventEmitter({
     type: 'handleReplace',
     callback: async (data) => {