Message List

Message List allows you to show a list of messages, for example, a chat log.

Markdown
Attachments
Typing Indicator Flow
Usage for AI Chats
Related Components

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

Source code

MessageListComponent.javapackage 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[]
    }

}
message-list-component.tsximport React, { useEffect } from 'react';
import { format, subDays, subMinutes } from 'date-fns';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList } from '@vaadin/react-components/MessageList.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

function Example() {
  // tag::snippet[]
  const person = useSignal<Person | undefined>(undefined);

  useEffect(() => {
    getPeople({ count: 1 }).then(({ people }) => {
      person.value = people[0];
    });
  }, []);

  const isoMinutes = 'yyyy-MM-dd HH:mm';
  const yesterday = format(subDays(new Date(), 1), isoMinutes);
  const fiftyMinutesAgo = format(subMinutes(new Date(), 50), isoMinutes);

  const items = [
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      userImg: person.value?.pictureUrl,
    },
  ];

  return <MessageList items={items} />;
  // end::snippet[]
}

message-list-component.tsimport '@vaadin/message-list';
import { format, subDays, subMinutes } from 'date-fns';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
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();
    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[] -->
    `;
  }
}

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.

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

Source code

MessageListMarkdown.javapackage com.vaadin.demo.component.messages;

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-markdown")
public class MessageListMarkdown extends Div {

    public MessageListMarkdown() {
        // tag::snippet[]
        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);
        // end::snippet[]

        add(list);
    }

}
message-list-markdown.tsximport { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList, type MessageListItem } from '@vaadin/react-components/MessageList.js';

function Example() {
  // tag::snippet[]
  const items = useSignal<MessageListItem[]>([]);

  useEffect(() => {
    items.value = [
      {
        text: '**Hello team!** Did everyone review the *design document* for the new project?',
        userName: 'Alex Johnson',
      },
      {
        text: `## 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!`,
        userName: 'Sam Rivera',
      },
    ];
  }, []);

  return <MessageList items={items.value} markdown />;
  // end::snippet[]
}

message-list-markdown.tsimport '@vaadin/message-list';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { MessageListItem } from '@vaadin/message-list';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('message-list-markdown')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @state()
  private items: MessageListItem[] = [
    {
      text: '**Hello team!** Did everyone review the *design document* for the new project?',
      userName: 'Alex Johnson',
    },
    {
      text: `## 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!`,
      userName: 'Sam Rivera',
    },
  ];

  protected override render() {
    return html`<vaadin-message-list .items="${this.items}" markdown></vaadin-message-list>`;
  }
  // end::snippet[]
}

Attachments

Messages can include file attachments. Image attachments are displayed as clickable thumbnail previews, while other file types are shown with a file icon and name.

Open in a
new tab

Source code

MessageListAttachments.javapackage com.vaadin.demo.component.messages;

import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.UncheckedIOException;
import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.util.Arrays;
import java.util.Base64;

import javax.imageio.ImageIO;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.router.Route;

@Route("message-list-attachments")
public class MessageListAttachments extends Div {

    public MessageListAttachments() {

        MessageList list = new MessageList();

        Instant yesterday = LocalDateTime.now().minusDays(1)
                .toInstant(ZoneOffset.UTC);
        Instant fiftyMinsAgo = LocalDateTime.now().minusMinutes(50)
                .toInstant(ZoneOffset.UTC);

        // tag::snippet[]
        MessageListItem message1 = new MessageListItem(
                "Here are the documents for the project.", yesterday,
                "Matt Mambo");
        message1.setUserColorIndex(1);

        message1.addAttachment(new MessageListItem.Attachment(
                "project-proposal.pdf",
                "https://example.com/files/proposal.pdf", "application/pdf"));
        // end::snippet[]
        message1.addAttachment(new MessageListItem.Attachment(
                "budget-overview.xlsx", "https://example.com/files/budget.xlsx",
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"));

        MessageListItem message2 = new MessageListItem(
                "Thanks! Here's a photo from the offsite.", fiftyMinsAgo,
                "Linsey Listy");
        message2.setUserColorIndex(2);

        String imageDataUrl = toThumbnailDataUrl(
                getClass().getResourceAsStream("/images/reindeer.jpg"));
        message2.addAttachment(new MessageListItem.Attachment("landscape.jpg",
                imageDataUrl, "image/jpeg"));

        // tag::snippet[]
        list.setItems(Arrays.asList(message1, message2));

        var status = new Span("Click an attachment to see its name here.");
        list.addAttachmentClickListener(event -> {
            status.setText("Clicked: " + event.getAttachment().name());
        });
        // end::snippet[]

        add(list, status);
    }

    private static final int THUMBNAIL_MAX_SIZE = 200;

    private static String toThumbnailDataUrl(InputStream imageStream) {
        try {
            var originalImage = ImageIO.read(imageStream);
            var originalWidth = originalImage.getWidth();
            var originalHeight = originalImage.getHeight();

            var scale = Math.min((double) THUMBNAIL_MAX_SIZE / originalWidth,
                    (double) THUMBNAIL_MAX_SIZE / originalHeight);
            var scaledWidth = (int) (originalWidth * scale);
            var scaledHeight = (int) (originalHeight * scale);

            var scaledImage = new BufferedImage(scaledWidth, scaledHeight,
                    BufferedImage.TYPE_INT_RGB);
            var g2d = scaledImage.createGraphics();
            g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                    RenderingHints.VALUE_INTERPOLATION_BILINEAR);
            g2d.drawImage(originalImage, 0, 0, scaledWidth, scaledHeight, null);
            g2d.dispose();

            var outputStream = new ByteArrayOutputStream();
            ImageIO.write(scaledImage, "jpg", outputStream);
            return "data:image/jpeg;base64," + Base64.getEncoder()
                    .encodeToString(outputStream.toByteArray());
        } catch (IOException e) {
            throw new UncheckedIOException(e);
        }
    }

}
message-list-attachments.tsximport React from 'react';
import { format, subDays, subMinutes } from 'date-fns';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList } from '@vaadin/react-components/MessageList.js';
import landscapeImage from '../../../../../src/main/resources/images/reindeer.jpg?url';

function Example() {

  // tag::snippet[]
  const isoMinutes = 'yyyy-MM-dd HH:mm';
  const yesterday = format(subDays(new Date(), 1), isoMinutes);
  const fiftyMinutesAgo = format(subMinutes(new Date(), 50), isoMinutes);

  const items = [
    {
      text: 'Here are the documents for the project.',
      time: yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
      attachments: [
        {
          name: 'project-proposal.pdf',
          url: 'https://example.com/files/proposal.pdf',
          type: 'application/pdf',
        },
        {
          name: 'budget-overview.xlsx',
          url: 'https://example.com/files/budget.xlsx',
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        },
      ],
    },
    {
      text: "Thanks! Here's a photo from the offsite.",
      time: fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      attachments: [
        {
          name: 'landscape.jpg',
          url: landscapeImage,
          type: 'image/jpeg',
        },
      ],
    },
  ];

  const statusText = useSignal('Click an attachment to see its name here.');

  return (
    <>
      <MessageList
        items={items}
        ref={(messageList) => {
          if (messageList) {
            messageList.addEventListener('attachment-click', (e: CustomEvent) => {
              statusText.value = 'Clicked: ' + e.detail.attachment.name;
            });
          }
        }}
        // Switch to using onAttachmentClick once https://github.com/vaadin/web-components/pull/11189 is available in a release.
        // onAttachmentClick={(e) => {
        //   statusText.value = 'Clicked: ' + e.detail.attachment.name;
        // }}
      />
      <span>{statusText.value}</span>
    </>
  );
  // end::snippet[]
}

message-list-attachments.tsimport '@vaadin/message-list';
import { format, subDays, subMinutes } from 'date-fns';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';
import landscapeImage from '../../../../src/main/resources/images/reindeer.jpg?url';

@customElement('message-list-attachments')
export class Example extends LitElement {
  private readonly isoMinutes = 'yyyy-MM-dd HH:mm';
  private readonly yesterday = format(subDays(new Date(), 1), this.isoMinutes);
  private readonly fiftyMinutesAgo = format(subMinutes(new Date(), 50), this.isoMinutes);

  @state()
  private statusText = 'Click an attachment to see its name here.';

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-message-list
        @attachment-click="${(e: CustomEvent) => {
          this.statusText = 'Clicked: ' + e.detail.attachment.name;
        }}"
        .items="${[
          {
            text: 'Here are the documents for the project.',
            time: this.yesterday,
            userName: 'Matt Mambo',
            userColorIndex: 1,
            attachments: [
              {
                name: 'project-proposal.pdf',
                url: 'https://example.com/files/proposal.pdf',
                type: 'application/pdf',
              },
              {
                name: 'budget-overview.xlsx',
                url: 'https://example.com/files/budget.xlsx',
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
              },
            ],
          },
          {
            text: 'Thanks! Here\u0027s a photo from the offsite.',
            time: this.fiftyMinutesAgo,
            userName: 'Linsey Listy',
            userColorIndex: 2,
            attachments: [
              {
                name: 'landscape.jpg',
                url: landscapeImage,
                type: 'image/jpeg',
              },
            ],
          },
        ]}"
      ></vaadin-message-list>
      <span>${this.statusText}</span>
      <!-- end::snippet[] -->
    `;
  }
}

Each attachment has a name, a URL, and a MIME type. The MIME type determines how the attachment is rendered: types starting with image/ are shown as thumbnail previews, while all other types are shown as file icons. You can listen for attachment click events to handle downloads or other actions.

Typing Indicator Flow

Note

Preview Feature

This is a preview version of the Message List typing indicator. You need to enable it with the feature flag com.vaadin.experimental.messageListTypingIndicator. Preview versions may lack some planned features, and breaking changes may be introduced in any Vaadin version. We encourage you to try it out and provide feedback in the Forum so that we can make it stable. You can report bugs and request additional features on GitHub.

Message List can show which users are typing, for example to tell the participants of a chat that a reply is on its way. The typing indicator appears after the last message. By default, it shows the avatars and names of the typing users, and the text Typing…. If the list is scrolled to the end when the indicator appears, the list scrolls to keep the indicator in view.

Open in a
new tab

Source code

MessageListTypingIndicator.javapackage com.vaadin.demo.component.messages;

import java.time.Instant;
import java.time.temporal.ChronoUnit;

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.component.messages.MessageListTypingIndicatorType;
import com.vaadin.flow.component.messages.MessageListUser;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("message-list-typing-indicator")
public class MessageListTypingIndicator extends Div {

    public MessageListTypingIndicator() {
        Person person = DataService.getPeople(1).get(0);
        Instant fiveMinsAgo = Instant.now().minus(5, ChronoUnit.MINUTES);
        MessageListItem message = new MessageListItem(
                "Linsey, could you check if the details with the order are okay?",
                fiveMinsAgo, "Matt Mambo");
        message.setUserColorIndex(1);

        RadioButtonGroup<MessageListTypingIndicatorType> typeGroup = new RadioButtonGroup<>(
                "Typing indicator type",
                MessageListTypingIndicatorType.values());
        typeGroup.setItemLabelGenerator(type -> switch (type) {
        case DEFAULT -> "Default";
        case ELLIPSIS -> "Ellipsis";
        case MINIMAL -> "Minimal";
        });
        typeGroup.setValue(MessageListTypingIndicatorType.DEFAULT);

        // tag::snippet[]
        MessageList list = new MessageList(message);

        MessageListUser linsey = new MessageListUser("Linsey Listy",
                person.getPictureUrl());
        linsey.setColorIndex(2);
        MessageListUser sam = new MessageListUser("Sam Swanson");
        sam.setColorIndex(3);
        list.setTypingUsers(linsey, sam);

        // Change the type of the typing indicator when the option changes
        typeGroup.addValueChangeListener(
                event -> list.setTypingIndicatorType(event.getValue()));
        // end::snippet[]

        add(list, typeGroup);
    }

}

Set the typing users with setTypingUsers(). Each call replaces the current typing users, and a call without users hides the indicator. Message List doesn’t remove the users on its own, so update them when someone stops typing or sends a message. getTypingUsers() returns the current users, for example to filter out the one who stopped.

Without the feature flag, the methods that configure the typing indicator throw a MessageListTypingIndicatorExperimentalFeatureException, at the latest when the list is attached. The aiComponents flag of the AI support features enables the typing indicator as well.

Each typing user is a MessageListUser. Like the sender of a message, it has a name, an abbreviation, an image, and a color index for the avatar, and class names added with addClassNames() apply to the avatar. Changing any of these updates the indicator right away. The image is either a URL set with setImage(), or a DownloadHandler set with setImageHandler(), which Message List serves as a resource. Since the resource is registered for the list that the user was last added to, use a separate MessageListUser instance for each list.

Message List hides the typing indicator from assistive technologies and keeps it out of the focus order. Instead, it announces the names of the typing users and the typing indicator text through a live region.

Indicator Types

Set the type of the typing indicator with setTypingIndicatorType(), passing one of the MessageListTypingIndicatorType constants. You can change the type at any time, even while the indicator is visible.

Type Description

Type	Description
`DEFAULT`	Shows the indicator like a message: the avatars and names of the typing users, and the typing indicator text as the content.
`ELLIPSIS`	Shows the avatars of the typing users and an animated ellipsis. The names and the typing indicator text aren’t shown, but screen readers still announce them.
`MINIMAL`	Shows the indicator as a single compact row: the avatars, followed by the names of the typing users and the typing indicator text, which appears in lowercase.

DEFAULT

Shows the indicator like a message: the avatars and names of the typing users, and the typing indicator text as the content.

ELLIPSIS

Shows the avatars of the typing users and an animated ellipsis. The names and the typing indicator text aren’t shown, but screen readers still announce them.

MINIMAL

Shows the indicator as a single compact row: the avatars, followed by the names of the typing users and the typing indicator text, which appears in lowercase.

Typing Indicator Text

Replace the default text Typing…, for example with a translation, by setting a MessageListI18n object:

Source code

Javalist.setI18n(new MessageListI18n()
        .setTypingIndicatorText("Escribiendo…"));

The names of the typing users are joined into a list in the language of the page, so the text is the only part that needs a translation. The screen reader announcement and the MINIMAL type put the text right after the names, so choose a text that reads well there.

Binding to a Signal

Use bindTypingUsers() to bind the typing users to a signal. The indicator then follows the signal: it updates whenever users are added to or removed from the list signal, and whenever the value of an individual user signal changes. While a binding is active, calling setTypingUsers() or binding another signal throws a BindingActiveException. The indicator follows the signal only while the list is attached.

Source code

JavaListSignal<MessageListUser> typingUsers = new ListSignal<>();
list.bindTypingUsers(typingUsers);

// Linsey starts typing
ValueSignal<MessageListUser> linseyTyping = typingUsers.insertLast(linsey);

// Linsey stops typing
typingUsers.remove(linseyTyping);

Usage for AI Chats

For a higher-level approach that eliminates boilerplate wiring, see the AI support features, which connect Message List and Message Input to an LLM provider automatically.

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
Distinguish the user’s prompts from the assistant’s responses, for example with the style variants for one-to-one conversations
Show visual indicators for system activity
Preserve conversation history by loading past messages and maintaining session state

Open in a
new tab

Source code

MessageListAiChat.javapackage com.vaadin.demo.component.messages;

import java.util.List;

import com.vaadin.demo.component.messages.LLMClient.Message;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageInput;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.router.Route;

@Route("message-list-ai-chat")
public class MessageListAiChat extends Div {

    private MessageListItem createItem(String text, boolean assistant) {
        MessageListItem item = new MessageListItem(text,
                assistant ? "Assistant" : "User");
        item.setUserColorIndex(assistant ? 2 : 1);
        return item;
    }

    public MessageListAiChat() {
        String chatId = "1234"; // Placeholder chat identifier
        // tag::snippet[]
        MessageList list = new MessageList();
        list.setMarkdown(true);
        // end::snippet[]
        MessageInput input = new MessageInput();

        // Live region for screen reader announcements
        Div liveRegion = new Div();
        liveRegion.getElement().setAttribute("aria-live", "polite");
        liveRegion.addClassName("screen-reader-only");
        add(liveRegion);

        List<Message> history = LLMClient.getHistory(chatId);

        list.setItems(history.stream()
                .map(message -> createItem(message.text(), message.assistant()))
                .toList());

        input.addSubmitListener(e -> {
            String userInput = e.getValue();

            // Add the user message to the list
            list.addItem(createItem(userInput, false));

            // Add the Assistant message to the list
            MessageListItem newAssistantMessage = createItem("", true);
            list.addItem(newAssistantMessage);

            // Announce that AI is processing
            liveRegion.setText("AI is processing the prompt");

            int messageListItemCount = list.getItems().size();
            LLMClient.stream(chatId, userInput).subscribe(token -> {
                getUI().get().access(() -> {
                    // Update the Assistant message with the response
                    // Make sure to have server push enabled!
                    // See
                    // https://vaadin.com/docs/latest/flow/advanced/server-push
                    newAssistantMessage.appendText(token);
                });
            }, error -> {
                // Handle error
            }, () -> {
                getUI().get().access(() -> {
                    if (messageListItemCount != list.getItems().size()) {
                        // Another message is still being processed
                        return;
                    }

                    // Announce that a new message is available
                    liveRegion.setText("New message available");
                });

            });
        });

        add(list, input);

    }

}
screen-reader-only.css.screen-reader-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
screen-reader-only.css
message-list-ai-chat.tsximport { useCallback, useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageInput, type MessageInputSubmitEvent } from '@vaadin/react-components';
import { MessageList, type MessageListItem } from '@vaadin/react-components/MessageList.js';
import LLMChatService from 'Frontend/demo/services/LLMChatService.js';

function createItem(text: string, assistant = false): MessageListItem {
  return {
    text,
    userName: assistant ? 'Assistant' : 'User',
    userColorIndex: assistant ? 2 : 1,
  };
}

function Example() {
  const messageListItems = useSignal<MessageListItem[]>([]);
  const announcement = useSignal('');
  const chatId = '1234'; // Placeholder chat identifier

  useEffect(() => {
    LLMChatService.getHistory(chatId).then((messages) => {
      messageListItems.value = messages.map((message) =>
        createItem(message.text, message.assistant)
      );
    });
  }, []);

  const handleChatSubmit = useCallback((e: MessageInputSubmitEvent) => {
    const userInput = e.detail.value;

    // Add the user message to the list
    messageListItems.value = [...messageListItems.value, createItem(userInput)];

    // Add the Assistant message to the list
    const newAssistantItem = createItem('', true);
    messageListItems.value = [...messageListItems.value, newAssistantItem];

    // Announce that AI is processing
    announcement.value = 'AI is processing the prompt';

    LLMChatService.stream(chatId, userInput)
      .onNext((token) => {
        // Append the token to the Assistant message
        newAssistantItem.text += token;
        // Force the MessageList to re-render
        messageListItems.value = [...messageListItems.value];
      })
      .onComplete(() => {
        // Announce that a new message is available
        announcement.value = 'New message available';
      });
  }, []);

  return (
    <div>
      {/* Live region for screen reader announcements */}
      <div aria-live="polite" className="screen-reader-only">
        {announcement.value}
      </div>

      {/* tag::snippet[] */}
      <MessageList items={messageListItems.value} markdown />
      {/* end::snippet[] */}
      <MessageInput onSubmit={handleChatSubmit} />
    </div>
  );
}

LLMChatService.javapackage com.vaadin.demo.component.messages;

import java.util.List;

import com.vaadin.demo.component.messages.LLMClient.Message;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;
import reactor.core.publisher.Flux;

// tag::snippet[]
@BrowserCallable
@AnonymousAllowed
public class LLMChatService {

    public List<Message> getHistory(String chatId) {
        // Implement your message history retrieval logic here
        return LLMClient.getHistory(chatId);
    }

    public Flux<String> stream(String chatId, String userMessage) {
        // Implement your message streaming logic here
        return LLMClient.stream(chatId, userMessage);
    }
}
// end::snippet[]
screen-reader-only.css.screen-reader-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
screen-reader-only.css
message-list-ai-chat.tsimport '@vaadin/message-list';
import '@vaadin/message-input';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { MessageInputSubmitEvent } from '@vaadin/message-input';
import type { MessageListItem } from '@vaadin/message-list';
import LLMChatService from 'Frontend/demo/services/LLMChatService.js';
import { applyTheme } from 'Frontend/demo/theme';

function createItem(text: string, assistant = false): MessageListItem {
  return {
    text,
    userName: assistant ? 'Assistant' : 'User',
    userColorIndex: assistant ? 2 : 1,
  };
}

@customElement('message-list-ai-chat')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  @state()
  private messageListItems: MessageListItem[] = [];

  @state()
  private announcement: string = '';

  private chatId = '1234'; // Placeholder chat identifier

  protected override async firstUpdated() {
    const messages = await LLMChatService.getHistory(this.chatId);
    this.messageListItems = messages.map((message) => createItem(message.text, message.assistant));
  }

  protected override render() {
    return html`
      <!-- Live region for screen reader announcements -->
      <div aria-live="polite" class="screen-reader-only">${this.announcement}</div>

      <!-- tag::snippet[] -->
      <vaadin-message-list .items="${this.messageListItems}" markdown></vaadin-message-list>
      <!-- end::snippet[] -->
      <vaadin-message-input @submit="${this.handleChatSubmit}"></vaadin-message-input>
    `;
  }

  private handleChatSubmit(e: MessageInputSubmitEvent) {
    const userInput = e.detail.value;

    // Add the user message to the list
    this.messageListItems = [...this.messageListItems, createItem(userInput)];

    // Add the Assistant message to the list
    const newAssistantItem = createItem('', true);
    this.messageListItems = [...this.messageListItems, newAssistantItem];

    // Announce that AI is processing
    this.announcement = 'AI is processing the prompt';

    LLMChatService.stream(this.chatId, userInput)
      .onNext((token) => {
        // Append the token to the Assistant message
        newAssistantItem.text += token;
        // Force the MessageList to re-render
        this.messageListItems = [...this.messageListItems];
      })
      .onComplete(() => {
        // Announce that a new message is available
        this.announcement = 'New message available';
      });
  }
}
LLMChatService.javapackage com.vaadin.demo.component.messages;

import java.util.List;

import com.vaadin.demo.component.messages.LLMClient.Message;
import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;
import reactor.core.publisher.Flux;

// tag::snippet[]
@BrowserCallable
@AnonymousAllowed
public class LLMChatService {

    public List<Message> getHistory(String chatId) {
        // Implement your message history retrieval logic here
        return LLMClient.getHistory(chatId);
    }

    public Flux<String> stream(String chatId, String userMessage) {
        // Implement your message streaming logic here
        return LLMClient.stream(chatId, userMessage);
    }
}
// end::snippet[]
screen-reader-only.css.screen-reader-only {
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
screen-reader-only.css

Component	Usage recommendations
Message Input	Allow users to author and send messages.
Markdown	Standalone component for rendering Markdown content.

Component

Usage recommendations

Message Input

Allow users to author and send messages.

Markdown

Standalone component for rendering Markdown content.

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

Docs

Docs

Message List

Markdown

Attachments

Typing Indicator Flow

Indicator Types

Typing Indicator Text

Binding to a Signal

Usage for AI Chats

Docs

Markdown

Attachments

Typing Indicator Flow

Indicator Types

Typing Indicator Text

Binding to a Signal

Usage for AI Chats

Related Components