# AiChatMessageList 消息列表

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

## 基础用法

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

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

:::

## 何时使用

需要单独控制消息区域的布局时使用。多数情况下直接用 [AiChatPanel](/components/ai-chat-panel) 更省事。

## 消息结构

每条消息是 `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

<api-table name="AiChatMessageList" />