Question

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

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

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

上面的第一个链接在＆＃39; Styling＆＃39;：

的标题下给出了这个解释

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

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

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

Answer 1

现在怎么样？

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

如果您查看iframe内容（在网址上执行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链接替换为您的。

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实现不是全窗体验，则可以通过将CSS类wc-narrow和wc-wide添加到包含聊天的HTML元素来手动调用卡片大小。

字符串

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

将一个或多个区域设置（包含关联的本地化字符串）添加到localizedStrings
添加逻辑以将请求的区域设置映射到strings
请提交pull request。

行为

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

建筑

Chat是顶级React组件
App创建的React应用程序仅由Chat
Chat主要遵循this video series
要处理Redux操作的异步副作用，Chat使用redux-observable中的Epic - 这里是video introduction
底层redux-observable（以及DirectLineJS）是RxJS库，它实现了争用异步的Observable模式。对RxJS的最小掌握是理解WebChat管道的关键。

构建WebChat

克隆（或分叉）此回购
npm install
npm run build（构建每次更改npm run watch，构建作品npm run prepublish）

这构建了以下内容：

/built/*.js

/src/*.js

/built/BotChat.js是根
/built/*.d.ts声明 - /built/BotChat.d.ts是根
/built/*.js.map源图以便于调试
/botchat.js包含所有依赖项的Webpacked UMD文件（React，Redux，RxJS，polyfills等）
/botchat.css base stylesheet
/botchat-fullwindow.css媒体查询样式表

如何在使用Microsoft Bot Framework

2 个答案:

现在怎么样？

如何添加自定义CSS？

自定义WebChat

定型

字符串

行为

建筑

构建WebChat