Botframework-sdk: Choice Prompt not rendering as buttons for bot enabled with Direct Line Speech Channel

[varunbmallik]

Screenshots

Version

NPM node module botbuilder4.8.0

To determine what version of Web Chat you are running, open your browser's development tools, and paste the following line of code into the console.

[].map.call(document.head.querySelectorAll('meta[name^="botframework-"]'), function (meta) { return meta.outerHTML; }).join('\n')
name="botframework-directlinespeech:version" content="4.9.1"
If you are using Web Chat outside of a browser, please specify your hosting environment. For example, React Native on iOS, Cordova on Android, SharePoint, PowerApps, etc.

Describe the bug

Choice prompt values are rendering as string values instead of buttons for bot enabled with Direct Line Speech channel.

Steps to reproduce

Create a NodeJS basic bot (not echo bot)
Setup DirectLineSpeech channel and map a speech service (westus2 region) to the bot
Host the bot on Azure web app host

Expected behavior

Using the below code for choice prompt

await stepContext.prompt(CHOICE_PROMPT, {
prompt: 'xyz dialog options',
choices: ChoiceFactory.toChoices(['Option 1', 'Option 2'])
});

Choice prompt values should be rendered as buttons but instead it is rendering as string values.

Additional context

I have used the same bot with Direct Line channel and hosted it on Azure web app host. The choice prompts are rendering properly in this case. I have also added the same speech service using the webSpeechPonyfillFactory while rendering the bot and the voice input and output works as expected. However, this has an issue with selectVoice parameter to change the bot's voice but that's a different issue altogether.
So, the issue with choice prompt not rendering seems to be very specific to DLS channel method.

I have already raised an issue on Github for DLS channel in the below link but was asked to raise an issue here as well.
Cognitive-Services-Voice-Assistant/issues/480

[Bug]

[varunbmallik]

Edit: Sorry for not removing the 'customer-reported' and `Bot Services' label.
Not sure how to remove it now

[compulim]

I think @stevengum has more context on this one. We talked about this a year ago.

[srinaath]

@EricDahlvang Can you look into this ticket?

[stevengum]

@varunbmallik can you share the raw activity that the client is receiving from Direct Line Speech?

[EricDahlvang]

I've been able to reproduce this using 03.speech/a.direct-line-speech :

        const choices = [
            { value: 'red', action: { type: 'messageBack', title: 'Red Color', value: 'Red Color' } },
            { value: 'green', action: { type: 'messageBack', title: 'Green Color', value: 'Green Color' } },
            { value: 'blue', action: { type: 'messageBack', title: 'Blue Color', value: 'Blue Color' } }
       ];
        return await step.prompt(CHOICE_PROMPT, {
            prompt: 'Choose skill options',
            choices: choices
        });

Activity received on stream:

{
"conversationId":"5c5fbbca-b0dc-4905-b96d-a0654e32e0d7",
"messagePayload": {"type":"message",
     "id":"231797ee-d3d6-4467-bb62-880ee0d04cd1",
     "timestamp":"2020-06-23T17:16:39.2362677Z",
     "serviceUrl":"urn:botframework:websocket:directlinespeech",
     "channelId":"directlinespeech",
     "from":{"id":"BotHealthTest","name":"BotHealthTest"},
     "conversation":{"isGroup":false,"id":"5c5fbbca-b0dc-4905-b96d-a0654e32e0d7"},
     "recipient":{"id":"5c5fbbca-b0dc-4905-b96d-a0654e32e0d7|0000"},
     "text":"Choose skill options (1) Red Color, (2) Green Color, or (3) Blue Color",
     "inputHint":"expectingInput",
     "replyToId":"f3c19358-c481-46ae-8e47-e47642abc8b6"},
"messageDataStreamType":1,
"version":0.3}

Normal webchat activity:

{
  "activities": [
    {
      "type": "message",
      "id": "7n0gYs9KrgUL8QwRJTm5nh-g|0000001",
      "timestamp": "2020-06-23T17:22:19.4059911Z",
      "channelId": "webchat",
      "from": {
        "id": "BotHealthTest",
        "name": "Bot Health Test"
      },
      "conversation": {
        "id": "7n0gYs9KrgUL8QwRJTm5nh-g"
      },
      "text": "Choose skill options",
      "inputHint": "expectingInput",
      "suggestedActions": {
        "actions": [
          {
            "type": "messageBack",
            "title": "Red Color",
            "value": "Red Color"
          },
          {
            "type": "messageBack",
            "title": "Green Color",
            "value": "Green Color"
          },
          {
            "type": "messageBack",
            "title": "Blue Color",
            "value": "Blue Color"
          }
        ]
      },
      "replyToId": "7n0gYs9KrgUL8QwRJTm5nh-g|0000000"
    }
  ],
  "watermark": "1"
}

[cwhitten]

Currently flagged as a Direct Line Speech Service issue. cc @NickEricson

[compulim]

Thanks @EricDahlvang, great simple explanation. ❤

@stevengum sync-ed with Jitendra from DLSpeech team. They have a fix in their head, just need to dump it out. 😉

[stevengum]

@varunbmallik there are PRs out for the validated fix. After they are merged, they should be available via a daily build until 4.10 is released.

• [ ] PR for JS - https://github.com/microsoft/botbuilder-js/pull/2479
• [ ] PR for .NET - https://github.com/microsoft/botbuilder-dotnet/pull/4224

---

After the JS and .NET PRs are merged I'm going to close this issue, botbuilder-python and botbuilder-java do not yet support Direct Line Streaming.

Direct Line Speech-specific features tracking issue for Python:
https://github.com/microsoft/botbuilder-python/issues/1216

[cleemullins]

I've approved the PRs. We'll get them merged in shortly.

[stevengum]

Closing as the work was done in JS and .NET.