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.

1. Install the api-ai-javascript dependency:

   Copy Codenpm install api-ai-javascript

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

   Copy Codeimport * 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';

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

   Copy Codeconst client = new ApiAiClient({
     accessToken: 'YOUR_API_ACCESS_TOKEN',
   });

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

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

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

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

6. Call the onResponse method when the bot sends a message:

   Copy CodeReact.useEffect(() => {
       client.eventRequest("Welcome").then(onResponse);
   }, []);

7. The attachmentTemplate renders different cards based on the attachment type:

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

8. Define helper functions for parsing actions and text:

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

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

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

Suggested Links

• Google DialogFlow
• API Reference of the Chat Component