Messages is a collection of components to display messages and to build chats and comment sections.

<vaadin-message-list .items="${this.items}"></vaadin-message-list>
<vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input>

Components Included

Messages consists of two main components.

  • Message list, for displaying a list of messages.

  • Message input, for letting the user fill in new messages.

Message List

Message List allows you to show a list of messages. 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. You can configure the text content, information about the sender and the time of sending for each message.

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

Message Input

<vaadin-message-input> is a Web Component for sending messages. Message is a component for showing a single message with an author, message and time. It consists of a text area that grows on along with the content, and a send button to send message. The message can be sent by one of the following actions:

  • by pressing Enter (use Shift + Enter to add a new line)

  • by clicking the submit button.

<vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input>

Theming

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-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>
ComponentUsage recommendations

Avatar

Rendering user image as avatar.