Reset conversation in webCaht UI

Question

I use WebChat as web interface for my bot and I would like to reset the conversation when the user click the reset button. I followed this question but the store dosen't reset the UI only the direct line is reconnecting. I have this error : uncaught at forkPut TypeError: Cannot read property 'error' of undefined

• My code

import React, { useState, useEffect } from 'react';
import ReactWebChat, { createDirectLine, createStore } from 'botframework-webchat';
import directLineDisconnect from 'botframework-webchat-core/lib/actions/disconnect';
import './fabric-icons-inline.css';
import './MinimizableWebChat.css';


const initializeDirectLine = async setDirectLine => {
  setDirectLine(createDirectLine({ token }));
};

const WebChat = props => {
  const { directLine, store } = props;
  console.log('DL : '); console.log(directLine);
  return directLine
    ? <ReactWebChat className={'react-web-chat'} {...props} />
    : "Connecting..."
};

export default () => {
  console.log('DL create req ');
  const [directLine, setDirectLine] = useState();
  useEffect(() => {
    initializeDirectLine(setDirectLine);
  }, []);

  const storeMiddleware = () => next => action => {
    console.log(action.type);
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
      store.dispatch({
        type: 'WEB_CHAT/SEND_EVENT',
        payload: {
          name: 'webchat/NewConnect',
          value: {
            language: document.documentElement.lang || window.navigator.language
          }
        }
      });
    }
    else if (action.type === 'DIRECT_LINE/DISCONNECT_FULFILLED') {
      console.log("---> DIRECT_LINE/DISCONNECT_FULFILLED");
      setDirectLine(null);
      console.log("---> 1");
      setStore(createStore({}, storeMiddleware));
      console.log("---> 2");
      initializeDirectLine(setDirectLine);
      console.log("---> 3");
    }
    return next(action);
  };

  const [store, setStore] = useState(createStore({}, storeMiddleware));

  const disconnect = () => store.dispatch(directLineDisconnect());

  return (
    <div className="minimizable-web-chat">
      <div className='chat-box right bottom'>
        <button onClick={disconnect}>Disconnect</button>
        <WebChat className='react-web-chat'
          directLine={directLine} store={store} />
      </div>
    </div>
  )
};

Answer 1

Take a look at the Clear After Idle Web Chat Sample. It shows how to clear the transcript history and create a new conversation with the bot. Note, you have to use the latest version of Web Chat - version 4.6.0 - for this sample to work. Older versions had a bug that wouldn't allow you to change the store without the 'forkPut' type error.