Cards: unable to render D. M. YYYY date properly

msimecek commented 5 years ago

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]

tdurnford commented 5 years ago

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);

msimecek commented 5 years ago

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?

tdurnford commented 5 years ago

@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 commented 5 years ago

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.

msimecek commented 5 years ago

@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?

tdurnford commented 5 years ago

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.

msimecek commented 5 years ago

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

Thanks for investigating and for the transfer!

tonyanziano commented 5 years ago

@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.

msimecek commented 5 years ago

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

tonyanziano commented 5 years ago

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?

tdurnford commented 5 years ago

@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'
    }]
})

corinagum commented 5 years ago

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

tonyanziano commented 5 years ago

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.

msimecek commented 5 years ago

@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?

tonyanziano commented 5 years ago

@msimecek , the reason it converts 26. 6. 2019 into 1. 1. 2019 is because Markdown interprets a number followed by a . as one item in a list. Items in a list are enumerated in Markdown.

One special thing about how it interprets this syntax is that it does not matter what number is before the ., the list will start at 1 and increment upwards for each subsequent item in the list.

For example: try the following in the GitHub comment box and click "Preview" to see what it renders:

1.
3.
10.

This should render as:

1. 2. 3.

Markdown also understands the concept of nested lists, which means that enumerated items with different indentations will be seen as sub-lists of the parent list.

So in the case of your hero card (feel free to try this in GitHub as well):

1. 1. year
1. 1. year

Will render as:

1. year
1. year

because the first 1. on each line is seen as the first item in the parent-level list, and the second 1. is seen as the first item in the child-level list for each row.

So when you type 26. 6. 2019, the 26. gets converted to a 1. and the 6. also gets converted into a 1. because they are both seen as the first item in an ordered list.

===

Regarding the actual issue, I will try to bump the Web Chat version within the Emulator and see if that fixes it.

tdurnford commented 5 years ago

The date renderers correctly in the latest version of Web Chat - 4.4.2 - because Web Chat was not rendering markdown in rich cards. PR https://github.com/microsoft/BotFramework-WebChat/pull/2063 fixed the rendering issue, so the date issue should resurface after the next release. Bumping the version in the emulator will only temporarily resolve this issue.

tonyanziano commented 5 years ago

Transferring this issue back to Web Chat.

corinagum commented 5 years ago

I just discussed this with @compulim. Let me summarize!

TLDR: We researched different paths to make in regards to how to solve this issue, and I think we're ready to pull in @cwhitten

According to the DL schema, Activities DO have the textFormat parameter that can define whether to use rich text or plain text. However, this should only be applied to the text of the activity, and does not affect the attachment. While we could consider applying textFormat to the attachment, I think it's safer to assume that a user may want to differentiate between the activity's text and the attachment's texts' formatting.

According to Adaptive Cards, we don't have a way to indicate plain text or markdown for a card.

The Teams schema similarly default to rich text for the card's text, but non-formatted rich text (which I equate to plain text) for subtitle and title. Since we want to consider how other teams handle attachments, we should keep this in mind moving forward.

The paths:

~1. Leave everything as is right now. Wait for https://github.com/microsoft/BotFramework-WebChat/issues/1259 to be implemented, which is the transfer of cards away from Adaptive Cards, and and build cards to render the text field as Markdown. This would continue to break @msimecek :( but it matches the decision Teams has made with Hero Cards.~

Revert the previous fix of rendering Hero Cards with Markdown, and render all 3 (text, title, subtitle) and plain text in 4.5
- Eventually after #1259 is implemented Hero Cards would be built to only use plain text.
In #1259, add a defaultStyleOptions param where the user can indicate whether Hero Cards (and others') text field should be rendered in Markdown or Plain text. This would give the user the most flexibility.

There's also a bit of mix and match available with these options. I'll report back when the team has discussed it more. :) Please feel free to add thoughts.

cwhitten commented 5 years ago

We'd like to chat with the Adaptive Cards team about addressing this upstream of WebChat.

corinagum commented 3 years ago

Assigning to @Kaiqb for visibility.

microsoft / BotFramework-WebChat