自适应卡在Facebook Messenger中转换为图像

Question

我尝试过从微软网站adaptivecards上获取的示例卡片。

var msg = new builder.Message(session)
    .addAttachment({
        contentType: "application/vnd.microsoft.card.adaptive",
        content: {
            type: "AdaptiveCard",
            speak: "<s>Your  meeting about \"Adaptive Card design session\"<break strength='weak'/> is starting at 12:30pm</s><s>Do you want to snooze <break strength='weak'/> or do you want to send a late notification to the attendees?</s>",
                        "body": [
                {
                    "type": "Container",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Publish Adaptive Card schema",
                            "weight": "bolder",
                            "size": "medium"
                        },
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "auto",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
                                            "size": "small",
                                            "style": "person"
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "stretch",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Matt Hidinger",
                                            "weight": "bolder",
                                            "wrap": true
                                        },
                                        {
                                            "type": "TextBlock",
                                            "spacing": "none",
                                            "text": "Created {{DATE(2017-02-14T06:08:39Z,SHORT)}}",
                                            "isSubtle": true,
                                            "wrap": true
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "Container",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
                            "wrap": true
                        },
                        {
                            "type": "FactSet",
                            "facts": [
                                {
                                    "title": "Board:",
                                    "value": "Adaptive Card"
                                },
                                {
                                    "title": "List:",
                                    "value": "Backlog"
                                },
                                {
                                    "title": "Assigned to:",
                                    "value": "Matt Hidinger"
                                },
                                {
                                    "title": "Due date:",
                                    "value": "Not set"
                                }
                            ]
                        }
                    ]
                }
            ],
            "actions": [
                {
                    "type": "Action.ShowCard",
                    "title": "Set due date",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [
                            {
                                "type": "Input.Date",
                                "id": "dueDate",
                                "title": "Select due date"
                            }
                        ],
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "OK"
                            }
                        ]
                    }
                },
                {
                    "type": "Action.ShowCard",
                    "title": "Comment",
                    "card": {
                        "type": "AdaptiveCard",
                        "body": [
                            {
                                "type": "Input.Text",
                                "id": "comment",
                                "isMultiline": true,
                                "placeholder": "Enter your comment"
                            }
                        ],
                        "actions": [
                            {
                                "type": "Action.Submit",
                                "title": "OK"
                            }
                        ]
                    }
                },
                {
                    "type": "Action.OpenUrl",
                    "title": "View",
                    "url": "http://adaptivecards.io"
                }
            ]
        }
    });

    session.send("This is an adaptive card");
    session.send(msg);

了解它在Facebook和WebChat中的显示方式。

在WebChat模拟器中，它可以通过与选项交互的选项进行渲染。

然而，同样的事情呈现为Facebook Messenger中的图像，有一个单独的消息来查看选项，重定向到网站。

我们是否应该假设自适应卡不适用于Facebook Messenger？或者我错过了一些基本的东西。

Answer 1

除非Messenger本身支持自适应卡，否则我们可以做的最好的事情是渲染图像并尝试将Actions映射到Messenger按钮。例如，Action.OpenUrl应该呈现为Messenger上的按钮。但是更高级的场景，比如输入字段等，将会被删除，因为今天无法将它们表达为Messenger模板。

本文档列出了渠道及其当前支持：

https://docs.microsoft.com/en-us/adaptive-cards/get-started/bots#channel-status