1.2 KiB
1.2 KiB
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 可以替换对应区域,都带作用域参数。