@lobehub/chat 1.81.8 → 1.82.0

package/src/server/routers/tools/mcp.ts

@@ -0,0 +1,79 @@
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+
+import { isDesktop, isServerMode } from '@/const/version';
+import { passwordProcedure } from '@/libs/trpc/edge';
+import { authedProcedure, router } from '@/libs/trpc/lambda';
+import { mcpService } from '@/server/services/mcp';
+
+// Define Zod schemas for MCP Client parameters
+const httpParamsSchema = z.object({
+  name: z.string().min(1),
+  type: z.literal('http'),
+  url: z.string().url(),
+});
+
+const stdioParamsSchema = z.object({
+  args: z.array(z.string()).optional().default([]),
+  command: z.string().min(1),
+  name: z.string().min(1),
+  type: z.literal('stdio'),
+});
+
+// Union schema for MCPClientParams
+const mcpClientParamsSchema = z.union([httpParamsSchema, stdioParamsSchema]);
+
+const checkStdioEnvironment = (params: z.infer<typeof mcpClientParamsSchema>) => {
+  if (params.type === 'stdio' && !isDesktop) {
+    throw new TRPCError({
+      code: 'BAD_REQUEST',
+      message: 'Stdio MCP type is not supported in web environment.',
+    });
+  }
+};
+
+const mcpProcedure = isServerMode ? authedProcedure : passwordProcedure;
+
+export const mcpRouter = router({
+  getStreamableMcpServerManifest: mcpProcedure
+    .input(
+      z.object({
+        identifier: z.string(),
+        url: z.string().url(),
+      }),
+    )
+    .query(async ({ input }) => {
+      return await mcpService.getStreamableMcpServerManifest(input.identifier, input.url);
+    }),
+  /* eslint-disable sort-keys-fix/sort-keys-fix */
+  // --- MCP Interaction ---
+  // listTools now accepts MCPClientParams directly
+  listTools: mcpProcedure
+    .input(mcpClientParamsSchema) // Use the unified schema
+    .query(async ({ input }) => {
+      // Stdio check can be done here or rely on the service/client layer
+      checkStdioEnvironment(input);
+
+      // Pass the validated MCPClientParams to the service
+      return await mcpService.listTools(input);
+    }),
+
+  // callTool now accepts MCPClientParams, toolName, and args
+  callTool: mcpProcedure
+    .input(
+      z.object({
+        params: mcpClientParamsSchema, // Use the unified schema for client params
+        args: z.any(), // Arguments for the tool call
+        toolName: z.string(),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      // Stdio check can be done here or rely on the service/client layer
+      checkStdioEnvironment(input.params);
+
+      // Pass the validated params, toolName, and args to the service
+      const data = await mcpService.callTool(input.params, input.toolName, input.args);
+
+      return JSON.stringify(data);
+    }),
+});

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

@@ -0,0 +1,157 @@
+import { LobeChatPluginApi, LobeChatPluginManifest, PluginSchema } from '@lobehub/chat-plugin-sdk';
+import { TRPCError } from '@trpc/server';
+import debug from 'debug';
+
+import { MCPClient, MCPClientParams } from '@/libs/mcp';
+import { safeParseJSON } from '@/utils/safeParseJSON';
+
+const log = debug('lobe-mcp:service');
+
+// Removed MCPConnection interface as it's no longer needed
+
+class MCPService {
+  // Store instances of the custom MCPClient, keyed by serialized MCPClientParams
+  private clients: Map<string, MCPClient> = new Map();
+
+  constructor() {
+    log('MCPService initialized');
+  }
+
+  // --- MCP Interaction ---
+
+  // listTools now accepts MCPClientParams
+  async listTools(params: MCPClientParams): Promise<LobeChatPluginApi[]> {
+    const client = await this.getClient(params); // Get client using params
+    log(`Listing tools using client for params: %O`, params);
+
+    try {
+      const result = await client.listTools();
+      log(`Tools listed successfully for params: %O, result count: %d`, params, result.length);
+      return result.map<LobeChatPluginApi>((item) => ({
+        // Assuming identifier is the unique name/id
+        description: item.description,
+        name: item.name,
+        parameters: item.inputSchema as PluginSchema,
+      }));
+    } catch (error) {
+      console.error(`Error listing tools for params %O:`, params, error);
+      // Propagate a TRPCError for better handling upstream
+      throw new TRPCError({
+        cause: error,
+        code: 'INTERNAL_SERVER_ERROR',
+        message: `Error listing tools from MCP server: ${(error as Error).message}`,
+      });
+    }
+  }
+
+  // callTool now accepts MCPClientParams, toolName, and args
+  async callTool(params: MCPClientParams, toolName: string, argsStr: any): Promise<any> {
+    const client = await this.getClient(params); // Get client using params
+
+    const args = safeParseJSON(argsStr);
+
+    log(`Calling tool "${toolName}" using client for params: %O with args: %O`, params, args);
+
+    try {
+      // Delegate the call to the MCPClient instance
+      const result = await client.callTool(toolName, args); // Pass args directly
+      log(`Tool "${toolName}" called successfully for params: %O, result: %O`, params, result);
+      const { content, isError } = result;
+      if (!isError) return content;
+
+      return result;
+    } catch (error) {
+      console.error(`Error calling tool "${toolName}" for params %O:`, params, error);
+      // Propagate a TRPCError
+      throw new TRPCError({
+        cause: error,
+        code: 'INTERNAL_SERVER_ERROR',
+        message: `Error calling tool "${toolName}" on MCP server: ${(error as Error).message}`,
+      });
+    }
+  }
+
+  // TODO: Consider adding methods for managing the client lifecycle if needed,
+  // e.g., explicitly closing clients on shutdown or after inactivity,
+  // although for serverless, on-demand creation/retrieval might be sufficient.
+
+  // TODO: Implement methods like listResources, getResource, listPrompts, getPrompt if needed,
+  // following the pattern of accepting MCPClientParams.
+
+  // --- Client Management (Replaces Connection Management) ---
+
+  // Private method to get or initialize a client based on parameters
+  private async getClient(params: MCPClientParams): Promise<MCPClient> {
+    const key = this.serializeParams(params); // Use custom serialization
+    log(`Attempting to get client for key: ${key} (params: %O)`, params);
+
+    if (this.clients.has(key)) {
+      log(`Returning cached client for key: ${key}`);
+      return this.clients.get(key)!;
+    }
+
+    log(`No cached client found for key: ${key}. Initializing new client.`);
+    try {
+      // Ensure stdio is only attempted in desktop/server environments within the client itself
+      // or add a check here if MCPClient doesn't handle it.
+      // Example check (adjust based on where environment check is best handled):
+      // if (params.type === 'stdio' && typeof window !== 'undefined') {
+      //   throw new Error('Stdio MCP type is not supported in browser environment.');
+      // }
+
+      const client = new MCPClient(params);
+      await client.initialize(); // Initialization logic should be within MCPClient
+      this.clients.set(key, client);
+      log(`New client initialized and cached for key: ${key}`);
+      return client;
+    } catch (error) {
+      console.error(`Failed to initialize MCP client for key ${key}:`, error);
+      // Do not cache failed initializations
+      throw new TRPCError({
+        cause: error,
+        code: 'INTERNAL_SERVER_ERROR',
+        message: `Failed to initialize MCP client: ${(error as Error).message}`,
+      });
+    }
+  }
+
+  // Custom serialization function to ensure consistent keys
+  private serializeParams(params: MCPClientParams): string {
+    const sortedKeys = Object.keys(params).sort();
+    const sortedParams: Record<string, any> = {};
+
+    for (const key of sortedKeys) {
+      const value = (params as any)[key];
+      // Sort the 'args' array if it exists
+      if (key === 'args' && Array.isArray(value)) {
+        sortedParams[key] = JSON.stringify(key);
+      } else {
+        sortedParams[key] = value;
+      }
+    }
+
+    return JSON.stringify(sortedParams);
+  }
+
+  async getStreamableMcpServerManifest(
+    identifier: string,
+    url: string,
+  ): Promise<LobeChatPluginManifest> {
+    const tools = await this.listTools({ name: identifier, type: 'http', url }); // Get client using params
+
+    return {
+      api: tools,
+      identifier,
+      meta: {
+        avatar: 'MCP_AVATAR',
+        description: `${identifier} MCP server has ${tools.length} tools, like "${tools[0]?.name}"`,
+        title: identifier,
+      },
+      // TODO: temporary
+      type: 'mcp' as any,
+    };
+  }
+}
+
+// Export a singleton instance
+export const mcpService = new MCPService();

package/src/services/electron/localFileService.ts

@@ -1,12 +1,15 @@
 import {
   ListLocalFileParams,
   LocalFileItem,
+  LocalMoveFilesResultItem,
   LocalReadFileParams,
   LocalReadFileResult,
   LocalReadFilesParams,
   LocalSearchFilesParams,
+  MoveLocalFilesParams,
   OpenLocalFileParams,
   OpenLocalFolderParams,
+  RenameLocalFileParams,
   dispatch,
 } from '@lobechat/electron-client-ipc';
 
@@ -34,6 +37,22 @@ class LocalFileService {
   async openLocalFolder(params: OpenLocalFolderParams) {
     return dispatch('openLocalFolder', params);
   }
+
+  async moveLocalFiles(params: MoveLocalFilesParams): Promise<LocalMoveFilesResultItem[]> {
+    return dispatch('moveLocalFiles', params);
+  }
+
+  async renameLocalFile(params: RenameLocalFileParams) {
+    return dispatch('renameLocalFile', params);
+  }
+
+  async openLocalFileOrFolder(path: string, isDirectory: boolean) {
+    if (isDirectory) {
+      return this.openLocalFolder({ isDirectory, path });
+    } else {
+      return this.openLocalFile({ path });
+    }
+  }
 }
 
 export const localFileService = new LocalFileService();

package/src/services/electron/system.ts

@@ -0,0 +1,21 @@
+import { ElectronAppState, dispatch } from '@lobechat/electron-client-ipc';
+
+/**
+ * Service class for interacting with Electron's system-level information and actions.
+ */
+class ElectronSystemService {
+  /**
+   * Fetches the application state from the Electron main process.
+   * This includes system information (platform, arch) and user-specific paths.
+   * @returns {Promise<DesktopAppState>} A promise that resolves with the desktop app state.
+   */
+  async getAppState(): Promise<ElectronAppState> {
+    // Calls the underlying IPC function to get data from the main process
+    return dispatch('getDesktopAppState');
+  }
+
+  // Add other system-related service methods here if needed in the future
+}
+
+// Export a singleton instance of the service
+export const electronSystemService = new ElectronSystemService();

package/src/services/mcp.ts

@@ -0,0 +1,25 @@
+import { toolsClient } from '@/libs/trpc/client';
+import { getToolStoreState } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+import { ChatToolPayload } from '@/types/message';
+
+class MCPService {
+  async invokeMcpToolCall(payload: ChatToolPayload, { signal }: { signal?: AbortSignal }) {
+    const s = getToolStoreState();
+    const { identifier, arguments: args, apiName } = payload;
+    const plugin = pluginSelectors.getCustomPluginById(identifier)(s);
+
+    if (!plugin) return;
+
+    return toolsClient.mcp.callTool.mutate(
+      { args, params: { ...plugin.customParams?.mcp, name: identifier } as any, toolName: apiName },
+      { signal },
+    );
+  }
+
+  async getStreamableMcpServerManifest(identifier: string, url: string) {
+    return toolsClient.mcp.getStreamableMcpServerManifest.query({ identifier, url });
+  }
+}
+
+export const mcpService = new MCPService();

package/src/store/chat/slices/builtinTool/actions/search.ts

@@ -190,9 +190,6 @@ export const searchSlice: StateCreator<
 
     await get().internal_updateMessageContent(id, JSON.stringify(searchContent));
 
-    // 如果没搜索到结果，那么不触发 ai 总结
-    if (searchContent.length === 0) return;
-
     // 如果 aiSummary 为 true，则会自动触发总结
     return aiSummary;
   },

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

@@ -8,6 +8,7 @@ import { StateCreator } from 'zustand/vanilla';
 import { LOADING_FLAT } from '@/const/message';
 import { PLUGIN_SCHEMA_API_MD5_PREFIX, PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
 import { chatService } from '@/services/chat';
+import { mcpService } from '@/services/mcp';
 import { messageService } from '@/services/message';
 import { ChatStore } from '@/store/chat/store';
 import { useToolStore } from '@/store/tool';
@@ -41,6 +42,7 @@ export interface ChatPluginAction {
   invokeBuiltinTool: (id: string, payload: ChatToolPayload) => Promise<void>;
   invokeDefaultTypePlugin: (id: string, payload: any) => Promise<string | undefined>;
   invokeMarkdownTypePlugin: (id: string, payload: ChatToolPayload) => Promise<void>;
+  invokeMCPTypePlugin: (id: string, payload: ChatToolPayload) => Promise<string | undefined>;
 
   invokeStandaloneTypePlugin: (id: string, payload: ChatToolPayload) => Promise<void>;
 
@@ -271,7 +273,7 @@ export const chatPlugin: StateCreator<
       // trigger the plugin call
       const data = await get().internal_invokeDifferentTypePlugin(id, payload);
 
-      if ((payload.type === 'default' || payload.type === 'builtin') && data) {
+      if (data && !['markdown', 'standalone'].includes(payload.type)) {
         shouldCreateMessage = true;
         latestToolId = id;
       }
@@ -328,7 +330,9 @@ export const chatPlugin: StateCreator<
 
     const updateAssistantMessage = async () => {
       if (!assistantMessage) return;
-      await messageService.updateMessage(assistantMessage!.id, { tools: assistantMessage?.tools });
+      await messageService.updateMessage(assistantMessage!.id, {
+        tools: assistantMessage?.tools,
+      });
     };
 
     await Promise.all([
@@ -438,11 +442,51 @@ export const chatPlugin: StateCreator<
         return await get().invokeBuiltinTool(id, payload);
       }
 
+      // @ts-ignore
+      case 'mcp': {
+        return await get().invokeMCPTypePlugin(id, payload);
+      }
+
       default: {
         return await get().invokeDefaultTypePlugin(id, payload);
       }
     }
   },
+  invokeMCPTypePlugin: async (id, payload) => {
+    const { internal_updateMessageContent, refreshMessages, internal_togglePluginApiCalling } =
+      get();
+    let data: string = '';
+
+    try {
+      const abortController = internal_togglePluginApiCalling(
+        true,
+        id,
+        n('fetchPlugin/start') as string,
+      );
+
+      const result = await mcpService.invokeMcpToolCall(payload, {
+        signal: abortController?.signal,
+      });
+      if (!!result) data = result;
+    } catch (error) {
+      console.log(error);
+      const err = error as Error;
+
+      // ignore the aborted request error
+      if (!err.message.includes('The user aborted a request.')) {
+        await messageService.updateMessageError(id, error as any);
+        await refreshMessages();
+      }
+    }
+
+    internal_togglePluginApiCalling(false, id, n('fetchPlugin/end') as string);
+    // 如果报错则结束了
+    if (!data) return;
+
+    await internal_updateMessageContent(id, data);
+
+    return data;
+  },
 
   internal_togglePluginApiCalling: (loading, id, action) => {
     return get().internal_toggleLoadingArrays('pluginApiLoadingIds', loading, id, action);

package/src/tools/local-files/Render/ListFiles/index.tsx

@@ -1,12 +1,10 @@
 import { ListLocalFileParams } from '@lobechat/electron-client-ipc';
-import { ActionIcon } from '@lobehub/ui';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { FolderOpen } from 'lucide-react';
 import React, { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import FileIcon from '@/components/FileIcon';
 import { localFileService } from '@/services/electron/localFileService';
 import { LocalFileListState } from '@/tools/local-files/type';
 import { ChatMessagePluginError } from '@/types/message';
@@ -20,8 +18,21 @@ const useStyles = createStyles(({ css, token, cx }) => ({
     opacity: 1;
     transition: opacity 0.2s ${token.motionEaseInOut};
   `),
+  container: css`
+    cursor: pointer;
+
+    padding-block: 2px;
+    padding-inline: 4px;
+    border-radius: 4px;
+
+    color: ${token.colorTextSecondary};
+
+    :hover {
+      color: ${token.colorText};
+      background: ${token.colorFillTertiary};
+    }
+  `,
   path: css`
-    padding-inline-start: 8px;
     color: ${token.colorTextSecondary};
   `,
 }));
@@ -34,25 +45,21 @@ interface ListFilesProps {
 }
 
 const ListFiles = memo<ListFilesProps>(({ messageId, pluginError, args, pluginState }) => {
-  const { t } = useTranslation('tool');
-
   const { styles } = useStyles();
   return (
     <>
-      <Flexbox gap={8} horizontal>
+      <Flexbox
+        className={styles.container}
+        gap={8}
+        horizontal
+        onClick={() => {
+          localFileService.openLocalFolder({ isDirectory: true, path: args.path });
+        }}
+      >
+        <FileIcon fileName={args.path} isDirectory size={22} variant={'pure'} />
         <Typography.Text className={styles.path} ellipsis>
           {args.path}
         </Typography.Text>
-        <Flexbox className={styles.actions} gap={8} horizontal style={{ marginLeft: 8 }}>
-          <ActionIcon
-            icon={FolderOpen}
-            onClick={() => {
-              localFileService.openLocalFolder({ isDirectory: true, path: args.path });
-            }}
-            size="small"
-            title={t('localFiles.openFolder')}
-          />
-        </Flexbox>
       </Flexbox>
       <SearchResult
         listResults={pluginState?.listResults}

package/src/tools/local-files/Render/ReadLocalFile/ReadFileView.tsx

@@ -46,6 +46,9 @@ const useStyles = createStyles(({ css, token, cx }) => ({
   header: css`
     cursor: pointer;
   `,
+  lineCount: css`
+    color: ${token.colorTextQuaternary};
+  `,
   meta: css`
     font-size: 12px;
     color: ${token.colorTextTertiary};
@@ -70,7 +73,6 @@ const useStyles = createStyles(({ css, token, cx }) => ({
     background: ${token.colorFillQuaternary};
   `,
   previewText: css`
-    font-family: ${token.fontFamilyCode};
     font-size: 12px;
     line-height: 1.6;
     word-break: break-all;
@@ -84,14 +86,7 @@ interface ReadFileViewProps extends LocalReadFileResult {
 }
 
 const ReadFileView = memo<ReadFileViewProps>(
-  ({
-    filename,
-    path,
-    fileType,
-    charCount,
-    lineCount, // Assuming the 250 is total lines?
-    content, // The actual content preview
-  }) => {
+  ({ filename, path, fileType, charCount, content, totalLineCount, totalCharCount, loc }) => {
     const { t } = useTranslation('tool');
     const { styles } = useStyles();
     const [isExpanded, setIsExpanded] = useState(false);
@@ -115,6 +110,7 @@ const ReadFileView = memo<ReadFileViewProps>(
         <Flexbox
           align={'center'}
           className={styles.header}
+          gap={12}
           horizontal
           justify={'space-between'}
           onClick={handleToggleExpand}
@@ -126,7 +122,7 @@ const ReadFileView = memo<ReadFileViewProps>(
                 {filename}
               </Typography.Text>
               {/* Actions on Hover */}
-              <Flexbox className={styles.actions} gap={8} horizontal style={{ marginLeft: 8 }}>
+              <Flexbox className={styles.actions} gap={2} horizontal style={{ marginLeft: 8 }}>
                 <ActionIcon
                   icon={ExternalLink}
                   onClick={handleOpenFile}
@@ -143,16 +139,26 @@ const ReadFileView = memo<ReadFileViewProps>(
             </Flexbox>
           </Flexbox>
           <Flexbox align={'center'} className={styles.meta} gap={8} horizontal>
-            <Flexbox align={'center'} gap={4} horizontal>
-              <Icon icon={Asterisk} size={'small'} />
-              <span>{charCount}</span>
-            </Flexbox>
+            {isExpanded && (
+              <Flexbox align={'center'} gap={4} horizontal>
+                <Icon icon={Asterisk} size={'small'} />
+                <span>
+                  {charCount} / <span className={styles.lineCount}>{totalCharCount}</span>
+                </span>
+              </Flexbox>
+            )}
             <Flexbox align={'center'} gap={4} horizontal>
               <Icon icon={AlignLeft} size={'small'} />
-              <span>
-                {content?.split('\n').length || 0} / {lineCount}
-              </span>
-              {/* Display preview lines / total lines */}
+              {isExpanded ? (
+                <span>
+                  L{loc?.[0]}-{loc?.[1]} /{' '}
+                  <span className={styles.lineCount}>{totalLineCount}</span>
+                </span>
+              ) : (
+                <span>
+                  L{loc?.[0]}-{loc?.[1]}
+                </span>
+              )}
             </Flexbox>
             <ActionIcon
               active={isExpanded}
@@ -160,7 +166,6 @@ const ReadFileView = memo<ReadFileViewProps>(
               onClick={handleToggleExpand}
               size="small"
               style={{
-                marginLeft: 8,
                 transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
                 transition: 'transform 0.2s',
               }}
@@ -173,19 +178,14 @@ const ReadFileView = memo<ReadFileViewProps>(
           {path}
         </Typography.Text>
 
-        {/* Content Preview (Collapsible) */}
         {isExpanded && (
-          <Flexbox className={styles.previewBox}>
+          <Flexbox className={styles.previewBox} style={{ maxHeight: 240, overflow: 'auto' }}>
             {fileType === 'md' ? (
-              <Markdown style={{ maxHeight: 240, overflow: 'auto' }}>{content}</Markdown>
+              <Markdown>{content}</Markdown>
             ) : (
-              <Typography.Paragraph
-                className={styles.previewText}
-                ellipsis={{ expandable: true, rows: 10, symbol: t('localFiles.read.more') }}
-                style={{ maxHeight: 240, overflow: 'auto' }}
-              >
+              <div className={styles.previewText} style={{ width: '100%' }}>
                 {content}
-              </Typography.Paragraph>
+              </div>
             )}
           </Flexbox>
         )}

package/src/tools/local-files/components/FileItem.tsx

@@ -1,5 +1,5 @@
 import { LocalFileItem } from '@lobechat/electron-client-ipc';
-import { ActionIcon, FileTypeIcon } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import { FolderOpen } from 'lucide-react';
@@ -64,22 +64,20 @@ const FileItem = memo<FileItemProps>(
         gap={12}
         horizontal
         onClick={() => {
-          if (isDirectory) {
-            localFileService.openLocalFolder({ isDirectory, path });
-          } else {
-            localFileService.openLocalFile({ path });
-          }
+          localFileService.openLocalFileOrFolder(path, isDirectory);
         }}
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}
         padding={'2px 8px'}
         style={{ cursor: 'pointer', fontSize: 12, width: '100%' }}
       >
-        {isDirectory ? (
-          <FileTypeIcon size={16} type={'folder'} variant={'mono'} />
-        ) : (
-          <FileIcon fileName={name} fileType={type} size={16} variant={'pure'} />
-        )}
+        <FileIcon
+          fileName={name}
+          fileType={type}
+          isDirectory={isDirectory}
+          size={16}
+          variant={'pure'}
+        />
         <Flexbox
           align={'baseline'}
           gap={4}