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.

Hi experts,

I do not find the "Chat.Read" permission under "modify permissions". This method does not work for me. Are there any alternatives?

Auth token (JWT) - this is needed for calling Microsoft Graph APIs.

Go to https://developer.microsoft.com/en-us/graph/graph-explorer. At the left side, under Authentication, click "Sign In with Microsoft"
After having logged in, on the left side (where you clicked for login), click "modify permissions". Enable Chat.Read and re-login (like it states).
The URL contains the token (#access_token=<long token goes here>). Copy this value. Or make any random call in the sandbox and copy the Authorization request header either from the JS console (without Bearer in front of it) or from the "Access token" tab of the Graph Explorer page.

Target directory name - is the name to use for the export (will be created in the out directory in this project).

After downloading more than 1000 json files and 929 images I get the following error and the html file is not created.
Is there a way to create the index.html from what is currently downloaded? Can files also be downloaded?

downloading image-00928
downloading image-00929
Error: Request failed with status code 504
at createError (C:\teams-chat-backup-master\teams-chat-backup-master\node_modules\axios\lib\core\createError.js:16:15)
at settle (C:\teams-chat-backup-master\teams-chat-backup-master\node_modules\axios\lib\core\settle.js:17:12)
at RedirectableRequest.handleResponse (C:\teams-chat-backup-master\teams-chat-backup-master\node_modules\axios\lib\adapters\http.js:238:9)
at RedirectableRequest.emit (node:events:527:28)
at RedirectableRequest._processResponse (C:\teams-chat-backup-master\teams-chat-backup-master\node_modules\follow-redirects\index.js:346:10)
at ClientRequest.RedirectableRequest._onNativeResponse (C:\teams-chat-backup-master\teams-chat-backup-master\node_modules\follow-redirects\index.js:57:10)
at Object.onceWrapper (node:events:642:26)
at ClientRequest.emit (node:events:527:28)
at HTTPParser.parserOnIncomingClient [as onIncoming] (node:_http_client:631:27)
at HTTPParser.parserOnHeadersComplete (node:_http_common:128:17) {
config: {

Running your script ends with Too many request error

Expected
Script should work under available API limits.
https://learn.microsoft.com/en-us/graph/throttling

This is a great tool. But we want to export the channel posts instead of single chat. Can this tool be used for exporting channel posts?

Hi @edgraaff while trying to run this I ran into the error below. It exports all of the chat history into the json files but then stops with that error. Would it be possible to statically define that variable? Otherwise is there anything on my end I can do to fix that? The issue seems to be related to const myId = profile.data.id; but I'm not sure.

TypeError: Cannot read property 'user' of null
at Backup.createHtml (c:\Users\User\Downloads\teams-chat-backup-master\src\backup.js:180:26)
at async Backup.run (c:\Users\User\Downloads\teams-chat-backup-master\src\backup.js:36:5)

Thanks,

eth101

I can't seem to get this to work with the free version of teams. Is Microsoft 365 Business required?

Hi. Great tool if I could make it work :-)
I get this message. Any idea?

retrieve page 00000
Error: Request failed with status code 400
at createError (C:\Users\RasmusGrusgaard\Downloads\teams-chat-backup-master\teams-chat-backup-master\node_modules\axios\lib\core\createError.js:16:15)
at settle (C:\Users\RasmusGrusgaard\Downloads\teams-chat-backup-master\teams-chat-backup-master\node_modules\axios\lib\core\settle.js:17:12)
at IncomingMessage.handleStreamEnd (C:\Users\RasmusGrusgaard\Downloads\teams-chat-backup-master\teams-chat-backup-master\node_modules\axios\lib\adapters\http.js:269:11)
at IncomingMessage.emit (node:events:525:35)
at endReadableNT (node:internal/streams/readable:1358:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
config: {

etc

The ability to download attachments/files would be a great addition.