"Network interruption occurred. Reconnecting…" , How to potentially automatically reconnect when i minimize or maximize chabot

Question

We have implemented bot framework-webchat to create a bot. Currently, we handle the minimize and maximize with the event passed in component (code shown below) but the challenge occurs when I minimize and then maximize the chatbot I am seeing 'Unable to connect' message and then it flashes away and if after an hour-long later if we minimize and maximize I am getting 'Network interruption occurred, Reconnecting...' How do I keep webchat potentially automatically reconnect when I minimize and maximize Chabot.

MaximizeChatWndow () {
  if (this.state.token === null &&
    this.state.productService === null) {
    return
  }

  this.setState({
    directLine: this.createDirectLine()
  }, () => {
    this.setState({
      minimized: false,
      newMessage: false,
      userId: 'User_' + Math.random
    })
  })
  this.checkExpandFlag = true
}

The component:

render () {
  const {
    state: { minimized, store }
  } = this 
  return (
    <Row>
     <Col md={12}>
       <div>
         {minimized ? (
           <ChatDon
             handleMaximizeButtonClick={this.handleMaximizeButtonClick}
           />
         ) : (
           <ChatWin
             handleMinimizeButtonClick={this.handleMinimizeButtonClick}
             directLine={this.state.directLine}
             userId={this.state.userId}
             store={store}
           />
         )}
       </div>
     </Col>
   </Row>
  )
}

Answer 1

It looks like you creating your directLine object in "MaximizeChatWndow()" which I think is the problem. In "MaximizeChatWndow()", you should be fetching your token and passing that to your web chat component. It is in the web chat component that you should use the token to call createDirectLine().

It appears that there have been various updates to the 06.recomposing-us/a.minimizable-web-chat sample. (The docs also look like they are out of date and no longer match the code). However, if comparing to the available sample code, you will want to do something like the following. Please look at the full code in the above link as I am only including the most relevant parts here.

When I tested, I had no issues with the conversation resetting or the network disconnecting/reconnecting.

MinimizableWebChat.js

import WebChat from './WebChat';

const MinimizableWebChat = () => {

  [...]

  const [token, setToken] = useState();

  const handleFetchToken = useCallback(async () => {
    if (!token) {
      const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
      const { token } = await res.json();

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

  [...]

  return (
    [...]
    <WebChat
      className="react-web-chat"
      onFetchToken={handleFetchToken}
      store={store}
      styleSet={styleSet}
      token={token}
    />
  )

WebChat.js

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

  [...]

  useEffect(() => {
    onFetchToken();
  }, [onFetchToken]);

  return token ? (
    <ReactWebChat ...
  );
};

Hope of help!