botframework-webchat-api 4.13.0 → 4.15.0

package/src/hooks/internal/WebChatAPIContext.ts

@@ -1,8 +1,73 @@
 import { createContext } from 'react';
+import { DirectLineActivity, DirectLineJSBotConnection } from 'botframework-webchat-core';
 
-const context = createContext<any>({
-  sendFocusRef: null
-});
+import { AttachmentForScreenReaderComponentFactory } from '../../types/AttachmentForScreenReaderMiddleware';
+import { AvatarComponentFactory } from '../../types/AvatarMiddleware';
+import { GroupActivities } from '../../types/GroupActivitiesMiddleware';
+import { LegacyActivityRenderer } from '../../types/ActivityMiddleware';
+import { Observable } from 'redux';
+import { PerformCardAction } from '../../types/CardActionMiddleware';
+import { RenderActivityStatus } from '../../types/ActivityStatusMiddleware';
+import { RenderAttachment } from '../../types/AttachmentMiddleware';
+import { RenderToast } from '../../types/ToastMiddleware';
+import { ScrollToEndButtonComponentFactory } from '../../types/ScrollToEndButtonMiddleware';
+import { StrictStyleOptions } from '../../StyleOptions';
+import LocalizedStrings from '../../types/LocalizedStrings';
+import PrecompiledGlobalize from '../../types/PrecompiledGlobalize';
+import TelemetryMeasurementEvent from '../../types/TelemetryMeasurementEvent';
+
+type WebChatAPIContext = {
+  activityRenderer?: LegacyActivityRenderer;
+  activityStatusRenderer?: RenderActivityStatus;
+  attachmentForScreenReaderRenderer?: AttachmentForScreenReaderComponentFactory;
+  attachmentRenderer?: RenderAttachment;
+  avatarRenderer?: AvatarComponentFactory;
+  clearSuggestedActions?: () => void;
+  dir?: string;
+  directLine?: DirectLineJSBotConnection;
+  disabled?: boolean;
+  dismissNotification?: (id: string) => void;
+  downscaleImageToDataURL?: (blob: Blob, maxWidth: number, maxHeight: number, type: string, quality: number) => string;
+  emitTypingIndicator?: () => void;
+  grammars?: any;
+  groupActivities?: GroupActivities;
+  internalErrorBoxClass?: React.Component | Function;
+  language?: string;
+  localizedGlobalizeState?: PrecompiledGlobalize[];
+  localizedStrings?: { [language: string]: LocalizedStrings };
+  markActivity?: ({ id: string }, name: string, value?: any) => void;
+  onCardAction?: PerformCardAction;
+  onTelemetry?: (event: TelemetryMeasurementEvent) => void;
+  postActivity?: (activity: DirectLineActivity) => Observable<string>;
+  renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
+  scrollToEndButtonRenderer?: ScrollToEndButtonComponentFactory;
+  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: DirectLineActivity) => void;
+  sendEvent?: (name: string, value: any) => void;
+  sendFiles?: (files: File[]) => void;
+  sendMessage?: (text: string, method?: string, { channelData }?: { channelData?: any }) => void;
+  sendMessageBack?: (value: any, text?: string, displayText?: string) => void;
+  sendPostBack?: (value?: any) => void;
+  sendTypingIndicator?: boolean;
+  setDictateInterims?: (interims: string[]) => void;
+  setDictateState?: (dictateState: number) => void;
+  setNotification?: (notification: Notification) => void;
+  setSendBox?: (value: string) => void;
+  setSendTimeout?: (timeout: number) => void;
+  startDictate?: () => void;
+  startSpeakingActivity?: () => void;
+  stopDictate?: () => void;
+  stopSpeakingActivity?: () => void;
+  styleOptions?: StrictStyleOptions;
+  submitSendBox?: (method?: string, { channelData }?: { channelData: any }) => void;
+  telemetryDimensionsRef?: React.Ref<any>;
+  toastRenderer?: RenderToast;
+  trackDimension?: (name: string, data: any) => void;
+  typingIndicatorRenderer?: any; // TODO
+  userID?: string;
+  username?: string;
+};
+
+const context = createContext<WebChatAPIContext>(undefined);
 
 context.displayName = 'WebChatAPIContext';
 

package/src/hooks/internal/useCreateActivityRendererInternal.ts

@@ -0,0 +1,46 @@
+import { isValidElement, useMemo } from 'react';
+
+import { ActivityComponentFactory } from '../../types/ActivityMiddleware';
+import { RenderAttachment } from '../../types/AttachmentMiddleware';
+import useRenderAttachment from '../useRenderAttachment';
+import useWebChatAPIContext from './useWebChatAPIContext';
+
+export default function useCreateActivityRendererInternal(
+  renderAttachmentOverride?: RenderAttachment
+): ActivityComponentFactory {
+  const { activityRenderer: createActivityRenderer } = useWebChatAPIContext();
+  const defaultRenderAttachment = useRenderAttachment();
+
+  const renderAttachment: RenderAttachment = renderAttachmentOverride || defaultRenderAttachment;
+
+  return useMemo(
+    () =>
+      (...createActivityRendererOptions) => {
+        const renderActivity = createActivityRenderer(...createActivityRendererOptions);
+
+        if (!renderActivity) {
+          return false;
+        }
+
+        return renderActivityOptions => {
+          if (isValidElement(renderActivity)) {
+            return renderActivity;
+          }
+
+          const activityElement = renderActivity(
+            (...renderAttachmentArgs) => renderAttachment(...renderAttachmentArgs),
+            renderActivityOptions
+          );
+
+          // "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/applyMiddleware.js

@@ -1,7 +1,6 @@
 import React, { isValidElement } from 'react';
-
-import concatMiddleware from './concatMiddleware';
 import ErrorBox from '../internal/ErrorBox';
+import concatMiddleware from './concatMiddleware';
 import UserlandBoundary from './UserlandBoundary';
 
 export default function applyMiddleware(type, ...middleware) {
@@ -35,7 +34,7 @@ export function forLegacyRenderer(type, ...middleware) {
  *
  * @param {string} type Required. String equivalent of type of container to be rendered.
  * @param { strict = false } - Used to enforce new middleware format which cooperates with new activity grouping.
- * @see See {@link https://github.com/microsoft/BotFramework-WebChat/blob/master/CHANGELOG.md#4100---2020-08-18} and {@link https://github.com/microsoft/BotFramework-WebChat/pull/3365} for middleware breaking changes.
+ * @see See {@link https://github.com/microsoft/BotFramework-WebChat/blob/main/CHANGELOG.md#4100---2020-08-18} and {@link https://github.com/microsoft/BotFramework-WebChat/pull/3365} for middleware breaking changes.
  * @param  {middleware[]} middleware list of middleware to be applied.
  * 'createRendererArgs' is "what to render"; for example, an activity.
  * @returns  Returns a function if there is a renderer *committed* to render OR returns false if nothing should be rendered.

package/src/hooks/middleware/concatMiddleware.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import concatMiddleware from './concatMiddleware';
 
 describe('two middleware concatenated and ran', () => {
@@ -26,9 +28,7 @@ describe('two middleware concatenated and ran', () => {
   });
 
   test('by a single upstream middleware', () => {
-    const combine = () => next => value => {
-      return next(value) + next(value + 1);
-    };
+    const combine = () => next => value => next(value) + next(value + 1);
 
     const middleware = concatMiddleware(combine, oddMultiplyByTen, evenMultiplyByHundred);
     const work = middleware()(value => value);
@@ -38,9 +38,7 @@ describe('two middleware concatenated and ran', () => {
 });
 
 test('one middleware ran twice by a single upstream middleware', () => {
-  const combine = () => next => value => {
-    return next(value) + next(value + 1);
-  };
+  const combine = () => next => value => next(value) + next(value + 1);
 
   const oddMultiplyByTenAndEvenMultiplyByHundred = () => () => value => {
     if (value % 2) {

package/src/hooks/middleware/concatMiddleware.ts

@@ -0,0 +1,27 @@
+type Work<T> = (...args: any[]) => T;
+type Enhancer<T> = (next: Work<T>) => Work<T>;
+type Middleware<Setup, Result> = (setup: Setup) => Enhancer<Result>;
+
+export default function concatMiddleware<Setup, Result>(
+  ...middleware: Middleware<Setup, Result>[]
+): Middleware<Setup, Result> {
+  return setupArgs => {
+    const setup = middleware.reduce(
+      (setup, middleware) => (middleware ? [...setup, middleware(setupArgs)] : setup),
+      []
+    );
+
+    return last => {
+      const stack = setup.slice();
+      const work =
+        (index: number) =>
+        (...runArgs) => {
+          const next = stack[+index];
+
+          return (next ? next(work(index + 1)) : last)(...runArgs);
+        };
+
+      return work(0);
+    };
+  };
+}

package/src/hooks/middleware/createDefaultCardActionMiddleware.ts

@@ -0,0 +1,42 @@
+import { sendMessage, sendMessageBack, sendPostBack } from 'botframework-webchat-core';
+
+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');
+          }
+
+          break;
+
+        case 'messageBack':
+          dispatch(sendMessageBack(value, cardAction.text, cardAction.displayText));
+
+          break;
+
+        case 'postBack':
+          dispatch(sendPostBack(value));
+
+          break;
+
+        default:
+          return next(...args);
+      }
+    };
+}

package/src/hooks/middleware/{createDefaultGroupActivitiesMiddleware.js → createDefaultGroupActivitiesMiddleware.ts}

@@ -1,13 +1,15 @@
-import { Constants } from 'botframework-webchat-core';
+import { Constants, DirectLineActivity } from 'botframework-webchat-core';
+
+import GroupActivitiesMiddleware from '../../types/GroupActivitiesMiddleware';
 
 const {
   ActivityClientState: { SENT }
 } = Constants;
 
-function bin(items, grouping) {
-  let lastBin;
-  const bins = [];
-  let lastItem;
+function bin<T>(items: T[], grouping: (last: T, current: T) => boolean): T[][] {
+  let lastBin: T[];
+  const bins: T[][] = [];
+  let lastItem: T;
 
   items.forEach(item => {
     if (lastItem && grouping(lastItem, item)) {
@@ -23,11 +25,15 @@ function bin(items, grouping) {
   return bins;
 }
 
-function sending(activity) {
+function sending(activity: DirectLineActivity): boolean {
   return activity.from.role === 'user' && activity.channelData && activity.channelData.state !== SENT;
 }
 
-function shouldGroupTimestamp(activityX, activityY, groupTimestamp) {
+function shouldGroupTimestamp(
+  activityX: DirectLineActivity,
+  activityY: DirectLineActivity,
+  groupTimestamp: boolean | number
+): boolean {
   if (groupTimestamp === false) {
     // Hide timestamp for all activities.
     return true;
@@ -47,9 +53,11 @@ function shouldGroupTimestamp(activityX, activityY, groupTimestamp) {
   return false;
 }
 
-export default function createDefaultGroupActivityMiddleware({ groupTimestamp }) {
-  return () => () => ({ activities }) => ({
-    sender: bin(activities, (x, y) => x.from.role === y.from.role),
-    status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
-  });
+export default function createDefaultGroupActivityMiddleware({ groupTimestamp }): GroupActivitiesMiddleware {
+  return () =>
+    () =>
+    ({ activities }) => ({
+      sender: bin(activities, (x, y) => x.from.role === y.from.role),
+      status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
+    });
 }

package/src/hooks/{useActiveTyping.js → useActiveTyping.ts}

@@ -1,29 +1,33 @@
 import { useEffect } from 'react';
 
 import { useSelector } from './internal/WebChatReduxContext';
+import Typing from '../types/Typing';
 import useForceRender from './internal/useForceRender';
 import useStyleOptions from './useStyleOptions';
 
-function useActiveTyping(expireAfter) {
+function useActiveTyping(expireAfter?: number): [{ [userId: string]: Typing }] {
   const now = Date.now();
 
   const [{ typingAnimationDuration }] = useStyleOptions();
   const forceRender = useForceRender();
-  const typing = useSelector(({ typing }) => typing);
+  const typing: { [userId: string]: { at: number; name: string; role: string } } = useSelector(({ typing }) => typing);
 
   if (typeof expireAfter !== 'number') {
     expireAfter = typingAnimationDuration;
   }
 
-  const activeTyping = Object.entries(typing).reduce((activeTyping, [id, { at, name, role }]) => {
-    const until = at + expireAfter;
+  const activeTyping: { [userId: string]: Typing } = Object.entries(typing).reduce(
+    (activeTyping, [id, { at, name, role }]) => {
+      const until = at + expireAfter;
 
-    if (until > now) {
-      return { ...activeTyping, [id]: { at, expireAt: until, name, role } };
-    }
+      if (until > now) {
+        return { ...activeTyping, [id]: { at, expireAt: until, name, role } };
+      }
 
-    return activeTyping;
-  }, {});
+      return activeTyping;
+    },
+    {}
+  );
 
   const earliestExpireAt = Math.min(...Object.values(activeTyping).map(({ expireAt }) => expireAt));
   const timeToRender = earliestExpireAt && earliestExpireAt - now;

package/src/hooks/useActivities.ts

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

package/src/hooks/useActivityKeys.ts

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

package/src/hooks/useActivityKeysByRead.ts

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

package/src/hooks/{useAvatarForBot.js → useAvatarForBot.ts}

@@ -1,6 +1,6 @@
 import useStyleOptions from './useStyleOptions';
 
-export default function useAvatarForBot() {
+export default function useAvatarForBot(): [{ image: string; initials: string }] {
   const [{ botAvatarImage: image, botAvatarInitials: initials }] = useStyleOptions();
 
   return [

package/src/hooks/{useAvatarForUser.js → useAvatarForUser.ts}

@@ -1,6 +1,6 @@
 import useStyleOptions from './useStyleOptions';
 
-export default function useAvatarForUser() {
+export default function useAvatarForUser(): [{ image: string; initials: string }] {
   const [{ userAvatarImage: image, userAvatarInitials: initials }] = useStyleOptions();
 
   return [

package/src/hooks/{useByteFormatter.js → useByteFormatter.ts}

@@ -15,7 +15,7 @@ const SHORT_FORM = {
   form: 'short'
 };
 
-export default function useByteFormatter() {
+export default function useByteFormatter(): (bytes: number) => string {
   const [globalize] = useLocalizedGlobalize();
 
   return useMemo(() => {

package/src/hooks/{useConnectivityStatus.js → useConnectivityStatus.ts}

@@ -1,5 +1,5 @@
 import { useSelector } from './internal/WebChatReduxContext';
 
-export default function useConnectivityStatus() {
+export default function useConnectivityStatus(): [string] {
   return [useSelector(({ connectivityStatus }) => connectivityStatus)];
 }

package/src/hooks/{useCreateActivityRenderer.js → useCreateActivityRenderer.ts}

@@ -1,9 +1,8 @@
-/* eslint react/prop-types: "off"*/
-
+import { ActivityComponentFactory } from '../types/ActivityMiddleware';
 import useCreateActivityRendererInternal from './internal/useCreateActivityRendererInternal';
 
 // The newer useCreateActivityRenderer() hook does not support override renderAttachment().
 // Only the deprecated useRenderActivity() hook support overriding renderAttachment().
-export default function useCreateActivityRenderer() {
+export default function useCreateActivityRenderer(): ActivityComponentFactory {
   return useCreateActivityRendererInternal();
 }

package/src/hooks/{useCreateActivityStatusRenderer.js → useCreateActivityStatusRenderer.tsx}

@@ -1,8 +1,10 @@
-/* eslint react/prop-types: "off"*/
+/* eslint react/prop-types: "off" */
+/* eslint react/require-default-props: "off" */
 
-import { Constants } from 'botframework-webchat-core';
-import React, { useMemo } from 'react';
+import { Constants, DirectLineActivity } from 'botframework-webchat-core';
+import React, { ReactNode, useMemo } from 'react';
 
+import SendState from '../types/SendState';
 import useGetSendTimeoutForActivity from './useGetSendTimeoutForActivity';
 import useTimePassed from './internal/useTimePassed';
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
@@ -20,6 +22,14 @@ const ActivityStatusContainer = ({ activity, hideTimestamp, nextVisibleActivity
   const {
     channelData: { clientTimestamp = 0, state } = {},
     from: { role }
+  }: {
+    channelData: {
+      clientTimestamp?: number;
+      state?: SendState;
+    };
+    from: {
+      role: string;
+    };
   } = activity;
 
   const activitySent = state !== SENDING && state !== SEND_FAILED;
@@ -43,15 +53,21 @@ const ActivityStatusContainer = ({ activity, hideTimestamp, nextVisibleActivity
   );
 };
 
-export default function useCreateActivityStatusRenderer() {
+export default function useCreateActivityStatusRenderer(): (renderOptions: {
+  activity: DirectLineActivity;
+  nextVisibleActivity: DirectLineActivity;
+}) => (props: { hideTimestamp?: boolean }) => ReactNode {
   return useMemo(
-    () => ({ activity, nextVisibleActivity }) => ({ hideTimestamp } = {}) => (
-      <ActivityStatusContainer
-        activity={activity}
-        hideTimestamp={hideTimestamp}
-        nextVisibleActivity={nextVisibleActivity}
-      />
-    ),
+    () =>
+      ({ activity, nextVisibleActivity }: { activity: DirectLineActivity; nextVisibleActivity: DirectLineActivity }) =>
+      ({ hideTimestamp }: { hideTimestamp?: boolean } = {}) =>
+        (
+          <ActivityStatusContainer
+            activity={activity}
+            hideTimestamp={hideTimestamp}
+            nextVisibleActivity={nextVisibleActivity}
+          />
+        ),
     []
   );
 }

package/src/hooks/useCreateAvatarRenderer.ts

@@ -0,0 +1,39 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
+import { useMemo } from 'react';
+
+import { AvatarComponentFactory } from '../types/AvatarMiddleware';
+import useStyleOptions from './useStyleOptions';
+import useWebChatAPIContext from './internal/useWebChatAPIContext';
+
+export default function useCreateAvatarRenderer(): ({
+  activity
+}: {
+  activity: DirectLineActivity;
+}) => AvatarComponentFactory {
+  const [styleOptions] = useStyleOptions();
+  const { avatarRenderer } = useWebChatAPIContext();
+
+  return useMemo(
+    () =>
+      ({ activity }) => {
+        const { from: { role } = {} }: { from?: { role?: string } } = activity;
+
+        const result = avatarRenderer({
+          activity,
+          fromUser: role === 'user',
+          styleOptions
+        });
+
+        if (result !== false && typeof result !== 'function') {
+          console.warn(
+            'botframework-webchat: avatarMiddleware should return a function to render the avatar, or return false if avatar should be hidden. Please refer to HOOKS.md for details.'
+          );
+
+          return () => result;
+        }
+
+        return result;
+      },
+    [avatarRenderer, styleOptions]
+  );
+}

package/src/hooks/useCreateScrollToEndButtonRenderer.ts

@@ -0,0 +1,6 @@
+import { ScrollToEndButtonComponentFactory } from '../types/ScrollToEndButtonMiddleware';
+import useWebChatAPIContext from './internal/useWebChatAPIContext';
+
+export default function useCreateScrollToEndButtonRenderer(): ScrollToEndButtonComponentFactory {
+  return useWebChatAPIContext().scrollToEndButtonRenderer;
+}

package/src/hooks/useDateFormatter.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+
+import useLocalizedGlobalize from './internal/useLocalizedGlobalize';
+
+export default function useDateFormatter(): (date: number | Date) => string {
+  const [globalize] = useLocalizedGlobalize();
+
+  const formatDate = useMemo(
+    () => date => globalize.dateFormatter({ skeleton: 'MMMMdhm' })(new Date(date)),
+    [globalize]
+  );
+
+  return formatDate;
+}

package/src/hooks/useDebouncedNotifications.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import { getEarliestUpdateNotBefore } from './useDebouncedNotifications';
 
 describe('getEarliestUpdateNotBefore', () => {

package/src/hooks/{useDebouncedNotifications.js → useDebouncedNotifications.ts}

@@ -2,12 +2,20 @@ import { useRef } from 'react';
 import updateIn from 'simple-update-in';
 
 import findMin from '../utils/findMin';
+import Notification from '../types/Notification';
 import useForceRender from './internal/useForceRender';
 import useNotifications from './useNotifications';
 import useStyleOptions from './useStyleOptions';
 import useTimer from './internal/useTimer';
 
-function getEarliestUpdateNotBefore(notificationMap) {
+type DebouncedNotification = Notification & {
+  outOfDate: boolean;
+  updateNotBefore: number;
+};
+
+type DebouncedNotifications = { [id: string]: DebouncedNotification };
+
+function getEarliestUpdateNotBefore(notificationMap: DebouncedNotifications) {
   return findMin(
     Object.values(notificationMap)
       .filter(({ outOfDate }) => outOfDate)
@@ -15,7 +23,7 @@ function getEarliestUpdateNotBefore(notificationMap) {
   );
 }
 
-function useDebouncedNotifications() {
+function useDebouncedNotifications(): [DebouncedNotifications] {
   const now = Date.now();
 
   const [{ notificationDebounceTimeout }] = useStyleOptions();

package/src/hooks/{useDictateInterims.js → useDictateInterims.ts}

@@ -1,6 +1,6 @@
 import { useSelector } from './internal/WebChatReduxContext';
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
-export default function useDictateInterims() {
+export default function useDictateInterims(): [string[], (interims: string[]) => void] {
   return [useSelector(({ dictateInterims }) => dictateInterims) || [], useWebChatAPIContext().setDictateInterims];
 }

package/src/hooks/{useDictateState.js → useDictateState.ts}

@@ -1,6 +1,6 @@
 import { useSelector } from './internal/WebChatReduxContext';
 
 // TODO: [P3] We should update this code to use core/src/selectors/dictateState.js
-export default function useDictateState() {
+export default function useDictateState(): [number] {
   return [useSelector(({ dictateState }) => dictateState)];
 }