advanced-chat-kai 0.2.0 → 0.3.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 +23 -0
- package/dist/advanced-chat-kai.es.js +536 -415
- package/dist/types/props.d.ts +1 -0
- package/dist/types/props.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
|
|
5
6
|
|
|
6
7
|
   [](https://opensource.org/licenses/MIT) [](https://codecov.io/gh/spider-hand/advanced-chat-kai)
|
|
7
8
|
|
|
@@ -60,6 +61,7 @@ npm install advanced-chat-kai
|
|
|
60
61
|
| `showRoomAvatar` | boolean | false | `true` | Whether the room avatar on the list of rooms should be rendered or not |
|
|
61
62
|
| `showTheirAvatar` | boolean | false | `true` | Whether the other user's avatar on the message should be rendered or not |
|
|
62
63
|
| `alignMyMessagesLeft` | boolean | false | `false` | Whether my messages should be aligned to the left or not |
|
|
64
|
+
| `enterToSend` | boolean | false | `false` | Whether the enter key should send the message or not |
|
|
63
65
|
| `dialog` | [Dialog](#dialog) \| null | false | `null` | The dialog to be rendered |
|
|
64
66
|
| `height` | string | false | `"60em"` | The height of the chat component |
|
|
65
67
|
| `width` | string | false | `"80em"` | The width of the chat component |
|
|
@@ -315,6 +317,7 @@ The `--surface-50` to `--surface-950` variables define the primary surface color
|
|
|
315
317
|
| `--surface-900` | |
|
|
316
318
|
| `--surface-950` | |
|
|
317
319
|
| `--text` | The default text color |
|
|
320
|
+
| `--subtext` | The default subtext color |
|
|
318
321
|
| `--border` | The default border color |
|
|
319
322
|
| `--floating-item-border` | The default border color for floating items |
|
|
320
323
|
| `--floating-item-box-shadow` | The default box shadow for floating items |
|
|
@@ -324,6 +327,26 @@ The `--surface-50` to `--surface-950` variables define the primary surface color
|
|
|
324
327
|
| `--chat-notification-badge-background` | The default background color for notification badge |
|
|
325
328
|
| `--chat-notification-badge-text` | The default text color for notification badge |
|
|
326
329
|
|
|
330
|
+
Also, a minimal set of CSS variables is exposed specifically for applying brand colors to the key UI elements:
|
|
331
|
+
|
|
332
|
+
| Variable | Description |
|
|
333
|
+
| --------------------------------- | ------------------------------------------------------------------- |
|
|
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 |
|
|
349
|
+
|
|
327
350
|
You can override the component's style using CSS custom properties (variables). These are applied directly to `advanced-chat-kai` element:
|
|
328
351
|
|
|
329
352
|
```css
|