个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
通过否决 BotFramework 网络聊天客户端的 defaultStyleOptions.js，我正在自定义客户端。这对一部分来说效果很好。将鼠标悬停在自适应卡片操作上或悬停发送按钮时，我无法修改焦点颜色(见附图)我尝试否决有意义但没有成功的不同属性。感谢帮助。
我尝试修改以下属性:默认重音和默认微妙卡片强调背景颜色sendBoxButtonColorOnFocussendBoxButtonColorOnHover
<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"
和向用户显示自适应卡的机器人代码(在标题中它是 introcard:
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
}
我希望能够修改上面提到的颜色。 
最佳答案
您可以查看 Webchat 源中的可用变量，特别是 here .
对于sendButton，您还可以查看SendBoxButton.js 文件here :
sendBoxButtonColorOnHover 可以很好地设置悬停时 SVG 的颜色对于您的自适应卡片按钮，来源是here .如您所见，它目前未使用 hover。
关于自定义样式的需求，你应该看看this Github 上的页面讨论了您应该如何处理 defaultStyleOptions 中不可用的字段。
简而言之:
关于css - 在 Botframework Webchat 中，如何在悬停自适应卡片操作和发送按钮时自定义颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56252681/
27
4
0
有没有办法将 Onchange 事件添加到网络聊天(版本 V4)中呈现的自适应卡片输入字段中。在结帐屏幕中更改数量值(数字类型的自适应卡输入字段)的示例应更新总计值(自适应卡文本字段) 为了保持简单.
有没有办法将 Onchange 事件添加到网络聊天(版本 V4)中呈现的自适应卡片输入字段中。在结帐屏幕中更改数量值(数字类型的自适应卡输入字段)的示例应更新总计值(自适应卡文本字段) 为了保持简单.
我使用 Microsoft Bot Framework 开发了一个聊天机器人，并通过 DirectLine 将其包含在我的网站中: BotChat.App({
我想换聊天头像，还有bot的头像，但是设置背景图不行 var styleSet = window.WebChat.createStyleSet({ backgroundColor: '#f3f
我正在使用自定义的 Microsoft Bot 框架 WebChat Client .当我的机器人无法为用户提供解决方案时，它能够与代理进行实时聊天服务。 我需要允许代理“先睹为快”当前正在输入 We
我正在使用 microsoft/BotFramework-WebChat ，但我无法正确滚动它。 通常当机器人响应时，用户被迫手动滚动到聊天记录的底部。 我找不到任何关于钩子(Hook)的文档，可以让
我正在尝试将此网络聊天小部件连接到 rasa ( https://github.com/mrbot-ai/rasa-webchat )，但我得到了这个 error在我的控制台中，还有这个 error在
我正在使用 Microsoft 的 C# Bot 框架开发一个机器人。在他/她发送任何内容之前，我试图向用户发送一条欢迎消息作为介绍。 经过研究，我使用 HandleSystemMessage 函数并
我有一个机器人，当使用模拟器时可以在本地运行，但如果我尝试使用 WebChat 或 Skype。它只能以一种方式工作(也就是说，请求来自网络聊天和 Skype，但不会返回给它们)。我的代码更复杂，但当
var response = MessageFactory.Attachment(new Attachment { Name = @"application.png", Conte
我需要维护聊天历史记录，并在页面刷新或关闭并打开窗口后将它们加载回窗口中。 问题:按钮/轮播/自适应卡/英雄卡事件/属性未加载(即，当我单击按钮或任何事件时，操作未发生)。描述:为了达到要求，我有两个
所以，我正在按照教程 here 进行操作关于如何设置 Twilio Flex WebChat。虽然它确实有效，但我稍后需要更改友好名称。 我的应用程序的工作方式是，它在用户登录之前显示网络聊天，因为脚
我们的网站上有一个网络聊天窗口，可以最小化/重新打开(这会保留相同的 token ，如果仍然有效)或关闭/重新打开(这确保我们检索新的 token )。当我们向机器人发送特定事件时，我们的机器人应该向
我正在努力实现网络聊天，并提出了一个我希望可以轻松解决的问题。 如何更改发件人/收件人的颜色以区分它们？我试图将颜色保存到我的数据库中，但问题是我如何确定我是发送者，接收者的颜色需要不同。 这就是我实
通过否决 BotFramework 网络聊天客户端的 defaultStyleOptions.js，我正在自定义客户端。这对一部分来说效果很好。将鼠标悬停在自适应卡片操作上或悬停发送按钮时，我无法修改
我在 Node.js 中使用 botbuilder 创建了一个简单的聊天机器人。由于给定的环境，我通过自定义 iframe 包含了聊天机器人。前端是带有 DirectLine 的 WebChat。如何
我需要帮助使用来自 Microsoft 的 BotFramework 的 webchat v4 通过 Javascript 将消息发送回机器人。 我的机器人代码是用 C# (.NET Framewor
我正在尝试发送以下消息 this指南，但我得到 403。该机器人使用 Web App Bot 模板部署在 Azure 上。 我获得了不记名 token curl -X POST \ https:/
按照我能找到的与网络聊天和直线相关的所有 MS 指南，但无论我从 botchat.js 尝试什么，我都会不断收到以下错误: Object doesn't support property or met
我正在尝试将表情符号添加到机器人的网络聊天响应中。我试过 Markdown ，但这似乎不起作用。在 WebChat 的响应中包含表情符号的最佳方式是什么？ 最佳答案 要使用表情符号，您可以使用 Uni
我是一名优秀的程序员,十分优秀！