@opensumi/ide-ai-native 3.8.1-next-1741262660.0 → 3.8.1-next-1741331921.0

package/src/browser/mcp/config/components/mcp-config.view.tsx

@@ -1,32 +1,29 @@
-import React from 'react';
+import cls from 'classnames';
+import React, { useCallback } from 'react';
 
+import { Badge } from '@opensumi/ide-components';
 import { AINativeSettingSectionsId, ILogger, useInjectable } from '@opensumi/ide-core-browser';
 import { PreferenceService } from '@opensumi/ide-core-browser/lib/preferences';
+import { localize } from '@opensumi/ide-core-common';
 
-import { BUILTIN_MCP_SERVER_NAME } from '../../../../common';
+import { BUILTIN_MCP_SERVER_NAME, ISumiMCPServerBackend, SumiMCPServerProxyServicePath } from '../../../../common';
 import { MCPServerDescription } from '../../../../common/mcp-server-manager';
+import { MCPServer, MCP_SERVER_TYPE } from '../../../../common/types';
 import { MCPServerProxyService } from '../../mcp-server-proxy.service';
 
 import styles from './mcp-config.module.less';
 import { MCPServerForm, MCPServerFormData } from './mcp-server-form';
 
-interface MCPServer {
-  name: string;
-  isStarted: boolean;
-  tools?: string[];
-  command?: string;
-  type?: string;
-}
-
 export const MCPConfigView: React.FC = () => {
   const mcpServerProxyService = useInjectable<MCPServerProxyService>(MCPServerProxyService);
   const preferenceService = useInjectable<PreferenceService>(PreferenceService);
+  const sumiMCPServerBackendProxy = useInjectable<ISumiMCPServerBackend>(SumiMCPServerProxyServicePath);
   const logger = useInjectable<ILogger>(ILogger);
   const [servers, setServers] = React.useState<MCPServer[]>([]);
   const [formVisible, setFormVisible] = React.useState(false);
   const [editingServer, setEditingServer] = React.useState<MCPServerFormData | undefined>();
 
-  const loadServers = React.useCallback(async () => {
+  const loadServers = useCallback(async () => {
     const allServers = await mcpServerProxyService.$getServers();
     setServers(allServers);
   }, [mcpServerProxyService]);
@@ -40,96 +37,123 @@ export const MCPConfigView: React.FC = () => {
     return () => {
       disposer.dispose();
     };
-  }, [mcpServerProxyService, loadServers]);
+  }, []);
 
-  const handleServerControl = async (serverName: string, start: boolean) => {
-    try {
-      if (start) {
-        await mcpServerProxyService.$startServer(serverName);
-      } else {
-        await mcpServerProxyService.$stopServer(serverName);
-      }
+  const handleServerControl = useCallback(
+    async (serverName: string, start: boolean) => {
+      try {
+        if (start) {
+          await mcpServerProxyService.$startServer(serverName);
+        } else {
+          await mcpServerProxyService.$stopServer(serverName);
+        }
 
-      // Update enabled state in preferences
-      const servers = preferenceService.get<MCPServerDescription[]>(AINativeSettingSectionsId.MCPServers, []);
-      let updatedServers = servers;
-
-      // 处理内置服务器的特殊情况
-      if (serverName === BUILTIN_MCP_SERVER_NAME) {
-        const builtinServerExists = servers.some((server) => server.name === BUILTIN_MCP_SERVER_NAME);
-        if (!builtinServerExists && !start) {
-          // 如果是停止内置服务器且之前没有配置，添加一个新的配置项
-          // 内置服务器不需要 command，因为它是直接集成在 IDE 中的
-          updatedServers = [
-            ...servers,
-            {
-              name: BUILTIN_MCP_SERVER_NAME,
-              enabled: false,
-              command: '', // 内置服务器的 command 为空字符串
-            },
-          ];
+        // Update enabled state in preferences
+        const servers = preferenceService.get<MCPServerDescription[]>(AINativeSettingSectionsId.MCPServers, []);
+        let updatedServers = servers;
+        // 处理内置服务器的特殊情况
+        if (serverName === BUILTIN_MCP_SERVER_NAME) {
+          const builtinServerExists = servers.some((server) => server.name === BUILTIN_MCP_SERVER_NAME);
+          if (!builtinServerExists && !start) {
+            // 如果是停止内置服务器且之前没有配置，添加一个新的配置项
+            // 内置服务器不需要 command，因为它是直接集成在 IDE 中的
+            updatedServers = [
+              ...servers,
+              {
+                name: BUILTIN_MCP_SERVER_NAME,
+                enabled: false,
+                command: '', // 内置服务器的 command 为空字符串
+                type: MCP_SERVER_TYPE.STDIO,
+              },
+            ];
+          } else {
+            // 如果已经存在配置，更新 enabled 状态
+            updatedServers = servers.map((server) => {
+              if (server.name === BUILTIN_MCP_SERVER_NAME) {
+                return { ...server, enabled: start };
+              }
+              return server;
+            });
+          }
         } else {
-          // 如果已经存在配置，更新 enabled 状态
+          // 处理其他外部服务器
           updatedServers = servers.map((server) => {
-            if (server.name === BUILTIN_MCP_SERVER_NAME) {
+            if (server.name === serverName) {
               return { ...server, enabled: start };
             }
             return server;
           });
         }
-      } else {
-        // 处理其他外部服务器
-        updatedServers = servers.map((server) => {
-          if (server.name === serverName) {
-            return { ...server, enabled: start };
-          }
-          return server;
-        });
+
+        await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers);
+        await loadServers();
+      } catch (error) {
+        logger.error(`Failed to ${start ? 'start' : 'stop'} server ${serverName}:`, error);
       }
+    },
+    [mcpServerProxyService, preferenceService, sumiMCPServerBackendProxy, loadServers],
+  );
+
+  const handleAddServer = useCallback(() => {
+    setEditingServer(undefined);
+    setFormVisible(true);
+  }, [editingServer, formVisible]);
+
+  const handleEditServer = useCallback(
+    (server: MCPServer) => {
+      const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
+      const serverConfig = servers.find((s) => s.name === server.name);
+
+      if (serverConfig) {
+        setEditingServer(serverConfig);
+        setFormVisible(true);
+      }
+    },
+    [editingServer, formVisible],
+  );
 
+  const handleDeleteServer = useCallback(
+    async (serverName: string) => {
+      const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
+      const updatedServers = servers.filter((s) => s.name !== serverName);
+      sumiMCPServerBackendProxy.removeServer(serverName);
       await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers);
       await loadServers();
-    } catch (error) {
-      logger.error(`Failed to ${start ? 'start' : 'stop'} server ${serverName}:`, error);
-    }
-  };
+    },
+    [editingServer, formVisible],
+  );
 
-  const handleAddServer = () => {
-    setEditingServer(undefined);
-    setFormVisible(true);
-  };
+  const handleSaveServer = useCallback(
+    async (data: MCPServerFormData) => {
+      const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
+      const existingIndex = servers.findIndex((s) => s.name === data.name);
 
-  const handleEditServer = (server: MCPServer) => {
-    const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
-    const serverConfig = servers.find((s) => s.name === server.name);
+      if (existingIndex >= 0) {
+        servers[existingIndex] = data;
+      } else {
+        servers.push(data);
+      }
+      setServers(servers as MCPServer[]);
+      setFormVisible(false);
+      await sumiMCPServerBackendProxy.addOrUpdateServer(data as MCPServerDescription);
+      await preferenceService.set(AINativeSettingSectionsId.MCPServers, servers);
+      await loadServers();
+    },
+    [servers, formVisible, loadServers],
+  );
 
-    if (serverConfig) {
-      setEditingServer(serverConfig);
-      setFormVisible(true);
-    }
-  };
-
-  const handleDeleteServer = async (serverName: string) => {
-    const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
-    const updatedServers = servers.filter((s) => s.name !== serverName);
-    await preferenceService.set(AINativeSettingSectionsId.MCPServers, updatedServers);
-    await loadServers();
-  };
-
-  const handleSaveServer = async (data: MCPServerFormData) => {
-    const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
-    const existingIndex = servers.findIndex((s) => s.name === data.name);
-
-    if (existingIndex >= 0) {
-      servers[existingIndex] = data;
-    } else {
-      servers.push(data);
+  const getReadableServerType = useCallback((type: string) => {
+    switch (type) {
+      case MCP_SERVER_TYPE.STDIO:
+        return localize('ai.native.mcp.type.stdio');
+      case MCP_SERVER_TYPE.SSE:
+        return localize('ai.native.mcp.type.sse');
+      case MCP_SERVER_TYPE.BUILTIN:
+        return localize('ai.native.mcp.type.builtin');
+      default:
+        return type;
     }
-
-    await preferenceService.set(AINativeSettingSectionsId.MCPServers, servers);
-    setFormVisible(false);
-    await loadServers();
-  };
+  }, []);
 
   return (
     <div className={styles.container}>
@@ -150,9 +174,11 @@ export const MCPConfigView: React.FC = () => {
                 <h3 className={styles.serverName}>{server.name}</h3>
               </div>
               <div className={styles.serverActions}>
-                <button className={styles.iconButton} title='Edit' onClick={() => handleEditServer(server)}>
-                  <i className='codicon codicon-edit' />
-                </button>
+                {server.name !== BUILTIN_MCP_SERVER_NAME && (
+                  <button className={styles.iconButton} title='Edit' onClick={() => handleEditServer(server)}>
+                    <i className='codicon codicon-edit' />
+                  </button>
+                )}
                 <button
                   className={styles.iconButton}
                   title={server.isStarted ? 'Stop' : 'Start'}
@@ -160,9 +186,11 @@ export const MCPConfigView: React.FC = () => {
                 >
                   <i className={`codicon ${server.isStarted ? 'codicon-debug-stop' : 'codicon-debug-start'}`} />
                 </button>
-                <button className={styles.iconButton} title='Delete' onClick={() => handleDeleteServer(server.name)}>
-                  <i className='codicon codicon-trash' />
-                </button>
+                {server.name !== BUILTIN_MCP_SERVER_NAME && (
+                  <button className={styles.iconButton} title='Delete' onClick={() => handleDeleteServer(server.name)}>
+                    <i className='codicon codicon-trash' />
+                  </button>
+                )}
               </div>
             </div>
             <div className={styles.serverDetail}>
@@ -175,7 +203,7 @@ export const MCPConfigView: React.FC = () => {
               {server.type && (
                 <div className={styles.detailRow}>
                   <span className={styles.detailLabel}>Type:</span>
-                  <span className={styles.serverType}>{server.type}</span>
+                  <Badge className={cls(styles.serverType, styles.typeTag)}>{getReadableServerType(server.type)}</Badge>
                 </div>
               )}
             </div>
@@ -201,12 +229,21 @@ export const MCPConfigView: React.FC = () => {
                 </div>
               </div>
             )}
+            {server.serverHost && (
+              <div className={styles.serverDetail}>
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Server Link:</span>
+                  <span className={cls(styles.detailContent, styles.link)}>{server.serverHost}</span>
+                </div>
+              </div>
+            )}
           </div>
         ))}
       </div>
       <MCPServerForm
         visible={formVisible}
         initialData={editingServer}
+        servers={servers}
         onSave={handleSaveServer}
         onCancel={() => setFormVisible(false)}
       />

package/src/browser/mcp/config/components/mcp-server-form.module.less

@@ -44,11 +44,34 @@
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  margin-top: 24px;
   padding-top: 16px;
   border-top: 1px solid var(--border-color);
 }
 
+.formRow {
+  display: flex;
+  gap: 16px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.formItemName {
+  flex: 1;
+}
+
+.formItemType {
+  flex-grow: 0;
+  min-width: 120px;
+}
+
+.formItemSelect {
+  height: 37.5px;
+  :global(.kt-select-value-large) {
+    height: 100% !important;
+  }
+}
+
 .cancelButton {
   padding: 6px 12px;
   border: 1px solid var(--button-border);

package/src/browser/mcp/config/components/mcp-server-form.tsx

@@ -1,36 +1,45 @@
-import React from 'react';
+import cls from 'classnames';
+import React, { ChangeEvent, FC, FormEvent, useCallback, useEffect, useState } from 'react';
 
+import { Select } from '@opensumi/ide-components';
 import { Button } from '@opensumi/ide-components/lib/button';
 import { Modal } from '@opensumi/ide-components/lib/modal';
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { formatLocalize, localize } from '@opensumi/ide-core-common';
+import { IMessageService } from '@opensumi/ide-overlay';
 
-import styles from './mcp-server-form.module.less';
+import { MCPServer, MCP_SERVER_TYPE } from '../../../../common/types';
 
+import styles from './mcp-server-form.module.less';
 export interface MCPServerFormData {
   name: string;
-  command: string;
-  args: string[];
+  command?: string;
+  args?: string[];
   env?: Record<string, string>;
+  type: MCP_SERVER_TYPE;
+  serverHost?: string;
 }
 
 interface Props {
   visible: boolean;
   initialData?: MCPServerFormData;
+  servers: MCPServer[];
   onSave: (data: MCPServerFormData) => void;
   onCancel: () => void;
 }
 
-export const MCPServerForm: React.FC<Props> = ({ visible, initialData, onSave, onCancel }) => {
-  const [formData, setFormData] = React.useState<MCPServerFormData>(() => ({
+export const MCPServerForm: FC<Props> = ({ visible, initialData, onSave, onCancel, servers: existingServers }) => {
+  const [formData, setFormData] = useState<MCPServerFormData>(() => ({
     name: '',
     command: '',
     args: [],
     env: {},
-    type: 'stdio', // TODO: 支持 SSE
+    type: MCP_SERVER_TYPE.STDIO,
     ...initialData,
   }));
-
-  const [argsText, setArgsText] = React.useState(() => initialData?.args?.join(' ') || '');
-  const [envText, setEnvText] = React.useState(() => {
+  const messageService = useInjectable<IMessageService>(IMessageService);
+  const [argsText, setArgsText] = useState(() => initialData?.args?.join(' ') || '');
+  const [envText, setEnvText] = useState(() => {
     if (!initialData?.env) {
       return '';
     }
@@ -39,13 +48,13 @@ export const MCPServerForm: React.FC<Props> = ({ visible, initialData, onSave, o
       .join('\n');
   });
 
-  // Update form data when initialData changes
-  React.useEffect(() => {
+  useEffect(() => {
     setFormData({
       name: '',
       command: '',
       args: [],
       env: {},
+      type: MCP_SERVER_TYPE.STDIO,
       ...initialData,
     });
     setArgsText(initialData?.args?.join(' ') || '');
@@ -58,30 +67,151 @@ export const MCPServerForm: React.FC<Props> = ({ visible, initialData, onSave, o
     );
   }, [initialData]);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
-    const args = argsText.split(' ').filter(Boolean);
-    const env = envText
-      .split('\n')
-      .filter(Boolean)
-      .reduce((acc, line) => {
-        const [key, value] = line.split('=');
-        if (key && value) {
-          acc[key.trim()] = value.trim();
-        }
-        return acc;
-      }, {} as Record<string, string>);
-
-    onSave({
+    const isValid = validateForm(formData);
+    if (!isValid) {
+      return;
+    }
+    const form = {
       ...formData,
-      args,
-      env,
-    });
+    };
+    if (formData.type === MCP_SERVER_TYPE.SSE) {
+      form.serverHost = form.serverHost?.trim();
+    } else {
+      const args = argsText.split(' ').filter(Boolean);
+      const env = envText
+        .split('\n')
+        .filter(Boolean)
+        .reduce((acc, line) => {
+          const [key, value] = line.split('=');
+          if (key && value) {
+            acc[key.trim()] = value.trim();
+          }
+          return acc;
+        }, {} as Record<string, string>);
+      form.args = args;
+      form.env = env;
+    }
+
+    onSave(form);
   };
 
+  const handleCommandChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setFormData({ ...formData, command: e.target.value });
+    },
+    [formData, argsText],
+  );
+
+  const handleArgsChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setArgsText(e.target.value);
+    },
+    [argsText],
+  );
+
+  const handleEnvChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setEnvText(e.target.value);
+    },
+    [envText],
+  );
+
+  const handleServerHostChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setFormData({ ...formData, serverHost: e.target.value });
+    },
+    [formData],
+  );
+
+  const handleTypeChange = useCallback(
+    (value: MCP_SERVER_TYPE) => {
+      setFormData({ ...formData, type: value });
+    },
+    [formData],
+  );
+
+  const renderFormItems = useCallback(() => {
+    if (formData?.type === MCP_SERVER_TYPE.STDIO) {
+      return (
+        <>
+          <div className={styles.formItem}>
+            <label>{localize('ai.native.mcp.command')}</label>
+            <input
+              type='text'
+              value={formData.command}
+              onChange={handleCommandChange}
+              placeholder={localize('ai.native.mcp.command.placeHolder')}
+              required
+            />
+          </div>
+          <div className={styles.formItem}>
+            <label>{localize('ai.native.mcp.args')}</label>
+            <textarea
+              value={argsText}
+              onChange={handleArgsChange}
+              placeholder={localize('ai.native.mcp.args.placeHolder')}
+              rows={3}
+            />
+          </div>
+          <div className={styles.formItem}>
+            <label>{localize('ai.native.mcp.env')}</label>
+            <textarea
+              value={envText}
+              onChange={handleEnvChange}
+              placeholder={localize('ai.native.mcp.env.placeHolder')}
+              rows={3}
+            />
+          </div>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <div className={styles.formItem}>
+            <label>{localize('ai.native.mcp.serverHost')}</label>
+            <textarea
+              value={formData.serverHost}
+              onChange={handleServerHostChange}
+              placeholder={localize('ai.native.mcp.serverHost.placeHolder')}
+              rows={3}
+            />
+          </div>
+        </>
+      );
+    }
+  }, [formData, argsText, envText]);
+
+  const validateForm = useCallback(
+    (formData: MCPServerFormData) => {
+      if (formData.name.trim() === '') {
+        messageService.error(localize('ai.native.mcp.name.isRequired'));
+        return false;
+      }
+      if (existingServers.some((server) => server.name.toLocaleLowerCase() === formData.name.toLocaleLowerCase())) {
+        messageService.error(formatLocalize('ai.native.mcp.serverNameExists', formData.name));
+        return false;
+      }
+      if (formData.type === MCP_SERVER_TYPE.SSE) {
+        const isServerHostValid = formData.serverHost?.trim() !== '';
+        if (!isServerHostValid) {
+          messageService.error(localize('ai.native.mcp.serverHost.isRequired'));
+        }
+        return isServerHostValid;
+      }
+      const isCommandValid = formData.command?.trim() !== '';
+      if (!isCommandValid) {
+        messageService.error(localize('ai.native.mcp.command.isRequired'));
+      }
+      return isCommandValid;
+    },
+    [existingServers],
+  );
+
   return (
     <Modal
-      title={initialData ? 'Edit MCP Server' : 'Add New MCP Server'}
+      title={initialData ? localize('ai.native.mcp.editMCPServer.title') : localize('ai.native.mcp.addMCPServer.title')}
       visible={visible}
       onCancel={onCancel}
       centered
@@ -92,50 +222,38 @@ export const MCPServerForm: React.FC<Props> = ({ visible, initialData, onSave, o
       }}
     >
       <form className={styles.form} onSubmit={(e) => e.preventDefault()}>
-        <div className={styles.formItem}>
-          <label>Name:</label>
-          <input
-            type='text'
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            placeholder='Enter server name'
-            required
-          />
-        </div>
-        <div className={styles.formItem}>
-          <label>Command:</label>
-          <input
-            type='text'
-            value={formData.command}
-            onChange={(e) => setFormData({ ...formData, command: e.target.value })}
-            placeholder='Enter command (e.g., npx)'
-            required
-          />
-        </div>
-        <div className={styles.formItem}>
-          <label>Arguments:</label>
-          <textarea
-            value={argsText}
-            onChange={(e) => setArgsText(e.target.value)}
-            placeholder='Enter arguments separated by space'
-            rows={3}
-          />
-        </div>
-        <div className={styles.formItem}>
-          <label>Environment Variables:</label>
-          <textarea
-            value={envText}
-            onChange={(e) => setEnvText(e.target.value)}
-            placeholder='KEY=value (one per line)'
-            rows={3}
-          />
+        <div className={styles.formRow}>
+          <div className={cls(styles.formItem, styles.formItemName)}>
+            <label>{localize('ai.native.mcp.name')}</label>
+            <input
+              type='text'
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder={localize('ai.native.mcp.name.placeHolder')}
+              required
+            />
+          </div>
+          <div className={cls(styles.formItem, styles.formItemType)}>
+            <label>{localize('ai.native.mcp.type')}</label>
+            <Select
+              size='large'
+              value={formData.type}
+              options={[
+                { label: localize('ai.native.mcp.stdio'), value: MCP_SERVER_TYPE.STDIO },
+                { label: localize('ai.native.mcp.sse'), value: MCP_SERVER_TYPE.SSE },
+              ]}
+              className={styles.formItemSelect}
+              onChange={handleTypeChange}
+            />
+          </div>
         </div>
+        {renderFormItems()}
         <div className={styles.formActions}>
-          <Button onClick={onCancel} type='secondary'>
-            Cancel
+          <Button onClick={onCancel} type='ghost'>
+            {localize('ai.native.mcp.buttonCancel')}
           </Button>
           <Button onClick={handleSubmit} type='primary'>
-            Save
+            {initialData ? localize('ai.native.mcp.buttonUpdate') : localize('ai.native.mcp.buttonSave')}
           </Button>
         </div>
       </form>

package/src/browser/mcp/mcp-server-proxy.service.ts

@@ -28,7 +28,7 @@ export class MCPServerProxyService implements IMCPServerProxyService {
   }
 
   // 获取 OpenSumi 内部注册的 MCP tools
-  async $getMCPTools() {
+  async $getBuiltinMCPTools() {
     const tools = await this.mcpServerRegistry.getMCPTools().map((tool) =>
       // 不要传递 handler
       ({

package/src/browser/types.ts

@@ -27,7 +27,6 @@ import { SumiReadableStream } from '@opensumi/ide-utils/lib/stream';
 import { IMarker } from '@opensumi/monaco-editor-core/esm/vs/platform/markers/common/markers';
 
 import { IChatWelcomeMessageContent, ISampleQuestions, ITerminalCommandSuggestionDesc } from '../common';
-import { SerializedContext } from '../common/llm-context';
 
 import {
   ICodeEditsContextBean,