@zero-library/chat-copilot 3.1.10 → 3.1.11

package/dist/index.cjs.js

@@ -1401,9 +1401,14 @@ function createChatStore() {
       });
       conversation.messages[conversationId].message = [];
       if (data?.length) {
-        data.forEach((msg) => {
+        const mainMessages = data.filter((msg) => !msg.toolCallId);
+        const subAgentMessages = data.filter((msg) => msg.toolCallId);
+        mainMessages.forEach((msg) => {
           processMessageContent(msg);
         });
+        subAgentMessages.forEach((msg) => {
+          routeSubAgentMessage(msg);
+        });
         finalizeHistoryMessages(conversationId);
         normalizeMessagesByExecutionAndRole(conversation.messages[conversationId].message);
       }
@@ -1469,9 +1474,7 @@ function createChatStore() {
       item.generating = false;
     });
   }
-  function startCallback(msg) {
-    const messages = conversation.messages[msg.conversationId]?.message;
-    if (!messages) return;
+  function startCallback(msg, messages, isMain) {
     const idx = findExecutionMsgIndex(msg, messages);
     const contentItem = msg.content[0];
     if (contentItem.type !== "runStarted") return;
@@ -1482,23 +1485,24 @@ function createChatStore() {
         generating: true
       };
       messages.push(finalMsg);
-      const targetConversation = conversations.list.items.find((item) => item.id === msg.conversationId);
-      if (targetConversation && msg.createdAt) {
-        updateConversations({
-          ...targetConversation,
-          id: targetConversation.id,
-          title: targetConversation.label,
-          updatedAt: msg.createdAt
-        });
+      if (isMain) {
+        const targetConversation = conversations.list.items.find((item) => item.id === msg.conversationId);
+        if (targetConversation && msg.createdAt) {
+          updateConversations({
+            ...targetConversation,
+            id: targetConversation.id,
+            title: targetConversation.label,
+            updatedAt: msg.createdAt
+          });
+        }
       }
     } else {
       const prevContent = messages[idx]?.content || [];
       messages[idx].content = [...prevContent, contentItem];
     }
-    conversation.messages[msg.conversationId].loading = true;
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
   }
-  function textCallback(msg) {
-    const messages = conversation.messages[msg.conversationId]?.message;
+  function textCallback(msg, messages, isMain) {
     const idx = findExecutionMsgIndex(msg, messages);
     const contents = idx !== -1 && messages[idx] ? messages[idx].content || [] : [];
     const nextContent = msg.content[0];
@@ -1527,13 +1531,12 @@ function createChatStore() {
         messages[idx].content = [...contents, normalizedNextContent];
       }
     }
-    conversation.messages[msg.conversationId].loading = true;
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
   }
-  function stepStartedCallback(msg) {
-    const messages = conversation.messages[msg.conversationId]?.message;
+  function stepStartedCallback(msg, messages, isMain) {
     const idx = findExecutionMsgIndex(msg, messages);
     const contentItem = msg.content[0];
-    conversation.messages[msg.conversationId].loading = true;
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
     if (idx !== -1 && messages[idx]) {
       const contentList = messages[idx].content || [];
       const runStartedIndex = contentList.findIndex((item) => item.type === "runStarted");
@@ -1543,38 +1546,34 @@ function createChatStore() {
         messages[idx].content = contentList.map((item, i) => i === runStartedIndex ? nextRunStartedItem : item);
       }
     }
+    if (isMain) config.hooks?.onStepMessage?.(msg);
     config.hooks?.onStepMessage?.(msg);
   }
-  function stepFinishedCallback(msg) {
-    conversation.messages[msg.conversationId].loading = true;
-    config.hooks?.onStepMessage?.(msg);
+  function stepFinishedCallback(msg, _messages, isMain) {
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
+    if (isMain) config.hooks?.onStepMessage?.(msg);
   }
-  function stepErrCallback(msg) {
-    conversation.messages[msg.conversationId].loading = false;
-    const messages = conversation.messages[msg.conversationId]?.message;
-    if (messages) {
-      const idx = findExecutionMsgIndex(msg, messages);
-      const contentItem = msg.content[0];
-      messages.forEach((item) => {
-        if (item.executionId === msg.executionId) {
-          item.generating = false;
-        }
-      });
-      if (idx !== -1) {
-        messages[idx].generating = false;
-      }
-      if (idx !== -1) {
-        const prevContent = messages[idx]?.content || [];
-        messages[idx].content = [...prevContent, contentItem];
-      } else {
-        const finalMsg = { ...msg };
-        finalMsg.generating = false;
-        messages.push(finalMsg);
+  function stepErrCallback(msg, messages, isMain) {
+    if (isMain) conversation.messages[msg.conversationId].loading = false;
+    const idx = findExecutionMsgIndex(msg, messages);
+    const contentItem = msg.content[0];
+    messages.forEach((item) => {
+      if (item.executionId === msg.executionId) {
+        item.generating = false;
       }
+    });
+    if (idx !== -1) {
+      messages[idx].generating = false;
+      const prevContent = messages[idx]?.content || [];
+      messages[idx].content = [...prevContent, contentItem];
+    } else {
+      const finalMsg = { ...msg };
+      finalMsg.generating = false;
+      messages.push(finalMsg);
     }
-    config.hooks?.onStepMessage?.(msg);
+    if (isMain) config.hooks?.onStepMessage?.(msg);
   }
-  function doneCallback(msg) {
+  function doneCallback(msg, message3, isMain) {
     conversation.messages[msg.conversationId].loading = false;
     const messages = conversation.messages[msg.conversationId]?.message;
     if (messages) {
@@ -1595,11 +1594,12 @@ function createChatStore() {
         }
       }
     }
-    config.hooks?.onAfterAcceptMessage?.(msg);
+    if (isMain) config.hooks?.onAfterAcceptMessage?.(msg);
   }
-  function titleCallback(msg) {
+  function titleCallback(msg, _messages, isMain) {
     const content = msg.content[0];
     if (content.type !== "conversationNewTitle") return;
+    if (!isMain) return;
     const title = content.title || "";
     const conversationId = msg.conversationId || "";
     if (content && conversations.list.items.length) {
@@ -1608,9 +1608,7 @@ function createChatStore() {
       conversations.list.items[idx].label = title;
     }
   }
-  function toolCallCallback(msg) {
-    const messages = conversation.messages[msg.conversationId]?.message;
-    if (!messages) return;
+  function toolCallCallback(msg, messages, isMain) {
     let idx = -1;
     const contentItem = msg.content[0];
     if (contentItem.type !== "toolCall") return;
@@ -1646,16 +1644,20 @@ function createChatStore() {
         if (contentItem.status) {
           nextItem.status = contentItem.status;
         }
+        if (contentItem.toolIcon) {
+          nextItem.toolIcon = contentItem.toolIcon;
+        }
+        if (contentItem.display) {
+          nextItem.display = (existingItem.display || "") + contentItem.display;
+        }
         messages[idx].content = contents.map((item, i) => i === existingItemIndex ? nextItem : item);
       } else {
         messages[idx].content = [...contents, contentItem];
       }
     }
-    conversation.messages[msg.conversationId].loading = true;
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
   }
-  function toolResultCallback(msg) {
-    const messages = conversation.messages[msg.conversationId]?.message;
-    if (!messages) return;
+  function toolResultCallback(msg, messages, isMain) {
     const contentItem = msg.content[0];
     if (contentItem.type !== "toolResult") return;
     let idx = -1;
@@ -1686,15 +1688,16 @@ function createChatStore() {
       if (contentItem.title) {
         nextToolCallItem.title = contentItem.title;
       }
+      if (contentItem.display !== void 0) {
+        nextToolCallItem.display = contentItem.display;
+      }
       messages[idx].content = contents.map((item, i) => i === toolCallIndex ? nextToolCallItem : item);
     } else {
       messages[idx].content = [...contents, contentItem];
     }
-    conversation.messages[msg.conversationId].loading = true;
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
   }
-  function a2uiCommandCallback(msg) {
-    const messages = conversation.messages[msg.conversationId]?.message;
-    if (!messages) return;
+  function a2uiCommandCallback(msg, messages, isMain) {
     const idx = findExecutionMsgIndex(msg, messages);
     const contentItem = msg.content[0];
     if (contentItem.type !== "a2uiCommand") return;
@@ -1705,45 +1708,147 @@ function createChatStore() {
       const prevContent = messages[idx]?.content || [];
       messages[idx].content = [...prevContent, contentItem];
     }
-    conversation.messages[msg.conversationId].loading = true;
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
+  }
+  function toolCallDeltaCallback(msg, messages, isMain) {
+    const contentItem = msg.content[0];
+    if (contentItem.type !== "toolCallDelta") return;
+    let idx = -1;
+    if (contentItem.toolCallId) {
+      idx = messages.findLastIndex(
+        (m) => m.content?.some((c) => (c.type === "toolCall" || c.type === "toolCallDelta") && c.toolCallId === contentItem.toolCallId)
+      );
+    }
+    if (idx === -1) idx = findExecutionMsgIndex(msg, messages);
+    if (idx === -1) {
+      messages.push({
+        ...msg,
+        content: [
+          {
+            type: "toolCall",
+            toolCallId: contentItem.toolCallId,
+            toolName: contentItem.toolName || void 0,
+            toolIcon: contentItem.toolIcon,
+            title: contentItem.title,
+            content: contentItem.argumentsDelta || "",
+            display: contentItem.display,
+            status: contentItem.status || "running"
+          }
+        ],
+        generating: true
+      });
+    } else {
+      const contents = messages[idx].content;
+      const itemIdx = contents.findIndex(
+        (c) => (c.type === "toolCall" || c.type === "toolCallDelta") && c.toolCallId === contentItem.toolCallId
+      );
+      if (itemIdx !== -1) {
+        const existing = contents[itemIdx];
+        const nextItem = {
+          ...existing,
+          type: "toolCall",
+          content: (existing.content || "") + (contentItem.argumentsDelta || "")
+        };
+        if (contentItem.toolName) nextItem.toolName = contentItem.toolName;
+        if (contentItem.title) nextItem.title = contentItem.title;
+        if (contentItem.status) nextItem.status = contentItem.status;
+        if (contentItem.toolIcon) nextItem.toolIcon = contentItem.toolIcon;
+        if (contentItem.display) nextItem.display = (existing.display || "") + contentItem.display;
+        messages[idx].content = contents.map((c, i) => i === itemIdx ? nextItem : c);
+      } else {
+        messages[idx].content = [
+          ...contents,
+          {
+            type: "toolCall",
+            toolCallId: contentItem.toolCallId,
+            toolName: contentItem.toolName || void 0,
+            toolIcon: contentItem.toolIcon,
+            title: contentItem.title,
+            content: contentItem.argumentsDelta || "",
+            display: contentItem.display,
+            status: contentItem.status || "running"
+          }
+        ];
+      }
+    }
+    if (isMain) conversation.messages[msg.conversationId].loading = true;
+  }
+  function findToolCallItemRecursive(messages, toolCallId) {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      const contents = msg.content || [];
+      const itemIdx = contents.findIndex((c) => c.type === "toolCall" && c.toolCallId === toolCallId);
+      if (itemIdx !== -1) {
+        return { messageList: msg, itemIndex: itemIdx };
+      }
+      for (const content of contents) {
+        if (content.type === "toolCall") {
+          const subMessages = content.subMessages;
+          if (subMessages?.length) {
+            const found = findToolCallItemRecursive(subMessages, toolCallId);
+            if (found) return found;
+          }
+        }
+      }
+    }
+    return null;
+  }
+  function routeSubAgentMessage(msg) {
+    const conversationId = msg.conversationId;
+    const mainMessages = conversation.messages[conversationId]?.message;
+    if (!mainMessages) return;
+    const found = findToolCallItemRecursive(mainMessages, msg.toolCallId);
+    if (!found) {
+      return;
+    }
+    const { messageList, itemIndex } = found;
+    const contents = messageList.content;
+    const toolCallItem = contents[itemIndex];
+    toolCallItem.hasSubAgent = true;
+    if (!toolCallItem.subMessages) {
+      toolCallItem.subMessages = [];
+    }
+    processMessageContent(msg, toolCallItem.subMessages);
+    messageList.content = contents.map((c, i) => i === itemIndex ? { ...toolCallItem } : c);
   }
-  function processSingleMessageContent(newMessage) {
+  function processSingleMessageContent(newMessage, messages, isMain) {
     switch (newMessage.content[0].type) {
       case "runStarted":
-        startCallback(newMessage);
+        startCallback(newMessage, messages, isMain);
         break;
       case "text":
-        textCallback(newMessage);
+        textCallback(newMessage, messages, isMain);
         break;
       case "stepStarted":
-        stepStartedCallback(newMessage);
+        stepStartedCallback(newMessage, messages, isMain);
         break;
       case "stepFinished":
-        stepFinishedCallback(newMessage);
+        stepFinishedCallback(newMessage, messages, isMain);
         break;
       case "stepError":
-        stepErrCallback(newMessage);
+        stepErrCallback(newMessage, messages, isMain);
         break;
       case "runFinished":
       case "runFailed":
       case "runStopped":
-        doneCallback(newMessage);
+        doneCallback(newMessage, messages, isMain);
         break;
       case "conversationNewTitle":
-        titleCallback(newMessage);
+        titleCallback(newMessage, messages, isMain);
         break;
       case "toolCall":
-        toolCallCallback(newMessage);
+        toolCallCallback(newMessage, messages, isMain);
+        break;
+      case "toolCallDelta":
+        toolCallDeltaCallback(newMessage, messages, isMain);
         break;
       case "toolResult":
-        toolResultCallback(newMessage);
+        toolResultCallback(newMessage, messages, isMain);
         break;
       case "a2uiCommand":
-        a2uiCommandCallback(newMessage);
+        a2uiCommandCallback(newMessage, messages, isMain);
         break;
       default: {
-        const messages = conversation.messages[newMessage.conversationId]?.message;
-        if (!messages) return;
         const idx = findExecutionMsgIndex(newMessage, messages);
         if (idx === -1) {
           const finalMsg = { ...newMessage, generating: true };
@@ -1752,20 +1857,21 @@ function createChatStore() {
           const prevContent = messages[idx]?.content || [];
           messages[idx].content = [...prevContent, ...newMessage.content];
         }
-        conversation.messages[newMessage.conversationId].loading = true;
+        if (isMain) conversation.messages[newMessage.conversationId].loading = true;
         break;
       }
     }
   }
-  function processMessageContent(message3) {
+  function processMessageContent(message3, targetMessages) {
     const newMessage = {
       ...message3,
       agentId: agent.agentInfo.id
     };
+    const isMain = !targetMessages;
+    const messages = targetMessages ?? conversation.messages[newMessage.conversationId]?.message;
+    if (!messages) return;
     const contentList = Array.isArray(newMessage.content) ? newMessage.content : [];
     if (contentList.length === 0) {
-      const messages = conversation.messages[newMessage.conversationId]?.message;
-      if (!messages) return;
       const idx = findExecutionMsgIndex(newMessage, messages);
       if (idx === -1) {
         messages.push({ ...newMessage });
@@ -1781,17 +1887,32 @@ function createChatStore() {
       return;
     }
     contentList.forEach((contentItem) => {
-      processSingleMessageContent({
-        ...newMessage,
-        content: [contentItem]
-      });
+      processSingleMessageContent(
+        {
+          ...newMessage,
+          content: [contentItem]
+        },
+        messages,
+        isMain
+      );
     });
-    normalizeMessagesByExecutionAndRole(conversation.messages[newMessage.conversationId]?.message);
+    normalizeMessagesByExecutionAndRole(messages);
   }
   function isStoppedIncomingMessage(newMessage) {
     const messages = conversation.messages[newMessage.conversationId]?.message;
     if (!messages) return false;
-    return messages.some((item) => item.stopFlag && item.executionId === newMessage.executionId);
+    if (messages.some((item) => item.stopFlag && item.executionId === newMessage.executionId)) {
+      return true;
+    }
+    return messages.some(
+      (msg) => msg.content?.some((c) => {
+        if (c.type === "toolCall") {
+          const subMessages = c.subMessages;
+          return subMessages?.some((sub) => sub.stopFlag && sub.executionId === newMessage.executionId);
+        }
+        return false;
+      })
+    );
   }
   const acceptMessage = async (newMessage) => {
     const conversationId = newMessage.conversationId;
@@ -1801,6 +1922,10 @@ function createChatStore() {
     if (canProceed === false) {
       throw new Error("\u64CD\u4F5C\u88AB\u963B\u6B62");
     }
+    if (newMessage.toolCallId) {
+      routeSubAgentMessage(newMessage);
+      return;
+    }
     if (isStoppedIncomingMessage(newMessage)) {
       conversation.messages[conversationId].loading = false;
       return;
@@ -1882,19 +2007,25 @@ function createChatStore() {
       const lastMsg = messages[messages.length - 1];
       if (lastMsg.executionId) {
         await config.services.request.cancelMessage(lastMsg.executionId);
-        messages.forEach((item) => {
-          if (item.executionId === lastMsg.executionId) {
-            item.generating = false;
-            item.stopFlag = true;
+        const markStopped = (msgList, matchExecutionId) => {
+          msgList.forEach((item) => {
+            if (item.executionId === lastMsg.executionId) {
+              item.generating = false;
+              item.stopFlag = true;
+            }
             if (item.content && Array.isArray(item.content)) {
               item.content.forEach((contentItem) => {
                 if (contentItem.type === "toolCall" && contentItem.status !== "success" && contentItem.status !== "error") {
                   contentItem.status = "error";
                 }
+                if (contentItem.subMessages?.length) {
+                  markStopped(contentItem.subMessages);
+                }
               });
             }
-          }
-        });
+          });
+        };
+        markStopped(messages);
       } else {
         lastMsg.stopFlag = true;
         lastMsg.generating = false;
@@ -4576,7 +4707,8 @@ var FilesNode = React10__namespace.default.memo(({ item }) => {
 
 // src/components/CustomComponents/MessageNode/style.module.less
 var style_module_default2 = {
-  runStartedNode: "style_module_runStartedNode"};
+  runStartedNode: "style_module_runStartedNode",
+  dot: "style_module_dot"};
 var QuoteMsgNode = React10__namespace.default.memo(({ quoteMsg, role }) => {
   if (!quoteMsg || !quoteMsg.messageContent) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4607,9 +4739,12 @@ var QuoteMsgNode = React10__namespace.default.memo(({ quoteMsg, role }) => {
     }
   );
 });
-var RunStartedNode = React10__namespace.default.memo(({ loading }) => {
-  if (!loading) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(antd.Flex, { gap: 8, align: "center", className: style_module_default2.runStartedNode, children: /* @__PURE__ */ jsxRuntime.jsx(icons.LoadingOutlined, { style: { color: "#1677ff" } }) });
+var RunStartedNode = React10__namespace.default.memo(() => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: style_module_default2.runStartedNode, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: style_module_default2.dot }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: style_module_default2.dot }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: style_module_default2.dot })
+  ] });
 });
 var RESOURCE_MARKDOWN_TAG = "resourcetag";
 var RESOURCE_TOKEN_REGEX = /(\w+):\/\/([^?\s]+)\?name=([^&\s]+)&label=([^\s]+)/g;
@@ -4663,11 +4798,17 @@ var TextNode2 = React10__namespace.default.memo(
 var index_module_default2 = {
   iconContainer: "index_module_iconContainer",
   toolName: "index_module_toolName",
+  toolNamePending: "index_module_toolNamePending",
+  dot: "index_module_dot",
   duration: "index_module_duration",
   statusIcon: "index_module_statusIcon",
+  expandIcon: "index_module_expandIcon",
+  expanded: "index_module_expanded",
   sectionLabel: "index_module_sectionLabel",
+  plainTextContainer: "index_module_plainTextContainer",
   markdownContainer: "index_module_markdownContainer",
   sectionBlock: "index_module_sectionBlock",
+  contentScrollContainer: "index_module_contentScrollContainer",
   todoList: "index_module_todoList",
   todoItem: "index_module_todoItem",
   statusIconWrapper: "index_module_statusIconWrapper",
@@ -4677,6 +4818,9 @@ var index_module_default2 = {
   emptyText: "index_module_emptyText"
 };
 var DefaultToolRender = ({ argsContent, resultContent, errorMessage, item }) => {
+  if (item.display) {
+    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: index_module_default2.plainTextContainer, children: item.display });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     (item.content || item.arguments) && argsContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: index_module_default2.sectionBlock, children: [
       /* @__PURE__ */ jsxRuntime.jsx(antd.Typography.Text, { className: index_module_default2.sectionLabel, children: "\u8F93\u5165\u53C2\u6570" }),
@@ -4780,7 +4924,7 @@ var formatContent = (content) => {
 };
 var ToolCallItem = ({ item }) => {
   const { token } = antd.theme.useToken();
-  const renderConfig = getToolRenderConfig(item.toolName);
+  const renderConfig = getToolRenderConfig(item);
   const CustomRender = renderConfig.component;
   const status = React10.useMemo(() => {
     if (item.status) return item.status;
@@ -4804,35 +4948,30 @@ var ToolCallItem = ({ item }) => {
       alwaysShow = renderConfig.alwaysShowContent;
     }
     if (alwaysShow) return true;
-    return Boolean(item.errorMessage);
-  }, [renderConfig.disableExpandOnError, renderConfig.alwaysShowContent, item.errorMessage, status, argsContent.parsed, resultContent?.parsed]);
+    if (item.display) return true;
+    if (item.errorMessage) return true;
+    if (argsContent.text) return true;
+    if (resultContent?.text) return true;
+    return false;
+  }, [
+    renderConfig.disableExpandOnError,
+    renderConfig.alwaysShowContent,
+    item.display,
+    item.errorMessage,
+    status,
+    argsContent.parsed,
+    resultContent?.parsed,
+    argsContent.text,
+    resultContent?.text
+  ]);
   const isDefaultExpanded = React10.useMemo(() => {
     if (typeof renderConfig.defaultExpanded === "function") {
       return renderConfig.defaultExpanded(argsContent.parsed, resultContent?.parsed);
     }
     return renderConfig.defaultExpanded;
   }, [renderConfig.defaultExpanded, argsContent.parsed, resultContent?.parsed]);
-  const statusConfig = {
-    running: {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.LoadingOutlined, {}),
-      color: token.colorPrimary
-    },
-    success: {
-      icon: null,
-      color: token.colorSuccess
-    },
-    error: {
-      icon: null,
-      color: token.colorSuccess
-    },
-    pending: {
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons.LoadingOutlined, {}),
-      color: token.colorTextSecondary
-    }
-  }[status] || {
-    icon: /* @__PURE__ */ jsxRuntime.jsx(icons.LoadingOutlined, {}),
-    color: token.colorPrimary
-  };
+  const showLoading = status === "running" || status === "pending";
+  const displayName = item.title || (showLoading ? "" : item.toolName || "Unknown Tool");
   const renderIcon = () => {
     if (!item.toolIcon) {
       return /* @__PURE__ */ jsxRuntime.jsx(icons.ToolOutlined, { style: { fontSize: 14, color: token.colorTextSecondary } });
@@ -4850,9 +4989,11 @@ var ToolCallItem = ({ item }) => {
       collapsible: hasContent ? void 0 : "disabled",
       defaultActiveKey: isDefaultExpanded && hasContent ? [item.toolCallId || "fallback-key"] : void 0,
       expandIconPlacement: "end",
+      expandIcon: ({ isActive }) => hasContent ? /* @__PURE__ */ jsxRuntime.jsx(icons.RightOutlined, { className: `${index_module_default2.expandIcon} ${isActive ? index_module_default2.expanded : ""}` }) : null,
       styles: {
         header: {
-          padding: "6px 10px"
+          padding: "6px 10px",
+          overflow: "hidden"
         }
       },
       items: [
@@ -4861,14 +5002,18 @@ var ToolCallItem = ({ item }) => {
           showArrow: hasContent,
           label: /* @__PURE__ */ jsxRuntime.jsxs(antd.Flex, { align: "center", gap: 8, style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: index_module_default2.iconContainer, children: renderIcon() }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: index_module_default2.toolName, children: item.title || item.toolName || "Unknown Tool" }),
-            (status === "running" || status === "pending") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: index_module_default2.statusIcon, style: { color: statusConfig.color }, children: statusConfig.icon }),
+            displayName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: index_module_default2.toolName, children: displayName }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: index_module_default2.toolNamePending, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: index_module_default2.dot }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: index_module_default2.dot }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: index_module_default2.dot })
+            ] }),
+            showLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: index_module_default2.statusIcon, style: { color: token.colorPrimary }, children: /* @__PURE__ */ jsxRuntime.jsx(icons.LoadingOutlined, {}) }),
             item.duration && /* @__PURE__ */ jsxRuntime.jsxs(antd.Typography.Text, { className: index_module_default2.duration, children: [
               item.duration,
               "ms"
             ] })
           ] }),
-          children: /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: index_module_default2.contentScrollContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
             CustomRender,
             {
               item,
@@ -4878,7 +5023,7 @@ var ToolCallItem = ({ item }) => {
               resultContent,
               errorMessage: item.errorMessage
             }
-          )
+          ) })
         }
       ]
     }
@@ -4892,9 +5037,6 @@ var MessageRender_default = React10__namespace.default.memo(({ role, message: me
       if (!RENDERABLE_MESSAGE_TYPES.includes(item.type)) {
         return false;
       }
-      if (item.type === "runStarted") {
-        return !!loading;
-      }
       if (item.type === "plan") {
         return !shouldHideA2uiPlan(item);
       }
@@ -4904,7 +5046,7 @@ var MessageRender_default = React10__namespace.default.memo(({ role, message: me
       }
       return true;
     });
-  }, [loading, message3.content]);
+  }, [message3.content]);
   const quoteMsg = React10.useMemo(() => {
     const quoteMsg2 = {};
     if (message3.params) {
@@ -4918,7 +5060,8 @@ var MessageRender_default = React10__namespace.default.memo(({ role, message: me
     }
     return common.isEmptyObj(quoteMsg2) ? null : quoteMsg2;
   }, [message3.params, message3.quoteMsg]);
-  if (content.length === 0) return null;
+  const showPending = loading && (content.length === 0 || content[content.length - 1].type !== "text");
+  if (content.length === 0 && !showPending) return null;
   const lastToolCallIndex = (() => {
     let lastIdx = -1;
     content.forEach((item, i) => {
@@ -4935,7 +5078,6 @@ var MessageRender_default = React10__namespace.default.memo(({ role, message: me
           placement: role.placement,
           variant: item.type === "files" ? "borderless" : void 0,
           content: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            item.type === "runStarted" && /* @__PURE__ */ jsxRuntime.jsx(RunStartedNode, { loading }, `flow-start-${index}`),
             (item.type === "toolCall" || item.type === "toolResult") && /* @__PURE__ */ jsxRuntime.jsx(tool_call_item_default, { item }, `tool-call-${item.toolCallId || index}`),
             item.type === "text" && /* @__PURE__ */ jsxRuntime.jsx(
               TextNode2,
@@ -4956,6 +5098,7 @@ var MessageRender_default = React10__namespace.default.memo(({ role, message: me
       ),
       index === lastToolCallIndex && messageIndex >= 0 ? /* @__PURE__ */ jsxRuntime.jsx(A2uiMessageCards, { messageIndex, message: message3 }) : null
     ] }, `message-${index}`)),
+    showPending && /* @__PURE__ */ jsxRuntime.jsx(xV2.Bubble, { role: role.user, placement: role.placement, content: /* @__PURE__ */ jsxRuntime.jsx(RunStartedNode, {}) }),
     quoteMsg && /* @__PURE__ */ jsxRuntime.jsx(QuoteMsgNode, { quoteMsg, role })
   ] });
 });