Can't send a message via custom store/dispatch in botframework-webchat for IE11/es5

Question

My customer requires IE11 support for our chatbot. I had to modify the webchat code not to use es6 features like arrow functions, as they are not supported in IE11/es5. For the most part I was successful, but the one thing I wasn't able to get working was sending a message event I am sending. The new code works in Chrome, but I am getting an Expected identifier error message in IE11. Here is the relevant code:

const store = window.WebChat.createStore({}, function({dispatch}) { return function(next) { return function(action) {
    if (action.type === 'WEB_CHAT/SEND_MESSAGE') {
        // Message sent by the user
        PageTitleNotification.Off();
        clearTimeout(interval);
    } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY' && action.payload.activity.name !== "inactive") {
        // Message sent by the bot
        clearInterval(interval);
        interval = setTimeout(function() {
            // Change title to flash the page
            PageTitleNotification.On('Are you still there?');

            // Notify bot the user has been inactive
            dispatch({
                type: 'WEB_CHAT/SEND_EVENT',
                payload: {
                    name: 'inactive',
                    value: ''
                }
            });

        }, 3000)
    }
    return next(action);
}}});

Previously the first line looked like

const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {

The issue is coming at function({dispatch}). IE console is saying an identifier is expected and the entire webchat fails to load. It works fine in Chrome. If I change function({dispatch}) to just function(dispatch), the bot renders but the dispatch statement sending the inactive message to the bot (below) no longer functions in IE OR Chrome.

// Notify bot the user has been inactive
dispatch({
    type: 'WEB_CHAT/SEND_EVENT',
    payload: {
        name: 'inactive',
        value: ''
    }
});

Why is IE not recognizing {dispatch} as an identifier, and what can I do to get this working?

Answer 1

IE11 doesn't support that syntax. ES6 allows to set object properties by variable name, so the ES5 equivalent is:

window.WebChat.createStore({}, { dispatch: dispatch }) {
  // ...
}

Edit:

After some debugging, the final solution was to pass in just the dispatch object to the createStore function directly, and accessing its dispatch method:

dispatch.dispatch({
    type: 'WEB_CHAT/SEND_EVENT',
    payload: {
        name: 'inactive',
        value: ''
    }
});

You could rename the argument to reduce redundancy but it's not needed.

Answer 2

The issue with your posted code is you never return next(action). Therefore the flow never advances when it runs thru the store. Add this one line and web chat will work as expected sending every 3 seconds. You can reference the code in the 05.custom-components/b.send-typing-indicator Web Chat sample, if needed.

Please note:

• I commented out PageTitleNotification as it's undefined.
• I did had to define interval which you must define elsewhere in your code not provided.
• Be sure you are using the webchat-es5.js CDN which is backed with polyfills for running on IE.

Hope of help!

var interval;
const store = window.WebChat.createStore({}, function(dispatch) {
  return function(next) {
    return function(action) {
      console.log(action)
      if (action.type === 'WEB_CHAT/SEND_MESSAGE') {
          // Message sent by the user
          // PageTitleNotification.Off();
          clearTimeout(interval);
      } else
      if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          // Message sent by the bot
          clearInterval(interval);
          interval = setTimeout(function() {
              // Change title to flash the page
              // PageTitleNotification.On('Are you still there?');

              // Notify bot the user has been inactive
              dispatch.dispatch({
                  type: 'WEB_CHAT/SEND_EVENT',
                  payload: {
                      name: 'inactive',
                      value: ''
                  }
              });

          }, 3000)
      }
      return next( action )
    }
  }
} );

Developer console:

Bot logging: