使用 CSS 隐藏和显示 React WebChat 时出现重新连接问题

Question

目前，我在我的网站上使用 React 版本的 WebChat。 (https://github.com/Microsoft/BotFramework-WebChat)

我正在构建一个功能来在页面上隐藏和显示 WebChat 元素。当页面首次加载时，会显示 WebChat。单击 WebChat 顶部 (.chatbot-top-pane) 时，WebChat 最小化（.chat-window 隐藏）。当再次单击 div 以最大化 window（显示 .chat-window）时，WebChat 显示然后尝试重新连接到服务器，但失败了。为什么它会尝试重新连接？会话是否以某种方式在后台结束并且正在尝试使用相同的令牌恢复？

我尝试在 .chat-window 上使用 display: none、visibility: hidden。

<div className="chatbot-container">
  <div className="chatbot-top-pane" onClick={handleToggleStatus.bind(this)}>
    <p className="chatbot-pane-label-text">Chatbot Disco</p>
  </div>
    <ReactWebChat className="chat-window" directLine={createDirectLine({ token })} />
</div>

此外，我尝试用 div 包装 .chat-window 并尝试隐藏 .chat-window-container，而不是：

<div className="chatbot-container">
  <div className="chatbot-top-pane" onClick={handleToggleStatus.bind(this)}>
    <p className="chatbot-pane-label-text">Chatbot Disco</p>
  </div>
  <div className="chat-window-container">
    <ReactWebChat className="chat-window" directLine={createDirectLine({ token })} />
  </div>
</div>

以下是 WebChat 上显示的错误消息的屏幕截图

Error message on WebChat

我在 WebChat 的 iframe 版本上尝试了同样的操作，完全没有问题。

Answer 1

当 Web Chat 卸载时，它会触发 DIRECT_LINE/DISCONNECT 操作，导致 DirectLine 断开连接。但是，查看您的代码后，我不确定您为什么会有问题，特别是因为您的实现看起来类似于 Minimizable WebChat 示例，并且您没有卸载 Web Chat 组件。

我整理了一个看起来运行良好的示例的简化版本。

网络聊天 v4

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';
import classNames from 'classnames';

const WebChat = () => {
  const [token, setToken] = useState('');
  const [minimized, setMinimized] = useState(false);

  const directLine = useMemo(() => createDirectLine({ token }), [token]);
  const store = useMemo(() => createStore(), []);

  const toggleChatVisivility = useCallback(() => setMinimized(minimized => !minimized), [setMinimized]);

  useEffect(() => {
    (async function () {
      const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
      const { token } = await res.json();

      setToken(token);
    })();
  }, []);

  return (
    <React.Fragment>
      <button onClick={toggleChatVisivility}>{minimized ? 'Show Chat' : 'Hide Chat'}</button>
      <ReactWebChat className={classNames('webchat__chat-container', minimized ? 'webchat__hidden': 'webchat__visivle')} directLine={directLine} store={store} />
    </React.Fragment>);
}

export default WebChat;

css

.webchat__chat-container {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.webchat__hidden {
  visibility: hidden;
}

屏幕截图

希望上面的代码片段可以帮助您找出实施中缺少的内容。抱歉，我帮不上忙了。如果您运行有任何问题，请告诉我。我很乐意帮助回答他们。

使用 CSS 隐藏和显示 React WebChat 时出现重新连接问题

Reconnect issue when hiding and showing React WebChat using CSS

botframework

网络聊天 v4

css

屏幕截图