Create a Welcome Menu Card for Language Translator Bot

In this post, we will create a menu card using Bot Builder SDK v4 in C# to translate text, detect language and get a list of all supported languages using Azure Translation API.

This is part of the series from Advanced Language Translator Bot using Azure Translation API. We will make use of Core Bot template to build this bot.

Prerequisites

Visual Studio
Bot Framework Emulator
Bot Framework Templates v4
Clone Bot Framework Reusable Template [Modified version of Core Bot template]

All the download links are available on the downloads page.

Create the Menu Card

I have already modified the core bot template that can be used for any use case. Clone the repository and rename the project and solution name.

Open Dialogs -> MainDialog.cs. Write the following code in the IntroStepAsync. This will create an Adaptive Card that will show 3 options to the user to select from.

private async Task<DialogTurnResult> IntroStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
        {
            await stepContext.Context.SendActivityAsync(MessageFactory.Text("Please choose an option to proceed further."), cancellationToken);
            List<string> operationList = new List<string> { "Supported Languages", "Translate Language", "Detect Language" };
            // Create card
            var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
            {
                // Use LINQ to turn the choices into submit actions
                Actions = operationList.Select(choice => new AdaptiveSubmitAction
                {
                    Title = choice,
                    Data = choice,  // This will be a string
                }).ToList<AdaptiveAction>(),
            };
            // Prompt
            return await stepContext.PromptAsync(nameof(ChoicePrompt), new PromptOptions
            {
                Prompt = (Activity)MessageFactory.Attachment(new Attachment
                {
                    ContentType = AdaptiveCard.ContentType,
                    // Convert the AdaptiveCard to a JObject
                    Content = JObject.FromObject(card),
                }),
                Choices = ChoiceFactory.ToChoices(operationList),
                // Don't render the choices outside the card
                Style = ListStyle.None,
            },
                cancellationToken);
        }

Declare the ChoicePrompt in the constructor of the MainDialog.

AddDialog(new ChoicePrompt(nameof(ChoicePrompt)));

Following are the 3 options shown to the user –

Supported Languages: Show the list of all the languages supported by Azure Translation API
Translate Language: Translate the text from one language to another
Detect Language: Detect the text for the language