Toolbar

The toolbar of the Chat allows you to add toolbar actions for achieving a more user-friendly conversational UI.

The toolbar is located below the input box of the Chat. You can display or hide the toolbar by clicking the toolbar icon which is placed to the left of the Send button. The Chat toolbar enables you to add buttons for end-user interaction. Depending on the executed command in the toolbar, you can also implement a specific functionality.

Basic Usage

  • Control the toolbar visibility using the showToolbar prop.
  • Set the content of the toolbar using the toolbar prop. This allows returning a React component which will be rendered inside the toolbar.

The following example demonstrates the toolbar in action:

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

const AttachmentTemplate = (props) => {
    let attachment = props.item;
    return (
        <div className="k-card k-card-type-rich">
            <div className="k-card-body quoteCard">
                <img style={{ maxHeight: '120px' }} src={attachment.content} draggable={false} />
            </div>
        </div>
    )
}


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

    handleInputChange = (e) => {
        let file = e.target.files[0];
        let reader = new FileReader();
        reader.onloadend = (event) => {
            let message = {
                author: this.user,
                text: '',
                attachments: [{
                    content: event.target.result,
                    contentType: 'image/'
                }]
            }
            this.setState((prevState) => ({
                messages: [
                    ...prevState.messages,
                    message
                ],
                showToolbar: false
            }));
        };
        reader.readAsDataURL(file);
    }

    Toolbar = () => {
        return (
            <span>
                <input type='file' onChange={this.handleInputChange} style={{display: 'none'}} ref={el => this.fileUpload = el}/>
                <button className="sendimage k-button k-button-icon" onClick={()=>this.fileUpload.click() }>
                    <span className="k-icon k-i-image"/>
                </button>
            </span>
        );
    }

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

    render() {
        return (
            <div>
                <Chat user={this.user}
                    messages={this.state.messages}
                    onMessageSend={this.addNewMessage}
                    placeholder={"Type a message..."}
                    width={400}
                    attachmentTemplate={AttachmentTemplate}
                    showToolbar={this.state.showToolbar}
                    onToolbarActionExecute={e => this.setState({ showToolbar: !this.state.showToolbar })}
                    toolbar={<this.Toolbar />}>
                </Chat>
            </div>
        );
    }
}

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