Microsoft Teams 卡片为 html答案

【问题标题】：Microsoft Teams cards as htmlMicrosoft Teams 卡片为 html
【发布时间】：2021-08-27 11:52:14
【问题描述】：

我通过 API 收集了 Microsoft Teams 聊天消息，并希望在网站上显示这些消息。当cards 的 JSON 出现在这些聊天消息中时，就会出现问题。我尝试使用Adaptive Card JS SDK 显示自适应卡，它显示自适应卡类型很好。但我找不到任何关于如何正确显示其他卡片类型的参考。

一些想法：

我能否将任何其他卡片类型转换为自适应卡片 JSON（无论是通过库或对 con 进行编码，以便我可以使用 Adaptive Card 显示 JS SDK？但是，如果我自己通过代码来完成，我将能够处理所有卡片类型/场景？
是否有任何 JS 库可以显示除 JSON 之外的卡片自适应卡片也

我需要能够显示任何卡片类型，但它不需要与 MS Teams 应用程序中的显示方式完全匹配（越接近越好 :)）。我不需要卡片中的任何功能作为按钮单击/重定向，只需要像在 MS Teams 中那样以 HTML 呈现卡片。注意：我有来自聊天元数据的卡片 JSON 的内容类型为 application/vnd.microsoft.card.hero、application/vnd.microsoft.card.thumbnail、application/vnd.microsoft.teams.card.o365connector 等。

例如 1：来自维基百科应用程序的卡片

卡片的 JSON

{
  "title": "<a href=\"https://en.wikipedia.org/wiki/Unidentified%20flying%20object\" target=\"_blank\">Unidentified flying object</a>",
  "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": [

  ]
}

例如 2：股票卡应用

卡片的 JSON

{
  "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&nbsp;&nbsp;<span style=\"color:#7FBA00\">&#x25B2; 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: Youtube 应用卡

卡片的 JSON

{
  "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"
  }
}

【问题讨论】：

我的回答可以接受吗？

标签： json botframework microsoft-teams adaptive-cards web-chat

【解决方案1】：

我可以将任何其他卡片类型转换为自适应卡片 JSON（通过库或对 con 进行编码，以便我可以使用 Adaptive Card JS SDK 进行显示？但是如果我自己通过代码执行此操作，我将能够处理所有卡片类型/场景？

Bot Framework Web Chat 渲染所有Bot Framework rich cards，首先将它们转换为自适应卡片。网络聊天是开源的，因此您可以查看源代码以了解它是如何做到的。但是，您在 Stocks 应用程序中显示的示例卡是特定于 Teams 的 O365 连接器卡，而不是 Bot Framework 卡，并且 Teams 源代码是专有的，因此您不会轻易了解 JSON 的处理方式。您可以参考Teams docs，了解您可能遇到的卡片类型范围。

是否有任何 JS 库可以显示除自适应卡片以外的卡片 JSON 格式

不，没有。你可以考虑在浏览器中打开 Teams Web 应用，以便阅读从 API 收集的对话的 HTML，并将 HTML 与 JSON 进行比较。您也可以考虑使用工具直接从对话中复制 HTML，而不是使用 API 以 JSON 形式获取对话。

【讨论】：