@blueking/chat-x 0.0.14 → 0.0.16-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 → README.md} +0 -20
- package/dist/composables/index.d.ts +1 -0
- package/dist/composables/use-theme.d.ts +15 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1679 -1477
- package/dist/index.js.map +1 -1
- package/dist/mcp/generated/docs/chat-container.md +45 -12
- package/dist/mcp/generated/docs/use-theme.md +148 -0
- package/dist/mcp/generated/index.json +15 -1
- package/dist/styles/theme-tokens.d.ts +161 -0
- package/package.json +4 -3
|
@@ -45,9 +45,10 @@ ai-chat-container
|
|
|
45
45
|
├── MessageContainer（有消息时）
|
|
46
46
|
│ └── 消息列表 + 工具栏
|
|
47
47
|
├── 欢迎页（无消息时）
|
|
48
|
-
│
|
|
49
|
-
│
|
|
50
|
-
│
|
|
48
|
+
│ └── welcome 插槽（默认内容：）
|
|
49
|
+
│ ├── AIBluekingBannerIcon
|
|
50
|
+
│ ├── 欢迎标题
|
|
51
|
+
│ └── 开场白 ContentRender
|
|
51
52
|
├── SelectionFooter（分享模式时）
|
|
52
53
|
├── ShortcutRender（有快捷指令时）
|
|
53
54
|
└── ChatInput（默认状态）
|
|
@@ -227,7 +228,7 @@ ai-chat-container
|
|
|
227
228
|
</template>
|
|
228
229
|
```
|
|
229
230
|
|
|
230
|
-
> **注意**：使用 `welcome` 插槽后，默认的 `openingRemark`
|
|
231
|
+
> **注意**：使用 `welcome` 插槽后，默认的 Banner 图标、欢迎标题和 `openingRemark` 渲染将被完全替换，需要自行处理全部欢迎页内容。
|
|
231
232
|
|
|
232
233
|
**渲染效果**
|
|
233
234
|
|
|
@@ -286,6 +287,37 @@ ai-chat-container
|
|
|
286
287
|
3. 底部 `SelectionFooter` 提供全选、取消、确认操作
|
|
287
288
|
4. 确认后触发 `confirmShare` 事件，携带选中的消息列表
|
|
288
289
|
|
|
290
|
+
## 主题切换
|
|
291
|
+
|
|
292
|
+
通过 `theme` prop 切换深色/浅色主题。`light` 为默认浅色模式，`dark` 为深色模式，也可传入自定义主题标识：
|
|
293
|
+
|
|
294
|
+
```vue
|
|
295
|
+
<template>
|
|
296
|
+
<ChatContainer
|
|
297
|
+
v-model="inputValue"
|
|
298
|
+
:messages="messages"
|
|
299
|
+
:message-status="messageStatus"
|
|
300
|
+
theme="dark"
|
|
301
|
+
:on-send-message="handleSendMessage"
|
|
302
|
+
/>
|
|
303
|
+
</template>
|
|
304
|
+
|
|
305
|
+
<script setup lang="ts">
|
|
306
|
+
import { ref } from 'vue';
|
|
307
|
+
import { ChatContainer } from '@blueking/chat-x';
|
|
308
|
+
|
|
309
|
+
const inputValue = ref('');
|
|
310
|
+
const messages = ref([]);
|
|
311
|
+
const messageStatus = ref('complete');
|
|
312
|
+
|
|
313
|
+
const handleSendMessage = async (content: string) => {
|
|
314
|
+
console.log('发送消息:', content);
|
|
315
|
+
};
|
|
316
|
+
</script>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
组件内部通过 `data-theme` 属性控制主题，`light` 时不设置该属性，其他值会设置 `data-theme="<theme>"`。配合 CSS 变量 token 体系实现主题样式切换，详见 [主题配置](../../theme/theme.md)。
|
|
320
|
+
|
|
289
321
|
## 快捷指令
|
|
290
322
|
|
|
291
323
|
通过 `v-model:selectedShortcut` 管理快捷指令选中状态：
|
|
@@ -326,13 +358,14 @@ ai-chat-container
|
|
|
326
358
|
|
|
327
359
|
ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`（排除 `enableSelection` 和 `messageGroups`），另外新增：
|
|
328
360
|
|
|
329
|
-
| 属性名 | 类型
|
|
330
|
-
| ------------------ |
|
|
331
|
-
| chatLoading | `boolean`
|
|
332
|
-
| commonTippyOptions | `AITippyProps`
|
|
333
|
-
| openingRemark | `string`
|
|
334
|
-
| placement | `'left' \| 'right'`
|
|
335
|
-
|
|
|
361
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
362
|
+
| ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------------ |
|
|
363
|
+
| chatLoading | `boolean` | — | 整体加载状态，`true` 时显示 Loading 遮罩 |
|
|
364
|
+
| commonTippyOptions | `AITippyProps` | — | 通用 Tippy 配置，传入的选项会注入到所有使用 `v-overflow-tips` 的子组件中 |
|
|
365
|
+
| openingRemark | `string` | — | 开场白，无消息时显示，支持 Markdown |
|
|
366
|
+
| placement | `'left' \| 'right'` | `'left'` | 侧边栏位置 |
|
|
367
|
+
| theme | `'dark' \| 'light' \| (string & {})` | `'light'` | 主题模式，`light` 为浅色，`dark` 为深色，也可传自定义主题标识 |
|
|
368
|
+
| onCustomTabChange | `(tab: CustomTab) => Promise<any>` | — | 自定义 Tab 切换回调，返回值作为 Tab 组件 props |
|
|
336
369
|
|
|
337
370
|
> 完整 Props 列表请参考 [ChatInput](./chat-input.md) 和 [MessageContainer](./message-container.md) 文档。
|
|
338
371
|
|
|
@@ -363,7 +396,7 @@ ChatContainer 的 Props 继承自 `ChatInputProps` 和 `MessageContainerProps`
|
|
|
363
396
|
| codeHeader | `{ language: string; token: Token[] }` | 代码块头部自定义操作区域，透传给 MessageRender → ContentRender → MarkdownContent → CodeContent |
|
|
364
397
|
| default | 消息列表相关绑定（messages 等） | 自定义消息列表区域 |
|
|
365
398
|
| message | `{ message, messageToolsStatus }` | 自定义单条消息渲染 |
|
|
366
|
-
| welcome | `{ openingRemark: string }` | 自定义欢迎页内容，替换默认的
|
|
399
|
+
| welcome | `{ openingRemark: string }` | 自定义欢迎页内容，替换默认的 Banner、标题和开场白渲染，无消息时显示 |
|
|
367
400
|
|
|
368
401
|
### Expose
|
|
369
402
|
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
<!-- AI SUMMARY -->
|
|
2
|
+
## 快速了解
|
|
3
|
+
|
|
4
|
+
useTheme 返回 { theme, setTheme, toggleTheme }。通过 watchEffect 在目标元素上设置/移除 data-theme 属性。 light 模式时移除属性，其他主题值设置对应属性。支持自定义 target 元素和 defaultTheme。 ChatContainer 内部通过 theme prop 驱动，也可在业务层独立使用实现全局/局部主题切换。
|
|
5
|
+
|
|
6
|
+
### 关联组件
|
|
7
|
+
- **chat-container** — ChatContainer 通过 theme prop 结合此 composable 驱动主题
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
<!-- FULL DOC -->
|
|
11
|
+
|
|
12
|
+
# useTheme 主题切换
|
|
13
|
+
|
|
14
|
+
> **分类**：composable
|
|
15
|
+
|
|
16
|
+
主题切换组合式函数。管理 light/dark 或自定义主题状态，自动在目标元素上设置 `data-theme` 属性，配合 CSS 变量 token 体系实现主题样式切换。
|
|
17
|
+
|
|
18
|
+
## 工作原理
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
useTheme(options?)
|
|
22
|
+
│
|
|
23
|
+
├── theme = ref(defaultTheme ?? 'light')
|
|
24
|
+
│
|
|
25
|
+
└── watchEffect
|
|
26
|
+
├── light → el.removeAttribute('data-theme')
|
|
27
|
+
└── other → el.setAttribute('data-theme', theme.value)
|
|
28
|
+
|
|
29
|
+
目标元素：options.target?.value ?? document.documentElement
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
> CSS 变量通过 `[data-theme="dark"]` 选择器切换，`light` 作为默认主题无需 `data-theme` 属性。
|
|
33
|
+
|
|
34
|
+
## 基础用法
|
|
35
|
+
|
|
36
|
+
```vue
|
|
37
|
+
<template>
|
|
38
|
+
<button @click="toggleTheme">当前主题: {{ theme }}（点击切换）</button>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<script setup lang="ts">
|
|
42
|
+
import { useTheme } from '@blueking/chat-x';
|
|
43
|
+
|
|
44
|
+
const { theme, toggleTheme } = useTheme();
|
|
45
|
+
</script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## 指定目标元素
|
|
49
|
+
|
|
50
|
+
通过 `target` 选项可以将主题属性设置在指定元素上，而非 `document.documentElement`：
|
|
51
|
+
|
|
52
|
+
```vue
|
|
53
|
+
<template>
|
|
54
|
+
<div ref="containerRef">
|
|
55
|
+
<button @click="toggleTheme">局部切换: {{ theme }}</button>
|
|
56
|
+
<!-- 该 div 上会设置 data-theme -->
|
|
57
|
+
</div>
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script setup lang="ts">
|
|
61
|
+
import { useTemplateRef } from 'vue';
|
|
62
|
+
import { useTheme } from '@blueking/chat-x';
|
|
63
|
+
|
|
64
|
+
const containerRef = useTemplateRef<HTMLElement>('containerRef');
|
|
65
|
+
const { theme, toggleTheme } = useTheme({ target: containerRef });
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 与 ChatContainer 配合
|
|
70
|
+
|
|
71
|
+
`ChatContainer` 通过 `theme` prop 在根元素上设置 `data-theme` 属性，效果等同于 `useTheme`：
|
|
72
|
+
|
|
73
|
+
```vue
|
|
74
|
+
<template>
|
|
75
|
+
<ChatContainer
|
|
76
|
+
v-model="inputValue"
|
|
77
|
+
:messages="messages"
|
|
78
|
+
:message-status="messageStatus"
|
|
79
|
+
:theme="currentTheme"
|
|
80
|
+
:on-send-message="handleSendMessage"
|
|
81
|
+
/>
|
|
82
|
+
<button @click="toggleTheme">切换主题</button>
|
|
83
|
+
</template>
|
|
84
|
+
|
|
85
|
+
<script setup lang="ts">
|
|
86
|
+
import { ref } from 'vue';
|
|
87
|
+
import { ChatContainer, useTheme } from '@blueking/chat-x';
|
|
88
|
+
|
|
89
|
+
const { theme: currentTheme, toggleTheme } = useTheme();
|
|
90
|
+
|
|
91
|
+
const inputValue = ref('');
|
|
92
|
+
const messages = ref([]);
|
|
93
|
+
const messageStatus = ref('complete');
|
|
94
|
+
const handleSendMessage = async (content: string) => {};
|
|
95
|
+
</script>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## API
|
|
99
|
+
|
|
100
|
+
### 参数
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
function useTheme(options?: UseThemeOptions): UseThemeReturn;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
**UseThemeOptions：**
|
|
107
|
+
|
|
108
|
+
| 属性名 | 类型 | 默认值 | 说明 |
|
|
109
|
+
| ------------ | -------------------------- | --------- | ----------------------------------------- |
|
|
110
|
+
| defaultTheme | `ThemeName` | `'light'` | 初始主题 |
|
|
111
|
+
| target | `Ref<HTMLElement \| null>` | — | 目标元素，默认 `document.documentElement` |
|
|
112
|
+
|
|
113
|
+
### 返回值
|
|
114
|
+
|
|
115
|
+
| 属性名 | 类型 | 说明 |
|
|
116
|
+
| ----------- | --------------------------- | ----------------------------- |
|
|
117
|
+
| theme | `Ref<ThemeName>` | 当前主题名称 |
|
|
118
|
+
| setTheme | `(name: ThemeName) => void` | 设置主题 |
|
|
119
|
+
| toggleTheme | `() => void` | 在 `light` 和 `dark` 之间切换 |
|
|
120
|
+
|
|
121
|
+
### 类型定义
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
type ThemeName = 'dark' | 'light' | (string & {});
|
|
125
|
+
|
|
126
|
+
interface UseThemeOptions {
|
|
127
|
+
defaultTheme?: ThemeName;
|
|
128
|
+
target?: Ref<HTMLElement | null>;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
interface UseThemeReturn {
|
|
132
|
+
theme: Ref<ThemeName>;
|
|
133
|
+
setTheme: (name: ThemeName) => void;
|
|
134
|
+
toggleTheme: () => void;
|
|
135
|
+
}
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## 注意事项
|
|
139
|
+
|
|
140
|
+
1. **light 模式不设置属性**：`theme === 'light'` 时移除 `data-theme`，CSS 变量走默认（无选择器）值
|
|
141
|
+
2. **toggleTheme 仅切换 light/dark**：如果当前主题为自定义值，`toggleTheme` 会切换到 `light`
|
|
142
|
+
3. **target 为 null 时跳过**：`watchEffect` 中如果 `target.value` 为 `null`，不会执行任何 DOM 操作
|
|
143
|
+
4. **与 ChatContainer 互补**：`ChatContainer` 内部直接通过 `:data-theme` 绑定 prop，不使用此 composable；业务层可通过此 composable 管理全局主题状态后将 `theme` 传给 `ChatContainer`
|
|
144
|
+
|
|
145
|
+
## 关联组件
|
|
146
|
+
|
|
147
|
+
- [ChatContainer](../components/molecular/chat-container.md) — 通过 `theme` prop 驱动容器主题
|
|
148
|
+
- [主题配置](../theme/theme.md) — CSS 变量 token 体系与主题定制
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "2.0.0",
|
|
3
|
-
"generatedAt": "2026-04-
|
|
3
|
+
"generatedAt": "2026-04-01T03:42:13.629Z",
|
|
4
4
|
"domains": {
|
|
5
5
|
"message": {
|
|
6
6
|
"label": "消息展示",
|
|
@@ -1126,6 +1126,20 @@
|
|
|
1126
1126
|
"aiSummary": "useParentScrolling(domRef) 在挂载后通过 getScrollParent 找到最近可滚动祖先，监听 scroll 与 scrollend，返回 isScrolling 与 scrollParent。 scroll 时将 isScrolling 置 true，300ms 无滚动或 scrollend 时置 false，适合滚动时隐藏浮层等交互。getScrollParent 可单独导出使用。 当前源码无组件内引用，供业务或后续浮层组件按需集成。",
|
|
1127
1127
|
"relatedComponents": [],
|
|
1128
1128
|
"docFile": "docs/use-parent-scrolling.md"
|
|
1129
|
+
},
|
|
1130
|
+
{
|
|
1131
|
+
"name": "useTheme",
|
|
1132
|
+
"slug": "use-theme",
|
|
1133
|
+
"category": "composable",
|
|
1134
|
+
"description": "主题切换组合式函数。管理 light/dark 或自定义主题状态，自动在目标元素上设置 data-theme 属性，配合 CSS 变量 token 体系实现主题样式切换。",
|
|
1135
|
+
"aiSummary": "useTheme 返回 { theme, setTheme, toggleTheme }。通过 watchEffect 在目标元素上设置/移除 data-theme 属性。 light 模式时移除属性，其他主题值设置对应属性。支持自定义 target 元素和 defaultTheme。 ChatContainer 内部通过 theme prop 驱动，也可在业务层独立使用实现全局/局部主题切换。",
|
|
1136
|
+
"relatedComponents": [
|
|
1137
|
+
{
|
|
1138
|
+
"slug": "chat-container",
|
|
1139
|
+
"relation": "ChatContainer 通过 theme prop 结合此 composable 驱动主题"
|
|
1140
|
+
}
|
|
1141
|
+
],
|
|
1142
|
+
"docFile": "docs/use-theme.md"
|
|
1129
1143
|
}
|
|
1130
1144
|
],
|
|
1131
1145
|
"types": [
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
export declare const THEME_LIGHT: "light";
|
|
2
|
+
export declare const THEME_DARK: "dark";
|
|
3
|
+
export declare const themeTokens: {
|
|
4
|
+
readonly light: {
|
|
5
|
+
readonly '--chat-x-text-inverse': "#000000";
|
|
6
|
+
readonly '--chat-x-text-strong': "#313238";
|
|
7
|
+
readonly '--chat-x-text-default': "#4d4f56";
|
|
8
|
+
readonly '--chat-x-text-weak': "#979ba5";
|
|
9
|
+
readonly '--chat-x-text-disabled': "#c4c6cc";
|
|
10
|
+
readonly '--chat-x-text-white': "#ffffff";
|
|
11
|
+
readonly '--chat-x-bg-default': "#f5f7fa";
|
|
12
|
+
readonly '--chat-x-bg-light': "#fafbfd";
|
|
13
|
+
readonly '--chat-x-bg-surface': "#ffffff";
|
|
14
|
+
readonly '--chat-x-bg-hover': "#f5f7fa";
|
|
15
|
+
readonly '--chat-x-border-heavy': "#dcdee5";
|
|
16
|
+
readonly '--chat-x-border-default': "#eaebf0";
|
|
17
|
+
readonly '--chat-x-border-light': "#f0f1f5";
|
|
18
|
+
readonly '--chat-x-brand-1': "#1768ef";
|
|
19
|
+
readonly '--chat-x-brand-primary': "#3a84ff";
|
|
20
|
+
readonly '--chat-x-brand-3': "#699df4";
|
|
21
|
+
readonly '--chat-x-brand-4': "#a3c5fd";
|
|
22
|
+
readonly '--chat-x-brand-5': "#cddffe";
|
|
23
|
+
readonly '--chat-x-brand-6': "#e1ecff";
|
|
24
|
+
readonly '--chat-x-brand-7': "#f0f5ff";
|
|
25
|
+
readonly '--chat-x-brand-gradient': "#6cbaff";
|
|
26
|
+
readonly '--chat-x-success-1': "#299e56";
|
|
27
|
+
readonly '--chat-x-success': "#2caf5e";
|
|
28
|
+
readonly '--chat-x-success-3': "#65c389";
|
|
29
|
+
readonly '--chat-x-success-4': "#a1e3ba";
|
|
30
|
+
readonly '--chat-x-success-5': "#cbf0da";
|
|
31
|
+
readonly '--chat-x-success-6': "#daf6e5";
|
|
32
|
+
readonly '--chat-x-success-bg': "#ebfaf0";
|
|
33
|
+
readonly '--chat-x-warning-1': "#e38b02";
|
|
34
|
+
readonly '--chat-x-warning': "#f59500";
|
|
35
|
+
readonly '--chat-x-warning-3': "#f8b64f";
|
|
36
|
+
readonly '--chat-x-warning-4': "#f9d090";
|
|
37
|
+
readonly '--chat-x-warning-5': "#fce5c0";
|
|
38
|
+
readonly '--chat-x-warning-bg': "#fdeed8";
|
|
39
|
+
readonly '--chat-x-warning-7': "#fdf4e8";
|
|
40
|
+
readonly '--chat-x-danger-1': "#e71818";
|
|
41
|
+
readonly '--chat-x-danger': "#ea3636";
|
|
42
|
+
readonly '--chat-x-danger-3': "#ff5656";
|
|
43
|
+
readonly '--chat-x-danger-4': "#f8b4b4";
|
|
44
|
+
readonly '--chat-x-danger-5': "#ffdddd";
|
|
45
|
+
readonly '--chat-x-danger-6': "#ffebeb";
|
|
46
|
+
readonly '--chat-x-danger-bg': "#fff0f0";
|
|
47
|
+
readonly '--chat-x-overlay-heavy': "rgba(0, 0, 0, 0.6)";
|
|
48
|
+
readonly '--chat-x-overlay-default': "rgba(0, 0, 0, 0.5)";
|
|
49
|
+
readonly '--chat-x-overlay-light': "rgba(0, 0, 0, 0.2)";
|
|
50
|
+
readonly '--chat-x-overlay-highlight': "rgba(255, 255, 255, 0.2)";
|
|
51
|
+
readonly '--chat-x-loading-start': "#235dfa";
|
|
52
|
+
readonly '--chat-x-loading-mid': "#8a77ec";
|
|
53
|
+
readonly '--chat-x-loading-end': "#eb8cec";
|
|
54
|
+
readonly '--chat-x-toolcall-pending-bg': "#fafbfd";
|
|
55
|
+
readonly '--chat-x-toolcall-pending-border': "#dcdee5";
|
|
56
|
+
readonly '--chat-x-tooltip-bg': "#333333";
|
|
57
|
+
readonly '--chat-x-tooltip-text': "#ffffff";
|
|
58
|
+
readonly '--chat-x-shadow-sm': "0 2px 6px #0000001a";
|
|
59
|
+
readonly '--chat-x-shadow-md': "0 4px 12px #00000033";
|
|
60
|
+
readonly '--chat-x-code-bg': "#282c34";
|
|
61
|
+
readonly '--chat-x-code-text': "#abb2bf";
|
|
62
|
+
readonly '--chat-x-font-family': "'Microsoft YaHei', Arial, sans-serif";
|
|
63
|
+
readonly '--chat-x-font-family-code': "Consolas, Monaco, 'Courier New', monospace";
|
|
64
|
+
readonly '--chat-x-font-size-xs': "10px";
|
|
65
|
+
readonly '--chat-x-font-size-sm': "12px";
|
|
66
|
+
readonly '--chat-x-font-size-auxiliary': "13px";
|
|
67
|
+
readonly '--chat-x-font-size-md': "14px";
|
|
68
|
+
readonly '--chat-x-font-size-lg': "16px";
|
|
69
|
+
readonly '--chat-x-font-size-xl': "20px";
|
|
70
|
+
readonly '--chat-x-font-size-2xl': "24px";
|
|
71
|
+
readonly '--chat-x-font-size-3xl': "32px";
|
|
72
|
+
readonly '--chat-x-line-height-sm': "20px";
|
|
73
|
+
readonly '--chat-x-line-height-md': "22px";
|
|
74
|
+
readonly '--chat-x-line-height-lg': "24px";
|
|
75
|
+
readonly '--chat-x-line-height-xl': "32px";
|
|
76
|
+
readonly '--chat-x-line-height-2xl': "42px";
|
|
77
|
+
readonly '--chat-x-font-weight-normal': "400";
|
|
78
|
+
readonly '--chat-x-font-weight-medium': "500";
|
|
79
|
+
readonly '--chat-x-font-weight-semibold': "600";
|
|
80
|
+
readonly '--chat-x-font-weight-bold': "700";
|
|
81
|
+
};
|
|
82
|
+
readonly dark: {
|
|
83
|
+
readonly '--chat-x-text-inverse': "#ffffff";
|
|
84
|
+
readonly '--chat-x-text-strong': "#e5e8fa";
|
|
85
|
+
readonly '--chat-x-text-default': "#d3d5eb";
|
|
86
|
+
readonly '--chat-x-text-weak': "#7e84ad";
|
|
87
|
+
readonly '--chat-x-text-disabled': "#606485";
|
|
88
|
+
readonly '--chat-x-text-white': "#ffffff";
|
|
89
|
+
readonly '--chat-x-bg-default': "#0d121f";
|
|
90
|
+
readonly '--chat-x-bg-light': "#303142";
|
|
91
|
+
readonly '--chat-x-bg-surface': "#232533";
|
|
92
|
+
readonly '--chat-x-bg-hover': "#303142";
|
|
93
|
+
readonly '--chat-x-border-heavy': "#4d516b";
|
|
94
|
+
readonly '--chat-x-border-default': "#3e4152";
|
|
95
|
+
readonly '--chat-x-border-light': "#32343c";
|
|
96
|
+
readonly '--chat-x-brand-1': "#bac3ff";
|
|
97
|
+
readonly '--chat-x-brand-primary': "#7c8cff";
|
|
98
|
+
readonly '--chat-x-brand-3': "#6674d2";
|
|
99
|
+
readonly '--chat-x-brand-4': "#5b67bc";
|
|
100
|
+
readonly '--chat-x-brand-5': "#505ba5";
|
|
101
|
+
readonly '--chat-x-brand-6': "#454f8f";
|
|
102
|
+
readonly '--chat-x-brand-7': "#394379";
|
|
103
|
+
readonly '--chat-x-brand-gradient': "#6674d2";
|
|
104
|
+
readonly '--chat-x-success-1': "#22a380";
|
|
105
|
+
readonly '--chat-x-success': "#1f8e73";
|
|
106
|
+
readonly '--chat-x-success-3': "#1e806a";
|
|
107
|
+
readonly '--chat-x-success-4': "#1c7261";
|
|
108
|
+
readonly '--chat-x-success-5': "#18574f";
|
|
109
|
+
readonly '--chat-x-success-6': "#164946";
|
|
110
|
+
readonly '--chat-x-success-bg': "#153b3d";
|
|
111
|
+
readonly '--chat-x-warning-1': "#ffb646";
|
|
112
|
+
readonly '--chat-x-warning': "#db9e41";
|
|
113
|
+
readonly '--chat-x-warning-3': "#c38e3e";
|
|
114
|
+
readonly '--chat-x-warning-4': "#ab7f3b";
|
|
115
|
+
readonly '--chat-x-warning-5': "#7c5f35";
|
|
116
|
+
readonly '--chat-x-warning-bg': "#644f32";
|
|
117
|
+
readonly '--chat-x-warning-7': "#4c402f";
|
|
118
|
+
readonly '--chat-x-danger-1': "#f55858";
|
|
119
|
+
readonly '--chat-x-danger': "#d34e51";
|
|
120
|
+
readonly '--chat-x-danger-3': "#bc484c";
|
|
121
|
+
readonly '--chat-x-danger-4': "#a54247";
|
|
122
|
+
readonly '--chat-x-danger-5': "#77353d";
|
|
123
|
+
readonly '--chat-x-danger-6': "#602e38";
|
|
124
|
+
readonly '--chat-x-danger-bg': "#492833";
|
|
125
|
+
readonly '--chat-x-overlay-heavy': "rgba(0, 0, 0, 0.7)";
|
|
126
|
+
readonly '--chat-x-overlay-default': "rgba(0, 0, 0, 0.6)";
|
|
127
|
+
readonly '--chat-x-overlay-light': "rgba(255, 255, 255, 0.1)";
|
|
128
|
+
readonly '--chat-x-overlay-highlight': "rgba(255, 255, 255, 0.1)";
|
|
129
|
+
readonly '--chat-x-loading-start': "#7c8cff";
|
|
130
|
+
readonly '--chat-x-loading-mid': "#8a77ec";
|
|
131
|
+
readonly '--chat-x-loading-end': "#eb8cec";
|
|
132
|
+
readonly '--chat-x-toolcall-pending-bg': "#303142";
|
|
133
|
+
readonly '--chat-x-toolcall-pending-border': "#4d516b";
|
|
134
|
+
readonly '--chat-x-tooltip-bg': "#4d516b";
|
|
135
|
+
readonly '--chat-x-tooltip-text': "#d3d5eb";
|
|
136
|
+
readonly '--chat-x-shadow-sm': "0 2px 6px #0000004d";
|
|
137
|
+
readonly '--chat-x-shadow-md': "0 4px 12px #00000066";
|
|
138
|
+
readonly '--chat-x-code-bg': "#1a1e2e";
|
|
139
|
+
readonly '--chat-x-code-text': "#abb2bf";
|
|
140
|
+
readonly '--chat-x-font-family': "'Microsoft YaHei', Arial, sans-serif";
|
|
141
|
+
readonly '--chat-x-font-family-code': "Consolas, Monaco, 'Courier New', monospace";
|
|
142
|
+
readonly '--chat-x-font-size-xs': "10px";
|
|
143
|
+
readonly '--chat-x-font-size-sm': "12px";
|
|
144
|
+
readonly '--chat-x-font-size-auxiliary': "13px";
|
|
145
|
+
readonly '--chat-x-font-size-md': "14px";
|
|
146
|
+
readonly '--chat-x-font-size-lg': "16px";
|
|
147
|
+
readonly '--chat-x-font-size-xl': "20px";
|
|
148
|
+
readonly '--chat-x-font-size-2xl': "24px";
|
|
149
|
+
readonly '--chat-x-font-size-3xl': "32px";
|
|
150
|
+
readonly '--chat-x-line-height-sm': "20px";
|
|
151
|
+
readonly '--chat-x-line-height-md': "22px";
|
|
152
|
+
readonly '--chat-x-line-height-lg': "24px";
|
|
153
|
+
readonly '--chat-x-line-height-xl': "32px";
|
|
154
|
+
readonly '--chat-x-line-height-2xl': "42px";
|
|
155
|
+
readonly '--chat-x-font-weight-normal': "400";
|
|
156
|
+
readonly '--chat-x-font-weight-medium': "500";
|
|
157
|
+
readonly '--chat-x-font-weight-semibold': "600";
|
|
158
|
+
readonly '--chat-x-font-weight-bold': "700";
|
|
159
|
+
};
|
|
160
|
+
};
|
|
161
|
+
export type ThemeTokenKey = keyof (typeof themeTokens)['light'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueking/chat-x",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16-beta.1",
|
|
4
4
|
"description": "蓝鲸智云 AI Chat 组件库 —— 遵循 AG-UI，为 AI Agent 和人类开发者共同设计的对话 UI 组件库。",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -38,9 +38,8 @@
|
|
|
38
38
|
"types": "dist/index.d.ts",
|
|
39
39
|
"files": [
|
|
40
40
|
"dist",
|
|
41
|
-
"
|
|
41
|
+
"README.md"
|
|
42
42
|
],
|
|
43
|
-
"readme": "readme.md",
|
|
44
43
|
"keywords": [],
|
|
45
44
|
"author": "",
|
|
46
45
|
"license": "MIT",
|
|
@@ -62,6 +61,7 @@
|
|
|
62
61
|
"devDependencies": {
|
|
63
62
|
"@blueking/chat-helper": "workspace:*",
|
|
64
63
|
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
64
|
+
"@tailwindcss/vite": "4.2.2",
|
|
65
65
|
"@types/katex": "^0.16.7",
|
|
66
66
|
"@types/lodash": "^4.17.23",
|
|
67
67
|
"@types/markdown-it": "^14.1.2",
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
"oxc-minify": "^0.121.0",
|
|
83
83
|
"punycode.js": "^2.3.1",
|
|
84
84
|
"sass-embedded": "^1.93.3",
|
|
85
|
+
"tailwindcss": "4.2.2",
|
|
85
86
|
"tsx": "^4.21.0",
|
|
86
87
|
"uc.micro": "^2.1.0",
|
|
87
88
|
"vite": "^8.0.2",
|