ChatBot Application

Chatbot in teams is a conversational bot which helps users to interact with Webservices by Text, Attachments, Adaptive Cards, Action, etc. Bots are often used for simpler tasks whereas long running tasks are also possible. In Bot each conversation is handled as activity. 

OnMembersAddedAsync – This is the first activity being called from the bot where we can customize to display the initial logo and Introduction for the application. 

OnMessageActivityAsync – Any incoming tasks/activities by user in the bot will be transferred here. This is the function where app’s complete structure and task modules will be defined. 

Other few activities in chatbot are  

• OnConversationUpdateActivityAsync 
• OnInvokeActivityAsync 
• OnTeamsChannelCreatedAsync 
• OnTeamsChannelDeletedAsync 
• OnTeamsChannelRenamedAsync 
• OnTeamsTeamRenamedAsync 
• OnTeamsMembersAddedAsync 

Let’s discuss in detail about creating sample bot. 

Pre-Requisite: 

• Ngrok app  
• Bot Framework v4 SDK 
• Teams  
• Bot Framework Emulator(v4) 

In Visual studio, create a new project of type “Echo bot (Bot Framework v4 – .NET Core 3.1)”. 

Once project is created, In file “EchoBot.cs”. This class contains 2 activity (Mentioned above) which handles the incoming activities. 

We are going to deploy our sample bot in Bot Emulator. So, in appsettings.json file, for now comment out all the variables as it will be discussed in the upcoming topic. 

{ 
  //"MicrosoftAppType": "", 
  //"MicrosoftAppId": "", 
  //"MicrosoftAppPassword": "", 
  //"MicrosoftAppTenantId": "" 
}

On success build, run the EchoBot application as mentioned below. 

Get the ngrok url for the above local host by the below command 

ngrok.exe http 3978 

In the Bot Emulator->Open Bot->Bot url place the ngrok url (https://b10f-103-154-35-154.ngrok-free.app/api/messages) received and click Connect. 

NOTE: Bot URL must end with “/api/messages ” 

The first message is from “OnMembersAddedAsync” and other messages are from “OnMessageActivityAsync”.  

Now we will see the ways of passing adaptive card response from the later function. 

1.AdaptiveCard Package 

Install Nuget Package “AdaptiveCards” 

Change the OnMessageActivityAsync as below. 

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken) 

        { 

            var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0)) 

            { 

                Body = new List<AdaptiveElement>() 

    { 

        new AdaptiveTextBlock("Sample Card Using Adaptive Card Package"), 

    }, 

            }; 

            var act = new Activity 

            { 

                Text = string.Empty, 

                Summary = "Summary", 

                Type = ActivityTypes.Message, 

                Attachments = new List<Attachment> { new Attachment {  ContentType = "application/vnd.microsoft.card.adaptive", 

                        Content =   card } 

                } 

            }; 

             await turnContext.SendActivityAsync(act, cancellationToken); 

        } 

Now run the application and check the response which will be as below. 

2.Json 

The same result can be achieved by framing Json in Designer | Adaptive Cards 

Change the “OnMessageActivity” function as below. 

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken) 

        { 

            var cardJson = JsonConvert.DeserializeObject("{\"type\":\"AdaptiveCard\",\"body\":[{\"type\":\"TextBlock\",\"size\":\"Medium\",\"weight\":\"Bolder\",\"text\":\"SampleCardUsingJSON\"}],\"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\"version\":\"1.6\"}"); 

            var act = new Activity 

            { 

                Text = string.Empty, 

                Summary = "Sample Card Using Adaptive Card Package", 

                Type = ActivityTypes.Message, 

                Attachments = new List<Attachment> { new Attachment {  ContentType = "application/vnd.microsoft.card.adaptive", 

                        Content =   cardJson } 

                } 

            }; 

             await turnContext.SendActivityAsync(act, cancellationToken); 

        } 

Summary : 

In this blog, you would have learned about sample bot application creation, using adaptive cards in chatbot and deploying the bot in Bot Emulator. Deploying the same bot in teams will be covered in upcoming blogs. 

Hope you find this blog useful.