@blueking/chat-x 0.0.47-beta.1 → 0.0.47-beta.2
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/index.css +1 -1
- package/dist/index.js +30 -30
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/chat-input.md +1 -1
- package/dist/mcp/generated/docs/code-content.md +3 -3
- package/dist/mcp/generated/docs/desc-panel.md +1 -1
- package/dist/mcp/generated/docs/execution-summary.md +3 -3
- package/dist/mcp/generated/docs/file-upload-btn.md +1 -1
- package/dist/mcp/generated/docs/image-content.md +1 -1
- package/dist/mcp/generated/docs/latex-content.md +7 -7
- package/dist/mcp/generated/docs/mermaid-content.md +3 -3
- package/dist/mcp/generated/docs/message-tools.md +1 -1
- package/dist/mcp/generated/docs/shortcut-btns.md +11 -11
- package/dist/mcp/generated/docs/shortcut-render.md +2 -2
- package/dist/mcp/generated/docs/text-content.md +1 -1
- package/dist/mcp/generated/docs/theme.md +6 -6
- package/dist/mcp/generated/index.json +1 -1
- package/package.json +1 -1
|
@@ -22,16 +22,16 @@
|
|
|
22
22
|
|
|
23
23
|
## 组件结构
|
|
24
24
|
|
|
25
|
-
根类名为 **`.code-content-wrapper`**：外层宽度、下边距以及 **`.code-content-header`**（深色顶栏）在任意父级下均生效。**代码区** `.hljs-pre`、行内高亮等样式选择器为 **`.ai-message-container .code-content-wrapper`**，仅在消息列表（`MessageContainer` 根上的 `ai-message-container`）内与对话区一致。Wiki 与业务中若要完整还原代码区外观，请将 `CodeContent` 包在带 `ai-message-container` 类名的父节点内。
|
|
25
|
+
根类名为 **`.ai-code-content-wrapper`**：外层宽度、下边距以及 **`.code-content-header`**（深色顶栏）在任意父级下均生效。**代码区** `.hljs-pre`、行内高亮等样式选择器为 **`.ai-message-container .ai-code-content-wrapper`**，仅在消息列表（`MessageContainer` 根上的 `ai-message-container`）内与对话区一致。Wiki 与业务中若要完整还原代码区外观，请将 `CodeContent` 包在带 `ai-message-container` 类名的父节点内。
|
|
26
26
|
|
|
27
27
|
```
|
|
28
|
-
.code-content-wrapper
|
|
28
|
+
.ai-code-content-wrapper
|
|
29
29
|
├── .code-content-header（深色顶栏；不依赖 .ai-message-container）
|
|
30
30
|
│ ├── .code-header-language（token.info）
|
|
31
31
|
│ ├── slot#header（{ language, token }）
|
|
32
32
|
│ └── ToolBtn id="copy"
|
|
33
33
|
│
|
|
34
|
-
└── .hljs-pre（完整 padding / 背景 / code 字体：需父级为 .ai-message-container .code-content-wrapper）
|
|
34
|
+
└── .hljs-pre（完整 padding / 背景 / code 字体：需父级为 .ai-message-container .ai-code-content-wrapper）
|
|
35
35
|
└── <code class="hljs language-{raw-info}">
|
|
36
36
|
├── v-for completedLines → <span class="code-line" />
|
|
37
37
|
└── v-if currentLineText → <span class="code-line current-line" />
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
## 组件结构
|
|
27
27
|
|
|
28
28
|
```
|
|
29
|
-
.toolcall-desc（flex column，gap: 4px，padding: 12px，background: #f5f7fa）
|
|
29
|
+
.ai-toolcall-desc（flex column，gap: 4px，padding: 12px，background: #f5f7fa）
|
|
30
30
|
├── .desc-title（font-size: 12px，font-weight: bold，color: #313238，margin-bottom: 6px）
|
|
31
31
|
│ └── {{ title }}
|
|
32
32
|
└── .desc-panel（flex column，gap: 4px）
|
|
@@ -61,10 +61,10 @@
|
|
|
61
61
|
## 组件结构
|
|
62
62
|
|
|
63
63
|
```
|
|
64
|
-
execution-summary
|
|
65
|
-
├── execution-summary-header
|
|
64
|
+
ai-execution-summary
|
|
65
|
+
├── ai-execution-summary-header
|
|
66
66
|
│ └── Input（关键词搜索框，clearable）
|
|
67
|
-
└── execution-summary-content
|
|
67
|
+
└── ai-execution-summary-content
|
|
68
68
|
├── 有数据时：
|
|
69
69
|
│ └── content-item × N（时间线节点）
|
|
70
70
|
│ ├── timeline-dot（时间节点圆点）
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
## 组件结构
|
|
25
25
|
|
|
26
26
|
```
|
|
27
|
-
.file-upload-btn（display: flex，align-items: center）
|
|
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
30
|
└── span.ai-shortcut-btn.file-upload-btn-icon（24×24px，color: #979ba5，hover: cursor: pointer）
|
|
@@ -25,7 +25,7 @@ Markdown Token 层的图片渲染基础组件，被 `MarkdownContent` 在解析
|
|
|
25
25
|
## 组件结构
|
|
26
26
|
|
|
27
27
|
```
|
|
28
|
-
span.md-image-wrapper（inline-block，vertical-align: middle）
|
|
28
|
+
span.ai-md-image-wrapper（inline-block，vertical-align: middle）
|
|
29
29
|
├── [showLoading] span.md-image-loading（inline-flex，gap: 6px，padding: 4px 8px，bg: #f5f7fa）
|
|
30
30
|
│ ├── bkui-vue Loading（spin，mini，primary）
|
|
31
31
|
│ └── "图片加载中..."
|
|
@@ -28,12 +28,12 @@ Markdown Token 层的 LaTeX 公式渲染基础组件，基于 **KaTeX** 实现
|
|
|
28
28
|
props.token（Token[]）
|
|
29
29
|
│
|
|
30
30
|
├─ token.type === 'math_block'（单块且 token.length ≤ 1）
|
|
31
|
-
│ wrapperTag = 'div'，wrapperClass = 'block-latex-content'
|
|
32
|
-
│ └─ <div class="block-latex-wrapper">
|
|
31
|
+
│ wrapperTag = 'div'，wrapperClass = 'ai-block-latex-content'
|
|
32
|
+
│ └─ <div class="ai-block-latex-wrapper">
|
|
33
33
|
│ └─ renderLatexToken(token) → <span class="block-katex">KaTeX HTML</span>
|
|
34
34
|
│
|
|
35
35
|
├─ token.type === 'math_inline'（或混合 token 数组）
|
|
36
|
-
│ wrapperTag = 'span'，wrapperClass = 'inline-latex-content'
|
|
36
|
+
│ wrapperTag = 'span'，wrapperClass = 'ai-inline-latex-content'
|
|
37
37
|
│ └─ renderLatexToken(token) → <span class="inline-katex">KaTeX HTML</span>
|
|
38
38
|
│
|
|
39
39
|
├─ token.type === 'inline'（含 children）
|
|
@@ -79,7 +79,7 @@ const displayMode = token.type === 'math_block' || token.meta?.displayMode === t
|
|
|
79
79
|
|
|
80
80
|
## 行内公式
|
|
81
81
|
|
|
82
|
-
`math_inline` 类型，包装为 `span.inline-latex-content`，嵌入文字流中渲染：
|
|
82
|
+
`math_inline` 类型，包装为 `span.ai-inline-latex-content`，嵌入文字流中渲染：
|
|
83
83
|
|
|
84
84
|
```vue
|
|
85
85
|
<template>
|
|
@@ -189,9 +189,9 @@ const displayMode = token.type === 'math_block' || token.meta?.displayMode === t
|
|
|
189
189
|
|
|
190
190
|
| 类名 | 标签 | 作用 |
|
|
191
191
|
| ----------------------- | ------ | ------------------------------------------------------------------------------------------- |
|
|
192
|
-
| `.block-latex-content` | `div` | 单一 `math_block` 时的外层，`text-align: center`，`overflow: auto hidden`，`margin: 16px 0` |
|
|
193
|
-
| `.inline-latex-content` | `span` | 混合/行内时的外层，`display: inline`，`vertical-align: baseline` |
|
|
194
|
-
| `.block-latex-wrapper` | `div` | 每个 `math_block` token 的包装，`text-align: center`，`margin: 16px 0` |
|
|
192
|
+
| `.ai-block-latex-content` | `div` | 单一 `math_block` 时的外层，`text-align: center`，`overflow: auto hidden`，`margin: 16px 0` |
|
|
193
|
+
| `.ai-inline-latex-content` | `span` | 混合/行内时的外层，`display: inline`，`vertical-align: baseline` |
|
|
194
|
+
| `.ai-block-latex-wrapper` | `div` | 每个 `math_block` token 的包装，`text-align: center`，`margin: 16px 0` |
|
|
195
195
|
| `.block-katex` | `span` | 块级 KaTeX 输出 |
|
|
196
196
|
| `.inline-katex` | `span` | 行内 KaTeX 输出 |
|
|
197
197
|
| `.katex-loading` | `span` | 渲染失败降级态，斜体灰色显示原始 LaTeX 文本 |
|
|
@@ -44,7 +44,7 @@ props.token（Token[]）
|
|
|
44
44
|
nextTick → emit('mounted', { get el() { return mermaidContentRef.value } })
|
|
45
45
|
|
|
46
46
|
模板：
|
|
47
|
-
div.mermaid-content（:key="svgDomStr"，v-html="svgDomStr"）
|
|
47
|
+
div.ai-mermaid-content（:key="svgDomStr"，v-html="svgDomStr"）
|
|
48
48
|
注：:key 绑定 svgDomStr，每次 SVG 变化会重建 div 而非就地 patch
|
|
49
49
|
```
|
|
50
50
|
|
|
@@ -75,7 +75,7 @@ div.mermaid-content（:key="svgDomStr"，v-html="svgDomStr"）
|
|
|
75
75
|
];
|
|
76
76
|
|
|
77
77
|
const handleMounted = ({ el }: { el: HTMLElement | null }) => {
|
|
78
|
-
// el 是 lazy getter，值为渲染后的 .mermaid-content 元素
|
|
78
|
+
// el 是 lazy getter，值为渲染后的 .ai-mermaid-content 元素
|
|
79
79
|
console.log('渲染完成:', el);
|
|
80
80
|
};
|
|
81
81
|
</script>
|
|
@@ -141,7 +141,7 @@ div.mermaid-content（:key="svgDomStr"，v-html="svgDomStr"）
|
|
|
141
141
|
|
|
142
142
|
| 事件名 | 参数 | 触发时机 |
|
|
143
143
|
| ------- | ----------------------------- | ---------------------------------------------------------------------------------- |
|
|
144
|
-
| mounted | `{ el: HTMLElement \| null }` | SVG 更新后的 `nextTick`；`el` 为 lazy getter，返回当前 `.mermaid-content` 元素引用 |
|
|
144
|
+
| mounted | `{ el: HTMLElement \| null }` | SVG 更新后的 `nextTick`；`el` 为 lazy getter，返回当前 `.ai-mermaid-content` 元素引用 |
|
|
145
145
|
|
|
146
146
|
### Token 结构
|
|
147
147
|
|
|
@@ -26,7 +26,7 @@ AI 消息的操作工具栏组件，由**左侧消息工具区**和**右侧更
|
|
|
26
26
|
|
|
27
27
|
```
|
|
28
28
|
┌─────────────────────────────────────────────────────┐
|
|
29
|
-
│ .message-tools-container │
|
|
29
|
+
│ .ai-message-tools-container │
|
|
30
30
|
│ ┌─────────────────────┐ │ ┌───────────────────┐ │
|
|
31
31
|
│ │ messageTools │ │ │ updateTools │ │
|
|
32
32
|
│ │ copy cite rebuild… │ │ │ like unlike del │ │
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
## 组件结构
|
|
28
28
|
|
|
29
29
|
```
|
|
30
|
-
div.shortcut-btns（flex，gap: 4px，width: 100%，min-width: 168px，max-width: 1000px，overflow: hidden）
|
|
30
|
+
div.ai-shortcut-btns（flex，gap: 4px，width: 100%，min-width: 168px，max-width: 1000px，overflow: hidden）
|
|
31
31
|
│
|
|
32
|
-
├── ShortcutBtn.shortcut-btns-item × N（每个快捷指令）
|
|
32
|
+
├── ShortcutBtn.ai-shortcut-btns-item × N（每个快捷指令）
|
|
33
33
|
│ height: 24px，padding: 0 6px，white-space: nowrap，background: #fff，border-radius: 4px
|
|
34
|
-
│ 溢出时追加 .shortcut-btns-item-hidden（position: absolute; visibility: hidden; pointer-events: none; opacity: 0）
|
|
34
|
+
│ 溢出时追加 .ai-shortcut-btns-item-hidden（position: absolute; visibility: hidden; pointer-events: none; opacity: 0）
|
|
35
35
|
│ 注意：隐藏项仍在 DOM 中，仅通过 CSS 不可见，offsetWidth 仍可读
|
|
36
36
|
│
|
|
37
37
|
└── [hiddenShortcuts.length > 0] Tippy（trigger="manual"，append-to="body"，interactive）
|
|
38
38
|
│ offset=[0,6]，z-index=SHORTCUT_MENU_Z_INDEX，theme="ai-chat-box-light light"
|
|
39
|
-
├── ShortcutBtn.shortcut-btns-more（触发按钮）
|
|
39
|
+
├── ShortcutBtn.ai-shortcut-btns-more（触发按钮）
|
|
40
40
|
│ MoreAgentIcon（rotate(90deg)） + "更多"
|
|
41
|
-
└── #content: div.shortcut-menu
|
|
41
|
+
└── #content: div.ai-shortcut-menu
|
|
42
42
|
ShortcutBtn（mode="menu"） × 隐藏数量
|
|
43
43
|
```
|
|
44
44
|
|
|
@@ -248,16 +248,16 @@ interface BaseShortcutComponent<T> {
|
|
|
248
248
|
|
|
249
249
|
| 类名 | 样式 | 说明 |
|
|
250
250
|
| ---------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------- |
|
|
251
|
-
| `.shortcut-btns` | `width: 100%; min-width: 168px; max-width: 1000px; overflow: hidden` | 容器，宽度撑满父元素，超出 1000px 截断 |
|
|
252
|
-
| `.shortcut-btns-item` | `height: 24px; padding: 0 6px; background: #fff; border-radius: 4px` | 每个快捷指令按钮的外层包装 class |
|
|
253
|
-
| `.shortcut-btns-item-hidden` | `position: absolute; visibility: hidden; pointer-events: none; opacity: 0` | 溢出按钮的隐藏态；仍在 DOM 中以便 offsetWidth 计算 |
|
|
254
|
-
| `.shortcut-btns-more` | `flex-shrink: 0; padding: 0 6px` | "更多"按钮，`MoreAgentIcon` 旋转 90° |
|
|
255
|
-
| `.shortcut-menu` | `@include menu.ai-common-menu-style` | 下拉菜单容器样式 |
|
|
251
|
+
| `.ai-shortcut-btns` | `width: 100%; min-width: 168px; max-width: 1000px; overflow: hidden` | 容器，宽度撑满父元素，超出 1000px 截断 |
|
|
252
|
+
| `.ai-shortcut-btns-item` | `height: 24px; padding: 0 6px; background: #fff; border-radius: 4px` | 每个快捷指令按钮的外层包装 class |
|
|
253
|
+
| `.ai-shortcut-btns-item-hidden` | `position: absolute; visibility: hidden; pointer-events: none; opacity: 0` | 溢出按钮的隐藏态；仍在 DOM 中以便 offsetWidth 计算 |
|
|
254
|
+
| `.ai-shortcut-btns-more` | `flex-shrink: 0; padding: 0 6px` | "更多"按钮，`MoreAgentIcon` 旋转 90° |
|
|
255
|
+
| `.ai-shortcut-menu` | `@include menu.ai-common-menu-style` | 下拉菜单容器样式 |
|
|
256
256
|
|
|
257
257
|
## 注意事项
|
|
258
258
|
|
|
259
259
|
1. **`key` 字段优先于 `id`**：`v-for` 使用 `shortcut.key || shortcut.id`，当多个指令 `id` 相同但代表不同实例时，可通过 `key` 字段区分
|
|
260
|
-
2. **溢出项不可交互**：`.shortcut-btns-item-hidden` 通过 `pointer-events: none` 屏蔽点击，不会误触发事件
|
|
260
|
+
2. **溢出项不可交互**：`.ai-shortcut-btns-item-hidden` 通过 `pointer-events: none` 屏蔽点击，不会误触发事件
|
|
261
261
|
3. **"更多"菜单 Teleport 至 body**：Tippy 使用 `append-to="body"`，避免被父容器的 `overflow: hidden` 裁剪
|
|
262
262
|
4. **容器宽度限制**：`min-width: 168px` 和 `max-width: 1000px` 来自 `$chat-input-min-width` / `$chat-input-max-width` 变量，与输入框宽度保持一致
|
|
263
263
|
5. **表单流程在外部**：`ShortcutBtns` 只负责显示和触发事件，`components` 的表单弹窗逻辑需配合 `ShortcutRender` 实现（`ChatInput` 已内置此流程）
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
|
|
27
27
|
```
|
|
28
28
|
┌─────────────────────────────────────────────────┐
|
|
29
|
-
│ .shortcut-render-header（渐变左边框） │
|
|
29
|
+
│ .ai-shortcut-render-header（渐变左边框） │
|
|
30
30
|
│ ✧ ThinkingIcon 快捷指令名称 ✕ Close │
|
|
31
31
|
├─────────────────────────────────────────────────┤
|
|
32
|
-
│ .shortcut-render-content（max-height: 424px， │
|
|
32
|
+
│ .ai-shortcut-render-content（max-height: 424px， │
|
|
33
33
|
│ overflow-y: auto） │
|
|
34
34
|
│ ┌─────────────┬─────────────┐ │
|
|
35
35
|
│ │ FormItem │ FormItem │ ← 两列网格 │
|
|
@@ -131,7 +131,7 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
131
131
|
|
|
132
132
|
```scss
|
|
133
133
|
// 覆盖输入框容器样式
|
|
134
|
-
.chat-input-container {
|
|
134
|
+
.ai-chat-input-container {
|
|
135
135
|
.chat-input {
|
|
136
136
|
min-height: 120px; // 自定义最小高度
|
|
137
137
|
max-height: 250px; // 自定义最大高度
|
|
@@ -170,7 +170,7 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
170
170
|
|
|
171
171
|
```scss
|
|
172
172
|
// 快捷指令按钮
|
|
173
|
-
.shortcut-btns {
|
|
173
|
+
.ai-shortcut-btns {
|
|
174
174
|
&-item {
|
|
175
175
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
176
176
|
color: #fff;
|
|
@@ -245,7 +245,7 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
245
245
|
// 暗色主题变量
|
|
246
246
|
.dark-theme {
|
|
247
247
|
// 输入框
|
|
248
|
-
.chat-input-container .chat-input {
|
|
248
|
+
.ai-chat-input-container .chat-input {
|
|
249
249
|
background: #2d2d2d;
|
|
250
250
|
|
|
251
251
|
&::before {
|
|
@@ -288,7 +288,7 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
288
288
|
}
|
|
289
289
|
|
|
290
290
|
// 快捷指令
|
|
291
|
-
.shortcut-btns-item {
|
|
291
|
+
.ai-shortcut-btns-item {
|
|
292
292
|
background: #3d3d3d;
|
|
293
293
|
color: #e0e0e0;
|
|
294
294
|
|
|
@@ -407,12 +407,12 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
407
407
|
```scss
|
|
408
408
|
// 移动端适配
|
|
409
409
|
@media (max-width: 768px) {
|
|
410
|
-
.chat-input-container .chat-input {
|
|
410
|
+
.ai-chat-input-container .chat-input {
|
|
411
411
|
min-width: 100%;
|
|
412
412
|
max-width: 100%;
|
|
413
413
|
}
|
|
414
414
|
|
|
415
|
-
.shortcut-btns {
|
|
415
|
+
.ai-shortcut-btns {
|
|
416
416
|
min-width: 100%;
|
|
417
417
|
max-width: 100%;
|
|
418
418
|
}
|