@lobehub/chat 1.84.3 → 1.84.4

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

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

@@ -0,0 +1,72 @@
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
+import { Block, Icon } from '@lobehub/ui';
+import { Form as AForm, Button, FormInstance, Typography } from 'antd';
+import { useTheme } from 'antd-style';
+import { FileCode } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ManifestPreviewer from '@/components/ManifestPreviewer';
+import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
+import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
+import { pluginHelpers } from '@/store/tool';
+
+import ApiVisualizer from './ApiVisualizer';
+import PluginEmptyState from './EmptyState';
+
+const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
+  const { t } = useTranslation('plugin');
+  const theme = useTheme();
+  const manifest: LobeChatPluginManifest = AForm.useWatch(['manifest'], form);
+  const meta = manifest?.meta;
+
+  if (!manifest)
+    return (
+      <Flexbox flex={2} height={'100%'} style={{ background: theme.colorBgLayout }}>
+        <PluginEmptyState />
+      </Flexbox>
+    );
+
+  return (
+    <Flexbox
+      flex={2}
+      gap={24}
+      padding={12}
+      style={{ background: theme.colorBgLayout, overflowY: 'auto' }}
+    >
+      <Block
+        gap={16}
+        horizontal
+        justify={'space-between'}
+        padding={16}
+        title={t('dev.preview.card')}
+        variant={'outlined'}
+      >
+        <Flexbox gap={16} horizontal>
+          <PluginAvatar avatar={pluginHelpers.getPluginAvatar(meta)} size={40} />
+          <Flexbox gap={2}>
+            <Flexbox align={'center'} gap={8} horizontal>
+              {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
+              <PluginTag type={'customPlugin'} />
+            </Flexbox>
+            <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+              {pluginHelpers.getPluginDesc(meta) || 'Plugin Description'}
+            </Typography.Text>
+          </Flexbox>
+        </Flexbox>
+
+        {manifest && (
+          <ManifestPreviewer manifest={manifest}>
+            <Flexbox>
+              <Button icon={<Icon icon={FileCode} />}>{t('dev.mcp.previewManifest')}</Button>
+            </Flexbox>
+          </ManifestPreviewer>
+        )}
+      </Block>
+      {manifest && <ApiVisualizer apis={manifest.api as any} />}
+    </Flexbox>
+  );
+});
+
+export default PluginPreview;

package/src/features/PluginDevModal/index.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Icon, Modal, Segmented, Tag } from '@lobehub/ui';
+import { Alert, Button, Drawer, Icon, Segmented, Tag } from '@lobehub/ui';
 import { App, Form, Popconfirm } from 'antd';
 import { useResponsive } from 'antd-style';
 import { MoveUpRight } from 'lucide-react';
@@ -29,7 +29,9 @@ const DevModal = memo<DevModalProps>(
     const [configMode, setConfigMode] = useState<'url' | 'mcp'>('mcp');
     const { t } = useTranslation('plugin');
     const { message } = App.useApp();
+
     const [submitting, setSubmitting] = useState(false);
+
     const { mobile } = useResponsive();
     const [form] = Form.useForm();
     useEffect(() => {
@@ -106,83 +108,94 @@ const DevModal = memo<DevModalProps>(
           onOpenChange(false);
         }}
       >
-        <Modal
-          allowFullscreen
+        <Drawer
+          containerMaxWidth={'auto'}
           destroyOnClose
           footer={footer}
-          okText={t('dev.save')}
-          onCancel={(e) => {
+          height={'100vh'}
+          onClose={(e) => {
             e.stopPropagation();
             onOpenChange(false);
           }}
-          onOk={(e) => {
-            e.stopPropagation();
-            form.submit();
-          }}
           open={open}
+          placement={'bottom'}
+          push={false}
+          styles={{
+            body: {
+              padding: 0,
+            },
+            bodyContent: {
+              height: '100%',
+            },
+          }}
           title={t(isEditMode ? 'dev.title.edit' : 'dev.title.create')}
+          width={mobile ? '100%' : 800}
         >
           <Flexbox
-            gap={16}
+            gap={0}
+            height={'100%'}
+            horizontal
             onClick={(e) => {
               e.stopPropagation();
             }}
           >
-            <Segmented
-              block
-              onChange={(e) => {
-                setConfigMode(e as 'url' | 'mcp');
-              }}
-              options={[
-                {
-                  label: (
-                    <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
-                      {t('dev.manifest.mode.mcp')}
-                      <div>
-                        <Tag bordered={false} color={'warning'}>
-                          {t('dev.manifest.mode.mcpExp')}
-                        </Tag>
-                      </div>
-                    </Flexbox>
-                  ),
-                  value: 'mcp',
-                },
-                {
-                  label: t('dev.manifest.mode.url'),
-                  value: 'url',
-                },
-              ]}
-              value={configMode}
-              variant={'filled'}
-            />
+            <Flexbox flex={3} gap={16} padding={24} style={{ overflowY: 'auto' }}>
+              <Segmented
+                block
+                onChange={(e) => {
+                  setConfigMode(e as 'url' | 'mcp');
+                }}
+                options={[
+                  {
+                    label: (
+                      <Flexbox align={'center'} gap={4} horizontal justify={'center'}>
+                        {t('dev.manifest.mode.mcp')}
+                        <div>
+                          <Tag bordered={false} color={'warning'}>
+                            {t('dev.manifest.mode.mcpExp')}
+                          </Tag>
+                        </div>
+                      </Flexbox>
+                    ),
+                    value: 'mcp',
+                  },
+                  {
+                    label: t('dev.manifest.mode.url'),
+                    value: 'url',
+                  },
+                ]}
+                value={configMode}
+                variant={'filled'}
+              />
 
-            {configMode === 'url' && (
-              <>
-                <Alert
-                  message={
-                    <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
-                      添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
-                      <a
-                        href={WIKI_PLUGIN_GUIDE}
-                        rel="noreferrer"
-                        style={{ paddingInline: 8 }}
-                        target={'_blank'}
-                      >
-                        文档
-                      </a>
-                      <Icon icon={MoveUpRight} />
-                    </Trans>
-                  }
-                  showIcon
-                  type={'info'}
-                />
-                <UrlManifestForm form={form} isEditMode={isEditMode} />
-              </>
-            )}
-            {configMode === 'mcp' && <MCPManifestForm form={form} isEditMode={isEditMode} />}
+              {configMode === 'url' && (
+                <>
+                  <Alert
+                    message={
+                      <Trans i18nKey={'dev.modalDesc'} ns={'plugin'}>
+                        添加自定义插件后，可用于插件开发验证，也可直接在会话中使用。插件开发文档请参考：
+                        <a
+                          href={WIKI_PLUGIN_GUIDE}
+                          rel="noreferrer"
+                          style={{ paddingInline: 8 }}
+                          target={'_blank'}
+                        >
+                          文档
+                        </a>
+                        <Icon icon={MoveUpRight} />
+                      </Trans>
+                    }
+                    showIcon
+                    type={'info'}
+                  />
+                  <UrlManifestForm form={form} isEditMode={isEditMode} />
+                </>
+              )}
+              {configMode === 'mcp' && <MCPManifestForm form={form} isEditMode={isEditMode} />}
+            </Flexbox>
             <PluginPreview form={form} />
           </Flexbox>
-        </Modal>
+        </Drawer>
       </Form.Provider>
     );
   },

package/src/locales/default/plugin.ts

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

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,34 +0,0 @@
-import { Block } from '@lobehub/ui';
-import { Form as AForm, FormInstance, Typography } from 'antd';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-
-import PluginAvatar from '@/features/PluginStore/PluginItem/PluginAvatar';
-import PluginTag from '@/features/PluginStore/PluginItem/PluginTag';
-import { pluginHelpers } from '@/store/tool';
-import { LobeToolCustomPlugin } from '@/types/tool/plugin';
-
-const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
-  const { t } = useTranslation('plugin');
-
-  const plugin: LobeToolCustomPlugin = AForm.useWatch([], form);
-  const meta = plugin?.manifest?.meta;
-
-  return (
-    <Block gap={16} horizontal padding={16} title={t('dev.preview.card')} variant={'outlined'}>
-      <PluginAvatar avatar={pluginHelpers.getPluginAvatar(meta)} size={40} />
-      <Flexbox gap={2}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          {pluginHelpers.getPluginTitle(meta) || 'Plugin Title'}
-          <PluginTag type={'customPlugin'} />
-        </Flexbox>
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
-          {pluginHelpers.getPluginDesc(meta) || 'Plugin Description'}
-        </Typography.Text>
-      </Flexbox>
-    </Block>
-  );
-});
-
-export default PluginPreview;