botframework-webchat-api 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/src/providers/ActivityKeyer/ActivityKeyerComposer.tsx

@@ -1,18 +1,21 @@
-import type { WebChatActivity } from 'botframework-webchat-core';
+import { getActivityLivestreamingMetadata, 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 type { ActivityKeyerContextType } from './private/Context';
 import ActivityKeyerContext from './private/Context';
 import getActivityId from './private/getActivityId';
 import getClientActivityId from './private/getClientActivityId';
+import lastOf from './private/lastOf';
+import someIterable from './private/someIterable';
 import uniqueId from './private/uniqueId';
 import useActivityKeyerContext from './private/useContext';
 
 type ActivityIdToKeyMap = Map<string, string>;
 type ActivityToKeyMap = Map<WebChatActivity, string>;
 type ClientActivityIdToKeyMap = Map<string, string>;
-type KeyToActivityMap = Map<string, WebChatActivity>;
+type KeyToActivitiesMap = Map<string, readonly WebChatActivity[]>;
 
 /**
  * React context composer component to assign a perma-key to every activity.
@@ -39,7 +42,7 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
   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 keyToActivityMapRef = useRef<Readonly<KeyToActivityMap>>(Object.freeze(new Map()));
+  const keyToActivitiesMapRef = useRef<Readonly<KeyToActivitiesMap>>(Object.freeze(new Map()));
 
   // TODO: [P1] `useMemoWithPrevious` to check and cache the resulting array if it hasn't changed.
   const activityKeysState = useMemo<readonly [readonly string[]]>(() => {
@@ -47,60 +50,69 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
     const { current: activityToKeyMap } = activityToKeyMapRef;
     const { current: clientActivityIdToKeyMap } = clientActivityIdToKeyMapRef;
     const nextActivityIdToKeyMap: ActivityIdToKeyMap = new Map();
-    const nextActivityKeys: string[] = [];
+    const nextActivityKeys: Set<string> = new Set();
     const nextActivityToKeyMap: ActivityToKeyMap = new Map();
     const nextClientActivityIdToKeyMap: ClientActivityIdToKeyMap = new Map();
-    const nextKeyToActivityMap: KeyToActivityMap = new Map();
+    const nextKeyToActivitiesMap: KeyToActivitiesMap = new Map();
 
     activities.forEach(activity => {
       const activityId = getActivityId(activity);
       const clientActivityId = getClientActivityId(activity);
+      const typingActivityId = getActivityLivestreamingMetadata(activity)?.sessionId;
 
       const key =
-        (clientActivityId && clientActivityIdToKeyMap.get(clientActivityId)) ||
-        (activityId && activityIdToKeyMap.get(activityId)) ||
+        (clientActivityId &&
+          (clientActivityIdToKeyMap.get(clientActivityId) || nextClientActivityIdToKeyMap.get(clientActivityId))) ||
+        (typingActivityId &&
+          (activityIdToKeyMap.get(typingActivityId) || nextActivityIdToKeyMap.get(typingActivityId))) ||
+        (activityId && (activityIdToKeyMap.get(activityId) || nextActivityIdToKeyMap.get(activityId))) ||
         activityToKeyMap.get(activity) ||
+        nextActivityToKeyMap.get(activity) ||
         uniqueId();
 
       activityId && nextActivityIdToKeyMap.set(activityId, key);
       clientActivityId && nextClientActivityIdToKeyMap.set(clientActivityId, key);
       nextActivityToKeyMap.set(activity, key);
-      nextKeyToActivityMap.set(key, activity);
-      nextActivityKeys.push(key);
+      nextActivityKeys.add(key);
+
+      const activities = nextKeyToActivitiesMap.has(key) ? [...nextKeyToActivitiesMap.get(key)] : [];
+
+      activities.push(activity);
+      nextKeyToActivitiesMap.set(key, Object.freeze(activities));
     });
 
     activityIdToKeyMapRef.current = Object.freeze(nextActivityIdToKeyMap);
     activityToKeyMapRef.current = Object.freeze(nextActivityToKeyMap);
     clientActivityIdToKeyMapRef.current = Object.freeze(nextClientActivityIdToKeyMap);
-    keyToActivityMapRef.current = Object.freeze(nextKeyToActivityMap);
+    keyToActivitiesMapRef.current = Object.freeze(nextKeyToActivitiesMap);
 
     // `nextActivityKeys` could potentially same as `prevActivityKeys` despite reference differences, we should memoize it.
-    return Object.freeze([Object.freeze(nextActivityKeys)]) as readonly [readonly string[]];
-  }, [activities, activityIdToKeyMapRef, activityToKeyMapRef, clientActivityIdToKeyMapRef, keyToActivityMapRef]);
+    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),
+    [keyToActivitiesMapRef]
+  );
 
-  const getActivityByKey: (key?: string) => undefined | WebChatActivity = useCallback(
-    (key?: string): undefined | WebChatActivity => key && keyToActivityMapRef.current.get(key),
-    [keyToActivityMapRef]
+  const getActivityByKey: (key?: string | undefined) => undefined | WebChatActivity = useCallback(
+    (key?: string | undefined): undefined | WebChatActivity => lastOf(getActivitiesByKey(key)),
+    [getActivitiesByKey]
   );
 
-  const getKeyByActivity: (activity?: WebChatActivity) => string | undefined = useCallback(
-    (activity?: WebChatActivity) => activity && activityToKeyMapRef.current.get(activity),
+  const getKeyByActivity: (activity?: WebChatActivity | undefined) => string | undefined = useCallback(
+    (activity?: WebChatActivity | undefined) => activity && activityToKeyMapRef.current.get(activity),
     [activityToKeyMapRef]
   );
 
-  const getKeyByActivityId: (activityId?: string) => string | undefined = useCallback(
-    (activityId?: string) => activityId && activityIdToKeyMapRef.current.get(activityId),
+  const getKeyByActivityId: (activityId?: string | undefined) => string | undefined = useCallback(
+    (activityId?: string | undefined) => activityId && activityIdToKeyMapRef.current.get(activityId),
     [activityIdToKeyMapRef]
   );
 
   const contextValue = useMemo<ActivityKeyerContextType>(
-    () => ({
-      activityKeysState,
-      getActivityByKey,
-      getKeyByActivity,
-      getKeyByActivityId
-    }),
-    [activityKeysState, getActivityByKey, getKeyByActivity, getKeyByActivityId]
+    () => ({ activityKeysState, getActivityByKey, getActivitiesByKey, getKeyByActivity, getKeyByActivityId }),
+    [activityKeysState, getActivitiesByKey, getActivityByKey, getKeyByActivity, getKeyByActivityId]
   );
 
   const { length: numActivities } = activities;
@@ -123,15 +135,23 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
     );
   }
 
-  if (keyToActivityMapRef.current.size !== numActivities) {
+  if (someIterable(keyToActivitiesMapRef.current.values(), ({ length }) => !length)) {
+    console.warn(
+      'botframework-webchat internal assertion: all values in "keyToActivitiesMap" should have at least one item.'
+    );
+  }
+
+  if (
+    reduceIterable(keyToActivitiesMapRef.current.values(), (total, { length }) => total + length, 0) !== numActivities
+  ) {
     console.warn(
-      'botframework-webchat internal assertion: "keyToActivityMap.size" should be same as "activities.length".'
+      'botframework-webchat internal assertion: "keyToActivitiesMap.size" should be same as "activities.length".'
     );
   }
 
-  if (activityKeysState[0].length !== numActivities) {
+  if (activityKeysState[0].length !== keyToActivitiesMapRef.current.size) {
     console.warn(
-      'botframework-webchat internal assertion: "activityKeys.length" should be same as "activities.length".'
+      'botframework-webchat internal assertion: "activityKeys.length" should be same as "keyToActivitiesMap.size".'
     );
   }
 

package/src/providers/ActivityKeyer/private/Context.ts

@@ -1,8 +1,9 @@
-import { createContext } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
+import { createContext } from 'react';
 
 type ActivityKeyerContextType = {
   activityKeysState: readonly [readonly string[]];
+  getActivitiesByKey: (key?: string) => readonly WebChatActivity[] | undefined;
   getActivityByKey: (key?: string) => undefined | WebChatActivity;
   getKeyByActivity: (activity?: WebChatActivity) => string | undefined;
   getKeyByActivityId: (activityKey?: string) => string | undefined;

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

@@ -0,0 +1,6 @@
+import lastOf from './lastOf';
+
+test('should return last element', () => expect(lastOf(Object.freeze(['1', '2', '3']))).toBe('3'));
+test('when passed empty array should return undefined', () => expect(lastOf([])).toBeUndefined());
+test('when passed undefined should return undefined', () => expect(lastOf(undefined)).toBeUndefined());
+test('when passed null should return undefined', () => expect(lastOf(null as any)).toBeUndefined());

package/src/providers/ActivityKeyer/private/lastOf.ts

@@ -0,0 +1,3 @@
+export default function lastOf<T>(array: readonly T[] | undefined): T | undefined {
+  return array?.[array.length - 1];
+}

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

@@ -0,0 +1,44 @@
+import someIterable from './someIterable';
+
+describe('when predicate return true should return true', () => {
+  let predicate: jest.Mock<boolean, []>;
+  let actual: boolean;
+
+  beforeEach(() => {
+    predicate = jest.fn(() => true);
+    actual = someIterable(['1', '2', '3'], predicate);
+  });
+
+  test('should return true', () => expect(actual).toBe(true));
+  test('should have called predicate once', () => expect(predicate).toHaveBeenCalledTimes(1));
+  test("should have called predicate with '1'", () => expect(predicate).toHaveBeenNthCalledWith(1, '1'));
+});
+
+describe('when predicate return false should return false', () => {
+  let predicate: jest.Mock<boolean, []>;
+  let actual: boolean;
+
+  beforeEach(() => {
+    predicate = jest.fn(() => false);
+    actual = someIterable(['1', '2', '3'], predicate);
+  });
+
+  test('should return false', () => expect(actual).toBe(false));
+  test('should have called predicate 3 times', () => expect(predicate).toHaveBeenCalledTimes(3));
+  test("should have called predicate with '1'", () => expect(predicate).toHaveBeenNthCalledWith(1, '1'));
+  test("should have called predicate with '2'", () => expect(predicate).toHaveBeenNthCalledWith(2, '2'));
+  test("should have called predicate with '3'", () => expect(predicate).toHaveBeenNthCalledWith(3, '3'));
+});
+
+describe('when passed an empty array', () => {
+  let predicate: jest.Mock<boolean, []>;
+  let actual: boolean;
+
+  beforeEach(() => {
+    predicate = jest.fn();
+    actual = someIterable([], predicate);
+  });
+
+  test('should return false', () => expect(actual).toBe(false));
+  test('should not call predicate', () => expect(predicate).toHaveBeenCalledTimes(0));
+});

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

@@ -0,0 +1,9 @@
+export default function someIterable<T>(iterable: Iterable<T>, predicate: (item: T) => boolean): boolean {
+  for (const item of iterable) {
+    if (predicate(item)) {
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/providers/ActivityKeyer/useGetActivitiesByKey.ts

@@ -0,0 +1,7 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+import useActivityKeyerContext from './private/useContext';
+
+export default function useGetActivitiesByKey(): (key?: string) => readonly WebChatActivity[] | undefined {
+  return useActivityKeyerContext().getActivitiesByKey;
+}

package/src/providers/ActivityListener/ActivityListenerComposer.tsx

@@ -0,0 +1,28 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo, type ReactNode } from 'react';
+import usePrevious from '../../hooks/internal/usePrevious';
+import useActivities from '../../hooks/useActivities';
+import ActivityListenerContext, { type ActivityListenerContextType } from './private/Context';
+
+type Props = Readonly<{ children?: ReactNode | undefined }>;
+
+const ActivityListenerComposer = memo(({ children }: Props) => {
+  const [activities] = useActivities();
+  const prevActivities = usePrevious<WebChatActivity[]>(activities, []);
+
+  const upsertedActivitiesState = useMemo<readonly [readonly WebChatActivity[]]>(() => {
+    const upserts: WebChatActivity[] = [];
+
+    for (const activity of activities) {
+      prevActivities.includes(activity) || upserts.push(activity);
+    }
+
+    return Object.freeze([Object.freeze(upserts)]);
+  }, [activities, prevActivities]);
+
+  const context = useMemo<ActivityListenerContextType>(() => ({ upsertedActivitiesState }), [upsertedActivitiesState]);
+
+  return <ActivityListenerContext.Provider value={context}>{children}</ActivityListenerContext.Provider>;
+});
+
+export default ActivityListenerComposer;

package/src/providers/ActivityListener/private/Context.tsx

@@ -0,0 +1,16 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { createContext } from 'react';
+
+export type ActivityListenerContextType = {
+  upsertedActivitiesState: readonly [readonly WebChatActivity[]];
+};
+
+const ActivityListenerContext = createContext<ActivityListenerContextType>(
+  new Proxy({} as ActivityListenerContextType, {
+    get() {
+      throw new Error('botframework-webchat internal: This hook can only used under <ActivityListenerComposer>.');
+    }
+  })
+);
+
+export default ActivityListenerContext;

package/src/providers/ActivityListener/private/useContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import ActivityListenerContext from './Context';
+
+export default function useActivityListenerContext() {
+  return useContext(ActivityListenerContext);
+}

package/src/providers/ActivityListener/useUpsertedActivities.ts

@@ -0,0 +1,6 @@
+import type { WebChatActivity } from 'botframework-webchat-core';
+import useActivityListenerContext from './private/useContext';
+
+export default function useUpsertedActivities(): readonly [readonly WebChatActivity[]] {
+  return useActivityListenerContext().upsertedActivitiesState;
+}

package/src/providers/ActivitySendStatus/ActivitySendStatusComposer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, type FC, type PropsWithChildren } from 'react';
+import React, { useEffect, useMemo, useRef, type ReactNode } from 'react';
 
 import { useActivities, usePonyfill } from '../../hooks/index';
 import useForceRender from '../../hooks/internal/useForceRender';
@@ -14,7 +14,7 @@ import isMapEqual from './private/isMapEqual';
 const EXPIRY_SEND_FAILED = -Infinity;
 const EXPIRY_SENT = Infinity;
 
-const ActivitySendStatusComposer: FC<PropsWithChildren<{}>> = ({ children }) => {
+const ActivitySendStatusComposer = ({ children }: Readonly<{ children?: ReactNode | undefined }>) => {
   const [activities] = useActivities();
   const [{ clearTimeout, Date, setTimeout }] = usePonyfill();
   const forceRender = useForceRender();

package/src/providers/ActivityTyping/ActivityTypingComposer.tsx

@@ -0,0 +1,170 @@
+import { getActivityLivestreamingMetadata, type WebChatActivity } from 'botframework-webchat-core';
+import { iteratorFind } from 'iter-fest';
+import React, { memo, useCallback, useMemo, type ReactNode } from 'react';
+
+import numberWithInfinity from '../../hooks/private/numberWithInfinity';
+import usePonyfill from '../../hooks/usePonyfill';
+import ActivityTypingContext, { ActivityTypingContextType } from './private/Context';
+import useReduceActivities from './private/useReduceActivities';
+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;
+};
+
+type Props = Readonly<{ children?: ReactNode | undefined }>;
+
+const ActivityTypingComposer = ({ children }: Props) => {
+  const [{ Date }] = usePonyfill();
+
+  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 = activity.channelData?.webChat?.receivedAt || 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: Date.now(),
+              ...mutableEntry.livestreamActivities.get(sessionId),
+              activity,
+              contentful: livestreamingMetadata.type !== 'contentless',
+              lastReceivedAt: receivedAt
+            })
+          );
+        }
+      } 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 || Date.now(),
+          lastReceivedAt: receivedAt
+        });
+      }
+
+      typingState.set(id, Object.freeze(mutableEntry));
+
+      return Object.freeze(typingState);
+    },
+    [Date]
+  );
+
+  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>;
+};
+
+ActivityTypingComposer.displayName = 'ActivityTypingComposer';
+
+export default memo(ActivityTypingComposer);

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

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import { type AllTyping } from '../types/AllTyping';
+
+export type ActivityTypingContextType = {
+  allTypingState: readonly [ReadonlyMap<string, AllTyping>];
+};
+
+const ActivityTypingContext = createContext<ActivityTypingContextType>(
+  new Proxy({} as ActivityTypingContextType, {
+    get() {
+      throw new Error('botframework-webchat internal: This hook can only be used under <ActivityTypingProvider>.');
+    }
+  })
+);
+
+export default ActivityTypingContext;

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import ActivityTypingContext, { type ActivityTypingContextType } from './Context';
+
+export default function useActivityTypingContext(): ActivityTypingContextType {
+  return useContext(ActivityTypingContext);
+}

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;
+}