> Markdown version of [Message List](https://vaadin.com/docs/v23/components/message-list). Section index: [llms.txt](https://vaadin.com/docs/v23/components/llms.txt)

# Message List

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.

**TypeScript** — `message-list-component.ts`

```html
<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>
```

**Java** — `MessageListComponent.java`

```java
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);
```

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.

## <a id="styling"></a>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.

`vaadin-message-with-theme.css`

```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)";
}
```

**TypeScript** — `message-list-with-theme-component.ts`

```html
<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>
```

**Java** — `MessageListWithThemeComponent.java`

```java
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);
```

## <a id="related-components"></a>Related Components

| Component                                                                | Usage recommendations                    |
| ------------------------------------------------------------------------ | ---------------------------------------- |
| [Message Input](https://vaadin.com/docs/v23/components/message-input.md) | Allow users to author and send messages. |

`EE10DB8E-479C-41D0-9A77-BFA41C340BFB`