New to KendoReact? Start a free 30-day trial

Using with Google DialogFlow

The Chat provides integration options for connecting the component to chat bots which are built with Google DialogFlow.

The following example demonstrates how to connect the Chat to a sample DialogFlow Agent.

Install the api-ai-javascript dependency:
sh
```
npm install api-ai-javascript
```

Import the Chat, HeroCard, Calendar, and ApiAiClient components:

jsx

import * as React from 'react';
import { Chat, HeroCard } from '@progress/kendo-react-conversational-ui';
import { Calendar } from '@progress/kendo-react-dateinputs';
import { ApiAiClient } from 'api-ai-javascript';

Create the ApiAiClient to connect your app to the bot using the provided access token:

jsx

const client = new ApiAiClient({
    accessToken: 'YOUR_API_ACCESS_TOKEN'
});

Define the bot and user objects for their identities within the chat interface:

jsx

const user = {
    id: 1,
    name: 'John'
};

const bot = {
    id: 'botty',
    name: 'Botty McbotFace',
    avatarUrl: 'https://demos.telerik.com/kendo-ui/content/chat/InsuranceBot.png',
    avatarAltText: 'KendoReact Conversational UI InsuranceBot'
};

The onResponse callback handles the bot's responses and adds them to the chat:

jsx

const onResponse = React.useCallback(
    (activity) => {
        let responseMessages = [];
        activity.result.fulfillment.messages.forEach(function (element) {
            let newMessage = {
                text: element.speech,
                author: bot,
                timestamp: new Date(activity.timestamp),
                suggestedActions: element.replies
                    ? element.replies.map((x) => {
                          return { type: 'reply', title: x, value: x };
                      })
                    : []
            };
            responseMessages.push(newMessage);
        });

        setMessages((oldMessages) => [...oldMessages, ...responseMessages]);

        if (activity.result.fulfillment.data) {
            let newMessage = {
                text: '',
                author: bot,
                timestamp: new Date(activity.timestamp),
                suggestedActions: activity.result.fulfillment.data.null.suggestedActions
                    ? parseActions(activity.result.fulfillment.data.null.suggestedActions)
                    : [],
                attachments: activity.result.fulfillment.data.null.attachments
                    ? activity.result.fulfillment.data.null.attachments
                    : []
            };
            setMessages((oldMessages) => [...oldMessages, newMessage]);
        }

        if (activity.result.fulfillment.speech === 'When do you want your insurance to start?') {
            let newAttachments = [{ type: 'calendar' }];
            setMessages([
                ...messages,
                { author: bot, timestamp: new Date(activity.timestamp), attachments: newAttachments }
            ]);
        }
    },
    [messages]
);

Call the onResponse method when the bot sends a message:

jsx

React.useEffect(() => {
    client.eventRequest('Welcome').then(onResponse);
}, []);

The attachmentTemplate renders different cards based on the attachment type:

jsx

const attachmentTemplate = (props) => {
    let attachment = props.item;
    if (attachment.type === 'quote') {
        return (
            <div className="k-card k-card-type-rich">
                <div className="k-card-body">
                    <div>
                        <strong>Type:</strong> <span>{attachment.coverage}</span>
                    </div>
                    <div>
                        <strong>Car model:</strong> <span>{attachment.make}</span>
                    </div>
                    <div>
                        <strong>Car cost:</strong> <span>{attachment.worth}</span>
                    </div>
                    <div>
                        <strong>Start date:</strong> <span>{attachment.startDate}</span>
                    </div>
                    <hr />
                    <div>
                        <strong>Total:</strong> <span>{attachment.premium}</span>
                    </div>
                </div>
            </div>
        );
    } else if (attachment.type === 'payment_plan') {
        return (
            <div className="k-card k-card-type-rich">
                <div className="k-card-body">
                    {attachment.rows.map((row, index) => (
                        <div key={index}>{row.text}</div>
                    ))}
                    <hr />
                    <div>
                        <strong>Total:</strong> <span>{attachment.premium}</span>
                    </div>
                </div>
            </div>
        );
    } else if (attachment.type === 'calendar') {
        return (
            <Calendar
                onChange={(event) => {
                    addNewMessage(event);
                }}
            />
        );
    }
    return (
        <HeroCard
            title={attachment.title}
            imageUrl={attachment.images ? attachment.images[0].url : ''}
            subtitle={attachment.subtitle ? attachment.subtitle : ''}
            actions={attachment.buttons}
            onActionExecute={addNewMessage}
        />
    );
};

Define helper functions for parsing actions and text:

jsx

const parseActions = (actions) => {
    if (actions) {
        actions.map((action) => {
            if (action.type === 'postBack') {
                action.type = 'reply';
            }
        });
        return actions;
    }
    return [];
};

const parseText = (event) => {
    if (event.action) {
        return event.action.value;
    } else if (event.value) {
        return event.value;
    } else {
        return event.message.text;
    }
};

Implement the addNewMessage function that sends the user's message to the bot:

jsx

const addNewMessage = (event) => {
    let value = parseText(event);
    client.textRequest(value.toString()).then(onResponse, this);

    if (!event.value) {
        setMessages([
            ...messages,
            {
                author: user,
                text: value,
                timestamp: new Date()
            }
        ]);
    }
};

Using with Google DialogFlow

Suggested Links