botframework-webchat-api 4.14.1 → 4.15.2-main.20220413.af6e8a3

package/src/hooks/Composer.tsx

@@ -2,18 +2,14 @@ import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import updateIn from 'simple-update-in';
-
 import {
   clearSuggestedActions,
   connect as createConnectAction,
   createStore,
-  DirectLineActivity,
-  DirectLineJSBotConnection,
   disconnect,
   dismissNotification,
   emitTypingIndicator,
   markActivity,
-  OneOrMany,
   postActivity,
   sendEvent,
   sendFiles,
@@ -34,8 +30,11 @@ import {
   stopSpeakingActivity,
   submitSendBox
 } from 'botframework-webchat-core';
+import type { DirectLineJSBotConnection, OneOrMany, WebChatActivity } from 'botframework-webchat-core';
 
 import { default as WebChatAPIContext } from './internal/WebChatAPIContext';
+import ActivityAcknowledgementComposer from '../providers/ActivityAcknowledgement/ActivityAcknowledgementComposer';
+import ActivityKeyerComposer from '../providers/ActivityKeyer/ActivityKeyerComposer';
 import ActivityMiddleware from '../types/ActivityMiddleware';
 import ActivityStatusMiddleware from '../types/ActivityStatusMiddleware';
 import AttachmentForScreenReaderMiddleware from '../types/AttachmentForScreenReaderMiddleware';
@@ -63,6 +62,7 @@ import TelemetryMeasurementEvent, { TelemetryExceptionMeasurementEvent } from '.
 import ToastMiddleware from '../types/ToastMiddleware';
 import Tracker from './internal/Tracker';
 import TypingIndicatorMiddleware from '../types/TypingIndicatorMiddleware';
+import useMarkAllAsAcknowledged from './useMarkAllAsAcknowledged';
 import WebChatReduxContext, { useDispatch } from './internal/WebChatReduxContext';
 
 import applyMiddleware, {
@@ -98,7 +98,7 @@ const DISPATCHERS = {
   submitSendBox
 };
 
-function createCardActionContext({ cardActionMiddleware, directLine, dispatch }) {
+function createCardActionContext({ cardActionMiddleware, directLine, dispatch, markAllAsAcknowledged }) {
   const runMiddleware = applyMiddleware(
     'card action',
     ...singleToArray(cardActionMiddleware),
@@ -106,8 +106,10 @@ function createCardActionContext({ cardActionMiddleware, directLine, dispatch })
   )({ dispatch });
 
   return {
-    onCardAction: (cardAction, { target }: { target?: any } = {}) =>
-      runMiddleware({
+    onCardAction: (cardAction, { target }: { target?: any } = {}) => {
+      markAllAsAcknowledged();
+
+      return runMiddleware({
         cardAction,
         getSignInUrl:
           cardAction.type === 'signin'
@@ -131,7 +133,8 @@ function createCardActionContext({ cardActionMiddleware, directLine, dispatch })
               }
             : null,
         target
-      })
+      });
+    }
   };
 }
 
@@ -167,6 +170,12 @@ function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStri
   return { ...localizedStrings, ...overrideLocalizedStrings };
 }
 
+// It seems "react/require-default-props" did not pick up `ComposerCore.defaultProps`.
+// And it falsely complaint `optional?: string` must have a corresponding `ComposerCore.defaultProps.optional = undefined`, even we already set it below.
+// Since we set both TypeScript `Props` class and `ComposerCore.propTypes`, this check will be done there as well.
+// Ignoring it in TypeScript version should be safe, as we have `propTypes` version to protect us.
+
+/* eslint-disable react/require-default-props */
 type ComposerCoreProps = {
   activityMiddleware?: OneOrMany<ActivityMiddleware>;
   activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware>;
@@ -182,13 +191,12 @@ type ComposerCoreProps = {
   grammars?: any;
   groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware>;
   internalErrorBoxClass?: React.Component | Function;
-  internalRenderErrorBox?: any;
   locale?: string;
   onTelemetry?: (event: TelemetryMeasurementEvent) => void;
   overrideLocalizedStrings?: LocalizedStrings | ((strings: LocalizedStrings, language: string) => LocalizedStrings);
   renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
   scrollToEndButtonMiddleware?: OneOrMany<ScrollToEndButtonMiddleware>;
-  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: DirectLineActivity) => void;
+  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: WebChatActivity) => void;
   sendTypingIndicator?: boolean;
   styleOptions?: StyleOptions;
   toastMiddleware?: OneOrMany<ToastMiddleware>;
@@ -213,6 +221,7 @@ type ComposerCoreProps = {
   /** @deprecated Please use "typingIndicatorRenderer" instead. */
   typingIndicatorRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
 };
+/* eslint-enable react/require-default-props */
 
 const ComposerCore: FC<ComposerCoreProps> = ({
   activityMiddleware,
@@ -289,16 +298,17 @@ const ComposerCore: FC<ComposerCoreProps> = ({
     };
   }, [dispatch, directLine, userID, username]);
 
-  const cardActionContext = useMemo(() => createCardActionContext({ cardActionMiddleware, directLine, dispatch }), [
-    cardActionMiddleware,
-    directLine,
-    dispatch
-  ]);
+  const markAllAsAcknowledged = useMarkAllAsAcknowledged();
+
+  const cardActionContext = useMemo(
+    () => createCardActionContext({ cardActionMiddleware, directLine, dispatch, markAllAsAcknowledged }),
+    [cardActionMiddleware, directLine, dispatch, markAllAsAcknowledged]
+  );
 
-  const patchedSelectVoice = useMemo(() => selectVoice || defaultSelectVoice.bind(null, { language: locale }), [
-    locale,
-    selectVoice
-  ]);
+  const patchedSelectVoice = useMemo(
+    () => selectVoice || defaultSelectVoice.bind(null, { language: locale }),
+    [locale, selectVoice]
+  );
 
   const groupActivitiesContext = useMemo(
     () =>
@@ -310,7 +320,13 @@ const ComposerCore: FC<ComposerCoreProps> = ({
   );
 
   const hoistedDispatchers = useMemo(
-    () => mapMap(DISPATCHERS, dispatcher => (...args) => dispatch(dispatcher(...args))),
+    () =>
+      mapMap(
+        DISPATCHERS,
+        dispatcher =>
+          (...args) =>
+            dispatch(dispatcher(...args))
+      ),
     [dispatch]
   );
 
@@ -358,13 +374,15 @@ const ComposerCore: FC<ComposerCoreProps> = ({
         'activity',
         { strict: false },
         ...singleToArray(activityMiddleware),
-        () => () => ({ activity }) => {
-          if (activity) {
-            throw new Error(`No renderer for activity of type "${activity.type}"`);
-          } else {
-            throw new Error('No activity to render');
+        () =>
+          () =>
+          ({ activity }) => {
+            if (activity) {
+              throw new Error(`No renderer for activity of type "${activity.type}"`);
+            } else {
+              throw new Error('No activity to render');
+            }
           }
-        }
       )({})
     );
   }, [activityMiddleware, activityRenderer]);
@@ -392,19 +410,21 @@ const ComposerCore: FC<ComposerCoreProps> = ({
         'attachment for screen reader',
         { strict: true },
         ...singleToArray(attachmentForScreenReaderMiddleware),
-        () => () => ({ attachment }) => {
-          if (attachment) {
-            console.warn(`No renderer for attachment for screen reader of type "${attachment.contentType}"`);
-            return false;
+        () =>
+          () =>
+          ({ attachment }) => {
+            if (attachment) {
+              console.warn(`No renderer for attachment for screen reader of type "${attachment.contentType}"`);
+              return false;
+            }
+
+            return () => {
+              /**
+               * @todo TODO: [P4] Might be able to throw without returning a function -- investigate and possibly fix
+               */
+              throw new Error('No attachment to render');
+            };
           }
-
-          return () => {
-            /**
-             * @todo TODO: [P4] Might be able to throw without returning a function -- investigate and possibly fix
-             */
-            throw new Error('No attachment to render');
-          };
-        }
       )({}),
     [attachmentForScreenReaderMiddleware]
   );
@@ -422,13 +442,15 @@ const ComposerCore: FC<ComposerCoreProps> = ({
     return applyMiddlewareForLegacyRenderer(
       'attachment',
       ...singleToArray(attachmentMiddleware),
-      () => () => ({ attachment }) => {
-        if (attachment) {
-          throw new Error(`No renderer for attachment of type "${attachment.contentType}"`);
-        } else {
-          throw new Error('No attachment to render');
+      () =>
+        () =>
+        ({ attachment }) => {
+          if (attachment) {
+            throw new Error(`No renderer for attachment of type "${attachment.contentType}"`);
+          } else {
+            throw new Error('No attachment to render');
+          }
         }
-      }
     )({});
   }, [attachmentMiddleware, attachmentRenderer]);
 
@@ -440,8 +462,11 @@ const ComposerCore: FC<ComposerCoreProps> = ({
 
     return (
       avatarRenderer ||
-      applyMiddlewareForRenderer('avatar', { strict: false }, ...singleToArray(avatarMiddleware), () => () => () =>
-        false
+      applyMiddlewareForRenderer(
+        'avatar',
+        { strict: false },
+        ...singleToArray(avatarMiddleware),
+        () => () => () => false
       )({})
     );
   }, [avatarMiddleware, avatarRenderer]);
@@ -458,13 +483,15 @@ const ComposerCore: FC<ComposerCoreProps> = ({
         'toast',
         { strict: false },
         ...singleToArray(toastMiddleware),
-        () => () => ({ notification }) => {
-          if (notification) {
-            throw new Error(`No renderer for notification of type "${notification.contentType}"`);
-          } else {
-            throw new Error('No notification to render');
+        () =>
+          () =>
+          ({ notification }) => {
+            if (notification) {
+              throw new Error(`No renderer for notification of type "${notification.contentType}"`);
+            } else {
+              throw new Error('No notification to render');
+            }
           }
-        }
       )({})
     );
   }, [toastMiddleware, toastRenderer]);
@@ -636,6 +663,8 @@ ComposerCore.propTypes = {
   cardActionMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   children: PropTypes.any,
   dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
+  // PropTypes.shape({ ... }) did not honor isRequired for its members.
+  // @ts-ignore
   directLine: PropTypes.shape({
     activity$: PropTypes.shape({
       subscribe: PropTypes.func.isRequired
@@ -672,7 +701,10 @@ ComposerCore.propTypes = {
   username: PropTypes.string
 };
 
-type ComposerProps = ComposerCoreProps & { store?: any };
+type ComposerProps = ComposerCoreProps & {
+  internalRenderErrorBox?: any;
+  store?: any;
+};
 
 // We will create a Redux store if it was not passed in
 const Composer: FC<ComposerProps> = ({ internalRenderErrorBox, onTelemetry, store, ...props }) => {
@@ -696,7 +728,11 @@ const Composer: FC<ComposerProps> = ({ internalRenderErrorBox, onTelemetry, stor
   ) : (
     <ErrorBoundary onError={handleError}>
       <Provider context={WebChatReduxContext} store={memoizedStore}>
-        <ComposerCore internalRenderErrorBox={internalRenderErrorBox} onTelemetry={onTelemetry} {...props} />
+        <ActivityKeyerComposer>
+          <ActivityAcknowledgementComposer>
+            <ComposerCore onTelemetry={onTelemetry} {...props} />
+          </ActivityAcknowledgementComposer>
+        </ActivityKeyerComposer>
       </Provider>
     </ErrorBoundary>
   );

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
 import useActiveTyping from './useActiveTyping';
 import useActivities from './useActivities';
+import useActivityKeys from './useActivityKeys';
+import useActivityKeysByRead from './useActivityKeysByRead';
 import useAvatarForBot from './useAvatarForBot';
 import useAvatarForUser from './useAvatarForUser';
 import useByteFormatter from './useByteFormatter';
@@ -17,16 +19,24 @@ import useDirection from './useDirection';
 import useDisabled from './useDisabled';
 import useDismissNotification from './useDismissNotification';
 import useEmitTypingIndicator from './useEmitTypingIndicator';
+import useGetActivityByKey from './useGetActivityByKey';
+import useGetHasAcknowledgedByActivityKey from './useGetHasAcknowledgedByActivityKey';
+import useGetKeyByActivity from './useGetKeyByActivity';
+import useGetKeyByActivityId from './useGetKeyByActivityId';
 import useGetSendTimeoutForActivity from './useGetSendTimeoutForActivity';
 import useGrammars from './useGrammars';
 import useGroupActivities from './useGroupActivities';
 import useGroupTimestamp from './useGroupTimestamp';
 import useLanguage from './useLanguage';
+import useLastAcknowledgedActivityKey from './useLastAcknowledgedActivityKey';
+import useLastReadActivityKey from './useLastReadActivityKey';
 import useLastTypingAt from './useLastTypingAt';
 import useLocalize from './useLocalize'; // Deprecated on or after 2022-02-12
 import useLocalizeDate from './useLocalizeDate'; // Deprecated on or after 2022-02-12
 import useLocalizer from './useLocalizer';
 import useMarkActivityAsSpoken from './useMarkActivityAsSpoken';
+import useMarkActivityKeyAsRead from './useMarkActivityKeyAsRead';
+import useMarkAllAsAcknowledged from './useMarkAllAsAcknowledged';
 import usePerformCardAction from './usePerformCardAction';
 import usePostActivity from './usePostActivity';
 import useReferenceGrammarID from './useReferenceGrammarID';
@@ -64,6 +74,8 @@ import useVoiceSelector from './useVoiceSelector';
 export {
   useActiveTyping,
   useActivities,
+  useActivityKeys,
+  useActivityKeysByRead,
   useAvatarForBot,
   useAvatarForUser,
   useByteFormatter,
@@ -81,16 +93,24 @@ export {
   useDisabled,
   useDismissNotification,
   useEmitTypingIndicator,
+  useGetActivityByKey,
+  useGetHasAcknowledgedByActivityKey,
+  useGetKeyByActivity,
+  useGetKeyByActivityId,
   useGetSendTimeoutForActivity,
   useGrammars,
   useGroupActivities,
   useGroupTimestamp,
   useLanguage,
+  useLastAcknowledgedActivityKey,
+  useLastReadActivityKey,
   useLastTypingAt,
   useLocalize,
   useLocalizeDate,
   useLocalizer,
   useMarkActivityAsSpoken,
+  useMarkActivityKeyAsRead,
+  useMarkAllAsAcknowledged,
   usePerformCardAction,
   usePostActivity,
   useReferenceGrammarID,

package/src/hooks/internal/WebChatAPIContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { DirectLineActivity, DirectLineJSBotConnection } from 'botframework-webchat-core';
+import type { DirectLineJSBotConnection, WebChatActivity } from 'botframework-webchat-core';
 
 import { AttachmentForScreenReaderComponentFactory } from '../../types/AttachmentForScreenReaderMiddleware';
 import { AvatarComponentFactory } from '../../types/AvatarMiddleware';
@@ -38,10 +38,10 @@ type WebChatAPIContext = {
   markActivity?: ({ id: string }, name: string, value?: any) => void;
   onCardAction?: PerformCardAction;
   onTelemetry?: (event: TelemetryMeasurementEvent) => void;
-  postActivity?: (activity: DirectLineActivity) => Observable<string>;
+  postActivity?: (activity: WebChatActivity) => Observable<string>;
   renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
   scrollToEndButtonRenderer?: ScrollToEndButtonComponentFactory;
-  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: DirectLineActivity) => void;
+  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: WebChatActivity) => void;
   sendEvent?: (name: string, value: any) => void;
   sendFiles?: (files: File[]) => void;
   sendMessage?: (text: string, method?: string, { channelData }?: { channelData?: any }) => void;

package/src/hooks/internal/useCreateActivityRendererInternal.ts

@@ -14,32 +14,33 @@ export default function useCreateActivityRendererInternal(
   const renderAttachment: RenderAttachment = renderAttachmentOverride || defaultRenderAttachment;
 
   return useMemo(
-    () => (...createActivityRendererOptions) => {
-      const renderActivity = createActivityRenderer(...createActivityRendererOptions);
+    () =>
+      (...createActivityRendererOptions) => {
+        const renderActivity = createActivityRenderer(...createActivityRendererOptions);
 
-      if (!renderActivity) {
-        return false;
-      }
-
-      return renderActivityOptions => {
-        if (isValidElement(renderActivity)) {
-          return renderActivity;
+        if (!renderActivity) {
+          return false;
         }
 
-        const activityElement = renderActivity(
-          (...renderAttachmentArgs) => renderAttachment(...renderAttachmentArgs),
-          renderActivityOptions
-        );
+        return renderActivityOptions => {
+          if (isValidElement(renderActivity)) {
+            return renderActivity;
+          }
 
-        // "activityElement" cannot be false. If the middleware want to hide the "activityElement", it should return "false" when we call createActivityRenderer().
-        activityElement ||
-          console.warn(
-            'botframework-webchat: To hide an activity, the activity renderer should return false. It should not return a function that will return false when called.'
+          const activityElement = renderActivity(
+            (...renderAttachmentArgs) => renderAttachment(...renderAttachmentArgs),
+            renderActivityOptions
           );
 
-        return activityElement;
-      };
-    },
+          // "activityElement" cannot be false. If the middleware want to hide the "activityElement", it should return "false" when we call createActivityRenderer().
+          activityElement ||
+            console.warn(
+              'botframework-webchat: To hide an activity, the activity renderer should return false. It should not return a function that will return false when called.'
+            );
+
+          return activityElement;
+        };
+      },
     [createActivityRenderer, renderAttachment]
   );
 }

package/src/hooks/internal/useDebugDeps.js

@@ -1,5 +1,6 @@
 /* eslint no-console: "off" */
 
+import { isForbiddenPropertyNames } from 'botframework-webchat-core';
 import { useRef } from 'react';
 
 export default function useDebugDeps(depsMap, name) {
@@ -7,13 +8,19 @@ export default function useDebugDeps(depsMap, name) {
 
   const { current: lastDepsMap } = lastDepsMapRef;
   const keys = new Set([...Object.keys(depsMap), ...Object.keys(lastDepsMap)]);
-  const keysChanged = Array.from(keys).filter(key => !Object.is(depsMap[key], lastDepsMap[key]));
+  const keysChanged = Array.from(keys).filter(
+    // Mitigation through denylisting.
+    // eslint-disable-next-line security/detect-object-injection
+    key => !isForbiddenPropertyNames(key) && !Object.is(depsMap[key], lastDepsMap[key])
+  );
 
   if (keysChanged.length) {
     console.groupCollapsed(`Changes found in ${name}`);
 
     keysChanged.forEach(key => {
-      console.log(key, { from: lastDepsMap[key], to: depsMap[key] });
+      // Mitigation through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      isForbiddenPropertyNames(key) || console.log(key, { from: lastDepsMap[key], to: depsMap[key] });
     });
 
     console.groupEnd();

package/src/hooks/internal/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default function usePrevious<T>(value: T): T {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}

package/src/hooks/internal/useValueRef.ts

@@ -0,0 +1,21 @@
+import { RefObject, useMemo, useRef } from 'react';
+
+export default function useValueRef<T>(value: T): RefObject<T> {
+  const ref = useRef<T>();
+  const readOnlyRef = useMemo(
+    () =>
+      Object.create(
+        {},
+        {
+          current: {
+            get: () => ref.current
+          }
+        }
+      ),
+    []
+  );
+
+  ref.current = value;
+
+  return readOnlyRef;
+}

package/src/hooks/middleware/concatMiddleware.ts

@@ -13,11 +13,13 @@ export default function concatMiddleware<Setup, Result>(
 
     return last => {
       const stack = setup.slice();
-      const work = index => (...runArgs) => {
-        const next = stack[index];
+      const work =
+        (index: number) =>
+        (...runArgs) => {
+          const next = stack[+index];
 
-        return (next ? next(work(index + 1)) : last)(...runArgs);
-      };
+          return (next ? next(work(index + 1)) : last)(...runArgs);
+        };
 
       return work(0);
     };

package/src/hooks/middleware/createDefaultCardActionMiddleware.ts

@@ -3,38 +3,40 @@ import { sendMessage, sendMessageBack, sendPostBack } from 'botframework-webchat
 import CardActionMiddleware from '../../types/CardActionMiddleware';
 
 export default function createDefaultCardActionMiddleware(): CardActionMiddleware {
-  return ({ dispatch }) => next => (...args) => {
-    const [
-      {
-        cardAction,
-        cardAction: { value }
-      }
-    ] = args;
-
-    // We cannot use destructured "type" here because TypeScript don't recognize "messageBack" is "MessageBackCardAction".
-    switch (cardAction.type) {
-      case 'imBack':
-        if (typeof value === 'string') {
-          // TODO: [P4] Instead of calling dispatch, we should move to dispatchers instead for completeness
-          dispatch(sendMessage(value, 'imBack'));
-        } else {
-          throw new Error('cannot send "imBack" with a non-string value');
+  return ({ dispatch }) =>
+    next =>
+    (...args) => {
+      const [
+        {
+          cardAction,
+          cardAction: { value }
         }
+      ] = args;
+
+      // We cannot use destructured "type" here because TypeScript don't recognize "messageBack" is "MessageBackCardAction".
+      switch (cardAction.type) {
+        case 'imBack':
+          if (typeof value === 'string') {
+            // TODO: [P4] Instead of calling dispatch, we should move to dispatchers instead for completeness
+            dispatch(sendMessage(value, 'imBack'));
+          } else {
+            throw new Error('cannot send "imBack" with a non-string value');
+          }
 
-        break;
+          break;
 
-      case 'messageBack':
-        dispatch(sendMessageBack(value, cardAction.text, cardAction.displayText));
+        case 'messageBack':
+          dispatch(sendMessageBack(value, cardAction.text, cardAction.displayText));
 
-        break;
+          break;
 
-      case 'postBack':
-        dispatch(sendPostBack(value));
+        case 'postBack':
+          dispatch(sendPostBack(value));
 
-        break;
+          break;
 
-      default:
-        return next(...args);
-    }
-  };
+        default:
+          return next(...args);
+      }
+    };
 }

package/src/hooks/middleware/createDefaultGroupActivitiesMiddleware.ts

@@ -1,9 +1,10 @@
-import { Constants, DirectLineActivity } from 'botframework-webchat-core';
+import { Constants } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import GroupActivitiesMiddleware from '../../types/GroupActivitiesMiddleware';
 
 const {
-  ActivityClientState: { SENT }
+  ActivityClientState: { SENDING, SEND_FAILED, SENT }
 } = Constants;
 
 function bin<T>(items: T[], grouping: (last: T, current: T) => boolean): T[][] {
@@ -25,13 +26,24 @@ function bin<T>(items: T[], grouping: (last: T, current: T) => boolean): T[][] {
   return bins;
 }
 
-function sending(activity: DirectLineActivity): boolean {
-  return activity.from.role === 'user' && activity.channelData && activity.channelData.state !== SENT;
+function sending(activity) {
+  if (activity.from.role === 'user') {
+    const state = activity.channelData?.state;
+
+    switch (state) {
+      case SENDING:
+      case SEND_FAILED:
+        return state;
+
+      default:
+        return SENT;
+    }
+  }
 }
 
 function shouldGroupTimestamp(
-  activityX: DirectLineActivity,
-  activityY: DirectLineActivity,
+  activityX: WebChatActivity,
+  activityY: WebChatActivity,
   groupTimestamp: boolean | number
 ): boolean {
   if (groupTimestamp === false) {

package/src/hooks/useActiveTyping.ts

@@ -10,15 +10,17 @@ function useActiveTyping(expireAfter?: number): [{ [userId: string]: Typing }] {
 
   const [{ typingAnimationDuration }] = useStyleOptions();
   const forceRender = useForceRender();
-  const typing: { [userId: string]: { at: number; name: string; role: string } } = useSelector(({ typing }) => typing);
+  const typing: { [userId: string]: { at: number; last: number; name: string; role: string } } = useSelector(
+    ({ typing }) => typing
+  );
 
   if (typeof expireAfter !== 'number') {
     expireAfter = typingAnimationDuration;
   }
 
   const activeTyping: { [userId: string]: Typing } = Object.entries(typing).reduce(
-    (activeTyping, [id, { at, name, role }]) => {
-      const until = at + expireAfter;
+    (activeTyping, [id, { at, last, name, role }]) => {
+      const until = last + expireAfter;
 
       if (until > now) {
         return { ...activeTyping, [id]: { at, expireAt: until, name, role } };

package/src/hooks/useActivities.ts

@@ -1,7 +1,7 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import { useSelector } from './internal/WebChatReduxContext';
 
-export default function useActivities(): [DirectLineActivity[]] {
+export default function useActivities(): [WebChatActivity[]] {
   return [useSelector(({ activities }) => activities)];
 }

package/src/hooks/useActivityKeys.ts

@@ -0,0 +1,3 @@
+import useActivityKeys from '../providers/ActivityKeyer/useActivityKeys';
+
+export default useActivityKeys;