如何解决迁移机器人框架 3-4：document.getElementsByClassName("wc-header") 不再工作
我将代码从 webchat 3 更改为 webchat 4，还更改了样式选项等等。一切正常……只是网络聊天渲染产生了问题。 这是我的代码：
(async function() {
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',{
headers: {
Authorization: `Bearer [MYBEARER]`,},method: 'POST'
});
const { token } = await res.json();
const store = window.WebChat.createStore({},({ dispatch }) => next => action => {
//console.log(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);
});
const styleOptions = {
botAvatarInitials: 'EY',userAvatarInitials: 'YOU'
};
const {
createCognitiveServicesSpeechServicesPonyfillFactory,createDirectLine,renderWebChat
} = window.WebChat;
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; background-color:#252525; border:1px solid #252525;'><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer; background-color:#FFE600;'></div></div>";
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),store,userID: `You`,username: 'Web Chat User',locale: 'en-US',language: 'en-US',styleOptions
},document.getElementById('botDiv'));
document.querySelector('#botDiv > *').focus();
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";
})
}()).catch(err => console.error(err));;我的标题中还有所有 js 和 css 链接：
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/botchatey.css">
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>问题出在： 当我删除“window.WebChat.renderWebChat”功能时，整个布局完美运行。我可以最大化和最小化我在 div-outerHTML 中创建的聊天窗口。
当我添加 renderWebChat 函数时，id 为“botTitleBar”的封装 DIV 似乎被吃掉了，并且没有显示出来。如果我在正在运行的解决方案中按 F12，则在运行的代码中看不到此 DIV。 我现在花了几个小时在这上面。 非常欢迎任何帮助！请！
解决方法
我自己解决了这个问题。花了我一些时间，但我认为对其他人来说很有趣，您是否也可以从网络聊天 3 更改为网络聊天 4。 我的网页端有一个图标，我想在网站打开时显示该图标。当我单击该图标时，网络聊天窗口将打开。当我单击网络聊天窗口的标题时，窗口会折叠并再次显示图标。 这是我需要的代码部分。 样式部分：
<style>
html,body {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
#botDiv {
width: 400px;
height: 0px;
margin: 10px;
position: fixed;
bottom: 0;
right: 0;
z-index: 1000;
border: 1px solid #252525;
display: none;
}
#botDiv>* {
height: 100%;
width: 100%;
}
#webchat>* {
height: 100%;
width: 100%;
}
#botTitleBar {
cursor: pointer;
background-color: #252525;
height: 20px;
width: auto;
color: #252525;
}
#ContainerDiv {
margin: auto;
position: sticky;
left: 0;
bottom: 0;
width: 100%;
}
</style>
图标的 div 和放置在页脚中的聊天窗口：
<div id="botDiv">
<div id="botTitleBar">Click here to close chat window!</div>
<div id="webchat"></div>
</div>
<div class="ContainerDiv" id="ContainerDiv">
<img id="chaticon" src="@Url.Content("/images/chat.png")" style="float: right;" role="main"/>
</div>
最后是 javascript 函数：
(async function() {
const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',{
headers: {
Authorization: `Bearer <YOUR DIRECTLINE SECRET HERE>`,},method: 'POST'
});
const { token } = await res.json();
const store = window.WebChat.createStore({},({ dispatch }) => next => action => {
//console.log(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);
});
const styleOptions = {
botAvatarInitials: 'EY',userAvatarInitials: 'YOU',hideUploadButton: true,backgroundColor: '#252525',userAvatarBackgroundColor: '#FFE600',botAvatarBackgroundColor: 'FFE600',sendBoxBackground: 'Black',sendBoxTextColor: 'White'
};
const {
createCognitiveServicesSpeechServicesPonyfillFactory,createDirectLine,renderWebChat
} = window.WebChat;
window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),store,userID: `You`,username: 'Web Chat User',locale: 'en-US',language: 'en-US',styleOptions
},document.querySelector("#botDiv #webchat")
);
document.querySelector('#webchat > *').focus();
document.querySelector( 'body' ).addEventListener( 'click',function (e) {
const botDiv = document.getElementById("botDiv");
const webchat = document.getElementById("webchat" );
const chaticon = document.getElementById("chaticon" );
const botTitleBar = document.getElementById("botTitleBar");
e.target.matches = e.target.matches || e.target.msMatchesSelector;
const parent = e.srcElement.parentElement;
if (parent.matches( '#botDiv' ) && e.target.matches( '#botTitleBar' ) ) {
botDiv.style.height = '0px';
botDiv.style.display = "none";
chaticon.style.display = "initial";
}
else if ( e.target.matches( '#chaticon') ) {
document.getElementById( "botDiv" ).style.height = '500px';
botDiv.style.display = "block";
botDiv.appendChild( webchat );
botTitleBar.style.backgroundColor = "#FFE600";
chaticon.style.display = "none";
};
});
}()).catch(err => console.error(err));
我知道直达线的秘密不应该直接在代码中，但由于我的页面只是一个演示页面，所以我让它变得容易。 由于我一直在寻找解决方案，我认为如果您遇到同样的问题，这可能会对您有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
