Browse Source

fix(chat): 修复 ChatList 消息显示为骨架屏的问题

ChatList 内部会把任何 truthy 的 status 强制重写为 "pending",
导致所有历史消息都显示为骨架屏。移除 chatAdapter 中的 status 字段,
由 ChatPanel.vue 的 #content slot 自行控制流式/错误态渲染。
pull/3/head
wanghanlin 2 months ago
parent
commit
953a3c96ab
  1. 14
      frontend/src/utils/chatAdapter.ts

14
frontend/src/utils/chatAdapter.ts

@ -1,8 +1,9 @@
/**
* 将项目内部 ChatMessage 模型适配为 @tdesign-vue-next/chat 的 ChatItemMeta 数据格式
*
* ChatList 内部用 ChatMessage 组件渲染每条消息,读取字段:role / name / datetime / avatar / content / status。
* 我们使用 #content slot 完全接管内容渲染,因此 content 字段只作为类型占位;实际渲染交给 ChatPanel.vue 中的 slot。
* ChatList 内部用 ChatMessage 组件渲染每条消息,读取字段:role / name / datetime / avatar / content。
* 注意:ChatList 源码会把任何 truthy 的 status 都重写成 "pending" 导致显示骨架,因此我们不传 status,
* 由 ChatPanel.vue 的 #content slot 完全接管内容渲染(包括流式/错误态)。
*/
import type { TdChatItemMeta, AIMessageContent, UserMessageContent } from '@tdesign-vue-next/chat'
@ -20,13 +21,6 @@ export interface ChatMessage {
feedback?: string | null
}
/** 判断消息状态 */
function getStatus(msg: ChatMessage): 'pending' | 'streaming' | 'complete' | 'stop' | 'error' {
if (msg.error) return 'error'
if (msg.streaming) return 'streaming'
return 'complete'
}
/** 转换单条消息 */
export function toChatItemMeta(msg: ChatMessage): TdChatItemMeta {
const isUser = msg.role === 'user'
@ -38,7 +32,7 @@ export function toChatItemMeta(msg: ChatMessage): TdChatItemMeta {
content: isUser
? ([{ type: 'text', data: msg.content || '' }] as UserMessageContent[])
: ([{ type: 'markdown', data: msg.content || '' }] as AIMessageContent[]),
status: getStatus(msg),
// 故意不传 status:ChatList 会把 truthy status 强制改为 pending,显示骨架屏
}
}

Loading…
Cancel
Save