Keyboard Navigation

All Chat functions are accessible only to keyboard users.

In its page Tab sequence, the Chat includes the following stops:

  • Message list
  • Input text box
  • Send button

In the message list, the Chat supports the following keyboard shortcuts:

Shortcut Context Description
Up Arrow Message list Selects the previous Chat entry—a message, attachment, or suggested action.
Down Arrow Message list Selects the next Chat item—a message, attachment, or suggested action.
Left Arrow Message list Selects the next attachment or quick action.
Right Arrow Message list Selects the next attachment or quick action.
Enter Message list Executes the selected quick action and focuses the input text box.
Enter Message text box Sends the currently entered message.
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')
);

In this article