@lobehub/chat 1.98.2 → 1.99.1

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

@@ -1,21 +1,20 @@
 import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
-import { Alert, FormItem, Input, TextArea } from '@lobehub/ui';
-import { Button, Divider, Form, FormInstance } from 'antd';
+import { Alert, FormItem, Input, InputPassword } from '@lobehub/ui';
+import { Button, Divider, Form, FormInstance, Radio } from 'antd';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import KeyValueEditor from '@/components/KeyValueEditor';
 import MCPStdioCommandInput from '@/components/MCPStdioCommandInput';
-import { isDesktop } from '@/const/version';
 import { mcpService } from '@/services/mcp';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
-import { electronStylish } from '@/styles/electron';
 
 import ArgsInput from './ArgsInput';
-import EnvEditor from './EnvEditor';
+import CollapsibleSection from './CollapsibleSection';
 import MCPTypeSelect from './MCPTypeSelect';
-import { parseMcpInput } from './utils';
+import QuickImportSection from './QuickImportSection';
 
 interface MCPManifestFormProps {
   form: FormInstance;
@@ -28,81 +27,20 @@ const STDIO_ARGS = ['customParams', 'mcp', 'args'];
 const STDIO_ENV = ['customParams', 'mcp', 'env'];
 const MCP_TYPE = ['customParams', 'mcp', 'type'];
 const DESC_TYPE = ['customParams', 'description'];
+// 新增认证相关常量
+const AUTH_TYPE = ['customParams', 'mcp', 'auth', 'type'];
+const AUTH_TOKEN = ['customParams', 'mcp', 'auth', 'token'];
+// 新增 headers 相关常量
+const HEADERS = ['customParams', 'mcp', 'headers'];
 
 const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
   const { t } = useTranslation('plugin');
   const mcpType = Form.useWatch(MCP_TYPE, form);
+  const authType = Form.useWatch(AUTH_TYPE, form);
 
   const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
   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 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);
-
-    // 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)) {
-      // Update form fields even if duplicate, so user sees the pasted values
-      form.setFieldsValue({
-        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;
-    }
-
-    // All checks passed, fill the form
-    form.setFieldsValue({
-      customParams: { mcp: mcpConfig },
-      identifier: 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);
@@ -111,9 +49,20 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
     // Manually trigger validation for fields needed for the test
     let isValid = false;
     try {
-      await form.validateFields([
+      const fieldsToValidate = [
         ...(mcpType === 'http' ? [HTTP_URL_KEY] : [STDIO_COMMAND, STDIO_ARGS]),
-      ]);
+      ];
+
+      // 如果是 HTTP 类型，还需要验证认证字段
+      if (mcpType === 'http') {
+        fieldsToValidate.push(AUTH_TYPE);
+        const currentAuthType = form.getFieldValue(AUTH_TYPE);
+        if (currentAuthType === 'bearer') {
+          fieldsToValidate.push(AUTH_TOKEN);
+        }
+      }
+
+      await form.validateFields(fieldsToValidate);
       isValid = true;
     } catch {
       // no-thing
@@ -135,9 +84,12 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
 
       if (mcp.type === 'http') {
         if (!mcp.url) throw new Error(t('dev.mcp.url.required'));
-        data = await mcpService.getStreamableMcpServerManifest(id, mcp.url, {
-          avatar,
-          description,
+        data = await mcpService.getStreamableMcpServerManifest({
+          auth: mcp.auth,
+          headers: mcp.headers,
+          identifier: id,
+          metadata: { avatar, description },
+          url: mcp.url,
         });
       } else if (mcp.type === 'stdio') {
         if (!mcp.command) throw new Error(t('dev.mcp.command.required'));
@@ -173,67 +125,15 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
 
   return (
     <>
-      {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}
-          />
-          <Flexbox horizontal justify={'space-between'}>
-            <Button
-              className={electronStylish.nodrag}
-              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>
-      )}
-
+      <QuickImportSection
+        form={form}
+        isEditMode={isEditMode}
+        onClearConnectionError={() => setConnectionError(null)}
+      />
       <Form form={form} layout={'vertical'}>
         <Flexbox>
           <Form.Item
+            initialValue={'http'}
             label={t('dev.mcp.type.title')}
             name={['customParams', 'mcp', 'type']}
             rules={[{ required: true }]}
@@ -268,26 +168,67 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
             <Input placeholder={t('dev.mcp.identifier.placeholder')} />
           </FormItem>
           {mcpType === 'http' && (
-            <FormItem
-              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'),
-                  validator: async (_, value) => {
-                    if (!value) return true;
+            <>
+              <FormItem
+                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'),
+                    validator: async (_, value) => {
+                      if (!value) return true;
 
-                    // 如果不是 URL 就会自动抛出错误
-                    new URL(value);
+                      // 如果不是 URL 就会自动抛出错误
+                      new URL(value);
+                    },
                   },
-                },
-              ]}
-              tag={'url'}
-            >
-              <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
-            </FormItem>
+                ]}
+                tag={'url'}
+              >
+                <Input placeholder="https://mcp.higress.ai/mcp-github/xxxxx" />
+              </FormItem>
+              <FormItem
+                desc={t('dev.mcp.auth.desc')}
+                initialValue={'none'}
+                label={t('dev.mcp.auth.label')}
+                name={AUTH_TYPE}
+              >
+                <Radio.Group
+                  options={[
+                    {
+                      label: t('dev.mcp.auth.none'),
+                      value: 'none',
+                    },
+                    {
+                      label: t('dev.mcp.auth.bear'),
+                      value: 'bearer',
+                    },
+                  ]}
+                  style={{ width: '100%' }}
+                />
+              </FormItem>
+              {authType === 'bearer' && (
+                <FormItem
+                  desc={t('dev.mcp.auth.token.desc')}
+                  label={t('dev.mcp.auth.token.label')}
+                  name={AUTH_TOKEN}
+                  rules={[{ message: t('dev.mcp.auth.token.required'), required: true }]}
+                >
+                  <InputPassword placeholder={t('dev.mcp.auth.token.placeholder')} />
+                </FormItem>
+              )}
+              <CollapsibleSection title={t('dev.mcp.advanced.title')}>
+                <FormItem
+                  desc={t('dev.mcp.headers.desc')}
+                  label={t('dev.mcp.headers.label')}
+                  name={HEADERS}
+                >
+                  <KeyValueEditor addButtonText={t('dev.mcp.headers.add')} />
+                </FormItem>
+              </CollapsibleSection>
+            </>
           )}
           {mcpType === 'stdio' && (
             <>
@@ -315,7 +256,10 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
                 name={STDIO_ENV}
                 tag={'env'}
               >
-                <EnvEditor />
+                <KeyValueEditor
+                  addButtonText={t('dev.mcp.env.add')}
+                  keyPlaceholder="VARIABLE_NAME"
+                />
               </FormItem>
             </>
           )}

package/src/features/PluginStore/McpList/Detail/Settings/index.tsx

@@ -6,9 +6,9 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import KeyValueEditor from '@/components/KeyValueEditor';
 import MCPStdioCommandInput from '@/components/MCPStdioCommandInput';
 import ArgsInput from '@/features/PluginDevModal/MCPManifestForm/ArgsInput';
-import EnvEditor from '@/features/PluginDevModal/MCPManifestForm/EnvEditor';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 
@@ -342,7 +342,10 @@ const Settings = memo<{ identifier: string }>(({ identifier }) => {
               onFinish={handleEnvSubmit}
             >
               <AForm.Item name="env" style={{ marginBottom: 0 }}>
-                <EnvEditor />
+                <KeyValueEditor
+                  addButtonText={t('dev.mcp.env.add')}
+                  keyPlaceholder="VARIABLE_NAME"
+                />
               </AForm.Item>
               <div className={styles.footer}>
                 <Space>

package/src/hooks/useDownloadImage.ts

@@ -0,0 +1,31 @@
+import { useMemoizedFn } from 'ahooks';
+import { App } from 'antd';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { downloadFile } from '@/utils/client/downloadFile';
+
+export function useDownloadImage() {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { message } = App.useApp();
+  const { t } = useTranslation('image');
+
+  return {
+    downloadImage: useMemoizedFn(async (url: string, fileName: string) => {
+      setIsDownloading(true);
+      try {
+        await downloadFile(url, fileName, false);
+      } catch (error) {
+        console.error('Failed to download image:', error);
+
+        // Show a general error message that covers network issues and CORS problems
+        message.error(t('generation.actions.downloadFailed'));
+
+        throw error;
+      } finally {
+        setIsDownloading(false);
+      }
+    }),
+    isDownloading,
+  };
+}

package/src/hooks/useFetchGenerationTopics.ts

@@ -0,0 +1,13 @@
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { useImageStore } from '@/store/image';
+import { useUserStore } from '@/store/user';
+import { authSelectors } from '@/store/user/slices/auth/selectors';
+
+export const useFetchGenerationTopics = () => {
+  const isDBInited = useGlobalStore(systemStatusSelectors.isDBInited);
+  const isLogin = useUserStore(authSelectors.isLogin);
+  const useFetchGenerationTopics = useImageStore((s) => s.useFetchGenerationTopics);
+
+  useFetchGenerationTopics(isDBInited, isLogin);
+};

package/src/hooks/useHotkeys/imageScope.ts

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { useHotkeysContext } from 'react-hotkeys-hook';
+
+import { FOLDER_WIDTH } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+import { HotkeyEnum, HotkeyScopeEnum } from '@/types/hotkey';
+
+import { useHotkeyById } from './useHotkeyById';
+
+export const useToggleImageLeftPanelHotkey = () => {
+  const showImagePanel = useGlobalStore(systemStatusSelectors.showImagePanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return useHotkeyById(HotkeyEnum.ToggleLeftPanel, () =>
+    updateSystemStatus({
+      imagePanelWidth: showImagePanel ? 0 : FOLDER_WIDTH,
+      showImagePanel: !showImagePanel,
+    }),
+  );
+};
+
+export const useToggleImageRightPanelHotkey = () => {
+  const showImageTopicPanel = useGlobalStore(systemStatusSelectors.showImageTopicPanel);
+  const updateSystemStatus = useGlobalStore((s) => s.updateSystemStatus);
+
+  return useHotkeyById(HotkeyEnum.ToggleRightPanel, () =>
+    updateSystemStatus({
+      imageTopicPanelWidth: showImageTopicPanel ? 0 : 80,
+      showImageTopicPanel: !showImageTopicPanel,
+    }),
+  );
+};
+
+// 注册聚合
+
+export const useRegisterImageHotkeys = () => {
+  const { enableScope, disableScope } = useHotkeysContext();
+
+  // Layout
+  useToggleImageLeftPanelHotkey();
+  useToggleImageRightPanelHotkey();
+
+  useEffect(() => {
+    enableScope(HotkeyScopeEnum.Image);
+    return () => disableScope(HotkeyScopeEnum.Image);
+  }, []);
+};

package/src/libs/mcp/client.ts

@@ -164,7 +164,42 @@ export class MCPClient {
     switch (params.type) {
       case 'http': {
         log('Using HTTP transport with url: %s', params.url);
-        this.transport = new StreamableHTTPClientTransport(new URL(params.url));
+
+        // 构建头部信息，包括用户自定义的 headers 和认证信息
+        const headers: Record<string, string> = { ...params.headers };
+
+        // 处理认证配置
+        if (params.auth) {
+          switch (params.auth.type) {
+            case 'bearer': {
+              if (params.auth.token) {
+                headers['Authorization'] = `Bearer ${params.auth.token}`;
+                log('Added Bearer token authentication');
+              }
+              break;
+            }
+            case 'oauth2': {
+              if (params.auth.accessToken) {
+                headers['Authorization'] = `Bearer ${params.auth.accessToken}`;
+                log('Added OAuth2 access token authentication');
+              }
+              break;
+            }
+
+            default: {
+              // 不需要认证
+              break;
+            }
+          }
+        }
+
+        // 创建 StreamableHTTPClientTransport 并传递 headers
+        this.transport = new StreamableHTTPClientTransport(new URL(params.url), {
+          requestInit: { headers },
+        });
+
+        log('HTTP transport created with headers: %O', Object.keys(headers));
+
         break;
       }
 
@@ -205,6 +240,14 @@ export class MCPClient {
     } catch (e) {
       log('MCP connection failed:', e);
 
+      if (this.params.type === 'http') {
+        const error = e as Error;
+        if (error.message.includes('401'))
+          throw createMCPError('AUTHORIZATION_ERROR', error.message);
+
+        throw e;
+      }
+
       // 对于 stdio 连接失败，尝试预检查命令以获取详细错误信息
       if (this.params.type === 'stdio') {
         log('Attempting to pre-check stdio command for detailed error information...');
@@ -228,34 +271,24 @@ export class MCPClient {
           'Failed to connect to MCP server, please check your configuration',
           {
             originalError: (e as Error).message,
-            params:
-              this.params.type === 'stdio'
-                ? {
-                    args: this.params.args,
-                    command: this.params.command,
-                    type: this.params.type,
-                  }
-                : {
-                    type: this.params.type,
-                  },
+            params: {
+              args: this.params.args,
+              command: this.params.command,
+              type: this.params.type,
+            },
             step: 'mcp_connect',
           },
         );
       }
 
       // Wrap other unknown errors
-      throw createMCPError('UNKNOWN_ERROR', 'Unknown error occurred', {
+      throw createMCPError('UNKNOWN_ERROR', (e as Error).message, {
         originalError: (e as Error).message,
-        params:
-          this.params.type === 'stdio'
-            ? {
-                args: this.params.args,
-                command: this.params.command,
-                type: this.params.type,
-              }
-            : {
-                type: this.params.type,
-              },
+        params: {
+          args: this.params.args,
+          command: this.params.command,
+          type: this.params.type,
+        },
         step: 'mcp_connect',
       });
     }

package/src/libs/mcp/types.ts

@@ -30,7 +30,41 @@ export interface McpPrompt {
   name: string;
 }
 
+/**
+ * MCP 认证配置接口
+ * 支持第一阶段的手动配置和未来的 OAuth 2.1 自动化流程
+ */
+export interface AuthConfig {
+  // C. 用户授权后获取的【用户令牌】
+  accessToken?: string;
+
+  // 用户手动粘贴的 Bearer Token
+  // --- Stage 2 & 3: OAuth 2.1 自动化流程 ---
+  // A. 静态配置 或 动态注册获取的【客户端凭证】
+  clientId?: string;
+
+  clientSecret?: string;
+  refreshToken?: string; // 如果是机密客户端
+  scope?: string; // 想要申请的权限范围, e.g., "repo user:email"
+
+  // B. 服务器发现机制获取的【授权服务器元数据】
+  serverMetadata?: {
+    authorization_endpoint?: string;
+    registration_endpoint?: string;
+    token_endpoint?: string;
+    // ... and other RFC8414 fields
+  };
+
+  // --- Stage 1: 手动配置 ---
+  token?: string;
+  tokenExpiresAt?: number;
+  // 认证类型
+  type: 'none' | 'bearer' | 'oauth2'; // accessToken 的过期时间戳
+}
+
 interface HttpMCPClientParams {
+  auth?: AuthConfig;
+  headers?: Record<string, string>;
   name: string;
   type: 'http';
   url: string;
@@ -46,6 +80,13 @@ export interface StdioMCPParams {
 
 export type MCPClientParams = HttpMCPClientParams | StdioMCPParams;
 
+export type MCPErrorType =
+  | 'CONNECTION_FAILED'
+  | 'PROCESS_SPAWN_ERROR'
+  | 'INITIALIZATION_TIMEOUT'
+  | 'VALIDATION_ERROR'
+  | 'UNKNOWN_ERROR'
+  | 'AUTHORIZATION_ERROR';
 export interface MCPErrorData {
   message: string;
   /**
@@ -89,12 +130,7 @@ export interface MCPErrorData {
   /**
    * 错误类型
    */
-  type:
-    | 'CONNECTION_FAILED'
-    | 'PROCESS_SPAWN_ERROR'
-    | 'INITIALIZATION_TIMEOUT'
-    | 'VALIDATION_ERROR'
-    | 'UNKNOWN_ERROR';
+  type: MCPErrorType;
 }
 
 /**

package/src/libs/model-runtime/BaseAI.ts

@@ -14,17 +14,19 @@ import {
   TextToSpeechOptions,
   TextToSpeechPayload,
 } from './types';
+import { CreateImagePayload, CreateImageResponse } from './types/image';
 
 /* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
 export interface LobeRuntimeAI {
   baseURL?: string;
-  chat(payload: ChatStreamPayload, options?: ChatMethodOptions): Promise<Response>;
+  chat?(payload: ChatStreamPayload, options?: ChatMethodOptions): Promise<Response>;
 
   embeddings?(payload: EmbeddingsPayload, options?: EmbeddingsOptions): Promise<Embeddings[]>;
 
   models?(): Promise<any>;
 
   textToImage?: (payload: TextToImagePayload) => Promise<string[]>;
+  createImage?: (payload: CreateImagePayload) => Promise<CreateImageResponse>;
 
   textToSpeech?: (
     payload: TextToSpeechPayload,