</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>
我希望在用户点击之前，我们页面右下角的聊天图标是这样的
聊天以这种方式弹出
我用机器人框架构建了一个机器人。我已使用直线 API 将机器人添加到我的网站，它出现在我网站的右上角。我需要使用下载到我的应用程序文件中的 botchat.css 来自定义它，以自定义机器人。我还需要为机器人和用户发送的每条消息添加一个圆形图像图标。请问如何使用 botchat.css 文件实现此目的？
最佳答案
您似乎想要动态展开/折叠您的聊天机器人，并在每条消息中显示机器人图标。要实现您的要求，请引用以下步骤。
1)通过修改 History.tsx 构建自定义的 WebChat 以在每条消息中显示机器人图标。
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="/image/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="/image/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，并显示在我们页面的右下角。
<!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="/image/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>
测试结果:
关于javascript - 使用 css 自定义 bot 框架直线 API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51536256/