botframework 网络聊天 V4 构建和生成自定义 CSS 和 JS 文件答案

【问题标题】：botframework web chat V4 build and generate custom CSS and JS Filebotframework 网络聊天 V4 构建和生成自定义 CSS 和 JS 文件
【发布时间】：2019-08-07 05:51:04
【问题描述】：

我已经从 https://github.com/microsoft/BotFramework-WebChat 克隆了存储库，并且在使用以下 npm 命令进行了一些更改后能够构建项目

npm 运行构建

但是，此版本没有生成早期版本的网络聊天用来生成的 botchat.css 和 botchat.js 文件。我自定义构建的原因是我需要能够在网络聊天中显示 HTML 格式。任何有关如何获取 .css 和 .js 文件的步骤都会非常有帮助。

【问题讨论】：

将解决方案标记为已接受服务于更大的 Stack Overflow 社区和任何有类似问题的人。如果您觉得我的回答足够，请“接受”它。如果没有，请告诉我我还能提供哪些帮助！

标签： azure botframework azure-language-understanding direct-line-botframework

【解决方案1】：

@tdurnford 在 WebChat repo 上的建议效果很好。下面给出最终的html代码：

<!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>

使用 html:true 设置 markdown 渲染器是这里的关键。

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

【讨论】：

【解决方案2】：

网络聊天不再从构建中生成自定义 CSS 文件。我建议查看 Web Chat v3 到 v4 Migration Sample 和 Web Chat 的其他自定义示例 - 特别是 Custom Branding Styling 示例。

【讨论】：

看我们的讨论去这里github.com/microsoft/BotFramework-WebChat/issues/2289