Javascript 使用css定制bot框架直连API
在用户单击之前，我想在we页面的右下角显示这样的聊天图标 这样就会弹出聊天窗口 我用bot框架构建了一个bot。我已经使用direct line API将bot添加到我的网站，其显示在我网站的右角。我需要使用下载到我的应用程序文件中的botchat.css对其进行自定义，以自定义bot。我还需要在机器人和用户发送的每条消息中添加一个圆形图像图标。请问我如何使用botchat.css文件实现这一点Javascript 使用css定制bot框架直连API,javascript,c#,css,botframework,Javascript,C#,Css,Botframework,在用户单击之前，我想在we页面的右下角显示这样的聊天图标 这样就会弹出聊天窗口 我用bot框架构建了一个bot。我已经使用direct line API将bot添加到我的网站，其显示在我网站的右角。我需要使用下载到我的应用程序文件中的botchat.css对其进行自定义，以自定义bot。我还需要在机器人和用户发送的每条消息中添加一个圆形图像图标。请问我如何使用botchat.css文件实现这一点 似乎您希望动态展开/折叠聊天机器人，并在每条消息中显示机器人图标。要达到您的要求，请参考以下步骤 1
似乎您希望动态展开/折叠聊天机器人，并在每条消息中显示机器人图标。要达到您的要求，请参考以下步骤 1通过修改History.tsx，构建自定义WebChat，在每条消息中显示机器人图标 2向网站添加定制的WebChat，并将其显示在we页面的右下角
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>
);
}
}
}
检查等等。您应该阅读有关Webchat的文档，了解如何自定义它。但是，如果不提供至少一些代码来显示您试图执行的操作，您将无法得到完整的响应it@NicolasR我理解，但是否可以仅通过CSS实现这些功能？我不确定，我在front/CSS方面没有足够的资格来确保仅通过CSS实现这些功能。正如尼古拉斯所说，我过去在webchat代码上做了一些改变，你可以通过修改webchat代码来达到你的要求，我发布了一个回复，你可以参考它。你是最好的！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！。谢谢！！！！！！！！！！！！！！！！！！！！！！！！！！！！！我已经从GitHub克隆并构建了BotFramework WebChat。生成了其他文件，如botchat.js、botchat.css和History.tsx。我可以从BotFramework WebChat文件夹中复制这些所需文件并将其包含在我的项目文件夹中吗？或者必须包含所有其他文件？构建自定义WebChat后，只需在项目中添加botchat.js和botchat.css，并在网页上添加对这些文件的引用。
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>
);
}
}
}
<!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>