botframework-webchat-core 4.15.1 → 4.15.2-main.20220413.af6e8a3

package/src/actions/markActivity.ts

@@ -0,0 +1,23 @@
+type MarkActivityActionType = 'WEB_CHAT/MARK_ACTIVITY';
+
+type MarkActivityAction = {
+  payload: { activityID: string; name: string; value: any };
+  type: MarkActivityActionType;
+};
+
+const MARK_ACTIVITY: MarkActivityActionType = 'WEB_CHAT/MARK_ACTIVITY';
+
+function markActivity({ id: activityID }: { id: string }, name: string, value: any): MarkActivityAction {
+  return {
+    type: MARK_ACTIVITY,
+    payload: {
+      activityID,
+      name,
+      value
+    }
+  };
+}
+
+export default markActivity;
+export { MARK_ACTIVITY };
+export type { MarkActivityAction };

package/src/actions/postActivity.ts

@@ -0,0 +1,48 @@
+import type { WebChatActivity } from '../types/WebChatActivity';
+
+type PostActivityActionType = 'DIRECT_LINE/POST_ACTIVITY';
+type PostActivityFulfilledActionType = 'DIRECT_LINE/POST_ACTIVITY_FULFILLED';
+type PostActivityPendingActionType = 'DIRECT_LINE/POST_ACTIVITY_PENDING';
+type PostActivityRejectedActionType = 'DIRECT_LINE/POST_ACTIVITY_REJECTED';
+
+type PostActivityAction = {
+  meta: { method: string };
+  payload: { activity: WebChatActivity };
+  type: PostActivityActionType;
+};
+
+type PostActivityFulfilledAction = {
+  meta: { clientActivityID: string; method: string };
+  payload: { activity: WebChatActivity };
+  type: PostActivityFulfilledActionType;
+};
+
+type PostActivityPendingAction = {
+  meta: { clientActivityID: string; method: string };
+  payload: { activity: WebChatActivity };
+  type: PostActivityPendingActionType;
+};
+
+type PostActivityRejectedAction = {
+  error: true;
+  meta: { clientActivityID: string; method: string };
+  payload: Error;
+  type: PostActivityRejectedActionType;
+};
+
+const POST_ACTIVITY: PostActivityActionType = 'DIRECT_LINE/POST_ACTIVITY';
+const POST_ACTIVITY_FULFILLED: PostActivityFulfilledActionType = `${POST_ACTIVITY}_FULFILLED`;
+const POST_ACTIVITY_PENDING: PostActivityPendingActionType = `${POST_ACTIVITY}_PENDING`;
+const POST_ACTIVITY_REJECTED: PostActivityRejectedActionType = `${POST_ACTIVITY}_REJECTED`;
+
+function postActivity(activity: WebChatActivity, method = 'keyboard'): PostActivityAction {
+  return {
+    type: POST_ACTIVITY,
+    meta: { method },
+    payload: { activity }
+  };
+}
+
+export default postActivity;
+export { POST_ACTIVITY, POST_ACTIVITY_FULFILLED, POST_ACTIVITY_PENDING, POST_ACTIVITY_REJECTED };
+export type { PostActivityAction, PostActivityFulfilledAction, PostActivityPendingAction, PostActivityRejectedAction };

package/src/definitions/speakingActivity.js

@@ -1,5 +1,5 @@
 // If true, the activity is in the queue and needs to be spoken.
 
 export default function speakingActivity(activity) {
-  return activity.channelData && activity.channelData.speak;
+  return activity.channelData?.speak;
 }

package/src/index.ts

@@ -3,19 +3,6 @@ import * as DictateState from './constants/DictateState';
 import clearSuggestedActions from './actions/clearSuggestedActions';
 import connect from './actions/connect';
 import createStore, { withDevTools as createStoreWithDevTools } from './createStore';
-import DirectLineActivity from './types/external/DirectLineActivity';
-import DirectLineAnimationCard from './types/external/DirectLineAnimationCard';
-import DirectLineAttachment from './types/external/DirectLineAttachment';
-import DirectLineAudioCard from './types/external/DirectLineAudioCard';
-import DirectLineCardAction from './types/external/DirectLineCardAction';
-import DirectLineHeroCard from './types/external/DirectLineHeroCard';
-import DirectLineJSBotConnection from './types/external/DirectLineJSBotConnection';
-import DirectLineOAuthCard from './types/external/DirectLineOAuthCard';
-import DirectLineReceiptCard from './types/external/DirectLineReceiptCard';
-import DirectLineSignInCard from './types/external/DirectLineSignInCard';
-import DirectLineSuggestedAction from './types/external/DirectLineSuggestedAction';
-import DirectLineThumbnailCard from './types/external/DirectLineThumbnailCard';
-import DirectLineVideoCard from './types/external/DirectLineVideoCard';
 import disconnect from './actions/disconnect';
 import dismissNotification from './actions/dismissNotification';
 import emitTypingIndicator from './actions/emitTypingIndicator';
@@ -43,6 +30,21 @@ import stopSpeakingActivity from './actions/stopSpeakingActivity';
 import submitSendBox from './actions/submitSendBox';
 import warnOnce from './utils/warnOnce';
 
+import type { DirectLineActivity } from './types/external/DirectLineActivity';
+import type { DirectLineAnimationCard } from './types/external/DirectLineAnimationCard';
+import type { DirectLineAttachment } from './types/external/DirectLineAttachment';
+import type { DirectLineAudioCard } from './types/external/DirectLineAudioCard';
+import type { DirectLineCardAction } from './types/external/DirectLineCardAction';
+import type { DirectLineHeroCard } from './types/external/DirectLineHeroCard';
+import type { DirectLineJSBotConnection } from './types/external/DirectLineJSBotConnection';
+import type { DirectLineOAuthCard } from './types/external/DirectLineOAuthCard';
+import type { DirectLineReceiptCard } from './types/external/DirectLineReceiptCard';
+import type { DirectLineSignInCard } from './types/external/DirectLineSignInCard';
+import type { DirectLineSuggestedAction } from './types/external/DirectLineSuggestedAction';
+import type { DirectLineThumbnailCard } from './types/external/DirectLineThumbnailCard';
+import type { DirectLineVideoCard } from './types/external/DirectLineVideoCard';
+import type { WebChatActivity } from './types/WebChatActivity';
+
 const Constants = { ActivityClientState, DictateState };
 const version = process.env.npm_package_version;
 
@@ -94,5 +96,6 @@ export type {
   DirectLineSuggestedAction,
   DirectLineThumbnailCard,
   DirectLineVideoCard,
-  OneOrMany
+  OneOrMany,
+  WebChatActivity
 };

package/src/reducer.ts

@@ -1,7 +1,6 @@
 import { combineReducers } from 'redux';
 
 import activities from './reducers/activities';
-import clockSkewAdjustment from './reducers/clockSkewAdjustment';
 import connectivityStatus from './reducers/connectivityStatus';
 import dictateInterims from './reducers/dictateInterims';
 import dictateState from './reducers/dictateState';
@@ -19,7 +18,6 @@ import typing from './reducers/typing';
 
 export default combineReducers({
   activities,
-  clockSkewAdjustment,
   connectivityStatus,
   dictateInterims,
   dictateState,

package/src/reducers/activities.ts

@@ -0,0 +1,172 @@
+/* eslint no-magic-numbers: ["error", { "ignore": [0, 1, -1] }] */
+
+import updateIn from 'simple-update-in';
+
+import { DELETE_ACTIVITY } from '../actions/deleteActivity';
+import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
+import { MARK_ACTIVITY } from '../actions/markActivity';
+import { POST_ACTIVITY_FULFILLED, POST_ACTIVITY_PENDING, POST_ACTIVITY_REJECTED } from '../actions/postActivity';
+import { SEND_FAILED, SENDING, SENT } from '../constants/ActivityClientState';
+import type { DeleteActivityAction } from '../actions/deleteActivity';
+import type { IncomingActivityAction } from '../actions/incomingActivity';
+import type { MarkActivityAction } from '../actions/markActivity';
+import type {
+  PostActivityFulfilledAction,
+  PostActivityPendingAction,
+  PostActivityRejectedAction
+} from '../actions/postActivity';
+import type { WebChatActivity } from '../types/WebChatActivity';
+
+type ActivitiesAction =
+  | DeleteActivityAction
+  | IncomingActivityAction
+  | MarkActivityAction
+  | PostActivityFulfilledAction
+  | PostActivityPendingAction
+  | PostActivityRejectedAction;
+
+type ActivitiesStateType = WebChatActivity[];
+
+const DEFAULT_STATE: ActivitiesStateType = [];
+const DIRECT_LINE_PLACEHOLDER_URL =
+  'https://docs.botframework.com/static/devportal/client/images/bot-framework-default-placeholder.png';
+
+function getClientActivityID(activity: WebChatActivity): string | undefined {
+  return activity.channelData?.clientActivityID;
+}
+
+function findByClientActivityID(clientActivityID: string): (activity: WebChatActivity) => boolean {
+  return (activity: WebChatActivity) => getClientActivityID(activity) === clientActivityID;
+}
+
+function patchActivity(activity: WebChatActivity, lastActivity: WebChatActivity): WebChatActivity {
+  // Direct Line channel will return a placeholder image for the user-uploaded image.
+  // As observed, the URL for the placeholder image is https://docs.botframework.com/static/devportal/client/images/bot-framework-default-placeholder.png.
+  // To make our code simpler, we are removing the value if "contentUrl" is pointing to a placeholder image.
+
+  // TODO: [P2] #2869 This "contentURL" removal code should be moved to DirectLineJS adapter.
+
+  // Also, if the "contentURL" starts with "blob:", this means the user is uploading a file (the URL is constructed by URL.createObjectURL)
+  // Although the copy/reference of the file is temporary in-memory, to make the UX consistent across page refresh, we do not allow the user to re-download the file either.
+
+  activity = updateIn(activity, ['attachments', () => true, 'contentUrl'], (contentUrl: string) => {
+    if (contentUrl !== DIRECT_LINE_PLACEHOLDER_URL && !/^blob:/iu.test(contentUrl)) {
+      return contentUrl;
+    }
+  });
+
+  // If the message does not have sequence ID, use these fallback values:
+  // 1. "timestamp" field
+  //    - outgoing activity will not have "timestamp" field
+  // 2. last activity sequence ID (or 0) + 0.001
+  //    - best effort to put this message the last one in the chat history
+  activity = updateIn(activity, ['channelData', 'webchat:sequence-id'], (sequenceId?: number) =>
+    typeof sequenceId === 'number'
+      ? sequenceId
+      : typeof activity.timestamp !== 'undefined'
+      ? +new Date(activity.timestamp)
+      : // We assume there will be no more than 1,000 messages sent before receiving server response.
+        // If there are more than 1,000 messages, some messages will get reordered and appear jumpy after receiving server response.
+        // eslint-disable-next-line no-magic-numbers
+        (lastActivity?.channelData?.['webchat:sequence-id'] || 0) + 0.001
+  );
+
+  // TODO: [P1] #3953 We should move this patching logic to a DLJS wrapper for simplicity.
+  activity = updateIn(activity, ['channelData', 'webchat:sequence-id'], (sequenceId: number) =>
+    typeof sequenceId === 'number' ? sequenceId : +new Date(activity.timestamp || 0) || 0
+  );
+
+  return activity;
+}
+
+function upsertActivityWithSort(activities: WebChatActivity[], nextActivity: WebChatActivity): WebChatActivity[] {
+  nextActivity = patchActivity(nextActivity, activities[activities.length - 1]);
+
+  const { channelData: { clientActivityID: nextClientActivityID, 'webchat:sequence-id': nextSequenceId } = {} } =
+    nextActivity;
+
+  const nextActivities = activities.filter(
+    ({ channelData: { clientActivityID } = {}, id }) =>
+      // We will remove all "sending messages" activities and activities with same ID
+      // "clientActivityID" is unique and used to track if the message has been sent and echoed back from the server
+      !(nextClientActivityID && clientActivityID === nextClientActivityID) && !(id && id === nextActivity.id)
+  );
+
+  // Then, find the right (sorted) place to insert the new activity at, based on timestamp
+  // Since clockskew might happen, we will ignore timestamp on messages that are sending
+
+  const indexToInsert = nextActivities.findIndex(
+    ({ channelData: { state, 'webchat:sequence-id': sequenceId } = {} }) =>
+      (sequenceId || 0) > (nextSequenceId || 0) && state !== SENDING && state !== SEND_FAILED
+  );
+
+  // If no right place are found, append it
+  nextActivities.splice(~indexToInsert ? indexToInsert : nextActivities.length, 0, nextActivity);
+
+  return nextActivities;
+}
+
+export default function activities(
+  state: ActivitiesStateType = DEFAULT_STATE,
+  action: ActivitiesAction
+): ActivitiesStateType {
+  switch (action.type) {
+    case DELETE_ACTIVITY:
+      state = updateIn(state, [({ id }: WebChatActivity) => id === action.payload.activityID]);
+      break;
+
+    case MARK_ACTIVITY:
+      {
+        const { payload } = action;
+
+        state = updateIn(
+          state,
+          [({ id }: WebChatActivity) => id === payload.activityID, 'channelData', payload.name],
+          () => payload.value
+        );
+      }
+
+      break;
+
+    case POST_ACTIVITY_PENDING:
+      {
+        let {
+          payload: { activity }
+        } = action;
+
+        activity = updateIn(activity, ['channelData', 'state'], () => SENDING);
+
+        state = upsertActivityWithSort(state, activity);
+      }
+
+      break;
+
+    case POST_ACTIVITY_REJECTED:
+      state = updateIn(
+        state,
+        [findByClientActivityID(action.meta.clientActivityID), 'channelData', 'state'],
+        () => SEND_FAILED
+      );
+
+      break;
+
+    case POST_ACTIVITY_FULFILLED:
+      state = updateIn(state, [findByClientActivityID(action.meta.clientActivityID)], () =>
+        // We will replace the activity with the version from the server
+        updateIn(patchActivity(action.payload.activity, state[state.length - 1]), ['channelData', 'state'], () => SENT)
+      );
+
+      break;
+
+    case INCOMING_ACTIVITY:
+      // TODO: [P4] #2100 Move "typing" into Constants.ActivityType
+      state = upsertActivityWithSort(state, action.payload.activity);
+
+      break;
+
+    default:
+      break;
+  }
+
+  return state;
+}

package/src/reducers/typing.js

@@ -18,11 +18,12 @@ export default function lastTyping(state = DEFAULT_STATE, { payload, type }) {
     } = payload;
 
     if (activityType === 'typing') {
-      state = updateIn(state, [id], () => ({
-        at: Date.now(),
-        name,
-        role
-      }));
+      const now = Date.now();
+
+      state = updateIn(state, [id, 'at'], at => at || now);
+      state = updateIn(state, [id, 'last'], () => now);
+      state = updateIn(state, [id, 'name'], () => name);
+      state = updateIn(state, [id, 'role'], () => role);
     } else if (activityType === 'message') {
       state = updateIn(state, [id]);
     }

package/src/sagas/effects/{observeOnce.js → observeOnce.ts}

@@ -1,18 +1,20 @@
 import { call } from 'redux-saga/effects';
 
-export default function observeOnceEffect(observable) {
+import { Observable, Observer, Subscription } from '../../types/external/Observable';
+
+export default function observeOnceEffect<T>(observable: Observable<T>) {
   return call(function* observeOnce() {
-    let subscription;
+    let subscription: Subscription;
 
     try {
       return yield call(
         () =>
-          new Promise((resolve, reject) => {
+          new Promise<T>((resolve, reject) => {
             subscription = observable.subscribe({
               complete: resolve,
               error: reject,
               next: resolve
-            });
+            } as Observer<T>);
           })
       );
     } finally {

package/src/sagas/effects/{whileConnected.js → whileConnected.ts}

@@ -4,13 +4,32 @@ import { CONNECT_FULFILLING } from '../../actions/connect';
 import { DISCONNECT_PENDING } from '../../actions/disconnect';
 import { RECONNECT_PENDING, RECONNECT_FULFILLING } from '../../actions/reconnect';
 
-export default function whileConnectedEffect(fn) {
+import type { DirectLineJSBotConnection } from '../../types/external/DirectLineJSBotConnection';
+
+export default function whileConnectedEffect(
+  fn: ({
+    directLine,
+    userID,
+    username
+  }: {
+    directLine: DirectLineJSBotConnection;
+    userID: string;
+    username: string;
+  }) => void
+) {
   return call(function* whileConnected() {
     for (;;) {
       const {
         meta: { userID, username },
         payload: { directLine }
+      }: {
+        meta: {
+          userID: string;
+          username: string;
+        };
+        payload: { directLine: DirectLineJSBotConnection };
       } = yield take([CONNECT_FULFILLING, RECONNECT_FULFILLING]);
+
       const task = yield fork(fn, { directLine, userID, username });
 
       // When we receive DISCONNECT_PENDING or RECONNECT_PENDING, the Direct Line connection is currently busy and should not be used.

package/src/sagas/{observeActivitySaga.js → observeActivitySaga.ts}

@@ -4,10 +4,13 @@ import updateIn from 'simple-update-in';
 import observeEach from './effects/observeEach';
 import queueIncomingActivity from '../actions/queueIncomingActivity';
 import whileConnected from './effects/whileConnected';
+import type { DirectLineActivity } from '../types/external/DirectLineActivity';
+import type { DirectLineJSBotConnection } from '../types/external/DirectLineJSBotConnection';
+import type { WebChatActivity } from '../types/WebChatActivity';
 
-const PASSTHRU_FN = value => value;
+const PASSTHRU_FN = (value: unknown) => value;
 
-function patchActivityWithFromRole(activity, userID) {
+function patchActivityWithFromRole(activity: DirectLineActivity, userID?: string): DirectLineActivity {
   // Some activities, such as "ConversationUpdate", does not have "from" defined.
   // And although "role" is defined in Direct Line spec, it was not sent over the wire.
   // We normalize the activity here to simplify null-check and logic later.
@@ -28,7 +31,7 @@ function patchActivityWithFromRole(activity, userID) {
   return activity;
 }
 
-function patchNullAsUndefined(activity) {
+function patchNullAsUndefined(activity: DirectLineActivity): DirectLineActivity {
   // These fields are known used in Web Chat and in any cases, they should not be null, but undefined.
   // The only field omitted is "value", as it could be null purposefully.
 
@@ -56,12 +59,28 @@ function patchNullAsUndefined(activity) {
   }, activity);
 }
 
-function* observeActivity({ directLine, userID }) {
-  yield observeEach(directLine.activity$, function* observeActivity(activity) {
+// Patching the `from.name` to be a human readable name.
+// We use the `from.name` for typing indicator, such that it read "John is typing...".
+function patchFromName(activity: DirectLineActivity) {
+  return updateIn(activity, ['from', 'name'], (name: string | undefined): string => {
+    const { channelId, from = {} } = activity;
+
+    if ((channelId === 'directline' || channelId === 'webchat') && from.id === from.name && from.role === 'bot') {
+      return 'Bot';
+    }
+
+    return name;
+  });
+}
+
+function* observeActivity({ directLine, userID }: { directLine: DirectLineJSBotConnection; userID?: string }) {
+  yield observeEach(directLine.activity$, function* observeActivity(activity: DirectLineActivity) {
+    // TODO: [P2] #3953 Move the patching logic to a DirectLineJS wrapper, instead of too close to inners of Web Chat.
     activity = patchNullAsUndefined(activity);
     activity = patchActivityWithFromRole(activity, userID);
+    activity = patchFromName(activity);
 
-    yield put(queueIncomingActivity(activity));
+    yield put(queueIncomingActivity(activity as WebChatActivity));
   });
 }
 

package/src/sagas/{postActivitySaga.js → postActivitySaga.ts}

@@ -1,41 +1,44 @@
 import { all, call, cancelled, put, race, select, take, takeEvery } from 'redux-saga/effects';
 
-import observeOnce from './effects/observeOnce';
-import whileConnected from './effects/whileConnected';
-
-import clockSkewAdjustmentSelector from '../selectors/clockSkewAdjustment';
-import combineSelectors from '../selectors/combineSelectors';
-import dateToLocaleISOString from '../utils/dateToLocaleISOString';
-import languageSelector from '../selectors/language';
-import sendTimeoutSelector from '../selectors/sendTimeout';
-
-import deleteKey from '../utils/deleteKey';
-import sleep from '../utils/sleep';
-import uniqueID from '../utils/uniqueID';
-
+import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
 import {
   POST_ACTIVITY,
   POST_ACTIVITY_FULFILLED,
   POST_ACTIVITY_PENDING,
   POST_ACTIVITY_REJECTED
 } from '../actions/postActivity';
-
-import { INCOMING_ACTIVITY } from '../actions/incomingActivity';
-
-function getTimestamp(date, clockSkewAdjustment = 0) {
-  // "+date" will return epoch time in milliseconds, same as Date.getTime().
-  return new Date(+date + clockSkewAdjustment).toISOString();
-}
-
-function* postActivity(directLine, userID, username, numActivitiesPosted, { meta: { method }, payload: { activity } }) {
-  const { clockSkewAdjustment, locale } = yield select(
-    combineSelectors({ clockSkewAdjustment: clockSkewAdjustmentSelector, locale: languageSelector })
-  );
-  const { attachments } = activity;
+import dateToLocaleISOString from '../utils/dateToLocaleISOString';
+import deleteKey from '../utils/deleteKey';
+import languageSelector from '../selectors/language';
+import observeOnce from './effects/observeOnce';
+import sendTimeoutSelector from '../selectors/sendTimeout';
+import sleep from '../utils/sleep';
+import uniqueID from '../utils/uniqueID';
+import whileConnected from './effects/whileConnected';
+import type { DirectLineActivity } from '../types/external/DirectLineActivity';
+import type { DirectLineJSBotConnection } from '../types/external/DirectLineJSBotConnection';
+import type { IncomingActivityAction } from '../actions/incomingActivity';
+import type {
+  PostActivityAction,
+  PostActivityFulfilledAction,
+  PostActivityPendingAction,
+  PostActivityRejectedAction
+} from '../actions/postActivity';
+import type { WebChatActivity } from '../types/WebChatActivity';
+
+function* postActivity(
+  directLine: DirectLineJSBotConnection,
+  userID: string,
+  username: string,
+  numActivitiesPosted: number,
+  { meta: { method }, payload: { activity } }: PostActivityAction
+) {
+  const attachments = (activity.type === 'message' && activity.attachments) || [];
   const clientActivityID = uniqueID();
-  const now = new Date();
+  const locale = yield select(languageSelector);
   const localTimeZone =
     typeof window.Intl === 'undefined' ? undefined : new Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const now = new Date();
 
   activity = {
     ...deleteKey(activity, 'id'),
@@ -49,9 +52,7 @@ function* postActivity(directLine, userID, username, numActivitiesPosted, { meta
       })),
     channelData: {
       ...deleteKey(activity.channelData, 'state'),
-      clientActivityID,
-      // This is unskewed local timestamp for estimating clock skew.
-      clientTimestamp: getTimestamp(now)
+      clientActivityID
     },
     channelId: 'webchat',
     from: {
@@ -61,10 +62,7 @@ function* postActivity(directLine, userID, username, numActivitiesPosted, { meta
     },
     locale,
     localTimestamp: dateToLocaleISOString(now),
-    localTimezone: localTimeZone,
-    // This timestamp will be replaced by Direct Line Channel in echoback.
-    // We are temporarily adding this timestamp for sorting.
-    timestamp: getTimestamp(now, clockSkewAdjustment)
+    localTimezone: localTimeZone
   };
 
   if (!numActivitiesPosted) {
@@ -81,9 +79,9 @@ function* postActivity(directLine, userID, username, numActivitiesPosted, { meta
     ];
   }
 
-  const meta = { clientActivityID, method };
+  const meta: { clientActivityID: string; method: string } = { clientActivityID, method };
 
-  yield put({ type: POST_ACTIVITY_PENDING, meta, payload: { activity } });
+  yield put({ type: POST_ACTIVITY_PENDING, meta, payload: { activity } } as PostActivityPendingAction);
 
   try {
     // Quirks: We might receive INCOMING_ACTIVITY before the postActivity call completed
@@ -93,10 +91,8 @@ function* postActivity(directLine, userID, username, numActivitiesPosted, { meta
       for (;;) {
         const {
           payload: { activity }
-        } = yield take(INCOMING_ACTIVITY);
-        const { channelData = {}, id } = activity;
-
-        if (channelData.clientActivityID === clientActivityID && id) {
+        }: IncomingActivityAction = yield take(INCOMING_ACTIVITY);
+        if (activity.channelData?.clientActivityID === clientActivityID && activity.id) {
           return activity;
         }
       }
@@ -107,35 +103,48 @@ function* postActivity(directLine, userID, username, numActivitiesPosted, { meta
     //   - Direct Line service only respond on HTTP after bot respond to Direct Line
     // - Activity may take too long time to echo back
 
-    const sendTimeout = yield select(sendTimeoutSelector);
+    const sendTimeout: number = yield select(sendTimeoutSelector);
 
     const {
       send: { echoBack }
-    } = yield race({
+    }: { send: { echoBack: WebChatActivity } } = yield race({
       send: all({
         echoBack: echoBackCall,
-        postActivity: observeOnce(directLine.postActivity(activity))
+        postActivity: observeOnce(directLine.postActivity(activity as DirectLineActivity))
       }),
       timeout: call(() => sleep(sendTimeout).then(() => Promise.reject(new Error('timeout'))))
     });
 
-    yield put({ type: POST_ACTIVITY_FULFILLED, meta, payload: { activity: echoBack } });
+    yield put({ type: POST_ACTIVITY_FULFILLED, meta, payload: { activity: echoBack } } as PostActivityFulfilledAction);
   } catch (err) {
     console.error('botframework-webchat: Failed to post activity to chat adapter.', err);
 
-    yield put({ type: POST_ACTIVITY_REJECTED, error: true, meta, payload: err });
+    yield put({ type: POST_ACTIVITY_REJECTED, error: true, meta, payload: err } as PostActivityRejectedAction);
   } finally {
     if (yield cancelled()) {
-      yield put({ type: POST_ACTIVITY_REJECTED, error: true, meta, payload: new Error('cancelled') });
+      yield put({
+        type: POST_ACTIVITY_REJECTED,
+        error: true,
+        meta,
+        payload: new Error('cancelled')
+      } as PostActivityRejectedAction);
     }
   }
 }
 
 export default function* postActivitySaga() {
-  yield whileConnected(function* postActivityWhileConnected({ directLine, userID, username }) {
+  yield whileConnected(function* postActivityWhileConnected({
+    directLine,
+    userID,
+    username
+  }: {
+    directLine: DirectLineJSBotConnection;
+    userID: string;
+    username: string;
+  }) {
     let numActivitiesPosted = 0;
 
-    yield takeEvery(POST_ACTIVITY, function* postActivityWrapper(action) {
+    yield takeEvery(POST_ACTIVITY, function* postActivityWrapper(action: PostActivityAction) {
       yield* postActivity(directLine, userID, username, numActivitiesPosted++, action);
     });
   });

package/src/sagas/sendFilesToPostActivitySaga.js

@@ -1,7 +1,7 @@
 import { put, takeEvery } from 'redux-saga/effects';
+import mime from 'mime';
 
 import { SEND_FILES } from '../actions/sendFiles';
-import mime from '../utils/mime-wrapper';
 import postActivity from '../actions/postActivity';
 import whileConnected from './effects/whileConnected';
 

package/src/selectors/activities.ts

@@ -0,0 +1,12 @@
+import type { ReduxState } from '../types/internal/ReduxState';
+import type { WebChatActivity } from '../types/WebChatActivity';
+
+const activities = ({ activities }: ReduxState) => activities;
+
+const of = (predicate: (activity: WebChatActivity) => boolean) => (state: ReduxState) =>
+  activities(state).filter(predicate);
+const ofID = (targetID: string) => of(({ id }) => id === targetID);
+const ofType = (targetType: string) => of(({ type }) => type === targetType);
+
+export default activities;
+export { of, ofID, ofType };