如何使用 BotBuilder for Node.js 在 Microsoft Teams 中调用带有图像/自适应卡的模态对话框弹出窗口？

Question

标题：如何使用 BotBuilder for Node.js 在 Microsoft Teams 中调用带有图像/自适应卡的模态对话框弹出窗口？

身体： 大家好

我正在开发一个项目，使用 Node.js 和 Express 的 BotBuilder 库构建一个聊天机器人，并将其与 Microsoft Teams 集成。我正在尝试实现一个功能，当对话中发生特定操作时，机器人可以调用包含图像或自适应卡的模式对话框弹出窗口。

我一直在网上浏览 BotBuilder 文档和各种资源，但一直无法找到有关如何实现此特定功能的清晰示例或解释。

有人可以提供有关如何使用 BotBuilder for Node.js 和 Express 实现此功能的指导或资源吗？具体来说，我有兴趣了解：

如何触发机器人弹出模式对话框以响应用户操作或消息。 如何构建模式对话框的内容，特别是当我想包含图像或自适应卡时。 Microsoft Teams 环境中启用此功能所需的任何其他配置或设置。 任何示例、代码片段或相关文档的指针将不胜感激。预先感谢您的帮助！

我尝试发送调用活动 通过 botbuilder sendactivity api

但它说错误的论点未知活动类型

参考代码 -

使用此有效负载根据文档发送初始调用请求

https://learn.microsoft.com/en-us/microsoftteams/platform/messaging-extensions/how-to/action-commands/create-task-module?tabs=dotnet

{
  "type": "invoke",
  "id": "f:bc319b1d-571a-194d-9ffb-11d7ab37c9ff",
  "from": {
    "id": "29:1aBjVi5MwCFfhPIV03E5uDdfpBFXp_2Yz-sjrvVg12oavg96cqpE_DiMhOpmN9zHeZpYbJcuUEKuSDy2AYWPz1A",
    "name": "Olo Brockhouse",
    "aadObjectId": "b130c271-d2eb-45f9-83ab-9eb3fe3788bc"
  }
  "channelData": {
    "tenant": {
      "id": "0d9b645f-597b-41f0-a2a3-ef103fbd91bb"
    },
    "source": {
      "name": "compose"
    }
  },
  "value": {
    "commandId": "Test",
    "commandContext": "compose",
    "requestId": "fe50f49e5c74440bb2ebf07f49e9553c",
    "context": {
      "theme": "default"
    }
  },
  "name": "composeExtension/fetchTask"

请参阅附图以供参考

Answer 1

我按照此文档使用 JavaScript 在 Microsoft Teams 中创建了一个机器人应用程序。

创建机器人应用程序项目：

• 安装 Teams Toolkit、Microsoft Teams、Node.js 和 Visual Studio Code。
• 启动 Visual Studio Code 并单击 Visual Studio Code 活动栏中的 Teams Toolkit 图标。然后，单击创建新应用程序。

选择 Bot 作为您要创建的应用程序功能，然后选择 JavaScript 作为编程语言。

• 选择默认位置或特定位置来保存您的项目，为您的应用程序提供名称，然后创建它。

• 在 Visual Studio Code 中选择 F5 来构建并运行您的应用程序。

• 在 Visual Studio Code 中选择 Teams Toolkit 图标，选择登录 M365，然后提供您的 Microsoft 365 帐户凭据。

• 我按照此doc获取模板 SDK 自适应卡和设计器自适应卡。

• 我使用这个doc来实现自适应卡片弹出窗口。

下面的代码使用“adaptivecards”库和来自 git 的代码实现了带有自适应卡的弹出模式。

 const templatePayload = {
            "type": "AdaptiveCard",
            "version": "1.3",
            "body": [
                {
                    "type": "TextBlock",
                    "text": `Hello ${data.name}!`
                },
                {
                    "type": "Image",
                    "url": "https://via.placeholder.com/300",  // Image URL
                    "altText": "Sample Image"
                },
                {
                    "type": "TextBlock",
                    "text": "This is a sample Adaptive Card modal dialog."
                }
            ],
            "actions": [
                {
                    "type": "Action.OpenUrl",
                    "title": "Learn More",
                    "url": "https://adaptivecards.io/"
                }
            ]
        };

        // Create an Adaptive Card instance from the payload
        const template = new ACData.Template(templatePayload);

        // Create the Adaptive Card with the provided data
        const adaptiveCardPayload = template.expand({ $root: data });

        // Send the invoke activity to display the modal dialog
        await context.sendActivity({
            type: "invoke",
            name: "taskModule",
            value: {
                title: "Adaptive Card Modal Dialog",
                height: "medium",
                width: "medium",
                card: adaptiveCardPayload
            }
        });
    }
}