@blueking/chat-x 0.0.43 → 0.0.45-beta.2

package/dist/mcp/generated/docs/flow-agent-node-detail.md

@@ -0,0 +1,240 @@
+<!-- AI SUMMARY -->
+## 快速了解
+
+展示 FlowAgent 节点输入、输出、异常、耗时等详情。 源码位置：src/components/chat-content/flow-agent-content/flow-agent-node-detail.vue。
+
+### 关联组件
+- **flow-agent-content** — 节点详情入口由 FlowAgentContent 挂载到自定义 Tab
+- **detail-section** — 详情页内部分段容器
+- **simple-table** — 展示输入参数、插件输出定义与结构化输出
+- **chat-container** — 应用层通过 onCustomTabChange 拉取节点详情并回填
+
+---
+<!-- FULL DOC -->
+
+# FlowAgentNodeDetail FlowAgent 节点详情
+
+> **能力域**：Agent 能力
+
+`FlowAgentNodeDetail` 用于展示 FlowAgent 单个节点的配置与输出详情。它通常被 `FlowAgentContent` 通过自定义 Tab 挂载到侧栏，应用层再根据 `messageUid`、`task_id`、`node_id` 拉取真实节点详情并回填到 `data`。
+
+组件自身只负责详情展示，不负责接口请求、Tab 生命周期或消息定位逻辑。
+
+## 源码事实
+
+- **源码位置**：`src/components/chat-content/flow-agent-content/flow-agent-node-detail.vue`
+- **能力说明**：展示 FlowAgent 节点输入、输出、异常、耗时等详情。
+
+## 核心能力
+
+- **双 Tab 展示**：内置“节点配置”和“节点输出”两个页签，默认展示“节点配置”
+- **配置详情**：展示流程模板、节点名称、步骤名称、是否可选、失败处理和超时控制
+- **参数表格**：使用 `SimpleTable` 展示输入参数、插件输出定义和结构化输出
+- **加载骨架屏**：`loading` 为 `true` 时展示标题和内容骨架，不渲染真实数据
+- **定位插槽**：提供 `locateButton` 插槽，允许侧栏注入“在对话中定位”等操作按钮
+- **值格式化**：`null` / `undefined` 显示为 `--`，对象值通过 `JSON.stringify` 转为字符串
+
+## 基础用法
+
+```vue
+<template>
+  <FlowAgentNodeDetail
+    :data="nodeDetailData"
+    :loading="false"
+    node_id="n1"
+    node_name="采集主机指标"
+    :task_id="100"
+    task_name="主机巡检流程"
+  >
+    <template #locateButton>
+      <button type="button">定位</button>
+    </template>
+  </FlowAgentNodeDetail>
+</template>
+
+<script setup lang="ts">
+  import FlowAgentNodeDetail from '@blueking/chat-x/src/components/chat-content/flow-agent-content/flow-agent-node-detail.vue';
+  import type { NodeDetailData } from '@blueking/chat-x';
+
+  const nodeDetailData: Partial<NodeDetailData> = {
+    basic_info: {
+      node_name: '采集主机指标',
+      template_name: '主机巡检流程',
+      stage_name: '巡检准备',
+      optional: false,
+      skippable: true,
+      retryable: true,
+      error_ignorable: false,
+      auto_retry: { enable: true, interval: 30, times: 2 },
+      timeout_config: { enable: true, seconds: 300, action: 'forced_fail' },
+    },
+    inputs: {
+      bk_host_id: 10001,
+      collect_items: ['cpu', 'memory', 'disk'],
+    },
+    plugin_output: [
+      {
+        key: '${cpu_usage}',
+        name: 'CPU 使用率',
+        type: 'number',
+        schema: { description: '当前主机 CPU 使用率', enum: [], type: 'number' },
+      },
+    ],
+    outputs: [{ key: 'cpu_usage', preset: false, value: 23.5 }],
+  };
+</script>
+```
+
+**渲染效果**
+
+## 加载态
+
+`loading` 为 `true` 时，组件展示骨架屏，标题中的节点名和内容区均不会读取 `data` 展示。
+
+## 空数据
+
+当输入参数、插件输出定义或结构化输出为空时，对应 `SimpleTable` 渲染 `--` 占位行。
+
+## Tab 内容
+
+| Tab        | 内容                                                         |
+| ---------- | ------------------------------------------------------------ |
+| 节点配置   | 基础信息、失败处理、超时控制、输入参数、插件输出定义         |
+| 节点输出   | 结构化输出，来自 `data.outputs`                              |
+
+`activeTab` 是组件内部状态，不通过 prop 或 expose 暴露。
+
+## 字段展示规则
+
+| 区域         | 数据来源                         | 展示规则                                      |
+| ------------ | -------------------------------- | --------------------------------------------- |
+| 流程模板     | `data.basic_info.template_name`   | 空值显示 `--`                                 |
+| 节点名称     | `data.basic_info.node_name`       | 空值显示 `--`                                 |
+| 步骤名称     | `data.basic_info.stage_name`      | 空值显示 `--`                                 |
+| 是否可选     | `data.basic_info.optional`        | `true` 显示“是”，否则显示“否”                 |
+| 失败处理     | `skippable` / `auto_retry.enable` | 支持“手动跳过”和“自动重试”；均无时显示 `--`  |
+| 超时控制     | `timeout_config`                  | 未启用时显示 `--`；`forced_fail` 显示“强制失败” |
+| 输入参数     | `data.inputs`                     | 对象条目转为 `{ key, value }` 表格            |
+| 插件输出定义 | `data.plugin_output`              | 展示名称、变量说明和 KEY                     |
+| 结构化输出   | `data.outputs`                    | 展示输出 key 与格式化后的 value              |
+
+## 自定义 Tab 联动
+
+`FlowAgentContent` 点击节点“详情”时，会将本组件挂载到自定义 Tab，并先传入 `loading: true` 和节点定位参数：
+
+```typescript
+addCustomTab?.({
+  label: node.name,
+  name: `${task.task_id}|${node.id}|${node.name}`,
+  data: {
+    component: BkFlowNodeDetail,
+    messageUid: props.messageUid,
+    props: {
+      loading: true,
+      node_id: node.id,
+      node_name: node.name,
+      task_id: task.task_id,
+      task_name: task.task_name,
+      data: {},
+    },
+  },
+});
+```
+
+应用层通常在 `ChatContainer` 的 `onCustomTabChange` 中读取这些参数，请求节点详情后返回新的 `props.data` 和 `props.loading`。
+
+## API
+
+### Props
+
+| 属性名    | 类型                       | 必填 | 默认值 | 说明                         |
+| --------- | -------------------------- | ---- | ------ | ---------------------------- |
+| data      | `Partial<NodeDetailData>`  | 是   | —      | 节点详情数据                 |
+| loading   | `boolean`                  | 否   | —      | 是否显示骨架屏               |
+| node_id   | `string`                   | 否   | —      | 节点 ID，来自自定义 Tab 参数 |
+| node_name | `string`                   | 否   | —      | 节点名称                     |
+| task_id   | `number`                   | 否   | —      | 任务 ID                      |
+| task_name | `string`                   | 否   | —      | 任务名称                     |
+
+> Props 类型来自 `CustomBkFlowTabData['props'] & { data: Partial<NodeDetailData> }`。
+
+### Emits
+
+- 无。
+
+### Slots
+
+| 插槽名       | 说明                         |
+| ------------ | ---------------------------- |
+| locateButton | 标题栏右侧操作区，如定位按钮 |
+
+### Expose
+
+- 无。
+
+## 类型定义
+
+```typescript
+export type CustomBkFlowTabData = CustomTabData<{
+  data?: Partial<NodeDetailData>;
+  loading?: boolean;
+  node_id?: string;
+  node_name?: string;
+  task_id?: number;
+  task_name?: string;
+}>;
+
+export interface NodeDetailData {
+  inputs: Record<string, unknown>;
+  node_id: string;
+  task_id: number;
+  basic_info: {
+    auto_retry: {
+      enable: boolean;
+      interval: number;
+      times: number;
+    };
+    error_ignorable: boolean;
+    node_name: string;
+    optional: boolean;
+    retryable: boolean;
+    skippable: boolean;
+    stage_name: string;
+    template_name: string;
+    timeout_config: {
+      action: string;
+      enable: boolean;
+      seconds: number;
+    };
+  };
+  outputs: Array<{
+    key: string;
+    preset: boolean;
+    value: unknown;
+  }>;
+  plugin_output: Array<{
+    key: string;
+    name: string;
+    schema: {
+      description: string;
+      enum: unknown[];
+      properties?: Record<string, unknown>;
+      type: string;
+    };
+    type: string;
+  }>;
+}
+```
+
+## 使用建议
+
+- 优先由 [FlowAgentContent](./flow-agent-content.md) 通过自定义 Tab 挂载，不建议业务组件手动拼装 Tab 生命周期。
+- 接口请求与数据回填应放在应用层 `ChatContainer` 的 `onCustomTabChange` 链路中处理。
+- `data` 可传 `Partial<NodeDetailData>`，但真实展示依赖 `basic_info`、`inputs`、`plugin_output`、`outputs` 等字段；缺字段时对应区域会降级为空表格或 `--`。
+
+## 关联组件
+
+- [FlowAgentContent](./flow-agent-content.md) — 节点详情入口。
+- [DetailSection](./detail-section.md) — 详情分段容器。
+- [SimpleTable](./simple-table.md) — 详情表格。
+- [ChatContainer](../setup/chat-container.md) — 自定义 Tab 数据回填入口。

package/dist/mcp/generated/docs/highlight-keyword.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-HighlightKeyword 为函数式组件，从 inject 读取关键词并将匹配片段包在带样式 span 中，用于对话内搜索与列表过滤高亮。 ToolcallRender、DescPanel、FlowAgent 等场景组合使用。
+根据注入关键词高亮文本片段。 源码位置：src/components/highlight-keyword/highlight-keyword.ts。
 
 ### 关联组件
 - **toolcall-render** — 工具调用标题与状态文案高亮
@@ -12,8 +12,13 @@ HighlightKeyword 为函数式组件，从 inject 读取关键词并将匹配片
 <!-- FULL DOC -->
 
 # HighlightKeyword 关键词高亮
+## 源码事实
 
-> **层级**：原子组件 · **功能域**：辅助组件
+- **源码位置**：`src/components/highlight-keyword/highlight-keyword.ts`
+- **能力域**：辅助能力
+- **能力说明**：根据注入关键词高亮文本片段。
+
+> **能力域**：辅助能力
 
 函数式组件，用于在文本中高亮匹配的搜索关键词。通过 `useKeywordInject` 从上层注入关键词，自动将匹配部分包裹在带高亮样式的 `<span>` 中。
 
@@ -139,6 +144,6 @@ const { keywordMatched } = useKeywordMatch(() => [props.title, props.description
 
 ## 关联组件
 
-- [ToolcallRender](../molecular/toolcall-render.md) — 工具调用头部高亮
-- [DescPanel](./desc-panel.md) — 详情面板键值高亮
-- [ExecutionSummary](../molecular/execution-summary.md) — 执行摘要搜索
+- [ToolcallRender](/components/agent/toolcall-render) — 工具调用头部高亮
+- [DescPanel](/components/rendering/desc-panel) — 详情面板键值高亮
+- [ExecutionSummary](/components/agent/execution-summary) — 执行摘要搜索

package/dist/mcp/generated/docs/image-content.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-ImageContent 在 Markdown 解析到图片 token 时渲染，对流式拼接中的 URL 做防抖与预加载，并用模块级缓存避免重复闪烁。 三态展示加载中、成功与失败，通常由 MarkdownContent 自动挂载而非业务直接引用。
+渲染 Markdown 图片 token。 源码位置：src/components/markdown-token/image-content/image-content.vue。
 
 ### 关联组件
 - **markdown-content** — 解析图片 token 后挂载本组件
@@ -10,10 +10,15 @@ ImageContent 在 Markdown 解析到图片 token 时渲染，对流式拼接中
 <!-- FULL DOC -->
 
 # ImageContent 图片渲染
+## 源码事实
 
-> **层级**：原子组件 · **功能域**：文件与图片
+- **源码位置**：`src/components/markdown-token/image-content/image-content.vue`
+- **能力域**：媒体文件
+- **能力说明**：渲染 Markdown 图片 token。
 
-Markdown Token 层的图片渲染原子组件，被 `MarkdownContent` 在解析到图片 token 时自动调用，通常无需手动引入。
+> **能力域**：媒体文件
+
+Markdown Token 层的图片渲染基础组件，被 `MarkdownContent` 在解析到图片 token 时自动调用，通常无需手动引入。
 
 核心能力：**流式 URL 防闪烁**（debounce 稳定判断 + throttle 预加载）、**全局缓存**（模块级 `Set` 跨实例共享）、**三态渲染**（加载中 / 成功 / 失败）。
 
@@ -175,4 +180,4 @@ URL = 完整 URL       → isValidUrl=true   → throttle 触发 preloadImage
 
 ## 关联组件
 
-- [MarkdownContent](./markdown-content.md) — 图片 token 渲染入口
+- [MarkdownContent](/components/rendering/markdown-content) — 图片 token 渲染入口

package/dist/mcp/generated/docs/image-preview-group.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-ImagePreviewGroup 通过 provide/inject 与子级 symbol 注册表管理多个 AiImage，点击任一子图时聚合已注册图片并打开内置全屏预览。 解决同屏多缩略图统一多图浏览与索引切换的需求。
+通过 provide/inject 管理同组图片预览。 源码位置：src/components/image-preview/image-preview-group.vue。
 
 ### 关联组件
 - **ai-image** — 子级注册并参与多图预览集合
@@ -11,8 +11,13 @@ ImagePreviewGroup 通过 provide/inject 与子级 symbol 注册表管理多个 A
 <!-- FULL DOC -->
 
 # ImagePreviewGroup 图片预览组
+## 源码事实
 
-> **层级**：分子组件 · **功能域**：文件与图片
+- **源码位置**：`src/components/image-preview/image-preview-group.vue`
+- **能力域**：媒体文件
+- **能力说明**：通过 provide/inject 管理同组图片预览。
+
+> **能力域**：媒体文件
 
 多图预览管理容器。通过 `provide/inject` + `Map<symbol>` 模式管理子级 `AiImage` 的注册与预览状态，点击任意子图片时自动收集所有已注册图片并打开多图预览。
 
@@ -177,5 +182,5 @@ const IMAGE_PREVIEW_GROUP_KEY: InjectionKey<ImagePreviewGroupContext>;
 
 ## 关联组件
 
-- [AiImage](../atomic/ai-image.md) — 子级缩略图与注册
-- [ImagePreview](./image-preview.md) — 内置全屏预览
+- [AiImage](/components/medias/ai-image) — 子级缩略图与注册
+- [ImagePreview](/components/medias/image-preview) — 内置全屏预览

package/dist/mcp/generated/docs/image-preview.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-ImagePreview 通过 Teleport 提供全屏图片预览，支持缩放、旋转、拖拽、下载、键盘与多图切换。 数据源可为 URL 字符串、ImageItem 或 File（自动 ObjectURL 并在关闭时回收）。 通常由 AiImage、ImagePreviewGroup、FileContent 等触发，业务较少直接单独挂载。
+图片全屏预览容器，支持缩放、旋转、下载工具栏。 源码位置：src/components/image-preview/image-preview.vue。
 
 ### 关联组件
 - **ai-image** — 独立模式下由 AiImage 打开预览
@@ -12,8 +12,13 @@ ImagePreview 通过 Teleport 提供全屏图片预览，支持缩放、旋转、
 <!-- FULL DOC -->
 
 # ImagePreview 图片预览
+## 源码事实
 
-> **层级**：分子组件 · **功能域**：文件与图片
+- **源码位置**：`src/components/image-preview/image-preview.vue`
+- **能力域**：媒体文件
+- **能力说明**：图片全屏预览容器，支持缩放、旋转、下载工具栏。
+
+> **能力域**：媒体文件
 
 全屏图片预览组件，通过 `Teleport` 渲染到 `body`，支持缩放、旋转、拖拽、下载、键盘导航等功能。`images` 支持传入 URL 字符串、`ImageItem` 对象或 `File` 对象，File 对象会自动通过 `URL.createObjectURL` 生成预览并在关闭/卸载时回收。通常不直接使用，而是配合 `AiImage`、`ImagePreviewGroup` 或 `FileContent` 自动触发。
 
@@ -219,6 +224,6 @@ type ImageLoadingStatus = 'loading' | 'loaded' | 'error';
 
 ## 关联组件
 
-- [AiImage](../atomic/ai-image.md) — 独立模式触发预览
-- [ImagePreviewGroup](./image-preview-group.md) — 多图预览容器
-- [FileContent](./file-content.md) — 附件列表点击预览
+- [AiImage](/components/medias/ai-image) — 独立模式触发预览
+- [ImagePreviewGroup](/components/medias/image-preview-group) — 多图预览容器
+- [FileContent](/components/medias/file-content) — 附件列表点击预览

package/dist/mcp/generated/docs/info-message.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-InfoMessage 以居中虚线分隔条展示系统提示、会话重置、时间戳等非对话信息；content 可为字符串或字符串数组。 由 MessageRender 在 info 角色下渲染，不承载用户与助手轮次内容。
+渲染居中的系统信息提示。 源码位置：src/components/chat-message/info-message/info-message.vue。
 
 ### 关联组件
 - **message-render** — 由 MessageRender 在 role 为 info 时创建
@@ -11,8 +11,13 @@ InfoMessage 以居中虚线分隔条展示系统提示、会话重置、时间
 <!-- FULL DOC -->
 
 # InfoMessage 信息消息
+## 源码事实
 
-> **层级**：分子组件 · **功能域**：消息展示
+- **源码位置**：`src/components/chat-message/info-message/info-message.vue`
+- **能力域**：消息系统
+- **能力说明**：渲染居中的系统信息提示。
+
+> **能力域**：消息系统
 
 系统信息分隔组件，在聊天消息列表中以**居中虚线分隔条**的形式展示非对话类信息（会话重置、时间节点、状态变更等）。
 

package/dist/mcp/generated/docs/input-attachment.md

@@ -0,0 +1,43 @@
+<!-- AI SUMMARY -->
+## 快速了解
+
+ChatInput 底部附件区布局，承载快捷按钮、文件与发送图标。 源码位置：src/components/chat-input/input-attachment/input-attachment.vue。
+
+---
+<!-- FULL DOC -->
+
+# InputAttachment 输入附件区
+
+> **能力域**：输入交互
+
+## 源码事实
+
+- **源码位置**：`src/components/chat-input/input-attachment/input-attachment.vue`
+- **能力说明**：ChatInput 底部附件区布局，承载快捷按钮、文件与发送图标。
+
+## API 摘要
+
+### Props
+
+- `{ messageState?: MessageStatus; sendDisabledTip?: string; tippyOptions?: AITippyProps; }`
+
+### Emits
+
+- `{ (e: 'sendMessage'): void; (e: 'stopSending'): void; }`
+
+### Slots
+
+- `default`
+- `send-icon`
+
+### Expose
+
+- 无。
+
+## 组件依赖
+
+- 无组件依赖或仅依赖基础库。
+
+## 使用建议
+
+- 优先通过上层组合组件使用；直接使用前请确认 props 数据结构来自对应类型定义。

package/dist/mcp/generated/docs/input-info-alert.md

@@ -0,0 +1,42 @@
+<!-- AI SUMMARY -->
+## 快速了解
+
+ChatInput 上方的信息提示条。 源码位置：src/components/chat-input/input-info-alert.vue。
+
+---
+<!-- FULL DOC -->
+
+# InputInfoAlert 输入提示条
+
+> **能力域**：输入交互
+
+## 源码事实
+
+- **源码位置**：`src/components/chat-input/input-info-alert.vue`
+- **能力说明**：ChatInput 上方的信息提示条。
+
+## API 摘要
+
+### Props
+
+- `{ content: string; }`
+
+### Emits
+
+- 无。
+
+### Slots
+
+- 无。
+
+### Expose
+
+- 无。
+
+## 组件依赖
+
+- 无组件依赖或仅依赖基础库。
+
+## 使用建议
+
+- 优先通过上层组合组件使用；直接使用前请确认 props 数据结构来自对应类型定义。

package/dist/mcp/generated/docs/interrupt-message.md

@@ -0,0 +1,204 @@
+<!-- AI SUMMARY -->
+## 快速了解
+
+渲染 human-in-the-loop 中断消息，分发工具审批，并回显用户问题回答结果。 源码位置：src/components/chat-message/interrupt-message/interrupt-message.vue。
+
+### 关联组件
+- **message-render** — role 为 interrupt 时渲染本组件
+- **user-question-card** — UserQuestion 待回答面板与回答回显
+- **tool-approval-card** — AIDevToolApproval 专用子卡片
+- **message-container** — 透传 onInterruptResume；末条为 interrupt 时不触发组 hover
+
+---
+<!-- FULL DOC -->
+
+# InterruptMessage 中断消息
+## 源码事实
+
+- **源码位置**：`src/components/chat-message/interrupt-message/interrupt-message.vue`
+- **能力域**：Agent 能力
+- **能力说明**：渲染 human-in-the-loop 中断消息，分发工具审批，并回显用户问题回答结果。
+
+> **能力域**：Agent 能力
+
+human-in-the-loop 中断消息渲染器（导出名 **`InterruptMessageRender`**）。对应 `MessageRole.Interrupt`，解析 `content.outcome` 渲染审批卡片或兜底提示。
+
+> 通常由 [MessageRender](/components/message/message-render) 自动调用，无需业务侧直接引入。
+> `UserQuestion` 的待回答卡片由 [ChatContainer](/components/setup/chat-container) 放在输入区上方，本组件只负责 success 后的会话内回答回显。
+
+## 渲染架构
+
+```
+InterruptMessageRender
+├── content.message（可选）→ 顶部说明文案
+└── content.outcome.type === 'interrupt'
+      └── v-for interrupts
+            ├── reason === aidev:tool_approval → ToolApprovalCard（透传 onInterruptResume，用于取消审批）
+            ├── reason === aidev:user_question → 不在消息内渲染，交由 ChatContainer 输入区挂载
+            └── 未注册 reason → 兜底块（item.message 或「暂不支持的中断消息」）
+
+content.outcome.type === 'success'
+└── result.reason === aidev:user_question → UserQuestionAnsweredCard 回显回答（支持 #answeredQuestion 透传 #answer）
+```
+
+| `InterruptReason`              | 子组件              |
+| ------------------------------ | ------------------- |
+| `aidev:tool_approval`          | `ToolApprovalCard`  |
+| `aidev:user_question`（待回答） | 输入区 `UserQuestionCard`，本组件不渲染 |
+| `aidev:user_question`（已回答） | `UserQuestionAnsweredCard` |
+| 其他 / 未注册                  | 兜底文案区域        |
+
+## 基础用法（待审批）
+
+```vue
+<template>
+  <InterruptMessageRender
+    :id="message.id"
+    :message-id="message.messageId"
+    :role="message.role"
+    :status="message.status"
+    :content="message.content"
+    :on-interrupt-resume="handleInterruptResume"
+  />
+</template>
+
+<script setup lang="ts">
+  import {
+    InterruptMessageRender,
+    APPROVAL_STATUS,
+    InterruptReason,
+    MessageRole,
+    MessageStatus,
+    type InterruptMessage,
+  } from '@blueking/chat-x';
+
+  const message: InterruptMessage = {
+    id: 'msg_interrupt',
+    messageId: 'msg_interrupt',
+    role: MessageRole.Interrupt,
+    status: MessageStatus.Pending,
+    content: {
+      message: '算法方案评审单需要您关注',
+      outcome: {
+        type: 'interrupt',
+        interrupts: [
+          {
+            id: 'interrupt_1',
+            reason: InterruptReason.AIDevToolApproval,
+            toolCallId: 'tool_call_1',
+            metadata: {
+              ticket: {
+                approvers: ['张三'],
+                sn: 'REV-2026-04-24-001',
+                status: APPROVAL_STATUS.PENDING,
+                submit_time: '2026-04-24 14:30:15',
+                title: '算法方案评审单',
+                url: 'https://example.com/tickets/001',
+              },
+            },
+          },
+        ],
+      },
+    },
+  };
+
+  const handleInterruptResume = async (payload, interrupt) => {
+    // ToolApprovalCard 点击「取消审批」时，payload 为 { action: 'cancel' }
+    console.log(payload, interrupt.id);
+  };
+</script>
+```
+
+**渲染效果**
+
+## UserQuestion 待回答
+
+待回答的 `UserQuestion` 不在消息内渲染；`ChatContainer` 会找到最近一条待回答中断，并在 `ChatInput` 上方挂载 [UserQuestionCard](/components/agent/user-question-card)。
+
+```vue
+<InterruptMessageRender
+  :content="userQuestionMessage.content"
+  role="interrupt"
+/>
+```
+
+**渲染效果**
+
+## UserQuestion 已回答回显（outcome.success）
+
+`outcome.type === 'success'` 且 `result.reason === InterruptReason.UserQuestion` 时，会话内回显用户回答。可通过 `#answeredQuestion` slot 自定义单题回显：
+
+```vue
+<InterruptMessageRender
+  :content="userQuestionAnsweredMessage.content"
+  role="interrupt"
+>
+  <template #answeredQuestion="{ item, index, status }">
+    <MyCustomAnswerView :data="item" :index="index" :status="status" />
+  </template>
+</InterruptMessageRender>
+```
+
+**渲染效果**
+
+## 其他已 resume（outcome.success）
+
+非 `UserQuestion` 的 success 态不渲染中断卡片，仅保留可选顶部 `content.message`：
+
+## 不支持的中断类型（兜底）
+
+```vue
+<InterruptMessageRender :content="unsupportedContent" role="interrupt" />
+```
+
+**渲染效果**
+
+## 在 MessageContainer 中使用
+
+配置 `onInterruptResume`，由容器经 `MessageRender` 透传到本组件：
+
+```vue
+<MessageContainer
+  :messages="messages"
+  :on-interrupt-resume="handleInterruptResume"
+/>
+```
+
+当消息组**最后一条**为 `role: 'interrupt'` 时，容器**不会**在鼠标移入时设置 `isHover`，避免误显 AI 工具栏遮挡审批卡片。
+
+## API
+
+### Props
+
+继承 `Partial<InterruptMessage>` 的字段（`id`、`messageId`、`role`、`content`、`status` 等），并额外支持：
+
+| 属性名            | 类型               | 默认值 | 说明                                      |
+| ----------------- | ------------------ | ------ | ----------------------------------------- |
+| content           | `InterruptMessage['content']` | — | 含 `message`、`outcome`、`result` 等      |
+| onInterruptResume | `OnInterruptResume` | —     | 用户完成中断操作后的回调（可选）          |
+
+### Slots
+
+| 插槽名           | 参数                                              | 说明                                                                 |
+| ---------------- | ------------------------------------------------- | -------------------------------------------------------------------- |
+| answeredQuestion | `{ item, index, status }`                         | 自定义 UserQuestion 已回答内容回显，透传给 `UserQuestionAnsweredCard` 的 `#answer` |
+
+slot 参数与 [UserQuestionAnsweredCard](/components/agent/user-question-answered-card) 的 `#answer` 一致。
+
+### Events / Expose
+
+无。
+
+## 类型定义
+
+```typescript
+import type { Interrupt, InterruptMessage, OnInterruptResume } from '@blueking/chat-x';
+```
+
+详见 [中断类型 Interrupt](../../types/interrupt.md)。
+
+## 关联组件
+
+- [ToolApprovalCard](/components/agent/tool-approval-card) — AI Dev 审批单卡片
+- [MessageRender](/components/message/message-render) — 按 `role` 派发
+- [MessageContainer](/components/setup/message-container) — 列表容器与 `onInterruptResume` 透传