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.

1. Install the botframework-directlinejs and adaptivecards dependencies:

   Copy Codenpm install botframework-directlinejs adaptivecards

2. Import the Chat, HeroCard, DirectLine and AdaptiveCards components:

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

3. Next, create the DirectLine client which will connect your app to the bot using the provided secret:

   Copy Codeconst client = new DirectLine({
     secret: "YOUR_API_SECRET",
   });

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

   Copy Codeconst 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'
   };

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

   Copy Codeconst 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]);

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

   Copy Codeconst а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>;
     }
   };

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

   Copy Codeconst 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;
     }
   };

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

   Copy Codeconst 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()
       }]);
     }
   };

Suggested Links

• Microsoft Bot Framework
• Azure Bot Service
• API Reference of the Chat Component