Build a Personal 1:1 Conversational Bot With Microsoft Teams

Introduction

 

A conversation bot allows users to interact within multiple forms like text, adaptive cards, forms, etc., from the Microsoft Teams client.

 

A bot in Microsoft Team can be part of a one to one conversation, group chat, or a channel in a team. Each section has its own opportunities and challenges.

 

Conversational Bots 

 

Conversation bot is a series of messages between the users and the bot. There are three types of conversation within the Microsoft Team Client:

• Personal Conversation or Personal Chat: It's a one to one chat between users and bot.
• Group Conversation or Group Chat: It's between a bot and two or more users.
• Teams Channel: It's available to all channel team members, any team member can do a conversation. 

Bots behave differently depending on the type of conversation, for example:

• Personal conversation i.e. one to one conversation doesn't need @mention. All messages sent by the user directly routed to the bot.
• Teams Channel or Group Conversation requires users to use @mention to invoke the bot into the channel or group chat. 

Prerequisites

 

To build Microsoft Teams Bot, below are the necessary tools needed to install at your environment:

1. Microsoft Azure Subscription
2. Office 365 Tenant
3. Microsoft Team enable at Office 365 tenant and allowed the custom app to upload
4. Node.js (V10.* or higher)
5. NPM (V6.* or higher)
6. Gulp (V4.* or higher)
7. Yeoman (V3.* or higher)
8. Yeomen Generator of MS Teams
9. Visual Studio Code

Let's start with Azure Bot

 

To create Microsoft Team Bot requires two activities:

1. Create Microsoft Azure Bot.
2. Add a bot to MS Team-based code base. 

Step 1 - Create Microsoft Azure Bot

1. Browse the https://portal.azure.com with your work or school account.
2. Click "+Create Resource"
3. Select "AI + Machine Learning"
4. Select "Web App Bot"

Step 2 - Complete all required information and click create to provision the bot

1. Bot handle:- its unique name of your bot.
2. Subscription:- Select a valid available subscription.
3. Resource Group:- select an appropriate resource group or create a new one as per requirement. 
4. Location:- Select your closed azure location or the preferred location.
5. Pricing:- Select the required pricing tier or F0 as free for POC activity.
6. App Name:-  Leave it as-is for this demo purpose.
7. Service Plan:- Leave it as-is for this demo purpose.
8. Bot Template:- Leave it as-is for this demo purpose.
9. Application insight: Select off for this demo purpose
10. Microsoft App Id and Password:- Leave it as-is for this demo purpose.
11. Click create to provision. 

Step 3 - Enable Microsoft Team Channel for your Bot

 

In order for the bot to interact with MS Teams, you must enable the Teams Channel.

To complete the process, MS Teams and Webchat should be available and should be listed in your channel lists.

Step 4 - Create a Microsoft Teams App

 

In this section, we are going to create a Node.js project

• Open the Command Prompt and navigate to the desired directory to create a project.
• Run the Yeomen Generator for Microsoft Teams
  
  yo teams  

• Yeomen generator will ask the following question:
  

Step 5 - Update Default Bot Code

 

Here we will find a 1:1 conversation response. 

 

Browse Interactive ChatBotBot file

Step 6

 

To implement this functionality, locate and open the ./src/app/interactiveChatBotBot/InteractiveChatBotBot.ts file and add the following method to the InteractiveChatBotBot class:

 

Add the below code after the import statement 

1. import * as Util from "util";  
2. const TextEncoder = Util.TextEncoder;  

 Add Message Factory object reference to the existing botbuilder package:

1. import {  
2.   StatePropertyAccessor,  
3.   CardFactory,  
4.   TurnContext,  
5.   MemoryStorage,  
6.   ConversationState,  
7.   ActivityTypes,  
8.   TeamsActivityHandler,  
9.   MessageFactory,  
10. } from 'botbuilder';  

Locate the handler onMessage() within the constructor().

 

Locate and replace the line if (text.startsWith("hello")) { in the onMessage() handler with the following code:

1. if (text.startsWith("onetoonepersonalchat"))  
2.   await this.handleMessageMentionMeOneOnOne(context);  
3.   return;  
4. } else if (text.startsWith("hello")) {   

Add the following method to the class:

1. private async handleMessageMentionMeOneOnOne(context: TurnContext): Promise<void> {  
2.   const mention = {  
3.     mentioned: context.activity.from,  
4.     text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,  
5.     type: "mention"  
6.   };  
7.   
8.   const replyActivity = MessageFactory.text(`Hi ${mention.text} from a one to one personal chat.`);  
9.   replyActivity.entities = [mention];  
10.   await context.sendActivity(replyActivity);  
11. }  

Step 7 - Update Project Environment Variable

 

Locate and open the file ./.env.

 

Locate the following section in the file and set the values of the two properties that you obtained when registering the bot:

1. # App Id and App Password fir the Bot Framework bot  
2. MICROSOFT_APP_ID=  
3. MICROSOFT_APP_PASSWORD=  

Step 8 - Update Manifest File

• Browse manifest.json file  ./src/maifest/manisfest.json
• Update below properties:-
• ID: Replace with Azure bot ID
• Version: 1.0.0
• PackageName   : InteractiveBotBot
• Bot Property

1. "bots": [  
2.     {  
3.       "botId": "b0edaf1f-0ded-4744-ba2c-113e50376be6",  
4.       "needsChannelSelector": true,  
5.       "isNotificationOnly": false,  
6.       "scopes": [  
7.         "team",  
8.         "personal"  
9.       ],  
10.       "commandLists": [  
11.         {  
12.           "scopes": [  
13.             "team",  
14.             "personal"  
15.           ],  
16.           "commands": [  
17.             {  
18.               "title": "Help",  
19.               "description": "Shows help information"  
20.             },  
21.             {  
22.               "title": "mentionme",  
23.               "description": "Sends message with @mention of the sender"  
24.                 
25.             }  
26.           ]  
27.         }  
28.       ]  
29.     }  
30.   ],  

Step 9 - Test and Run the Bot

 

From VSCode select View -> Terminal and Hit below command

1. gulp ngrok-serve  

Ngrok-serve builds your project and starts running at a local webserver. Ngrok start with random subdomain and create  secure URL for the local webserver

 

Microsoft Team requires all content to be displayed with an HTTPS request. Local debugging requires local HTTP webserver. Ngrok creates a secure routable URL to HTTP webserver to debug the HTTPS application securely.

Ngrok created a temporary URL "14dceed6815b.ngrok.io". The same needs to be updated at Azure Bot with Message endpoint as per the below screenshot.

• Select Setting under Bot Management
• Update Messaging End Point with Ngrok URL
• Click save to update.

Step 9 - Upload Manifest File

 

Navigate to manifest folder /src/manifest. Select both .png files and manifest.jon file and zip all three files. Give the name of zip file "manifest"

 

Login to https://teams.microsoft.com 

1. Navigate to App Studio
2. Select Import an existing app
3. Select the manifest.zip file
4. Bot name with the icon will appear at the screen

Step 10 - Install Custom App to Teams Solution

 

Using the app bar navigation menu, select the Mode added apps button. Then select Browse all apps followed by Upload for me or my teams.

In the file dialog that appears, select the Microsoft Teams package in your project. This app package is a ZIP file that can be found in the project's ./package folder.

Click Add or Select app to navigate to chat with the bot 

Select the MentionMe command, or manually type mentionme in the compose box, then press enter.

 

After a few seconds, you should see the bot respond mentioning the user you are signed in with,

GitHub Repository Link:- https://github.com/manoj1201/MSTeamDevelopment/tree/master/ConversationalBot-MSTeams 

 

Same Article Published here also

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

Conversation Bot Using Luis And QnA Maker With Azure Bot Framework SDKV4

Azure botframework SDKV4 can be used with LUIS models and QnA Maker knowledge bases. It helps to determine which LUIS model or QnA Maker knowledge base best matches the user input.

In this tutorial, you will learn the following.

1. Build SDKV4 Bot Framework Project 
2. Build Luis App
3. Build QnA Maker
4. Build and test your bot with Emulator.

Let's understand the information flow.

Azure Bot framework (SDKV4) interacts with waterfall dialog model. Waterfall dialog model has three basic parameters; i.e.:

1. Intro Step Async -> Used to initalize the luis configuration.
2. Act Step Async -> Used to gather all potiential information and process the request based on defined intent.
3. Final StepAsync -> Used to restart or call the mail dialog again. 

On Memebr Added Async is called as and when a member is added and is used to greet the members.

OnMessageActivityAsync is called for each user input received. This module finds the top scoring user intent and is used to process the request based on defined intent or QnA Maker.

Step 1 - Create a VS Project using BotFramework V4 (Echo Bot)

Select echo bot and click next to select the location and finsh. 

Step 2 - Visual Studio Project Strucutre

VS project strucutre looks like this,

Installing packages

Prior to running this app for the first time ensure that several NuGet packages are installed,

1. Microsoft.Bot.Builder
2. Microsoft.Bot.Builder.AI.Luis
3. Microsoft.Bot.Builder.AI.QnA

Step 3 - Create Luis Recognizer Class

Luis recognizer class implements IRecognizer interface. This method will help to recognize the intent and entity.

In LusRecognizer.cs, the information contained within configuration file appsettings.json is used to connect your bot to the Luis. The constructors use the values you provided to connect to these services. 

1. private readonly LuisRecognizer _recognizer;  
2.   
3.         public LusRecognizer(IConfiguration configuration)  
4.         {  
5.             var luisIsConfigured = !string.IsNullOrEmpty(configuration["LuisAppId"]) && !string.IsNullOrEmpty(configuration["LuisAPIKey"]) && !string.IsNullOrEmpty(configuration["LuisAPIHostName"]);  
6.             if (luisIsConfigured)  
7.             {  
8.                 var luisApplication = new LuisApplication(  
9.                     configuration["LuisAppId"],  
10.                     configuration["LuisAPIKey"],  
11.                     "https://" + configuration["LuisAPIHostName"]);  
12.   
13.                 var recognizerOptions = new LuisRecognizerOptionsV3(luisApplication)  
14.                 {  
15.                     PredictionOptions = new Microsoft.Bot.Builder.AI.LuisV3.LuisPredictionOptions  
16.                     {  
17.                         IncludeInstanceData = true,  
18.                     }  
19.                 };  
20.   
21.                 _recognizer = new LuisRecognizer(recognizerOptions);  
22.             }  
23.         }  

Step 4 - Create Main Dialog class

Main Dialog class implements the ComponentDialog. This class method will be responsible to define the waterfall model and is based on defined intent which helps to process the query.

Initalize the constructor

1. private readonly LusRecognizer _luisRecognizer;  
2.        public QnAMaker qnAMakerObject { get; private set; }  
3.   
4.               // Dependency injection uses this constructor to instantiate MainDialog  
5.        public MainDialog(LusRecognizer luisRecognizer, QnAMakerEndpoint endpoint)  
6.            : base(nameof(MainDialog))  
7.        {  
8.            _luisRecognizer = luisRecognizer;  
9.            qnAMakerObject = new QnAMaker(endpoint);  
10.   
11.            AddDialog(new TextPrompt(nameof(TextPrompt)));  
12.            AddDialog(new WaterfallDialog(nameof(WaterfallDialog), new WaterfallStep[]  
13.            {  
14.                  
15.                IntroStepAsync,  
16.                ActStepAsync,  
17.                FinalStepAsync,  
18.            }));  
19.   
20.            // The initial child Dialog to run.  
21.            InitialDialogId = nameof(WaterfallDialog);  
22.        }  

Initilaize the Intro Step Asyc Method -> It will help to intialize or create the Luis Object,

1. private async Task<DialogTurnResult> IntroStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)  
2.        {  
3.            if (!_luisRecognizer.IsConfigured)  
4.            {  
5.                //await stepContext.Context.SendActivityAsync( MessageFactory.Text("NOTE: LUIS is not configured. To enable all capabilities, add 'LuisAppId', 'LuisAPIKey' and 'LuisAPIHostName' to the appsettings.json file.", inputHint: InputHints.IgnoringInput), cancellationToken);  
6.   
7.                return await stepContext.NextAsync(null, cancellationToken);  
8.            }  
9.            
10.            return await stepContext.PromptAsync(nameof(TextPrompt), new PromptOptions { }, cancellationToken);  
11.        }  

Initilaize the Act Step Asyc Method -> It will help to gather all potienial information to process the request based on defined intent.

When the model produces a result, it indicates which service can most appropriately process the utterance. The code in this bot routes the request to the corresponding service, and then summarizes the response from the called service. Depending on the intent returned, this code uses the returned intent to route to the correct LUIS model or QnA service.

1. private async Task<DialogTurnResult> ActStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)  
2.         {  
3.             // Call LUIS and gather any potential booking details. (Note the TurnContext has the response to the prompt.)  
4.             var luisResult = await _luisRecognizer.RecognizeAsync<CognitiveModel>(stepContext.Context, cancellationToken);  
5.   
6.             switch (luisResult.TopIntent().intent)  
7.             {  
8.                 case CognitiveModel.Intent.LeaveRequest:  
9.                     //Do processing.  
10.                     await stepContext.Context.SendActivityAsync(MessageFactory.Text("Luis Intent Called i.e. Leave Request"), cancellationToken);  
11.                     break;  
12.   
13.                 default:  
14.                     var results = await qnAMakerObject.GetAnswersAsync(stepContext.Context);  
15.                     if (results.Length > 0)  
16.                     {  
17.                         var answer = results.First().Answer;  
18.                         await stepContext.Context.SendActivityAsync(MessageFactory.Text(answer), cancellationToken);  
19.                     }  
20.                     else  
21.                     {  
22.                         Activity reply = ((Activity)stepContext.Context.Activity).CreateReply();  
23.                         reply.Text = $"😢 **Sorry!!! I found nothing** \n\n Please try to rephrase your query.";  
24.                         await stepContext.Context.SendActivityAsync(reply);  
25.   
26.                     }  
27.                     break;  
28.             }  
29.   
30.             return await stepContext.NextAsync(null, cancellationToken);  
31.         }  

Initilaize the Final Step Asyc Method -> It will help to re-initiate the dialog,

1. private async Task<DialogTurnResult> FinalStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)  
2.        {  
3.            
4.            return await stepContext.ReplaceDialogAsync(InitialDialogId, null, cancellationToken);  
5.        }  

Step 5 - Manually update your appsettings.json file

Once all of your service apps are created, the information for each needs to be added into your 'appsettings.json' file.

For each of the entities shown below, add the values you recorded earlier in these instructions,

appsettings.json

1. "MicrosoftAppId": "",  
2. "MicrosoftAppPassword": "",  
3.   
4. "QnAKnowledgebaseId": "<knowledge-base-id>",  
5. "QnAEndpointKey": "<qna-maker-resource-key>",  
6. "QnAEndpointHostName": "<your-hostname>",  
7.   
8. "LuisAppId": "<app-id->",  
9. "LuisAPIKey": "<your-luis-endpoint-key>",  
10. "LuisAPIHostName": "<your--app-region>",  

Step 6 - Create Luis App

Log into the Luis web portal "https://www.luis.ai" Under the My apps section, select the create new app. The following Dialog Box will appear: 

Step 7 - Define Luis Model

1. Select the build button to define intent and entity
2. Select Intent
3. Enter phrases; i.e., "apply 2 days sick leave"
4. Select Entities
5. Add Pre-defined entitiy i.e. number , Date & time and custom entity i.e. Leave Type.
6. Train the Model
7. Publish the Model

Choose the 'production' environment and then select the Publish button.

Once your new LUIS app has been published, select the MANAGE Tab. From the 'Application Information' page, record the values Application ID as "app-id-for-app" and Display name as "name-of-app". From the 'Key and Endpoints' page, record the values Authoring Key as "your-luis-authoring-key" and Region as "your-region". These values will later be used within your 'appsetting.json' file.

Step 8 - Create QnA Maker knowledge base

The first step to setting up a QnA Maker knowledge base is to set up a QnA Maker service in Azure. To do that, follow the step-by-step instructions found here.

Once your QnA Maker Service has been created in Azure, you need to record the Cognitive Services Key 1 provided for your QnA Maker service. This will be used as <azure-qna-service-key1> when adding the QnA Maker app to your dispatch application.

Now sign in to the QnAMaker web portal. https://qnamaker.ai

1. Your Azure AD account.
2. Your Azure subscription name.
3. The name you created for your QnA Maker service. (If your Azure QnA service does not initially appear in this pull down list, try refreshing the page.)
4. Create QnA
5. Provide a name for your QnA Maker knowledge base. For this example use the name 'sample-qna'.
6. Select the option + Add File, navigate to the CognitiveModel folder of your sample code, and select the file 'QnAMaker.tsv'. There is an additional selection to add a Chit-chat personality to your knowledge base but our example does not include this option.
7. Create QnA
8. Select Create your knowledge base.
9. Once the knowledge base is created from your uploaded file, select Save and train and when finished, select the PUBLISH Tab and publish your app.
10. Once your QnA Maker app is published, select the SETTINGS Tab, and scroll down to 'Deployment details'. Record the following values from the Postman Sample HTTP request.

Step9 - Add Luis & QnaMaker Keys, ID and Endpoint to VS solution 

Service authoring keys

The authoring key is only used for creating and editing the models. You need an ID and key for each of the two LUIS apps and the QnA Maker app.

App	Location of information
LUIS App ID	In the LUIS portal, for each LUIS app, in the Manage section, select Keys and Endpoint settings to find the keys associated with each app. If you are following this tutorial, the endpoint key is the same key as the <your-luis-authoring-key>. The authoring key allows for 1000 endpoint hits then expires.
QnA Maker App ID	In the QnA Maker portal, for the knowledge base, in the Manage settings, use the key value shows in the Postman settings for the Authorization header, without the text of EndpointKey.

Update these values into Appsetting.json file.

Step 10 - Test your bot

1. Using your development environment, start the sample code. Note the localhost address shown in the address bar of the browser window opened by your App: "https://localhost:<Port_Number>".
2. Open your Bot Framework Emulator, then select Create a new bot configuration. A .bot file enables you to use the Inspector in the bot emulator to see the JSON returned from LUIS and QnA Maker.
3. In the New bot configuration dialog box, enter your bot name, and your endpoint URL, such as http://localhost:3978/api/messages. Save the file at the root of your bot sample code project.
4. Select the bot name in the My Bots list to access your running bot

Output

First,  the bot prompts with a greeting message.

Second, the user asks a query, the system defines the intent -> it goes to Luis and responds.

Third, the user asks a non-intent question -> it goes to qna maker and responds.

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
• Design Rich Card with Bot Framework SDK V4
• State Management with Bot Framework SDK V4
• Store Conversation to CosmosDB 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.