Web Chat events summary
bot-framework web-chat
List of Web Chat event types with respective payloads
July 1, 2019
Simple cheat sheet which might come handy when you start working with the (very cool) back channel in Bot Framework's Web Chat component.
WEB_CHAT
Event | Payload |
---|---|
WEB_CHAT/MARK_ACTIVITY | { activityID, name, value } |
WEB_CHAT/SEND_EVENT | { (string) name, (string) value } |
WEB_CHAT/SEND_MESSAGE | { (string) method, (string) text } |
WEB_CHAT/SET_LANGUAGE | { language } |
WEB_CHAT/SET_REFERENCE_GRAMMAR_ID | { referenceGrammarID } |
WEB_CHAT/SET_SEND_BOX | { (string) text } |
WEB_CHAT/SET_SEND_TIMEOUT | { sendTimeout } |
WEB_CHAT/SET_SEND_TYPING_INDICATOR | { (bool) sendTypingIndicator } |
WEB_CHAT/SET_SUGGESTED_ACTIONS | { (array, default: []) suggestedActions } |
WEB_CHAT/START_SPEAKING | N/A |
WEB_CHAT/STOP_DICTATE | N/A |
WEB_CHAT/STOP_SPEAKING | N/A |
WEB_CHAT/SUBMIT_SEND_BOX | { (string, default: 'keyboard') method } |
How to send
This example sends new event with custom name when Direct Line connection is established:
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { myvalue: "test" }
}
});
}
return next(action);
});
DIRECT_LINE
Event |
---|
DIRECT_LINE/CONNECT |
DIRECT_LINE/CONNECT_FULFILLED |
DIRECT_LINE/CONNECT_FULFILLING |
DIRECT_LINE/CONNECT_PENDING |
DIRECT_LINE/CONNECTION_STATUS_UPDATE |
DIRECT_LINE/DELETE_ACTIVITY |
DIRECT_LINE/DISCONNECT |
DIRECT_LINE/DISCONNECT_FULFILLED |
DIRECT_LINE/DISCONNECT_PENDING |
DIRECT_LINE/DISCONNECT_REJECTED |
DIRECT_LINE/INCOMING_ACTIVITY |
DIRECT_LINE/POST_ACTIVITY |
DIRECT_LINE/POST_ACTIVITY_FULFILLED |
DIRECT_LINE/POST_ACTIVITY_PENDING |
DIRECT_LINE/POST_ACTIVITY_REJECTED |
DIRECT_LINE/UPDATE_CONNECTION_STATUS |
How to handle
This example hooks into any incoming activity and does nothing with it :)
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
// do whatever...
}
return next(action);
});
Feedback
Found something inaccurate or plain wrong? Was this content helpful to you? Let me know!
š§ codez@deedx.cz