Turing: Extending Adaptive Cards using AC extensibility feature

Background

Show how to use AC JavaScript extensibility in Web Chat, as a sample.

Goals

• Load a custom version of Adaptive Cards
  • From https://unpkg.com/adaptivecards@1.2.6/dist/adaptivecards.min.js
  • In README.md, please also mention, this work can allow devs to load different versions of Adaptive Cards
    • By different, it should have similar behaviors as the one shipped in Web Chat, that means, same minor version
• Load the AC extensibility sample in the custom-loaded AC package
  • https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/extensibility
• Keep the ProgressBar component as original as possible
  • Keep TypeScript, use @babel/standalone to transpile TypeScript on-the-fly
    • @babel/standalone probably not support TypeScript by default
    • You can register additional plugin/preset with @babel/standalone, some references
      • https://babeljs.io/docs/en/babel-standalone#script-tags
      • https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/testharness/src/index.js#L56
  • The AC sample is currently not working because Adaptive.getStringValueOrDefault and Adaptive.getValueOrDefault are not implemented, please ping David Claux to fix them

Non-goals

• Turn into a NPM project
  • This sample is simple enough to be kept as a NPM project

Action items

Implement https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/extensibility in Web Chat as a sample.

+ <script crossorigin="anonymous" src="https://unpkg.com/adaptivecards@1.2.6/dist/adaptivecards.min.js"></script>

+ window.AdaptiveCards.AdaptiveCard.elementTypeRegistry.registerType('ProgressBar', () => new window.WebChatSample.ProgressBar());

  window.WebChat.renderWebChat(
    {
+     adaptiveCardsPackage: window.AdaptiveCards,
      directLine: window.WebChat.createDirectLine({ token })
    },
    document.getElementById('webchat')
  );

Prototype

Very preliminary POC for this sample in this sample.zip.

Start with README.md and the provided sample.zip, then trace the sample's window.WebChat.renderWebChat entry point and Adaptive Cards registration. Done means demonstrating the JavaScript extensibility sample with a custom Adaptive Cards package, preserving the TypeScript ProgressBar, documenting compatible versions in README.md, and addressing the missing Adaptive.getStringValueOrDefault and Adaptive.getValueOrDefault behavior.