botframework web chat V4 build and generate custom CSS and JS File

问题

I've cloned the repository from https://github.com/microsoft/BotFramework-WebChat and was able to build the project after some changes with the below npm command

npm run build

However, this build has not generated the botchat.css and botchat.js files that the earlier versions of web chat used to generate. The reason for my custom build is that I need to be able to display HTML formatting on the web chat. Any steps on how to get the .css and .js files would be really helpful.

回答1:

Web Chat no longer generates custom CSS files from the build. I would recommend looking at the Web Chat v3 to v4 Migration Sample and Web Chat's other customization samples - specifically the Custom Branding Styling sample.

回答2:

Suggestions from @tdurnford on WebChat repo worked out well. Giving the final html code below:

<!DOCTYPE html>
<html>

<head>
    <style>
        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <script>
    </script>
</head>

<body>
    <div id="webchat" role="main"></div>
    <script>	
        // const markdownIt = new MarkdownIt({ html: true, linkify: true, typographer: true });
        const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });
        window.WebChat.renderWebChat(
            {
                username: username,
                userID: userid,
                locale: 'en-US',
                directLine: window.WebChat.createDirectLine({
                    secret: [YOUR_SECRET],
                }),
                renderMarkdown: markdownIt.render.bind(markdownIt),
                styleOptions: {     
                    bubbleMaxWidth: 1200,               
                    botAvatarInitials: 'M',                
                    userAvatarInitials: 'V',  
                }
                // Passing 'styleOptions' when rendering Web Chat

            },
            document.getElementById('webchat')
        );
    </script>
</body>

</html>

Setting the markdown renderer with html:true is the the key here.

const markdownIt = window.markdownit({ html: true, linkify: true, typographer: true });

来源：https://stackoverflow.com/questions/57387730/botframework-web-chat-v4-build-and-generate-custom-css-and-js-file

标签

azure

botframework

luis

direct-line-botframework