advanced-chat-kai 0.3.0 → 0.4.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.
Files changed (21) hide show
  1. package/README.md +55 -46
  2. package/dist/advanced-chat-kai.es.js +652 -603
  3. package/dist/consts/context.d.ts +5 -0
  4. package/dist/consts/context.d.ts.map +1 -0
  5. package/dist/consts/index.d.ts +1 -0
  6. package/dist/consts/index.d.ts.map +1 -1
  7. package/dist/contexts/current-user-id-context.d.ts +4 -0
  8. package/dist/contexts/current-user-id-context.d.ts.map +1 -0
  9. package/dist/contexts/footer-context.d.ts +12 -0
  10. package/dist/contexts/footer-context.d.ts.map +1 -0
  11. package/dist/contexts/i18n-context.d.ts +8 -0
  12. package/dist/contexts/i18n-context.d.ts.map +1 -0
  13. package/dist/contexts/index.d.ts +7 -0
  14. package/dist/contexts/index.d.ts.map +1 -0
  15. package/dist/contexts/message-context.d.ts +20 -0
  16. package/dist/contexts/message-context.d.ts.map +1 -0
  17. package/dist/contexts/room-context.d.ts +14 -0
  18. package/dist/contexts/room-context.d.ts.map +1 -0
  19. package/dist/contexts/sidebar-context.d.ts +4 -0
  20. package/dist/contexts/sidebar-context.d.ts.map +1 -0
  21. package/package.json +1 -1
package/README.md CHANGED
@@ -19,6 +19,15 @@ 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
+ ## Table of contents
23
+ - [Installation](#installation)
24
+ - [Usage](#usage)
25
+ - [Props](#props)
26
+ - [Events](#events)
27
+ - [Styling](#styling)
28
+ - [Contributing](#contributing)
29
+ - [License](#license)
30
+
22
31
  ## Installation
23
32
 
24
33
  ```
@@ -294,36 +303,36 @@ this.messages.push(newMessage);
294
303
 
295
304
  ## Styling
296
305
 
297
- The `--surface-50` to `--surface-950` variables define the primary surface color scale, used across light and dark themes for backgrounds and component surfaces.
306
+ The `--chat-surface-50` to `--chat-surface-950` variables define the primary surface color scale, used across light and dark themes for backgrounds and component surfaces.
298
307
 
299
308
  | Variable | Description |
300
309
  | -------------------------------------- | --------------------------------------------------- |
301
- | `--base-font-size` | The base font size of the chat component |
302
- | `--white` | |
303
- | `--black` | |
304
- | `--success` | |
305
- | `--danger` | |
306
- | `--warning` | |
307
- | `--info` | |
308
- | `--surface-50` | |
309
- | `--surface-100` | |
310
- | `--surface-200` | |
311
- | `--surface-300` | |
312
- | `--surface-400` | |
313
- | `--surface-500` | |
314
- | `--surface-600` | |
315
- | `--surface-700` | |
316
- | `--surface-800` | |
317
- | `--surface-900` | |
318
- | `--surface-950` | |
319
- | `--text` | The default text color |
320
- | `--subtext` | The default subtext color |
321
- | `--border` | The default border color |
322
- | `--floating-item-border` | The default border color for floating items |
323
- | `--floating-item-box-shadow` | The default box shadow for floating items |
324
- | `--placeholder` | The default placeholder color |
325
- | `--deleted` | The default background color for deleted messages |
326
- | `--overlay` | The default background color for overlay |
310
+ | `--chat-base-font-size` | The base font size of the chat component |
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` | The default text color |
329
+ | `--chat-subtext` | The default subtext color |
330
+ | `--chat-border` | The default border color |
331
+ | `--chat-floating-item-border` | The default border color for floating items |
332
+ | `--chat-floating-item-box-shadow` | The default box shadow for floating items |
333
+ | `--chat-placeholder` | The default placeholder color |
334
+ | `--chat-deleted` | The default background color for deleted messages |
335
+ | `--chat-overlay` | The default background color for overlay |
327
336
  | `--chat-notification-badge-background` | The default background color for notification badge |
328
337
  | `--chat-notification-badge-text` | The default text color for notification badge |
329
338
 
@@ -331,30 +340,30 @@ Also, a minimal set of CSS variables is exposed specifically for applying brand
331
340
 
332
341
  | Variable | Description |
333
342
  | --------------------------------- | ------------------------------------------------------------------- |
334
- | `--send-button-bg` | The background color of the send button |
335
- | `--send-button-bg-hover` | The background color of the send button on hover |
336
- | `--my-message-bg` | The background color of my messages |
337
- | `--my-message-bg-selected` | The background color of my messages when selected |
338
- | `--my-reaction-list-bg` | The background color of the reaction list on my messages |
339
- | `--my-reaction-button-bg` | The background color of the reaction button on my messages |
340
- | `--my-reaction-button-bg-hover` | The background color of the reaction button on my messages on hover |
341
- | `--suggestion-list-item-bg` | The background color of the suggestion list item |
342
- | `--suggestion-list-item-bg-hover` | The background color of the suggestion list item on hover |
343
- | `--my-message-menu-bg` | The background color of the message menu on my messages |
344
- | `--my-message-button-bg-hover` | The background color of the message button on my messages on hover |
345
- | `--my-attachment-bg` | The background color of the attachment on my messages |
346
- | `--my-attachment-bg-hover` | The background color of the attachment on my messages on hover |
347
- | `--text-on-brand` | The text color on brand colors |
348
- | `--subtext-on-brand` | The subtext color on brand colors |
343
+ | `--chat-send-button-bg` | The background color of the send button |
344
+ | `--chat-send-button-bg-hover` | The background color of the send button on hover |
345
+ | `--chat-my-message-bg` | The background color of my messages |
346
+ | `--chat-my-message-bg-selected` | The background color of my messages when selected |
347
+ | `--chat-my-reaction-list-bg` | The background color of the reaction list on my messages |
348
+ | `--chat-my-reaction-button-bg` | The background color of the reaction button on my messages |
349
+ | `--chat-my-reaction-button-bg-hover` | The background color of the reaction button on my messages on hover |
350
+ | `--chat-suggestion-list-item-bg` | The background color of the suggestion list item |
351
+ | `--chat-suggestion-list-item-bg-hover` | The background color of the suggestion list item on hover |
352
+ | `--chat-my-message-menu-bg` | The background color of the message menu on my messages |
353
+ | `--chat-my-message-button-bg-hover` | The background color of the message button on my messages on hover |
354
+ | `--chat-my-attachment-bg` | The background color of the attachment on my messages |
355
+ | `--chat-my-attachment-bg-hover` | The background color of the attachment on my messages on hover |
356
+ | `--chat-text-on-brand` | The text color on brand colors |
357
+ | `--chat-subtext-on-brand` | The subtext color on brand colors |
349
358
 
350
359
  You can override the component's style using CSS custom properties (variables). These are applied directly to `advanced-chat-kai` element:
351
360
 
352
361
  ```css
353
362
  advanced-chat-kai {
354
- --success: green;
355
- --danger: red;
356
- --warning: yellow;
357
- --info: blue;
363
+ --chat-success: green;
364
+ --chat-danger: red;
365
+ --chat-warning: yellow;
366
+ --chat-info: blue;
358
367
  }
359
368
  ```
360
369