New to KendoReact? Start a free 30-day trial

Data Binding

The Chat enables you to bind the message list to streaming data.

Data Model

The Chat component defines interfaces for the following entities:

  • UserA unique participant in the conversation.
  • MessageThe metadata and content of each message.
  • AttachmentThe multimedia or additional information which is associated with a chat message.
  • ActionA suggested quick action in reply to a message. For example, a text reply, external link, or phone call.

As a minimum data-binding configuration for the Chat, provide a list of messages and a user instance which identify the local participant.

User Identity

The user entity identifies the local user. The messages that are authored by the user appear on the right-hand side of the message list.

import { Chat } from '@progress/kendo-react-conversational-ui';

class App extends React.Component {
    constructor(props) {
        this.user = {
            id: 1,                      // Required field
            name: 'Jane',               // Optional
            avatarUrl: '/profile.png'   // Optional
    render() {
        return (
                <Chat user={this.user}</Chat>

    <App />,

Binding to Message Data

Typically, Chat messages stream from a remote service. To bind the Chat to the stream, utilize a remote service that will stream data and can manage to provide automated responses. Our demo using the Google DialogFlow is one of the possible remote services that can be used.

Posting Messages

When you set up the messages stream set the new messages to the state as well in order to update the component.

The following example demonstrates how to accept the local messages in the sendMessage event and merge them with the incoming messages.

View Source
Edit In Stackblitz  
Change Theme: