@blueking/chat-x 0.0.9 → 0.0.11
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 +494 -0
- package/dist/index.css +1 -1
- package/dist/index.js +2521 -2664
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/content-render.md +1 -1
- package/dist/mcp/generated/docs/markdown-content.md +13 -13
- package/dist/mcp/generated/docs/reasoning-message.md +1 -1
- package/dist/mcp/generated/docs/theme.md +4 -4
- package/dist/mcp/generated/index.json +2 -2
- package/package.json +1 -1
- package/readme.md +0 -0
|
@@ -186,7 +186,7 @@ ContentRender
|
|
|
186
186
|
1. **语法自动补全**:`completeMarkdownSyntax` 在解析前补全未闭合的代码块、列表等,避免渲染异常
|
|
187
187
|
2. **节流解析**:`parseMarkdownContent` 节流 5ms(leading + trailing),大幅降低流式输入时的解析开销
|
|
188
188
|
3. **不完整状态保护**:当正在输入 LaTeX 命令(如 `$\fra...`)时保持之前的渲染结果,避免闪烁
|
|
189
|
-
4. **CSS contain 性能隔离**:`.markdown-content` 使用 `contain: layout style`,`.markdown-body` 使用 `contain: content`,减少重排影响范围
|
|
189
|
+
4. **CSS contain 性能隔离**:`.ai-markdown-content` 使用 `contain: layout style`,`.ai-markdown-body` 使用 `contain: content`,减少重排影响范围
|
|
190
190
|
5. **自动滚动**:每个 token 挂载后触发 `toScrollBottom()`(节流 100ms),与 `MessageContainer` 配合实现流式自动滚动
|
|
191
191
|
|
|
192
192
|
## 类型定义
|
|
@@ -29,7 +29,7 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
|
|
|
29
29
|
│
|
|
30
30
|
status === 'error' → CommonErrorContent(:content)
|
|
31
31
|
│
|
|
32
|
-
else → div.markdown-body[data-theme](contain: content)
|
|
32
|
+
else → div.ai-markdown-body[data-theme](contain: content)
|
|
33
33
|
│
|
|
34
34
|
v-for groupedToken
|
|
35
35
|
│
|
|
@@ -134,23 +134,23 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
|
|
|
134
134
|
|
|
135
135
|
### 流式优化机制
|
|
136
136
|
|
|
137
|
-
| 机制 | 实现
|
|
138
|
-
| ----------------- |
|
|
139
|
-
| 极速节流 | `parseMarkdownContent` throttle **5ms**,leading + trailing
|
|
140
|
-
| Markdown 语法补全 | `completeMarkdownSyntax(content)`
|
|
141
|
-
| LaTeX 防闪烁 | `isIncomplete=true` 且已有渲染结果 → **跳过本次更新**
|
|
142
|
-
| 子组件 throttle | `handleTokenMounted` throttle 100ms
|
|
143
|
-
| CSS contain | `.ai-markdown-content { contain: layout style }`<br>`.markdown-body { contain: content }` | 限制重排/重绘范围,减少流式渲染的布局开销 |
|
|
144
|
-
| 渐显动画 | 每组首 token 追加 `.ai-blueking-markdown-fade-in`
|
|
137
|
+
| 机制 | 实现 | 作用 |
|
|
138
|
+
| ----------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
|
|
139
|
+
| 极速节流 | `parseMarkdownContent` throttle **5ms**,leading + trailing | 每 5ms 最多解析一次,兼顾实时性与性能 |
|
|
140
|
+
| Markdown 语法补全 | `completeMarkdownSyntax(content)` | 自动闭合代码块、行内代码、粗斜体、删除线、链接等未完成语法 |
|
|
141
|
+
| LaTeX 防闪烁 | `isIncomplete=true` 且已有渲染结果 → **跳过本次更新** | 正在输入 LaTeX 命令时保持上一帧,避免闪白 |
|
|
142
|
+
| 子组件 throttle | `handleTokenMounted` throttle 100ms | 限制子组件挂载后触发的滚动到底部频率 |
|
|
143
|
+
| CSS contain | `.ai-markdown-content { contain: layout style }`<br>`.ai-markdown-body { contain: content }` | 限制重排/重绘范围,减少流式渲染的布局开销 |
|
|
144
|
+
| 渐显动画 | 每组首 token 追加 `.ai-blueking-markdown-fade-in` | 新内容块淡入,减少视觉跳跃感 |
|
|
145
145
|
|
|
146
146
|
## 主题支持
|
|
147
147
|
|
|
148
|
-
组件通过 `data-theme`
|
|
148
|
+
组件通过 `data-theme` 属性和本地 `markdown-content.css`(由 GitHub Markdown 样式 vendoring 而来,类前缀为 `ai-markdown-body`)控制主题,默认为 `light`,避免受宿主页面 `@media (prefers-color-scheme)` 影响。
|
|
149
149
|
|
|
150
|
-
- **Light 模式**(默认):`.markdown-body[data-theme="light"]
|
|
151
|
-
- **Dark 模式**:`.markdown-body[data-theme="dark"]
|
|
150
|
+
- **Light 模式**(默认):`.ai-markdown-body[data-theme="light"]`,light 变量 + `color-scheme: light`
|
|
151
|
+
- **Dark 模式**:`.ai-markdown-body[data-theme="dark"]`,dark 变量 + `color-scheme: dark`
|
|
152
152
|
|
|
153
|
-
>
|
|
153
|
+
> 外层包裹类名为 `.ai-markdown-content`,内层正文区为 `.ai-markdown-body`,避免与宿主或其他库的 `.markdown-body` 全局样式冲突。
|
|
154
154
|
|
|
155
155
|
## API
|
|
156
156
|
|
|
@@ -31,7 +31,7 @@ AI 思维链(Chain-of-Thought)推理过程展示组件。由**可点击标
|
|
|
31
31
|
│ .ai-reasoning-message-content │
|
|
32
32
|
│ <MarkdownContent> × content.length │
|
|
33
33
|
│ (Error 时改为 CommonErrorContent) │
|
|
34
|
-
│ .markdown-body { color: #979ba5 }(灰色文字) │
|
|
34
|
+
│ .ai-markdown-body { color: #979ba5 }(灰色文字) │
|
|
35
35
|
└─────────────────────────────────────────────────┘
|
|
36
36
|
```
|
|
37
37
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<!-- AI SUMMARY -->
|
|
2
2
|
## 快速了解
|
|
3
3
|
|
|
4
|
-
说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。
|
|
4
|
+
说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、ai-markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。
|
|
5
5
|
|
|
6
6
|
### 关联组件
|
|
7
7
|
- **chat-container** — 整体布局与侧栏
|
|
@@ -163,8 +163,8 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
163
163
|
|
|
164
164
|
```scss
|
|
165
165
|
// Markdown 内容
|
|
166
|
-
.markdown-content {
|
|
167
|
-
.markdown-body {
|
|
166
|
+
.ai-markdown-content {
|
|
167
|
+
.ai-markdown-body {
|
|
168
168
|
font-size: 14px;
|
|
169
169
|
line-height: 1.6;
|
|
170
170
|
|
|
@@ -220,7 +220,7 @@ $selection-z-index: $shortcut-menu-z-index + 1;
|
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
// Markdown 内容
|
|
223
|
-
.markdown-content .markdown-body {
|
|
223
|
+
.ai-markdown-content .ai-markdown-body {
|
|
224
224
|
color: #e0e0e0;
|
|
225
225
|
|
|
226
226
|
h1,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "2.0.0",
|
|
3
|
-
"generatedAt": "2026-
|
|
3
|
+
"generatedAt": "2026-04-01T02:09:13.831Z",
|
|
4
4
|
"domains": {
|
|
5
5
|
"message": {
|
|
6
6
|
"label": "消息展示",
|
|
@@ -1258,7 +1258,7 @@
|
|
|
1258
1258
|
"slug": "theme",
|
|
1259
1259
|
"category": "theme",
|
|
1260
1260
|
"description": "`@blueking/chat-x` 使用 SCSS 变量和 CSS 类来控制样式,支持通过覆盖变量或样式来自定义主题。",
|
|
1261
|
-
"aiSummary": "说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。",
|
|
1261
|
+
"aiSummary": "说明通过 SCSS 变量(尺寸、颜色、z-index)与 CSS 类覆盖(chat-input、用户/助手消息、shortcut-btns、ai-markdown-body、tool-btn 等)自定义主题。 含渐变边框 mixin、ai-markdown-fade-in 与弹窗过渡。暗色示例通过根 class 切换。组件随包引入样式,业务侧按需覆写。",
|
|
1262
1262
|
"relatedComponents": [
|
|
1263
1263
|
{
|
|
1264
1264
|
"slug": "chat-container",
|
package/package.json
CHANGED
package/readme.md
DELETED
|
File without changes
|