Message Input

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

import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import '@vaadin/message-input'; import type { MessageInputSubmitEvent } from '@vaadin/message-input'; import { Notification } from '@vaadin/notification'; import { applyTheme } from 'Frontend/generated/theme'; @customElement('message-input-component') 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 message = ''; protected override render() { return html` <!-- tag::snippet[] --> <vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input> <!-- end::snippet[] --> `; } _handleSubmit(event: MessageInputSubmitEvent) { this.message = event.detail.value; Notification.show(`Message received: ${this.message}`, { position: 'middle' }); } }

MessageInput input = new MessageInput(); input.addSubmitListener(submitEvent -> { Notification.show("Message received: " + submitEvent.getValue(), 3000, Notification.Position.MIDDLE); }); add(input);

package com.vaadin.demo.component.messages; import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.messages.MessageInput; import com.vaadin.flow.component.notification.Notification; import com.vaadin.flow.router.Route; @Route("message-input") public class MessageInputComponent extends Div { public MessageInputComponent() { // tag::snippet[] MessageInput input = new MessageInput(); input.addSubmitListener(submitEvent -> { Notification.show("Message received: " + submitEvent.getValue(), 3000, Notification.Position.MIDDLE); }); add(input); // end::snippet[] } }

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

import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import '@vaadin/message-input'; import '@vaadin/message-list'; import type { MessageInputSubmitEvent } from '@vaadin/message-input'; import type { MessageListItem } from '@vaadin/message-list'; import { applyTheme } from 'Frontend/generated/theme'; import { getPeople } from 'Frontend/demo/domain/DataService'; @customElement('message-basic') 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 items: MessageListItem[] = []; protected override async firstUpdated() { const { people } = await getPeople({ count: 1 }); const person = people[0]; this.items = [ { text: 'Nature does not hurry, yet everything gets accomplished.', time: 'yesterday', userName: 'Matt Mambo', userColorIndex: 1, }, { text: 'Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.', time: 'right now', userName: 'Linsey Listy', userColorIndex: 2, userImg: person.pictureUrl, }, ]; } protected override render() { return html` <!-- tag::snippet[] --> <vaadin-message-list .items="${this.items}"></vaadin-message-list> <vaadin-message-input @submit="${this._handleSubmit}"></vaadin-message-input> <!-- end::snippet[] --> `; } _handleSubmit(e: MessageInputSubmitEvent) { this.items = [ ...this.items, { text: e.detail.value, time: 'seconds ago', userName: 'Milla Sting', userAbbr: 'MS', userColorIndex: 3, }, ]; } }

MessageList list = new MessageList(); MessageInput input = new MessageInput(); input.addSubmitListener(submitEvent -> { MessageListItem newMessage = new MessageListItem( submitEvent.getValue(), Instant.now(), "Milla Sting"); newMessage.setUserColorIndex(3); List<MessageListItem> items = new ArrayList<>(list.getItems()); items.add(newMessage); list.setItems(items); }); Person person = DataService.getPeople(1).get(0); MessageListItem message1 = new MessageListItem( "Nature does not hurry, yet everything gets accomplished.", LocalDateTime.now().minusDays(1).toInstant(ZoneOffset.UTC), "Matt Mambo"); message1.setUserColorIndex(1); MessageListItem message2 = new MessageListItem( "Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.", LocalDateTime.now().minusMinutes(55).toInstant(ZoneOffset.UTC), "Linsey Listy", person.getPictureUrl()); message2.setUserColorIndex(2); list.setItems(message1, message2); VerticalLayout chatLayout = new VerticalLayout(list, input); chatLayout.setHeight("500px"); chatLayout.setWidth("400px"); chatLayout.expand(list); add(chatLayout);

package com.vaadin.demo.component.messages; import java.time.Instant; import java.time.LocalDateTime; import java.time.ZoneOffset; import java.util.ArrayList; import java.util.List; 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.MessageInput; import com.vaadin.flow.component.messages.MessageList; import com.vaadin.flow.component.messages.MessageListItem; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.router.Route; @Route("messages-basic") public class MessagesBasic extends Div { public MessagesBasic() { // tag::snippet[] MessageList list = new MessageList(); MessageInput input = new MessageInput(); input.addSubmitListener(submitEvent -> { MessageListItem newMessage = new MessageListItem( submitEvent.getValue(), Instant.now(), "Milla Sting"); newMessage.setUserColorIndex(3); List<MessageListItem> items = new ArrayList<>(list.getItems()); items.add(newMessage); list.setItems(items); }); Person person = DataService.getPeople(1).get(0); MessageListItem message1 = new MessageListItem( "Nature does not hurry, yet everything gets accomplished.", LocalDateTime.now().minusDays(1).toInstant(ZoneOffset.UTC), "Matt Mambo"); message1.setUserColorIndex(1); MessageListItem message2 = new MessageListItem( "Using your talent, hobby or profession in a way that makes you contribute with something good to this world is truly the way to go.", LocalDateTime.now().minusMinutes(55).toInstant(ZoneOffset.UTC), "Linsey Listy", person.getPictureUrl()); message2.setUserColorIndex(2); list.setItems(message1, message2); VerticalLayout chatLayout = new VerticalLayout(list, input); chatLayout.setHeight("500px"); chatLayout.setWidth("400px"); chatLayout.expand(list); add(chatLayout); // end::snippet[] } }