Azure Bot Function

Here are the simplified steps to start developing Azure Bot Function. In this blog post we will create a test bot that talks to LUIS and QnA Maker. LUIS will help us understand user’s natural language. QnA Maker will help us answer user’s frequently asked questions.

In this sample Bot, we will convert temperature from Fahrenheit to Celsius. We will use LUIS to understand user intent and extract temperature value and unit information. We will use QnA Maker to answer user questions on temperature conversion.

Here is link to add this test Bot to your Skype and Microsoft Teams and play with web chat
https://wabacbotweb.azurewebsites.net/
Trying typing 80 f to c in the chat window

Here are high level steps :

1. Create a Bot Function App
2. Test Bot
3. Add current time to this Bot App
4. Create a LUIS App
5. Add LUIS as Dialog in Bot Function App
6. Test Bot for LUIS commands
7. Add this Bot to a website
8. Add this Bot to Skype
9. Add this Bot to Microsoft Teams

 

Step 1 : Create a Bot Function App

1. Log into Azure Portal
2. Click on “Create a resource” on the top left navbar
3. Type Bot in search box
4. Click on the “Functions Bot”
5. Click on Create button
   
6. Click Create button

Step 2 : Test this Bot

1. In the Azure Portal, click on the Bot Services from the left navbar
2. If the Bot Service is missing , click on the All Services, search for Bot and click on the star icon as shown below
3. Now, click on the newly created Bot
4. In the next blade, click on the Test in Web Chat
5. Type Hello in the chat window as shown below
6. Our test bot will reply with text “1: You said hello”
7. “1” in the reply is count of messages it got from user in that session
8. if you type hello again, you should see “2: You said hello” as shown below
   

Step 3 : Lets add current time to Bot

1. Click Build

2. Click Open this bot in Azure Functions as shown below

3. This will open Azure Function blade. Here you can edit your Bot code and settings

4. Click on the messages Function, this should open your Bot source code

5. Check line # 48, here we are calling EchoDialog if there is a message from user

6. Lets check EchoDialog class code

7. Click on the View files on the right navbar and select EchoDialog.csx file as shown

8. Add below code

   
   
   
   else if (message.Text == "time")
   {
       await context.PostAsync($"{this.count++}: current time is {DateTime.Now}");
       context.Wait(MessageReceivedAsync);
   }
   else
   {
       await context.PostAsync($"{this.count++}: You said {message.Text}");
       context.Wait(MessageReceivedAsync);
   }
   

9. Here is the complete function code

10. Now we are going to test it in the Web Chat

11. Open a new browser window, go to Azure Portal, click Bot Service, click on your Bot Function, click on Test in Web Chat

12. In the chat window, type time . You should now see the current time as shown below

 

Step 4 : Create LUIS App

1. Open a new browse window and go to LUIS portal (luis.ai)
2. Click on Login/Sign Up button, login using your Microsoft Account
3. Now, click on the "Create New App” button as shown below
4. Enter a app name and description as shown below and click on the done button
5. 
6. Next, we are going to add Entities to capture temperature data from user’s messages
7. We have three variables to capture :
   1. Temperature Value
   2. Current Temperature Unit (Fahrenheit or Celsius)
   3. Temperature Unit to convert
8. Lets create these three entities in LUIS
9. Click on the Entities on the left navbar and click on Create new entity as shown below
10. In the new Entity dialog box type a name and set the type to simple as shown below
11. 
12. Create two more, one for TemperatureUnitTo and TemperatureValue as shown
13. 
14. Next, we need to create Intents. At this time there will be only one intent : convert temperature between units
15. 
16. Now, let train LUIS by providing few sample sentences
    1. Convert 100 f to c
    2. Convert 100 c to f
    3. Change 100 f to c
    4. Change 100 c to f
    5. What is 100 c in f
    6. What is 100 f in c
    7. 100 f in c
    8. 100 c in f
17. Here is the screenshot
18. 
19. For each of this sample sentences, tell LUIS which is TemperatureValue, TemperatureUnitFrom and TemperatureUnitTo
    1. Convert 100 f to c
    2. 100 is TemperatureValue
    3. f is TemperatureUnitFrom
    4. c is TemperatureUnitTo
20. Here is the screenshot
21. 
22. Now, lets build LUIS and test it
23. In the top menu, click on the Train button
24. Next, click on the Test button. In the test textbox type “75 f to c” and hit enter, click on the inspect as shown
25. check the entities values
26. 
27. Now lets publish this LUIS service, click on the publish menu item and click on “publish to production slot” as shown
28. 
29. Once published, you should see the keys available below as shown
30. 
31. Copy these keys, we need them in the next step

 

 

Step 5 : Add LUIS as Dialog to Bot

1. Go back to Azure portal, navigate to Bot services, click on the Build and click on the “Open this bot in Azure Functions”

2. Add a new file and name it as TemperatureLuisDialog.csx

3. Add this below code

4. Add the LUIS key in Line # 10

5. Note in line # 37,41 and 45, we are using LUIS API to get our temperature value and units

6. 
   using System;
   using System.Threading.Tasks;
   using Microsoft.Bot.Builder.Dialogs;
   using Microsoft.Bot.Builder.Luis;
   using Microsoft.Bot.Builder.Luis.Models;
   using Microsoft.Bot.Connector;
   using System.Threading;
   
   [Serializable]
   [LuisModel("54201f7e-4b88-4686-841c-5f47364eb875", "737bf507949b4bada390bf914b41176d")]
   public class TemperatureLuisDialog : LuisDialog<object>
   {
   
       // Name of  entity
       public const string Entity_TemperatureUnitTo = "TemperatureUnitTo"; // fahrenheit";
       public const string Entity_TemperatureUnitFrom = "TemperatureUnitFrom"; //celsius";
       public const string Entity_TemperatureValue = "TemperatureValue"; //100";
   
       // methods to handle LUIS intents
   
       [LuisIntent("")]
       public async Task None(IDialogContext context, LuisResult result)
       {
           string message = $"try 100 f to c";
           await context.PostAsync(message);
           context.Wait(MessageReceived);
       }
   
       [LuisIntent("Convert")]
       public async Task SerialNumber(IDialogContext context, LuisResult result)
       {
           string tempTo = "not found";
           string tempFrom = "not found";
           string tempValue = "not found";
   
           EntityRecommendation entity;
           if (result.TryFindEntity(Entity_TemperatureUnitTo, out entity))
           {
               tempTo = entity.Entity;
           }
           if (result.TryFindEntity(Entity_TemperatureUnitFrom, out entity))
           {
               tempFrom = entity.Entity;
           }
           if (result.TryFindEntity(Entity_TemperatureValue, out entity))
           {
               tempValue = entity.Entity;
           }
           /*
           [°C] = ([°F] - 32) × 5/9
           [°F] = [°C] × 9/5 + 32
           */
           double d = 0.0, t = 0.0;
   
           if (double.TryParse(tempValue, out d))
           {
               if (tempTo.Contains('f') || tempTo.Contains('F'))
               {
                   t = ((d * 9) / 5) + 32;
               }
               else
               {
                   t = ((d - 32) * 5) / 9;
               }
           }
           string answer = String.Format("{0:0.00}", t);
   
           //string message = $"{answer}";
           string message = $"answer={answer} ; tempTo={tempTo} ; tempFrom={tempFrom} ; tempValue={tempValue}";
           await context.PostAsync(message);
   
           context.Wait(this.MessageReceived);
       }
   } 
   

Step 6 : Test Bot for LUIS commands

1. Go back to Azure portal, navigate to Bot Services, click on Test WebChat
2. type 66 f to c
3. you should see 18.89 as answer shown below
4. 

 

 

Step 7 : Add this Bot to a website

1. In the Azure portal, navigate to Bot Services, click on your Bot and click on Channels

2. Add these three channels

   1. Web
   2. Skype
   3. Microsoft Teams

3. 

4. Next click on the “Get bot embed codes” as shown below

5. 

6. Copy the embed codes for each one of them as shown

7. 

8. Create a Azure Website and in the default.html page, add all three embed codes as shown

9. 
   <a href='https://join.skype.com/bot/b485e689-665a-493b-8501-723c659c0826'>
   <img src='https://dev.botframework.com/Client/Images/Add-To-Skype-Buttons.png'/></a>
   
   
   <hr>
   
   
   <a href='https://teams.microsoft.com/l/chat/0/0?users=28:b485e689-665a-493b-8501-723c659c0826'>
   <img src='https://dev.botframework.com/Client/Images/Add-To-MSTeams-Buttons.png'/></a>
   
   
   <hr>
   
   
   <iframe src='https://webchat.botframework.com/embed/wabac?s=Y60jzKS3B8g.cwA.iIw.ijI4IqVhAKy_6DjJFoW31cz4sO_nPoswbyzrS_H6mf4' width="400" height="400">
   </iframe>
   

10. Now browse to the test website, in the chat window type “100 f to c”

11. Should see the temperature value in Celsius as shown

12. 

 

Step 8 : Add this Bot to Skype

1. At this above test website, click on the “Add to Skype”
2. Wabac Bot will be added to your Skype account as shown
3. type 100 f to c and check the return value
4. 

 

Step 9 : Add this Bot to Microsoft Team

1. At this above test website, click on the “Add to Teams”
2. Wabac Bot will be added to your Microsoft Teams
3. type 100 f to c and check the return value
4.