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:

ShortcutContextDescription
Up ArrowMessage listSelects the previous Chat entry—a message, attachment, or suggested action.
Down ArrowMessage listSelects the next Chat item—a message, attachment, or suggested action.
Left ArrowMessage listSelects the next attachment or quick action.
Right ArrowMessage listSelects the next attachment or quick action.
EnterMessage listExecutes the selected quick action and focuses the input text box.
EnterMessage text boxSends 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 boring.'
                        }
                    ],
                    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) => ({
            messages: [
                ...prevState.messages,
                event.message
            ]
        }));
        setTimeout(() => {
            this.setState(prevState => ({
                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}
                    placeholder={"Type a message..."}
                    width={400}>
                </Chat>
            </div>
        );
    }
}

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