【发布时间】：2019-05-22 08:41:37
【问题描述】：
通过否决 BotFramework 网络聊天客户端的 defaultStyleOptions.js，我正在自定义客户端。这对于一个部分来说很好。将鼠标悬停在自适应卡片操作上或悬停发送按钮时，我无法修改焦点颜色（见附图）我尝试否决不同的有意义但没有成功的属性。帮助表示赞赏。
我尝试修改以下属性： 默认重音和默认细微 卡片强调背景颜色 sendBoxButtonColorOnFocus sendBoxButtonColorOnHover
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it-emoji/1.4.0/markdown-it-emoji.js"></script>
<body>
<div id="webchat" role="main"></div>
<script>
// make sure the chat initializes at page load by sending a 'webchat join' event
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
// add markdown support including Emoji
var markdownIt = window.markdownit();
markdownIt = window.markdownit().use(window.markdownitEmoji);
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token: webChatToken}),
renderMarkdown: markdownIt.render.bind(markdownIt),
store,
// styling
styleOptions: {
rootHeight: '755px',
rootWidth: 'Auto',
backgroundColor: 'White',
bubbleBorder: 'solid 1px Light Blue',
bubbleTextColor: '#0D0D0D',
avatarSize: 50,
botAvatarImage: 'https://botz4u.com/src/assets/img/png/botz4uavatar.png',
botAvatarInitials: 'BOT',
userAvatarInitials: 'JIJ',
bubbleFromUserBorder: 'solid 1px Light Blue',
bubbleFromUserTextColor: '#0D0D0D',
hideUploadButton: true,
sendBoxBorderTop: 'solid 1px #0A9BFB',
sendBoxBorderBottom: 'solid 1px #0A9BFB',
},
userID: 'N/A',
username: 'Web Chat User',
locale: 'nl-NL'
}, document.getElementById('webchat'));
</script>
</body>
</html>
标题中使用的自适应卡片定义：
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"spacing": "none",
"size": "medium",
"weight": "bolder",
"text": "Welkom!"
},
{
"type": "Image",
"horizontalAlignment": "Left",
"url": "<link to logo>",
"size": "Stretch"
},
{
"type": "TextBlock",
"spacing": "medium",
"size": "medium",
"color": "Dark",
"text": "some text"
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "some text",
"wrap": true
}
]
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Wat is een chatbot?",
"data": "Wat is een chatbot"
},
{
"type": "Action.Submit",
"title": "Waarom een chatbot?",
"data": "Waarom een chatbot"
},
{
"type": "Action.Submit",
"title": "Wat kost een chatbot?",
"data": "Wat kost het"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
以及向用户显示自适应卡片的机器人代码（在标题中是介绍卡：
if (qnaResults[0] && qnaResults[0].score > 0.5) {
if (qnaResults[0].answer === '#Weather') {
var weerVoorspelling = await helper.getWeatherForecast(turnContext);
await turnContext.sendActivity('Als je bedoelt dat je een weerbericht wilt, bij deze ....');
await turnContext.sendActivity({
attachments: [CardFactory.adaptiveCard(weerVoorspelling)]
});
} else if (qnaResults[0].answer === '#DateTime') {
await turnContext.sendActivity(moment().tz('Europe/Amsterdam').format('[Vandaag is het ]LL[ en de tijd is ] LT[ uur.]'));
} else if (qnaResults[0].answer === '#Help') {
await turnContext.sendActivity({
attachments: [CardFactory.adaptiveCard(IntroCard)]
});
} else {
await turnContext.sendActivity(qnaResults[0].answer);
}
// If QnaMaker did not find an answer, offer help
}
【问题讨论】：
-
我不确定您要达到什么目的：当我使用您提到的值
sendBoxButtonColorOnHover时，它不起作用，我成功地获得了导航时放置的颜色变量我的鼠标悬停在按钮徽标上 -
谢谢尼古拉斯。那个确实适用于按钮。我想改变的是当我悬停按钮时出现的按钮周围的正方形。我不知道那是什么。
-
好的。对于你所说的建议操作，你确定是建议操作吗？看起来像您捕获的提示选项
-
你当然是对的。实际上，来自自适应卡的操作转化为提示选项（我猜）。应该更精确。
-
您能否添加一个生成这些项目的机器人代码示例？
标签： css botframework