@lobehub/chat 1.84.2 → 1.84.4

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

package/src/features/PluginDevModal/PluginPreview/ApiVisualizer.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { Block, Icon, Tag } from '@lobehub/ui';
+import { Input, Space, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  apiHeader: css`
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  `,
+
+  apiTitle: css`
+    font-family: ${token.fontFamilyCode};
+  `,
+
+  emptyState: css`
+    padding: 32px;
+    color: ${token.colorTextDisabled};
+    text-align: center;
+  `,
+  header: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-block-end: 24px;
+  `,
+  paramDesc: css`
+    font-size: 12px;
+    line-height: 18px;
+    color: ${token.colorTextSecondary};
+  `,
+  paramGrid: css`
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 12px;
+    align-items: center;
+
+    margin-block-end: 12px;
+  `,
+  paramName: css`
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    font-family: monospace;
+  `,
+  params: css`
+    color: ${token.colorTextQuaternary};
+  `,
+  required: css`
+    margin-inline-start: 2px;
+    color: ${token.colorError};
+  `,
+  searchIcon: css`
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 50%;
+    inset-inline-start: 12px;
+    transform: translateY(-50%);
+
+    color: ${token.colorTextSecondary};
+  `,
+  searchWrapper: css`
+    position: relative;
+  `,
+  typeTag: css`
+    height: 20px;
+    padding-block: 0;
+    padding-inline: 6px;
+
+    font-size: 12px;
+    line-height: 20px;
+  `,
+}));
+
+interface ApiItemProps {
+  api: {
+    description: string;
+    name: string;
+    parameters: {
+      properties: Record<string, { description: string; type: string }>;
+      required: string[];
+    };
+  };
+}
+
+const ApiItem = memo<ApiItemProps>(({ api }) => {
+  const { styles, theme } = useStyles();
+  const [expanded, setExpanded] = useState(false);
+  const { t } = useTranslation('plugin');
+
+  const params = Object.entries(api.parameters.properties || {});
+  return (
+    <Block gap={8} padding={16}>
+      <div className={styles.apiHeader} onClick={() => setExpanded(!expanded)}>
+        <Flexbox gap={4}>
+          <div className={styles.apiTitle}>{api.name}</div>
+          <Typography.Text type="secondary">{api.description}</Typography.Text>
+        </Flexbox>
+
+        <Icon icon={expanded ? ChevronDown : ChevronRight} />
+      </div>
+
+      {expanded && (
+        <Flexbox
+          gap={12}
+          padding={16}
+          style={{ background: theme.colorFillQuaternary, borderRadius: 6 }}
+        >
+          {params.length === 0 ? (
+            <div className={styles.params}>{t('dev.preview.api.noParams')}</div>
+          ) : (
+            <>
+              <div className={styles.params}>{t('dev.preview.api.params')}</div>
+              <Space direction="vertical" style={{ width: '100%' }}>
+                {params.map(([name, param]) => {
+                  const isRequired = api.parameters.required?.includes(name);
+                  return (
+                    <div className={styles.paramGrid} key={name}>
+                      <div className={styles.paramName}>
+                        <span>{name}</span>
+                        {isRequired && <span className={styles.required}>*</span>}
+                        <Tag className={styles.typeTag}>{param.type}</Tag>
+                      </div>
+                      <div className={styles.paramDesc}>{param.description}</div>
+                    </div>
+                  );
+                })}
+              </Space>
+            </>
+          )}
+        </Flexbox>
+      )}
+    </Block>
+  );
+});
+
+interface ApiVisualizerProps {
+  apis: ApiItemProps['api'][];
+}
+
+const ApiVisualizer = memo<ApiVisualizerProps>(({ apis = [] }) => {
+  const { styles } = useStyles();
+  const [searchQuery, setSearchQuery] = useState('');
+  const { t } = useTranslation('plugin');
+
+  const filteredApis = apis.filter(
+    (api) =>
+      api.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      api.description.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  return (
+    <Flexbox gap={8} width={'100%'}>
+      <div className={styles.searchWrapper}>
+        <Input.Search
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder={t('dev.preview.api.searchPlaceholder')}
+          value={searchQuery}
+        />
+      </div>
+
+      <Space direction="vertical" style={{ width: '100%' }}>
+        {filteredApis.length > 0 ? (
+          filteredApis.map((api, index) => <ApiItem api={api} key={index} />)
+        ) : (
+          <div className={styles.emptyState}>{t('dev.preview.api.noResults')}</div>
+        )}
+      </Space>
+    </Flexbox>
+  );
+});
+
+export default ApiVisualizer;

package/src/features/PluginDevModal/PluginPreview/EmptyState.tsx

@@ -0,0 +1,78 @@
+import { Icon } from '@lobehub/ui';
+import { Space, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { Puzzle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+const { Title, Paragraph } = Typography;
+
+// Create styles using antd-style
+const useStyles = createStyles(({ token, css }) => ({
+  container: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+    padding: ${token.paddingLG}px;
+  `,
+  description: css`
+    max-width: 320px;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+  `,
+  iconWrapper: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 64px;
+    height: 64px;
+    margin-block-end: ${token.marginMD}px;
+    border-radius: 50%;
+
+    background-color: ${token.colorPrimaryBg};
+  `,
+  line: css`
+    height: 6px;
+    border-radius: 3px;
+    background: ${token.colorBorderSecondary};
+  `,
+  placeholderLine: css`
+    height: 6px;
+    margin-block: ${token.marginXS}px;
+    margin-inline: 0;
+    border-radius: ${token.borderRadiusLG}px;
+
+    background-color: ${token.colorBorderSecondary};
+  `,
+  title: css`
+    margin-block-end: ${token.marginXS}px;
+    font-size: ${token.fontSizeLG}px;
+    font-weight: 500;
+  `,
+}));
+
+export default function PluginEmptyState() {
+  const { styles } = useStyles();
+  const { t } = useTranslation('plugin');
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.iconWrapper}>
+        <Icon icon={Puzzle} size={32} />
+      </div>
+      <Title className={styles.title} level={4}>
+        {t('dev.preview.empty.title')}
+      </Title>
+      <Paragraph className={styles.description}>{t('dev.preview.empty.desc')}</Paragraph>
+      <Space align="center" direction="vertical" style={{ marginTop: 24 }}>
+        <div className={styles.line} style={{ width: 128 }} />
+        <div className={styles.line} style={{ width: 96 }} />
+        <div className={styles.line} style={{ width: 48 }} />
+      </Space>
+    </div>
+  );
+}