@vaadin/message-list 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1
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/custom-elements.json +77 -63
- package/package.json +12 -11
- package/src/styles/vaadin-message-base-styles.js +97 -0
- package/src/styles/vaadin-message-list-base-styles.d.ts +8 -0
- package/src/styles/vaadin-message-list-base-styles.js +76 -0
- package/src/vaadin-message-list-mixin.js +164 -17
- package/src/vaadin-message-list.d.ts +17 -1
- package/src/vaadin-message-list.js +43 -21
- package/src/vaadin-message-mixin.d.ts +1 -0
- package/src/vaadin-message-mixin.js +15 -0
- package/src/vaadin-message.d.ts +20 -4
- package/src/vaadin-message.js +21 -4
- package/web-types.json +7 -11
- package/web-types.lit.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
"declarations": [
|
|
137
137
|
{
|
|
138
138
|
"kind": "class",
|
|
139
|
-
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nSee the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available\
|
|
139
|
+
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------- |\n`--vaadin-message-list-max-width` |\n`--vaadin-message-list-padding` |\n\n### Built-in Theme Variants\n\n`<vaadin-message-list>` supports the following theme variants:\n\nTheme variant | Description\n---------------------|---------------\n`theme=\"bubble\"` | Shows the messages as chat bubbles\n`theme=\"one-to-one\"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`\n\nSee the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available\ntheme variants, state attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
140
140
|
"name": "MessageList",
|
|
141
141
|
"members": [
|
|
142
142
|
{
|
|
@@ -195,34 +195,6 @@
|
|
|
195
195
|
}
|
|
196
196
|
}
|
|
197
197
|
],
|
|
198
|
-
"mixins": [
|
|
199
|
-
{
|
|
200
|
-
"name": "SlotStylesMixin",
|
|
201
|
-
"package": "@vaadin/component-base/src/slot-styles-mixin.js"
|
|
202
|
-
},
|
|
203
|
-
{
|
|
204
|
-
"name": "MessageListMixin",
|
|
205
|
-
"module": "src/vaadin-message-list-mixin.js"
|
|
206
|
-
},
|
|
207
|
-
{
|
|
208
|
-
"name": "ElementMixin",
|
|
209
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
210
|
-
},
|
|
211
|
-
{
|
|
212
|
-
"name": "ThemableMixin",
|
|
213
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"name": "PolylitMixin",
|
|
217
|
-
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
218
|
-
}
|
|
219
|
-
],
|
|
220
|
-
"superclass": {
|
|
221
|
-
"name": "LitElement",
|
|
222
|
-
"package": "lit"
|
|
223
|
-
},
|
|
224
|
-
"tagName": "vaadin-message-list",
|
|
225
|
-
"customElement": true,
|
|
226
198
|
"attributes": [
|
|
227
199
|
{
|
|
228
200
|
"name": "announce-messages",
|
|
@@ -259,8 +231,43 @@
|
|
|
259
231
|
"name": "MessageListMixin",
|
|
260
232
|
"module": "src/vaadin-message-list-mixin.js"
|
|
261
233
|
}
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "string"
|
|
238
|
+
},
|
|
239
|
+
"description": "The theme variants to apply to the component.",
|
|
240
|
+
"name": "theme"
|
|
262
241
|
}
|
|
263
|
-
]
|
|
242
|
+
],
|
|
243
|
+
"mixins": [
|
|
244
|
+
{
|
|
245
|
+
"name": "SlotStylesMixin",
|
|
246
|
+
"package": "@vaadin/component-base/src/slot-styles-mixin.js"
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"name": "MessageListMixin",
|
|
250
|
+
"module": "src/vaadin-message-list-mixin.js"
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
"name": "ElementMixin",
|
|
254
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"name": "ThemableMixin",
|
|
258
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "PolylitMixin",
|
|
262
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
263
|
+
}
|
|
264
|
+
],
|
|
265
|
+
"superclass": {
|
|
266
|
+
"name": "LitElement",
|
|
267
|
+
"package": "lit"
|
|
268
|
+
},
|
|
269
|
+
"tagName": "vaadin-message-list",
|
|
270
|
+
"customElement": true
|
|
264
271
|
}
|
|
265
272
|
],
|
|
266
273
|
"exports": [
|
|
@@ -320,7 +327,7 @@
|
|
|
320
327
|
"type": {
|
|
321
328
|
"text": "number"
|
|
322
329
|
},
|
|
323
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
330
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
324
331
|
"attribute": "user-color-index"
|
|
325
332
|
},
|
|
326
333
|
{
|
|
@@ -374,7 +381,7 @@
|
|
|
374
381
|
"type": {
|
|
375
382
|
"text": "number"
|
|
376
383
|
},
|
|
377
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
384
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
378
385
|
"fieldName": "userColorIndex"
|
|
379
386
|
},
|
|
380
387
|
{
|
|
@@ -424,7 +431,7 @@
|
|
|
424
431
|
"declarations": [
|
|
425
432
|
{
|
|
426
433
|
"kind": "class",
|
|
427
|
-
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
434
|
+
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n`typing-indicator` | Set when the message is rendered as a typing indicator. The value is the indicator style: empty, `ellipsis` or `minimal`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-attachments-alignment` |\n`--vaadin-message-content-background` |\n`--vaadin-message-content-border-radius` |\n`--vaadin-message-content-padding` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n`--vaadin-message-user-color` |\n\n### Built-in Theme Variants\n\n`<vaadin-message>` supports the following theme variants. Both of them require the parent\n[`<vaadin-message-list>`](#/elements/vaadin-message-list) to use `theme=\"bubble\"`:\n\nTheme variant | Description\n----------------------|---------------\n`theme=\"self\"` | Shows the message as sent by the current user, hides the avatar and name\n`theme=\"full-width\"` | Removes the bubble and the width restriction, for an assistant or AI response\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
428
435
|
"name": "Message",
|
|
429
436
|
"members": [
|
|
430
437
|
{
|
|
@@ -476,7 +483,7 @@
|
|
|
476
483
|
"type": {
|
|
477
484
|
"text": "number"
|
|
478
485
|
},
|
|
479
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
486
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
480
487
|
"attribute": "user-color-index",
|
|
481
488
|
"inheritedFrom": {
|
|
482
489
|
"name": "MessageMixin",
|
|
@@ -525,35 +532,14 @@
|
|
|
525
532
|
}
|
|
526
533
|
}
|
|
527
534
|
],
|
|
528
|
-
"
|
|
529
|
-
{
|
|
530
|
-
"name": "MessageMixin",
|
|
531
|
-
"module": "src/vaadin-message-mixin.js"
|
|
532
|
-
},
|
|
533
|
-
{
|
|
534
|
-
"name": "ElementMixin",
|
|
535
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
"name": "ThemableMixin",
|
|
539
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
540
|
-
},
|
|
535
|
+
"attributes": [
|
|
541
536
|
{
|
|
542
|
-
"
|
|
543
|
-
|
|
537
|
+
"type": {
|
|
538
|
+
"text": "string"
|
|
539
|
+
},
|
|
540
|
+
"description": "The theme variants to apply to the component.",
|
|
541
|
+
"name": "theme"
|
|
544
542
|
},
|
|
545
|
-
{
|
|
546
|
-
"name": "LumoInjectionMixin",
|
|
547
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
548
|
-
}
|
|
549
|
-
],
|
|
550
|
-
"superclass": {
|
|
551
|
-
"name": "LitElement",
|
|
552
|
-
"package": "lit"
|
|
553
|
-
},
|
|
554
|
-
"tagName": "vaadin-message",
|
|
555
|
-
"customElement": true,
|
|
556
|
-
"attributes": [
|
|
557
543
|
{
|
|
558
544
|
"name": "time",
|
|
559
545
|
"type": {
|
|
@@ -583,7 +569,7 @@
|
|
|
583
569
|
"type": {
|
|
584
570
|
"text": "number"
|
|
585
571
|
},
|
|
586
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
572
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
587
573
|
"fieldName": "userColorIndex",
|
|
588
574
|
"inheritedFrom": {
|
|
589
575
|
"name": "MessageMixin",
|
|
@@ -614,7 +600,35 @@
|
|
|
614
600
|
"module": "src/vaadin-message-mixin.js"
|
|
615
601
|
}
|
|
616
602
|
}
|
|
617
|
-
]
|
|
603
|
+
],
|
|
604
|
+
"mixins": [
|
|
605
|
+
{
|
|
606
|
+
"name": "MessageMixin",
|
|
607
|
+
"module": "src/vaadin-message-mixin.js"
|
|
608
|
+
},
|
|
609
|
+
{
|
|
610
|
+
"name": "ElementMixin",
|
|
611
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
612
|
+
},
|
|
613
|
+
{
|
|
614
|
+
"name": "ThemableMixin",
|
|
615
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "PolylitMixin",
|
|
619
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
620
|
+
},
|
|
621
|
+
{
|
|
622
|
+
"name": "LumoInjectionMixin",
|
|
623
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
624
|
+
}
|
|
625
|
+
],
|
|
626
|
+
"superclass": {
|
|
627
|
+
"name": "LitElement",
|
|
628
|
+
"package": "lit"
|
|
629
|
+
},
|
|
630
|
+
"tagName": "vaadin-message",
|
|
631
|
+
"customElement": true
|
|
618
632
|
}
|
|
619
633
|
],
|
|
620
634
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/message-list",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-rc1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,19 +37,20 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
41
|
-
"@vaadin/avatar": "25.3.0-
|
|
42
|
-
"@vaadin/
|
|
43
|
-
"@vaadin/
|
|
44
|
-
"@vaadin/
|
|
40
|
+
"@vaadin/a11y-base": "25.3.0-rc1",
|
|
41
|
+
"@vaadin/avatar": "25.3.0-rc1",
|
|
42
|
+
"@vaadin/avatar-group": "25.3.0-rc1",
|
|
43
|
+
"@vaadin/component-base": "25.3.0-rc1",
|
|
44
|
+
"@vaadin/markdown": "25.3.0-rc1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
|
|
45
46
|
"lit": "^3.0.0"
|
|
46
47
|
},
|
|
47
48
|
"devDependencies": {
|
|
48
|
-
"@vaadin/aura": "25.3.0-
|
|
49
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
49
|
+
"@vaadin/aura": "25.3.0-rc1",
|
|
50
|
+
"@vaadin/chai-plugins": "25.3.0-rc1",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.3.0-rc1",
|
|
51
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
|
|
53
54
|
"sinon": "^22.0.0"
|
|
54
55
|
},
|
|
55
56
|
"customElements": "custom-elements.json",
|
|
@@ -57,5 +58,5 @@
|
|
|
57
58
|
"web-types.json",
|
|
58
59
|
"web-types.lit.json"
|
|
59
60
|
],
|
|
60
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
|
|
61
62
|
}
|
|
@@ -5,11 +5,20 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
|
+
import { registerCSSProperty } from '@vaadin/component-base/src/css-utils.js';
|
|
9
|
+
|
|
10
|
+
registerCSSProperty({
|
|
11
|
+
name: '--_vaadin-message-typing-mask-pos',
|
|
12
|
+
syntax: '<length-percentage>',
|
|
13
|
+
inherits: false,
|
|
14
|
+
initialValue: 0,
|
|
15
|
+
});
|
|
8
16
|
|
|
9
17
|
export const messageStyles = css`
|
|
10
18
|
:host {
|
|
11
19
|
display: flex;
|
|
12
20
|
flex-direction: row;
|
|
21
|
+
box-sizing: border-box;
|
|
13
22
|
padding: var(--vaadin-message-padding, var(--vaadin-padding-s) var(--vaadin-padding-m));
|
|
14
23
|
gap: var(--vaadin-message-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
|
|
15
24
|
outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
|
|
@@ -29,6 +38,9 @@ export const messageStyles = css`
|
|
|
29
38
|
flex-direction: column;
|
|
30
39
|
flex-grow: 1;
|
|
31
40
|
gap: inherit;
|
|
41
|
+
background: var(--vaadin-message-content-background, transparent);
|
|
42
|
+
padding: var(--vaadin-message-content-padding, 0);
|
|
43
|
+
border-radius: var(--vaadin-message-content-border-radius, 0);
|
|
32
44
|
}
|
|
33
45
|
|
|
34
46
|
[part='header'] {
|
|
@@ -62,6 +74,12 @@ export const messageStyles = css`
|
|
|
62
74
|
|
|
63
75
|
::slotted([slot='avatar']) {
|
|
64
76
|
flex: none;
|
|
77
|
+
visibility: var(--_vaadin-message-avatar-visibility, revert-layer);
|
|
78
|
+
display: var(--_vaadin-message-avatar-display, revert-layer);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
::slotted(vaadin-avatar-group) {
|
|
82
|
+
width: fit-content;
|
|
65
83
|
}
|
|
66
84
|
|
|
67
85
|
::slotted(vaadin-markdown) {
|
|
@@ -73,6 +91,7 @@ export const messageStyles = css`
|
|
|
73
91
|
flex-wrap: wrap;
|
|
74
92
|
gap: var(--vaadin-gap-s);
|
|
75
93
|
padding-bottom: var(--vaadin-gap-xs);
|
|
94
|
+
justify-content: var(--vaadin-message-attachments-alignment, start);
|
|
76
95
|
}
|
|
77
96
|
|
|
78
97
|
[part~='attachment'] {
|
|
@@ -132,4 +151,82 @@ export const messageStyles = css`
|
|
|
132
151
|
padding: var(--vaadin-message-attachment-padding, var(--vaadin-padding-s));
|
|
133
152
|
padding-inline-start: 0;
|
|
134
153
|
}
|
|
154
|
+
|
|
155
|
+
:host([typing-indicator]) [part='time'] {
|
|
156
|
+
display: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
:host([typing-indicator]:not([typing-indicator='text'])) [part='message'],
|
|
160
|
+
:host([typing-indicator='minimal']) [part='content'] {
|
|
161
|
+
width: fit-content !important;
|
|
162
|
+
color: var(--vaadin-text-color-secondary) !important;
|
|
163
|
+
|
|
164
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
165
|
+
color: var(--vaadin-text-color) !important;
|
|
166
|
+
mask-image: linear-gradient(
|
|
167
|
+
90deg,
|
|
168
|
+
hsla(0, 0%, 0%, 0.4) calc(var(--_vaadin-message-typing-mask-pos) - max(60px, 60%)),
|
|
169
|
+
hsl(0, 0%, 0%) calc(var(--_vaadin-message-typing-mask-pos) - max(40px, 40%)),
|
|
170
|
+
hsl(0, 0%, 0%) calc(var(--_vaadin-message-typing-mask-pos) - max(20px, 20%)),
|
|
171
|
+
hsla(0, 0%, 0%, 0.4) var(--_vaadin-message-typing-mask-pos)
|
|
172
|
+
);
|
|
173
|
+
animation: --_vaadin-message-typing-slide 1.5s ease-in-out infinite;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@keyframes --_vaadin-message-typing-slide {
|
|
178
|
+
100% {
|
|
179
|
+
--_vaadin-message-typing-mask-pos: calc(100% + max(60px, 60%));
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
:host([typing-indicator='ellipsis']) {
|
|
184
|
+
[part='message'] {
|
|
185
|
+
line-height: inherit !important;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
[part='message']::before {
|
|
189
|
+
content: '';
|
|
190
|
+
display: block;
|
|
191
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
192
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
193
|
+
mask: var(--_vaadin-icon-ellipsis);
|
|
194
|
+
background: currentColor;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
[part='header'],
|
|
198
|
+
[part='message'] slot {
|
|
199
|
+
display: none;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
[part='content'] {
|
|
203
|
+
align-self: center;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
:host([typing-indicator='minimal']) {
|
|
208
|
+
width: auto !important;
|
|
209
|
+
max-width: none !important;
|
|
210
|
+
align-items: center !important;
|
|
211
|
+
--vaadin-avatar-size: 1lh;
|
|
212
|
+
|
|
213
|
+
[part='content'] {
|
|
214
|
+
display: block;
|
|
215
|
+
background: transparent !important;
|
|
216
|
+
border: 0 !important;
|
|
217
|
+
padding: 0 !important;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
[part='header'],
|
|
221
|
+
[part='name'],
|
|
222
|
+
[part='message'] {
|
|
223
|
+
display: contents;
|
|
224
|
+
color: inherit;
|
|
225
|
+
font-size: inherit;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
[part='message'] {
|
|
229
|
+
text-transform: lowercase;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
135
232
|
`;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2026 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
|
|
9
|
+
export const messageListStyles = css`
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
overflow: auto;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
|
|
15
|
+
scroll-padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
|
|
16
|
+
scroll-snap-type: y proximity;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([hidden]) {
|
|
20
|
+
display: none !important;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
[part='list'] {
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
width: 100%;
|
|
28
|
+
min-height: 100%;
|
|
29
|
+
max-width: var(--vaadin-message-list-max-width, none);
|
|
30
|
+
margin-inline: auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[part='list']::after {
|
|
34
|
+
content: '';
|
|
35
|
+
display: block;
|
|
36
|
+
scroll-snap-align: var(--_vaadin-message-list-scroll-snap-align, none);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([theme~='bubble']) {
|
|
40
|
+
& ::slotted(vaadin-message) {
|
|
41
|
+
--vaadin-message-name-font-size: 0.9em;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
& ::slotted(vaadin-message[theme~='full-width']) {
|
|
45
|
+
padding-block: var(--vaadin-padding-xl);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
& ::slotted(vaadin-message:not([theme~='full-width'])) {
|
|
49
|
+
--vaadin-message-content-background: var(--vaadin-background-container);
|
|
50
|
+
--vaadin-message-content-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
|
|
51
|
+
--vaadin-message-content-border-radius: var(--vaadin-radius-l);
|
|
52
|
+
|
|
53
|
+
width: fit-content;
|
|
54
|
+
max-width: calc(100% - 2em);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
& ::slotted(vaadin-message[theme~='self']) {
|
|
58
|
+
--_vaadin-message-avatar-visibility: hidden;
|
|
59
|
+
--vaadin-message-content-background: linear-gradient(
|
|
60
|
+
color-mix(in srgb, var(--vaadin-message-user-color, var(--vaadin-user-color-0)) 10%, transparent)
|
|
61
|
+
)
|
|
62
|
+
var(--vaadin-background-color);
|
|
63
|
+
--vaadin-message-attachments-alignment: end;
|
|
64
|
+
align-items: end;
|
|
65
|
+
align-self: end;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:host([theme~='bubble'][theme~='one-to-one']) ::slotted(vaadin-message) {
|
|
70
|
+
--_vaadin-message-avatar-display: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
:host([theme~='bubble'][theme~='one-to-one']) ::slotted(vaadin-message[typing-indicator]) {
|
|
74
|
+
--vaadin-message-gap: 0;
|
|
75
|
+
}
|
|
76
|
+
`;
|
|
@@ -3,12 +3,15 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html, render } from 'lit';
|
|
6
|
+
import { html, nothing, render } from 'lit';
|
|
7
7
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
|
+
import { keyed } from 'lit/directives/keyed.js';
|
|
8
9
|
import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
|
|
9
10
|
import { timeOut } from '@vaadin/component-base/src/async.js';
|
|
10
11
|
import { Debouncer } from '@vaadin/component-base/src/debounce.js';
|
|
11
12
|
|
|
13
|
+
const DEFAULT_TYPING_INDICATOR_TEXT = 'Typing…';
|
|
14
|
+
|
|
12
15
|
export const MessageListMixin = (superClass) =>
|
|
13
16
|
class MessageListMixinClass extends KeyboardDirectionMixin(superClass) {
|
|
14
17
|
static get properties() {
|
|
@@ -42,7 +45,6 @@ export const MessageListMixin = (superClass) =>
|
|
|
42
45
|
items: {
|
|
43
46
|
type: Array,
|
|
44
47
|
value: () => [],
|
|
45
|
-
observer: '_itemsChanged',
|
|
46
48
|
sync: true,
|
|
47
49
|
},
|
|
48
50
|
|
|
@@ -51,7 +53,6 @@ export const MessageListMixin = (superClass) =>
|
|
|
51
53
|
*/
|
|
52
54
|
markdown: {
|
|
53
55
|
type: Boolean,
|
|
54
|
-
observer: '__markdownChanged',
|
|
55
56
|
reflectToAttribute: true,
|
|
56
57
|
},
|
|
57
58
|
|
|
@@ -65,12 +66,72 @@ export const MessageListMixin = (superClass) =>
|
|
|
65
66
|
observer: '__announceChanged',
|
|
66
67
|
sync: true,
|
|
67
68
|
},
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* An array of objects which will be rendered as avatars.
|
|
72
|
+
* The user objects can have the following properties:
|
|
73
|
+
* ```js
|
|
74
|
+
* Array<{
|
|
75
|
+
* name: string,
|
|
76
|
+
* abbr: string,
|
|
77
|
+
* img: string,
|
|
78
|
+
* colorIndex: number
|
|
79
|
+
* }>
|
|
80
|
+
* ```
|
|
81
|
+
* @private
|
|
82
|
+
*/
|
|
83
|
+
_usersTyping: {
|
|
84
|
+
type: Array,
|
|
85
|
+
value: () => [],
|
|
86
|
+
observer: '__typingIndicatorChanged',
|
|
87
|
+
sync: true,
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
/** @private */
|
|
91
|
+
_typingIndicatorText: {
|
|
92
|
+
type: String,
|
|
93
|
+
value: DEFAULT_TYPING_INDICATOR_TEXT,
|
|
94
|
+
observer: '__typingIndicatorChanged',
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
/** @private */
|
|
98
|
+
_typingIndicatorType: {
|
|
99
|
+
type: String,
|
|
100
|
+
observer: '__typingIndicatorChanged',
|
|
101
|
+
},
|
|
68
102
|
};
|
|
69
103
|
}
|
|
70
104
|
|
|
71
105
|
/** @protected */
|
|
72
106
|
get _messages() {
|
|
73
|
-
return [...this.querySelectorAll('vaadin-message')];
|
|
107
|
+
return [...this.querySelectorAll('vaadin-message:not([slot="typing-indicator"])')];
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* The text announced to assistive technology while users are typing,
|
|
112
|
+
* empty when no one is typing.
|
|
113
|
+
*
|
|
114
|
+
* @return {string}
|
|
115
|
+
* @private
|
|
116
|
+
*/
|
|
117
|
+
get __typingStatus() {
|
|
118
|
+
const users = this._usersTyping;
|
|
119
|
+
if (!users || users.length === 0) {
|
|
120
|
+
return '';
|
|
121
|
+
}
|
|
122
|
+
return [this.__getTypingUserNames(users), this.__typingIndicatorText].filter(Boolean).join(' ');
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* The text shown next to the names of the typing users. Falls back to the
|
|
127
|
+
* default text when the property is cleared, which is what a server-side
|
|
128
|
+
* integration does when it removes the property.
|
|
129
|
+
*
|
|
130
|
+
* @return {string}
|
|
131
|
+
* @private
|
|
132
|
+
*/
|
|
133
|
+
get __typingIndicatorText() {
|
|
134
|
+
return this._typingIndicatorText ?? DEFAULT_TYPING_INDICATOR_TEXT;
|
|
74
135
|
}
|
|
75
136
|
|
|
76
137
|
/** @protected */
|
|
@@ -82,6 +143,19 @@ export const MessageListMixin = (superClass) =>
|
|
|
82
143
|
this.setAttribute('role', 'region');
|
|
83
144
|
}
|
|
84
145
|
|
|
146
|
+
/** @protected */
|
|
147
|
+
updated(props) {
|
|
148
|
+
super.updated(props);
|
|
149
|
+
|
|
150
|
+
if (props.has('items')) {
|
|
151
|
+
this._itemsChanged(this.items, props.get('items'));
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
if (props.has('markdown')) {
|
|
155
|
+
this.__markdownChanged(this.markdown);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
85
159
|
/**
|
|
86
160
|
* Handles attachment-click events from child messages and dispatches
|
|
87
161
|
* a new event enriched with the item.
|
|
@@ -142,11 +216,38 @@ export const MessageListMixin = (superClass) =>
|
|
|
142
216
|
this.__enableScrollSnapping();
|
|
143
217
|
}
|
|
144
218
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
219
|
+
if (items.length > oldItems.length && closeToBottom) {
|
|
220
|
+
this.__scrollToLastMessagePending = true;
|
|
221
|
+
this.__flushScrollToLastMessage();
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* Scrolls to the last message, unless the markdown component is still loading,
|
|
228
|
+
* in which case the final height of the messages is not yet known.
|
|
229
|
+
* @private
|
|
230
|
+
*/
|
|
231
|
+
__flushScrollToLastMessage() {
|
|
232
|
+
if (!this.__scrollToLastMessagePending || (this.markdown && !customElements.get('vaadin-markdown'))) {
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
this.__scrollToLastMessagePending = false;
|
|
237
|
+
requestAnimationFrame(() => this._scrollToLastMessage());
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/** @private */
|
|
241
|
+
__typingIndicatorChanged() {
|
|
242
|
+
const hadIndicator = !!this.querySelector('[slot="typing-indicator"]');
|
|
243
|
+
const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
|
|
244
|
+
|
|
245
|
+
this._renderMessages(this.items);
|
|
246
|
+
|
|
247
|
+
if (closeToBottom && !hadIndicator && this.querySelector('[slot="typing-indicator"]')) {
|
|
248
|
+
// The indicator grows the list, keep it in view like a new message
|
|
249
|
+
this.__scrollToLastMessagePending = true;
|
|
250
|
+
this.__flushScrollToLastMessage();
|
|
150
251
|
}
|
|
151
252
|
}
|
|
152
253
|
|
|
@@ -157,17 +258,62 @@ export const MessageListMixin = (superClass) =>
|
|
|
157
258
|
import('@vaadin/markdown/src/vaadin-markdown.js')
|
|
158
259
|
// Wait until the component is defined
|
|
159
260
|
.then(() => customElements.whenDefined('vaadin-markdown'))
|
|
160
|
-
//
|
|
161
|
-
.then(() => this.
|
|
261
|
+
// The messages grow once the markdown content is rendered
|
|
262
|
+
.then(() => this.__flushScrollToLastMessage());
|
|
162
263
|
}
|
|
163
264
|
this._renderMessages(this.items);
|
|
164
265
|
}
|
|
165
266
|
|
|
267
|
+
/**
|
|
268
|
+
* Formats the names of the typing users as a localized list, falling back
|
|
269
|
+
* to the abbreviation for users that have no name. The list is joined in
|
|
270
|
+
* the language of the element, so that it matches the typing indicator text.
|
|
271
|
+
* @private
|
|
272
|
+
*/
|
|
273
|
+
__getTypingUserNames(users) {
|
|
274
|
+
const names = users.map((user) => user.name || user.abbr).filter((name) => !!name);
|
|
275
|
+
const language = this.lang || document.documentElement.lang || navigator.language;
|
|
276
|
+
if (this.__listFormatLanguage !== language) {
|
|
277
|
+
this.__listFormatLanguage = language;
|
|
278
|
+
try {
|
|
279
|
+
this.__listFormat = new Intl.ListFormat(language, { type: 'conjunction' });
|
|
280
|
+
} catch {
|
|
281
|
+
// Invalid language tag, e.g. "en_US", fall back to the browser language
|
|
282
|
+
this.__listFormat = new Intl.ListFormat(navigator.language, { type: 'conjunction' });
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
return this.__listFormat.format(names);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/**
|
|
289
|
+
* Renders the typing indicator. It is inert and hidden from assistive
|
|
290
|
+
* technology, which is informed through the status live region instead.
|
|
291
|
+
*
|
|
292
|
+
* The avatar group is keyed by the users array so that a new group is
|
|
293
|
+
* created whenever the users change. Updating the items of an existing
|
|
294
|
+
* group would make it announce the changed users as joined and left.
|
|
295
|
+
* @private
|
|
296
|
+
*/
|
|
297
|
+
__renderTypingIndicator() {
|
|
298
|
+
const users = this._usersTyping;
|
|
299
|
+
if (users.length === 0) {
|
|
300
|
+
return nothing;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
return html`<vaadin-message
|
|
304
|
+
slot="typing-indicator"
|
|
305
|
+
typing-indicator="${this._typingIndicatorType || ''}"
|
|
306
|
+
aria-hidden="true"
|
|
307
|
+
inert
|
|
308
|
+
.userName="${this.__getTypingUserNames(users)}"
|
|
309
|
+
>${keyed(users, html`<vaadin-avatar-group slot="avatar" .items="${users}"></vaadin-avatar-group>`)}<span
|
|
310
|
+
>${this.__typingIndicatorText}</span
|
|
311
|
+
></vaadin-message
|
|
312
|
+
>`;
|
|
313
|
+
}
|
|
314
|
+
|
|
166
315
|
/** @private */
|
|
167
316
|
_renderMessages(items) {
|
|
168
|
-
// Check if markdown component is still loading
|
|
169
|
-
const loadingMarkdown = this.markdown && !customElements.get('vaadin-markdown');
|
|
170
|
-
|
|
171
317
|
render(
|
|
172
318
|
html`
|
|
173
319
|
${items.map(
|
|
@@ -184,13 +330,14 @@ export const MessageListMixin = (superClass) =>
|
|
|
184
330
|
class="${ifDefined(item.className)}"
|
|
185
331
|
@focusin="${this._onMessageFocusIn}"
|
|
186
332
|
@attachment-click="${(e) => this.__onAttachmentClick(e, item)}"
|
|
187
|
-
style="${ifDefined(loadingMarkdown ? 'visibility: hidden' : undefined)}"
|
|
188
333
|
>${
|
|
189
|
-
this.markdown
|
|
334
|
+
this.markdown
|
|
335
|
+
? html`<vaadin-markdown .content=${item.text} line-breaks></vaadin-markdown>`
|
|
336
|
+
: item.text
|
|
190
337
|
}<vaadin-avatar slot="avatar"></vaadin-avatar
|
|
191
338
|
></vaadin-message>
|
|
192
339
|
`,
|
|
193
|
-
)}
|
|
340
|
+
)}${this.__renderTypingIndicator()}
|
|
194
341
|
`,
|
|
195
342
|
this,
|
|
196
343
|
{ host: this },
|
|
@@ -47,8 +47,24 @@ export type MessageListEventMap = HTMLElementEventMap & {
|
|
|
47
47
|
* ----------|----------------
|
|
48
48
|
* `list` | The container wrapping messages.
|
|
49
49
|
*
|
|
50
|
+
* The following custom CSS properties are available for styling:
|
|
51
|
+
*
|
|
52
|
+
* Custom CSS property |
|
|
53
|
+
* :--------------------------------- |
|
|
54
|
+
* `--vaadin-message-list-max-width` |
|
|
55
|
+
* `--vaadin-message-list-padding` |
|
|
56
|
+
*
|
|
57
|
+
* ### Built-in Theme Variants
|
|
58
|
+
*
|
|
59
|
+
* `<vaadin-message-list>` supports the following theme variants:
|
|
60
|
+
*
|
|
61
|
+
* Theme variant | Description
|
|
62
|
+
* ---------------------|---------------
|
|
63
|
+
* `theme="bubble"` | Shows the messages as chat bubbles
|
|
64
|
+
* `theme="one-to-one"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`
|
|
65
|
+
*
|
|
50
66
|
* See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
|
|
51
|
-
* state attributes and stylable shadow parts of message elements.
|
|
67
|
+
* theme variants, state attributes and stylable shadow parts of message elements.
|
|
52
68
|
*
|
|
53
69
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
54
70
|
*
|
|
@@ -4,12 +4,15 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import './vaadin-message.js';
|
|
7
|
-
import
|
|
7
|
+
import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
9
|
+
import { screenReaderOnly } from '@vaadin/a11y-base/src/styles/sr-only-styles.js';
|
|
8
10
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
9
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
10
12
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
13
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
12
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
+
import { messageListStyles } from './styles/vaadin-message-list-base-styles.js';
|
|
13
16
|
import { MessageListMixin } from './vaadin-message-list-mixin.js';
|
|
14
17
|
|
|
15
18
|
/**
|
|
@@ -40,13 +43,30 @@ import { MessageListMixin } from './vaadin-message-list-mixin.js';
|
|
|
40
43
|
* ----------|----------------
|
|
41
44
|
* `list` | The container wrapping messages.
|
|
42
45
|
*
|
|
46
|
+
* The following custom CSS properties are available for styling:
|
|
47
|
+
*
|
|
48
|
+
* Custom CSS property |
|
|
49
|
+
* :--------------------------------- |
|
|
50
|
+
* `--vaadin-message-list-max-width` |
|
|
51
|
+
* `--vaadin-message-list-padding` |
|
|
52
|
+
*
|
|
53
|
+
* ### Built-in Theme Variants
|
|
54
|
+
*
|
|
55
|
+
* `<vaadin-message-list>` supports the following theme variants:
|
|
56
|
+
*
|
|
57
|
+
* Theme variant | Description
|
|
58
|
+
* ---------------------|---------------
|
|
59
|
+
* `theme="bubble"` | Shows the messages as chat bubbles
|
|
60
|
+
* `theme="one-to-one"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`
|
|
61
|
+
*
|
|
43
62
|
* See the [`<vaadin-message>`](#/elements/vaadin-message) documentation for the available
|
|
44
|
-
* state attributes and stylable shadow parts of message elements.
|
|
63
|
+
* theme variants, state attributes and stylable shadow parts of message elements.
|
|
45
64
|
*
|
|
46
65
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
47
66
|
*
|
|
48
67
|
* @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
|
|
49
68
|
*
|
|
69
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
50
70
|
* @customElement vaadin-message-list
|
|
51
71
|
* @extends HTMLElement
|
|
52
72
|
*/
|
|
@@ -56,25 +76,7 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
56
76
|
}
|
|
57
77
|
|
|
58
78
|
static get styles() {
|
|
59
|
-
return
|
|
60
|
-
:host {
|
|
61
|
-
display: block;
|
|
62
|
-
overflow: auto;
|
|
63
|
-
padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
|
|
64
|
-
scroll-padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
|
|
65
|
-
scroll-snap-type: y proximity;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
:host([hidden]) {
|
|
69
|
-
display: none !important;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
[part='list']::after {
|
|
73
|
-
content: '';
|
|
74
|
-
display: block;
|
|
75
|
-
scroll-snap-align: var(--_vaadin-message-list-scroll-snap-align, none);
|
|
76
|
-
}
|
|
77
|
-
`;
|
|
79
|
+
return [messageListStyles, screenReaderOnly];
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
/** @protected */
|
|
@@ -82,7 +84,9 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
82
84
|
return html`
|
|
83
85
|
<div part="list" role="list" id="list">
|
|
84
86
|
<slot></slot>
|
|
87
|
+
<slot name="typing-indicator"></slot>
|
|
85
88
|
</div>
|
|
89
|
+
<div role="status" class="sr-only">${this.__typingStatus}</div>
|
|
86
90
|
`;
|
|
87
91
|
}
|
|
88
92
|
|
|
@@ -91,6 +95,10 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
91
95
|
const tag = this.localName;
|
|
92
96
|
return [
|
|
93
97
|
`
|
|
98
|
+
${tag} vaadin-message:has(> vaadin-markdown:not(:defined)) {
|
|
99
|
+
visibility: hidden;
|
|
100
|
+
}
|
|
101
|
+
|
|
94
102
|
${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child) {
|
|
95
103
|
margin-top: 0;
|
|
96
104
|
}
|
|
@@ -98,6 +106,20 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
98
106
|
${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child) {
|
|
99
107
|
margin-bottom: 0;
|
|
100
108
|
}
|
|
109
|
+
|
|
110
|
+
${tag}[theme~='bubble'] :where(vaadin-message[theme~='self'])::part(name),
|
|
111
|
+
${tag}[theme~='bubble'][theme~='one-to-one'] :where(vaadin-message)::part(name) {
|
|
112
|
+
border: 0 !important;
|
|
113
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
114
|
+
clip-path: inset(50%) !important;
|
|
115
|
+
height: 1px !important;
|
|
116
|
+
margin: -1px !important;
|
|
117
|
+
overflow: hidden !important;
|
|
118
|
+
padding: 0 !important;
|
|
119
|
+
position: absolute !important;
|
|
120
|
+
width: 1px !important;
|
|
121
|
+
white-space: nowrap !important;
|
|
122
|
+
}
|
|
101
123
|
`,
|
|
102
124
|
];
|
|
103
125
|
}
|
|
@@ -54,6 +54,7 @@ export const MessageMixin = (superClass) =>
|
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
56
|
* A color index to be used to render the color of the avatar.
|
|
57
|
+
* Also sets `--vaadin-message-user-color` custom CSS property.
|
|
57
58
|
*
|
|
58
59
|
* @attr {number} user-color-index
|
|
59
60
|
*/
|
|
@@ -101,6 +102,20 @@ export const MessageMixin = (superClass) =>
|
|
|
101
102
|
this.addController(this._avatarController);
|
|
102
103
|
}
|
|
103
104
|
|
|
105
|
+
/** @protected */
|
|
106
|
+
updated(props) {
|
|
107
|
+
super.updated(props);
|
|
108
|
+
|
|
109
|
+
if (props.has('userColorIndex')) {
|
|
110
|
+
const index = this.userColorIndex;
|
|
111
|
+
if (index != null) {
|
|
112
|
+
this.style.setProperty('--vaadin-message-user-color', `var(--vaadin-user-color-${index})`);
|
|
113
|
+
} else {
|
|
114
|
+
this.style.removeProperty('--vaadin-message-user-color');
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
104
119
|
/** @private */
|
|
105
120
|
__avatarChanged(avatar, userName, userAbbr, userImg, userColorIndex) {
|
|
106
121
|
if (avatar) {
|
package/src/vaadin-message.d.ts
CHANGED
|
@@ -46,10 +46,11 @@ export type MessageEventMap = HTMLElementEventMap & {
|
|
|
46
46
|
*
|
|
47
47
|
* The following state attributes are available for styling:
|
|
48
48
|
*
|
|
49
|
-
* Attribute
|
|
50
|
-
*
|
|
51
|
-
* `focus-ring`
|
|
52
|
-
* `focused`
|
|
49
|
+
* Attribute | Description
|
|
50
|
+
* --------------------|-------------
|
|
51
|
+
* `focus-ring` | Set when the message is focused using the keyboard.
|
|
52
|
+
* `focused` | Set when the message is focused.
|
|
53
|
+
* `typing-indicator` | Set when the message is rendered as a typing indicator. The value is the indicator style: empty, `ellipsis` or `minimal`.
|
|
53
54
|
*
|
|
54
55
|
* The following custom CSS properties are available for styling:
|
|
55
56
|
*
|
|
@@ -65,6 +66,10 @@ export type MessageEventMap = HTMLElementEventMap & {
|
|
|
65
66
|
* `--vaadin-message-attachment-line-height` |
|
|
66
67
|
* `--vaadin-message-attachment-padding` |
|
|
67
68
|
* `--vaadin-message-attachment-text-color` |
|
|
69
|
+
* `--vaadin-message-attachments-alignment` |
|
|
70
|
+
* `--vaadin-message-content-background` |
|
|
71
|
+
* `--vaadin-message-content-border-radius` |
|
|
72
|
+
* `--vaadin-message-content-padding` |
|
|
68
73
|
* `--vaadin-message-font-size` |
|
|
69
74
|
* `--vaadin-message-font-weight` |
|
|
70
75
|
* `--vaadin-message-gap` |
|
|
@@ -78,6 +83,17 @@ export type MessageEventMap = HTMLElementEventMap & {
|
|
|
78
83
|
* `--vaadin-message-time-color` |
|
|
79
84
|
* `--vaadin-message-time-font-size` |
|
|
80
85
|
* `--vaadin-message-time-font-weight` |
|
|
86
|
+
* `--vaadin-message-user-color` |
|
|
87
|
+
*
|
|
88
|
+
* ### Built-in Theme Variants
|
|
89
|
+
*
|
|
90
|
+
* `<vaadin-message>` supports the following theme variants. Both of them require the parent
|
|
91
|
+
* [`<vaadin-message-list>`](#/elements/vaadin-message-list) to use `theme="bubble"`:
|
|
92
|
+
*
|
|
93
|
+
* Theme variant | Description
|
|
94
|
+
* ----------------------|---------------
|
|
95
|
+
* `theme="self"` | Shows the message as sent by the current user, hides the avatar and name
|
|
96
|
+
* `theme="full-width"` | Removes the bubble and the width restriction, for an assistant or AI response
|
|
81
97
|
*
|
|
82
98
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
83
99
|
*
|
package/src/vaadin-message.js
CHANGED
|
@@ -46,10 +46,11 @@ import { MessageMixin } from './vaadin-message-mixin.js';
|
|
|
46
46
|
*
|
|
47
47
|
* The following state attributes are available for styling:
|
|
48
48
|
*
|
|
49
|
-
* Attribute
|
|
50
|
-
*
|
|
51
|
-
* `focus-ring`
|
|
52
|
-
* `focused`
|
|
49
|
+
* Attribute | Description
|
|
50
|
+
* --------------------|-------------
|
|
51
|
+
* `focus-ring` | Set when the message is focused using the keyboard.
|
|
52
|
+
* `focused` | Set when the message is focused.
|
|
53
|
+
* `typing-indicator` | Set when the message is rendered as a typing indicator. The value is the indicator style: empty, `ellipsis` or `minimal`.
|
|
53
54
|
*
|
|
54
55
|
* The following custom CSS properties are available for styling:
|
|
55
56
|
*
|
|
@@ -65,6 +66,10 @@ import { MessageMixin } from './vaadin-message-mixin.js';
|
|
|
65
66
|
* `--vaadin-message-attachment-line-height` |
|
|
66
67
|
* `--vaadin-message-attachment-padding` |
|
|
67
68
|
* `--vaadin-message-attachment-text-color` |
|
|
69
|
+
* `--vaadin-message-attachments-alignment` |
|
|
70
|
+
* `--vaadin-message-content-background` |
|
|
71
|
+
* `--vaadin-message-content-border-radius` |
|
|
72
|
+
* `--vaadin-message-content-padding` |
|
|
68
73
|
* `--vaadin-message-font-size` |
|
|
69
74
|
* `--vaadin-message-font-weight` |
|
|
70
75
|
* `--vaadin-message-gap` |
|
|
@@ -78,11 +83,23 @@ import { MessageMixin } from './vaadin-message-mixin.js';
|
|
|
78
83
|
* `--vaadin-message-time-color` |
|
|
79
84
|
* `--vaadin-message-time-font-size` |
|
|
80
85
|
* `--vaadin-message-time-font-weight` |
|
|
86
|
+
* `--vaadin-message-user-color` |
|
|
87
|
+
*
|
|
88
|
+
* ### Built-in Theme Variants
|
|
89
|
+
*
|
|
90
|
+
* `<vaadin-message>` supports the following theme variants. Both of them require the parent
|
|
91
|
+
* [`<vaadin-message-list>`](#/elements/vaadin-message-list) to use `theme="bubble"`:
|
|
92
|
+
*
|
|
93
|
+
* Theme variant | Description
|
|
94
|
+
* ----------------------|---------------
|
|
95
|
+
* `theme="self"` | Shows the message as sent by the current user, hides the avatar and name
|
|
96
|
+
* `theme="full-width"` | Removes the bubble and the width restriction, for an assistant or AI response
|
|
81
97
|
*
|
|
82
98
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
83
99
|
*
|
|
84
100
|
* @fires {CustomEvent} attachment-click - Fired when an attachment is clicked.
|
|
85
101
|
*
|
|
102
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
86
103
|
* @customElement vaadin-message
|
|
87
104
|
* @extends HTMLElement
|
|
88
105
|
*/
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/message-list",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-message-list",
|
|
11
|
-
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
11
|
+
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------- |\n`--vaadin-message-list-max-width` |\n`--vaadin-message-list-padding` |\n\n### Built-in Theme Variants\n\n`<vaadin-message-list>` supports the following theme variants:\n\nTheme variant | Description\n---------------------|---------------\n`theme=\"bubble\"` | Shows the messages as chat bubbles\n`theme=\"one-to-one\"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-message) documentation for the available\ntheme variants, state attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "announce-messages",
|
|
@@ -33,9 +33,7 @@
|
|
|
33
33
|
"description": "The theme variants to apply to the component.",
|
|
34
34
|
"value": {
|
|
35
35
|
"type": [
|
|
36
|
-
"string"
|
|
37
|
-
"null",
|
|
38
|
-
"undefined"
|
|
36
|
+
"string"
|
|
39
37
|
]
|
|
40
38
|
}
|
|
41
39
|
}
|
|
@@ -80,16 +78,14 @@
|
|
|
80
78
|
},
|
|
81
79
|
{
|
|
82
80
|
"name": "vaadin-message",
|
|
83
|
-
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
81
|
+
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n`typing-indicator` | Set when the message is rendered as a typing indicator. The value is the indicator style: empty, `ellipsis` or `minimal`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-attachments-alignment` |\n`--vaadin-message-content-background` |\n`--vaadin-message-content-border-radius` |\n`--vaadin-message-content-padding` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n`--vaadin-message-user-color` |\n\n### Built-in Theme Variants\n\n`<vaadin-message>` supports the following theme variants. Both of them require the parent\n[`<vaadin-message-list>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-message-list) to use `theme=\"bubble\"`:\n\nTheme variant | Description\n----------------------|---------------\n`theme=\"self\"` | Shows the message as sent by the current user, hides the avatar and name\n`theme=\"full-width\"` | Removes the bubble and the width restriction, for an assistant or AI response\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
84
82
|
"attributes": [
|
|
85
83
|
{
|
|
86
84
|
"name": "theme",
|
|
87
85
|
"description": "The theme variants to apply to the component.",
|
|
88
86
|
"value": {
|
|
89
87
|
"type": [
|
|
90
|
-
"string"
|
|
91
|
-
"null",
|
|
92
|
-
"undefined"
|
|
88
|
+
"string"
|
|
93
89
|
]
|
|
94
90
|
}
|
|
95
91
|
},
|
|
@@ -113,7 +109,7 @@
|
|
|
113
109
|
},
|
|
114
110
|
{
|
|
115
111
|
"name": "user-color-index",
|
|
116
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
112
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
117
113
|
"value": {
|
|
118
114
|
"type": [
|
|
119
115
|
"number"
|
|
@@ -170,7 +166,7 @@
|
|
|
170
166
|
},
|
|
171
167
|
{
|
|
172
168
|
"name": "userColorIndex",
|
|
173
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
169
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
174
170
|
"value": {
|
|
175
171
|
"type": [
|
|
176
172
|
"number"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/message-list",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-rc1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-message-list",
|
|
19
|
-
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
19
|
+
"description": "`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>\n\n### Example\n\nTo create a new message list, add the component to the page:\n\n```html\n<vaadin-message-list></vaadin-message-list>\n```\n\nProvide the messages to the message list with the [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-message-list#property-items) property.\n\n```js\ndocument.querySelector('vaadin-message-list').items = [\n { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },\n { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|----------------\n`list` | The container wrapping messages.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------- |\n`--vaadin-message-list-max-width` |\n`--vaadin-message-list-padding` |\n\n### Built-in Theme Variants\n\n`<vaadin-message-list>` supports the following theme variants:\n\nTheme variant | Description\n---------------------|---------------\n`theme=\"bubble\"` | Shows the messages as chat bubbles\n`theme=\"one-to-one\"` | Hides the avatar and name of every message, for a chat between two participants. Works together with `bubble`\n\nSee the [`<vaadin-message>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-message) documentation for the available\ntheme variants, state attributes and stylable shadow parts of message elements.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"name": "vaadin-message",
|
|
54
|
-
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
54
|
+
"description": "`<vaadin-message>` is a Web Component for showing a single message with an author, message and time.\n\n```html\n<vaadin-message\n time=\"2021-01-28 10:43\"\n user-name=\"Bob Ross\"\n user-abbr=\"BR\"\n user-img=\"/static/img/avatar.jpg\"\n>\n There is no real ending. It's just the place where you stop the story.\n</vaadin-message>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n--------------------|----------------\n`name` | Author's name\n`time` | When the message was posted\n`content` | The message itself as a slotted content\n`attachments` | Container for the attachments\n`attachment` | Individual attachment button\n`attachment-image` | Image attachment button (in addition to `attachment`)\n`attachment-file` | File attachment button (in addition to `attachment`)\n`attachment-preview`| Image preview inside an image attachment\n`attachment-icon` | File icon inside a file attachment\n`attachment-name` | File name inside a file attachment\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|-------------\n`focus-ring` | Set when the message is focused using the keyboard.\n`focused` | Set when the message is focused.\n`typing-indicator` | Set when the message is rendered as a typing indicator. The value is the indicator style: empty, `ellipsis` or `minimal`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------- |\n`--vaadin-message-attachment-background` |\n`--vaadin-message-attachment-border-color` |\n`--vaadin-message-attachment-border-radius` |\n`--vaadin-message-attachment-border-width` |\n`--vaadin-message-attachment-font-size` |\n`--vaadin-message-attachment-font-weight` |\n`--vaadin-message-attachment-gap` |\n`--vaadin-message-attachment-line-height` |\n`--vaadin-message-attachment-padding` |\n`--vaadin-message-attachment-text-color` |\n`--vaadin-message-attachments-alignment` |\n`--vaadin-message-content-background` |\n`--vaadin-message-content-border-radius` |\n`--vaadin-message-content-padding` |\n`--vaadin-message-font-size` |\n`--vaadin-message-font-weight` |\n`--vaadin-message-gap` |\n`--vaadin-message-header-line-height` |\n`--vaadin-message-line-height` |\n`--vaadin-message-name-color` |\n`--vaadin-message-name-font-size` |\n`--vaadin-message-name-font-weight` |\n`--vaadin-message-padding` |\n`--vaadin-message-text-color` |\n`--vaadin-message-time-color` |\n`--vaadin-message-time-font-size` |\n`--vaadin-message-time-font-weight` |\n`--vaadin-message-user-color` |\n\n### Built-in Theme Variants\n\n`<vaadin-message>` supports the following theme variants. Both of them require the parent\n[`<vaadin-message-list>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-message-list) to use `theme=\"bubble\"`:\n\nTheme variant | Description\n----------------------|---------------\n`theme=\"self\"` | Shows the message as sent by the current user, hides the avatar and name\n`theme=\"full-width\"` | Removes the bubble and the width restriction, for an assistant or AI response\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
55
55
|
"extension": true,
|
|
56
56
|
"attributes": [
|
|
57
57
|
{
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"name": ".userColorIndex",
|
|
80
|
-
"description": "A color index to be used to render the color of the avatar.",
|
|
80
|
+
"description": "A color index to be used to render the color of the avatar.\nAlso sets `--vaadin-message-user-color` custom CSS property.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|