@blueking/chat-x 0.0.52-dev.5 → 2.4.0
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/dist/components/chat-content/flow-agent-content/flow-agent-state.d.ts +1 -1
- package/dist/components/chat-content/flow-agent-content/use-flow-node-actions.d.ts +1 -1
- package/dist/composables/use-common.d.ts +9 -0
- package/dist/index.css +1 -1
- package/dist/index.js +2497 -2486
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +3 -2
- package/dist/mcp/generated/docs/activity-layout.md +4 -2
- package/dist/mcp/generated/docs/activity-message.md +4 -4
- package/dist/mcp/generated/docs/ai-selection.md +5 -2
- package/dist/mcp/generated/docs/ai-slash-input.md +4 -0
- package/dist/mcp/generated/docs/animation-text.md +5 -1
- package/dist/mcp/generated/docs/assistant-message.md +1 -1
- package/dist/mcp/generated/docs/chat-container.md +3 -1
- package/dist/mcp/generated/docs/chat-input.md +1 -0
- package/dist/mcp/generated/docs/cite-content.md +6 -2
- package/dist/mcp/generated/docs/common-error-content.md +8 -2
- package/dist/mcp/generated/docs/delete-tool.md +6 -1
- package/dist/mcp/generated/docs/desc-panel.md +5 -1
- package/dist/mcp/generated/docs/detail-section.md +3 -1
- package/dist/mcp/generated/docs/execution-summary.md +23 -1
- package/dist/mcp/generated/docs/file-content.md +8 -2
- package/dist/mcp/generated/docs/file-upload-btn.md +3 -1
- package/dist/mcp/generated/docs/flow-agent-content.md +24 -15
- package/dist/mcp/generated/docs/flow-agent-node-detail.md +5 -2
- package/dist/mcp/generated/docs/highlight-keyword.md +9 -31
- package/dist/mcp/generated/docs/input-attachment.md +3 -0
- package/dist/mcp/generated/docs/input-info-alert.md +3 -0
- package/dist/mcp/generated/docs/interrupt-message.md +6 -1
- package/dist/mcp/generated/docs/key-value-content.md +6 -1
- package/dist/mcp/generated/docs/knowledge-rag-content.md +4 -1
- package/dist/mcp/generated/docs/markdown-container.md +3 -0
- package/dist/mcp/generated/docs/markdown-content.md +2 -2
- package/dist/mcp/generated/docs/mention-tag.md +2 -0
- package/dist/mcp/generated/docs/mention-text.md +3 -0
- package/dist/mcp/generated/docs/message-container.md +4 -4
- package/dist/mcp/generated/docs/preview-toolbar.md +4 -0
- package/dist/mcp/generated/docs/reference-content.md +6 -1
- package/dist/mcp/generated/docs/reference-doc-content.md +3 -1
- package/dist/mcp/generated/docs/simple-table.md +3 -1
- package/dist/mcp/generated/docs/text-content.md +5 -1
- package/dist/mcp/generated/docs/tool-btn.md +10 -4
- package/dist/mcp/generated/docs/toolcall-render.md +8 -8
- package/dist/mcp/generated/docs/use-animation-text.md +2 -1
- package/dist/mcp/generated/docs/use-artifact-preview.md +11 -1
- package/dist/mcp/generated/docs/use-flow-node-actions.md +20 -10
- package/dist/mcp/generated/docs/user-question-card.md +31 -0
- package/dist/mcp/generated/docs/vnode-renderer.md +3 -3
- package/dist/mcp/generated/index.json +93 -100
- package/dist/mcp/tools/list-components.js +1 -0
- package/dist/mcp/tools/list-components.js.map +1 -1
- package/dist/mcp/utils/doc-loader.d.ts +1 -0
- package/dist/mcp/utils/doc-loader.js.map +1 -1
- package/dist/utils/index.d.ts +1 -0
- package/package.json +2 -2
- package/skills/blueking-chat-x/references/components/ai-selection.md +1 -1
- package/dist/mcp/generated/docs/questions-container.md +0 -88
- package/dist/mcp/generated/docs/selection-question.md +0 -91
|
@@ -74,42 +74,20 @@ ExecutionSummary
|
|
|
74
74
|
└── HighlightKeyword(:text) ← inject(keyword)
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
-
## 配套 Composables
|
|
77
|
+
## 配套 Composables(内部,未从包入口导出)
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
`useKeywordProvider` / `useKeywordInject` / `useKeywordMatch` 在 `src/composables/use-common.ts`,**不能** `from '@blueking/chat-x'`。业务侧把 `HighlightKeyword` 放在 [ChatContainer](/components/setup/chat-container) / [ExecutionSummary](/components/agent/execution-summary) 子树即可,库已注入关键词。
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
库内或文档站高级用法用相对路径:
|
|
82
82
|
|
|
83
83
|
```typescript
|
|
84
|
-
import { useKeywordProvider } from '
|
|
84
|
+
import { useKeywordProvider, useKeywordInject, useKeywordMatch } from '../../../src/composables/use-common';
|
|
85
85
|
|
|
86
86
|
const { keyword } = useKeywordProvider();
|
|
87
87
|
keyword.value = '搜索词';
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### useKeywordInject
|
|
91
|
-
|
|
92
|
-
在后代组件中注入关键词,返回 `ComputedRef<string> | undefined`:
|
|
93
|
-
|
|
94
|
-
```typescript
|
|
95
|
-
import { useKeywordInject } from '@blueking/chat-x';
|
|
96
|
-
|
|
97
|
-
const keyword = useKeywordInject();
|
|
98
|
-
console.log(keyword?.value); // 当前搜索关键词
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### useKeywordMatch
|
|
102
|
-
|
|
103
|
-
用于判断组件的可搜索文本是否与当前关键词匹配。内部调用 `useKeywordInject` 获取关键词,根据传入的文本提取函数判断是否命中:
|
|
104
|
-
|
|
105
|
-
```typescript
|
|
106
|
-
import { useKeywordMatch } from '@blueking/chat-x';
|
|
107
88
|
|
|
89
|
+
const injected = useKeywordInject();
|
|
108
90
|
const { keywordMatched } = useKeywordMatch(() => [props.title, props.description, props.content]);
|
|
109
|
-
|
|
110
|
-
// keywordMatched.value === true 表示命中搜索
|
|
111
|
-
// keywordMatched.value === false 表示未命中(可据此隐藏组件)
|
|
112
|
-
// keyword 为空时始终返回 true
|
|
113
91
|
```
|
|
114
92
|
|
|
115
93
|
`useKeywordMatch` 的典型用途是在 `ExecutionSummary` 的搜索过滤中,让组件自行判断是否匹配搜索词,与 `HighlightKeyword` 配合实现搜索 + 高亮。
|
|
@@ -132,9 +110,9 @@ const { keywordMatched } = useKeywordMatch(() => [props.title, props.description
|
|
|
132
110
|
|
|
133
111
|
| 函数名 | 参数 | 返回值 | 说明 |
|
|
134
112
|
| -------------------- | ----------------------------------------------- | ------------------------------------------ | --------------------------------------------- |
|
|
135
|
-
| `useKeywordProvider` | — | `{ keyword: ShallowRef<string> }` |
|
|
136
|
-
| `useKeywordInject` | — | `ComputedRef<string> \| undefined` |
|
|
137
|
-
| `useKeywordMatch` | `getSearchTexts: () => (string \| undefined)[]` | `{ keywordMatched: ComputedRef<boolean> }` |
|
|
113
|
+
| `useKeywordProvider` | — | `{ keyword: ShallowRef<string> }` | 内部 API,见 `src/composables/use-common.ts` |
|
|
114
|
+
| `useKeywordInject` | — | `ComputedRef<string> \| undefined` | 内部 API,见 `src/composables/use-common.ts` |
|
|
115
|
+
| `useKeywordMatch` | `getSearchTexts: () => (string \| undefined)[]` | `{ keywordMatched: ComputedRef<boolean> }` | 内部 API;空关键词返回 true |
|
|
138
116
|
|
|
139
117
|
### CSS 类名
|
|
140
118
|
|
|
@@ -144,6 +122,6 @@ const { keywordMatched } = useKeywordMatch(() => [props.title, props.description
|
|
|
144
122
|
|
|
145
123
|
## 关联组件
|
|
146
124
|
|
|
147
|
-
- [
|
|
125
|
+
- [ToolCallRender](/components/agent/toolcall-render) — 工具调用头部高亮
|
|
148
126
|
- [DescPanel](/components/rendering/desc-panel) — 详情面板键值高亮
|
|
149
127
|
- [ExecutionSummary](/components/agent/execution-summary) — 执行摘要搜索
|
|
@@ -12,7 +12,12 @@
|
|
|
12
12
|
---
|
|
13
13
|
<!-- FULL DOC -->
|
|
14
14
|
|
|
15
|
-
#
|
|
15
|
+
# InterruptMessageRender 中断消息
|
|
16
|
+
|
|
17
|
+
| 名称 | 种类 |
|
|
18
|
+
| --- | --- |
|
|
19
|
+
| `InterruptMessage` | TS 消息类型 |
|
|
20
|
+
| `InterruptMessageRender` | 包入口 Vue 组件 |
|
|
16
21
|
## 源码事实
|
|
17
22
|
|
|
18
23
|
- **源码位置**:`src/components/chat-message/interrupt-message/interrupt-message.vue`
|
|
@@ -10,6 +10,11 @@
|
|
|
10
10
|
<!-- FULL DOC -->
|
|
11
11
|
|
|
12
12
|
# KeyValueContent 键值对内容
|
|
13
|
+
|
|
14
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
15
|
+
> 业务请通过 [UserMessage](/components/message/user-message) / [MessageRender](/components/message/message-render) 使用。
|
|
16
|
+
> 文档站 demo 使用相对路径引入源码;不要写 `import { KeyValueContent } from '@blueking/chat-x'`。
|
|
17
|
+
|
|
13
18
|
## 源码事实
|
|
14
19
|
|
|
15
20
|
- **源码位置**:`src/components/chat-content/key-value-content/key-value-content.vue`
|
|
@@ -48,7 +53,7 @@ div.ai-key-value-content(flex column,gap: 8px,font-size: 12px,color: #4d
|
|
|
48
53
|
</template>
|
|
49
54
|
|
|
50
55
|
<script setup lang="ts">
|
|
51
|
-
|
|
56
|
+
// KeyValueContent 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
52
57
|
|
|
53
58
|
const data = [
|
|
54
59
|
{ key: '名称', value: '蓝鲸智云' },
|
|
@@ -14,6 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
# KnowledgeRagContent 知识召回内容
|
|
16
16
|
|
|
17
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
18
|
+
> 业务请通过 [MessageRender](/components/message/message-render) 渲染 `role: 'activity'`。
|
|
19
|
+
|
|
17
20
|
> **能力域**:Agent 能力
|
|
18
21
|
|
|
19
22
|
`KnowledgeRagContent` 用于渲染知识召回活动内容,包含活动标题、加载态、Markdown 摘要和引用来源列表。它是 `ActivityMessage` 在 `activityType === 'knowledge_rag'` 时使用的具体内容组件。
|
|
@@ -46,7 +49,7 @@
|
|
|
46
49
|
|
|
47
50
|
<script setup lang="ts">
|
|
48
51
|
import { ref } from 'vue';
|
|
49
|
-
|
|
52
|
+
// KnowledgeRagContent 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
50
53
|
import type { KnowledgeRagMessageContent } from '@blueking/chat-x';
|
|
51
54
|
|
|
52
55
|
const collapsed = ref(false);
|
|
@@ -11,6 +11,9 @@ markdownItContainer 基于 markdown-it-container,支持字符串或正则匹
|
|
|
11
11
|
|
|
12
12
|
# markdownItContainer 自定义容器插件
|
|
13
13
|
|
|
14
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
15
|
+
> 由 [MarkdownContent](/components/rendering/markdown-content) 内部注册。请用相对路径引入源码,不要写 `import { markdownItContainer } from '@blueking/chat-x'`。
|
|
16
|
+
|
|
14
17
|
> **分类**:plugin
|
|
15
18
|
|
|
16
19
|
将 `::: 容器名` 开头的块解析为带 `class` 的块级容器,闭合行使用 `:::`。
|
|
@@ -28,7 +28,7 @@ AI 消息内容渲染的核心基础组件,集成代码高亮、LaTeX 公式
|
|
|
28
28
|
## 组件结构与渲染流程
|
|
29
29
|
|
|
30
30
|
```
|
|
31
|
-
props.content → completeMarkdownSyntax → md.parse → groupTokens → groupedTokens
|
|
31
|
+
props.content → completeMarkdownSyntax().content → md.parse → groupTokens → groupedTokens
|
|
32
32
|
│
|
|
33
33
|
div.ai-markdown-content(contain: layout style)
|
|
34
34
|
│
|
|
@@ -148,7 +148,7 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
|
|
|
148
148
|
| 机制 | 实现 | 作用 |
|
|
149
149
|
| ----------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
150
150
|
| 极速节流 | `parseMarkdownContent` throttle **5ms**,leading + trailing | 每 5ms 最多解析一次,兼顾实时性与性能 |
|
|
151
|
-
| Markdown 语法补全 | `completeMarkdownSyntax(content)`
|
|
151
|
+
| Markdown 语法补全 | `completeMarkdownSyntax(content).content` | 自动闭合代码块、行内代码、粗斜体、删除线、链接等未完成语法 |
|
|
152
152
|
| LaTeX 防闪烁 | `isIncomplete=true` 且已有渲染结果 → **跳过本次更新** | 正在输入 LaTeX 命令时保持上一帧,避免闪白 |
|
|
153
153
|
| 子组件 throttle | `handleTokenMounted` throttle 100ms | 限制子组件挂载后触发的滚动到底部频率 |
|
|
154
154
|
| CSS contain | `.ai-markdown-content { contain: layout style }`<br>`.ai-markdown-body { contain: content }` | 限制重排/重绘范围,减少流式渲染的布局开销 |
|
|
@@ -13,6 +13,9 @@ MentionText 接收一份 TagSchema 文档(二维数组:行 → 节点),
|
|
|
13
13
|
|
|
14
14
|
# MentionText 标签文本
|
|
15
15
|
|
|
16
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
17
|
+
> 业务请通过 [UserMessage](/components/message/user-message) / [MessageRender](/components/message/message-render) 使用。
|
|
18
|
+
|
|
16
19
|
> **能力域**:内容渲染
|
|
17
20
|
|
|
18
21
|
## 源码事实
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
负责按传入的 `messageGroups` 渲染、滚动控制、工具栏和消息插槽透传。 源码位置:src/components/chat-message/message-container/message-container.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-render** — 按组渲染每条消息时委托 MessageRender
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
- **源码位置**:`src/components/chat-message/message-container/message-container.vue`
|
|
19
19
|
- **能力域**:对话搭建
|
|
20
|
-
-
|
|
20
|
+
- **能力说明**:负责按传入的 `messageGroups` 渲染、滚动控制、工具栏和消息插槽透传。
|
|
21
21
|
|
|
22
22
|
> **能力域**:对话搭建
|
|
23
23
|
|
|
@@ -564,7 +564,7 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
564
564
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
565
565
|
| ------------------------ | -------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
|
|
566
566
|
| messages | `Message[]` | — | **必填**,消息列表 |
|
|
567
|
-
| messageGroups | `MessageGroup[]` | — |
|
|
567
|
+
| messageGroups | `MessageGroup[]` | — | **必填**。本组件不分组;由调用方用 `useMessageGroup` 算好后传入。`ChatContainer` 会代为计算。 |
|
|
568
568
|
| messageStatus | `MessageStatus` | — | 当前整体消息状态,控制底部「停止生成」按钮显示;`ChatContainer` 会结合末尾 Loading 占位推导 `fetching` 等再传入 |
|
|
569
569
|
| messageTools | `IToolBtn[]` | — | AI 消息左侧工具(复制/引用等)的自定义配置;按 `id` 与内置 `CONST_MESSAGE_TOOLS` 合并(覆盖同 id、追加新 id、`hidden` 过滤),详见「自定义消息工具栏」 |
|
|
570
570
|
| updateTools | `IToolBtn[]` | — | AI 消息右侧反馈工具(点赞/踩/删除等)的自定义配置;按 `id` 与内置 `CONST_UPDATE_TOOLS` 合并,规则同上 |
|
|
@@ -605,7 +605,7 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
605
605
|
```typescript
|
|
606
606
|
import { MessageRole, MessageStatus, MessageToolsStatus, type Message, type MessageGroup, type IToolBtn } from '@blueking/chat-x';
|
|
607
607
|
|
|
608
|
-
//
|
|
608
|
+
// 消息组(必须传入 useMessageGroup 的结果)
|
|
609
609
|
interface MessageGroup {
|
|
610
610
|
checked: boolean;
|
|
611
611
|
isHover: boolean;
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
# PreviewToolbar 图片预览工具栏
|
|
10
10
|
|
|
11
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
12
|
+
> 业务请通过 [ImagePreview](/components/medias/image-preview) 使用。
|
|
13
|
+
> 文档站 demo 使用相对路径引入源码;不要写 `import { PreviewToolbar } from '@blueking/chat-x'`。
|
|
14
|
+
|
|
11
15
|
> **能力域**:媒体文件
|
|
12
16
|
|
|
13
17
|
## 源码事实
|
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
<!-- FULL DOC -->
|
|
12
12
|
|
|
13
13
|
# ReferenceContent 引用文档内容
|
|
14
|
+
|
|
15
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
16
|
+
> 业务请通过 [ContentRender](/components/rendering/content-render) / [ActivityMessage](/components/message/activity-message) 使用。
|
|
17
|
+
> 文档站 demo 使用相对路径引入源码;不要写 `import { ReferenceContent } from '@blueking/chat-x'`。
|
|
18
|
+
|
|
14
19
|
## 源码事实
|
|
15
20
|
|
|
16
21
|
- **源码位置**:`src/components/chat-content/reference-content/reference-content.vue`
|
|
@@ -68,8 +73,8 @@ gotoLink(url, event):
|
|
|
68
73
|
</template>
|
|
69
74
|
|
|
70
75
|
<script setup lang="ts">
|
|
71
|
-
import { ReferenceContent } from '@blueking/chat-x';
|
|
72
76
|
import type { ReferenceDocumentContent } from '@blueking/chat-x';
|
|
77
|
+
// ReferenceContent 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
73
78
|
|
|
74
79
|
const references: ReferenceDocumentContent[] = [
|
|
75
80
|
{ name: '蓝鲸 PaaS 平台文档', url: 'https://bk.tencent.com', originFile: '' },
|
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
|
|
14
14
|
# ReferenceDocContent 引用文档活动
|
|
15
15
|
|
|
16
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
17
|
+
|
|
16
18
|
> **能力域**:Agent 能力
|
|
17
19
|
|
|
18
20
|
`ReferenceDocContent` 用于渲染“引用 N 篇资料作为参考”这类活动消息。组件基于 `ActivityLayout` 提供折叠外壳,并将文档数组交给 `ReferenceContent` 展示。
|
|
@@ -43,7 +45,7 @@
|
|
|
43
45
|
|
|
44
46
|
<script setup lang="ts">
|
|
45
47
|
import { ref } from 'vue';
|
|
46
|
-
|
|
48
|
+
// ReferenceDocContent 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
47
49
|
import type { ReferenceDocumentContent } from '@blueking/chat-x';
|
|
48
50
|
|
|
49
51
|
const collapsed = ref(false);
|
|
@@ -12,6 +12,8 @@ FlowAgent 节点详情中的轻量表格展示组件。 源码位置:src/compo
|
|
|
12
12
|
|
|
13
13
|
# SimpleTable 简易表格
|
|
14
14
|
|
|
15
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
16
|
+
|
|
15
17
|
> **能力域**:Agent 能力
|
|
16
18
|
|
|
17
19
|
`SimpleTable` 是 FlowAgent 节点详情中的轻量只读表格,用于展示参数名、参数值、插件输出定义等结构化信息。组件只根据 `columns` 和 `data` 渲染表格,不提供排序、筛选、分页或编辑能力。
|
|
@@ -41,7 +43,7 @@ FlowAgent 节点详情中的轻量表格展示组件。 源码位置:src/compo
|
|
|
41
43
|
</template>
|
|
42
44
|
|
|
43
45
|
<script setup lang="ts">
|
|
44
|
-
|
|
46
|
+
// SimpleTable 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
45
47
|
|
|
46
48
|
const columns = [
|
|
47
49
|
{ key: 'key', label: '参数名' },
|
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# TextContent 文本内容
|
|
15
|
+
|
|
16
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
17
|
+
> 业务请通过 [ContentRender](/components/rendering/content-render) / [MessageRender](/components/message/message-render) 使用。
|
|
18
|
+
> 文档站 demo 使用相对路径引入源码;不要写 `import { TextContent } from '@blueking/chat-x'`。
|
|
15
19
|
## 源码事实
|
|
16
20
|
|
|
17
21
|
- **源码位置**:`src/components/chat-content/text-content/text-content.vue`
|
|
@@ -45,7 +49,7 @@ div.ai-text-content
|
|
|
45
49
|
</template>
|
|
46
50
|
|
|
47
51
|
<script setup lang="ts">
|
|
48
|
-
|
|
52
|
+
// TextContent 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
49
53
|
</script>
|
|
50
54
|
```
|
|
51
55
|
|
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
<!-- FULL DOC -->
|
|
12
12
|
|
|
13
13
|
# ToolBtn 工具按钮
|
|
14
|
+
|
|
15
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
16
|
+
> 业务请通过 [MessageTools](/components/feedback/message-tools) 使用。
|
|
17
|
+
> 文档站 demo 使用相对路径引入源码;不要写 `import { ToolBtn } from '@blueking/chat-x'`。
|
|
14
18
|
## 源码事实
|
|
15
19
|
|
|
16
20
|
- **源码位置**:`src/components/ai-buttons/tool-btn/tool-btn.vue`
|
|
@@ -117,7 +121,7 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
117
121
|
</template>
|
|
118
122
|
|
|
119
123
|
<script setup lang="ts">
|
|
120
|
-
|
|
124
|
+
// ToolBtn 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
121
125
|
import type { IToolBtn } from '@blueking/chat-x';
|
|
122
126
|
|
|
123
127
|
const handleClick = (data: IToolBtn & { active?: boolean; disabled?: boolean }, event: MouseEvent) => {
|
|
@@ -153,7 +157,7 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
153
157
|
|
|
154
158
|
<script setup lang="ts">
|
|
155
159
|
import { ref } from 'vue';
|
|
156
|
-
|
|
160
|
+
// ToolBtn 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
157
161
|
import type { IToolBtn } from '@blueking/chat-x';
|
|
158
162
|
|
|
159
163
|
const activeId = ref<string | null>(null);
|
|
@@ -212,7 +216,8 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
212
216
|
</template>
|
|
213
217
|
|
|
214
218
|
<script setup lang="ts">
|
|
215
|
-
import {
|
|
219
|
+
import { DownloadIcon } from '@blueking/chat-x';
|
|
220
|
+
// ToolBtn 未从包入口导出
|
|
216
221
|
</script>
|
|
217
222
|
```
|
|
218
223
|
|
|
@@ -234,7 +239,8 @@ click 事件:disabled=true 时被 JS 拦截,不触发 emit
|
|
|
234
239
|
</template>
|
|
235
240
|
|
|
236
241
|
<script setup lang="ts">
|
|
237
|
-
import {
|
|
242
|
+
import { FullScreenIcon } from '@blueking/chat-x';
|
|
243
|
+
// ToolBtn 未从包入口导出
|
|
238
244
|
|
|
239
245
|
const handleFullScreen = () => {
|
|
240
246
|
// 进入全屏逻辑
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
---
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
|
-
#
|
|
14
|
+
# ToolCallRender 工具调用渲染器
|
|
15
15
|
## 源码事实
|
|
16
16
|
|
|
17
17
|
- **源码位置**:`src/components/tool-call/toolcall-render/toolcall-render.vue`
|
|
@@ -47,14 +47,14 @@
|
|
|
47
47
|
|
|
48
48
|
```vue
|
|
49
49
|
<template>
|
|
50
|
-
<
|
|
50
|
+
<ToolCallRender
|
|
51
51
|
:tool-call="toolCall"
|
|
52
52
|
:status="MessageStatus.Complete"
|
|
53
53
|
/>
|
|
54
54
|
</template>
|
|
55
55
|
|
|
56
56
|
<script setup lang="ts">
|
|
57
|
-
import {
|
|
57
|
+
import { ToolCallRender, MessageStatus, MessageContentType, type ToolCall } from '@blueking/chat-x';
|
|
58
58
|
|
|
59
59
|
const toolCall: ToolCall = {
|
|
60
60
|
id: 'call_1',
|
|
@@ -171,10 +171,10 @@ durationDisplay = formatDuration(props.duration || toolCall?.toolMessage?.durati
|
|
|
171
171
|
|
|
172
172
|
```vue
|
|
173
173
|
<!-- 方式一:直接传 duration prop(优先) -->
|
|
174
|
-
<
|
|
174
|
+
<ToolCallRender :tool-call="toolCall" status="complete" :duration="1200" />
|
|
175
175
|
|
|
176
176
|
<!-- 方式二(推荐):duration 放在 toolMessage 中,无需额外 prop -->
|
|
177
|
-
<
|
|
177
|
+
<ToolCallRender :tool-call="toolCallWithDuration" status="complete" />
|
|
178
178
|
```
|
|
179
179
|
|
|
180
180
|
```typescript
|
|
@@ -242,7 +242,7 @@ const failedToolCall: ToolCall = {
|
|
|
242
242
|
|
|
243
243
|
## 与 AssistantMessage 配合
|
|
244
244
|
|
|
245
|
-
`
|
|
245
|
+
`ToolCallRender` 通常不需要单独使用,将 `toolCalls` 传给 `AssistantMessage`,会自动为每个工具调用渲染 `ToolCallRender`:
|
|
246
246
|
|
|
247
247
|
```typescript
|
|
248
248
|
const assistantMessage = {
|
|
@@ -274,7 +274,7 @@ const assistantMessage = {
|
|
|
274
274
|
|
|
275
275
|
```vue
|
|
276
276
|
<template>
|
|
277
|
-
<
|
|
277
|
+
<ToolCallRender
|
|
278
278
|
v-for="toolCall in assistantMessage.toolCalls"
|
|
279
279
|
:key="toolCall.id"
|
|
280
280
|
:tool-call="toolCall"
|
|
@@ -338,7 +338,7 @@ interface ToolMessage {
|
|
|
338
338
|
role: 'tool';
|
|
339
339
|
content: string; // 返回内容(通常为 JSON 字符串)
|
|
340
340
|
status: MessageStatus;
|
|
341
|
-
duration: number; // 调用耗时(毫秒),被
|
|
341
|
+
duration: number; // 调用耗时(毫秒),被 ToolCallRender 自动读取
|
|
342
342
|
error?: string; // 错误信息(仅当 content 为空时由 ToolMessage 展示)
|
|
343
343
|
toolCallId: string; // 对应 ToolCall.id
|
|
344
344
|
}
|
|
@@ -122,7 +122,8 @@ useAnimationText 接收 MaybeRef<string> 与可选 AnimationConfig(fadeDuratio
|
|
|
122
122
|
</template>
|
|
123
123
|
|
|
124
124
|
<script setup lang="ts">
|
|
125
|
-
|
|
125
|
+
// AnimationText 未从包入口导出,见内部组件文档
|
|
126
|
+
// import { useAnimationText } from '@blueking/chat-x' 才是公开 API
|
|
126
127
|
</script>
|
|
127
128
|
```
|
|
128
129
|
|
|
@@ -67,8 +67,8 @@ import {
|
|
|
67
67
|
useCustomTabProvider,
|
|
68
68
|
useMessageGroup,
|
|
69
69
|
FILE_ARTIFACT_TAB_NAME,
|
|
70
|
+
t,
|
|
70
71
|
} from '@blueking/chat-x';
|
|
71
|
-
import { t } from '@blueking/chat-x/lang';
|
|
72
72
|
|
|
73
73
|
const { addCustomTab, ensureCustomTab, removeCustomTab } = useCustomTabProvider({ /* ... */ });
|
|
74
74
|
|
|
@@ -157,6 +157,16 @@ const onArtifactClick = async (file: AIFileInfo) => {
|
|
|
157
157
|
| `FILE_ARTIFACT_TAB_NAME` | `'file-artifact'` | 「文件产物」侧栏 Tab 的固定标识,不可关闭 |
|
|
158
158
|
| `ARTIFACT_PREVIEW_TOKEN` | `Symbol` | provide/inject 注入 Token |
|
|
159
159
|
|
|
160
|
+
## triggerArtifactDownload
|
|
161
|
+
|
|
162
|
+
从包入口导出,用临时 `<a download>` 触发浏览器下载(面板下载按钮内部使用):
|
|
163
|
+
|
|
164
|
+
```typescript
|
|
165
|
+
import { triggerArtifactDownload } from '@blueking/chat-x';
|
|
166
|
+
|
|
167
|
+
triggerArtifactDownload(downloadUrl, file.name);
|
|
168
|
+
```
|
|
169
|
+
|
|
160
170
|
## 返回值说明
|
|
161
171
|
|
|
162
172
|
| 属性/方法名 | 类型 | 说明 |
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
useFlowNodeActions 接收 onInterruptResume 与 openNodeDetail,返回 getNodeActions 与 isNodePending。 失败节点按 retryable/skippable 展示重试/跳过,详情恒在末尾;点击后进入 pending 防重复提交, 以 task_id:node_id:retry 为键自动收敛;点击 resume 时不传 interrupt。
|
|
4
|
+
useFlowNodeActions 接收 onInterruptResume 与 openNodeDetail,返回 getNodeActions 与 isNodePending。 失败节点按 retryable/skippable 展示重试/跳过,详情恒在末尾;点击后进入 pending 防重复提交, 以 task_id:node_id:retry 为键自动收敛;点击 resume 时不传 interrupt。 hideResumeActions 为 true 时只返回详情,覆盖 Share 分享态与侧栏「执行情况」面板两类只读场景。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **flow-agent-content** — FlowAgentContent 内部消费,驱动节点行尾按钮组渲染
|
|
@@ -11,6 +11,10 @@ useFlowNodeActions 接收 onInterruptResume 与 openNodeDetail,返回 getNodeA
|
|
|
11
11
|
|
|
12
12
|
# useFlowNodeActions 节点行尾操作
|
|
13
13
|
|
|
14
|
+
> **导出状态**:内部实现,未从 `@blueking/chat-x` 包入口导出。
|
|
15
|
+
> 实现位于 `src/components/chat-content/flow-agent-content/use-flow-node-actions.ts`,未进入 `src/composables/index.ts`。
|
|
16
|
+
> 由 [FlowAgentContent](/components/agent/flow-agent-content) 内部消费。
|
|
17
|
+
|
|
14
18
|
> **分类**:composable
|
|
15
19
|
|
|
16
20
|
将 FlowAgent 节点行尾的「详情(打开侧栏)」与「重试 / 跳过(回传 Agent resume)」聚合为统一的声明式操作列表。`FlowAgentContent` 只需遍历 `getNodeActions` 返回值渲染按钮,显隐与点击行为均收敛于此 composable。
|
|
@@ -21,7 +25,7 @@ useFlowNodeActions 接收 onInterruptResume 与 openNodeDetail,返回 getNodeA
|
|
|
21
25
|
|
|
22
26
|
```typescript
|
|
23
27
|
function useFlowNodeActions(options: {
|
|
24
|
-
/** 隐藏重试 / 跳过等交互式 resume
|
|
28
|
+
/** 隐藏重试 / 跳过等交互式 resume 操作(分享态、侧栏执行情况面板等只读场景,仅保留「详情」查看入口) */
|
|
25
29
|
hideResumeActions?: Ref<boolean>;
|
|
26
30
|
/** resume 回调(与第三方审批取消同一回调,按 payload.operation 分流) */
|
|
27
31
|
onInterruptResume: Ref<OnInterruptResume | undefined>;
|
|
@@ -71,13 +75,16 @@ interface FlowNodeActionVM {
|
|
|
71
75
|
|
|
72
76
|
| 操作 | `id` | 显隐条件 | 点击行为 |
|
|
73
77
|
| ---- | ------------------ | ------------------------------------------ | --------------------------------------------- |
|
|
74
|
-
| 重试 | `flow_node_retry` | `convergedState === 'failed'` 且 `retryable` | 调用 `onInterruptResume`,**不传** `interrupt` |
|
|
75
|
-
| 跳过 | `flow_node_skip` | `convergedState === 'failed'` 且 `skippable` | 同上 |
|
|
76
|
-
| 详情 | `detail` |
|
|
78
|
+
| 重试 | `flow_node_retry` | `convergedState === 'failed'` 且 `retryable`,且 `hideResumeActions` 为 `false` | 调用 `onInterruptResume`,**不传** `interrupt` |
|
|
79
|
+
| 跳过 | `flow_node_skip` | `convergedState === 'failed'` 且 `skippable`,且 `hideResumeActions` 为 `false` | 同上 |
|
|
80
|
+
| 详情 | `detail` | 始终(不受 `hideResumeActions` 影响) | 调用 `openNodeDetail(task.raw, node.raw)` |
|
|
77
81
|
|
|
78
82
|
展示顺序:重试 → 跳过 → 详情。
|
|
79
83
|
|
|
80
|
-
>
|
|
84
|
+
> **只读场景过滤**:`hideResumeActions` 为 `true` 时,`getNodeActions` 直接过滤掉重试 / 跳过,仅返回「详情」查看入口,用于放开查看、禁止交互的场景。`FlowAgentContent` 目前把两类只读场景并入该入参:
|
|
85
|
+
>
|
|
86
|
+
> - `RenderMode.Share` 分享态
|
|
87
|
+
> - 侧栏「执行情况」面板内(`ExecutionSummary` 通过 `EXECUTION_PANEL_TOKEN` 提供上下文,组件用 `useExecutionPanelInject` 读取)
|
|
81
88
|
|
|
82
89
|
## pending 态与防重复提交
|
|
83
90
|
|
|
@@ -112,12 +119,15 @@ onInterruptResume?.({
|
|
|
112
119
|
|
|
113
120
|
```typescript
|
|
114
121
|
import { toRef } from 'vue';
|
|
115
|
-
import { useFlowNodeActions } from '
|
|
116
|
-
|
|
122
|
+
import { useFlowNodeActions } from '../../src/components/chat-content/flow-agent-content/use-flow-node-actions';
|
|
123
|
+
|
|
124
|
+
// 是否处于侧栏「执行情况」面板内;缺省 false,即对话流内渲染
|
|
125
|
+
// useExecutionPanelInject 来自内部 src/composables/use-common.ts,未从包入口导出
|
|
126
|
+
const isInExecutionPanel = useExecutionPanelInject();
|
|
117
127
|
|
|
118
128
|
const { getNodeActions, isNodePending } = useFlowNodeActions({
|
|
119
|
-
//
|
|
120
|
-
hideResumeActions: computed(() => renderMode.value === RenderMode.Share),
|
|
129
|
+
// 分享态与侧栏执行情况面板均只读:过滤重试 / 跳过,仅保留详情
|
|
130
|
+
hideResumeActions: computed(() => renderMode.value === RenderMode.Share || isInExecutionPanel),
|
|
121
131
|
onInterruptResume: toRef(props, 'onInterruptResume'),
|
|
122
132
|
openNodeDetail,
|
|
123
133
|
});
|
|
@@ -164,6 +164,37 @@ const payload = buildSkipResumePayload(interrupt);
|
|
|
164
164
|
// }
|
|
165
165
|
```
|
|
166
166
|
|
|
167
|
+
## useUserQuestion 与选项辅助
|
|
168
|
+
|
|
169
|
+
以下符号经 interrupt 子 barrel 从 `@blueking/chat-x` 导出,实现在 `src/components/chat-message/interrupt-message/user-question/use-user-question.ts`(不在 `composables/index.ts`)。
|
|
170
|
+
|
|
171
|
+
| 符号 | 说明 |
|
|
172
|
+
| --- | --- |
|
|
173
|
+
| `useUserQuestion` | 答题分页、完成态、`setAnswer` / `buildResolvePayload` / `buildSkipPayload` |
|
|
174
|
+
| `buildSkipResumePayload` | 构造 skip resume(`status: 'cancelled'`,`answers: []`) |
|
|
175
|
+
| `OTHERS_OPTION_LABEL` | Others 选项的固定 `label`(`'others'`) |
|
|
176
|
+
| `toLetter` | 选项序号:0 → A,超过 26 回退数字 |
|
|
177
|
+
| `NormalizedUserQuestionOption` | 选择题内部展示类型(含 `letter` / `isOthers`) |
|
|
178
|
+
|
|
179
|
+
```typescript
|
|
180
|
+
import {
|
|
181
|
+
OTHERS_OPTION_LABEL,
|
|
182
|
+
toLetter,
|
|
183
|
+
useUserQuestion,
|
|
184
|
+
type NormalizedUserQuestionOption,
|
|
185
|
+
} from '@blueking/chat-x';
|
|
186
|
+
|
|
187
|
+
const {
|
|
188
|
+
questions,
|
|
189
|
+
currentIndex,
|
|
190
|
+
completed,
|
|
191
|
+
setAnswer,
|
|
192
|
+
buildResolvePayload,
|
|
193
|
+
} = useUserQuestion(() => pendingInterrupt);
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
自定义 `#question` 面板时,作答有效调用 slot 的 `setAnswer`(即 composable 的 `setAnswer`),无需自己拼 resume。
|
|
197
|
+
|
|
167
198
|
## 自定义题目渲染(#question slot)
|
|
168
199
|
|
|
169
200
|
默认每道题由 [UserQuestionChoice](/components/agent/user-question-choice) 渲染;业务可覆盖 `#question` slot 接入自定义表单:
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
将 Markdown token 转成 VNode
|
|
4
|
+
将 Markdown token 转成 VNode;包入口已导出,通常经 MarkdownContent 使用。 源码位置:src/components/chat-content/vnode-renderer.ts。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **markdown-content** — MarkdownContent 对普通 token 分组使用本组件渲染
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
</template>
|
|
42
42
|
|
|
43
43
|
<script setup lang="ts">
|
|
44
|
-
import
|
|
45
|
-
|
|
44
|
+
import { VNodeRenderer } from '@blueking/chat-x';
|
|
45
|
+
// MarkdownIt 未从包入口导出;文档站 demo 使用页面顶部相对路径
|
|
46
46
|
|
|
47
47
|
const md = new MarkdownIt();
|
|
48
48
|
const tokens = md.parse('这是一段 **加粗文本**。', {});
|