Botframework-webchat: Investigate Resetting Store for Restart Conversation

[kunal7898]

Hi,

How to add support for restart conversation in webchat(React).

I have requirment where user can click on clear button then all the conversation should delete and
new conversatoin will start.

[corinagum]

@kunal7898 - reopening this issue, sorry for the confusion!

We are concerned there may be a bug on resetting the store in Web Chat, which would prevent users from implementing their own restart button. I am reopening this bug and changing the criteria to track investigation of the store issue.

Thanks for filing!

[compulim]

We are using an old way of passing in the store using store props, instead of Provider. This is required for multiple store setup, but it looks like it is buggy.

We should move to the new way of react-redux to pass in a store via ReactReduxContext, and it should fix this issue.

Repro steps

1. Create a Web Chat Redux store
2. Create a <ReactWebChat> with the reference of the store
3. Talk to the bot for a few turns
4. Create a new Web Chat Redux store
5. Assign the new store to the existing <ReactWebChat> component

Expected

The transcript should be cleared because the newer store is empty. Also, verify:

• The older DirectLineJS (contained in previous store) should be disconnected (all observables are unsubscribed)
• Web Chat will talk to the newer DirectLineJS and offline UI will work with it

Actual

The transcript is not empty.

[compulim]

Bumped to [email protected], it fixed an issue about switching store, a.k.a. transcripts not clear after switching store. But there is another bug on react-redux preventing our work, submitted at https://github.com/reduxjs/react-redux/issues/1339.

The react-redux bug is causing action to dispatch to wrong store after switching store. This will prevent us from switching store because apparently all actions are still dispatching to the old store.

Their bug does not repro on react-redux@^7. But moving to that version would require us to bump to react@^16.8 (with React hooks), which we planned for 4.6 and is a big risk while doing it in 4.5.

I am postponing this bug to 4.6.

[corinagum]

Taking a look at the issue you filed above, the team no longer supports version 6. This should be fixed by WC at the same time as https://github.com/microsoft/BotFramework-WebChat/issues/1818

[compulim]

When working on this PR, also do the followings:

• Bump react-redux to >= 7.1.0
• Bump redux-saga to latest (1.0.5)

[tdurnford]

This is resolved in the latest build from the master branch. I put together a quick sample that resets the store after the user is inactive for five seconds. Note, when the store is replaced, Web Chat dispatches a DIRECT_LINE/DISCONNECT action so you need to create a new Direct Line connection as well.

Bot Framework Web Chat (master)

function App() {

  const [directLine, setDirectLine] = useState(createDirectLine({}));
  const [store, setStore] = useState();
  const [timer, setTimer] = useState();

  const initConversation = useCallback(() => {
    setStore(createStore(
      {},
      () =>  next => action => {
        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          const { payload: { activity: { from: { role }}}} = action;
          role === 'user' && setTimer(5000);
        }
        return next(action);
      }));

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

      setDirectLine(createDirectLine({ token }));
    })().catch(error => console.log(error));

  }, [setStore, setDirectLine, setTimer]);

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

  return directLine && (
    <div className="App">
      <Timer ms={timer} onComplete={initConversation} />
      <ReactWebChat className='chat' directLine={directLine} store={store} />
    </div>
  )
}

Screen capture

[alokraj68]

This is resolved in the latest build from the master branch. I put together a quick sample that resets the store after the user is inactive for five seconds. Note, when the store is replaced, Web Chat dispatches a DIRECT_LINE/DISCONNECT action so you need to create a new Direct Line connection as well.

Bot Framework Web Chat (master)

function App() {

  const [directLine, setDirectLine] = useState(createDirectLine({}));
  const [store, setStore] = useState();
  const [timer, setTimer] = useState();

  const initConversation = useCallback(() => {
    setStore(createStore(
      {},
      () =>  next => action => {
        if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          const { payload: { activity: { from: { role }}}} = action;
          role === 'user' && setTimer(5000);
        }
        return next(action);
      }));

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

      setDirectLine(createDirectLine({ token }));
    })().catch(error => console.log(error));

  }, [setStore, setDirectLine, setTimer]);

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

  return directLine && (
    <div className="App">
      <Timer ms={timer} onComplete={initConversation} />
      <ReactWebChat className='chat' directLine={directLine} store={store} />
    </div>
  )
}

Screen capture

how to achieve the same on webchat without using react?

[tdurnford]

@alokraj68 This how to question is better suited for StackOverflow. Please post your question there with the Web Chat and BotFramework tags so the BotFramework Support Team and the community at large can help you work through your issue.

[narik1989]

Hi,

Can this sample be implemented in a normal HTML web chat, in the below sample?

https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.getting-started/a.full-bundle

If we could can anyone please share the code.

Thanks