Directline choice prompt not displaying correctly

Hi we have a chatbot which is developed using bot framework and integrated in Webchat. In this choice prompt display is not correct. At some time it will display as buttons sometimes not. What may be the issue?

This is by design defaulting to ListStyle.auto as can be seen in the ChoicePrompt class here. The ChoicePrompt class extends the Prompt class which, if no prompt style (inline, list, suggest action, hero card, or none) is supplied, then it defaults to calling ChoiceFactory.forChannel(). This method runs an algorithm that checks a variety of factors to determine the best style for the given channel.

The forChannel() method checks, among other things, the number of choices included and the length of each choice title. If the title's length is too long, limited to 20 characters (ref here), and the number of choices is over 3 (ref here), then default to a list.

This is what is happening to you. However, you can overwrite this by simply passing in the style property in the prompt, like so:

async choiceStep(stepContext) {
  const choices = ['Hello', 'No soup for you!', 'Execute Order 66', 'You shall not pass!', 'Make it so, number 1', "You can't handle the truth!"]; // , `${ Number(66) }`];
  return await stepContext.prompt(CHOICE_DIALOG_SUB_PROMPT, {
    prompt: "Choose and option ,eh?",
    choices: ChoiceFactory.toChoices(choices),
    style: ListStyle.suggestedAction
  });
}