使用CSS自定义bot框架直接API [英] Customizing bot framework direct line API with css
本文介绍了使用CSS自定义bot框架直接API的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
</footer>
<!-- Footer -->
<!-- SCRIPTS -->
<script src="https://unpkg.com/botframework-webchat/botchat.js"></script>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 500px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: ' Secrete key here' },
user: { id: 'user' },
bot: { id: '' }
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '500px' ? '38px' : '500px';
};
});
}());
</script>
在用户单击之前，我希望这样的聊天图标位于我们页面的右下角
I want the chat icon like this at the bottom right corner of the we page before the user clicks
聊天会以这种方式弹出
我用机器人框架构建了一个机器人.我已使用直线API将漫游器添加到我的网站，并且该漫游器显示在我网站的右上角.我需要使用下载到我的应用程序文件中的botchat.css对其进行自定义，以自定义bot.我还需要在漫游器和用户发送的每条消息中添加一个圆形图像图标.请如何使用botchat.css文件实现此目的?
I Built a bot with bot framework. I have added the bot to my website using the direct line API and its appears by the right corner of my website. I need to customize it using the botchat.css in downloaded to my app file for customizing the bot. I also need to add a round image icon to each message the bot and user send. please how do I achieve this using the botchat.css file?
推荐答案
似乎您想动态扩展/折叠聊天机器人，并在每条消息中显示机器人图标.要满足您的要求，请参考以下步骤.
It seems that you’d like to dynamically expand/collapse your chat bot, and show bot icon with each message. To achieve your requirements, please refer to following steps.
1)通过修改History.tsx，构建自定义的WebChat以在每条消息中显示bot图标.
1)Build customized WebChat to show bot icon with each message by modifying History.tsx.
export class WrappedActivity extends React.Component<WrappedActivityProps, {}> {
public messageDiv: HTMLDivElement;
constructor(props: WrappedActivityProps) {
super(props);
}
render () {
let timeLine: JSX.Element;
switch (this.props.activity.id) {
case undefined:
timeLine = <span>{ this.props.format.strings.messageSending }</span>;
break;
case null:
timeLine = <span>{ this.props.format.strings.messageFailed }</span>;
break;
case "retry":
timeLine =
<span>
{ this.props.format.strings.messageFailed }
{ ' ' }
<a href="." onClick={ this.props.onClickRetry }>{ this.props.format.strings.messageRetry }</a>
</span>;
break;
default:
let sent: string;
if (this.props.showTimestamp)
sent = this.props.format.strings.timeSent.replace('%1', (new Date(this.props.activity.timestamp)).toLocaleTimeString());
timeLine = <span>{ this.props.activity.from.name || this.props.activity.from.id }{ sent }</span>;
break;
}
const who = this.props.fromMe ? 'me' : 'bot';
const wrapperClassName = classList(
'wc-message-wrapper',
(this.props.activity as Message).attachmentLayout || 'list',
this.props.onClickActivity && 'clickable'
);
const contentClassName = classList(
'wc-message-content',
this.props.selected && 'selected'
);
if(who=="bot"){
return (
<div data-activity-id={ this.props.activity.id } className={ wrapperClassName } onClick={ this.props.onClickActivity }>
{/*Add <img/> element to show botIcon*/}
<img className='botIcon' src="https://i.stack.imgur.com/jyAmj.png" width="39px" height="39px"/>
<div className={ 'wc-message wc-message-from-' + who } ref={ div => this.messageDiv = div }>
<div className={ contentClassName }>
<svg className="wc-message-callout">
<path className="point-left" d="m0,6 l6 6 v-12 z" />
<path className="point-right" d="m6,6 l-6 6 v-12 z" />
</svg>
{ this.props.children }
</div>
</div>
<div className={ 'wc-message-from wc-message-from-' + who }>{ timeLine }</div>
</div>
);
}else{
return (
<div data-activity-id={ this.props.activity.id } className={ wrapperClassName } onClick={ this.props.onClickActivity }>
{/*Add <img/> element to show userIcon*/}
<img className='userIcon' src="https://i.stack.imgur.com/kjSAI.jpg?s=48&g=1" width="39px" height="39px"/>
<div className={ 'wc-message wc-message-from-' + who } ref={ div => this.messageDiv = div }>
<div className={ contentClassName }>
<svg className="wc-message-callout">
<path className="point-left" d="m0,6 l6 6 v-12 z" />
<path className="point-right" d="m6,6 l-6 6 v-12 z" />
</svg>
{ this.props.children }
</div>
</div>
<div className={ 'wc-message-from wc-message-from-' + who }>{ timeLine }</div>
</div>
);
}
}
}
2)将自定义的WebChat添加到网站，并将其显示在我们页面的右下角.
2)Add customized WebChat to website and display it at the bottom right corner of the we page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
.botIcon {
float: left !important;
border-radius: 50%;
}
.userIcon {
float: right !important;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<img id="mychat" src="https://i.stack.imgur.com/jyAmj.png"/>
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: 'bZM43q4rkPU.cwA.PZg.lo4uCEpvbemZfKIETVkbeM79K0eQ96A_zs4U3muXdi0' },
user: { id: 'You' },
bot: { id: 'MeBot1' }
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
测试结果:
Test result:
这篇关于使用CSS自定义bot框架直接API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
