Botframework-webchat: Adaptive Cards' Action Set does not work on Web Chat

Created on 5 Aug 2019 · 3Comments · Source: microsoft/BotFramework-WebChat

Version

4.5.1

Describe the bug

Adaptive Cards with action sets are not rendered in Web Chat

To Reproduce

Steps to reproduce the behavior:

{"schema":" http://adaptivecards.io/schemas/adaptive-card.json","version":"1.2","type":"AdaptiveCard","speak":null,"body":[{"type":"TextBlock","text":"Area Zenith","weight":"Bolder","separator":false,"columns":null,"spacing":null},{"type":"ColumnSet","text":null,"weight":null,"separator":true,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Tiepido di gamberi e calamari","altText":null,"url":null,"size":null,"id":null,"horizontalAlignment":null,"isSubtle":false,"actions":null,"weight":null},{"type":"Image","text":null,"altText":null,"url":"https://areazenith01.scm.azurewebsites.net/dev/api/files/wwwroot/wwwroot/images/Items/ItemDefault.jpeg","size":"Medium","id":null,"horizontalAlignment":null,"isSubtle":false,"actions":null,"weight":null}],"verticalContentAlignment":null},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"₹ 14.00","altText":null,"url":null,"size":null,"id":null,"horizontalAlignment":"right","isSubtle":true,"actions":null,"weight":null},{"type":"ActionSet","text":null,"altText":null,"url":null,"size":null,"id":null,"horizontalAlignment":null,"isSubtle":false,"actions":[{"type":"Action.Submit","title":"Delete","data":{"action":"DELETE_2449769"}}],"weight":null}],"verticalContentAlignment":"Bottom"}],"spacing":null},{"type":"ColumnSet","text":null,"weight":null,"separator":false,"columns":[{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"Total","altText":null,"url":null,"size":"Medium","id":null,"horizontalAlignment":null,"isSubtle":true,"actions":null,"weight":null}],"verticalContentAlignment":null},{"type":"Column","width":1,"items":[{"type":"TextBlock","text":"₹ 14.00","altText":null,"url":null,"size":"Medium","id":null,"horizontalAlignment":"Right","isSubtle":false,"actions":null,"weight":"Bolder"}],"verticalContentAlignment":null}],"spacing":"Medium"}]}

Expected behavior

Additional context

[Bug]

Bug Other

Source

corinagum

All 3 comments

This seems to be related to https://github.com/microsoft/BotFramework-Services/issues/87 and appears to work correctly in Web Chat with the workaround mentioned in the thread. This should be resolved when the Direct Line Connector Service's Adaptive Cards dependency is updated to v1.2.

tdurnford on 5 Aug 2019

👍1

Closing this issue since it's external to Web Chat. Please use the above link for tracking. :)

corinagum on 6 Aug 2019

👍1

this is directline client :

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main">
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
       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: window.WebChat.createDirectLine({
                  token: 'SECRET'
               }),
                attachmentMiddleware, 
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               botAvatarInitials: 'WC',
               userAvatarInitials: 'WW'

            },
            document.getElementById('webchat')
         );
      </script>
      </div>
   </body>
</html>