Message List

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/demo/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(); 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)"; }

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

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; @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 { border-width: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

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="screen-reader-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[]

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

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/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'; }); } }

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

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