您的位置: 首页  >  技术问答  >  使用 Microsoft Bot Framework 时如何使用 CSS 设置聊天窗口的样式

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

分类: 技术问答 • 2022-03-06 16:55:02

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

问题描述：

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

I have created a simple Chat bot through the use of Microsoft Q&A maker and deployment to azure. Out of the box, the bot has its own default style.

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

I want to be able to edit the look and feel of the chat window, possibly using CSS. I have found a couple of questions here but they do not give the complete answer I am looking for. I have done some research and found information at these URLs:

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

上面的第一个链接在样式"的标题下给出了这个解释:

The first link above gives this explanation under the heading of 'Styling':

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

"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 ."

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

I do not fully understand how these files are connected to my project. I also do not know how to implement the techniques outlined above. I cannot find a specific set of steps to take to change the style of the chat window. Hopefully someone can explain in detail how I can use the techniques above (or that they know already) to change my bot styles.

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

If anyone knows the most straight forward method to style the Microsoft Bot chat window, or could point me in the right direction, that would be great!

答

现在怎么样了?

我不完全理解这些文件是如何连接到我的项目:假设您正在使用 iframe 实现，这意味着您使用的是编译版本的您找到的源代码.

How is it working now?

I do not fully understand how these files are connected to my project: assuming that you are using iframe implementation, it means that you are using the compiled version of the source code you found.

如果您查看 iframe 内容(对 URL 执行 GET)，则如下所示:

If you have a look to the iframe content (doing a GET on the URL), it looks like the following:

<!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 项目编译的文件.

So as you can see, it is referencing a css file, the one compiled by the GitHub project.

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

On your side, you can edit this css, edit it, and use the same implementation as above but replace the css link to yours.

相关推荐