Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://vaadin.com/docs/latest/components/message-list below:

Message List component | Vaadin components

1. Docs
2. Components
3. 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.

package 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[] } }

import 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[] }

import '@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 type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; import { applyTheme } from 'Frontend/generated/theme'; @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(); // Apply custom theme (only supported if your app uses one) 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.

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:

package 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-with-theme") public class MessageListWithThemeComponent extends Div { public MessageListWithThemeComponent() { // tag::snippet[] 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); // end::snippet[] } }

/* Add this to your global CSS, for example in: */ /* frontend/theme/[my-theme]/styles.css */ vaadin-message.current-user { background-color: #000; color: #fff; border: 2px solid #fff; border-radius: 9px; font-weight: 900; } vaadin-message.current-user::part(name) { font-weight: 900; } vaadin-message.current-user::part(time) { color: #fff; } vaadin-message.current-user::part(name)::after{ content: " (You)"; }

import 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() { 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); return ( // tag::snippet[] <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.value?.pictureUrl, className: 'current-user', }, ]} /> // end::snippet[] ); }

/* Add this to your global CSS, for example in: */ /* frontend/theme/[my-theme]/styles.css */ vaadin-message.current-user { background-color: #000; color: #fff; border: 2px solid #fff; border-radius: 9px; font-weight: 900; } vaadin-message.current-user::part(name) { font-weight: 900; } vaadin-message.current-user::part(time) { color: #fff; } vaadin-message.current-user::part(name)::after{ content: " (You)"; }

import '@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 type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('message-list-component-with-theme') 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(); // Apply custom theme (only supported if your app uses one) 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, /* Add custom class name */ className: 'current-user', }, ]}" ></vaadin-message-list> <!-- end::snippet[] --> `; } }

/* Add this to your global CSS, for example in: */ /* frontend/theme/[my-theme]/styles.css */ vaadin-message.current-user { background-color: #000; color: #fff; border: 2px solid #fff; border-radius: 9px; font-weight: 900; } vaadin-message.current-user::part(name) { font-weight: 900; } vaadin-message.current-user::part(time) { color: #fff; } vaadin-message.current-user::part(name)::after{ content: " (You)"; }

Note

Use Theme Names, Not Class Names pre-V24.3

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.

package 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); } }

import { 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[] }

import '@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/generated/theme'; @customElement('message-list-markdown') export class Example extends LitElement { protected override createRenderRoot() { const root = super.createRenderRoot(); // Apply custom theme (only supported if your app uses one) 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[] }

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

package 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; import com.vaadin.flow.theme.lumo.LumoUtility; @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(LumoUtility.Accessibility.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); } }

import { 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="sr-only"> {announcement.value} </div> {/* tag::snippet[] */} <MessageList items={messageListItems.value} markdown /> {/* end::snippet[] */} <MessageInput onSubmit={handleChatSubmit} /> </div> ); }

package 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[]

import '@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/generated/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(); // Apply custom theme (only supported if your app uses one) 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="sr-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'; }); } }

package 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[]

Message Input

Allow users to author and send messages.

Markdown

Standalone component for rendering Markdown content.

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4