@blueking/chat-x 0.0.20 → 0.0.22
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/composables/use-custom-tab.d.ts +1 -0
- package/dist/index.css +1 -1
- package/dist/index.js +1399 -1333
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/chat-container.md +5 -7
- package/dist/mcp/generated/docs/markdown-content.md +7 -0
- package/dist/mcp/generated/docs/use-custom-tab.md +5 -1
- package/dist/plugins/markdown-container.d.ts +25 -0
- package/dist/utils/tokens-to-vnodes.d.ts +8 -2
- package/package.json +1 -1
- package/dist/mcp/generated/docs/constants.md +0 -216
- package/dist/mcp/generated/docs/markdown-latex.md +0 -208
- package/dist/mcp/generated/docs/markdown-mermaid.md +0 -250
- package/dist/mcp/generated/docs/messages.md +0 -472
- package/dist/mcp/generated/docs/theme.md +0 -388
- package/dist/mcp/generated/index.json +0 -1279
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
<!-- AI SUMMARY -->
|
|
2
|
-
## 快速了解
|
|
3
|
-
|
|
4
|
-
markdownItMermaid 为 markdown-it 插件,将 ```mermaid 代码块转为带 data-mermaid-code、data-mermaid-idx 的占位 DOM,便于前端挂载渲染。 实际绘图由 Mermaid 动态导入在 MermaidContent 中完成,支持流式场景节流与缓存。ContentRender 驱动完整消息 Markdown 流程。
|
|
5
|
-
|
|
6
|
-
### 关联组件
|
|
7
|
-
- **mermaid-content** — 解析占位并渲染图表
|
|
8
|
-
- **markdown-content** — Markdown fence 管线
|
|
9
|
-
- **content-render** — 消息块级内容渲染
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
<!-- FULL DOC -->
|
|
13
|
-
|
|
14
|
-
# markdownItMermaid Mermaid 解析插件
|
|
15
|
-
|
|
16
|
-
> **分类**:plugin
|
|
17
|
-
|
|
18
|
-
Markdown-it Mermaid 解析插件,用于解析 Mermaid 图表代码块。
|
|
19
|
-
|
|
20
|
-
## 功能说明
|
|
21
|
-
|
|
22
|
-
此插件将 Mermaid 代码块转换为特定的 HTML 结构,实际的 Mermaid 渲染在 `MermaidContent` 组件中完成。
|
|
23
|
-
|
|
24
|
-
## 支持的语法
|
|
25
|
-
|
|
26
|
-
````markdown
|
|
27
|
-
```mermaid
|
|
28
|
-
graph TD
|
|
29
|
-
A[开始] --> B[结束]
|
|
30
|
-
```
|
|
31
|
-
````
|
|
32
|
-
|
|
33
|
-
## 基础用法
|
|
34
|
-
|
|
35
|
-
```typescript
|
|
36
|
-
import MarkdownIt from 'markdown-it';
|
|
37
|
-
import { markdownItMermaid } from '@blueking/chat-x';
|
|
38
|
-
|
|
39
|
-
const md = new MarkdownIt().use(markdownItMermaid);
|
|
40
|
-
|
|
41
|
-
const html = md.render(`
|
|
42
|
-
\`\`\`mermaid
|
|
43
|
-
graph TD
|
|
44
|
-
A[开始] --> B{判断}
|
|
45
|
-
B -->|是| C[处理]
|
|
46
|
-
B -->|否| D[结束]
|
|
47
|
-
C --> D
|
|
48
|
-
\`\`\`
|
|
49
|
-
`);
|
|
50
|
-
|
|
51
|
-
// 输出:
|
|
52
|
-
// <div class="mermaid-wrapper" data-mermaid-code="..." data-mermaid-idx="0"></div>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
## 渲染结果
|
|
56
|
-
|
|
57
|
-
插件会将 Mermaid 代码块转换为以下 HTML:
|
|
58
|
-
|
|
59
|
-
```html
|
|
60
|
-
<div
|
|
61
|
-
class="mermaid-wrapper"
|
|
62
|
-
data-mermaid-code="graph%20TD%0A%20%20%20%20A%5B%E5%BC%80%E5%A7%8B%5D%20--%3E%20B%5B%E7%BB%93%E6%9D%9F%5D"
|
|
63
|
-
data-mermaid-idx="0"
|
|
64
|
-
></div>
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
- `data-mermaid-code`: URL 编码后的 Mermaid 代码
|
|
68
|
-
- `data-mermaid-idx`: 代码块索引
|
|
69
|
-
|
|
70
|
-
## 支持的图表类型
|
|
71
|
-
|
|
72
|
-
### 流程图 (Flowchart)
|
|
73
|
-
|
|
74
|
-
````markdown
|
|
75
|
-
```mermaid
|
|
76
|
-
graph TD
|
|
77
|
-
A[开始] --> B{条件判断}
|
|
78
|
-
B -->|是| C[执行操作]
|
|
79
|
-
B -->|否| D[结束]
|
|
80
|
-
C --> D
|
|
81
|
-
```
|
|
82
|
-
````
|
|
83
|
-
|
|
84
|
-
### 时序图 (Sequence Diagram)
|
|
85
|
-
|
|
86
|
-
````markdown
|
|
87
|
-
```mermaid
|
|
88
|
-
sequenceDiagram
|
|
89
|
-
participant A as 客户端
|
|
90
|
-
participant B as 服务器
|
|
91
|
-
A->>B: 请求
|
|
92
|
-
B-->>A: 响应
|
|
93
|
-
```
|
|
94
|
-
````
|
|
95
|
-
|
|
96
|
-
### 甘特图 (Gantt Chart)
|
|
97
|
-
|
|
98
|
-
````markdown
|
|
99
|
-
```mermaid
|
|
100
|
-
gantt
|
|
101
|
-
title 项目计划
|
|
102
|
-
dateFormat YYYY-MM-DD
|
|
103
|
-
section 阶段1
|
|
104
|
-
任务1 :a1, 2024-01-01, 30d
|
|
105
|
-
任务2 :after a1, 20d
|
|
106
|
-
section 阶段2
|
|
107
|
-
任务3 :2024-02-01, 12d
|
|
108
|
-
```
|
|
109
|
-
````
|
|
110
|
-
|
|
111
|
-
### 类图 (Class Diagram)
|
|
112
|
-
|
|
113
|
-
````markdown
|
|
114
|
-
```mermaid
|
|
115
|
-
classDiagram
|
|
116
|
-
class Animal {
|
|
117
|
-
+name: string
|
|
118
|
-
+age: int
|
|
119
|
-
+makeSound()
|
|
120
|
-
}
|
|
121
|
-
class Dog {
|
|
122
|
-
+breed: string
|
|
123
|
-
+bark()
|
|
124
|
-
}
|
|
125
|
-
Animal <|-- Dog
|
|
126
|
-
```
|
|
127
|
-
````
|
|
128
|
-
|
|
129
|
-
### 状态图 (State Diagram)
|
|
130
|
-
|
|
131
|
-
````markdown
|
|
132
|
-
```mermaid
|
|
133
|
-
stateDiagram-v2
|
|
134
|
-
[*] --> 待处理
|
|
135
|
-
待处理 --> 处理中: 开始处理
|
|
136
|
-
处理中 --> 已完成: 处理完成
|
|
137
|
-
处理中 --> 失败: 处理失败
|
|
138
|
-
已完成 --> [*]
|
|
139
|
-
失败 --> 待处理: 重试
|
|
140
|
-
```
|
|
141
|
-
````
|
|
142
|
-
|
|
143
|
-
### 饼图 (Pie Chart)
|
|
144
|
-
|
|
145
|
-
````markdown
|
|
146
|
-
```mermaid
|
|
147
|
-
pie title 语言使用占比
|
|
148
|
-
"JavaScript" : 45
|
|
149
|
-
"TypeScript" : 35
|
|
150
|
-
"Python" : 15
|
|
151
|
-
"其他" : 5
|
|
152
|
-
```
|
|
153
|
-
````
|
|
154
|
-
|
|
155
|
-
### ER 图 (Entity Relationship)
|
|
156
|
-
|
|
157
|
-
````markdown
|
|
158
|
-
```mermaid
|
|
159
|
-
erDiagram
|
|
160
|
-
用户 ||--o{ 订单 : 创建
|
|
161
|
-
订单 ||--|{ 订单明细 : 包含
|
|
162
|
-
商品 ||--o{ 订单明细 : 包含于
|
|
163
|
-
```
|
|
164
|
-
````
|
|
165
|
-
|
|
166
|
-
## 与 MermaidContent 组件配合
|
|
167
|
-
|
|
168
|
-
实际渲染由 `MermaidContent` 组件完成:
|
|
169
|
-
|
|
170
|
-
```vue
|
|
171
|
-
<template>
|
|
172
|
-
<MermaidContent
|
|
173
|
-
:token="mermaidTokens"
|
|
174
|
-
@mounted="handleMounted"
|
|
175
|
-
/>
|
|
176
|
-
</template>
|
|
177
|
-
|
|
178
|
-
<script setup lang="ts">
|
|
179
|
-
import { MermaidContent } from '@blueking/chat-x';
|
|
180
|
-
|
|
181
|
-
// mermaidTokens 是包含 mermaid fence 的 token 数组
|
|
182
|
-
const handleMounted = ({ el }) => {
|
|
183
|
-
console.log('Mermaid 图表渲染完成:', el);
|
|
184
|
-
};
|
|
185
|
-
</script>
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
## 流式渲染
|
|
189
|
-
|
|
190
|
-
组件支持流式渲染,在代码输入过程中实时更新图表:
|
|
191
|
-
|
|
192
|
-
````vue
|
|
193
|
-
<template>
|
|
194
|
-
<ContentRender
|
|
195
|
-
:content="streamingContent"
|
|
196
|
-
:status="MessageStatus.Streaming"
|
|
197
|
-
/>
|
|
198
|
-
</template>
|
|
199
|
-
|
|
200
|
-
<script setup lang="ts">
|
|
201
|
-
import { ref } from 'vue';
|
|
202
|
-
import { ContentRender, MessageStatus } from '@blueking/chat-x';
|
|
203
|
-
|
|
204
|
-
const streamingContent = ref('');
|
|
205
|
-
|
|
206
|
-
// 模拟流式输入 Mermaid 代码
|
|
207
|
-
const simulateStreaming = async () => {
|
|
208
|
-
const code = '```mermaid\ngraph TD\n A --> B\n```';
|
|
209
|
-
for (const char of code) {
|
|
210
|
-
await new Promise(r => setTimeout(r, 50));
|
|
211
|
-
streamingContent.value += char;
|
|
212
|
-
}
|
|
213
|
-
};
|
|
214
|
-
</script>
|
|
215
|
-
````
|
|
216
|
-
|
|
217
|
-
## 错误处理
|
|
218
|
-
|
|
219
|
-
当 Mermaid 代码语法错误时:
|
|
220
|
-
|
|
221
|
-
1. 插件仍会正常解析并输出 HTML
|
|
222
|
-
2. `MermaidContent` 组件会捕获渲染错误
|
|
223
|
-
3. 控制台会输出警告信息
|
|
224
|
-
4. 图表区域保持空白,不会影响其他内容
|
|
225
|
-
|
|
226
|
-
## 性能优化
|
|
227
|
-
|
|
228
|
-
- **节流渲染**:流式输入时使用 100ms 节流
|
|
229
|
-
- **代码缓存**:相同代码不会重复渲染
|
|
230
|
-
- **异步加载**:Mermaid 库按需动态导入
|
|
231
|
-
|
|
232
|
-
## 使用场景
|
|
233
|
-
|
|
234
|
-
- AI 生成的流程图说明
|
|
235
|
-
- 技术文档中的架构图
|
|
236
|
-
- 项目计划展示
|
|
237
|
-
- 数据关系可视化
|
|
238
|
-
|
|
239
|
-
## 注意事项
|
|
240
|
-
|
|
241
|
-
1. **异步渲染**:Mermaid 库是动态导入的,首次渲染可能有短暂延迟
|
|
242
|
-
2. **语法验证**:组件会先验证语法,无效代码不会尝试渲染
|
|
243
|
-
3. **SVG 输出**:渲染结果是 SVG,可以自由缩放
|
|
244
|
-
4. **样式覆盖**:可以通过 CSS 自定义图表样式
|
|
245
|
-
|
|
246
|
-
## 关联组件
|
|
247
|
-
|
|
248
|
-
- [MermaidContent](../components/atomic/mermaid-content.md) — Mermaid 渲染
|
|
249
|
-
- [MarkdownContent](../components/atomic/markdown-content.md) — Markdown 内容
|
|
250
|
-
- [ContentRender](../components/molecular/content-render.md) — 内容渲染
|
|
@@ -1,472 +0,0 @@
|
|
|
1
|
-
<!-- AI SUMMARY -->
|
|
2
|
-
## 快速了解
|
|
3
|
-
|
|
4
|
-
文档说明 Message 联合类型、BaseMessage、MessageRole、MessageStatus、User/Assistant/Tool/Activity/Reasoning 等具体形态及 MessageContentType。 业务构造 messages 数组供 ChatContainer/MessageContainer 渲染;Tool 消息经 useMessageGroup 注入 Assistant。可声明合并扩展 AIBluekingMessageMap。
|
|
5
|
-
|
|
6
|
-
### 关联组件
|
|
7
|
-
- **message-container** — 列表渲染与工具栏
|
|
8
|
-
- **message-render** — 按 role 分发渲染
|
|
9
|
-
- **chat-container** — 数据源与交互入口
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
<!-- FULL DOC -->
|
|
13
|
-
|
|
14
|
-
# 消息类型
|
|
15
|
-
|
|
16
|
-
> **分类**:type
|
|
17
|
-
|
|
18
|
-
`@blueking/chat-x` 提供了完整的消息类型定义,用于构建 AI 对话消息。
|
|
19
|
-
|
|
20
|
-
## 消息基础类型
|
|
21
|
-
|
|
22
|
-
### Message
|
|
23
|
-
|
|
24
|
-
所有消息类型的联合类型:
|
|
25
|
-
|
|
26
|
-
```typescript
|
|
27
|
-
type Message = MessageMap[MessageType];
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### BaseMessage
|
|
31
|
-
|
|
32
|
-
消息基础接口:
|
|
33
|
-
|
|
34
|
-
```typescript
|
|
35
|
-
interface BaseMessage<T extends MessageType, C = string> {
|
|
36
|
-
// 消息唯一 ID(客户端生成)
|
|
37
|
-
id: number | string;
|
|
38
|
-
|
|
39
|
-
// 消息 ID(服务端返回)
|
|
40
|
-
messageId: number | string;
|
|
41
|
-
|
|
42
|
-
// 消息角色
|
|
43
|
-
role: T;
|
|
44
|
-
|
|
45
|
-
// 消息内容
|
|
46
|
-
content: C;
|
|
47
|
-
|
|
48
|
-
// 消息状态
|
|
49
|
-
status: MessageStatus;
|
|
50
|
-
|
|
51
|
-
// 消息名称(可选)
|
|
52
|
-
name?: string;
|
|
53
|
-
|
|
54
|
-
// 消息属性(可选)
|
|
55
|
-
property?: {
|
|
56
|
-
extra?: {
|
|
57
|
-
// 引用内容
|
|
58
|
-
cite:
|
|
59
|
-
| string
|
|
60
|
-
| {
|
|
61
|
-
title: string;
|
|
62
|
-
data: { key: string; value: string }[];
|
|
63
|
-
type: 'structured';
|
|
64
|
-
};
|
|
65
|
-
// 快捷指令名称
|
|
66
|
-
command: string;
|
|
67
|
-
// 上下文信息
|
|
68
|
-
context: Record<string, any>[];
|
|
69
|
-
// 快捷指令配置
|
|
70
|
-
shortcut?: Shortcut;
|
|
71
|
-
// 暂停标记:为 true 时该消息所在消息组不显示 MessageTools 工具栏
|
|
72
|
-
pause?: boolean;
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
## 消息角色
|
|
79
|
-
|
|
80
|
-
```typescript
|
|
81
|
-
enum MessageRole {
|
|
82
|
-
// 用户消息
|
|
83
|
-
User = 'user',
|
|
84
|
-
|
|
85
|
-
// AI 助手消息
|
|
86
|
-
Assistant = 'assistant',
|
|
87
|
-
|
|
88
|
-
// 系统消息
|
|
89
|
-
System = 'system',
|
|
90
|
-
|
|
91
|
-
// 开发者消息
|
|
92
|
-
Developer = 'developer',
|
|
93
|
-
|
|
94
|
-
// 引导消息
|
|
95
|
-
Guide = 'guide',
|
|
96
|
-
|
|
97
|
-
// 隐藏消息(不显示)
|
|
98
|
-
Hidden = 'hidden',
|
|
99
|
-
HiddenAssistant = 'hidden-assistant',
|
|
100
|
-
HiddenGuide = 'hidden-guide',
|
|
101
|
-
HiddenSystem = 'hidden-system',
|
|
102
|
-
HiddenUser = 'hidden-user',
|
|
103
|
-
|
|
104
|
-
// 信息消息
|
|
105
|
-
Info = 'info',
|
|
106
|
-
|
|
107
|
-
// 加载中消息
|
|
108
|
-
Loading = 'loading',
|
|
109
|
-
|
|
110
|
-
// 暂停消息
|
|
111
|
-
Pause = 'pause',
|
|
112
|
-
|
|
113
|
-
// 占位消息
|
|
114
|
-
Placeholder = 'placeholder',
|
|
115
|
-
|
|
116
|
-
// 推理过程消息
|
|
117
|
-
Reasoning = 'reasoning',
|
|
118
|
-
|
|
119
|
-
// 模板消息
|
|
120
|
-
TemplateAssistant = 'template-assistant',
|
|
121
|
-
TemplateGuide = 'template-guide',
|
|
122
|
-
TemplateHidden = 'template-hidden',
|
|
123
|
-
TemplateSystem = 'template-system',
|
|
124
|
-
TemplateUser = 'template-user',
|
|
125
|
-
|
|
126
|
-
// 工具调用消息
|
|
127
|
-
Tool = 'tool',
|
|
128
|
-
|
|
129
|
-
// 活动消息(如引用文档)
|
|
130
|
-
Activity = 'activity',
|
|
131
|
-
}
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
## 消息状态
|
|
135
|
-
|
|
136
|
-
```typescript
|
|
137
|
-
enum MessageStatus {
|
|
138
|
-
// 等待中
|
|
139
|
-
Pending = 'pending',
|
|
140
|
-
|
|
141
|
-
// 流式输出中
|
|
142
|
-
Streaming = 'streaming',
|
|
143
|
-
|
|
144
|
-
// 已完成
|
|
145
|
-
Complete = 'complete',
|
|
146
|
-
|
|
147
|
-
// 错误
|
|
148
|
-
Error = 'error',
|
|
149
|
-
|
|
150
|
-
// 已停止
|
|
151
|
-
Stop = 'stop',
|
|
152
|
-
|
|
153
|
-
// 已禁用
|
|
154
|
-
Disabled = 'disabled',
|
|
155
|
-
}
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## 具体消息类型
|
|
159
|
-
|
|
160
|
-
### UserMessage
|
|
161
|
-
|
|
162
|
-
用户消息:
|
|
163
|
-
|
|
164
|
-
```typescript
|
|
165
|
-
type UserMessage = BaseMessage<MessageRole.User, InputContent[] | string>;
|
|
166
|
-
|
|
167
|
-
// 示例
|
|
168
|
-
const userMessage: UserMessage = {
|
|
169
|
-
id: '1',
|
|
170
|
-
messageId: 1,
|
|
171
|
-
role: MessageRole.User,
|
|
172
|
-
content: '你好',
|
|
173
|
-
status: MessageStatus.Complete,
|
|
174
|
-
};
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### AssistantMessage
|
|
178
|
-
|
|
179
|
-
AI 助手消息:
|
|
180
|
-
|
|
181
|
-
```typescript
|
|
182
|
-
interface AssistantMessage extends BaseMessage<MessageRole.Assistant> {
|
|
183
|
-
// 工具调用列表
|
|
184
|
-
toolCalls?: ToolCall[];
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
// 工具调用
|
|
188
|
-
type ToolCall = {
|
|
189
|
-
id: string;
|
|
190
|
-
type: MessageContentType.Function;
|
|
191
|
-
function: FunctionCall;
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
type FunctionCall = {
|
|
195
|
-
name: string;
|
|
196
|
-
arguments: string;
|
|
197
|
-
description?: string;
|
|
198
|
-
mcpName?: string;
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
// 示例
|
|
202
|
-
const assistantMessage: AssistantMessage = {
|
|
203
|
-
id: '2',
|
|
204
|
-
messageId: 2,
|
|
205
|
-
role: MessageRole.Assistant,
|
|
206
|
-
content: '你好!有什么可以帮助你的?',
|
|
207
|
-
status: MessageStatus.Complete,
|
|
208
|
-
toolCalls: [
|
|
209
|
-
{
|
|
210
|
-
id: 'call_1',
|
|
211
|
-
type: MessageContentType.Function,
|
|
212
|
-
function: {
|
|
213
|
-
name: 'get_weather',
|
|
214
|
-
arguments: '{"city": "北京"}',
|
|
215
|
-
},
|
|
216
|
-
},
|
|
217
|
-
],
|
|
218
|
-
};
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
### ReasoningMessage
|
|
222
|
-
|
|
223
|
-
推理过程消息:
|
|
224
|
-
|
|
225
|
-
```typescript
|
|
226
|
-
interface ReasoningMessage extends BaseMessage<MessageRole.Reasoning, string[]> {
|
|
227
|
-
// 推理耗时(毫秒)
|
|
228
|
-
duration?: number;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
// 示例
|
|
232
|
-
const reasoningMessage: ReasoningMessage = {
|
|
233
|
-
id: '3',
|
|
234
|
-
messageId: 3,
|
|
235
|
-
role: MessageRole.Reasoning,
|
|
236
|
-
content: ['让我分析一下这个问题...', '首先,需要考虑以下几点:', '1. 技术可行性'],
|
|
237
|
-
status: MessageStatus.Complete,
|
|
238
|
-
duration: 3500,
|
|
239
|
-
};
|
|
240
|
-
```
|
|
241
|
-
|
|
242
|
-
### ToolMessage
|
|
243
|
-
|
|
244
|
-
工具调用结果消息:
|
|
245
|
-
|
|
246
|
-
```typescript
|
|
247
|
-
interface ToolMessage extends BaseMessage<MessageRole.Tool, string> {
|
|
248
|
-
// 工具调用 ID(对应 AssistantMessage 中的 toolCalls[].id)
|
|
249
|
-
toolCallId: string;
|
|
250
|
-
|
|
251
|
-
// 执行耗时(毫秒)
|
|
252
|
-
duration: number;
|
|
253
|
-
|
|
254
|
-
// 错误信息
|
|
255
|
-
error?: string;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
// 示例
|
|
259
|
-
const toolMessage: ToolMessage = {
|
|
260
|
-
id: '4',
|
|
261
|
-
messageId: 4,
|
|
262
|
-
role: MessageRole.Tool,
|
|
263
|
-
content: '{"temperature": 25, "weather": "晴天"}',
|
|
264
|
-
status: MessageStatus.Complete,
|
|
265
|
-
toolCallId: 'call_1',
|
|
266
|
-
duration: 1200,
|
|
267
|
-
};
|
|
268
|
-
```
|
|
269
|
-
|
|
270
|
-
### ActivityMessage
|
|
271
|
-
|
|
272
|
-
活动消息(如引用文档、知识检索):
|
|
273
|
-
|
|
274
|
-
```typescript
|
|
275
|
-
// 引用文档内容类型
|
|
276
|
-
type ReferenceDocumentContent = {
|
|
277
|
-
name: string;
|
|
278
|
-
originFile: string;
|
|
279
|
-
url: string;
|
|
280
|
-
};
|
|
281
|
-
|
|
282
|
-
// 知识检索内容类型
|
|
283
|
-
type KnowledgeRagContent = {
|
|
284
|
-
content: string;
|
|
285
|
-
referenceDocument: ReferenceDocumentContent[];
|
|
286
|
-
};
|
|
287
|
-
|
|
288
|
-
interface ActivityMessage extends BaseMessage<MessageRole.Activity, KnowledgeRagContent | ReferenceDocumentContent[]> {
|
|
289
|
-
activityType: MessageContentType.KnowledgeRag | MessageContentType.ReferenceDocument | string;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
// 示例 1:引用文档
|
|
293
|
-
const referenceMessage: ActivityMessage = {
|
|
294
|
-
id: '5',
|
|
295
|
-
messageId: 5,
|
|
296
|
-
role: MessageRole.Activity,
|
|
297
|
-
content: [
|
|
298
|
-
{ name: '参考文档 1', url: 'https://example.com/1', originFile: 'https://example.com/origin/1' },
|
|
299
|
-
{ name: '参考文档 2', url: 'https://example.com/2', originFile: 'https://example.com/origin/2' },
|
|
300
|
-
],
|
|
301
|
-
status: MessageStatus.Complete,
|
|
302
|
-
activityType: 'reference',
|
|
303
|
-
};
|
|
304
|
-
|
|
305
|
-
// 示例 2:知识检索(knowledge_rag)
|
|
306
|
-
const knowledgeRagMessage: ActivityMessage = {
|
|
307
|
-
id: '6',
|
|
308
|
-
messageId: 6,
|
|
309
|
-
role: MessageRole.Activity,
|
|
310
|
-
content: {
|
|
311
|
-
content: '开始召回知识\n重排召回结果中\n完成召回并分类\n',
|
|
312
|
-
referenceDocument: [
|
|
313
|
-
{ name: '知识文档 1', url: 'https://example.com/doc1', originFile: 'https://example.com/origin/doc1' },
|
|
314
|
-
{ name: '知识文档 2', url: 'https://example.com/doc2', originFile: 'https://example.com/origin/doc2' },
|
|
315
|
-
],
|
|
316
|
-
},
|
|
317
|
-
status: MessageStatus.Complete,
|
|
318
|
-
activityType: 'knowledge_rag',
|
|
319
|
-
};
|
|
320
|
-
```
|
|
321
|
-
|
|
322
|
-
**ActivityMessage 类型说明:**
|
|
323
|
-
|
|
324
|
-
| activityType | content 类型 | 说明 |
|
|
325
|
-
| ----------------- | ---------------------------- | ---------------------------------------- |
|
|
326
|
-
| `'reference'` | `ReferenceDocumentContent[]` | 引用文档列表 |
|
|
327
|
-
| `'knowledge_rag'` | `KnowledgeRagContent` | 知识检索结果,包含检索过程内容和引用文档 |
|
|
328
|
-
|
|
329
|
-
**ReferenceDocumentContent 字段说明:**
|
|
330
|
-
|
|
331
|
-
| 字段 | 类型 | 说明 |
|
|
332
|
-
| ------------ | -------- | ---------------- |
|
|
333
|
-
| `name` | `string` | 文档名称 |
|
|
334
|
-
| `url` | `string` | 文档预览链接 |
|
|
335
|
-
| `originFile` | `string` | 文档原始文件链接 |
|
|
336
|
-
|
|
337
|
-
### InfoMessage
|
|
338
|
-
|
|
339
|
-
信息消息:
|
|
340
|
-
|
|
341
|
-
```typescript
|
|
342
|
-
type InfoMessage = BaseMessage<MessageRole.Info, string>;
|
|
343
|
-
|
|
344
|
-
// 示例
|
|
345
|
-
const infoMessage: InfoMessage = {
|
|
346
|
-
id: '6',
|
|
347
|
-
messageId: 6,
|
|
348
|
-
role: MessageRole.Info,
|
|
349
|
-
content: '会话已开始',
|
|
350
|
-
status: MessageStatus.Complete,
|
|
351
|
-
};
|
|
352
|
-
```
|
|
353
|
-
|
|
354
|
-
### LoadingMessage
|
|
355
|
-
|
|
356
|
-
加载中消息,用于在等待 AI 响应时显示加载状态:
|
|
357
|
-
|
|
358
|
-
```typescript
|
|
359
|
-
type LoadingMessage = BaseMessage<MessageRole.Loading, string>;
|
|
360
|
-
|
|
361
|
-
// 示例
|
|
362
|
-
const loadingMessage: LoadingMessage = {
|
|
363
|
-
id: 'loading',
|
|
364
|
-
messageId: '',
|
|
365
|
-
role: MessageRole.Loading,
|
|
366
|
-
content: '',
|
|
367
|
-
status: MessageStatus.Pending,
|
|
368
|
-
};
|
|
369
|
-
```
|
|
370
|
-
|
|
371
|
-
## 消息内容类型
|
|
372
|
-
|
|
373
|
-
```typescript
|
|
374
|
-
enum MessageContentType {
|
|
375
|
-
// 二进制内容
|
|
376
|
-
Binary = 'binary',
|
|
377
|
-
|
|
378
|
-
// 函数调用
|
|
379
|
-
Function = 'function',
|
|
380
|
-
|
|
381
|
-
// 键值对
|
|
382
|
-
KeyValue = 'key-value',
|
|
383
|
-
|
|
384
|
-
// 知识检索
|
|
385
|
-
KnowledgeRag = 'knowledge-rag',
|
|
386
|
-
|
|
387
|
-
// 其他
|
|
388
|
-
Other = 'other',
|
|
389
|
-
|
|
390
|
-
// 引用文档
|
|
391
|
-
ReferenceDocument = 'reference-document',
|
|
392
|
-
|
|
393
|
-
// 文本
|
|
394
|
-
Text = 'text',
|
|
395
|
-
}
|
|
396
|
-
```
|
|
397
|
-
|
|
398
|
-
## 类型扩展
|
|
399
|
-
|
|
400
|
-
支持通过声明合并扩展消息类型:
|
|
401
|
-
|
|
402
|
-
```typescript
|
|
403
|
-
// 在项目中扩展
|
|
404
|
-
declare global {
|
|
405
|
-
interface AIBluekingMessageMap {
|
|
406
|
-
'custom-role': CustomMessage;
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
interface CustomMessage extends BaseMessage<'custom-role'> {
|
|
411
|
-
customField: string;
|
|
412
|
-
}
|
|
413
|
-
```
|
|
414
|
-
|
|
415
|
-
## 使用示例
|
|
416
|
-
|
|
417
|
-
```vue
|
|
418
|
-
<template>
|
|
419
|
-
<MessageContainer
|
|
420
|
-
:messages="messages"
|
|
421
|
-
:message-status="messageStatus"
|
|
422
|
-
:on-agent-action="handleAgentAction"
|
|
423
|
-
:on-user-action="handleUserAction"
|
|
424
|
-
/>
|
|
425
|
-
</template>
|
|
426
|
-
|
|
427
|
-
<script setup lang="ts">
|
|
428
|
-
import { ref } from 'vue';
|
|
429
|
-
import { MessageContainer, MessageRole, MessageStatus, type Message } from '@blueking/chat-x';
|
|
430
|
-
|
|
431
|
-
const messageStatus = ref<MessageStatus>(MessageStatus.Complete);
|
|
432
|
-
|
|
433
|
-
const messages = ref<Message[]>([
|
|
434
|
-
{
|
|
435
|
-
id: '1',
|
|
436
|
-
messageId: 1,
|
|
437
|
-
role: MessageRole.User,
|
|
438
|
-
content: '你好',
|
|
439
|
-
status: MessageStatus.Complete,
|
|
440
|
-
},
|
|
441
|
-
{
|
|
442
|
-
id: '2',
|
|
443
|
-
messageId: 2,
|
|
444
|
-
role: MessageRole.Reasoning,
|
|
445
|
-
content: ['思考中...', '分析问题...'],
|
|
446
|
-
status: MessageStatus.Complete,
|
|
447
|
-
duration: 2000,
|
|
448
|
-
},
|
|
449
|
-
{
|
|
450
|
-
id: '3',
|
|
451
|
-
messageId: 3,
|
|
452
|
-
role: MessageRole.Assistant,
|
|
453
|
-
content: '你好!有什么可以帮助你的?',
|
|
454
|
-
status: MessageStatus.Complete,
|
|
455
|
-
},
|
|
456
|
-
]);
|
|
457
|
-
|
|
458
|
-
const handleAgentAction = async tool => {
|
|
459
|
-
console.log('Agent action:', tool);
|
|
460
|
-
};
|
|
461
|
-
|
|
462
|
-
const handleUserAction = async tool => {
|
|
463
|
-
console.log('User action:', tool);
|
|
464
|
-
};
|
|
465
|
-
</script>
|
|
466
|
-
```
|
|
467
|
-
|
|
468
|
-
## 关联组件
|
|
469
|
-
|
|
470
|
-
- [MessageContainer](../components/molecular/message-container.md) — 消息列表
|
|
471
|
-
- [MessageRender](../components/molecular/message-render.md) — 单条消息渲染
|
|
472
|
-
- [ChatContainer](../components/molecular/chat-container.md) — 聊天容器
|