Input.ChoiceSet inside Action.ShowCard卡无法正常工作#361_Javascript垂直选项卡无法正常工作_Bootstrap sidenav选项卡内容导航无法正常工作 - 腾讯云开发者社区

Input.ChoiceSet inside Action.ShowCard卡无法正常工作#361

问题分析

Input.ChoiceSet 是 Bot Framework 中的一个组件，用于在对话中显示一组选项供用户选择。Action.ShowCard 则用于在消息中嵌入一张卡片，卡片中可以包含各种控件，包括 Input.ChoiceSet。如果你遇到 Input.ChoiceSet 在 Action.ShowCard 中无法正常工作的问题，可能是由于以下几个原因：

卡片嵌套问题：Action.ShowCard 中嵌套 Input.ChoiceSet 可能存在一些限制或bug。
版本兼容性问题：使用的 Bot Framework 版本可能不支持这种嵌套方式。
配置错误：可能存在配置错误，导致 Input.ChoiceSet 无法正确渲染。

解决方案

1. 检查 Bot Framework 版本

确保你使用的是最新版本的 Bot Framework。旧版本可能存在一些已知的问题，更新到最新版本可能会解决这些问题。

npm install microsoft-botbuilder@latest

2. 使用 Adaptive Cards

考虑使用 Adaptive Cards 来替代 Action.ShowCard 和 Input.ChoiceSet 的组合。Adaptive Cards 是一种更灵活的卡片格式，支持更多的控件和更好的嵌套能力。

{
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "id": "choiceSet",
      "choices": [
        {
          "title": "Option 1",
          "value": "option1"
        },
        {
          "title": "Option 2",
          "value": "option2"
        }
      ],
      "style": "expanded"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "choice": "option1"
      }
    }
  ]
}

3. 调试和日志

在代码中添加调试信息和日志，查看是否有错误信息输出。这有助于定位问题的具体原因。

const { ActivityHandler, CardFactory } = require('botbuilder');

class MyBot extends ActivityHandler {
  constructor() {
    super();

    this.onMessage(async (context, next) => {
      try {
        const card = CardFactory.adaptiveCard(adaptiveCardJson);
        await context.sendActivity({ attachments: [card] });
      } catch (error) {
        console.error('Error sending card:', error);
      }
      await next();
    });
  }
}

module.exports.MyBot = MyBot;

4. 参考文档和社区支持

查看 Bot Framework 的官方文档和社区支持，了解是否有类似的问题和解决方案。

应用场景

Input.ChoiceSet 和 Action.ShowCard 通常用于以下场景：

菜单选择：在对话中提供一个菜单供用户选择不同的操作。
选项配置：允许用户从一组预定义选项中选择一个或多个选项。
表单填写：在对话中嵌入一个表单，用户可以通过选择和输入来完成表单。

示例代码

以下是一个使用 Adaptive Cards 的示例代码：

const { ActivityHandler, CardFactory } = require('botbuilder');

class MyBot extends ActivityHandler {
  constructor() {
    super();

    this.onMessage(async (context, next) => {
      const adaptiveCardJson = {
        "type": "AdaptiveCard",
        "version": "1.2",
        "body": [
          {
            "type": "Input.ChoiceSet",
            "id": "choiceSet",
            "choices": [
              {
                "title": "Option 1",
                "value": "option1"
              },
              {
                "title": "Option 2",
                "value": "option2"
              }
            ],
            "style": "expanded"
          }
        ],
        "actions": [
          {
            "type": "Action.Submit",
            "title": "Submit",
            "data": {
              "choice": "option1"
            }
          }
        ]
      };

      const card = CardFactory.adaptiveCard(adaptiveCardJson);
      await context.sendActivity({ attachments: [card] });
      await next();
    });
  }
}

module.exports.MyBot = MyBot;