Adaptive Card показывает блок ввода текста на основе установленного значения выбора

Всю информацию, необходимую для создания самообновляющейся адаптивной карты в веб-чате с использованием расширяемости адаптивной карты, можно найти в этом ответе: BotFramework-WebChat - Адаптивная карточка

В вашем случае есть несколько отличий, которые оправдывают написание другого ответа:

1. Вы используете CDN вместо пакета NPM
2. Вы используете пакет ES5, что, как я предполагаю, означает, что вы хотите, чтобы он работал в IE11.
3. Вы пытаетесь переключить видимость вместо изменения текста

Как и в другом случае, нам нужно определить для себя схему именования, которую мы можем использовать для идентификации элементов карты, которыми должен управлять наш код. На этот раз я использую только одно ключевое слово: on.

{
  "type": "AdaptiveCard",
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.2",
  "body": [
    {
      "type": "Input.ChoiceSet",
      "choices": [
        {
          "title": "a",
          "value": "a"
        },
        {
          "title": "b",
          "value": "b"
        },
        {
          "title": "c",
          "value": "c"
        },
        {
          "title": "Others",
          "value": "Others"
        }
      ],
      "placeholder": "Select option",
      "id": "main"
    },
    {
      "type": "Input.Text",
      "placeholder": "Placeholder text",
      "isVisible": false,
      "id": "on_main_Others"
    },
    {
      "type": "ActionSet",
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ]
    }
  ]
}

Считайте, что ввод набора вариантов является нашим переключателем, а текстовый ввод - нашей целью. Идентификатор входа набора выбора - это просто имя, которое мы выбрали для него (и все входы должны иметь идентификаторы, чтобы карта работала в любом случае, даже если мы не используем нашу собственную схему именования). Идентификатор текстового ввода принимает форму on_<input>_<value>, где <input> - это идентификатор нашего переключателя, а <value> - выбор, который делает цель видимой.

Вот код, который вы можете использовать для этой работы (обратите внимание, что он поддерживает IE11, не используя никаких стрелочных функций и т. Д.):

AdaptiveCards.AdaptiveCard.onParseElement = function (element) {
  const PREFIX_ON = 'on';
  const segments = element.id && element.id.split('_');

  if (segments && segments[0] == PREFIX_ON) {
    const card = element.getRootElement();
    const input = card.getElementById(segments[1]);
    const targetValue = segments[2];
    
    input.onValueChanged = function (sender) {
      // The isVisible setter automatically updates the rendered elements
      element.isVisible = (sender.value == targetValue);
    };
  }
};

Обратите внимание, что мы обращаемся к классам Adaptive Cards с помощью глобальной переменной AdaptiveCards. Возможно, вы догадались, что это становится доступным, когда вы используете Adaptive Cards CDN. Я должен предупредить вас, что, к сожалению, последняя версия CDN Adaptive Cards в настоящее время несовместима с последней версией веб-чата. В Adaptive Cards 2.x внесены критические изменения (которые можно ожидать в новой основной версии), а в веб-чате в настоящее время используется версия 1.2.6. Чтобы убедиться, что ваш код работает, вы должны указать версию CDN Adaptive Cards в своем HTML, и вы также можете указать версию веб-чата, если позже выйдут новые версии веб-чата, которые не работают с Adaptive Cards 1.2.6. .

<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/4.9.0/webchat-es5.js" ></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/dist/adaptivecards.js" ></script>

Хотя неясно, нужно ли вам использовать свойство adaptiveCardsPackage в Node, я почти уверен, что вам нужно использовать его с CDN:

WebChat.renderWebChat(
  {
    adaptiveCardsPackage: AdaptiveCards,
    directLine: window.WebChat.createDirectLine({
      secretOrToken: secretOrToken
    })
  },
  document.getElementById('webchat')
);