Where to Find the Type Values for the Web Chat

Question

For the following javascript code snippet found at Health Bot Container Sample, the string literal values in the code sample, does anyone know where they are coming from? Where can I find the Microsoft documentation explaining more about them and finding out more about what other string literal values are offered and available for usage? The string literal values I am referring to in the code snippet are: 'DIRECT_LINE/CONNECT_FULFILLED', 'DIRECT_LINE/POST_ACTIVITY'.

At the moment, I don't know what's available for useage, and I don't know where I could find some Microsoft documentation detailing more about this. I googled around for it but with no luck. I tried searching through several of Microsoft's documentation but also with no luck.

I was able to locate a little something at this person's page, but I am not sure if this is a complete list or a partial list.

const store = window.WebChat.createStore({}, function(store) { return function(next) { return function(action) {
    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        store.dispatch({
            type: 'DIRECT_LINE/POST_ACTIVITY',
            meta: {method: 'keyboard'},
            payload: {
                activity: {
                    type: "invoke",
                    name: "InitConversation",
                    locale: user.locale,
                    value: {
                        // must use for authenticated conversation.
                        jsonWebToken: jsonWebToken,

                        // Use the following activity to proactively invoke a bot scenario
                        /*
                        triggeredScenario: {
                            trigger: "{scenario_id}",
                            args: {
                                myVar1: "{custom_arg_1}",
                                myVar2: "{custom_arg_2}"
                            }
                        }
                        */
                    }
                }
            }
        });

    }
    
    return next(action);
}}});

Answer 1

The various action types can be found in the BotFramework-WebChat repo. There isn't any specific documentation provided that describes each action, but in a number of cases you can refer to the provided samples for examples on how to implement. From there, you can extrapolate how to implement other actions.

All of the types (for example, WEB_CHAT/START_DICTATE), can be checked to catch when called. Additionally, each is available as an exported function which means, like the code you supplied, an action can be dispatched because of, or in support of, some other activity that has occurred.

Here is a small snippet of code I use in my test instance of Web Chat. The switch statement this comes from checks action types as they come thru. When they do, I perform some other action.

case 'DIRECT_LINE/UPDATE_CONNECTION_STATUS':
  if (action.payload) {
    let connectionType;
    switch (action.payload.connectionStatus) {
      case 0:
        connectionType = 'UNINITIATED';
        break;
      case 1:
        connectionType = 'CONNECTING';
        break;
      case 2:
        connectionType = 'ONLINE';
        break;
      case 3:
        connectionType = 'TOKEN_EXPIRED';
        break;
      case 4:
        connectionType = 'FAILED_TO_CONNECT';
        break;
      case 5:
        connectionType = 'ENDED';
        break;
      default:
        connectionType = 'ERROR_GETTING_CONNECTION_STATUS'
    }
    console.log(`DIRECT_LINE >> UPDATED_CONNECTION_STATUS: ${ connectionType }`);
  }
  return next(action);
case 'DIRECT_LINE/RECONNECT':
  reconnect(store, action, userName);
  return next(action);
case 'DIRECT_LINE/CONNECT':
  connect(store, action);
  return next(action);
case 'DIRECT_LINE/CONNECT_FULFILLED':
  connectFulfilled(store, action);
  return next(action);
case 'DIRECT_LINE/DISCONNECT':
  disconnectMsg(action.type)
  return next(action);
case 'DIRECT_LINE/DISCONNECT_FULFILLED':
  disconnectFulfilled(store, action);
  return next(action);
case 'DIRECT_LINE/INCOMING_ACTIVITY':
  incomingActivity(store, action);
  return next(action);
case 'DIRECT_LINE/POST_ACTIVITY':
  postActivity(store, action);
  return next(action);
default:
  return next(action);
}

Here is an example of a message I post back to Web Chat when a particular event is fired on the hosting page:

store.dispatch( {
  type: 'WEB_CHAT/SEND_MESSAGE',
  payload: {
     text: `Calendar event added`
  }
} );

Hope of help!