Message Templates

You can customize the Chat messages by using templates.

Attachments are not part of the message template. For more information, refer to the section on customizing message attachments.

Defining Message Templates

You can set the message templates either as functional or class components. The templates receive all the data that is related to the message and allow you to customize the rendered massage based on the received props or to style the props as desired. To get the default appearance of the built-in message template, wrap the template content in a "k-bubble" container.

The following example demonstrates how to define and use a message template inside the Chat.

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


function MessageTemplate(props) {
    return (
        <div className="k-bubble">
            <div>The message text is {props.item.text}</div>
        </div>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = {
            id: 1,
            name: "Jane",
            avatarUrl: "https://via.placeholder.com/24/008000/008000.png"
        };
        this.state = {
            messages: []
        };
    }

    addNewMessage = (event) => {
        this.setState((prevState) => {
            return { messages: [...prevState.messages, event.message] };
        });
    };

    render() {
        return (
            <div>
                <Chat user={this.user}
                    messages={this.state.messages}
                    onMessageSend={this.addNewMessage}
                    width={400}
                    messageTemplate={MessageTemplate}>
                </Chat>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Displaying Markdown Content

The following example demonstrates how to render Markdown by utilizing the marked library.

import React from 'react';
import ReactDOM from 'react-dom';
import { Chat } from '@progress/kendo-react-conversational-ui';
import * as marked from 'marked';

function MessageTemplate(props) {
    let message = props.item;
    let parser = marked.setOptions({});
    let parsedMessage = parser.parse(message.text);
    let htmlToinsert = { __html: parsedMessage };
    return (
        <div className="k-bubble">
            <div dangerouslySetInnerHTML={htmlToinsert} />
        </div>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = {
            id: 1
        };
        this.bot = {
            id: 0
        };
        this.state = {
            messages: [{
                author: this.bot,
                text: 'Type in some _Markdown_ to see it **rendered** here'
            }]
        };
    }

    addNewMessage = (event) => {
        this.setState((prevState) => {
            return { messages: [...prevState.messages, event.message] };
        });
    };

    render() {
        return (
            <div>
                <Chat user={this.user}
                    messages={this.state.messages}
                    onMessageSend={this.addNewMessage}
                    width={400}
                    messageTemplate={MessageTemplate}>
                </Chat>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article