chatbot and dialogflow

[Hernan]

Hi,

I want integrate in my website the chatbot functionality, I found the component with the features that I need 

https://demos.telerik.com/aspnet-ajax/chat/overview/defaultcs.aspx

 

But for beginning you don't have some  tutorial about how integrate Google DialogFlow with this component?

If is done some tutorial will be great for evaluate the component and after decide if I purchase this package (asp.net UI ajax)

 

Thanks

[Peter Milchev]

Hello Hernan,

The integration of the RadChat with the DialogFlow is based on the approach described in the Connecting to Chat Bot Services via Chat Agent article.

Basically, to create the integration with the DialogFlow, you create a DialogFlowAgent that internally uses the ApiAi.ApiAiClient of the DialogFlow library.

<telerik:RadCodeBlock runat="server">
    <script>
        var $ = $ || $telerik.$;

        function onLoad(sender, args) {
            sender.agent = new DialogFlowAgent(sender);
        }

        function onPost(sender, args) {
            sender.agent.postMessage(args.get_text());
        }

        var DialogFlowAgent = kendo.Class.extend({
            init: function (chat) {
                this.chat = chat;
                this.userInfo = {
                    id: "botty",
                    iconUrl: "images/avatar.png",
                    name: "Botty McbotFace"
                };

                this.agent = new ApiAi.ApiAiClient({ accessToken: "280344fb165a461a8ccfef7e1bb47e65" });

                this.postEvent("Welcome");

                this._timestamp;
            },

            postEvent: function (event) {
                this.agent
                    .eventRequest(event)
                    .then($.proxy(this.onResponse, this));
            },

            postMessage: function (text) {
                this.agent
                    .textRequest(text)
                    .then($.proxy(this.onResponse, this));
            },

            onResponse: function (response) {
                this._timestamp = response.timestamp;

                if (response.result && response.result.fulfillment) {
                    var fulfillment = response.result.fulfillment;
                    var data = fulfillment.data;

                    this.renderMessages(fulfillment.messages);

                    if (data && data.null) {
                        this.renderAttachments(data.null);

                        this.renderSuggestedActions(data.null.suggestedActions);
                    }
                }
            },

            renderMessages: function (messages) {
                var that = this;

                $(messages).each(function (index, message) {
                    switch (message.type) {
                        case 0:
                            that.chat.renderMessage({ type: "text", text: message.speech, timestamp: that._timestamp }, that.userInfo);
                            break;
                        case 2:
                            that.renderSuggestedActions(message.replies.map(function (reply) { return { title: reply, value: reply }; }));
                            break;
                        default:
                    }
                });

            },

            renderAttachments: function (data) {
                var that = this;
                data.attachments = $(data.attachments).map(function (index, attachment) {
                    return {
                        contentType: attachment.type || "heroCard",
                        content: attachment
                    };
                }).toArray();

                this.chat.renderAttachments(data, this.userInfo);
            },

            renderSuggestedActions: function (suggestedActions) {
                this.chat.renderSuggestedActions($(suggestedActions).toArray());
            }
        });
    </script>

Then you use the Client-side API of the Chat to get the response and render it. For more customized appearance, you can use Kendo Templates: 

• RadChat client-side object API;
• RadChat client-side programming overview;
• Custom Templates;

For convenience, attached is a working sample isolated from the provided demo.

Regards,
Peter Milchev
Progress Telerik

[Hernan]

Hi Peter,

 

Thanks for response my question!!

 I am new in dialogFlow, and I am learning this because I need include in my Project,

The idea is use V2 de dialogFlow and webhooks done in asp.net for custom responses, to the agent.

In your example, the agent that is used is  V1 or V2 of DialogFlow?, where I can found this agent for reply in my custom agent?

For the UI I am thinking use your component, but the complete example (the webhook, and some simple dialogflow configuration, and how custom the javascript code for use these agent with your component), is an few dificult to find using this combination that I mention above,

 

If is possible guide me I will be apreciate very much

 

 

 

 

 

 

 

 

 

[Hernan]

Some reply??

Also, DialogFlow v2 is usable with this control?

 

Thanks

 

[Peter Milchev]

Hello,

Yes, the RadChat can be used with DialogFlow v2.

Generally, the RadChat control provides an abstraction that could work with any type of remote endpoint. That makes the control independent of the server technology used for the bot. The very basics of the communication layer are explained in the following documentation article: Connecting to Chat Bot Services via Chat Agent. 

In your custom Chat Agent, you can use the Client-side API to get the client's input and visualize the bot's responses:

• RadChat client-side object API;
• RadChat client-side programming overview;
• Custom Templates;

Currently, our DialogFlow examples are indeed based on V1 of the API. We've used a client library to interface with the service that will not be updated to the V2 API.
With that in mind, the migration to V2 would be more involving than just changing the configuration. We don't have immediate plans to upgrade, but the possible approaches are:

* Implement a server-side proxy that uses any of the official Google Cloud Client libraries. This approach has the benefit of keeping the API key on the server and providing a supposedly more stable API.

* Interface with the V2 REST API directly. This is a more involved and fragile approach - any future API changes would have to be reflected in our code.

Regards,
Peter Milchev
Progress Telerik

[Hernan]

I am trying to implement my own agent with similar characteristics that the example that you show, what I want is to try to understand the template system, the idea is to configure the agent similar to facebook messenger or another that supports rich interface responses like images , galleries, carrousel, etc. In response to the user who is chatting, this response I want to send from a webhook. I have not found examples of how to do it with c # and asp.net, you have examples of how it is done with this language? (for DialogFlow v1 or v2) In your example it is possible that they can share the agent of DialogFlow that you use so that I can study it and customize this?

 Thanks

[Peter Milchev]

Hello,

Unfortunately, we are unable to provide the exact implementation of the agent and it would not be of much help if you are using the v2. 

I can suggest that you check on the internet if there are some DialogFlow agent examples and adapt our chatbot agent to handle the requests properly.

• Dialogflow API Client Library for .NET;
• How to call google.apis.dialogflow.v2 in C#;
• Dialogflow SDKs

An interesting project showing the RadChat's independence of the ChatBot platform is the real-time chat project we created using the SignalR technology: RadChat real-time live crossbrowser chat via SignalR.

Regards,
Peter Milchev
Progress Telerik

[Hernan]

Hi Peter,

thanks forthe references that you have,

No problem if your agent is using other version like dialogflow v1,  you can share this?, will be really util some complete example, I see that no exist other questions here over this theme, probably because you dont have some article with complete code (including how create the agent), please if you can provide this.

I want to see some example over how send rich content from the server side (webhook also) to the chat client or how this work, 

 

Best regards

[Lance | Manager Technical Support]

Hi Hernan,

Let me share four complete examples source code that show you how to use the Chat component with pickers and other possible bot features that the bot framework might have.

Note: Although the examples use Azure and Microsoft Bot Framework, concepts are still the same. It important to keep in mind that the Telerik Chart control is bot platform agnostic. Your application needs to understand the payload being returned from the bot service (i.e. json).


The BotService class

The first thing you do is set up the service that performs the communication between the client app and the bot service. All of the examples below reuse the same service class here. The key takeaways are:

- SendMessageAsync
- ReadBotMessageAsync

Note: The above is to help convey the concept. Since this is an ASP.NET AJAX conversation, I'll need to point you to the client-side Chart agent paradigm that you'll be using. This is the AJAX equivalent of my C# service class.


The Chat Control and Messages

The actual displaying of card and sending the user's selection/message back to the bot for further processing. There are models setup for each of the possible responses from the bot and any object that response might contain. Find those classes here.

As I mentioned in my platform agnostic statement, the application needs to know when the bot send a certain kind of message, and how to determine that that is. For these demos, we use a converter class (this is a XAML-specific thing, but other platforms have their equivalent). Find the converter class here.

At this point, logically, the incoming message has been recieved by the bot service, the converter determines what kind of message to show in the Chat control and sets the object type (e.g. ImageCard, TextCard, etc).

Demos

Healthcare Assistant
Travel Assistant
Insurance Assistant

As a bonus, here's a ChatRoom example that support multiple participants, not just a bot <-> client.

You can play with these demos on your phone right now because they're Xamarin demos. Go tot he App Store/Google Play/Microsoft Store and search "Telerik UI for Xamarin". Once installed, navigate to ConversationalUI demos to see those in action.

Next Steps

Once you've had a change to review those demos, and see how the different scenarios and cards are shown, you can apply the same concept using the .NET DialogFlow library and the RadChat for ASP.NET AJAX's setup. In fact, most of the heavy lifting, in terms of model structure, is already done for you because the object definitions have been created for you in the SDK.

Peter has given you some great links below already, (especially the StackOverflow one which you can use to quickly get started). However, for more complex scenarios on interacting with DialogFlow's back-end, we'll need to refer you back to StackOverflow or Google Developer Support as the API is outside the scope of Telerik Support.

I hope this information was helpful.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Rajith Kannoth]

I am trying to Integrate Rich Messages with Kendo UI Chatbot but cannot seem to find any templates or custom payloads.

I understand Dialogflow support custom payloads on their end but how can we handle such information from our Chat. I am getting proper responses but in text.

[Peter Milchev]

Hello Rajith,

The Kendo UI Chat supports message templates where you can create different structure based on the data passed for the message: 

• https://docs.telerik.com/kendo-ui/controls/conversational-ui/chat/chat-items#custom-templates;
• https://docs.telerik.com/kendo-ui/framework/templates/overview;

Also, apart from messages, you can render attachments as demonstrated below:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/chat/methods/renderattachments;

If you have any more specific questions and examples regarding the Kendo UI Chat, you can check the Kendo UI forums and resources and if still the query is unresolved, you can submit a support ticket with the Kendo UI Chat product selected. That would allow the team most familiar with the widget to handle the ticket.

Regards,
Peter Milchev
Progress Telerik