How to send 2 events one after the other with botframework webchat?

Question

I customized the BotFramework Webchat to send 2 events to my bot. The first one is for the RGPD, we are reminding to the user which information is saved and for what purpose. The second one is a "greeting" message (the bot say "Hi ...").

But with the dispatch method, both events are sent almost at the same time and sometimes, the webchat display the greetings message first, whichi is not what I expect.

Here is the sample.

createStore({}, function (_ref) {
        var dispatch = _ref.dispatch;
        return function (next) {
            return function (action) {
                 if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'rgpd',
                            type: 'event'
                        }
                    });

                    dispatch({
                            type: 'WEB_CHAT/SEND_EVENT',
                            payload: {
                                name: 'greeting',
                                type: 'event'
                            }
                        });
                 }
            }
        }
}

So how can I send the greeting event always after the rgpd event ?

I tried using a simple window.setTimeout, but, it's not a good solution as I don't know how much time will directline take to handle the first call and the result is the same as before.

Any ideas ? Thanks

Answer 1

I would suggest looking into Javascript promises as they are meant to solve problems with asynchronous task. There are some great writeups here and here .

Something like the following:

if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
  new Promise(function() {
    dispatch({
        type: 'WEB_CHAT/SEND_EVENT',
        payload: {
            name: 'rgpd',
            type: 'event'
        }
    });
  }).then(function() {
    dispatch({
      type: 'WEB_CHAT/SEND_EVENT',
      payload: {
          name: 'greeting',
          type: 'event'
      }
    });
  });
}

Answer 2

I would recommend dispatching one event and sending two activities from the bot.

Bot Framework SDK v4 (Node)

this.onEvent(async (context, next) => {
  if (context.activity.name === 'webchat/join') {
    await context.sendActivities([{ text: 'General Data Protection Regulation' }, { text: 'Backchannel Welcome Message sent from `onEvent`!' }]);
  }
  await next();
});

Web Chat v4 - Store Middleware

const store = createStore(
  {},
  ({ dispatch }) => next => async action => {
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') { 
    dispatch({
      type: 'WEB_CHAT/SEND_EVENT',
      payload: {
        name: 'webchat/join'
      }
    });
  } 
  return next(action)
});

Screenshot