@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.
- package/README.md +1 -1
- package/dist/ag-ui/types/constants.d.ts +16 -0
- package/dist/ag-ui/types/contents.d.ts +0 -2
- package/dist/ag-ui/types/index.d.ts +2 -0
- package/dist/ag-ui/types/interrupt.d.ts +107 -0
- package/dist/ag-ui/types/messages.d.ts +2 -0
- package/dist/ag-ui/types/schema.d.ts +42 -0
- package/dist/components/ai-questions/questions-container.vue.d.ts +3 -0
- package/dist/components/ai-questions/selection-question.vue.d.ts +3 -0
- package/dist/components/chat-content/flow-agent-content/flow-agent-node-detail.vue.d.ts +0 -2
- package/dist/components/chat-input/ai-slash-input/ai-slash-input.vue.d.ts +1 -3
- package/dist/components/chat-input/chat-input.vue.d.ts +10 -9
- package/dist/components/chat-input/input-attachment/input-attachment.vue.d.ts +1 -0
- 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
- package/dist/components/chat-message/interrupt-message/index.d.ts +2 -0
- package/dist/components/chat-message/interrupt-message/interrupt-message.vue.d.ts +17 -0
- package/dist/components/chat-message/interrupt-message/tool-approval-card.vue.d.ts +8 -0
- package/dist/components/chat-message/interrupt-message/user-question/index.d.ts +5 -0
- package/dist/components/chat-message/interrupt-message/user-question/use-user-question.d.ts +35 -0
- package/dist/components/chat-message/interrupt-message/user-question/user-question-answered-card.vue.d.ts +25 -0
- package/dist/components/chat-message/interrupt-message/user-question/user-question-card.vue.d.ts +25 -0
- package/dist/components/chat-message/interrupt-message/user-question/user-question-choice.vue.d.ts +13 -0
- package/dist/components/chat-message/interrupt-message/user-question/user-question-option.vue.d.ts +17 -0
- package/dist/components/chat-message/message-container/message-container.vue.d.ts +14 -7
- package/dist/components/chat-message/message-render/message-render.vue.d.ts +4 -0
- package/dist/components/index.d.ts +2 -6
- package/dist/composables/use-common.d.ts +1 -1
- package/dist/composables/use-custom-tab.d.ts +1 -1
- package/dist/composables/use-message-group.d.ts +2004 -224
- package/dist/directives/overflow-tips.d.ts +1 -1
- package/dist/icons/index.d.ts +1 -0
- package/dist/icons/interrupt.d.ts +24 -0
- package/dist/index.css +1 -1
- package/dist/index.js +5906 -5346
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +33 -2
- package/dist/mcp/generated/docs/activity-layout.md +138 -0
- package/dist/mcp/generated/docs/activity-message.md +18 -28
- package/dist/mcp/generated/docs/ai-image.md +9 -4
- package/dist/mcp/generated/docs/ai-loading.md +11 -6
- package/dist/mcp/generated/docs/ai-prompt-list.md +42 -0
- package/dist/mcp/generated/docs/ai-selection.md +10 -5
- package/dist/mcp/generated/docs/ai-slash-editor.md +43 -0
- package/dist/mcp/generated/docs/ai-slash-input.md +43 -0
- package/dist/mcp/generated/docs/ai-slash-menu.md +42 -0
- package/dist/mcp/generated/docs/animation-text.md +9 -4
- package/dist/mcp/generated/docs/assistant-message.md +10 -5
- package/dist/mcp/generated/docs/chat-container.md +136 -68
- package/dist/mcp/generated/docs/chat-input.md +45 -9
- package/dist/mcp/generated/docs/cite-content.md +8 -3
- package/dist/mcp/generated/docs/code-content.md +9 -4
- package/dist/mcp/generated/docs/common-error-content.md +10 -5
- package/dist/mcp/generated/docs/constants.md +68 -3
- package/dist/mcp/generated/docs/content-render.md +10 -5
- package/dist/mcp/generated/docs/delete-tool.md +9 -4
- package/dist/mcp/generated/docs/desc-panel.md +9 -4
- package/dist/mcp/generated/docs/detail-section.md +93 -0
- package/dist/mcp/generated/docs/execution-summary.md +10 -5
- package/dist/mcp/generated/docs/file-content.md +9 -4
- package/dist/mcp/generated/docs/file-upload-btn.md +11 -6
- package/dist/mcp/generated/docs/flow-agent-content.md +212 -0
- package/dist/mcp/generated/docs/flow-agent-node-detail.md +240 -0
- package/dist/mcp/generated/docs/highlight-keyword.md +10 -5
- package/dist/mcp/generated/docs/image-content.md +9 -4
- package/dist/mcp/generated/docs/image-preview-group.md +9 -4
- package/dist/mcp/generated/docs/image-preview.md +10 -5
- package/dist/mcp/generated/docs/info-message.md +7 -2
- package/dist/mcp/generated/docs/input-attachment.md +43 -0
- package/dist/mcp/generated/docs/input-info-alert.md +42 -0
- package/dist/mcp/generated/docs/interrupt-message.md +204 -0
- package/dist/mcp/generated/docs/interrupt.md +282 -0
- package/dist/mcp/generated/docs/key-value-content.md +9 -4
- package/dist/mcp/generated/docs/knowledge-rag-content.md +126 -0
- package/dist/mcp/generated/docs/latex-content.md +9 -4
- package/dist/mcp/generated/docs/loading-message.md +11 -6
- package/dist/mcp/generated/docs/markdown-container.md +1 -1
- package/dist/mcp/generated/docs/markdown-content.md +13 -31
- package/dist/mcp/generated/docs/markdown-latex.md +3 -3
- package/dist/mcp/generated/docs/markdown-mermaid.md +3 -3
- package/dist/mcp/generated/docs/mermaid-content.md +9 -4
- package/dist/mcp/generated/docs/message-container.md +70 -12
- package/dist/mcp/generated/docs/message-loading.md +120 -0
- package/dist/mcp/generated/docs/message-render.md +21 -9
- package/dist/mcp/generated/docs/message-tools.md +10 -5
- package/dist/mcp/generated/docs/messages.md +75 -11
- package/dist/mcp/generated/docs/overflow-tips.md +4 -4
- package/dist/mcp/generated/docs/preview-toolbar.md +42 -0
- package/dist/mcp/generated/docs/questions-container.md +88 -0
- package/dist/mcp/generated/docs/reasoning-message.md +10 -5
- package/dist/mcp/generated/docs/reference-content.md +10 -5
- package/dist/mcp/generated/docs/reference-doc-content.md +112 -0
- package/dist/mcp/generated/docs/schema.md +93 -0
- package/dist/mcp/generated/docs/scroll-btn.md +8 -3
- package/dist/mcp/generated/docs/selection-footer.md +9 -4
- package/dist/mcp/generated/docs/selection-question.md +91 -0
- package/dist/mcp/generated/docs/shortcut-btn.md +10 -5
- package/dist/mcp/generated/docs/shortcut-btns.md +10 -5
- package/dist/mcp/generated/docs/shortcut-render.md +11 -10
- package/dist/mcp/generated/docs/simple-table.md +103 -0
- package/dist/mcp/generated/docs/text-content.md +9 -4
- package/dist/mcp/generated/docs/theme.md +3 -3
- package/dist/mcp/generated/docs/tool-approval-card.md +148 -0
- package/dist/mcp/generated/docs/tool-btn.md +9 -4
- package/dist/mcp/generated/docs/tool-message.md +10 -5
- package/dist/mcp/generated/docs/toolcall-render.md +10 -5
- package/dist/mcp/generated/docs/use-animation-text.md +4 -4
- package/dist/mcp/generated/docs/use-clipboard.md +3 -3
- package/dist/mcp/generated/docs/use-command-selection.md +1 -1
- package/dist/mcp/generated/docs/use-custom-tab.md +1 -1
- package/dist/mcp/generated/docs/use-global-config.md +1 -1
- package/dist/mcp/generated/docs/use-menu-keydown.md +1 -1
- package/dist/mcp/generated/docs/use-message-group.md +40 -9
- package/dist/mcp/generated/docs/use-observer-visible-list.md +1 -1
- package/dist/mcp/generated/docs/user-feedback.md +8 -3
- package/dist/mcp/generated/docs/user-message.md +10 -5
- package/dist/mcp/generated/docs/user-question-answered-card.md +106 -0
- package/dist/mcp/generated/docs/user-question-card.md +211 -0
- package/dist/mcp/generated/docs/user-question-choice.md +108 -0
- package/dist/mcp/generated/docs/user-question-option.md +42 -0
- package/dist/mcp/generated/docs/vnode-renderer.md +126 -0
- package/dist/mcp/generated/index.json +1061 -532
- package/dist/mcp/index.js +0 -0
- package/dist/mcp/server.js +1 -1
- package/dist/mcp/server.js.map +1 -1
- package/dist/mcp/tools/list-components.d.ts +7 -6
- package/dist/mcp/tools/list-components.js +23 -29
- package/dist/mcp/tools/list-components.js.map +1 -1
- package/dist/mcp/tools/search-docs.js +1 -1
- package/dist/mcp/tools/search-docs.js.map +1 -1
- package/dist/mcp/utils/doc-loader.d.ts +1 -1
- package/dist/plugins/index.d.ts +0 -1
- package/dist/types/custom.d.ts +0 -1
- package/dist/types/editor.d.ts +0 -6
- package/dist/types/input.d.ts +1 -1
- package/dist/types/tool.d.ts +2 -2
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/utils.d.ts +0 -1
- package/package.json +23 -21
- package/dist/plugins/markdown-bk-inline-style.d.ts +0 -20
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
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](
|
|
423
|
-
- [ToolMessage](
|
|
424
|
-
- [ToolcallRender](
|
|
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
|
-
|
|
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`
|
|
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
|
|
49
|
+
│ │ └── 自定义 Tab × N(可关闭)
|
|
43
50
|
│ ├── ExecutionSummary(执行情况 Tab 内容)
|
|
44
|
-
│ ├── 自定义 Tab
|
|
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`
|
|
121
|
+
**展示条件**:当 `executionGroups` 为空时,不渲染侧栏 Tab 与 `ExecutionSummary`(折叠按钮亦隐藏);主区域仍可正常展示 `messages` 中的对话内容。`renderMode === Share` 时侧栏隐藏,且分栏会应用与折叠一致的样式。
|
|
113
122
|
|
|
114
|
-
**自定义 Tab 联动**:当 `executionGroups`
|
|
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`
|
|
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
|
|
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
|
|
383
|
-
| commonTippyOptions
|
|
384
|
-
|
|
|
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](
|
|
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
|
|
419
|
-
| default
|
|
420
|
-
|
|
|
421
|
-
|
|
|
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](
|
|
486
|
-
- [ChatInput](
|
|
487
|
-
- [ShortcutRender](
|
|
488
|
-
- [ExecutionSummary](
|
|
489
|
-
- [SelectionFooter](
|
|
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
|
-
|
|
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
|
-
组件提供
|
|
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](
|
|
632
|
-
- [ShortcutBtn](
|
|
633
|
-
- [ShortcutRender](
|
|
634
|
-
- [ChatContainer](
|
|
635
|
-
- [CiteContent](
|
|
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
|
-
|
|
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](
|
|
143
|
+
- [ChatInput](/components/input/chat-input) — 引用区常见挂载位置
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
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
|
-
|
|
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](
|
|
212
|
+
- [MarkdownContent](/components/rendering/markdown-content) — 解析并传入 code fence token
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
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
|
-
|
|
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](
|
|
70
|
-
- [ReasoningMessage](
|
|
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/
|
|
242
|
-
- [ChatInput](../components/
|
|
243
|
-
- [MessageContainer](../components/
|
|
306
|
+
- [MessageTools](../components/feedback/message-tools) — 消息工具栏
|
|
307
|
+
- [ChatInput](../components/input/chat-input) — 输入与状态
|
|
308
|
+
- [MessageContainer](../components/setup/message-container) — 工具与消息展示
|