@lobehub/chat 1.106.3 → 1.106.5

package/src/features/Conversation/Messages/Assistant/Tool/Render/CustomRender.tsx

@@ -6,6 +6,7 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import PluginResult from '@/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResultJSON';
 import PluginRender from '@/features/PluginsUI/Render';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
@@ -39,6 +40,7 @@ const CustomRender = memo<CustomRenderProps>(
     showPluginRender,
     setShowPluginRender,
     pluginError,
+    tool_call_id,
   }) => {
     const { t } = useTranslation(['tool', 'common']);
     const [loading] = useChatStore((s) => [chatSelectors.isPluginApiInvoking(id)(s)]);
@@ -80,9 +82,9 @@ const CustomRender = memo<CustomRenderProps>(
 
     if (loading) return <Arguments arguments={requestArgs} shine />;
 
-    return (
-      <Flexbox gap={12} id={id} width={'100%'}>
-        {showPluginRender ? (
+    if (showPluginRender)
+      return (
+        <Flexbox gap={12} id={id} width={'100%'}>
           <PluginRender
             arguments={plugin?.arguments}
             content={content}
@@ -94,37 +96,44 @@ const CustomRender = memo<CustomRenderProps>(
             pluginState={pluginState}
             type={plugin?.type}
           />
-        ) : isEditing ? (
-          <KeyValueEditor
-            initialValue={safeParseJson(requestArgs || '')}
-            onCancel={handleCancel}
-            onFinish={handleFinish}
-          />
-        ) : (
-          <Arguments
-            actions={
-              <>
-                <ActionIcon
-                  icon={Edit3Icon}
-                  onClick={() => {
-                    setIsEditing(true);
-                  }}
-                  size={'small'}
-                  title={t('edit', { ns: 'common' })}
-                />
-                <ActionIcon
-                  icon={PlayCircleIcon}
-                  onClick={async () => {
-                    await reInvokeToolMessage(id);
-                  }}
-                  size={'small'}
-                  title={t('run', { ns: 'common' })}
-                />
-              </>
-            }
-            arguments={requestArgs}
-          />
-        )}
+        </Flexbox>
+      );
+
+    if (isEditing)
+      return (
+        <KeyValueEditor
+          initialValue={safeParseJson(requestArgs || '')}
+          onCancel={handleCancel}
+          onFinish={handleFinish}
+        />
+      );
+
+    return (
+      <Flexbox gap={12} id={id} width={'100%'}>
+        <Arguments
+          actions={
+            <>
+              <ActionIcon
+                icon={Edit3Icon}
+                onClick={() => {
+                  setIsEditing(true);
+                }}
+                size={'small'}
+                title={t('edit', { ns: 'common' })}
+              />
+              <ActionIcon
+                icon={PlayCircleIcon}
+                onClick={async () => {
+                  await reInvokeToolMessage(id);
+                }}
+                size={'small'}
+                title={t('run', { ns: 'common' })}
+              />
+            </>
+          }
+          arguments={requestArgs}
+        />
+        {tool_call_id && <PluginResult toolCallId={tool_call_id} variant={'outlined'} />}
       </Flexbox>
     );
   },

package/src/features/Conversation/Messages/Assistant/Tool/index.tsx

@@ -1,7 +1,9 @@
-import { CSSProperties, memo, useState } from 'react';
+import { CSSProperties, memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AnimatedCollapsed from '@/components/AnimatedCollapsed';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
 
 import Inspectors from './Inspector';
 import Render from './Render';
@@ -15,29 +17,44 @@ export interface InspectorProps {
   messageId: string;
   payload: object;
   style?: CSSProperties;
+  type?: string;
 }
 
 const Tool = memo<InspectorProps>(
-  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, payload }) => {
-    const [showRender, setShowRender] = useState(true);
+  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, payload, type }) => {
+    const [showDetail, setShowDetail] = useState(type !== 'mcp');
     const [showPluginRender, setShowPluginRender] = useState(false);
+    const isLoading = useChatStore(chatSelectors.isInToolsCalling(messageId, index));
+
+    useEffect(() => {
+      if (type !== 'mcp') return;
+
+      setTimeout(
+        () => {
+          setShowDetail(isLoading);
+        },
+        isLoading ? 1 : 1500,
+      );
+    }, [isLoading]);
 
     return (
       <Flexbox gap={8} style={style}>
         <Inspectors
           apiName={apiName}
           arguments={requestArgs}
+          // mcp don't have ui render
+          hidePluginUI={type === 'mcp'}
           id={id}
           identifier={identifier}
           index={index}
           messageId={messageId}
           payload={payload}
           setShowPluginRender={setShowPluginRender}
-          setShowRender={setShowRender}
+          setShowRender={setShowDetail}
           showPluginRender={showPluginRender}
-          showRender={showRender}
+          showRender={showDetail}
         />
-        <AnimatedCollapsed open={showRender}>
+        <AnimatedCollapsed open={showDetail}>
           <Render
             messageId={messageId}
             requestArgs={requestArgs}

package/src/features/Conversation/Messages/Assistant/index.tsx

@@ -79,6 +79,7 @@ export const AssistantMessage = memo<
               key={toolCall.id}
               messageId={id}
               payload={toolCall}
+              type={toolCall.type}
             />
           ))}
         </Flexbox>

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -77,7 +77,6 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
           initialTopMostItemIndex={dataSource?.length - 1}
           isScrolling={setIsScrolling}
           itemContent={itemContent}
-          overscan={overscan}
           ref={virtuosoRef}
         />
         <AutoScroll

package/src/server/services/mcp/index.test.ts

@@ -0,0 +1,161 @@
+import { TRPCError } from '@trpc/server';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+// Mock 依赖
+vi.mock('@/libs/mcp');
+
+describe('MCPService', () => {
+  let mcpService: any;
+  let mockClient: any;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    // 动态导入服务实例
+    const { mcpService: importedService } = await import('./index');
+    mcpService = importedService;
+
+    // 创建 mock 客户端
+    mockClient = {
+      callTool: vi.fn(),
+    };
+
+    // Mock getClient 方法返回 mock 客户端
+    vi.spyOn(mcpService as any, 'getClient').mockResolvedValue(mockClient);
+  });
+
+  describe('callTool', () => {
+    const mockParams = {
+      name: 'test-mcp',
+      type: 'stdio' as const,
+      command: 'test-command',
+      args: ['--test'],
+    };
+
+    it('should return original data when content array is empty', async () => {
+      mockClient.callTool.mockResolvedValue({
+        content: [],
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toEqual([]);
+    });
+
+    it('should return original data when content is null or undefined', async () => {
+      mockClient.callTool.mockResolvedValue({
+        content: null,
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toBeNull();
+    });
+
+    it('should return parsed JSON when single element contains valid JSON', async () => {
+      const jsonData = { message: 'Hello World', status: 'success' };
+      mockClient.callTool.mockResolvedValue({
+        content: [{ type: 'text', text: JSON.stringify(jsonData) }],
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toEqual(jsonData);
+    });
+
+    it('should return plain text when single element contains non-JSON text', async () => {
+      const textData = 'Hello World';
+      mockClient.callTool.mockResolvedValue({
+        content: [{ type: 'text', text: textData }],
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toBe(textData);
+    });
+
+    it('should return original data when single element has no text', async () => {
+      const contentData = [{ type: 'text', text: '' }];
+      mockClient.callTool.mockResolvedValue({
+        content: contentData,
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toEqual(contentData);
+    });
+
+    it('should return complete array when content has multiple elements', async () => {
+      const multipleContent = [
+        { type: 'text', text: 'First message' },
+        { type: 'text', text: 'Second message' },
+        { type: 'text', text: '{"json": "data"}' },
+      ];
+
+      mockClient.callTool.mockResolvedValue({
+        content: multipleContent,
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      // 应该直接返回完整的数组，不进行任何处理
+      expect(result).toEqual(multipleContent);
+    });
+
+    it('should return complete array when content has two elements', async () => {
+      const twoContent = [
+        { type: 'text', text: 'First message' },
+        { type: 'text', text: 'Second message' },
+      ];
+
+      mockClient.callTool.mockResolvedValue({
+        content: twoContent,
+        isError: false,
+      });
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toEqual(twoContent);
+    });
+
+    it('should return error result when isError is true', async () => {
+      const errorResult = {
+        content: [{ type: 'text', text: 'Error occurred' }],
+        isError: true,
+      };
+
+      mockClient.callTool.mockResolvedValue(errorResult);
+
+      const result = await mcpService.callTool(mockParams, 'testTool', '{}');
+
+      expect(result).toEqual(errorResult);
+    });
+
+    it('should throw TRPCError when client throws error', async () => {
+      const error = new Error('MCP client error');
+      mockClient.callTool.mockRejectedValue(error);
+
+      await expect(mcpService.callTool(mockParams, 'testTool', '{}')).rejects.toThrow(TRPCError);
+    });
+
+    it('should parse args string correctly', async () => {
+      const argsObject = { param1: 'value1', param2: 'value2' };
+      const argsString = JSON.stringify(argsObject);
+
+      mockClient.callTool.mockResolvedValue({
+        content: [{ type: 'text', text: 'result' }],
+        isError: false,
+      });
+
+      await mcpService.callTool(mockParams, 'testTool', argsString);
+
+      expect(mockClient.callTool).toHaveBeenCalledWith('testTool', argsObject);
+    });
+  });
+});

package/src/server/services/mcp/index.ts

@@ -166,8 +166,11 @@ class MCPService {
 
       const data = content as { text: string; type: 'text' }[];
 
-      const text = data?.[0]?.text;
+      if (!data || data.length === 0) return data;
 
+      if (data.length > 1) return data;
+
+      const text = data[0]?.text;
       if (!text) return data;
 
       // try to get json object, which will be stringify in the client

package/src/store/chat/slices/aiChat/actions/generateAIChat.ts

@@ -108,6 +108,11 @@ export interface AIGenerateAction {
     id?: string,
     action?: Action,
   ) => AbortController | undefined;
+  internal_toggleMessageInToolsCalling: (
+    loading: boolean,
+    id?: string,
+    action?: Action,
+  ) => AbortController | undefined;
   /**
    * Controls the streaming state of tool calling processes, updating the UI accordingly
    */
@@ -445,6 +450,7 @@ export const generateAIChat: StateCreator<
 
       // if it's the function call message, trigger the function method
       if (isToolsCalling) {
+        get().internal_toggleMessageInToolsCalling(true, assistantId);
         await refreshMessages();
         await triggerToolCalls(assistantId, {
           threadId: params?.threadId,
@@ -467,6 +473,7 @@ export const generateAIChat: StateCreator<
 
     // 5. if it's the function call message, trigger the function method
     if (isFunctionCall) {
+      get().internal_toggleMessageInToolsCalling(true, assistantId);
       await refreshMessages();
       await triggerToolCalls(assistantId, {
         threadId: params?.threadId,
@@ -828,6 +835,9 @@ export const generateAIChat: StateCreator<
   internal_toggleChatLoading: (loading, id, action) => {
     return get().internal_toggleLoadingArrays('chatLoadingIds', loading, id, action);
   },
+  internal_toggleMessageInToolsCalling: (loading, id) => {
+    return get().internal_toggleLoadingArrays('messageInToolsCallingIds', loading, id);
+  },
   internal_toggleChatReasoning: (loading, id, action) => {
     return get().internal_toggleLoadingArrays('reasoningLoadingIds', loading, id, action);
   },

package/src/store/chat/slices/aiChat/initialState.ts

@@ -6,6 +6,7 @@ export interface ChatAIChatState {
   chatLoadingIdsAbortController?: AbortController;
   inputFiles: File[];
   inputMessage: string;
+  messageInToolsCallingIds: string[];
   /**
    * is the message is in RAG flow
    */
@@ -26,6 +27,7 @@ export const initialAiChatState: ChatAIChatState = {
   chatLoadingIds: [],
   inputFiles: [],
   inputMessage: '',
+  messageInToolsCallingIds: [],
   messageRAGLoadingIds: [],
   pluginApiLoadingIds: [],
   reasoningLoadingIds: [],

package/src/store/chat/slices/message/selectors.ts

@@ -177,6 +177,14 @@ const isToolCallStreaming = (id: string, index: number) => (s: ChatStoreState) =
   return isLoading[index];
 };
 
+const isInToolsCalling = (id: string, index: number) => (s: ChatStoreState) => {
+  const isStreamingToolsCalling = isToolCallStreaming(id, index)(s);
+
+  const isInvokingPluginApi = s.messageInToolsCallingIds.includes(id);
+
+  return isStreamingToolsCalling || isInvokingPluginApi;
+};
+
 const isAIGenerating = (s: ChatStoreState) =>
   s.chatLoadingIds.some((id) => mainDisplayChatIDs(s).includes(id));
 
@@ -223,6 +231,7 @@ export const chatSelectors = {
   isCreatingMessage,
   isCurrentChatLoaded,
   isHasMessageLoading,
+  isInToolsCalling,
   isMessageEditing,
   isMessageGenerating,
   isMessageInChatReasoning,

package/src/store/chat/slices/plugin/action.ts

@@ -283,6 +283,8 @@ export const chatPlugin: StateCreator<
 
     await Promise.all(messagePools);
 
+    await get().internal_toggleMessageInToolsCalling(false, assistantId);
+
     // only default type tool calls should trigger AI message
     if (!shouldCreateMessage) return;