feat(chatmessage): add codeblock click callback (#332)

* feat(chatmessage): add codeblock click callback

* feat(chatengine): toolcallname append

Author: carolin913

src/chat-engine/adapters/agui/event-mapper.ts

@@ -1,6 +1,6 @@
 /* eslint-disable class-methods-use-this */
 import type { AIMessageContent, SSEChunkData, ToolCall } from '../../type';
-import { EventType, isStateEvent,isTextMessageEvent, isThinkingEvent, isToolCallEvent } from './events';
+import { EventType, isStateEvent, isTextMessageEvent, isThinkingEvent, isToolCallEvent } from './events';
 import { stateManager } from './state-manager';
 import {
   addToReasoningData,
@@ -301,7 +301,8 @@ export class AGUIEventMapper {
       parentMessageId: event.parentMessageId || '',
     };
 
-    const toolCallContent = createToolCallContent(this.toolCallMap[event.toolCallId], 'pending');
+    // 每个toocallstart都会开始一个新的内容块，使用append（添加新的工具调用，使用不同的渲染组件）
+    const toolCallContent = createToolCallContent(this.toolCallMap[event.toolCallId], 'pending', 'append');
 
     if (this.reasoningContext.active) {
       // Reasoning 模式：添加 toolcall 到 reasoning.data
@@ -312,7 +313,8 @@ export class AGUIEventMapper {
       return createReasoningContent(data, 'streaming', 'merge', false);
     }
     // 独立模式：返回独立的工具调用内容块
-    return { ...toolCallContent, strategy: 'append' };
+    // 通过 type (toolcall-${toolCallName}) + strategy 来控制是否合并
+    return toolCallContent;
   }
 
   /**
@@ -408,7 +410,10 @@ export class AGUIEventMapper {
       const currentIndex = this.reasoningContext.currentDataIndex;
       if (currentIndex >= 0 && this.reasoningContext.currentData[currentIndex]) {
         const currentContent = this.reasoningContext.currentData[currentIndex];
-        if (currentContent.type === 'toolcall') {
+        const currentType = currentContent.type;
+
+        // 检查 type 是否匹配（toolcall-${toolCallName}）
+        if (currentType.startsWith('toolcall')) {
           const updatedContent = {
             ...currentContent,
             data: this.toolCallMap[toolCallId],
@@ -427,6 +432,7 @@ export class AGUIEventMapper {
       return null;
     }
     // 独立模式：返回独立的 toolcall 更新
+    // 通过相同的 type (toolcall-${toolCallName}) 来实现 merge
     return createToolCallContent(this.toolCallMap[toolCallId], status, 'merge');
   }
 

src/chat-engine/adapters/agui/utils.ts

@@ -206,15 +206,17 @@ export function createThinkingContent(
  * 创建 toolcall 类型的 AIMessageContent
  * @param toolCall 工具调用数据
  * @param status 状态
- * @param strategy 策略
+ * @param strategy 策略（可选，会根据 toolCallName 自动判断）
  * @returns toolcall 类型的 AIMessageContent
  */
 export function createToolCallContent(
   toolCall: any,
   status: 'pending' | 'streaming' | 'complete' = 'pending',
   strategy: 'append' | 'merge' = 'append',
 ): any {
-  return createAIMessageContent('toolcall', toolCall, status, strategy);
+  // 根据 toolCallName 生成唯一的 type
+  const type = `toolcall-${toolCall.toolCallName}`;
+  return createAIMessageContent(type, toolCall, status, strategy);
 }
 
 /**
@@ -393,14 +395,15 @@ export function convertReasoningMessages(reasoningMessages: any[]): any[] {
       if (msg.toolCalls && msg.toolCalls.length > 0) {
         msg.toolCalls.forEach((toolCall: any) => {
           const toolResult = toolCallMap.get(toolCall.id)?.result || '';
+          const toolCallData = {
+            toolCallId: toolCall.id,
+            toolCallName: toolCall.function.name,
+            args: toolCall.function.arguments,
+            result: toolResult,
+          };
           reasoningData.push({
-            type: 'toolcall',
-            data: {
-              toolCallId: toolCall.id,
-              toolCallName: toolCall.function.name,
-              args: toolCall.function.arguments,
-              result: toolResult,
-            },
+            type: `toolcall-${toolCall.function.name}`,
+            data: toolCallData,
             status: 'complete',
           });
         });
@@ -456,14 +459,16 @@ export function processToolCalls(toolCalls: any[], toolCallMap: Map<string, any>
       };
     }
 
+    const toolCallData = {
+      toolCallId: toolCall.id,
+      toolCallName: toolCall.function.name,
+      args: toolCall.function.arguments,
+      result: toolResult,
+    };
+
     return {
-      type: 'toolcall' as const,
-      data: {
-        toolCallId: toolCall.id,
-        toolCallName: toolCall.function.name,
-        args: toolCall.function.arguments,
-        result: toolResult,
-      },
+      type: `toolcall-${toolCall.function.name}` as const,
+      data: toolCallData,
     };
   });
 }

src/chat-engine/index.ts

@@ -457,15 +457,16 @@ export default class ChatEngine implements IChatEngine {
     //  const processed = this.messageProcessor.processContentUpdate(lastContent, rawChunk);
     //  this.messageStore.appendContent(messageId, processed);
 
-    let targetIndex;
+    let targetIndex: number;
     // 作为新的内容块追加
     if (rawChunk?.strategy === 'append') {
       targetIndex = -1;
     } else {
-      // 合并/替换到现有同类型内容中
+      // merge 策略：按 type 查找最后一个匹配的类型
+      // 通过 type (如 toolcall-${toolCallName}) 来定位要更新的内容块
       targetIndex = message.content.findIndex((content: AIMessageContent) => content.type === rawChunk.type);
       if (targetIndex !== -1) {
-        // 找到最后一个匹配的类型
+        // 找到最后一个匹配的类型（从后往前查找）
         for (let i = message.content.length - 1; i >= 0; i--) {
           if (message.content[i].type === rawChunk.type) {
             targetIndex = i;

src/chat-engine/utils/index.ts

@@ -115,7 +115,7 @@ export function isAttachmentContent(content: UserMessageContent): content is Att
 }
 
 export function isToolCallContent(content: AIMessageContent): content is ToolCallContent {
-  return content.type === 'toolcall';
+  return content.type.startsWith('toolcall');
 }
 
 export function isReasoningContent(content) {

src/chat-message/chat-item.tsx

@@ -122,8 +122,22 @@ export default class ChatItem extends Component<ChatMessageProps> {
 
   ready(): void {
     setExportparts(this);
+
+    // 监听代码复制事件
+    this.addEventListener('code_copy', this.handleCodeCopy as EventListener);
+  }
+
+  uninstall(): void {
+    // 清理事件监听
+    this.removeEventListener('code_copy', this.handleCodeCopy as EventListener);
   }
 
+  private handleCodeCopy = (event: CustomEvent) => {
+    event.stopPropagation();
+    const { code, lang } = event.detail;
+    this.handleClickAction('codeCopy' as TdChatMessageActionName, { code, lang });
+  };
+
   private renderMessageHeader() {
     const { name, datetime } = this.props;
     return (

src/chat-message/md/chat-md-code.tsx

@@ -62,8 +62,21 @@ export default class ChatMDCode extends Component<TdChatCodeProps> {
   }
 
   clickCopyHandler = () => {
+    const code = this.props['data-code'] || '';
+    const lang = this.props['data-lang'];
+
+    // 派发事件到外层
+    this.fire(
+      'code_copy',
+      { code, lang },
+      {
+        bubbles: true,
+        composed: true,
+      },
+    );
+
     navigator.clipboard
-      .writeText(this.props['data-code'] || '')
+      .writeText(code)
       .then(() => {
         this.msgInstance = MessagePlugin.success('复制成功');
       })

src/chat-message/type.ts

@@ -29,7 +29,7 @@ type TdChatContentSuggestionProps = {
 
 export type TdChatMessageVariant = 'base' | 'text' | 'outline';
 
-export type TdChatMessageActionName = TdChatActionsName | 'searchResult' | 'searchItem' | 'suggestion';
+export type TdChatMessageActionName = TdChatActionsName | 'searchResult' | 'searchItem' | 'suggestion' | 'codeCopy';
 export interface TdChatMessageAction {
   name: TdChatMessageActionName;
   render: TNode;

src/chatbot/_example/basic.tsx

@@ -8,6 +8,7 @@ import { TdChatMessageConfigItem } from 'tdesign-web-components/chatbot';
 import type { TdAttachmentItem } from 'tdesign-web-components/filecard';
 
 import Chatbot from '../chat';
+import mdContent from '../mock/testMarkdown.md?raw';
 
 // 天气扩展类型定义
 declare module '../../chat-engine/type' {
@@ -164,8 +165,8 @@ const mockData: ChatMessagesData[] = [
     role: 'assistant',
     content: [
       {
-        type: 'text',
-        data: '出错了',
+        type: 'markdown',
+        data: mdContent,
       },
     ],
   },
@@ -454,6 +455,9 @@ export default class BasicChat extends Component {
             event.stopPropagation();
             console.log('searchItem', content);
           },
+          codeCopy: (data) => {
+            console.log('codeCopy', data);
+          },
         },
         chatContentProps: {
           search: {

src/range-input/index.ts

@@ -1,11 +1,11 @@
 import './style/index.js';
 
 import _RangeInput from './RangeInput.jsx';
-import _RangeInputPopup from './RangeInputPopup';
+// import _RangeInputPopup from './RangeInputPopup';
 
 export type { RangeInputProps } from './RangeInput.jsx';
 export * from './type';
 
 export const RangeInput = _RangeInput;
-export const RangeInputPopup = _RangeInputPopup;
+// export const RangeInputPopup = _RangeInputPopup;
 export default RangeInput;