botframework-webchat-api 4.18.2 → 4.19.0

package/src/hooks/useCreateAvatarRenderer.ts

@@ -1,40 +1,26 @@
-import { useMemo } from 'react';
-import useStyleOptions from './useStyleOptions';
-import useWebChatAPIContext from './internal/useWebChatAPIContext';
-
-import type { AvatarComponentFactory } from '../types/AvatarMiddleware';
-import type { ReactNode } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
+import { useCallback, type ReactNode } from 'react';
+import useBuildRenderAvatarCallback from '../middleware/useBuildRenderAvatarCallback';
 
-export default function useCreateAvatarRenderer(): ({
-  activity
-}: {
-  activity: WebChatActivity;
-}) => false | (() => Exclude<ReactNode, boolean | null | undefined>) {
-  const [styleOptions] = useStyleOptions();
-  const { avatarRenderer }: { avatarRenderer: AvatarComponentFactory } = useWebChatAPIContext();
-
-  return useMemo(
-    () =>
-      ({ activity }) => {
-        const { from: { role } = {} }: { from?: { role?: string } } = activity;
-
-        const result = avatarRenderer({
-          activity,
-          fromUser: role === 'user',
-          styleOptions
-        });
+type CreateAvatarRendererCallback = (request: {
+  readonly activity: WebChatActivity;
+}) => false | (() => Exclude<ReactNode, boolean | null | undefined>);
 
-        if (result !== false && typeof result !== 'function') {
-          console.warn(
-            'botframework-webchat: avatarMiddleware should return a function to render the avatar, or return false if avatar should be hidden. Please refer to HOOKS.md for details.'
-          );
+/**
+ * @deprecated Use `<AvatarPolymiddlewareProxy>` or `useBuildRenderAvatarCallback` instead. This hook will be removed on or after 2028-03-16.
+ */
+export default function useCreateAvatarRenderer(): CreateAvatarRendererCallback {
+  const buildRenderAvatar = useBuildRenderAvatarCallback();
 
-          return () => result;
-        }
+  // TODO: [P1] We should move this function into `api-middleware`.
+  //       However, it use `useStyleOptions` which is from `api` package.
+  //       In order to do that, we need to build a new `api-style-options` package first.
+  return useCallback<CreateAvatarRendererCallback>(
+    ({ activity }) => {
+      const renderer = buildRenderAvatar(Object.freeze({ activity }));
 
-        return result;
-      },
-    [avatarRenderer, styleOptions]
+      return renderer ? (): ReactNode => renderer({}) : false;
+    },
+    [buildRenderAvatar]
   );
 }

package/src/hooks/useDebouncedNotifications.spec.js

@@ -1,3 +1,4 @@
+/** @jest-environment @happy-dom/jest-environment */
 /* eslint no-magic-numbers: "off" */
 
 import { getEarliestUpdateNotBefore } from './useDebouncedNotifications';

package/src/hooks/useDisabled.ts

@@ -1,5 +1,11 @@
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
-export default function useDisabled(): [boolean] {
-  return [useWebChatAPIContext().disabled];
+const TRUE_STATE = Object.freeze([true] as const);
+const FALSE_STATE = Object.freeze([false] as const);
+
+/**
+ * @deprecated Please use `useUIState() === 'disabled'` instead. This hook will be removed on or after 2026-09-04.
+ */
+export default function useDisabled(): readonly [boolean] {
+  return useWebChatAPIContext().uiState === 'disabled' ? TRUE_STATE : FALSE_STATE;
 }

package/src/hooks/useLocalizer.ts

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import getAllLocalizedStrings from '../localization/getAllLocalizedStrings';
 import useLocalizedGlobalize from './internal/useLocalizedGlobalize';
 import useLocalizedStrings from './internal/useLocalizedStrings';
-import isObject from '../utils/isObject';
+import { isPlainObject } from '@msinternal/botframework-webchat-base/utils';
 
 const DEFAULT_STRINGS = getAllLocalizedStrings()['en-US'];
 
@@ -28,8 +28,8 @@ export default function useLocalizer({ plural }: { plural?: boolean } = {}) {
       if (plural) {
         const pluralId = id as Plural;
 
-        if (!isObject(pluralId)) {
-          throw new Error('useLocalizer: Plural string must pass "id" as a map instead of string.');
+        if (!isPlainObject(pluralId)) {
+          throw new Error('useLocalizer: Plural string must pass "id" as a plain object instead of string.');
         } else if (typeof pluralId.other !== 'string') {
           throw new Error('useLocalizer: Plural string must have "id.other" of string.');
         } else if (typeof args[0] !== 'number') {

package/src/hooks/useRenderAttachment.ts

@@ -1,7 +1,7 @@
-import { type RenderAttachment } from '../types/AttachmentMiddleware';
+import { type LegacyRenderAttachment } from '@msinternal/botframework-webchat-api-middleware/legacy';
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
-export default function useRenderAttachment(): RenderAttachment | undefined {
+export default function useRenderAttachment(): LegacyRenderAttachment | undefined {
   const { attachmentRenderer } = useWebChatAPIContext();
 
   return attachmentRenderer;

package/src/hooks/useSendBoxAttachments.ts

@@ -6,6 +6,8 @@ import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
 export default function useSendBoxAttachments(): readonly [
   readonly SendBoxAttachment[],
+  // TODO: This should be Dispatch<SetStateAction<...>>, however Redux doesn't support this signature.
+  //       When we move out of Redux, we should change it.
   (attachments: readonly SendBoxAttachment[]) => void
 ] {
   // TODO: We should use the selector from "core" package.

package/src/hooks/useSendFiles.ts

@@ -1,6 +1,6 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1024] }] */
 
-import { warnOnce } from 'botframework-webchat-core';
+import { warnOnce } from '@msinternal/botframework-webchat-base/utils';
 import { useCallback } from 'react';
 
 import useWebChatAPIContext from './internal/useWebChatAPIContext';

package/src/hooks/useSendTimeoutForActivity.ts

@@ -11,6 +11,8 @@ export default function useSendTimeoutForActivity(activity: WebChatActivity) {
       'botframework-webchat: "useSendTimeoutForActivity" is deprecated and will be removed on or after 2022-07-28. Please use "useGetSendTimeoutForActivity()" instead.'
     );
 
+    // This is intentionally run once.
+    // eslint-disable-next-line react-hooks/globals
     showDeprecationNotes = false;
   }
 

package/src/hooks/useStartVoice.ts

@@ -0,0 +1,9 @@
+import useWebChatAPIContext from './internal/useWebChatAPIContext';
+
+/**
+ * Hook to start voice mode (turns on microphone and enables audio synthesis).
+ * This starts speech-to-speech interaction.
+ */
+export default function useStartVoice(): () => void {
+  return useWebChatAPIContext().startVoice;
+}

package/src/hooks/useStopVoice.ts

@@ -0,0 +1,9 @@
+import useWebChatAPIContext from './internal/useWebChatAPIContext';
+
+/**
+ * Hook to stop voice mode (turns off microphone and stops audio playback).
+ * This ends speech-to-speech interaction.
+ */
+export default function useStopVoice(): () => void {
+  return useWebChatAPIContext().stopVoice;
+}

package/src/hooks/useStyleOptions.ts

@@ -1,6 +1 @@
-import { type StrictStyleOptions } from '../StyleOptions';
-import useWebChatAPIContext from './internal/useWebChatAPIContext';
-
-export default function useStyleOptions(): [StrictStyleOptions] {
-  return [useWebChatAPIContext().styleOptions];
-}
+export { default } from '../providers/StyleOptions/useStyleOptions';

package/src/hooks/useSuggestedActions.ts

@@ -1,24 +1,10 @@
-import { useCallback } from 'react';
-import type { DirectLineCardAction } from 'botframework-webchat-core';
-
-import { useSelector } from './internal/WebChatReduxContext';
-import useWebChatAPIContext from './internal/useWebChatAPIContext';
-
-export default function useSuggestedActions(): [DirectLineCardAction[], (suggestedActions: never[]) => void] {
-  const value = useSelector(({ suggestedActions }) => suggestedActions);
-  const { clearSuggestedActions } = useWebChatAPIContext();
-
-  return [
-    value,
-    useCallback(
-      value => {
-        if (value && value.length) {
-          throw new Error('SuggestedActions cannot be set to values other than empty.');
-        }
-
-        clearSuggestedActions();
-      },
-      [clearSuggestedActions]
-    )
-  ];
+import { useSuggestedActionsHooks } from '@msinternal/botframework-webchat-redux-store';
+
+/**
+ * @deprecated Use `useSuggestedActionsHooks().useSuggestedActions` instead. This hook will be removed on or after 2027-05-30.
+ */
+export default function useSuggestedActions() {
+  // Provides a path for backward compatibility during deprecation.
+  // eslint-disable-next-line local-rules/forbid-use-hook-producer
+  return useSuggestedActionsHooks().useSuggestedActions();
 }

package/src/hooks/useTrackEvent.ts

@@ -1,7 +1,7 @@
+import { isPlainObject } from '@msinternal/botframework-webchat-base/utils';
 import { useCallback, useMemo } from 'react';
 
 import createCustomEvent from '../utils/createCustomEvent';
-import isObject from '../utils/isObject';
 import useReadTelemetryDimensions from './internal/useReadTelemetryDimensions';
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
@@ -28,10 +28,10 @@ export default function useTrackEvent(): TrackEventFunction {
       }
 
       if (typeof data !== 'undefined') {
-        if (isObject(data)) {
+        if (isPlainObject(data)) {
           if (!Object.values(data).every(value => isNonNegativeFiniteNumberOrString(value))) {
             return console.warn(
-              'botframework-webchat: Every value in "data" map passed to "useTrackEvent" hook must be a non-negative finite number or string.'
+              'botframework-webchat: Every value in "data" plain object passed to "useTrackEvent" hook must be a non-negative finite number or string.'
             );
           }
         } else if (!isNonNegativeFiniteNumberOrString(data)) {

package/src/hooks/useUIState.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+import useWebChatAPIContext from './internal/useWebChatAPIContext';
+
+/**
+ * Gets the state of the UI.
+ *
+ * - `undefined` will render normally
+ * - `"blueprint"` will render as few UI elements as possible and should be non-functional
+ *   - Useful for loading scenarios
+ * - `"disabled"` will render most UI elements as non-functional
+ *   - Scrolling may continue to trigger read acknowledgements
+ */
+export default function useUIState(): readonly ['blueprint' | 'disabled' | undefined] {
+  const { uiState } = useWebChatAPIContext();
+
+  return useMemo(() => Object.freeze([uiState]), [uiState]);
+}

package/src/hooks/useVoiceRecordingMuted.ts

@@ -0,0 +1,24 @@
+import { muteVoiceRecording, unmuteVoiceRecording } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from './internal/WebChatReduxContext';
+
+/**
+ * Hook to get and set voice recording mute state in speech-to-speech mode.
+ *
+ * Mute is independent of voice state - it can be toggled at any time.
+ * When muted, silent audio chunks are sent instead of real audio.
+ * Mute resets to false when recording stops.
+ */
+export default function useVoiceRecordingMuted(): readonly [boolean, (muted: boolean) => void] {
+  const dispatch = useDispatch();
+  const value = useSelector(({ voice }) => voice.microphoneMuted);
+
+  const setter = useCallback(
+    (muted: boolean) => {
+      dispatch(muted ? muteVoiceRecording() : unmuteVoiceRecording());
+    },
+    [dispatch]
+  );
+
+  return Object.freeze([value, setter]);
+}

package/src/hooks/useVoiceState.ts

@@ -0,0 +1,15 @@
+import type { VoiceState } from 'botframework-webchat-core';
+import useVoiceStateWritable from './internal/useVoiceStateWritable';
+
+/**
+ * Hook to get the voice state.
+ * The voice state represents the current state of the speech-to-speech interaction:
+ * - 'idle': No active speech session, microphone and audio playback are off
+ * - 'listening': Microphone is active
+ * - 'user_speaking': User is actively speaking
+ * - 'processing': User finished speaking, server is processing
+ * - 'bot_speaking': Bot is speaking (audio playback)
+ */
+export default function useVoiceState(): readonly [VoiceState] {
+  return Object.freeze([useVoiceStateWritable()[0]]);
+}

package/src/hooks/validation/uiState.parseUIState.spec.ts

@@ -0,0 +1,21 @@
+import { parseUIState } from './uiState';
+
+describe.each([
+  ['blueprint', false, 'blueprint'],
+  ['blueprint', true, 'blueprint'],
+  ['blueprint', undefined, 'blueprint'],
+  ['disabled', false, 'disabled'],
+  ['disabled', true, 'disabled'],
+  ['disabled', undefined, 'disabled'],
+  ['xyz', false, undefined],
+  ['xyz', true, 'disabled'],
+  ['xyz', undefined, undefined],
+  [undefined, false, undefined],
+  [undefined, true, 'disabled'],
+  [undefined, undefined, undefined]
+])('uiState=%s and disabled=%s', (uiState, disabled, expected) => {
+  describe('parseUIState', () => {
+    test(`should return ${JSON.stringify(expected)}`, () =>
+      expect(parseUIState(uiState as any, disabled as any)).toBe(expected));
+  });
+});

package/src/hooks/validation/uiState.ts

@@ -0,0 +1,10 @@
+import { fallback, literal, parse, union } from 'valibot';
+
+export function parseUIState(
+  input: 'blueprint' | 'disabled' | undefined,
+  disabled: boolean | undefined
+): 'blueprint' | 'disabled' | undefined {
+  // Patching deprecated "disabled" props into "uiState".
+  // Priority: uiState > disabled.
+  return parse(fallback(union([literal('blueprint'), literal('disabled')]), disabled ? 'disabled' : undefined), input);
+}

package/src/index.ts

@@ -1,107 +1,65 @@
-import StyleOptions, { StrictStyleOptions } from './StyleOptions';
-import defaultStyleOptions from './defaultStyleOptions';
-import Composer, { ComposerProps } from './hooks/Composer';
-import * as hooks from './hooks/index';
-import {
+export type {
+  /** @deprecated Use `polymiddleware` instead, this will be removed on or after 2027-08-16. */
+  LegacyActivityComponentFactory as ActivityComponentFactory,
+  /** @deprecated Use `polymiddleware` instead, this will be removed on or after 2027-08-16. */
+  LegacyActivityMiddleware as ActivityMiddleware,
+  /** @deprecated Use `polymiddleware` instead, this will be removed on or after 2027-08-16. */
+  LegacyAttachmentMiddleware as AttachmentMiddleware,
+  LegacyRenderAttachment as RenderAttachment
+} from '@msinternal/botframework-webchat-api-middleware/legacy';
+
+export * as hooks from './boot/hook';
+export { default as defaultStyleOptions } from './defaultStyleOptions';
+export { default as Composer, type ComposerProps } from './hooks/Composer';
+export { default as concatMiddleware } from './hooks/middleware/concatMiddleware';
+export { type ActivityStatusRenderer } from './hooks/useCreateActivityStatusRenderer'; // TODO: [P1] This line should export the one from the version from "middleware rework" workstream.
+export { type DebouncedNotification, type DebouncedNotifications } from './hooks/useDebouncedNotifications';
+export { type PostActivityFile } from './hooks/useSendFiles';
+export { localize } from './localization/Localize';
+export {
+  extractSendBoxMiddleware,
   SendBoxMiddlewareProxy,
-  initSendBoxMiddleware,
   type SendBoxMiddleware,
   type SendBoxMiddlewareProps,
   type SendBoxMiddlewareRequest
-} from './hooks/internal/SendBoxMiddleware';
-import {
+} from './middleware/SendBoxMiddleware';
+export {
+  extractSendBoxToolbarMiddleware,
   SendBoxToolbarMiddlewareProxy,
-  initSendBoxToolbarMiddleware,
   type SendBoxToolbarMiddleware,
   type SendBoxToolbarMiddlewareProps,
   type SendBoxToolbarMiddlewareRequest
-} from './hooks/internal/SendBoxToolbarMiddleware';
-import concatMiddleware from './hooks/middleware/concatMiddleware';
-import { type ActivityStatusRenderer } from './hooks/useCreateActivityStatusRenderer'; // TODO: [P1] This line should export the one from the version from "middleware rework" workstream.
-import { type DebouncedNotification, type DebouncedNotifications } from './hooks/useDebouncedNotifications';
-import { type PostActivityFile } from './hooks/useSendFiles';
-import { localize } from './localization/Localize';
-import normalizeStyleOptions from './normalizeStyleOptions';
-import ActivityMiddleware, { type ActivityComponentFactory } from './types/ActivityMiddleware';
-import { type ActivityStatusMiddleware, type RenderActivityStatus } from './types/ActivityStatusMiddleware';
-import AttachmentForScreenReaderMiddleware, {
-  AttachmentForScreenReaderComponentFactory
+} from './middleware/SendBoxToolbarMiddleware';
+export { default as normalizeStyleOptions } from './normalizeStyleOptions';
+export { type StrictStyleOptions, type StyleOptions } from './StyleOptions';
+export { type ActivityStatusMiddleware, type RenderActivityStatus } from './types/ActivityStatusMiddleware';
+export {
+  type AttachmentForScreenReaderComponentFactory,
+  type default as AttachmentForScreenReaderMiddleware
 } from './types/AttachmentForScreenReaderMiddleware';
-import AttachmentMiddleware, { type RenderAttachment } from './types/AttachmentMiddleware';
-import AvatarMiddleware, { type AvatarComponentFactory } from './types/AvatarMiddleware';
-import CardActionMiddleware, { type PerformCardAction } from './types/CardActionMiddleware';
-import { type ContextOf } from './types/ContextOf';
-import GroupActivitiesMiddleware, { type GroupActivities } from './types/GroupActivitiesMiddleware';
-import { type Notification } from './types/Notification';
-import ScrollToEndButtonMiddleware, {
-  type ScrollToEndButtonComponentFactory
+export { type AvatarComponentFactory, type default as AvatarMiddleware } from './types/AvatarMiddleware';
+export { type default as CardActionMiddleware, type PerformCardAction } from './types/CardActionMiddleware';
+export { type ContextOf } from './types/ContextOf';
+export { type GroupActivities, type default as GroupActivitiesMiddleware } from './types/GroupActivitiesMiddleware';
+export { type Notification } from './types/Notification';
+export {
+  type ScrollToEndButtonComponentFactory,
+  type default as ScrollToEndButtonMiddleware
 } from './types/ScrollToEndButtonMiddleware';
-import { type SendStatus } from './types/SendStatus';
-import ToastMiddleware, { type RenderToast } from './types/ToastMiddleware';
-import { type Typing } from './types/Typing';
-import TypingIndicatorMiddleware, { type RenderTypingIndicator } from './types/TypingIndicatorMiddleware';
-import { type WebSpeechPonyfill } from './types/WebSpeechPonyfill';
-import { type WebSpeechPonyfillFactory } from './types/WebSpeechPonyfillFactory';
-
-const buildTool = process.env.build_tool;
-const moduleFormat = process.env.module_format;
-const version = process.env.npm_package_version;
+export { type SendStatus } from './types/SendStatus';
+export { type RenderToast, type default as ToastMiddleware } from './types/ToastMiddleware';
+export { type Typing } from './types/Typing';
+export {
+  type RenderTypingIndicator,
+  type default as TypingIndicatorMiddleware
+} from './types/TypingIndicatorMiddleware';
+export { type WebSpeechPonyfill } from './types/WebSpeechPonyfill';
+export { type WebSpeechPonyfillFactory } from './types/WebSpeechPonyfillFactory';
 
-const buildInfo = { buildTool, moduleFormat, version };
+// #region Build info
+import buildInfo from './buildInfo';
 
-export {
-  Composer,
-  SendBoxMiddlewareProxy,
-  SendBoxToolbarMiddlewareProxy,
-  buildInfo,
-  concatMiddleware,
-  defaultStyleOptions,
-  hooks,
-  initSendBoxMiddleware,
-  initSendBoxToolbarMiddleware,
-  localize,
-  normalizeStyleOptions,
-  version
-};
+const { object: buildInfoObject, version } = buildInfo;
 
-export type {
-  ActivityComponentFactory,
-  ActivityMiddleware,
-  ActivityStatusMiddleware,
-  ActivityStatusRenderer,
-  AttachmentForScreenReaderComponentFactory,
-  AttachmentForScreenReaderMiddleware,
-  AttachmentMiddleware,
-  AvatarComponentFactory,
-  AvatarMiddleware,
-  CardActionMiddleware,
-  ComposerProps,
-  ContextOf,
-  DebouncedNotification,
-  DebouncedNotifications,
-  GroupActivities,
-  GroupActivitiesMiddleware,
-  Notification,
-  PerformCardAction,
-  PostActivityFile,
-  RenderActivityStatus,
-  RenderAttachment,
-  RenderToast,
-  RenderTypingIndicator,
-  ScrollToEndButtonComponentFactory,
-  ScrollToEndButtonMiddleware,
-  SendBoxMiddleware,
-  SendBoxMiddlewareProps,
-  SendBoxMiddlewareRequest,
-  SendBoxToolbarMiddleware,
-  SendBoxToolbarMiddlewareProps,
-  SendBoxToolbarMiddlewareRequest,
-  SendStatus,
-  StrictStyleOptions,
-  StyleOptions,
-  ToastMiddleware,
-  Typing,
-  TypingIndicatorMiddleware,
-  WebSpeechPonyfill,
-  WebSpeechPonyfillFactory
-};
+export { buildInfoObject as buildInfo, version };
+// #endregion

package/src/legacy/LegacyActivityBridge.tsx

@@ -0,0 +1,77 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { Fragment, memo, useMemo } from 'react';
+
+import useCreateActivityStatusRenderer from '../hooks/useCreateActivityStatusRenderer';
+import useCreateAvatarRenderer from '../hooks/useCreateAvatarRenderer';
+import useRenderAttachment from '../hooks/useRenderAttachment';
+import { useLegacyActivityContext } from './LegacyActivityBridgeContext';
+import {
+  legacyActivityBridgeComponentPropsSchema,
+  type LegacyActivityBridgeComponentProps
+} from './createActivityPolymiddlewareFromLegacy';
+
+/**
+ * This component is solely for `createActivityPolymiddlewareFromLegacy`.
+ *
+ * @param props Legacy activity middleware props, includes `hideTimestamp`, `renderActivityStatus`, `renderAvatar`, and `showCallout`.
+ * @returns An activity node rendered using the `props.render()` of type `LegacyRenderFunction`.
+ */
+function LegacyActivityBridge(props: LegacyActivityBridgeComponentProps) {
+  const {
+    activity,
+    hideTimestamp: hideTimestampFromProps,
+    render,
+    renderActivityStatus: renderActivityStatusFromProps,
+    renderAvatar: renderAvatarFromProps,
+    showCallout: showCalloutFromProps
+  } = validateProps(legacyActivityBridgeComponentPropsSchema, props);
+
+  // These props are only available when the activity is being rendered through <BasicTranscript>.
+  // Otherwise, they will be false/undefined.
+  const { hideTimestamp, showCallout } = useLegacyActivityContext();
+
+  const createActivityStatusRenderer = useCreateActivityStatusRenderer();
+  const renderAttachment = useRenderAttachment();
+  const renderAvatarRaw = useCreateAvatarRenderer();
+
+  const renderActivityStatus = useMemo(
+    () => createActivityStatusRenderer(Object.freeze({ activity })),
+    [activity, createActivityStatusRenderer]
+  );
+  const renderAvatar = useMemo(
+    () => !!renderAvatarRaw && renderAvatarRaw(Object.freeze({ activity })),
+    [activity, renderAvatarRaw]
+  );
+
+  const children = useMemo(
+    () =>
+      render(
+        renderAttachment,
+        Object.freeze({
+          hideTimestamp: typeof hideTimestampFromProps === 'undefined' ? hideTimestamp : hideTimestampFromProps,
+          renderActivityStatus:
+            typeof renderActivityStatusFromProps === 'undefined' ? renderActivityStatus : renderActivityStatusFromProps,
+          renderAvatar: typeof renderAvatarFromProps === 'undefined' ? renderAvatar : renderAvatarFromProps,
+          showCallout: typeof showCalloutFromProps === 'undefined' ? showCallout : showCalloutFromProps
+        })
+      ),
+    [
+      hideTimestamp,
+      hideTimestampFromProps,
+      render,
+      renderActivityStatus,
+      renderActivityStatusFromProps,
+      renderAttachment,
+      renderAvatar,
+      renderAvatarFromProps,
+      showCallout,
+      showCalloutFromProps
+    ]
+  );
+
+  return <Fragment>{children}</Fragment>;
+}
+
+LegacyActivityBridge.displayName = 'LegacyActivityBridge';
+
+export default memo(LegacyActivityBridge);

package/src/legacy/LegacyActivityBridgeContext.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+type LegacyActivityContextType = {
+  readonly hideTimestamp: boolean;
+  readonly showCallout: boolean;
+};
+
+const LegacyActivityContext = createContext<LegacyActivityContextType>(
+  Object.freeze({
+    hideTimestamp: false,
+    showCallout: false
+  })
+);
+
+function useLegacyActivityContext(): LegacyActivityContextType {
+  return useContext(LegacyActivityContext);
+}
+
+// Exporting <Provider> individually so we can let people write to the context but not reading from it.
+const { Provider: LegacyActivityContextProvider } = LegacyActivityContext;
+
+export default LegacyActivityContext;
+export { LegacyActivityContextProvider, useLegacyActivityContext, type LegacyActivityContextType };