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

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

package/src/providers/ActivityTyping/types/AllTyping.ts

@@ -0,0 +1,8 @@
+export type AllTyping = {
+  firstReceivedAt: number;
+  lastActivityDuration: number;
+  lastReceivedAt: number;
+  name: string | undefined;
+  role: 'bot' | 'user';
+  type: 'busy' | 'livestream';
+};

package/src/providers/ActivityTyping/useAllTyping.ts

@@ -0,0 +1,6 @@
+import useActivityTypingContext from './private/useContext';
+import type { AllTyping } from './types/AllTyping';
+
+export default function useAllTyping(): readonly [ReadonlyMap<string, AllTyping>] {
+  return useActivityTypingContext().allTypingState;
+}

package/src/providers/GroupActivities/GroupActivitiesComposer.tsx

@@ -0,0 +1,115 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useCallback, useMemo, type ReactNode } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import applyMiddleware from '../../hooks/middleware/applyMiddleware';
+import useStyleOptions from '../../hooks/useStyleOptions';
+import type GroupActivitiesMiddleware from '../../types/GroupActivitiesMiddleware';
+import { type GroupActivities } from '../../types/GroupActivitiesMiddleware';
+import usePonyfill from '../Ponyfill/usePonyfill';
+import createDefaultGroupActivitiesMiddleware from './private/createDefaultGroupActivitiesMiddleware';
+import GroupActivitiesContext, { type GroupActivitiesContextType } from './private/GroupActivitiesContext';
+import isGroupingValid from './private/isGroupingValid';
+
+type GroupActivitiesComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+  groupActivitiesMiddleware: readonly GroupActivitiesMiddleware[];
+}>;
+
+function GroupActivitiesComposer({ children, groupActivitiesMiddleware }: GroupActivitiesComposerProps) {
+  const [ponyfill] = usePonyfill();
+  const [{ groupActivitiesBy, groupTimestamp }] = useStyleOptions();
+
+  const runMiddleware = useMemo<(type?: string | undefined) => GroupActivities>(
+    () =>
+      applyMiddleware(
+        'group activities',
+        ...groupActivitiesMiddleware,
+        ...createDefaultGroupActivitiesMiddleware({ groupTimestamp, ponyfill }),
+        () => () => () => ({})
+      ),
+    [groupActivitiesMiddleware, groupTimestamp, ponyfill]
+  );
+
+  const runAllMiddleware = useMemo(() => runMiddleware(), [runMiddleware]);
+
+  const groupActivities: GroupActivities = useCallback(
+    ({ activities }: { activities: readonly WebChatActivity[] }) => {
+      const results: Readonly<{
+        [key: string]: readonly (readonly WebChatActivity[])[];
+      }> = runAllMiddleware({ activities }) || Object.freeze({});
+      const validatedResults = new Map<string, readonly (readonly WebChatActivity[])[]>();
+
+      for (const [name, result] of Object.entries(results)) {
+        if (isGroupingValid(activities, result)) {
+          validatedResults.set(name, result);
+        } else {
+          validatedResults.set(
+            name,
+            activities.map(activity => Object.freeze([activity]))
+          );
+        }
+      }
+
+      return Object.fromEntries(validatedResults);
+    },
+    [runAllMiddleware]
+  );
+
+  const groupActivitiesByGroup: Map<string, GroupActivities> = useMemo(
+    () =>
+      new Map<string, GroupActivities>(
+        groupActivitiesBy.map(groupingName => [groupingName, runMiddleware(groupingName)])
+      ),
+    [groupActivitiesBy, runMiddleware]
+  );
+
+  const groupActivitiesByGroupRef = useRefFrom(groupActivitiesByGroup);
+  const groupActivitiesByRef = useRefFrom(groupActivitiesBy);
+
+  const groupActivitiesByName = useCallback<
+    (activities: readonly WebChatActivity[], groupingName: string) => readonly (readonly WebChatActivity[])[]
+  >(
+    (activities, groupingName) => {
+      const group = groupActivitiesByGroupRef.current.get(groupingName);
+
+      if (group) {
+        const result: ReadonlyMap<string, readonly (readonly WebChatActivity[])[]> = new Map(
+          Object.entries(group({ activities }) || {})
+        );
+
+        if (result.has(groupingName)) {
+          const groupingResult = result.get(groupingName);
+
+          if (isGroupingValid(activities, groupingResult)) {
+            return groupingResult;
+          }
+        } else {
+          console.warn(
+            `botframework-webchat: groupActivitiesMiddleware('${groupingName}') does not return any results`
+          );
+        }
+      } else {
+        console.warn(
+          `botframework-webchat: useGroupActivitiesBy can only be called with one of ${groupActivitiesByRef.current}, however "${groupingName}" was passed instead`
+        );
+      }
+
+      return Object.freeze(activities.map(activity => Object.freeze([activity])));
+    },
+    [groupActivitiesByGroupRef, groupActivitiesByRef]
+  );
+
+  const context = useMemo<GroupActivitiesContextType>(
+    () => ({
+      groupActivities,
+      groupActivitiesByName
+    }),
+    [groupActivities, groupActivitiesByName]
+  );
+
+  return <GroupActivitiesContext.Provider value={context}>{children}</GroupActivitiesContext.Provider>;
+}
+
+export default memo(GroupActivitiesComposer);
+export { type GroupActivitiesComposerProps };

package/src/providers/GroupActivities/private/GroupActivitiesContext.ts

@@ -0,0 +1,23 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { createContext } from 'react';
+
+type GroupActivitiesContextType = {
+  groupActivities: (options: { activities: readonly WebChatActivity[] }) => Readonly<{
+    [key: string]: readonly (readonly WebChatActivity[])[];
+  }>;
+  groupActivitiesByName: (
+    activities: readonly WebChatActivity[],
+    groupingName: string
+  ) => readonly (readonly WebChatActivity[])[];
+};
+
+const GroupActivitiesContext = createContext<GroupActivitiesContextType>(
+  new Proxy({} as GroupActivitiesContextType, {
+    get() {
+      throw new Error('botframework-webchat: This hook can only be used under <GroupActivitiesContext>');
+    }
+  })
+);
+
+export default GroupActivitiesContext;
+export { type GroupActivitiesContextType };

package/src/providers/GroupActivities/private/createDefaultGroupActivitiesMiddleware.ts

@@ -0,0 +1,93 @@
+import { type GlobalScopePonyfill, type WebChatActivity } from 'botframework-webchat-core';
+
+import type GroupActivitiesMiddleware from '../../../types/GroupActivitiesMiddleware';
+import { type SendStatus } from '../../../types/SendStatus';
+
+function bin<T>(items: readonly T[], grouping: (last: T, current: T) => boolean): readonly (readonly T[])[] {
+  let lastBin: T[];
+  const bins: T[][] = [];
+  let lastItem: T;
+
+  for (const item of items) {
+    if (lastItem && grouping(lastItem, item)) {
+      lastBin.push(item);
+    } else {
+      lastBin = [item];
+      bins.push(lastBin);
+    }
+
+    lastItem = item;
+  }
+
+  for (const bin in bins) {
+    Object.freeze(bin);
+  }
+
+  return Object.freeze(bins);
+}
+
+function sending(activity: WebChatActivity): SendStatus | undefined {
+  if (activity.from.role === 'user') {
+    const {
+      channelData: { 'webchat:send-status': sendStatus }
+    } = activity;
+
+    return sendStatus;
+  }
+}
+
+function createShouldGroupTimestamp(groupTimestamp: boolean | number, { Date }: GlobalScopePonyfill) {
+  return (activityX: WebChatActivity, activityY: WebChatActivity): boolean => {
+    if (groupTimestamp === false) {
+      // Hide timestamp for all activities.
+      return true;
+    } else if (activityX && activityY) {
+      if (sending(activityX) !== sending(activityY)) {
+        return false;
+      }
+
+      groupTimestamp = typeof groupTimestamp === 'number' ? groupTimestamp : Infinity;
+
+      const timeX = new Date(activityX.timestamp).getTime();
+      const timeY = new Date(activityY.timestamp).getTime();
+
+      return Math.abs(timeX - timeY) <= groupTimestamp;
+    }
+
+    return false;
+  };
+}
+
+function shouldGroupSender(x: WebChatActivity, y: WebChatActivity): boolean {
+  const {
+    from: { role: roleX, id: idX }
+  } = x;
+  const {
+    from: { role: roleY, id: idY }
+  } = y;
+  return roleX === roleY && idX === idY;
+}
+
+export default function createDefaultGroupActivitiesMiddleware({
+  groupTimestamp,
+  ponyfill
+}: Readonly<{
+  groupTimestamp: boolean | number;
+  ponyfill: GlobalScopePonyfill;
+}>): readonly GroupActivitiesMiddleware[] {
+  return Object.freeze([
+    type =>
+      type === 'sender' || typeof type === 'undefined'
+        ? next =>
+            ({ activities }) => ({ ...next({ activities }), sender: bin(activities, shouldGroupSender) })
+        : undefined,
+    type =>
+      type === 'status' || typeof type === 'undefined'
+        ? next =>
+            ({ activities }) => ({
+              ...next({ activities }),
+              status: bin(activities, createShouldGroupTimestamp(groupTimestamp, ponyfill))
+            })
+        : undefined
+  ]);
+}

package/src/providers/GroupActivities/private/isGroupingValid.ts

@@ -0,0 +1,41 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isGroupingValid(
+  source: readonly WebChatActivity[],
+  bins: readonly (readonly WebChatActivity[])[]
+): boolean {
+  const set = new Set(source);
+
+  if (source.length !== set.size) {
+    console.warn('botframework-webchat: Cannot validate activity grouping because some activities are duplicated');
+
+    return false;
+  }
+
+  for (const bin of bins) {
+    for (const activityInBin of bin) {
+      if (!set.has(activityInBin)) {
+        console.warn(
+          'botframework-webchat: All binned items must be originate from the source list, check groupingActivityMiddleware to make sure it bin from the source list',
+          {
+            activityInBin
+          }
+        );
+
+        return false;
+      }
+
+      set.delete(activityInBin);
+    }
+  }
+
+  if (set.size) {
+    console.warn(
+      'botframework-webchat: Not every activity is binned, check groupingActivityMiddleware to make sure it is binning every activity passed'
+    );
+
+    return false;
+  }
+
+  return true;
+}

package/src/providers/GroupActivities/private/useGroupActivitiesContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import GroupActivitiesContext, { type GroupActivitiesContextType } from './GroupActivitiesContext';
+
+export default function useGroupActivitiesContext(): GroupActivitiesContextType {
+  return useContext(GroupActivitiesContext);
+}

package/src/providers/GroupActivities/useGroupActivities.ts

@@ -0,0 +1,20 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import useGroupActivitiesContext from './private/useGroupActivitiesContext';
+
+type GroupedActivities = readonly (readonly WebChatActivity[])[];
+
+/**
+ * This hook will return a callback function. When called with `activities`, the callback function will run the `groupActivitiesMiddleware` and will return all groupings.
+ *
+ * @deprecated This function is deprecated and will be removed on or after 2027-05-04. Developers should migrate to [`useGroupActivitiesByName`](#usegroupactivitiesbyname) for performance reason.
+ */
+export default function useGroupActivities(): ({
+  activities
+}: Readonly<{
+  activities: readonly WebChatActivity[];
+}>) => Readonly<{
+  [key: string]: GroupedActivities;
+}> {
+  return useGroupActivitiesContext().groupActivities;
+}

package/src/providers/GroupActivities/useGroupActivitiesByName.ts

@@ -0,0 +1,17 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import useGroupActivitiesContext from './private/useGroupActivitiesContext';
+
+/**
+ * This hook will return a callback function. When called with `activities`, the callback function will run the `groupActivitiesMiddleware` for the specified grouping name.
+ *
+ * Unlike the [`useGroupActivities`](#usegroupactivities) hook which provide result for all groupings, this hook only provide result for the specified grouping name and the grouping name must be one of the name specified in `styleOptions.groupActivitiesBy`.
+ *
+ * @returns Result of `groupActivitiesMiddleware` for the specified grouping name
+ */
+export default function useGroupActivitiesBy(): (
+  activities: readonly WebChatActivity[],
+  name: string
+) => readonly (readonly WebChatActivity[])[] {
+  return useGroupActivitiesContext().groupActivitiesByName;
+}

package/src/tsconfig.json

@@ -1,15 +1,11 @@
 {
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "declarationDir": "../lib",
-    "declarationMap": true,
     "downlevelIteration": true,
-    "emitDeclarationOnly": true,
     "jsx": "react",
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "preserveWatchOutput": true,
+    "noEmit": true,
     "pretty": true,
     "resolveJsonModule": true, // Required for localization files
     "skipLibCheck": true,

package/src/types/AttachmentForScreenReaderMiddleware.ts

@@ -1,4 +1,4 @@
-import type { DirectLineAttachment, WebChatActivity } from 'botframework-webchat-core';
+import { type DirectLineAttachment, type WebChatActivity } from 'botframework-webchat-core';
 
 // TODO: We should consider using a prop for "attachmentMiddleware" to render for screen reader, instead of having another middleware.
 
@@ -11,11 +11,18 @@ type AttachmentForScreenReaderComponentFactoryOptions = [
   }
 ];
 
-type AttachmentForScreenReaderComponentFactory = ComponentFactory<AttachmentForScreenReaderComponentFactoryOptions, {}>;
+type AttachmentForScreenReaderComponentFactory = ComponentFactory<
+  AttachmentForScreenReaderComponentFactoryOptions,
+  // Following @types/react to use {} for props.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  {}
+>;
 
 type AttachmentForScreenReaderMiddleware = ComponentMiddleware<
   [],
   AttachmentForScreenReaderComponentFactoryOptions,
+  // Following @types/react to use {} for props.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   {}
 >;
 

package/src/types/AvatarMiddleware.ts

@@ -1,4 +1,4 @@
-import type { WebChatActivity } from 'botframework-webchat-core';
+import { type WebChatActivity } from 'botframework-webchat-core';
 
 import { StrictStyleOptions } from '../StyleOptions';
 import ComponentMiddleware, { ComponentFactory } from './ComponentMiddleware';
@@ -11,8 +11,12 @@ type AvatarComponentFactoryArguments = [
   }
 ];
 
+// Following @types/react to use {} for props.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type AvatarComponentFactory = ComponentFactory<AvatarComponentFactoryArguments, {}>;
 
+// Following @types/react to use {} for props.
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type AvatarMiddleware = ComponentMiddleware<[], AvatarComponentFactoryArguments, {}>;
 
 export default AvatarMiddleware;