@lobehub/chat 1.84.3 → 1.84.4

package/locales/vi-VN/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "Xác nhận",
   "debug": {
     "arguments": "Tham số gọi",
     "function_call": "Gọi hàm",
@@ -80,6 +81,13 @@
         "required": "Vui lòng nhập định danh dịch vụ MCP"
       },
       "previewManifest": "Xem trước tệp mô tả plugin",
+      "quickImport": "Nhập khẩu nhanh cấu hình JSON",
+      "quickImportError": {
+        "empty": "Nội dung nhập vào không được để trống",
+        "invalidJson": "Định dạng JSON không hợp lệ",
+        "invalidStructure": "Định dạng JSON không hợp lệ"
+      },
+      "stdioNotSupported": "Môi trường hiện tại không hỗ trợ plugin MCP loại stdio",
       "testConnection": "Kiểm tra kết nối",
       "testConnectionTip": "Chỉ sau khi kiểm tra kết nối thành công, plugin MCP mới có thể được sử dụng bình thường",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Schema"
     },
     "preview": {
+      "api": {
+        "noParams": "Công cụ này không có tham số",
+        "noResults": "Không tìm thấy API nào phù hợp với điều kiện tìm kiếm",
+        "params": "Tham số:",
+        "searchPlaceholder": "Tìm kiếm công cụ..."
+      },
       "card": "Xem trước hiệu ứng plugin",
       "desc": "Xem trước mô tả plugin",
+      "empty": {
+        "desc": "Sau khi hoàn thành cấu hình, bạn sẽ có thể xem trước khả năng của các công cụ hỗ trợ plugin tại đây",
+        "title": "Bắt đầu xem trước sau khi cấu hình plugin"
+      },
       "title": "Xem trước tên plugin"
     },
     "save": "Cài đặt plugin",

package/locales/zh-CN/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "确定",
   "debug": {
     "arguments": "调用参数",
     "function_call": "函数调用",
@@ -80,6 +81,13 @@
         "required": "请输入 MCP 服务标识符"
       },
       "previewManifest": "预览插件描述文件",
+      "quickImport": "快速导入 JSON 配置",
+      "quickImportError": {
+        "empty": "输入内容不能为空",
+        "invalidJson": "无效的 JSON 格式",
+        "invalidStructure": "JSON 格式无效"
+      },
+      "stdioNotSupported": "当前环境不支持 stdio 类型的 MCP 插件",
       "testConnection": "测试连接",
       "testConnectionTip": "测试连接成功后 MCP 插件才可以被正常使用",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Schema"
     },
     "preview": {
+      "api": {
+        "noParams": "该工具没有参数",
+        "noResults": "未找到符合搜索条件的 API",
+        "params": "参数:",
+        "searchPlaceholder": "搜索工具..."
+      },
       "card": "预览插件展示效果",
       "desc": "预览插件描述",
+      "empty": {
+        "desc": "完成配置后，将能够在此处预览插件支持的工具能力",
+        "title": "配置插件后开始预览"
+      },
       "title": "插件名称预览"
     },
     "save": "安装插件",

package/locales/zh-TW/plugin.json

@@ -1,4 +1,5 @@
 {
+  "confirm": "確定",
   "debug": {
     "arguments": "參數",
     "function_call": "函式呼叫",
@@ -80,6 +81,13 @@
         "required": "請輸入 MCP 服務標識符"
       },
       "previewManifest": "預覽插件描述文件",
+      "quickImport": "快速匯入 JSON 配置",
+      "quickImportError": {
+        "empty": "輸入內容不能為空",
+        "invalidJson": "無效的 JSON 格式",
+        "invalidStructure": "JSON 格式無效"
+      },
+      "stdioNotSupported": "當前環境不支持 stdio 類型的 MCP 插件",
       "testConnection": "測試連接",
       "testConnectionTip": "測試連接成功後 MCP 插件才可以被正常使用",
       "type": {
@@ -147,8 +155,18 @@
       "schema": "Schema"
     },
     "preview": {
+      "api": {
+        "noParams": "該工具沒有參數",
+        "noResults": "未找到符合搜索條件的 API",
+        "params": "參數：",
+        "searchPlaceholder": "搜索工具..."
+      },
       "card": "外掛顯示預覽",
       "desc": "外掛描述預覽",
+      "empty": {
+        "desc": "完成配置後，將能夠在此處預覽插件支持的工具能力",
+        "title": "配置插件後開始預覽"
+      },
       "title": "外掛名稱預覽"
     },
     "save": "安裝插件",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.84.3",
+  "version": "1.84.4",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -146,7 +146,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^2.0.0",
     "@lobehub/tts": "^2.0.0",
-    "@lobehub/ui": "^2.0.5",
+    "@lobehub/ui": "^2.0.6",
     "@modelcontextprotocol/sdk": "^1.10.1",
     "@neondatabase/serverless": "^1.0.0",
     "@next/third-parties": "^15.3.0",

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

@@ -7,14 +7,12 @@ import {
   SiPython,
 } from '@icons-pack/react-simple-icons';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Alert, AutoComplete, Button, FormItem, Icon, Input } from '@lobehub/ui';
-import { Form, FormInstance } from 'antd';
-import { FileCode } from 'lucide-react';
-import { ChangeEvent, FC, useState } from 'react';
+import { Alert, AutoComplete, FormItem, Input, TextArea } from '@lobehub/ui';
+import { Button, Form, FormInstance } from 'antd';
+import { 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';
@@ -58,57 +56,81 @@ 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 [isImportModalVisible, setIsImportModalVisible] = useState(false);
+  const [jsonInput, setJsonInput] = useState('');
+  const [importError, setImportError] = 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 handleImportConfirm = () => {
+    setImportError(null); // Clear previous import error
+    setConnectionError(null); // Clear connection error
 
+    const value = jsonInput.trim(); // Use the text area input
+    if (!value) {
+      setImportError(t('dev.mcp.quickImportError.empty'));
+      return;
+    }
+
+    // Use the existing parseMcpInput function
     const parseResult = parseMcpInput(value);
 
-    if (parseResult.status !== 'success') return;
+    // Handle parsing errors from parseMcpInput
+    if (parseResult.status === 'error') {
+      // Assuming parseMcpInput returns an error message or code in parseResult
+      // We might need a more specific error message based on parseResult.error
+      setImportError(parseResult.errorCode);
+      return;
+    }
+
+    if (parseResult.status === 'noop') {
+      setImportError(t('dev.mcp.quickImportError.invalidJson'));
+      return;
+    }
 
+    // Extract identifier and mcpConfig from the successful parse result
     const { identifier, mcpConfig } = parseResult;
 
+    // Check for desktop requirement for stdio
     if (!isDesktop && mcpConfig.type === 'stdio') {
+      setImportError(t('dev.mcp.stdioNotSupported'));
       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)
-        },
+        customParams: { mcp: mcpConfig },
         identifier: identifier,
       });
       // Trigger validation to show Form.Item error
       form.validateFields(['identifier']);
+      setIsImportModalVisible(false); // Close modal even on duplicate error
+      setJsonInput(''); // Clear modal input
       return;
     }
 
-    // No duplicate or in edit mode, fill the form
+    // All checks passed, fill the form
     form.setFieldsValue({
       customParams: { mcp: mcpConfig },
       identifier: identifier,
     });
 
-    // Clear potential old validation error on identifier
+    // Clear potential old validation error on identifier field
     form.setFields([{ errors: [], name: 'identifier' }]);
+
+    // Clear modal state and close (or rather, hide the import UI)
+    setIsImportModalVisible(false);
+    // setJsonInput(''); // Keep input for potential edits?
+    setImportError(null);
   };
 
   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;
@@ -142,7 +164,6 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
         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 });
@@ -165,138 +186,184 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
   };
 
   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" />
-        )}
-        <FormItem
-          desc={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');
-                    }
-                  },
-                },
-          ]}
-          tag={'identifier'}
-        >
-          <Input
-            onChange={handleIdentifierChange}
-            placeholder={t('dev.mcp.identifier.placeholder')}
+    <>
+      {isImportModalVisible ? (
+        <Flexbox gap={8}>
+          {importError && (
+            <Alert message={importError} showIcon style={{ marginBottom: 8 }} type="error" />
+          )}
+          <TextArea
+            autoSize={{ maxRows: 15, minRows: 10 }}
+            onChange={(e) => {
+              setJsonInput(e.target.value);
+              if (importError) setImportError(null);
+            }}
+            placeholder={`{
+  "mcpServers": {
+    "github": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-github"
+      ],
+      "env": {
+        "GITHUB_PERSONAL_ACCESS_TOKEN": "<your-api-key>"
+      }
+    }
+  }
+}`}
+            value={jsonInput}
           />
-        </FormItem>
+          <Flexbox horizontal justify={'space-between'}>
+            <Button
+              onClick={() => {
+                setIsImportModalVisible(false);
+              }}
+              size={'small'}
+            >
+              取消
+            </Button>
+            <Button onClick={handleImportConfirm} size={'small'} type={'primary'}>
+              导入
+            </Button>
+          </Flexbox>
+        </Flexbox>
+      ) : (
+        <div>
+          <Button
+            block // Make button full width
+            onClick={() => {
+              setImportError(null); // Clear previous errors when opening
+              setIsImportModalVisible(true);
+            }}
+            style={{ marginBottom: 16 }} // Add some spacing
+            type="dashed"
+          >
+            {t('dev.mcp.quickImport')}
+          </Button>
+        </div>
+      )}
+
+      <Form form={form} layout={'vertical'}>
+        <Flexbox>
+          <Form.Item
+            label={t('dev.mcp.type.title')}
+            name={['customParams', 'mcp', 'type']}
+            rules={[{ required: true }]}
+          >
+            <MCPTypeSelect />
+          </Form.Item>
 
-        {mcpType === 'http' && (
           <FormItem
-            desc={t('dev.mcp.url.desc')}
-            label={t('dev.mcp.url.label')}
-            name={HTTP_URL_KEY}
+            desc={t('dev.mcp.identifier.desc')}
+            label={t('dev.mcp.identifier.label')}
+            name={'identifier'}
             rules={[
-              { message: t('dev.mcp.url.required'), required: true },
-              { message: t('dev.mcp.url.invalid'), type: 'url' },
+              { 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');
+                      }
+                    },
+                  },
             ]}
-            tag={'url'}
+            tag={'identifier'}
           >
-            <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
+            <Input placeholder={t('dev.mcp.identifier.placeholder')} />
           </FormItem>
-        )}
 
-        {mcpType === 'stdio' && (
-          <>
-            <FormItem
-              desc={t('dev.mcp.command.desc')}
-              label={t('dev.mcp.command.label')}
-              name={STDIO_COMMAND}
-              rules={[{ message: t('dev.mcp.command.required'), required: true }]}
-              tag={'command'}
-            >
-              <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')}
-              />
-            </FormItem>
-            <FormItem
-              desc={t('dev.mcp.args.desc')}
-              label={t('dev.mcp.args.label')}
-              name={STDIO_ARGS}
-              rules={[{ message: t('dev.mcp.args.required'), required: true }]}
-              tag={'args'}
-            >
-              <ArgsInput placeholder={t('dev.mcp.args.placeholder')} />
-            </FormItem>
+          {mcpType === 'http' && (
             <FormItem
-              extra={t('dev.mcp.env.desc')}
-              label={t('dev.mcp.env.label')}
-              name={STDIO_ENV}
-              tag={'env'}
+              desc={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' },
+              ]}
+              tag={'url'}
             >
-              <EnvEditor />
+              <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
             </FormItem>
-          </>
-        )}
-        <FormItem colon={false} label={t('dev.mcp.testConnectionTip')} layout={'horizontal'}>
-          <Flexbox align={'center'} gap={8} horizontal justify={'flex-end'}>
-            {manifest && !connectionError && !isTesting && (
-              <ManifestPreviewer manifest={manifest}>
-                <Flexbox>
-                  <Button icon={<Icon icon={FileCode} />}>{t('dev.mcp.previewManifest')}</Button>
-                </Flexbox>
-              </ManifestPreviewer>
-            )}
-            <Button
-              loading={isTesting}
-              onClick={handleTestConnection}
-              type={!!mcpType ? 'primary' : undefined}
-            >
-              {t('dev.mcp.testConnection')}
-            </Button>
-          </Flexbox>
-        </FormItem>
-
-        {connectionError && (
-          <Alert
-            closable
-            message={connectionError}
-            onClose={() => setConnectionError(null)}
-            showIcon
-            style={{ marginBottom: 16 }}
-            type="error"
-          />
-        )}
-        <FormItem name={'manifest'} noStyle />
-      </Flexbox>
-    </Form>
+          )}
+
+          {mcpType === 'stdio' && (
+            <>
+              <FormItem
+                desc={t('dev.mcp.command.desc')}
+                label={t('dev.mcp.command.label')}
+                name={STDIO_COMMAND}
+                rules={[{ message: t('dev.mcp.command.required'), required: true }]}
+                tag={'command'}
+              >
+                <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')}
+                />
+              </FormItem>
+              <FormItem
+                desc={t('dev.mcp.args.desc')}
+                label={t('dev.mcp.args.label')}
+                name={STDIO_ARGS}
+                rules={[{ message: t('dev.mcp.args.required'), required: true }]}
+                tag={'args'}
+              >
+                <ArgsInput placeholder={t('dev.mcp.args.placeholder')} />
+              </FormItem>
+              <FormItem
+                extra={t('dev.mcp.env.desc')}
+                label={t('dev.mcp.env.label')}
+                name={STDIO_ENV}
+                tag={'env'}
+              >
+                <EnvEditor />
+              </FormItem>
+            </>
+          )}
+          <FormItem colon={false} label={t('dev.mcp.testConnectionTip')} layout={'horizontal'}>
+            <Flexbox align={'center'} gap={8} horizontal justify={'flex-end'}>
+              <Button
+                loading={isTesting}
+                onClick={handleTestConnection}
+                type={!!mcpType ? 'primary' : undefined}
+              >
+                {t('dev.mcp.testConnection')}
+              </Button>
+            </Flexbox>
+          </FormItem>
+
+          {connectionError && (
+            <Alert
+              closable
+              message={connectionError}
+              onClose={() => setConnectionError(null)}
+              showIcon
+              style={{ marginBottom: 16 }}
+              type="error"
+            />
+          )}
+          <FormItem name={'manifest'} noStyle />
+        </Flexbox>
+      </Form>
+    </>
   );
 };