botframework-webchat-api 4.18.1 → 4.19.0

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

@@ -0,0 +1,236 @@
+/** @jest-environment @happy-dom/jest-environment */
+/// <reference types="jest" />
+/// <reference types="node" />
+
+import { render, type RenderResult } from '@testing-library/react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import type { LocalId } from 'botframework-webchat-core/activity.js';
+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:internal:local-id': '_:a-00001' as LocalId,
+    'webchat:internal:position': 0,
+    '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,49 @@
+import { useMemoWithPrevious } from '@msinternal/botframework-webchat-react-hooks';
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import { useActivities } from '../../../hooks';
+
+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/Capabilities/CapabilitiesComposer.tsx

@@ -0,0 +1,53 @@
+import React, { memo, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+import useWebChatAPIContext from '../../hooks/internal/useWebChatAPIContext';
+import CapabilitiesContext from './private/Context';
+import fetchCapabilitiesFromAdapter from './private/fetchCapabilitiesFromAdapter';
+import type { Capabilities } from './types/Capabilities';
+
+type Props = Readonly<{ children?: ReactNode | undefined }>;
+
+const EMPTY_CAPABILITIES: Capabilities = Object.freeze({});
+
+/**
+ * Composer that provides capabilities from the adapter via EventTarget pattern.
+ *
+ * Design principles:
+ * 1. Initial fetch: Pulls capabilities from adapter on mount
+ * 2. Event-driven updates: Re-fetches when adapter dispatches 'capabilitieschanged' event
+ * 3. Stable references: Individual capability objects maintain reference equality if unchanged
+ *    - This ensures consumers using selectors only re-render when their capability changes
+ */
+const CapabilitiesComposer = memo(({ children }: Props) => {
+  const { directLine } = useWebChatAPIContext();
+
+  const getAllCapabilities = useCallback(
+    () => fetchCapabilitiesFromAdapter(directLine, EMPTY_CAPABILITIES).capabilities,
+    [directLine]
+  );
+
+  const [capabilities, setCapabilities] = useState<Capabilities>(() => getAllCapabilities());
+
+  useEffect(() => {
+    const handleCapabilitiesChange = () => {
+      setCapabilities(prevCapabilities => {
+        const { capabilities, hasChanged } = fetchCapabilitiesFromAdapter(directLine, prevCapabilities);
+        return hasChanged ? capabilities : prevCapabilities;
+      });
+    };
+
+    if (typeof directLine?.addEventListener === 'function') {
+      directLine.addEventListener('capabilitieschanged', handleCapabilitiesChange);
+
+      return () => directLine.removeEventListener('capabilitieschanged', handleCapabilitiesChange);
+    }
+  }, [directLine]);
+
+  const contextValue = useMemo(() => Object.freeze({ capabilities }), [capabilities]);
+
+  return <CapabilitiesContext.Provider value={contextValue}>{children}</CapabilitiesContext.Provider>;
+});
+
+CapabilitiesComposer.displayName = 'CapabilitiesComposer';
+
+export default CapabilitiesComposer;

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

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import type { Capabilities } from '../types/Capabilities';
+
+type CapabilitiesContextType = Readonly<{
+  capabilities: Capabilities;
+}>;
+
+const CapabilitiesContext = createContext<CapabilitiesContextType | undefined>(undefined);
+
+CapabilitiesContext.displayName = 'CapabilitiesContext';
+
+export default CapabilitiesContext;
+export type { CapabilitiesContextType };

package/src/providers/Capabilities/private/capabilityRegistry.ts

@@ -0,0 +1,45 @@
+import type { Capabilities } from '../types/Capabilities';
+
+/**
+ * Descriptor for a capability that can be fetched from the adapter.
+ */
+export type CapabilityDescriptor<K extends keyof Capabilities> = {
+  /** The key in the Capabilities object */
+  readonly key: K;
+  /** The getter function name on the adapter (e.g., 'getVoiceConfiguration') */
+  readonly getterName: string;
+  /**
+   * Custom equality comparator for this capability.
+   * If not provided, uses shallow object comparison.
+   * Return true if values are equal (should reuse previous reference).
+   */
+  readonly isEqual?: (a: Capabilities[K], b: Capabilities[K]) => boolean;
+};
+
+/**
+ * Registry of all capabilities.
+ *
+ * To add a new capability:
+ * 1. Add type to Capabilities interface in types/Capabilities.ts
+ * 2. Add entry here with key, getterName, and optional custom isEqual
+ *
+ * @example
+ * // Simple capability (uses default shallowEqual)
+ * { key: 'voiceConfiguration', getterName: 'getVoiceConfiguration' }
+ *
+ * @example
+ * // Capability with custom equality check
+ * {
+ *   key: 'complexConfig',
+ *   getterName: 'getComplexConfig',
+ *   isEqual: (a, b) => a?.nested?.value === b?.nested?.value
+ * }
+ */
+const CAPABILITY_REGISTRY: readonly CapabilityDescriptor<keyof Capabilities>[] = Object.freeze([
+  {
+    key: 'voiceConfiguration',
+    getterName: 'getVoiceConfiguration'
+  }
+]);
+
+export default CAPABILITY_REGISTRY;

package/src/providers/Capabilities/private/fetchCapabilitiesFromAdapter.ts

@@ -0,0 +1,59 @@
+import { DirectLineJSBotConnection, isForbiddenPropertyName } from 'botframework-webchat-core';
+import type { Capabilities } from '../types/Capabilities';
+import CAPABILITY_REGISTRY from './capabilityRegistry';
+import shallowEqual from './shallowEqual';
+
+type FetchResult = {
+  capabilities: Capabilities;
+  hasChanged: boolean;
+};
+
+/**
+ * Fetches all capabilities from the adapter based on the registry.
+ * Returns a new capabilities object with values fetched from the adapter.
+ */
+export default function fetchCapabilitiesFromAdapter(
+  directLine: DirectLineJSBotConnection,
+  prevCapabilities: Capabilities
+): FetchResult {
+  let hasChanged = false;
+
+  const entries: [string, unknown][] = [];
+
+  for (const descriptor of CAPABILITY_REGISTRY) {
+    const { key, getterName, isEqual = shallowEqual } = descriptor;
+
+    if (isForbiddenPropertyName(key) || isForbiddenPropertyName(getterName)) {
+      continue;
+    }
+
+    // eslint-disable-next-line security/detect-object-injection
+    const getter = directLine?.[getterName];
+
+    if (typeof getter === 'function') {
+      try {
+        const fetchedValue = getter.call(directLine);
+        // eslint-disable-next-line security/detect-object-injection
+        const prevValue = prevCapabilities[key];
+
+        if (fetchedValue) {
+          if (typeof prevValue !== 'undefined' && isEqual(prevValue, fetchedValue)) {
+            entries.push([key, prevValue]);
+          } else {
+            entries.push([key, Object.freeze({ ...fetchedValue })]);
+            hasChanged = true;
+          }
+        } else if (typeof prevValue !== 'undefined') {
+          hasChanged = true;
+        }
+      } catch (error) {
+        console.warn(`botframework-webchat: Error calling capability ${getterName}:`, error);
+      }
+    }
+  }
+
+  return {
+    capabilities: Object.freeze(Object.fromEntries(entries)) as Capabilities,
+    hasChanged
+  };
+}

package/src/providers/Capabilities/private/shallowEqual.ts

@@ -0,0 +1,18 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
+// TODO: [P2] Move this file to `base` package.
+export default function shallowEqual(x, y) {
+  if (x === y) {
+    return true;
+  }
+
+  const xKeys = Object.keys(x);
+  const yKeys = Object.keys(y);
+
+  return (
+    xKeys.length === yKeys.length &&
+    // Mitigated through denylisting.
+    // eslint-disable-next-line security/detect-object-injection
+    xKeys.every(key => !isForbiddenPropertyName(key) && yKeys.includes(key) && x[key] === y[key])
+  );
+}

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

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import CapabilitiesContext, { type CapabilitiesContextType } from './Context';
+
+export default function useCapabilitiesContext(): CapabilitiesContextType {
+  const context = useContext(CapabilitiesContext);
+
+  if (!context) {
+    throw new Error('botframework-webchat internal: This hook can only be used under <CapabilitiesComposer>.');
+  }
+
+  return context;
+}

package/src/providers/Capabilities/types/Capabilities.ts

@@ -0,0 +1,16 @@
+/**
+ * All capabilities are optional as they depend on adapter/server support.
+ */
+type Capabilities = Readonly<{
+  voiceConfiguration?: VoiceConfiguration | undefined;
+}>;
+
+/**
+ * Optional for adapter/server to provide these configs for speech-to-speech.
+ */
+type VoiceConfiguration = Readonly<{
+  chunkIntervalMs: number;
+  sampleRate: number;
+}>;
+
+export type { Capabilities, VoiceConfiguration };

package/src/providers/Capabilities/useCapabilities.ts

@@ -0,0 +1,25 @@
+import { useMemo, useRef } from 'react';
+import useCapabilitiesContext from './private/useContext';
+import type { Capabilities } from './types/Capabilities';
+
+/**
+ * Hook to access adapter capabilities with a selector function.
+ * Only triggers re-render when the selected value changes (shallow comparison).
+ *
+ * @example
+ * // Get voice configuration only
+ * const voiceConfig = useCapabilities(caps => caps.voiceConfiguration);
+ */
+export default function useCapabilities<T>(selector: (capabilities: Capabilities) => T): T {
+  const { capabilities } = useCapabilitiesContext();
+  const selectedValue = selector(capabilities);
+  const prevSelectedValueRef = useRef<T>(selectedValue);
+
+  return useMemo(() => {
+    if (Object.is(prevSelectedValueRef.current, selectedValue)) {
+      return prevSelectedValueRef.current;
+    }
+    prevSelectedValueRef.current = selectedValue;
+    return selectedValue;
+  }, [selectedValue]);
+}

package/src/providers/GroupActivities/GroupActivitiesComposer.tsx

@@ -0,0 +1,116 @@
+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[] | undefined;
+}>;
+
+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 groupActivitiesByRef = useRefFrom(groupActivitiesBy);
+
+  // When `groupActivitiesMiddleware` or `styleOptions.groupActivities` changed, the callback should be invalidated.
+  // The invalidation will help hook callers to re-render.
+  const groupActivitiesByName = useCallback<
+    (activities: readonly WebChatActivity[], groupingName: string) => readonly (readonly WebChatActivity[])[]
+  >(
+    (activities, groupingName) => {
+      const group = groupActivitiesByGroup.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])));
+    },
+    [groupActivitiesByGroup, 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 };