【问题标题】:How to style chat window using CSS when using Microsoft Bot Framework使用 Microsoft Bot Framework 时如何使用 CSS 设置聊天窗口的样式
【发布时间】:2018-03-07 21:24:37
【问题描述】:

我通过使用 Microsoft Q&A maker 和部署到 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 聊天窗口样式的最直接方法,或者可以为我指明正确的方向,那就太好了!

【问题讨论】:

    标签: c# css azure bots botframework


    【解决方案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 链接替换为您的。

    【讨论】:

    • 感谢您的回复。我仍然难以更改聊天窗口样式。从您所说的来看,似乎可以使用我自己的自定义样式并保存它们。然后替换css链接代码。虽然问题是我不知道如何编辑你上面给出的 HTML 文件并添加我自己的自定义 css。因为我不确定它来自哪里?
    • 您只需要创建您自己的采用相同结构的 HTML 文件。或者,如果您的网络聊天包含在页面中,请添加样式、链接和脚本部分
    • 好东西。我现在可以随心所欲地设置机器人的样式。但现在的一个问题是 Bot 无法正常运行?当我输入要发送的消息时,我实际上无法提交文本。知道为什么会发生这种情况/问题的解决方法吗?
    • 因为我不知道你到底做了什么,所以很难弄清楚问题
    • 我得到了我的机器人的相关 HTML(您在答案中提供的代码部分有所帮助)。然后,我将其保存在本地自己的文件中,并在 &lt;iframe&gt; 标签中引用了该文件。我可以编辑颜色/样式等。但我现在无法提交和接收消息。我想这与我拥有的原始 HTML 有关(类似于你上面的回答)。但是在 GET 之后我没有对我自己的进行任何更改。你对我能做什么有什么想法吗? PS - 非常感谢到目前为止的帮助!
    【解决方案2】:

    要自定义 WebChat 模块,请前往 https://github.com/Microsoft/BotFramework-WebChat 并分叉存储库,然后您可以添加自己的 CSS 自定义项并部署自己的自定义主题聊天界面。您可以在此处找到样式选项: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 种尺寸:窄 (216 像素)、普通 (320 像素) 和宽 (416 像素)。在全窗口聊天中,这些大小由/botchat-fullwindow.css 样式表中的 CSS 媒体查询调用。您可以为您自己的应用程序中的媒体查询断点自定义此样式表。或者,如果您的 WebChat 实现不是全窗口体验,您可以通过将 CSS 类 wc-narrow 和 wc-wide 添加到包含您的聊天的 HTML 元素来手动调用卡片大小。

    字符串

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

    • 向localizedStrings 添加一个或多个区域设置(以及相关的本地化字符串)
    • 添加逻辑以将请求的语言环境映射到strings 中支持的语言环境
    • 请提交pull request 为社区提供帮助。

    行为

    行为自定义需要更改 /src 中的 TypeScript 文件。 WebChat 架构的完整描述超出了本文档的范围,但这里有一些开始:

    架构

    • Chat 是顶级 React 组件
    • App 创建一个仅包含 Chat 的 React 应用程序
    • Chat 很大程度上遵循 this video series 中列出的 Redux 架构
    • 为了处理 Redux 操作的异步副作用,Chat 使用来自redux-observable 的Epic - 这是一个video introduction
    • redux-observable(以及DirectLineJS)的基础是RxJS 库,它实现了可观察的异步模式。对RxJS 的最低限度掌握是了解 WebChat 管道的关键。

    构建网络聊天

    1. 克隆(或分叉)此存储库
    2. npm install
    3. 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 sourcemaps 方便调试
    • /botchat.js 包含所有依赖项(React、Redux、RxJS、polyfills 等)的 webpacked UMD 文件
    • /botchat.css 基本样式表
    • /botchat-fullwindow.css 媒体查询样式表提供全窗口体验

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-11-18
      • 1970-01-01
      • 2023-03-25
      • 1970-01-01
      • 2017-05-09
      • 1970-01-01
      • 2020-01-08
      相关资源
      最近更新 更多