@blueking/chat-x 0.0.43 → 0.0.45-beta.1
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 +0 -3
- package/dist/ag-ui/types/index.d.ts +2 -0
- package/dist/ag-ui/types/interrupt.d.ts +107 -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-buttons/tool-btn/tool-btn.vue.d.ts +1 -11
- 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 +0 -1
- package/dist/components/chat-content/flow-agent-content/flow-agent-node-detail.vue.d.ts +0 -2
- package/dist/components/chat-input/ai-slash-input/ai-slash-input.vue.d.ts +1 -3
- package/dist/components/chat-input/chat-input.vue.d.ts +10 -9
- package/dist/components/chat-input/input-attachment/input-attachment.vue.d.ts +1 -0
- package/dist/components/chat-input/{ai-slash-input/ai-skill-list/ai-skill-list.vue.d.ts → input-info-alert.vue.d.ts} +1 -3
- 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 +8 -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 +2 -6
- package/dist/composables/index.d.ts +0 -1
- package/dist/composables/use-common.d.ts +1 -1
- package/dist/composables/use-custom-tab.d.ts +1 -1
- package/dist/composables/use-message-group.d.ts +2004 -227
- package/dist/icons/execution.d.ts +0 -3
- package/dist/icons/index.d.ts +1 -1
- package/dist/icons/interrupt.d.ts +24 -0
- package/dist/index.css +1 -1
- package/dist/index.js +5059 -4674
- package/dist/index.js.map +1 -1
- package/dist/lang/lang.d.ts +33 -5
- package/dist/mcp/generated/docs/activity-layout.md +138 -0
- package/dist/mcp/generated/docs/activity-message.md +18 -28
- 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 +144 -93
- package/dist/mcp/generated/docs/chat-input.md +45 -9
- 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 +11 -6
- package/dist/mcp/generated/docs/flow-agent-content.md +212 -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 +204 -0
- package/dist/mcp/generated/docs/interrupt.md +282 -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 -31
- 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 +70 -12
- package/dist/mcp/generated/docs/message-loading.md +120 -0
- package/dist/mcp/generated/docs/message-render.md +21 -9
- package/dist/mcp/generated/docs/message-tools.md +13 -8
- 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 +11 -10
- 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 +3 -3
- package/dist/mcp/generated/docs/tool-approval-card.md +148 -0
- package/dist/mcp/generated/docs/tool-btn.md +15 -41
- 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-global-config.md +1 -1
- package/dist/mcp/generated/docs/use-menu-keydown.md +1 -1
- package/dist/mcp/generated/docs/use-message-group.md +40 -9
- 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 +10 -5
- package/dist/mcp/generated/docs/user-question-answered-card.md +106 -0
- package/dist/mcp/generated/docs/user-question-card.md +211 -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 +1062 -551
- 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 +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/plugins/index.d.ts +0 -1
- package/dist/types/custom.d.ts +0 -1
- package/dist/types/editor.d.ts +0 -6
- package/dist/types/input.d.ts +1 -1
- package/dist/types/tool.d.ts +3 -3
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/utils.d.ts +0 -1
- package/package.json +23 -21
- package/dist/components/chat-content/flow-agent-content/flow-agent-state.d.ts +0 -34
- package/dist/components/chat-content/flow-agent-content/use-flow-agent.d.ts +0 -47
- package/dist/components/chat-content/flow-agent-content/use-flow-tab.d.ts +0 -18
- package/dist/composables/use-full-screen.d.ts +0 -17
- package/dist/icons/screen.d.ts +0 -6
- package/dist/mcp/generated/docs/use-full-screen.md +0 -114
- package/dist/plugins/markdown-bk-inline-style.d.ts +0 -20
|
@@ -1,19 +1,25 @@
|
|
|
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
|
|
|
@@ -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`)
|
|
@@ -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>
|
|
@@ -461,13 +502,14 @@ AI 回复状态为 `error` 时,消息以错误样式展示:
|
|
|
461
502
|
| messageGroups | `MessageGroup[]` | — | 预计算的消息分组;传入时跳过内部分组逻辑,由 `ChatContainer` 通过 `useMessageGroup` 提供 |
|
|
462
503
|
| messageStatus | `MessageStatus` | — | 当前整体消息状态,控制底部「停止生成」按钮显示;`ChatContainer` 会结合末尾 Loading 占位推导 `fetching` 等再传入 |
|
|
463
504
|
| messageToolsStatus | `MessageToolsStatus` | — | 工具栏状态,透传给 `MessageTools` 和 `MessageRender` |
|
|
464
|
-
| messageToolsTippyOptions | `AITippyProps` | — | 透传给 `MessageTools` 和 `MessageRender`(进而透传给 `UserMessage` 的工具栏)的 Tippy 配置,用于自定义 tooltip
|
|
505
|
+
| messageToolsTippyOptions | `AITippyProps` | — | 透传给 `MessageTools` 和 `MessageRender`(进而透传给 `UserMessage` 的工具栏)的 Tippy 配置,用于自定义 tooltip 挂载点(如 `appendTo`)等 |
|
|
465
506
|
| enableSelection | `boolean` | `false` | 是否启用多选模式 |
|
|
466
507
|
| onAgentAction | `(tool: IToolBtn, messages: Message[]) => Promise<string[] \| void>` | — | AI 消息工具操作回调;`copy` 操作由内部处理,`like/unlike` 应返回反馈原因字符串数组 |
|
|
467
508
|
| onAgentFeedback | `(tool: IToolBtn, messages: Message[], reasonList: string[], otherReason: string) => void` | — | AI 消息反馈提交回调(点赞/踩选完原因后触发) |
|
|
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>` | — | 用户快捷指令表单提交回调 |
|
|
512
|
+
| onInterruptResume | `OnInterruptResume` | — | AG-UI human-in-the-loop 中断响应回调,透传给 `MessageRender` → `InterruptMessageRender` |
|
|
471
513
|
| renderMode | `RenderMode` | — | 渲染模式。`Share` 模式下启用多选样式并隐藏工具栏;`Test` 模式下过滤掉「分享」按钮;不传或 `Chat` 为默认行为 |
|
|
472
514
|
|
|
473
515
|
### v-model
|
|
@@ -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) — 三点加载动画。
|
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
按 message.role 分发到用户、助手、工具、推理、活动、中断等消息组件。 源码位置:src/components/chat-message/message-render/message-render.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **message-container** — 在 MessageContainer 中按组调用以渲染每条消息
|
|
8
8
|
- **assistant-message** — role 为 assistant 时渲染 AI 回复与工具调用
|
|
9
9
|
- **user-message** — role 为 user 时渲染用户消息
|
|
10
|
+
- **interrupt-message** — role 为 interrupt 时渲染 InterruptMessageRender
|
|
10
11
|
|
|
11
12
|
---
|
|
12
13
|
<!-- FULL DOC -->
|
|
13
14
|
|
|
14
15
|
# MessageRender 消息渲染器
|
|
16
|
+
## 源码事实
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
- **源码位置**:`src/components/chat-message/message-render/message-render.vue`
|
|
19
|
+
- **能力域**:消息系统
|
|
20
|
+
- **能力说明**:按 message.role 分发到用户、助手、工具、推理、活动、中断等消息组件。
|
|
21
|
+
|
|
22
|
+
> **能力域**:消息系统
|
|
17
23
|
|
|
18
24
|
统一的消息渲染入口,通过 `message.role` 字段自动派发到对应的子组件。整个渲染过程由一个 `computed` 属性完成,无额外状态。
|
|
19
25
|
|
|
@@ -35,6 +41,7 @@ MessageRender
|
|
|
35
41
|
│ ├── 'tool' → ToolMessage(转发 message)
|
|
36
42
|
│ ├── 'activity' → ActivityMessage(转发 message)
|
|
37
43
|
│ ├── 'loading' → LoadingMessage(转发 message)
|
|
44
|
+
│ ├── 'interrupt' → InterruptMessageRender(转发 message + onInterruptResume)
|
|
38
45
|
│ │
|
|
39
46
|
│ └── 其他 / 未知 → null(不渲染任何内容)
|
|
40
47
|
```
|
|
@@ -267,15 +274,17 @@ slot 参数类型与 `AssistantMessage` 的 slot 保持一致(`Partial<Assista
|
|
|
267
274
|
| messageToolsStatus | `MessageToolsStatus` | — | 工具按钮状态;**仅转发给 `UserMessage`** |
|
|
268
275
|
| onAction | `(tool: IToolBtn) => Promise<string[] \| void>` | — | 工具操作回调;**仅转发给 `UserMessage`** |
|
|
269
276
|
| onInputConfirm | `(content: UserMessage['content'], docSchema: TagSchema) => Promise<void>` | — | 用户编辑确认回调;**仅转发给 `UserMessage`** |
|
|
277
|
+
| onInterruptResume | `(payload: InterruptResume, interrupt: Interrupt) => Promise<void>` | — | 中断响应回调;**仅转发给 `InterruptMessageRender`** |
|
|
270
278
|
| onShortcutConfirm | `(formModel: Record<string, unknown>) => Promise<void>` | — | 用户快捷指令提交回调;**仅转发给 `UserMessage`** |
|
|
271
279
|
| tippyOptions | `Partial<Omit<TippyOptions, 'getReferenceClientRect' \| 'triggerTarget'>>` | — | 自定义 Tippy 配置;**仅转发给 `UserMessage`** |
|
|
272
280
|
|
|
273
281
|
### Slots
|
|
274
282
|
|
|
275
|
-
| 插槽名
|
|
276
|
-
|
|
|
277
|
-
|
|
|
278
|
-
|
|
|
283
|
+
| 插槽名 | 参数 | 说明 |
|
|
284
|
+
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
|
285
|
+
| answeredQuestion | `{ item, index, status }` | 自定义 UserQuestion 已回答回显,透传给 InterruptMessageRender → UserQuestionAnsweredCard 的 `#answer` |
|
|
286
|
+
| codeHeader | `{ language: string; token: Token[] }` | 代码块头部自定义操作区域,透传给 ContentRender → MarkdownContent → CodeContent;**仅对 assistant 生效** |
|
|
287
|
+
| default | `{ content: string, status: MessageStatus }` | 替换 AssistantMessage 的内容区域渲染;**仅对 `role: 'assistant'` 生效** |
|
|
279
288
|
|
|
280
289
|
## 消息类型映射
|
|
281
290
|
|
|
@@ -288,6 +297,7 @@ slot 参数类型与 `AssistantMessage` 的 slot 保持一致(`Partial<Assista
|
|
|
288
297
|
| `tool` | `ToolMessage` | `message` | 工具调用返回结果 |
|
|
289
298
|
| `activity` | `ActivityMessage` | `message` | 知识检索 / 引用文档 |
|
|
290
299
|
| `loading` | `LoadingMessage` | `message`(字段被忽略,组件无 Props) | 等待响应的加载占位 |
|
|
300
|
+
| `interrupt` | `InterruptMessageRender` | `message` + `onInterruptResume` | human-in-the-loop 中断 |
|
|
291
301
|
| 其他 / 未知 | — | — | 返回 `null`,不渲染 |
|
|
292
302
|
|
|
293
303
|
## 类型定义
|
|
@@ -325,6 +335,8 @@ enum MessageToolsStatus {
|
|
|
325
335
|
|
|
326
336
|
## 关联组件
|
|
327
337
|
|
|
328
|
-
- [MessageContainer](
|
|
329
|
-
- [AssistantMessage](
|
|
330
|
-
- [UserMessage](
|
|
338
|
+
- [MessageContainer](/components/setup/message-container) — 内部按组调用以渲染每条消息
|
|
339
|
+
- [AssistantMessage](/components/message/assistant-message) — assistant 角色派发目标
|
|
340
|
+
- [UserMessage](/components/message/user-message) — user 角色派发目标
|
|
341
|
+
- [InterruptMessage 中断消息](/components/agent/interrupt-message) — interrupt 角色派发目标
|
|
342
|
+
- [ToolApprovalCard 审批卡片](/components/agent/tool-approval-card) — AI Dev 审批中断子卡片
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
消息悬浮工具栏,组合复制、删除、反馈等工具按钮。 源码位置:src/components/message-tools/message-tools.vue。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **tool-btn** — 普通工具项由 ToolBtn 渲染
|
|
@@ -12,8 +12,13 @@ MessageTools 渲染 AI 消息底部工具区:左侧消息工具(复制、引
|
|
|
12
12
|
<!-- FULL DOC -->
|
|
13
13
|
|
|
14
14
|
# MessageTools 消息工具栏
|
|
15
|
+
## 源码事实
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
- **源码位置**:`src/components/message-tools/message-tools.vue`
|
|
18
|
+
- **能力域**:工具与反馈
|
|
19
|
+
- **能力说明**:消息悬浮工具栏,组合复制、删除、反馈等工具按钮。
|
|
20
|
+
|
|
21
|
+
> **能力域**:工具与反馈
|
|
17
22
|
|
|
18
23
|
AI 消息的操作工具栏组件,由**左侧消息工具区**和**右侧更新工具区**两部分组成,中间以分隔线分隔。仅 `like` / `unlike` 按钮会弹出反馈表单(`UserFeedback`),其余按钮直接触发 `onAction`。
|
|
19
24
|
|
|
@@ -358,9 +363,9 @@ const CONST_UPDATE_TOOLS = [
|
|
|
358
363
|
import { MessageToolsStatus, type IToolBtn } from '@blueking/chat-x';
|
|
359
364
|
|
|
360
365
|
interface IToolBtn {
|
|
361
|
-
id
|
|
362
|
-
name
|
|
363
|
-
description
|
|
366
|
+
id: string; // 工具唯一标识;与 ToolIconsMap 匹配时显示内置图标,否则显示 name 文本
|
|
367
|
+
name: string; // 工具名称,无对应图标时显示;也用作 tooltip fallback
|
|
368
|
+
description: string; // tooltip 文本
|
|
364
369
|
}
|
|
365
370
|
|
|
366
371
|
enum MessageToolsStatus {
|
|
@@ -371,6 +376,6 @@ enum MessageToolsStatus {
|
|
|
371
376
|
|
|
372
377
|
## 关联组件
|
|
373
378
|
|
|
374
|
-
- [ToolBtn](
|
|
375
|
-
- [UserFeedback](
|
|
376
|
-
- [DeleteTool](
|
|
379
|
+
- [ToolBtn](/components/feedback/tool-btn) — 单项工具按钮
|
|
380
|
+
- [UserFeedback](/components/feedback/user-feedback) — 点赞/踩反馈面板
|
|
381
|
+
- [DeleteTool](/components/feedback/delete-tool) — 删除二次确认
|
|
@@ -107,6 +107,9 @@ enum MessageRole {
|
|
|
107
107
|
// 信息消息
|
|
108
108
|
Info = 'info',
|
|
109
109
|
|
|
110
|
+
// human-in-the-loop 中断消息
|
|
111
|
+
Interrupt = 'interrupt',
|
|
112
|
+
|
|
110
113
|
// 加载中消息
|
|
111
114
|
Loading = 'loading',
|
|
112
115
|
|
|
@@ -138,23 +141,32 @@ enum MessageRole {
|
|
|
138
141
|
|
|
139
142
|
```typescript
|
|
140
143
|
enum MessageStatus {
|
|
141
|
-
// 等待中
|
|
142
|
-
Pending = 'pending',
|
|
143
|
-
|
|
144
|
-
// 流式输出中
|
|
145
|
-
Streaming = 'streaming',
|
|
146
|
-
|
|
147
144
|
// 已完成
|
|
148
145
|
Complete = 'complete',
|
|
149
146
|
|
|
147
|
+
// 已禁用
|
|
148
|
+
Disabled = 'disabled',
|
|
149
|
+
|
|
150
150
|
// 错误
|
|
151
151
|
Error = 'error',
|
|
152
152
|
|
|
153
|
+
// 请求中
|
|
154
|
+
Fetching = 'fetching',
|
|
155
|
+
|
|
156
|
+
// 等待中
|
|
157
|
+
Pending = 'pending',
|
|
158
|
+
|
|
153
159
|
// 已停止
|
|
154
160
|
Stop = 'stop',
|
|
155
161
|
|
|
156
|
-
//
|
|
157
|
-
|
|
162
|
+
// 停止请求中
|
|
163
|
+
StopLoading = 'stop-loading',
|
|
164
|
+
|
|
165
|
+
// 流式输出中
|
|
166
|
+
Streaming = 'streaming',
|
|
167
|
+
|
|
168
|
+
// 成功
|
|
169
|
+
Success = 'success',
|
|
158
170
|
}
|
|
159
171
|
```
|
|
160
172
|
|
|
@@ -337,6 +349,58 @@ const knowledgeRagMessage: ActivityMessage = {
|
|
|
337
349
|
| `url` | `string` | 文档预览链接 |
|
|
338
350
|
| `originFile` | `string` | 文档原始文件链接 |
|
|
339
351
|
|
|
352
|
+
### InterruptMessage
|
|
353
|
+
|
|
354
|
+
human-in-the-loop 中断消息,对应 AG-UI `RUN_FINISHED` 事件的 `outcome` 对象结构。`content.outcome.type === 'interrupt'` 时,[InterruptMessageRender](../components/agent/interrupt-message) 从 `interrupts` 渲染审批卡片或把 `UserQuestion` 交给输入区;`type: 'success'` 表示 resume 后的成功结果,`UserQuestion` 会根据 `result` 回显回答内容。类型详见 [中断类型 Interrupt](./interrupt.md)。
|
|
355
|
+
|
|
356
|
+
```typescript
|
|
357
|
+
type RunFinishedOutcome = { interrupts: Interrupt[]; type: 'interrupt' } | { type: 'success' };
|
|
358
|
+
|
|
359
|
+
type InterruptMessage = BaseMessage<
|
|
360
|
+
MessageRole.Interrupt,
|
|
361
|
+
{
|
|
362
|
+
message?: string;
|
|
363
|
+
outcome?: RunFinishedOutcome;
|
|
364
|
+
result?: BaseResume<InterruptReason>;
|
|
365
|
+
runId?: string;
|
|
366
|
+
threadId?: string;
|
|
367
|
+
}
|
|
368
|
+
>;
|
|
369
|
+
|
|
370
|
+
const interruptMessage: InterruptMessage = {
|
|
371
|
+
id: 'interrupt-message-1',
|
|
372
|
+
messageId: 'interrupt-message-1',
|
|
373
|
+
role: MessageRole.Interrupt,
|
|
374
|
+
status: MessageStatus.Pending,
|
|
375
|
+
content: {
|
|
376
|
+
message: '算法方案评审单需要您关注',
|
|
377
|
+
runId: 'run_ai_dev_tool_approval',
|
|
378
|
+
threadId: 'thread_ai_dev_tool_approval',
|
|
379
|
+
outcome: {
|
|
380
|
+
type: 'interrupt',
|
|
381
|
+
interrupts: [
|
|
382
|
+
{
|
|
383
|
+
id: 'interrupt_ai_dev_tool_approval',
|
|
384
|
+
reason: InterruptReason.AIDevToolApproval,
|
|
385
|
+
toolCallId: 'tool_call_review_ticket',
|
|
386
|
+
message: '算法方案评审单需要您关注',
|
|
387
|
+
metadata: {
|
|
388
|
+
ticket: {
|
|
389
|
+
approvers: ['张三', '李四'],
|
|
390
|
+
sn: 'REV-2026-04-24-001',
|
|
391
|
+
status: APPROVAL_STATUS.PENDING,
|
|
392
|
+
submit_time: '2026-04-24 14:30:15',
|
|
393
|
+
title: '算法方案评审单',
|
|
394
|
+
url: 'https://example.com/review-tickets/REV-2026-04-24-001',
|
|
395
|
+
},
|
|
396
|
+
},
|
|
397
|
+
},
|
|
398
|
+
],
|
|
399
|
+
},
|
|
400
|
+
},
|
|
401
|
+
};
|
|
402
|
+
```
|
|
403
|
+
|
|
340
404
|
### InfoMessage
|
|
341
405
|
|
|
342
406
|
信息消息:
|
|
@@ -473,6 +537,6 @@ interface CustomMessage extends BaseMessage<'custom-role'> {
|
|
|
473
537
|
|
|
474
538
|
## 关联组件
|
|
475
539
|
|
|
476
|
-
- [MessageContainer](../components/
|
|
477
|
-
- [MessageRender](../components/
|
|
478
|
-
- [ChatContainer](../components/
|
|
540
|
+
- [MessageContainer](../components/setup/message-container) — 消息列表
|
|
541
|
+
- [MessageRender](../components/message/message-render) — 单条消息渲染
|
|
542
|
+
- [ChatContainer](../components/setup/chat-container) — 聊天容器
|
|
@@ -203,7 +203,7 @@ type OverflowTipsValue = Partial<TippyProps> & {
|
|
|
203
203
|
|
|
204
204
|
## 关联组件
|
|
205
205
|
|
|
206
|
-
- [DescPanel](../components/
|
|
207
|
-
- [ExecutionSummary](../components/
|
|
208
|
-
- [ToolcallRender](../components/
|
|
209
|
-
- [ChatInput](../components/
|
|
206
|
+
- [DescPanel](../components/rendering/desc-panel) — 描述区溢出
|
|
207
|
+
- [ExecutionSummary](../components/agent/execution-summary) — 侧栏摘要标签
|
|
208
|
+
- [ToolcallRender](../components/agent/toolcall-render) — 工具调用标题
|
|
209
|
+
- [ChatInput](../components/input/chat-input) — `@` 菜单项(内部 AiSlashMenu)
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
图片预览的缩放、旋转、下载等工具按钮。 源码位置:src/components/image-preview/preview-toolbar.vue。
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
<!-- FULL DOC -->
|
|
8
|
+
|
|
9
|
+
# PreviewToolbar 图片预览工具栏
|
|
10
|
+
|
|
11
|
+
> **能力域**:媒体文件
|
|
12
|
+
|
|
13
|
+
## 源码事实
|
|
14
|
+
|
|
15
|
+
- **源码位置**:`src/components/image-preview/preview-toolbar.vue`
|
|
16
|
+
- **能力说明**:图片预览的缩放、旋转、下载等工具按钮。
|
|
17
|
+
|
|
18
|
+
## API 摘要
|
|
19
|
+
|
|
20
|
+
### Props
|
|
21
|
+
|
|
22
|
+
- `{ activeIndex: number; currentImageInfo?: null | { resolution?: string; width?: number }; isMultiple: boolean; showInfo: boolean; total: number; }`
|
|
23
|
+
|
|
24
|
+
### Emits
|
|
25
|
+
|
|
26
|
+
- `{ (e: 'zoomIn'): void; (e: 'zoomOut'): void; (e: 'rotate'): void; (e: 'reset'): void; (e: 'download'): void; }`
|
|
27
|
+
|
|
28
|
+
### Slots
|
|
29
|
+
|
|
30
|
+
- `extra`
|
|
31
|
+
|
|
32
|
+
### Expose
|
|
33
|
+
|
|
34
|
+
- 无。
|
|
35
|
+
|
|
36
|
+
## 组件依赖
|
|
37
|
+
|
|
38
|
+
- 无组件依赖或仅依赖基础库。
|
|
39
|
+
|
|
40
|
+
## 使用建议
|
|
41
|
+
|
|
42
|
+
- 优先通过上层组合组件使用;直接使用前请确认 props 数据结构来自对应类型定义。
|