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

package/src/providers/ActivityKeyer/ActivityKeyerComposer.tsx

@@ -1,4 +1,4 @@
-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';
@@ -17,20 +17,6 @@ type ActivityToKeyMap = Map<WebChatActivity, string>;
 type ClientActivityIdToKeyMap = Map<string, string>;
 type KeyToActivitiesMap = Map<string, readonly WebChatActivity[]>;
 
-function getTypingActivityId(activity: WebChatActivity): string | undefined {
-  const { type } = activity;
-
-  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.
  * This will support both `useGetActivityByKey` and `useGetKeyByActivity` custom hooks.
@@ -72,13 +58,16 @@ const ActivityKeyerComposer = ({ children }: Readonly<{ children?: ReactNode | u
     activities.forEach(activity => {
       const activityId = getActivityId(activity);
       const clientActivityId = getClientActivityId(activity);
-      const typingActivityId = getTypingActivityId(activity);
+      const typingActivityId = getActivityLivestreamingMetadata(activity)?.sessionId;
 
       const key =
-        (clientActivityId && clientActivityIdToKeyMap.get(clientActivityId)) ||
-        (typingActivityId && activityIdToKeyMap.get(typingActivityId)) ||
-        (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);
@@ -122,13 +111,7 @@ 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,5 +1,3 @@
-/* eslint-disable no-magic-numbers */
-
 import someIterable from './someIterable';
 
 describe('when predicate return true should return true', () => {

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

@@ -1,80 +1,165 @@
-import type { WebChatActivity } from 'botframework-webchat-core';
-import React, { memo, useMemo, type ReactNode } from 'react';
-import { useRefFrom } from 'use-ref-from';
+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 useActivities from '../../hooks/useActivities';
 import usePonyfill from '../../hooks/usePonyfill';
-import useUpsertedActivities from '../../providers/ActivityListener/useUpsertedActivities';
 import ActivityTypingContext, { ActivityTypingContextType } from './private/Context';
-import useMemoWithPrevious from './private/useMemoWithPrevious';
+import useReduceActivities from './private/useReduceActivities';
 import { type AllTyping } from './types/AllTyping';
 
-const INITIAL_ALL_TYPING_STATE = Object.freeze([Object.freeze(new Map())] as const);
+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 }>;
 
-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
-      );
 
-      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;
+  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
+        });
       }
 
-      return changed ? Object.freeze([nextTyping]) : prevAllTypingState;
+      typingState.set(id, Object.freeze(mutableEntry));
+
+      return Object.freeze(typingState);
     },
-    [activitiesRef, upsertedActivities]
+    [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>;

package/src/providers/ActivityTyping/private/useReduceActivities.spec.tsx

@@ -0,0 +1,231 @@
+/** @jest-environment @happy-dom/jest-environment */
+
+import { render, type RenderResult } from '@testing-library/react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { type ComponentType } from 'react';
+import { type useActivities as UseActivitiesType } from '../../../hooks';
+import type UseReduceActivitiesType from './useReduceActivities';
+
+type UseReduceActivitiesFn = Parameters<typeof UseReduceActivitiesType>[0];
+
+const ACTIVITY_TEMPLATE = {
+  channelData: {
+    'webchat:sequence-id': 0,
+    'webchat:send-status': undefined
+  },
+  from: { id: 'bot', role: 'bot' },
+  id: 'a-00001',
+  text: '',
+  timestamp: '2025-03-10T12:34:56.789Z',
+  type: 'message'
+} satisfies WebChatActivity & { type: 'message' };
+
+describe('setup', () => {
+  let HookApp: ComponentType<{ fn: UseReduceActivitiesFn }>;
+  let useActivities: jest.Mock<ReturnType<typeof UseActivitiesType>, Parameters<typeof UseActivitiesType>>;
+  let useReduceActivities: jest.Mock<
+    ReturnType<typeof UseReduceActivitiesType>,
+    Parameters<typeof UseReduceActivitiesType>
+  >;
+  let fn: jest.Mock<ReturnType<UseReduceActivitiesFn>, Parameters<UseReduceActivitiesFn>>;
+  let renderResult: RenderResult;
+
+  beforeEach(() => {
+    jest.mock('../../../hooks', () => ({ __esModule: true, useActivities: jest.fn(() => [[]]) }));
+
+    ({ useActivities } = require('../../../hooks'));
+
+    useReduceActivities = jest.fn(require('./useReduceActivities').default);
+
+    fn = jest.fn().mockImplementation((prevResult, activity) => ({
+      maxText: prevResult?.maxText > activity['text'] ? prevResult?.maxText : activity['text']
+    }));
+
+    HookApp = ({ fn }) => {
+      useReduceActivities(fn);
+
+      return null;
+    };
+  });
+
+  test('reduce nothing', () => {
+    render(<HookApp fn={fn} />);
+
+    expect(fn).toHaveBeenCalledTimes(0);
+  });
+
+  describe('when the first activity is received', () => {
+    let firstActivity: WebChatActivity;
+
+    beforeEach(() => {
+      firstActivity = { ...ACTIVITY_TEMPLATE, id: 'a-00001', text: 'Aloha!' };
+
+      useActivities.mockImplementationOnce(() => [[firstActivity]]);
+
+      renderResult = render(<HookApp fn={fn} />);
+    });
+
+    describe('fn() should have been called', () => {
+      test('once', () => expect(fn).toHaveBeenCalledTimes(1));
+      test('with the activity', () =>
+        expect(fn).toHaveBeenLastCalledWith(undefined, firstActivity, 0, expect.arrayContaining([])));
+    });
+
+    test('return value should be derived from the first activity', () =>
+      expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Aloha!' }));
+
+    describe('when the second activity is received', () => {
+      let secondActivity: WebChatActivity;
+
+      beforeEach(() => {
+        secondActivity = { ...ACTIVITY_TEMPLATE, id: 'a-00002', text: 'Hello, World!' };
+
+        useActivities.mockImplementationOnce(() => [[firstActivity, secondActivity]]);
+
+        renderResult.rerender(<HookApp fn={fn} />);
+      });
+
+      describe('fn() should have been called', () => {
+        test('twice in total', () => expect(fn).toHaveBeenCalledTimes(2));
+        test('with the second activity', () =>
+          expect(fn).toHaveBeenLastCalledWith({ maxText: 'Aloha!' }, secondActivity, 1, expect.arrayContaining([])));
+
+        test('return value should be derived from the second activity', () =>
+          expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Hello, World!' }));
+      });
+
+      describe('when the third activity is inserted between the first and second activity', () => {
+        let thirdActivity: WebChatActivity;
+
+        beforeEach(() => {
+          thirdActivity = { ...ACTIVITY_TEMPLATE, id: 'a-00003', text: 'Morning!' };
+
+          useActivities.mockImplementationOnce(() => [[firstActivity, thirdActivity, secondActivity]]);
+
+          renderResult.rerender(<HookApp fn={fn} />);
+        });
+
+        describe('fn() should have been called', () => {
+          // It should call 2 more times because the first one should be from cache.
+          test('4 times in total', () => expect(fn).toHaveBeenCalledTimes(4));
+
+          test('with the third activity on 3rd call', () =>
+            expect(fn).toHaveBeenNthCalledWith(3, { maxText: 'Aloha!' }, thirdActivity, 1, expect.arrayContaining([])));
+          test('with the second activity on 4th call', () =>
+            expect(fn).toHaveBeenNthCalledWith(
+              4,
+              { maxText: 'Morning!' },
+              secondActivity,
+              2,
+              expect.arrayContaining([])
+            ));
+        });
+
+        test('return value should be derived from the third activity', () =>
+          expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Morning!' }));
+
+        describe('when all activities are removed', () => {
+          beforeEach(() => {
+            useActivities.mockImplementationOnce(() => [[]]);
+
+            renderResult.rerender(<HookApp fn={fn} />);
+          });
+
+          test('should not call fn()', () => expect(fn).toHaveBeenCalledTimes(4));
+          test('return value should be undefined', () => expect(useReduceActivities).toHaveLastReturnedWith(undefined));
+        });
+
+        describe('when the third activity is being replaced', () => {
+          let fourthActivity: WebChatActivity;
+
+          beforeEach(() => {
+            fourthActivity = { ...ACTIVITY_TEMPLATE, id: 'a-00004', text: 'Good morning!' };
+
+            useActivities.mockImplementationOnce(() => [[firstActivity, fourthActivity, secondActivity]]);
+
+            renderResult.rerender(<HookApp fn={fn} />);
+          });
+
+          describe('fn() should have been called', () => {
+            // It should call 2 more times because the first one should be from cache.
+            test('6 times in total', () => expect(fn).toHaveBeenCalledTimes(6));
+
+            test('with the fourth activity on 5rd call', () =>
+              expect(fn).toHaveBeenNthCalledWith(
+                5,
+                { maxText: 'Aloha!' },
+                fourthActivity,
+                1,
+                expect.arrayContaining([])
+              ));
+
+            test('with the second activity on 6th call', () =>
+              expect(fn).toHaveBeenNthCalledWith(
+                6,
+                { maxText: 'Good morning!' },
+                secondActivity,
+                2,
+                expect.arrayContaining([])
+              ));
+
+            test('return value should be derived from the second activity', () =>
+              expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Hello, World!' }));
+          });
+        });
+      });
+
+      describe('when the first activity is removed', () => {
+        beforeEach(() => {
+          useActivities.mockImplementationOnce(() => [[secondActivity]]);
+
+          renderResult.rerender(<HookApp fn={fn} />);
+        });
+
+        describe('should call fn', () => {
+          test('3 times in total', () => expect(fn).toHaveBeenCalledTimes(3));
+          test('with the second activity only', () =>
+            expect(fn).toHaveBeenLastCalledWith(undefined, secondActivity, 0, expect.arrayContaining([])));
+        });
+
+        test('return value should be derived from the second activity', () =>
+          expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Hello, World!' }));
+      });
+
+      describe('when the second activity is removed', () => {
+        beforeEach(() => {
+          useActivities.mockImplementationOnce(() => [[firstActivity]]);
+
+          renderResult.rerender(<HookApp fn={fn} />);
+        });
+
+        describe('should not call fn()', () => test('once', () => expect(fn).toHaveBeenCalledTimes(2)));
+
+        test('return value should be derived from the first activity', () =>
+          expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Aloha!' }));
+      });
+    });
+
+    describe('when all activities are removed', () => {
+      beforeEach(() => {
+        useActivities.mockImplementationOnce(() => [[]]);
+
+        renderResult.rerender(<HookApp fn={fn} />);
+      });
+
+      test('should not call fn()', () => expect(fn).toHaveBeenCalledTimes(1));
+      test('return value should be undefined', () => expect(useReduceActivities).toHaveLastReturnedWith(undefined));
+    });
+
+    describe('when activities are unchanged', () => {
+      beforeEach(() => {
+        useActivities.mockImplementationOnce(() => [[firstActivity]]);
+
+        renderResult.rerender(<HookApp fn={fn} />);
+      });
+
+      test('should not call fn()', () => expect(fn).toHaveBeenCalledTimes(1));
+      test('return value should be derived from the first activity', () =>
+        expect(useReduceActivities).toHaveLastReturnedWith({ maxText: 'Aloha!' }));
+    });
+  });
+});

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

@@ -0,0 +1,48 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { useActivities } from '../../../hooks';
+import useMemoWithPrevious from './useMemoWithPrevious';
+
+type Entry<T> = Readonly<{
+  activity: WebChatActivity;
+  value: T | undefined;
+}>;
+
+export default function useReduceActivities<T>(
+  fn: (prevValue: T, activity: WebChatActivity, index: number, activities: Readonly<WebChatActivity[]>) => T
+): T {
+  const [activities] = useActivities();
+
+  const state = useMemoWithPrevious<readonly Entry<T>[]>(
+    (state = Object.freeze([])) => {
+      let changed = activities.length !== state.length;
+      let prevValue: T | undefined;
+      let shouldRecompute = false;
+
+      const nextState = activities.map<Entry<T>>((activity, index) => {
+        const entry = state[+index];
+
+        if (!shouldRecompute && Object.is(entry?.activity, activity)) {
+          prevValue = entry?.value;
+
+          // Skips the activity if it has been reduced in the past render loop.
+          return entry;
+        }
+
+        changed = true;
+        shouldRecompute = true;
+
+        return Object.freeze({
+          activity,
+          value: (prevValue = fn(prevValue, activity, index, activities))
+        });
+      });
+
+      // Returns the original array if nothing changed.
+      return changed ? nextState : state;
+    },
+    [activities, fn]
+  );
+
+  // eslint-disable-next-line no-magic-numbers
+  return state.at(-1)?.value;
+}