Как я могу установить стиль списка, чтобы заставки были кнопками?

Question

Я предпочитаю внешний вид кнопок нумерованному списку, но обработка приглашения по умолчанию в диалоговом окне с водопадом заключается в автоматическом переключении с кнопок (по умолчанию) на нумерованный список после определенной длины содержимого.

В настоящее время я реализую приглашение, как это:

return await step.prompt(FOCUS_AREA_PROMPT, {
    prompt: 'Got it. Can you confirm the focus area this is for?',
    choices: ChoiceFactory.toChoices(FOCUS_AREAS)
});

Я попытался добавить атрибут стиля в этом приглашении, а также попытался добавить в строку addDialogs this.dialogs.add(new ChoicePrompt(FOCUS_AREA_PROMPT));, но ничего, что я пробовал, не изменилоПоведение опций.

Я просмотрел ListStyle enum в документах MS, но любой метод, который я пытался добавить, не имел никакого значения.Есть ли способ заставить кнопки независимо от длины контента?

Answer 1

Вы можете настроить запрос выбора следующим образом, чтобы добиться нужного вам вида кнопок.Для справки, вы можете прочитать больше о forChannel здесь .

Изменить в соответствии с вашими потребностями.

Надежда на помощь!

[править]

Обновлен ниже, чтобы представить два способа сбора подсказки выбора и способ вывода значения (через imBack).При использовании toChoices соответствующее значение кнопки возвращается в activity.text и stepContext.result.value (как тип Object).При использовании forChannel соответствующее значение кнопки возвращается в activity.text и в stepContext.result (как тип String).

Как обсуждалось в комментариях, длина заголовка кнопки имеет ограничение по количеству символов.это конкретный канал.При тестировании в веб-чате ограничение составляет 20 символов.Установка значения FOCUS_AREAS «AI & Machine Learning» (21 символ) на «AI / Machine Learning» (19 символов) приводит к тому, что варианты выбора отображаются в виде кнопок, а не в виде списка.

Вариант 1: использование toChoices

async choiceStep ( stepContext ) {
  const stepResult = stepContext.context.activity.text;

  const FOCUS_AREAS = [ 'Chatbots', 'RPA', 'Blockchain', 'AR/VR', 'AI/Machine Learning' ]

  if ( stepResult ) {
    return await stepContext.prompt( CHOICE_PROMPT, {
      prompt: 'Got it. Can you confirm the focus area this is for?',
      choices: ChoiceFactory.toChoices( FOCUS_AREAS )
    } );
  }
}

activity:
{ type: 'message',
  id: 'A50eelAPrFIHKv9XeCRm24-o|0000021',
  timestamp: 2019-09-25T20:34:30.562Z,
  serviceUrl: 'https://directline.botframework.com/',
  channelId: 'directline',
  from: [Object],
  conversation: [Object],
  recipient: [Object],
  textFormat: 'plain',
  locale: 'en-US',
  text: 'Chatbots',
  channelData: [Object] },
info:
{ index: 1,
  options: {},
  reason: 'endCalled',
  result:
    { value: 'Chatbots', index: 0, score: 1, synonym: 'Chatbots' },
  values: { instanceId: 'c10ed437-77eb-4502-cd24-e89d4c5e45cf' },
  onNext: [AsyncFunction: onNext] }

Вариант 2: использование forChannel

async choiceStep ( stepContext ) {
  const stepResult = stepContext.context.activity.text;

  if ( stepResult ) {
    const message = ChoiceFactory.forChannel(
      stepContext.context, [
        { value: 'Chatbots', action: { type: 'imBack', title: 'Chatbots', value: 'Chatbots' } },
        { value: 'RPA', action: { type: 'imBack', title: 'RPA', value: 'RPA' } },
        { value: 'Blockchain', action: { type: 'imBack', title: 'Blockchain', value: 'Blockchain' } },
        { value: 'AR/VR', action: { type: 'imBack', title: 'AR/VR', value: 'AR/VR' } },
        { value: 'AI/Machine Learning', action: { type: 'imBack', title: '', value: 'AI/Machine Learning' }, text: 'AI/Machine Learning' },
    ], `Which do you choose?`
    );
    await stepContext.context.sendActivity( message );
  }
  return { status: DialogTurnStatus.waiting };
}

activity:
{ type: 'message',
  id: 'Cw5xvHTv6RCDWf3kkyS3Ir-o|0000205',
  timestamp: 2019-09-25T20:21:30.320Z,
  serviceUrl: 'https://directline.botframework.com/',
  channelId: 'directline',
  from: [Object],
  conversation: [Object],
  recipient: [Object],
  textFormat: 'plain',
  locale: 'en-US',
  text: 'Chatbots',
  channelData: [Object] },
info:
{ index: 1,
  options: {},
  reason: 'continueCalled',
  result: 'Chatbots',
  values: { instanceId: '4becefed-88d2-773e-6184-91456609a26a' },
  onNext: [AsyncFunction: onNext] }