如何在使用Microsoft Bot Framework时使用CSS设置聊天窗口的样式

我通过使用Microsoft Q＆A制造商和部署到azure创建了一个简单的聊天机器人。 开箱即用，机器人有自己的默认样式。

我希望能够编辑聊天窗口的外观，可能使用CSS。 我在这里找到了几个问题，但他们没有给出我正在寻找的完整答案。 我做了一些研究，并在这些url上找到了相关信息：

https://github.com/Microsoft/BotFramework-WebChat https://github.com/Microsoft/BotBuilder/issues/202

上面的第一个链接在“样式”标题下给出了这个解释：

“在/src/scss/文件夹中，您将找到生成/botchat.css的源文件。运行npm run build-css进行编译后进行编译。对于基本品牌，更改colors.scss以匹配您的颜色对于高级样式，请更改botchat.scss 。“

我不完全了解这些文件如何连接到我的项目。 我也不知道如何实现上述技术。 我找不到一组特定的步骤来改变聊天窗口的样式。 希望有人可以详细解释我如何使用上述技术（或他们已经知道的）来改变我的机器人风格。

如果有人知道最简单的方法来设置Microsoft Bot聊天窗口的样式，或者可以指向正确的方向，那就太棒了！

Answer 1

现在怎么样？

I do not fully understand how these files are connected to my project ：假设您使用iframe实现，这意味着您使用的是您找到的源代码的编译版本。

如果您查看iframe内容（在URL上执行GET），它看起来如下所示：

正如您所看到的，它引用了一个由GitHub项目编译的css文件 。

---

如何添加自定义CSS？

在您这边，您可以编辑此css，编辑它，并使用与上面相同的实现，但将css链接替换为您的。

Answer 2

要自定义WebChat模块，请转到https://github.com/Microsoft/BotFramework-WebChat并分叉存储库，然后您可以添加自己的CSS自定义项并部署自己的自定义主题聊天界面。 你会在这里找到样式选项： https ： //github.com/Microsoft/BotFramework-WebChat/tree/master/src/scss

自定义WebChat

造型

在/src/scss/文件夹中，您将找到用于生成/botchat.css的源文件。 完成更改后，运行npm run build-css进行编译。 对于基本品牌，请更改colors.scss以匹配您的配色方案。 对于高级样式，请更改botchat.scss 。

卡片尺寸/响应性

WebChat尽可能使用响应式设计。 作为其中的一部分，WebChat卡有3种尺寸：窄（216px），普通（320px）和宽（416px）。 在全窗口聊天中，这些大小由/botchat-fullwindow.css样式表中的CSS媒体查询调用。 您可以为自己的应用程序中的媒体查询断点自定义此样式表。 或者，如果您的WebChat实现不是全窗体验，则可以通过将wc-narrow和wc-wide的CSS类添加到包含聊天的HTML元素来手动调用卡片大小。

字符串

您可以在/src/Strings.ts更改或添加本地化字符串：

• 将一个或多个语言环境（带有关联的本地化字符串）添加到localizedStrings
• 添加逻辑以将请求的区域设置映射到strings支持的区域设置
• 请通过提交拉取请求来帮助社区。

行为

行为自定义将需要更改/src的TypeScript文件。 WebChat体系结构的完整描述超出了本文档的范围，但以下是一些初学者：

建筑

• Chat是顶级的React组件
• App创建一个React应用程序，仅包含Chat
• Chat主要遵循本系列video中介绍的Redux架构
• 为了处理Redux操作的异步副作用， Chat使用了来自redux-observable的 Epic – 这是一个video介绍
• 底层的redux-observable （以及DirectLineJS ）是RxJS库，它实现了用于争用异步的Observable模式。 对RxJS的最小掌握是理解WebChat管道的关键。

构建WebChat

1. 克隆（或分叉）这个回购
2. npm install
3. npm run build （构建每次更改npm run watch ，构建生产npm run prepublish ）

这构建了以下内容：

• 从/built/*.js的TypeScript源编译的/src/*.js – /built/BotChat.js是根
• /built/*.d.ts对TypeScript用户的声明 – /built/BotChat.d.ts是根
• /built/*.js.map源图以便于调试
• /botchat.js包含所有依赖/botchat.js Webpacked UMD文件（React，Redux，RxJS，polyfill等）
• /botchat.css基本样式表
• /botchat-fullwindow.css媒体查询样式表，提供全窗体验