Message List
API: TypeScript / Java
Source: TypeScript / Java
Message List allows you to show a list of messages, for example a chat log. You can configure the text content, information about the sender, and the time of sending for each message.
Open in a
new tab
new tab
Source code
message-list-component.ts
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/message-list';
import { applyTheme } from 'Frontend/generated/theme';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { format, subDays, subMinutes } from 'date-fns';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@customElement('message-list-component')
export class Example extends LitElement {
private person: Person | undefined;
private isoMinutes = 'yyyy-MM-dd HH:mm';
private yesterday = format(subDays(new Date(), 1), this.isoMinutes);
private fiftyMinutesAgo = format(subMinutes(new Date(), 50), this.isoMinutes);
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override async firstUpdated() {
const { people } = await getPeople({ count: 1 });
this.person = people[0];
this.requestUpdate();
}
protected override render() {
return html`
<!-- tag::snippet[] -->
<vaadin-message-list
.items="${[
{
text: 'Linsey, could you check if the details with the order are okay?',
time: this.yesterday,
userName: 'Matt Mambo',
userColorIndex: 1,
},
{
text: 'All good. Ship it.',
time: this.fiftyMinutesAgo,
userName: 'Linsey Listy',
userColorIndex: 2,
userImg: this.person ? this.person.pictureUrl : undefined,
},
]}"
></vaadin-message-list>
<!-- end::snippet[] -->
`;
}
}
MessageListComponent.java
package com.vaadin.demo.component.messages;
import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.util.Arrays;
import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.router.Route;
@Route("message-list")
public class MessageListComponent extends Div {
public MessageListComponent() {
// tag::snippet[]
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();
Instant yesterday = LocalDateTime.now().minusDays(1)
.toInstant(ZoneOffset.UTC);
Instant fiftyMinsAgo = LocalDateTime.now().minusMinutes(50)
.toInstant(ZoneOffset.UTC);
MessageListItem message1 = new MessageListItem(
"Linsey, could you check if the details with the order are okay?",
yesterday, "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
list.setItems(Arrays.asList(message1, message2));
add(list);
// end::snippet[]
}
}
The messages in the list can be populated with the items property.
The items property is of type Array, with JSON objects in it.
Each JSON object is a single message.
Styling
You can style individual messages by adding a theme property to some items and providing CSS using that theme. This can be useful, for example, to highlight the current user’s own messages.
Open in a
new tab
new tab
Source code
message-list-with-theme-component.ts
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/message-list';
import { applyTheme } from 'Frontend/generated/theme';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { format, subDays, subMinutes } from 'date-fns';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@customElement('message-list-component-with-theme')
export class Example extends LitElement {
private person: Person | undefined;
private isoMinutes = 'yyyy-MM-dd HH:mm';
private yesterday = format(subDays(new Date(), 1), this.isoMinutes);
private fiftyMinutesAgo = format(subMinutes(new Date(), 50), this.isoMinutes);
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override async firstUpdated() {
const { people } = await getPeople({ count: 1 });
this.person = people[0];
this.requestUpdate();
}
protected override render() {
return html`
<!-- tag::snippet[] -->
<vaadin-message-list
.items="${[
{
text: 'Linsey, could you check if the details with the order are okay?',
time: this.yesterday,
userName: 'Matt Mambo',
userColorIndex: 1,
},
{
text: 'All good. Ship it.',
time: this.fiftyMinutesAgo,
userName: 'Linsey Listy',
userColorIndex: 2,
theme: 'current-user',
userImg: this.person ? this.person.pictureUrl : undefined,
},
]}"
></vaadin-message-list>
<!-- end::snippet[] -->
`;
}
}
vaadin-message-with-theme.css
/* Place in frontend/themes/[my-theme]/components/vaadin-message.css */
:host([theme~="current-user"]) {
background-color: #000;
color: #fff;
border: 2px solid #fff;
border-radius: 9px;
font-weight: 900;
}
:host([theme~="current-user"]) [part="name"] {
font-weight: 900;
}
:host([theme~="current-user"]) [part="time"] {
color: #fff;
}
:host([theme~="current-user"]) [part="name"]::after{
content: " (You)";
}
vaadin-message-with-theme.css
MessageListWithThemeComponent.java
package com.vaadin.demo.component.messages;
import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.util.Arrays;
import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.router.Route;
@Route("message-list-with-theme")
public class MessageListWithThemeComponent extends Div {
public MessageListWithThemeComponent() {
// tag::snippet[]
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();
Instant yesterday = LocalDateTime.now(ZoneOffset.UTC).minusDays(1)
.toInstant(ZoneOffset.UTC);
Instant fiftyMinsAgo = LocalDateTime.now(ZoneOffset.UTC)
.minusMinutes(50).toInstant(ZoneOffset.UTC);
MessageListItem message1 = new MessageListItem(
"Linsey, could you check if the details with the order are okay?",
yesterday, "Matt Mambo");
message1.setUserColorIndex(1);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.addThemeNames("current-user");
message2.setUserColorIndex(2);
list.setItems(Arrays.asList(message1, message2));
add(list);
// end::snippet[]
}
}
vaadin-message-with-theme.css
/* Place in frontend/themes/[my-theme]/components/vaadin-message.css */
:host([theme~="current-user"]) {
background-color: #000;
color: #fff;
border: 2px solid #fff;
border-radius: 9px;
font-weight: 900;
}
:host([theme~="current-user"]) [part="name"] {
font-weight: 900;
}
:host([theme~="current-user"]) [part="time"] {
color: #fff;
}
:host([theme~="current-user"]) [part="name"]::after{
content: " (You)";
}