@lobehub/chat 1.82.0 → 1.82.2

package/src/features/PluginDevModal/MCPManifestForm/index.tsx

@@ -0,0 +1,289 @@
+import {
+  SiBun,
+  SiDocker,
+  SiNodedotjs,
+  SiNpm,
+  SiPnpm,
+  SiPython,
+} from '@icons-pack/react-simple-icons';
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+import { Alert, FormItem, Icon } from '@lobehub/ui';
+import { AutoComplete, Button, Form, FormInstance, Input } from 'antd';
+import { FileCode } from 'lucide-react';
+import { ChangeEvent, FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ManifestPreviewer from '@/components/ManifestPreviewer';
+import { isDesktop } from '@/const/version';
+import { mcpService } from '@/services/mcp';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import ArgsInput from './ArgsInput';
+import MCPTypeSelect from './MCPTypeSelect';
+import { parseMcpInput } from './utils';
+
+interface MCPManifestFormProps {
+  form: FormInstance;
+  isEditMode?: boolean;
+}
+
+// 定义预设的命令选项
+const STDIO_COMMAND_OPTIONS: {
+  // 假设图标是 React 函数组件
+  color?: string;
+  icon?: FC<{ color?: string; size?: number }>;
+  value: string;
+}[] = [
+  { color: '#CB3837', icon: SiNpm, value: 'npx' },
+  { color: '#CB3837', icon: SiNpm, value: 'npm' },
+  { color: '#F69220', icon: SiPnpm, value: 'pnpm' },
+  { color: '#F69220', icon: SiPnpm, value: 'pnpx' },
+  { color: '#339933', icon: SiNodedotjs, value: 'node' },
+  { color: '#efe2d2', icon: SiBun, value: 'bun' },
+  { color: '#efe2d2', icon: SiBun, value: 'bunx' },
+  { color: '#DE5FE9', icon: SiPython, value: 'uv' },
+  { color: '#3776AB', icon: SiPython, value: 'python' },
+  { color: '#2496ED', icon: SiDocker, value: 'docker' },
+];
+
+const HTTP_URL_KEY = ['customParams', 'mcp', 'url'];
+const STDIO_COMMAND = ['customParams', 'mcp', 'command'];
+const STDIO_ARGS = ['customParams', 'mcp', 'args'];
+const MCP_TYPE = ['customParams', 'mcp', 'type'];
+
+const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
+  const { t } = useTranslation('plugin');
+  const mcpType = Form.useWatch(MCP_TYPE, form);
+  const [manifest, setManifest] = useState<LobeChatPluginManifest>();
+  const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
+  const [pasteError, setPasteError] = useState<string | null>(null);
+  const [isTesting, setIsTesting] = useState(false);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+
+  const handleIdentifierChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.trim();
+    setPasteError(null); // Clear previous errors on new input
+    setConnectionError(null); // Clear connection error on identifier change
+
+    const parseResult = parseMcpInput(value);
+
+    if (parseResult.status !== 'success') return;
+
+    const { identifier, mcpConfig } = parseResult;
+
+    if (!isDesktop && mcpConfig.type === 'stdio') {
+      return;
+    }
+
+    // Check for duplicate identifier (only in create mode)
+    if (!isEditMode && pluginIds.includes(identifier)) {
+      setPasteError(t('dev.meta.identifier.errorDuplicate'));
+      // Update form fields even if duplicate, so user sees the pasted values
+      form.setFieldsValue({
+        // Update identifier field
+        customParams: {
+          mcp: mcpConfig, // Spread the parsed config (includes type)
+        },
+        identifier: identifier,
+      });
+      // Trigger validation to show Form.Item error
+      form.validateFields(['identifier']);
+      return;
+    }
+
+    // No duplicate or in edit mode, fill the form
+    form.setFieldsValue({
+      customParams: { mcp: mcpConfig },
+      identifier: identifier,
+    });
+
+    // Clear potential old validation error on identifier
+    form.setFields([{ errors: [], name: 'identifier' }]);
+  };
+
+  const handleTestConnection = async () => {
+    setIsTesting(true);
+    setConnectionError(null);
+    setManifest(undefined); // Reset manifest before testing
+
+    // Manually trigger validation for fields needed for the test
+    let isValid = false;
+    try {
+      await form.validateFields([
+        ...(mcpType === 'http' ? [HTTP_URL_KEY] : [STDIO_COMMAND, STDIO_ARGS]),
+      ]);
+      isValid = true;
+    } catch {}
+
+    if (!isValid) {
+      setIsTesting(false);
+      return;
+    }
+
+    try {
+      const values = form.getFieldsValue();
+      const id = values.identifier;
+      const mcp = values.customParams?.mcp;
+
+      let data: LobeChatPluginManifest;
+
+      if (mcp.type === 'http') {
+        if (!mcp.url) throw new Error(t('dev.mcp.url.required'));
+        data = await mcpService.getStreamableMcpServerManifest(id, mcp.url);
+      } else if (mcp.type === 'stdio') {
+        if (!mcp.command) throw new Error(t('dev.mcp.command.required'));
+        if (!mcp.args) throw new Error(t('dev.mcp.args.required'));
+        data = await mcpService.getStdioMcpServerManifest(id, mcp.command, mcp.args);
+      } else {
+        throw new Error('Invalid MCP type'); // Internal error
+      }
+
+      setManifest(data);
+      // Optionally update form if manifest ID differs or to store the fetched manifest
+      // Be careful about overwriting user input if not desired
+      form.setFieldsValue({ manifest: data });
+    } catch (error) {
+      // Check if error is a validation error object (from validateFields)
+
+      // Handle API call errors or other errors
+      const err = error as Error; // Assuming PluginInstallError or similar structure
+      // Use the error message directly if it's a simple string error, otherwise try translation
+      // highlight-start
+      const errorMessage = t('error.testConnectionFailed', {
+        error: err.cause || err.message || t('unknownError'),
+      });
+      // highlight-end
+
+      setConnectionError(errorMessage);
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  return (
+    <Form form={form} layout={'vertical'}>
+      <Flexbox>
+        <Form.Item
+          label={t('dev.mcp.type.title')}
+          name={['customParams', 'mcp', 'type']}
+          rules={[{ required: true }]}
+        >
+          <MCPTypeSelect />
+        </Form.Item>
+        {/* 仅在有粘贴相关错误时显示 Alert */}
+        {pasteError && (
+          <Alert message={pasteError} showIcon style={{ marginBottom: 16 }} type="error" />
+        )}
+        <Form.Item
+          extra={t('dev.mcp.identifier.desc')}
+          label={t('dev.mcp.identifier.label')}
+          name={'identifier'}
+          rules={[
+            { message: t('dev.mcp.identifier.required'), required: true },
+            {
+              message: t('dev.mcp.identifier.invalid'),
+              pattern: /^[\w-]+$/,
+            },
+            isEditMode
+              ? {}
+              : {
+                  message: t('dev.meta.identifier.errorDuplicate'),
+                  validator: async () => {
+                    const id = form.getFieldValue('identifier');
+                    if (!id) return true;
+                    if (pluginIds.includes(id)) {
+                      throw new Error('Duplicate');
+                    }
+                  },
+                },
+          ]}
+        >
+          <Input
+            onChange={handleIdentifierChange}
+            placeholder={t('dev.mcp.identifier.placeholder')}
+          />
+        </Form.Item>
+
+        {mcpType === 'http' && (
+          <Form.Item
+            extra={t('dev.mcp.url.desc')}
+            label={t('dev.mcp.url.label')}
+            name={HTTP_URL_KEY}
+            rules={[
+              { message: t('dev.mcp.url.required'), required: true },
+              { message: t('dev.mcp.url.invalid'), type: 'url' },
+            ]}
+          >
+            <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
+          </Form.Item>
+        )}
+
+        {mcpType === 'stdio' && (
+          <>
+            <Form.Item
+              extra={t('dev.mcp.command.desc')}
+              label={t('dev.mcp.command.label')}
+              name={STDIO_COMMAND}
+              rules={[{ message: t('dev.mcp.command.required'), required: true }]}
+            >
+              <AutoComplete
+                options={STDIO_COMMAND_OPTIONS.map(({ value, icon: Icon, color }) => ({
+                  label: (
+                    <Flexbox align={'center'} gap={8} horizontal>
+                      {Icon && <Icon color={color} size={16} />}
+                      {value}
+                    </Flexbox>
+                  ),
+                  value: value,
+                }))}
+                placeholder={t('dev.mcp.command.placeholder')}
+              />
+            </Form.Item>
+            <Form.Item
+              extra={t('dev.mcp.args.desc')}
+              label={t('dev.mcp.args.label')}
+              name={STDIO_ARGS}
+              rules={[{ message: t('dev.mcp.args.required'), required: true }]}
+            >
+              <ArgsInput placeholder={t('dev.mcp.args.placeholder')} />
+            </Form.Item>
+          </>
+        )}
+        <Form.Item extra={t('dev.mcp.testConnectionTip')}>
+          <Flexbox align={'center'} gap={8} horizontal>
+            <Button
+              loading={isTesting}
+              onClick={handleTestConnection}
+              type={!!mcpType ? 'primary' : undefined}
+            >
+              {t('dev.mcp.testConnection')}
+            </Button>
+            {manifest && !connectionError && !isTesting && (
+              <ManifestPreviewer manifest={manifest}>
+                <Flexbox>
+                  <Button icon={<Icon icon={FileCode} />}>{t('dev.mcp.previewManifest')}</Button>
+                </Flexbox>
+              </ManifestPreviewer>
+            )}
+          </Flexbox>
+        </Form.Item>
+
+        {connectionError && (
+          <Alert
+            closable
+            message={connectionError}
+            onClose={() => setConnectionError(null)}
+            showIcon
+            style={{ marginBottom: 16 }}
+            type="error"
+          />
+        )}
+        <FormItem name={'manifest'} noStyle />
+      </Flexbox>
+    </Form>
+  );
+};
+
+export default MCPManifestForm;

package/src/features/PluginDevModal/MCPManifestForm/utils.test.ts

@@ -0,0 +1,262 @@
+import { describe, expect, it } from 'vitest';
+
+import { McpParseErrorCode, parseMcpInput } from './utils';
+
+describe('parseMcpInput', () => {
+  // Test Suite 1: Valid Nested mcpServers Structure
+  describe('Nested mcpServers Structure', () => {
+    it('should correctly parse valid stdio config', () => {
+      const input = JSON.stringify({
+        mcpServers: {
+          'sequential-thinking': {
+            command: 'npx',
+            args: ['-y', '@modelcontextprotocol/server-sequential-thinking'],
+          },
+        },
+      });
+      const expected = {
+        status: 'success',
+        identifier: 'sequential-thinking',
+        mcpConfig: {
+          command: 'npx',
+          args: ['-y', '@modelcontextprotocol/server-sequential-thinking'],
+          type: 'stdio',
+        },
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should correctly parse valid http config', () => {
+      const input = JSON.stringify({
+        mcpServers: {
+          'some-http-service': {
+            url: 'https://example.com/api',
+          },
+        },
+      });
+      const expected = {
+        status: 'success',
+        identifier: 'some-http-service',
+        mcpConfig: {
+          url: 'https://example.com/api',
+          type: 'http',
+        },
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should correctly parse valid http config with empty string identifier', () => {
+      const input = JSON.stringify({
+        mcpServers: {
+          '': {
+            url: 'https://router.mcp.so/mcp/mdvp27m9tl2bxs',
+          },
+        },
+      });
+      const expected = {
+        status: 'success',
+        identifier: '',
+        mcpConfig: {
+          url: 'https://router.mcp.so/mcp/mdvp27m9tl2bxs',
+          type: 'http',
+        },
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error for empty mcpServers object', () => {
+      const input = JSON.stringify({ mcpServers: {} });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.EmptyMcpServers,
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error for invalid structure within mcpServers config', () => {
+      const input = JSON.stringify({
+        mcpServers: {
+          'invalid-config': {}, // Missing command/args or url
+        },
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidMcpStructure,
+        identifier: 'invalid-config',
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error if mcpConfig is not an object', () => {
+      const input = JSON.stringify({
+        mcpServers: {
+          'not-an-object': 'hello',
+        },
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidMcpStructure,
+        identifier: 'not-an-object',
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error if mcpConfig is null', () => {
+      const input = JSON.stringify({
+        mcpServers: {
+          'is-null': null,
+        },
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidMcpStructure,
+        identifier: 'is-null',
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+  });
+
+  // Test Suite 2: Valid Flat Structure (Top-level Identifier)
+  describe('Flat Structure (Top-level Identifier)', () => {
+    it('should correctly parse valid stdio config', () => {
+      const input = JSON.stringify({
+        'flat-stdio-service': {
+          command: 'go',
+          args: ['run', 'main.go'],
+        },
+      });
+      const expected = {
+        status: 'success',
+        identifier: 'flat-stdio-service',
+        mcpConfig: {
+          command: 'go',
+          args: ['run', 'main.go'],
+          type: 'stdio',
+        },
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should correctly parse valid http config', () => {
+      const input = JSON.stringify({
+        'mcp-wolframalpha': {
+          url: 'https://mcp.higress.ai/mcp-wolframalpha/abc',
+        },
+      });
+      const expected = {
+        status: 'success',
+        identifier: 'mcp-wolframalpha',
+        mcpConfig: {
+          url: 'https://mcp.higress.ai/mcp-wolframalpha/abc',
+          type: 'http',
+        },
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error for invalid structure within flat config', () => {
+      const input = JSON.stringify({
+        'invalid-flat': {}, // Missing command/args or url
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidMcpStructure,
+        identifier: 'invalid-flat',
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error if the value associated with the identifier is not an object', () => {
+      const input = JSON.stringify({
+        'flat-not-object': 'just a string',
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidMcpStructure,
+        identifier: 'flat-not-object',
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error if the value associated with the identifier is null', () => {
+      const input = JSON.stringify({
+        'flat-is-null': null,
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidMcpStructure,
+        identifier: 'flat-is-null',
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return error for multiple top-level keys', () => {
+      const input = JSON.stringify({
+        key1: { url: 'url1' },
+        key2: { url: 'url2' },
+      });
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidJsonStructure, // Because it's not a single-key flat structure nor mcpServers/manifest
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+  });
+
+  // Test Suite 4: Invalid Inputs and Edge Cases
+  describe('Invalid Inputs and Edge Cases', () => {
+    it('should return noop for invalid JSON string', () => {
+      const input = 'this is not json';
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return noop for empty string', () => {
+      const input = '';
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return noop for null input', () => {
+      // @ts-ignore testing invalid input type
+      const input = null;
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input as any)).toEqual(expected);
+    });
+
+    it('should return noop for undefined input', () => {
+      // @ts-ignore testing invalid input type
+      const input = undefined;
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input as any)).toEqual(expected);
+    });
+
+    it('should return InvalidJsonStructure for empty JSON object', () => {
+      const input = JSON.stringify({});
+      // Empty object is considered an invalid structure because it doesn't match any expected format
+      const expected = {
+        status: 'error',
+        errorCode: McpParseErrorCode.InvalidJsonStructure,
+      };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return noop for JSON array', () => {
+      const input = JSON.stringify([]);
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return noop for JSON primitive (string)', () => {
+      const input = JSON.stringify('just a string');
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+
+    it('should return noop for JSON primitive (number)', () => {
+      const input = JSON.stringify(123);
+      const expected = { status: 'noop' };
+      expect(parseMcpInput(input)).toEqual(expected);
+    });
+  });
+});

package/src/features/PluginDevModal/MCPManifestForm/utils.ts

@@ -0,0 +1,151 @@
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+
+import { safeParseJSON } from '@/utils/safeParseJSON';
+
+// （McpConfig, McpServers, ParsedMcpInput 接口定义保持不变）
+interface McpConfig {
+  args?: string[];
+  command?: string;
+  url?: string;
+}
+
+interface McpServers {
+  [key: string]: McpConfig;
+}
+
+interface ParsedMcpInput {
+  manifest?: LobeChatPluginManifest;
+  mcpServers?: McpServers;
+}
+
+// 移除 DuplicateIdentifier
+export enum McpParseErrorCode {
+  EmptyMcpServers = 'EmptyMcpServers',
+  InvalidJsonStructure = 'InvalidJsonStructure',
+  InvalidMcpStructure = 'InvalidMcpStructure',
+  ManifestNotSupported = 'ManifestNotSupported',
+}
+
+// 移除 isDuplicate
+interface ParseSuccessResult {
+  identifier: string;
+  mcpConfig: McpConfig & { type: 'stdio' | 'http' };
+  status: 'success';
+}
+
+interface ParseErrorResult {
+  errorCode: McpParseErrorCode;
+  // identifier 字段仍然可能有用，用于在结构错误时也能显示用户输入的 ID
+  identifier?: string;
+  status: 'error';
+}
+
+interface ParseNoOpResult {
+  status: 'noop';
+}
+
+export type ParseResult = ParseSuccessResult | ParseErrorResult | ParseNoOpResult;
+
+export const parseMcpInput = (value: string): ParseResult => {
+  const parsedJson = safeParseJSON<ParsedMcpInput | McpServers>(value);
+
+  if (parsedJson && typeof parsedJson === 'object' && !Array.isArray(parsedJson)) {
+    // 1. Check for the nested "mcpServers" structure
+    if (
+      'mcpServers' in parsedJson &&
+      typeof parsedJson.mcpServers === 'object' &&
+      parsedJson.mcpServers !== null
+    ) {
+      const mcpKeys = Object.keys(parsedJson.mcpServers);
+
+      if (mcpKeys.length > 0) {
+        const identifier = mcpKeys[0];
+        // @ts-expect-error type 不一样
+        const mcpConfig = parsedJson.mcpServers[identifier];
+
+        if (mcpConfig && typeof mcpConfig === 'object' && !Array.isArray(mcpConfig)) {
+          let type: 'stdio' | 'http' | undefined;
+          let resultMcpConfig: McpConfig & { type?: 'stdio' | 'http' } = {};
+
+          if (mcpConfig.command && Array.isArray(mcpConfig.args)) {
+            type = 'stdio';
+            resultMcpConfig = { ...mcpConfig, type };
+          } else if (mcpConfig.url) {
+            type = 'http';
+            resultMcpConfig = { type, url: mcpConfig.url };
+          } else {
+            return {
+              errorCode: McpParseErrorCode.InvalidMcpStructure,
+              identifier,
+              status: 'error',
+            };
+          }
+
+          return {
+            identifier,
+            mcpConfig: resultMcpConfig as McpConfig & { type: 'stdio' | 'http' },
+            status: 'success',
+          };
+        }
+        // mcpConfig is invalid or not an object
+        return {
+          errorCode: McpParseErrorCode.InvalidMcpStructure,
+          identifier: identifier,
+          status: 'error',
+        };
+      } else {
+        // mcpServers object is empty
+        return { errorCode: McpParseErrorCode.EmptyMcpServers, status: 'error' };
+      }
+    }
+    // 3. Check for the flat structure (identifier as top-level key)
+    else {
+      const topLevelKeys = Object.keys(parsedJson);
+
+      // Allow exactly one top-level key which is the identifier
+      if (topLevelKeys.length === 1) {
+        const identifier = topLevelKeys[0];
+        // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+        const mcpConfig = (parsedJson as any)[identifier];
+
+        if (mcpConfig && typeof mcpConfig === 'object' && !Array.isArray(mcpConfig)) {
+          let type: 'stdio' | 'http' | undefined;
+          let resultMcpConfig: McpConfig & { type?: 'stdio' | 'http' } = {};
+
+          // Explicitly check properties of mcpConfig
+          if (mcpConfig.command && Array.isArray(mcpConfig.args)) {
+            type = 'stdio';
+            resultMcpConfig = { ...mcpConfig, type };
+          } else if (mcpConfig.url) {
+            type = 'http';
+            // For the flat structure, ensure only 'url' is included for http type
+            resultMcpConfig = { type, url: mcpConfig.url };
+          } else {
+            // Invalid structure within the identifier's value
+            return {
+              errorCode: McpParseErrorCode.InvalidMcpStructure,
+              identifier, // We have the identifier here
+              status: 'error',
+            };
+          }
+
+          // Structure parsed successfully
+          return {
+            identifier,
+            mcpConfig: resultMcpConfig as McpConfig & { type: 'stdio' | 'http' },
+            status: 'success',
+          };
+        } else {
+          // The value associated with the single key is not a valid config object
+          return { errorCode: McpParseErrorCode.InvalidMcpStructure, identifier, status: 'error' };
+        }
+      } else {
+        // Neither mcpServers nor manifest, and not a single top-level key structure
+        return { errorCode: McpParseErrorCode.InvalidJsonStructure, status: 'error' };
+      }
+    }
+  }
+
+  // Input is not a valid JSON object or failed safeParseJSON
+  return { status: 'noop' }; // Or potentially InvalidJsonStructure if safeParse failed but wasn't null/undefined?
+};