Sample: Disable Adaptive Cards after submit/obsoleted

Goals

• Write a new attachment renderer that will disable Adaptive Card interactivity if a certain condition is met
  • If the Adaptive Card is no longer the last visible activity sent from the bot, or there is a message sent by the user succeeding it, disable interactivity on the Adaptive Card
• There could be more than one Adaptive Card form available on the page
• Also consider, if "expand card" action button should be disabled or not. It was because "expand card" button should not be counted as "form submission", we might not want to disable expand/collapse feature
  • If implementer is not familiar with this feature, should consult the "Adaptive Card visualizer" page for details

Non-goals

It should not use jQuery or any other DOM-manipulating libraries to achieve the goal. It must use pure React.

Reference

We have a sample named "presentation mode". It showed the ability to disable interactivity of the whole Web Chat UI, including Adaptive Card content. The implementer can look into that to understand how to disable interactivity for just a specific attachment

Start by reviewing the existing "presentation mode" sample to understand how Adaptive Card interactivity is disabled, then consult the "Adaptive Card visualizer" for expand/collapse behavior. The new attachment renderer should handle multiple cards, disable a card when it is no longer the last visible bot activity or is followed by a user message, and preserve expand/collapse if appropriate without using jQuery or other DOM-manipulating libraries.