advanced-chat-kai 0.4.1 → 0.4.2
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
CHANGED
|
@@ -19,7 +19,16 @@ A highly customizable Web Component for building chat interfaces
|
|
|
19
19
|
- Theming support - Built-in light and dark themes
|
|
20
20
|
- Customizable style - Easily style components with CSS variables
|
|
21
21
|
|
|
22
|
+
### Comparison
|
|
23
|
+
|
|
24
|
+
| | Bundle size (minified) | Bundle size (minified + gzipped) | Download time (slow 3G) | Download time (4G) |
|
|
25
|
+
| ------------------- | ---------------------- | -------------------------------- | ----------------------- | ------------------ |
|
|
26
|
+
| `advanced-chat-kai` | 112.9kB | 23.2kB | 465ms | 27ms |
|
|
27
|
+
| `vue-advanced-chat` | 493.4kB | 149.8kB | 3s | 171ms |
|
|
28
|
+
| | 📦 **77% smaller** | 📦 **84% smaller** | ⚡️ **85% faster** | ⚡️ **84% faster** |
|
|
29
|
+
|
|
22
30
|
## Table of contents
|
|
31
|
+
|
|
23
32
|
- [Installation](#installation)
|
|
24
33
|
- [Usage](#usage)
|
|
25
34
|
- [Props](#props)
|
|
@@ -263,7 +272,7 @@ const DEFAULT_I18N = {
|
|
|
263
272
|
};
|
|
264
273
|
```
|
|
265
274
|
|
|
266
|
-
### ⚠️
|
|
275
|
+
### ⚠️ Note on updating arrays and objects
|
|
267
276
|
|
|
268
277
|
Lit uses shallow comparison to detect changes to reactive properties. When working with arrays or objects, you must assign a new reference to trigger updates. Mutating the existing object or array in place (e.g. using `push()` or modifying a property directly) will not cause the component to update.
|
|
269
278
|
|
|
@@ -307,39 +316,39 @@ The `--chat-surface-50` to `--chat-surface-950` variables define the primary sur
|
|
|
307
316
|
|
|
308
317
|
| Variable | Description |
|
|
309
318
|
| -------------------------------------- | --------------------------------------------------- |
|
|
310
|
-
| `--chat-base-font-size`
|
|
311
|
-
| `--chat-white`
|
|
312
|
-
| `--chat-black`
|
|
313
|
-
| `--chat-success`
|
|
314
|
-
| `--chat-danger`
|
|
315
|
-
| `--chat-warning`
|
|
316
|
-
| `--chat-info`
|
|
317
|
-
| `--chat-surface-50`
|
|
318
|
-
| `--chat-surface-100`
|
|
319
|
-
| `--chat-surface-200`
|
|
320
|
-
| `--chat-surface-300`
|
|
321
|
-
| `--chat-surface-400`
|
|
322
|
-
| `--chat-surface-500`
|
|
323
|
-
| `--chat-surface-600`
|
|
324
|
-
| `--chat-surface-700`
|
|
325
|
-
| `--chat-surface-800`
|
|
326
|
-
| `--chat-surface-900`
|
|
327
|
-
| `--chat-surface-950`
|
|
328
|
-
| `--chat-text`
|
|
329
|
-
| `--chat-subtext`
|
|
330
|
-
| `--chat-border`
|
|
331
|
-
| `--chat-floating-item-border`
|
|
332
|
-
| `--chat-floating-item-box-shadow`
|
|
333
|
-
| `--chat-placeholder`
|
|
334
|
-
| `--chat-deleted`
|
|
335
|
-
| `--chat-overlay`
|
|
319
|
+
| `--chat-base-font-size` | The base font size of the chat component |
|
|
320
|
+
| `--chat-white` | |
|
|
321
|
+
| `--chat-black` | |
|
|
322
|
+
| `--chat-success` | |
|
|
323
|
+
| `--chat-danger` | |
|
|
324
|
+
| `--chat-warning` | |
|
|
325
|
+
| `--chat-info` | |
|
|
326
|
+
| `--chat-surface-50` | |
|
|
327
|
+
| `--chat-surface-100` | |
|
|
328
|
+
| `--chat-surface-200` | |
|
|
329
|
+
| `--chat-surface-300` | |
|
|
330
|
+
| `--chat-surface-400` | |
|
|
331
|
+
| `--chat-surface-500` | |
|
|
332
|
+
| `--chat-surface-600` | |
|
|
333
|
+
| `--chat-surface-700` | |
|
|
334
|
+
| `--chat-surface-800` | |
|
|
335
|
+
| `--chat-surface-900` | |
|
|
336
|
+
| `--chat-surface-950` | |
|
|
337
|
+
| `--chat-text` | The default text color |
|
|
338
|
+
| `--chat-subtext` | The default subtext color |
|
|
339
|
+
| `--chat-border` | The default border color |
|
|
340
|
+
| `--chat-floating-item-border` | The default border color for floating items |
|
|
341
|
+
| `--chat-floating-item-box-shadow` | The default box shadow for floating items |
|
|
342
|
+
| `--chat-placeholder` | The default placeholder color |
|
|
343
|
+
| `--chat-deleted` | The default background color for deleted messages |
|
|
344
|
+
| `--chat-overlay` | The default background color for overlay |
|
|
336
345
|
| `--chat-notification-badge-background` | The default background color for notification badge |
|
|
337
346
|
| `--chat-notification-badge-text` | The default text color for notification badge |
|
|
338
347
|
|
|
339
348
|
Also, a minimal set of CSS variables is exposed specifically for applying brand colors to the key UI elements:
|
|
340
349
|
|
|
341
|
-
| Variable
|
|
342
|
-
|
|
|
350
|
+
| Variable | Description |
|
|
351
|
+
| -------------------------------------- | ------------------------------------------------------------------- |
|
|
343
352
|
| `--chat-send-button-bg` | The background color of the send button |
|
|
344
353
|
| `--chat-send-button-bg-hover` | The background color of the send button on hover |
|
|
345
354
|
| `--chat-my-message-bg` | The background color of my messages |
|
|
@@ -1351,7 +1351,10 @@ class F extends u {
|
|
|
1351
1351
|
}
|
|
1352
1352
|
|
|
1353
1353
|
.chat-message-menu--mine {
|
|
1354
|
-
background-color: var(
|
|
1354
|
+
background-color: var(
|
|
1355
|
+
--chat-my-message-menu-bg,
|
|
1356
|
+
var(--chat-surface-200)
|
|
1357
|
+
);
|
|
1355
1358
|
}
|
|
1356
1359
|
|
|
1357
1360
|
.chat-message-menu__button {
|
|
@@ -1370,7 +1373,10 @@ class F extends u {
|
|
|
1370
1373
|
}
|
|
1371
1374
|
|
|
1372
1375
|
.chat-message-menu--mine .chat-message-menu__button:hover {
|
|
1373
|
-
background-color: var(
|
|
1376
|
+
background-color: var(
|
|
1377
|
+
--chat-my-message-button-bg-hover,
|
|
1378
|
+
var(--chat-surface-300)
|
|
1379
|
+
);
|
|
1374
1380
|
}
|
|
1375
1381
|
`
|
|
1376
1382
|
];
|
|
@@ -1496,7 +1502,10 @@ class W extends u {
|
|
|
1496
1502
|
}
|
|
1497
1503
|
|
|
1498
1504
|
.chat-message-reaction-list--mine {
|
|
1499
|
-
background-color: var(
|
|
1505
|
+
background-color: var(
|
|
1506
|
+
--chat-my-reaction-list-bg,
|
|
1507
|
+
var(--chat-surface-200)
|
|
1508
|
+
);
|
|
1500
1509
|
}
|
|
1501
1510
|
|
|
1502
1511
|
.chat-message-reaction-list--right-aligned {
|
|
@@ -1527,7 +1536,10 @@ class W extends u {
|
|
|
1527
1536
|
|
|
1528
1537
|
.chat-message-reaction-list--mine
|
|
1529
1538
|
.chat-message-reaction-list__button--reacted {
|
|
1530
|
-
background-color: var(
|
|
1539
|
+
background-color: var(
|
|
1540
|
+
--chat-my-reaction-button-bg,
|
|
1541
|
+
var(--chat-surface-300)
|
|
1542
|
+
);
|
|
1531
1543
|
}
|
|
1532
1544
|
|
|
1533
1545
|
.chat-message-reaction-list__button:hover {
|
|
@@ -1646,7 +1658,10 @@ class Rt extends u {
|
|
|
1646
1658
|
|
|
1647
1659
|
.chat-message-attachment-list--mine
|
|
1648
1660
|
.chat-message-attachment-list__item:hover {
|
|
1649
|
-
background-color: var(
|
|
1661
|
+
background-color: var(
|
|
1662
|
+
--chat-my-attachment-bg-hover,
|
|
1663
|
+
var(--chat-surface-400)
|
|
1664
|
+
);
|
|
1650
1665
|
}
|
|
1651
1666
|
|
|
1652
1667
|
.chat-message-attachment-list--mine .chat-message-attachment-list__text {
|
|
@@ -2038,7 +2053,10 @@ class _ extends u {
|
|
|
2038
2053
|
}
|
|
2039
2054
|
|
|
2040
2055
|
.chat-message-item--selected .chat-message-item__body--mine {
|
|
2041
|
-
background-color: var(
|
|
2056
|
+
background-color: var(
|
|
2057
|
+
--chat-my-message-bg-selected,
|
|
2058
|
+
var(--chat-surface-300)
|
|
2059
|
+
);
|
|
2042
2060
|
}
|
|
2043
2061
|
`
|
|
2044
2062
|
];
|
|
@@ -2294,7 +2312,10 @@ class Ot extends u {
|
|
|
2294
2312
|
margin-right: 0;
|
|
2295
2313
|
color: var(--chat-text-on-brand, var(--chat-text));
|
|
2296
2314
|
text-align: left;
|
|
2297
|
-
background-color: var(
|
|
2315
|
+
background-color: var(
|
|
2316
|
+
--chat-suggestion-list-item-bg,
|
|
2317
|
+
var(--chat-surface-200)
|
|
2318
|
+
);
|
|
2298
2319
|
border: none;
|
|
2299
2320
|
border-radius: 0.8em;
|
|
2300
2321
|
}
|
|
@@ -2982,7 +3003,7 @@ class T extends u {
|
|
|
2982
3003
|
);
|
|
2983
3004
|
}
|
|
2984
3005
|
_onSelectEmoji(t) {
|
|
2985
|
-
this.
|
|
3006
|
+
this._textareaValue += t.detail.emoji, this._textarea.value = this._textareaValue, this._showEmojiPicker = !1;
|
|
2986
3007
|
}
|
|
2987
3008
|
_toggleEmojiPicker() {
|
|
2988
3009
|
this._showEmojiPicker = !this._showEmojiPicker;
|
|
@@ -4243,13 +4264,19 @@ customElements.define("chat-container", at);
|
|
|
4243
4264
|
customElements.define("chat-deleted-message", gt);
|
|
4244
4265
|
customElements.define("chat-dialog", ue);
|
|
4245
4266
|
customElements.define("chat-emoji-picker", U);
|
|
4246
|
-
customElements.define(
|
|
4267
|
+
customElements.define(
|
|
4268
|
+
"chat-footer-attachment-section",
|
|
4269
|
+
pe
|
|
4270
|
+
);
|
|
4247
4271
|
customElements.define("chat-footer-reply-to-section", me);
|
|
4248
4272
|
customElements.define("chat-footer", T);
|
|
4249
4273
|
customElements.define("chat-header", ut);
|
|
4250
4274
|
customElements.define("chat-loader", ce);
|
|
4251
4275
|
customElements.define("chat-message-divider", le);
|
|
4252
|
-
customElements.define(
|
|
4276
|
+
customElements.define(
|
|
4277
|
+
"chat-message-attachment-list",
|
|
4278
|
+
Rt
|
|
4279
|
+
);
|
|
4253
4280
|
customElements.define("chat-message-item", _);
|
|
4254
4281
|
customElements.define("chat-message-list", k);
|
|
4255
4282
|
customElements.define("chat-message-menu", F);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"current-user-id-context.d.ts","sourceRoot":"","sources":["../../src/contexts/current-user-id-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;
|
|
1
|
+
{"version":3,"file":"current-user-id-context.d.ts","sourceRoot":"","sources":["../../src/contexts/current-user-id-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;CAEhC,CAAC"}
|
package/dist/types/event.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export interface SelectMessageActionDetail<T extends string | number | boolean>
|
|
|
12
12
|
export interface SearchRoomDetail {
|
|
13
13
|
value: string;
|
|
14
14
|
}
|
|
15
|
-
export interface
|
|
15
|
+
export interface SelectEmojiDetail {
|
|
16
16
|
messageId: string;
|
|
17
17
|
currentUserId: string | null;
|
|
18
18
|
emoji: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"event.d.ts","sourceRoot":"","sources":["../../src/types/event.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB,CACxC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO;IAEnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"event.d.ts","sourceRoot":"","sources":["../../src/types/event.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB,CACxC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,OAAO;IAEnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;KACpB,CAAC;CACH;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "advanced-chat-kai",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.2",
|
|
4
4
|
"description": "A highly customizable chat web component",
|
|
5
5
|
"main": "dist/advanced-chat-kai.es.js",
|
|
6
6
|
"module": "dist/advanced-chat-kai.es.js",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@blockquote/rollup-plugin-externalize-source-dependencies": "^1.0.0",
|
|
56
56
|
"@lit/context": "^1.1.5",
|
|
57
57
|
"@open-wc/testing": "^4.0.0",
|
|
58
|
-
"@storybook/web-components-vite": "^
|
|
58
|
+
"@storybook/web-components-vite": "^10.0.2",
|
|
59
59
|
"@typescript-eslint/parser": "^8.31.1",
|
|
60
60
|
"@vitest/browser": "^3.1.2",
|
|
61
61
|
"@vitest/coverage-v8": "^3.1.2",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"eslint-import-resolver-typescript": "^4.3.4",
|
|
67
67
|
"eslint-plugin-import": "^2.31.0",
|
|
68
68
|
"eslint-plugin-lit": "^2.1.1",
|
|
69
|
-
"eslint-plugin-storybook": "^
|
|
69
|
+
"eslint-plugin-storybook": "^10.0.2",
|
|
70
70
|
"globals": "^16.0.0",
|
|
71
71
|
"husky": "^9.1.7",
|
|
72
72
|
"jsdom": "^26.1.0",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"postcss-lit": "^1.2.0",
|
|
78
78
|
"prettier": "^3.5.3",
|
|
79
79
|
"rollup-plugin-visualizer": "^5.14.0",
|
|
80
|
-
"storybook": "^
|
|
80
|
+
"storybook": "^10.0.2",
|
|
81
81
|
"stylelint": "^16.19.1",
|
|
82
82
|
"stylelint-config-recess-order": "^6.0.0",
|
|
83
83
|
"stylelint-config-standard": "^38.0.0",
|