Question

使用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>

Answer 1

您在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。

通过直线将Microsoft Bot嵌入可折叠窗口中

1 个答案:

更新