New to KendoReact? Start a free 30-day trial

Using with Microsoft Bot Framework

The Chat provides integration options for connecting the component to chat bots which are built with Microsoft Bot Framework.

Travel Agent Chat Bot

The following example demonstrates how to connect the Chat to chat bots which run on Azure Bot Service and use the Direct Line protocol to create a Travel Agent Chat Bot.

Install the botframework-directlinejs and adaptivecards dependencies:
sh
```
npm install botframework-directlinejs adaptivecards
```

Import the Chat, HeroCard, DirectLine and AdaptiveCards components:

jsx

import * as React from 'react';
import { Chat, HeroCard } from '@progress/kendo-react-conversational-ui';
import { DirectLine } from 'botframework-directlinejs';
import AdaptiveCards from 'adaptivecards';

Next, create the DirectLine client which will connect your app to the bot using the provided secret:
jsx
```
const client = new DirectLine({
    secret: 'YOUR_API_SECRET'
});
```

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

jsx

const bot = {
    id: 'Botyo-BotTesting',
    name: 'Travel Agent',
    avatarUrl: 'https://demos.telerik.com/kendo-ui/content/chat/VacationBot.png',
    avatarAltText: 'KendoReact Conversational UI VacationBot'
};

const user = {
    id: 'User',
    name: 'KendoReact'
};

The onResponse callback will handle incoming messages from the bot and parse them into a format suitable for display in the chat:

jsx

const onResponse = React.useCallback(
    (activity) => {
        let newMsg;
        if (activity.from.id === bot.id) {
            newMsg = {
                text: activity.text,
                author: bot,
                typing: activity.type === 'typing',
                timestamp: new Date(activity.timestamp),
                suggestedActions: parseActions(activity.suggestedActions),
                attachments: activity.attachments ? activity.attachments : []
            };
            setMessages([...messages, newMsg]);
        }
    },
    [messages]
);

React.useEffect(() => {
    client.activity$.subscribe((activity) => onResponse(activity));
}, [onResponse]);

When the bot sends adaptive cards, the following attachmentTemplate renders either a Hero card or an Adaptive card:

jsx

const аttachmentTemplate = (props) => {
    let attachment = props.item;
    if (attachment.contentType === 'application/vnd.microsoft.card.hero') {
        return (
            <HeroCard
                title={attachment.content.title || attachment.content.text}
                subtitle={attachment.content.subtitle}
                imageUrl={attachment.content.images ? attachment.content.images[0].url : ''}
                imageMaxWidth="250px"
                actions={attachment.content.buttons}
                onActionExecute={addNewMessage}
            />
        );
    } else if (attachment.contentType === 'application/vnd.microsoft.card.adaptive') {
        let adaptiveCard = new AdaptiveCards.AdaptiveCard();
        adaptiveCard.parse(attachment.content);
        let renderedCard = adaptiveCard.render();
        let htmlToinsert = { __html: renderedCard.innerHTML };
        return <div dangerouslySetInnerHTML={htmlToinsert} />;
    } else {
        return <div className="k-card">{attachment.content}</div>;
    }
};

To process actions and user input, the following helper functions are used:

jsx

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

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

Implement the addNewMessage method that sends the user's message or action back to the bot:

jsx

const addNewMessage = (event) => {
    let value = parseText(event);
    client
        .postActivity({
            from: { id: user.id, name: user.name },
            type: 'message',
            text: value
        })
        .subscribe(
            (id) => console.log('Posted activity, assigned ID ', id),
            (error) => console.log('Error posting activity', error)
        );

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

Using with Microsoft Bot Framework

Travel Agent Chat Bot

Suggested Links