Add new emitTypingIndicator action

CHANGELOG.md

@@ -91,6 +91,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+-  Fix [#2157](https://github.com/Microsoft/BotFramework-WebChat/issues/2157), added `emitTypingIndicator` action and dispatcher, by [@compulim](https://github.com/compulim), in PR [#2413](https://github.com/microsoft/BotFramework-WebChat/pull/2413)
 -  Fix [#2307](https://github.com/Microsoft/BotFramework-WebChat/issues/2307). Added options to hide ScrollToEnd button, by [@nt-7](https://github.com/nt-7) in PR [#2332](https://github.com/Microsoft/BotFramework-WebChat/pull/2332)
 -  Added bubble nub and style options, by [@compulim](https://github.com/compulim), in PR [#2137](https://github.com/Microsoft/BotFramework-WebChat/pull/2137)
 -  Fix [#1808](https://github.com/microsoft/BotFramework-WebChat/issues/1808). Added documentation on activity types, by [@corinagum](https://github.com/corinagum) in PR [#2228](https://github.com/microsoft/BotFramework-WebChat/pull/2228)

packages/component/src/Composer.js

@@ -13,6 +13,7 @@ import {
   connect as createConnectAction,
   createStore,
   disconnect,
+  emitTypingIndicator,
   markActivity,
   postActivity,
   sendEvent,
@@ -46,6 +47,7 @@ import WebChatReduxContext from './WebChatReduxContext';
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
   clearSuggestedActions,
+  emitTypingIndicator,
   markActivity,
   postActivity,
   sendEvent,

packages/component/src/Dictation.js

@@ -12,6 +12,7 @@ const {
 const Dictation = ({
   dictateState,
   disabled,
+  emitTypingIndicator,
   language,
   numSpeakingActivities,
   onError,
@@ -49,7 +50,7 @@ const Dictation = ({
 
         setDictateInterims(interims);
         setDictateState(DICTATING);
-        sendTypingIndicator && postActivity({ type: 'typing' });
+        sendTypingIndicator && emitTypingIndicator();
       }
     },
     [dictateState, postActivity, sendTypingIndicator, setDictateInterims, setDictateState]
@@ -106,6 +107,7 @@ export default connectToWebChat(
     activities,
     dictateState,
     disabled,
+    emitTypingIndicator,
     language,
     postActivity,
     sendTypingIndicator,
@@ -119,6 +121,7 @@ export default connectToWebChat(
   }) => ({
     dictateState,
     disabled,
+    emitTypingIndicator,
     language,
     numSpeakingActivities: activities.filter(({ channelData: { speak } = {} }) => speak).length,
     postActivity,

packages/core/src/actions/emitTypingIndicator.js

@@ -0,0 +1,9 @@
+const EMIT_TYPING_INDICATOR = 'WEB_CHAT/EMIT_TYPING_INDICATOR';
+
+export default function emitTypingIndicator() {
+  return {
+    type: EMIT_TYPING_INDICATOR
+  };
+}
+
+export { EMIT_TYPING_INDICATOR };

packages/core/src/index.js

@@ -4,6 +4,7 @@ import clearSuggestedActions from './actions/clearSuggestedActions';
 import connect from './actions/connect';
 import createStore from './createStore';
 import disconnect from './actions/disconnect';
+import emitTypingIndicator from './actions/emitTypingIndicator';
 import markActivity from './actions/markActivity';
 import postActivity from './actions/postActivity';
 import sendEvent from './actions/sendEvent';
@@ -36,6 +37,7 @@ export {
   Constants,
   createStore,
   disconnect,
+  emitTypingIndicator,
   markActivity,
   postActivity,
   sendEvent,

packages/core/src/sagas.js

@@ -4,6 +4,7 @@ import clearSuggestedActionsOnPostActivitySaga from './sagas/clearSuggestedActio
 import connectionStatusUpdateSaga from './sagas/connectionStatusUpdateSaga';
 import connectSaga from './sagas/connectSaga';
 import detectSlowConnectionSaga from './sagas/detectSlowConnectionSaga';
+import emitTypingIndicatorToPostActivitySaga from './sagas/emitTypingIndicatorToPostActivitySaga';
 import incomingActivitySaga from './sagas/incomingActivitySaga';
 import markAllAsSpokenOnStopSpeakActivitySaga from './sagas/markAllAsSpokenOnStopSpeakActivitySaga';
 import postActivitySaga from './sagas/postActivitySaga';
@@ -26,6 +27,7 @@ export default function* sagas() {
   yield fork(connectionStatusUpdateSaga);
   yield fork(connectSaga);
   yield fork(detectSlowConnectionSaga);
+  yield fork(emitTypingIndicatorToPostActivitySaga);
   yield fork(incomingActivitySaga);
   yield fork(markAllAsSpokenOnStopSpeakActivitySaga);
   yield fork(postActivitySaga);

packages/core/src/sagas/emitTypingIndicatorToPostActivitySaga.js

@@ -0,0 +1,21 @@
+import { put, takeEvery } from 'redux-saga/effects';
+
+import { EMIT_TYPING_INDICATOR } from '../actions/emitTypingIndicator';
+import postActivity from '../actions/postActivity';
+import whileConnected from './effects/whileConnected';
+
+function* postTypingActivity() {
+  yield put(
+    postActivity({
+      type: 'typing'
+    })
+  );
+}
+
+function* emitTypingActivityToPostActivity() {
+  yield takeEvery(({ type }) => type === EMIT_TYPING_INDICATOR, postTypingActivity);
+}
+
+export default function* emitTypingActivityToPostActivitySaga() {
+  yield whileConnected(emitTypingActivityToPostActivity);
+}

packages/core/src/sagas/sendTypingIndicatorOnSetSendBoxSaga.js

@@ -6,7 +6,8 @@ import { call, cancel, put, select, take, takeLatest } from 'redux-saga/effects'
 import { SET_SEND_BOX } from '../actions/setSendBox';
 import { SET_SEND_TYPING } from '../actions/setSendTyping';
 import { SET_SEND_TYPING_INDICATOR } from '../actions/setSendTypingIndicator';
-import postActivity, { POST_ACTIVITY } from '../actions/postActivity';
+import { POST_ACTIVITY } from '../actions/postActivity';
+import emitTypingIndicator from '../actions/emitTypingIndicator';
 import sendTypingIndicatorSelector from '../selectors/sendTypingIndicator';
 import sleep from '../utils/sleep';
 import whileConnected from './effects/whileConnected';
@@ -47,7 +48,7 @@ function* sendTypingIndicatorOnSetSendBox() {
             yield call(sleep, interval);
           }
 
-          yield put(postActivity({ type: 'typing' }));
+          yield put(emitTypingIndicator());
 
           lastSend = Date.now();
         }