Customized Chatbot with Card Response Integration

Introduction

Two months ago, I had explored about chatbot and to create chatbot using Azure Bot framework (It is now listed as Web App Bot & Function Bot in Azure Portal). If you haven’t read it yet, you would need to in order to understand little basic about it before hand.

Further then, I tried to integrate it into Mobile app, so I embed it to Xamarin App with WebView method.

After that, it prompted me to think, it is just a WebView, it doesn’t look native at all, why don’t we create it with native way? So, I started to search around on the net and with advices, I had written an app that get my bot lives natively in Xamarin App.

Roughly one week ago, @DavidHawig, creator of Florence.Chat – a health focus bot (What a surprise and my pleasure), had written me a Twitter message to ask if I will bring my work little bit further with Hero Card Integration and it is why I write this post today!

Pre-requisites

Objectives

  • Improve the Chatbot with Hero Card integration
  • Identify request message – “Learn More” and respond user with Hero Card
  • Create auto greeting message with Hero Card

Get Started

What we do today will be making our bot to achieve the three objectives above. So let’s head back to our Bot in Azure Portal.

  1. If you had an existing bot, you may notice that bot service is under-going for a migration. In case you see the following message, you may click “MIGRATE THIS BOT” to migrate it to new configuration page.
    ChatbotWithHeroCardIntegration-001
  2. After that, you should see the new page for bot now. If you are creating new bot, you should see this new user interface once it is deployed instead.
    ChatbotWithHeroCardIntegration-002

Improve the Chatbot with Hero Card Integration

  1. First, we click Build -> Open online code editor to head to App Service Editor. App Service Editor is a web-based editor that allows you to write your code online and compile it with online console.
    ChatbotWithHeroCardIntegration-003
  2. Second, head to Dialogs -> EchoDialog.cs and add referenceSystem.Collections.Generic as we need to use List<T> later.
    using System.Collections.Generic;
  3. Third, we will have to add following code to create a GetProfileHeroCard() function that will eventually return with a HeroCard as an Attachment.

    public static Attachment GetProfileHeroCard()  
    {  
    	var heroCard = new HeroCard  
    	{  
    		// title of the card  
    		Title = "Marvin Heng",  
    		//subtitle of the card  
    		Subtitle = "Software + Web Developer | AI Enthusiast",  
    		// Tap Card to Navigate to page
    		Tap = new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://hmheng.pinsland.com"),  
    		//Detail Text  
    		Text = "Marvin is passionate about Artificial Intelligence (AI) & Machine Learning. Read more @ http://hmheng.pinsland.com",  
    		// list of  Large Image  
    		Images = new List { new CardImage("https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAdcAAAAJGMxMjYxYTRhLTUyZTgtNDMzNi1hMDc1LWEzYTUxYTJkOTBiZA.jpg") },  
    		// list of buttons   
    		Buttons = new List { new CardAction(ActionTypes.OpenUrl, "Learn More", value: "http://hmheng.pinsland.com") , new CardAction(ActionTypes.OpenUrl, "YouTube", value: "http://bit.ly/hmheng_yt"), new CardAction(ActionTypes.OpenUrl, "Twitter", value: "https://twitter.com/hmheng") }  
    	};  
    		
    	return heroCard.ToAttachment();  
    }  
    

    You may learn more about the properties can be supported by Hero Card type here.

  4. Next, create following DisplayHeroCard function to display the Hero Card at conversation box.
    public async Task DisplayHeroCard(IDialogContext context)  
    {  
    	var reply = context.MakeMessage();  
    	Attachment attachment = GetProfileHeroCard(); ;  
    	reply.Attachments = new List { attachment };  
    	await context.PostAsync(reply);  
    }  
    

Identify request message – “Learn More” and respond user with Hero Card

  1. In order to display hero card when user sends “Learn More” as a request message. We will need to modify the MessageReceivedAsync function in EchoDialog.cs by commenting the original code and add the following code.
    var message = await argument;
    if(message.Text.ToUpper() == "LEARN MORE"){
    	await this.DisplayHeroCard(context);
    }
    else
    {
    	await context.PostAsync($"You said {message.Text}");
    	context.Wait(MessageReceivedAsync);
    }
    

    You should have the complete MessageReceivedAsync as following:

    public async Task MessageReceivedAsync(IDialogContext context, IAwaitable argument)
    {
    	//  var message = await argument;
    	//  await context.PostAsync("You just said: " + message.Text);
    	//  context.Wait(MessageReceivedAsync);
                
    	var message = await argument;
    	if(message.Text.ToUpper() == "LEARN MORE"){
    		await this.DisplayHeroCard(context);
    	}
    	else
    	{
    		await context.PostAsync($"You said {message.Text}");
    		context.Wait(MessageReceivedAsync);
    	}
    }
    
  2. Head to Console Customized Chatbot with Card Response Integration - Hmheng at the side bar and type build.cmd
  3. Once successfully compiled, go to Test in Web Chat  and type “Learn More” to see the effect.
    ChatbotWithHeroCardIntegration-004

Create Auto Greeting Message with Hero Card

To me, the bot doesn’t look perfect enough and is not so user friendly as it will not greet user when the bot is loaded. This brings me another idea where I should add an auto-greeting message in Hero Card format to introduce myself every time the bot is loaded.

  1. First, head to Controllers-> MessagesController.cs and add referenceSystem.Collections.Generic, System.Linq and System.
    using System.Collections.Generic;
    using System.Linq;
    using System;
    
  2. Secondly, at the function of HandleSystemMessage, let’s add some code at the the condition if message activity type is equal to ConversationUpdate.
    This will handle the message when a new conversation or an updated conversation with bot is started. When condition is fulfilled, it will display the HeroCard along with the message “Hello, greeting from Marvin!”.

    else if (message.Type == ActivityTypes.ConversationUpdate)
    {
    	// Handle conversation state changes, like members being added and removed
    	// Use Activity.MembersAdded and Activity.MembersRemoved and Activity.Action for info
    	// Not available in all channels
    	ConnectorClient client = new ConnectorClient(new Uri(message.ServiceUrl));
    	if (message.MembersAdded.Any(o => o.Id == message.Recipient.Id))
    	{
    		var reply = message.CreateReply();
    		reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;
    		reply.Attachments = new List();
    		reply.Attachments.Add(EchoDialog.GetProfileHeroCard());
            
    		reply.Text = "Hello, greeting from Marvin!";
            
    		await client.Conversations.SendToConversationAsync(reply);
    	}
    }
    
  3. Head to Console Customized Chatbot with Card Response Integration - Hmheng at the side bar and type build.cmd
  4. Now, let’s try again after it is successfully compiled, go to Test in Web Chat. It should greet you with HeroCard now.
    ChatbotWithHeroCardIntegration-005

 

 

Let’s have a play with it!

You may also like...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: