Botframework-webchat: Markdown rendering not working in Adaptive Cards in local build

[arashberlin]

Hi there,

I am working on a customized version of the Web-Chat [Title, color & logo].

Adaptive Cards with Markdown Url do not render correct, when I use the code and build myself and use the botchat.js

This how do I build [as describen in the readme]:

I downloaded the 0.13.1 version
npm install
npm run build

and copy the botchat.js to my destition folder

When I use the botchat.js CDN the Markdown render correct

Here my HTML Setup:

Here the result:

with local botchat.js

botchat.js CDN

Any idea how can I fix the issue? Is this a bug?

Many Thanks

[JasonSowers]

relates to https://github.com/Microsoft/BotFramework-Emulator/issues/480 @eanders-MS or @compulim might this be the same issue?

[mchuck]

Also relates to #949

[danmarshall]

Can you provide the markdown that is causing the bug?

[arashberlin]

Hi @danmarshall thank you for the response. Many thanks to help me.

Is this a bug in Adapative Card?, because I get the issue now in the emulator, or has my code an issue?
:(

Markdown for Url is like this:

This is the methode how I create the Adapative Card:
`
public static Attachment GetAdapativeCard(string Title, string Abstract, List Actions, string Subtitle, string Url = null, string ImageUrl = null)
{

        AdaptiveCard card = new AdaptiveCard();

        // Specify speech for the card.  
        card.Speak = $"<s>{Title}</s>";

        if (Actions != null)
        {
            card.Actions = Actions;
        }


        if (ImageUrl != null)
        {
            card.Body.Add(new AdaptiveImage()
            {
                Url = new Uri(ImageUrl),
                Size = AdaptiveImageSize.Stretch,
                Style = AdaptiveImageStyle.Default,
                AltText = "Image",
                HorizontalAlignment = AdaptiveHorizontalAlignment.Left,
                SelectAction = new AdaptiveOpenUrlAction()
                {
                    Url = Url != null ? new Uri(Url) : new Uri(ImageUrl)
                }

            });
        }


        card.Body.Add(new AdaptiveTextBlock()
        {
            Text = Url != null ? $"[{Title}]({Url})" : Title,
            Size = AdaptiveTextSize.Large,
            Weight = AdaptiveTextWeight.Bolder
        });

        if (Subtitle != null)
        {
            card.Body.Add(new AdaptiveTextBlock()
            {
                Text = Subtitle,
                IsSubtle = true,
                Separator = true
            });
        }


        card.Body.Add(new AdaptiveTextBlock()
        {
            Text = Abstract
        });



        // Create the attachment with adapative card.  
        Attachment attachment = new Attachment()
        {
            ContentType = AdaptiveCard.ContentType,
            Content = card
        };
        return attachment;
    }

`

[arashberlin]

Is this related to our issue?
https://github.com/Microsoft/AdaptiveCards/issues/1421

I got it done by adding markdown-it.js before my custom botchat.js

<script type="text/javascript" src="https://unpkg.com/markdown-it/dist/markdown-it.js"></script> <script src="dist/botchat.js"></script>

and now the Markdown is rendering.

MS should change the documentation because this is a breaking change

[compulim]

Note to fixer: in order to use Markdown in Adaptive Cards, user need to load markdown-it.js.

[amirt-microsoft]

Is there any updates on this issue @danmarshall ?

The solution suggested by @arashberlin is not applicable for me because I have customer's html pointing to my build of botchat.js, that should support markdown.

I see that when I'm using:
https://cdn.botframework.com/botframework-webchat/latest/botchat.js
markdown rendering is working fine for cards, while my own build from the latest master branch doesn't.
Can you explain why it's different?

Thanks!

[compulim]

@amirt-microsoft This is interesting. The build we publish to NPM and CDN use the source code from GitHub and built on Travis CI. It should as good as the build you built on your box.

Can you attach a minimal repro of your Adaptive Cards JSON so I can repro it?

[compulim]

@amirt-microsoft Is it dupe of #949?

[amirt-microsoft]

1. @compulim , yes, this is indeed a duplicate of #949

2. @compulim attaching a json for you to try:
   adaptiveCard.txt

3. @compulim , can you share your build process definition for me to compare?

[compulim]

For build process, look at .travis.yml. It is as simple as:

Make sure you are on Node 9, we will bump to Node 10 when we bump Sass.

npm install
npm run install-test
npm run build
npm run build-test

You can look at the latest build log on Travis CI. Although it build on Linux, I always build on Windows.

[amirt-microsoft]

Hi @compulim ,
The issue has escalated.
now after you have released 0.14, and updated the build, it's also not rendering markdown in cards using the link below:
https://cdn.botframework.com/botframework-webchat/latest/botchat.js

so now both local and using your latest build is not working.

This is a blocker for our team, Is anyone looking into this issue?

Thanks

[compulim]

Will fix in PR #1034. Since we bundled Markdown-It in Web Chat already, we will expose it to window.markdownit so Adaptive Cards can use it.

[amirt-microsoft]

Thanks @compulim !
looking forward to get a new release with the fix

[amirt-microsoft]

Hi @compulim, the pull request has been open for 3 weeks now. are you going to complete it anytime soon?
are you going to issue a new release anytime soon?
Thanks!

[compulim]

@amirt-microsoft Sorry can't make it sooner, waiting for people to review my PR. I just pinged and added a few, hope it will speed up the PR. 😓

[amirt-microsoft]

Thanks @compulim

[compulim]

Web Chat 0.14.1 is out with the fix #1034.