Microsoft Teams cards as html - json

Question

I have Microsoft Teams chat messages collected via API and want to display those on a website. The problem comes when JSONs of cards are in these chat messages. I tried displaying adaptive cards with Adaptive Card JS SDK and it displayed adaptive card type fine. But I can't find any reference to how can I display other card types correctly.
Few thoughts:
Can I convert any other card type to an Adaptive Card JSON (either
by a library or coding the con so I can display with Adaptive Card
JS SDK? But then if I do it by code myself will I able to handle all
card types/scenarios?
Is there any JS library that could show JSONs of cards other than
Adaptive cards also
I need to be able to display any card type, but it doesn't need to be an exact match of how displayed in the MS Teams app (closer the better :) ). I don't need any functionalities in cards as button clicks/redirections, just card need to be rendered in HTML as it would in MS Teams.
Note: I have the content types of card JSON as application/vnd.microsoft.card.hero, application/vnd.microsoft.card.thumbnail, application/vnd.microsoft.teams.card.o365connector, etc from chat meta data.
eg 1: Card from Wikipedia app
JSON for the card
{
"title": "Unidentified flying object",
"text": "unidentified flying object (<span>UFO</span>) is any aerial phenomenon that cannot immediately be identified or explained. Most <span>UFOs</span> are identified or investigated",
"images": [
{
"alt": "Unidentified flying object",
"url": "https://upload.wikimedia.org/wikipedia/commons/b/bc/PurportedUFO2cropped.jpg"
}
],
"buttons": [
]
}
eg 2: Card of Stocks app
JSON for the card
{
"sections": [
{
"activityTitle": "<span style=\"font-weight:600;font-size:1.8rem\">Apple Inc (Nasdaq Stock Market: AAPL)</span>",
"activitySubtitle": "<span style=\"font-size:1.6rem\">125.89 <span style=\"color:#7FBA00\">▲ 2.35 (1.90%)</span></span>",
"activityText": "\r\n<br/>\r\n<div style=\"font-size:1.2rem\">\r\n <p>\r\n <span style=\"font-weight:600\">When:</span> Friday, June 4, 2021 7:59 PM EDT. Delayed 15 minutes.<br/> <span style=\"font-weight:600\">After hours:</span> 126.01\r\n </p>\r\n <p>Data from Refinitiv</p>\r\n</div>",
"potentialAction": [
{
"#type": "OpenUri",
"targets": [
{
"os": "default",
"uri": "https://www.msn.com/en-us/money/stockdetails/fi-a1mou2"
}
],
"name": "More details",
"#id": "ViewOnMsn"
},
{
"#type": "OpenUri",
"targets": [
{
"os": "default",
"uri": "https://www.bing.com/news/search?q=Apple Inc"
}
],
"name": "News",
"#id": "ViewNews"
}
],
"markdown": false
}
]
}
eg 3: Card of Youtube app
JSON for the card
{
"title": "M1 MacBook Pro and Air review: Apple delivers",
"subtitle": "The Verge | 1.4M views | 6 months ago",
"text": "<p>Apple has updated three Mac with its own M1 processors: the Macbook Air, the entry-level 13-inch MacBook Pro, and the Mac mini. Will Intel-based apps run? Will ...</p>\r\n\r\n\r\n<p>YouTube | 12:57</p>",
"images": [
{
"alt": "M1 MacBook Pro and Air review: Apple delivers",
"url": "https://i.ytimg.com/vi/OEaKQ0pxQsg/hqdefault.jpg"
}
],
"buttons": [
],
"tap": {
"type": "openUrl",
"title": "M1 MacBook Pro and Air review: Apple delivers",
"value": "https://www.youtube.com/watch?v=OEaKQ0pxQsg"
}
}

Answer 1

Can I convert any other card type to an Adaptive Card JSON (either by a library or coding the con so I can display with Adaptive Card JS SDK? But then if I do it by code myself will I able to handle all card types/scenarios?
Bot Framework Web Chat renders all Bot Framework rich cards by converting them into Adaptive Cards first. Web Chat is open source, so you can have a look at the source code to see how it does that. However, the sample card you've shown from the Stocks app is a Teams-specific O365 Connector card and not a Bot Framework card, and the Teams source code is proprietary so you will not easily find out how that JSON gets processed. You can refer to the Teams docs to get an idea of the range of card types you're likely to encounter.
Is there any JS library that could show JSONs of cards other than Adaptive cards also
No, there is not. You might consider opening the Teams web app in your browser so you can read the HTML of the conversations you've collected from your API and compare the HTML to the JSON. You might also consider using a tool to just copy the HTML from your conversations directly instead of using the API to get the conversations in JSON form.