matthidinger / contososcubabot

Sample bot built with rich Adaptive Cards

Contoso Dive Finder

Introduction

Most chat bot platforms have a single input box through which users type messages in order to interact with a bot. Adaptive Cards provide a new way to create custom and interactive cards, with rich visuals and controls, that adapt to the platform on which they are being displayed. In order to demonstrate the richness of Adaptive Cards in this sample, we've created a bot for a fictitious company that provides a scuba diving search and reservation service. Contoso Dive Finder demonstrates incorporating Adaptive Cards into a bot built using the Microsoft Bot Builder .NET SDK and the Adaptive Cards nuget package.

Getting Started

A published example of the Contoso Dive Finder is: ContosoScubaDemo.AzureWebsites.net

If you desire to run the sample yourself:

• Download the source
• Create a Bot Registration in the Azure Portal (Instructions can be found here: Quickstart Guide)
• Retrieve your bot's Direct Line channel secret from the direct line configuration page and add it to the default.htm page
• Add your bot's MicrosoftAppId and MicrosoftAppPassword to the appsettings.json
• Publish your bot (make sure the messaging endpoint in bot settings is set to the published url: https://sitename.azurewebsites.net/api/messages)

Creating Adaptive Cards

Adaptive Cards not only visually conform to the layout and style of the platform they are displayed on, they are also easy for developers to work with. Microsoft has engineered the library to be flexible, extendable, and to provide developers with multiple methods for construction and manipulation. In this sample, we've chosen to load .json files containing Messages with nested cards.

Some Code

Loading a card is as simple as reading the .json file, and creating a reply with its contents:

 public static async Task<string> GetCardText(string cardName)
{
    return await File.ReadAllTextAsync($@".\Cards/{cardName}.JSON");
} 

The ScubaCardService source code is not shown here. It is responsible for loading the card providers via reflection, and calling each of them to determine which one is responsible for handling the incoming message activity. Shown here is the GetNextScubaMessage method, and GetCardReply, in the RootDialog. This code turns the adaptive card into a message that is sent back to the user.

private async Task<IMessageActivity> GetNextScubaMessage(ITurnContext context, Activity activity)
{
    var resultInfo = await new ScubaCardService().GetNextCardText(context, activity);
    if (!string.IsNullOrEmpty(resultInfo.ErrorMessage))
        return activity.CreateReply(resultInfo.ErrorMessage);

    return GetCardReply(activity, resultInfo.CardText);
}

public static Activity GetCardReply(Activity activity, string cardText)
{
    var reply = JsonConvert.DeserializeObject<Activity>(cardText);
    if (reply.Attachments == null)
        reply.Attachments = new List<Attachment>();

    var tempReply = activity.CreateReply("");
    reply.ChannelId = tempReply.ChannelId;
    reply.Timestamp = tempReply.Timestamp;
    reply.From = tempReply.From;
    reply.Conversation = tempReply.Conversation;
    reply.Recipient = tempReply.Recipient;
    reply.Id = tempReply.Id;
    reply.ReplyToId = tempReply.ReplyToId;
    if (reply.Type == null)
        reply.Type = ActivityTypes.Message;

    return reply;
}

Welcome Card

With columns, image support, text manipulation properties and more: Adaptive Cards are powerful and fun to use!

{
  "type": "message",
  "text": "Hi! I'm Contoso Dive Finder!\n\nI'll help you schedule a scuba getaway!",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "body": [
          {
            "type": "ColumnSet",
            "columns": [
              {
                "type": "Column",
                "size": "auto",
                "items": [
                  {
                    "type": "Image",
                    "size": "medium",
                    "url": "http://contososcuba.azurewebsites.net/assets/Contoso_logo.jpg"
                  }
                ]
              },
              {
                "type": "Column",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Start with something like:",
                    "size": "large",
                    "weight": "bolder"
                  },
                  {
                    "type": "TextBlock",
                    "text": "'Where can I go scuba diving?'",
                    "separation": "none"
                  },
                  {
                    "type": "TextBlock",
                    "text": "or",
                    "separation": "none"
                  },
                  {
                    "type": "TextBlock",
                    "text": "'Show me some local wildlife.'",
                    "separation": "none"
                  },
                  {
                    "type": "TextBlock",
                    "text": "You can also 'restart' anytime.",
                    "separation": "none"
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}

More Information

• AdaptiveCards.io
• Open Source Repository

contososcubabot's Issues

Validation of AdaptiveCard

In your example the validation done in c# code in each card. For example GetErrorMessage in next card raise error. Is exist any possible workaround to have validation in JSON instead of compiled code?
Similar as in MS bot framework it is done in JSON schema:
https://docs.microsoft.com/en-us/bot-framework/dotnet/bot-builder-dotnet-formflow-json-schema

Display 1 card at at time in Carousel

Is there a way to implement horizontal carousel that displays 1 card at at time? I want to show only 1 card at a time in the webchat window. Currently it displays all the cards at the same time that fit into the webchat window.

"Sorry, my bot code is having an issue." on https://contososcubabot.azurewebsites.net/

Type:
i go

and get a carousel of locations.

Click on the "This one" button

an answer card is shown.

Click again on "This one" button

result: "Sorry, my bot code is having an issue."

expected: if the user already clicked on a button, it should not be possible to click the button again.

it should be possible to update the card shown with the Action.Submit response e.g. remove buttons, show confirmation

Dynamically binding data to a card

How would you go about dynamically binding data to an adaptive card?

For example, in Schools.JSON you can assume this query would actually go look up schools on Google then dynamically build the card. Is there a way to do this without hacking together the card through code? Any data binding options?

date not rendered in IE browser

In this bot the card where date of scuba diving is prompted is not rendered in IE.

use Configuration with JSON cards

Adaptive card enable create configuration - Configuration editor on http://adaptivecards.io/visualizer/
How I can use it with MS bot?