Adaptive Card does not work if you use Direct Line App Service Extension

Question

Web App Bot is published on MS Azure and we are using DirectLine channel for rendering the bot. Everything else works very fine but adaptive cards do not show up.

I have tried to change attachment type to custom in the BOT application and changing it back to adaptive crd in webchat client application as follows :

   const attachmentMiddleware = () => next => card => {
      if (card.attachment.contentType === 'application/vnd.microsoft.card.custom'){
        card.attachment.contentType = 'application/vnd.microsoft.card.adaptive'
      }
      return next(card)
    };

    window.WebChat.renderWebChat(
      {
        directLine: await window.WebChat.createDirectLineAppServiceExtension({
          domain: 'https://xxxxxxxxxxx.azurewebsites.net/.bot/v3/directline',
          token
        }),
        styleOptions: {
        adaptiveCardsParserMaxVersion: '1.2'
        }
      },
      document.getElementById('webchat')
    );

This is how it looks in the WebChat. The empty box is the card as I understood

following is the code for the adaptive card that I am sending

  string[] paths = { ".", "Cards", "welcomeCard.json" };
    var fullPath = Path.Combine(paths);
    var adaptiveCard = File.ReadAllText(fullPath);
    return new Attachment()
    {
        //ContentType = "application/vnd.microsoft.card.adaptive",
        ContentType = "application/vnd.microsoft.card.custom",
        Content = JsonConvert.DeserializeObject(adaptiveCard),
    };

I have used ContentType as application/vnd.microsoft.card.adaptive earlier but according to some articles I have gone through, adaptive cards behave differently when used with Direct Line App Service Extensions, and hence while sending we should use application/vnd.microsoft.card.custom and then convert it to application/vnd.microsoft.card.adaptive from the client app; but this also didn't work for me.

The content of welcomeCard.json are { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "Image", "url": "https://www.xxxxxxxx.com/ResourcePackages/xxxxxxx/images/svg/xxxxxxxxx.svg", "size": "stretch" }, { "type": "TextBlock", "spacing": "medium", "size": "default", "weight": "bolder", "text": "Welcome to Bot!", "wrap": true, "maxLines": 0 }, { "type": "TextBlock", "size": "default", "isSubtle": true, "text": "Please select your preferred language to continue.", "wrap": true, "maxLines": 0 } ], "actions": [ { "type": "Action.Submit", "title": "English", "data": "en" }, { "type": "Action.Submit", "title": "German", "data": "de" } ] }

The adaptive card's version is 1.0 as we can see in the welcomeCard.Json content. There is no effect of removing styleOtptions entirely.

I read the Readme https://github.com/microsoft/BotFramework-WebChat#4121-patch-new-style-property-adaptivecardsparsermaxversion and added the 'styleOptions' it did not change anything in the behavior.

The CDN we are accessing is : https://cdn.botframework.com/botframework-webchat/latest/webchat-minimal.js

Answer 1

Appearantly this issue is realted to webchat minimal bundle, you can see github documentation and sample where adaptive cards are loaded in case of full-bundle but gets error when we use minimal version js. I also had similar issue in my web chat, i have tried changing it to full bundle and adaptive card version to 1.0

https://microsoft.github.io/BotFramework-WebChat/01.getting-started/a.full-bundle/ https://microsoft.github.io/BotFramework-WebChat/01.getting-started/b.minimal-bundle/

Let me know if this works for you.