@blueking/chat-x 0.0.45-beta.4 → 0.0.45-beta.6
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 +0 -16
- package/dist/ag-ui/types/contents.d.ts +0 -2
- package/dist/ag-ui/types/index.d.ts +0 -2
- package/dist/ag-ui/types/messages.d.ts +0 -2
- package/dist/components/chat-content/flow-agent-content/flow-agent-content.vue.d.ts +0 -3
- package/dist/components/chat-content/flow-agent-content/use-flow-agent.d.ts +0 -4
- package/dist/components/chat-input/chat-input.vue.d.ts +6 -9
- package/dist/components/chat-input/input-attachment/input-attachment.vue.d.ts +0 -1
- package/dist/components/chat-message/activity-message/activity-message.vue.d.ts +1 -4
- package/dist/components/chat-message/assistant-message/assistant-message.vue.d.ts +1 -1
- package/dist/components/chat-message/message-container/message-container.vue.d.ts +7 -14
- package/dist/components/chat-message/message-render/message-render.vue.d.ts +0 -4
- package/dist/components/index.d.ts +2 -3
- package/dist/composables/use-global-config.d.ts +0 -3
- package/dist/composables/use-message-group.d.ts +823 -2609
- package/dist/icons/index.d.ts +0 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1935 -2564
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +2 -34
- package/dist/mcp/generated/docs/activity-message.md +7 -21
- package/dist/mcp/generated/docs/ai-image.md +4 -9
- package/dist/mcp/generated/docs/ai-loading.md +6 -11
- package/dist/mcp/generated/docs/ai-selection.md +5 -10
- package/dist/mcp/generated/docs/animation-text.md +4 -9
- package/dist/mcp/generated/docs/assistant-message.md +5 -10
- package/dist/mcp/generated/docs/chat-container.md +19 -153
- package/dist/mcp/generated/docs/chat-input.md +9 -45
- package/dist/mcp/generated/docs/cite-content.md +3 -8
- package/dist/mcp/generated/docs/code-content.md +4 -9
- package/dist/mcp/generated/docs/common-error-content.md +5 -10
- package/dist/mcp/generated/docs/constants.md +3 -68
- package/dist/mcp/generated/docs/content-render.md +5 -10
- package/dist/mcp/generated/docs/delete-tool.md +4 -9
- package/dist/mcp/generated/docs/desc-panel.md +4 -9
- package/dist/mcp/generated/docs/execution-summary.md +5 -10
- package/dist/mcp/generated/docs/file-content.md +4 -9
- package/dist/mcp/generated/docs/file-upload-btn.md +5 -10
- package/dist/mcp/generated/docs/highlight-keyword.md +5 -10
- package/dist/mcp/generated/docs/image-content.md +4 -9
- package/dist/mcp/generated/docs/image-preview-group.md +4 -9
- package/dist/mcp/generated/docs/image-preview.md +5 -10
- package/dist/mcp/generated/docs/info-message.md +2 -7
- package/dist/mcp/generated/docs/key-value-content.md +4 -9
- package/dist/mcp/generated/docs/latex-content.md +4 -9
- package/dist/mcp/generated/docs/loading-message.md +6 -11
- package/dist/mcp/generated/docs/markdown-container.md +1 -1
- package/dist/mcp/generated/docs/markdown-content.md +8 -13
- 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 +4 -9
- package/dist/mcp/generated/docs/message-container.md +11 -69
- package/dist/mcp/generated/docs/message-render.md +11 -23
- package/dist/mcp/generated/docs/message-tools.md +5 -10
- package/dist/mcp/generated/docs/messages.md +11 -75
- package/dist/mcp/generated/docs/overflow-tips.md +4 -4
- package/dist/mcp/generated/docs/reasoning-message.md +5 -10
- package/dist/mcp/generated/docs/reference-content.md +5 -10
- package/dist/mcp/generated/docs/scroll-btn.md +3 -8
- package/dist/mcp/generated/docs/selection-footer.md +4 -9
- package/dist/mcp/generated/docs/shortcut-btn.md +5 -10
- package/dist/mcp/generated/docs/shortcut-btns.md +5 -10
- package/dist/mcp/generated/docs/shortcut-render.md +5 -10
- package/dist/mcp/generated/docs/text-content.md +4 -9
- package/dist/mcp/generated/docs/theme.md +4 -50
- package/dist/mcp/generated/docs/tool-btn.md +4 -9
- package/dist/mcp/generated/docs/tool-message.md +5 -10
- package/dist/mcp/generated/docs/toolcall-render.md +5 -10
- 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-full-screen.md +3 -3
- package/dist/mcp/generated/docs/use-global-config.md +5 -20
- package/dist/mcp/generated/docs/use-menu-keydown.md +1 -1
- package/dist/mcp/generated/docs/use-message-group.md +9 -40
- package/dist/mcp/generated/docs/use-observer-visible-list.md +1 -1
- package/dist/mcp/generated/docs/user-feedback.md +3 -8
- package/dist/mcp/generated/docs/user-message.md +5 -10
- package/dist/mcp/generated/index.json +560 -1103
- 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 +6 -7
- package/dist/mcp/tools/list-components.js +29 -23
- 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/package.json +21 -23
- package/dist/ag-ui/types/interrupt.d.ts +0 -137
- package/dist/ag-ui/types/schema.d.ts +0 -42
- package/dist/components/ai-questions/questions-container.vue.d.ts +0 -3
- package/dist/components/ai-questions/selection-question.vue.d.ts +0 -3
- package/dist/components/chat-content/flow-agent-content/use-flow-node-actions.d.ts +0 -32
- package/dist/components/chat-content/index.d.ts +0 -2
- package/dist/components/chat-input/input-info-alert.vue.d.ts +0 -6
- package/dist/components/chat-message/interrupt-message/index.d.ts +0 -2
- package/dist/components/chat-message/interrupt-message/interrupt-message.vue.d.ts +0 -17
- package/dist/components/chat-message/interrupt-message/tool-approval-card.vue.d.ts +0 -8
- package/dist/components/chat-message/interrupt-message/user-question/index.d.ts +0 -5
- package/dist/components/chat-message/interrupt-message/user-question/use-user-question.d.ts +0 -35
- package/dist/components/chat-message/interrupt-message/user-question/user-question-answered-card.vue.d.ts +0 -25
- package/dist/components/chat-message/interrupt-message/user-question/user-question-card.vue.d.ts +0 -25
- package/dist/components/chat-message/interrupt-message/user-question/user-question-choice.vue.d.ts +0 -13
- package/dist/components/chat-message/interrupt-message/user-question/user-question-option.vue.d.ts +0 -17
- package/dist/icons/interrupt.d.ts +0 -24
- package/dist/mcp/generated/docs/activity-layout.md +0 -138
- package/dist/mcp/generated/docs/ai-prompt-list.md +0 -42
- package/dist/mcp/generated/docs/ai-slash-editor.md +0 -43
- package/dist/mcp/generated/docs/ai-slash-input.md +0 -43
- package/dist/mcp/generated/docs/ai-slash-menu.md +0 -42
- package/dist/mcp/generated/docs/detail-section.md +0 -93
- package/dist/mcp/generated/docs/flow-agent-content.md +0 -252
- package/dist/mcp/generated/docs/flow-agent-node-detail.md +0 -240
- package/dist/mcp/generated/docs/input-attachment.md +0 -43
- package/dist/mcp/generated/docs/input-info-alert.md +0 -42
- package/dist/mcp/generated/docs/interrupt-message.md +0 -204
- package/dist/mcp/generated/docs/interrupt.md +0 -354
- package/dist/mcp/generated/docs/knowledge-rag-content.md +0 -126
- package/dist/mcp/generated/docs/message-loading.md +0 -120
- package/dist/mcp/generated/docs/preview-toolbar.md +0 -42
- package/dist/mcp/generated/docs/questions-container.md +0 -88
- package/dist/mcp/generated/docs/reference-doc-content.md +0 -112
- package/dist/mcp/generated/docs/schema.md +0 -93
- package/dist/mcp/generated/docs/selection-question.md +0 -91
- package/dist/mcp/generated/docs/simple-table.md +0 -103
- package/dist/mcp/generated/docs/tool-approval-card.md +0 -148
- package/dist/mcp/generated/docs/use-flow-node-actions.md +0 -124
- package/dist/mcp/generated/docs/user-question-answered-card.md +0 -106
- package/dist/mcp/generated/docs/user-question-card.md +0 -211
- package/dist/mcp/generated/docs/user-question-choice.md +0 -108
- package/dist/mcp/generated/docs/user-question-option.md +0 -42
- package/dist/mcp/generated/docs/vnode-renderer.md +0 -126
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ReasoningMessage 展示 AI 思维链(Chain-of-Thought)推理过程,含可折叠标题与 Markdown 内容区;可传入 duration 并在结束后自动折叠。 content 为字符串数组(或兼容字符串)。由 MessageRender 在 reasoning 角色下使用,常出现在用户消息与正式回答之间。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-render** — 由 MessageRender 在 role 为 reasoning 时创建
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ReasoningMessage 推理消息
|
|
15
|
-
## 源码事实
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
- **能力域**:消息系统
|
|
19
|
-
- **能力说明**:渲染推理过程,覆盖加载、错误与 Markdown 内容展示。
|
|
20
|
-
|
|
21
|
-
> **能力域**:消息系统
|
|
16
|
+
> **层级**:分子组件 · **功能域**:消息展示
|
|
22
17
|
|
|
23
18
|
AI 思维链(Chain-of-Thought)推理过程展示组件。由**可点击标题栏**和**内容区域**组成,内容区支持 Markdown 渲染。`duration` 传入后自动折叠一次,用户可随时点击标题展开/收起。
|
|
24
19
|
|
|
@@ -233,6 +228,6 @@ enum MessageStatus {
|
|
|
233
228
|
|
|
234
229
|
## 关联组件
|
|
235
230
|
|
|
236
|
-
- [MessageRender](
|
|
237
|
-
- [AssistantMessage](
|
|
238
|
-
- [MarkdownContent](/
|
|
231
|
+
- [MessageRender](./message-render.md) — reasoning 角色由其实例化
|
|
232
|
+
- [AssistantMessage](./assistant-message.md) — 推理后常接正式回答
|
|
233
|
+
- [MarkdownContent](../atomic/markdown-content.md) — 推理正文 Markdown 渲染
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ReferenceContent 以列表形式展示 AI 回复引用的参考文档:图标、标题、摘要与外链跳转。 由 ContentRender、ActivityMessage 等按消息类型分发时挂载。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **content-render** — ReferenceDocument 类型内容路由到本组件
|
|
@@ -11,15 +11,10 @@
|
|
|
11
11
|
<!-- FULL DOC -->
|
|
12
12
|
|
|
13
13
|
# ReferenceContent 引用文档内容
|
|
14
|
-
## 源码事实
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
- **能力域**:内容渲染
|
|
18
|
-
- **能力说明**:渲染引用文档/来源列表。
|
|
15
|
+
> **层级**:原子组件 · **功能域**:辅助组件
|
|
19
16
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
引用文档列表渲染基础组件,用于展示 AI 回复中引用的参考文档,每项包含文档图标、标题、预览与跳转操作。
|
|
17
|
+
引用文档列表渲染原子组件,用于展示 AI 回复中引用的参考文档,每项包含文档图标、标题、预览与跳转操作。
|
|
23
18
|
|
|
24
19
|
主要由 `ActivityMessage`(知识库问答场景)和 `ContentRender`(`reference_document` 类型内容)内部使用。
|
|
25
20
|
|
|
@@ -133,5 +128,5 @@ h(ReferenceContent, { content: props.content as ReferenceDocumentContent[] });
|
|
|
133
128
|
|
|
134
129
|
## 关联组件
|
|
135
130
|
|
|
136
|
-
- [ContentRender](/
|
|
137
|
-
- [ActivityMessage](/
|
|
131
|
+
- [ContentRender](../molecular/content-render.md) — 内容类型分发
|
|
132
|
+
- [ActivityMessage](../molecular/activity-message.md) — 活动消息内引用
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ScrollBtn 为底部浮动操作提供统一胶囊外壳(圆角、阴影),具体图标与行为由插槽与父级决定。 常由 MessageContainer 用于「返回底部」与「停止生成」等场景。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-container** — 消息列表底部固定区挂载滚动与停止按钮
|
|
@@ -10,13 +10,8 @@
|
|
|
10
10
|
<!-- FULL DOC -->
|
|
11
11
|
|
|
12
12
|
# ScrollBtn 滚动按钮
|
|
13
|
-
## 源码事实
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
- **能力域**:工具与反馈
|
|
17
|
-
- **能力说明**:停止生成或返回底部等滚动/状态按钮。
|
|
18
|
-
|
|
19
|
-
> **能力域**:工具与反馈
|
|
14
|
+
> **层级**:原子组件 · **功能域**:辅助组件
|
|
20
15
|
|
|
21
16
|
聊天容器底部浮动操作按钮的外壳组件,提供统一的胶囊样式(圆角 26px、高 24px、阴影),内容完全由插槽定制。
|
|
22
17
|
|
|
@@ -157,4 +152,4 @@ div.ai-scroll-btn(flex,gap: 4px,width: fit-content,min-width: 84px,hei
|
|
|
157
152
|
|
|
158
153
|
## 关联组件
|
|
159
154
|
|
|
160
|
-
- [MessageContainer](/
|
|
155
|
+
- [MessageContainer](../molecular/message-container.md) — 底部固定区集成
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
SelectionFooter 为消息多选(如分享)提供底部操作栏:全选、取消与确认,并反映选中数量与 loading。 由 ChatContainer 在对应模式下自动挂载,业务一般无需单独引用。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **chat-container** — 多选/分享模式由容器渲染底部栏
|
|
@@ -11,13 +11,8 @@
|
|
|
11
11
|
<!-- FULL DOC -->
|
|
12
12
|
|
|
13
13
|
# SelectionFooter 选择操作栏
|
|
14
|
-
## 源码事实
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
- **能力域**:输入交互
|
|
18
|
-
- **能力说明**:消息多选/分享模式下的底部操作栏。
|
|
19
|
-
|
|
20
|
-
> **能力域**:输入交互
|
|
15
|
+
> **层级**:原子组件 · **功能域**:辅助组件
|
|
21
16
|
|
|
22
17
|
消息多选模式下的底部操作栏,提供全选、取消和确认操作。由 `ChatContainer` 在分享模式下自动渲染,通常不需要单独使用。
|
|
23
18
|
|
|
@@ -76,5 +71,5 @@
|
|
|
76
71
|
|
|
77
72
|
## 关联组件
|
|
78
73
|
|
|
79
|
-
- [ChatContainer](/
|
|
80
|
-
- [MessageContainer](/
|
|
74
|
+
- [ChatContainer](../molecular/chat-container.md) — 分享模式挂载
|
|
75
|
+
- [MessageContainer](../molecular/message-container.md) — 多选与消息列表
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ShortcutBtn 渲染单个快捷指令入口,封装图标解析与「按钮 / 下拉菜单项」两种布局,并暴露根元素供父级测量。 由 ShortcutBtns、AiSelection、ChatInput 内部复用;含 components 的快捷指令可无默认图标。 通过 click 事件传出当前 Shortcut,append 槽常用于关闭按钮。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **shortcut-btns** — 快捷指令横向列表中作为单项渲染
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ShortcutBtn 快捷指令按钮
|
|
15
|
-
## 源码事实
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
- **能力域**:输入交互
|
|
19
|
-
- **能力说明**:单个快捷指令按钮,支持默认/append 插槽和 expose focus。
|
|
20
|
-
|
|
21
|
-
> **能力域**:输入交互
|
|
16
|
+
> **层级**:原子组件 · **功能域**:输入交互
|
|
22
17
|
|
|
23
18
|
单个快捷指令的渲染单元,封装图标选择逻辑和两种布局模式(按钮 / 菜单项)。
|
|
24
19
|
|
|
@@ -202,6 +197,6 @@ interface Shortcut {
|
|
|
202
197
|
|
|
203
198
|
## 关联组件
|
|
204
199
|
|
|
205
|
-
- [ShortcutBtns](
|
|
206
|
-
- [AiSelection](/
|
|
207
|
-
- [ChatInput](/
|
|
200
|
+
- [ShortcutBtns](./shortcut-btns.md) — 快捷指令列表容器
|
|
201
|
+
- [AiSelection](../molecular/ai-selection.md) — 划词浮窗内使用
|
|
202
|
+
- [ChatInput](../molecular/chat-input.md) — 已选快捷指令展示
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ShortcutBtns 横向展示快捷指令按钮组,按容器宽度动态计算可见数量,溢出收入「更多」下拉。 默认由 ChatInput 嵌入附件槽;选中含 components 的指令后需配合 ShortcutRender 展示表单。 通过 selectShortcut 等与外层同步当前快捷指令。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **shortcut-btn** — 列表中每一项由 ShortcutBtn 渲染
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ShortcutBtns 快捷指令按钮组
|
|
15
|
-
## 源码事实
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
- **能力域**:输入交互
|
|
19
|
-
- **能力说明**:快捷指令列表入口,内部组合多个 ShortcutBtn。
|
|
20
|
-
|
|
21
|
-
> **能力域**:输入交互
|
|
16
|
+
> **层级**:原子组件 · **功能域**:输入交互
|
|
22
17
|
|
|
23
18
|
快捷指令按钮列表,内置**响应式溢出收起**:根据容器实际宽度动态计算可见数量,超出部分自动收入"更多"下拉菜单。
|
|
24
19
|
|
|
@@ -264,6 +259,6 @@ interface BaseShortcutComponent<T> {
|
|
|
264
259
|
|
|
265
260
|
## 关联组件
|
|
266
261
|
|
|
267
|
-
- [ShortcutBtn](
|
|
268
|
-
- [ChatInput](/
|
|
269
|
-
- [ShortcutRender](/
|
|
262
|
+
- [ShortcutBtn](./shortcut-btn.md) — 列表项原子组件
|
|
263
|
+
- [ChatInput](../molecular/chat-input.md) — 默认嵌入输入框底部
|
|
264
|
+
- [ShortcutRender](../molecular/shortcut-render.md) — 表单类快捷指令的表单渲染
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ShortcutRender 将 Shortcut.components 声明渲染为 bkui-vue Form,支持多种控件与两列网格、必填校验及提交/取消。 通常由 ChatContainer 等布局挂载在输入区旁,formModel 与快捷指令回填联动。 与 Shortcut、ShortcutBtn 等共享同一套快捷指令数据模型。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **shortcut-btn** — 与快捷指令 Shortcut 元数据一致,表单提交前在列表中选中入口
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ShortcutRender 快捷指令渲染器
|
|
15
|
-
## 源码事实
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
- **能力域**:输入交互
|
|
19
|
-
- **能力说明**:渲染快捷指令 components 表单并回传确认数据。
|
|
20
|
-
|
|
21
|
-
> **能力域**:输入交互
|
|
16
|
+
> **层级**:分子组件 · **功能域**:输入交互
|
|
22
17
|
|
|
23
18
|
快捷指令表单渲染组件,将 `Shortcut.components` 配置自动渲染为可交互表单(基于 bkui-vue 的 `Form`),支持 8 种控件类型、两列网格布局、必填校验和内置提交/取消操作。
|
|
24
19
|
|
|
@@ -422,6 +417,6 @@ interface BaseShortcutComponent {
|
|
|
422
417
|
|
|
423
418
|
## 关联组件
|
|
424
419
|
|
|
425
|
-
- [ShortcutBtn](/
|
|
426
|
-
- [ChatInput](
|
|
427
|
-
- [ChatContainer](
|
|
420
|
+
- [ShortcutBtn](../atomic/shortcut-btn.md) — 与 Shortcut 数据模型一致的入口按钮
|
|
421
|
+
- [ChatInput](./chat-input.md) — 输入区与快捷指令流程联动
|
|
422
|
+
- [ChatContainer](./chat-container.md) — 顶层布局中挂载快捷表单
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
TextContent 用 Vue 文本插值渲染纯文本气泡,不解析 HTML,适合简单提示与用户/助手纯文案。 需要 Markdown、代码块或公式时应改用 MarkdownContent 等富文本组件。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **markdown-content** — 需要富文本时的替代方案
|
|
@@ -11,13 +11,8 @@
|
|
|
11
11
|
<!-- FULL DOC -->
|
|
12
12
|
|
|
13
13
|
# TextContent 文本内容
|
|
14
|
-
## 源码事实
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
- **能力域**:内容渲染
|
|
18
|
-
- **能力说明**:渲染纯文本内容。
|
|
19
|
-
|
|
20
|
-
> **能力域**:内容渲染
|
|
15
|
+
> **层级**:原子组件 · **功能域**:辅助组件
|
|
21
16
|
|
|
22
17
|
纯文本气泡组件,使用 Vue 文本插值渲染 `content`,天然防 XSS。
|
|
23
18
|
|
|
@@ -75,5 +70,5 @@ div.text-content
|
|
|
75
70
|
|
|
76
71
|
## 关联组件
|
|
77
72
|
|
|
78
|
-
- [MarkdownContent](
|
|
79
|
-
- [UserMessage](/
|
|
73
|
+
- [MarkdownContent](./markdown-content.md) — 富文本替代
|
|
74
|
+
- [UserMessage](../molecular/user-message.md) — 用户消息气泡
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
说明通过 SCSS 变量(尺寸、颜色、z-index
|
|
4
|
+
说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、ai-markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **chat-container** — 整体布局与侧栏
|
|
@@ -26,51 +26,6 @@
|
|
|
26
26
|
import { ChatInput, MessageContainer } from '@blueking/chat-x';
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
## 字号主题
|
|
30
|
-
|
|
31
|
-
组件库通过根节点 `[data-ai-size]` 切换两档字号主题,内部组件统一引用 CSS 变量(均带兜底值,无 provider 时退回 `small`)。
|
|
32
|
-
|
|
33
|
-
### 切换方式
|
|
34
|
-
|
|
35
|
-
| 方式 | 说明 |
|
|
36
|
-
| ---- | ---- |
|
|
37
|
-
| `ChatContainer` 的 `size` prop | 推荐。根节点 `.ai-chat-container` 设置 `data-ai-size`;同时通过 `useGlobalConfig` 注入 `size` 供逻辑层读取 |
|
|
38
|
-
| 手动设置 `data-ai-size` | 在任意祖先元素上设置 `data-ai-size="small"` 或 `data-ai-size="normal"`,后代继承 CSS 变量 |
|
|
39
|
-
| `document.body.dataset.aiSize` | `ChatContainer` 会自动同步,供 Tippy / Teleport 等挂载到 `body` 的浮层继承字号变量;容器卸载时清理 |
|
|
40
|
-
|
|
41
|
-
```vue
|
|
42
|
-
<template>
|
|
43
|
-
<ChatContainer v-model="input" :messages="messages" size="normal" />
|
|
44
|
-
</template>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
### CSS 变量
|
|
48
|
-
|
|
49
|
-
定义于 `src/styles/size-theme.scss`,随 `global.scss` 自动引入:
|
|
50
|
-
|
|
51
|
-
| 变量名 | `small`(默认) | `normal` | 说明 |
|
|
52
|
-
| ------ | --------------- | -------- | ---- |
|
|
53
|
-
| `--ai-font-size` | `12px` | `14px` | 基准字号 |
|
|
54
|
-
| `--ai-line-height` | `20px` | `24px` | 标准行高 |
|
|
55
|
-
| `--ai-line-height-compact` | `20px` | `22px` | 紧凑行高 |
|
|
56
|
-
| `--ai-spacing-comfortable` | `8px` | `12px` | 舒适间距(如消息气泡水平内边距) |
|
|
57
|
-
| `--ai-icon-size` | `16px` | `20px` | 标准图标尺寸 |
|
|
58
|
-
| `--ai-icon-size-sm` | `16px` | `18px` | 小号图标尺寸 |
|
|
59
|
-
|
|
60
|
-
组件样式中统一使用 `var(--ai-font-size, 12px)` 等形式引用,保证无 `data-ai-size` 时仍退回 small 档位。
|
|
61
|
-
|
|
62
|
-
```scss
|
|
63
|
-
// 示例:在自定义样式中复用字号主题变量
|
|
64
|
-
.my-custom-panel {
|
|
65
|
-
font-size: var(--ai-font-size, 12px);
|
|
66
|
-
line-height: var(--ai-line-height, 20px);
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### 骨架屏
|
|
71
|
-
|
|
72
|
-
全局类 `.ai-skeleton-element` 用于加载占位(如 FlowAgent 节点详情、UserFeedback 原因列表)。可通过 `.skeleton-element-lg` 修饰尺寸。详见各业务组件文档中的加载态说明。
|
|
73
|
-
|
|
74
29
|
## SCSS 变量
|
|
75
30
|
|
|
76
31
|
组件库使用以下 SCSS 变量,可以在项目中覆盖:
|
|
@@ -428,7 +383,6 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
428
383
|
|
|
429
384
|
## 关联组件
|
|
430
385
|
|
|
431
|
-
- [ChatContainer](../components/
|
|
432
|
-
- [
|
|
433
|
-
- [
|
|
434
|
-
- [MessageContainer](../components/setup/message-container) — 消息列表区域
|
|
386
|
+
- [ChatContainer](../components/molecular/chat-container.md) — 布局与主题根节点
|
|
387
|
+
- [ChatInput](../components/molecular/chat-input.md) — 输入区变量与类名
|
|
388
|
+
- [MessageContainer](../components/molecular/message-container.md) — 消息列表区域
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ToolBtn 为消息工具栏提供单个操作入口:内置常用 id 与 SVG 图标映射、Tippy 提示、激活与禁用态。 通常由 MessageTools 遍历配置渲染;DeleteTool 也可将其作为删除触发的视觉入口。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-tools** — 父级组装多个工具按钮与交互
|
|
@@ -11,13 +11,8 @@
|
|
|
11
11
|
<!-- FULL DOC -->
|
|
12
12
|
|
|
13
13
|
# ToolBtn 工具按钮
|
|
14
|
-
## 源码事实
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
- **能力域**:工具与反馈
|
|
18
|
-
- **能力说明**:工具栏图标按钮。
|
|
19
|
-
|
|
20
|
-
> **能力域**:工具与反馈
|
|
15
|
+
> **层级**:原子组件 · **功能域**:工具与反馈
|
|
21
16
|
|
|
22
17
|
消息工具栏中的单个操作按钮,内置 SVG 图标映射、Tippy 悬浮提示、激活态与禁用态,通常由 `MessageTools` 管理,一般不需要手动使用。
|
|
23
18
|
|
|
@@ -286,5 +281,5 @@ type ToolIcons =
|
|
|
286
281
|
|
|
287
282
|
## 关联组件
|
|
288
283
|
|
|
289
|
-
- [MessageTools](/
|
|
290
|
-
- [DeleteTool](/
|
|
284
|
+
- [MessageTools](../molecular/message-tools.md) — 工具栏容器
|
|
285
|
+
- [DeleteTool](../molecular/delete-tool.md) — 删除确认内嵌触发
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ToolMessage 展示工具(Function Call)执行返回,内部用 DescPanel 将 JSON 解析为 key-value 或纯文本。通常不单独使用: ToolcallRender 在 toolCall.toolMessage 有值时内联渲染;独立 role 为 tool 的消息由 MessageRender 统一渲染。核心关注 content 与 error。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **assistant-message** — 结果常作为 assistant 消息中 toolCall.toolMessage 内联展示
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ToolMessage 工具消息
|
|
15
|
-
## 源码事实
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
- **能力域**:消息系统
|
|
19
|
-
- **能力说明**:渲染工具返回内容,JSON 场景交给 DescPanel 展示。
|
|
20
|
-
|
|
21
|
-
> **能力域**:消息系统
|
|
16
|
+
> **层级**:分子组件 · **功能域**:消息展示
|
|
22
17
|
|
|
23
18
|
工具(Function Call)执行结果展示组件。内部通过 `DescPanel` 渲染,标题固定为"返回内容",支持将 JSON 自动解析为 key-value 列表。
|
|
24
19
|
|
|
@@ -217,6 +212,6 @@ interface ToolMessage {
|
|
|
217
212
|
|
|
218
213
|
## 关联组件
|
|
219
214
|
|
|
220
|
-
- [AssistantMessage](
|
|
221
|
-
- [MessageRender](
|
|
222
|
-
- [DescPanel](/
|
|
215
|
+
- [AssistantMessage](./assistant-message.md) — toolCall.toolMessage 内联场景
|
|
216
|
+
- [MessageRender](./message-render.md) — 独立 tool 消息派发
|
|
217
|
+
- [DescPanel](../atomic/desc-panel.md) — 返回内容面板
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
ToolcallRender 折叠展示一次工具/MCP 调用:头部显示名称、状态色、耗时与 MCP 标识,展开区展示参数与返回。 内部组合 DescPanel 与 HighlightKeyword;可在详情底部内联 ToolMessage 结果。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **desc-panel** — 详情区展示参数与描述文本
|
|
@@ -12,13 +12,8 @@
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# ToolcallRender 工具调用渲染器
|
|
15
|
-
## 源码事实
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
- **能力域**:Agent 能力
|
|
19
|
-
- **能力说明**:渲染 assistant toolCalls,展示工具调用状态、参数和结果。
|
|
20
|
-
|
|
21
|
-
> **能力域**:Agent 能力
|
|
16
|
+
> **层级**:分子组件 · **功能域**:工具与反馈
|
|
22
17
|
|
|
23
18
|
展示 AI 调用外部工具/函数过程与结果的渲染组件。由**可折叠头部**和**详情面板**组成,根据 `status` 自动切换颜色和状态文案,支持 MCP 调用识别和内联结果展示。
|
|
24
19
|
|
|
@@ -299,6 +294,6 @@ interface ToolMessage {
|
|
|
299
294
|
|
|
300
295
|
## 关联组件
|
|
301
296
|
|
|
302
|
-
- [DescPanel](/
|
|
303
|
-
- [HighlightKeyword](/
|
|
304
|
-
- [ToolMessage](
|
|
297
|
+
- [DescPanel](../atomic/desc-panel.md) — 描述与参数面板
|
|
298
|
+
- [HighlightKeyword](../atomic/highlight-keyword.md) — 标题高亮
|
|
299
|
+
- [ToolMessage](./tool-message.md) — 内联工具返回
|
|
@@ -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/atomic/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/atomic/animation-text.md) — 默认封装组件
|
|
198
|
+
- [MarkdownContent](../components/atomic/markdown-content.md) — 富文本流式展示场景。
|
|
@@ -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/atomic/code-content.md) — 代码块复制
|
|
205
|
+
- [MessageContainer](../components/molecular/message-container.md) — 助手消息复制
|
|
206
|
+
- [UserMessage](../components/molecular/user-message.md) — 用户消息复制
|
|
@@ -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/molecular/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/molecular/chat-container.md) — 内置侧栏全屏按钮
|
|
114
|
+
- [ToolBtn](../components/atomic/tool-btn.md) — 全屏按钮自定义插槽
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
useGlobalConfig 接收 GlobalConfig(含
|
|
4
|
+
useGlobalConfig 接收 GlobalConfig(含 supportUpload: ComputedRef<boolean>),以 GLOBAL_CONFIG_TOKEN provide 给后代; injectGlobalConfig 在子组件中取出配置,无 Provider 时返回 undefined。ChatContainer 在 setup 中调用 useGlobalConfig; UserMessage 等通过 injectGlobalConfig 读取 supportUpload。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **chat-container** — 根容器调用 useGlobalConfig 注入 supportUpload
|
|
@@ -13,20 +13,14 @@ useGlobalConfig 接收 GlobalConfig(含 size?: ComputedRef<AiSizeMode>、suppo
|
|
|
13
13
|
|
|
14
14
|
> **分类**:composable
|
|
15
15
|
|
|
16
|
-
在聊天容器根组件与子组件之间通过 Vue `provide` / `inject`
|
|
17
|
-
|
|
18
|
-
> 字号主题主要通过 `ChatContainer` 根节点的 `data-ai-size` 与 CSS 变量(`--ai-font-size` 等)生效;`GlobalConfig.size` 供后代在逻辑层读取当前档位,样式层无需逐组件传参。
|
|
16
|
+
在聊天容器根组件与子组件之间通过 Vue `provide` / `inject` 共享**全局展示相关配置**(当前主要为是否支持上传 `supportUpload`)。与 Teleport 插槽 ID 无关。
|
|
19
17
|
|
|
20
18
|
## 工作原理
|
|
21
19
|
|
|
22
20
|
```
|
|
23
21
|
ChatContainer(根)
|
|
24
|
-
├── :
|
|
25
|
-
|
|
26
|
-
│ size: computed(() => props.size ?? 'small'),
|
|
27
|
-
│ supportUpload: computed(() => props.supportUpload ?? false),
|
|
28
|
-
│ })
|
|
29
|
-
│ └── provide(GLOBAL_CONFIG_TOKEN, { size, supportUpload })
|
|
22
|
+
├── useGlobalConfig({ supportUpload: computed(() => props.supportUpload ?? false) })
|
|
23
|
+
│ └── provide(GLOBAL_CONFIG_TOKEN, { supportUpload })
|
|
30
24
|
│
|
|
31
25
|
└── MessageContainer → … → UserMessage 等
|
|
32
26
|
|
|
@@ -49,12 +43,10 @@ UserMessage(后代)
|
|
|
49
43
|
import { useGlobalConfig } from '@blueking/chat-x';
|
|
50
44
|
|
|
51
45
|
const props = defineProps<{
|
|
52
|
-
size?: 'normal' | 'small';
|
|
53
46
|
supportUpload?: boolean;
|
|
54
47
|
}>();
|
|
55
48
|
|
|
56
49
|
useGlobalConfig({
|
|
57
|
-
size: computed(() => props.size ?? 'small'),
|
|
58
50
|
supportUpload: computed(() => props.supportUpload ?? false),
|
|
59
51
|
});
|
|
60
52
|
</script>
|
|
@@ -83,15 +75,11 @@ import type { ComputedRef } from 'vue';
|
|
|
83
75
|
|
|
84
76
|
export const GLOBAL_CONFIG_TOKEN: unique symbol;
|
|
85
77
|
|
|
86
|
-
export type AiSizeMode = 'normal' | 'small';
|
|
87
|
-
|
|
88
78
|
export type GlobalConfig = {
|
|
89
|
-
size?: ComputedRef<AiSizeMode>;
|
|
90
79
|
supportUpload: ComputedRef<boolean>;
|
|
91
80
|
};
|
|
92
81
|
|
|
93
82
|
export function useGlobalConfig(options: GlobalConfig): {
|
|
94
|
-
size?: ComputedRef<AiSizeMode>;
|
|
95
83
|
supportUpload: ComputedRef<boolean>;
|
|
96
84
|
};
|
|
97
85
|
|
|
@@ -108,14 +96,12 @@ export function injectGlobalConfig(): GlobalConfig | undefined;
|
|
|
108
96
|
|
|
109
97
|
| 字段 | 说明 |
|
|
110
98
|
| --------------- | ------------------------------------------------------------------------ |
|
|
111
|
-
| `size` | 可选。字号主题档位 `normal`(14px)/ `small`(12px),与 `ChatContainer.size` 对齐 |
|
|
112
99
|
| `supportUpload` | 是否支持上传,与根容器 `ChatContainer` 的 `supportUpload` 等展示策略对齐 |
|
|
113
100
|
|
|
114
101
|
### `useGlobalConfig(options)`
|
|
115
102
|
|
|
116
103
|
| 参数 | 说明 |
|
|
117
104
|
| ----------------------- | ------------------------------------------------------------------------------------- |
|
|
118
|
-
| `options.size` | 可选。字号主题档位,建议使用 `computed(() => props.size ?? 'small')` 与根 props 同步 |
|
|
119
105
|
| `options.supportUpload` | 是否支持上传,建议使用 `computed(() => props.supportUpload ?? false)` 与根 props 同步 |
|
|
120
106
|
|
|
121
107
|
- 调用后立即 `provide(GLOBAL_CONFIG_TOKEN, options)`。
|
|
@@ -136,5 +122,4 @@ export function injectGlobalConfig(): GlobalConfig | undefined;
|
|
|
136
122
|
|
|
137
123
|
## 关联组件
|
|
138
124
|
|
|
139
|
-
- [ChatContainer](../components/
|
|
140
|
-
- [主题配置](../theme/theme) — `data-ai-size` 与 CSS 变量说明
|
|
125
|
+
- [ChatContainer](../components/molecular/chat-container.md) — 调用 `useGlobalConfig` 注入 `supportUpload`
|