使用Microsoft Bot Framework时如何使用CSS设置聊天窗口样式
我通过使用Microsoft Q& A制造商并部署到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-WebChat https://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!
现在如何工作?
I do not fully understand how these files are connected to my project:假设您正在使用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.