botframework-webchat-api 4.18.1-main.20260511.8fcd02a → 4.18.1

package/src/providers/ActivityKeyer/ActivityKeyerComposer.tsx

@@ -1,9 +1,8 @@
-import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core';
-import React, { useCallback, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { useCallback, useMemo, useRef, type ReactNode } from 'react';
 
 import reduceIterable from '../../hooks/private/reduceIterable';
 import useActivities from '../../hooks/useActivities';
-import usePonyfill from '../Ponyfill/usePonyfill';
 import type { ActivityKeyerContextType } from './private/Context';
 import ActivityKeyerContext from './private/Context';
 import getActivityId from './private/getActivityId';
@@ -18,11 +17,19 @@ type ActivityToKeyMap = Map<WebChatActivity, string>;
 type ClientActivityIdToKeyMap = Map<string, string>;
 type KeyToActivitiesMap = Map<string, readonly WebChatActivity[]>;
 
-/** After this many ms of no activity changes, verify that the frozen portion was not modified. */
-const FROZEN_CHECK_TIMEOUT = 10_000;
+function getTypingActivityId(activity: WebChatActivity): string | undefined {
+  const { type } = activity;
 
-/** Only the last N activities are compared reference-by-reference on each render. */
-const MUTABLE_ACTIVITY_WINDOW = 1_000;
+  if (
+    (type === 'message' || type === 'typing') &&
+    'text' in activity &&
+    typeof activity.text === 'string' &&
+    'streamId' in activity.channelData &&
+    activity.channelData.streamId
+  ) {
+    return activity.channelData.streamId;
+  }
+}
 
 /**
  * React context composer component to assign a perma-key to every activity.
@@ -39,7 +46,6 @@ const MUTABLE_ACTIVITY_WINDOW = 1_000;
  * Local key are only persisted in memory. On refresh, they will be a new random key.
  */
 const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | undefined }>) => {
-  const [{ cancelIdleCallback, clearTimeout, requestIdleCallback, setTimeout }] = usePonyfill();
   const existingContext = useActivityKeyerContext(false);
 
   if (existingContext) {
@@ -47,118 +53,13 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
   }
 
   const [activities] = useActivities();
+  const activityIdToKeyMapRef = useRef<Readonly<ActivityIdToKeyMap>>(Object.freeze(new Map()));
+  const activityToKeyMapRef = useRef<Readonly<ActivityToKeyMap>>(Object.freeze(new Map()));
+  const clientActivityIdToKeyMapRef = useRef<Readonly<ClientActivityIdToKeyMap>>(Object.freeze(new Map()));
+  const keyToActivitiesMapRef = useRef<Readonly<KeyToActivitiesMap>>(Object.freeze(new Map()));
 
-  // TODO: [P0]  We should remove the mapping in favor of `localId`,
-  // the id should represent the latest available activity in the stream
-  //
-  // Maps are intentionally mutable so the incremental fast path can append to them in-place.
-  const activityIdToKeyMapRef = useRef<ActivityIdToKeyMap>(new Map());
-  const activityToKeyMapRef = useRef<ActivityToKeyMap>(new Map());
-  const clientActivityIdToKeyMapRef = useRef<ClientActivityIdToKeyMap>(new Map());
-  const keyToActivitiesMapRef = useRef<KeyToActivitiesMap>(new Map());
-  const prevActivitiesRef = useRef<readonly WebChatActivity[]>(Object.freeze([]));
-  const prevActivityKeysStateRef = useRef<readonly [readonly string[]]>(
-    Object.freeze([Object.freeze([])]) as readonly [readonly string[]]
-  );
-  const pendingFrozenCheckRef = useRef<
-    | {
-        readonly current: readonly WebChatActivity[];
-        readonly frozenBoundary: number;
-        readonly prev: readonly WebChatActivity[];
-      }
-    | undefined
-  >();
-  const warnedPositionsRef = useRef<Set<number>>(new Set());
-
-  // Incremental keying: the fast path only processes newly-appended activities (O(delta) per render)
-  // instead of re-iterating all activities (O(n) per render, O(n²) total for n streaming pushes).
+  // TODO: [P1] `useMemoWithPrevious` to check and cache the resulting array if it hasn't changed.
   const activityKeysState = useMemo<readonly [readonly string[]]>(() => {
-    const prevActivities = prevActivitiesRef.current;
-
-    // Only the last MUTABLE_ACTIVITY_WINDOW activities are compared each render.
-    // Activities before the frozen boundary are assumed unchanged — O(1) instead of O(n).
-    const frozenBoundary = Math.max(0, Math.min(prevActivities.length, activities.length) - MUTABLE_ACTIVITY_WINDOW);
-    let commonPrefixLength = frozenBoundary;
-    const maxPrefix = Math.min(prevActivities.length, activities.length);
-
-    // eslint-disable-next-line security/detect-object-injection
-    while (commonPrefixLength < maxPrefix && prevActivities[commonPrefixLength] === activities[commonPrefixLength]) {
-      commonPrefixLength++;
-    }
-
-    const isAppendOnly = commonPrefixLength === prevActivities.length;
-
-    if (isAppendOnly) {
-      // Fast path: only new activities were appended — process them incrementally.
-      if (commonPrefixLength === activities.length) {
-        // Array reference changed but content is identical.
-        prevActivitiesRef.current = activities;
-
-        return prevActivityKeysStateRef.current;
-      }
-
-      // Schedule deferred verification of the frozen portion only now that we know:
-      // (1) the update is append-only and (2) there are actual content changes.
-      if (frozenBoundary) {
-        pendingFrozenCheckRef.current = Object.freeze({ current: activities, frozenBoundary, prev: prevActivities });
-      }
-
-      const { current: activityIdToKeyMap } = activityIdToKeyMapRef;
-      const { current: activityToKeyMap } = activityToKeyMapRef;
-      const { current: clientActivityIdToKeyMap } = clientActivityIdToKeyMapRef;
-      const { current: keyToActivitiesMap } = keyToActivitiesMapRef;
-
-      const newKeys: string[] = [];
-
-      for (let i = commonPrefixLength; i < activities.length; i++) {
-        // eslint-disable-next-line security/detect-object-injection
-        const activity = activities[i];
-        const activityId = getActivityId(activity);
-        const clientActivityId = getClientActivityId(activity);
-        const typingActivityId = getActivityLivestreamingMetadata(activity)?.sessionId;
-
-        // Since we mutate maps in-place, a single lookup covers both "previous" and
-        // "current-iteration" entries — equivalent to the slow path's dual-map check.
-        const key =
-          (clientActivityId && clientActivityIdToKeyMap.get(clientActivityId)) ||
-          (typingActivityId && activityIdToKeyMap.get(typingActivityId)) ||
-          (activityId && activityIdToKeyMap.get(activityId)) ||
-          activityToKeyMap.get(activity) ||
-          uniqueId();
-
-        activityId && activityIdToKeyMap.set(activityId, key);
-        typingActivityId && activityIdToKeyMap.set(typingActivityId, key);
-        clientActivityId && clientActivityIdToKeyMap.set(clientActivityId, key);
-        activityToKeyMap.set(activity, key);
-
-        const activitiesForKey = keyToActivitiesMap.get(key);
-
-        keyToActivitiesMap.set(
-          key,
-          activitiesForKey ? Object.freeze([...activitiesForKey, activity]) : Object.freeze([activity])
-        );
-
-        !activitiesForKey && newKeys.push(key);
-      }
-
-      prevActivitiesRef.current = activities;
-
-      if (!newKeys.length) {
-        // New activities might be added to existing keys — no new keys, but the keyToActivitiesMap
-        // was mutated. Return a new tuple reference so context consumers re-render and see the
-        // updated activities-per-key via getActivitiesByKey.
-        return Object.freeze([prevActivityKeysStateRef.current[0]]) as readonly [readonly string[]];
-      }
-
-      const nextKeys = Object.freeze([...prevActivityKeysStateRef.current[0], ...newKeys]);
-      const result = Object.freeze([nextKeys]) as readonly [readonly string[]];
-
-      prevActivityKeysStateRef.current = result;
-
-      return result;
-    }
-
-    // Slow path: activities were removed or reordered — full recalculation.
     const { current: activityIdToKeyMap } = activityIdToKeyMapRef;
     const { current: activityToKeyMap } = activityToKeyMapRef;
     const { current: clientActivityIdToKeyMap } = clientActivityIdToKeyMapRef;
@@ -171,98 +72,34 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
     activities.forEach(activity => {
       const activityId = getActivityId(activity);
       const clientActivityId = getClientActivityId(activity);
-      const typingActivityId = getActivityLivestreamingMetadata(activity)?.sessionId;
+      const typingActivityId = getTypingActivityId(activity);
 
       const key =
-        (clientActivityId &&
-          (clientActivityIdToKeyMap.get(clientActivityId) || nextClientActivityIdToKeyMap.get(clientActivityId))) ||
-        (typingActivityId &&
-          (activityIdToKeyMap.get(typingActivityId) || nextActivityIdToKeyMap.get(typingActivityId))) ||
-        (activityId && (activityIdToKeyMap.get(activityId) || nextActivityIdToKeyMap.get(activityId))) ||
+        (clientActivityId && clientActivityIdToKeyMap.get(clientActivityId)) ||
+        (typingActivityId && activityIdToKeyMap.get(typingActivityId)) ||
+        (activityId && activityIdToKeyMap.get(activityId)) ||
         activityToKeyMap.get(activity) ||
-        nextActivityToKeyMap.get(activity) ||
         uniqueId();
 
       activityId && nextActivityIdToKeyMap.set(activityId, key);
-      typingActivityId && nextActivityIdToKeyMap.set(typingActivityId, key);
       clientActivityId && nextClientActivityIdToKeyMap.set(clientActivityId, key);
       nextActivityToKeyMap.set(activity, key);
       nextActivityKeys.add(key);
 
-      const activitiesForKey = nextKeyToActivitiesMap.has(key) ? [...nextKeyToActivitiesMap.get(key)] : [];
+      const activities = nextKeyToActivitiesMap.has(key) ? [...nextKeyToActivitiesMap.get(key)] : [];
 
-      activitiesForKey.push(activity);
-      nextKeyToActivitiesMap.set(key, Object.freeze(activitiesForKey));
+      activities.push(activity);
+      nextKeyToActivitiesMap.set(key, Object.freeze(activities));
     });
 
-    activityIdToKeyMapRef.current = nextActivityIdToKeyMap;
-    activityToKeyMapRef.current = nextActivityToKeyMap;
-    clientActivityIdToKeyMapRef.current = nextClientActivityIdToKeyMap;
-    keyToActivitiesMapRef.current = nextKeyToActivitiesMap;
-    prevActivitiesRef.current = activities;
-
-    // Slow path did a full recalculation — no frozen check needed, reset warnings.
-    pendingFrozenCheckRef.current = undefined;
-    warnedPositionsRef.current.clear();
-
-    const nextKeys = Object.freeze([...nextActivityKeys.values()]);
-    const result = Object.freeze([nextKeys]) as readonly [readonly string[]];
-
-    prevActivityKeysStateRef.current = result;
-
-    return result;
-  }, [
-    activities,
-    activityIdToKeyMapRef,
-    activityToKeyMapRef,
-    clientActivityIdToKeyMapRef,
-    keyToActivitiesMapRef,
-    pendingFrozenCheckRef,
-    prevActivitiesRef,
-    prevActivityKeysStateRef,
-    warnedPositionsRef
-  ]);
-
-  // Deferred verification: after FROZEN_CHECK_TIMEOUT of quiet, validate that activities
-  // inside the frozen portion have not actually changed. Warn once per position if they did.
-  // Uses requestIdleCallback inside the timeout to avoid contending with the first post-stream repaint.
-  useEffect(() => {
-    const pending = pendingFrozenCheckRef.current;
-
-    if (!pending) {
-      return;
-    }
-
-    let idleHandle: ReturnType<NonNullable<typeof requestIdleCallback>> | undefined;
-
-    const runCheck = () => {
-      const { current: currentActivities, frozenBoundary, prev: prevFrozenActivities } = pending;
-
-      for (let i = 0; i < frozenBoundary; i++) {
-        // eslint-disable-next-line security/detect-object-injection
-        if (prevFrozenActivities[i] !== currentActivities[i] && !warnedPositionsRef.current.has(i)) {
-          warnedPositionsRef.current.add(i);
-
-          console.warn(
-            `botframework-webchat internal: change in activity at position ${i} was not applied because it is outside the mutable window of ${MUTABLE_ACTIVITY_WINDOW}.`
-          );
-        }
-      }
-    };
-
-    const timer = setTimeout(() => {
-      if (requestIdleCallback) {
-        idleHandle = requestIdleCallback(runCheck);
-      } else {
-        runCheck();
-      }
-    }, FROZEN_CHECK_TIMEOUT);
+    activityIdToKeyMapRef.current = Object.freeze(nextActivityIdToKeyMap);
+    activityToKeyMapRef.current = Object.freeze(nextActivityToKeyMap);
+    clientActivityIdToKeyMapRef.current = Object.freeze(nextClientActivityIdToKeyMap);
+    keyToActivitiesMapRef.current = Object.freeze(nextKeyToActivitiesMap);
 
-    return () => {
-      clearTimeout(timer);
-      idleHandle !== undefined && cancelIdleCallback?.(idleHandle);
-    };
-  }, [activities, cancelIdleCallback, clearTimeout, requestIdleCallback, setTimeout]);
+    // `nextActivityKeys` could potentially same as `prevActivityKeys` despite reference differences, we should memoize it.
+    return Object.freeze([Object.freeze([...nextActivityKeys.values()])]) as readonly [readonly string[]];
+  }, [activities, activityIdToKeyMapRef, activityToKeyMapRef, clientActivityIdToKeyMapRef, keyToActivitiesMapRef]);
 
   const getActivitiesByKey: (key?: string | undefined) => readonly WebChatActivity[] | undefined = useCallback(
     (key?: string | undefined): readonly WebChatActivity[] | undefined => key && keyToActivitiesMapRef.current.get(key),
@@ -285,7 +122,13 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
   );
 
   const contextValue = useMemo<ActivityKeyerContextType>(
-    () => ({ activityKeysState, getActivityByKey, getActivitiesByKey, getKeyByActivity, getKeyByActivityId }),
+    () => ({
+      activityKeysState,
+      getActivityByKey,
+      getActivitiesByKey,
+      getKeyByActivity,
+      getKeyByActivityId
+    }),
     [activityKeysState, getActivitiesByKey, getActivityByKey, getKeyByActivity, getKeyByActivityId]
   );
 

package/src/providers/ActivityKeyer/private/someIterable.spec.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-magic-numbers */
+
 import someIterable from './someIterable';
 
 describe('when predicate return true should return true', () => {

package/src/providers/ActivityListener/ActivityListenerComposer.tsx

@@ -8,7 +8,7 @@ type Props = Readonly<{ children?: ReactNode | undefined }>;
 
 const ActivityListenerComposer = memo(({ children }: Props) => {
   const [activities] = useActivities();
-  const prevActivities = usePrevious<readonly WebChatActivity[]>(activities, Object.freeze([]));
+  const prevActivities = usePrevious<WebChatActivity[]>(activities, []);
 
   const upsertedActivitiesState = useMemo<readonly [readonly WebChatActivity[]]>(() => {
     const upserts: WebChatActivity[] = [];

package/src/providers/ActivitySendStatus/ActivitySendStatusComposer.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useMemo, useRef, type ReactNode } from 'react';
-import { querySendStatusFromOutgoingActivity } from 'botframework-webchat-core/activity.js';
+import React, { useEffect, useMemo, useRef, type FC, type PropsWithChildren } from 'react';
 
 import { useActivities, usePonyfill } from '../../hooks/index';
 import useForceRender from '../../hooks/internal/useForceRender';
@@ -15,7 +14,7 @@ import isMapEqual from './private/isMapEqual';
 const EXPIRY_SEND_FAILED = -Infinity;
 const EXPIRY_SENT = Infinity;
 
-const ActivitySendStatusComposer = ({ children }: Readonly<{ children?: ReactNode | undefined }>) => {
+const ActivitySendStatusComposer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const [activities] = useActivities();
   const [{ clearTimeout, Date, setTimeout }] = usePonyfill();
   const forceRender = useForceRender();
@@ -44,11 +43,9 @@ const ActivitySendStatusComposer = ({ children }: Readonly<{ children?: ReactNod
 
             if (key) {
               const {
-                channelData: { state }
+                channelData: { state, 'webchat:send-status': sendStatus }
               } = activity;
 
-              const sendStatus = querySendStatusFromOutgoingActivity(activity);
-
               // `channelData.state` is being deprecated in favor of `channelData['webchat:send-status']`.
               // Please refer to #4362 for details. Remove on or after 2024-07-31.
               const rectifiedSendStatus = sendStatus || (state === 'sent' ? 'sent' : 'sending');

package/src/providers/ActivityTyping/ActivityTypingComposer.tsx

@@ -1,166 +1,80 @@
-import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core';
-import { queryReceivedAtFromActivity } from 'botframework-webchat-core/activity.js';
-import { iteratorFind } from 'iter-fest';
-import React, { memo, useCallback, useMemo, type ReactNode } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo, type ReactNode } from 'react';
+import { useRefFrom } from 'use-ref-from';
 
 import numberWithInfinity from '../../hooks/private/numberWithInfinity';
+import useActivities from '../../hooks/useActivities';
 import usePonyfill from '../../hooks/usePonyfill';
+import useUpsertedActivities from '../../providers/ActivityListener/useUpsertedActivities';
 import ActivityTypingContext, { ActivityTypingContextType } from './private/Context';
-import useReduceActivities from './private/useReduceActivities';
+import useMemoWithPrevious from './private/useMemoWithPrevious';
 import { type AllTyping } from './types/AllTyping';
 
-type Entry = {
-  livestreamActivities: Map<
-    string,
-    {
-      activity: WebChatActivity;
-      contentful: boolean;
-      firstReceivedAt: number;
-      lastReceivedAt: number;
-    }
-  >;
-  name: string | undefined;
-  role: 'bot' | 'user';
-  typingIndicator:
-    | {
-        activity: WebChatActivity;
-        duration: number;
-        firstReceivedAt: number;
-        lastReceivedAt: number;
-      }
-    | undefined;
-};
+const INITIAL_ALL_TYPING_STATE = Object.freeze([Object.freeze(new Map())] as const);
 
 type Props = Readonly<{ children?: ReactNode | undefined }>;
 
+function isLivestreamChunk(activity: WebChatActivity): boolean {
+  return (
+    activity.type === 'typing' &&
+    'text' in activity &&
+    typeof activity.text === 'string' &&
+    activity.channelData.streamType !== 'informative'
+  );
+}
+
 const ActivityTypingComposer = ({ children }: Props) => {
   const [{ Date }] = usePonyfill();
+  const [activities] = useActivities();
+  const [upsertedActivities] = useUpsertedActivities();
+  const activitiesRef = useRefFrom(activities);
+
+  const allTypingState = useMemoWithPrevious<readonly [ReadonlyMap<string, AllTyping>]>(
+    (prevAllTypingState = INITIAL_ALL_TYPING_STATE) => {
+      const { current: activities } = activitiesRef;
+      const nextTyping = new Map(prevAllTypingState[0]);
+      let changed = false;
+
+      const firstIndex = upsertedActivities.reduce(
+        (firstIndex, upsertedActivity) => Math.min(firstIndex, activities.indexOf(upsertedActivity)),
+        Infinity
+      );
 
-  const reducer = useCallback(
-    (
-      prevTypingState: ReadonlyMap<string, Readonly<Entry>> | undefined,
-      activity: WebChatActivity
-    ): ReadonlyMap<string, Readonly<Entry>> | undefined => {
-      const {
-        from: { id, name, role },
-        type
-      } = activity;
-
-      if (role === 'channel') {
-        return prevTypingState;
-      }
-
-      // A normal message activity, or final activity (which could be "message" or "typing"), will remove the typing indicator.
-      const receivedAt = queryReceivedAtFromActivity(activity) ?? Date.now();
-
-      const livestreamingMetadata = getActivityLivestreamingMetadata(activity);
-      const typingState = new Map(prevTypingState);
-      const existingEntry = typingState.get(id);
-      const mutableEntry: Entry = {
-        typingIndicator: undefined,
-        ...existingEntry,
-        livestreamActivities: new Map(existingEntry?.livestreamActivities),
-        name,
-        role
-      };
-
-      if (livestreamingMetadata) {
-        mutableEntry.typingIndicator = undefined;
-
-        const { sessionId } = livestreamingMetadata;
-
-        if (livestreamingMetadata.type === 'final activity') {
-          mutableEntry.livestreamActivities.delete(sessionId);
-        } else {
-          mutableEntry.livestreamActivities.set(
-            sessionId,
-            Object.freeze({
-              firstReceivedAt: mutableEntry.livestreamActivities.get(sessionId)?.firstReceivedAt ?? receivedAt,
-              ...mutableEntry.livestreamActivities.get(sessionId),
-              activity,
-              contentful: livestreamingMetadata.type !== 'contentless',
-              lastReceivedAt: receivedAt
-            })
-          );
+      for (const activity of activities.slice(firstIndex)) {
+        const {
+          from,
+          from: { id, role },
+          type
+        } = activity;
+
+        if (type === 'typing' && (role === 'bot' || role === 'user')) {
+          const currentTyping = nextTyping.get(id);
+          // TODO: When we rework on types of DLActivity, we will make sure all activities has "webChat.receivedAt", this coalesces can be removed.
+          const receivedAt = activity.channelData.webChat?.receivedAt || Date.now();
+
+          nextTyping.set(id, {
+            firstReceivedAt: currentTyping?.firstReceivedAt || receivedAt,
+            lastActivityDuration: numberWithInfinity(
+              activity.channelData.webChat?.styleOptions?.typingAnimationDuration
+            ),
+            lastReceivedAt: receivedAt,
+            name: from.name,
+            role,
+            type: isLivestreamChunk(activity) ? 'livestream' : 'busy' // Informative message means the bot is busy.
+          });
+
+          changed = true;
+        } else if (type === 'message') {
+          nextTyping.delete(id);
+          changed = true;
         }
-      } else if (type === 'message') {
-        mutableEntry.typingIndicator = undefined;
-      } else if (type === 'typing') {
-        mutableEntry.typingIndicator = Object.freeze({
-          activity,
-          duration: numberWithInfinity(activity.channelData.webChat?.styleOptions?.typingAnimationDuration),
-          firstReceivedAt: mutableEntry.typingIndicator?.firstReceivedAt ?? receivedAt,
-          lastReceivedAt: receivedAt
-        });
       }
 
-      typingState.set(id, Object.freeze(mutableEntry));
-
-      return Object.freeze(typingState);
+      return changed ? Object.freeze([nextTyping]) : prevAllTypingState;
     },
-    [Date]
+    [activitiesRef, upsertedActivities]
   );
 
-  const state: ReadonlyMap<string, Entry> = useReduceActivities(reducer) || Object.freeze(new Map());
-
-  const allTyping = useMemo(() => {
-    const map = new Map<string, AllTyping>();
-
-    for (const [id, entry] of state.entries()) {
-      const firstContentfulLivestream = iteratorFind(
-        entry.livestreamActivities.values(),
-        ({ contentful }) => contentful
-      );
-
-      const firstContentlessLivestream = iteratorFind(
-        entry.livestreamActivities.values(),
-        ({ contentful }) => !contentful
-      );
-
-      if (firstContentfulLivestream) {
-        map.set(
-          id,
-          Object.freeze({
-            firstReceivedAt: firstContentfulLivestream.firstReceivedAt,
-            lastActivityDuration: Infinity,
-            lastReceivedAt: firstContentfulLivestream.lastReceivedAt,
-            name: entry.name,
-            role: entry.role,
-            type: 'livestream'
-          } satisfies AllTyping)
-        );
-      } else if (firstContentlessLivestream) {
-        map.set(
-          id,
-          Object.freeze({
-            firstReceivedAt: firstContentlessLivestream.firstReceivedAt,
-            lastActivityDuration: Infinity,
-            lastReceivedAt: firstContentlessLivestream.lastReceivedAt,
-            name: entry.name,
-            role: entry.role,
-            type: 'busy'
-          } satisfies AllTyping)
-        );
-      } else if (entry.typingIndicator) {
-        map.set(
-          id,
-          Object.freeze({
-            firstReceivedAt: entry.typingIndicator.firstReceivedAt,
-            lastActivityDuration: entry.typingIndicator.duration,
-            lastReceivedAt: entry.typingIndicator.lastReceivedAt,
-            name: entry.name,
-            role: entry.role,
-            type: 'busy'
-          } satisfies AllTyping)
-        );
-      }
-    }
-
-    return map;
-  }, [state]);
-
-  const allTypingState = useMemo(() => Object.freeze([allTyping] as const), [allTyping]);
-
   const context = useMemo<ActivityTypingContextType>(() => ({ allTypingState }), [allTypingState]);
 
   return <ActivityTypingContext.Provider value={context}>{children}</ActivityTypingContext.Provider>;

package/src/providers/ActivityTyping/private/useMemoWithPrevious.ts

@@ -0,0 +1,17 @@
+// TODO: [P1] Dedupe.
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { DependencyList } from 'react';
+
+export default function useMemoWithPrevious<T>(factory: (prevValue: T | undefined) => T, deps: DependencyList): T {
+  const prevValueRef = useRef<T | undefined>(undefined);
+  // We are building a `useMemo`-like hook, `deps` is passed as-is and `factory` is not one fo the dependencies.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const value = useMemo<T>(() => factory(prevValueRef.current), deps);
+
+  useEffect(() => {
+    prevValueRef.current = value;
+  });
+
+  return value;
+}

package/src/tsconfig.json

@@ -1,9 +1,18 @@
 {
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationDir": "../lib",
+    "declarationMap": true,
     "downlevelIteration": true,
-    "resolveJsonModule": true, // Required for localization files.
-    "strict": false, // We should flip this occasionally and fix all typing issues.
-    "types": ["dom-speech-recognition"]
-  },
-  "extends": "@msinternal/botframework-webchat-tsconfig/legacy"
+    "emitDeclarationOnly": true,
+    "jsx": "react",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "preserveWatchOutput": true,
+    "pretty": true,
+    "resolveJsonModule": true, // Required for localization files
+    "skipLibCheck": true,
+    "sourceMap": true
+  }
 }

package/src/types/ActivityMiddleware.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { RenderAttachment } from './AttachmentMiddleware';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+type ActivityProps = {
+  hideTimestamp: boolean;
+  renderActivityStatus: (options: { hideTimestamp: boolean }) => ReactNode;
+  renderAvatar: false | (() => Exclude<ReactNode, boolean | null | undefined>);
+  showCallout: boolean;
+};
+
+type ActivityComponent = (props: ActivityProps) => Exclude<ReactNode, boolean | null | undefined>;
+
+type ActivityComponentFactoryOptions = {
+  activity: WebChatActivity;
+  nextVisibleActivity: WebChatActivity;
+};
+
+type ActivityComponentFactory = (options: ActivityComponentFactoryOptions) => ActivityComponent | false;
+
+// TODO: [P2] This is inherited from our older signature (pre-hook) which requires passing "renderAttachment" argument.
+//       With hooks, the middleware should not need "renderAttachment", they can grab it from "useCreateAttachmentRenderer" hook.
+type LegacyRenderActivity = (
+  renderAttachment: RenderAttachment,
+  { hideTimestamp, renderActivityStatus, renderAvatar, showCallout }: ActivityProps
+) => Exclude<ReactNode, boolean>;
+
+type LegacyActivityRenderer = (options: ActivityComponentFactoryOptions) => LegacyRenderActivity | false;
+
+// The middleware created by the web developer, are using the legacy signature (with "renderAttachment" argument).
+type ActivityEnhancer = (next: LegacyActivityRenderer) => LegacyActivityRenderer;
+type ActivityMiddleware = () => ActivityEnhancer;
+
+export default ActivityMiddleware;
+
+export type { ActivityComponentFactory, LegacyActivityRenderer };

package/src/types/ActivityStatusMiddleware.ts

@@ -1,5 +1,5 @@
-import type { WebChatActivity } from 'botframework-webchat-core';
 import type { ReactElement } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import type { SendStatus } from '../types/SendStatus';
 
@@ -8,6 +8,14 @@ type RenderActivityStatusOptions = {
   activity: WebChatActivity;
   hideTimestamp: boolean;
   sendState: SendStatus;
+
+  // "nextVisibleActivity" is for backward compatibility, please remove this line on or after 2022-07-22.
+  /** @deprecated */
+  nextVisibleActivity: WebChatActivity;
+
+  // "sameTimestampGroup" is for backward compatibility, please remove this line on or after 2022-07-22.
+  /** @deprecated */
+  sameTimestampGroup: boolean;
 };
 
 type RenderActivityStatus = (options: RenderActivityStatusOptions) => ReactElement;