## 快速了解
渲染助手消息主体、工具调用与文件内容，默认插槽可覆盖正文渲染。 源码位置：src/components/chat-message/assistant-message/assistant-message.vue。
### 关联组件
- **message-render** — 由 MessageRender 在 role 为 assistant 时创建
- **tool-message** — 工具结果通过 toolCall.toolMessage 内联或独立 tool 消息关联展示
- **toolcall-render** — 多条工具调用由 ToolcallRender 统一渲染
---
# AssistantMessage AI 助手消息
## 源码事实
- **源码位置**：`src/components/chat-message/assistant-message/assistant-message.vue`
- **能力域**：消息系统
- **能力说明**：渲染助手消息主体、工具调用与文件内容，默认插槽可覆盖正文渲染。
> **能力域**：消息系统
AI 助手消息展示组件，负责渲染 AI 回复的文本内容和工具调用（Tool Calls）结果。
## 渲染管线
```
AssistantMessage（根类名：ai-assistant-message）
├── ai-assistant-message-content（内容区）
│ └── [default slot] 或 ContentRender → MarkdownContent（Markdown 渲染）
└── ToolCallRender × N（每个 toolCall 独立渲染，不受 slot 影响）
```
- **内容区**：`content` 字符串传入 `ContentRender`，内部固定使用 `MessageContentType.Text` 类型，最终由 `MarkdownContent` 渲染 Markdown
- **工具调用区**：`toolCalls` 数组中每一项渲染一个 `ToolCallRender`，位于内容区**下方**，与 slot 无关
## 基础用法
```vue
```
**渲染效果**
## Markdown 内容渲染
`content` 支持 Markdown 格式，组件内部通过 `MarkdownContent` 自动渲染标题、列表、代码块、链接等：
```vue
```
**渲染效果**
## 消息状态
`status` 影响两处渲染：**内容区**和**工具调用状态标题**。
| `status` | 内容区效果 | ToolCallRender 标题 |
| ----------- | ----------------------------------- | ------------------- |
| `pending` | 正常渲染（通常 content 为空） | Loading + "调用中" |
| `streaming` | Markdown 自动补全未闭合语法 | Loading + "调用中" |
| `complete` | 正常渲染完整 Markdown | "调用成功" + 耗时 |
| `error` | 红色错误图标 + content 作为错误提示 | "调用失败" |
| `stop` | 正常渲染（内容停留在中止时的状态） | "调用成功" |
### Pending
### Streaming
流式输出中，`MarkdownContent` 自动补全未闭合的 Markdown 语法（代码块、列表等），适合逐字/逐段追加内容：
### Complete
### Error
渲染为错误信息样式（红色错误图标），`content` 作为错误提示文案展示：
### Stop
用户手动中止生成，内容停留在中止时的状态，与 `complete` 表现相同：
## 工具调用
当 AI 回复中包含工具调用时，传入 `toolCalls` 数组，每项自动渲染为 `ToolCallRender`，位于内容区下方。`status` 会同步传递给每个 `ToolCallRender` 以反映调用状态。
### 单个工具调用
```vue
```
**渲染效果**
### 多个工具调用
AI 可在一次回复中发起多个工具调用，组件依次渲染：
```vue
```
**渲染效果**
### MCP 工具调用
`function.mcpName` 标识 MCP 服务名称，`ToolCallRender` 的标题会显示为「调用 MCP：{mcpName} / {name}」：
```vue
```
**渲染效果**
### 携带执行结果
`toolMessage` 字段包含工具的执行结果；`ToolCallRender` 会展示返回内容（JSON 自动解析为键值对）和执行耗时：
```vue
```
**渲染效果**（点击展开箭头可查看返回结果）
### 工具调用失败
`toolMessage.error` 不为空时，`ToolCallRender` 显示错误信息：
```vue
```
**渲染效果**
### 工具调用状态随消息状态变化
`ToolCallRender` 的状态标题直接来自 `AssistantMessage` 的 `status` prop：
**调用中**（`status = "streaming"`）：
**调用成功**（`status = "complete"` + `toolMessage`）：
## 自定义内容渲染
默认插槽替换**内容区**的渲染（即 `ContentRender` 部分），工具调用仍在内容区外独立渲染，不受插槽影响：
```
[自定义 slot 内容] ← 替换 ai-assistant-message-content 内默认渲染
[ToolCallRender] ← 不受影响，仍正常渲染
[ToolCallRender]
```
```vue
🤖 {{ content }}
```
> **注意**：使用默认插槽后，内置的 `MarkdownContent`（Markdown 渲染）被替换，需要自行处理内容格式化。
**渲染效果**
## 在 MessageContainer 中使用
`AssistantMessage` 通常不需要单独引入，`MessageContainer` 会对 `role: 'assistant'` 的消息自动渲染：
```vue
```
## API
### Props
组件 Props 来自 `Partial`（所有字段均可选）：
| 属性名 | 类型 | 说明 |
| --------- | ----------------------- | -------------------------------------------------------------- |
| content | `string` | AI 回复的文本内容，支持 Markdown，`undefined` 时渲染为空字符串 |
| status | `MessageStatus` | 消息状态，影响 Markdown 渲染模式和 ToolCallRender 的状态标题 |
| toolCalls | `ToolCall[]` | 工具调用列表，每项渲染一个 `ToolCallRender` |
| id | `number \| string` | 消息 ID |
| messageId | `number \| string` | 消息唯一标识 |
| name | `string` | 消息发送者名称（可选） |
| role | `MessageRole.Assistant` | 消息角色，固定为 `'assistant'` |
| property | `object` | 消息附加属性，本组件不使用，由父组件（`MessageContainer`）消费 |
### Slots
| 插槽名 | 参数 | 说明 |
| ------- | --------------------- | ---------------------------------------------------- |
| default | `{ content: string }` | 替换内容区渲染，toolCalls 在内容区外独立渲染不受影响 |
## 类型定义
```typescript
import type { AssistantMessage, ToolCall, FunctionCall, ToolMessage } from '@blueking/chat-x';
interface AssistantMessage extends BaseMessage {
toolCalls?: ToolCall[];
}
// 工具调用
type ToolCall = {
id: string;
type: MessageContentType.Function; // 固定为 'function'
function: FunctionCall;
toolMessage?: Partial; // 工具执行结果（可选）
};
// 函数调用信息
type FunctionCall = {
name: string; // 函数名
arguments: string; // JSON 字符串格式的参数
description?: string; // 函数描述
mcpName?: string; // MCP 服务名（存在时标题显示 "调用 MCP"）
};
// 工具执行结果
interface ToolMessage extends BaseMessage {
toolCallId: string; // 对应的 ToolCall.id
duration: number; // 执行耗时（ms）
error?: string; // 错误信息（存在时 ToolCallRender 显示失败状态）
}
```
## 使用场景
- **文本消息展示**：聊天界面渲染 AI 回复的 Markdown 文本
- **工具调用过程展示**：展示 Function Call / MCP 调用的参数、状态和返回结果
- **流式输出**：`streaming` 状态下 Markdown 自动补全未闭合语法，配合流式响应实时更新
- **自动渲染**：通过 `MessageContainer` 对 `role: 'assistant'` 消息自动处理，无需手动引入
- **自定义内容渲染**：通过默认插槽替换内置 Markdown 渲染器，保留工具调用渲染
## 关联组件
- [MessageRender](/components/message/message-render) — assistant 角色由其实例化
- [ToolMessage](/components/message/tool-message) — 工具执行结果可通过 toolCall.toolMessage 内联
- [ToolcallRender](/components/agent/toolcall-render) — 工具调用列表渲染