如何从botframework中的嵌入式Webview接收请求并关闭“消息传递扩展”窗口？

Question

我有一个机器人，该机器人具有消息传递扩展功能。我遵循了一个示例here。但是我没有使用卡视图，而是使用嵌入式Web视图来显示我的自定义UI（这是S3中托管的React应用）

这是我用来打开邮件扩展预览的代码：

  handleTeamsMessagingExtensionFetchTask(context, action) {
    const url = process.env.POPUP_VIEW_URL;
    return {
      task: {
        type: 'continue',
        value: {
          url: url,
          fallbackUrl: url,
          width: 680,
          height: 400,
          title: 'Feedback & praise',
        },
      },
    };
  }

弹出窗口将具有以下UI：

我试图找到一个示例/文档，该示例/文档介绍了当用户单击“提交请求”按钮，但到目前为止找不到该机器人如何从UI接收请求。我看过这个this，但它使用的是自适应卡片示例。

我想知道嵌入式Webview文档中是否有示例？我还以为当用户单击按钮时只进行一次API调用，但是仍然对如何在API调用返回成功后关闭预览窗口感到困惑。

Answer 1

您需要在按钮单击中使用SubmitTask

microsoftTeams.tasks.submitTask(JSON);

Answer 2

就像@Rajesh的回答一样。这基本上就是我所做的

1. 将@microsoft/teams-js添加到我的应用程序中
2. 来自包含按钮的组件。由于我不需要将任何信息传递回机器人/团队，所以我只调用不带参数的函数。

import * as microsoftTeams from "@microsoft/teams-js";

...

export const myComponent = () => {
  const submitRequest = () => {
    // make API request
    if (success) {
      microsoftTeams.initialize(); // This is a must
      microsoftTeams.tasks.submitTask();
    }
  }


  return (
    <>
     ...
     <button onClick={submitRequest} type="button">Submit request</button>
    </>
  );
}