peanut/happy-life-star

Fork 0

Files

T

peanut df818578e5 bug修复

2025-10-26 23:26:30 +08:00

6.0 KiB

Raw Blame History

消息顺序问题诊断和修复

📋 问题描述

前端聊天页面展示消息时，消息顺序不正确，AI 回复消息有时会出现在用户消息上方，导致对话流程混乱。

后端返回的数据示例：

{
  "records": [
    { "id": "...", "sender": "ai", "messageOrder": 6, "content": "抱歉，AI服务响应异常..." },
    { "id": "...", "sender": "user", "messageOrder": 5, "content": "你好" },
    { "id": "...", "sender": "ai", "messageOrder": 4, "content": "抱歉，AI服务响应异常..." },
    { "id": "...", "sender": "user", "messageOrder": 3, "content": "你好" },
    { "id": "...", "sender": "ai", "messageOrder": 2, "content": "抱歉，AI服务响应异常..." },
    { "id": "...", "sender": "user", "messageOrder": 1, "content": "你好" }
  ]
}

问题现象：

后端返回的数据是按 messageOrder 倒序排列的（最新的在前）
前端展示时应该按 messageOrder 升序排列（最早的在前）
但前端展示的顺序混乱，没有按照 messageOrder 排序

🔍 根本原因

问题 1: messageOrder 字段未被保留

在 web/src/services/message.ts 的 convertToChatMessage 方法中，没有将 messageOrder 字段从后端响应复制到 ChatMessage 对象中。

修改前的代码：

const chatMessage: ChatMessage = {
  id: msg.id,
  content: msg.content,
  type: msg.sender === 'user' ? 'user' : (msg.sender === 'ai' ? 'ai' : 'system'),
  timestamp: timestamp,
  conversationId: msg.conversationId,
  sessionId: msg.conversationId,
  status: 'sent',
  sender: msg.sender as 'user' | 'ai' | 'system',
  isRead: msg.isRead,
  role: msg.sender === 'user' ? 'user' : 'assistant'
  // ❌ 缺少 messageOrder 字段
}

结果：

转换后的 ChatMessage 对象中 messageOrder 为 undefined
排序时无法使用 messageOrder 进行排序
只能依赖时间戳排序，导致顺序混乱

✅ 解决方案

修复 1: 在消息转换时保留 messageOrder 字段

修改后的代码：

const chatMessage: ChatMessage = {
  id: msg.id,
  content: msg.content,
  type: msg.sender === 'user' ? 'user' : (msg.sender === 'ai' ? 'ai' : 'system'),
  timestamp: timestamp,
  conversationId: msg.conversationId,
  sessionId: msg.conversationId,
  status: 'sent',
  sender: msg.sender as 'user' | 'ai' | 'system',
  isRead: msg.isRead,
  role: msg.sender === 'user' ? 'user' : 'assistant',
  messageOrder: msg.messageOrder  // ✅ 添加 messageOrder 字段
}

排序逻辑验证

排序方法 sortAndDeduplicateMessages 中的排序逻辑是正确的：

uniqueMessages.sort((a, b) => {
  // 优先使用 messageOrder 排序
  if (a.messageOrder !== undefined && b.messageOrder !== undefined) {
    if (a.messageOrder !== b.messageOrder) {
      return a.messageOrder - b.messageOrder  // ✅ 按升序排列
    }
  }
  
  // 如果 messageOrder 相同或不存在，使用时间戳排序
  const timeA = this.parseTimestamp(a.timestamp)
  const timeB = this.parseTimestamp(b.timestamp)
  
  if (timeA !== timeB) {
    return timeA - timeB
  }
  
  // 时间相同时，保持原有顺序
  return a.id.localeCompare(b.id)
})

📊 修复前后对比

修复前

后端返回顺序（倒序）:
  1. messageOrder: 6 - AI 回复
  2. messageOrder: 5 - 用户消息
  3. messageOrder: 4 - AI 回复
  4. messageOrder: 3 - 用户消息
  5. messageOrder: 2 - AI 回复
  6. messageOrder: 1 - 用户消息

前端展示顺序（混乱）:
  ❌ 消息顺序混乱，AI 回复可能出现在用户消息上方

修复后

后端返回顺序（倒序）:
  1. messageOrder: 6 - AI 回复
  2. messageOrder: 5 - 用户消息
  3. messageOrder: 4 - AI 回复
  4. messageOrder: 3 - 用户消息
  5. messageOrder: 2 - AI 回复
  6. messageOrder: 1 - 用户消息

前端排序后（升序）:
  1. messageOrder: 1 - 用户消息 ✅
  2. messageOrder: 2 - AI 回复 ✅
  3. messageOrder: 3 - 用户消息 ✅
  4. messageOrder: 4 - AI 回复 ✅
  5. messageOrder: 5 - 用户消息 ✅
  6. messageOrder: 6 - AI 回复 ✅

前端展示顺序（正确）:
  ✅ 消息按照 messageOrder 正确排序

🧪 测试验证

测试脚本位置

web/src/utils/messageOrderTest.ts

运行测试

在浏览器控制台执行：

// 导入测试模块
import { runMessageOrderTests } from '@/utils/messageOrderTest'

// 运行所有测试
runMessageOrderTests()

测试内容

测试 1: 消息转换 - 检查 messageOrder 是否被保留
测试 2: 消息排序 - 检查是否按 messageOrder 排序
测试 3: 消息展示顺序 - 模拟前端展示

📁 修改文件

修改的文件

web/src/services/message.ts - 在 convertToChatMessage 方法中添加 messageOrder 字段

新增的文件

web/src/utils/messageOrderTest.ts - 消息顺序测试工具

🚀 验证步骤

本地测试
```
cd web
npm run dev
```
打开浏览器控制台
- 按 F12 打开开发者工具
- 进入 Console 标签

运行测试

import { runMessageOrderTests } from '@/utils/utils/messageOrderTest'
runMessageOrderTests()

查看测试结果
- 检查所有消息是否都有 messageOrder 字段
- 检查消息是否按 messageOrder 升序排列
- 检查前端展示顺序是否正确
实际测试
- 打开聊天页面
- 发送几条消息
- 刷新页面
- 验证历史消息顺序是否正确

✨ 关键改进

✅ messageOrder 字段保留 - 消息转换时保留 messageOrder 字段 ✅ 正确的排序逻辑 - 按 messageOrder 升序排列消息 ✅ 完整的测试覆盖 - 提供测试工具验证修复效果 ✅ 详细的日志输出 - 便于调试和问题排查

📝 总结

通过在消息转换时保留 messageOrder 字段，前端现在能够正确地按照消息顺序排序和展示消息，确保对话流程的正确性。

修复状态: ✅ 已完成 测试状态: ✅ 已验证 部署状态: 待部署

6.0 KiB Raw Blame History Unescape Escape