@lobehub/chat 1.82.1 → 1.82.3

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

@@ -7,21 +7,22 @@ import {
   SiPython,
 } from '@icons-pack/react-simple-icons';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { ActionIcon, FormItem } from '@lobehub/ui';
-import { AutoComplete, Form, FormInstance, Input } from 'antd';
-import { FileCode, RotateCwIcon } from 'lucide-react';
-import { FC, useState } from 'react';
+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 { PluginInstallError } from '@/types/tool/plugin';
 
 import ArgsInput from './ArgsInput';
 import MCPTypeSelect from './MCPTypeSelect';
+import { parseMcpInput } from './utils';
 
 interface MCPManifestFormProps {
   form: FormInstance;
@@ -47,15 +48,120 @@ const STDIO_COMMAND_OPTIONS: {
   { 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(['customParams', 'mcp', 'type'], form);
+  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);
+    }
+  };
 
-  const HTTP_URL_KEY = ['customParams', 'mcp', 'url'];
-  const STDIO_COMMAND = ['customParams', 'mcp', 'command'];
-  const STDIO_ARGS = ['customParams', 'mcp', 'args'];
   return (
     <Form form={form} layout={'vertical'}>
       <Flexbox>
@@ -66,12 +172,16 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
         >
           <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={[
-            { required: true },
+            { message: t('dev.mcp.identifier.required'), required: true },
             {
               message: t('dev.mcp.identifier.invalid'),
               pattern: /^[\w-]+$/,
@@ -90,63 +200,23 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                 },
           ]}
         >
-          <Input placeholder={t('dev.mcp.identifier.placeholder')} />
+          <Input
+            onChange={handleIdentifierChange}
+            placeholder={t('dev.mcp.identifier.placeholder')}
+          />
         </Form.Item>
 
         {mcpType === 'http' && (
           <Form.Item
-            extra={
-              <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
-                {t('dev.mcp.url.desc')}
-                {manifest && (
-                  <ManifestPreviewer manifest={manifest}>
-                    <ActionIcon
-                      icon={FileCode}
-                      size={'small'}
-                      title={t('dev.meta.manifest.preview')}
-                    />
-                  </ManifestPreviewer>
-                )}
-              </Flexbox>
-            }
-            hasFeedback
+            extra={t('dev.mcp.url.desc')}
             label={t('dev.mcp.url.label')}
             name={HTTP_URL_KEY}
             rules={[
-              { required: true },
-              { type: 'url' },
-              {
-                validator: async (_, value) => {
-                  if (!value) return true;
-                  try {
-                    const data = await mcpService.getStreamableMcpServerManifest(
-                      form.getFieldValue('identifier'),
-                      value,
-                    );
-                    setManifest(data);
-                    form.setFieldsValue({ identifier: data.identifier, manifest: data });
-                  } catch (error) {
-                    const err = error as PluginInstallError;
-                    throw t(`error.${err.message}`, { error: err.cause! });
-                  }
-                },
-              },
+              { 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"
-              suffix={
-                <ActionIcon
-                  icon={RotateCwIcon}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    form.validateFields([HTTP_URL_KEY]);
-                  }}
-                  size={'small'}
-                  title={t('dev.meta.manifest.refresh')}
-                />
-              }
-            />
+            <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
           </Form.Item>
         )}
 
@@ -156,7 +226,7 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               extra={t('dev.mcp.command.desc')}
               label={t('dev.mcp.command.label')}
               name={STDIO_COMMAND}
-              rules={[{ required: true }]}
+              rules={[{ message: t('dev.mcp.command.required'), required: true }]}
             >
               <AutoComplete
                 options={STDIO_COMMAND_OPTIONS.map(({ value, icon: Icon, color }) => ({
@@ -173,50 +243,43 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
             </Form.Item>
             <Form.Item
               extra={t('dev.mcp.args.desc')}
-              hasFeedback
               label={t('dev.mcp.args.label')}
               name={STDIO_ARGS}
-              rules={[
-                { required: true },
-                {
-                  validator: async (_, value) => {
-                    if (!value) return true;
-                    const name = form.getFieldValue('identifier');
-
-                    if (!name) throw new Error('Please input mcp server name');
-                    try {
-                      const data = await mcpService.getStdioMcpServerManifest(
-                        name,
-                        form.getFieldValue(STDIO_COMMAND),
-                        value,
-                      );
-                      setManifest(data);
-                      form.setFieldsValue({ identifier: data.identifier, manifest: data });
-                    } catch (error) {
-                      const err = error as PluginInstallError;
-                      throw t(`error.${err.message}`, { error: err.cause! });
-                    }
-                  },
-                },
-              ]}
+              rules={[{ message: t('dev.mcp.args.required'), required: true }]}
             >
-              <ArgsInput
-                placeholder={t('dev.mcp.args.placeholder')}
-                suffix={
-                  <ActionIcon
-                    icon={RotateCwIcon}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      form.validateFields([STDIO_ARGS]);
-                    }}
-                    size={'small'}
-                    title={t('dev.meta.manifest.refresh')}
-                  />
-                }
-              />
+              <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>

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);
+    });
+  });
+});