如何在使用Microsoft Bot Framework

时间:2017-07-19 09:18:50

标签: c# css azure bots botframework

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

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

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

上面的第一个链接在' Styling':

的标题下给出了这个解释

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

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

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

2 个答案:

答案 0 :(得分:3)

现在怎么样?

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链接替换为您的。

答案 1 :(得分: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-narrowwc-wide添加到包含聊天的HTML元素来手动调用卡片大小。

字符串

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

  • 将一个或多个区域设置(包含关联的本地化字符串)添加到localizedStrings
  • 添加逻辑以将请求的区域设置映射到strings
  • 中支持的区域设置
  • 请提交pull request
  • ,以帮助社区

行为

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

建筑

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

构建WebChat

  1. 克隆(或分叉)此回购
  2. npm install
  3. npm run build(构建每次更改npm run watch,构建作品npm run prepublish
  4. 这构建了以下内容:

      /built/*.js - /src/*.js中的TypeScript源编译的
    • /built/BotChat.js是根
    • 对于TypeScript用户的
    • /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媒体查询样式表