Fix send typing

CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `component`: Fix [#1328](https://github.com/Microsoft/BotFramework-WebChat/issues/1328). Should not start microphone if input hint is set to `ignoringInput`, in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)
 - `component`: Fix outgoing typing indicators are not sent and acknowledged properly, in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)
 - Fix [#1402](https://github.com/Microsoft/BotFramework-WebChat/issues/1402). Add `messageBack` support, by [@corinagum](https://github.com/corinagum) in PR [#1581](https://github.com/Microsoft/BotFramework-WebChat/pull/1581)
+- Fix [#1539], outgoing typing indicators are not sent and acknowledged properly, in PR [#1541](https://github.com/Microsoft/BotFramework-WebChat/pull/1541)
 
 ### Removed
 - `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
@@ -60,6 +61,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `component`: [Avatar image](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling/), in [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)
 - `core`: [Incoming activity to JavaScript event](https://microsoft.github.io/BotFramework-WebChat/15.b.incoming-activity-event/), in [#1567](https://github.com/Microsoft/BotFramework-WebChat/pull/1567)
 - `core`: [Send welcome event](https://microsoft.github.io/BotFramework-WebChat/15.b.backchannel-send-welcome-event/), in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)
+- `core`: [Send typing indicator](https://microsoft.github.io/BotFramework-WebChat/07.b.customization-send-typing-indicator), in [#1541](https://github.com/Microsoft/BotFramework-WebChat/pull/1541)
 
 ## [4.2.0] - 2018-12-11
 ### Added

README.md

@@ -225,7 +225,8 @@ npm run prepublishOnly
 | [`06.c.cognitive-services-speech-services-js`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js)                           | Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API.                                                                                                                                  | [Demo](https://microsoft.github.io/BotFramework-WebChat/6.c.cognitive-services-speech-services-js)                   |
 | [`06.d.speech-web-browser`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/06.d.speech-web-browser)                                                                 | Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample)                                                                                                    | [Demo](https://microsoft.github.io/BotFramework-WebChat/06.d.speech-web-browser)                                     |
 | [`06.e.cognitive-services-speech-services-with-lexical-result`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/06.e.cognitive-services-speech-services-with-lexical-result) | Demonstrates how to use lexical result from Cognitive Services Speech Services API.                                                                                                                                                 | [Demo](https://microsoft.github.io/BotFramework-WebChat/06.e.cognitive-services-speech-services-with-lexical-result) |
-| [`07.customization-timestamp-grouping`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/07.customization-timestamp-grouping)                                         | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time.                                                                                                             | [Demo](https://microsoft.github.io/BotFramework-WebChat/07.customization-timestamp-grouping)                         |
+| [`07.a.customization-timestamp-grouping`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/07.customization-timestamp-grouping)                                       | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time.                                                                                                             | [Demo](https://microsoft.github.io/BotFramework-WebChat/07.a.customization-timestamp-grouping)                       |
+| [`07.b.customization-send-typing-indicator`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/07.customization-send-typing-indicator)                                 | Demonstrates how to send typing activity when the user start typing on the send box.                                                                                                                                                | [Demo](https://microsoft.github.io/BotFramework-WebChat/07.b.customization-send-typing-indicator)                    |
 | [`08.customization-user-highlighting`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/08.customization-user-highlighting)                                           | Demonstrates how to customize the styling of activities based whether the message is from the user or the bot.                                                                                                                      | [Demo](https://microsoft.github.io/BotFramework-WebChat/08.customization-user-highlighting)                          |
 | [`09.customization-reaction-buttons`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/09.customization-reaction-buttons/)                                            | Introduces the ability to create custom components for Web Chat that are unique to your bot's needs. This tutorial demonstrates the ability to add reaction emoji such as :thumbsup: and :thumbsdown: to conversational activities. | [Demo](https://microsoft.github.io/BotFramework-WebChat/09.customization-reaction-buttons)                           |
 | [`10.customization-card-components`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/10.customization-card-components)                                               | Demonstrates how to create custom activity card attachments, in this case GitHub repository cards.                                                                                                                                  | [Demo](https://microsoft.github.io/BotFramework-WebChat/10.customization-card-components)                            |

packages/core/src/reducer.ts

@@ -8,6 +8,7 @@ import readyState from './reducers/readyState';
 import referenceGrammarID from './reducers/referenceGrammarID';
 import sendBoxValue from './reducers/sendBoxValue';
 import sendTimeout from './reducers/sendTimeout';
+import sendTyping from './reducers/sendTyping';
 import suggestedActions from './reducers/suggestedActions';
 
 export default combineReducers({
@@ -19,5 +20,6 @@ export default combineReducers({
   referenceGrammarID,
   sendBoxValue,
   sendTimeout,
+  sendTyping,
   suggestedActions
 })

packages/core/src/reducers/activities.js

@@ -25,9 +25,14 @@ function findByClientActivityID(clientActivityID) {
 function upsertActivityWithSort(activities, nextActivity) {
   const {
     channelData: { clientActivityID: nextClientActivityID } = {},
-    from: { id: nextFromID } = {}
+    from: { id: nextFromID, role: nextFromRole } = {},
+    type: nextType
   } = nextActivity;
 
+  if (nextType === 'typing' && nextFromRole === 'user') {
+    return activities;
+  }
+
   const nextTimestamp = Date.parse(nextActivity.timestamp);
   const nextActivities = activities.filter(({ channelData: { clientActivityID } = {}, from, type }) =>
     // We will remove all "typing" and "sending messages" activities

packages/core/src/reducers/sendTyping.js

@@ -0,0 +1,15 @@
+import { SET_SEND_TYPING } from '../actions/setSendTyping';
+
+const DEFAULT_STATE = false;
+
+export default function (state = DEFAULT_STATE, { payload, type }) {
+  switch (type) {
+    case SET_SEND_TYPING:
+      state = payload.sendTyping;
+      break;
+
+    default: break;
+  }
+
+  return state;
+}

packages/core/src/sagas/removeIncomingTypingAfterIntervalSaga.js

@@ -1,7 +1,7 @@
 import {
   call,
   put,
-  takeLatest
+  takeEvery
 } from 'redux-saga/effects';
 
 import deleteActivity from '../actions/deleteActivity';
@@ -12,7 +12,7 @@ function sleep(ms) {
 }
 
 export default function* () {
-  yield takeLatest(
+  yield takeEvery(
     ({ type, payload }) => (
       type === INCOMING_ACTIVITY
       && payload.activity.type === 'typing'
@@ -22,6 +22,9 @@ export default function* () {
 }
 
 function* removeActivityAfterInterval({ payload: { activity: { id } } }) {
+  // TODO: [P2] We could optimize here.
+  //       Given there is an activity typing activity, when the bot send another typing activity, we will remove the first one.
+  //       That means, we don't actually need to remove it anymore, and could cancel out this call.
   yield call(sleep, 5000);
   yield put(deleteActivity(id));
 }

packages/core/src/sagas/sendTypingOnSetSendBoxSaga.js

@@ -9,7 +9,7 @@ import {
 
 import { SET_SEND_BOX } from '../actions/setSendBox';
 import { SET_SEND_TYPING } from '../actions/setSendTyping';
-import postActivity from '../actions/postActivity';
+import postActivity, { POST_ACTIVITY } from '../actions/postActivity';
 
 import whileConnected from './effects/whileConnected';
 
@@ -38,19 +38,26 @@ function* sendTypingOnSetSendBox() {
     let lastSend = 0;
     const task = yield takeLatest(
       ({ payload, type }) => (
-        type === SET_SEND_BOX
-        && payload.text
+        (type === SET_SEND_BOX && payload.text)
+
+        // Stop sending pending typing indicator if the user has posted anything.
+        // We send typing indicator in a debounce way (t = 0, t = 3000, t = 6000).
+        // When the user type, and then post the activity at t = 1500, we still have a pending typing indicator at t = 3000.
+        // This code is to cancel the typing indicator at t = 3000.
+        || (type === POST_ACTIVITY && payload.activity.type !== 'typing')
       ),
-      function* () {
-        const interval = SEND_INTERVAL - Date.now() + lastSend;
+      function* ({ type }) {
+        if (type === SET_SEND_BOX) {
+          const interval = SEND_INTERVAL - Date.now() + lastSend;
 
-        if (interval > 0) {
-          yield call(sleep, interval);
-        }
+          if (interval > 0) {
+            yield call(sleep, interval);
+          }
 
-        yield put(postActivity({ type: 'typing' }));
+          yield put(postActivity({ type: 'typing' }));
 
-        lastSend = Date.now();
+          lastSend = Date.now();
+        }
       }
     );
 

samples/07.b.customization-send-typing-indicator/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>Web Chat: Send typing indicator</title>
+    <!--
+      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
+      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
+      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
+    -->
+    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
+    <style>
+      html, body { height: 100% }
+      body { margin: 0 }
+
+      #webchat,
+      #webchat > * {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="webchat" role="main"></div>
+    <script>
+      (async function () {
+        // In this demo, we are using Direct Line token from MockBot.
+        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
+        // You should never put the Direct Line secret in the browser or client app.
+        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
+
+        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+        const { token } = await res.json();
+
+        // The following code is added for demo purpose only, it will send "echo-typing" to our MockBot when connection is established.
+        // When "echo-typing" is enabled on MockBot, it will echo back all typing indicator send from the user.
+        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
+          if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
+            dispatch({ type: 'WEB_CHAT/SEND_MESSAGE', payload: { text: 'echo-typing' } });
+          }
+
+          return next(action);
+        });
+
+        window.WebChat.renderWebChat({
+          directLine: window.WebChat.createDirectLine({ token }),
+
+          // Web Chat will send typing activity, on behalf of the user, when "sendTyping" is set to true.
+          // The typing indicator will be send when the send box by any means, including speech.
+          sendTyping: true,
+
+          // The following code is added for demo purpose only.
+          store
+        }, document.getElementById('webchat'));
+
+        document.querySelector('#webchat > *').focus();
+      })().catch(err => console.error(err));
+    </script>
+  </body>
+</html>

samples/07.customization-timestamp-grouping/README.md

@@ -0,0 +1,7 @@
+# Redirect information
+
+Due to renaming our sample files, the sample links on our NPM page are temporarily pointing to the wrong URL.
+
+Please click the link below to be redirected. Sorry for the inconvenience.
+
+## [07.a.customization-timestamp-grouping](./../07.a.customization-timestamp-grouping/)

samples/7.customization-timestamp-grouping/README.md

@@ -1,7 +1,7 @@
 # Redirect information
 
-Due to renaming our sample files, the sample links on our NPM page are temporarily pointing to the wrong URL. 
+Due to renaming our sample files, the sample links on our NPM page are temporarily pointing to the wrong URL.
 
 Please click the link below to be redirected. Sorry for the inconvenience.
 
-## [07.customization-timestamp-grouping](./../07.customization-timestamp-grouping/)
+## [07.a.customization-timestamp-grouping](./../07.a.customization-timestamp-grouping/)