@blueking/chat-x 0.0.49-beta.13 → 0.0.49-beta.15
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/components/chat-input/build-default-placeholder.d.ts +7 -0
- package/dist/components/chat-input/chat-input.vue.d.ts +0 -1
- package/dist/index.css +1 -1
- package/dist/index.js +493 -469
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/ai-slash-input.md +2 -0
- package/dist/mcp/generated/docs/chat-container.md +2 -1
- package/dist/mcp/generated/docs/chat-input.md +12 -8
- package/dist/mcp/generated/docs/cite-content.md +3 -3
- package/dist/mcp/generated/docs/file-upload-btn.md +1 -1
- package/dist/mcp/generated/docs/toolcall-render.md +2 -0
- package/dist/mcp/generated/docs/user-question-card.md +2 -0
- package/dist/mcp/generated/index.json +1 -1
- package/package.json +2 -2
|
@@ -132,7 +132,7 @@ ai-chat-container（:data-ai-size="size"）
|
|
|
132
132
|
|
|
133
133
|
## 侧边栏与执行摘要
|
|
134
134
|
|
|
135
|
-
侧边栏默认包含「执行情况」Tab，展示所有工具调用和 FlowAgent 类型的 Activity 消息。支持关键词搜索过滤和点击定位到对话中的消息位置。
|
|
135
|
+
侧边栏默认包含「执行情况」Tab，展示所有工具调用和 FlowAgent 类型的 Activity 消息。支持关键词搜索过滤和点击定位到对话中的消息位置。Tab 标签内 `.ai-execution-summary-icon` 固定 16×16px，避免被 flex 压缩。
|
|
136
136
|
|
|
137
137
|
**展示条件**：侧栏是否渲染只取决于折叠态与是否存在可见 Tab —— `asideCollapsed === false` 且 `displayTabs` 非空即展开，与 `executionGroups`、`keyword`、是否有文件产物均无关。无执行数据时 `ExecutionSummary` 展示自身空态，无文件产物时 `FileArtifactPanel` 展示整块空态。`renderMode === Share` 分享态同样按折叠态展示侧栏（开放只读查看流程智能体详情/证据/执行情况），仅底部输入区保持隐藏。
|
|
138
138
|
|
|
@@ -247,6 +247,7 @@ ai-chat-container（:data-ai-size="size"）
|
|
|
247
247
|
除「执行情况」外，容器内置一个常驻固定 Tab —— **「文件产物」**（`name: 'file-artifact'`），用于聚合预览当前会话所有 `AssistantMessage.property.artifacts`（按 `outputId` 去重）：
|
|
248
248
|
|
|
249
249
|
- **常驻挂载 / 默认选中**：容器初始化即通过 `ensureCustomTab` 挂上该 Tab（不展开侧栏）；因 `order: -1` 排在 Tab 栏首位，在用户未主动切换过 Tab 时它就是侧栏的默认面板。不随产物有无增删，无产物时由面板展示整块空态
|
|
250
|
+
- **默认图标**：`ArtifactTabIcon`，16×16 线性折角文档，`fill` 走 `currentColor` 以继承 Tab 选中/默认色
|
|
250
251
|
- **主动打开**：点击 AI 回复中的文件卡片（[ArtifactFileCard](/components/message/assistant-message)）时，容器通过 `useArtifactPreviewProvider` 以 `outputId` 命中该文件，再 `addCustomTab` 展开侧栏并选中「文件产物」
|
|
251
252
|
- **排序 / 关闭**：`order: -1` 排在「执行情况」之前，`closable: false` 不可关闭
|
|
252
253
|
- **命中态维护**：产物列表为空时清空命中；命中项已不在列表时回落到第一个 `outputId`
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
## 组件结构
|
|
29
29
|
|
|
30
30
|
```
|
|
31
|
-
ai-chat-input-container
|
|
31
|
+
ai-chat-input-container（padding: 0 16px 16px，底部间距 16px）
|
|
32
32
|
├── slot#top（容器顶部，在输入框框体外侧）
|
|
33
33
|
├── slot#interrupt（容器顶部，在输入框框体外侧，通常展示中断/审批提示）
|
|
34
34
|
└── chat-input（框体，受 inputMaxHeight 控制）
|
|
@@ -414,7 +414,7 @@ const handleSendMessage = async (
|
|
|
414
414
|
|
|
415
415
|
## 自定义占位符
|
|
416
416
|
|
|
417
|
-
|
|
417
|
+
未传入 `placeholder` 时，组件会按 `skills` / `prompts` / `resources` 是否非空动态生成提示行。传入后完全覆盖，支持多行（换行用 `\n`）：
|
|
418
418
|
|
|
419
419
|
```vue
|
|
420
420
|
<template>
|
|
@@ -594,8 +594,8 @@ const handleSendMessage = async (
|
|
|
594
594
|
| shortcuts | `Shortcut[]` | - | - | 快捷指令列表，显示在底部工具栏 |
|
|
595
595
|
| models | `IModelOption[]` | - | - | 可选模型列表，传入后在发送按钮左侧展示模型选择器 |
|
|
596
596
|
| shortcutId | `string` | - | - | 当前选中的快捷指令 ID，匹配时列表收起为已选样式 |
|
|
597
|
-
| placeholder | `string` |
|
|
598
|
-
| inputMaxHeight | `number` | `
|
|
597
|
+
| placeholder | `string` | 动态默认 | - | 编辑器占位符，支持多行；未传时按 skills/prompts/resources 动态拼接 |
|
|
598
|
+
| inputMaxHeight | `number` | `280` | - | 框体最大高度（px），有文件时自动加上文件预览区高度 |
|
|
599
599
|
| defaultUploadFiles | `UploadFile[]` | - | - | 预设已上传的文件列表 |
|
|
600
600
|
| sendDisabledTip | `string` | - | - | 业务阻塞发送时的 tooltip 提示；传入后发送按钮置灰，点击、Enter 与 `triggerSendMessage()` 均不会发送 |
|
|
601
601
|
| supportUpload | `boolean` | `true` | - | 是否显示文件上传按钮 |
|
|
@@ -606,13 +606,17 @@ const handleSendMessage = async (
|
|
|
606
606
|
|
|
607
607
|
### 默认占位符
|
|
608
608
|
|
|
609
|
+
未传入 `placeholder` 时，根据当前 `skills` / `prompts` / `resources` 是否非空动态拼接（有对应能力才显示该行），始终保留换行提示：
|
|
610
|
+
|
|
609
611
|
```
|
|
610
|
-
输入 "/" 唤出 Skill
|
|
611
|
-
输入 "\" 唤出 Prompt
|
|
612
|
-
输入 "@" 唤出 工具和 MCP
|
|
613
|
-
通过 Shift + Enter 进行换行输入
|
|
612
|
+
输入 "/" 唤出 Skill // 仅当 skills 非空
|
|
613
|
+
输入 "\" 唤出 Prompt // 仅当 prompts 非空
|
|
614
|
+
输入 "@" 唤出 工具和 MCP // 仅当 resources 非空
|
|
615
|
+
通过 Shift + Enter 进行换行输入 // 始终显示
|
|
614
616
|
```
|
|
615
617
|
|
|
618
|
+
显式传入 `placeholder`（含空字符串）时完全覆盖上述默认文案。三种列表都为空时，只显示换行提示。
|
|
619
|
+
|
|
616
620
|
### Events
|
|
617
621
|
|
|
618
622
|
| 事件名 | 参数 | 触发时机 |
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
> **能力域**：内容渲染
|
|
20
20
|
|
|
21
|
-
展示被引用文本片段的紧凑条带组件。固定高度 28px，左侧引用图标 + 单行截断文本 + 可选关闭图标，背景灰色（`#f5f7fa
|
|
21
|
+
展示被引用文本片段的紧凑条带组件。固定高度 28px，左侧引用图标 + 单行截断文本 + 可选关闭图标，背景灰色（`#f5f7fa`），hover 背景为 `#eaebf0`。
|
|
22
22
|
|
|
23
23
|
常见于两处：
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
## 组件结构
|
|
29
29
|
|
|
30
30
|
```
|
|
31
|
-
.ai-cite-content（flex，height: 28px，padding: 0 8px，gap: 4px，bg: #f5f7fa，border-radius: 4px，margin-bottom: 4px）
|
|
31
|
+
.ai-cite-content（flex，height: 28px，padding: 0 8px，gap: 4px，bg: #f5f7fa，hover: #eaebf0，border-radius: 4px，margin-bottom: 4px）
|
|
32
32
|
├── CiteIcon（14×14px，color: #979ba5，始终显示）
|
|
33
33
|
├── .ai-cite-content-text（flex: 1，单行截断，color: #979ba5，overflow: hidden，text-overflow: ellipsis）
|
|
34
34
|
│ {{ content }}（Vue 文本插值，XSS 安全）
|
|
@@ -134,7 +134,7 @@ const message = {
|
|
|
134
134
|
|
|
135
135
|
| 元素 | 关键样式 |
|
|
136
136
|
| ------------------------ | --------------------------------------------------------------------------------------------------- |
|
|
137
|
-
| `.ai-cite-content` | `height: 28px`，`padding: 0 8px`，`background: #f5f7fa`，`margin-bottom: 4px`（为下方内容留出间距） |
|
|
137
|
+
| `.ai-cite-content` | `height: 28px`，`padding: 0 8px`，`background: #f5f7fa`，hover `#eaebf0`，`margin-bottom: 4px`（为下方内容留出间距） |
|
|
138
138
|
| `.ai-cite-content-text` | `flex: 1`，`white-space: nowrap`，`overflow: hidden`，`text-overflow: ellipsis`，`color: #979ba5` |
|
|
139
139
|
| `CiteIcon` / `CloseIcon` | `14×14px`，`color: #979ba5`；CloseIcon hover 变为 `#4d4f56` |
|
|
140
140
|
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
.ai-file-upload-btn（display: flex，align-items: center）
|
|
28
28
|
├── input[type="file"]（.file-upload-btn-input，display: none，multiple，:accept）
|
|
29
29
|
│ 触发后走 handleFileInputChange → 校验 → emit upload → target.value = ''
|
|
30
|
-
└── span.ai-shortcut-btn.file-upload-btn-icon
|
|
30
|
+
└── span.ai-shortcut-btn.file-upload-btn-icon（热区 32×32px / 圆角 8px；图标字号跟随 --ai-icon-size-sm：small=16px、normal=18px；color: #979ba5；hover: #f0f1f5）
|
|
31
31
|
v-tippy: "上传图片, 最多支持上传 3 个, 最大支持 2.4MB"（theme: ai-chat-box，offset: [0, 16]，可通过 tippyOptions 扩展）
|
|
32
32
|
@click → fileInputRef.click()
|
|
33
33
|
└── <slot> 默认：FileUploadIcon
|
|
@@ -188,6 +188,8 @@ const payload = buildSkipResumePayload(interrupt);
|
|
|
188
188
|
|
|
189
189
|
`ChatContainer` 提供同名 `#interruptQuestion` slot，参数与 `#question` 一致，透传自输入区上方的 `UserQuestionCard`。
|
|
190
190
|
|
|
191
|
+
> **跳过按钮禁用态**：`disabled` 时文字与图标同步变灰（`currentColor` / `#c4c6cc`）。
|
|
192
|
+
|
|
191
193
|
## API
|
|
192
194
|
|
|
193
195
|
### UserQuestionCard Props
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/chat-x",
|
|
3
|
-
"version": "0.0.49-beta.
|
|
3
|
+
"version": "0.0.49-beta.15",
|
|
4
4
|
"description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI，为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"bin": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"vitepress": "2.0.0-alpha.16",
|
|
80
80
|
"vitest": "^4.0.18",
|
|
81
81
|
"vue-tsc": "^3.1.4",
|
|
82
|
-
"@blueking/chat-helper": "0.0.12-beta.
|
|
82
|
+
"@blueking/chat-helper": "0.0.12-beta.26"
|
|
83
83
|
},
|
|
84
84
|
"scripts": {
|
|
85
85
|
"dev": "vite --config vite.config.ts",
|