Add chat bot feature to your desktop app

[KazukiOta]

Recently, we have seen a lot of chatbots. For example FAQ bots and navigation bots and more.
 
If the app users are looking for how to use the app, then chatbot UI is a good way for asking about apps.
You can create a FAQ bot using Azure Bot Service and QnA Maker. It is straightforward.
The following document explains how to create QA bots.
Use QnA Maker to answer questions
 
If you want to integrate a bot feature in your app, then you can use DirectLine APIs.
You can use it add Microsoft.Bot.Connector.DirectLine package using NuGet.
 
How to use DirectLine?
At first, you create a DirectLineClient instance.

var directLineClient = new DirectLineClient("here is key that is got from Bot Channels Registration");

Next, start a conversation.

var conversation = await directLineClient.Conversations.StartConversationAsync();

You can send a message to bot using the conversation id.

await directLineClient.Conversations.PostActivityAsync(conversation.ConversationId, new Activity
{
    From = new ChannelAccount("User id"),
    Text = "a message send to bot",
    Type = ActivityTypes.Message,
});

And you can also get messages from the bot.

string watermark = null;
while(true)
{
    var activitySet = await directLineClient.Conversations.GetActivitiesAsync(conversation.ConversationId, watermark);
    watermark = activitySet.Watermark;
    var botMessages = activitySet.Activities.Where(x => x.From.Id == "bot id");
    foreach (var message in botMessages)
    {
        // process a message that is from the bot
    }
    await Task.Delay(2000);
}

It's very simple and easy.

How to display rich contents?
The bots that are created by Azure Bot Service send some rich contents like image contents ,and cards contents(hero cards, adaptive cards) ,and more.
If you want to support those contents, then you can use AdaptiveCards Renderer.

• For WPF package
• For UWP package

If you detect rich contents in attachments of the message, then convert it to an AdaptiveCard instance, and then you can render it using AdaptiveCards Renderer.

The convert logic is like below:

private IEnumerable<AdaptiveCard> ConvertAttachmentsToAdaptiveCard(IEnumerable<Attachment> attachments)
{
    AdaptiveCard parseHeroCard(string json)
    {
        var heroCard = JsonConvert.DeserializeObject<HeroCard>(json);
        return new AdaptiveCard("1.0")
        {
            Body = new List<AdaptiveElement>
            {
                new AdaptiveTextBlock(heroCard.Title)
                {
                    Size = AdaptiveTextSize.Medium,
                    Weight = AdaptiveTextWeight.Bolder,
                },
                new AdaptiveTextBlock(heroCard.Text),
            },
        };
    }
    return attachments?.Select(x => x.ContentType switch
        {
        "application/vnd.microsoft.card.hero" => parseHeroCard(x.Content.ToString()),
        "image/png" => new AdaptiveCard("1.0")
        {
            Body = new List<AdaptiveElement>
            {
                new AdaptiveImage(x.ContentUrl),
            }
        },
        _ => null,
        })
        ?.Where(x => x != null);
}

The rendering logic is like following code:

// The code for UWP
var renderer = new AdaptiveCardRenderer();
var adaptiveCard = ... // Get an AdaptiveCards.AdaptiveCard instance
var renderedCard = renderer.RenderAdaptiveCard(AdaptiveCard.FromJsonString(adaptiveCard.ToJson()));
renderedCard.FrameworkElement; // get result

The sample program
The following repository is a sample app to render simple text messages, Hero cards and images.
https://github.com/runceel/DirectLineClient