@blueking/chat-x 0.0.51 → 0.0.52-dev.1

package/skills/blueking-chat-x/references/components/info-message.md

@@ -0,0 +1,144 @@
+# InfoMessage 信息消息
+
+> 能力域：消息系统 ｜ 未从包入口导出：内部组件（入口的同名导出是 TS 类型，不是组件） ｜ since 0.0.20
+
+渲染居中的系统信息提示。 源码位置：src/components/chat-message/info-message/info-message.vue。
+
+**关联**：message-render（由 MessageRender 在 role 为 info 时创建）、message-container（嵌入消息列表时由 MessageContainer 统一布局与滚动）
+
+---
+
+# InfoMessage 信息消息
+
+## 源码事实
+
+- **源码位置**：`src/components/chat-message/info-message/info-message.vue`
+- **能力域**：消息系统
+- **能力说明**：渲染居中的系统信息提示。
+
+> **导出说明**：`InfoMessage` **未**从包入口导出（入口同名是 TS interface）。消费方经 `MessageRender` / `MessageContainer` 使用。下文 `InfoMessageComp` 为文档站内部示例。
+
+系统信息分隔组件，在聊天消息列表中以**左右虚线夹中文案**的形式展示非对话类信息（会话重置、时间节点、状态变更等）。
+
+## 视觉原理
+
+根节点 `.ai-info-message` 为横向 flex：两侧通过 `::before` / `::after` 拉伸出虚线（主题边框色），中间 `.ai-info-message-body` 承载文案（主题次要文案色）。整块正常占位，避免旧实现 `height: 0` 导致内容被裁切遮挡：
+
+```
+─────── 以下是新的对话 ───────
+```
+
+多行时，多条 `.ai-info-message-content` 在 body 内纵向排列（`gap: 4px`），两侧虚线仍夹住整块文案区域。
+## 基础用法
+
+`content` 传入字符串，渲染单行分隔信息：
+
+```vue
+<template>
+  <MessageRender :message="message" />
+</template>
+
+<script setup lang="ts">
+  import { MessageRender, MessageRole, MessageStatus } from '@blueking/chat-x';
+
+  const message = {
+    id: '1',
+    messageId: '1',
+    role: MessageRole.Info,
+    content: '以下是新的对话',
+    status: MessageStatus.Complete,
+  };
+</script>
+```
+
+**渲染效果**
+
+## 多行信息
+
+`content` 传入字符串数组时，每个元素渲染为一行居中文案，在中间 body 内纵向排列，两侧虚线夹住整块区域：
+
+```vue
+<template>
+  <MessageRender :message="message" />
+</template>
+
+<script setup lang="ts">
+  import { MessageRender, MessageRole, MessageStatus } from '@blueking/chat-x';
+
+  // 运行时 content 兼容 string[]（TS 类型声明多为 string）
+  const message = {
+    id: '1',
+    messageId: '1',
+    role: MessageRole.Info,
+    content: ['会话已重置', '以下是新的对话'],
+    status: MessageStatus.Complete,
+  };
+</script>
+```
+
+**渲染效果**
+
+## 典型使用场景
+
+**会话分隔**
+
+**时间节点**
+
+**上下文清除**
+
+## 在 MessageContainer 中使用
+
+`InfoMessage` 通常不需要单独引入，`MessageContainer`（或 `MessageRender`）会对 `role: 'info'` 的消息自动渲染：
+
+```vue
+<template>
+  <MessageContainer :messages="messages" />
+</template>
+
+<script setup lang="ts">
+  import { MessageContainer, MessageRole, MessageStatus } from '@blueking/chat-x';
+
+  const messages = [
+    {
+      id: '1',
+      messageId: '1',
+      role: MessageRole.User,
+      content: '请帮我分析一下这份报告。',
+      status: MessageStatus.Complete,
+    },
+    // info 消息：role 为 'info'，content 为字符串
+    {
+      id: '2',
+      messageId: '2',
+      role: MessageRole.Info, // 'info'
+      content: '上下文已达上限，已自动清除历史对话',
+      status: MessageStatus.Complete,
+    },
+    {
+      id: '3',
+      messageId: '3',
+      role: MessageRole.Assistant,
+      content: '好的，我来帮你分析这份报告...',
+      status: MessageStatus.Complete,
+    },
+  ];
+</script>
+```
+
+## API
+
+### Props
+
+组件 Props 继承自 `Partial<InfoMessage>`，所有字段均可选：
+
+| 属性名    | 类型                 | 说明                                                               |
+| --------- | -------------------- | ------------------------------------------------------------------ |
+| content   | `string \| string[]` | 信息内容。字符串渲染单行；数组在中间区域纵向多行展示，两侧虚线夹住整块 |
+| id        | `number \| string`   | 消息 ID（接收但不使用，由 MessageContainer 管理）                  |
+| messageId | `number \| string`   | 消息唯一标识（接收但不使用）                                       |
+| status    | `MessageStatus`      | 消息状态（接收但不使用，组件无状态相关渲染逻辑）                   |
+| role      | `MessageRole.Info`   | 消息角色，固定为 `'info'`                                          |
+
+> **说明**：`content` 的 TypeScript 类型定义为 `string`（与 `BaseMessage` 泛型一致），但组件模板内部通过 `Array.isArray(content) ? content : [content]` 实际兼容字符串数组。
+
+## 安全性

package/skills/blueking-chat-x/references/components/input-attachment.md

@@ -0,0 +1,49 @@
+# InputAttachment 输入附件区
+
+> 能力域：输入交互 ｜ 未从包入口导出：内部组件，请通过上层组件使用 ｜ since 1.0.0
+
+ChatInput 底部附件区布局，承载快捷按钮、文件与发送图标。 源码位置：src/components/chat-input/input-attachment/input-attachment.vue。
+
+---
+
+# InputAttachment 输入附件区
+
+> **能力域**：输入交互
+
+## 源码事实
+
+- **源码位置**：`src/components/chat-input/input-attachment/input-attachment.vue`
+- **能力说明**：ChatInput 底部附件区布局，承载快捷按钮、文件与发送图标。
+- **交互说明**：
+  - `sendMessage` 点击绑定在 `.send-message-icon` 容器上（覆盖图标与按钮空白区域），而非仅绑定在 `SendMessageIcon` 上。
+  - `Streaming` / `Pending` / `Fetching` 时展示 `LoadingMessageIcon`，点击发出 `stopSending`。
+  - `Disabled`、`sendDisabledTip`、`Pending`、`Streaming` 状态下点击发送容器不会发出 `sendMessage`。
+
+## API 摘要
+
+### Props
+
+- `{ messageState?: MessageStatus; sendDisabledTip?: string; tippyOptions?: AITippyProps; }`
+
+### Emits
+
+- `{ (e: 'sendMessage'): void; (e: 'stopSending'): void; }`
+
+### Slots
+
+- `default`
+- `before-send`（发送按钮左侧区域，ChatInput 默认在此渲染 ModelSelector）
+- `send-icon`
+
+### Expose
+
+- 无。
+
+## 组件依赖
+
+- 无组件依赖或仅依赖基础库。
+
+## 使用建议
+
+- 优先通过上层组合组件使用；直接使用前请确认 props 数据结构来自对应类型定义。
+- 自定义 `send-icon` 插槽时需自行处理发送/停止点击逻辑。

package/skills/blueking-chat-x/references/components/input-info-alert.md

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

package/skills/blueking-chat-x/references/components/input-menu-panel.md

@@ -0,0 +1,162 @@
+# InputMenuPanel 输入框菜单
+
+> 能力域：输入交互 ｜ 未从包入口导出：内部组件，请通过上层组件使用 ｜ since 0.0.51
+
+InputMenuPanel 渲染输入框菜单：分组标题 + InputMenuOption 条目 + 「更多 +N」折叠开关， 内置键盘上下导航与 Esc 关闭；分组数据由 useInputMenu 纯数据逻辑算出（按触发方式筛类型 → 关键字过滤 → 分组 → 折叠 → 扁平化）。 源码位置：src/components/chat-input/input-menu/（input-menu-panel.vue、input-menu-option.vue、use-input-menu.ts、constants.ts）。
+
+**关联**：chat-input（上层持有触发态与数据源并渲染本面板）、ai-slash-input（触发方式与过滤关键字由编辑器 menuChange 抛出）、add-menu-btn（+ 号唤起 plus 触发的聚合菜单）、resource-icon（条目左侧图标由 ResourceIcon 渲染）
+
+---
+
+# InputMenuPanel 输入框菜单
+
+> **能力域**：输入交互
+
+## 源码事实
+
+- **面板**：`src/components/chat-input/input-menu/input-menu-panel.vue`
+- **条目**：`src/components/chat-input/input-menu/input-menu-option.vue`
+- **数据逻辑**：`src/components/chat-input/input-menu/use-input-menu.ts`
+- **分组定义**：`src/components/chat-input/input-menu/constants.ts`
+- **能力说明**：`@` `/` `\` 与左下角 + 号共用同一个面板与同一份 `menuSources`，差异只体现在「展示哪些分组」。
+
+## 布局与交互
+
+- 面板由 [ChatInput](/components/input/chat-input) 绝对定位在输入框**正上方 8px**、与输入框等宽，**不跟随光标**；最大高度 400px，超出滚动。
+- 键盘导航由 [useMenuKeydown](/composables/use-menu-keydown) 提供：`↑` / `↓` 移动高亮，`Enter` 选中，高亮项滚动进可视区；结果集变化后高亮回到首项。
+- `Esc` 在**捕获阶段**监听并 emit `close`，避免被编辑器先行消费。
+- 面板滚动时关闭条目描述气泡，防止气泡与列表错位。
+- 条目 `disabled` 时不可选中，也不进入键盘导航序列。
+- 条目名称过长时用 `v-overflow-tips` 展示完整名称；`description` 非空时 hover 弹出「类型：名称 + 描述」气泡（与 [MentionTag](/components/rendering/mention-tag) 同一套气泡）。
+
+## 分组与触发方式
+
+| 触发方式 | 分组顺序                                                  |
+| -------- | --------------------------------------------------------- |
+| `/`      | Skill、MCP、工具                                          |
+| `@`      | 知识库、会话产物                                          |
+| `\`      | Prompt                                                    |
+| `plus`   | 添加、Skill、MCP、工具、知识库、会话产物、Prompt          |
+
+分组静态定义（`MENU_GROUP_DEFS`）：
+
+| `key`           | 标题     | 覆盖 `type`            |
+| --------------- | -------- | ---------------------- |
+| `add`           | 添加     | `file`                 |
+| `skill`         | Skill    | `skill`                |
+| `mcp`           | MCP      | `mcp`                  |
+| `tool`          | 工具     | `tool`                 |
+| `knowledgebase` | 知识库   | `knowledgebase`、`doc` |
+| `artifact`      | 会话产物 | `artifact`             |
+| `prompt`        | Prompt   | `prompt`               |
+
+- 组内无匹配条目时，`useInputMenu` **不产出该分组**（初始化与搜索过滤后均如此）；全部组都为空时 `groups` 为空数组，`ChatInput` 因此不弹出面板。
+- 面板组件本身若被传入 `items` 为空的分组，仍会渲染标题并展示「暂无数据」。`ChatInput` 默认路径不会走到这一支。
+- `DIVIDED_GROUP_KEYS` 决定哪些分组下方画分隔线，目前为 `['add']`。
+- `getMenuTypeLabel(type)` 由分组定义反查生成，菜单分组标题与标签气泡标题共用一份映射（`file` 映射到「添加」）。
+
+## 渲染示例
+
+## useInputMenu
+
+面板只负责渲染，分组结果由 `useInputMenu` 计算，可脱离 UI 单独单测。流程为：**按触发方式筛类型 → 按关键字过滤 → 分组 → 应用折叠阈值 → 扁平化供键盘导航**。
+
+::: info 内部模块
+面板、条目与 `useInputMenu` 都不在包入口导出，仅供 [ChatInput](/components/input/chat-input) 内部使用；`IInputMenuItem`、`MenuTrigger` 等类型从包入口导出。
+:::
+
+```typescript
+import { computed, shallowRef } from 'vue';
+
+const trigger = shallowRef<MenuTrigger | null>(null);
+const keyword = shallowRef('');
+
+const { groups, flatItems, hasContent, toggleGroup } = useInputMenu({
+  sources: computed(() => availableSources.value),
+  keyword,
+  trigger,
+  groupItemLimit: computed(() => props.menuGroupItemLimit),
+});
+```
+
+### 参数
+
+| 参数             | 类型                                          | 说明                                     |
+| ---------------- | --------------------------------------------- | ---------------------------------------- |
+| `sources`        | `Ref<IInputMenuItem[]>`                       | 全部可选项                               |
+| `keyword`        | `Ref<string>`                                 | 过滤关键字（触发符之后用户输入的文本）   |
+| `trigger`        | `Ref<MenuTrigger \| null>`                    | 当前触发方式，`null` 表示菜单未激活      |
+| `groupItemLimit` | `Ref<number>`                                 | 每个分组默认展示条数上限（内部下限为 1） |
+
+### 返回值
+
+| 字段          | 类型                            | 说明                                             |
+| ------------- | ------------------------------- | ------------------------------------------------ |
+| `groups`      | `ComputedRef<IInputMenuGroup[]>` | 渲染用分组（已应用过滤与折叠）                   |
+| `flatItems`   | `ComputedRef<IInputMenuItem[]>` | 当前可见且可选中的条目，顺序与面板一致           |
+| `hasContent`  | `ComputedRef<boolean>`          | 面板是否有内容，供上层决定显隐                   |
+| `toggleGroup` | `(key: MenuGroupKey) => void`   | 切换某个分组的展开 / 折叠                        |
+
+> 关键字或触发方式变化时，内部会清空手动展开状态——结果集已完全不同，沿用旧状态会造成误导。
+
+## API
+
+### InputMenuPanel Props
+
+| 属性名    | 类型                 | 必填 | 说明                                   |
+| --------- | -------------------- | ---- | -------------------------------------- |
+| groups    | `IInputMenuGroup[]`  | ✅   | 分组数据                               |
+| flatItems | `IInputMenuItem[]`   | ✅   | 可选中条目的扁平序列，供键盘导航       |
+
+### InputMenuPanel Emits
+
+| 事件名      | 参数                       | 触发时机                     |
+| ----------- | -------------------------- | ---------------------------- |
+| select      | `(item: IInputMenuItem)`   | 点击条目或按 Enter 选中      |
+| toggleGroup | `(key: string)`            | 点击「更多 +N / 收起」       |
+| close       | `()`                       | 按下 Esc                     |
+
+### InputMenuOption Props / Emits
+
+| 名称     | 类型                     | 说明                       |
+| -------- | ------------------------ | -------------------------- |
+| `item`   | `IInputMenuItem`         | 条目数据                   |
+| `active` | `boolean`                | 键盘导航选中态             |
+| `select` | `(item: IInputMenuItem)` | 条目未禁用时点击触发       |
+
+### 类型定义
+
+```typescript
+/** 面板渲染用的分组（已应用关键字过滤与折叠阈值） */
+interface IInputMenuGroup {
+  key: string;
+  /** 分组标题的中文文案 key，渲染时经 t() 转换 */
+  name: string;
+  /** 当前可见条目 */
+  items: IInputMenuItem[];
+  /** 被折叠隐藏的条数，为 0 表示无需折叠 */
+  restCount: number;
+  /** 是否已展开全部条目 */
+  expanded: boolean;
+  /** 分组下方是否需要分隔线 */
+  divided: boolean;
+}
+
+type MenuGroupKey = 'add' | 'skill' | 'mcp' | 'tool' | 'knowledgebase' | 'artifact' | 'prompt';
+
+/** 字符触发符，plus 由按钮唤起不在其中 */
+const CHAR_TRIGGERS = ['@', '/', '\\'] as const;
+
+/** 分组默认最多展示的条数 */
+const DEFAULT_GROUP_ITEM_LIMIT = 4;
+```
+
+`IInputMenuItem` 与 `MenuTrigger` 见 [ChatInput 类型定义](/components/input/chat-input#类型定义)。
+
+## 关联组件
+
+- [ChatInput](/components/input/chat-input) — 菜单数据源、触发态与选中后的动作分发
+- [AiSlashInput](/components/input/ai-slash-input) — 触发方式与关键字的来源
+- [AddMenuBtn](/components/input/add-menu-btn) — `plus` 触发入口
+- [ResourceIcon](/components/helper/resource-icon) — 条目图标
+- [useMenuKeydown](/composables/use-menu-keydown) — 键盘导航

package/skills/blueking-chat-x/references/components/interrupt-message.md

@@ -0,0 +1,212 @@
+# InterruptMessage 中断消息
+
+> 能力域：Agent 能力 ｜ 导入：`import { InterruptMessageRender } from '@blueking/chat-x'` ｜ since 1.0.0
+
+渲染 human-in-the-loop 中断消息，分发工具审批，并按 reason 回显 resume 结果（审批单 / 用户回答）。 源码位置：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）
+
+---
+
+# InterruptMessage 中断消息
+## 源码事实
+
+- **源码位置**：`src/components/chat-message/interrupt-message/interrupt-message.vue`
+- **能力域**：Agent 能力
+- **能力说明**：渲染 human-in-the-loop 中断消息，分发工具审批，并按 `result.reason` 回显 resume 结果。
+
+> **能力域**：Agent 能力
+
+human-in-the-loop 中断消息渲染器（导出名 **`InterruptMessageRender`**）。对应 `MessageRole.Interrupt`，解析 `content.outcome` 渲染审批卡片或兜底提示。
+
+> 通常由 [MessageRender](/components/message/message-render) 自动调用，无需业务侧直接引入。
+> `UserQuestion` 的待回答卡片由 [ChatContainer](/components/setup/chat-container) 放在输入区上方，本组件在 `outcome.success` 时按 `result.reason` 回显审批单或用户回答。
+
+## 渲染架构
+
+```
+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'
+└── resultRenderers[result.reason]
+      ├── aidev:tool_approval → ToolApprovalCard（可交互回显，透传 onInterruptResume）
+      └── aidev:user_question → UserQuestionAnsweredCard（支持 #answeredQuestion 透传 #answer）
+```
+
+| `InterruptReason`              | 子组件              |
+| ------------------------------ | ------------------- |
+| `aidev:tool_approval`（待审批） | `ToolApprovalCard`  |
+| `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 为 ToolApprovalResume
+    console.log(payload, interrupt?.id);
+  };
+</script>
+```
+
+**渲染效果**
+
+## UserQuestion 待回答
+
+待回答的 `UserQuestion` 不在消息内渲染；`ChatContainer` 会找到最近一条待回答中断，并在 `ChatInput` 上方挂载 [UserQuestionCard](/components/agent/user-question-card)。
+
+```vue
+<InterruptMessageRender
+  :content="userQuestionMessage.content"
+  role="interrupt"
+/>
+```
+
+**渲染效果**
+
+## AIDevToolApproval 已处理回显（outcome.success）
+
+`outcome.type === 'success'` 且 `result.reason === InterruptReason.AIDevToolApproval` 时，会话内以可交互 `ToolApprovalCard` 回显审批单（`readonly: false`）：待审批态仍可取消 / 刷新，终态展示置灰的取消按钮。`resultRenderers` 须与 interrupt 态一样透传 `onInterruptResume`，否则取消 / 刷新无回调。`result.payload.metadata` 需透传中断时的 `metadata`（含 `ticket`）：
+
+```vue
+<InterruptMessageRender
+  :content="resumedMessage.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>
+```
+
+**渲染效果**
+
+## 不支持的中断类型（兜底）
+
+```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` 透传