@blueking/chat-x 0.0.19 → 0.0.21
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/ai-buttons/scroll-btn/scroll-btn.vue.d.ts +3 -3
- package/dist/components/ai-shortcut/shortcut-btn/shortcut-btn.vue.d.ts +2 -2
- package/dist/components/chat-content/activity-layout/activity-layout.vue.d.ts +2 -2
- package/dist/components/chat-content/content-render/content-render.vue.d.ts +7 -5
- package/dist/components/chat-input/chat-input.vue.d.ts +3 -3
- package/dist/components/chat-message/message-container/message-container.vue.d.ts +2 -2
- package/dist/components/image-preview/image-preview-group.vue.d.ts +2 -2
- package/dist/components/image-preview/image-preview.vue.d.ts +2 -2
- package/dist/components/image-preview/image.vue.d.ts +3 -3
- package/dist/components/image-preview/preview-toolbar.vue.d.ts +2 -2
- package/dist/components/message-loading/message-loading.vue.d.ts +2 -2
- package/dist/composables/use-custom-tab.d.ts +1 -0
- package/dist/index.css +1 -1
- package/dist/index.js +3436 -7286
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/chat-container.md +1 -1
- package/dist/mcp/generated/docs/markdown-content.md +5 -0
- package/dist/mcp/generated/docs/use-custom-tab.md +5 -1
- package/dist/plugins/markdown-container.d.ts +25 -0
- package/dist/utils/tokens-to-vnodes.d.ts +8 -2
- package/package.json +9 -3
- package/dist/mcp/generated/docs/constants.md +0 -216
- package/dist/mcp/generated/docs/markdown-latex.md +0 -208
- package/dist/mcp/generated/docs/markdown-mermaid.md +0 -250
- package/dist/mcp/generated/docs/messages.md +0 -472
- package/dist/mcp/generated/docs/theme.md +0 -388
- package/dist/mcp/generated/index.json +0 -1279
|
@@ -332,7 +332,7 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
|
|
|
332
332
|
| commonTippyOptions | `AITippyProps` | — | 通用 Tippy 配置,传入的选项会注入到所有使用 `v-overflow-tips` 的子组件中 |
|
|
333
333
|
| openingRemark | `string` | — | 开场白,无消息时显示,支持 Markdown |
|
|
334
334
|
| placement | `'left' \| 'right'` | `'left'` | 侧边栏位置 |
|
|
335
|
-
| resizeProps | `{ disabled?: boolean; initialDivide?: number; max?: number; min?: number }` | — | 透传给内部 `ResizeLayout` 的可选配置,与默认 `collapsible: false`、`immediate: true`、`min: 400` 合并;`placement` 始终取自本组件 `placement` |
|
|
335
|
+
| resizeProps | `{ disabled?: boolean; initialDivide?: number \| string; max?: number; min?: number }` | — | 透传给内部 `ResizeLayout` 的可选配置,与默认 `collapsible: false`、`immediate: true`、`min: 400` 合并;`placement` 始终取自本组件 `placement`;`initialDivide` 可为像素数字或百分比等字符串(与 bkui ResizeLayout 一致) |
|
|
336
336
|
| onCustomTabChange | `(tab: CustomTab) => Promise<any>` | — | 自定义 Tab 切换回调,返回值作为 Tab 组件 props |
|
|
337
337
|
|
|
338
338
|
> 完整 Props 列表请参考 [ChatInput](./chat-input.md) 和 [MessageContainer](./message-container.md) 文档。
|
|
@@ -93,6 +93,10 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
|
|
|
93
93
|
|
|
94
94
|
## 表格
|
|
95
95
|
|
|
96
|
+
## 对齐容器(markdown-it-container)
|
|
97
|
+
|
|
98
|
+
支持 `::: hljs-left` / `::: hljs-center` / `::: hljs-right` 自定义容器,内容渲染在带对应 class 的块级容器中,由内置样式控制 `text-align`:
|
|
99
|
+
|
|
96
100
|
## LaTeX 公式
|
|
97
101
|
|
|
98
102
|
公式由 `LatexContent`(KaTeX)渲染,支持行内 `$...$` 和块级 `$$...$$`:
|
|
@@ -179,6 +183,7 @@ props.content → completeMarkdownSyntax → md.parse → groupTokens → groupe
|
|
|
179
183
|
| `markdown-it-task-checkbox` | `- [x]` | 任务列表 |
|
|
180
184
|
| `markdownItMermaid` | ` ```mermaid ` | Mermaid 图表 token |
|
|
181
185
|
| `markdownItLatex` | `$...$` / `$$...$$` | KaTeX 数学公式 token |
|
|
186
|
+
| `markdownItContainer` | `::: hljs-left` 等 | 自定义对齐容器(class 与 highlight.js 命名对齐) |
|
|
182
187
|
|
|
183
188
|
### 安全性
|
|
184
189
|
|
|
@@ -29,6 +29,7 @@ function useCustomTabProvider<T extends Record<string, unknown>>(options: {
|
|
|
29
29
|
addCustomTab: (tab: CustomTab<T>) => void;
|
|
30
30
|
removeCustomTab: (tabName: string) => void;
|
|
31
31
|
selectCustomTab: (tab: CustomTab<T>) => void;
|
|
32
|
+
resetCustomTab: () => void;
|
|
32
33
|
};
|
|
33
34
|
```
|
|
34
35
|
|
|
@@ -43,6 +44,7 @@ function useCustomTabConsumer<T extends Record<string, unknown>>():
|
|
|
43
44
|
addCustomTab: (tab: CustomTab<T>) => void;
|
|
44
45
|
removeCustomTab: (tabName: string) => void;
|
|
45
46
|
selectCustomTab: (tab: CustomTab<T>) => void;
|
|
47
|
+
resetCustomTab: () => void;
|
|
46
48
|
};
|
|
47
49
|
```
|
|
48
50
|
|
|
@@ -53,7 +55,8 @@ function useCustomTabConsumer<T extends Record<string, unknown>>():
|
|
|
53
55
|
```typescript
|
|
54
56
|
import { useCustomTabProvider, EXECUTION_TAB_NAME } from '@blueking/chat-x';
|
|
55
57
|
|
|
56
|
-
const { tabs, selectedTab, isCollapse, addCustomTab, removeCustomTab, selectCustomTab } =
|
|
58
|
+
const { tabs, selectedTab, isCollapse, addCustomTab, removeCustomTab, selectCustomTab, resetCustomTab } =
|
|
59
|
+
useCustomTabProvider({
|
|
57
60
|
onTabChange: async tab => {
|
|
58
61
|
// Tab 切换时加载数据
|
|
59
62
|
const data = await fetchTabData(tab.name);
|
|
@@ -100,6 +103,7 @@ tabManager?.removeCustomTab('node-detail-123');
|
|
|
100
103
|
| addCustomTab | `(tab: CustomTab) => void` | 添加 Tab(同名 Tab 不重复添加) |
|
|
101
104
|
| removeCustomTab | `(tabName: string) => void` | 移除指定 Tab |
|
|
102
105
|
| selectCustomTab | `(tab: CustomTab) => void` | 切换到指定 Tab,触发 `onTabChange` 回调 |
|
|
106
|
+
| resetCustomTab | `() => void` | 重置为仅保留「执行情况」Tab、折叠侧栏并选中默认 Tab;`ChatContainer` 在卸载时调用,避免残留自定义 Tab |
|
|
103
107
|
|
|
104
108
|
## 类型定义
|
|
105
109
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Markdown-it 自定义容器插件
|
|
3
|
+
* 支持 ::: name ... ::: 语法,渲染为带 class 的 div 容器
|
|
4
|
+
* name 支持字符串精确匹配和正则匹配
|
|
5
|
+
*
|
|
6
|
+
* 用法示例:
|
|
7
|
+
* md.use(markdownItContainer, 'warning', { ... })
|
|
8
|
+
* md.use(markdownItContainer, /^hljs-(left|center|right)$/, { ... })
|
|
9
|
+
*
|
|
10
|
+
* Markdown 语法:
|
|
11
|
+
* ::: hljs-left
|
|
12
|
+
* 左对齐内容
|
|
13
|
+
* :::
|
|
14
|
+
*/
|
|
15
|
+
import type { MarkdownItConstructor as MarkdownIt } from '../markdown-it';
|
|
16
|
+
import type { Options, Renderer, Token } from '../markdown-it';
|
|
17
|
+
export type ContainerOptions = {
|
|
18
|
+
marker?: string;
|
|
19
|
+
render?: RenderFunction;
|
|
20
|
+
validate?: ValidateFunction;
|
|
21
|
+
};
|
|
22
|
+
type RenderFunction = (tokens: Token[], idx: number, options: Options, env: unknown, slf: Renderer) => string;
|
|
23
|
+
type ValidateFunction = (params: string, markup: string) => boolean;
|
|
24
|
+
export declare const markdownItContainer: (md: MarkdownIt, name: RegExp | string, options?: ContainerOptions) => void;
|
|
25
|
+
export default markdownItContainer;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type VNode } from 'vue';
|
|
2
|
-
import type { Renderer, Token } from '../markdown-it';
|
|
2
|
+
import type { Options, Renderer, Token } from '../markdown-it';
|
|
3
3
|
export interface TokenToVNodeOptions {
|
|
4
4
|
/**
|
|
5
5
|
* 对应 markdown-it 的 highlight 选项
|
|
@@ -7,6 +7,11 @@ export interface TokenToVNodeOptions {
|
|
|
7
7
|
*/
|
|
8
8
|
highlight?: ((str: string, lang: string, attrs?: any) => string) | null;
|
|
9
9
|
html?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* 与产生 tokens 的 MarkdownIt 实例的 `options` 一致,供 `renderer.rules` 第三参使用
|
|
12
|
+
* (markdown-it 的 rule 签名为 (tokens, idx, options, env, self),并非 Renderer 上的字段)
|
|
13
|
+
*/
|
|
14
|
+
mditOptions?: Options;
|
|
10
15
|
renderer?: Renderer;
|
|
11
16
|
/**
|
|
12
17
|
* HTML 净化函数,用于处理 innerHTML 的内容
|
|
@@ -20,7 +25,8 @@ type TokenAttrs = [string, string][];
|
|
|
20
25
|
export declare const tokensToVNodes: (tokens: Token[], options?: TokenToVNodeOptions) => VNode[];
|
|
21
26
|
/**
|
|
22
27
|
* 将 markdown-it 的 attrs 数组转换为 Vue h 函数需要的 props 对象
|
|
23
|
-
*
|
|
28
|
+
* - 支持同一属性多次出现:`class` 以空格拼接,`style` 以分号拼接(与常见 HTML 合并语义一致)
|
|
29
|
+
* - 增加 key 参数,用于优化 Vue Diff 性能
|
|
24
30
|
*/
|
|
25
31
|
export declare const attrsToStyleAndProps: (attrs: null | TokenAttrs, extraClass?: string, key?: number | string) => Record<string, any>;
|
|
26
32
|
export declare const renderFence: (token: Token, options: TokenToVNodeOptions, key: string) => VNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/chat-x",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI,为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -41,8 +41,13 @@
|
|
|
41
41
|
"README.md"
|
|
42
42
|
],
|
|
43
43
|
"keywords": [],
|
|
44
|
-
"author": "",
|
|
44
|
+
"author": "Tencent BlueKing",
|
|
45
45
|
"license": "MIT",
|
|
46
|
+
"repository": {
|
|
47
|
+
"type": "git",
|
|
48
|
+
"url": "https://github.com/TencentBlueKing/bk-aidev-agent.git",
|
|
49
|
+
"directory": "src/frontend/ai-blueking/packages/chat-x"
|
|
50
|
+
},
|
|
46
51
|
"dependencies": {
|
|
47
52
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
48
53
|
"bkui-vue": "2.0.2-beta.81",
|
|
@@ -57,7 +62,9 @@
|
|
|
57
62
|
"markdown-it-sup": "^2.0.0",
|
|
58
63
|
"markdown-it-task-checkbox": "^1.0.6",
|
|
59
64
|
"mermaid": "^11.12.2",
|
|
65
|
+
"tippy.js": "^6.3.7",
|
|
60
66
|
"vue": "^3.5.24",
|
|
67
|
+
"vue-tippy": "^6.7.1",
|
|
61
68
|
"zod": "^4.3.6"
|
|
62
69
|
},
|
|
63
70
|
"devDependencies": {
|
|
@@ -88,7 +95,6 @@
|
|
|
88
95
|
"vite-bundle-analyzer": "^1.3.2",
|
|
89
96
|
"vitepress": "2.0.0-alpha.16",
|
|
90
97
|
"vitest": "^4.0.18",
|
|
91
|
-
"vue-tippy": "^6.7.1",
|
|
92
98
|
"vue-tsc": "^3.1.4"
|
|
93
99
|
}
|
|
94
100
|
}
|
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
<!-- AI SUMMARY -->
|
|
2
|
-
## 快速了解
|
|
3
|
-
|
|
4
|
-
汇总 MessageRole、MessageStatus、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
|
-
Pending = 'pending',
|
|
60
|
-
Streaming = 'streaming',
|
|
61
|
-
Complete = 'complete',
|
|
62
|
-
Error = 'error',
|
|
63
|
-
Stop = 'stop',
|
|
64
|
-
Disabled = 'disabled',
|
|
65
|
-
}
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
### MessageContentType
|
|
69
|
-
|
|
70
|
-
消息内容类型枚举:
|
|
71
|
-
|
|
72
|
-
```typescript
|
|
73
|
-
enum MessageContentType {
|
|
74
|
-
Binary = 'binary',
|
|
75
|
-
Function = 'function',
|
|
76
|
-
KeyValue = 'key-value',
|
|
77
|
-
KnowledgeRag = 'knowledge-rag',
|
|
78
|
-
Other = 'other',
|
|
79
|
-
ReferenceDocument = 'reference-document',
|
|
80
|
-
Text = 'text',
|
|
81
|
-
}
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
### MessageToolsStatus
|
|
85
|
-
|
|
86
|
-
消息工具栏状态枚举:
|
|
87
|
-
|
|
88
|
-
```typescript
|
|
89
|
-
enum MessageToolsStatus {
|
|
90
|
-
Disabled = 'disabled', // 禁用状态,按钮显示但不可点击
|
|
91
|
-
Hidden = 'hidden', // 隐藏状态,工具栏完全隐藏
|
|
92
|
-
}
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
## 输入状态
|
|
96
|
-
|
|
97
|
-
### MessageState
|
|
98
|
-
|
|
99
|
-
输入框消息状态:
|
|
100
|
-
|
|
101
|
-
```typescript
|
|
102
|
-
const MessageState = {
|
|
103
|
-
ACTIVE: 'active',
|
|
104
|
-
DISABLED: 'disabled',
|
|
105
|
-
LOADING: 'loading',
|
|
106
|
-
} as const;
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Z-Index 常量
|
|
110
|
-
|
|
111
|
-
```typescript
|
|
112
|
-
// 全局 chat-x 组件 Z-Index
|
|
113
|
-
const CHAT_Z_INDEX = 9999;
|
|
114
|
-
|
|
115
|
-
// 编辑器组件 Z-Index
|
|
116
|
-
const EDITOR_Z_INDEX = 10000;
|
|
117
|
-
|
|
118
|
-
// 编辑器菜单 Z-Index
|
|
119
|
-
const EDITOR_MENU_Z_INDEX = 10001;
|
|
120
|
-
|
|
121
|
-
// 快捷指令菜单 Z-Index
|
|
122
|
-
const SHORTCUT_MENU_Z_INDEX = 10002;
|
|
123
|
-
|
|
124
|
-
// 划选弹窗 Z-Index
|
|
125
|
-
const SELECTION_Z_INDEX = 10003;
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
## 默认工具按钮
|
|
129
|
-
|
|
130
|
-
### CONST_MESSAGE_TOOLS
|
|
131
|
-
|
|
132
|
-
消息工具按钮列表:
|
|
133
|
-
|
|
134
|
-
```typescript
|
|
135
|
-
const CONST_MESSAGE_TOOLS: IToolBtn[] = [
|
|
136
|
-
{ id: 'copy', name: '复制', description: '复制' },
|
|
137
|
-
{ id: 'cite', name: '引用', description: '引用' },
|
|
138
|
-
{ id: 'rebuild', name: '重新生成', description: '重新生成' },
|
|
139
|
-
{ id: 'share', name: '分享', description: '分享' },
|
|
140
|
-
];
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### CONST_USER_MESSAGE_TOOLS
|
|
144
|
-
|
|
145
|
-
用户消息工具按钮列表:
|
|
146
|
-
|
|
147
|
-
```typescript
|
|
148
|
-
const CONST_USER_MESSAGE_TOOLS: IToolBtn[] = [
|
|
149
|
-
{ id: 'copy', name: '复制', description: '复制' },
|
|
150
|
-
{ id: 'cite', name: '引用', description: '引用' },
|
|
151
|
-
{ id: 'edit', name: '编辑', description: '编辑' },
|
|
152
|
-
{ id: 'delete', name: '删除', description: '删除' },
|
|
153
|
-
];
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### CONST_UPDATE_TOOLS
|
|
157
|
-
|
|
158
|
-
更新工具按钮列表(点赞/不满意):
|
|
159
|
-
|
|
160
|
-
```typescript
|
|
161
|
-
const CONST_UPDATE_TOOLS: IToolBtn[] = [
|
|
162
|
-
{ id: 'like', name: '点赞', description: '点赞' },
|
|
163
|
-
{ id: 'unlike', name: '不满意', description: '不满意' },
|
|
164
|
-
{ id: 'delete', name: '删除', description: '删除' },
|
|
165
|
-
];
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
## 默认快捷指令
|
|
169
|
-
|
|
170
|
-
### DEFAULT_SHORTCUTS
|
|
171
|
-
|
|
172
|
-
默认快捷指令列表:
|
|
173
|
-
|
|
174
|
-
```typescript
|
|
175
|
-
const DEFAULT_SHORTCUTS: Shortcut[] = [{ id: 'ask-whale', name: '问问小鲸' }];
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
## 使用示例
|
|
179
|
-
|
|
180
|
-
```typescript
|
|
181
|
-
import {
|
|
182
|
-
MessageRole,
|
|
183
|
-
MessageStatus,
|
|
184
|
-
MessageContentType,
|
|
185
|
-
MessageToolsStatus,
|
|
186
|
-
CHAT_Z_INDEX,
|
|
187
|
-
CONST_MESSAGE_TOOLS,
|
|
188
|
-
DEFAULT_SHORTCUTS,
|
|
189
|
-
} from '@blueking/chat-x';
|
|
190
|
-
|
|
191
|
-
// 创建消息
|
|
192
|
-
const message = {
|
|
193
|
-
id: '1',
|
|
194
|
-
messageId: 1,
|
|
195
|
-
role: MessageRole.User,
|
|
196
|
-
content: '你好',
|
|
197
|
-
status: MessageStatus.Complete,
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
// 检查消息状态
|
|
201
|
-
if (message.status === MessageStatus.Streaming) {
|
|
202
|
-
console.log('消息正在流式输出中...');
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
// 使用默认工具按钮
|
|
206
|
-
console.log(
|
|
207
|
-
'可用工具:',
|
|
208
|
-
CONST_MESSAGE_TOOLS.map(t => t.name),
|
|
209
|
-
);
|
|
210
|
-
```
|
|
211
|
-
|
|
212
|
-
## 关联组件
|
|
213
|
-
|
|
214
|
-
- [MessageTools](../components/molecular/message-tools.md) — 消息工具栏
|
|
215
|
-
- [ChatInput](../components/molecular/chat-input.md) — 输入与状态
|
|
216
|
-
- [MessageContainer](../components/molecular/message-container.md) — 工具与消息展示
|
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
<!-- AI SUMMARY -->
|
|
2
|
-
## 快速了解
|
|
3
|
-
|
|
4
|
-
markdownItLatex 为 markdown-it 插件,解析 $...$、$$...$$、\\(...\\)、\\[...\\] 为 math_inline / math_block token,可选 LatexOption.replaceAlignStart。 不负责渲染,KaTeX 在 LatexContent 中异步渲染。与 Markdown 管道、ContentRender 中的公式展示链路配合。
|
|
5
|
-
|
|
6
|
-
### 关联组件
|
|
7
|
-
- **latex-content** — 消费 math token 并 KaTeX 渲染
|
|
8
|
-
- **markdown-content** — Markdown 渲染管线
|
|
9
|
-
- **content-render** — 消息内容统一渲染入口
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
<!-- FULL DOC -->
|
|
13
|
-
|
|
14
|
-
# markdownItLatex LaTeX 解析插件
|
|
15
|
-
|
|
16
|
-
> **分类**:plugin
|
|
17
|
-
|
|
18
|
-
Markdown-it LaTeX 解析插件,用于解析 LaTeX 数学公式语法。
|
|
19
|
-
|
|
20
|
-
## 功能说明
|
|
21
|
-
|
|
22
|
-
此插件只负责解析 LaTeX 语法,将其转换为 `math_inline` 和 `math_block` token。实际的 KaTeX 渲染在 `LatexContent` 组件中完成。
|
|
23
|
-
|
|
24
|
-
## 支持的语法
|
|
25
|
-
|
|
26
|
-
| 语法 | 类型 | 示例 |
|
|
27
|
-
| --------- | -------- | ---------------------- |
|
|
28
|
-
| `$...$` | 行内公式 | `$E = mc^2$` |
|
|
29
|
-
| `$$...$$` | 块级公式 | `$$\sum_{i=1}^{n} i$$` |
|
|
30
|
-
| `\(...\)` | 行内公式 | `\(E = mc^2\)` |
|
|
31
|
-
| `\[...\]` | 块级公式 | `\[\sum_{i=1}^{n} i\]` |
|
|
32
|
-
|
|
33
|
-
## 基础用法
|
|
34
|
-
|
|
35
|
-
```typescript
|
|
36
|
-
import MarkdownIt from 'markdown-it';
|
|
37
|
-
import { markdownItLatex } from '@blueking/chat-x';
|
|
38
|
-
|
|
39
|
-
const md = new MarkdownIt().use(markdownItLatex);
|
|
40
|
-
|
|
41
|
-
// 解析包含 LaTeX 的 Markdown
|
|
42
|
-
const tokens = md.parse(`
|
|
43
|
-
行内公式:$E = mc^2$
|
|
44
|
-
|
|
45
|
-
块级公式:
|
|
46
|
-
|
|
47
|
-
$$
|
|
48
|
-
\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
|
|
49
|
-
$$
|
|
50
|
-
`);
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## 配置选项
|
|
54
|
-
|
|
55
|
-
```typescript
|
|
56
|
-
import MarkdownIt from 'markdown-it';
|
|
57
|
-
import { markdownItLatex, type LatexOption } from '@blueking/chat-x';
|
|
58
|
-
|
|
59
|
-
const options: LatexOption = {
|
|
60
|
-
replaceAlignStart: true, // 将 align* 替换为 aligned(KaTeX 不支持 align*)
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
const md = new MarkdownIt().use(markdownItLatex, options);
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### 配置项
|
|
67
|
-
|
|
68
|
-
| 属性名 | 类型 | 默认值 | 说明 |
|
|
69
|
-
| ----------------- | --------- | ------ | -------------------------------- |
|
|
70
|
-
| replaceAlignStart | `boolean` | `true` | 是否将 `align*` 替换为 `aligned` |
|
|
71
|
-
|
|
72
|
-
## Token 类型
|
|
73
|
-
|
|
74
|
-
插件会生成以下两种 token:
|
|
75
|
-
|
|
76
|
-
### math_inline
|
|
77
|
-
|
|
78
|
-
行内数学公式 token:
|
|
79
|
-
|
|
80
|
-
```typescript
|
|
81
|
-
{
|
|
82
|
-
type: 'math_inline',
|
|
83
|
-
tag: 'math',
|
|
84
|
-
content: 'E = mc^2',
|
|
85
|
-
markup: '$',
|
|
86
|
-
meta: { displayMode: false }
|
|
87
|
-
}
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### math_block
|
|
91
|
-
|
|
92
|
-
块级数学公式 token:
|
|
93
|
-
|
|
94
|
-
```typescript
|
|
95
|
-
{
|
|
96
|
-
type: 'math_block',
|
|
97
|
-
tag: 'math',
|
|
98
|
-
content: '\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}',
|
|
99
|
-
markup: '$$',
|
|
100
|
-
block: true,
|
|
101
|
-
map: [startLine, endLine]
|
|
102
|
-
}
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
## 公式示例
|
|
106
|
-
|
|
107
|
-
### 基础公式
|
|
108
|
-
|
|
109
|
-
```markdown
|
|
110
|
-
行内公式:$E = mc^2$
|
|
111
|
-
|
|
112
|
-
块级公式:
|
|
113
|
-
|
|
114
|
-
$$
|
|
115
|
-
E = mc^2
|
|
116
|
-
$$
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
### 复杂公式
|
|
120
|
-
|
|
121
|
-
```markdown
|
|
122
|
-
$$
|
|
123
|
-
\\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
|
|
124
|
-
$$
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### 矩阵
|
|
128
|
-
|
|
129
|
-
```markdown
|
|
130
|
-
$$
|
|
131
|
-
\\begin{pmatrix}
|
|
132
|
-
a & b \\\\
|
|
133
|
-
c & d
|
|
134
|
-
\\end{pmatrix}
|
|
135
|
-
$$
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
### 多行公式
|
|
139
|
-
|
|
140
|
-
```markdown
|
|
141
|
-
$$
|
|
142
|
-
\\begin{aligned}
|
|
143
|
-
f(x) &= x^2 + 2x + 1 \\\\
|
|
144
|
-
&= (x + 1)^2
|
|
145
|
-
\\end{aligned}
|
|
146
|
-
$$
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
## 转义处理
|
|
150
|
-
|
|
151
|
-
插件会正确处理转义的分隔符:
|
|
152
|
-
|
|
153
|
-
```markdown
|
|
154
|
-
这不是公式:\$100
|
|
155
|
-
|
|
156
|
-
这是公式:$x = 100$
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
## 与 KaTeX 配合
|
|
160
|
-
|
|
161
|
-
渲染由 `LatexContent` 组件完成,使用 KaTeX 库:
|
|
162
|
-
|
|
163
|
-
```vue
|
|
164
|
-
<template>
|
|
165
|
-
<LatexContent :token="latexTokens" />
|
|
166
|
-
</template>
|
|
167
|
-
|
|
168
|
-
<script setup lang="ts">
|
|
169
|
-
import { LatexContent } from '@blueking/chat-x';
|
|
170
|
-
|
|
171
|
-
// latexTokens 是包含 math_inline 或 math_block 的 token 数组
|
|
172
|
-
</script>
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
## KaTeX 支持说明
|
|
176
|
-
|
|
177
|
-
KaTeX 支持的功能:
|
|
178
|
-
|
|
179
|
-
- 大多数 LaTeX 数学符号
|
|
180
|
-
- 分数、根号、指数
|
|
181
|
-
- 矩阵和数组
|
|
182
|
-
- 括号和分隔符
|
|
183
|
-
- 希腊字母和运算符
|
|
184
|
-
- 上下标和大型运算符
|
|
185
|
-
|
|
186
|
-
KaTeX 限制:
|
|
187
|
-
|
|
188
|
-
- 不支持 `align*` 环境(插件会自动替换为 `aligned`)
|
|
189
|
-
- 部分 LaTeX 宏不支持
|
|
190
|
-
|
|
191
|
-
## 使用场景
|
|
192
|
-
|
|
193
|
-
- AI 数学问答
|
|
194
|
-
- 技术文档展示
|
|
195
|
-
- 教育类应用
|
|
196
|
-
- 科学计算结果展示
|
|
197
|
-
|
|
198
|
-
## 注意事项
|
|
199
|
-
|
|
200
|
-
1. **双反斜杠**:在 JavaScript 字符串中,`\` 需要写成 `\\`
|
|
201
|
-
2. **环境支持**:建议使用 `aligned` 替代 `align*`
|
|
202
|
-
3. **性能考虑**:KaTeX 渲染在组件中异步进行,避免阻塞主线程
|
|
203
|
-
|
|
204
|
-
## 关联组件
|
|
205
|
-
|
|
206
|
-
- [LatexContent](../components/atomic/latex-content.md) — KaTeX 渲染
|
|
207
|
-
- [MarkdownContent](../components/atomic/markdown-content.md) — Markdown 内容
|
|
208
|
-
- [ContentRender](../components/molecular/content-render.md) — 内容渲染
|