使用 Bot Framework v4 在 WebChat 中未呈現自適應卡片操作

Question

我想在瀑布對話框中使用自適應卡片向用戶建議對話框的主要主題。 在模擬器中一切正常，但在網絡聊天中，操作按鈕不顯示。

這是自適應卡 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"
}

對話代碼：

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;
        }
    }

這是此代碼在模擬器中運行的屏幕截圖。

這是網絡聊天的結果。

Answer 1

這與這里的這兩個問題有關：

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

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

在 WebChat atm 中未正確呈現操作集，但是在第二個問題評論中有解決方法。