@blueking/chat-x 0.0.45-beta.6 → 0.0.45-dev.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 +2 -0
- package/dist/ag-ui/types/index.d.ts +2 -0
- package/dist/ag-ui/types/interrupt.d.ts +152 -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-content.vue.d.ts +3 -0
- package/dist/components/chat-content/flow-agent-content/use-flow-agent.d.ts +4 -0
- package/dist/components/chat-content/flow-agent-content/use-flow-node-actions.d.ts +32 -0
- package/dist/components/chat-content/index.d.ts +2 -0
- package/dist/components/chat-input/chat-input.vue.d.ts +14 -8
- package/dist/components/chat-input/input-attachment/input-attachment.vue.d.ts +1 -0
- package/dist/components/chat-input/input-info-alert.vue.d.ts +6 -0
- package/dist/components/chat-message/activity-message/activity-message.vue.d.ts +4 -1
- package/dist/components/chat-message/assistant-message/assistant-message.vue.d.ts +1 -1
- 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 +9 -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 +3 -2
- package/dist/composables/use-global-config.d.ts +3 -0
- package/dist/composables/use-message-group.d.ts +2221 -354
- 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 +2570 -1936
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +34 -2
- package/dist/mcp/generated/docs/activity-layout.md +138 -0
- package/dist/mcp/generated/docs/activity-message.md +21 -7
- 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 +173 -19
- package/dist/mcp/generated/docs/chat-input.md +78 -10
- 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 +10 -5
- package/dist/mcp/generated/docs/flow-agent-content.md +252 -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 +216 -0
- package/dist/mcp/generated/docs/interrupt.md +377 -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 -8
- 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 +69 -11
- package/dist/mcp/generated/docs/message-loading.md +120 -0
- package/dist/mcp/generated/docs/message-render.md +23 -11
- 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 +10 -5
- 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 +50 -4
- package/dist/mcp/generated/docs/tool-approval-card.md +164 -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-flow-node-actions.md +124 -0
- package/dist/mcp/generated/docs/use-full-screen.md +3 -3
- package/dist/mcp/generated/docs/use-global-config.md +20 -5
- 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 +228 -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 +1105 -562
- 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/utils/utils.d.ts +2 -2
- package/package.json +4 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
渲染工具返回内容,JSON 场景交给 DescPanel 展示。 源码位置:src/components/chat-message/tool-message/tool-message.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **assistant-message** — 结果常作为 assistant 消息中 toolCall.toolMessage 内联展示
|
|
@@ -12,8 +12,13 @@ ToolMessage 展示工具(Function Call)执行返回,内部用 DescPanel
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ToolMessage 工具消息
|
|
15
|
+
## 源码事实
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
- **源码位置**:`src/components/chat-message/tool-message/tool-message.vue`
|
|
18
|
+
- **能力域**:消息系统
|
|
19
|
+
- **能力说明**:渲染工具返回内容,JSON 场景交给 DescPanel 展示。
|
|
20
|
+
|
|
21
|
+
> **能力域**:消息系统
|
|
17
22
|
|
|
18
23
|
工具(Function Call)执行结果展示组件。内部通过 `DescPanel` 渲染,标题固定为"返回内容",支持将 JSON 自动解析为 key-value 列表。
|
|
19
24
|
|
|
@@ -212,6 +217,6 @@ interface ToolMessage {
|
|
|
212
217
|
|
|
213
218
|
## 关联组件
|
|
214
219
|
|
|
215
|
-
- [AssistantMessage](
|
|
216
|
-
- [MessageRender](
|
|
217
|
-
- [DescPanel](
|
|
220
|
+
- [AssistantMessage](/components/message/assistant-message) — toolCall.toolMessage 内联场景
|
|
221
|
+
- [MessageRender](/components/message/message-render) — 独立 tool 消息派发
|
|
222
|
+
- [DescPanel](/components/rendering/desc-panel) — 返回内容面板
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
渲染 assistant toolCalls,展示工具调用状态、参数和结果。 源码位置:src/components/tool-call/toolcall-render/toolcall-render.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **desc-panel** — 详情区展示参数与描述文本
|
|
@@ -12,8 +12,13 @@ ToolcallRender 折叠展示一次工具/MCP 调用:头部显示名称、状态
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ToolcallRender 工具调用渲染器
|
|
15
|
+
## 源码事实
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
- **源码位置**:`src/components/tool-call/toolcall-render/toolcall-render.vue`
|
|
18
|
+
- **能力域**:Agent 能力
|
|
19
|
+
- **能力说明**:渲染 assistant toolCalls,展示工具调用状态、参数和结果。
|
|
20
|
+
|
|
21
|
+
> **能力域**:Agent 能力
|
|
17
22
|
|
|
18
23
|
展示 AI 调用外部工具/函数过程与结果的渲染组件。由**可折叠头部**和**详情面板**组成,根据 `status` 自动切换颜色和状态文案,支持 MCP 调用识别和内联结果展示。
|
|
19
24
|
|
|
@@ -294,6 +299,6 @@ interface ToolMessage {
|
|
|
294
299
|
|
|
295
300
|
## 关联组件
|
|
296
301
|
|
|
297
|
-
- [DescPanel](
|
|
298
|
-
- [HighlightKeyword](
|
|
299
|
-
- [ToolMessage](
|
|
302
|
+
- [DescPanel](/components/rendering/desc-panel) — 描述与参数面板
|
|
303
|
+
- [HighlightKeyword](/components/helper/highlight-keyword) — 标题高亮
|
|
304
|
+
- [ToolMessage](/components/message/tool-message) — 内联工具返回
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
useAnimationText 接收 MaybeRef<string> 与可选 AnimationConfig(fadeDuration、easing),返回 chunks 与 animationStyle。 监听文本变化:前缀追加则增量拆分为新 chunk 并触发动画,否则重置为单 chunk,适合流式输出逐段淡入。 全局样式已含 ai-markdown-fade-in。AnimationText
|
|
4
|
+
useAnimationText 接收 MaybeRef<string> 与可选 AnimationConfig(fadeDuration、easing),返回 chunks 与 animationStyle。 监听文本变化:前缀追加则增量拆分为新 chunk 并触发动画,否则重置为单 chunk,适合流式输出逐段淡入。 全局样式已含 ai-markdown-fade-in。AnimationText 组件内部封装同一逻辑。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **animation-text** — 封装 chunks 与样式渲染
|
|
@@ -126,7 +126,7 @@ useAnimationText 接收 MaybeRef<string> 与可选 AnimationConfig(fadeDuratio
|
|
|
126
126
|
</script>
|
|
127
127
|
```
|
|
128
128
|
|
|
129
|
-
> 详见 [AnimationText 组件文档](/components/
|
|
129
|
+
> 详见 [AnimationText 组件文档](/components/rendering/animation-text)。
|
|
130
130
|
|
|
131
131
|
## API
|
|
132
132
|
|
|
@@ -194,5 +194,5 @@ function useAnimationText(
|
|
|
194
194
|
|
|
195
195
|
## 关联组件
|
|
196
196
|
|
|
197
|
-
- [AnimationText](../components/
|
|
198
|
-
- [MarkdownContent](../components/
|
|
197
|
+
- [AnimationText](../components/rendering/animation-text) — 默认封装组件
|
|
198
|
+
- [MarkdownContent](../components/rendering/markdown-content) — 富文本流式展示场景。
|
|
@@ -201,6 +201,6 @@ export const useClipboard = () => {
|
|
|
201
201
|
|
|
202
202
|
## 关联组件
|
|
203
203
|
|
|
204
|
-
- [CodeContent](../components/
|
|
205
|
-
- [MessageContainer](../components/
|
|
206
|
-
- [UserMessage](../components/
|
|
204
|
+
- [CodeContent](../components/rendering/code-content) — 代码块复制
|
|
205
|
+
- [MessageContainer](../components/setup/message-container) — 助手消息复制
|
|
206
|
+
- [UserMessage](../components/message/user-message) — 用户消息复制
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
useFlowNodeActions 接收 onInterruptResume 与 openNodeDetail,返回 getNodeActions(task, node)。 失败节点按 retryable/skippable 展示重试/跳过,详情恒在末尾;点击 resume 时不传 interrupt。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **flow-agent-content** — FlowAgentContent 内部消费,驱动节点行尾按钮组渲染
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
<!-- FULL DOC -->
|
|
11
|
+
|
|
12
|
+
# useFlowNodeActions 节点行尾操作
|
|
13
|
+
|
|
14
|
+
> **分类**:composable
|
|
15
|
+
|
|
16
|
+
将 FlowAgent 节点行尾的「详情(打开侧栏)」与「重试 / 跳过(回传 Agent resume)」聚合为统一的声明式操作列表。`FlowAgentContent` 只需遍历 `getNodeActions` 返回值渲染按钮,显隐与点击行为均收敛于此 composable。
|
|
17
|
+
|
|
18
|
+
源码:`src/components/chat-content/flow-agent-content/use-flow-node-actions.ts`
|
|
19
|
+
|
|
20
|
+
## 函数签名
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
function useFlowNodeActions(options: {
|
|
24
|
+
/** resume 回调(与第三方审批取消同一回调,按 payload.operation 分流) */
|
|
25
|
+
onInterruptResume: Ref<OnInterruptResume | undefined>;
|
|
26
|
+
/** 打开节点详情侧栏(复用 useFlowTab 的能力) */
|
|
27
|
+
openNodeDetail: (task: BkFlowTask, node: BkFlowNode) => void;
|
|
28
|
+
}): {
|
|
29
|
+
getNodeActions: (task: FlowTaskVM, node: FlowNodeVM) => FlowNodeActionVM[];
|
|
30
|
+
};
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 返回值:FlowNodeActionVM
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
type FlowNodeActionId =
|
|
37
|
+
| 'detail'
|
|
38
|
+
| InterruptResumeOperation.FlowNodeRetry
|
|
39
|
+
| InterruptResumeOperation.FlowNodeSkip;
|
|
40
|
+
|
|
41
|
+
interface FlowNodeActionVM {
|
|
42
|
+
icon: Component;
|
|
43
|
+
id: FlowNodeActionId;
|
|
44
|
+
label: string;
|
|
45
|
+
run: () => void;
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
| 字段 | 说明 |
|
|
50
|
+
| ------- | ------------------------------ |
|
|
51
|
+
| `icon` | 按钮图标组件 |
|
|
52
|
+
| `id` | 唯一标识,用于 `v-for` key |
|
|
53
|
+
| `label` | 国际化文案 |
|
|
54
|
+
| `run` | 点击执行(详情或 resume) |
|
|
55
|
+
|
|
56
|
+
## 操作显隐规则
|
|
57
|
+
|
|
58
|
+
| 操作 | `id` | 显隐条件 | 点击行为 |
|
|
59
|
+
| ---- | ------------------ | ------------------------------------------ | --------------------------------------------- |
|
|
60
|
+
| 重试 | `flow_node_retry` | `convergedState === 'failed'` 且 `retryable` | 调用 `onInterruptResume`,**不传** `interrupt` |
|
|
61
|
+
| 跳过 | `flow_node_skip` | `convergedState === 'failed'` 且 `skippable` | 同上 |
|
|
62
|
+
| 详情 | `detail` | 始终(Share 模式由上层组件隐藏整组) | 调用 `openNodeDetail(task.raw, node.raw)` |
|
|
63
|
+
|
|
64
|
+
展示顺序:重试 → 跳过 → 详情。
|
|
65
|
+
|
|
66
|
+
## resume 负载格式
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
// 重试
|
|
70
|
+
onInterruptResume?.({
|
|
71
|
+
operation: InterruptResumeOperation.FlowNodeRetry,
|
|
72
|
+
payload: { node_id: node.id, task_id: task.task_id },
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
// 跳过
|
|
76
|
+
onInterruptResume?.({
|
|
77
|
+
operation: InterruptResumeOperation.FlowNodeSkip,
|
|
78
|
+
payload: { node_id: node.id, task_id: task.task_id },
|
|
79
|
+
});
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## 使用示例
|
|
83
|
+
|
|
84
|
+
`FlowAgentContent` 内部用法(业务侧通常通过 `MessageRender` 传入 `onInterruptResume`,无需直接调用本 composable):
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
import { toRef } from 'vue';
|
|
88
|
+
import { useFlowNodeActions } from '@blueking/chat-x';
|
|
89
|
+
// 或相对路径:'./use-flow-node-actions'
|
|
90
|
+
|
|
91
|
+
const { getNodeActions } = useFlowNodeActions({
|
|
92
|
+
onInterruptResume: toRef(props, 'onInterruptResume'),
|
|
93
|
+
openNodeDetail,
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
// 模板中
|
|
97
|
+
// v-for="action in getNodeActions(task, node)" :key="action.id"
|
|
98
|
+
// @click.stop="action.run()"
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
## 扩展新操作
|
|
102
|
+
|
|
103
|
+
在 `RESUME_ACTION_DEFS` 注册表中追加一项即可,需声明 `visible` 与 `operation` 枚举:
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
const RESUME_ACTION_DEFS: FlowNodeResumeActionDef[] = [
|
|
107
|
+
// 现有:重试、跳过
|
|
108
|
+
{
|
|
109
|
+
icon: MyIcon,
|
|
110
|
+
id: InterruptResumeOperation.MyNewOp, // 需先在 InterruptResumeOperation 扩展
|
|
111
|
+
label: () => t('新操作'),
|
|
112
|
+
visible: node => /* 自定义显隐 */,
|
|
113
|
+
},
|
|
114
|
+
];
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
同时在 `interrupt.ts` 扩展 `InterruptResumeOperation` 与 `FlowNodeResume` 联合类型。
|
|
118
|
+
|
|
119
|
+
## 关联文档
|
|
120
|
+
|
|
121
|
+
- [FlowAgentContent 执行内容](/components/agent/flow-agent-content) — 消费方组件
|
|
122
|
+
- [中断类型 Interrupt](/types/interrupt) — `InterruptResumeOperation`、`FlowNodeResume`、`OnInterruptResume`
|
|
123
|
+
- [ActivityMessage 活动消息](/components/message/activity-message) — `onInterruptResume` 透传链路
|
|
124
|
+
- [MessageRender 消息渲染器](/components/message/message-render) — 顶层透传入口
|
|
@@ -65,7 +65,7 @@ useFullScreen(target?)
|
|
|
65
65
|
|
|
66
66
|
`ChatContainer` 将侧栏包裹在 `.ai-full-screen-wrapper` 中,通过 `useFullScreen(fullScreenRef)` 控制侧栏全屏;Tab 栏 `#setting` 插槽内的 `ToolBtn` 使用自定义插槽渲染 `FullScreenIcon` / `UnFullScreenIcon`。
|
|
67
67
|
|
|
68
|
-
详见 [ChatContainer 侧栏全屏](../components/
|
|
68
|
+
详见 [ChatContainer 侧栏全屏](../components/setup/chat-container.md#侧栏全屏)。
|
|
69
69
|
|
|
70
70
|
## API
|
|
71
71
|
|
|
@@ -110,5 +110,5 @@ declare function useFullScreen(target?: MaybeRef<HTMLElement | null>): UseFullSc
|
|
|
110
110
|
|
|
111
111
|
## 关联组件
|
|
112
112
|
|
|
113
|
-
- [ChatContainer](../components/
|
|
114
|
-
- [ToolBtn](../components/
|
|
113
|
+
- [ChatContainer](../components/setup/chat-container.md) — 内置侧栏全屏按钮
|
|
114
|
+
- [ToolBtn](../components/feedback/tool-btn.md) — 全屏按钮自定义插槽
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
useGlobalConfig 接收 GlobalConfig(含 supportUpload: ComputedRef<boolean>),以 GLOBAL_CONFIG_TOKEN provide 给后代; injectGlobalConfig 在子组件中取出配置,无 Provider 时返回 undefined。ChatContainer 在 setup 中调用 useGlobalConfig;
|
|
4
|
+
useGlobalConfig 接收 GlobalConfig(含 size?: ComputedRef<AiSizeMode>、supportUpload: ComputedRef<boolean>),以 GLOBAL_CONFIG_TOKEN provide 给后代; injectGlobalConfig 在子组件中取出配置,无 Provider 时返回 undefined。ChatContainer 在 setup 中调用 useGlobalConfig 注入 size 与 supportUpload; 后代组件可通过 injectGlobalConfig 读取配置;字号主题主要通过根节点 data-ai-size 与 CSS 变量生效。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **chat-container** — 根容器调用 useGlobalConfig 注入 supportUpload
|
|
@@ -13,14 +13,20 @@ useGlobalConfig 接收 GlobalConfig(含 supportUpload: ComputedRef<boolean>)
|
|
|
13
13
|
|
|
14
14
|
> **分类**:composable
|
|
15
15
|
|
|
16
|
-
在聊天容器根组件与子组件之间通过 Vue `provide` / `inject`
|
|
16
|
+
在聊天容器根组件与子组件之间通过 Vue `provide` / `inject` 共享**全局展示相关配置**(当前包括字号主题档位 `size`、是否支持上传 `supportUpload`)。与 Teleport 插槽 ID 无关。
|
|
17
|
+
|
|
18
|
+
> 字号主题主要通过 `ChatContainer` 根节点的 `data-ai-size` 与 CSS 变量(`--ai-font-size` 等)生效;`GlobalConfig.size` 供后代在逻辑层读取当前档位,样式层无需逐组件传参。
|
|
17
19
|
|
|
18
20
|
## 工作原理
|
|
19
21
|
|
|
20
22
|
```
|
|
21
23
|
ChatContainer(根)
|
|
22
|
-
├──
|
|
23
|
-
|
|
24
|
+
├── :data-ai-size="size"(CSS 变量作用域)
|
|
25
|
+
├── useGlobalConfig({
|
|
26
|
+
│ size: computed(() => props.size ?? 'small'),
|
|
27
|
+
│ supportUpload: computed(() => props.supportUpload ?? false),
|
|
28
|
+
│ })
|
|
29
|
+
│ └── provide(GLOBAL_CONFIG_TOKEN, { size, supportUpload })
|
|
24
30
|
│
|
|
25
31
|
└── MessageContainer → … → UserMessage 等
|
|
26
32
|
|
|
@@ -43,10 +49,12 @@ UserMessage(后代)
|
|
|
43
49
|
import { useGlobalConfig } from '@blueking/chat-x';
|
|
44
50
|
|
|
45
51
|
const props = defineProps<{
|
|
52
|
+
size?: 'normal' | 'small';
|
|
46
53
|
supportUpload?: boolean;
|
|
47
54
|
}>();
|
|
48
55
|
|
|
49
56
|
useGlobalConfig({
|
|
57
|
+
size: computed(() => props.size ?? 'small'),
|
|
50
58
|
supportUpload: computed(() => props.supportUpload ?? false),
|
|
51
59
|
});
|
|
52
60
|
</script>
|
|
@@ -75,11 +83,15 @@ import type { ComputedRef } from 'vue';
|
|
|
75
83
|
|
|
76
84
|
export const GLOBAL_CONFIG_TOKEN: unique symbol;
|
|
77
85
|
|
|
86
|
+
export type AiSizeMode = 'normal' | 'small';
|
|
87
|
+
|
|
78
88
|
export type GlobalConfig = {
|
|
89
|
+
size?: ComputedRef<AiSizeMode>;
|
|
79
90
|
supportUpload: ComputedRef<boolean>;
|
|
80
91
|
};
|
|
81
92
|
|
|
82
93
|
export function useGlobalConfig(options: GlobalConfig): {
|
|
94
|
+
size?: ComputedRef<AiSizeMode>;
|
|
83
95
|
supportUpload: ComputedRef<boolean>;
|
|
84
96
|
};
|
|
85
97
|
|
|
@@ -96,12 +108,14 @@ export function injectGlobalConfig(): GlobalConfig | undefined;
|
|
|
96
108
|
|
|
97
109
|
| 字段 | 说明 |
|
|
98
110
|
| --------------- | ------------------------------------------------------------------------ |
|
|
111
|
+
| `size` | 可选。字号主题档位 `normal`(14px)/ `small`(12px),与 `ChatContainer.size` 对齐 |
|
|
99
112
|
| `supportUpload` | 是否支持上传,与根容器 `ChatContainer` 的 `supportUpload` 等展示策略对齐 |
|
|
100
113
|
|
|
101
114
|
### `useGlobalConfig(options)`
|
|
102
115
|
|
|
103
116
|
| 参数 | 说明 |
|
|
104
117
|
| ----------------------- | ------------------------------------------------------------------------------------- |
|
|
118
|
+
| `options.size` | 可选。字号主题档位,建议使用 `computed(() => props.size ?? 'small')` 与根 props 同步 |
|
|
105
119
|
| `options.supportUpload` | 是否支持上传,建议使用 `computed(() => props.supportUpload ?? false)` 与根 props 同步 |
|
|
106
120
|
|
|
107
121
|
- 调用后立即 `provide(GLOBAL_CONFIG_TOKEN, options)`。
|
|
@@ -122,4 +136,5 @@ export function injectGlobalConfig(): GlobalConfig | undefined;
|
|
|
122
136
|
|
|
123
137
|
## 关联组件
|
|
124
138
|
|
|
125
|
-
- [ChatContainer](../components/
|
|
139
|
+
- [ChatContainer](../components/setup/chat-container) — 调用 `useGlobalConfig` 注入 `size` 与 `supportUpload`
|
|
140
|
+
- [主题配置](../theme/theme) — `data-ai-size` 与 CSS 变量说明
|
|
@@ -27,6 +27,8 @@ function useMessageGroup(options: {
|
|
|
27
27
|
}): {
|
|
28
28
|
messageGroups: Ref<MessageGroup[]>;
|
|
29
29
|
executionGroups: ComputedRef<MessageGroup[]>;
|
|
30
|
+
pendingApprovalCount: ComputedRef<number>;
|
|
31
|
+
pendingApprovalTipText: ComputedRef<string>;
|
|
30
32
|
isShareMode: ShallowRef<boolean>;
|
|
31
33
|
isAllSelected: ComputedRef<boolean>;
|
|
32
34
|
onToggleShareAll: (isAllSelected: boolean) => void;
|
|
@@ -113,6 +115,24 @@ const isExecutionMessage = (m: Message): boolean => {
|
|
|
113
115
|
| toolCall | `function.name`、`mcpName`、`description`、`arguments`、`id` |
|
|
114
116
|
| flow_agent | 各任务 `task_name`、各节点 `name` |
|
|
115
117
|
|
|
118
|
+
## 待审批统计
|
|
119
|
+
|
|
120
|
+
`useMessageGroup` 会统计消息列表中处于待审批状态的 AI Dev 审批中断:
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
const pendingApprovalStatusSet = new Set([APPROVAL_STATUS.PENDING, APPROVAL_STATUS.DRAFT]);
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
当 `MessageRole.Interrupt` 消息的 `content.outcome.type === 'interrupt'`,且其中断项满足 `reason === InterruptReason.AIDevToolApproval`、`metadata.ticket.status` 为 `pending` 或 `draft` 时,计入 `pendingApprovalCount`。
|
|
127
|
+
|
|
128
|
+
`pendingApprovalTipText` 根据数量生成输入区提示文案:
|
|
129
|
+
|
|
130
|
+
```typescript
|
|
131
|
+
'当前会话有 {count} 个待审批单,如需继续,请先取消审批'
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
`ChatContainer` 会消费该返回值,向 `ChatInput` 传入 `sendDisabledTip` 并在输入区上方展示提示,从而阻止继续发送。
|
|
135
|
+
|
|
116
136
|
## 分享模式
|
|
117
137
|
|
|
118
138
|
`useMessageGroup` 提供完整的分享模式支持:
|
|
@@ -142,12 +162,21 @@ const keyword = shallowRef('');
|
|
|
142
162
|
const messages = computed(() => props.messages);
|
|
143
163
|
const selectedUserMessages = deepRef<Message[]>([]);
|
|
144
164
|
|
|
145
|
-
const {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
165
|
+
const {
|
|
166
|
+
messageGroups,
|
|
167
|
+
executionGroups,
|
|
168
|
+
pendingApprovalCount,
|
|
169
|
+
pendingApprovalTipText,
|
|
170
|
+
isShareMode,
|
|
171
|
+
isAllSelected,
|
|
172
|
+
onToggleShareAll,
|
|
173
|
+
onCancelShare,
|
|
174
|
+
onConfirmShare,
|
|
175
|
+
} = useMessageGroup({
|
|
176
|
+
keyword,
|
|
177
|
+
messages,
|
|
178
|
+
selectedUserMessages,
|
|
179
|
+
});
|
|
151
180
|
```
|
|
152
181
|
|
|
153
182
|
## 返回值说明
|
|
@@ -156,6 +185,8 @@ const { messageGroups, executionGroups, isShareMode, isAllSelected, onToggleShar
|
|
|
156
185
|
| ---------------- | ----------------------------- | --------------------------------------------------------------------------- |
|
|
157
186
|
| messageGroups | `Ref<MessageGroup[]>` | 完整消息分组列表 |
|
|
158
187
|
| executionGroups | `ComputedRef<MessageGroup[]>` | 仅包含执行类消息的分组(工具调用 + FlowAgent),自动提取 `userMessageTitle` |
|
|
188
|
+
| pendingApprovalCount | `ComputedRef<number>` | 当前消息中待审批 AI Dev 审批中断的数量 |
|
|
189
|
+
| pendingApprovalTipText | `ComputedRef<string>` | 待审批阻塞发送提示文案;无待审批时为空字符串 |
|
|
159
190
|
| isShareMode | `ShallowRef<boolean>` | 是否处于分享模式 |
|
|
160
191
|
| isAllSelected | `ComputedRef<boolean>` | 所有用户消息组是否全部选中 |
|
|
161
192
|
| onToggleShareAll | `(checked: boolean) => void` | 切换全选 |
|
|
@@ -181,6 +212,6 @@ interface MessageGroup {
|
|
|
181
212
|
|
|
182
213
|
## 关联组件
|
|
183
214
|
|
|
184
|
-
- [ChatContainer](../components/
|
|
185
|
-
- [MessageContainer](../components/
|
|
186
|
-
- [ExecutionSummary](../components/
|
|
215
|
+
- [ChatContainer](../components/setup/chat-container) — 调用 useMessageGroup 并下传分组
|
|
216
|
+
- [MessageContainer](../components/setup/message-container) — 渲染 messageGroups
|
|
217
|
+
- [ExecutionSummary](../components/agent/execution-summary) — 消费 executionGroups
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
用户反馈弹层,提交踩/反馈原因。 源码位置:src/components/message-tools/user-feedback/user-feedback.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-tools** — 点赞/踩操作触发并收集反馈
|
|
@@ -10,8 +10,13 @@ UserFeedback 在点赞或踩之后展示原因收集面板:多选预设标签
|
|
|
10
10
|
<!-- FULL DOC -->
|
|
11
11
|
|
|
12
12
|
# MessageUserFeedback 用户反馈
|
|
13
|
+
## 源码事实
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
- **源码位置**:`src/components/message-tools/user-feedback/user-feedback.vue`
|
|
16
|
+
- **能力域**:工具与反馈
|
|
17
|
+
- **能力说明**:用户反馈弹层,提交踩/反馈原因。
|
|
18
|
+
|
|
19
|
+
> **能力域**:工具与反馈
|
|
15
20
|
|
|
16
21
|
AI 消息点赞/踩后收集用户具体反馈原因的弹出面板。支持多选预设原因标签、补充文字说明(textarea)、异步加载原因列表(骨架屏)。
|
|
17
22
|
|
|
@@ -226,4 +231,4 @@ loading=false,展示原因标签列表
|
|
|
226
231
|
|
|
227
232
|
## 关联组件
|
|
228
233
|
|
|
229
|
-
- [MessageTools](
|
|
234
|
+
- [MessageTools](/components/feedback/message-tools) — 点赞/踩入口与反馈联动
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
渲染用户消息,支持文本、键值、Markdown、引用、文件和编辑态输入。 源码位置:src/components/chat-message/user-message/user-message.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-render** — 由 MessageRender 在 role 为 user 时创建
|
|
@@ -12,8 +12,13 @@ UserMessage 渲染右对齐用户消息,支持文本、附件、文本/结构
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# UserMessage 用户消息
|
|
15
|
+
## 源码事实
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
- **源码位置**:`src/components/chat-message/user-message/user-message.vue`
|
|
18
|
+
- **能力域**:消息系统
|
|
19
|
+
- **能力说明**:渲染用户消息,支持文本、键值、Markdown、引用、文件和编辑态输入。
|
|
20
|
+
|
|
21
|
+
> **能力域**:消息系统
|
|
17
22
|
|
|
18
23
|
用户消息展示组件,右对齐显示用户发送的消息内容。支持纯文本、多媒体(图片/文件)、文本引用、结构化引用、快捷指令等多种内容形式,以及消息的内联编辑功能。
|
|
19
24
|
|
|
@@ -346,6 +351,6 @@ interface MessageExtra {
|
|
|
346
351
|
|
|
347
352
|
## 关联组件
|
|
348
353
|
|
|
349
|
-
- [MessageRender](
|
|
350
|
-
- [MessageTools](
|
|
351
|
-
- [MessageContainer](
|
|
354
|
+
- [MessageRender](/components/message/message-render) — user 角色由其实例化
|
|
355
|
+
- [MessageTools](/components/feedback/message-tools) — 工具栏交互
|
|
356
|
+
- [MessageContainer](/components/setup/message-container) — 列表与多选容器
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
在 UserQuestion resume 成功后回显用户回答或取消状态。 源码位置:src/components/chat-message/interrupt-message/user-question/user-question-answered-card.vue。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **interrupt-message** — outcome.success 且 reason 为 UserQuestion 时挂载本组件
|
|
8
|
+
- **user-question-card** — 待回答面板,与本组件成对出现
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
<!-- FULL DOC -->
|
|
12
|
+
|
|
13
|
+
# UserQuestionAnsweredCard 用户问题回答回显
|
|
14
|
+
|
|
15
|
+
> **能力域**:Agent 能力
|
|
16
|
+
|
|
17
|
+
## 源码事实
|
|
18
|
+
|
|
19
|
+
- **源码位置**:`src/components/chat-message/interrupt-message/user-question/user-question-answered-card.vue`
|
|
20
|
+
- **能力说明**:在 UserQuestion resume 成功后回显用户回答或取消状态。
|
|
21
|
+
|
|
22
|
+
由 [InterruptMessageRender](/components/agent/interrupt-message) 在 `content.outcome.type === 'success'` 且 `result.reason === InterruptReason.UserQuestion` 时渲染。默认逐条展示选择题答案;业务可通过 `#answer` slot 自定义回显形态(如自定义表单字段)。
|
|
23
|
+
|
|
24
|
+
## 基础用法
|
|
25
|
+
|
|
26
|
+
```vue
|
|
27
|
+
<template>
|
|
28
|
+
<UserQuestionAnsweredCard
|
|
29
|
+
:answers="answers"
|
|
30
|
+
status="resolved"
|
|
31
|
+
/>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { UserQuestionAnsweredCard, type UserQuestionAnswerItem } from '@blueking/chat-x';
|
|
36
|
+
|
|
37
|
+
const answers: UserQuestionAnswerItem[] = [
|
|
38
|
+
{
|
|
39
|
+
question: '你希望采用哪种实现?',
|
|
40
|
+
multiSelect: false,
|
|
41
|
+
answer: [{ label: 'optimized', description: '优化版' }],
|
|
42
|
+
},
|
|
43
|
+
];
|
|
44
|
+
</script>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
**渲染效果**
|
|
48
|
+
|
|
49
|
+
## 已取消(跳过)
|
|
50
|
+
|
|
51
|
+
```vue
|
|
52
|
+
<UserQuestionAnsweredCard
|
|
53
|
+
:answers="[]"
|
|
54
|
+
status="cancelled"
|
|
55
|
+
/>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
**渲染效果**
|
|
59
|
+
|
|
60
|
+
## 自定义回显(#answer slot)
|
|
61
|
+
|
|
62
|
+
当待回答阶段使用了自定义 `#question` 表单时,可通过 `#answer` slot 自定义回显:
|
|
63
|
+
|
|
64
|
+
```vue
|
|
65
|
+
<UserQuestionAnsweredCard
|
|
66
|
+
:answers="answers"
|
|
67
|
+
status="resolved"
|
|
68
|
+
>
|
|
69
|
+
<template #answer="{ item, index, status }">
|
|
70
|
+
<MyCustomAnswerView :data="item" :index="index" :status="status" />
|
|
71
|
+
</template>
|
|
72
|
+
</UserQuestionAnsweredCard>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
`InterruptMessageRender`、`MessageRender`、`MessageContainer` 提供 `#answeredQuestion` slot,参数与 `#answer` 一致,逐层透传至本组件。使用 `ChatContainer` 时若覆盖了 `#message` 插槽,需在自定义 `MessageRender` 中继续透传 `#answeredQuestion`。
|
|
76
|
+
|
|
77
|
+
## API
|
|
78
|
+
|
|
79
|
+
### Props
|
|
80
|
+
|
|
81
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
82
|
+
| ------- | ---------------------------- | ------------ | -------------------------------------- |
|
|
83
|
+
| answers | `UserQuestionAnswerItem[]` | — | **必填**,已回答内容列表 |
|
|
84
|
+
| status | `'resolved' \| 'cancelled'` | `'resolved'` | resume 状态:`resolved` 已回复,`cancelled` 已取消(跳过) |
|
|
85
|
+
|
|
86
|
+
### Slots
|
|
87
|
+
|
|
88
|
+
| 插槽名 | 参数 | 说明 |
|
|
89
|
+
| ------ | ------------------------------------------------- | ------------------------------------------------------------ |
|
|
90
|
+
| answer | `{ item, index, status }` | 自定义单题回答回显;未覆盖时默认渲染 `answer[].description \|\| label` |
|
|
91
|
+
|
|
92
|
+
| 参数 | 类型 | 说明 |
|
|
93
|
+
| ------ | --------------------------------- | ------------------------ |
|
|
94
|
+
| item | `UserQuestionAnswerItem` | 当前题的回答数据 |
|
|
95
|
+
| index | `number` | 题目序号(从 0 开始) |
|
|
96
|
+
| status | `'resolved' \| 'cancelled'` | 与 Props.status 一致 |
|
|
97
|
+
|
|
98
|
+
### Events / Expose
|
|
99
|
+
|
|
100
|
+
无。
|
|
101
|
+
|
|
102
|
+
## 关联文档
|
|
103
|
+
|
|
104
|
+
- [InterruptMessage 中断消息](/components/agent/interrupt-message)
|
|
105
|
+
- [UserQuestionCard 用户问题中断](/components/agent/user-question-card)
|
|
106
|
+
- [中断类型 Interrupt](../../types/interrupt.md)
|