Botframework-webchat: Adaptive Cards doesn't render Input.Number - values

[MatthiasGwiozda]

Screenshots

Activity:

result:

expected result:

Version

4.7.1 (downloaded from CDN
(In Version 4.5.2 this issue didn't occur.)

Describe the bug

When the webchat renders an activity with Input.Number, the value that should be rendered isn't shown.

Steps to reproduce

Create a Card with a default - Value in Input.Number and send it to the Webchat.
This Issue is not happening in the Emulator. So it should be a Bug in the Webchat itself.

[tdurnford]

@matthewshim-ms I was able to reproduce the issue in the latest version of Web Chat, and I confirmed that it doesn't repro in the Emulator. There were some changes to the Adaptive Card Renderer in v4.7.1 that may be causing the issue, but I'll have to investigate this issue further.

Bot Framework SDK v4 (Node)

await context.sendActivity({ attachments: [
  CardFactory.adaptiveCard({
      "type": "AdaptiveCard",
      "version": "1.0",
      "body": [
          {
              "id": "number-input",
              "type": "Input.Number",
              "placeholder": "Number Input",
              "value": "123"
          }
      ],
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
  })]
});

Additional Context

Possibly related to https://github.com/microsoft/AdaptiveCards/issues/3287

[tdurnford]

@MatthiasGwiozda @tsuwandy

Web Chat v4.6.0 took a dependency on Adaptive Cards v1.2.0 which supported using a number for the input value. Web Chat has since updated to Adaptive Cards v1.2.4 which per https://github.com/microsoft/AdaptiveCards/issues/3287#issuecomment-548552338 now requires all values to be a string. In theory, converting the value from a number to a string in the bot should work fine; however, the Direct Line connector service converts the value back to a number which is then ignored by the Adaptive Cards Renderer. You can currently work around this issue by converting the value back to a string in the attachmentMiddleware, but this issue needs to be resolved in the connector service.

BotFramework v4.7 (Node)

await context.sendActivity({
    attachments: [CardFactory.adaptiveCard({
        type: 'AdaptiveCard',
        version: '1.0',
        body: [
            {
                id: 'number-input',
                type: 'Input.Number',
                placeholder: 'Number Input',
                value: '123'
            }
        ],
        $schema: 'http://adaptivecards.io/schemas/adaptive-card.json'
    })]
});

Web Chat v4.7

<script src="https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js"></script>
<script>
  (async function() {
    const res = await fetch('/directline/token', { method: 'POST' });
    const { token } = await res.json();

    const attachmentMiddleware = () => next => ({ activity, attachment: baseAttachment }) => {
      let attachment = baseAttachment;

      if (baseAttachment.contentType === 'application/vnd.microsoft.card.adaptive') {
        attachment = window.simpleUpdateIn(baseAttachment, ['content', 'body', 0, 'value'], currentValue => currentValue.toString());
      }

      return next({ activity, attachment });
    }

    window.WebChat.renderWebChat(
      {
        attachmentMiddleware,
        directLine: window.WebChat.createDirectLine({ token }),
      },
      document.getElementById('webchat')
    );

    document.querySelector('#webchat > *').focus();
  })().catch(err => console.error(err));
</script>

[compulim]

Agree, this sounds like bug on the channel, not Web Chat.

[p-nagpal]

This happens because of a discrepancy between the way JS and C# libs handle the InputNumber->Value. I have opened https://github.com/microsoft/AdaptiveCards/issues/3829 to request for help

[arturl]

We're tracking the issue in AdaptiveCards: https://github.com/microsoft/AdaptiveCards/issues/3829

[compulim]

Tracking bug at https://github.com/microsoft/AdaptiveCards/issues/3829.

It is not fixed in 1.2.5.

[tonyanziano]

Currently blocked on Adaptive Cards bug #3829. Follow the status of the issue there.

[compulim]

Done some investigations today, tl;dr reinforcing what we believe:

1. Bot send the Adaptive Card JSON out to the channel, with value property of string/number
2. The channel converted the value property into number (regardless whether it was number or string)
3. Web Chat receive the value property (of type number) and send it to AdaptiveCard.parse()
4. AdaptiveCard.parse() returned with a structure of value equals to undefined

We try to hack the code in point 3 by changing the value property from type number to string. The AdaptiveCard.parse() is able to return a structure with value of type number. And the rendered DOM will show the value correctly.

So, this is outside of what Web Chat could do. This is because the channel is not returning something (number) that the AdaptiveCard.parse() is expecting (string). The mismatch of data type is causing data loss.

Either one or both parties need to fix:

1. The service will return value of type string
2. AdaptiveCard.parse() will accept value of type number

[corinagum]

Per https://github.com/microsoft/AdaptiveCards/issues/3829, this is no longer blocked and requires Web Chat to update to AC 2.x. That work can be tracked at: https://github.com/microsoft/BotFramework-WebChat/issues/3392