Files
timi-tdesign-mobile/docs/components/ai-chat-message-list.md
T
2026-09-21 16:05:14 +08:00

1.2 KiB
Raw Blame History

AiChatMessageList 消息列表

渲染对话消息,含思考过程、引用与流式光标。

基础用法

:::preview 基础用法 || 消息里的 thinkingList 与 citationList 会渲染为思考过程与引用

demo-preview=../demos/ai-chat-message-list/basic.vue

:::

何时使用

需要单独控制消息区域的布局时使用。多数情况下直接用 AiChatPanel 更省事。

消息结构

每条消息是 AiChatMessage:

字段 说明
id 唯一标识。
role "user" 或 "assistant"。
content 正文,按 Markdown 渲染。
thinkingList 思考分段,传给 AiChatThinking 展示。
citationList 引用信息。
createdAt 生成时间戳。
statusText 状态文案,如工具调用的当前步骤。
duration 本次生成耗时(毫秒)。

角色文案

roleNames 覆盖默认的「助手 / 我」,需要更复杂的逻辑时用 roleNameFormatter。

插槽

welcome、message、role-name、thinking、citation、message-status、assistant-icon、user-icon 可以替换对应区域,都带作用域参数。

API