如何监听自适应卡输入选择集的变化？

Question

我一直在使用 Bot 框架 sdk 4.0 和 Node JS 制作一个团队机器人。 我有一张自适应卡，其中包含图像和输入选择选项作为下拉菜单，选择并单击更新按钮（这是一个操作。提交按钮）将更新自适应卡中的图像。

我想让它不必单击更新按钮，而是希望它在从下拉列表中进行选择时触发更新功能。

我如何监听机器人下拉列表中的选择？

Answer 1

要侦听 Teams 机器人中自适应卡的输入选择集的更改，您可以使用 app.adaptiveCards.actionSubmit 方法来处理由下拉选择触发的 action.submit 事件。 使用 app.adaptiveCards 属性在机器人代码中注册自适应卡操作处理程序。这将侦听下拉选择触发的 action.submit 事件。

app.adaptiveCards.actionSubmit('DynamicSubmit', async (context, _state, data: SubmitData) => {
  // Handle the dropdown selection here
  await context.sendActivity(`Dynamically selected option is: ${data.choiceSelect}`);
});

在自适应卡 JSON 中，确保设置 action.submit 按钮的 id 属性以匹配上面代码中指定的操作名称（本例中为 DynamicSubmit）。

{
  "type": "Action.Submit",
  "title": "Update",
  "id": "DynamicSubmit"
}

如果您想根据所选选项更新自适应卡中的图像，您可以修改操作处理程序代码如下：

app.adaptiveCards.actionSubmit('DynamicSubmit', async (context, _state, data: SubmitData) => {
  // Update the image based on the selected option
  if (data.choiceSelect === 'Option 1') {
    // Update image for Option 1
  } else if (data.choiceSelect === 'Option 2') {
    // Update image for Option 2
  } else {
    // Handle other options
  }
  await context.sendActivity(`Dynamically selected option is: ${data.choiceSelect}`);
});

参考：Microsoft Teams AI GitHub存储库具体可以参考index.ts文件了解实现细节。