523 lines
13 KiB
Markdown
523 lines
13 KiB
Markdown
# 聊天模块 V2.1 优化更新
|
||
|
||
## 📅 更新日期
|
||
2025年10月14日
|
||
|
||
## 🎯 本次优化内容
|
||
|
||
### 1. ✅ 右侧对话列表可折叠
|
||
|
||
**功能描述**：右侧的对话列表现在支持折叠/展开，节省屏幕空间。
|
||
|
||
**实现细节**：
|
||
- 在对话头部添加折叠按钮
|
||
- 按钮图标根据状态变化（ChevronLeft / ChevronRight）
|
||
- 按钮文字显示"显示列表" / "隐藏列表"
|
||
- 使用 CSS transition 实现平滑动画
|
||
|
||
**代码实现**：
|
||
```vue
|
||
<!-- 头部按钮 -->
|
||
<n-button text @click="showSidebar = !showSidebar">
|
||
<n-icon :component="showSidebar ? ChevronRightIcon : ChevronLeftIcon" />
|
||
<span>{{ showSidebar ? '隐藏列表' : '显示列表' }}</span>
|
||
</n-button>
|
||
|
||
<!-- CSS 动画 -->
|
||
<style>
|
||
.topics-sidebar {
|
||
width: 320px;
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.topics-sidebar:not(.visible) {
|
||
width: 0;
|
||
border-left: none;
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
**使用方法**：
|
||
- 点击对话头部右上角的折叠按钮
|
||
- 对话列表会平滑地隐藏/显示
|
||
- 响应式设计：小屏幕时自动变为浮动面板
|
||
|
||
---
|
||
|
||
### 2. ✅ AI 模型选择列表动态加载
|
||
|
||
**功能描述**：模型选择器现在会动态读取"模型服务"中已配置的所有可用模型。
|
||
|
||
**实现细节**：
|
||
```typescript
|
||
// 从 modelStore 动态读取模型列表
|
||
const modelOptions = computed(() => {
|
||
const services = modelStore.providers
|
||
const options: any[] = []
|
||
|
||
services.forEach((service: any) => {
|
||
if (service.enabled && service.models) {
|
||
service.models.forEach((model: any) => {
|
||
options.push({
|
||
label: `${service.name} | ${model.name}`,
|
||
key: `${service.id}:${model.id}`,
|
||
icon: () => h(NIcon, { component: BrainIcon })
|
||
})
|
||
})
|
||
}
|
||
})
|
||
|
||
return options
|
||
})
|
||
|
||
// 显示选中的模型名称
|
||
const selectedModelName = computed(() => {
|
||
if (!selectedModel.value) return undefined
|
||
const [serviceId, modelId] = selectedModel.value.split(':')
|
||
const service = modelStore.providers.find((s: any) => s.id === serviceId)
|
||
const model = service?.models?.find((m: any) => m.id === modelId)
|
||
return model ? `${service?.name} | ${model.name}` : undefined
|
||
})
|
||
```
|
||
|
||
**工作流程**：
|
||
1. 用户在"模型服务"页面添加服务（如火山引擎、OpenAI）
|
||
2. 服务连接成功后，其模型会自动出现在聊天页面的模型选择器中
|
||
3. 选择模型后，该模型会被用于当前对话
|
||
4. 模型信息格式：`服务名 | 模型名`（如"火山引擎 | doubao-1.5-pro-32k"）
|
||
|
||
**特性**：
|
||
- ✅ 实时同步：添加新服务后立即可用
|
||
- ✅ 多服务支持：同时显示所有服务的模型
|
||
- ✅ 清晰标识：服务名和模型名分开显示
|
||
- ✅ 图标辅助：每个选项都有模型图标
|
||
|
||
---
|
||
|
||
### 3. ✅ MCP 服务支持（基础架构）
|
||
|
||
**功能描述**：聊天对话中现在支持选择和使用 MCP 服务器。
|
||
|
||
**实现细节**：
|
||
|
||
#### 3.1 MCP 服务器列表动态加载
|
||
```typescript
|
||
// 从 mcpStore 读取已连接的服务器
|
||
const mcpOptions = computed(() => {
|
||
const options: any[] = [
|
||
{
|
||
label: '不启用 MCP 服务',
|
||
key: 'none'
|
||
}
|
||
]
|
||
|
||
// 添加已连接的服务器
|
||
mcpStore.connectedServers.forEach((server) => {
|
||
const toolCount = server.capabilities?.tools?.length || 0
|
||
options.push({
|
||
label: `${server.name} (${toolCount} 个工具)`,
|
||
key: server.id,
|
||
icon: () => h(NIcon, { component: PlugIcon })
|
||
})
|
||
})
|
||
|
||
return options
|
||
})
|
||
|
||
// 显示选中的 MCP 服务器名称
|
||
const selectedMCPName = computed(() => {
|
||
if (!selectedMCP.value || selectedMCP.value === 'none') return '不启用 MCP 服务'
|
||
const server = mcpStore.servers.find(s => s.id === selectedMCP.value)
|
||
return server?.name || '未知服务'
|
||
})
|
||
```
|
||
|
||
#### 3.2 MCP 服务器传递到聊天服务
|
||
```typescript
|
||
// ChatLayout.vue - 发送消息时传递 MCP 服务器 ID
|
||
const handleSendMessage = async () => {
|
||
const mcpId = selectedMCP.value === 'none' ? undefined : selectedMCP.value
|
||
await store.sendMessageStream(
|
||
content,
|
||
selectedModel.value,
|
||
mcpId, // 传递 MCP 服务器 ID
|
||
() => { scrollToBottom() }
|
||
)
|
||
}
|
||
|
||
// chatStore.ts - 转发到 chatService
|
||
const sendMessageStream = async (
|
||
content: string,
|
||
model?: string,
|
||
mcpServerId?: string, // 新增参数
|
||
onChunk?: (chunk: string) => void
|
||
) => {
|
||
await chatService.sendMessageStream(
|
||
{ topicId, content, model, stream: true },
|
||
onChunk,
|
||
mcpServerId // 传递给 service
|
||
)
|
||
}
|
||
|
||
// chatService.ts - 接收并准备使用
|
||
async sendMessageStream(
|
||
options: SendMessageOptions,
|
||
onChunk: (event: StreamEvent) => void,
|
||
mcpServerId?: string // 接收 MCP 服务器 ID
|
||
): Promise<void> {
|
||
// TODO: 在这里实现 MCP 工具调用逻辑
|
||
await this.callModelStream(conversation, model, onChunk, mcpServerId)
|
||
}
|
||
```
|
||
|
||
#### 3.3 自动加载和重连
|
||
```typescript
|
||
// 初始化时加载 MCP 服务器
|
||
onMounted(async () => {
|
||
store.initialize()
|
||
scrollToBottom()
|
||
|
||
// 加载 MCP 服务器配置
|
||
mcpStore.loadServers()
|
||
|
||
// 尝试自动重连之前已连接的服务器
|
||
try {
|
||
await mcpStore.autoReconnect()
|
||
} catch (error) {
|
||
console.warn('自动重连 MCP 服务器失败:', error)
|
||
}
|
||
})
|
||
```
|
||
|
||
**工作流程**：
|
||
1. 用户在"MCP 设置"页面添加并连接服务器
|
||
2. 服务器连接成功后，自动出现在聊天页面的 MCP 选择器中
|
||
3. 选择服务器后，该服务器 ID 会被传递到聊天服务
|
||
4. 聊天服务可以使用该服务器的工具（待实现）
|
||
|
||
**当前状态**：
|
||
- ✅ 基础架构完成：MCP 服务器 ID 可以从 UI 传递到服务层
|
||
- ✅ 服务器列表动态加载：实时显示已连接的服务器和工具数量
|
||
- ✅ 自动重连：页面刷新后自动重连之前的服务器
|
||
- ⏳ 工具调用逻辑：已预留接口，等待实现
|
||
|
||
**下一步实现**：
|
||
```typescript
|
||
// 在 callModelStream 中检测 AI 的工具调用请求
|
||
private async callModelStream(
|
||
conversation: Conversation,
|
||
model: string | undefined,
|
||
onChunk: (chunk: string) => void,
|
||
mcpServerId?: string
|
||
): Promise<void> {
|
||
if (mcpServerId) {
|
||
// 1. 获取 MCP 服务器的可用工具列表
|
||
const server = mcpStore.servers.find(s => s.id === mcpServerId)
|
||
const tools = server?.capabilities?.tools || []
|
||
|
||
// 2. 将工具列表传递给 AI 模型
|
||
// 让 AI 知道可以调用哪些工具
|
||
|
||
// 3. 如果 AI 返回工具调用请求，执行工具
|
||
// const toolResult = await mcpStore.callTool(mcpServerId, toolName, params)
|
||
|
||
// 4. 将工具结果返回给 AI，让它生成最终回复
|
||
}
|
||
|
||
// 正常的流式响应
|
||
// ...
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 完整功能清单
|
||
|
||
### 已完成功能
|
||
1. ✅ 左侧导航可折叠（V2.0）
|
||
2. ✅ 右侧对话列表（V2.0）
|
||
3. ✅ **右侧对话列表可折叠（V2.1 新增）**
|
||
4. ✅ 工具栏 - MCP 服务选择
|
||
5. ✅ **工具栏 - 模型动态加载（V2.1 优化）**
|
||
6. ✅ **MCP 服务集成基础架构（V2.1 新增）**
|
||
7. ✅ 快捷操作按钮
|
||
8. ✅ 消息实时更新
|
||
9. ✅ 消息条数正确显示
|
||
|
||
### 待实现功能
|
||
1. ⏳ MCP 工具调用实际逻辑
|
||
2. ⏳ Markdown 渲染
|
||
3. ⏳ 代码语法高亮
|
||
4. ⏳ 真正的流式响应（SSE）
|
||
5. ⏳ 图片和文件消息
|
||
|
||
---
|
||
|
||
## 🎬 使用示例
|
||
|
||
### 场景1：使用特定模型对话
|
||
|
||
1. **添加模型服务**
|
||
```
|
||
侧边栏 → 模型服务 → 添加服务
|
||
例如：添加"火山引擎"服务
|
||
```
|
||
|
||
2. **在聊天中选择模型**
|
||
```
|
||
聊天页面 → 工具栏 → 点击"选择模型▼"
|
||
选择：火山引擎 | doubao-1.5-pro-32k-character
|
||
```
|
||
|
||
3. **发送消息**
|
||
```
|
||
输入框 → 输入"你好" → Enter
|
||
AI 使用选中的模型回复
|
||
```
|
||
|
||
### 场景2：使用 MCP 服务器扩展能力
|
||
|
||
1. **添加 MCP 服务器**
|
||
```
|
||
侧边栏 → MCP 设置 → 添加服务器
|
||
例如：添加"xhs-sse"服务器
|
||
URL: http://localhost:3200
|
||
```
|
||
|
||
2. **连接服务器**
|
||
```
|
||
点击"连接"按钮
|
||
等待连接成功，显示可用工具数量
|
||
```
|
||
|
||
3. **在聊天中选择 MCP**
|
||
```
|
||
聊天页面 → 工具栏 → 点击"不启用 MCP 服务▼"
|
||
选择：xhs-sse (5 个工具)
|
||
```
|
||
|
||
4. **发送消息（准备使用工具）**
|
||
```
|
||
输入框 → 输入"搜索最新的 Vue 3 教程"
|
||
AI 可以调用 MCP 工具进行搜索（功能待实现）
|
||
```
|
||
|
||
### 场景3：折叠对话列表获得更大空间
|
||
|
||
1. **隐藏对话列表**
|
||
```
|
||
点击右上角"隐藏列表"按钮
|
||
对话列表平滑隐藏
|
||
主对话区域扩大
|
||
```
|
||
|
||
2. **再次显示**
|
||
```
|
||
点击"显示列表"按钮
|
||
对话列表平滑显示
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 技术细节
|
||
|
||
### 数据流：模型选择
|
||
|
||
```
|
||
用户添加服务
|
||
↓
|
||
ModelService 连接
|
||
↓
|
||
modelStore.providers 更新
|
||
↓
|
||
modelOptions 计算属性更新
|
||
↓
|
||
下拉列表自动刷新
|
||
↓
|
||
用户选择模型
|
||
↓
|
||
selectedModel = "serviceId:modelId"
|
||
↓
|
||
发送消息时使用该模型
|
||
↓
|
||
modelServiceManager.sendChatRequest(serviceId, messages, modelId)
|
||
```
|
||
|
||
### 数据流：MCP 集成
|
||
|
||
```
|
||
用户添加 MCP 服务器
|
||
↓
|
||
MCPClientService 连接
|
||
↓
|
||
mcpStore.servers 更新
|
||
↓
|
||
mcpOptions 计算属性更新
|
||
↓
|
||
下拉列表自动刷新
|
||
↓
|
||
用户选择 MCP 服务器
|
||
↓
|
||
selectedMCP = serverId
|
||
↓
|
||
发送消息时传递 serverId
|
||
↓
|
||
chatService.sendMessageStream(..., mcpServerId)
|
||
↓
|
||
callModelStream(..., mcpServerId)
|
||
↓
|
||
[待实现] mcpStore.callTool(mcpServerId, toolName, params)
|
||
```
|
||
|
||
### 关键组件关系
|
||
|
||
```
|
||
ChatLayout.vue
|
||
├─ uses chatStore (聊天状态管理)
|
||
├─ uses modelStore (模型列表)
|
||
├─ uses mcpStore (MCP 服务器列表)
|
||
└─ calls sendMessageStream(content, model, mcpServerId)
|
||
|
||
chatStore.ts
|
||
└─ calls chatService.sendMessageStream(options, onChunk, mcpServerId)
|
||
|
||
chatService.ts
|
||
└─ calls callModelStream(conversation, model, onChunk, mcpServerId)
|
||
└─ [TODO] 实现 MCP 工具调用逻辑
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 配置示例
|
||
|
||
### 模型服务配置示例
|
||
```json
|
||
{
|
||
"id": "volcengine-001",
|
||
"name": "火山引擎",
|
||
"type": "volcengine",
|
||
"url": "https://ark.cn-beijing.volces.com/api/v3",
|
||
"apiKey": "your-api-key",
|
||
"enabled": true,
|
||
"models": [
|
||
{
|
||
"id": "doubao-1.5-pro-32k",
|
||
"name": "豆包-1.5-pro-32k",
|
||
"type": "chat"
|
||
},
|
||
{
|
||
"id": "doubao-1.5-pro-32k-character",
|
||
"name": "豆包-1.5-pro-32k-角色扮演",
|
||
"type": "chat"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### MCP 服务器配置示例
|
||
```json
|
||
{
|
||
"id": "mcp-xhs-001",
|
||
"name": "xhs-sse",
|
||
"url": "http://localhost:3200",
|
||
"transport": "sse",
|
||
"status": "connected",
|
||
"capabilities": {
|
||
"tools": [
|
||
{
|
||
"name": "search",
|
||
"description": "搜索互联网内容"
|
||
},
|
||
{
|
||
"name": "read_file",
|
||
"description": "读取本地文件"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 下一步开发计划
|
||
|
||
### 优先级1：MCP 工具调用实现
|
||
```typescript
|
||
// 实现 AI 工具调用流程
|
||
1. 将 MCP 工具列表格式化为 OpenAI Function Calling 格式
|
||
2. 在调用模型时传递工具定义
|
||
3. 解析 AI 返回的工具调用请求
|
||
4. 执行 MCP 工具
|
||
5. 将结果返回给 AI
|
||
6. 显示完整的对话过程
|
||
```
|
||
|
||
### 优先级2：模型切换优化
|
||
```typescript
|
||
// 记住每个对话的模型选择
|
||
1. 在 Topic 中保存 modelId
|
||
2. 切换对话时自动选择对应模型
|
||
3. 支持为不同对话设置默认模型
|
||
```
|
||
|
||
### 优先级3：UI 优化
|
||
```typescript
|
||
// 更好的用户体验
|
||
1. 工具调用进度显示
|
||
2. MCP 工具调用结果可视化
|
||
3. 模型和 MCP 状态指示器
|
||
4. 更多的快捷键支持
|
||
```
|
||
|
||
---
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### MCP 服务器要求
|
||
1. **必须先配置**：在"MCP 设置"中添加并连接服务器
|
||
2. **连接状态**：只有已连接的服务器才会出现在选择器中
|
||
3. **自动重连**：页面刷新后会自动尝试重连
|
||
4. **工具数量**：选择器显示每个服务器的工具数量
|
||
|
||
### 模型服务要求
|
||
1. **必须先配置**：在"模型服务"中添加服务
|
||
2. **启用状态**：只有启用的服务的模型才会出现
|
||
3. **连接状态**：建议先测试连接再使用
|
||
4. **API Key**：确保 API Key 有效且有足够配额
|
||
|
||
### 性能建议
|
||
1. **服务器数量**：建议不超过 5 个 MCP 服务器同时连接
|
||
2. **模型选择**：根据对话复杂度选择合适的模型
|
||
3. **工具调用**：复杂工具可能需要更长时间
|
||
|
||
---
|
||
|
||
## 📖 更新记录
|
||
|
||
### V2.1（2025/10/14）
|
||
- ✅ 右侧对话列表支持折叠
|
||
- ✅ 模型选择器动态加载已配置的模型
|
||
- ✅ MCP 服务集成基础架构完成
|
||
- ✅ 自动重连 MCP 服务器
|
||
- ✅ 完善的数据流和状态管理
|
||
|
||
### V2.0（2025/10/14）
|
||
- ✅ 左侧导航可折叠
|
||
- ✅ 右侧对话列表布局
|
||
- ✅ 完整工具栏
|
||
- ✅ 消息实时更新
|
||
- ✅ 消息条数修复
|
||
|
||
---
|
||
|
||
**优化完成！** 🎉
|
||
|
||
现在您可以：
|
||
1. ✅ 折叠对话列表获得更大空间
|
||
2. ✅ 使用已配置的任意模型对话
|
||
3. ✅ 选择 MCP 服务器（基础架构就绪）
|
||
|
||
继续完善 MCP 工具调用功能，敬请期待 V2.2！
|