Rich Card with Bot Framework SDK V4

Messages exchanged between a user and a bot can contain media such as images, video, etc. The Bot Framework SDK supports the task of sending rich messages to the user.

In this tutorial, you will learn the following.

1. Design Hero Card and Response with Images.
2. Design the Video Card and Response with Video.
3. Build and Publish the Solution.
4. Test your bot with Web Chat Client.

Below are the prerequisites.

1. The bot created in the previous article to help you understand the simple QnA Maker Bot
2. Response card can be designed with different media response, i.e., Image & Video

Let's understand the architecture flow with respect to this article.

Primary bot communicates with the user through message activities.

To send a simple text message, use turn context object SendActivityAsync method to send a single message response. You can use SendActivitiesAsync method to send multiple messages. 

1. await turnContext.SendActivityAsync($"Welcome!");  

To receive a simple text message, use text property of activity object. 

1. var responseMessage = turnContext.Activity.Text;  

Some message activities consist of simple text and others may consist of richer context such as Cards, i.e., Hero Card, Video Card etc. Let’s start designing the cards.

Step 1 - Design Hero Card and Response with Images

Hero card allows you to combine images and buttons in one object, and send them to the user.

To process with rich card i.e. Hero Card, the below properties are required.

Type	Description
Tile	Title of the hero card
Sub Title	Sub Title of the hero card
Text	Text or Description need to display the below image
Images	Image URL which needs to be rendered
Buttons	Button with the click event,  clicking allows the user to navigate

1. public static HeroCard GetHeroCard()  
2. {  
3.     var heroCard = new HeroCard  
4.     {  
5.         Title = "<<Title>>",  
6.         Subtitle = "<<SubTitle>>",  
7.         Text = "<<Secription>>",  
8.         Images = new List<CardImage> { new CardImage("<<Image Path>>") },  
9.         Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "<<Re-direct Url>>") },  
10.     };  
11.     return heroCard;  
12. }  

QnAMaker Hero Card Response Design

Set Response design with Hero Card values.

Step 2 - Design Video Card and Response with Video

Video Card allow you to play video. Typically it's used to open a URL and stream an available video.

To process with rich card i.e. Video Card, the below properties are required.

Type	Description
Tile	Title of the hero card
Sub Title	Sub Title of the hero card
Text	Text or Description need to display the below image
Images	Image URL which needs to be rendered
Media	URL, i.e., video URL to stream any available video
Buttons	Button with the click event, Onclick allows the user to navigate

1. public static VideoCard GetVideoCard(string[] qnaAnswerData)  
2.         {  
3.             var videoCard = new VideoCard  
4.             {  
5.                 Title = <<”Title”>>,  
6.                 Subtitle = <<”Title”>>,  
7.   
8.                 Text = <<”Title”>>,  
9.                 Image = new ThumbnailUrl  
10.                 {  
11.                     Url = <<”Title”>>,  
12.                 },  
13.                 Media = new List<MediaUrl>  
14.                 {  
15.                     new MediaUrl()  
16.                     {  
17.                         Url = <<”Title”>>,  
18.                     },  
19.                 },  
20.                 Buttons = new List<CardAction>  
21.                 {  
22.                     new CardAction()  
23.                     {  
24.                         Title = "Learn More",  
25.                         Type = ActionTypes.OpenUrl,  
26.                         Value =  <<”Title”>>,  
27.   
28.                     },  
29.                 },  
30.             };  
31.   
32.             return videoCard;  
33.         }  

QnaMaker Video Card Response Design.

Set Response design with Video Card values.

Step 3 - Build and Publish the Solution

Navigate to EchoBot.cs file and add a condition for Hero Card and Video Card response and design.

Replace the AccessQnAMaker code with the below section. It checks the response parameter and design card. If the response has 5 parameters, it calls the Hero Card method. If the response has 6 parameters, it calls Video Card method else replies with simple text. 

1. private async Task AccessQnAMaker(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)  
2.         {  
3.             var results = await EchoBotQnA.GetAnswersAsync(turnContext);  
4.             string[] qnaAnswerData = results[0].Answer.Split(';');  
5.             int dataSize = qnaAnswerData.Length;  
6.             if (results.Any())  
7.             {  
8.                 var attachments = new List<Attachment>();  
9.                 // Reply to the activity we received with an activity.  
10.                 var reply = MessageFactory.Attachment(attachments);  
11.                 //image card have 5 paramters  
12.                 if (dataSize == 5)  
13.                 {  
14.                     reply.Attachments.Add(Cards.GetHeroCard(qnaAnswerData).ToAttachment());  
15.                     await turnContext.SendActivityAsync(reply, cancellationToken);  
16.                 }  
17.                 //video card have 6 parameter  
18.                 else if (dataSize == 6)  
19.                 {  
20.                     reply.Attachments.Add(Cards.GetVideoCard(qnaAnswerData).ToAttachment());  
21.                     await turnContext.SendActivityAsync(reply, cancellationToken);  
22.                 }  
23.                 else  
24.                 {  
25.                     await turnContext.SendActivityAsync(MessageFactory.Text(results.First().Answer), cancellationToken);  
26.                 }  
27.             }  
28.             else  
29.             {  
30.                 await turnContext.SendActivityAsync(MessageFactory.Text("Sorry, could not find an answer in the Q and A system."), cancellationToken);  
31.             }  
32.         }  

Right-click the solution. Select "Build and publish the solution"with the help of published profile.

Step 4 - Test your bot with Web Chat Client

Navigate to Azure WebApp Bot and select Test in WebChat client.

The previous article can be found from these links.

• Learn and Build Azure Bot With Bot Framework SDK V4
• Build QnAMaker Azure Bot with Bot Framework SDK V4

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Learn QnAMaker Azure Bot With Bot Framework SDK V4

QnA Maker service is used to create a knowledge base to add question-and-answer support to your Azure Bot. When you create your knowledge base, you seed it with questions and answers.




Previous Article : Learn azure bot service using Bot Framework SDK V4

In this tutorial, you will learn the following.

1. Create a QnA Maker service and knowledge base.
2. Train and Publish knowledge base information.
3. Add QnA Maker Knowledge Bas information to your Bot
4. Update your bot to query the knowledge base
5. Test you bot locally
6. Publish your bot to Azure Bot Service
7. Test your bot using Web Chat Client

Below are the prerequisites,

1. The bot created in the previous article. We will add a question-and-answer feature to the bot.
2. QnA Maker portal is used to create, train, and publish the knowledge base to use with the bot.

Step 1 - Create a QnA Maker service and knowledge base

• Sign into to the QnA Maker portal with your Azure credentials.
• Click "Create a knowledge base".
• Click “Create a QnA Services".

• It will navigate to Azure Portal. Once there, fill all the below details to proceed
• Name
• Subscription
• Pricing Tier
• Resource Group
• Search Location
• App Name
• Website Location

• Once it is created, connect your QnA Services with your knowledge base.
• Select Microsoft Azure Directory ID.
• Select Azure Subscription Name.
• Select available Azure QnA Service.
• Name your knowledge base.

•  Provide the URL from where the data needs to be extracted.

• Click “Create your KB” to build a knowledge base.

Step 2 - Train and Publish knowledge base information

• Once the knowledge base is created, click “Save and Train” followed by Publish button to publish the knowledge base.

• You can click "Create Bot" using this screen or integrate the QnA Maker Services with an existing solution.

Step 3 - Add QnA Maker Knowledge information to your Bot

To continue with the below steps, kindly visit my previous article and download the source code.

Browse the solution and navigate to the app.settings file.

1. {  
2.   "MicrosoftAppId": "",  
3.   "MicrosoftAppPassword": "",  
4.   "ScmType": "None",  
5.     
6.   "QnAKnowledgebaseId": "knowledge-base-id",  
7.   "QnAAuthKey": "qna-maker-resource-key",  
8.   "QnAEndpointHostName": "your-hostname"   
9. }  

Field	Value
QnAKnowledgebaseId	The knowledge base ID that the QnA Maker portal generated for you.
QnAAuthKey	The endpoint key that the QnA Maker portal generated for you.
QnAEndpointHostName	The host URL that the QnA Maker portal generated. Use the complete URL, starting with https:// and ending with /qnamaker. The full URL string will look like "look like "https://< >.azure.net/qnamaker".

Step 4 - Update your bot to query the knowledge base

• Add NuGet Package to your project Microsoft.Bot.Builder.AI.QnA
• Right-click dependencies and select Manage Nuget Package
• Select Browse Option
• Type NuGet package “Microsoft.Bot.Builder.AI.QnA”
• Select the Nuget Package
• Check the version and click install and accept the prompt.

Similarly, add Nuget Package Microsoft.Extensions.Configuration

Navigate to Startup.cs file, add these namespace references.

1. using Microsoft.Bot.Builder.AI.QnA;  
2. using Microsoft.Extensions.Configuration;  

And, modify the ConfigureServices method create a QnAMakerEndpoint that connects to the knowledge base defined in the appsettings.json file in Startup.cs.

1. services.AddSingleton(new QnAMakerEndpoint    
2. {    
3.    KnowledgeBaseId = Configuration.GetValue<string>($"QnAKnowledgebaseId"),    
4.    EndpointKey = Configuration.GetValue<string>($"QnAAuthKey"),    
5.    Host = Configuration.GetValue<string>($"QnAEndpointHostName")    
6.  });    

In your EchoBot.cs file, add these namespace references.

1. using System.Linq;  
2. using Microsoft.Bot.Builder.AI.QnA;  

 Add a EchoBotQnA connector and initialize it in the bot's constructor to EchoBot.cs.

1. public QnAMaker EchoBotQnA { get; private set; }  
2. public EchoBot(QnAMakerEndpoint endpoint)  
3. {  
4.    EchoBotQnA = new QnAMaker(endpoint);  
5. }  

Below the OnMembersAddedAsync( ) method, create the method AccessQnAMaker( ) by adding the following code.

1. private async Task AccessQnAMaker(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)  
2. {  
3.    var results = await EchoBotQnA.GetAnswersAsync(turnContext);  
4.    if (results.Any())  
5.    {  
6.       await turnContext.SendActivityAsync(MessageFactory.Text(" results.First().Answer), cancellationToken);  
7.    }  
8.    else  
9.    {  
10.       await turnContext.SendActivityAsync(MessageFactory.Text("Sorry, could not find an answer in the Q and A system."), cancellationToken);  
11.    }  
12. }  

Now, within OnMessageActivityAsync( ), call your new method AccessQnAMaker( ) by adding the following code.

1. protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)  
2. {  
3.    // First send the user input to your QnA Maker knowledge base  
4.    await AccessQnAMaker(turnContext, cancellationToken);  
5.    ...  
6. }  

Step 5 - Test your bot locally

• Press F5, Browse the bot emulator and connect with localhost and port number
• At this point, your bot should be able to answer some questions. Run the bot locally and open it in the Emulator.

Step 6 - Publish your bot to Azure Bot Service

• Right-click the solution.
• Select the Publish option.
• Select the publish profile  and click Publish to proceed. 

Step 7 - Test your bot using Web Chat Client

• Browse the WebApp Bot using Azure Portal
• Select the Test in WebChat under Bot Management

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.