Adaptive Cards and bot messages

[CicadaCinema]

What follows is documentation of my experience rendering Microsoft's Adaptive Cards UI to HTML, for the purposes of viewing messages rendered with it in a Teams archive. I'm not a web developer and I want to pass on everything I've learnt over the past few hours to someone who is more experienced with this. Naturally, it is easy to produce various Adaptive Cards-based messages by selecting one of various "Apps" when sending a message on Teams. The most convenient one for testing is Forms, in my experience.

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.

Microsoft Teams uses Adaptive cards to show certain messages such as polls. When such messages are downloaded by this tool, the adaptive card itself can be found under message.attachments[0].content in a form resembling a json object. This is unfortunate because it doesn't seem like Microsoft intended for Adaptive Cards to be rendered as plain HTML. The .NET portion of the SDK contains some snippets to show how this could be done in C#, but I haven't been able to find a similar implementation for javascript. The javascript SDK requires that the code is run as a script. As stated earlier, I am unfamiliar with how this could be implemented, so perhaps it is easier than I think. It seems that this person wanted to achieve a similar goal, but was unsuccessful.

Even after manually extracting the json object from a scraped message and feeding it into the .NET snippet linked above (this can easily be done by replacing the link in the snippet with a GitHub gist where your json is stored), the html remains garbed and unusable. Again, I'm not sure why this is. I'm not going to provide any sample messages, but the errors included some misaligned elements and also completely inexplicable things like this:

I'm going to submit a PR soon to completely ignore messages made by bots (in its current state, the tool halts when it encounters an Adaptive Card message created by a bot in the createHtml stage - after all the messages/media have been saved successfully via the Teams API), but it would be nice if someone more familiar with web development could pick up this issue and work on it. It seems like a good solution could be to capture json objects as they come in and write to a js script as well as a html file as the final output. Therefore the json objects could be saved separately (like images) and rendered client-side. I think this could be done most easily while messages are being received from the API, because the final message log contains some carriage returns and escape characters (again, not sure where these are being introduced) among Adaptive Card objects.