如何在使用瀑布对话框（Node js）时使用microsoft bot框架将英雄卡发送到fb messenger

Question

我正在尝试使用 Microsoft 机器人框架创建一个信使机器人

我正在使用瀑布对话框来创建结构流。

在此，我有多个步骤，在一个特定步骤中，我需要发送一个由四张英雄卡组成的轮播，每张都有按钮。

我使用了 steven 的答案， Handling HeroCards responses In Microsoft Bot Framework v4 for NodeJS

我在机器人模拟器和网络聊天中进行测试时工作正常 但是在 Messenger bot 中测试时会产生错误

谁能帮我纠正这个错误，在此先感谢

   async locationStep(step) {
        // WaterfallStep always finishes with the end of the Waterfall or with another dialog; here it is a Prompt Dialog.
        // Running a prompt here means the next WaterfallStep will be run when the user's response is received.
        await this.sendIntroCard(step)
        await step.context.sendActivity("How often do you use surface on the move?")
        let acard =CardFactory.heroCard(
            " ",
            [`https://scontent.fmaa1-4.fna.fbcdn.net/v/t1.0-9/89121134_2372258766207358_5255590702309441536_n.jpg?_nc_cat=109&_nc_sid=8024bb&_nc_ohc=1cHak5WO_yoAX-VdtfO&_nc_ht=scontent.fmaa1-4.fna&oh=fd002544bc74bf53ae0185f4c192efe6&oe=5E82E09B`],
            [{  type: ActionTypes.PostBack,
                title: 'Never',
                value: 'Never'}]
       );
        let bcard =CardFactory.heroCard(
            " ",
            ['https://i.imgur.com/m2DWB7m.jpg'],
            [{  type: ActionTypes.PostBack,
                title: 'Once in a while',
                value: 'Once in a while'}]
        );
        let ccard =CardFactory.heroCard(
            " ",
            ['https://i.imgur.com/Kwn0FBn.jpg'],
            [{  type: ActionTypes.PostBack,
                title: 'A few days a week',
                value: 'A few days a week'}]
        );
        let dcard =CardFactory.heroCard(
            " ",
            ['https://i.imgur.com/mAlW0Bv.jpg'],
            [{  type: ActionTypes.PostBack,
                title: 'Every day',
                value: 'Every day'}]
        );
        await step.context.sendActivity( {attachments:[acard,bcard,ccard,dcard],attachmentLayout: AttachmentLayoutTypes.Carousel
       });
       return await { status: DialogTurnStatus.waiting }; 
    }

Answer 1

您的问题是由您作为英雄卡标题所包含的空格引起的：" "。解决您的问题很简单。您可以使用不带空格 ("") 的实际空字符串，甚至完全省略标题。

编辑：如您所见，如果您没有提供“选项”作为卡片标题，Bot Framework 将添加“选项”，因为它使用 Facebook Messenger 的 generic template 需要标题。 Bot Framework 无能为力，您也无法绕过 Facebook 的 API 限制。但是，如果您真的想发送带有图像和按钮的卡片，则可以使用media template。这会很不方便，因为您需要事先上传图片附件，以便您可以使用此 API 获取附件 ID：https://developers.facebook.com/docs/messenger-platform/reference/attachment-upload-api

而不是让您的机器人在每次需要使用它们时上传图片，您应该能够自己上传每张图片一次，然后将 ID 提供给您的机器人。上传附件后，您可以使用Send API 或根据以下说明使用 Bot Framework 活动的频道数据直接发送媒体模板：https://blog.botframework.com/2017/03/28/custom-channel-data/

await step.context.sendActivity( {
    "channelData": {
        "attachment": {
            "type": "template",
            "payload": {
                "template_type": "media",
                "elements": [
                    {
                        "media_type": "image",
                        "attachment_id": "<YOUR_ATTACHMENT_ID>",
                        "buttons": [
                            {
                                "type": "postback",
                                "payload": "Never",
                                "title": "Never"
                            }
                        ]
                    },
                    // More media templates ...
                ]
            }
        }
    }
} );

由于这可能比您想要的更复杂，您可以考虑另一种设计，例如 Messenger 的quick replies。