Conversational UI Overview

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


class App extends React.Component {
    constructor(props) {
        super(props);
        this.user = {
            id: 1,
            avatarUrl: "https://via.placeholder.com/24/008000/008000.png"
        };
        this.bot = {
            id: 0
        };
        this.state = {
            messages: [
                {
                    author: this.bot,
                    suggestedActions: [ {
                        type: 'reply',
                        value: 'Oh, really?'
                    }, {
                        type: 'reply',
                        value: 'Thanks, but this is borring.'
                    } ],
                    timestamp: new Date(),
                    text: 'Hello, this is a demo bot. I don`t do much, but I can count symbols!'
                }
            ]
        };
    }

    addNewMessage = (event) => {
        let botResponce = Object.assign({},event.message );
        botResponce.text = this.countReplayLength(event.message.text);
        botResponce.author = this.bot;
        this.setState((prevState) => {
            return { messages: [ ...prevState.messages, event.message ] };
        });
        let that = this;
        setTimeout(function() {
            that.setState((prevState) => {
                return { messages: [ ...prevState.messages, botResponce ] };
            });
        },1000);
    };

    countReplayLength = (question) => {
        let length = question.length;
        let answer = question + " contains exactly " + length + " symbols.";
        return answer;
    }


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

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