@vaadin/message-list 25.3.0-dev.1fa5a51482 → 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 +6 -6
- 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 +42 -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 +20 -4
- package/web-types.json +5 -5
- 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
|
{
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
"type": {
|
|
328
328
|
"text": "number"
|
|
329
329
|
},
|
|
330
|
-
"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.",
|
|
331
331
|
"attribute": "user-color-index"
|
|
332
332
|
},
|
|
333
333
|
{
|
|
@@ -381,7 +381,7 @@
|
|
|
381
381
|
"type": {
|
|
382
382
|
"text": "number"
|
|
383
383
|
},
|
|
384
|
-
"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.",
|
|
385
385
|
"fieldName": "userColorIndex"
|
|
386
386
|
},
|
|
387
387
|
{
|
|
@@ -431,7 +431,7 @@
|
|
|
431
431
|
"declarations": [
|
|
432
432
|
{
|
|
433
433
|
"kind": "class",
|
|
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
|
|
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.",
|
|
435
435
|
"name": "Message",
|
|
436
436
|
"members": [
|
|
437
437
|
{
|
|
@@ -483,7 +483,7 @@
|
|
|
483
483
|
"type": {
|
|
484
484
|
"text": "number"
|
|
485
485
|
},
|
|
486
|
-
"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.",
|
|
487
487
|
"attribute": "user-color-index",
|
|
488
488
|
"inheritedFrom": {
|
|
489
489
|
"name": "MessageMixin",
|
|
@@ -569,7 +569,7 @@
|
|
|
569
569
|
"type": {
|
|
570
570
|
"text": "number"
|
|
571
571
|
},
|
|
572
|
-
"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.",
|
|
573
573
|
"fieldName": "userColorIndex",
|
|
574
574
|
"inheritedFrom": {
|
|
575
575
|
"name": "MessageMixin",
|
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,8 +43,24 @@ 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
|
*
|
|
@@ -57,25 +76,7 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
57
76
|
}
|
|
58
77
|
|
|
59
78
|
static get styles() {
|
|
60
|
-
return
|
|
61
|
-
:host {
|
|
62
|
-
display: block;
|
|
63
|
-
overflow: auto;
|
|
64
|
-
padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
|
|
65
|
-
scroll-padding: var(--vaadin-message-list-padding, var(--vaadin-padding-xs) 0);
|
|
66
|
-
scroll-snap-type: y proximity;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
:host([hidden]) {
|
|
70
|
-
display: none !important;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
[part='list']::after {
|
|
74
|
-
content: '';
|
|
75
|
-
display: block;
|
|
76
|
-
scroll-snap-align: var(--_vaadin-message-list-scroll-snap-align, none);
|
|
77
|
-
}
|
|
78
|
-
`;
|
|
79
|
+
return [messageListStyles, screenReaderOnly];
|
|
79
80
|
}
|
|
80
81
|
|
|
81
82
|
/** @protected */
|
|
@@ -83,7 +84,9 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
83
84
|
return html`
|
|
84
85
|
<div part="list" role="list" id="list">
|
|
85
86
|
<slot></slot>
|
|
87
|
+
<slot name="typing-indicator"></slot>
|
|
86
88
|
</div>
|
|
89
|
+
<div role="status" class="sr-only">${this.__typingStatus}</div>
|
|
87
90
|
`;
|
|
88
91
|
}
|
|
89
92
|
|
|
@@ -92,6 +95,10 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
92
95
|
const tag = this.localName;
|
|
93
96
|
return [
|
|
94
97
|
`
|
|
98
|
+
${tag} vaadin-message:has(> vaadin-markdown:not(:defined)) {
|
|
99
|
+
visibility: hidden;
|
|
100
|
+
}
|
|
101
|
+
|
|
95
102
|
${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child) {
|
|
96
103
|
margin-top: 0;
|
|
97
104
|
}
|
|
@@ -99,6 +106,20 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
99
106
|
${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child) {
|
|
100
107
|
margin-bottom: 0;
|
|
101
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
|
+
}
|
|
102
123
|
`,
|
|
103
124
|
];
|
|
104
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,6 +83,17 @@ 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
|
*
|
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",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
"name": "vaadin-message",
|
|
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
|
|
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.",
|
|
82
82
|
"attributes": [
|
|
83
83
|
{
|
|
84
84
|
"name": "theme",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
},
|
|
110
110
|
{
|
|
111
111
|
"name": "user-color-index",
|
|
112
|
-
"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.",
|
|
113
113
|
"value": {
|
|
114
114
|
"type": [
|
|
115
115
|
"number"
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"name": "userColorIndex",
|
|
169
|
-
"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.",
|
|
170
170
|
"value": {
|
|
171
171
|
"type": [
|
|
172
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
|
}
|