C# 使用Microsoft Bot Framework时如何使用CSS设置聊天窗口样式_C#_Css_Azure_Bots_Botframework

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

c# css azure bots botframework

C# 使用Microsoft Bot Framework时如何使用CSS设置聊天窗口样式,c#,css,azure,bots,botframework,C#,Css,Azure,Bots,Botframework,通过使用Microsoft Q&a maker并部署到azure，我创建了一个简单的聊天机器人。开箱即用，机器人有自己的默认样式我希望能够编辑聊天窗口的外观和感觉，可能使用CSS。我在这里发现了几个问题，但它们没有给出我想要的完整答案。我做了一些研究，在以下网址上找到了信息：上面的第一个链接在“样式”标题下给出了这一解释： “在/src/scss/文件夹中，您将找到用于生成/botchat.css的源文件。在进行更改后，请运行npm运行build css进行编译。对于基本品牌，请更改co

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

我希望能够编辑聊天窗口的外观和感觉，可能使用CSS。我在这里发现了几个问题，但它们没有给出我想要的完整答案。我做了一些研究，在以下网址上找到了信息：

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

“在

/src/scss/

文件夹中，您将找到用于生成

/botchat.css

的源文件。在进行更改后，请运行npm运行build css进行编译。对于基本品牌，请更改

colors.scss

以匹配您的配色方案。对于高级样式，请更改

botchat.scss

”

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

如果有人知道最直接的方法来设计微软机器人聊天窗口，或者可以为我指出正确的方向，那就太好了

现在怎么样？

我不完全理解这些文件是如何连接到我的项目的

：假设您使用的是

iframe

实现，这意味着您使用的是找到的源代码的编译版本

如果查看

iframe

内容（对URL进行访问），它看起来如下所示：

<!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>


粘虫
html，正文{
身高：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
var模型={
“userId”：“demo1234”，
“用户名”：“您”，
“botId”：“MyBotId”，
“botIconUrl”：“//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png”，
“botName”：“MyBotId”，
“秘密”：“我的秘密”，
“iconUrl”：“//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png”，
“directLineUrl”：https://webchat.botframework.com/v3/directline",
“webSocketEnabled”：“false”
};
BotChat.App({
直拨电话：{
秘密：model.secret，
令牌：model.token，
域：model.directLineUrl，
webSocket:错误
},
用户：{id:model.userId，name:model.userName}，
bot:{id:model.botId，name:model.botName}，
调整大小：“窗口”
}，document.getElementById（“BotChatElement”）；

如您所见，它引用了一个css文件，由GitHub项目编译的文件

如何添加自定义css？在您这边，您可以编辑这个css，编辑它，并使用与上面相同的实现，但替换到您的css链接。

它现在如何工作？

我不完全理解这些文件是如何连接到我的项目的

：假设您使用的是

iframe

实现，这意味着您使用的是找到的源代码的编译版本

如果查看

iframe

内容（对URL进行访问），它看起来如下所示：

<!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>


粘虫
html，正文{
身高：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
var模型={
“userId”：“demo1234”，
“用户名”：“您”，
“botId”：“MyBotId”，
“botIconUrl”：“//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png”，
“botName”：“MyBotId”，
“秘密”：“我的秘密”，
“iconUrl”：“//bot-framework.azureedge.net/bot-icons-v1/bot-framework-default-8.png”，
“directLineUrl”：https://webchat.botframework.com/v3/directline",
“webSocketEnabled”：“false”
};
BotChat.App({
直拨电话：{
秘密：model.secret，
令牌：model.token，
域：model.directLineUrl，
webSocket:错误
},
用户：{id:model.userId，name:model.userName}，
bot:{id:model.botId，name:model.botName}，
调整大小：“窗口”
}，document.getElementById（“BotChatElement”）；

如您所见，它引用了一个css文件，由GitHub项目编译的文件

如何添加自定义css？

在您这边，您可以编辑此css，对其进行编辑，并使用与上述相同的实现，但要替换指向您的css链接。

要自定义WebChat模块，请转到存储库并分叉，然后您可以添加自己的css自定义项并部署自己的自定义主题聊天界面。您可以在此处找到样式选项：

定制WebChat 造型在

/src/scss/

文件夹中，您将找到用于生成

/botchat.css

的源文件。更改后，运行

npm运行build css

进行编译。对于基本品牌，请更改

colors.scss

以匹配您的配色方案。对于高级样式，请更改

botchat.scss

卡尺寸/响应性 WebChat尽可能采用响应性设计。作为其中的一部分，WebChat卡有3种尺寸：窄（216px）、普通（320px）