@lobehub/chat 1.82.0 → 1.82.1

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

@@ -0,0 +1,176 @@
+import { Icon } from '@lobehub/ui';
+import { Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { CheckIcon, RouterIcon, TerminalIcon } from 'lucide-react';
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { isDesktop } from '@/const/version';
+
+// Define styles using antd-style (moved from MCPManifestForm)
+const useStyles = createStyles(({ token, css }) => ({
+  active: css`
+    border-color: ${token.colorPrimary};
+
+    &:hover {
+      border-color: ${token.colorPrimary};
+    }
+  `,
+  cardDescription: css`
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextDescription};
+  `,
+  cardTitle: css`
+    font-weight: bold;
+  `,
+  checkIcon: css`
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-end: 12px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+
+    color: ${token.colorBgContainer};
+
+    background-color: ${token.colorPrimary};
+  `,
+  container: css`
+    cursor: pointer;
+
+    position: relative;
+
+    width: 100%;
+    padding-block: 12px;
+    padding-inline: 16px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+
+    background-color: ${token.colorBgContainer};
+
+    transition:
+      border-color 0.3s ${token.motionEaseInOut},
+      box-shadow 0.3s ${token.motionEaseInOut};
+
+    &:hover {
+      border-color: ${token.colorPrimaryHover};
+    }
+  `,
+  disabled: css`
+    cursor: not-allowed;
+    border-color: ${token.colorBorder};
+    opacity: 0.6;
+    background-color: ${token.colorBgContainerDisabled};
+
+    &:hover {
+      border-color: ${token.colorBorder};
+    }
+  `,
+  featureIcon: css`
+    color: ${token.colorTextSecondary};
+  `,
+  featureItem: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+  featureText: css`
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+// Helper component for feature list items (moved from MCPManifestForm)
+const FeatureItem = memo(({ children }: { children: React.ReactNode }) => {
+  const { styles } = useStyles();
+  return (
+    <div className={styles.featureItem}>
+      <Center className={styles.featureIcon}>
+        <CheckIcon size={16} />
+      </Center>
+      <div className={styles.featureText}>{children}</div>
+    </div>
+  );
+});
+
+interface MCPTypeSelectProps {
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const MCPTypeSelect = ({ value, onChange }: MCPTypeSelectProps) => {
+  const { t } = useTranslation('plugin');
+  const { styles, cx } = useStyles();
+
+  const handleSelect = (type: string) => {
+    onChange?.(type);
+  };
+
+  const data = [
+    {
+      description: t('dev.mcp.type.httpShortDesc'),
+      features: [t('dev.mcp.type.httpFeature1'), t('dev.mcp.type.httpFeature2')],
+      icon: RouterIcon,
+      label: 'Streamable HTTP',
+      value: 'http',
+    },
+    {
+      description: t('dev.mcp.type.stdioShortDesc'),
+      features: [t('dev.mcp.type.stdioFeature1'), t('dev.mcp.type.stdioFeature2')],
+      icon: TerminalIcon,
+      label: 'STDIO',
+      value: 'stdio',
+    },
+  ];
+
+  return (
+    <Flexbox gap={16} horizontal width={'100%'}>
+      {data.map(({ label, description, features, value: itemValue, icon }) => {
+        const isActive = value === itemValue;
+        const disabled = itemValue === 'stdio' && !isDesktop;
+        return (
+          <Flexbox
+            className={cx(styles.container, isActive && styles.active, disabled && styles.disabled)}
+            gap={12}
+            key={itemValue}
+            onClick={disabled ? undefined : () => handleSelect(itemValue)}
+            style={{ flex: 1 }} // Make cards take equal width
+          >
+            <Center className={styles.checkIcon} style={{ opacity: isActive ? 1 : 0 }}>
+              <CheckIcon size={14} />
+            </Center>
+
+            <Flexbox align={'flex-start'} gap={12} horizontal>
+              <Center height={22}>
+                <Icon icon={icon} style={{ fontSize: 16 }} />
+              </Center>
+              <Flexbox>
+                <div className={styles.cardTitle}>{label}</div>
+                <div className={styles.cardDescription}>{description}</div>
+              </Flexbox>
+            </Flexbox>
+            <Flexbox gap={8}>
+              {features.map((feature) => (
+                <FeatureItem key={feature}>{feature}</FeatureItem>
+              ))}
+            </Flexbox>
+            {disabled && (
+              <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type="warning">
+                {t('dev.mcp.type.stdioNotAvailable')}
+              </Typography.Text>
+            )}
+          </Flexbox>
+        );
+      })}
+      {/* Streamable HTTP Card */}
+    </Flexbox>
+  );
+};
+
+export default MCPTypeSelect;

package/src/features/PluginDevModal/{MCPManifestForm.tsx → MCPManifestForm/index.tsx}

@@ -1,23 +1,52 @@
+import {
+  SiBun,
+  SiDocker,
+  SiNodedotjs,
+  SiNpm,
+  SiPnpm,
+  SiPython,
+} from '@icons-pack/react-simple-icons';
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { ActionIcon, FormItem } from '@lobehub/ui';
-import { Form, FormInstance, Input, Radio, Select } from 'antd';
+import { AutoComplete, Form, FormInstance, Input } from 'antd';
 import { FileCode, RotateCwIcon } from 'lucide-react';
-import { useState } from 'react';
+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';
 import { pluginSelectors } from '@/store/tool/selectors';
 import { PluginInstallError } from '@/types/tool/plugin';
 
+import ArgsInput from './ArgsInput';
+import MCPTypeSelect from './MCPTypeSelect';
+
 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 MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
   const { t } = useTranslation('plugin');
   const mcpType = Form.useWatch(['customParams', 'mcp', 'type'], form);
@@ -25,9 +54,18 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
   const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
 
   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 gap={16}>
+      <Flexbox>
+        <Form.Item
+          label={t('dev.mcp.type.title')}
+          name={['customParams', 'mcp', 'type']}
+          rules={[{ required: true }]}
+        >
+          <MCPTypeSelect />
+        </Form.Item>
         <Form.Item
           extra={t('dev.mcp.identifier.desc')}
           label={t('dev.mcp.identifier.label')}
@@ -38,7 +76,6 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               message: t('dev.mcp.identifier.invalid'),
               pattern: /^[\w-]+$/,
             },
-            // 编辑模式下，不进行重复校验
             isEditMode
               ? {}
               : {
@@ -46,7 +83,6 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                   validator: async () => {
                     const id = form.getFieldValue('identifier');
                     if (!id) return true;
-
                     if (pluginIds.includes(id)) {
                       throw new Error('Duplicate');
                     }
@@ -57,21 +93,6 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
           <Input placeholder={t('dev.mcp.identifier.placeholder')} />
         </Form.Item>
 
-        <Form.Item
-          extra={t('dev.mcp.type.desc')}
-          initialValue={'http'}
-          label={t('dev.mcp.type.label')}
-          name={['customParams', 'mcp', 'type']}
-          rules={[{ required: true }]}
-        >
-          <Radio.Group>
-            <Radio value={'http'}>Streamable HTTP</Radio>
-            <Radio disabled={!isDesktop} value={'stdio'}>
-              STDIO
-            </Radio>
-          </Radio.Group>
-        </Form.Item>
-
         {mcpType === 'http' && (
           <Form.Item
             extra={
@@ -97,14 +118,12 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               {
                 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;
@@ -136,21 +155,64 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
             <Form.Item
               extra={t('dev.mcp.command.desc')}
               label={t('dev.mcp.command.label')}
-              name={['mcp', 'command']}
+              name={STDIO_COMMAND}
               rules={[{ required: true }]}
             >
-              <Input placeholder={t('dev.mcp.command.placeholder')} />
+              <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')}
+              hasFeedback
               label={t('dev.mcp.args.label')}
-              name={['mcp', 'args']}
-              tooltip={t('dev.mcp.args.tooltip')}
+              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! });
+                    }
+                  },
+                },
+              ]}
             >
-              <Select
-                mode="tags"
+              <ArgsInput
                 placeholder={t('dev.mcp.args.placeholder')}
-                tokenSeparators={[',', ' ']}
+                suffix={
+                  <ActionIcon
+                    icon={RotateCwIcon}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      form.validateFields([STDIO_ARGS]);
+                    }}
+                    size={'small'}
+                    title={t('dev.meta.manifest.refresh')}
+                  />
+                }
               />
             </Form.Item>
           </>

package/src/libs/mcp/__tests__/__snapshots__/index.test.ts.snap

@@ -1,61 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MCPClient > Stdio Transport (using SDK Mock Server) > should list tools via stdio 1`] = `
-[
-  {
-    "description": "Echoes back a message with 'Hello' prefix",
-    "inputSchema": {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "additionalProperties": false,
-      "properties": {
-        "message": {
-          "description": "The message to echo",
-          "type": "string",
-        },
-      },
-      "required": [
-        "message",
-      ],
-      "type": "object",
-    },
-    "name": "echo",
-  },
-  {
-    "description": "Lists all available tools and methods",
-    "inputSchema": {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "additionalProperties": false,
-      "properties": {},
-      "type": "object",
-    },
-    "name": "debug",
-  },
-  {
-    "description": "Adds two numbers",
-    "inputSchema": {
-      "$schema": "http://json-schema.org/draft-07/schema#",
-      "additionalProperties": false,
-      "properties": {
-        "a": {
-          "description": "The first number",
-          "type": "number",
-        },
-        "b": {
-          "description": "The second number",
-          "type": "number",
-        },
-      },
-      "required": [
-        "a",
-        "b",
-      ],
-      "type": "object",
-    },
-    "name": "add",
-  },
-]
-`;
-
 exports[`MCPClient > Stdio Transport > should list tools via stdio 1`] = `
 [
   {

package/src/locales/default/electron.ts

@@ -17,18 +17,54 @@ const electron = {
     statusDisconnected: '未连接',
     urlRequired: '请输入服务器地址',
   },
+  sync: {
+    continue: '继续',
+    inCloud: '当前使用云端同步',
+    inLocalStorage: '当前使用本地存储',
+    isIniting: '正在初始化...',
+    lobehubCloud: {
+      description: '官方提供的云版本',
+      title: 'LobeHub Cloud',
+    },
+    local: {
+      description: '使用本地数据库，完全离线可用',
+      title: '本地数据库',
+    },
+    mode: {
+      cloudSync: '云端同步',
+      localStorage: '本地存储',
+      title: '选择你的连接模式',
+      useSelfHosted: '使用自托管实例？',
+    },
+    selfHosted: {
+      description: '自行部署的社区版本',
+      title: '自托管实例',
+    },
+  },
   updater: {
+    checkingUpdate: '检查新版本',
+    checkingUpdateDesc: '正在获取版本信息...',
+    downloadNewVersion: '下载新版本',
     downloadingUpdate: '正在下载更新',
     downloadingUpdateDesc: '更新正在下载中，请稍候...',
+    installLater: '下次启动时更新',
+    isLatestVersion: '当前已是最新版本',
+    isLatestVersionDesc: '非常棒，使用的版本 {{version}} 已是最前沿的版本。',
     later: '稍后更新',
     newVersionAvailable: '新版本可用',
     newVersionAvailableDesc: '发现新版本 {{version}}，是否立即下载？',
-    restartAndInstall: '重启并安装',
+    restartAndInstall: '安装更新并重启',
     updateError: '更新错误',
     updateReady: '更新已就绪',
-    updateReadyDesc: 'Lobe Chat {{version}} 已下载完成，重启应用后即可完成安装。',
+    updateReadyDesc: '新版本 {{version}} 已下载完成，重启应用后即可完成安装。',
     upgradeNow: '立即更新',
   },
+  waitingOAuth: {
+    cancel: '取消',
+    description: '浏览器已打开授权页面，请在浏览器中完成授权',
+    helpText: '如果浏览器没有自动打开，请点击取消后重新尝试',
+    title: '等待授权连接',
+  },
 };
 
 export default electron;

package/src/locales/default/plugin.ts

@@ -47,15 +47,14 @@ export default {
     },
     mcp: {
       args: {
-        desc: '传递给 STDIO 命令的参数列表',
+        desc: '传递给 STDIO 命令的参数列表，一般在这里输入 MCP 服务器名称',
         label: '命令参数',
-        placeholder: '例如：--port 8080 --debug',
-        tooltip: '输入参数后按回车或使用逗号/空格分隔',
+        placeholder: '例如：mcp-hello-world',
       },
       command: {
-        desc: '用于启动 MCP STDIO 插件的可执行文件或脚本',
+        desc: '用于启动 MCP STDIO Server 的可执行文件或脚本',
         label: '命令',
-        placeholder: '例如：python main.py 或 /path/to/executable',
+        placeholder: '例如：npx / uv / docker 等',
       },
       endpoint: {
         desc: '输入你的 MCP Streamable HTTP Server 的地址',
@@ -69,11 +68,19 @@ export default {
       },
       type: {
         desc: '选择 MCP 插件的通信方式，网页版只支持 Streamable HTTP',
+        httpFeature1: '兼容网页版与桌面端',
+        httpFeature2: '连接远程 MCP 服务端, 无需额外安装配置',
+        httpShortDesc: '基于流式 HTTP 的通信协议',
         label: 'MCP 插件类型',
+        stdioFeature1: '更低的通信延迟, 适合本地执行',
+        stdioFeature2: '通过系统标准输入输出通信，需在本地安装运行 MCP 服务端',
+        stdioNotAvailable: 'STDIO 模式仅在桌面版可用',
+        stdioShortDesc: '基于标准输入输出的通信协议',
+        title: 'MCP 插件类型',
       },
       url: {
-        desc: '输入你的 MCP HTTP 插件的 Endpoint 地址',
-        label: 'HTTP Endpoint URL',
+        desc: '输入你的 MCP Server Streamable HTTP 地址，不会以 /sse 结尾',
+        label: 'Streamable HTTP Endpoint URL',
       },
     },
     meta: {

package/src/server/modules/ElectronIPCClient/index.ts

@@ -0,0 +1,36 @@
+import { ElectronIpcClient } from '@lobechat/electron-server-ipc';
+
+class LobeHubElectronIpcClient extends ElectronIpcClient {
+  // 获取数据库路径
+  getDatabasePath = async (): Promise<string> => {
+    return this.sendRequest<string>('getDatabasePath');
+  };
+
+  // 获取用户数据路径
+  getUserDataPath = async (): Promise<string> => {
+    return this.sendRequest<string>('getUserDataPath');
+  };
+
+  getDatabaseSchemaHash = async () => {
+    return this.sendRequest<string>('setDatabaseSchemaHash');
+  };
+
+  setDatabaseSchemaHash = async (hash: string | undefined) => {
+    if (!hash) return;
+
+    return this.sendRequest('setDatabaseSchemaHash', hash);
+  };
+
+  getFilePathById = async (id: string) => {
+    return this.sendRequest<string>('getStaticFilePath', id);
+  };
+
+  deleteFiles = async (paths: string[]) => {
+    return this.sendRequest<{ errors?: { message: string; path: string }[]; success: boolean }>(
+      'deleteFiles',
+      paths,
+    );
+  };
+}
+
+export const electronIpcClient = new LobeHubElectronIpcClient();

package/src/server/routers/lambda/session.ts

@@ -97,14 +97,10 @@ export const sessionRouter = router({
     }),
 
   getGroupedSessions: publicProcedure.query(async ({ ctx }): Promise<ChatSessionList> => {
-    if (!ctx.userId)
-      return {
-        sessionGroups: [],
-        sessions: [],
-      };
+    if (!ctx.userId) return { sessionGroups: [], sessions: [] };
 
     const serverDB = await getServerDB();
-    const sessionModel = new SessionModel(serverDB, ctx.userId);
+    const sessionModel = new SessionModel(serverDB, ctx.userId!);
 
     return sessionModel.queryWithGroups();
   }),

package/src/server/routers/tools/mcp.ts

@@ -35,6 +35,12 @@ const checkStdioEnvironment = (params: z.infer<typeof mcpClientParamsSchema>) =>
 const mcpProcedure = isServerMode ? authedProcedure : passwordProcedure;
 
 export const mcpRouter = router({
+  getStdioMcpServerManifest: mcpProcedure.input(stdioParamsSchema).query(async ({ input }) => {
+    // Stdio check can be done here or rely on the service/client layer
+    checkStdioEnvironment(input);
+
+    return await mcpService.getStdioMcpServerManifest(input.name, input.command, input.args);
+  }),
   getStreamableMcpServerManifest: mcpProcedure
     .input(
       z.object({

package/src/server/services/file/impls/index.ts

@@ -1,11 +1,19 @@
+import { isDesktop } from '@/const/version';
+
+import { DesktopLocalFileImpl } from './local';
 import { S3StaticFileImpl } from './s3';
 import { FileServiceImpl } from './type';
 
 /**
  * 创建文件服务模块
+ * 根据环境自动选择使用S3或桌面本地文件实现
  */
 export const createFileServiceModule = (): FileServiceImpl => {
-  // 默认使用 S3 实现
+  // 如果在桌面应用环境，使用本地文件实现
+  if (isDesktop) {
+    return new DesktopLocalFileImpl();
+  }
+
   return new S3StaticFileImpl();
 };