@lobehub/chat 1.109.1 → 1.110.1

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

@@ -0,0 +1,228 @@
+'use client';
+
+import { Alert, Block, Modal, Text } from '@lobehub/ui';
+import { App } from 'antd';
+import { memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
+import { useAgentStore } from '@/store/agent';
+import { useToolStore } from '@/store/tool';
+import { mcpStoreSelectors } from '@/store/tool/selectors';
+import { McpConnectionParams } from '@/types/plugins';
+import { LobeToolCustomPlugin } from '@/types/tool/plugin';
+
+import ConfigDisplay from './ConfigDisplay';
+import { McpInstallRequest, TRUSTED_MARKETPLACES, TrustedMarketplaceId } from './types';
+
+interface CustomPluginInstallModalProps {
+  installRequest: McpInstallRequest | null;
+  isMarketplace?: boolean;
+  onComplete?: () => void;
+}
+
+const CustomPluginInstallModal = memo<CustomPluginInstallModalProps>(
+  ({ installRequest, isMarketplace = false, onComplete }) => {
+    const { message } = App.useApp();
+    const { t } = useTranslation('plugin');
+    const [loading, setLoading] = useState(false);
+
+    // 跟踪配置更新
+    const [updatedConfig, setUpdatedConfig] = useState<{
+      env?: Record<string, string>;
+      headers?: Record<string, string>;
+    }>({});
+
+    const [installCustomPlugin] = useToolStore((s) => [s.installCustomPlugin]);
+    const testMcpConnection = useToolStore((s) => s.testMcpConnection);
+    const togglePlugin = useAgentStore((s) => s.togglePlugin);
+
+    // 为自定义插件测试连接生成唯一标识符
+    const identifier = installRequest?.schema?.identifier || '';
+    const testState = useToolStore(mcpStoreSelectors.getMCPConnectionTestState(identifier));
+
+    const schema = installRequest?.schema;
+    const marketId = installRequest?.marketId;
+    const marketplace =
+      isMarketplace && marketId ? TRUSTED_MARKETPLACES[marketId as TrustedMarketplaceId] : null;
+
+    // 重置加载状态和配置
+    useEffect(() => {
+      if (!installRequest) {
+        setLoading(false);
+        setUpdatedConfig({});
+      }
+    }, [installRequest]);
+
+    const handleConfirm = useCallback(async () => {
+      if (!installRequest || !schema) return;
+
+      setLoading(true);
+      try {
+        // 第三方市场和自定义插件：构建自定义插件数据
+        let customPlugin: LobeToolCustomPlugin;
+
+        // 合并原始配置和用户更新的配置
+        const finalConfig = {
+          ...schema.config,
+          env: updatedConfig.env || schema.config.env,
+          headers: updatedConfig.headers || schema.config.headers,
+        };
+
+        // 自定义插件：先测试连接获取真实的 manifest
+        const testParams: McpConnectionParams = {
+          connection: finalConfig,
+          identifier: identifier,
+          metadata: {
+            avatar: schema.icon,
+            description: schema.description,
+          },
+        };
+        console.log('testParams:', testParams);
+
+        const testResult = await testMcpConnection(testParams);
+
+        if (!testResult.success) {
+          throw new Error(testResult.error || t('protocolInstall.messages.connectionTestFailed'));
+        }
+
+        if (!testResult.manifest) {
+          throw new Error(t('protocolInstall.messages.manifestNotFound'));
+        }
+
+        // 使用测试连接获取的真实 manifest
+        customPlugin = {
+          customParams: {
+            avatar: schema.icon,
+            description: schema.description,
+            mcp: {
+              ...finalConfig, // 使用合并后的配置
+              headers: finalConfig.type === 'http' ? finalConfig.headers : undefined,
+            },
+          },
+          identifier: schema.identifier,
+          manifest: testResult.manifest, // 使用真实的 manifest
+          type: 'customPlugin',
+        };
+
+        await installCustomPlugin(customPlugin);
+        await togglePlugin(schema.identifier);
+        message.success(t('protocolInstall.messages.installSuccess', { name: schema.name }));
+
+        onComplete?.();
+      } catch (error) {
+        console.error('Plugin installation error:', error);
+        message.error(t('protocolInstall.messages.installError'));
+        setLoading(false);
+      }
+    }, [
+      installRequest,
+      schema,
+      updatedConfig,
+      onComplete,
+      installCustomPlugin,
+      testMcpConnection,
+      togglePlugin,
+      message,
+      t,
+      identifier,
+    ]);
+
+    const handleCancel = useCallback(() => {
+      onComplete?.();
+    }, [onComplete]);
+
+    if (!installRequest || !schema) return null;
+
+    // 根据类型渲染不同的 Alert 组件
+    const renderAlert = () => {
+      if (!isMarketplace) {
+        return (
+          <Alert
+            message={t('protocolInstall.custom.security.description')}
+            showIcon
+            type="warning"
+            variant={'borderless'}
+          />
+        );
+      }
+
+      // marketplace 类型
+      return marketplace ? (
+        <Alert
+          message={t('protocolInstall.marketplace.trustedBy', { name: marketplace.name })}
+          showIcon
+          type="success"
+          variant={'borderless'}
+        />
+      ) : (
+        <Alert
+          message={t('protocolInstall.marketplace.unverified.warning')}
+          showIcon
+          type="warning"
+          variant={'borderless'}
+        />
+      );
+    };
+
+    const modalTitle = isMarketplace
+      ? t('protocolInstall.marketplace.title')
+      : t('protocolInstall.custom.title');
+
+    const okText = isMarketplace
+      ? t('protocolInstall.actions.install')
+      : t('protocolInstall.actions.installAnyway');
+
+    return (
+      <Modal
+        confirmLoading={loading || testState.loading}
+        okText={okText}
+        onCancel={handleCancel}
+        onOk={handleConfirm}
+        open
+        title={modalTitle}
+        width={680}
+      >
+        <Flexbox gap={24}>
+          {renderAlert()}
+
+          <Block gap={16} horizontal justify={'space-between'} padding={16} variant={'outlined'}>
+            <Flexbox gap={16} horizontal>
+              <PluginAvatar avatar={schema.icon} size={40} />
+              <Flexbox gap={2}>
+                <Flexbox align={'center'} gap={8} horizontal>
+                  {schema.name}
+                  <PluginTag type={'customPlugin'} />
+                </Flexbox>
+                <Text style={{ fontSize: 12 }} type={'secondary'}>
+                  {schema.description}
+                </Text>
+              </Flexbox>
+            </Flexbox>
+          </Block>
+
+          <Flexbox>
+            <ConfigDisplay onConfigUpdate={setUpdatedConfig} schema={schema} />
+            {/* 显示测试连接错误 */}
+            {testState.error && (
+              <Alert
+                closable
+                description={testState.error}
+                message={t('protocolInstall.messages.connectionTestFailed')}
+                showIcon
+                type="error"
+                variant={'filled'}
+              />
+            )}
+          </Flexbox>
+        </Flexbox>
+      </Modal>
+    );
+  },
+);
+
+CustomPluginInstallModal.displayName = 'CustomPluginInstallModal';
+
+export default CustomPluginInstallModal;

package/src/features/ProtocolUrlHandler/InstallPlugin/OfficialPluginInstallModal/Detail.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
+import Deployment from '@/features/MCPPluginDetail/Deployment';
+import { DetailContextConfig, DetailProvider } from '@/features/MCPPluginDetail/DetailProvider';
+import Header from '@/features/MCPPluginDetail/Header';
+import Nav from '@/features/MCPPluginDetail/Nav';
+import Overview from '@/features/MCPPluginDetail/Overview';
+import Schema from '@/features/MCPPluginDetail/Schema';
+import Score from '@/features/MCPPluginDetail/Score';
+import { McpNavKey } from '@/types/discover';
+
+interface OfficialDetailProps {
+  data: DetailContextConfig;
+  identifier: string;
+}
+
+const OfficialDetail = memo<OfficialDetailProps>(({ data, identifier }) => {
+  const [activeTab, setActiveTab] = useState(McpNavKey.Overview);
+
+  return (
+    <DetailProvider config={data}>
+      <Flexbox gap={16}>
+        <Header inModal />
+        <MCPInstallProgress identifier={identifier} />
+
+        <Nav activeTab={activeTab as McpNavKey} inModal noSettings setActiveTab={setActiveTab} />
+        <Flexbox gap={24}>
+          {activeTab === McpNavKey.Overview && <Overview inModal />}
+          {activeTab === McpNavKey.Deployment && <Deployment />}
+          {activeTab === McpNavKey.Schema && <Schema />}
+          {activeTab === McpNavKey.Score && <Score />}
+        </Flexbox>
+      </Flexbox>
+    </DetailProvider>
+  );
+});
+
+OfficialDetail.displayName = 'OfficialDetail';
+
+export default OfficialDetail;

package/src/features/ProtocolUrlHandler/InstallPlugin/OfficialPluginInstallModal/index.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { Block, Modal, Text } from '@lobehub/ui';
+import { App } from 'antd';
+import { memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import DetailLoading from '@/features/PluginStore/McpList/Detail/Loading';
+import { useAgentStore } from '@/store/agent';
+import { useDiscoverStore } from '@/store/discover';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/slices/plugin/selectors';
+
+import { McpInstallRequest } from '../types';
+import OfficialDetail from './Detail';
+
+interface OfficialPluginInstallModalProps {
+  installRequest: McpInstallRequest | null;
+  onComplete: () => void;
+}
+
+const OfficialPluginInstallModal = memo<OfficialPluginInstallModalProps>(
+  ({ installRequest, onComplete }) => {
+    const { message } = App.useApp();
+    const { t } = useTranslation(['plugin', 'common']);
+    const [loading, setLoading] = useState(false);
+
+    // 获取 MCP 插件详情
+    const useMcpDetail = useDiscoverStore((s) => s.useFetchMcpDetail);
+    const identifier = installRequest?.pluginId || '';
+
+    const [installed, installMCPPlugin] = useToolStore((s) => [
+      pluginSelectors.isPluginInstalled(identifier!)(s),
+
+      s.installMCPPlugin,
+    ]);
+    const togglePlugin = useAgentStore((s) => s.togglePlugin);
+
+    const { data, isLoading } = useMcpDetail({ identifier });
+
+    const handleConfirm = useCallback(async () => {
+      if (!installRequest || !data) return;
+
+      setLoading(true);
+      try {
+        setLoading(true);
+        await installMCPPlugin(identifier);
+        await togglePlugin(identifier);
+        setLoading(false);
+
+        message.success(t('protocolInstall.messages.installSuccess', { name: data.name }));
+        onComplete();
+      } catch (error) {
+        console.error('Official plugin installation error:', error);
+        message.error(t('protocolInstall.messages.installError'));
+        setLoading(false);
+      }
+    }, [installRequest, data]);
+
+    if (!installRequest) return null;
+
+    // 渲染内容
+    const renderContent = () => {
+      // 如果正在加载，显示骨架屏
+      if (isLoading || !identifier) {
+        return <DetailLoading />;
+      }
+
+      // 如果加载失败或没有数据，显示错误信息
+      if (!data) {
+        return (
+          <Block>
+            <Text type="danger">{t('protocolInstall.messages.manifestError')}</Text>
+          </Block>
+        );
+      }
+
+      return <OfficialDetail data={data} identifier={identifier} />;
+    };
+
+    return (
+      <Modal
+        confirmLoading={loading}
+        okButtonProps={{
+          disabled: installed || isLoading,
+          type: installed ? 'default' : 'primary',
+        }}
+        okText={
+          installed ? t('protocolInstall.actions.installed') : t('protocolInstall.actions.install')
+        }
+        onCancel={onComplete}
+        onOk={handleConfirm}
+        open
+        title={t('protocolInstall.official.title')}
+        width={800}
+      >
+        {renderContent()}
+      </Modal>
+    );
+  },
+);
+
+OfficialPluginInstallModal.displayName = 'OfficialPluginInstallModal';
+
+export default OfficialPluginInstallModal;

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { memo } from 'react';
+
+import CustomPluginInstallModal from './CustomPluginInstallModal';
+import OfficialPluginInstallModal from './OfficialPluginInstallModal';
+import { McpInstallRequest, PluginSource } from './types';
+
+interface PluginInstallConfirmModalProps {
+  installRequest: McpInstallRequest | null;
+  onComplete: () => void;
+}
+
+/**
+ * 根据安装请求的来源确定插件类型
+ */
+const getPluginSource = (request: McpInstallRequest): PluginSource => {
+  const { marketId } = request;
+
+  // 官方 LobeHub 插件
+  if (marketId === 'lobehub') {
+    return PluginSource.OFFICIAL;
+  }
+
+  // 第三方市场插件（包括可信和不可信的）
+  if (marketId && marketId !== 'lobehub') {
+    return PluginSource.MARKETPLACE;
+  }
+
+  // 自定义插件（没有 marketId）
+  return PluginSource.CUSTOM;
+};
+
+const PluginInstallConfirmModal = memo<PluginInstallConfirmModalProps>(
+  ({ installRequest, onComplete }) => {
+    if (!installRequest) return null;
+
+    const pluginSource = getPluginSource(installRequest);
+
+    if (pluginSource === PluginSource.OFFICIAL)
+      return <OfficialPluginInstallModal installRequest={installRequest} onComplete={onComplete} />;
+
+    return (
+      <CustomPluginInstallModal
+        installRequest={installRequest}
+        isMarketplace={pluginSource === PluginSource.MARKETPLACE}
+        onComplete={onComplete}
+      />
+    );
+  },
+);
+
+PluginInstallConfirmModal.displayName = 'PluginInstallConfirmModal';
+
+export default PluginInstallConfirmModal;

package/src/features/ProtocolUrlHandler/InstallPlugin/types.ts

@@ -0,0 +1,45 @@
+import { McpInstallSchema } from '@lobechat/electron-client-ipc';
+
+export enum PluginSource {
+  CUSTOM = 'custom',
+  MARKETPLACE = 'marketplace',
+  OFFICIAL = 'official',
+}
+
+export interface McpInstallRequest {
+  marketId?: string;
+  pluginId: string;
+  schema?: McpInstallSchema;
+  source: string;
+}
+
+export interface BaseContentProps {
+  installRequest: McpInstallRequest;
+}
+
+export interface ModalConfig {
+  okText: string;
+  title: string;
+  width?: number;
+}
+
+// 可信的第三方市场列表
+export const TRUSTED_MARKETPLACES = {
+  higress: {
+    description: 'Enterprise-grade MCP plugins for cloud-native applications',
+    name: 'Higress Marketplace',
+    website: 'https://higress.ai',
+  },
+  mcprouter: {
+    description: 'Community-driven MCP plugin marketplace',
+    name: 'MCPRouter',
+    website: 'https://mcprouter.com',
+  },
+  smithery: {
+    description: 'Professional MCP plugins and tools',
+    name: 'Smithery',
+    website: 'https://smithery.ai',
+  },
+} as const;
+
+export type TrustedMarketplaceId = keyof typeof TRUSTED_MARKETPLACES;

package/src/features/ProtocolUrlHandler/index.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useWatchBroadcast } from '@lobechat/electron-client-ipc';
+import { useCallback, useState } from 'react';
+
+import { McpInstallRequest } from '@/features/ProtocolUrlHandler/InstallPlugin/types';
+
+import PluginInstallConfirmModal from './InstallPlugin';
+
+const ProtocolUrlHandler = () => {
+  const [installRequest, setInstallRequest] = useState<McpInstallRequest | null>(null);
+
+  const handleMcpInstallRequest = useCallback(
+    (data: { marketId?: string; pluginId: string; schema: any }) => {
+      // 将原始数据传递给子组件处理
+      setInstallRequest(data as McpInstallRequest);
+    },
+    [],
+  );
+
+  const handleComplete = useCallback(() => {
+    setInstallRequest(null);
+  }, []);
+
+  useWatchBroadcast('mcpInstallRequest', handleMcpInstallRequest);
+
+  return <PluginInstallConfirmModal installRequest={installRequest} onComplete={handleComplete} />;
+};
+
+export default ProtocolUrlHandler;

package/src/locales/default/plugin.ts

@@ -308,6 +308,66 @@ export default {
     skipDependencies: '跳过检查',
   },
   pluginList: '插件列表',
+  protocolInstall: {
+    actions: {
+      install: '安装',
+      installAnyway: '仍要安装',
+      installed: '已安装',
+    },
+    config: {
+      args: '参数',
+      command: '命令',
+      env: '环境变量',
+      headers: '请求头',
+      title: '配置信息',
+      type: {
+        http: '类型: HTTP',
+        label: '类型',
+        stdio: '类型: Stdio',
+      },
+      url: '服务地址',
+    },
+    custom: {
+      badge: '自定义插件',
+      security: {
+        description: '此插件未经过官方验证，安装可能存在安全风险！请确保您信任插件来源。',
+        title: '⚠️ 安全风险提示',
+      },
+      title: '安装自定义插件',
+    },
+    marketplace: {
+      title: '安装第三方插件',
+      trustedBy: '由 {{name}} 提供',
+      unverified: {
+        title: '未经验证的第三方插件',
+        warning: '此插件来自未验证的第三方市场，安装前请确认您信任该来源。',
+      },
+      verified: '已验证',
+    },
+    messages: {
+      connectionTestFailed: '连接测试失败',
+      installError: '插件安装失败，请重试',
+      installSuccess: '插件 {{name}} 安装成功！',
+      manifestError: '获取插件详情失败，请检查网络连接后重试',
+      manifestNotFound: '未能获取插件描述文件',
+    },
+    meta: {
+      author: '作者',
+      homepage: '主页',
+      identifier: '标识符',
+      source: '来源',
+      version: '版本',
+    },
+    official: {
+      badge: 'LobeHub 官方插件',
+      description: '此插件由 LobeHub 官方开发和维护，经过严格的安全审核，可放心使用。',
+      loadingMessage: '正在获取插件详情...',
+      loadingTitle: '加载中',
+      title: '安装官方插件',
+    },
+    title: '安装 MCP 插件',
+    warning: '⚠️ 请确认您信任此插件的来源，恶意插件可能会危害您的系统安全。',
+  },
   search: {
     apiName: {
       crawlMultiPages: '读取多个页面内容',