All Components

This website hosts native Kendo UI components built from the ground up with the ultimate performance in mind and intended to be used in the React ecosystem.

Suggested Actions

The Chat messages may contain suggestions for quick actions such as preset replies.

The Chat displays suggested actions for the last message only.

Supported Action Types

The Chat provides built-in support for the following action types:

  • openUrl—Opens a new browser window with the specified URL.
  • reply—Sends the action value as a reply in the Chat.
  • call—Treats the value as a phone number. Similar to clicking a telephone link.
  • other—Handled by user code in the ExecuteActionEvent.

Defining Quick Actions

To define quick actions for a message, populate the suggestedActions field of the 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
        };
        this.bot = {
            id: 0
        };
        this.state = {
            messages: [ {
                author: this.bot,
                text: 'A sample message',
                suggestedActions: [ {
                    value: 'A sample reply',
                    type: 'reply'
                }, {
                    title: 'A sample link',
                    value: '#link',
                    type: 'openUrl'
                }, {
                    title: 'Place a call',
                    value: '555-123-456',
                    type: 'call'
                }, {
                    title: 'A custom action',
                    value: 'Custom action clicked',
                    type: 'alert'
                } ]
            } ]
        };
    }

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

   onAction = (event) => {
       if (event.action.type === 'alert') {
           this.setState((prevState) => {
               return { messages: [ ...prevState.messages, { author: this.user, text: event.action.value } ] };
           });
       }
   }

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

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