Adaptive cards actions not rendered in WebChat using Bot Framework v4

Question

I'd like to use an adaptive card in a waterfall dialog to suggest to the user the main topics of the dialog. Everything works correctly in the emulator but in the webchat the action buttons are not displayed.

This is the adaptive card json:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Matrimonio",
          "id": "matrimonio",
          "data": "Matrimonio"
        },
        {
          "type": "Action.Submit",
          "title": "Carta d'Identità",
          "id": "cartaidetità",
          "data": "Carta d'Identità"
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

The dialog code:

public class AnagrafeDialog : CancelAndHelpDialogQnA
    {
        protected readonly ILogger Logger;
        private IQnAService _qnaService;

        public AnagrafeDialog(ILogger<AnagrafeDialog> logger, IQnAService qnAService) : base(nameof(AnagrafeDialog))
        {
            Logger = logger;
            _qnaService = qnAService;


            AddDialog(new TextPrompt(nameof(TextPrompt)));
            AddDialog(new WaterfallDialog(nameof(WaterfallDialog), new WaterfallStep[]
            {
                QuestionStepAsync,
                AnswerStepAsync
            }));

            InitialDialogId = nameof(WaterfallDialog);
        }


        private async Task<DialogTurnResult> QuestionStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
        {
            if (FirstIteration)
            {
                var cardAttachment = CreateAdaptiveCardAttachment(Path.Combine(".", "Resources", "AnagrafeArguments.json"));

                var opts = new PromptOptions
                {
                    Prompt = new Activity
                    {
                        Attachments = new List<Attachment>() { cardAttachment },
                        Type = ActivityTypes.Message,
                        Text = "Molto bene. Sono pronto a parlati dell'ufficio anagrafe, ad oggi posso rispondere alle tue domande in merito a due argomenti, il matrimonio e la Carta d'Identià. Fammi qualche domanda oppure clicca su uno dei pulsanti qui sotto.",
                    }
                };
                FirstIteration = false;

                return await stepContext.PromptAsync(nameof(TextPrompt), opts);
            }


            var messageText = stepContext.Options?.ToString() ?? "";
            var promptMessage = MessageFactory.Text(messageText, messageText, InputHints.ExpectingInput);

            return await stepContext.PromptAsync(nameof(TextPrompt), new PromptOptions { Prompt = promptMessage }, cancellationToken);
        }

        private async Task<DialogTurnResult> AnswerStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
        {
            string query = stepContext.Result.ToString();
            var qnaResult = await _qnaService.QueryAnagrafeQnAServiceAsync(query, new QnABotState());

            return await AnswerResultControlAsync(stepContext, qnaResult, cancellationToken);
        }

        private static Attachment CreateAdaptiveCardAttachment(string filePath)
        {
            var adaptiveCardJson = File.ReadAllText(filePath);
            var adaptiveCardAttachment = new Attachment()
            {
                ContentType = "application/vnd.microsoft.card.adaptive",
                Content = JsonConvert.DeserializeObject(adaptiveCardJson),
            };
            return adaptiveCardAttachment;
        }
    }

This is a screenshot of this code running in the Emulator.

This is the result on the webchat.

Answer 1

This is related to theese two issues here:

https://github.com/microsoft/BotFramework-Services/issues/87

https://github.com/microsoft/BotFramework-WebChat/issues/2268

Actionsets are not correctly rendered in WebChat atm however there's a workaround in the second issue comments.