@lobehub/chat 1.106.4 → 1.106.5

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.106.5](https://github.com/lobehub/lobe-chat/compare/v1.106.4...v1.106.5)
+
+<sup>Released on **2025-07-30**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve mcp plugin calling and display.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve mcp plugin calling and display, closes [#8619](https://github.com/lobehub/lobe-chat/issues/8619) ([14c41c4](https://github.com/lobehub/lobe-chat/commit/14c41c4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.106.4](https://github.com/lobehub/lobe-chat/compare/v1.106.3...v1.106.4)
 
 <sup>Released on **2025-07-30**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve mcp plugin calling and display."
+      ]
+    },
+    "date": "2025-07-30",
+    "version": "1.106.5"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.106.4",
+  "version": "1.106.5",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/BuiltinPluginTitle.tsx

@@ -33,17 +33,10 @@ interface BuiltinPluginTitleProps {
 }
 
 const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(
-  ({ messageId, index, apiName, toolCallId, icon, title }) => {
+  ({ messageId, index, apiName, icon, title }) => {
     const { styles } = useStyles();
 
-    const isLoading = useChatStore((s) => {
-      const toolMessageId = chatSelectors.getMessageByToolCallId(toolCallId)(s)?.id;
-      const isToolCallStreaming = chatSelectors.isToolCallStreaming(messageId, index)(s);
-      const isPluginApiInvoking = !toolMessageId
-        ? true
-        : chatSelectors.isPluginApiInvoking(toolMessageId)(s);
-      return isToolCallStreaming || isPluginApiInvoking;
-    });
+    const isLoading = useChatStore(chatSelectors.isInToolsCalling(messageId, index));
 
     return (
       <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResultJSON.tsx

@@ -6,9 +6,10 @@ import { chatSelectors } from '@/store/chat/selectors';
 
 export interface FunctionMessageProps {
   toolCallId: string;
+  variant?: 'filled' | 'outlined' | 'borderless';
 }
 
-const PluginResult = memo<FunctionMessageProps>(({ toolCallId }) => {
+const PluginResult = memo<FunctionMessageProps>(({ toolCallId, variant }) => {
   const toolMessage = useChatStore(chatSelectors.getMessageByToolCallId(toolCallId));
 
   const data = useMemo(() => {
@@ -20,7 +21,11 @@ const PluginResult = memo<FunctionMessageProps>(({ toolCallId }) => {
   }, [toolMessage?.content]);
 
   return (
-    <Highlighter language={'json'} style={{ maxHeight: 200, maxWidth: 800, overflow: 'scroll' }}>
+    <Highlighter
+      language={'json'}
+      style={{ maxHeight: 200, overflow: 'scroll', width: '100%' }}
+      variant={variant}
+    >
       {data}
     </Highlighter>
   );

package/src/features/Conversation/Messages/Assistant/Tool/Inspector/ToolTitle.tsx

@@ -91,8 +91,8 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, messageId, index, apiName,
   const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
   return (
-    <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>
-      {isLoading ? <Loader /> : <PluginAvatar identifier={identifier} size={20} />}
+    <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={6} horizontal>
+      {isLoading ? <Loader /> : <PluginAvatar identifier={identifier} size={18} />}
       <div>{pluginTitle}</div>/<span className={styles.apiName}>{apiName}</span>
     </Flexbox>
   );

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

@@ -1,13 +1,6 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import {
-  ChevronDown,
-  ChevronRight,
-  LayoutPanelTop,
-  LogsIcon,
-  LucideBug,
-  LucideBugOff,
-} from 'lucide-react';
+import { LayoutPanelTop, LogsIcon, LucideBug, LucideBugOff } from 'lucide-react';
 import { CSSProperties, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -68,6 +61,7 @@ export const useStyles = createStyles(({ css, token, cx }) => ({
 interface InspectorProps {
   apiName: string;
   arguments?: string;
+  hidePluginUI?: boolean;
   id: string;
   identifier: string;
   index: number;
@@ -94,6 +88,7 @@ const Inspectors = memo<InspectorProps>(
     setShowRender,
     showPluginRender,
     setShowPluginRender,
+    hidePluginUI = false,
   }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
@@ -120,10 +115,9 @@ const Inspectors = memo<InspectorProps>(
               messageId={messageId}
               toolCallId={id}
             />
-            <Icon icon={showRender ? ChevronDown : ChevronRight} />
           </Flexbox>
           <Flexbox className={styles.actions} horizontal>
-            {showRender && (
+            {showRender && !hidePluginUI && (
               <ActionIcon
                 icon={showPluginRender ? LogsIcon : LayoutPanelTop}
                 onClick={() => {

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

@@ -16,9 +16,15 @@ const useStyles = createStyles(({ css, token, cx }) => ({
       color: ${token.colorText};
     }
   `,
+  codeContainer: css`
+    border-radius: ${token.borderRadiusLG}px;
+  `,
   container: css`
     position: relative;
 
+    overflow: auto;
+
+    max-height: 200px;
     padding-block: 4px;
     padding-inline: 12px 64px;
     border-radius: ${token.borderRadiusLG}px;
@@ -90,6 +96,14 @@ const Arguments = memo<ArgumentsProps>(({ arguments: args = '', shine, actions }
     );
   }
 
+  // if (args.length > 100) {
+  //   return (
+  //     <Highlighter language={'json'} showLanguage={false} variant={'filled'}>
+  //       {JSON.stringify(displayArgs, null, 2)}
+  //     </Highlighter>
+  //   );
+  // }
+
   const hasMinWidth = Object.keys(displayArgs).length > 1;
 
   if (Object.keys(displayArgs).length === 0) return null;
@@ -101,18 +115,29 @@ const Arguments = memo<ArgumentsProps>(({ arguments: args = '', shine, actions }
           {actions}
         </Flexbox>
       )}
-      {Object.entries(displayArgs).map(([key, value]) => {
-        return (
-          <ObjectEntity
-            editable={false}
-            hasMinWidth={hasMinWidth}
-            key={key}
-            objectKey={key}
-            shine={shine}
-            value={value}
-          />
-        );
-      })}
+      {args.length > 100 ? (
+        <Highlighter
+          language={'json'}
+          showLanguage={false}
+          style={{ padding: 8 }}
+          variant={'borderless'}
+        >
+          {JSON.stringify(displayArgs, null, 2)}
+        </Highlighter>
+      ) : (
+        Object.entries(displayArgs).map(([key, value]) => {
+          return (
+            <ObjectEntity
+              editable={false}
+              hasMinWidth={hasMinWidth}
+              key={key}
+              objectKey={key}
+              shine={shine}
+              value={value}
+            />
+          );
+        })
+      )}
     </div>
   );
 });

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/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;