@blueking/chat-x 0.0.48-beta.1 → 0.0.49-beta.1

package/dist/mcp/generated/docs/file-artifact-panel.md

@@ -0,0 +1,279 @@
+<!-- AI SUMMARY -->
+## 快速了解
+
+汇总当前会话所有 AssistantMessage 的 artifacts，支持关键词搜索、列表选中与下载； 预览区委托 ArtifactPreviewHost：按类型走 text_from_download（html / markdown / md / txt / json） 或 preview_url_iframe（其余类型）；download_url / preview_url 经 onArtifactClick 异步获取。 源码位置：src/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue。
+
+### 关联组件
+- **assistant-message** — 文件产物来源于 AssistantMessage.property.artifacts
+- **chat-container** — 面板挂载在侧栏「文件产物」Tab（固定、不可关闭），并通过 onArtifactClick 异步取链
+- **execution-summary** — 同为 ChatContainer 侧栏 Tab 面板，交互形态一致
+- **message-loading** — ArtifactPreviewHost 取链 / 拉取正文过程使用 MessageLoading
+
+---
+<!-- FULL DOC -->
+
+# FileArtifactPanel 文件产物预览
+
+## 源码事实
+
+- **源码位置**：`src/components/chat-message/assistant-message/message-artifacts/file-artifact-panel.vue`
+- **能力域**：消息系统
+- **能力说明**：汇总当前会话全部文件产物；左侧列表搜索与选中，右侧预览委托内部 `ArtifactPreviewHost`。
+
+> **导出说明**：内部侧栏面板组件，**通常不直接使用**；由 `ChatContainer` 在「文件产物」Tab 内自动挂载。预览加载与渲染为同目录下 `artifact-preview/` 内部实现，不单独导出。
+
+点击 AI 回复中的[文件卡片](/components/message/assistant-message)后，`ChatContainer` 侧栏会弹出固定的「文件产物」Tab，聚合展示当前会话**所有** `AssistantMessage` 的文件产物，并命中被点击的文件进行预览。
+
+面板左侧为可搜索的文件列表，右侧为预览区。通常不需要直接使用，由 `ChatContainer` 在侧栏内自动渲染。
+
+## 核心能力
+
+- **会话级聚合**：拍平当前会话所有 `AssistantMessage.property.artifacts`，统一在一个列表内展示
+- **唯一命中**：同一会话可能出现多个消息 + 同名文件，文件名不可作唯一键，统一用 `messageUid#消息内下标#outputId` 生成全局唯一 id
+- **关键词搜索**：按文件名实时过滤列表
+- **异步取链**：`AIFileInfo` 本身不含 `url` / `previewUrl`，通过 `ChatContainer` 的 `onArtifactClick` 按 `outputId` 缓存获取 `download_url` / `preview_url`
+- **职责拆分**：
+  - **面板本身**：列表、搜索、预览头（文件名 / 图标 / 下载）
+  - **`ArtifactPreviewHost`**：按策略加载正文或预览 URL，分派到对应 renderer；展示 loading / empty / error（含重试）
+- **未传 `onArtifactClick`**：下载按钮隐藏，预览区展示无数据
+
+## 基础用法
+
+面板**未从包入口导出**，业务侧请走下方「业务接入」；下列示例仅用于文档站 / 本地调试（与 `ExecutionSummary` 文档站写法一致：相对路径引入 + 自行挂 Provider）。
+
+```vue
+<template>
+  <div style="height: 480px; border: 1px solid #dcdee5; border-radius: 8px; overflow: hidden;">
+    <FileArtifactPanel
+      :active-id="activeArtifactId"
+      :artifacts="sessionArtifacts"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+  import { buildArtifactId, useArtifactPreviewProvider } from '@blueking/chat-x'
+  import type { AIFileInfo, SessionArtifact } from '@blueking/chat-x'
+  // 内部组件：仅文档 / 调试；业务请用 ChatContainer 自动挂载
+  import FileArtifactPanel from './message-artifacts/file-artifact-panel.vue'
+
+  const files: AIFileInfo[] = [
+    { name: '周报.html', outputId: 'a-html', size: 10240, type: 'html' },
+    { name: '说明.md', outputId: 'a-md', size: 8192, type: 'md' },
+    { name: '纪要.txt', outputId: 'a-txt', size: 4096, type: 'txt' },
+    { name: '配置.json', outputId: 'a-json', size: 2048, type: 'json' },
+    { name: '立项.pdf', outputId: 'a-pdf', size: 204800, type: 'pdf' },
+  ]
+
+  const sessionArtifacts: SessionArtifact[] = files.map((file, index) => ({
+    ...file,
+    artifactId: buildArtifactId('msg-1', index, file.outputId),
+    messageUid: 'msg-1',
+  }))
+
+  useArtifactPreviewProvider({
+    getOnArtifactClick: () => async file => {
+      // 文本类返回可 fetch 的 download_url；iframe 类返回 preview_url
+      const res = await api.getArtifactUrls(file.outputId)
+      return { download_url: res.download_url, preview_url: res.preview_url }
+    },
+    onOpen: () => {},
+  })
+
+  const activeArtifactId = shallowRef(sessionArtifacts[0].artifactId)
+  const handleSelect = (id: string) => {
+    activeArtifactId.value = id
+  }
+</script>
+```
+
+**渲染效果**（点击左侧列表切换类型；文本类直渲染，PDF 走 iframe。Mock 取链约 600ms）
+
+## 业务接入（ChatContainer）
+
+日常用法是给容器传 `messages`（含 `property.artifacts`）与 `onArtifactClick`，点击文件卡片即可打开侧栏面板：
+
+```vue
+<template>
+  <ChatContainer
+    v-model="input"
+    :messages="messages"
+    :on-artifact-click="onArtifactClick"
+    @send-message="handleSend"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref, shallowRef } from 'vue'
+  import {
+    ChatContainer,
+    MessageRole,
+    MessageStatus,
+    type AIFileInfo,
+    type Message,
+  } from '@blueking/chat-x'
+
+  const input = ref('')
+  const messages = shallowRef<Message[]>([
+    {
+      id: 'u1',
+      messageId: 'u1',
+      role: MessageRole.User,
+      status: MessageStatus.Complete,
+      content: '整理本周评审材料',
+    },
+    {
+      id: 'a1',
+      messageId: 'a1',
+      uid: 'assistant-uid-1',
+      role: MessageRole.Assistant,
+      status: MessageStatus.Complete,
+      content: '已生成评审材料，点击卡片可在侧栏预览：',
+      property: {
+        artifacts: [
+          { name: '周报.html', outputId: 'a-html', size: 10240, type: 'html' },
+          { name: '说明.md', outputId: 'a-md', size: 8192, type: 'md' },
+          { name: '配置.json', outputId: 'a-json', size: 2048, type: 'json' },
+          { name: '立项.pdf', outputId: 'a-pdf', size: 204800, type: 'pdf' },
+        ] satisfies AIFileInfo[],
+      },
+    },
+  ])
+
+  const onArtifactClick = async (file: AIFileInfo) => {
+    const res = await api.getArtifactUrls(file.outputId)
+    return {
+      download_url: res.download_url,
+      preview_url: res.preview_url,
+    }
+  }
+
+  const handleSend = () => {
+    /* ... */
+  }
+</script>
+```
+
+## 触发链路
+
+```
+ArtifactFileCard（点击文件卡片）
+  └─ useArtifactPreviewConsumer().openPreview({ file, index, messageUid })
+       └─ useArtifactPreviewProvider（ChatContainer 内）
+            ├─ 记录命中文件 activeArtifactId
+            └─ onOpen → addCustomTab('file-artifact') 展开并选中侧栏 Tab
+                 └─ FileArtifactPanel
+                      ├─ 列表 @select → setActiveArtifactId
+                      ├─ 下载 → resolveArtifactUrls + triggerArtifactDownload
+                      └─ ArtifactPreviewHost
+                           ├─ useArtifactPreviewLoader（策略 + fetch / 取链，防竞态）
+                           └─ HtmlPreview | MarkdownPreview | TxtPreview | UrlIframePreview
+```
+
+- 文件卡片通过 `useArtifactPreviewConsumer` 注入预览上下文，无 Provider 时卡片不可点击（兜底 `undefined`）
+- `ChatContainer` 通过 `useArtifactPreviewProvider` 提供上下文，并把「打开侧栏 Tab」这一副作用以 `onOpen` 注入，保持 composable 职责单一
+- 侧栏「文件产物」Tab 固定不可关闭，`order: -1` 排在「执行情况」之前；会话切换或无文件产物时自动移除
+
+## 唯一 id 规则
+
+同一会话可能存在多个 `AssistantMessage`，且不同消息里可能有同名文件，因此**文件名不可作为唯一键**。统一由 `buildArtifactId` 生成：
+
+```typescript
+import { buildArtifactId } from '@blueking/chat-x';
+
+// messageUid#消息内下标#outputId
+buildArtifactId('msg-a', 2, 'output-9'); // => 'msg-a#2#output-9'
+```
+
+Provider 侧聚合与文件卡片侧透传必须使用同一规则，保证命中一致。
+
+## 预览机制
+
+预览由内部 `getArtifactPreviewStrategy(type)` 决定 **加载方式** 与 **渲染器**；面板不直接写死类型分支。
+
+| 文件类型 | load | 取链字段 | renderer |
+| -------- | ---- | -------- | -------- |
+| `html` | `text_from_download` | `download_url` → `fetch` 正文 | `HtmlPreview`（`<iframe srcdoc>`） |
+| `markdown` / `md` | `text_from_download` | 同上 | `MarkdownPreview`（`MarkdownContent`） |
+| `txt` / `json` | `text_from_download` | 同上 | `TxtPreview`（`<pre>`） |
+| 其余（如 `pdf` / `jpg`） | `preview_url_iframe` | `preview_url` | `UrlIframePreview`（`<iframe src>`，一般为后台转好的 PDF） |
+
+> `md`（`AIFileType.Md`）为后台扩展名别名，与 `markdown`（`AIFileType.Markdown`）等价，共用 Markdown 直渲染。
+
+### 加载态
+
+| status | 表现 |
+| ------ | ---- |
+| `loading` | 预览区 [MessageLoading](/components/helper/message-loading) |
+| `ready` | 对应 renderer 渲染 |
+| `empty` | 「暂无可预览的文件」（无文件 / 未传 `onArtifactClick` / 缺所需 URL） |
+| `error` | 「预览加载失败」+ 重试按钮 |
+
+切换文件时 `useArtifactPreviewLoader` 用 `loadSeq` + `AbortController` 中断上一次 `fetch`，避免竞态覆盖。下载图标仍由面板用 bkui `Loading` spin 单独表达。
+
+## 内部结构（不导出）
+
+```
+message-artifacts/
+├── file-artifact-panel.vue          # 列表 + 下载头 + 挂载 Host
+└── artifact-preview/
+    ├── artifact-preview-host.vue    # 状态机 UI + 分派 renderer
+    ├── preview-strategy.ts          # getArtifactPreviewStrategy
+    ├── use-artifact-preview-loader.ts
+    └── renderers/
+        ├── html-preview.vue
+        ├── markdown-preview.vue
+        ├── txt-preview.vue
+        └── url-iframe-preview.vue
+```
+
+## API
+
+### Props
+
+| 属性名    | 类型                | 必填 | 说明                                   |
+| --------- | ------------------- | ---- | -------------------------------------- |
+| activeId  | `string`            | ✓    | 当前命中的文件 id（`messageUid#index#outputId`） |
+| artifacts | `SessionArtifact[]` | ✓    | 当前会话全部文件产物                   |
+
+### Events
+
+| 事件名 | 参数              | 说明                       |
+| ------ | ----------------- | -------------------------- |
+| select | `(id: string)`    | 列表内切换选中文件，参数为文件 `artifactId` |
+
+### Slots / Expose
+
+无。
+
+## 类型定义
+
+```typescript
+import type { AIFileInfo, SessionArtifact } from '@blueking/chat-x';
+
+// 会话级文件产物：在 AIFileInfo 基础上补充命中所需字段
+type SessionArtifact = AIFileInfo & {
+  artifactId: string; // 全局唯一 id：messageUid#index#outputId
+  messageUid: string; // 所属 AssistantMessage 的 uid
+};
+
+type AIFileInfo = {
+  name: string;
+  outputId: string;
+  size: number;
+  type: AIFileType;
+};
+```
+
+## 关联 Composable
+
+预览**命中与取链**由 [useArtifactPreview](/composables/use-artifact-preview) 提供（Provider / Consumer + `ARTIFACT_PREVIEW_TOKEN`）。**正文加载与渲染**由内部 `useArtifactPreviewLoader` + `ArtifactPreviewHost` 完成，不在该 composable 内。
+
+## 关联组件
+
+- [AssistantMessage](/components/message/assistant-message) — 文件产物来源（`property.artifacts`）
+- [ChatContainer](/components/setup/chat-container) — 侧栏「文件产物」Tab 挂载场景，提供 `onArtifactClick`
+- [MessageLoading](/components/helper/message-loading) — Host 预览区异步加载态
+- [ExecutionSummary](/components/agent/execution-summary) — 同为侧栏 Tab 面板

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

@@ -11,13 +11,14 @@
 <!-- FULL DOC -->
 
 # InfoMessage 信息消息
+
 ## 源码事实
 
 - **源码位置**：`src/components/chat-message/info-message/info-message.vue`
 - **能力域**：消息系统
 - **能力说明**：渲染居中的系统信息提示。
 
-> **能力域**：消息系统
+> **导出说明**：`InfoMessage` **未**从包入口导出（入口同名是 TS interface）。消费方经 `MessageRender` / `MessageContainer` 使用。下文 `InfoMessageComp` 为文档站内部示例。
 
 系统信息分隔组件，在聊天消息列表中以**居中虚线分隔条**的形式展示非对话类信息（会话重置、时间节点、状态变更等）。
 
@@ -35,13 +36,19 @@
 
 ```vue
 <template>
-  <InfoMessage :content="content" />
+  <MessageRender :message="message" />
 </template>
 
 <script setup lang="ts">
-  import { InfoMessage } from '@blueking/chat-x';
-
-  const content = '以下是新的对话';
+  import { MessageRender, MessageRole, MessageStatus } from '@blueking/chat-x';
+
+  const message = {
+    id: '1',
+    messageId: '1',
+    role: MessageRole.Info,
+    content: '以下是新的对话',
+    status: MessageStatus.Complete,
+  };
 </script>
 ```
 
@@ -53,11 +60,20 @@
 
 ```vue
 <template>
-  <InfoMessage :content="['会话已重置', '以下是新的对话']" />
+  <MessageRender :message="message" />
 </template>
 
 <script setup lang="ts">
-  import { InfoMessage } from '@blueking/chat-x';
+  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>
 ```
 

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

@@ -12,46 +12,60 @@
 <!-- FULL DOC -->
 
 # LoadingMessage 加载中消息
+
 ## 源码事实
 
 - **源码位置**：`src/components/chat-message/loading-message/loading-message.vue`
 - **能力域**：消息系统
 - **能力说明**：消息列表中的加载占位，默认使用 AiLoading，也支持默认插槽覆盖。
 
-> **能力域**：消息系统
+> **导出说明**：`LoadingMessage` **未**从包入口导出。消费方经 `MessageRender`（`role: 'loading'`）或由 `MessageContainer` 自动注入。下文 `LoadingMessageComp` 为文档站内部示例。
 
-加载等待状态组件，展示 AI 正在处理请求时的过渡动画。由旋转渐变环 + 脉冲星形图标（蓝→紫→粉渐变）和"请求中..."文案组成。支持通过默认插槽自定义加载文案。
+加载等待状态组件：`AiLoading`（18px）+ 默认文案「请求中...」。可通过默认插槽自定义文案。
 
-> **提示**：此组件通常**不需要手动使用**，`MessageContainer` 会在满足条件时自动注入。
+> **提示**：通常**不需要手动使用**，`MessageContainer` / `useMessageGroup` 会在满足条件时自动注入。
 
 ## 渲染效果
 
 ## 基础用法
 
-组件无 Props，直接引入渲染即可：
+组件无 Props。文档站内部示例：
+
+```vue
+<template>
+  <LoadingMessageComp />
+</template>
+```
+
+消费方经 `MessageRender`：
 
 ```vue
 <template>
-  <LoadingMessage />
+  <MessageRender
+    :message="{
+      id: 'loading',
+      messageId: '',
+      role: MessageRole.Loading,
+      content: '',
+      status: MessageStatus.Pending,
+    }"
+  />
 </template>
 
 <script setup lang="ts">
-  import { LoadingMessage } from '@blueking/chat-x';
+  import { MessageRender, MessageRole, MessageStatus } from '@blueking/chat-x';
 </script>
 ```
 
 ## 自定义加载文案
 
-通过默认插槽可覆盖默认的"请求中..."文案：
+通过默认插槽覆盖「请求中...」：
 
 ```vue
 <template>
-  <LoadingMessage>正在思考中，请稍候...</LoadingMessage>
+  <!-- 文档站内部示例 -->
+  <LoadingMessageComp>正在思考中，请稍候...</LoadingMessageComp>
 </template>
-
-<script setup lang="ts">
-  import { LoadingMessage } from '@blueking/chat-x';
-</script>
 ```
 
 ## 动画说明
@@ -67,15 +81,18 @@
 
 ## 在 MessageContainer 中的自动注入
 
-`MessageContainer` 在构建消息分组列表时，检测到**消息列表最后一条为用户消息**（`role === 'user'`）时，自动在末尾追加一个 Loading 消息组：
+`useMessageGroup` 构建分组时，若**最后一条为用户消息**且 **`renderMode !== RenderMode.Share`**，自动在末尾追加 Loading 组：
 
 ```typescript
-// MessageContainer 内部逻辑（简化）
-if (messages.at(-1)?.role === MessageRole.User) {
+// use-message-group.ts（简化）
+const shouldAppendLoading =
+  messages.at(-1)?.role === MessageRole.User && renderMode !== RenderMode.Share;
+
+if (shouldAppendLoading) {
   list.push({
     messages: [
       {
-        role: MessageRole.Loading, // 'loading'
+        role: MessageRole.Loading,
         content: '',
         status: MessageStatus.Pending,
         id: 'loading',
@@ -87,7 +104,8 @@ if (messages.at(-1)?.role === MessageRole.User) {
 }
 ```
 
-当下一条 AI 消息（`role: 'assistant'`）到来后，最后一条不再是用户消息，Loading 组自动消失。
+- 下一条 AI 消息到来后，末尾不再是 user，Loading 组自动消失
+- **分享预览**（`renderMode === RenderMode.Share`）**不会**注入 Loading，避免分享页出现「请求中」占位
 
 **触发示例**：
 
@@ -127,6 +145,7 @@ if (messages.at(-1)?.role === MessageRole.User) {
 - **默认插槽**：可通过默认插槽自定义加载文案，未传入时显示内置的 "请求中..."
 - **i18n 支持**：默认文案 "请求中..." 通过内置 `t()` 函数处理，英文环境自动显示 "Requesting..."
 - **选择模式**：`MessageContainer` 开启 `enableSelection` 时，Loading 消息组不显示复选框
+- **分享模式**：`renderMode === RenderMode.Share` 时不自动注入 Loading
 - **自动生命周期**：Loading 组随消息列表变化自动插入/移除，无需手动控制
 
 ## API

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

@@ -13,15 +13,16 @@
 <!-- FULL DOC -->
 
 # MessageRender 消息渲染器
+
 ## 源码事实
 
 - **源码位置**：`src/components/chat-message/message-render/message-render.vue`
 - **能力域**：消息系统
-- **能力说明**：按 message.role 分发到用户、助手、工具、推理、活动、中断等消息组件。
+- **能力说明**：按 `message.role` 分发到用户、助手、工具、推理、活动、中断等消息组件。
 
-> **能力域**：消息系统
+> **导出说明**：`MessageRender` **已**从 `@blueking/chat-x` 包入口导出，消费方可直接 import。下文 `MessageRenderComp` 为文档站相对路径 demo，与包入口行为一致。
 
-统一的消息渲染入口，通过 `message.role` 字段自动派发到对应的子组件。整个渲染过程由一个 `computed` 属性完成，无额外状态。
+统一的消息渲染入口，通过 `message.role` 派发到对应子组件；由单个 `computed` 完成，无额外状态。
 
 ## 渲染架构
 
@@ -151,7 +152,7 @@ MessageRender
 
 ### 流式输出（streaming）
 
-`status: 'streaming'` 时，`AssistantMessage` 内部展示打字光标，内容可实时追加：
+`status: 'streaming'` 时，默认回退的 `ContentRender` / `MarkdownContent` 会按流式规则补全未闭合语法；内容由外部逐步追加：
 
 ```vue
 <script setup lang="ts">
@@ -202,65 +203,74 @@ MessageRender
 
 ## 自定义内容渲染（default slot）
 
-`default` slot **仅对 `role: 'assistant'` 生效**，用于替换默认的 `ContentRender`。未提供 slot 时回退渲染 `<ContentRender :content="message.content" :status="message.status" />`。
+`default` slot **仅对 `role: 'assistant'` 生效**，用于替换默认的 `ContentRender`。
+
+未提供 slot 时，内部回退为：
+
+```ts
+h(ContentRender, { content: message.content || '', status: message.status }, /* codeHeader */)
+```
+
+自定义 slot 时，运行时参数来自 `AssistantMessage` 的 `v-bind`，**仅保证 `{ content }`**。需要 `status` 时请从外层 `message.status` 读取（不要依赖 slot 内的 `status`）。
 
 ```vue
 <template>
-  <MessageRender
-    :message="message"
-    :on-action="handleAction"
-  >
-    <template #default="{ content, status }">
-      <!-- 完全接管内容区域渲染 -->
+  <MessageRender :message="message">
+    <template #default="{ content }">
       <MyMarkdownRenderer
         :content="content"
-        :streaming="status === 'streaming'"
+        :streaming="message.status === 'streaming'"
       />
     </template>
   </MessageRender>
 </template>
 ```
 
-slot 参数类型与 `AssistantMessage` 的 slot 保持一致（`Partial<AssistantMessage>`），主要使用：
+| 参数      | 类型     | 说明                         |
+| --------- | -------- | ---------------------------- |
+| `content` | `string` | 消息内容（运行时保证）       |
 
-| 参数      | 类型            | 说明         |
-| --------- | --------------- | ------------ |
-| `content` | `string`        | 消息内容     |
-| `status`  | `MessageStatus` | 当前消息状态 |
+## 与 MessageContainer / ChatContainer 配合
 
-## 与 MessageContainer 配合
-
-在 `MessageContainer` 的 `default` slot 中使用，可替换默认的 `MessageRender` 渲染逻辑：
+自定义 `ChatContainer` 的 `#message` 时，插槽参数只有 `message` / `messageToolsStatus` / `onInterruptResume`。用户消息工具相关回调需由外层自行绑定透传，否则删除/编辑/复制/引用会失效（AI 消息工具栏在 `MessageContainer` 内渲染，不受 `#message` 影响）：
 
 ```vue
 <template>
-  <MessageContainer
+  <ChatContainer
     :messages="messages"
     :message-status="messageStatus"
     :on-agent-action="handleAgentAction"
     :on-user-action="handleUserAction"
-    @stop-streaming="handleStopStreaming"
+    :common-tippy-options="commonTippyOptions"
   >
-    <template #default="{ message, messageToolsStatus }">
-      <!-- 自定义 MessageRender 的行为 -->
+    <template #message="{ message, messageToolsStatus, onInterruptResume }">
       <MessageRender
         :message="message"
         :message-tools-status="messageToolsStatus"
         :on-action="handleUserAction"
-        :on-input-confirm="handleInputConfirm"
+        :on-input-confirm="(content, docSchema) => handleUserInputConfirm(message, content, docSchema)"
+        :on-shortcut-confirm="formModel => handleUserShortcutConfirm(message, formModel)"
+        :tippy-options="commonTippyOptions"
+        :on-interrupt-resume="onInterruptResume"
       >
         <template
           v-if="message.role === 'assistant'"
-          #default="{ content, status }"
+          #default="{ content }"
         >
           <MyCustomContent
             :content="content"
-            :status="status"
+            :status="message.status"
+          />
+        </template>
+        <template #codeHeader="{ language, token }">
+          <MyCodeActions
+            :language="language"
+            :token="token"
           />
         </template>
       </MessageRender>
     </template>
-  </MessageContainer>
+  </ChatContainer>
 </template>
 ```
 
@@ -280,11 +290,11 @@ slot 参数类型与 `AssistantMessage` 的 slot 保持一致（`Partial<Assista
 
 ### Slots
 
-| 插槽名           | 参数                                         | 说明                                                                                                    |
-| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| answeredQuestion | `{ item, index, status }`                    | 自定义 UserQuestion 已回答回显，透传给 InterruptMessageRender → UserQuestionAnsweredCard 的 `#answer`   |
-| codeHeader       | `{ language: string; token: Token[] }`       | 代码块头部自定义操作区域，透传给 ContentRender → MarkdownContent → CodeContent；**仅对 assistant 生效** |
-| default          | `{ content: string, status: MessageStatus }` | 替换 AssistantMessage 的内容区域渲染；**仅对 `role: 'assistant'` 生效**                                 |
+| 插槽名           | 参数                                   | 说明                                                                                                    |
+| ---------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| answeredQuestion | `{ item, index, status }`              | 自定义 UserQuestion 已回答回显，透传给 InterruptMessageRender → UserQuestionAnsweredCard 的 `#answer`   |
+| codeHeader       | `{ language: string; token: Token[] }` | 代码块头部自定义操作区域，透传给 ContentRender → MarkdownContent → CodeContent；**仅对 assistant 生效** |
+| default          | `{ content: string }`                  | 替换 AssistantMessage 内容区；**仅对 assistant 生效**；运行时仅保证 `content`（`status` 请读外层 message） |
 
 ## 消息类型映射
 
@@ -314,6 +324,7 @@ enum MessageRole {
   Tool = 'tool',
   Activity = 'activity',
   Loading = 'loading',
+  Interrupt = 'interrupt',
 }
 
 // 消息状态

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

@@ -12,13 +12,14 @@
 <!-- FULL DOC -->
 
 # ReasoningMessage 推理消息
+
 ## 源码事实
 
 - **源码位置**：`src/components/chat-message/reasoning-message/reasoning-message.vue`
 - **能力域**：消息系统
 - **能力说明**：渲染推理过程，覆盖加载、错误与 Markdown 内容展示。
 
-> **能力域**：消息系统
+> **导出说明**：`ReasoningMessage` **未**从包入口导出（入口同名是 TS interface）。消费方经 `MessageRender` / `MessageContainer` 使用。下文 `ReasoningMessageComp` 为文档站内部示例。
 
 AI 思维链（Chain-of-Thought）推理过程展示组件。由**可点击标题栏**和**内容区域**组成，内容区支持 Markdown 渲染。`duration` 传入后自动折叠一次，用户可随时点击标题展开/收起。
 
@@ -44,17 +45,19 @@ AI 思维链（Chain-of-Thought）推理过程展示组件。由**可点击标
 
 ```vue
 <template>
-  <ReasoningMessage
-    :content="content"
-    :status="status"
-  />
+  <MessageRender :message="message" />
 </template>
 
 <script setup lang="ts">
-  import { ReasoningMessage, MessageStatus } from '@blueking/chat-x';
-
-  const status = MessageStatus.Complete;
-  const content = ['让我分析一下这个问题...', '首先需要考虑以下几个方面...'];
+  import { MessageRender, MessageRole, MessageStatus } from '@blueking/chat-x';
+
+  const message = {
+    id: '1',
+    messageId: '1',
+    role: MessageRole.Reasoning,
+    status: MessageStatus.Complete,
+    content: ['让我分析一下这个问题...', '首先需要考虑以下几个方面...'],
+  };
 </script>
 ```
 
@@ -113,11 +116,12 @@ const { stop } = watch(
 通过 `v-model:collapsed` 从外部读取或设置折叠状态：
 
 ```vue
+<!-- 文档站内部示例：组件本体支持 v-model:collapsed；消费方一般经 MessageRender 渲染 -->
 <template>
   <button @click="collapsed = !collapsed">
     {{ collapsed ? '展开推理' : '收起推理' }}
   </button>
-  <ReasoningMessage
+  <ReasoningMessageComp
     v-model:collapsed="collapsed"
     :content="content"
     :status="status"
@@ -127,7 +131,7 @@ const { stop } = watch(
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { ReasoningMessage, MessageStatus } from '@blueking/chat-x';
+  import { MessageStatus } from '@blueking/chat-x';
 
   const collapsed = ref(false);
   const status = MessageStatus.Complete;