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

Question

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

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

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

上面第一个link在'Styling'的标题下给出了这个解释：

"In the /src/scss/ folder you will find the source files for generating /botchat.css . Run npm run build-css to compile once you've made your changes. For basic branding, change colors.scss to match your color scheme. For advanced styling, change botchat.scss ."

我不完全理解这些文件是如何连接到我的项目的。我也不知道如何实施上述技术。我找不到一组特定的步骤来改变聊天的风格 window。希望有人能详细解释我如何使用上面的技术（或他们已经知道的）来改变我的 bot 样式。

如果有人知道设置 Microsoft Bot 聊天样式的最直接方法 window，或者能为我指明正确的方向，那就太好了！

Answer 1

现在效果如何？

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>MyBotId</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
        <link href="/css/adaptive/botchat.css" rel="stylesheet" />
        <link href="/css/adaptive/botchat-fullwindow.css" rel="stylesheet" />
    </head>
    <body>
        <div id="BotChatElement"></div>
        <script src="/scripts/adaptive/botchat.js"></script>
        <script>
            var model = {
                 "userId": "demo1234",
                 "userName": "You",
                 "botId": "MyBotId",
                 "botIconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
                 "botName": "MyBotId",
                 "secret": "mySecret",
                 "iconUrl": "//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png",
                 "directLineUrl": "https://webchat.botframework.com/v3/directline",
                 "webSocketEnabled": "false"
            };
        </script>
        <script>
        BotChat.App({
            directLine: {
                secret: model.secret,
                token: model.token,
                domain: model.directLineUrl,
                webSocket: false
            },
            user: { id: model.userId, name: model.userName },
            bot: { id: model.botId, name: model.botName },
            resize: 'window'
        }, document.getElementById("BotChatElement"));

    </script>
    </body>
</html>

如您所见，它引用了 css 文件，该文件由 GitHub 项目编译。

如何添加自定义 css？

在你这边，你可以编辑这个 css，编辑它，然后使用与上面相同的实现，但将 css link 替换为你的。

Answer 2

要自定义 WebChat 模块，请转到 https://github.com/Microsoft/BotFramework-WebChat and fork the repository, then you can add your own CSS customizations and deploy your own custom themed chat interface. You will find the styling options here: https://github.com/Microsoft/BotFramework-WebChat/tree/master/src/scss

自定义网络聊天

造型

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

卡片尺寸/响应度

WebChat 尽可能使用响应式设计。作为其中的一部分，WebChat 卡片有 3 种尺寸：窄型 (216px)、正常 (320px) 和宽型 (416px)。在完整的 window 聊天中，这些尺寸由 CSS 媒体查询以 /botchat-fullwindow.css 样式 sheet 调用。您可以为您自己的应用程序中的媒体查询断点自定义此样式 sheet。或者，如果您的 WebChat 实现不是完整的 window 体验，您可以通过将 CSS 类 wc-narrow 和 wc-wide 添加到HTML 包含您聊天的元素。

字符串

您可以在 /src/Strings.ts:

中更改或添加本地化字符串

向 localizedStrings
添加逻辑以将请求的区域设置映射到 strings
请通过提交 pull request 来帮助社区。

行为

行为自定义将需要更改 /src 中的 TypeScript 文件。 WebChat 体系结构的完整描述超出了本文档的范围，但这里有一些入门：

建筑

Chat 是顶级 React 组件
App 创建一个仅包含 Chat
Chat 很大程度上遵循 this video series
为了处理 Redux 操作的异步副作用，Chat 使用了 redux-observable - here's a video introduction

Epic

底层 redux-observable（以及 DirectLineJS）是 RxJS 库，它实现了用于处理异步的 Observable 模式。对 RxJS 的最低限度掌握是理解 WebChat 管道的关键。

建立网络聊天

克隆（或 fork）这个 repo
npm install
npm run build（在每次更改的基础上构建 npm run watch，构建生产环境 npm run prepublish）

这构建了以下内容：

/built/*.js 从 /src/*.js 中的 TypeScript 源代码编译 - /built/BotChat.js 是根
/built/*.d.ts TypeScript 用户的声明 - /built/BotChat.d.ts 是根
/built/*.js.map 便于调试的源映射
/botchat.js 包含所有依赖项（React、Redux、RxJS、polyfills 等）的 webpacked UMD 文件
/botchat.css 基本样式sheet
/botchat-fullwindow.css 媒体查询样式sheet 以获得完整的window 体验

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

How to style chat window using CSS when using Microsoft Bot Framework

css

c#

bots

azure

botframework

现在效果如何？

如何添加自定义 css？

自定义网络聊天

造型

字符串

行为

建筑

建立网络聊天