首页 文章

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

提问于
浏览 次
2

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

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

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

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

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

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

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

c# css azure bots botframework

2 回答

  • 3

    现在怎么样？

    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>

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

    如何添加自定义CSS？

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

    回复于
  • 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架构

    • 要处理Redux操作的异步副作用， Chat 使用 Epic 来自redux-observable - 这是video introduction

    • 底层 redux-observable （以及DirectLineJS）是 RxJS 库，它实现了用于争用异步的Observable模式 . 掌握 RxJS 是了解WebChat管道的关键 .

    构建WebChat

    • 克隆（或分叉）这个回购

    • npm install

    • npm run build （构建每次更改 npm run watch ，构建 生产环境 npm run prepublish ）

    这构建了以下内容：

    从 /src/*.js - /built/BotChat.js 中的TypeScript源编译的

    • /built/*.js 是根
      TypeScript用户的

    • /built/*.d.ts 声明 - /built/BotChat.d.ts 是根

    • /built/*.js.map sourcemaps，以便于调试

    • /botchat.js 包含所有依赖项的Webpacked UMD文件（React，Redux，RxJS，polyfill等）

    • /botchat.css 基本样式表

    • /botchat-fullwindow.css 媒体查询样式表，实现全窗体验

    回复于

相关问题