gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:38:39 25 4
gpt4 key购买 nike

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

npm run build

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

最佳答案

@tdurnford 对 WebChat 存储库的建议效果很好。最终的html代码如下:

<!DOCTYPE html>
<html>

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

body {
margin: 0;
}

#webchat {
height: 100%;
width: 100%;
}
</style>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b161a09101f140c1556120f3b43554f5549" rel="noreferrer noopener nofollow">[email protected]</a>/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 });

关于azure - botframework 网络聊天 V4 构建并生成自定义 CSS 和 JS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57387730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com