@gientech/modual 2.2.3-fix.5 → 2.2.3-fix.6

package/src/modules/CHAT_UNIFICATION_PLAN.md

@@ -0,0 +1,324 @@
+# Chat 和 HeadlessChat 统一方案分析
+
+## 一、现状分析
+
+### 1.1 共同部分（可统一）
+
+#### 1.1.1 文件管理核心逻辑
+- ✅ `normalizeFileItem` - 文件结构标准化函数
+- ✅ `mergeFiles` - 文件合并去重函数
+- ✅ `pollFileStatus` - 文件解析状态轮询逻辑
+- ✅ `fileManagerData` 状态管理（uploadedFiles）
+- ✅ `fileStatuses` 状态管理（上传/解析状态）
+- ✅ `uploaded_file:removeFromTemp` 事件处理逻辑
+- ✅ 文件上传、解析、删除的完整流程（handleSenderSend 中的文件处理部分）
+
+#### 1.1.2 消息处理逻辑
+- ✅ `handleSenderSend` - 核心消息发送逻辑（文件上传 + AI请求）
+- ✅ `handleReSenderSend` - 消息重发逻辑
+- ✅ `setFeed` - 反馈处理（赞/踩）
+- ✅ `fetchRecommendQuestions` - 推荐问题获取
+- ✅ `addEmptyMessage` - 添加空消息
+- ✅ `setLastEmptyMessage` - 设置最后一条空消息
+
+#### 1.1.3 事件处理
+- ✅ `chatbox:copy` - 复制消息
+- ✅ `chatbox:like/dislike` - 点赞/踩
+- ✅ `chatbox:repeat` - 重发消息
+- ✅ `chatbox:follow_up_question_click` - 追问点击
+- ✅ `sender:stop` - 停止发送
+- ✅ `sender:clear` - 清空输入
+- ✅ `sender:configChange` - 配置变化
+- ✅ `references:click` - 引用点击
+
+#### 1.1.4 组件配置
+- ✅ `businessCustomComponents.AiChatBox` - AI消息渲染逻辑
+- ✅ `businessCustomComponents.UserChatBox` - 用户消息渲染逻辑
+- ✅ `businessCustomComponents.DisplayLoading/DisplayError` - 加载/错误组件
+- ✅ `businessCustomComponents.AppLoading/AppError` - 应用级加载/错误组件
+
+#### 1.1.5 工具函数
+- ✅ `utils/index.ts` - 完全相同的工具函数集合
+
+### 1.2 差异部分（需要定制）
+
+#### 1.2.1 初始化逻辑
+- **chat**: 
+  - 拉取助手列表（`/qa/search/config/helper/list`）
+  - 拉取会话列表第一页（`/qa/dialogue/list`）
+  - 支持会话列表分页
+- **headlessChat**: 
+  - 不需要助手列表（使用传入的 configId）
+  - 不需要会话列表（只创建新会话）
+  - 自动创建临时会话（`sysType: 'TEMPORARY'`）
+
+#### 1.2.2 会话管理
+- **chat**: 
+  - 完整的会话列表管理（Conversations组件）
+  - 支持会话重命名、删除
+  - 支持会话分页加载
+  - 支持助手切换
+- **headlessChat**: 
+  - 无会话列表UI
+  - 无会话管理功能
+  - 固定使用传入的 configId
+
+#### 1.2.3 文件上传方式
+- **chat**: 
+  - 使用隐藏的 `<input type="file">` 
+  - 通过 `sender:action_upload` 事件触发
+  - 文件直接上传到发送器
+- **headlessChat**: 
+  - 使用独立的 `FileManager` 组件
+  - 通过 `sender:action_history` 打开文件管理器
+  - 文件先添加到 `pendingFiles`，再统一上传
+
+#### 1.2.4 UI组件差异
+- **chat**: 
+  - 有侧边栏（sidebar）显示会话历史
+  - 有文件展示工具（FileDisplayTools）在 chatHeader
+  - 使用 RenameModal、DeleteModal
+- **headlessChat**: 
+  - 无侧边栏（sidebar = undefined）
+  - 使用独立的 FileManager Drawer
+  - 使用 DrawerPreview、DrawerContent 等预览组件
+
+#### 1.2.5 配置参数
+- **chat**: 
+  - 支持 `senderConfig` 深度合并
+  - 支持 `CustomComponents` 完整覆盖
+  - 支持 `appLoadingConfig`
+  - 支持 `SidebarTabConfig`
+- **headlessChat**: 
+  - 简单的 `configId`、`welcomeContent`
+  - 简单的 `CustomComponents` 合并
+  - 无侧边栏配置
+
+#### 1.2.6 ReferenceBar 差异
+- **chat**: 
+  - 通过 `eventsEmit` 透传事件到父组件
+  - 部分事件处理在父组件
+- **headlessChat**: 
+  - 内部处理所有事件
+  - 有独立的 `eventsEmit` 函数
+
+## 二、统一方案设计
+
+### 2.1 架构设计
+
+```
+gientech/src/modules/
+├── chat/
+│   ├── index.tsx (主入口，使用 shared hooks)
+│   ├── Conversations/ (会话列表组件，chat 独有)
+│   └── ...
+├── headlessChat/
+│   ├── index.tsx (主入口，使用 shared hooks)
+│   └── ...
+└── shared/ (新增)
+    ├── hooks/
+    │   ├── useFileManager.ts (文件管理逻辑)
+    │   ├── useMessageHandler.ts (消息处理逻辑)
+    │   └── useChatEvents.ts (事件处理逻辑)
+    ├── utils/
+    │   ├── fileUtils.ts (文件工具函数)
+    │   └── messageUtils.ts (消息工具函数)
+    └── types.ts (共享类型定义)
+```
+
+### 2.2 核心 Hook 设计
+
+#### 2.2.1 `useFileManager` - 文件管理 Hook
+
+```typescript
+interface UseFileManagerOptions {
+  url: string;
+  token: string;
+  CSRFToken?: string;
+  activeSessionId?: string;
+  currentChatData: any;
+  onError?: (error: any) => void;
+}
+
+interface UseFileManagerReturn {
+  fileManagerData: { uploadedFiles: any[] };
+  fileStatuses: any[];
+  setFileManagerData: (data: { uploadedFiles: any[] }) => void;
+  setFileStatuses: (statuses: any[]) => void;
+  pollFileStatus: (uids: string[], callbacks: PollCallbacks) => void;
+  handleRemoveFromTemp: (uid: string, queryId?: string) => Promise<void>;
+  normalizeFileItem: (f: any) => any;
+  mergeFiles: (oldFiles: any[], newFiles: any[]) => any[];
+  // ... 其他文件相关方法
+}
+```
+
+**职责**:
+- 文件状态管理（uploadedFiles、fileStatuses）
+- 文件上传、解析、删除逻辑
+- 文件结构标准化和合并
+- 文件轮询状态检查
+
+#### 2.2.2 `useMessageHandler` - 消息处理 Hook
+
+```typescript
+interface UseMessageHandlerOptions {
+  url: string;
+  token: string;
+  CSRFToken?: string;
+  activeSessionId?: string;
+  currentChatData: any;
+  conversationList: any[];
+  setChatData: (updater: any) => void;
+  setConversationList: (updater: any) => void;
+  setAppStatus: (updater: any) => void;
+  api_startChat_re: (params: any, callback?: any) => void;
+  addEmptyMessage: (data: any) => void;
+  setLastEmptyMessage: (data: any) => void;
+  fileManager: UseFileManagerReturn;
+  senderSwitchValues: { [key: string]: boolean };
+  configId?: string;
+  sysType?: 'INT_SESSION' | 'TEMPORARY';
+}
+
+interface UseMessageHandlerReturn {
+  handleSenderSend: (data: any, clearFn: () => void) => Promise<void>;
+  handleReSenderSend: (data: any) => void;
+  setFeed: (queryId: string, result: number | null) => void;
+  fetchRecommendQuestions: (queryId: string) => Promise<void>;
+}
+```
+
+**职责**:
+- 消息发送逻辑（包含文件上传流程）
+- 消息重发逻辑
+- 反馈处理
+- 推荐问题获取
+
+#### 2.2.3 `useChatEvents` - 事件处理 Hook
+
+```typescript
+interface UseChatEventsOptions {
+  // 各种处理函数的引用
+  handleSenderSend: (data: any, clearFn: () => void) => Promise<void>;
+  handleReSenderSend: (data: any) => void;
+  handleThumbsup: (data: any) => void;
+  handleItemClick?: (data: any) => void;
+  handleConversationCreate?: (data: any) => void;
+  fileManager: UseFileManagerReturn;
+  // ... 其他依赖
+}
+
+interface UseChatEventsReturn {
+  mergedEventsEmit: (eventName: string, data: any) => void;
+}
+```
+
+**职责**:
+- 统一事件分发
+- 事件处理逻辑聚合
+- 支持扩展自定义事件处理
+
+### 2.3 文件结构标准化
+
+#### 2.3.1 共享工具函数提取
+
+将以下函数提取到 `shared/utils/fileUtils.ts`:
+- `normalizeFileItem`
+- `mergeFiles`
+- `pollFileStatus` (提取为独立函数，接受配置参数)
+
+#### 2.3.2 共享类型定义
+
+在 `shared/types.ts` 中定义:
+- `FileManagerData`
+- `FileStatus`
+- `MessageHandlerOptions`
+- `ChatEventsOptions`
+- 等共享类型
+
+### 2.4 实施步骤
+
+#### 阶段一：提取文件管理逻辑
+1. ✅ 创建 `shared/hooks/useFileManager.ts`
+2. ✅ 提取 `normalizeFileItem`、`mergeFiles` 到 `shared/utils/fileUtils.ts`
+3. ✅ 提取 `pollFileStatus` 逻辑到 hook
+4. ✅ 提取 `uploaded_file:removeFromTemp` 处理逻辑
+5. ✅ 在 chat 和 headlessChat 中替换为使用 hook
+
+#### 阶段二：提取消息处理逻辑
+1. ✅ 创建 `shared/hooks/useMessageHandler.ts`
+2. ✅ 提取 `handleSenderSend` 核心逻辑（文件上传部分）
+3. ✅ 提取 `handleReSenderSend` 逻辑
+4. ✅ 提取 `setFeed`、`fetchRecommendQuestions` 逻辑
+5. ✅ 在 chat 和 headlessChat 中替换为使用 hook
+
+#### 阶段三：提取事件处理逻辑
+1. ✅ 创建 `shared/hooks/useChatEvents.ts`
+2. ✅ 提取通用事件处理逻辑
+3. ✅ 支持自定义事件处理器注入
+4. ✅ 在 chat 和 headlessChat 中替换为使用 hook
+
+#### 阶段四：统一 ReferenceBar
+1. ✅ 分析两个 ReferenceBar 的差异
+2. ✅ 提取共同逻辑到共享组件
+3. ✅ 通过 props 控制差异行为
+4. ✅ 统一两个模块使用同一个 ReferenceBar
+
+#### 阶段五：测试和优化
+1. ✅ 确保 chat 功能正常
+2. ✅ 确保 headlessChat 功能正常
+3. ✅ 确保文件管理逻辑一致
+4. ✅ 性能优化和代码清理
+
+## 三、关键注意事项
+
+### 3.1 保持向后兼容
+- 两个模块的对外接口（props）保持不变
+- 只重构内部实现，不改变外部 API
+
+### 3.2 差异化处理
+- 通过 hook 的 options 参数传递差异配置
+- 通过条件判断处理不同场景
+- 保持代码清晰，避免过度抽象
+
+### 3.3 文件管理器逻辑统一
+- **重点**: chat 已经更新了 filemanager 逻辑，需要确保 headlessChat 使用相同的逻辑
+- 统一 `uploaded_file:removeFromTemp` 事件处理
+- 统一文件状态同步逻辑（从 reference 字段同步到 fileManagerData）
+- 统一文件上传、解析、删除流程
+
+### 3.4 测试重点
+- 文件上传流程
+- 文件解析状态轮询
+- 文件删除（removeFromTemp）
+- 文件状态同步（从 AI 消息的 reference 字段）
+- 消息发送（有文件/无文件）
+- 消息重发
+
+## 四、预期收益
+
+1. **代码复用**: 减少 ~40% 的重复代码
+2. **维护性**: 文件管理逻辑统一维护，一处修改两处生效
+3. **一致性**: 确保两个模块的文件管理行为完全一致
+4. **可扩展性**: 新增功能只需在 shared hooks 中添加，自动应用到两个模块
+5. **可测试性**: 共享逻辑可以独立测试
+
+## 五、风险评估
+
+1. **重构风险**: 大规模重构可能引入 bug
+   - **缓解**: 分阶段实施，每个阶段充分测试
+   
+2. **性能影响**: Hook 抽象可能带来性能开销
+   - **缓解**: 使用 useMemo、useCallback 优化
+   
+3. **复杂度增加**: 抽象层可能增加理解成本
+   - **缓解**: 完善的文档和注释
+
+## 六、下一步行动
+
+1. 创建 shared 目录结构
+2. 开始阶段一：提取文件管理逻辑
+3. 同步更新 chat 和 headlessChat 使用新的 hook
+4. 测试验证功能正常
+5. 继续后续阶段

package/src/modules/assistantConfig/assets/databse.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="3.55556" fill="#925BFF"/>
+<path d="M11.9971 11.265C15.249 11.265 17.8891 10.443 17.8891 9.423V7.95288C17.8891 6.93291 15.2492 6.11084 11.9971 6.11084C8.74513 6.11084 6.10504 6.93276 6.10504 7.95288V9.42285C6.10504 10.437 8.73898 11.265 11.9971 11.265Z" fill="white"/>
+<path d="M11.9971 14.577C15.249 14.577 17.8891 13.7551 17.8891 12.7349V10.527C17.8891 11.5469 15.2492 12.369 11.9971 12.369C8.74513 12.369 6.10504 11.5471 6.10504 10.527V12.7349C6.10504 13.749 8.73898 14.577 11.9971 14.577Z" fill="white"/>
+<path d="M11.9971 15.681C8.7451 15.681 6.11102 14.859 6.11102 13.839V16.0469C6.11102 17.0609 8.74496 17.889 12.0031 17.889C15.255 17.889 17.8951 17.0671 17.8951 16.0469V13.8391C17.889 14.859 15.249 15.681 11.9971 15.681Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/assets/graph.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="3.55556" fill="#00C1B8"/>
+<path d="M17.9887 12.582C18.1207 13.6621 17.2267 14.5801 16.1526 14.4901C15.3306 14.4181 14.6645 13.7521 14.6045 12.924C14.5745 12.558 14.6645 12.21 14.8445 11.9159C14.9285 11.7779 14.9045 11.6039 14.8025 11.4899L14.3885 11.0339C14.2805 10.9139 14.1005 10.8839 13.9565 10.9559C13.6144 11.1239 13.2304 11.2199 12.8224 11.2199C12.6244 11.2199 12.4324 11.1959 12.2464 11.1539C12.0963 11.1179 11.9463 11.1779 11.8563 11.3039L11.2803 12.1259C11.1783 12.276 11.1963 12.474 11.3223 12.606C11.8983 13.188 12.2464 13.9921 12.2284 14.8741C12.1924 16.4702 10.9203 17.7963 9.32417 17.9043C7.45804 18.0243 5.90994 16.4942 6.00595 14.6281C6.08995 13.038 7.38604 11.7599 8.97614 11.6879C9.42017 11.6699 9.8402 11.7419 10.2302 11.8919C10.3922 11.9519 10.5722 11.8979 10.6743 11.7599L11.1663 11.0579C11.2743 10.9019 11.2503 10.6919 11.1123 10.5658C10.5302 10.0498 10.1882 9.26976 10.2662 8.4177C10.3742 7.18162 11.3823 6.18556 12.6244 6.09555C14.1245 5.98154 15.3846 7.17562 15.3846 8.65172C15.3846 9.20376 15.2106 9.70779 14.9105 10.1278C14.8085 10.2658 14.8205 10.4578 14.9345 10.5898L15.3786 11.0819C15.4746 11.1899 15.6306 11.2259 15.7626 11.1779C16.0086 11.0939 16.2786 11.0639 16.5606 11.1119C17.3047 11.2259 17.8987 11.8319 17.9887 12.582Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/assets/knowledge.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="2.22222" fill="#00B2F9"/>
+<path d="M5.3125 13.9672V13.975C5.32812 14.6938 5.89922 15.2734 6.61875 15.2734H13.9062C14.3375 15.2734 14.6875 14.9289 14.6875 14.4977V5.50703C14.6875 5.40447 14.6673 5.30292 14.628 5.20818C14.5887 5.11344 14.5312 5.02736 14.4586 4.95488C14.3861 4.8824 14.2999 4.82492 14.2052 4.78575C14.1104 4.74657 14.0088 4.72646 13.9062 4.72656H6.875C6.01172 4.72656 5.3125 5.42031 5.3125 6.28359V13.9672ZM7.5 9.24531V6.25C7.5 6.07813 7.64062 5.9375 7.8125 5.9375H9.6875C9.86016 5.9375 10 6.07813 10 6.25V9.24531C10 9.30716 9.98175 9.36762 9.94741 9.41906C9.91308 9.47049 9.86425 9.51058 9.80712 9.53426C9.74999 9.55793 9.68712 9.56412 9.62647 9.55204C9.56581 9.53996 9.51011 9.51016 9.46641 9.46641L8.97109 8.97109C8.94207 8.94204 8.90761 8.91899 8.86967 8.90326C8.83173 8.88754 8.79107 8.87944 8.75 8.87944C8.70893 8.87944 8.66827 8.88754 8.63033 8.90326C8.59239 8.91899 8.55793 8.94204 8.52891 8.97109L8.03359 9.46641C7.98989 9.51016 7.93418 9.53996 7.87353 9.55204C7.81288 9.56412 7.75001 9.55793 7.69288 9.53426C7.63575 9.51058 7.58692 9.47049 7.55259 9.41906C7.51825 9.36762 7.49995 9.30716 7.5 9.24531ZM6.54375 14.2063C6.45208 14.1156 6.40625 14.0052 6.40625 13.875C6.40625 13.7458 6.45208 13.6354 6.54375 13.5438C6.6349 13.4521 6.74531 13.4062 6.875 13.4062H13.5938V14.3438H6.875C6.74531 14.3438 6.6349 14.2979 6.54375 14.2063Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/assets/sensitive.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="2.22222" fill="#FFCC3C"/>
+<path d="M13.3263 12.7917H7.53763C7.33426 12.8116 7.17923 12.9825 7.17923 13.1867C7.17923 13.3909 7.33426 13.5618 7.53763 13.5817H13.3277C13.3828 13.5871 13.4384 13.5809 13.4909 13.5634C13.5435 13.546 13.5918 13.5178 13.6328 13.4806C13.6738 13.4434 13.7066 13.3981 13.729 13.3474C13.7514 13.2968 13.763 13.2421 13.763 13.1867C13.763 13.1313 13.7514 13.0766 13.729 13.026C13.7066 12.9753 13.6738 12.93 13.6328 12.8928C13.5918 12.8556 13.5435 12.8274 13.4909 12.8099C13.4384 12.7925 13.3828 12.7863 13.3277 12.7917H13.3263ZM9.19742 7.60418L8.84232 8.55193H9.57339L9.19742 7.60418Z" fill="white"/>
+<path d="M15.3211 14.7707V6.9692H14.4704V14.3543H6.70511C6.06668 14.3392 5.55704 13.8173 5.55704 13.1788C5.55704 12.5402 6.06668 12.0184 6.70511 12.0033H13.352C13.4644 12.0075 13.5735 11.9648 13.653 11.8852C13.6923 11.8459 13.7231 11.7988 13.7434 11.747C13.7638 11.6952 13.7731 11.6398 13.771 11.5842V5.20102C13.7736 5.14526 13.7646 5.08958 13.7445 5.03752C13.7244 4.98546 13.6936 4.93816 13.6542 4.89865C13.6148 4.85915 13.5675 4.82832 13.5155 4.80812C13.4634 4.78792 13.4077 4.7788 13.352 4.78134H6.70511C5.60281 4.80136 4.71609 5.69369 4.70291 6.79599V13.1759C4.71609 14.283 5.61038 15.1773 6.71756 15.1905H14.8893C15.0042 15.1994 15.1173 15.1585 15.1999 15.0782C15.2407 15.0385 15.2727 14.9905 15.2936 14.9375C15.3145 14.8845 15.3239 14.8276 15.3211 14.7707ZM8.98782 6.78585H9.44888L10.7213 9.92562H10.2475L9.9075 9.06759H8.51871L8.19742 9.92562H7.72354L8.98782 6.78585Z" fill="white"/>
+</svg>

package/src/modules/assistantConfig/components/Database.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect, useRef } from 'react';
+import ResourceBinderItem from './ResourceBinderItem';
+import SearchableSelector, { type SearchableSelectorRef } from './SearchableSelector';
+import { Button, Modal } from 'antd';
+import { Plus } from 'lucide-react';
+import Icon from '../assets/databse.svg';
+import AxiosInstance from '../server';
+
+const maxCount = 10;
+
+const DatabaseSection = ({ url, token, role, eventsEmit, sectionData, disabled }: any) => {
+  const [options, setOptions]: any = useState([]);
+  const [data, setData]: any = useState([]);
+  const [isModalShow, setIsModalShow] = useState(false);
+  const selectorRef = useRef<SearchableSelectorRef>(null);
+
+  const { fetchDatabases } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  useEffect(() => {
+    getList();
+  }, []);
+
+  useEffect(() => {
+    if (sectionData) {
+      let _data = [] as any;
+      (sectionData || []).map((db: any) => {
+        const _targetDb = (options || []).find((i: any) => i.key === db.key);
+        if (_targetDb) {
+          const { key, label } = _targetDb;
+          _data.push({
+            key,
+            label,
+          });
+        }
+      });
+      setData(_data);
+    }
+  }, [sectionData, options]);
+
+  const getList = async () => {
+    try {
+      const res = await fetchDatabases();
+      if (res) {
+        const options = (res || []).map((item: any) => {
+          return {
+            key: item.primitiveName,
+            label: item.name,
+          };
+        });
+        setOptions(options);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleEventsEmit = (name: string, eventsData?: any) => {
+    switch (name) {
+      case 'removeItem':
+        const _data = data.filter((p: any) => p.key !== eventsData.key);
+        setData([..._data]);
+        eventsEmit && eventsEmit('database_selected', _data);
+        break;
+    }
+  };
+
+  const handleOk = () => {
+    // 通过 ref 获取选中的项
+    const selectedItems = selectorRef.current?.getSelectedItems() || [];
+    setData(selectedItems);
+    setIsModalShow(false);
+    eventsEmit && eventsEmit('database_selected', selectedItems);
+  };
+
+  return (
+    <div style={{ borderBottom: '1px solid #E5E6EB', padding: '12px 0 ' }}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <img src={Icon} />
+          <span
+            className="font-medium "
+            style={{
+              marginLeft: '10px',
+            }}
+          >
+            数据库
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            color="primary"
+            variant="outlined"
+            size="small"
+            icon={<Plus size={14} />}
+            onClick={() => setIsModalShow(true)}
+            disabled={data.length >= maxCount || disabled}
+          >
+            添加
+          </Button>
+        </div>
+      </div>
+      {data?.length > 0 && (
+        <ResourceBinderItem
+          countText={data?.length > 0 ? `已选：${data?.length}个数据库` : undefined}
+          eventsEmit={handleEventsEmit}
+          data={data}
+        />
+      )}
+
+      <Modal
+        width={740}
+        title="选择数据库"
+        className="assistant-config-resource-bind-modal"
+        okText="确定"
+        cancelText="取消"
+        open={isModalShow}
+        onOk={handleOk}
+        onCancel={() => setIsModalShow(false)}
+        destroyOnHidden
+      >
+        <SearchableSelector
+          ref={selectorRef}
+          dataSource={options}
+          value={data}
+          searchPlaceholder="搜索名称..."
+          width="700px"
+          height="500px"
+          title="数据库"
+          maxCount={maxCount}
+          renderItem={item => {
+            return (
+              <div className="flex ">
+                <img src={Icon} alt="add" />
+                <span
+                  style={{
+                    marginLeft: 8,
+                    marginRight: 8,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={item.label}
+                >
+                  {item.label}
+                </span>
+              </div>
+            );
+          }}
+          renderSelectedItem={(item, updateItemData) => {
+            return (
+              <div className="flex items-center">
+                <img src={Icon} alt="add" />
+                <div style={{ marginLeft: '12px' }}>
+                  <div style={{ fontWeight: 500 }}>{item.label}</div>
+                </div>
+              </div>
+            );
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default DatabaseSection;