advanced-chat-kai 1.1.3 → 1.1.5
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 +50 -15
- package/README.zh-CN.md +465 -0
- package/dist/advanced-chat-kai.es.js +473 -321
- package/dist/consts/context.d.ts.map +1 -1
- package/dist/contexts/footer-context.d.ts +2 -1
- package/dist/contexts/footer-context.d.ts.map +1 -1
- package/dist/types/event.d.ts +5 -0
- package/dist/types/event.d.ts.map +1 -1
- package/dist/types/props.d.ts +4 -0
- package/dist/types/props.d.ts.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -3,32 +3,35 @@
|
|
|
3
3
|
<img alt="light" src="https://github.com/user-attachments/assets/c7efa2e4-c7f5-4a83-968c-cbc0b0fea91f" />
|
|
4
4
|
<img alt="dark" src="https://github.com/user-attachments/assets/b547b8b6-2154-4334-8f5d-16fb2c8e264c"" />
|
|
5
5
|
|
|
6
|
-
   [](https://opensource.org/licenses/MIT) [](https://codecov.io/gh/spider-hand/advanced-chat-kai)
|
|
6
|
+
   [](https://opensource.org/licenses/MIT) [](https://codecov.io/gh/spider-hand/advanced-chat-kai) 
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
[English](./README.md) | [简体中文](./README.zh-CN.md)
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
A highly customizable chat Web Component that integrates easily with shadcn - works with any framework (React, Vue, Angular, Svelte, etc.)
|
|
11
|
+
|
|
12
|
+
> "Kai" (改) means "improved" in Japanese - inspired by vue-advanced-chat, this project started with the goal of building an improved alternative.
|
|
11
13
|
|
|
12
14
|
## Features
|
|
13
15
|
|
|
14
|
-
- Framework-agnostic - Can be used with any frontend framework
|
|
15
|
-
- Backend-agnostic - No assumptions about your backend
|
|
16
|
-
- Lightweight - Built with Lit for minimal bundle size and high performance
|
|
17
|
-
- Logic-free -
|
|
18
|
-
- Theming
|
|
19
|
-
- Customizable style - Easily style components with CSS variables
|
|
16
|
+
- **Framework-agnostic** - Can be used with any frontend framework
|
|
17
|
+
- **Backend-agnostic** - No assumptions about your backend
|
|
18
|
+
- **Lightweight** - Built with Lit for minimal bundle size and high performance
|
|
19
|
+
- **Logic-free** - Component handles only UI
|
|
20
|
+
- **Theming** - Light and dark themes with CSS variables, which is designed to be easily used with shadcn based UI
|
|
20
21
|
|
|
21
22
|
### Comparison
|
|
22
23
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
24
|
+
| | Bundle size (minified) | Bundle size (minified + gzipped) | Download time (slow 3G) | Download time (4G) |
|
|
25
|
+
| ----------------- | ---------------------- | -------------------------------- | ----------------------- | ------------------ |
|
|
26
|
+
| advanced-chat-kai | 112.9kB | 23.1kB | 465ms | 27ms |
|
|
27
|
+
| vue-advanced-chat | 493.4kB | 149.8kB | 3s | 171ms |
|
|
28
|
+
| | 📦 **77% smaller** | 📦 **84% smaller** | ⚡️ **85% faster** | ⚡️ **84% faster** |
|
|
28
29
|
|
|
29
30
|
## Demo
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
👉 [Storybook](https://main--6810a95e2c6e78e3e3be0658.chromatic.com)
|
|
33
|
+
|
|
34
|
+
👉 [Live Chat Example](https://advanced-chat-kai-demo.pages.dev)
|
|
32
35
|
|
|
33
36
|
## Table of contents
|
|
34
37
|
|
|
@@ -68,6 +71,7 @@ npm install advanced-chat-kai
|
|
|
68
71
|
| `isLoadingMoreRooms` | boolean | false | `false` | Whether more rooms are loading or not |
|
|
69
72
|
| `isLoadingMoreMessages` | boolean | false | `false` | Whether more messages are loading or not |
|
|
70
73
|
| `inputMessage` | string | false | `""` | The current message input used for two-way binding |
|
|
74
|
+
| `footerOptions` | [FooterOption<ChatActionType>](#footeroption)[] | false | `[]` | The list of options available for the footer selectbox |
|
|
71
75
|
| `roomActions` | [ChatAction<ChatActionType>](#chataction)[] | false | `[]` | The list of actions available for the rooms |
|
|
72
76
|
| `myMessageActions` | [ChatAction<ChatActionType>](#chataction)[] | false | `[]` | The list of actions available for the user's messages |
|
|
73
77
|
| `theirMessageActions` | [ChatAction<ChatActionType>](#chataction)[] | false | `[]` | The list of actions available for other user's messages |
|
|
@@ -245,6 +249,24 @@ myMessageActions = [
|
|
|
245
249
|
];
|
|
246
250
|
```
|
|
247
251
|
|
|
252
|
+
##### FooterOption
|
|
253
|
+
|
|
254
|
+
Example:
|
|
255
|
+
|
|
256
|
+
```js
|
|
257
|
+
footerOptions = [
|
|
258
|
+
{
|
|
259
|
+
label: "Insert template",
|
|
260
|
+
value: "insert-template",
|
|
261
|
+
default: true,
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
label: "Assign conversation",
|
|
265
|
+
value: "assign-conversation",
|
|
266
|
+
},
|
|
267
|
+
];
|
|
268
|
+
```
|
|
269
|
+
|
|
248
270
|
##### Dialog
|
|
249
271
|
|
|
250
272
|
Example:
|
|
@@ -304,6 +326,7 @@ this.messages.push(newMessage);
|
|
|
304
326
|
| `select-room` | `{ room }` | Selected a room in the list |
|
|
305
327
|
| `load-more-messages` | - | Reached the top of the message list |
|
|
306
328
|
| `select-message-action` | `{ label, value, messageId }` | Selected an action on the message |
|
|
329
|
+
| `select-footer-option` | `{ label, value, roomId }` | Selected an option in the footer selectbox |
|
|
307
330
|
| `select-suggestion` | `{ suggestion }` | Selected a suggestion in the list |
|
|
308
331
|
| `select-emoji` | `{ messageId, currentUserId, emoji }` | Selected an emoji reaction in picker for a message |
|
|
309
332
|
| `reply-to-message` | `{ replyTo }` | Clicked the reply button on a message |
|
|
@@ -382,6 +405,18 @@ CSS variable names are based on the [shadcn](https://ui.shadcn.com/docs/theming)
|
|
|
382
405
|
| `--chat-spacing-6` | `1.5rem` |
|
|
383
406
|
| `--chat-spacing-8` | `2rem` |
|
|
384
407
|
|
|
408
|
+
### Shadow Variables
|
|
409
|
+
|
|
410
|
+
| Variable | Default |
|
|
411
|
+
| ------------------- | --------------------------------------------------------------------- |
|
|
412
|
+
| `--chat-shadow-2xs` | `0 1px rgb(0 0 0 / 0.05)` |
|
|
413
|
+
| `--chat-shadow-xs` | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
|
|
414
|
+
| `--chat-shadow-sm` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` |
|
|
415
|
+
| `--chat-shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` |
|
|
416
|
+
| `--chat-shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
|
|
417
|
+
| `--chat-shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` |
|
|
418
|
+
| `--chat-shadow-2xl` | `0 25px 50px -12px rgb(0 0 0 / 0.25)` |
|
|
419
|
+
|
|
385
420
|
### Custom Variables
|
|
386
421
|
|
|
387
422
|
| Variable | Description |
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,465 @@
|
|
|
1
|
+
# advanced-chat-kai
|
|
2
|
+
|
|
3
|
+
<img alt="light" src="https://github.com/user-attachments/assets/c7efa2e4-c7f5-4a83-968c-cbc0b0fea91f" />
|
|
4
|
+
<img alt="dark" src="https://github.com/user-attachments/assets/b547b8b6-2154-4334-8f5d-16fb2c8e264c"" />
|
|
5
|
+
|
|
6
|
+
   [](https://opensource.org/licenses/MIT) [](https://codecov.io/gh/spider-hand/advanced-chat-kai) 
|
|
7
|
+
|
|
8
|
+
[English](./README.md) | [简体中文](./README.zh-CN.md)
|
|
9
|
+
|
|
10
|
+
一个高度可定制的聊天 Web Component，可轻松与 shadcn 集成，并可用于任何框架（React、Vue、Angular、Svelte 等）。
|
|
11
|
+
|
|
12
|
+
> "Kai"（改）在日语中表示“改进”。这个项目受到 vue-advanced-chat 的启发，目标是构建一个更好的替代方案。
|
|
13
|
+
|
|
14
|
+
## 功能特性
|
|
15
|
+
|
|
16
|
+
- **框架无关** - 可用于任何前端框架
|
|
17
|
+
- **后端无关** - 不对你的后端做任何假设
|
|
18
|
+
- **轻量** - 基于 Lit 构建，包体积小且性能高
|
|
19
|
+
- **无业务逻辑** - 组件只负责 UI
|
|
20
|
+
- **主题化** - 提供浅色和深色主题，并支持 CSS 变量，便于与基于 shadcn 的 UI 一起使用
|
|
21
|
+
|
|
22
|
+
### 对比
|
|
23
|
+
|
|
24
|
+
| | 包体积（压缩后） | 包体积（压缩后 + gzip） | 下载时间（慢速 3G） | 下载时间（4G） |
|
|
25
|
+
| ----------------- | ---------------- | ----------------------- | ------------------- | -------------- |
|
|
26
|
+
| advanced-chat-kai | 112.9kB | 23.1kB | 465ms | 27ms |
|
|
27
|
+
| vue-advanced-chat | 493.4kB | 149.8kB | 3s | 171ms |
|
|
28
|
+
| | 📦 **小 77%** | 📦 **小 84%** | ⚡️ **快 85%** | ⚡️ **快 84%** |
|
|
29
|
+
|
|
30
|
+
## 演示
|
|
31
|
+
|
|
32
|
+
👉 [Storybook](https://main--6810a95e2c6e78e3e3be0658.chromatic.com)
|
|
33
|
+
|
|
34
|
+
👉 [Live Chat Example](https://advanced-chat-kai-demo.pages.dev)
|
|
35
|
+
|
|
36
|
+
## 目录
|
|
37
|
+
|
|
38
|
+
- [安装](#安装)
|
|
39
|
+
- [用法](#用法)
|
|
40
|
+
- [Props](#props)
|
|
41
|
+
- [事件](#事件)
|
|
42
|
+
- [样式](#样式)
|
|
43
|
+
- [贡献](#贡献)
|
|
44
|
+
- [许可证](#许可证)
|
|
45
|
+
|
|
46
|
+
## 安装
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
npm install advanced-chat-kai
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## 用法
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<advanced-chat-kai></advanced-chat-kai>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Props
|
|
59
|
+
|
|
60
|
+
| 名称 | 类型 | 必填 | 默认值 | 说明 |
|
|
61
|
+
| ------------------------------ | ------------------------------------------------- | ---- | ---------------------- | ------------------------------------- |
|
|
62
|
+
| `currentUserId` | string \| null | 否 | `null` | 当前使用聊天组件的用户 ID |
|
|
63
|
+
| `rooms` | [ChatRoom](#chatroom)[] | 否 | `[]` | 侧边栏中显示的聊天室列表 |
|
|
64
|
+
| `messages` | [ChatItemType](#chatitemtype)[] | 否 | `[]` | 当前选中聊天室中的消息列表 |
|
|
65
|
+
| `attachments` | [ChatMessageAttachment](#chatmessageattachment)[] | 否 | `[]` | 消息中的附件列表 |
|
|
66
|
+
| `suggestions` | [ChatMessageSuggestion](#chatmessagesuggestion)[] | 否 | `[]` | 消息建议列表 |
|
|
67
|
+
| `replyTo` | [ChatMessageReply](#chatmessagereply) \| null | 否 | `null` | 当前正在回复的消息 |
|
|
68
|
+
| `selectedRoomId` | string \| null | 否 | `null` | 当前选中的聊天室 ID |
|
|
69
|
+
| `isLoadingRoom` | boolean | 否 | `false` | 初始聊天室列表是否正在加载 |
|
|
70
|
+
| `isLoadingMessage` | boolean | 否 | `false` | 初始消息列表是否正在加载 |
|
|
71
|
+
| `isLoadingMoreRooms` | boolean | 否 | `false` | 是否正在加载更多聊天室 |
|
|
72
|
+
| `isLoadingMoreMessages` | boolean | 否 | `false` | 是否正在加载更多消息 |
|
|
73
|
+
| `inputMessage` | string | 否 | `""` | 当前消息输入框的值，用于双向绑定 |
|
|
74
|
+
| `footerOptions` | [FooterOption<ChatActionType>](#footeroption)[] | 否 | `[]` | 页脚选择框可用的选项列表 |
|
|
75
|
+
| `roomActions` | [ChatAction<ChatActionType>](#chataction)[] | 否 | `[]` | 聊天室可用的操作列表 |
|
|
76
|
+
| `myMessageActions` | [ChatAction<ChatActionType>](#chataction)[] | 否 | `[]` | 当前用户消息可用的操作列表 |
|
|
77
|
+
| `theirMessageActions` | [ChatAction<ChatActionType>](#chataction)[] | 否 | `[]` | 其他用户消息可用的操作列表 |
|
|
78
|
+
| `isMobile` | boolean | 否 | `false` | 是否以移动端模式渲染聊天组件 |
|
|
79
|
+
| `isSingleRoom` | boolean | 否 | `false` | 是否隐藏侧边栏和切换按钮 |
|
|
80
|
+
| `isEmojiPickerAvailable` | boolean | 否 | `true` | 是否显示页脚中的 emoji 选择器 |
|
|
81
|
+
| `isEmojiReactionAvailable` | boolean | 否 | `true` | 是否显示消息上的 emoji reaction 按钮 |
|
|
82
|
+
| `isReplyAvailable` | boolean | 否 | `true` | 是否显示消息上的回复按钮 |
|
|
83
|
+
| `isMessageAttachmentAvailable` | boolean | 否 | `true` | 是否显示页脚中的消息附件按钮 |
|
|
84
|
+
| `isMarkdownAvailable` | boolean | 否 | `false` | 是否启用 markdown 消息渲染 |
|
|
85
|
+
| `isTyping` | boolean | 否 | `false` | 是否显示输入中指示器 |
|
|
86
|
+
| `showRoomAvatar` | boolean | 否 | `true` | 是否显示聊天室列表中的头像 |
|
|
87
|
+
| `showTheirAvatar` | boolean | 否 | `true` | 是否显示其他用户消息上的头像 |
|
|
88
|
+
| `alignMyMessagesLeft` | boolean | 否 | `false` | 我的消息是否左对齐 |
|
|
89
|
+
| `enterToSend` | boolean | 否 | `false` | 是否按下回车键就发送消息 |
|
|
90
|
+
| `timestampFormatter` | ((date: Date) => string) \| null | 否 | `null` | 自定义 Date 时间戳格式化函数 |
|
|
91
|
+
| `dialog` | [Dialog](#dialog) \| null | 否 | `null` | 要渲染的对话框 |
|
|
92
|
+
| `height` | string | 否 | `"60em"` | 聊天组件的高度 |
|
|
93
|
+
| `width` | string | 否 | `"80em"` | 聊天组件的宽度 |
|
|
94
|
+
| `i18n` | [PartialI18nType](#i18ntype) | 否 | [见下方](#i18ntype) | 用于翻译的 i18n 对象 |
|
|
95
|
+
| `theme` | ThemeType | 否 | `"light"` | 聊天组件的主题，必须是 `light` 或 `dark` |
|
|
96
|
+
|
|
97
|
+
### 接口
|
|
98
|
+
|
|
99
|
+
##### ChatRoom
|
|
100
|
+
|
|
101
|
+
说明：
|
|
102
|
+
|
|
103
|
+
- 如果 `hasEnded` 为 true 且 `selectedRoomId` 与该房间的 `id` 匹配，则页脚会被隐藏。
|
|
104
|
+
|
|
105
|
+
示例：
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
rooms = [
|
|
109
|
+
{
|
|
110
|
+
id: "1",
|
|
111
|
+
headerTitle: "title",
|
|
112
|
+
headerSubtitle: "subtitle",
|
|
113
|
+
sidebarTitle: "title",
|
|
114
|
+
siderbarSubtitle: "subtitle",
|
|
115
|
+
avatar: "/avatar.png",
|
|
116
|
+
meta: "May 1",
|
|
117
|
+
badge: {
|
|
118
|
+
type: "success",
|
|
119
|
+
label: "Success",
|
|
120
|
+
},
|
|
121
|
+
hasEnded: false,
|
|
122
|
+
},
|
|
123
|
+
];
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
##### ChatItemType
|
|
127
|
+
|
|
128
|
+
说明：
|
|
129
|
+
|
|
130
|
+
- `type` 必须是 `divider` 或 `message`。
|
|
131
|
+
- `timestamp` 可以是字符串（原样显示）或 Date 对象（使用 `timestampFormatter` 或默认的 Intl 格式化）。
|
|
132
|
+
- `reactions` 表示 emoji reactions，以及对每个 emoji 做出反应的用户 ID 列表。
|
|
133
|
+
- `isSelected` 可用于标识某个操作（例如编辑）当前是否在该消息上处于激活状态。
|
|
134
|
+
|
|
135
|
+
示例：
|
|
136
|
+
|
|
137
|
+
```js
|
|
138
|
+
messages = [
|
|
139
|
+
{
|
|
140
|
+
id: "0",
|
|
141
|
+
type: "divider",
|
|
142
|
+
roomId: "1",
|
|
143
|
+
content: "May 1",
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
id: "1",
|
|
147
|
+
type: "message",
|
|
148
|
+
roomId: "1",
|
|
149
|
+
senderId: "1",
|
|
150
|
+
senderName: "User 1",
|
|
151
|
+
senderAvatar: "/avatar.png",
|
|
152
|
+
content: "Hello, world",
|
|
153
|
+
timestamp: "12:34 PM", // 或 new Date()
|
|
154
|
+
reactions: {
|
|
155
|
+
"👍": ["2", "3"],
|
|
156
|
+
"🎉": ["1", "4", "5"],
|
|
157
|
+
},
|
|
158
|
+
attachments: [
|
|
159
|
+
{
|
|
160
|
+
name: "file1.txt",
|
|
161
|
+
meta: "20 KB",
|
|
162
|
+
id: "0",
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
isDeleted: false,
|
|
166
|
+
isSelected: false,
|
|
167
|
+
replyTo: null,
|
|
168
|
+
}
|
|
169
|
+
]
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
##### ChatMessageAttachment
|
|
173
|
+
|
|
174
|
+
示例：
|
|
175
|
+
|
|
176
|
+
```js
|
|
177
|
+
attachments = [
|
|
178
|
+
{
|
|
179
|
+
name: "file1.txt",
|
|
180
|
+
meta: "20 KB",
|
|
181
|
+
id: "0",
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
name: "image.png",
|
|
185
|
+
meta: "2 MB",
|
|
186
|
+
id: "1",
|
|
187
|
+
imageUrl: "/image.png",
|
|
188
|
+
},
|
|
189
|
+
];
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
##### ChatMessageSuggestion
|
|
193
|
+
|
|
194
|
+
示例：
|
|
195
|
+
|
|
196
|
+
```js
|
|
197
|
+
suggestions = [
|
|
198
|
+
{
|
|
199
|
+
text: "Hello",
|
|
200
|
+
value: "hello",
|
|
201
|
+
},
|
|
202
|
+
];
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
##### ChatMessageReply
|
|
206
|
+
|
|
207
|
+
示例：
|
|
208
|
+
|
|
209
|
+
```js
|
|
210
|
+
chatMessageReply = {
|
|
211
|
+
id: "1",
|
|
212
|
+
type: "message",
|
|
213
|
+
roomId: "1",
|
|
214
|
+
senderId: "1",
|
|
215
|
+
senderName: "User 1",
|
|
216
|
+
senderAvatar: "/avatar.png",
|
|
217
|
+
content: "Hello, world",
|
|
218
|
+
timestamp: "12:34 PM",
|
|
219
|
+
reactions: {
|
|
220
|
+
"👍": ["2", "3"],
|
|
221
|
+
"🎉": ["1", "4", "5"],
|
|
222
|
+
},
|
|
223
|
+
attachments: [
|
|
224
|
+
{
|
|
225
|
+
name: "file1.txt",
|
|
226
|
+
meta: "20 KB",
|
|
227
|
+
id: "0",
|
|
228
|
+
},
|
|
229
|
+
],
|
|
230
|
+
isDeleted: false,
|
|
231
|
+
isSelected: false,
|
|
232
|
+
};
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
##### ChatAction
|
|
236
|
+
|
|
237
|
+
示例：
|
|
238
|
+
|
|
239
|
+
```js
|
|
240
|
+
myMessageActions = [
|
|
241
|
+
{
|
|
242
|
+
label: "Edit",
|
|
243
|
+
value: "edit-message",
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
label: "Delete",
|
|
247
|
+
value: "delete-message",
|
|
248
|
+
},
|
|
249
|
+
];
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
##### FooterOption
|
|
253
|
+
|
|
254
|
+
示例：
|
|
255
|
+
|
|
256
|
+
```js
|
|
257
|
+
footerOptions = [
|
|
258
|
+
{
|
|
259
|
+
label: "Insert template",
|
|
260
|
+
value: "insert-template",
|
|
261
|
+
default: true,
|
|
262
|
+
},
|
|
263
|
+
{
|
|
264
|
+
label: "Assign conversation",
|
|
265
|
+
value: "assign-conversation",
|
|
266
|
+
},
|
|
267
|
+
];
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
##### Dialog
|
|
271
|
+
|
|
272
|
+
示例：
|
|
273
|
+
|
|
274
|
+
```js
|
|
275
|
+
dialog = {
|
|
276
|
+
event: "confirm-deletion-message",
|
|
277
|
+
body: "Are you sure you want to delete this message?",
|
|
278
|
+
leftButton: {
|
|
279
|
+
text: "Cancel",
|
|
280
|
+
},
|
|
281
|
+
rightButton: {
|
|
282
|
+
text: "OK",
|
|
283
|
+
variant: "danger",
|
|
284
|
+
},
|
|
285
|
+
};
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
##### I18nType
|
|
289
|
+
|
|
290
|
+
默认值如下。你只需要覆盖想自定义的字段即可。
|
|
291
|
+
|
|
292
|
+
```js
|
|
293
|
+
const DEFAULT_I18N = {
|
|
294
|
+
DELETED_MESSAGE: "This message has been deleted.",
|
|
295
|
+
CHAT_FOOTER_TEXTAREA_PLACEHOLDER: "Write a message..",
|
|
296
|
+
CHAT_SEARCH_PLACEHOLDER: "Search room",
|
|
297
|
+
CLOSED_ROOM_MESSAGE: "This chat has been ended.",
|
|
298
|
+
NEW_MESSAGE_NOTIFICATION: "New messages",
|
|
299
|
+
};
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
### ⚠️ 关于更新数组和对象的说明
|
|
303
|
+
|
|
304
|
+
Lit 使用浅比较来检测响应式属性的变化。处理数组或对象时，你必须赋予一个新的引用才能触发更新。直接修改原对象或原数组（例如使用 `push()` 或直接修改某个属性）不会让组件更新。
|
|
305
|
+
|
|
306
|
+
✅ 正确：
|
|
307
|
+
|
|
308
|
+
```ts
|
|
309
|
+
this.messages = [...this.messages, newMessage];
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
❌ 无效：
|
|
313
|
+
|
|
314
|
+
```ts
|
|
315
|
+
this.messages.push(newMessage);
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
## 事件
|
|
319
|
+
|
|
320
|
+
| 名称 | Detail / Payload | 用户在以下情况下触发 |
|
|
321
|
+
| ----------------------- | ---------------------------------------- | -------------------------------------------- |
|
|
322
|
+
| `add-room` | - | 点击侧边栏中的添加按钮 |
|
|
323
|
+
| `search-room` | `{ value }` | 修改搜索框输入内容 |
|
|
324
|
+
| `select-room-action` | `{ label, value, roomId }` | 选择房间上的某个操作 |
|
|
325
|
+
| `load-more-rooms` | - | 滚动到房间列表底部 |
|
|
326
|
+
| `select-room` | `{ room }` | 在列表中选择某个房间 |
|
|
327
|
+
| `load-more-messages` | - | 滚动到消息列表顶部 |
|
|
328
|
+
| `select-message-action` | `{ label, value, messageId }` | 选择消息上的某个操作 |
|
|
329
|
+
| `select-footer-option` | `{ label, value, roomId }` | 选择页脚选择框中的某个选项 |
|
|
330
|
+
| `select-suggestion` | `{ suggestion }` | 选择建议列表中的某项 |
|
|
331
|
+
| `select-emoji` | `{ messageId, currentUserId, emoji }` | 在消息的选择器中选择一个 emoji reaction |
|
|
332
|
+
| `reply-to-message` | `{ replyTo }` | 点击消息上的回复按钮 |
|
|
333
|
+
| `click-reaction` | `{ messageId, reaction }` | 点击消息上已有的 emoji reaction |
|
|
334
|
+
| `download-attachment` | `{ attachment }` | 点击附件上的下载按钮 |
|
|
335
|
+
| `remove-attachment` | `{ attachment }` | 点击附件上的关闭按钮 |
|
|
336
|
+
| `cancel-reply` | - | 点击回复消息上的关闭按钮，或发送带回复的消息 |
|
|
337
|
+
| `select-file` | `{ file }` | 选择文件 |
|
|
338
|
+
| `send-message` | `{ roomId, senderId, content, replyTo }` | 点击页脚中的发送按钮 |
|
|
339
|
+
| `click-dialog-button` | `{ event, side }` | 点击对话框中的按钮 |
|
|
340
|
+
|
|
341
|
+
## 样式
|
|
342
|
+
|
|
343
|
+
CSS 变量名称基于 [shadcn](https://ui.shadcn.com/docs/theming) 设计系统和 [Tailwind CSS](https://tailwindcss.com/docs/customizing-spacing) 的 spacing/typography 规范，并统一使用 `--chat-` 前缀。你可以通过覆盖这些变量来自定义聊天组件的外观。
|
|
344
|
+
|
|
345
|
+
### 颜色变量
|
|
346
|
+
|
|
347
|
+
| 变量 |
|
|
348
|
+
| ------------------------------- |
|
|
349
|
+
| `--chat-background` |
|
|
350
|
+
| `--chat-foreground` |
|
|
351
|
+
| `--chat-card` |
|
|
352
|
+
| `--chat-card-foreground` |
|
|
353
|
+
| `--chat-popover` |
|
|
354
|
+
| `--chat-popover-foreground` |
|
|
355
|
+
| `--chat-primary` |
|
|
356
|
+
| `--chat-primary-foreground` |
|
|
357
|
+
| `--chat-secondary` |
|
|
358
|
+
| `--chat-secondary-foreground` |
|
|
359
|
+
| `--chat-muted` |
|
|
360
|
+
| `--chat-muted-foreground` |
|
|
361
|
+
| `--chat-accent` |
|
|
362
|
+
| `--chat-accent-foreground` |
|
|
363
|
+
| `--chat-destructive` |
|
|
364
|
+
| `--chat-destructive-foreground` |
|
|
365
|
+
| `--chat-border` |
|
|
366
|
+
| `--chat-input` |
|
|
367
|
+
| `--chat-ring` |
|
|
368
|
+
|
|
369
|
+
### 字体大小变量
|
|
370
|
+
|
|
371
|
+
| 变量 | 默认值 |
|
|
372
|
+
| ------------------ | ---------- |
|
|
373
|
+
| `--chat-text-xs` | `0.75rem` |
|
|
374
|
+
| `--chat-text-sm` | `0.875rem` |
|
|
375
|
+
| `--chat-text-base` | `1rem` |
|
|
376
|
+
| `--chat-text-lg` | `1.125rem` |
|
|
377
|
+
| `--chat-text-xl` | `1.25rem` |
|
|
378
|
+
|
|
379
|
+
### 圆角变量
|
|
380
|
+
|
|
381
|
+
| 变量 | 默认值 |
|
|
382
|
+
| -------------------- | ---------- |
|
|
383
|
+
| `--chat-radius-sm` | `0.125rem` |
|
|
384
|
+
| `--chat-radius` | `0.25rem` |
|
|
385
|
+
| `--chat-radius-md` | `0.375rem` |
|
|
386
|
+
| `--chat-radius-lg` | `0.5rem` |
|
|
387
|
+
| `--chat-radius-xl` | `0.75rem` |
|
|
388
|
+
| `--chat-radius-2xl` | `1rem` |
|
|
389
|
+
| `--chat-radius-3xl` | `1.5rem` |
|
|
390
|
+
| `--chat-radius-full` | `9999px` |
|
|
391
|
+
|
|
392
|
+
### 间距变量
|
|
393
|
+
|
|
394
|
+
| 变量 | 默认值 |
|
|
395
|
+
| -------------------- | ---------- |
|
|
396
|
+
| `--chat-spacing-0` | `0` |
|
|
397
|
+
| `--chat-spacing-0-5` | `0.125rem` |
|
|
398
|
+
| `--chat-spacing-1` | `0.25rem` |
|
|
399
|
+
| `--chat-spacing-1-5` | `0.375rem` |
|
|
400
|
+
| `--chat-spacing-2` | `0.5rem` |
|
|
401
|
+
| `--chat-spacing-2-5` | `0.625rem` |
|
|
402
|
+
| `--chat-spacing-3` | `0.75rem` |
|
|
403
|
+
| `--chat-spacing-4` | `1rem` |
|
|
404
|
+
| `--chat-spacing-5` | `1.25rem` |
|
|
405
|
+
| `--chat-spacing-6` | `1.5rem` |
|
|
406
|
+
| `--chat-spacing-8` | `2rem` |
|
|
407
|
+
|
|
408
|
+
### 阴影变量
|
|
409
|
+
|
|
410
|
+
| 变量 | 默认值 |
|
|
411
|
+
| ------------------- | --------------------------------------------------------------------- |
|
|
412
|
+
| `--chat-shadow-2xs` | `0 1px rgb(0 0 0 / 0.05)` |
|
|
413
|
+
| `--chat-shadow-xs` | `0 1px 2px 0 rgb(0 0 0 / 0.05)` |
|
|
414
|
+
| `--chat-shadow-sm` | `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)` |
|
|
415
|
+
| `--chat-shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)` |
|
|
416
|
+
| `--chat-shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)` |
|
|
417
|
+
| `--chat-shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)` |
|
|
418
|
+
| `--chat-shadow-2xl` | `0 25px 50px -12px rgb(0 0 0 / 0.25)` |
|
|
419
|
+
|
|
420
|
+
### 自定义变量
|
|
421
|
+
|
|
422
|
+
| 变量 | 说明 |
|
|
423
|
+
| -------------------------------- | ---------------------- |
|
|
424
|
+
| `--chat-base-font-size` | 聊天组件的基础字体大小 |
|
|
425
|
+
| `--chat-message-mine` | 我的消息背景色 |
|
|
426
|
+
| `--chat-message-mine-foreground` | 我的消息文字/图标颜色 |
|
|
427
|
+
| `--chat-success` | 成功徽章背景色 |
|
|
428
|
+
| `--chat-success-foreground` | 成功徽章文字颜色 |
|
|
429
|
+
| `--chat-danger` | 危险徽章背景色 |
|
|
430
|
+
| `--chat-danger-foreground` | 危险徽章文字颜色 |
|
|
431
|
+
| `--chat-warning` | 警告徽章背景色 |
|
|
432
|
+
| `--chat-warning-foreground` | 警告徽章文字颜色 |
|
|
433
|
+
| `--chat-info` | 信息徽章背景色 |
|
|
434
|
+
| `--chat-info-foreground` | 信息徽章文字颜色 |
|
|
435
|
+
| `--chat-overlay-subtle` | 轻微遮罩（5% 不透明度） |
|
|
436
|
+
| `--chat-overlay-light` | 浅遮罩（8% 不透明度） |
|
|
437
|
+
| `--chat-overlay` | 默认遮罩（10% 不透明度）|
|
|
438
|
+
| `--chat-overlay-medium` | 中等遮罩（15% 不透明度）|
|
|
439
|
+
| `--chat-overlay-heavy` | 重遮罩（50% 不透明度） |
|
|
440
|
+
|
|
441
|
+
### 用法
|
|
442
|
+
|
|
443
|
+
你可以使用 CSS 自定义属性（变量）覆盖组件样式。这些变量直接应用在 `advanced-chat-kai` 元素上：
|
|
444
|
+
|
|
445
|
+
```css
|
|
446
|
+
advanced-chat-kai {
|
|
447
|
+
--chat-primary: oklch(0.65 0.24 15);
|
|
448
|
+
--chat-primary-foreground: oklch(1 0 0);
|
|
449
|
+
--chat-message-mine: oklch(0.65 0.24 15);
|
|
450
|
+
--chat-message-mine-foreground: oklch(1 0 0);
|
|
451
|
+
}
|
|
452
|
+
```
|
|
453
|
+
|
|
454
|
+
所有样式都封装在 Shadow DOM 中，因此外部的直接 CSS 选择器不会生效，只有 CSS 变量可用于样式定制。
|
|
455
|
+
|
|
456
|
+
## 贡献
|
|
457
|
+
|
|
458
|
+
- 始终欢迎提交修复 bug 的 PR。
|
|
459
|
+
- UI 变更或新功能在未事先讨论前请不要直接提交。请先创建 issue 进行提案和讨论。
|
|
460
|
+
|
|
461
|
+
感谢你的理解与贡献。
|
|
462
|
+
|
|
463
|
+
## 许可证
|
|
464
|
+
|
|
465
|
+
[MIT](./LICENSE)
|