@lobehub/chat 1.109.0 → 1.110.0

package/src/config/aiModels/groq.ts

@@ -5,7 +5,7 @@ import { AIChatModelCard } from '@/types/aiModel';
 
 const groqChatModels: AIChatModelCard[] = [
   {
-    contextWindowTokens: 131_072,
+    contextWindowTokens: 8192,
     description:
       'Compound-beta 是一个复合 AI 系统，由 GroqCloud 中已经支持的多个开放可用的模型提供支持，可以智能地、有选择地使用工具来回答用户查询。',
     displayName: 'Compound Beta',
@@ -15,7 +15,7 @@ const groqChatModels: AIChatModelCard[] = [
     type: 'chat',
   },
   {
-    contextWindowTokens: 131_072,
+    contextWindowTokens: 8192,
     description:
       'Compound-beta-mini 是一个复合 AI 系统，由 GroqCloud 中已经支持的公开可用模型提供支持，可以智能地、有选择地使用工具来回答用户查询。',
     displayName: 'Compound Beta Mini',
@@ -23,6 +23,42 @@ const groqChatModels: AIChatModelCard[] = [
     maxOutput: 8192,
     type: 'chat',
   },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'OpenAI GPT-OSS 120B 是一款拥有 1200 亿参数的顶尖语言模型，内置浏览器搜索和代码执行功能，并具备推理能力。',
+    displayName: 'GPT OSS 120B',
+    id: 'openai/gpt-oss-120b',
+    maxOutput: 32_768,
+    pricing: {
+      input: 0.15,
+      output: 0.75,
+    },
+    releasedAt: '2025-08-06',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+    },
+    contextWindowTokens: 131_072,
+    description:
+      'OpenAI GPT-OSS 20B 是一款拥有 200 亿参数的顶尖语言模型，内置浏览器搜索和代码执行功能，并具备推理能力。',
+    displayName: 'GPT OSS 20B',
+    id: 'openai/gpt-oss-20b',
+    maxOutput: 32_768,
+    pricing: {
+      input: 0.1,
+      output: 0.5,
+    },
+    releasedAt: '2025-08-06',
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,
@@ -75,7 +111,7 @@ const groqChatModels: AIChatModelCard[] = [
     contextWindowTokens: 131_072,
     displayName: 'Qwen3 32B',
     id: 'qwen/qwen3-32b',
-    maxOutput: 40_960,
+    maxOutput: 131_072,
     pricing: {
       input: 0.29,
       output: 0.59,
@@ -132,7 +168,7 @@ const groqChatModels: AIChatModelCard[] = [
     abilities: {
       functionCall: true,
     },
-    contextWindowTokens: 131_072,
+    contextWindowTokens: 32_768,
     description:
       'Meta Llama 3.3 多语言大语言模型 ( LLM ) 是 70B（文本输入/文本输出）中的预训练和指令调整生成模型。 Llama 3.3 指令调整的纯文本模型针对多语言对话用例进行了优化，并且在常见行业基准上优于许多可用的开源和封闭式聊天模型。',
     displayName: 'Llama 3.3 70B Versatile',

package/src/config/aiModels/qwen.ts

@@ -34,7 +34,7 @@ const qwenChatModels: AIChatModelCard[] = [
       deploymentName: 'qwen3-coder-plus',
     },
     contextWindowTokens: 1_048_576,
-    description: '通义千问代码模型。最新的 Qwen3-Coder-Plus 系列模型是基于 Qwen3 的代码生成模型，具有强大的Coding Agent能力，擅长工具调用和环境交互，能够实现自主编程，代码能力卓越的同时兼具通用能力。',
+    description: '通义千问代码模型。最新的 Qwen3-Coder 系列模型是基于 Qwen3 的代码生成模型，具有强大的Coding Agent能力，擅长工具调用和环境交互，能够实现自主编程，代码能力卓越的同时兼具通用能力。',
     displayName: 'Qwen3 Coder Plus',
     id: 'qwen3-coder-plus',
     maxOutput: 65_536,
@@ -45,7 +45,29 @@ const qwenChatModels: AIChatModelCard[] = [
       input: 6,
       output: 24,
     },
-    releasedAt: '2025-07-23',
+    releasedAt: '2025-07-22',
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+    },
+    config: {
+      deploymentName: 'qwen3-coder-flash',
+    },
+    contextWindowTokens: 1_048_576,
+    description: '通义千问代码模型。最新的 Qwen3-Coder 系列模型是基于 Qwen3 的代码生成模型，具有强大的Coding Agent能力，擅长工具调用和环境交互，能够实现自主编程，代码能力卓越的同时兼具通用能力。',
+    displayName: 'Qwen3 Coder Flash',
+    id: 'qwen3-coder-flash',
+    maxOutput: 65_536,
+    organization: 'Qwen',
+    pricing: {
+      cachedInput: 0.6, // tokens 32K ~ 128K
+      currency: 'CNY',  
+      input: 1.5,
+      output: 6,
+    },
+    releasedAt: '2025-07-28',
     type: 'chat',
   },
   {

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;

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;