@blueking/chat-x 0.0.42 → 0.0.45-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/README.md +1 -1
  2. package/dist/ag-ui/types/constants.d.ts +16 -0
  3. package/dist/ag-ui/types/contents.d.ts +0 -2
  4. package/dist/ag-ui/types/index.d.ts +2 -0
  5. package/dist/ag-ui/types/interrupt.d.ts +107 -0
  6. package/dist/ag-ui/types/messages.d.ts +2 -0
  7. package/dist/ag-ui/types/schema.d.ts +42 -0
  8. package/dist/components/ai-questions/questions-container.vue.d.ts +3 -0
  9. package/dist/components/ai-questions/selection-question.vue.d.ts +3 -0
  10. package/dist/components/chat-content/flow-agent-content/flow-agent-node-detail.vue.d.ts +0 -2
  11. package/dist/components/chat-input/ai-slash-input/ai-slash-input.vue.d.ts +1 -3
  12. package/dist/components/chat-input/chat-input.vue.d.ts +10 -9
  13. package/dist/components/chat-input/input-attachment/input-attachment.vue.d.ts +1 -0
  14. package/dist/components/chat-input/{ai-slash-input/ai-skill-list/ai-skill-list.vue.d.ts → input-info-alert.vue.d.ts} +1 -3
  15. package/dist/components/chat-message/interrupt-message/index.d.ts +2 -0
  16. package/dist/components/chat-message/interrupt-message/interrupt-message.vue.d.ts +17 -0
  17. package/dist/components/chat-message/interrupt-message/tool-approval-card.vue.d.ts +8 -0
  18. package/dist/components/chat-message/interrupt-message/user-question/index.d.ts +5 -0
  19. package/dist/components/chat-message/interrupt-message/user-question/use-user-question.d.ts +35 -0
  20. package/dist/components/chat-message/interrupt-message/user-question/user-question-answered-card.vue.d.ts +25 -0
  21. package/dist/components/chat-message/interrupt-message/user-question/user-question-card.vue.d.ts +25 -0
  22. package/dist/components/chat-message/interrupt-message/user-question/user-question-choice.vue.d.ts +13 -0
  23. package/dist/components/chat-message/interrupt-message/user-question/user-question-option.vue.d.ts +17 -0
  24. package/dist/components/chat-message/message-container/message-container.vue.d.ts +14 -7
  25. package/dist/components/chat-message/message-render/message-render.vue.d.ts +4 -0
  26. package/dist/components/index.d.ts +2 -6
  27. package/dist/composables/use-common.d.ts +1 -1
  28. package/dist/composables/use-custom-tab.d.ts +1 -1
  29. package/dist/composables/use-message-group.d.ts +2004 -224
  30. package/dist/directives/overflow-tips.d.ts +1 -1
  31. package/dist/icons/index.d.ts +1 -0
  32. package/dist/icons/interrupt.d.ts +24 -0
  33. package/dist/index.css +1 -1
  34. package/dist/index.js +5906 -5346
  35. package/dist/index.js.map +1 -1
  36. package/dist/lang/lang.d.ts +33 -2
  37. package/dist/mcp/generated/docs/activity-layout.md +138 -0
  38. package/dist/mcp/generated/docs/activity-message.md +18 -28
  39. package/dist/mcp/generated/docs/ai-image.md +9 -4
  40. package/dist/mcp/generated/docs/ai-loading.md +11 -6
  41. package/dist/mcp/generated/docs/ai-prompt-list.md +42 -0
  42. package/dist/mcp/generated/docs/ai-selection.md +10 -5
  43. package/dist/mcp/generated/docs/ai-slash-editor.md +43 -0
  44. package/dist/mcp/generated/docs/ai-slash-input.md +43 -0
  45. package/dist/mcp/generated/docs/ai-slash-menu.md +42 -0
  46. package/dist/mcp/generated/docs/animation-text.md +9 -4
  47. package/dist/mcp/generated/docs/assistant-message.md +10 -5
  48. package/dist/mcp/generated/docs/chat-container.md +136 -68
  49. package/dist/mcp/generated/docs/chat-input.md +45 -9
  50. package/dist/mcp/generated/docs/cite-content.md +8 -3
  51. package/dist/mcp/generated/docs/code-content.md +9 -4
  52. package/dist/mcp/generated/docs/common-error-content.md +10 -5
  53. package/dist/mcp/generated/docs/constants.md +68 -3
  54. package/dist/mcp/generated/docs/content-render.md +10 -5
  55. package/dist/mcp/generated/docs/delete-tool.md +9 -4
  56. package/dist/mcp/generated/docs/desc-panel.md +9 -4
  57. package/dist/mcp/generated/docs/detail-section.md +93 -0
  58. package/dist/mcp/generated/docs/execution-summary.md +10 -5
  59. package/dist/mcp/generated/docs/file-content.md +9 -4
  60. package/dist/mcp/generated/docs/file-upload-btn.md +11 -6
  61. package/dist/mcp/generated/docs/flow-agent-content.md +212 -0
  62. package/dist/mcp/generated/docs/flow-agent-node-detail.md +240 -0
  63. package/dist/mcp/generated/docs/highlight-keyword.md +10 -5
  64. package/dist/mcp/generated/docs/image-content.md +9 -4
  65. package/dist/mcp/generated/docs/image-preview-group.md +9 -4
  66. package/dist/mcp/generated/docs/image-preview.md +10 -5
  67. package/dist/mcp/generated/docs/info-message.md +7 -2
  68. package/dist/mcp/generated/docs/input-attachment.md +43 -0
  69. package/dist/mcp/generated/docs/input-info-alert.md +42 -0
  70. package/dist/mcp/generated/docs/interrupt-message.md +204 -0
  71. package/dist/mcp/generated/docs/interrupt.md +282 -0
  72. package/dist/mcp/generated/docs/key-value-content.md +9 -4
  73. package/dist/mcp/generated/docs/knowledge-rag-content.md +126 -0
  74. package/dist/mcp/generated/docs/latex-content.md +9 -4
  75. package/dist/mcp/generated/docs/loading-message.md +11 -6
  76. package/dist/mcp/generated/docs/markdown-container.md +1 -1
  77. package/dist/mcp/generated/docs/markdown-content.md +13 -31
  78. package/dist/mcp/generated/docs/markdown-latex.md +3 -3
  79. package/dist/mcp/generated/docs/markdown-mermaid.md +3 -3
  80. package/dist/mcp/generated/docs/mermaid-content.md +9 -4
  81. package/dist/mcp/generated/docs/message-container.md +70 -12
  82. package/dist/mcp/generated/docs/message-loading.md +120 -0
  83. package/dist/mcp/generated/docs/message-render.md +21 -9
  84. package/dist/mcp/generated/docs/message-tools.md +10 -5
  85. package/dist/mcp/generated/docs/messages.md +75 -11
  86. package/dist/mcp/generated/docs/overflow-tips.md +4 -4
  87. package/dist/mcp/generated/docs/preview-toolbar.md +42 -0
  88. package/dist/mcp/generated/docs/questions-container.md +88 -0
  89. package/dist/mcp/generated/docs/reasoning-message.md +10 -5
  90. package/dist/mcp/generated/docs/reference-content.md +10 -5
  91. package/dist/mcp/generated/docs/reference-doc-content.md +112 -0
  92. package/dist/mcp/generated/docs/schema.md +93 -0
  93. package/dist/mcp/generated/docs/scroll-btn.md +8 -3
  94. package/dist/mcp/generated/docs/selection-footer.md +9 -4
  95. package/dist/mcp/generated/docs/selection-question.md +91 -0
  96. package/dist/mcp/generated/docs/shortcut-btn.md +10 -5
  97. package/dist/mcp/generated/docs/shortcut-btns.md +10 -5
  98. package/dist/mcp/generated/docs/shortcut-render.md +11 -10
  99. package/dist/mcp/generated/docs/simple-table.md +103 -0
  100. package/dist/mcp/generated/docs/text-content.md +9 -4
  101. package/dist/mcp/generated/docs/theme.md +3 -3
  102. package/dist/mcp/generated/docs/tool-approval-card.md +148 -0
  103. package/dist/mcp/generated/docs/tool-btn.md +9 -4
  104. package/dist/mcp/generated/docs/tool-message.md +10 -5
  105. package/dist/mcp/generated/docs/toolcall-render.md +10 -5
  106. package/dist/mcp/generated/docs/use-animation-text.md +4 -4
  107. package/dist/mcp/generated/docs/use-clipboard.md +3 -3
  108. package/dist/mcp/generated/docs/use-command-selection.md +1 -1
  109. package/dist/mcp/generated/docs/use-custom-tab.md +1 -1
  110. package/dist/mcp/generated/docs/use-global-config.md +1 -1
  111. package/dist/mcp/generated/docs/use-menu-keydown.md +1 -1
  112. package/dist/mcp/generated/docs/use-message-group.md +40 -9
  113. package/dist/mcp/generated/docs/use-observer-visible-list.md +1 -1
  114. package/dist/mcp/generated/docs/user-feedback.md +8 -3
  115. package/dist/mcp/generated/docs/user-message.md +10 -5
  116. package/dist/mcp/generated/docs/user-question-answered-card.md +106 -0
  117. package/dist/mcp/generated/docs/user-question-card.md +211 -0
  118. package/dist/mcp/generated/docs/user-question-choice.md +108 -0
  119. package/dist/mcp/generated/docs/user-question-option.md +42 -0
  120. package/dist/mcp/generated/docs/vnode-renderer.md +126 -0
  121. package/dist/mcp/generated/index.json +1061 -532
  122. package/dist/mcp/index.js +0 -0
  123. package/dist/mcp/server.js +1 -1
  124. package/dist/mcp/server.js.map +1 -1
  125. package/dist/mcp/tools/list-components.d.ts +7 -6
  126. package/dist/mcp/tools/list-components.js +23 -29
  127. package/dist/mcp/tools/list-components.js.map +1 -1
  128. package/dist/mcp/tools/search-docs.js +1 -1
  129. package/dist/mcp/tools/search-docs.js.map +1 -1
  130. package/dist/mcp/utils/doc-loader.d.ts +1 -1
  131. package/dist/plugins/index.d.ts +0 -1
  132. package/dist/types/custom.d.ts +0 -1
  133. package/dist/types/editor.d.ts +0 -6
  134. package/dist/types/input.d.ts +1 -1
  135. package/dist/types/tool.d.ts +2 -2
  136. package/dist/utils/index.d.ts +0 -1
  137. package/dist/utils/utils.d.ts +0 -1
  138. package/package.json +23 -21
  139. package/dist/plugins/markdown-bk-inline-style.d.ts +0 -20
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- AssistantMessage 渲染 AI 助手回复:正文由 ContentRender(可被默认插槽替换)与 ToolCallRender 展示工具调用及 MCP 标记。 toolCalls[].toolMessage 可内联工具执行结果。用于 MessageRender 分发的 assistant 角色,流式场景配合 streaming 状态更新。
4
+ 渲染助手消息主体、工具调用与文件内容,默认插槽可覆盖正文渲染。 源码位置:src/components/chat-message/assistant-message/assistant-message.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **message-render** — 由 MessageRender 在 role 为 assistant 时创建
@@ -12,8 +12,13 @@ AssistantMessage 渲染 AI 助手回复:正文由 ContentRender(可被默认
12
12
  <!-- FULL DOC -->
13
13
 
14
14
  # AssistantMessage AI 助手消息
15
+ ## 源码事实
15
16
 
16
- > **层级**:分子组件 · **功能域**:消息展示
17
+ - **源码位置**:`src/components/chat-message/assistant-message/assistant-message.vue`
18
+ - **能力域**:消息系统
19
+ - **能力说明**:渲染助手消息主体、工具调用与文件内容,默认插槽可覆盖正文渲染。
20
+
21
+ > **能力域**:消息系统
17
22
 
18
23
  AI 助手消息展示组件,负责渲染 AI 回复的文本内容和工具调用(Tool Calls)结果。
19
24
 
@@ -419,6 +424,6 @@ interface ToolMessage extends BaseMessage<MessageRole.Tool, string> {
419
424
 
420
425
  ## 关联组件
421
426
 
422
- - [MessageRender](./message-render.md) — assistant 角色由其实例化
423
- - [ToolMessage](./tool-message.md) — 工具执行结果可通过 toolCall.toolMessage 内联
424
- - [ToolcallRender](./toolcall-render.md) — 工具调用列表渲染
427
+ - [MessageRender](/components/message/message-render) — assistant 角色由其实例化
428
+ - [ToolMessage](/components/message/tool-message) — 工具执行结果可通过 toolCall.toolMessage 内联
429
+ - [ToolcallRender](/components/agent/toolcall-render) — 工具调用列表渲染
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- ChatContainer 提供完整 AI 对话布局:分栏(ResizeLayout)、消息列表(MessageContainer)、输入(ChatInput)、执行摘要(ExecutionSummary)、快捷表单(ShortcutRender)与多选栏(SelectionFooter)。 内置 useMessageGroup、分享与自定义 Tab 等能力;对 MessageContainer/ChatInput 下推 inputStatus(末尾 Loading 占位时推导 Fetching),适合一站式接入。 通过 props 传入 messages、shortcuts 等,事件与 ChatInput/MessageContainer 对齐;renderMode 会通过内部 provide 下传给子内容组件。
4
+ 完整对话容器,组合消息列表、输入区、快捷指令、执行摘要、分享选择和自定义 Tab 源码位置:src/components/chat-container/chat-container.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **message-container** — 消息列表与滚动区域
@@ -14,16 +14,23 @@ ChatContainer 提供完整 AI 对话布局:分栏(ResizeLayout)、消息
14
14
  <!-- FULL DOC -->
15
15
 
16
16
  # ChatContainer 聊天容器
17
+ ## 源码事实
17
18
 
18
- > **层级**:分子组件 · **功能域**:输入交互
19
+ - **源码位置**:`src/components/chat-container/chat-container.vue`
20
+ - **能力域**:对话搭建
21
+ - **能力说明**:完整对话容器,组合消息列表、输入区、快捷指令、执行摘要、分享选择和自定义 Tab。
22
+
23
+ > **能力域**:对话搭建
19
24
 
20
25
  顶层聊天容器组件,整合了 `MessageContainer`(消息列表)、`ChatInput`(输入框)、`ExecutionSummary`(执行摘要面板)、`ShortcutRender`(快捷指令表单)和 `SelectionFooter`(多选操作栏)。提供完整的 AI 对话界面布局能力。
21
26
 
22
27
  ## 核心能力
23
28
 
24
- - **分栏布局**:基于 `ResizeLayout` 的可拖拽分栏;**侧栏是否展示 Tab / 执行摘要、以及分栏是否进入折叠样式(`ai-is-collapse`)以 `executionGroups` 与执行情况搜索关键词 `keyword` 共同决定**(`executionGroups` 由 `useMessageGroup` 从消息中过滤工具调用与 FlowAgent 记录;`keyword` 来自 `ExecutionSummary` 的 `@update-keyword`)。当 `executionGroups` 为空且未输入搜索词时,侧栏 Tab 与执行摘要不展示;**用户正在搜索执行情况时(`keyword` 非空),即使暂无执行类消息也会保留侧栏**,避免搜索态被折叠
29
+ - **分栏布局**:基于 `ResizeLayout` 的可拖拽分栏;**侧栏是否展示 Tab / 执行摘要、以及分栏是否进入折叠样式(`ai-is-collapse`)以 `executionGroups` 为准**(由 `useMessageGroup` 从消息中过滤出工具调用与 FlowAgent 执行记录),**不以原始 `messages.length` 判断**。因此仅有普通对话、尚无执行类消息时,侧栏内容与「执行情况」区域可能为空,布局上与无执行数据时一致
25
30
  - **消息分组**:内置 `useMessageGroup` 自动处理消息分组、Tool 合并、Loading 注入
26
31
  - **输入区状态推导**:传给 `MessageContainer` 与 `ChatInput` 的 `messageStatus` 为内部计算值 `inputStatus`:当分组中存在 id 为 `LOADING_MESSAGE_ID`(`'__loading__'`,由 `useMessageGroup` 注入的占位 Loading 消息)时,对内使用 `MessageStatus.Fetching`;否则使用外部传入的 `messageStatus`。用于在「已发用户消息、尚未流式」阶段与流式中一致地展示停止能力,并避免输入区重复发送
32
+ - **待审批发送阻塞**:当消息中存在 `AIDevToolApproval` 且状态为 `pending` / `draft` 的中断项时,`useMessageGroup` 会返回待审批提示,容器在输入区上方展示提示并通过 `ChatInput.sendDisabledTip` 禁止继续发送
33
+ - **用户问题中断**:当消息中存在待回答 `UserQuestion` 中断时,容器会在输入区上方挂载 `UserQuestionCard`;若配置了 `onInterruptResume`,用户也可直接在输入框输入自由文本并作为 Others 回答 resume
27
34
  - **执行摘要**:侧边栏展示工具调用 / FlowAgent 执行记录,支持关键词搜索和对话定位
28
35
  - **自定义 Tab**:通过 `useCustomTabProvider` 支持动态添加自定义 Tab(如节点详情)
29
36
  - **分享模式**:内置消息多选分享流程,选中用户消息后确认分享
@@ -39,18 +46,20 @@ ai-chat-container
39
46
  ├── aside(侧边栏)
40
47
  │ ├── Tab 标签页
41
48
  │ │ ├── 执行情况(默认 Tab)
42
- │ │ └── 自定义 Tab × N(可关闭;标签可由 `getSideTabRenderComponent` 自定义)
49
+ │ │ └── 自定义 Tab × N(可关闭)
43
50
  │ ├── ExecutionSummary(执行情况 Tab 内容)
44
- │ ├── 自定义 Tab 组件(`getSideRenderComponent` 优先,否则 `data.component`;可向子组件注入 #locateButton)
51
+ │ ├── 自定义 Tab 组件(通过 component :is 渲染,可向子组件注入 #locateButton)
45
52
  │ └── collapse-button(折叠按钮)
46
53
  └── main(主内容区)
47
54
  ├── MessageContainer(有消息时)
55
+ │ ├── #group 插槽(可选,自定义消息组内容)
56
+ │ ├── #message 插槽(可选,自定义单条消息)
48
57
  │ └── 消息列表 + 工具栏
49
58
  ├── 欢迎页(无消息时,容器 .ai-welcome-content)
50
59
  │ └── welcome 插槽(默认:Banner + 欢迎标题 + 开场白 ContentRender;自定义则整块替换)
51
60
  ├── SelectionFooter(分享模式时)
52
61
  ├── ShortcutRender(有快捷指令时)
53
- └── ChatInput(默认状态)
62
+ └── ChatInput(默认状态,待审批时通过 interrupt slot 展示 InputInfoAlert)
54
63
  ```
55
64
 
56
65
  ## 基础用法
@@ -109,9 +118,9 @@ ai-chat-container
109
118
 
110
119
  侧边栏默认包含「执行情况」Tab,展示所有工具调用和 FlowAgent 类型的 Activity 消息。支持关键词搜索过滤和点击定位到对话中的消息位置。
111
120
 
112
- **展示条件**:当 `executionGroups` 为空且 `keyword` 为空时,不渲染侧栏 Tab 与 `ExecutionSummary`(折叠按钮亦隐藏);主区域仍可正常展示 `messages` 中的对话内容。用户在执行情况中输入搜索词后,侧栏会保持展示以显示「搜索结果为空」等状态。`renderMode === Share` 时侧栏隐藏,且分栏会应用与折叠一致的样式。
121
+ **展示条件**:当 `executionGroups` 为空时,不渲染侧栏 Tab 与 `ExecutionSummary`(折叠按钮亦隐藏);主区域仍可正常展示 `messages` 中的对话内容。`renderMode === Share` 时侧栏隐藏,且分栏会应用与折叠一致的样式。
113
122
 
114
- **自定义 Tab 联动**:当 `executionGroups` 变为空且搜索词已清空时,容器会**自动重置自定义 Tab**(`resetCustomTab`),避免残留节点详情等 Tab;若用户仍在搜索(`keyword` 非空),不会触发重置。
123
+ **自定义 Tab 联动**:当 `executionGroups` 变为空(例如会话清空或仅剩无执行类消息)时,容器会**自动重置自定义 Tab**(`resetCustomTab`),避免残留节点详情等 Tab
115
124
 
116
125
  ```vue
117
126
  <template>
@@ -147,51 +156,11 @@ ai-chat-container
147
156
 
148
157
  ## 自定义 Tab
149
158
 
150
- 通过 `ref` 获取组件实例后,使用 `addCustomTab` / `removeCustomTab` 动态管理侧边栏 Tab。若 **`executionGroups` 变为空且搜索词已清空**,容器会清空自定义 Tab 状态(与侧栏执行数据联动,见上文「侧边栏与执行摘要」)。
151
-
152
- ### 侧栏渲染扩展
153
-
154
- 应用层可通过以下 Props 覆盖默认 Tab 标签与侧栏内容区的渲染逻辑(例如 FlowAgent 节点详情使用业务自定义组件):
155
-
156
- | Prop | 说明 |
157
- | ---- | ---- |
158
- | `getSideTabRenderComponent` | `(h, tab, { removeCustomTab }) => VNode \| undefined`。返回自定义 Tab 标签 VNode;未返回时使用默认图标 + `tab.label` + 关闭按钮 |
159
- | `getSideRenderComponent` | `(h, props) => VNode \| undefined`。返回侧栏内容区组件 VNode;未返回时使用 `selectedTab.data.component` |
160
-
161
- 侧栏内容区实现上会以 **`selectedTab.name` 作为外层 `key`**,切换 Tab 时重建子树,避免插槽与局部状态残留;当前 Tab 的 `:is` 由内部 **`computed`** 根据 `getSideRenderComponent(h, selectedTab.data.props)` 与 `data.component` 解析,保证 Tab 切换或 `onCustomTabChange` 异步更新 props 后内容类型与数据一致。
162
-
163
- ```vue
164
- <template>
165
- <ChatContainer
166
- :get-side-tab-render-component="renderSideTab"
167
- :get-side-render-component="renderSidePanel"
168
- ...
169
- />
170
- </template>
171
-
172
- <script setup lang="ts">
173
- import { h } from 'vue';
174
- import type { CustomTab } from '@blueking/chat-x';
175
-
176
- const renderSideTab = (createElement, tab, { removeCustomTab }) => {
177
- if (tab.name.startsWith('custom-')) {
178
- return createElement('span', {}, tab.label);
179
- }
180
- return undefined; // 走默认 Tab 标签
181
- };
182
-
183
- const renderSidePanel = (createElement, props) => {
184
- if (props?.has_confidence) {
185
- return createElement(MyConfidencePanel, props);
186
- }
187
- return undefined; // 走 tab.data.component
188
- };
189
- </script>
190
- ```
159
+ 通过 `ref` 获取组件实例后,使用 `addCustomTab` / `removeCustomTab` 动态管理侧边栏 Tab。若 **`executionGroups` 变为空**,容器会清空自定义 Tab 状态(与侧栏执行数据联动,见上文「侧边栏与执行摘要」)。
191
160
 
192
161
  ### 自定义 Tab 与「在对话中定位」
193
162
 
194
- `addCustomTab` 的 `data` 可携带 **`messageUid`**(与对应活动消息的 `message.uid` 一致)。`ChatContainer` 在侧栏用 `<component :is="sideRenderComponent">`(内部计算属性,见上文「侧栏渲染扩展」)渲染自定义 Tab 时,会向子组件提供 **`locateButton` 插槽**:默认渲染「在对话中定位」按钮,点击后调用内部 `handleLocateMessageGroup(messageUid)`,优先滚动到主区域 `document.getElementById(messageUid)`;若不存在该节点,则在当前 `messageGroups` 中查找包含 `message.uid === messageUid` 的消息组,并滚动到该组的容器(`MessageGroup.uid` 作为组级 `id`)。
163
+ `addCustomTab` 的 `data` 可携带 **`messageUid`**(与对应活动消息的 `message.uid` 一致)。`ChatContainer` 在侧栏用 `<component :is>` 渲染自定义 Tab 时,会向子组件提供 **`locateButton` 插槽**:默认渲染「在对话中定位」按钮,点击后调用内部 `handleLocateMessageGroup(messageUid)`,优先滚动到主区域 `document.getElementById(messageUid)`;若不存在该节点,则在当前 `messageGroups` 中查找包含 `message.uid === messageUid` 的消息组,并滚动到该组的容器(`MessageGroup.uid` 作为组级 `id`)。
195
164
 
196
165
  子组件若需展示该按钮,请在模板中声明 `<slot name="locateButton" />`(例如 FlowAgent 节点详情标题栏)。`FlowAgentContent` 等会在打开节点详情 Tab 时将 `messageUid` 写入 `data`,与 `ActivityMessage` 下传给内容区的 `message-uid` 对齐。
197
166
 
@@ -302,6 +271,93 @@ ai-chat-container
302
271
 
303
272
  `messageStatus` 为 `streaming` 时,底部固定区域显示「停止生成」按钮,点击后触发 `@stop-streaming` 事件:
304
273
 
274
+ ## 待审批阻塞发送
275
+
276
+ 当会话中存在待审批的 AI Dev 工具审批中断时,`ChatContainer` 会在输入框上方展示提示,并禁用发送按钮。用户需要在审批卡片中点击「取消审批」或等待状态变化后,才能继续发送新消息。
277
+
278
+ ```vue
279
+ <template>
280
+ <ChatContainer
281
+ v-model="inputValue"
282
+ :messages="messages"
283
+ message-status="complete"
284
+ :on-interrupt-resume="handleInterruptResume"
285
+ :on-send-message="handleSendMessage"
286
+ :on-stop-sending="handleStopSending"
287
+ />
288
+ </template>
289
+ ```
290
+
291
+ **渲染效果**(待审批单存在时,输入区上方展示提示,发送按钮置灰)
292
+
293
+ ## 用户问题中断
294
+
295
+ 当会话中最近一条待处理 interrupt 包含 `InterruptReason.UserQuestion` 时,`ChatContainer` 会在 `ChatInput` 上方显示 [UserQuestionCard](/components/agent/user-question-card)。用户完成或跳过后通过 `onInterruptResume(payload, interrupt)` 通知业务侧继续 Agent。
296
+
297
+ ```vue
298
+ <template>
299
+ <ChatContainer
300
+ v-model="inputValue"
301
+ :messages="messages"
302
+ message-status="complete"
303
+ :on-interrupt-resume="handleInterruptResume"
304
+ :on-send-message="handleSendMessage"
305
+ />
306
+ </template>
307
+
308
+ <script setup lang="ts">
309
+ import { type OnInterruptResume } from '@blueking/chat-x';
310
+
311
+ const handleInterruptResume: OnInterruptResume = async (payload, interrupt) => {
312
+ // UserQuestion 完成时 payload 为 UserQuestionResume
313
+ // 自由文本输入也会转换为 label: 'others' 的单条回答
314
+ await resumeAgent({ interruptId: interrupt.id, resume: payload });
315
+ };
316
+ </script>
317
+ ```
318
+
319
+ 如果没有传入 `onInterruptResume`,输入框自由文本不会被中断逻辑截获,仍然走普通 `onSendMessage`,避免输入被静默清空。
320
+
321
+ ## 自定义消息组渲染
322
+
323
+ 通过 `#group` 插槽可替换单个消息组的默认内容,透传至内部 `MessageContainer`。外层消息组容器(`id`、hover、选中背景)仍由 `MessageContainer` 管理。
324
+
325
+ > **注意**:提供 `#group` 后需自行编排组内全部 UI(Checkbox、消息列表、`MessageTools`);若只需替换单条消息,请使用 `#message` 插槽。详见 [MessageContainer 自定义消息组渲染](/components/setup/message-container#自定义消息组渲染)。
326
+
327
+ ```vue
328
+ <ChatContainer
329
+ v-model="inputValue"
330
+ :messages="messages"
331
+ message-status="complete"
332
+ :on-send-message="handleSendMessage"
333
+ >
334
+ <template #group="{ group }">
335
+ <MyCustomGroup :group="group" />
336
+ </template>
337
+ </ChatContainer>
338
+ ```
339
+
340
+ ### 自定义题目渲染
341
+
342
+ 通过 `#interruptQuestion` slot 可覆盖输入区上方 `UserQuestionCard` 的默认选择题渲染,参数与 [UserQuestionCard](/components/agent/user-question-card) 的 `#question` 一致:
343
+
344
+ ```vue
345
+ <ChatContainer
346
+ v-model="inputValue"
347
+ :messages="messages"
348
+ :on-interrupt-resume="handleInterruptResume"
349
+ :on-send-message="handleSendMessage"
350
+ >
351
+ <template #interruptQuestion="{ question, qIndex, answer, setAnswer, confirm }">
352
+ <MyCustomForm
353
+ :model="question"
354
+ @change="setAnswer"
355
+ @submit="confirm"
356
+ />
357
+ </template>
358
+ </ChatContainer>
359
+ ```
360
+
305
361
  ## 分享模式
306
362
 
307
363
  点击消息工具栏的「分享」按钮后进入分享模式,底部出现 `SelectionFooter` 操作栏:
@@ -379,16 +435,14 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
379
435
 
380
436
  | 属性名 | 类型 | 默认值 | 说明 |
381
437
  | ------------------ | ---------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
382
- | chatLoading | `boolean` | — | 整体加载状态,`true` 时显示 Loading 遮罩 |
383
- | commonTippyOptions | `AITippyProps` | — | 通用 Tippy 配置(`appendTo` / `placement` / `zIndex`),传入的选项会注入到所有使用 `v-overflow-tips` 的子组件中 |
384
- | getSideRenderComponent | `(h, props?) => VNode \| undefined` | — | 自定义侧栏内容区渲染;未返回时使用 `selectedTab.data.component` |
385
- | getSideTabRenderComponent | `(h, tab, { removeCustomTab }) => VNode \| undefined` | — | 自定义侧栏 Tab 标签渲染;未返回时使用默认图标 + 文案 + 关闭按钮 |
386
- | openingRemark | `string` | — | 开场白,无消息时显示,支持 Markdown |
438
+ | chatLoading | `boolean` | — | 整体加载状态,`true` 时显示 Loading 遮罩 |
439
+ | commonTippyOptions | `AITippyProps` | — | 通用 Tippy 配置,传入的选项会注入到所有使用 `v-overflow-tips` 的子组件中 |
440
+ | openingRemark | `string` | — | 开场白,无消息时显示,支持 Markdown |
387
441
  | placement | `'left' \| 'right'` | `'left'` | 侧边栏位置 |
388
442
  | resizeProps | `{ disabled?: boolean; initialDivide?: number \| string; max?: number; min?: number }` | — | 透传给内部 `ResizeLayout` 的可选配置,与默认 `collapsible: false`、`immediate: true`、`min: 400` 合并;`placement` 始终取自本组件 `placement`;`initialDivide` 可为像素数字或百分比等字符串(与 bkui ResizeLayout 一致) |
389
443
  | onCustomTabChange | `(tab: CustomTab) => Promise<any>` | — | 自定义 Tab 切换回调,返回值作为 Tab 组件 props |
390
444
 
391
- > 完整 Props 列表请参考 [ChatInput](./chat-input.md) 和 [MessageContainer](./message-container.md) 文档。
445
+ > 完整 Props 列表请参考 [ChatInput](/components/input/chat-input) 和 [MessageContainer](/components/setup/message-container) 文档。
392
446
 
393
447
  ### v-model
394
448
 
@@ -413,12 +467,14 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
413
467
 
414
468
  ### Slots
415
469
 
416
- | 插槽名 | 参数 | 说明 |
417
- | ---------- | -------------------------------------- | ---------------------------------------------------------------------------------------------- |
418
- | codeHeader | `{ language: string; token: Token[] }` | 代码块头部自定义操作区域,透传给 MessageRender → ContentRender → MarkdownContent → CodeContent |
419
- | default | 消息列表相关绑定(messages 等) | 自定义消息列表区域 |
420
- | message | `{ message, messageToolsStatus }` | 自定义单条消息渲染 |
421
- | welcome | `{ openingRemark: string }` | 无消息时自定义欢迎页;传入则替换默认 Banner、标题与开场白区域(整块替换) |
470
+ | 插槽名 | 参数 | 说明 |
471
+ | ----------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
472
+ | codeHeader | `{ language: string; token: Token[] }` | 代码块头部自定义操作区域,透传给 MessageRender → ContentRender → MarkdownContent → CodeContent |
473
+ | default | 消息列表相关绑定(messages 等) | 自定义消息列表区域 |
474
+ | group | `{ group: MessageGroup }` | 自定义单个消息组内容,透传至 MessageContainer 的 `#group`;替换默认 Checkbox、消息列表与工具栏 |
475
+ | interruptQuestion | `{ question, qIndex, answer, setAnswer, confirm }` | 自定义 UserQuestion 单题渲染,透传至输入区上方 UserQuestionCard 的 `#question` |
476
+ | message | `{ message, messageToolsStatus, onInterruptResume }` | 自定义单条消息渲染;自定义渲染中断消息时需继续透传 `onInterruptResume` |
477
+ | welcome | `{ openingRemark: string }` | 无消息时自定义欢迎页;传入则替换默认 Banner、标题与开场白区域(整块替换) |
422
478
 
423
479
  ### Expose
424
480
 
@@ -463,7 +519,19 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
463
519
  ## 类型定义
464
520
 
465
521
  ```typescript
466
- import { ChatContainer, RenderMode, type CustomTab, type Shortcut, type Message } from '@blueking/chat-x';
522
+ import { ChatContainer, RenderMode, MessageRole, type CustomTab, type MessageGroup, type Shortcut, type Message } from '@blueking/chat-x';
523
+
524
+ // 消息组(由 useMessageGroup 生成)
525
+ interface MessageGroup {
526
+ checked: boolean;
527
+ isHover: boolean;
528
+ messages: Message[];
529
+ pause?: boolean;
530
+ startTime?: number;
531
+ type: MessageRole;
532
+ uid: string;
533
+ userMessageTitle?: number | string;
534
+ }
467
535
 
468
536
  // 自定义 Tab(data 可与 messageUid 组合,供侧栏定位主对话)
469
537
  interface CustomTab<T = Record<string, unknown>> {
@@ -482,8 +550,8 @@ interface Shortcut {
482
550
 
483
551
  ## 关联组件
484
552
 
485
- - [MessageContainer](./message-container.md) — 消息列表区域
486
- - [ChatInput](./chat-input.md) — 输入与快捷指令
487
- - [ShortcutRender](./shortcut-render.md) — 快捷指令表单
488
- - [ExecutionSummary](./execution-summary.md) — 执行摘要侧栏
489
- - [SelectionFooter](../atomic/selection-footer.md) — 多选操作栏
553
+ - [MessageContainer](/components/setup/message-container) — 消息列表区域
554
+ - [ChatInput](/components/input/chat-input) — 输入与快捷指令
555
+ - [ShortcutRender](/components/input/shortcut-render) — 快捷指令表单
556
+ - [ExecutionSummary](/components/agent/execution-summary) — 执行摘要侧栏
557
+ - [SelectionFooter](/components/input/selection-footer) — 多选操作栏
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- ChatInput 是聊天主输入区,集成富文本编辑(/ 提示词模板、@ 资源引用)、消息引用、附件上传与快捷指令入口。 通过 prompts、resources、shortcuts 等 props 配置能力,配合 messageStatus 控制发送、流式与停止。 内部组合 ShortcutBtns、FileUploadBtn 等,与 ShortcutRender 联动完成含表单的快捷指令流程。
4
+ 聊天输入区,组合富文本输入、快捷指令、附件、引用、发送/停止等交互。 源码位置:src/components/chat-input/chat-input.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **shortcut-btns** — 底部附件区默认展示的快捷指令列表
@@ -14,8 +14,13 @@ ChatInput 是聊天主输入区,集成富文本编辑(/ 提示词模板、@
14
14
  <!-- FULL DOC -->
15
15
 
16
16
  # ChatInput 聊天输入框
17
+ ## 源码事实
17
18
 
18
- > **层级**:分子组件 · **功能域**:输入交互
19
+ - **源码位置**:`src/components/chat-input/chat-input.vue`
20
+ - **能力域**:输入交互
21
+ - **能力说明**:聊天输入区,组合富文本输入、快捷指令、附件、引用、发送/停止等交互。
22
+
23
+ > **能力域**:输入交互
19
24
 
20
25
  聊天消息输入框组件,支持快捷指令选择、资源 `@` 引用、Prompt `/` 模板、消息引用、文件上传(拖拽/粘贴/点击)等功能。
21
26
 
@@ -24,6 +29,7 @@ ChatInput 是聊天主输入区,集成富文本编辑(/ 提示词模板、@
24
29
  ```
25
30
  chat-input-container
26
31
  ├── slot#top(容器顶部,在输入框框体外侧)
32
+ ├── slot#interrupt(容器顶部,在输入框框体外侧,通常展示中断/审批提示)
27
33
  └── chat-input(框体,受 inputMaxHeight 控制)
28
34
  ├── slot#input-header(默认:cite 不为空时渲染引用区)
29
35
  ├── slot#files(默认:有上传文件时渲染文件预览区)
@@ -87,6 +93,28 @@ chat-input-container
87
93
 
88
94
  > **实现细节**:组件内部用 `messageState` 计算属性决定实际按钮状态:当 `messageStatus` 为 `pending`、`streaming` 或 `fetching` 时直接使用该状态(确保停止按钮始终可用);否则当输入为空或仅含空白字符时强制为 `disabled`,其余情况使用 `messageStatus` 的值。`fetching` 时按 Enter **不会**触发发送(避免请求中与 Loading 占位阶段重复提交)。
89
95
 
96
+ ### sendDisabledTip(业务阻塞发送)
97
+
98
+ 当业务侧需要临时阻止发送但仍允许用户输入时,可传入 `sendDisabledTip`。组件会置灰发送按钮,按钮 tooltip 展示该文案,并拦截点击发送、按 Enter 发送和 `triggerSendMessage()`:
99
+
100
+ ```vue
101
+ <template>
102
+ <ChatInput
103
+ v-model="inputValue"
104
+ message-status="complete"
105
+ :send-disabled-tip="interruptTip"
106
+ :on-send-message="handleSendMessage"
107
+ :on-stop-sending="handleStopSending"
108
+ >
109
+ <template #interrupt>
110
+ <div class="input-alert">{{ interruptTip }}</div>
111
+ </template>
112
+ </ChatInput>
113
+ </template>
114
+ ```
115
+
116
+ **渲染效果**
117
+
90
118
  ### Complete(可发送)
91
119
 
92
120
  ### Streaming(流式输出中,显示停止按钮)
@@ -370,11 +398,12 @@ chat-input-container
370
398
 
371
399
  ## 自定义插槽
372
400
 
373
- 组件提供 5 个插槽用于自定义各区域内容:
401
+ 组件提供 6 个插槽用于自定义各区域内容:
374
402
 
375
403
  | 插槽名 | 位置 | 默认行为 |
376
404
  | -------------- | ------------------------------------------ | ------------------------------------------ |
377
405
  | `top` | 框体外部顶部(`.chat-input` 上方) | 无 |
406
+ | `interrupt` | 框体外部顶部,位于 `top` 之后 | 无,通常用于展示审批/中断提示 |
378
407
  | `input-header` | 框体内部顶部(编辑器上方) | `cite` 不为空时渲染引用区(`CiteContent`) |
379
408
  | `files` | 文件预览区 | 有上传文件时渲染 `FileContent` |
380
409
  | `attachment` | 底部工具栏快捷指令区(FileUploadBtn 右侧) | 快捷指令按钮列表 / 已选快捷指令 |
@@ -393,6 +422,11 @@ chat-input-container
393
422
  <div class="input-tips">当前模型: GPT-4 · 剩余 Token: 12,800</div>
394
423
  </template>
395
424
 
425
+ <!-- 框体外顶部,适合展示中断、审批等业务提示 -->
426
+ <template #interrupt>
427
+ <div class="input-alert">当前会话有待审批单,暂时不能继续发送</div>
428
+ </template>
429
+
396
430
  <!-- 替换引用区,可自定义引用样式 -->
397
431
  <template #input-header>
398
432
  <div class="custom-header">自定义头部内容</div>
@@ -422,7 +456,7 @@ chat-input-container
422
456
  </template>
423
457
  ```
424
458
 
425
- **渲染效果**(顶部自定义模型信息提示)
459
+ **渲染效果**(顶部自定义模型信息与中断提示)
426
460
 
427
461
  ## Expose(模板引用)
428
462
 
@@ -467,6 +501,7 @@ chat-input-container
467
501
  | placeholder | `string` | 见默认值 | - | 编辑器占位符,支持多行 |
468
502
  | inputMaxHeight | `number` | `200` | - | 框体最大高度(px),有文件时自动加上文件预览区高度 |
469
503
  | defaultUploadFiles | `UploadFile[]` | - | - | 预设已上传的文件列表 |
504
+ | sendDisabledTip | `string` | - | - | 业务阻塞发送时的 tooltip 提示;传入后发送按钮置灰,点击、Enter 与 `triggerSendMessage()` 均不会发送 |
470
505
  | supportUpload | `boolean` | `true` | - | 是否显示文件上传按钮 |
471
506
  | tippyOptions | `AITippyProps` | — | - | 透传给 FileUploadBtn 和 InputAttachment 的 tooltip 配置 |
472
507
  | onSendMessage | `(content: UserMessage['content'], docSchema: TagSchema) => Promise<void>` | - | - | 发送消息回调,无文件时 content 为字符串,有文件时为数组 |
@@ -494,6 +529,7 @@ chat-input-container
494
529
  | 插槽名 | 参数 | 说明 |
495
530
  | ------------ | ---------------------------------- | ---------------------------------------------------------- |
496
531
  | top | - | 框体(`.chat-input`)外部顶部,适合展示模型/Token 信息 |
532
+ | interrupt | - | 框体外部顶部,位于 `top` 后,适合展示审批/中断提示 |
497
533
  | input-header | - | 框体内顶部,替换引用区(`CiteContent`) |
498
534
  | files | `{ files: Partial<UploadFile>[] }` | 文件预览区 |
499
535
  | attachment | - | 底部快捷指令区,`FileUploadBtn` 在其左侧,不受此 slot 影响 |
@@ -628,8 +664,8 @@ type SendContent =
628
664
 
629
665
  ## 关联组件
630
666
 
631
- - [ShortcutBtns](../atomic/shortcut-btns.md) — 底部附件区默认快捷指令列表
632
- - [ShortcutBtn](../atomic/shortcut-btn.md) — 已选快捷指令单按钮展示
633
- - [ShortcutRender](./shortcut-render.md) — 含表单的快捷指令表单渲染
634
- - [ChatContainer](./chat-container.md) — 顶层布局中包裹输入区
635
- - [CiteContent](../atomic/cite-content.md) — 消息引用区内容展示
667
+ - [ShortcutBtns](/components/input/shortcut-btns) — 底部附件区默认快捷指令列表
668
+ - [ShortcutBtn](/components/input/shortcut-btn) — 已选快捷指令单按钮展示
669
+ - [ShortcutRender](/components/input/shortcut-render) — 含表单的快捷指令表单渲染
670
+ - [ChatContainer](/components/setup/chat-container) — 顶层布局中包裹输入区
671
+ - [CiteContent](/components/rendering/cite-content) — 消息引用区内容展示
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- CiteContent 在输入区上方以紧凑条带展示被引用文本片段,单行截断并可选关闭按钮移除引用。 常与 ChatInput 的引用预览区配合,不执行 HTML 渲染。
4
+ 渲染输入或消息中的引用片段。 源码位置:src/components/chat-content/cite-content/cite-content.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **chat-input** — 输入区展示待发送引用内容
@@ -10,8 +10,13 @@ CiteContent 在输入区上方以紧凑条带展示被引用文本片段,单
10
10
  <!-- FULL DOC -->
11
11
 
12
12
  # CiteContent 引用内容
13
+ ## 源码事实
13
14
 
14
- > **层级**:原子组件 · **功能域**:辅助组件
15
+ - **源码位置**:`src/components/chat-content/cite-content/cite-content.vue`
16
+ - **能力域**:内容渲染
17
+ - **能力说明**:渲染输入或消息中的引用片段。
18
+
19
+ > **能力域**:内容渲染
15
20
 
16
21
  展示被引用文本片段的紧凑条带组件。固定高度 28px,左侧引用图标 + 单行截断文本 + 可选关闭图标,背景灰色(`#f5f7fa`)。
17
22
 
@@ -135,4 +140,4 @@ const message = {
135
140
 
136
141
  ## 关联组件
137
142
 
138
- - [ChatInput](../molecular/chat-input.md) — 引用区常见挂载位置
143
+ - [ChatInput](/components/input/chat-input) — 引用区常见挂载位置
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- CodeContent 接收 markdown-it fence/code_block token,按行 highlight.js 高亮并带语言标签与复制。 必填 props 为 token 数组;mounted 事件用于滚动联动等。 由 MarkdownContent 在解析代码块时挂载,面向流式增量更新。
4
+ 渲染 Markdown 代码块,支持高亮、复制和 header 插槽。 源码位置:src/components/markdown-token/code-content/code-content.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **markdown-content** — 解析 Markdown 后生成 fence token 并渲染本组件
@@ -10,10 +10,15 @@ CodeContent 接收 markdown-it 的 fence/code_block token,按行 highlight.js
10
10
  <!-- FULL DOC -->
11
11
 
12
12
  # CodeContent 代码块渲染
13
+ ## 源码事实
13
14
 
14
- > **层级**:原子组件 · **功能域**:内容渲染
15
+ - **源码位置**:`src/components/markdown-token/code-content/code-content.vue`
16
+ - **能力域**:内容渲染
17
+ - **能力说明**:渲染 Markdown 代码块,支持高亮、复制和 header 插槽。
15
18
 
16
- 代码块渲染原子组件,专为 **Markdown 流式输出**设计。接收 `markdown-it` token 数组,基于 `highlight.js`(github-dark 主题)实现逐行语法高亮,顶部固定深色头部展示语言名和复制按钮。
19
+ > **能力域**:内容渲染
20
+
21
+ 代码块渲染基础组件,专为 **Markdown 流式输出**设计。接收 `markdown-it` token 数组,基于 `highlight.js`(github-dark 主题)实现逐行语法高亮,顶部固定深色头部展示语言名和复制按钮。
17
22
 
18
23
  ## 组件结构
19
24
 
@@ -204,4 +209,4 @@ import type { Token } from 'markdown-it';
204
209
 
205
210
  ## 关联组件
206
211
 
207
- - [MarkdownContent](./markdown-content.md) — 解析并传入 code fence token
212
+ - [MarkdownContent](/components/rendering/markdown-content) — 解析并传入 code fence token
@@ -1,7 +1,7 @@
1
1
  <!-- AI SUMMARY -->
2
2
  ## 快速了解
3
3
 
4
- CommonErrorContent 以红色错误图标加文案展示失败态,布局为 flex 横排,文本为纯文本插值。 在 MarkdownContent、ReasoningMessage 等链路上当 status 为 error 时自动替换内容区。
4
+ 展示统一错误提示内容。 源码位置:src/components/chat-content/common-error-content/common-error-content.vue。
5
5
 
6
6
  ### 关联组件
7
7
  - **markdown-content** — Markdown 渲染错误态展示
@@ -11,10 +11,15 @@ CommonErrorContent 以红色错误图标加文案展示失败态,布局为 fle
11
11
  <!-- FULL DOC -->
12
12
 
13
13
  # CommonErrorContent 通用错误内容
14
+ ## 源码事实
14
15
 
15
- > **层级**:原子组件 · **功能域**:辅助组件
16
+ - **源码位置**:`src/components/chat-content/common-error-content/common-error-content.vue`
17
+ - **能力域**:内容渲染
18
+ - **能力说明**:展示统一错误提示内容。
16
19
 
17
- 错误状态消息渲染原子组件。红色 `ErrorIcon`(14×14px,绝对定位)+ 文本区域,`display: flex` 水平排列。
20
+ > **能力域**:内容渲染
21
+
22
+ 错误状态消息渲染基础组件。红色 `ErrorIcon`(14×14px,绝对定位)+ 文本区域,`display: flex` 水平排列。
18
23
 
19
24
  通常由上层组件在 `status === 'error'` 时自动渲染,无需手动使用。
20
25
 
@@ -66,5 +71,5 @@ CommonErrorContent 以红色错误图标加文案展示失败态,布局为 fle
66
71
 
67
72
  ## 关联组件
68
73
 
69
- - [MarkdownContent](./markdown-content.md) — Markdown 错误态
70
- - [ReasoningMessage](../molecular/reasoning-message.md) — 推理错误态
74
+ - [MarkdownContent](/components/rendering/markdown-content) — Markdown 错误态
75
+ - [ReasoningMessage](/components/message/reasoning-message) — 推理错误态
@@ -36,6 +36,7 @@ enum MessageRole {
36
36
  HiddenSystem = 'hidden-system',
37
37
  HiddenUser = 'hidden-user',
38
38
  Info = 'info',
39
+ Interrupt = 'interrupt',
39
40
  Loading = 'loading',
40
41
  Pause = 'pause',
41
42
  Placeholder = 'placeholder',
@@ -72,6 +73,70 @@ enum MessageStatus {
72
73
  | --------------- | ---- |
73
74
  | `Fetching` | 请求中:与 `useMessageGroup` 在末尾用户消息后注入的 Loading 占位(`LOADING_MESSAGE_ID`)配合时,`ChatContainer` 会将传入输入区与列表底部的状态推导为该值,便于展示「停止」与禁止重复发送。 |
74
75
 
76
+ ### InterruptReason
77
+
78
+ human-in-the-loop 中断原因枚举,用于 `Interrupt.reason` 区分中断类型并选择对应的 UI 渲染器。
79
+
80
+ ```typescript
81
+ enum InterruptReason {
82
+ AIDevToolApproval = 'aidev:tool_approval',
83
+ UserQuestion = 'aidev:user_question',
84
+ }
85
+ ```
86
+
87
+ ### APPROVAL_STATUS
88
+
89
+ AI Dev 工具审批单状态枚举,`AIDevToolApprovalInterrupt.metadata.ticket.status` 使用该类型。
90
+
91
+ ```typescript
92
+ enum APPROVAL_STATUS {
93
+ ABANDONED = 'abandoned',
94
+ APPROVED = 'approved',
95
+ CANCELLED = 'cancelled',
96
+ DRAFT = 'draft',
97
+ EXPIRED = 'expired',
98
+ PENDING = 'pending',
99
+ REJECTED = 'rejected',
100
+ REVOKED = 'revoked',
101
+ }
102
+ ```
103
+
104
+ ### APPROVAL_STATUS_MAP
105
+
106
+ 审批单状态到展示文案的映射,供 `ToolApprovalCard` 等组件使用:
107
+
108
+ ```typescript
109
+ const APPROVAL_STATUS_MAP: Record<APPROVAL_STATUS, string> = {
110
+ [APPROVAL_STATUS.ABANDONED]: '已废弃',
111
+ [APPROVAL_STATUS.APPROVED]: '已通过',
112
+ [APPROVAL_STATUS.CANCELLED]: '已取消',
113
+ [APPROVAL_STATUS.DRAFT]: '待审批',
114
+ [APPROVAL_STATUS.EXPIRED]: '已过期',
115
+ [APPROVAL_STATUS.PENDING]: '待审批',
116
+ [APPROVAL_STATUS.REJECTED]: '已拒绝',
117
+ [APPROVAL_STATUS.REVOKED]: '已撤销',
118
+ };
119
+ ```
120
+
121
+ | 状态值 | 展示文案 |
122
+ | ----------- | -------- |
123
+ | `pending` | 待审批 |
124
+ | `draft` | 待审批 |
125
+ | `approved` | 已通过 |
126
+ | `rejected` | 已拒绝 |
127
+ | `cancelled` | 已取消 |
128
+ | `expired` | 已过期 |
129
+ | `abandoned` | 已废弃 |
130
+ | `revoked` | 已撤销 |
131
+
132
+ ### RunFinishedOutcome
133
+
134
+ AG-UI `RUN_FINISHED` 事件的结束结果类型。中断结果不再是字符串枚举,而是对象联合类型;`type: 'interrupt'` 时,中断列表放在 `interrupts` 字段中。
135
+
136
+ ```typescript
137
+ type RunFinishedOutcome = { interrupts: Interrupt[]; type: 'interrupt' } | { type: 'success' };
138
+ ```
139
+
75
140
  ### MessageContentType
76
141
 
77
142
  消息内容类型枚举:
@@ -238,6 +303,6 @@ console.log(
238
303
 
239
304
  ## 关联组件
240
305
 
241
- - [MessageTools](../components/molecular/message-tools.md) — 消息工具栏
242
- - [ChatInput](../components/molecular/chat-input.md) — 输入与状态
243
- - [MessageContainer](../components/molecular/message-container.md) — 工具与消息展示
306
+ - [MessageTools](../components/feedback/message-tools) — 消息工具栏
307
+ - [ChatInput](../components/input/chat-input) — 输入与状态
308
+ - [MessageContainer](../components/setup/message-container) — 工具与消息展示