Botframework-webchat: Cards: unable to render D. M. YYYY date properly

Created on 24 Jun 2019 · 20Comments · Source: microsoft/BotFramework-WebChat

Screenshots

When Title or Subtitle in HeroCard starts with date in European format (D. M. YYYY):

It gets evaluated with Markdown as ordered list and produces wrong HTML:

Version

webchat-stable
Bot Framework emulator

Describe the bug

When Title or Subtitle in HeroCard begins with date in the form of D. M. YYYY it's recognized as Markdown ordered list and rendered completely out of place (see screenshots).

To Reproduce

Steps to reproduce the behavior:

Connect your bot to proper channel registration
Start Bot Framework Emulator or deploy web chat to a website
Make sure your regional settings are European D. M. YYYY

Generate a Hero Card and set Title and/or Subtitle to today's date

var reply = stepContext.Context.Activity.CreateReply();
var card = new HeroCard
{
   Title = string.Format(DateTime.Now.ToShortDateString()),
   Subtitle = DateTime.Now.ToShortDateString(),
};

reply.Attachments.Add(card.ToAttachment());
await stepContext.Context.SendActivityAsync(reply);

Send it to user
See incorrect display in Web Chat

Expected behavior

Date should be displayed properly, not as an ordered list.

Additional context

Workaround: Prepend date with invisible character ⁣

[Bug]

Bot Services Bug Adaptive Cards P1 backlog blocked customer-replied-to customer-reported front-burner needs-scope needs-team-attention technical-debt

Source

msimecek

Most helpful comment

tonyanziano on 27 Jun 2019

👍3

All 20 comments

This appears to be working fine in Web Chat v3 and v4, Test in Web Chat on the Azure Portal, and Emulator v3 and v4. Can you confirm which version of Web Chat you're using?

Web Chat v4.4.2

Bot - C

Thread.CurrentThread.CurrentCulture = new CultureInfo("fi-FI");

var reply = turnContext.Activity.CreateReply();
var card = new HeroCard
{
    Title = string.Format(DateTime.Now.ToShortDateString()),
    Subtitle = DateTime.Now.ToShortDateString(),
};

reply.Attachments.Add(card.ToAttachment());
await turnContext.SendActivityAsync(reply);

tdurnford on 24 Jun 2019

Sure, I'm going to do some more tests on different platforms.

QQ: Your screenshot appears to have the date as "24.6.2019" (without spaces). But for instance the proper Czech version is "24. 6. 2019" (with spaces). Do I see that right?

msimecek on 24 Jun 2019

@msimecek Yea, I guess Finland doesn't use spaces. However, I also don't see spaces when I set the locale to cs-CZ. I tried sending a Hero Card where I just the set the title and subtitle to "24. 6. 2019" , but everything still rendered correctly.

tdurnford on 24 Jun 2019

So setting the title and subtitle to "24. 6. 2019" with the spaces and sending the card to Test in Web Chat on the Azure portal causes the rendering issue.

Test in Web Chat is currently using Web Chat v3, but the development team is working to migrate it to v4. In the meantime, if you need an immediate solution I would recommend using the latest version of Web Chat in your own Web Page. If you need examples of getting started, I take a look at the samples in the Web Chat GitHub repo.

Closing as this issue is not persistent in v4.

tdurnford on 24 Jun 2019

@tdurnford You are fast on closing...

I did what developers do - went to Azure portal, took the Web Chat iFrame code and pasted to blank HTML page. Is this experience going to be updated?

Also, my emulator (updated today, v4.4.2) does this (which is even worse):

You said that it works fine for you in the Emulator v3 and v4. Which version are you using?

msimecek on 24 Jun 2019

The iFrame is still using Web Chat v3 as well, but it is in the process of being migrated to v4. You can paste your Web Chat Secret in to the code snippet below to get started with Web Chat v4.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>WebChat</title>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
  <style>
    html, body { height: 100% }
    body { 
      margin: 0;
      }

    #webchat {
      height: 100%;
    }

  </style>
</head>
<body>

  <div id="webchat" role="main"></div>

  <script>
    (async function() {

      const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { 
        method: 'POST',
        headers: {
          'Authorization': `Bearer <WEB_CHAT_SECRET>`
        }
      });

      const { token } = await res.json();

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

    })().catch(err => console.log(err));

  </script>
</body>

In terms of the Emulator, I'm also using v4.4.2, and I'm seeing the same issue you are. I'll have this issue transferred to the Emulator repo.

tdurnford on 24 Jun 2019

I did it differently, but can confirm, that v4 works fine.

Thanks for investigating and for the transfer!

msimecek on 24 Jun 2019

👍2

@msimecek

I might be missing something, but I tried to repro this on the latest version of the Emulator and I'm not seeing any rendering issues:

This is the code I'm using in my bot, from @tdurnford 's previous comment:

Thread.CurrentThread.CurrentCulture = new CultureInfo("fi-FI");

var reply = Activity.CreateMessageActivity();
var card = new HeroCard
{
    Title = string.Format(DateTime.Now.ToShortDateString()),
    Subtitle = DateTime.Now.ToShortDateString(),
};

reply.Attachments.Add(card.ToAttachment());
await turnContext.SendActivityAsync(reply);

You can try out the latest version of the Emulator over at the nightly repo.

tonyanziano on 26 Jun 2019

Hi @tonyanziano . What if you add spaces into the date? ("26. 6. 2019")

msimecek on 26 Jun 2019

Hey @msimecek ,

If I add spaces into the data I get the following:

This is because it is interpreted as Markdown.

The same text in this GitHub comment box produces a similar result:

"26. 6. 2019"
"26. 6. 2019"

1. 2019
1. 2019

I'm not too familiar with how Markdown interacts with and is configured with WebChat, but perhaps there is an option to turn off Markdown rendering for certain fields, or tell WebChat not to render Markdown.

@corinagum & @compulim is there a way to disable Markdown rendering for adaptive cards?

tonyanziano on 27 Jun 2019

@tonyanziano Thanks for point that out! You can add a plain text attachment to the activity if you don't want the string to be passed through the markdown renderer. I'm not sure that will work in an Hero Card though.

await context.sendActivity({
    attachments: [{
        content: "26. 6. 2019",
        contentType: 'text/plain'
    }]
})

tdurnford on 27 Jun 2019

🎉2

I was investigating toLocaleString() and such, but @tdurnford's method seems the most reasonable. Thoughts?

corinagum on 27 Jun 2019

I think @tdurnford 's approach is reasonable as well, however I'm not sure how to achieve the same layout / look as the Hero Card with a plain text attachment.

I tried setting the Hero Card's content type to text/plain manually using the following code:

var reply = Activity.CreateMessageActivity();
var card = new HeroCard
{
    Title = "26. 6. 2019",
    Subtitle = "26. 6. 2019",
};

reply.Attachments.Add(card.ToAttachment());
reply.Attachments[0].ContentType = "text/plain";
await turnContext.SendActivityAsync(reply);

However, this activity caused Web Chat to throw, and consequently kill the Emulator.

tonyanziano on 27 Jun 2019

❤1

@tonyanziano Good ideas. The thing is that WebChat v4 doesn't suffer from this issue (as investigated by @tdurnford earlier). Not sure which version the Emulator is using, I assumed it was v4 as well.

Also notice that in your example it ignored both the day and month part and instead of 26. 6. 2019 rendered 1. 1. 2019. Any idea why this happens?

msimecek on 27 Jun 2019

tonyanziano on 27 Jun 2019

👍3

tdurnford on 27 Jun 2019

tonyanziano on 27 Jun 2019

corinagum on 27 Jun 2019