@lobehub/chat 1.109.1 → 1.110.1

package/packages/types/src/plugins/protocol.ts

@@ -0,0 +1,166 @@
+/**
+ * 协议来源类型
+ */
+export enum ProtocolSource {
+  /** 社区贡献 */
+  COMMUNITY = 'community',
+  /** 开发者自定义 */
+  DEVELOPER = 'developer',
+  /** GitHub 官方 */
+  GITHUB_OFFICIAL = 'github_official',
+  /** 官方LobeHub市场 */
+  OFFICIAL = 'official',
+  /** 第三方市场 */
+  THIRD_PARTY = 'third_party',
+}
+
+/**
+ * MCP Schema - stdio 配置类型
+ */
+export interface McpStdioConfig {
+  args?: string[];
+  command: string;
+  env?: Record<string, string>;
+  type: 'stdio';
+}
+
+/**
+ * MCP Schema - http 配置类型
+ */
+export interface McpHttpConfig {
+  headers?: Record<string, string>;
+  type: 'http';
+  url: string;
+}
+
+/**
+ * MCP Schema 配置类型
+ */
+export type McpConfig = McpStdioConfig | McpHttpConfig;
+
+/**
+ * MCP Schema 对象
+ * 符合 RFC 0001 定义
+ */
+export interface McpSchema {
+  /** 插件作者 */
+  author: string;
+  /** 插件配置 */
+  config: McpConfig;
+  /** 插件描述 */
+  description: string;
+  /** 插件主页 */
+  homepage?: string;
+  /** 插件图标 */
+  icon?: string;
+  /** 插件唯一标识符，必须与URL中的id参数匹配 */
+  identifier: string;
+  /** 插件名称 */
+  name: string;
+  /** 插件版本 (semver) */
+  version: string;
+}
+
+/**
+ * RFC 0001 协议参数
+ * lobehub://plugin/install?id=xxx&schema=xxx&marketId=xxx&meta_*=xxx
+ */
+export interface McpInstallProtocolParamsRFC {
+  /** 可选的 UI 显示元数据，以 meta_ 为前缀 */
+  [key: `meta_${string}`]: string | undefined;
+  /** 插件的唯一标识符 */
+  id: string;
+  /** 提供该插件的 Marketplace 的唯一标识符 */
+  marketId?: string;
+  /** Base64URL 编码的 MCP Schema 对象 */
+  schema: string;
+  /** 插件类型，对于 MCP 固定为 'mcp' */
+  type: 'mcp';
+}
+
+/**
+ * 协议URL解析结果
+ */
+export interface ProtocolUrlParsed {
+  /** 操作类型 (如: 'install') */
+  action: 'install' | 'configure' | 'update';
+  /** 解析后的参数 */
+  params: {
+    id: string;
+    marketId?: string;
+    type: string;
+  };
+  /** MCP Schema 对象 */
+  schema: McpSchema;
+  /** 协议来源 */
+  source: ProtocolSource;
+  /** 插件类型 (如: 'mcp') */
+  type: 'mcp' | 'plugin';
+  /** URL类型 (如: 'plugin') */
+  urlType: string;
+}
+
+/**
+ * 安装确认弹窗信息
+ */
+export interface InstallConfirmationInfo {
+  dependencies?: string[];
+  permissions?: {
+    filesystem?: boolean;
+    network?: boolean;
+    system?: boolean;
+  };
+  pluginInfo: {
+    author?: string;
+    description: string;
+    homepage?: string;
+    icon?: string;
+    identifier: string;
+    name: string;
+    version: string;
+  };
+  source: {
+    platform?: {
+      name: string;
+      url?: string;
+    };
+    type: ProtocolSource;
+    verified: boolean; // 是否为验证来源
+  };
+}
+
+/**
+ * 协议处理器接口
+ */
+export interface ProtocolHandler {
+  /**
+   * 处理协议URL
+   */
+  handle(
+    parsed: ProtocolUrlParsed,
+  ): Promise<{ error?: string; success: boolean; targetWindow?: string }>;
+
+  /**
+   * 支持的操作
+   */
+  readonly supportedActions: string[];
+
+  /**
+   * 协议类型
+   */
+  readonly type: string;
+}
+
+/**
+ * 协议路由配置
+ */
+export interface ProtocolRouteConfig {
+  /** 操作类型 */
+  action: string;
+  /** 目标路径（相对于窗口base路径） */
+  targetPath?: string;
+  /** 目标窗口 */
+  targetWindow: 'chat' | 'settings';
+  /** 协议类型 */
+  type: string;
+}

package/src/app/[variants]/(main)/chat/_layout/Desktop/index.tsx

@@ -1,7 +1,9 @@
 import { Suspense } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { isDesktop } from '@/const/version';
 import InitClientDB from '@/features/InitClientDB';
+import ProtocolUrlHandler from '@/features/ProtocolUrlHandler';
 
 import { LayoutProps } from '../type';
 import RegisterHotkeys from './RegisterHotkeys';
@@ -20,13 +22,14 @@ const Layout = ({ children, session }: LayoutProps) => {
         <SessionPanel>{session}</SessionPanel>
         <Workspace>{children}</Workspace>
       </Flexbox>
-      <InitClientDB bottom={60} />
+      {!isDesktop && <InitClientDB bottom={60} />}
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}
       <Suspense>
         <RegisterHotkeys />
       </Suspense>
+      {isDesktop && <ProtocolUrlHandler />}
     </>
   );
 };

package/src/app/[variants]/(main)/discover/(detail)/mcp/[slug]/features/Sidebar/ActionButton/index.tsx

@@ -22,6 +22,7 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 const ActionButton = memo(() => {
+  const { t } = useTranslation(['discover', 'plugin']);
   const { identifier } = useDetailContext();
   const { styles } = useStyles();
   const [isLoading, setIsLoading] = useState(false);
@@ -32,8 +33,6 @@ const ActionButton = memo(() => {
     s.uninstallMCPPlugin,
   ]);
 
-  const { t } = useTranslation(['discover', 'plugin']);
-
   const installPlugin = async () => {
     if (!identifier) return;
     setIsLoading(true);

package/src/components/KeyValueEditor/index.tsx

@@ -3,7 +3,7 @@ import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import fastDeepEqual from 'fast-deep-equal';
 import { LucidePlus, LucideTrash } from 'lucide-react';
-import { memo, useEffect, useRef, useState } from 'react';
+import { CSSProperties, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { v4 as uuidv4 } from 'uuid';
@@ -44,6 +44,7 @@ export interface KeyValueEditorProps {
   duplicateKeyErrorText?: string;
   keyPlaceholder?: string;
   onChange?: (value: Record<string, string>) => void;
+  style?: CSSProperties;
   value?: Record<string, string>;
   valuePlaceholder?: string;
 }
@@ -57,6 +58,7 @@ const KeyValueEditor = memo<KeyValueEditorProps>(
     addButtonText,
     duplicateKeyErrorText,
     deleteTooltip,
+    style,
   }) => {
     const { styles } = useStyles();
     const { t } = useTranslation('components');
@@ -125,7 +127,7 @@ const KeyValueEditor = memo<KeyValueEditorProps>(
     const duplicateKeys = getDuplicateKeys(items);
 
     return (
-      <div className={styles.container}>
+      <div className={styles.container} style={style}>
         <Flexbox className={styles.title} gap={8} horizontal>
           <Flexbox flex={1}>{keyPlaceholder || t('KeyValueEditor.keyPlaceholder')}</Flexbox>
           <Flexbox flex={2}>{valuePlaceholder || t('KeyValueEditor.valuePlaceholder')}</Flexbox>

package/src/features/ChatItem/index.tsx

@@ -2,16 +2,39 @@
 
 import { ChatItemProps, ChatItem as ChatItemRaw } from '@lobehub/ui/chat';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
+import { isDesktop } from '@/const/version';
+import { useElectronStore } from '@/store/electron';
+import { electronSyncSelectors } from '@/store/electron/selectors';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
-const ChatItem = memo<ChatItemProps>(({ markdownProps = {}, ...rest }) => {
+const ChatItem = memo<ChatItemProps>(({ markdownProps = {}, avatar, ...rest }) => {
   const { componentProps, ...restMarkdown } = markdownProps;
   const { general } = useUserStore(settingsSelectors.currentSettings, isEqual);
+
+  const remoteServerUrl = useElectronStore(electronSyncSelectors.remoteServerUrl);
+  const processedAvatar = useMemo(() => {
+    // only process avatar in desktop environment and when avatar url starts with /
+    if (
+      !isDesktop ||
+      !remoteServerUrl ||
+      !avatar.avatar ||
+      typeof avatar.avatar !== 'string' ||
+      !avatar.avatar.startsWith('/')
+    )
+      return avatar;
+
+    return {
+      ...avatar,
+      avatar: remoteServerUrl + avatar.avatar, // prepend the remote server URL
+    };
+  }, [avatar, remoteServerUrl]);
+
   return (
     <ChatItemRaw
+      avatar={processedAvatar}
       fontSize={general.fontSize}
       markdownProps={{
         ...restMarkdown,

package/src/features/MCP/MCPInstallProgress/index.tsx

@@ -9,7 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useToolStore } from '@/store/tool';
 import { mcpStoreSelectors } from '@/store/tool/selectors';
-import { MCPInstallStep } from '@/store/tool/slices/mcpStore';
+import { MCPInstallStep } from '@/types/plugins';
 
 import InstallError from './InstallError';
 import MCPConfigForm from './MCPConfigForm';

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

@@ -1,15 +1,14 @@
-import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { Alert, FormItem, Input, InputPassword } from '@lobehub/ui';
 import { Button, Divider, Form, FormInstance, Radio } from 'antd';
+import isEqual from 'fast-deep-equal';
 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 { mcpService } from '@/services/mcp';
 import { useToolStore } from '@/store/tool';
-import { pluginSelectors } from '@/store/tool/selectors';
+import { mcpStoreSelectors, pluginSelectors } from '@/store/tool/selectors';
 
 import ArgsInput from './ArgsInput';
 import CollapsibleSection from './CollapsibleSection';
@@ -40,6 +39,13 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
 
   const pluginIds = useToolStore(pluginSelectors.storeAndInstallPluginsIdList);
   const [isTesting, setIsTesting] = useState(false);
+  const testMcpConnection = useToolStore((s) => s.testMcpConnection);
+
+  // 使用 identifier 来跟踪测试状态（如果表单中有的话）
+  const formValues = form.getFieldsValue();
+  const identifier = formValues?.identifier || 'temp-test-id';
+  const testState = useToolStore(mcpStoreSelectors.getMCPConnectionTestState(identifier), isEqual);
+
   const [connectionError, setConnectionError] = useState<string | null>(null);
 
   const handleTestConnection = async () => {
@@ -80,43 +86,31 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
       const description = values.customParams?.description;
       const avatar = values.customParams?.avatar;
 
-      let data: LobeChatPluginManifest;
+      // 使用 mcpStore 的 testMcpConnection 方法
+      const result = await testMcpConnection({
+        connection: mcp,
+        identifier: id,
+        metadata: { avatar, description },
+      });
 
-      if (mcp.type === 'http') {
-        if (!mcp.url) throw new Error(t('dev.mcp.url.required'));
-        data = await mcpService.getStreamableMcpServerManifest({
-          auth: mcp.auth,
-          headers: mcp.headers,
-          identifier: id,
-          metadata: { avatar, description },
-          url: mcp.url,
+      if (result.success && result.manifest) {
+        // 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: result.manifest });
+        setConnectionError(null); // 清除本地错误状态
+      } else if (result.error) {
+        // Store 已经处理了错误状态，这里可以选择显示额外的用户友好提示
+        const errorMessage = t('error.testConnectionFailed', {
+          error: result.error,
         });
-      } else if (mcp.type === 'stdio') {
-        if (!mcp.command) throw new Error(t('dev.mcp.command.required'));
-        if (!mcp.args) throw new Error(t('dev.mcp.args.required'));
-        data = await mcpService.getStdioMcpServerManifest(
-          { ...mcp, name: id },
-          { avatar, description },
-        );
-      } else {
-        throw new Error('Invalid MCP type'); // Internal error
+        setConnectionError(errorMessage);
       }
-
-      // 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 });
     } catch (error) {
-      // Check if error is a validation error object (from validateFields)
-
-      // Handle API call errors or other errors
-      const err = error as Error; // Assuming PluginInstallError or similar structure
-      // Use the error message directly if it's a simple string error, otherwise try translation
-      // highlight-start
+      // Handle unexpected errors
+      const err = error as Error;
       const errorMessage = t('error.testConnectionFailed', {
-        error: err.cause || err.message || t('unknownError'),
+        error: err.message || t('unknownError'),
       });
-      // highlight-end
-
       setConnectionError(errorMessage);
     } finally {
       setIsTesting(false);
@@ -274,10 +268,10 @@ const MCPManifestForm = ({ form, isEditMode }: MCPManifestFormProps) => {
               </Button>
             </Flexbox>
           </FormItem>
-          {connectionError && (
+          {(connectionError || testState.error) && (
             <Alert
               closable
-              message={connectionError}
+              message={connectionError || testState.error}
               onClose={() => setConnectionError(null)}
               showIcon
               style={{ marginBottom: 16 }}

package/src/features/PluginStore/McpList/List/Item.tsx

@@ -7,8 +7,8 @@ import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
 import { useToolStore } from '@/store/tool';
 import { mcpStoreSelectors } from '@/store/tool/selectors';
-import { MCPInstallStep } from '@/store/tool/slices/mcpStore/initialState';
 import { DiscoverMcpItem } from '@/types/discover';
+import { MCPInstallStep } from '@/types/plugins';
 import { LobeToolType } from '@/types/tool/tool';
 
 import Actions from './Action';

package/src/features/ProtocolUrlHandler/InstallPlugin/ConfigDisplay.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { McpInstallSchema } from '@lobechat/electron-client-ipc';
+import { Block, Text } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LinkIcon, Settings2Icon } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import KeyValueEditor from '@/components/KeyValueEditor';
+
+const useStyles = createStyles(({ css, token }) => ({
+  configEditor: css`
+    margin-block-start: ${token.marginSM}px;
+  `,
+  configSection: css`
+    margin-block-end: ${token.marginLG}px;
+    padding: ${token.paddingSM}px;
+    border-radius: ${token.borderRadius}px;
+  `,
+  configTitle: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    align-items: center;
+
+    height: 24px;
+
+    font-weight: 600;
+    color: ${token.colorTextHeading};
+  `,
+
+  previewContainer: css`
+    padding-inline: ${token.paddingXS}px;
+  `,
+
+  previewItem: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-block: ${token.paddingXS}px;
+    padding-inline: 0;
+
+    &:not(:last-child) {
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+    }
+  `,
+
+  previewLabel: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    align-items: center;
+
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 500;
+    color: ${token.colorTextSecondary};
+  `,
+
+  previewValue: css`
+    padding-block: ${token.paddingXXS}px;
+    padding-inline: ${token.paddingXS}px;
+    border-radius: ${token.borderRadiusSM}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 600;
+    color: ${token.colorText};
+
+    background: ${token.colorFillQuaternary};
+  `,
+
+  typeValue: css`
+    display: flex;
+    gap: ${token.marginXS}px;
+    align-items: center;
+  `,
+
+  urlValue: css`
+    max-width: 300px;
+    padding-block: ${token.paddingXS}px;
+    padding-inline: ${token.paddingSM}px;
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadius}px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: ${token.fontSizeSM}px;
+    font-weight: 500;
+    word-break: auto-phrase;
+
+    background: ${token.colorBgElevated};
+  `,
+}));
+
+interface ConfigDisplayProps {
+  onConfigUpdate?: (updatedConfig: {
+    env?: Record<string, string>;
+    headers?: Record<string, string>;
+  }) => void;
+  schema: McpInstallSchema;
+}
+
+const ConfigDisplay = memo<ConfigDisplayProps>(({ schema, onConfigUpdate }) => {
+  const { t } = useTranslation('plugin');
+  const { styles } = useStyles();
+
+  // 本地状态管理配置数据
+  const [currentEnv, setCurrentEnv] = useState<Record<string, string>>(schema.config.env || {});
+  const [currentHeaders, setCurrentHeaders] = useState<Record<string, string>>(
+    schema.config.headers || {},
+  );
+
+  // 处理环境变量更新
+  const handleEnvUpdate = (newEnv: Record<string, string>) => {
+    setCurrentEnv(newEnv);
+    onConfigUpdate?.({ env: newEnv, headers: currentHeaders });
+  };
+
+  // 处理 Headers 更新
+  const handleHeadersUpdate = (newHeaders: Record<string, string>) => {
+    setCurrentHeaders(newHeaders);
+    onConfigUpdate?.({ env: currentEnv, headers: newHeaders });
+  };
+
+  return (
+    <Flexbox gap={16}>
+      {/* 安装信息 */}
+      <Block className={styles.configSection} variant={'outlined'}>
+        <div className={styles.configTitle}>
+          <LinkIcon size={14} />
+          {t('protocolInstall.install.title', { defaultValue: '安装信息' })}
+        </div>
+
+        <div className={styles.previewContainer}>
+          {/* 连接类型 */}
+          <div className={styles.previewItem}>
+            <span className={styles.previewLabel}>{t('protocolInstall.config.type.label')}</span>
+            <div className={styles.typeValue}>
+              <Text className={styles.previewValue}>
+                {schema.config.type === 'stdio' ? 'STDIO' : 'HTTP'}
+              </Text>
+            </div>
+          </div>
+
+          {/* HTTP 类型显示 URL */}
+          {schema.config.type === 'http' && schema.config.url && (
+            <div className={styles.previewItem}>
+              <span className={styles.previewLabel}>{t('protocolInstall.config.url')}</span>
+              <div className={styles.urlValue}>{schema.config.url}</div>
+            </div>
+          )}
+
+          {/* STDIO 类型显示命令和参数 */}
+          {schema.config.type === 'stdio' && (
+            <>
+              {schema.config.command && (
+                <div className={styles.previewItem}>
+                  <span className={styles.previewLabel}>{t('protocolInstall.config.command')}</span>
+                  <span className={styles.previewValue}>{schema.config.command}</span>
+                </div>
+              )}
+
+              {schema.config.args && schema.config.args.length > 0 && (
+                <div className={styles.previewItem}>
+                  <span className={styles.previewLabel}>{t('protocolInstall.config.args')}</span>
+                  <span className={styles.previewValue}>{schema.config.args.join(' ')}</span>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </Block>
+
+      {/* 配置信息 - 直接使用 KeyValueEditor */}
+      <Block className={styles.configSection} variant={'outlined'}>
+        <div className={styles.configTitle}>
+          <Settings2Icon size={14} />
+          {schema.config.type === 'stdio'
+            ? t('protocolInstall.config.env', { defaultValue: '环境变量' })
+            : t('protocolInstall.config.headers', { defaultValue: '请求头' })}
+        </div>
+
+        <div className={styles.configEditor}>
+          {/* HTTP 类型显示 Headers */}
+          {schema.config.type === 'http' && (
+            <KeyValueEditor
+              addButtonText={t('protocolInstall.config.addHeaders', { defaultValue: '添加请求头' })}
+              onChange={handleHeadersUpdate}
+              style={{ border: 'none' }}
+              value={currentHeaders}
+            />
+          )}
+
+          {/* STDIO 类型显示环境变量 */}
+          {schema.config.type === 'stdio' && (
+            <KeyValueEditor
+              addButtonText={t('protocolInstall.config.addEnv', { defaultValue: '添加环境变量' })}
+              onChange={handleEnvUpdate}
+              style={{ border: 'none' }}
+              value={currentEnv}
+            />
+          )}
+        </div>
+      </Block>
+    </Flexbox>
+  );
+});
+
+ConfigDisplay.displayName = 'ConfigDisplay';
+
+export default ConfigDisplay;