@blueking/chat-x 0.0.23 → 0.0.25

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

@@ -20,8 +20,8 @@ AI 助手消息展示组件，负责渲染 AI 回复的文本内容和工具调
 ## 渲染管线
 
 ```
-AssistantMessage
-├── assistant-message-content（内容区）
+AssistantMessage（根类名：ai-assistant-message）
+├── ai-assistant-message-content（内容区）
 │   └── [default slot] 或 ContentRender → MarkdownContent（Markdown 渲染）
 └── ToolCallRender × N（每个 toolCall 独立渲染，不受 slot 影响）
 ```
@@ -273,7 +273,7 @@ AI 可在一次回复中发起多个工具调用，组件依次渲染：
 默认插槽替换**内容区**的渲染（即 `ContentRender` 部分），工具调用仍在内容区外独立渲染，不受插槽影响：
 
 ```
-[自定义 slot 内容]   ← 替换这里
+[自定义 slot 内容]   ← 替换 ai-assistant-message-content 内默认渲染
 [ToolCallRender]     ← 不受影响，仍正常渲染
 [ToolCallRender]
 ```

package/dist/mcp/generated/docs/chat-container.md

@@ -337,11 +337,12 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
 
 ### v-model
 
-| 属性名           | 类型                  | 说明                             |
-| ---------------- | --------------------- | -------------------------------- |
-| modelValue       | `string \| TagSchema` | 输入框内容，支持纯文本或标签结构 |
-| selectedShortcut | `Shortcut \| null`    | 当前选中的快捷指令               |
-| cite             | `string`              | 引用内容                         |
+| 属性名           | 类型                  | 说明                                                         |
+| ---------------- | --------------------- | ------------------------------------------------------------ |
+| modelValue       | `string \| TagSchema` | 输入框内容，支持纯文本或标签结构                             |
+| selectedShortcut | `Shortcut \| null`    | 当前选中的快捷指令                                           |
+| cite             | `string`              | 引用内容                                                     |
+| renderMode       | `RenderMode`          | 渲染模式（默认 `Chat`）。`Share` 模式隐藏侧边栏和折叠按钮；`Test` 模式隐藏分享按钮 |
 
 ### Events
 
@@ -373,10 +374,39 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
 | removeCustomTab | `(tabName: string) => void` | 移除自定义 Tab |
 | selectCustomTab | `(tab: CustomTab) => void`  | 切换到指定 Tab |
 
+## 渲染模式
+
+通过 `v-model:render-mode` 控制容器的渲染行为：
+
+| `renderMode` | 侧边栏 Tab / 折叠按钮 | 底部输入区域                      | MessageTools 工具栏   | 说明                             |
+| ------------ | ---------------------- | --------------------------------- | --------------------- | -------------------------------- |
+| `Chat`       | 正常显示               | 正常显示（ChatInput / ShortcutRender / SelectionFooter） | 全部工具按钮          | 默认对话模式                     |
+| `Share`      | **隐藏**               | **隐藏**                          | **隐藏**（多选模式）  | 分享预览模式，仅展示消息         |
+| `Test`       | 正常显示               | 正常显示                          | 过滤掉「分享」按钮    | 测试/嵌入模式，隐藏分享入口     |
+
+```vue
+<template>
+  <ChatContainer
+    v-model="inputValue"
+    v-model:render-mode="renderMode"
+    :messages="messages"
+    :message-status="messageStatus"
+    :on-send-message="handleSendMessage"
+  />
+</template>
+
+<script setup lang="ts">
+  import { shallowRef } from 'vue';
+  import { ChatContainer, RenderMode } from '@blueking/chat-x';
+
+  const renderMode = shallowRef<RenderMode>(RenderMode.Chat);
+</script>
+```
+
 ## 类型定义
 
 ```typescript
-import { ChatContainer, type CustomTab, type Shortcut, type Message } from '@blueking/chat-x';
+import { ChatContainer, RenderMode, type CustomTab, type Shortcut, type Message } from '@blueking/chat-x';
 
 // 自定义 Tab
 interface CustomTab<T = Record<string, unknown>> {

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

@@ -37,6 +37,10 @@ chat-input-container
 
 > **注意**：`slot#attachment` 只替换快捷指令区，`FileUploadBtn` 在其外部，使用该 slot 不会移除上传按钮。`slot#send-icon` 只替换图标，按钮的点击处理和样式仍由组件控制。
 
+### AiSlashInput 与 modelValue 同步
+
+内部编辑器 `AiSlashInput` 在 **`modelValue` 由外部异步更新**（例如从历史会话回填、父组件重置）且与当前文档不一致时，会通过 `useCommandSelection` 提供的 `GetDocSnapshot` 读取编辑器快照，与 `docToString(modelValue)` 比对后，必要时执行 `ReplaceAll` 将编辑器内容同步为新的 `modelValue`，避免内外状态脱节。
+
 ## 基础用法
 
 ```vue

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

@@ -17,8 +17,10 @@ CodeContent 接收 markdown-it 的 fence/code_block token，按行 highlight.js
 
 ## 组件结构
 
+样式根选择器为 **`.ai-message-container .code-content-wrapper`**：代码块头部与 `pre` 区样式仅在消息容器（如 `MessageContainer` 根上的 `ai-message-container`）下生效。Wiki 与业务中独立演示时，请将 `CodeContent` 包在带 `ai-message-container` 类名的父节点内。
+
 ```
-.code-content-wrapper（width: 100%，margin-bottom: 12px）
+.ai-message-container .code-content-wrapper（width: 100%，margin-bottom: 12px）
 ├── .code-content-header（height: 40px，bg: #2f333d，border: 1px solid #1a1a1a）
 │     ├── .code-header-language（color: #999，显示 token.info 原始字符串）
 │     ├── slot#header（{ language, token }）— 自定义头部操作按钮区域
@@ -40,10 +42,13 @@ CodeContent 接收 markdown-it 的 fence/code_block token，按行 highlight.js
 
 ```vue
 <template>
-  <CodeContent
-    :token="codeTokens"
-    @mounted="handleMounted"
-  />
+  <!-- 完整深色头部与 pre 样式依赖父级 .ai-message-container（与对话消息区一致） -->
+  <div class="ai-message-container">
+    <CodeContent
+      :token="codeTokens"
+      @mounted="handleMounted"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">

package/dist/mcp/generated/docs/desc-panel.md

@@ -26,14 +26,13 @@ DescPanel 将描述字符串尝试 JSON 解析为键值列表展示，否则按
 │     └── {{ title }}
 └── .desc-panel（flex column，gap: 4px）
       ├── [JSON 对象/数组] v-for 逐项渲染 .desc-panel-item
-      │     ├── .desc-label  → "{{ key }}:"
-      │     └── .desc-value（overflow hidden，ellipsis，nowrap）
-      │           └── v-overflow-tips → hover 时显示完整内容
-      │               · value 为对象/数组时，tooltip 显示 JSON.stringify(value)
-      │               · value 为原始值时，tooltip 显示原始值
-      └── [非 JSON / 解析失败] 直接渲染 {{ data }}（纯文本）
+      │     ├── .desc-label  → HighlightKeyword(key)
+      │     └── .desc-value → HighlightKeyword(值的文本或 JSON 字符串)，`word-break: break-all`
+      └── [非 JSON / 解析失败] HighlightKeyword(data)，`word-break: break-all`
 ```
 
+> **说明**：键值与纯文本均通过 `HighlightKeyword` 展示，长内容依赖换行与面板宽度展示，**不再**使用 `v-overflow-tips` 悬停气泡。
+
 ## desc 解析规则
 
 `data` 是一个 computed，逻辑如下：
@@ -60,7 +59,7 @@ const data = computed(() => {
 | `'普通文本'`       | 解析抛出        | —           | 纯文本（原始字符串）     |
 | `''` / `undefined` | 解析抛出        | —           | 纯文本（空白）           |
 
-> **嵌套对象**：值本身是对象时，`{{ value }}` 渲染为 `[object Object]`，但 `v-overflow-tips` 的 tooltip 会显示 `JSON.stringify(value)` 的完整内容，方便查看原始结构。
+> **嵌套对象**：值本身是对象时，文本区域通过 `JSON.stringify(value)` 展示完整 JSON（`HighlightKeyword` + `word-break: break-all`），不再使用悬停 tooltip。
 
 ## 基础用法：JSON 参数
 
@@ -105,7 +104,7 @@ JSON 数组同样被视为 `object`，以数组索引（`0:`、`1:`…）作为
 
 ## 嵌套 JSON
 
-嵌套对象的值通过 `v-overflow-tips` 悬停后显示 JSON.stringify 结果，文本区域显示 `[object Object]`：
+嵌套对象的值在文本区域直接渲染为 `JSON.stringify(value)` 字符串，便于在面板内换行阅读：
 
 ```vue
 <template>

package/dist/mcp/generated/docs/key-value-content.md

@@ -25,15 +25,15 @@ div.ai-key-value-content（flex column，gap: 8px，font-size: 12px，color: #4d
 │     ├── ThinkingIcon（14×14px）
 │     └── {{ title }}
 └── div.ai-key-value-content（flex column，无 gap）   ← 与外层同名嵌套
-      └── div.key-value-item × N（flex row，gap: 3px，height: 20px）
-            ├── div.item-key   → {{ item.key }}（font-weight: bold，color: #333）
+      └── div.key-value-item × N（flex row，gap: 3px，min-height: 20px）
+            ├── div.item-key   → {{ item.key }}（flex: 0 0 auto，font-weight: bold，color: #333）
             ├── "："            → 硬编码文本节点，冒号不属于任何 div
-            └── div.item-value → {{ item.value }}（overflow hidden，ellipsis，nowrap）
+            └── div.item-value → {{ item.value }}（overflow hidden，ellipsis，`word-break: break-all` 允许多行换行）
 ```
 
 > **注意**：内层也是 `.ai-key-value-content` 类（与外层同名），仅用于布局，无额外样式差异。  
 > **注意**：`v-for` 使用 `item.key` 作为 `:key`，`content` 中的 `key` 字段必须唯一，否则触发 Vue 重复 key 警告。  
-> **注意**：`item.value` 使用 `text-overflow: ellipsis` 截断，但**无 tooltip**（与 `DescPanel` 不同），过长内容会被静默截断。
+> **注意**：`item.value` 在单行方向仍可能因 `text-overflow: ellipsis` 显示省略，但配合 `word-break: break-all` 长串会优先换行展示，**无 tooltip**（与 `DescPanel` 不同）。
 
 ## 基础用法
 
@@ -71,9 +71,9 @@ div.ai-key-value-content（flex column，gap: 8px，font-size: 12px，color: #4d
 </template>
 ```
 
-## 超长 value 截断
+## 超长 value 换行
 
-`.item-value` 固定 `white-space: nowrap`，超出容器宽度时截断显示省略号，**悬停无 tooltip**：
+`.item-value` 使用 `word-break: break-all`，长 URL 或长文本会在容器内换行；仍保留 `overflow: hidden` 与 `text-overflow: ellipsis` 以约束极端情况，**悬停无 tooltip**：
 
 ## API
 

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

@@ -91,7 +91,7 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
 
 ## 代码块
 
-代码块由 `CodeContent` 渲染，支持 highlight.js 语法高亮、语言标签、一键复制：
+代码块由 `CodeContent` 渲染，支持 highlight.js 语法高亮、语言标签、一键复制。语法高亮主题样式由 `CodeContent` 侧引入（`github-dark`），`MarkdownContent` **不再**全局引入 `highlight.js` 主题 CSS，避免与代码块组件重复加载、并保持与消息区样式一致。
 
 ## 表格
 

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

@@ -113,8 +113,11 @@ MessageContainer 是消息列表的核心容器。接收父组件用 useMessageG
 - `role: 'tool'` 消息**不会独立渲染**，而是被注入到对应 AssistantMessage 的 `toolCall.toolMessage` 字段
 - 若 `toolMessage.error` 存在，AssistantMessage 的 `status` 会被强制设为 `MessageStatus.Error`
 - `MessageTools` 工具栏只在 `type === 'assistant'` 的消息组底部渲染（不依赖鼠标悬停，始终可见），且满足以下条件时**不渲染**：
+  - `renderMode === RenderMode.Share`（分享预览模式）
   - 消息组的 `pause` 为 `true`（来源于 `message.property?.extra?.pause`）
   - 多选模式（`enableSelection`）开启且消息组不是 Loading 类型
+- `renderMode === RenderMode.Test` 时，工具栏会过滤掉「分享」按钮，其余正常
+- `renderMode === RenderMode.Share` 时，`message-group-messages` 自动添加 `message-group-enabled-selection` 类名（与 `enableSelection: true` 一致的多选视觉效果）
 - Loading 消息组的 `type` 是 `MessageRole.Loading`，不显示工具栏和多选 Checkbox
 
 ## 等待响应（Loading 自动注入）
@@ -464,6 +467,7 @@ AI 回复状态为 `error` 时，消息以错误样式展示：
 | onUserAction             | `(tool: IToolBtn, message: Message) => Promise<string[] \| void>`                            | —       | 用户消息工具操作回调                                                                                                                     |
 | onUserInputConfirm       | `(message: Message, content: UserMessage['content'], docSchema: TagSchema) => Promise<void>` | —       | 用户编辑消息确认回调                                                                                                                     |
 | onUserShortcutConfirm    | `(message: Message, formModel: Record<string, unknown>) => Promise<void>`                    | —       | 用户快捷指令表单提交回调                                                                                                                 |
+| renderMode               | `RenderMode`                                                                                 | —       | 渲染模式。`Share` 模式下启用多选样式并隐藏工具栏；`Test` 模式下过滤掉「分享」按钮；不传或 `Chat` 为默认行为                              |
 
 ### v-model
 

package/dist/mcp/generated/docs/use-command-selection.md

@@ -1,7 +1,7 @@
 <!-- AI SUMMARY -->
 ## 快速了解
 
-useCommandSelection 无参数，返回 commandSelection（ShallowRef 行列）与 GetCursorPosition（edix EditorCommand）。 在 editor.command(GetCursorPosition) 时把焦点端写入 commandSelection，供后续 DeleteTag、InsertTag 等命令计算范围。 仅在 AiSlashInput（@ 菜单插入）内部使用。
+useCommandSelection 无参数，返回 commandSelection、docSnapshot、GetCursorPosition、GetDocSnapshot。 GetCursorPosition 写入光标行列；GetDocSnapshot 将当前文档快照写入 docSnapshot，供外部 modelValue 与编辑器比对同步。 仅在 AiSlashInput（@ 菜单插入与 modelValue 同步）内部使用。
 
 ### 关联组件
 - **chat-input** — AiSlashInput 内部使用
@@ -29,9 +29,16 @@ editor.command(GetCursorPosition)
         commandSelection.value = { column, line }
                                  ↓
                commandSelection（shallowRef，初始值 { column: 0, line: 0 }）
+
+editor.command(GetDocSnapshot)
+  └── GetDocSnapshot(doc)
+        docSnapshot.value = doc   // 当前文档快照，用于与 props.modelValue 比对
 ```
 
-**使用时机**：在 `@` 资源插入流程中，先执行 `GetCursorPosition` 快照当前光标，再据此计算删除范围和插入位置。
+**使用时机**：
+
+- 在 `@` 资源插入流程中，先执行 `GetCursorPosition` 快照当前光标，再据此计算删除范围和插入位置。
+- 在外部 `modelValue` 变化时，先执行 `GetDocSnapshot` 取得编辑器当前文档，与 `docToString(modelValue)` 比对，决定是否 `ReplaceAll` 同步。
 
 ## 概念演示
 
@@ -42,20 +49,29 @@ editor.command(GetCursorPosition)
 ## 在 AiSlashInput 中的实际用法
 
 ```typescript
-const { commandSelection, GetCursorPosition } = useCommandSelection();
+import { watch } from 'vue';
+
+const { commandSelection, GetCursorPosition, GetDocSnapshot, docSnapshot } = useCommandSelection();
 
 // 用户从 @xxx 菜单中选择资源时：
 const insertTagAtCursor = (tag: IAiSlashMenuItem) => {
-  // 1. 执行命令，快照当前光标位置 → 写入 commandSelection.value
   editor.command(GetCursorPosition);
-
-  // 2. 读取快照的行列位置
   const { column, line } = commandSelection.value;
-
-  // 3. 根据位置删除已输入的 "@keyword"，插入 tag
   editor.command(DeleteTag, [line, column - keyword.value.length - 1], [line, column]);
   editor.command(InsertTag, [line, column], tag);
 };
+
+// 外部 modelValue 变化时，与编辑器文档对齐（简化示意；需已存在 editor、props、text、docToString）
+watch(
+  () => props.modelValue,
+  () => {
+    editor.command(GetDocSnapshot);
+    if (docToString(docSnapshot.value || []) !== docToString(text.value || [])) {
+      editor.command(ReplaceAll, docToString(text.value || []) as unknown as string);
+    }
+  },
+  { deep: false },
+);
 ```
 
 ## API
@@ -69,7 +85,9 @@ const insertTagAtCursor = (tag: IAiSlashMenuItem) => {
 | 属性名              | 类型                                           | 初始值                   | 说明                                                                                       |
 | ------------------- | ---------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------ |
 | `commandSelection`  | `ShallowRef<{ column: number; line: number }>` | `{ column: 0, line: 0 }` | 存储最近一次执行 `GetCursorPosition` 时的光标行列位置                                      |
+| `docSnapshot`       | `ShallowRef<DocFragment>`                      | `[]`                     | 存储最近一次执行 `GetDocSnapshot` 时的文档快照                                             |
 | `GetCursorPosition` | `EditorCommand<[]>`                            | —                        | 编辑器命令，由 `editor.command(GetCursorPosition)` 触发，将当前光标写入 `commandSelection` |
+| `GetDocSnapshot`    | `EditorCommand<[]>`                            | —                        | 编辑器命令，由 `editor.command(GetDocSnapshot)` 触发，将当前文档写入 `docSnapshot`       |
 
 ## 类型说明
 
@@ -84,7 +102,9 @@ type EditorCommand<A extends unknown[]> = (
 // useCommandSelection 返回值
 interface UseCommandSelectionReturn {
   commandSelection: ShallowRef<{ column: number; line: number }>;
+  docSnapshot: ShallowRef<DocFragment>;
   GetCursorPosition: EditorCommand<[]>;
+  GetDocSnapshot: EditorCommand<[]>;
 }
 ```
 
@@ -92,26 +112,29 @@ interface UseCommandSelectionReturn {
 
 ```typescript
 import { shallowRef } from 'vue';
+
 import type { EditorCommand } from '../edix';
+import type { DocFragment } from '../edix/doc/types';
 
 export const useCommandSelection = () => {
-  // 存储最近一次快照的光标位置
-  const commandSelection = shallowRef<{ column: number; line: number }>({
-    column: 0,
-    line: 0,
-  });
+  const commandSelection = shallowRef<{ column: number; line: number }>({ column: 0, line: 0 });
+  const docSnapshot = shallowRef<DocFragment>([]);
 
-  // EditorCommand：由 editor.command() 调用，注入 doc 和 selection
   const GetCursorPosition: EditorCommand<[]> = (_doc, selection) => {
-    const [, focus] = selection; // 取 focus 端（忽略 anchor）
+    const [, focus] = selection;
     const [line, column] = focus;
     commandSelection.value = { column, line };
-    // 不返回 Transaction，即只读取不修改文档
+  };
+
+  const GetDocSnapshot: EditorCommand<[]> = doc => {
+    docSnapshot.value = doc;
   };
 
   return {
     commandSelection,
+    docSnapshot,
     GetCursorPosition,
+    GetDocSnapshot,
   };
 };
 ```
@@ -121,7 +144,7 @@ export const useCommandSelection = () => {
 1. **只读命令**：`GetCursorPosition` 不返回 `Transaction`，不修改编辑器文档内容，仅记录位置
 2. **异步快照**：`commandSelection` 在 `editor.command(GetCursorPosition)` 执行后**同步**更新，下一行代码即可安全读取
 3. **`shallowRef` 而非 `ref`**：对象引用替换触发响应式，内部字段修改不触发（此处每次整体替换，无影响）
-4. **仅适用于 edix 编辑器**：`GetCursorPosition` 依赖 edix 的 `SelectionSnapshot` 格式，不适用于原生 contenteditable 或其他富文本库
+4. **仅适用于 edix 编辑器**：`GetCursorPosition` / `GetDocSnapshot` 依赖 edix 的文档与选区格式，不适用于原生 contenteditable 或其他富文本库
 
 ## 关联组件
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/chat-x",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI，为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
   "main": "index.js",
   "scripts": {