174 lines
4.1 KiB
Markdown
174 lines
4.1 KiB
Markdown
# 重roll功能调试指南
|
||
|
||
## 问题描述
|
||
|
||
重roll时整个前端页面被流式输出内容取代，而不是只在目标消息中更新。
|
||
|
||
## 可能的原因
|
||
|
||
1. **消息ID匹配失败**：`newMessageId` 与实际消息的 ID 不匹配
|
||
2. **状态更新错误**：使用了 `set({ messages: [...] })` 而不是 `set((state) => ({ messages: ... }))`
|
||
3. **字段丢失**：更新时没有使用 `...msg` 保留原有字段
|
||
|
||
## 已实施的修复
|
||
|
||
### 1. 确保 nextFloor 变量定义
|
||
```javascript
|
||
let userFloor, assistantFloor, nextFloor; // ✅ 在外部声明
|
||
|
||
if (isReroll) {
|
||
assistantFloor = targetFloor;
|
||
nextFloor = targetFloor; // ✅ 设置 nextFloor
|
||
} else {
|
||
nextFloor = get().getNextFloor(messages);
|
||
// ...
|
||
}
|
||
```
|
||
|
||
### 2. 添加详细的调试日志
|
||
```javascript
|
||
console.log('[ChatBoxStore] 🔄 重roll模式，更新消息:', {
|
||
id: newMessageId,
|
||
floor: assistantFloor,
|
||
currentMes: targetMessage.mes.substring(0, 50) + '...',
|
||
hasSwipes: !!targetMessage.swipes,
|
||
swipesCount: targetMessage.swipes?.length || 0,
|
||
swipeId: targetMessage.swipe_id
|
||
});
|
||
```
|
||
|
||
### 3. 验证消息匹配
|
||
```javascript
|
||
set((state) => {
|
||
const targetMsg = state.messages.find(msg => msg.id === newMessageId);
|
||
if (!targetMsg && chunkCount === 1) {
|
||
console.error('[ChatBoxStore] ❌ 找不到目标消息！', {
|
||
newMessageId,
|
||
availableIds: state.messages.map(m => ({ id: m.id, floor: m.floor }))
|
||
});
|
||
}
|
||
|
||
return {
|
||
messages: state.messages.map((msg) => {
|
||
if (msg.id === newMessageId) {
|
||
return {
|
||
...msg, // ✅ 保留所有原有字段
|
||
mes: assistantMessage
|
||
};
|
||
}
|
||
return msg;
|
||
})
|
||
};
|
||
});
|
||
```
|
||
|
||
## 测试步骤
|
||
|
||
### 1. 打开浏览器控制台
|
||
|
||
按 F12 打开开发者工具，切换到 Console 标签。
|
||
|
||
### 2. 触发重roll
|
||
|
||
在任意 AI 消息上右键点击，选择"🔄 重roll"。
|
||
|
||
### 3. 观察日志输出
|
||
|
||
应该看到以下日志：
|
||
|
||
```
|
||
[ChatBoxStore] 🔄 重roll模式，更新消息: {
|
||
id: "ai_1234567890_abc123",
|
||
floor: 2,
|
||
currentMes: "这是AI的回复内容...",
|
||
hasSwipes: true,
|
||
swipesCount: 2,
|
||
swipeId: 1
|
||
}
|
||
|
||
[WebSocket] 📡 连接已建立
|
||
[WebSocket] 📤 发送消息:
|
||
- Floor: 2
|
||
- Mode: 🔄 Reroll
|
||
- ...
|
||
|
||
[WebSocket] 📊 已接收 10 个 chunks
|
||
[WebSocket] 📊 已接收 20 个 chunks
|
||
...
|
||
|
||
[ChatBoxStore] 🔄 重roll完成，添加新的 swipe 版本
|
||
[ChatBoxStore] 📊 Swipes 更新: {
|
||
oldCount: 2,
|
||
newCount: 3,
|
||
newSwipeIndex: 2
|
||
}
|
||
```
|
||
|
||
### 4. 检查是否有错误
|
||
|
||
如果看到以下错误，说明消息ID匹配失败：
|
||
|
||
```
|
||
[ChatBoxStore] ❌ 找不到目标消息！ {
|
||
newMessageId: "ai_1234567890_abc123",
|
||
availableIds: [
|
||
{ id: "ai_1111111111_xyz", floor: 1 },
|
||
{ id: "ai_2222222222_def", floor: 2 }
|
||
]
|
||
}
|
||
```
|
||
|
||
**这意味着**：`newMessageId` 与消息列表中的任何 ID 都不匹配！
|
||
|
||
### 5. 验证页面表现
|
||
|
||
✅ **正确的表现**：
|
||
- 只有目标 AI 消息的内容在流式更新
|
||
- 其他消息保持不变
|
||
- 用户消息、其他 AI 消息不受影响
|
||
- 侧边栏、顶部栏等UI组件正常显示
|
||
|
||
❌ **错误的表现**（修复前）：
|
||
- 整个页面被流式文本覆盖
|
||
- 其他消息消失或被替换
|
||
- UI 组件异常
|
||
|
||
## 常见问题排查
|
||
|
||
### Q1: 如果看到"找不到目标消息"错误
|
||
|
||
**原因**：消息ID不匹配
|
||
|
||
**解决**：
|
||
1. 检查 `targetMessage.id` 是否正确获取
|
||
2. 确认消息列表中确实存在该 ID
|
||
3. 检查是否有其他地方修改了消息ID
|
||
|
||
### Q2: 如果页面仍然被覆盖
|
||
|
||
**原因**：可能是 React 渲染问题
|
||
|
||
**解决**：
|
||
1. 检查 ChatBox.jsx 的 renderMessage 函数
|
||
2. 确认使用了正确的 key（应该是 `message.id`）
|
||
3. 检查是否有条件渲染导致其他消息被隐藏
|
||
|
||
### Q3: Swipe 按钮消失
|
||
|
||
**原因**：swipes 数组丢失
|
||
|
||
**解决**：
|
||
1. 确认更新时使用了 `...msg` 保留所有字段
|
||
2. 检查 complete 事件中是否正确更新了 swipes 数组
|
||
3. 验证 `msg.swipes` 在更新后仍然存在
|
||
|
||
## 预期结果
|
||
|
||
修复后，重roll应该：
|
||
1. ✅ 只更新目标 AI 消息
|
||
2. ✅ 保留所有其他消息
|
||
3. ✅ 保留 swipes 数组和 swipe_id
|
||
4. ✅ 流式显示新生成的内容
|
||
5. ✅ 完成后自动切换到新版本
|
||
6. ✅ 不影响页面其他部分
|