@blueking/chat-x 0.0.45-beta.7 → 0.0.45-beta.8
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/ai-slash-input/command.d.ts +1 -2
- package/dist/components/chat-input/ai-slash-input/constants.d.ts +0 -4
- 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 +2224 -355
- 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 +2557 -1937
- 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 +74 -16
- 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 +42 -10
- 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 +18 -13
- 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/types/editor.d.ts +0 -1
- package/dist/utils/utils.d.ts +2 -2
- package/package.json +4 -3
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
渲染知识召回活动,包含加载态、Markdown 内容与引用来源。 源码位置:src/components/chat-content/knowledge-rag-content/knowledge-rag-content.vue。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **activity-message** — activityType 为 knowledge_rag 时分发到本组件
|
|
8
|
+
- **activity-layout** — 提供可折叠的活动容器外壳
|
|
9
|
+
- **markdown-content** — 渲染知识召回摘要正文
|
|
10
|
+
- **reference-content** — 渲染召回引用来源列表
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
<!-- FULL DOC -->
|
|
14
|
+
|
|
15
|
+
# KnowledgeRagContent 知识召回内容
|
|
16
|
+
|
|
17
|
+
> **能力域**:Agent 能力
|
|
18
|
+
|
|
19
|
+
`KnowledgeRagContent` 用于渲染知识召回活动内容,包含活动标题、加载态、Markdown 摘要和引用来源列表。它是 `ActivityMessage` 在 `activityType === 'knowledge_rag'` 时使用的具体内容组件。
|
|
20
|
+
|
|
21
|
+
通常不需要直接使用,`MessageRender -> ActivityMessage` 会根据消息类型自动分发到本组件。
|
|
22
|
+
|
|
23
|
+
## 源码事实
|
|
24
|
+
|
|
25
|
+
- **源码位置**:`src/components/chat-content/knowledge-rag-content/knowledge-rag-content.vue`
|
|
26
|
+
- **能力说明**:渲染知识召回活动,包含加载态、Markdown 内容与引用来源。
|
|
27
|
+
|
|
28
|
+
## 核心能力
|
|
29
|
+
|
|
30
|
+
- **活动外壳**:基于 `ActivityLayout` 渲染可折叠活动区域,默认展开
|
|
31
|
+
- **状态标题**:`status` 为 `pending` / `streaming` 时标题显示“检索中”并展示 Loading;其他状态显示“检索完成”
|
|
32
|
+
- **Markdown 摘要**:使用 `MarkdownContent` 渲染 `content.content`
|
|
33
|
+
- **引用来源**:使用 `ReferenceContent` 渲染 `content.referenceDocument`
|
|
34
|
+
- **空值兜底**:正文缺失时传入空字符串,引用缺失时传入空数组
|
|
35
|
+
|
|
36
|
+
## 基础用法
|
|
37
|
+
|
|
38
|
+
```vue
|
|
39
|
+
<template>
|
|
40
|
+
<KnowledgeRagContent
|
|
41
|
+
v-model:collapsed="collapsed"
|
|
42
|
+
:content="content"
|
|
43
|
+
status="complete"
|
|
44
|
+
/>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<script setup lang="ts">
|
|
48
|
+
import { ref } from 'vue';
|
|
49
|
+
import KnowledgeRagContent from '@blueking/chat-x/src/components/chat-content/knowledge-rag-content/knowledge-rag-content.vue';
|
|
50
|
+
import type { KnowledgeRagMessageContent } from '@blueking/chat-x';
|
|
51
|
+
|
|
52
|
+
const collapsed = ref(false);
|
|
53
|
+
|
|
54
|
+
const content: KnowledgeRagMessageContent = {
|
|
55
|
+
content: '根据知识库检索,**蓝鲸智云** 常见 Agent 接入流程包括...',
|
|
56
|
+
referenceDocument: [
|
|
57
|
+
{ name: 'Agent 接入指南', url: 'https://example.com/agent-guide', originFile: 'https://example.com/docs/agent-guide' },
|
|
58
|
+
],
|
|
59
|
+
};
|
|
60
|
+
</script>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
**渲染效果**
|
|
64
|
+
|
|
65
|
+
## 检索中状态
|
|
66
|
+
|
|
67
|
+
当消息状态为 `pending` 或 `streaming` 时,标题区域显示 Loading,标题文案为“检索中”。
|
|
68
|
+
|
|
69
|
+
## 折叠状态
|
|
70
|
+
|
|
71
|
+
`collapsed` 通过 `v-model:collapsed` 与 `ActivityLayout` 双向绑定,适合由父级活动消息统一控制展开/收起。
|
|
72
|
+
|
|
73
|
+
## API
|
|
74
|
+
|
|
75
|
+
### Props
|
|
76
|
+
|
|
77
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
78
|
+
| ---------- | ---------------------------- | ---- | ------ | ---------------------------------------- |
|
|
79
|
+
| content | `KnowledgeRagMessageContent` | 否 | — | 知识召回摘要与引用来源 |
|
|
80
|
+
| messageUid | `string` | 否 | — | 所属消息唯一标识,当前组件暂未直接使用 |
|
|
81
|
+
| status | `MessageStatus` | 否 | — | 消息状态,影响标题文案与 Loading 显示 |
|
|
82
|
+
|
|
83
|
+
### Models
|
|
84
|
+
|
|
85
|
+
| 名称 | 类型 | 默认值 | 说明 |
|
|
86
|
+
| --------- | --------- | ------- | ---------------- |
|
|
87
|
+
| collapsed | `boolean` | `false` | 活动内容是否折叠 |
|
|
88
|
+
|
|
89
|
+
### Emits
|
|
90
|
+
|
|
91
|
+
- 无显式 emits;`v-model:collapsed` 会产生 `update:collapsed`。
|
|
92
|
+
|
|
93
|
+
### Slots
|
|
94
|
+
|
|
95
|
+
- 无。
|
|
96
|
+
|
|
97
|
+
### Expose
|
|
98
|
+
|
|
99
|
+
- 无。
|
|
100
|
+
|
|
101
|
+
## 类型定义
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
export type KnowledgeRagMessageContent = {
|
|
105
|
+
content: string;
|
|
106
|
+
referenceDocument: ReferenceDocumentContent[];
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export type ReferenceDocumentContent = {
|
|
110
|
+
name: string;
|
|
111
|
+
originFile: string;
|
|
112
|
+
url: string;
|
|
113
|
+
};
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## 使用建议
|
|
117
|
+
|
|
118
|
+
- 业务接入时优先通过 [ActivityMessage](../message/activity-message.md) 或完整消息链路使用,避免重复判断 `activityType`。
|
|
119
|
+
- `referenceDocument` 为空时组件仍会渲染正文区域,引用列表由 `ReferenceContent` 处理空数组。
|
|
120
|
+
|
|
121
|
+
## 关联组件
|
|
122
|
+
|
|
123
|
+
- [ActivityMessage](../message/activity-message.md) — 活动消息分发入口。
|
|
124
|
+
- [ActivityLayout](../helper/activity-layout.md) — 折叠活动外壳。
|
|
125
|
+
- [MarkdownContent](../rendering/markdown-content.md) — Markdown 摘要渲染。
|
|
126
|
+
- [ReferenceContent](../rendering/reference-content.md) — 引用来源列表。
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
使用 KaTeX 渲染 LaTeX 公式内容。 源码位置:src/components/markdown-token/latex-content/latex-content.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **markdown-content** — 插件解析 $...$ / $$...$$ 后生成数学 token 并挂载本组件
|
|
@@ -10,10 +10,15 @@ LatexContent 使用 KaTeX 渲染 math_block / math_inline 等 token,支持行
|
|
|
10
10
|
<!-- FULL DOC -->
|
|
11
11
|
|
|
12
12
|
# LatexContent LaTeX 公式渲染
|
|
13
|
+
## 源码事实
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
- **源码位置**:`src/components/markdown-token/latex-content/latex-content.vue`
|
|
16
|
+
- **能力域**:内容渲染
|
|
17
|
+
- **能力说明**:使用 KaTeX 渲染 LaTeX 公式内容。
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
> **能力域**:内容渲染
|
|
20
|
+
|
|
21
|
+
Markdown Token 层的 LaTeX 公式渲染基础组件,基于 **KaTeX** 实现。被 `MarkdownContent` 在解析到数学公式 token 时自动调用,通常无需手动引入。
|
|
17
22
|
|
|
18
23
|
核心能力:**流式防抖渲染**(throttle 100ms)、**语法自动补全**(`completeLatexContent`)、**渐进式降级重试**(最多 5 次)、**错误静默**(错误文本白色不可见)。
|
|
19
24
|
|
|
@@ -193,4 +198,4 @@ const displayMode = token.type === 'math_block' || token.meta?.displayMode === t
|
|
|
193
198
|
|
|
194
199
|
## 关联组件
|
|
195
200
|
|
|
196
|
-
- [MarkdownContent](
|
|
201
|
+
- [MarkdownContent](/components/rendering/markdown-content) — 数学公式 token 的来源与挂载
|
|
@@ -1,19 +1,24 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
消息列表中的加载占位,默认使用 AiLoading,也支持默认插槽覆盖。 源码位置:src/components/chat-message/loading-message/loading-message.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-container** — 在消息列表末尾自动追加 Loading 消息组
|
|
8
8
|
- **message-render** — role 为 loading 时由 MessageRender 渲染
|
|
9
|
-
- **ai-loading** — 内部使用 AiLoading
|
|
9
|
+
- **ai-loading** — 内部使用 AiLoading 基础组件
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# LoadingMessage 加载中消息
|
|
15
|
+
## 源码事实
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
- **源码位置**:`src/components/chat-message/loading-message/loading-message.vue`
|
|
18
|
+
- **能力域**:消息系统
|
|
19
|
+
- **能力说明**:消息列表中的加载占位,默认使用 AiLoading,也支持默认插槽覆盖。
|
|
20
|
+
|
|
21
|
+
> **能力域**:消息系统
|
|
17
22
|
|
|
18
23
|
加载等待状态组件,展示 AI 正在处理请求时的过渡动画。由旋转渐变环 + 脉冲星形图标(蓝→紫→粉渐变)和"请求中..."文案组成。支持通过默认插槽自定义加载文案。
|
|
19
24
|
|
|
@@ -166,6 +171,6 @@ enum MessageRole {
|
|
|
166
171
|
|
|
167
172
|
## 关联组件
|
|
168
173
|
|
|
169
|
-
- [MessageContainer](
|
|
170
|
-
- [MessageRender](
|
|
171
|
-
- [AiLoading](
|
|
174
|
+
- [MessageContainer](/components/setup/message-container) — 自动注入加载组
|
|
175
|
+
- [MessageRender](/components/message/message-render) — loading 角色派发
|
|
176
|
+
- [AiLoading](/components/helper/ai-loading) — 内部动画组件
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
Markdown 主渲染器,集成代码块、公式、错误降级和 codeHeader 插槽。 源码位置:src/components/chat-content/markdown-content/markdown-content.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **code-content** — fence 代码块语法高亮与复制
|
|
@@ -13,12 +13,17 @@ MarkdownContent 将 Markdown 字符串解析为 token 并渲染,集成代码
|
|
|
13
13
|
<!-- FULL DOC -->
|
|
14
14
|
|
|
15
15
|
# MarkdownContent Markdown 内容渲染
|
|
16
|
+
## 源码事实
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
- **源码位置**:`src/components/chat-content/markdown-content/markdown-content.vue`
|
|
19
|
+
- **能力域**:内容渲染
|
|
20
|
+
- **能力说明**:Markdown 主渲染器,集成代码块、公式、错误降级和 codeHeader 插槽。
|
|
18
21
|
|
|
19
|
-
|
|
22
|
+
> **能力域**:内容渲染
|
|
20
23
|
|
|
21
|
-
|
|
24
|
+
AI 消息内容渲染的核心基础组件,集成代码高亮、LaTeX 公式、Mermaid 图表等能力,内置流式渲染优化(5ms throttle + 语法补全 + 防闪烁)。
|
|
25
|
+
|
|
26
|
+
由 `AssistantMessage`、`ReasoningMessage` 等组合组件内部自动使用,通常不需要手动引入。
|
|
22
27
|
|
|
23
28
|
## 组件结构与渲染流程
|
|
24
29
|
|
|
@@ -225,7 +230,7 @@ const domPurifyConfig = {
|
|
|
225
230
|
|
|
226
231
|
## 关联组件
|
|
227
232
|
|
|
228
|
-
- [CodeContent](
|
|
229
|
-
- [LatexContent](
|
|
230
|
-
- [MermaidContent](
|
|
231
|
-
- [ContentRender](
|
|
233
|
+
- [CodeContent](/components/rendering/code-content) — 代码 fence 高亮
|
|
234
|
+
- [LatexContent](/components/rendering/latex-content) — 公式渲染
|
|
235
|
+
- [MermaidContent](/components/rendering/mermaid-content) — Mermaid 图表
|
|
236
|
+
- [ContentRender](/components/rendering/content-render) — 内容类型分发入口
|
|
@@ -203,6 +203,6 @@ KaTeX 限制:
|
|
|
203
203
|
|
|
204
204
|
## 关联组件
|
|
205
205
|
|
|
206
|
-
- [LatexContent](../components/
|
|
207
|
-
- [MarkdownContent](../components/
|
|
208
|
-
- [ContentRender](../components/
|
|
206
|
+
- [LatexContent](../components/rendering/latex-content) — KaTeX 渲染
|
|
207
|
+
- [MarkdownContent](../components/rendering/markdown-content) — Markdown 内容
|
|
208
|
+
- [ContentRender](../components/rendering/content-render) — 内容渲染
|
|
@@ -245,6 +245,6 @@ erDiagram
|
|
|
245
245
|
|
|
246
246
|
## 关联组件
|
|
247
247
|
|
|
248
|
-
- [MermaidContent](../components/
|
|
249
|
-
- [MarkdownContent](../components/
|
|
250
|
-
- [ContentRender](../components/
|
|
248
|
+
- [MermaidContent](../components/rendering/mermaid-content) — Mermaid 渲染
|
|
249
|
+
- [MarkdownContent](../components/rendering/markdown-content) — Markdown 内容
|
|
250
|
+
- [ContentRender](../components/rendering/content-render) — 内容渲染
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
渲染 Mermaid 图表并处理渲染事件。 源码位置:src/components/markdown-token/mermaid-content/mermaid-content.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **markdown-content** — 解析 mermaid 类型 fence 代码块后传入 token
|
|
@@ -10,10 +10,15 @@ MermaidContent 将 info 为 mermaid 的 fence token 渲染为 SVG,模块级懒
|
|
|
10
10
|
<!-- FULL DOC -->
|
|
11
11
|
|
|
12
12
|
# MermaidContent Mermaid 图表渲染
|
|
13
|
+
## 源码事实
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
- **源码位置**:`src/components/markdown-token/mermaid-content/mermaid-content.vue`
|
|
16
|
+
- **能力域**:内容渲染
|
|
17
|
+
- **能力说明**:渲染 Mermaid 图表并处理渲染事件。
|
|
15
18
|
|
|
16
|
-
|
|
19
|
+
> **能力域**:内容渲染
|
|
20
|
+
|
|
21
|
+
Markdown Token 层的 Mermaid 图表渲染基础组件,被 `MarkdownContent` 在检测到 mermaid fence token 时自动调用,通常无需手动引入。
|
|
17
22
|
|
|
18
23
|
核心能力:**按需懒加载 Mermaid**(动态 import 单例)、**三级去重跳过**(代码比对 → 语法校验 → SVG 比对)、**100ms throttle** 流式防抖、**错误静默**(parse 失败时保持上一次 SVG)。
|
|
19
24
|
|
|
@@ -182,4 +187,4 @@ mermaid.default.render('mermaid-content-' + Math.random().toString(36).substring
|
|
|
182
187
|
|
|
183
188
|
## 关联组件
|
|
184
189
|
|
|
185
|
-
- [MarkdownContent](
|
|
190
|
+
- [MarkdownContent](/components/rendering/markdown-content) — mermaid fence token 的来源与挂载
|
|
@@ -1,26 +1,32 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
负责消息分组渲染、滚动控制、工具栏和消息插槽透传。 源码位置:src/components/chat-message/message-container/message-container.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-render** — 按组渲染每条消息时委托 MessageRender
|
|
8
8
|
- **chat-input** — 常与 ChatInput 组合构成完整对话界面
|
|
9
9
|
- **loading-message** — 末尾为用户消息时自动追加 Loading 消息组
|
|
10
|
+
- **interrupt-message** — 透传 onInterruptResume;末条 interrupt 消息不触发组 hover
|
|
10
11
|
|
|
11
12
|
---
|
|
12
13
|
<!-- FULL DOC -->
|
|
13
14
|
|
|
14
15
|
# MessageContainer 消息容器
|
|
16
|
+
## 源码事实
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
- **源码位置**:`src/components/chat-message/message-container/message-container.vue`
|
|
19
|
+
- **能力域**:对话搭建
|
|
20
|
+
- **能力说明**:负责消息分组渲染、滚动控制、工具栏和消息插槽透传。
|
|
21
|
+
|
|
22
|
+
> **能力域**:对话搭建
|
|
17
23
|
|
|
18
24
|
消息列表容器组件,负责将原始的 `Message[]` 数组渲染为结构化的对话界面。核心能力:
|
|
19
25
|
|
|
20
26
|
- **消息分组**:将连续的非用户消息合并为一组,每组共享一个工具栏
|
|
21
27
|
- **Tool 消息关联**:自动将 `role: 'tool'` 消息注入到对应 Assistant 消息的 toolCall 中
|
|
22
28
|
- **Loading 自动注入**:末尾为用户消息时,自动追加 Loading 动画组
|
|
23
|
-
- **滚动管理**:`messageStatus` 为流式、等待响应或请求中(`streaming` / `pending` / `fetching
|
|
29
|
+
- **滚动管理**:`messageStatus` 为流式、等待响应或请求中(`streaming` / `pending` / `fetching`)时显示「停止生成」,离开底部时显示「返回底部」;`renderMode` 为 `Share` 时不显示「停止生成」
|
|
24
30
|
- **多选模式**:支持按消息组勾选,用户消息与 AI 回复联动选中
|
|
25
31
|
|
|
26
32
|
## 基础用法
|
|
@@ -113,6 +119,7 @@ MessageContainer 是消息列表的核心容器。接收父组件用 useMessageG
|
|
|
113
119
|
- 每个消息组外层 DOM 的 `id` 为 **`MessageGroup.uid`**(由 `useMessageGroup` 生成),供执行摘要「在对话中定位」、侧栏自定义 Tab 等场景滚动锚定
|
|
114
120
|
- `role: 'tool'` 消息**不会独立渲染**,而是被注入到对应 AssistantMessage 的 `toolCall.toolMessage` 字段
|
|
115
121
|
- 若 `toolMessage.error` 存在,AssistantMessage 的 `status` 会被强制设为 `MessageStatus.Error`
|
|
122
|
+
- 当消息组**最后一条**消息的 `role === 'interrupt'` 时,`mouseenter` **不会**设置 `isHover`,避免 AI 工具栏在审批卡片上误显
|
|
116
123
|
- `MessageTools` 工具栏只在 `type === 'assistant'` 的消息组底部渲染(不依赖鼠标悬停,始终可见),且满足以下条件时**不渲染**:
|
|
117
124
|
- `renderMode === RenderMode.Share`(分享预览模式)
|
|
118
125
|
- 消息组的 `pause` 为 `true`(来源于 `message.property?.extra?.pause`)
|
|
@@ -123,11 +130,11 @@ MessageContainer 是消息列表的核心容器。接收父组件用 useMessageG
|
|
|
123
130
|
|
|
124
131
|
## 等待响应(Loading 自动注入)
|
|
125
132
|
|
|
126
|
-
当 `messages` 末尾为 `role: 'user'` 时,自动追加 Loading 消息组,展示 AI
|
|
133
|
+
当 `messages` 末尾为 `role: 'user'` 时,自动追加 Loading 消息组,展示 AI 正在处理的加载动画(`renderMode` 为 `Share` 时不追加,且 `MessageContainer` 会过滤 Loading 组):
|
|
127
134
|
|
|
128
135
|
## 流式输出与停止生成
|
|
129
136
|
|
|
130
|
-
当 `messageStatus` 为 `streaming`、`pending`(等待首包)或 `fetching`(请求中、与末尾 Loading 占位一致)时,底部固定区域显示「停止生成」按钮(`stop-loading` 时按钮展示为正在停止),点击后触发 `@stop-streaming`
|
|
137
|
+
当 `messageStatus` 为 `streaming`、`pending`(等待首包)或 `fetching`(请求中、与末尾 Loading 占位一致)时,底部固定区域显示「停止生成」按钮(`stop-loading` 时按钮展示为正在停止),点击后触发 `@stop-streaming` 事件。`renderMode` 为 `Share` 时不显示「停止生成」按钮。
|
|
131
138
|
|
|
132
139
|
点击下方按钮体验完整的流式输出过程:
|
|
133
140
|
|
|
@@ -356,9 +363,42 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
356
363
|
|
|
357
364
|
**渲染效果**(点击 Checkbox 体验多选)
|
|
358
365
|
|
|
366
|
+
## 自定义消息组渲染
|
|
367
|
+
|
|
368
|
+
使用 `#group` 插槽可替换单个消息组的默认内容(Checkbox、消息列表、`MessageTools`)。外层 `.message-group` 容器(含 `id`、hover 状态、选中背景色)仍由 `MessageContainer` 管理。
|
|
369
|
+
|
|
370
|
+
> **注意**:提供 `#group` 后需自行编排组内全部 UI;若只需替换单条消息,请使用 `#default` 插槽。
|
|
371
|
+
|
|
372
|
+
```vue
|
|
373
|
+
<template>
|
|
374
|
+
<MessageContainer
|
|
375
|
+
:messages="messages"
|
|
376
|
+
:message-groups="messageGroups"
|
|
377
|
+
message-status="complete"
|
|
378
|
+
:on-agent-action="handleAgentAction"
|
|
379
|
+
@stop-streaming="handleStopStreaming"
|
|
380
|
+
>
|
|
381
|
+
<template #group="{ group }">
|
|
382
|
+
<div class="custom-group">
|
|
383
|
+
<span class="custom-group-label">{{ group.type }}</span>
|
|
384
|
+
<div
|
|
385
|
+
v-for="message in group.messages"
|
|
386
|
+
:key="message.id"
|
|
387
|
+
class="custom-group-message"
|
|
388
|
+
>
|
|
389
|
+
{{ typeof message.content === 'string' ? message.content : JSON.stringify(message.content) }}
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
</template>
|
|
393
|
+
</MessageContainer>
|
|
394
|
+
</template>
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
**渲染效果**(简化自定义组布局,不含默认 Checkbox 与工具栏)
|
|
398
|
+
|
|
359
399
|
## 自定义消息渲染
|
|
360
400
|
|
|
361
|
-
使用默认插槽替换单条消息的渲染,插槽参数包含 `message` 和 `
|
|
401
|
+
使用默认插槽替换单条消息的渲染,插槽参数包含 `message`、`messageToolsStatus` 和 `onInterruptResume`:
|
|
362
402
|
|
|
363
403
|
```vue
|
|
364
404
|
<template>
|
|
@@ -369,10 +409,11 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
369
409
|
:on-user-action="handleUserAction"
|
|
370
410
|
@stop-streaming="handleStopStreaming"
|
|
371
411
|
>
|
|
372
|
-
<template #default="{ message, messageToolsStatus }">
|
|
412
|
+
<template #default="{ message, messageToolsStatus, onInterruptResume }">
|
|
373
413
|
<MyCustomMessage
|
|
374
414
|
:message="message"
|
|
375
415
|
:message-tools-status="messageToolsStatus"
|
|
416
|
+
:on-interrupt-resume="onInterruptResume"
|
|
376
417
|
/>
|
|
377
418
|
</template>
|
|
378
419
|
</MessageContainer>
|
|
@@ -446,7 +487,7 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
446
487
|
|
|
447
488
|
| 按钮 | 显示条件 | 点击行为 |
|
|
448
489
|
| ------------ | ---------------------------------------------------------------------------------------------- | ---------------------- |
|
|
449
|
-
| 「停止生成」 | `messageStatus` 为 `streaming`、`pending`、`fetching` 或 `stop-loading`(停止中 loading
|
|
490
|
+
| 「停止生成」 | `messageStatus` 为 `streaming`、`pending`、`fetching` 或 `stop-loading`(停止中 loading 态),且 `renderMode` 不为 `Share` | 触发 `@stop-streaming` |
|
|
450
491
|
| 「返回底部」 | `debouncedShowScrollBottomBtn`(距底部 > 100px,且防抖 300ms 后才显示/隐藏) | 滚动到消息列表底部 |
|
|
451
492
|
|
|
452
493
|
> **防抖说明**:「返回底部」按钮的显隐使用 300ms 防抖,避免快速滚动时按钮频繁闪烁。隐藏时立即生效(无防抖),显示时延迟 300ms。
|
|
@@ -468,7 +509,8 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
468
509
|
| onUserAction | `(tool: IToolBtn, message: Message) => Promise<string[] \| void>` | — | 用户消息工具操作回调 |
|
|
469
510
|
| onUserInputConfirm | `(message: Message, content: UserMessage['content'], docSchema: TagSchema) => Promise<void>` | — | 用户编辑消息确认回调 |
|
|
470
511
|
| onUserShortcutConfirm | `(message: Message, formModel: Record<string, unknown>) => Promise<void>` | — | 用户快捷指令表单提交回调 |
|
|
471
|
-
|
|
|
512
|
+
| onInterruptResume | `OnInterruptResume` | — | AG-UI human-in-the-loop 中断响应回调,透传给 `MessageRender` → `InterruptMessageRender` |
|
|
513
|
+
| renderMode | `RenderMode` | — | 渲染模式。`Share` 模式下启用多选样式并隐藏工具栏与「停止生成」按钮;`Test` 模式下过滤掉「分享」按钮;不传或 `Chat` 为默认行为 |
|
|
472
514
|
|
|
473
515
|
### v-model
|
|
474
516
|
|
|
@@ -484,14 +526,28 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
484
526
|
|
|
485
527
|
### Slots
|
|
486
528
|
|
|
487
|
-
| 插槽名
|
|
488
|
-
|
|
|
489
|
-
|
|
|
529
|
+
| 插槽名 | 参数 | 说明 |
|
|
530
|
+
| ---------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
|
|
531
|
+
| answeredQuestion | `{ item, index, status }` | 自定义 UserQuestion 已回答回显,透传给 MessageRender → InterruptMessageRender |
|
|
532
|
+
| default | `{ message: Message, messageToolsStatus?: MessageToolsStatus, onInterruptResume?: OnInterruptResume }` | 自定义单条消息渲染;消息分组外层容器与 `#group` 未覆盖时的工具栏仍由容器管理 |
|
|
533
|
+
| group | `{ group: MessageGroup }` | 自定义单个消息组内容,替换默认 Checkbox、消息列表与 `MessageTools`;外层组容器仍由组件管理 |
|
|
490
534
|
|
|
491
535
|
## 类型定义
|
|
492
536
|
|
|
493
537
|
```typescript
|
|
494
|
-
import { MessageRole, MessageStatus, MessageToolsStatus, type Message, type IToolBtn } from '@blueking/chat-x';
|
|
538
|
+
import { MessageRole, MessageStatus, MessageToolsStatus, type Message, type MessageGroup, type IToolBtn } from '@blueking/chat-x';
|
|
539
|
+
|
|
540
|
+
// 消息组(由 useMessageGroup 生成,也可手动传入 messageGroups)
|
|
541
|
+
interface MessageGroup {
|
|
542
|
+
checked: boolean;
|
|
543
|
+
isHover: boolean;
|
|
544
|
+
messages: Message[];
|
|
545
|
+
pause?: boolean;
|
|
546
|
+
startTime?: number;
|
|
547
|
+
type: MessageRole;
|
|
548
|
+
uid: string;
|
|
549
|
+
userMessageTitle?: number | string;
|
|
550
|
+
}
|
|
495
551
|
|
|
496
552
|
// onAgentAction 回调类型
|
|
497
553
|
// messages 为当前消息组全部消息(可含 reasoning / activity 等)
|
|
@@ -518,6 +574,7 @@ enum MessageRole {
|
|
|
518
574
|
Reasoning = 'reasoning',
|
|
519
575
|
Activity = 'activity',
|
|
520
576
|
Info = 'info',
|
|
577
|
+
Interrupt = 'interrupt',
|
|
521
578
|
Loading = 'loading',
|
|
522
579
|
}
|
|
523
580
|
|
|
@@ -534,6 +591,7 @@ enum MessageStatus {
|
|
|
534
591
|
|
|
535
592
|
## 关联组件
|
|
536
593
|
|
|
537
|
-
- [MessageRender](
|
|
538
|
-
- [
|
|
539
|
-
- [
|
|
594
|
+
- [MessageRender](/components/message/message-render) — 按组渲染每条消息时委托使用
|
|
595
|
+
- [InterruptMessage 中断消息](/components/agent/interrupt-message) — `role: 'interrupt'` 的渲染与 `onInterruptResume` 透传
|
|
596
|
+
- [ChatInput](/components/input/chat-input) — 常与输入区组合构成完整对话界面
|
|
597
|
+
- [LoadingMessage](/components/message/loading-message) — 末尾为用户消息时自动追加加载组
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
带品牌图标和逐字渐变动画的加载组件。 源码位置:src/components/message-loading/message-loading.vue。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **loading-message** — 消息列表加载占位可选择使用品牌加载动效
|
|
8
|
+
- **ai-loading** — 更轻量的三点加载动画
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
<!-- FULL DOC -->
|
|
12
|
+
|
|
13
|
+
# MessageLoading 品牌加载
|
|
14
|
+
|
|
15
|
+
> **能力域**:辅助能力
|
|
16
|
+
|
|
17
|
+
`MessageLoading` 是带蓝鲸品牌图标和逐字渐变动画的加载组件,用于展示 AI 正在思考、生成或执行任务的等待状态。组件默认显示品牌图标和“加载中...”文案,也支持通过插槽替换图标或文本。
|
|
18
|
+
|
|
19
|
+
与 [AiLoading](./ai-loading.md) 相比,它更偏品牌化、文案化;适合较明显的等待区域,不适合嵌入很紧凑的按钮或状态点。
|
|
20
|
+
|
|
21
|
+
## 源码事实
|
|
22
|
+
|
|
23
|
+
- **源码位置**:`src/components/message-loading/message-loading.vue`
|
|
24
|
+
- **能力说明**:带品牌图标和逐字渐变动画的加载组件。
|
|
25
|
+
|
|
26
|
+
## 核心能力
|
|
27
|
+
|
|
28
|
+
- **品牌图标动画**:默认使用 `AIBluekingIcon`,图标随 `duration` 做透明度和滤镜动画
|
|
29
|
+
- **逐字渐变文本**:未传 `#text` 插槽时,将 `text` 拆成字符逐个渲染,并按 `stagger` 延迟播放
|
|
30
|
+
- **可调尺寸和节奏**:通过 `iconSize`、`gap`、`duration`、`stagger` 控制图标尺寸、间距和动画速度
|
|
31
|
+
- **插槽覆盖**:`#icon` 可替换图标,`#text` 可替换整段文本渲染
|
|
32
|
+
- **无障碍降级**:遵循 `prefers-reduced-motion: reduce`,减少动画效果
|
|
33
|
+
|
|
34
|
+
## 基础用法
|
|
35
|
+
|
|
36
|
+
```vue
|
|
37
|
+
<template>
|
|
38
|
+
<MessageLoading />
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script setup lang="ts">
|
|
42
|
+
import { MessageLoading } from '@blueking/chat-x';
|
|
43
|
+
</script>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
**渲染效果**
|
|
47
|
+
|
|
48
|
+
## 自定义文案和尺寸
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<template>
|
|
52
|
+
<MessageLoading
|
|
53
|
+
text="正在思考中..."
|
|
54
|
+
:icon-size="28"
|
|
55
|
+
:gap="10"
|
|
56
|
+
:duration="2"
|
|
57
|
+
:stagger="0.12"
|
|
58
|
+
/>
|
|
59
|
+
</template>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 自定义插槽
|
|
63
|
+
|
|
64
|
+
传入 `#text` 后,组件不再按字符拆分 `text` prop,而是直接渲染插槽内容;传入 `#icon` 可替换默认品牌图标。
|
|
65
|
+
|
|
66
|
+
```vue
|
|
67
|
+
<template>
|
|
68
|
+
<MessageLoading>
|
|
69
|
+
<template #icon>
|
|
70
|
+
<span class="custom-icon">AI</span>
|
|
71
|
+
</template>
|
|
72
|
+
<template #text>
|
|
73
|
+
正在生成巡检结论
|
|
74
|
+
</template>
|
|
75
|
+
</MessageLoading>
|
|
76
|
+
</template>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## API
|
|
80
|
+
|
|
81
|
+
### Props
|
|
82
|
+
|
|
83
|
+
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|
|
84
|
+
| -------- | -------- | ---- | ----------- | ---------------------------------- |
|
|
85
|
+
| text | `string` | 否 | `'加载中...'` | 逐字动画文案;使用 `#text` 时可不传 |
|
|
86
|
+
| iconSize | `number` | 否 | `32` | 默认图标边长,单位 px |
|
|
87
|
+
| gap | `number` | 否 | `8` | 图标与文字间距,单位 px |
|
|
88
|
+
| duration | `number` | 否 | `1.8` | 单次动画循环时长,单位秒 |
|
|
89
|
+
| stagger | `number` | 否 | `0.135` | 相邻字符动画延迟,单位秒 |
|
|
90
|
+
|
|
91
|
+
### Emits
|
|
92
|
+
|
|
93
|
+
- 无。
|
|
94
|
+
|
|
95
|
+
### Slots
|
|
96
|
+
|
|
97
|
+
| 插槽名 | 说明 |
|
|
98
|
+
| ------ | ------------------------ |
|
|
99
|
+
| icon | 自定义图标区域 |
|
|
100
|
+
| text | 自定义文本区域,覆盖逐字渲染 |
|
|
101
|
+
|
|
102
|
+
### Expose
|
|
103
|
+
|
|
104
|
+
- 无。
|
|
105
|
+
|
|
106
|
+
## 样式与 attrs
|
|
107
|
+
|
|
108
|
+
- 组件设置 `inheritAttrs: false`,会将外部 `class` 合并到根节点,并将除 `class` / `style` 外的 attrs 透传到根节点。
|
|
109
|
+
- 外部对象形式的 `style` 会与 CSS 变量合并;字符串形式 `style` 不会参与合并。
|
|
110
|
+
- 根节点使用 CSS 变量控制动画:`--ai-message-loading-duration`、`--ai-message-loading-stagger`、`--ai-message-loading-gap`。
|
|
111
|
+
|
|
112
|
+
## 使用建议
|
|
113
|
+
|
|
114
|
+
- 页面级或消息级等待态优先使用 `MessageLoading`;紧凑状态点优先使用 [AiLoading](./ai-loading.md)。
|
|
115
|
+
- 需要自定义文本样式时优先使用 `#text` 插槽,避免只依赖全局覆盖内部 class。
|
|
116
|
+
|
|
117
|
+
## 关联组件
|
|
118
|
+
|
|
119
|
+
- [LoadingMessage](../message/loading-message.md) — 消息列表中的加载占位。
|
|
120
|
+
- [AiLoading](./ai-loading.md) — 三点加载动画。
|