我通过使用 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 聊天窗口样式的最直接方法，或者可以为我指明正确的方向，那就太好了!
最佳答案
现在运行得怎么样？
我不完全理解这些文件是如何连接到我的元素的:假设您使用的是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 链接替换为您的。
关于c# - 使用 Microsoft Bot Framework 时如何使用 CSS 设置聊天窗口的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46430092/