我已经从 https://github.com/microsoft/BotFramework-WebChat 克隆了存储库，并且能够在使用以下 npm 命令进行一些更改后构建项目
npm 运行构建
但是，此版本尚未生成早期版本的网络聊天用于生成的 botchat.css 和 botchat.js 文件。自定义构建的原因是我需要能够在网络聊天中显示 HTML 格式。有关如何获取.css和.js文件的任何步骤都将非常有帮助。
来自 WebChat repo 上@tdurnford的建议效果很好。给出下面的最终 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 }(;
网上聊天不再从构建中生成自定义 CSS 文件。我建议查看网上聊天 v3 到 v4 迁移示例和网上聊天的其他自定义示例 - 特别是自定义品牌样式示例。