@vaadin/message-list 25.3.0-beta1 → 25.3.0-beta3
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 +1 -1
- package/package.json +12 -11
- package/src/styles/vaadin-message-base-styles.js +90 -0
- package/src/styles/vaadin-message-list-base-styles.js +4 -0
- package/src/vaadin-message-list-mixin.js +114 -3
- package/src/vaadin-message-list.js +5 -1
- package/src/vaadin-message.d.ts +5 -4
- package/src/vaadin-message.js +5 -4
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -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
|
{
|
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-beta3",
|
|
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-beta3",
|
|
41
|
+
"@vaadin/avatar": "25.3.0-beta3",
|
|
42
|
+
"@vaadin/avatar-group": "25.3.0-beta3",
|
|
43
|
+
"@vaadin/component-base": "25.3.0-beta3",
|
|
44
|
+
"@vaadin/markdown": "25.3.0-beta3",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta3",
|
|
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-beta3",
|
|
50
|
+
"@vaadin/chai-plugins": "25.3.0-beta3",
|
|
51
|
+
"@vaadin/test-runner-commands": "25.3.0-beta3",
|
|
51
52
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
53
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta3",
|
|
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": "1ea43188e1297f6898cbf9d3610b85a7a2cca6f0"
|
|
61
62
|
}
|
|
@@ -5,6 +5,14 @@
|
|
|
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 {
|
|
@@ -70,6 +78,10 @@ export const messageStyles = css`
|
|
|
70
78
|
display: var(--_vaadin-message-avatar-display, revert-layer);
|
|
71
79
|
}
|
|
72
80
|
|
|
81
|
+
::slotted(vaadin-avatar-group) {
|
|
82
|
+
width: fit-content;
|
|
83
|
+
}
|
|
84
|
+
|
|
73
85
|
::slotted(vaadin-markdown) {
|
|
74
86
|
white-space: normal;
|
|
75
87
|
}
|
|
@@ -139,4 +151,82 @@ export const messageStyles = css`
|
|
|
139
151
|
padding: var(--vaadin-message-attachment-padding, var(--vaadin-padding-s));
|
|
140
152
|
padding-inline-start: 0;
|
|
141
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
|
+
}
|
|
142
232
|
`;
|
|
@@ -69,4 +69,8 @@ export const messageListStyles = css`
|
|
|
69
69
|
:host([theme~='bubble'][theme~='one-to-one']) ::slotted(vaadin-message) {
|
|
70
70
|
--_vaadin-message-avatar-display: none;
|
|
71
71
|
}
|
|
72
|
+
|
|
73
|
+
:host([theme~='bubble'][theme~='one-to-one']) ::slotted(vaadin-message[typing-indicator]) {
|
|
74
|
+
--vaadin-message-gap: 0;
|
|
75
|
+
}
|
|
72
76
|
`;
|
|
@@ -3,8 +3,9 @@
|
|
|
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';
|
|
@@ -63,12 +64,60 @@ export const MessageListMixin = (superClass) =>
|
|
|
63
64
|
observer: '__announceChanged',
|
|
64
65
|
sync: true,
|
|
65
66
|
},
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* An array of objects which will be rendered as avatars.
|
|
70
|
+
* The user objects can have the following properties:
|
|
71
|
+
* ```js
|
|
72
|
+
* Array<{
|
|
73
|
+
* name: string,
|
|
74
|
+
* abbr: string,
|
|
75
|
+
* img: string,
|
|
76
|
+
* colorIndex: number
|
|
77
|
+
* }>
|
|
78
|
+
* ```
|
|
79
|
+
* @private
|
|
80
|
+
*/
|
|
81
|
+
_usersTyping: {
|
|
82
|
+
type: Array,
|
|
83
|
+
value: () => [],
|
|
84
|
+
observer: '__typingIndicatorChanged',
|
|
85
|
+
sync: true,
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
/** @private */
|
|
89
|
+
_typingIndicatorText: {
|
|
90
|
+
type: String,
|
|
91
|
+
value: 'Typing…',
|
|
92
|
+
observer: '__typingIndicatorChanged',
|
|
93
|
+
},
|
|
94
|
+
|
|
95
|
+
/** @private */
|
|
96
|
+
_typingIndicatorType: {
|
|
97
|
+
type: String,
|
|
98
|
+
observer: '__typingIndicatorChanged',
|
|
99
|
+
},
|
|
66
100
|
};
|
|
67
101
|
}
|
|
68
102
|
|
|
69
103
|
/** @protected */
|
|
70
104
|
get _messages() {
|
|
71
|
-
return [...this.querySelectorAll('vaadin-message')];
|
|
105
|
+
return [...this.querySelectorAll('vaadin-message:not([slot="typing-indicator"])')];
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* The text announced to assistive technology while users are typing,
|
|
110
|
+
* empty when no one is typing.
|
|
111
|
+
*
|
|
112
|
+
* @return {string}
|
|
113
|
+
* @private
|
|
114
|
+
*/
|
|
115
|
+
get __typingStatus() {
|
|
116
|
+
const users = this._usersTyping;
|
|
117
|
+
if (!users || users.length === 0) {
|
|
118
|
+
return '';
|
|
119
|
+
}
|
|
120
|
+
return [this.__getTypingUserNames(users), this._typingIndicatorText].filter(Boolean).join(' ');
|
|
72
121
|
}
|
|
73
122
|
|
|
74
123
|
/** @protected */
|
|
@@ -174,6 +223,20 @@ export const MessageListMixin = (superClass) =>
|
|
|
174
223
|
requestAnimationFrame(() => this._scrollToLastMessage());
|
|
175
224
|
}
|
|
176
225
|
|
|
226
|
+
/** @private */
|
|
227
|
+
__typingIndicatorChanged() {
|
|
228
|
+
const hadIndicator = !!this.querySelector('[slot="typing-indicator"]');
|
|
229
|
+
const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
|
|
230
|
+
|
|
231
|
+
this._renderMessages(this.items);
|
|
232
|
+
|
|
233
|
+
if (closeToBottom && !hadIndicator && this.querySelector('[slot="typing-indicator"]')) {
|
|
234
|
+
// The indicator grows the list, keep it in view like a new message
|
|
235
|
+
this.__scrollToLastMessagePending = true;
|
|
236
|
+
this.__flushScrollToLastMessage();
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
177
240
|
/** @private */
|
|
178
241
|
__markdownChanged(markdown) {
|
|
179
242
|
if (markdown && !customElements.get('vaadin-markdown')) {
|
|
@@ -187,6 +250,54 @@ export const MessageListMixin = (superClass) =>
|
|
|
187
250
|
this._renderMessages(this.items);
|
|
188
251
|
}
|
|
189
252
|
|
|
253
|
+
/**
|
|
254
|
+
* Formats the names of the typing users as a localized list, falling back
|
|
255
|
+
* to the abbreviation for users that have no name. The list is joined in
|
|
256
|
+
* the language of the element, so that it matches the typing indicator text.
|
|
257
|
+
* @private
|
|
258
|
+
*/
|
|
259
|
+
__getTypingUserNames(users) {
|
|
260
|
+
const names = users.map((user) => user.name || user.abbr).filter((name) => !!name);
|
|
261
|
+
const language = this.lang || document.documentElement.lang || navigator.language;
|
|
262
|
+
if (this.__listFormatLanguage !== language) {
|
|
263
|
+
this.__listFormatLanguage = language;
|
|
264
|
+
try {
|
|
265
|
+
this.__listFormat = new Intl.ListFormat(language, { type: 'conjunction' });
|
|
266
|
+
} catch {
|
|
267
|
+
// Invalid language tag, e.g. "en_US", fall back to the browser language
|
|
268
|
+
this.__listFormat = new Intl.ListFormat(navigator.language, { type: 'conjunction' });
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
return this.__listFormat.format(names);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
/**
|
|
275
|
+
* Renders the typing indicator. It is inert and hidden from assistive
|
|
276
|
+
* technology, which is informed through the status live region instead.
|
|
277
|
+
*
|
|
278
|
+
* The avatar group is keyed by the users array so that a new group is
|
|
279
|
+
* created whenever the users change. Updating the items of an existing
|
|
280
|
+
* group would make it announce the changed users as joined and left.
|
|
281
|
+
* @private
|
|
282
|
+
*/
|
|
283
|
+
__renderTypingIndicator() {
|
|
284
|
+
const users = this._usersTyping;
|
|
285
|
+
if (users.length === 0) {
|
|
286
|
+
return nothing;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
return html`<vaadin-message
|
|
290
|
+
slot="typing-indicator"
|
|
291
|
+
typing-indicator="${this._typingIndicatorType || ''}"
|
|
292
|
+
aria-hidden="true"
|
|
293
|
+
inert
|
|
294
|
+
.userName="${this.__getTypingUserNames(users)}"
|
|
295
|
+
>${keyed(users, html`<vaadin-avatar-group slot="avatar" .items="${users}"></vaadin-avatar-group>`)}<span
|
|
296
|
+
>${this._typingIndicatorText}</span
|
|
297
|
+
></vaadin-message
|
|
298
|
+
>`;
|
|
299
|
+
}
|
|
300
|
+
|
|
190
301
|
/** @private */
|
|
191
302
|
_renderMessages(items) {
|
|
192
303
|
render(
|
|
@@ -212,7 +323,7 @@ export const MessageListMixin = (superClass) =>
|
|
|
212
323
|
}<vaadin-avatar slot="avatar"></vaadin-avatar
|
|
213
324
|
></vaadin-message>
|
|
214
325
|
`,
|
|
215
|
-
)}
|
|
326
|
+
)}${this.__renderTypingIndicator()}
|
|
216
327
|
`,
|
|
217
328
|
this,
|
|
218
329
|
{ host: this },
|
|
@@ -4,7 +4,9 @@
|
|
|
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 '@vaadin/avatar-group/src/vaadin-avatar-group.js';
|
|
7
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';
|
|
@@ -74,7 +76,7 @@ class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(Themable
|
|
|
74
76
|
}
|
|
75
77
|
|
|
76
78
|
static get styles() {
|
|
77
|
-
return messageListStyles;
|
|
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
|
|
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
|
*
|
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
|
*
|
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-beta3",
|
|
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-beta3/#/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-beta3/#/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-beta3/#/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",
|
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-beta3",
|
|
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-beta3/#/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-beta3/#/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-beta3/#/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
|
{
|