通过直行将Microsoft嵌入到可折叠窗口中

Question

使用WebChat，有一种方法可以将bot嵌入到可折叠窗口中。

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';
    };
  });
}());

但是，如果我使用直接行(下面)连接bot，并保留事件侦听器函数，我将得到一个可折叠的窗口，但里面没有bot。

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>

来解决你的问题。此外，没有必要使用僵尸框架webchat库，正如您在第二个代码片段中提到的那样。

更新

这似乎是一个CSS问题，您可以尝试添加并修改下面的CSS样式

//add
.wc-chatview-panel {
        width: 400px;
        height: 600px;
        position: relative;
    }

将css样式z-index:2添加到botTitleBar div。