advanced-chat-kai 0.4.2 → 1.0.0
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 +125 -90
- package/dist/advanced-chat-kai.es.js +859 -807
- package/dist/consts/context.d.ts.map +1 -1
- package/dist/contexts/message-context.d.ts +1 -0
- package/dist/contexts/message-context.d.ts.map +1 -1
- package/dist/{index-DII6YJVm.js → index-DORkRBou.js} +1 -5
- package/dist/{index-FIDC6lfi.js → index-WJAuXWYm.js} +387 -373
- package/dist/types/event.d.ts +2 -1
- package/dist/types/event.d.ts.map +1 -1
- package/dist/types/props.d.ts +2 -2
- package/dist/types/props.d.ts.map +1 -1
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
# advanced-chat-kai
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
<img alt="light" src="https://github.com/user-attachments/assets/2683a3ae-0419-4a35-ba3c-b5344750d5b6" />
|
|
4
|
+
<img alt="dark" src="https://github.com/user-attachments/assets/36d2fc3e-6f93-44ea-a3d2-f6137b9d0bd6" />
|
|
6
5
|
|
|
7
6
|
   [](https://opensource.org/licenses/MIT) [](https://codecov.io/gh/spider-hand/advanced-chat-kai)
|
|
8
7
|
|
|
@@ -25,7 +24,11 @@ A highly customizable Web Component for building chat interfaces
|
|
|
25
24
|
| ------------------- | ---------------------- | -------------------------------- | ----------------------- | ------------------ |
|
|
26
25
|
| `advanced-chat-kai` | 112.9kB | 23.2kB | 465ms | 27ms |
|
|
27
26
|
| `vue-advanced-chat` | 493.4kB | 149.8kB | 3s | 171ms |
|
|
28
|
-
| | 📦 **77% smaller** | 📦 **84% smaller** | ⚡️ **85% faster**
|
|
27
|
+
| | 📦 **77% smaller** | 📦 **84% smaller** | ⚡️ **85% faster** | ⚡️ **84% faster** |
|
|
28
|
+
|
|
29
|
+
## Demo
|
|
30
|
+
|
|
31
|
+
Try it out [here](https://advanced-chat-kai-demo.pages.dev/).
|
|
29
32
|
|
|
30
33
|
## Table of contents
|
|
31
34
|
|
|
@@ -80,6 +83,7 @@ npm install advanced-chat-kai
|
|
|
80
83
|
| `showTheirAvatar` | boolean | false | `true` | Whether the other user's avatar on the message should be rendered or not |
|
|
81
84
|
| `alignMyMessagesLeft` | boolean | false | `false` | Whether my messages should be aligned to the left or not |
|
|
82
85
|
| `enterToSend` | boolean | false | `false` | Whether the enter key should send the message or not |
|
|
86
|
+
| `timestampFormatter` | ((date: Date) => string) \| null | false | `null` | Custom function to format Date timestamps. If null, uses default Intl format |
|
|
83
87
|
| `dialog` | [Dialog](#dialog) \| null | false | `null` | The dialog to be rendered |
|
|
84
88
|
| `height` | string | false | `"60em"` | The height of the chat component |
|
|
85
89
|
| `width` | string | false | `"80em"` | The width of the chat component |
|
|
@@ -120,6 +124,7 @@ rooms = [
|
|
|
120
124
|
Notes:
|
|
121
125
|
|
|
122
126
|
- `type` must be either `divider` or `message`.
|
|
127
|
+
- `timestamp` can be a string (displayed as-is) or a Date object (formatted using `timestampFormatter` or default Intl format).
|
|
123
128
|
- `reactions` represents the emoji reactions and the list of user IDs who reacted with each emoji.
|
|
124
129
|
- `isSelected` can be used to indicate that an action (such as editing) is currently active on the message.
|
|
125
130
|
|
|
@@ -141,11 +146,11 @@ messages = [
|
|
|
141
146
|
senderName: "User 1",
|
|
142
147
|
senderAvatar: "/avatar.png",
|
|
143
148
|
content: "Hello, world",
|
|
144
|
-
timestamp: "12:34 PM",
|
|
145
|
-
reactions:
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
timestamp: "12:34 PM", // or new Date()
|
|
150
|
+
reactions: {
|
|
151
|
+
"👍": ["2", "3"],
|
|
152
|
+
"🎉": ["1", "4", "5"],
|
|
153
|
+
},
|
|
149
154
|
attachments: [
|
|
150
155
|
{
|
|
151
156
|
name: "file1.txt",
|
|
@@ -207,20 +212,20 @@ chatMessageReply = {
|
|
|
207
212
|
senderAvatar: "/avatar.png",
|
|
208
213
|
content: "Hello, world",
|
|
209
214
|
timestamp: "12:34 PM",
|
|
210
|
-
reactions:
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
215
|
+
reactions: {
|
|
216
|
+
"👍": ["2", "3"],
|
|
217
|
+
"🎉": ["1", "4", "5"],
|
|
218
|
+
},
|
|
214
219
|
attachments: [
|
|
215
220
|
{
|
|
216
221
|
name: "file1.txt",
|
|
217
222
|
meta: "20 KB",
|
|
218
223
|
id: "0",
|
|
219
|
-
}
|
|
224
|
+
},
|
|
220
225
|
],
|
|
221
226
|
isDeleted: false,
|
|
222
227
|
isSelected: false,
|
|
223
|
-
}
|
|
228
|
+
};
|
|
224
229
|
```
|
|
225
230
|
|
|
226
231
|
##### ChatAction
|
|
@@ -290,89 +295,119 @@ this.messages.push(newMessage);
|
|
|
290
295
|
|
|
291
296
|
## Events
|
|
292
297
|
|
|
293
|
-
| Name | Detail / Payload
|
|
294
|
-
| ----------------------- |
|
|
295
|
-
| `add-room` | -
|
|
296
|
-
| `search-room` | `{ value }`
|
|
297
|
-
| `select-room-action` | `{ label, value, roomId }`
|
|
298
|
-
| `load-more-rooms` | -
|
|
299
|
-
| `select-room` | `{ room }`
|
|
300
|
-
| `load-more-messages` | -
|
|
301
|
-
| `select-message-action` | `{ label, value, messageId }`
|
|
302
|
-
| `select-suggestion` | `{ suggestion }`
|
|
303
|
-
| `select-emoji` | `{ messageId, currentUserId, emoji }`
|
|
304
|
-
| `reply-to-message` | `{ replyTo }`
|
|
305
|
-
| `click-reaction` | `{ messageId, reaction }`
|
|
306
|
-
| `download-attachment` | `{ attachment }`
|
|
307
|
-
| `remove-attachment` | `{ attachment }`
|
|
308
|
-
| `cancel-reply` | -
|
|
309
|
-
| `select-file` | `{ file }`
|
|
310
|
-
| `send-message` | `{ roomId, senderId, content }`
|
|
311
|
-
| `click-dialog-button` | `{ event, side }`
|
|
298
|
+
| Name | Detail / Payload | Fires when a user |
|
|
299
|
+
| ----------------------- | ---------------------------------------- | ----------------------------------------------------------------------------- |
|
|
300
|
+
| `add-room` | - | Clicked the add button on the sidebar |
|
|
301
|
+
| `search-room` | `{ value }` | Changed the input on the searchbox |
|
|
302
|
+
| `select-room-action` | `{ label, value, roomId }` | Selected an action on the room |
|
|
303
|
+
| `load-more-rooms` | - | Reached the bottom of the room list |
|
|
304
|
+
| `select-room` | `{ room }` | Selected a room in the list |
|
|
305
|
+
| `load-more-messages` | - | Reached the top of the message list |
|
|
306
|
+
| `select-message-action` | `{ label, value, messageId }` | Selected an action on the message |
|
|
307
|
+
| `select-suggestion` | `{ suggestion }` | Selected a suggestion in the list |
|
|
308
|
+
| `select-emoji` | `{ messageId, currentUserId, emoji }` | Selected an emoji reaction in picker for a message |
|
|
309
|
+
| `reply-to-message` | `{ replyTo }` | Clicked the reply button on a message |
|
|
310
|
+
| `click-reaction` | `{ messageId, reaction }` | Clicked an existing emoji reaction on a message |
|
|
311
|
+
| `download-attachment` | `{ attachment }` | Clicked the download button on an attachment |
|
|
312
|
+
| `remove-attachment` | `{ attachment }` | Clicked the close button on an attachment |
|
|
313
|
+
| `cancel-reply` | - | Clicked the close button on the reply message, or sent a message with a reply |
|
|
314
|
+
| `select-file` | `{ file }` | Selected a file |
|
|
315
|
+
| `send-message` | `{ roomId, senderId, content, replyTo }` | Clicked the send button on the footer |
|
|
316
|
+
| `click-dialog-button` | `{ event, side }` | Clicked a button on a dialog |
|
|
312
317
|
|
|
313
318
|
## Styling
|
|
314
319
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
|
320
|
-
|
|
|
321
|
-
| `--chat-
|
|
322
|
-
| `--chat-
|
|
323
|
-
| `--chat-
|
|
324
|
-
| `--chat-
|
|
325
|
-
| `--chat-
|
|
326
|
-
| `--chat-
|
|
327
|
-
| `--chat-
|
|
328
|
-
| `--chat-
|
|
329
|
-
| `--chat-
|
|
330
|
-
| `--chat-
|
|
331
|
-
| `--chat-
|
|
332
|
-
| `--chat-
|
|
333
|
-
| `--chat-
|
|
334
|
-
| `--chat-
|
|
335
|
-
| `--chat-
|
|
336
|
-
| `--chat-
|
|
337
|
-
| `--chat-
|
|
338
|
-
| `--chat-
|
|
339
|
-
| `--chat-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
|
344
|
-
|
|
|
345
|
-
| `--chat-
|
|
346
|
-
| `--chat-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
|
354
|
-
|
|
|
355
|
-
| `--chat-
|
|
356
|
-
| `--chat-
|
|
357
|
-
| `--chat-
|
|
358
|
-
| `--chat-
|
|
359
|
-
| `--chat-
|
|
360
|
-
| `--chat-
|
|
361
|
-
| `--chat-
|
|
362
|
-
| `--chat-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
|
320
|
+
CSS variable names are based on the [shadcn](https://ui.shadcn.com/docs/theming) design system and [Tailwind CSS](https://tailwindcss.com/docs/customizing-spacing) spacing/typography scale, prefixed with `--chat-`. You can override these variables to customize the appearance of the chat component.
|
|
321
|
+
|
|
322
|
+
### Color Variables
|
|
323
|
+
|
|
324
|
+
| Variable |
|
|
325
|
+
| ------------------------------- |
|
|
326
|
+
| `--chat-background` |
|
|
327
|
+
| `--chat-foreground` |
|
|
328
|
+
| `--chat-card` |
|
|
329
|
+
| `--chat-card-foreground` |
|
|
330
|
+
| `--chat-popover` |
|
|
331
|
+
| `--chat-popover-foreground` |
|
|
332
|
+
| `--chat-primary` |
|
|
333
|
+
| `--chat-primary-foreground` |
|
|
334
|
+
| `--chat-secondary` |
|
|
335
|
+
| `--chat-secondary-foreground` |
|
|
336
|
+
| `--chat-muted` |
|
|
337
|
+
| `--chat-muted-foreground` |
|
|
338
|
+
| `--chat-accent` |
|
|
339
|
+
| `--chat-accent-foreground` |
|
|
340
|
+
| `--chat-destructive` |
|
|
341
|
+
| `--chat-destructive-foreground` |
|
|
342
|
+
| `--chat-border` |
|
|
343
|
+
| `--chat-input` |
|
|
344
|
+
| `--chat-ring` |
|
|
345
|
+
|
|
346
|
+
### Font Size Variables
|
|
347
|
+
|
|
348
|
+
| Variable | Default |
|
|
349
|
+
| ------------------ | ----------- |
|
|
350
|
+
| `--chat-text-xs` | `0.75rem` |
|
|
351
|
+
| `--chat-text-sm` | `0.875rem` |
|
|
352
|
+
| `--chat-text-base` | `1rem` |
|
|
353
|
+
| `--chat-text-lg` | `1.125rem` |
|
|
354
|
+
| `--chat-text-xl` | `1.25rem` |
|
|
355
|
+
|
|
356
|
+
### Border Radius Variables
|
|
357
|
+
|
|
358
|
+
| Variable | Default |
|
|
359
|
+
| -------------------- | --------- |
|
|
360
|
+
| `--chat-radius-sm` | `0.125rem` |
|
|
361
|
+
| `--chat-radius` | `0.25rem` |
|
|
362
|
+
| `--chat-radius-md` | `0.375rem` |
|
|
363
|
+
| `--chat-radius-lg` | `0.5rem` |
|
|
364
|
+
| `--chat-radius-xl` | `0.75rem` |
|
|
365
|
+
| `--chat-radius-2xl` | `1rem` |
|
|
366
|
+
| `--chat-radius-3xl` | `1.5rem` |
|
|
367
|
+
| `--chat-radius-full` | `9999px` |
|
|
368
|
+
|
|
369
|
+
### Spacing Variables
|
|
370
|
+
|
|
371
|
+
| Variable | Default |
|
|
372
|
+
| -------------------- | ---------- |
|
|
373
|
+
| `--chat-spacing-0` | `0` |
|
|
374
|
+
| `--chat-spacing-0-5` | `0.125rem` |
|
|
375
|
+
| `--chat-spacing-1` | `0.25rem` |
|
|
376
|
+
| `--chat-spacing-1-5` | `0.375rem` |
|
|
377
|
+
| `--chat-spacing-2` | `0.5rem` |
|
|
378
|
+
| `--chat-spacing-2-5` | `0.625rem` |
|
|
379
|
+
| `--chat-spacing-3` | `0.75rem` |
|
|
380
|
+
| `--chat-spacing-4` | `1rem` |
|
|
381
|
+
| `--chat-spacing-5` | `1.25rem` |
|
|
382
|
+
| `--chat-spacing-6` | `1.5rem` |
|
|
383
|
+
| `--chat-spacing-8` | `2rem` |
|
|
384
|
+
|
|
385
|
+
### Custom Variables
|
|
386
|
+
|
|
387
|
+
| Variable | Description |
|
|
388
|
+
| -------------------------------- | ---------------------------------------- |
|
|
389
|
+
| `--chat-base-font-size` | The base font size of the chat component |
|
|
390
|
+
| `--chat-message-mine` | The background color of my messages |
|
|
391
|
+
| `--chat-message-mine-foreground` | The text/icon color on my messages |
|
|
392
|
+
| `--chat-success` | The background color of success badge |
|
|
393
|
+
| `--chat-success-foreground` | The text color on success badge |
|
|
394
|
+
| `--chat-danger` | The background color of danger badge |
|
|
395
|
+
| `--chat-danger-foreground` | The text color on danger badge |
|
|
396
|
+
| `--chat-warning` | The background color of warning badge |
|
|
397
|
+
| `--chat-warning-foreground` | The text color on warning badge |
|
|
398
|
+
| `--chat-info` | The background color of info badge |
|
|
399
|
+
| `--chat-info-foreground` | The text color on info badge |
|
|
400
|
+
|
|
401
|
+
### Usage
|
|
367
402
|
|
|
368
403
|
You can override the component's style using CSS custom properties (variables). These are applied directly to `advanced-chat-kai` element:
|
|
369
404
|
|
|
370
405
|
```css
|
|
371
406
|
advanced-chat-kai {
|
|
372
|
-
--chat-
|
|
373
|
-
--chat-
|
|
374
|
-
--chat-
|
|
375
|
-
--chat-
|
|
407
|
+
--chat-primary: oklch(0.65 0.24 15);
|
|
408
|
+
--chat-primary-foreground: oklch(1 0 0);
|
|
409
|
+
--chat-message-mine: oklch(0.65 0.24 15);
|
|
410
|
+
--chat-message-mine-foreground: oklch(1 0 0);
|
|
376
411
|
}
|
|
377
412
|
```
|
|
378
413
|
|