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

Question

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

npm run build

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

Answer 1

网络聊天不再从构建中生成自定义 CSS 文件。我建议查看网络聊天 v3 到 v4 Migration Sample and Web Chat's other customization samples - specifically the Custom Branding Styling 示例。

Answer 2

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

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

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

azure

botframework

azure-language-understanding

direct-line-botframework