@blueking/chat-x 0.0.25 → 0.0.27
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/ag-ui/types/constants.d.ts +1 -0
- package/dist/ag-ui/types/messages.d.ts +1 -0
- package/dist/common/constants.d.ts +1 -0
- package/dist/components/chat-content/flow-agent-content/flow-agent-content.vue.d.ts +1 -0
- package/dist/components/chat-content/flow-agent-content/flow-agent-node-detail.vue.d.ts +11 -1
- package/dist/components/chat-content/knowledge-rag-content/knowledge-rag-content.vue.d.ts +1 -0
- package/dist/components/chat-content/reference-doc-content/reference-doc-content.vue.d.ts +1 -0
- package/dist/components/execution-summary/execution-summary.vue.d.ts +2 -2
- package/dist/composables/use-custom-tab.d.ts +6 -2
- package/dist/composables/use-message-group.d.ts +72 -3
- package/dist/index.css +1 -1
- package/dist/index.js +1794 -1738
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +2 -1
- package/dist/mcp/generated/docs/activity-message.md +2 -0
- package/dist/mcp/generated/docs/chat-container.md +20 -8
- package/dist/mcp/generated/docs/chat-input.md +2 -2
- package/dist/mcp/generated/docs/code-content.md +10 -14
- package/dist/mcp/generated/docs/constants.md +242 -0
- package/dist/mcp/generated/docs/execution-summary.md +4 -4
- package/dist/mcp/generated/docs/markdown-container.md +56 -0
- package/dist/mcp/generated/docs/markdown-latex.md +208 -0
- package/dist/mcp/generated/docs/markdown-mermaid.md +250 -0
- package/dist/mcp/generated/docs/message-container.md +9 -8
- package/dist/mcp/generated/docs/messages.md +475 -0
- package/dist/mcp/generated/docs/theme.md +388 -0
- package/dist/mcp/generated/docs/use-custom-tab.md +2 -1
- package/dist/mcp/generated/docs/use-message-group.md +18 -7
- package/dist/mcp/generated/index.json +1293 -0
- package/dist/types/custom.d.ts +3 -1
- package/package.json +1 -1
package/dist/lang/lang.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare const lang: {
|
|
|
9
9
|
readonly 删除: "Delete";
|
|
10
10
|
readonly 引用: "Quote";
|
|
11
11
|
readonly 重新生成: "Regenerate";
|
|
12
|
+
readonly 重新生成将清空下文内容: "Regenerating will clear the content below";
|
|
12
13
|
readonly 提交: "Submit";
|
|
13
14
|
readonly 取消: "Cancel";
|
|
14
15
|
readonly 预览内容: "Preview Content";
|
|
@@ -96,4 +97,4 @@ export declare const lang: {
|
|
|
96
97
|
readonly 清空搜索: "Clear Search";
|
|
97
98
|
readonly 搜索结果为空: "Search Result is Empty";
|
|
98
99
|
};
|
|
99
|
-
export declare const t: (key: keyof typeof lang) => "Send" | "Stop" | "Ask AI" | "Copy" | "Share" | "Like" | "Unsatisfied" | "Delete" | "Quote" | "Regenerate" | "Submit" | "Cancel" | "Preview Content" | "Jump to Detail" | "Call Tool:" | "Calling..." | "Call Success" | "Call Failed" | "Tell us your thoughts" | "What makes you satisfied?" | "What makes you dissatisfied?" | "Return Content" | "Edit" | "Deep Thinking" | "Loading image..." | "Failed to load image" | "Thinking..." | "Thinking Completed" | "Thinking Failed" | "Copy Success" | "Copy Failed" | "Return to bottom" | "Stop generating" | "Stopping" | "Duration" | "Parameters" | "Description" | "Execution Status" | "Running" | "Success" | "Failed" | "Pending" | "To Be Executed" | "Details" | "Node" | "Node Config" | "Node Output" | "Basic Info" | "Flow Template" | "Node Name" | "Step Name" | "Execution Plan" | "Optional" | "Failure Handler" | "Timeout Control" | "Yes" | "No" | "Input Params" | "Output Params" | "Param Name" | "Param Value" | "Name" | "Structured Output" | "Manual Skip" | "No Data" | "Call MCP:" | "More" | "Searching" | "Search Completed" | "Upload File" | "Requesting..." | "Cancel satisfied" | "Cancel dissatisfied" | "Confirm delete this answer?" | "This operation cannot be undone. Please proceed with caution!" | "Preview" | "Zoom Out" | "Zoom In" | "Rotate" | "Download" | "Sorry, image loading failed. Please try reloading." | "Reset" | "Reload" | "W" | "H" | "Upload Image" | "Search keyword" | "Select date" | "Locate in Chat" | "Select All" | "Confirm" | "Upload Image, up to 3 images supported, max 2.4MB each" | "Hello, I am BlueKing AI Bot" | "Clear Search" | "Search Result is Empty" | "发送" | "停止" | "问问小鲸" | "复制" | "分享" | "点赞" | "不满意" | "删除" | "引用" | "重新生成" | "提交" | "取消" | "预览内容" | "跳转详情" | "调用工具:" | "调用中" | "调用成功" | "调用失败" | "说出您的想法" | "什么原因让你满意?" | "什么原因让你不满意?" | "返回内容" | "编辑" | "深度思考" | "图片加载中..." | "图片加载失败" | "思考中" | "已思考完成" | "思考失败" | "复制成功" | "复制失败" | "返回底部" | "停止生成" | "正在停止" | "耗时" | "参数" | "描述" | "执行情况" | "执行中" | "成功" | "失败" | "挂起" | "待执行" | "详情" | "节点" | "节点配置" | "节点输出" | "基础信息" | "流程模板" | "节点名称" | "步骤名称" | "执行方案" | "是否可选" | "失败处理" | "超时控制" | "是" | "否" | "输入参数" | "输出参数" | "参数名" | "参数值" | "名称" | "变量说明" | "结构化输出" | "手动跳过" | "暂无数据" | "调用 MCP:" | "更多" | "检索中" | "检索完成" | "上传文件" | "请求中..." | "取消满意" | "取消不满意" | "确认删除该回答?" | "删除操作无法撤回,请谨慎操作!" | "预览" | "缩小" | "放大" | "旋转" | "下载" | "抱歉,图片加载失败,可尝试重新加载" | "重置" | "重新加载" | "宽" | "高" | "上传图片" | "搜索 关键字" | "选择日期" | "在对话中定位" | "全选" | "确定" | "上传图片, 最多支持上传 3 个, 最大支持 2.4MB" | "你好,我是小鲸" | "清空搜索" | "搜索结果为空";
|
|
100
|
+
export declare const t: (key: keyof typeof lang) => "Send" | "Stop" | "Ask AI" | "Copy" | "Share" | "Like" | "Unsatisfied" | "Delete" | "Quote" | "Regenerate" | "Regenerating will clear the content below" | "Submit" | "Cancel" | "Preview Content" | "Jump to Detail" | "Call Tool:" | "Calling..." | "Call Success" | "Call Failed" | "Tell us your thoughts" | "What makes you satisfied?" | "What makes you dissatisfied?" | "Return Content" | "Edit" | "Deep Thinking" | "Loading image..." | "Failed to load image" | "Thinking..." | "Thinking Completed" | "Thinking Failed" | "Copy Success" | "Copy Failed" | "Return to bottom" | "Stop generating" | "Stopping" | "Duration" | "Parameters" | "Description" | "Execution Status" | "Running" | "Success" | "Failed" | "Pending" | "To Be Executed" | "Details" | "Node" | "Node Config" | "Node Output" | "Basic Info" | "Flow Template" | "Node Name" | "Step Name" | "Execution Plan" | "Optional" | "Failure Handler" | "Timeout Control" | "Yes" | "No" | "Input Params" | "Output Params" | "Param Name" | "Param Value" | "Name" | "Structured Output" | "Manual Skip" | "No Data" | "Call MCP:" | "More" | "Searching" | "Search Completed" | "Upload File" | "Requesting..." | "Cancel satisfied" | "Cancel dissatisfied" | "Confirm delete this answer?" | "This operation cannot be undone. Please proceed with caution!" | "Preview" | "Zoom Out" | "Zoom In" | "Rotate" | "Download" | "Sorry, image loading failed. Please try reloading." | "Reset" | "Reload" | "W" | "H" | "Upload Image" | "Search keyword" | "Select date" | "Locate in Chat" | "Select All" | "Confirm" | "Upload Image, up to 3 images supported, max 2.4MB each" | "Hello, I am BlueKing AI Bot" | "Clear Search" | "Search Result is Empty" | "发送" | "停止" | "问问小鲸" | "复制" | "分享" | "点赞" | "不满意" | "删除" | "引用" | "重新生成" | "重新生成将清空下文内容" | "提交" | "取消" | "预览内容" | "跳转详情" | "调用工具:" | "调用中" | "调用成功" | "调用失败" | "说出您的想法" | "什么原因让你满意?" | "什么原因让你不满意?" | "返回内容" | "编辑" | "深度思考" | "图片加载中..." | "图片加载失败" | "思考中" | "已思考完成" | "思考失败" | "复制成功" | "复制失败" | "返回底部" | "停止生成" | "正在停止" | "耗时" | "参数" | "描述" | "执行情况" | "执行中" | "成功" | "失败" | "挂起" | "待执行" | "详情" | "节点" | "节点配置" | "节点输出" | "基础信息" | "流程模板" | "节点名称" | "步骤名称" | "执行方案" | "是否可选" | "失败处理" | "超时控制" | "是" | "否" | "输入参数" | "输出参数" | "参数名" | "参数值" | "名称" | "变量说明" | "结构化输出" | "手动跳过" | "暂无数据" | "调用 MCP:" | "更多" | "检索中" | "检索完成" | "上传文件" | "请求中..." | "取消满意" | "取消不满意" | "确认删除该回答?" | "删除操作无法撤回,请谨慎操作!" | "预览" | "缩小" | "放大" | "旋转" | "下载" | "抱歉,图片加载失败,可尝试重新加载" | "重置" | "重新加载" | "宽" | "高" | "上传图片" | "搜索 关键字" | "选择日期" | "在对话中定位" | "全选" | "确定" | "上传图片, 最多支持上传 3 个, 最大支持 2.4MB" | "你好,我是小鲸" | "清空搜索" | "搜索结果为空";
|
|
@@ -16,6 +16,8 @@ ActivityMessage 展示活动类消息:知识检索(knowledge_rag)、引用
|
|
|
16
16
|
|
|
17
17
|
活动消息组件,用于展示 AI 的知识检索(Knowledge RAG)过程、参考文档引用列表和 FlowAgent 流程执行情况。通过 `activityType` 切换三种工作模式,点击标题栏可折叠/展开内容区域。
|
|
18
18
|
|
|
19
|
+
组件会将父级传入消息上的 **`uid`** 以 **`message-uid`** 形式透传给各活动子组件(`FlowAgentContent` / `KnowledgeRagContent` / `ReferenceDocContent`),用于侧栏自定义 Tab、`addCustomTab` 的 `data.messageUid` 与主对话区「在对话中定位」联动(详见 [ChatContainer](./chat-container.md))。
|
|
20
|
+
|
|
19
21
|
## 三种工作模式
|
|
20
22
|
|
|
21
23
|
组件根据 `activityType` 的值决定渲染模式:
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
ChatContainer 提供完整 AI 对话布局:分栏(ResizeLayout)、消息列表(MessageContainer)、输入(ChatInput)、执行摘要(ExecutionSummary)、快捷表单(ShortcutRender)与多选栏(SelectionFooter)。 内置 useMessageGroup、分享与自定义 Tab
|
|
4
|
+
ChatContainer 提供完整 AI 对话布局:分栏(ResizeLayout)、消息列表(MessageContainer)、输入(ChatInput)、执行摘要(ExecutionSummary)、快捷表单(ShortcutRender)与多选栏(SelectionFooter)。 内置 useMessageGroup、分享与自定义 Tab 等能力;对 MessageContainer/ChatInput 下推 inputStatus(末尾 Loading 占位时推导 Fetching),适合一站式接入。 通过 props 传入 messages、shortcuts 等,事件与 ChatInput/MessageContainer 对齐。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-container** — 消息列表与滚动区域
|
|
@@ -21,8 +21,9 @@ ChatContainer 提供完整 AI 对话布局:分栏(ResizeLayout)、消息
|
|
|
21
21
|
|
|
22
22
|
## 核心能力
|
|
23
23
|
|
|
24
|
-
- **分栏布局**:基于 `ResizeLayout`
|
|
24
|
+
- **分栏布局**:基于 `ResizeLayout` 的可拖拽分栏;**侧栏是否展示 Tab / 执行摘要、以及分栏是否进入折叠样式(`ai-is-collapse`)以 `executionGroups` 为准**(由 `useMessageGroup` 从消息中过滤出工具调用与 FlowAgent 执行记录),**不以原始 `messages.length` 判断**。因此仅有普通对话、尚无执行类消息时,侧栏内容与「执行情况」区域可能为空,布局上与无执行数据时一致
|
|
25
25
|
- **消息分组**:内置 `useMessageGroup` 自动处理消息分组、Tool 合并、Loading 注入
|
|
26
|
+
- **输入区状态推导**:传给 `MessageContainer` 与 `ChatInput` 的 `messageStatus` 为内部计算值 `inputStatus`:当分组中存在 id 为 `LOADING_MESSAGE_ID`(`'__loading__'`,由 `useMessageGroup` 注入的占位 Loading 消息)时,对内使用 `MessageStatus.Fetching`;否则使用外部传入的 `messageStatus`。用于在「已发用户消息、尚未流式」阶段与流式中一致地展示停止能力,并避免输入区重复发送
|
|
26
27
|
- **执行摘要**:侧边栏展示工具调用 / FlowAgent 执行记录,支持关键词搜索和对话定位
|
|
27
28
|
- **自定义 Tab**:通过 `useCustomTabProvider` 支持动态添加自定义 Tab(如节点详情)
|
|
28
29
|
- **分享模式**:内置消息多选分享流程,选中用户消息后确认分享
|
|
@@ -39,7 +40,7 @@ ai-chat-container
|
|
|
39
40
|
│ │ ├── 执行情况(默认 Tab)
|
|
40
41
|
│ │ └── 自定义 Tab × N(可关闭)
|
|
41
42
|
│ ├── ExecutionSummary(执行情况 Tab 内容)
|
|
42
|
-
│ ├── 自定义 Tab 组件(通过 component :is
|
|
43
|
+
│ ├── 自定义 Tab 组件(通过 component :is 渲染,可向子组件注入 #locateButton)
|
|
43
44
|
│ └── collapse-button(折叠按钮)
|
|
44
45
|
└── main(主内容区)
|
|
45
46
|
├── MessageContainer(有消息时)
|
|
@@ -107,6 +108,10 @@ ai-chat-container
|
|
|
107
108
|
|
|
108
109
|
侧边栏默认包含「执行情况」Tab,展示所有工具调用和 FlowAgent 类型的 Activity 消息。支持关键词搜索过滤和点击定位到对话中的消息位置。
|
|
109
110
|
|
|
111
|
+
**展示条件**:当 `executionGroups` 为空时,不渲染侧栏 Tab 与 `ExecutionSummary`(折叠按钮亦隐藏);主区域仍可正常展示 `messages` 中的对话内容。`renderMode === Share` 时侧栏隐藏,且分栏会应用与折叠一致的样式。
|
|
112
|
+
|
|
113
|
+
**自定义 Tab 联动**:当 `executionGroups` 变为空(例如会话清空或仅剩无执行类消息)时,容器会**自动重置自定义 Tab**(`resetCustomTab`),避免残留节点详情等 Tab。
|
|
114
|
+
|
|
110
115
|
```vue
|
|
111
116
|
<template>
|
|
112
117
|
<ChatContainer
|
|
@@ -141,7 +146,13 @@ ai-chat-container
|
|
|
141
146
|
|
|
142
147
|
## 自定义 Tab
|
|
143
148
|
|
|
144
|
-
通过 `ref` 获取组件实例后,使用 `addCustomTab` / `removeCustomTab` 动态管理侧边栏 Tab
|
|
149
|
+
通过 `ref` 获取组件实例后,使用 `addCustomTab` / `removeCustomTab` 动态管理侧边栏 Tab。若 **`executionGroups` 变为空**,容器会清空自定义 Tab 状态(与侧栏执行数据联动,见上文「侧边栏与执行摘要」)。
|
|
150
|
+
|
|
151
|
+
### 自定义 Tab 与「在对话中定位」
|
|
152
|
+
|
|
153
|
+
`addCustomTab` 的 `data` 可携带 **`messageUid`**(与对应活动消息的 `message.uid` 一致)。`ChatContainer` 在侧栏用 `<component :is>` 渲染自定义 Tab 时,会向子组件提供 **`locateButton` 插槽**:默认渲染「在对话中定位」按钮,点击后调用内部 `handleLocateMessageGroup(messageUid)`,优先滚动到主区域 `document.getElementById(messageUid)`;若不存在该节点,则在当前 `messageGroups` 中查找包含 `message.uid === messageUid` 的消息组,并滚动到该组的容器(`MessageGroup.uid` 作为组级 `id`)。
|
|
154
|
+
|
|
155
|
+
子组件若需展示该按钮,请在模板中声明 `<slot name="locateButton" />`(例如 FlowAgent 节点详情标题栏)。`FlowAgentContent` 等会在打开节点详情 Tab 时将 `messageUid` 写入 `data`,与 `ActivityMessage` 下传给内容区的 `message-uid` 对齐。
|
|
145
156
|
|
|
146
157
|
```vue
|
|
147
158
|
<template>
|
|
@@ -163,13 +174,14 @@ ai-chat-container
|
|
|
163
174
|
const chatContainerRef = useTemplateRef<InstanceType<typeof ChatContainer>>('chatContainerRef');
|
|
164
175
|
|
|
165
176
|
// 添加自定义 Tab(如 FlowAgent 节点详情)
|
|
166
|
-
const addNodeDetailTab = (nodeId: string, nodeName: string) => {
|
|
177
|
+
const addNodeDetailTab = (nodeId: string, nodeName: string, messageUid?: string) => {
|
|
167
178
|
chatContainerRef.value?.addCustomTab({
|
|
168
179
|
name: `node-${nodeId}`,
|
|
169
180
|
label: nodeName,
|
|
170
181
|
data: {
|
|
171
|
-
component: MyNodeDetail, //
|
|
182
|
+
component: MyNodeDetail, // 自定义组件(模板内需 <slot name="locateButton" /> 以展示侧栏「在对话中定位」)
|
|
172
183
|
props: { loading: true, data: {} },
|
|
184
|
+
messageUid, // 与活动消息 message.uid 一致时可省略;用于主对话定位
|
|
173
185
|
},
|
|
174
186
|
});
|
|
175
187
|
};
|
|
@@ -408,11 +420,11 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
|
|
|
408
420
|
```typescript
|
|
409
421
|
import { ChatContainer, RenderMode, type CustomTab, type Shortcut, type Message } from '@blueking/chat-x';
|
|
410
422
|
|
|
411
|
-
// 自定义 Tab
|
|
423
|
+
// 自定义 Tab(data 可与 messageUid 组合,供侧栏定位主对话)
|
|
412
424
|
interface CustomTab<T = Record<string, unknown>> {
|
|
413
425
|
label: string;
|
|
414
426
|
name: string;
|
|
415
|
-
data?: T;
|
|
427
|
+
data?: T & { messageUid?: string };
|
|
416
428
|
}
|
|
417
429
|
|
|
418
430
|
// 快捷指令
|
|
@@ -82,10 +82,10 @@ chat-input-container
|
|
|
82
82
|
| `messageStatus` | 输入框有内容时按钮表现 | 输入框空时 |
|
|
83
83
|
| ----------------------------- | ------------------------------------------------------ | ------------------------ |
|
|
84
84
|
| `complete` / `stop` / `error` | 蓝色发送按钮,点击触发 `onSendMessage` | 灰色禁用 |
|
|
85
|
-
| `streaming` / `pending`
|
|
85
|
+
| `streaming` / `pending` / `fetching` | 蓝色停止按钮(Loading 图标),点击触发 `onStopSending` | 蓝色停止按钮(仍可点击) |
|
|
86
86
|
| `disabled` | 灰色禁用,点击无效 | 灰色禁用 |
|
|
87
87
|
|
|
88
|
-
> **实现细节**:组件内部用 `messageState` 计算属性决定实际按钮状态:当 `messageStatus` 为 `pending` 或 `
|
|
88
|
+
> **实现细节**:组件内部用 `messageState` 计算属性决定实际按钮状态:当 `messageStatus` 为 `pending`、`streaming` 或 `fetching` 时直接使用该状态(确保停止按钮始终可用);否则当输入为空或仅含空白字符时强制为 `disabled`,其余情况使用 `messageStatus` 的值。`fetching` 时按 Enter **不会**触发发送(避免请求中与 Loading 占位阶段重复提交)。
|
|
89
89
|
|
|
90
90
|
### Complete(可发送)
|
|
91
91
|
|
|
@@ -17,23 +17,19 @@ CodeContent 接收 markdown-it 的 fence/code_block token,按行 highlight.js
|
|
|
17
17
|
|
|
18
18
|
## 组件结构
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
根类名为 **`.code-content-wrapper`**:外层宽度、下边距以及 **`.code-content-header`**(深色顶栏)在任意父级下均生效。**代码区** `.hljs-pre`、行内高亮等样式选择器为 **`.ai-message-container .code-content-wrapper`**,仅在消息列表(`MessageContainer` 根上的 `ai-message-container`)内与对话区一致。Wiki 与业务中若要完整还原代码区外观,请将 `CodeContent` 包在带 `ai-message-container` 类名的父节点内。
|
|
21
21
|
|
|
22
22
|
```
|
|
23
|
-
.
|
|
24
|
-
├── .code-content-header
|
|
25
|
-
│ ├── .code-header-language(
|
|
26
|
-
│ ├── slot#header({ language, token }
|
|
27
|
-
│ └── ToolBtn id="copy"
|
|
23
|
+
.code-content-wrapper
|
|
24
|
+
├── .code-content-header(深色顶栏;不依赖 .ai-message-container)
|
|
25
|
+
│ ├── .code-header-language(token.info)
|
|
26
|
+
│ ├── slot#header({ language, token })
|
|
27
|
+
│ └── ToolBtn id="copy"
|
|
28
28
|
│
|
|
29
|
-
└── .hljs-pre
|
|
29
|
+
└── .hljs-pre(完整 padding / 背景 / code 字体:需父级为 .ai-message-container .code-content-wrapper)
|
|
30
30
|
└── <code class="hljs language-{raw-info}">
|
|
31
|
-
├── v-for completedLines
|
|
32
|
-
|
|
33
|
-
│ (已完成行,经过 hljs.highlight 高亮)
|
|
34
|
-
└── v-if currentLineText
|
|
35
|
-
<span class="code-line current-line" v-html="currentLineHtml" />
|
|
36
|
-
(最后一行,也经过 highlightLine,用 .current-line 标识正在输入)
|
|
31
|
+
├── v-for completedLines → <span class="code-line" />
|
|
32
|
+
└── v-if currentLineText → <span class="code-line current-line" />
|
|
37
33
|
```
|
|
38
34
|
|
|
39
35
|
## 基础用法
|
|
@@ -42,7 +38,7 @@ CodeContent 接收 markdown-it 的 fence/code_block token,按行 highlight.js
|
|
|
42
38
|
|
|
43
39
|
```vue
|
|
44
40
|
<template>
|
|
45
|
-
<!--
|
|
41
|
+
<!-- 代码区 .hljs-pre 的完整样式依赖父级 .ai-message-container(与对话消息区一致);顶栏单独也可用 -->
|
|
46
42
|
<div class="ai-message-container">
|
|
47
43
|
<CodeContent
|
|
48
44
|
:token="codeTokens"
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
汇总 MessageRole、MessageStatus(含 Fetching 请求中)、MessageContentType、MessageToolsStatus、MessageState、Z-Index 与 CONST_MESSAGE_TOOLS 等导出常量。 用于构造消息、配置 MessageContainer 工具栏与输入态,以及层级与默认快捷指令。与类型 messages 配套使用。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **message-tools** — 默认工具 ID 与展示
|
|
8
|
+
- **chat-input** — MessageState 与快捷指令
|
|
9
|
+
- **message-container** — 工具栏与消息态
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
<!-- FULL DOC -->
|
|
13
|
+
|
|
14
|
+
# 常量枚举
|
|
15
|
+
|
|
16
|
+
> **分类**:type
|
|
17
|
+
|
|
18
|
+
`@blueking/chat-x` 导出的常量和枚举类型。
|
|
19
|
+
|
|
20
|
+
## 消息相关
|
|
21
|
+
|
|
22
|
+
### MessageRole
|
|
23
|
+
|
|
24
|
+
消息角色枚举:
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
enum MessageRole {
|
|
28
|
+
User = 'user',
|
|
29
|
+
Assistant = 'assistant',
|
|
30
|
+
System = 'system',
|
|
31
|
+
Developer = 'developer',
|
|
32
|
+
Guide = 'guide',
|
|
33
|
+
Hidden = 'hidden',
|
|
34
|
+
HiddenAssistant = 'hidden-assistant',
|
|
35
|
+
HiddenGuide = 'hidden-guide',
|
|
36
|
+
HiddenSystem = 'hidden-system',
|
|
37
|
+
HiddenUser = 'hidden-user',
|
|
38
|
+
Info = 'info',
|
|
39
|
+
Loading = 'loading',
|
|
40
|
+
Pause = 'pause',
|
|
41
|
+
Placeholder = 'placeholder',
|
|
42
|
+
Reasoning = 'reasoning',
|
|
43
|
+
TemplateAssistant = 'template-assistant',
|
|
44
|
+
TemplateGuide = 'template-guide',
|
|
45
|
+
TemplateHidden = 'template-hidden',
|
|
46
|
+
TemplateSystem = 'template-system',
|
|
47
|
+
TemplateUser = 'template-user',
|
|
48
|
+
Tool = 'tool',
|
|
49
|
+
Activity = 'activity',
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### MessageStatus
|
|
54
|
+
|
|
55
|
+
消息状态枚举:
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
enum MessageStatus {
|
|
59
|
+
Complete = 'complete',
|
|
60
|
+
Disabled = 'disabled',
|
|
61
|
+
Error = 'error',
|
|
62
|
+
Fetching = 'fetching', // 请求中(例如已发用户消息、尚未开始流式,与末尾 Loading 占位一致)
|
|
63
|
+
Pending = 'pending',
|
|
64
|
+
Stop = 'stop',
|
|
65
|
+
StopLoading = 'stop-loading',
|
|
66
|
+
Streaming = 'streaming',
|
|
67
|
+
Success = 'success',
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
| 枚举值 | 说明 |
|
|
72
|
+
| --------------- | ---- |
|
|
73
|
+
| `Fetching` | 请求中:与 `useMessageGroup` 在末尾用户消息后注入的 Loading 占位(`LOADING_MESSAGE_ID`)配合时,`ChatContainer` 会将传入输入区与列表底部的状态推导为该值,便于展示「停止」与禁止重复发送。 |
|
|
74
|
+
|
|
75
|
+
### MessageContentType
|
|
76
|
+
|
|
77
|
+
消息内容类型枚举:
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
enum MessageContentType {
|
|
81
|
+
Binary = 'binary',
|
|
82
|
+
Function = 'function',
|
|
83
|
+
KeyValue = 'key-value',
|
|
84
|
+
KnowledgeRag = 'knowledge-rag',
|
|
85
|
+
Other = 'other',
|
|
86
|
+
ReferenceDocument = 'reference-document',
|
|
87
|
+
Text = 'text',
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### MessageToolsStatus
|
|
92
|
+
|
|
93
|
+
消息工具栏状态枚举:
|
|
94
|
+
|
|
95
|
+
```typescript
|
|
96
|
+
enum MessageToolsStatus {
|
|
97
|
+
Disabled = 'disabled', // 禁用状态,按钮显示但不可点击
|
|
98
|
+
Hidden = 'hidden', // 隐藏状态,工具栏完全隐藏
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### RenderMode
|
|
103
|
+
|
|
104
|
+
渲染模式枚举,控制 `ChatContainer` / `MessageContainer` 的 UI 行为:
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
enum RenderMode {
|
|
108
|
+
Chat = 'chat', // 默认对话模式
|
|
109
|
+
Share = 'share', // 分享预览模式:隐藏侧边栏和工具栏,启用多选样式
|
|
110
|
+
Test = 'test', // 测试/嵌入模式:过滤掉「分享」按钮
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
| 枚举值 | 侧边栏 | MessageTools | 说明 |
|
|
115
|
+
| ------- | ------ | -------------- | ------------------------------ |
|
|
116
|
+
| `Chat` | 正常 | 全部按钮 | 默认行为 |
|
|
117
|
+
| `Share` | 隐藏 | 隐藏 | 分享预览,仅展示消息内容 |
|
|
118
|
+
| `Test` | 正常 | 过滤掉「分享」 | 测试或嵌入场景,隐藏分享入口 |
|
|
119
|
+
|
|
120
|
+
## 输入状态
|
|
121
|
+
|
|
122
|
+
### MessageState
|
|
123
|
+
|
|
124
|
+
输入框消息状态:
|
|
125
|
+
|
|
126
|
+
```typescript
|
|
127
|
+
const MessageState = {
|
|
128
|
+
ACTIVE: 'active',
|
|
129
|
+
DISABLED: 'disabled',
|
|
130
|
+
LOADING: 'loading',
|
|
131
|
+
} as const;
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Z-Index 常量
|
|
135
|
+
|
|
136
|
+
```typescript
|
|
137
|
+
// 全局 chat-x 组件 Z-Index
|
|
138
|
+
const CHAT_Z_INDEX = 9999;
|
|
139
|
+
|
|
140
|
+
// 编辑器组件 Z-Index
|
|
141
|
+
const EDITOR_Z_INDEX = 10000;
|
|
142
|
+
|
|
143
|
+
// 编辑器菜单 Z-Index
|
|
144
|
+
const EDITOR_MENU_Z_INDEX = 10001;
|
|
145
|
+
|
|
146
|
+
// 快捷指令菜单 Z-Index
|
|
147
|
+
const SHORTCUT_MENU_Z_INDEX = 10002;
|
|
148
|
+
|
|
149
|
+
// 划选弹窗 Z-Index
|
|
150
|
+
const SELECTION_Z_INDEX = 10003;
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## 默认工具按钮
|
|
154
|
+
|
|
155
|
+
### CONST_MESSAGE_TOOLS
|
|
156
|
+
|
|
157
|
+
消息工具按钮列表:
|
|
158
|
+
|
|
159
|
+
```typescript
|
|
160
|
+
const CONST_MESSAGE_TOOLS: IToolBtn[] = [
|
|
161
|
+
{ id: 'copy', name: '复制', description: '复制' },
|
|
162
|
+
{ id: 'cite', name: '引用', description: '引用' },
|
|
163
|
+
{ id: 'rebuild', name: '重新生成', description: '重新生成' },
|
|
164
|
+
{ id: 'share', name: '分享', description: '分享' },
|
|
165
|
+
];
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### CONST_USER_MESSAGE_TOOLS
|
|
169
|
+
|
|
170
|
+
用户消息工具按钮列表:
|
|
171
|
+
|
|
172
|
+
```typescript
|
|
173
|
+
const CONST_USER_MESSAGE_TOOLS: IToolBtn[] = [
|
|
174
|
+
{ id: 'copy', name: '复制', description: '复制' },
|
|
175
|
+
{ id: 'cite', name: '引用', description: '引用' },
|
|
176
|
+
{ id: 'edit', name: '编辑', description: '编辑' },
|
|
177
|
+
{ id: 'delete', name: '删除', description: '删除' },
|
|
178
|
+
];
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
### CONST_UPDATE_TOOLS
|
|
182
|
+
|
|
183
|
+
更新工具按钮列表(点赞/不满意):
|
|
184
|
+
|
|
185
|
+
```typescript
|
|
186
|
+
const CONST_UPDATE_TOOLS: IToolBtn[] = [
|
|
187
|
+
{ id: 'like', name: '点赞', description: '点赞' },
|
|
188
|
+
{ id: 'unlike', name: '不满意', description: '不满意' },
|
|
189
|
+
{ id: 'delete', name: '删除', description: '删除' },
|
|
190
|
+
];
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
## 默认快捷指令
|
|
194
|
+
|
|
195
|
+
### DEFAULT_SHORTCUTS
|
|
196
|
+
|
|
197
|
+
默认快捷指令列表:
|
|
198
|
+
|
|
199
|
+
```typescript
|
|
200
|
+
const DEFAULT_SHORTCUTS: Shortcut[] = [{ id: 'ask-whale', name: '问问小鲸' }];
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## 使用示例
|
|
204
|
+
|
|
205
|
+
```typescript
|
|
206
|
+
import {
|
|
207
|
+
MessageRole,
|
|
208
|
+
MessageStatus,
|
|
209
|
+
MessageContentType,
|
|
210
|
+
MessageToolsStatus,
|
|
211
|
+
RenderMode,
|
|
212
|
+
CHAT_Z_INDEX,
|
|
213
|
+
CONST_MESSAGE_TOOLS,
|
|
214
|
+
DEFAULT_SHORTCUTS,
|
|
215
|
+
} from '@blueking/chat-x';
|
|
216
|
+
|
|
217
|
+
// 创建消息
|
|
218
|
+
const message = {
|
|
219
|
+
id: '1',
|
|
220
|
+
messageId: 1,
|
|
221
|
+
role: MessageRole.User,
|
|
222
|
+
content: '你好',
|
|
223
|
+
status: MessageStatus.Complete,
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
// 检查消息状态
|
|
227
|
+
if (message.status === MessageStatus.Streaming) {
|
|
228
|
+
console.log('消息正在流式输出中...');
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// 使用默认工具按钮
|
|
232
|
+
console.log(
|
|
233
|
+
'可用工具:',
|
|
234
|
+
CONST_MESSAGE_TOOLS.map(t => t.name),
|
|
235
|
+
);
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
## 关联组件
|
|
239
|
+
|
|
240
|
+
- [MessageTools](../components/molecular/message-tools.md) — 消息工具栏
|
|
241
|
+
- [ChatInput](../components/molecular/chat-input.md) — 输入与状态
|
|
242
|
+
- [MessageContainer](../components/molecular/message-container.md) — 工具与消息展示
|
|
@@ -40,8 +40,8 @@ ExecutionSummary 以时间线汇总工具调用与 FlowAgent 等活动记录,
|
|
|
40
40
|
<script setup lang="ts">
|
|
41
41
|
import { ExecutionSummary, type MessageGroup } from '@blueking/chat-x';
|
|
42
42
|
|
|
43
|
-
const handleLocate = (
|
|
44
|
-
const dom = document.getElementById(
|
|
43
|
+
const handleLocate = (uid: string, group: MessageGroup) => {
|
|
44
|
+
const dom = document.getElementById(uid);
|
|
45
45
|
dom?.scrollIntoView({ behavior: 'smooth' });
|
|
46
46
|
};
|
|
47
47
|
|
|
@@ -100,7 +100,7 @@ execution-summary
|
|
|
100
100
|
|
|
101
101
|
| 事件名 | 参数 | 说明 |
|
|
102
102
|
| ------------------ | ------------------------------------- | ------------------------ |
|
|
103
|
-
| locateMessageGroup | `(
|
|
103
|
+
| locateMessageGroup | `(uid: string, group: MessageGroup)` | 点击「在对话中定位」按钮,参数为消息组 `MessageGroup.uid` |
|
|
104
104
|
| updateKeyword | `(keyword: string)` | 搜索关键词变更 |
|
|
105
105
|
|
|
106
106
|
## 类型定义
|
|
@@ -109,7 +109,7 @@ execution-summary
|
|
|
109
109
|
import { type MessageGroup } from '@blueking/chat-x';
|
|
110
110
|
|
|
111
111
|
interface MessageGroup {
|
|
112
|
-
|
|
112
|
+
uid: string;
|
|
113
113
|
type: MessageRole;
|
|
114
114
|
messages: Message[];
|
|
115
115
|
checked: boolean;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
markdownItContainer 基于 markdown-it-container,支持字符串或正则匹配容器名;MarkdownContent 中用于 hljs-left/center/right 对齐。 渲染为带 class 的 div,与 tokens-to-vnodes 及样式配合。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **markdown-content** — 渲染管线中注册插件
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
<!-- FULL DOC -->
|
|
11
|
+
|
|
12
|
+
# markdownItContainer 自定义容器插件
|
|
13
|
+
|
|
14
|
+
> **分类**:plugin
|
|
15
|
+
|
|
16
|
+
将 `::: 容器名` 开头的块解析为带 `class` 的块级容器,闭合行使用 `:::`。
|
|
17
|
+
|
|
18
|
+
## 语法示例
|
|
19
|
+
|
|
20
|
+
```markdown
|
|
21
|
+
::: hljs-left
|
|
22
|
+
左对齐内容
|
|
23
|
+
:::
|
|
24
|
+
|
|
25
|
+
::: hljs-center
|
|
26
|
+
居中内容
|
|
27
|
+
:::
|
|
28
|
+
|
|
29
|
+
::: hljs-right
|
|
30
|
+
右对齐内容
|
|
31
|
+
:::
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 在 MarkdownContent 中的注册方式
|
|
35
|
+
|
|
36
|
+
组件内使用正则同时注册左/中/右三种容器名:
|
|
37
|
+
|
|
38
|
+
```typescript
|
|
39
|
+
import MarkdownIt from 'markdown-it';
|
|
40
|
+
import { markdownItContainer } from '../../../src/plugins/markdown-container';
|
|
41
|
+
|
|
42
|
+
const md = new MarkdownIt({ html: true }).use(markdownItContainer, /^hljs-(left|center|right)$/);
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## 配置说明
|
|
46
|
+
|
|
47
|
+
| 参数 | 类型 | 说明 |
|
|
48
|
+
| ------ | ------------------- | -------------------------------------------------- |
|
|
49
|
+
| `name` | `string \| RegExp` | 容器标识;字符串为精确匹配,正则用于一类名称 |
|
|
50
|
+
| `opts` | `ContainerOptions?` | 可选 `marker`、`validate`、`render` 覆盖默认行为 |
|
|
51
|
+
|
|
52
|
+
更多行为见源码 `packages/chat-x/src/plugins/markdown-container.ts`。
|
|
53
|
+
|
|
54
|
+
## 关联
|
|
55
|
+
|
|
56
|
+
- [MarkdownContent](../components/atomic/markdown-content.md) — 实际接入与样式
|