使用 WebChat,有一种方法可以将机器人嵌入到可折叠的窗口中
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
xhr.setRequestHeader('Authorization', 'BotConnector ' + 'webchat-secret');
xhr.send();
xhr.onreadystatechange = processRequest;
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("chat").src = "https://webchat.botframework.com/embed/nodejsbot98?t=" + response
}
}
(function() {
document.querySelector('body').addEventListener('click', function(e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#botTitleBar')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
});
}());
但是,如果我使用直线连接机器人(如下),并保留事件监听器功能,我会得到一个可折叠的窗口,但内部没有机器人。
var botConnection = new BotChat.DirectLine({
secret: 'direct-line secret',
});
var user = {
id: 'userid',
name: 'username'
};
var bot = {
id: 'botid',
name: 'botname'
};
BotChat.App({
botConnection: botConnection,
user: user,
bot: bot,
}, document.getElementById('chat'));
botConnection
.postActivity({
type: "event",
value: "",
from: {
id: "me"
},
name: "greeting",
data: {
firstname: 'Alain',
gender: 'male'
}
})
.subscribe(id => console.log("success"));
这是html
<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'>
<div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'></div>
<div id = 'chat' width='400px' height='600px' ></div>
</div>
最佳答案
您在 http 请求的响应中将嵌入 url 设置为 div
DOM:
document.getElementById("chat").src = "https://webchat.botframework.com/embed/nodejsbot98?t=" + response
而且 DIV
没有 src
属性,你可以简单地修改:
<div id = 'chat' width='400px' height='600px' ></div>
到
<iframe id='chat' width='400px' height='600px'></iframe>
解决您的问题。此外,没有必要使用您在第二个代码片段中提到的 botframework 网络聊天库。
更新
看来是CSS的问题,你可以尝试添加修改如下CSS样式
//add
.wc-chatview-panel {
width: 400px;
height: 600px;
position: relative;
}
将 css 样式 z-index:2
添加到 botTitleBar
div。
关于javascript - 通过 Direct Line 在可折叠窗口中嵌入 Microsoft Bot,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51132395/