javascript - 通过 Direct Line 在可折叠窗口中嵌入 Microsoft Bot

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。