@opensumi/ide-ai-native 3.8.1-next-1741250387.0 → 3.8.1-next-1741251026.0

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

@@ -0,0 +1,178 @@
+.container {
+  padding: 20px;
+  color: var(--foreground);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+}
+
+.title {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.description {
+  margin: 0;
+  color: var(--descriptionForeground);
+  font-size: 14px;
+}
+
+.addButton {
+  padding: 8px 16px;
+  border-radius: 4px;
+  background-color: var(--button-primary-background);
+  color: var(--button-primary-foreground);
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+
+  &:hover {
+    background-color: var(--button-primary-hover-background);
+  }
+}
+
+.serversList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.serverItem {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: var(--editorWidget-background);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-color: var(--focusBorder);
+  }
+}
+
+.serverHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.serverTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.serverName {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.serverStatus,
+.serverType {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+}
+
+.serverType {
+  background-color: var(--editor-background);
+  color: var(--descriptionForeground);
+}
+
+.running {
+  background-color: var(--notification-info-background);
+  color: var(--notification-info-foreground);
+}
+
+.stopped {
+  background-color: var(--notification-error-background);
+  color: var(--notification-error-foreground);
+}
+
+.serverActions {
+  display: flex;
+  gap: 4px;
+}
+
+.iconButton {
+  padding: 4px;
+  border: none;
+  background: none;
+  color: var(--icon-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: var(--list-hover-background);
+  }
+}
+
+.serverDetail {
+  margin-top: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  background-color: var(--editor-background);
+  font-size: 13px;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+}
+
+.detailRow {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+  align-items: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.detailLabel {
+  color: var(--descriptionForeground);
+  min-width: 70px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.detailContent {
+  color: var(--foreground);
+  word-break: break-all;
+  flex: 1;
+  background-color: var(--editor-background);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: var(--monaco-monospace-font);
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.toolTag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background-color: var(--editorWidget-background);
+  color: var(--button-secondary-foreground);
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: 1px solid var(--border-color);
+}

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

@@ -0,0 +1,215 @@
+import React from 'react';
+
+import { AINativeSettingSectionsId, ILogger, useInjectable } from '@opensumi/ide-core-browser';
+import { PreferenceService } from '@opensumi/ide-core-browser/lib/preferences';
+
+import { BUILTIN_MCP_SERVER_NAME } from '../../../../common';
+import { MCPServerDescription } from '../../../../common/mcp-server-manager';
+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 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 allServers = await mcpServerProxyService.$getServers();
+    setServers(allServers);
+  }, [mcpServerProxyService]);
+
+  React.useEffect(() => {
+    loadServers();
+    const disposer = mcpServerProxyService.onChangeMCPServers(() => {
+      loadServers();
+    });
+
+    return () => {
+      disposer.dispose();
+    };
+  }, [mcpServerProxyService, loadServers]);
+
+  const handleServerControl = 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 为空字符串
+            },
+          ];
+        } else {
+          // 如果已经存在配置，更新 enabled 状态
+          updatedServers = servers.map((server) => {
+            if (server.name === BUILTIN_MCP_SERVER_NAME) {
+              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);
+    }
+  };
+
+  const handleAddServer = () => {
+    setEditingServer(undefined);
+    setFormVisible(true);
+  };
+
+  const handleEditServer = (server: MCPServer) => {
+    const servers = preferenceService.get<MCPServerFormData[]>(AINativeSettingSectionsId.MCPServers, []);
+    const serverConfig = servers.find((s) => s.name === server.name);
+
+    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);
+    }
+
+    await preferenceService.set(AINativeSettingSectionsId.MCPServers, servers);
+    setFormVisible(false);
+    await loadServers();
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div>
+          <h2 className={styles.title}>MCP Servers</h2>
+          <p className={styles.description}>Manage your MCP server connections.</p>
+        </div>
+        <button className={styles.addButton} onClick={handleAddServer}>
+          + Add new MCP server
+        </button>
+      </div>
+      <div className={styles.serversList}>
+        {servers.map((server) => (
+          <div key={server.name} className={styles.serverItem}>
+            <div className={styles.serverHeader}>
+              <div className={styles.serverTitleRow}>
+                <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>
+                <button
+                  className={styles.iconButton}
+                  title={server.isStarted ? 'Stop' : 'Start'}
+                  onClick={() => handleServerControl(server.name, !server.isStarted)}
+                >
+                  <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>
+              </div>
+            </div>
+            <div className={styles.serverDetail}>
+              <div className={styles.detailRow}>
+                <span className={styles.detailLabel}>Status:</span>
+                <span className={`${styles.serverStatus} ${server.isStarted ? styles.running : styles.stopped}`}>
+                  {server.isStarted ? 'Running' : 'Stopped'}
+                </span>
+              </div>
+              {server.type && (
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Type:</span>
+                  <span className={styles.serverType}>{server.type}</span>
+                </div>
+              )}
+            </div>
+            {server.tools && server.tools.length > 0 && (
+              <div className={styles.serverDetail}>
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Tools:</span>
+                  <span className={styles.detailContent}>
+                    {server.tools.map((tool, index) => (
+                      <span key={index} className={styles.toolTag}>
+                        {tool}
+                      </span>
+                    ))}
+                  </span>
+                </div>
+              </div>
+            )}
+            {server.command && (
+              <div className={styles.serverDetail}>
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Command:</span>
+                  <span className={styles.detailContent}>{server.command}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+      <MCPServerForm
+        visible={formVisible}
+        initialData={editingServer}
+        onSave={handleSaveServer}
+        onCancel={() => setFormVisible(false)}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,78 @@
+.form {
+  padding: 16px;
+}
+
+.formItem {
+  margin-bottom: 16px;
+
+  label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--foreground);
+    font-size: 13px;
+  }
+
+  input,
+  textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    background-color: var(--input-background);
+    color: var(--input-foreground);
+    font-size: 13px;
+    font-family: var(--monaco-monospace-font);
+
+    &:focus {
+      border-color: var(--focusBorder);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--descriptionForeground);
+      opacity: 0.6;
+    }
+  }
+
+  textarea {
+    resize: vertical;
+    min-height: 60px;
+  }
+}
+
+.formActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-color);
+}
+
+.cancelButton {
+  padding: 6px 12px;
+  border: 1px solid var(--button-border);
+  border-radius: 4px;
+  background-color: var(--button-secondary-background);
+  color: var(--button-secondary-foreground);
+  cursor: pointer;
+  font-size: 13px;
+
+  &:hover {
+    background-color: var(--button-secondary-hover-background);
+  }
+}
+
+.submitButton {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 4px;
+  background-color: var(--button-primary-background);
+  color: var(--button-primary-foreground);
+  cursor: pointer;
+  font-size: 13px;
+
+  &:hover {
+    background-color: var(--button-primary-hover-background);
+  }
+}

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

@@ -0,0 +1,144 @@
+import React from 'react';
+
+import { Button } from '@opensumi/ide-components/lib/button';
+import { Modal } from '@opensumi/ide-components/lib/modal';
+
+import styles from './mcp-server-form.module.less';
+
+export interface MCPServerFormData {
+  name: string;
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+}
+
+interface Props {
+  visible: boolean;
+  initialData?: MCPServerFormData;
+  onSave: (data: MCPServerFormData) => void;
+  onCancel: () => void;
+}
+
+export const MCPServerForm: React.FC<Props> = ({ visible, initialData, onSave, onCancel }) => {
+  const [formData, setFormData] = React.useState<MCPServerFormData>(() => ({
+    name: '',
+    command: '',
+    args: [],
+    env: {},
+    type: 'stdio', // TODO: 支持 SSE
+    ...initialData,
+  }));
+
+  const [argsText, setArgsText] = React.useState(() => initialData?.args?.join(' ') || '');
+  const [envText, setEnvText] = React.useState(() => {
+    if (!initialData?.env) {
+      return '';
+    }
+    return Object.entries(initialData.env)
+      .map(([key, value]) => `${key}=${value}`)
+      .join('\n');
+  });
+
+  // Update form data when initialData changes
+  React.useEffect(() => {
+    setFormData({
+      name: '',
+      command: '',
+      args: [],
+      env: {},
+      ...initialData,
+    });
+    setArgsText(initialData?.args?.join(' ') || '');
+    setEnvText(
+      initialData?.env
+        ? Object.entries(initialData.env)
+            .map(([key, value]) => `${key}=${value}`)
+            .join('\n')
+        : '',
+    );
+  }, [initialData]);
+
+  const handleSubmit = (e: React.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({
+      ...formData,
+      args,
+      env,
+    });
+  };
+
+  return (
+    <Modal
+      title={initialData ? 'Edit MCP Server' : 'Add New MCP Server'}
+      visible={visible}
+      onCancel={onCancel}
+      centered
+      width={600}
+      footer={null}
+      style={{
+        background: 'var(--editor-background)',
+      }}
+    >
+      <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>
+        <div className={styles.formActions}>
+          <Button onClick={onCancel} type='secondary'>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} type='primary'>
+            Save
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+};

package/src/browser/mcp/config/mcp-config.commands.ts

@@ -0,0 +1,29 @@
+import { Autowired } from '@opensumi/di';
+import { CommandContribution, CommandRegistry, URI } from '@opensumi/ide-core-browser';
+import { Domain } from '@opensumi/ide-core-common';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+
+import { MCP_CONFIG_COMPONENTS_SCHEME_ID } from './mcp-config.contribution';
+
+export const OPEN_MCP_CONFIG_COMMAND = {
+  id: 'opensumi-mcp.openConfig',
+  label: 'Open MCP Configuration',
+};
+
+@Domain(CommandContribution)
+export class MCPConfigCommandContribution implements CommandContribution {
+  @Autowired(WorkbenchEditorService)
+  private readonly editorService: WorkbenchEditorService;
+
+  registerCommands(registry: CommandRegistry) {
+    registry.registerCommand(OPEN_MCP_CONFIG_COMMAND, {
+      execute: () => {
+        const uri = new URI().withScheme(MCP_CONFIG_COMPONENTS_SCHEME_ID);
+        this.editorService.open(uri, {
+          preview: false,
+          focus: true,
+        });
+      },
+    });
+  }
+}

package/src/browser/mcp/config/mcp-config.contribution.ts

@@ -0,0 +1,65 @@
+import { Autowired } from '@opensumi/di';
+import { LabelService } from '@opensumi/ide-core-browser/lib/services';
+import { Domain, Schemes, URI } from '@opensumi/ide-core-common';
+import {
+  BrowserEditorContribution,
+  EditorComponentRegistry,
+  EditorComponentRenderMode,
+  IResource,
+  ResourceService,
+} from '@opensumi/ide-editor/lib/browser/types';
+import { IconService } from '@opensumi/ide-theme/lib/browser';
+import { IWorkspaceService } from '@opensumi/ide-workspace/lib/common';
+
+import { MCPConfigView } from './components/mcp-config.view';
+
+const COMPONENTS_ID = 'opensumi-mcp-config-viewer';
+export const MCP_CONFIG_COMPONENTS_SCHEME_ID = 'mcp-config';
+
+export type IMCPConfigResource = IResource<{ configType: string }>;
+
+@Domain(BrowserEditorContribution)
+export class MCPConfigContribution implements BrowserEditorContribution {
+  @Autowired(IWorkspaceService)
+  protected readonly workspaceService: IWorkspaceService;
+
+  @Autowired(IconService)
+  protected readonly iconService: IconService;
+
+  @Autowired()
+  labelService: LabelService;
+
+  registerEditorComponent(registry: EditorComponentRegistry) {
+    registry.registerEditorComponent({
+      uid: COMPONENTS_ID,
+      scheme: MCP_CONFIG_COMPONENTS_SCHEME_ID,
+      component: MCPConfigView,
+      renderMode: EditorComponentRenderMode.ONE_PER_WORKBENCH,
+    });
+
+    registry.registerEditorComponentResolver(MCP_CONFIG_COMPONENTS_SCHEME_ID, (resource, results) => {
+      results.push({
+        type: 'component',
+        componentId: COMPONENTS_ID,
+      });
+    });
+  }
+
+  registerResource(service: ResourceService) {
+    service.registerResourceProvider({
+      scheme: MCP_CONFIG_COMPONENTS_SCHEME_ID,
+      provideResource: async (uri: URI): Promise<IMCPConfigResource> => {
+        const { configType } = uri.getParsedQuery();
+
+        return {
+          uri,
+          name: 'MCP Configuration',
+          icon: 'settings',
+          metadata: {
+            configType,
+          },
+        };
+      },
+    });
+  }
+}