Docs

Docs

Message List

Source: TypeScript / Java
Message List allows you to show a list of messages, for example, a chat log.

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
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.

Styling

You can style individual messages by adding a theme property to some items and providing CSS for that theme. The following example shows how to highlight the current user’s own messages:

Open in a
new tab
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();

Instant yesterday = LocalDateTime.now(ZoneOffset.UTC).minusDays(1)
        .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);

Instant fiftyMinsAgo = LocalDateTime.now(ZoneOffset.UTC)
        .minusMinutes(50).toInstant(ZoneOffset.UTC);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
        fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
// Add custom class name
message2.addClassNames("current-user");

list.setItems(Arrays.asList(message1, message2));
add(list);
Note
Use Theme Names, Not Class Names pre-V24.3
In versions prior to 24.3, theme names must be used instead of class names (theme property / addThemeNames Java method). The CSS syntax for targeting a theme name is [theme~="custom-theme"].

Markdown

Use Markdown formatting in Message List to display rich text instead of plain text.

Markdown syntax gives you rich text formatting with headings, lists, links, and more. You can also use HTML tags within Markdown content. Message List automatically sanitizes content to prevent rendering dangerous HTML.

Open in a
new tab
MessageList list = new MessageList();
list.setItems(new MessageListItem(
        "**Hello team!** Did everyone review the *design document* for the new project?",
        "Alex Johnson"),
        new MessageListItem(
                """
                        ## Project Update
                        I've completed the initial research phase and documented my findings.

                        * UI mockups ✅
                        * Market analysis ✅
                        * [See detailed report](https://vaadin.com)

                        Let me know your thoughts!
                        """,
                "Sam Rivera"));
list.setMarkdown(true);

Usage for AI Chats

Combine Message List with Message Input to create effective AI chat interfaces. Build your AI chat interface with:

  • Message List with Markdown formatting to display conversation history

  • Message Input for user interactions

  • Backend service to handle AI interactions

Follow these best practices for a smooth user experience:

  • Append tokens to assistant messages in real time as they arrive

  • Show visual indicators for system activity

  • Preserve conversation history by loading past messages and maintaining session state

Open in a
new tab
MessageList list = new MessageList();
list.setMarkdown(true);
Component Usage recommendations

Message Input

Allow users to author and send messages.

Markdown

Standalone component for rendering Markdown content.

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