Docs

Docs

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.

<MessageList
  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?.pictureUrl,
    },
  ]}
/>

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.

Component Usage recommendations

Message Input

Allow users to author and send messages.
Important
 You can find more information in the corresponding article on vaadin.com.