Reconnect issue when hiding and showing React WebChat using CSS - botframework

Question

Currently, I'm using the React version of WebChat on my site. (https://github.com/Microsoft/BotFramework-WebChat)
I'm building a feature to hide and show the WebChat element on a page. When the page first loads, the WebChat shows. When clicking on top of the WebChat (.chatbot-top-pane), the WebChat minimizes (.chat-window hides). When clicking on the div again to maximize the window (show .chat-window), the WebChat shows then tries to reconnect to the server, but fails. Why does it try to reconnect? Did the session somehow end in the background and it's trying to resume using the same token?
I tried using display: none, visibility: hidden on .chat-window.
<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>
Also, I tried wrapping the .chat-window with a div and tried hiding .chat-window-container, instead:
<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>
Below is a screenshot of the error message displayed on the WebChat
Error message on WebChat
I tried the same thing on the iframe version of the WebChat and had no issue at all.

Answer 1

When Web Chat dismounts, it triggers the DIRECT_LINE/DISCONNECT action to fire which causes DirectLine to disconnect. However, looking over your code, I'm not sure why you would have an issue with that especially since your implementation looks similar to the Minimizable WebChat Sample and you are not dismounting the Web Chat component.
I put together a simplified version of the sample that seems to work fine.
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;
}
Screen capture
Hopefully the code snippets above help you figure out what's missing from your implementation. Sorry, I couldn't be more helpful. Let me know if you run into anymore questions. I'm happy to help answer them.