botframework-webchat-api 4.18.2 → 4.19.1-main.20260526.b9ad8fa

package/src/hooks/index.ts

@@ -1,3 +1,6 @@
+import useCapabilities from '../providers/Capabilities/useCapabilities';
+import useGroupActivities from '../providers/GroupActivities/useGroupActivities';
+import useGroupActivitiesByName from '../providers/GroupActivities/useGroupActivitiesByName';
 import useActiveTyping from './useActiveTyping';
 import useActivities from './useActivities';
 import useActivityKeys from './useActivityKeys';
@@ -26,7 +29,6 @@ import useGetKeyByActivity from './useGetKeyByActivity';
 import useGetKeyByActivityId from './useGetKeyByActivityId';
 import useGetSendTimeoutForActivity from './useGetSendTimeoutForActivity';
 import useGrammars from './useGrammars';
-import useGroupActivities from './useGroupActivities';
 import useGroupTimestamp from './useGroupTimestamp';
 import useLanguage from './useLanguage';
 import useLastAcknowledgedActivityKey from './useLastAcknowledgedActivityKey';
@@ -57,7 +59,9 @@ import useSendTypingIndicator from './useSendTypingIndicator';
 import useSetNotification from './useSetNotification';
 import useShouldSpeakIncomingActivity from './useShouldSpeakIncomingActivity';
 import useStartDictate from './useStartDictate';
+import useStartVoice from './useStartVoice';
 import useStopDictate from './useStopDictate';
+import useStopVoice from './useStopVoice';
 import useStyleOptions from './useStyleOptions';
 import useSubmitSendBox from './useSubmitSendBox';
 import useSuggestedActions from './useSuggestedActions';
@@ -66,9 +70,15 @@ import useTrackDimension from './useTrackDimension';
 import useTrackEvent from './useTrackEvent';
 import useTrackException from './useTrackException';
 import useTrackTiming from './useTrackTiming';
+import useUIState from './useUIState';
 import useUserID from './useUserID';
 import useUsername from './useUsername';
+import useVoiceRecordingMuted from './useVoiceRecordingMuted';
 import useVoiceSelector from './useVoiceSelector';
+import useVoiceState from './useVoiceState';
+
+export { useBuildRenderActivityCallback } from '@msinternal/botframework-webchat-api-middleware';
+export { useSuggestedActionsHooks } from '@msinternal/botframework-webchat-redux-store';
 
 export {
   useActiveTyping,
@@ -78,6 +88,7 @@ export {
   useAvatarForBot,
   useAvatarForUser,
   useByteFormatter,
+  useCapabilities,
   useConnectivityStatus,
   useCreateActivityRenderer,
   useCreateActivityStatusRenderer,
@@ -100,6 +111,7 @@ export {
   useGetSendTimeoutForActivity,
   useGrammars,
   useGroupActivities,
+  useGroupActivitiesByName,
   useGroupTimestamp,
   useLanguage,
   useLastAcknowledgedActivityKey,
@@ -130,7 +142,9 @@ export {
   useSetNotification,
   useShouldSpeakIncomingActivity,
   useStartDictate,
+  useStartVoice,
   useStopDictate,
+  useStopVoice,
   useStyleOptions,
   useSubmitSendBox,
   useSuggestedActions,
@@ -139,7 +153,10 @@ export {
   useTrackEvent,
   useTrackException,
   useTrackTiming,
+  useUIState,
   useUserID,
   useUsername,
-  useVoiceSelector
+  useVoiceRecordingMuted,
+  useVoiceSelector,
+  useVoiceState
 };

package/src/hooks/internal/Tracker.ts

@@ -1,6 +1,6 @@
 import useTracker from './useTracker';
 
-const Tracker: React.FC<{}> = () => {
+const Tracker = () => {
   useTracker();
 
   return null;

package/src/hooks/internal/WebChatAPIContext.ts

@@ -1,3 +1,4 @@
+import { type LegacyRenderAttachment } from '@msinternal/botframework-webchat-api-middleware/legacy';
 import {
   type DirectLineJSBotConnection,
   type Observable,
@@ -8,12 +9,8 @@ import {
 } from 'botframework-webchat-core';
 import { createContext } from 'react';
 
-import { StrictStyleOptions } from '../../StyleOptions';
-import { LegacyActivityRenderer } from '../../types/ActivityMiddleware';
 import { RenderActivityStatus } from '../../types/ActivityStatusMiddleware';
 import { AttachmentForScreenReaderComponentFactory } from '../../types/AttachmentForScreenReaderMiddleware';
-import { RenderAttachment } from '../../types/AttachmentMiddleware';
-import { AvatarComponentFactory } from '../../types/AvatarMiddleware';
 import { PerformCardAction } from '../../types/CardActionMiddleware';
 import { GroupActivities } from '../../types/GroupActivitiesMiddleware';
 import LocalizedStrings from '../../types/LocalizedStrings';
@@ -23,16 +20,13 @@ import { ScrollToEndButtonComponentFactory } from '../../types/ScrollToEndButton
 import TelemetryMeasurementEvent from '../../types/TelemetryMeasurementEvent';
 import { RenderToast } from '../../types/ToastMiddleware';
 
-type WebChatAPIContext = {
-  activityRenderer?: LegacyActivityRenderer;
+export type WebChatAPIContextType = {
   activityStatusRenderer: RenderActivityStatus;
   attachmentForScreenReaderRenderer?: AttachmentForScreenReaderComponentFactory;
-  attachmentRenderer?: RenderAttachment;
-  avatarRenderer: AvatarComponentFactory;
+  attachmentRenderer?: LegacyRenderAttachment;
   clearSuggestedActions?: () => void;
   dir?: string;
   directLine?: DirectLineJSBotConnection;
-  disabled?: boolean;
   dismissNotification?: (id: string) => void;
   downscaleImageToDataURL?: (
     blob: Blob,
@@ -44,7 +38,6 @@ type WebChatAPIContext = {
   emitTypingIndicator?: () => void;
   grammars?: any;
   groupActivities?: GroupActivities;
-  internalErrorBoxClass?: React.Component | Function;
   language?: string;
   localizedGlobalizeState?: PrecompiledGlobalize[];
   localizedStrings?: { [language: string]: LocalizedStrings };
@@ -76,19 +69,21 @@ type WebChatAPIContext = {
   setSendTimeout?: (timeout: number) => void;
   startDictate?: () => void;
   startSpeakingActivity?: () => void;
+  startVoice?: () => void;
   stopDictate?: () => void;
   stopSpeakingActivity?: () => void;
-  styleOptions?: StrictStyleOptions;
+  stopVoice?: () => void;
   submitSendBox?: (method?: string, { channelData }?: { channelData: any }) => void;
   telemetryDimensionsRef?: React.Ref<any>;
   toastRenderer?: RenderToast;
   trackDimension?: (name: string, data: any) => void;
   typingIndicatorRenderer?: any; // TODO
+  uiState: 'blueprint' | 'disabled' | undefined;
   userID?: string;
   username?: string;
 };
 
-const context = createContext<WebChatAPIContext>(undefined);
+const context = createContext<WebChatAPIContextType>(undefined);
 
 context.displayName = 'WebChatAPIContext';
 

package/src/hooks/internal/WebChatReduxContext.js

@@ -1,13 +1,14 @@
 import { createContext } from 'react';
-import { createDispatchHook, createSelectorHook } from 'react-redux';
+import { createDispatchHook, createSelectorHook, createStoreHook } from 'react-redux';
 
 const context = createContext();
 
 const useDispatch = createDispatchHook(context);
 const useSelector = createSelectorHook(context);
+const useStore = createStoreHook(context);
 
 context.displayName = 'WebChatReduxContext';
 
 export default context;
 
-export { useDispatch, useSelector };
+export { useDispatch, useSelector, useStore };

package/src/hooks/internal/usePostVoiceActivity.ts

@@ -0,0 +1,18 @@
+import { postVoiceActivity, type WebChatActivity } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+import { useDispatch } from './WebChatReduxContext';
+
+/**
+ * Hook to post voice activities (fire-and-forget, no echo back).
+ * Use this for DTMF and other voice-related event activities.
+ */
+export default function usePostVoiceActivity(): (activity: WebChatActivity) => void {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (activity: WebChatActivity) => {
+      dispatch(postVoiceActivity(activity));
+    },
+    [dispatch]
+  );
+}

package/src/hooks/internal/useRegisterVoiceHandler.ts

@@ -0,0 +1,23 @@
+import { registerVoiceHandler, unregisterVoiceHandler, type VoiceHandler } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+import randomId from '../../utils/randomId';
+import { useDispatch } from './WebChatReduxContext';
+
+/**
+ * Internal hook to register a voice handler for audio playback.
+ * @returns A function that registers a voice handler and returns an unregister function.
+ */
+export default function useRegisterVoiceHandler(): (voiceHandler: VoiceHandler) => () => void {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    (voiceHandler: VoiceHandler) => {
+      const id = randomId();
+      dispatch(registerVoiceHandler(id, voiceHandler));
+      return () => {
+        dispatch(unregisterVoiceHandler(id));
+      };
+    },
+    [dispatch]
+  );
+}

package/src/hooks/internal/useShouldShowMicrophoneButton.ts

@@ -0,0 +1,22 @@
+import useStyleOptions from '../useStyleOptions';
+import useCapabilities from '../../providers/Capabilities/useCapabilities';
+
+/**
+ * Internal hook to determine if the microphone button should be shown based on:
+ * - `showMicrophoneButton` style option ('auto' | 'hide')
+ * - Adapter voice capability (voiceConfiguration)
+ *
+ * - 'auto': Show if adapter has voiceConfiguration capability, hide otherwise
+ * - 'hide': Never show
+ */
+export default function useShouldShowMicrophoneButton(): boolean {
+  const [{ showMicrophoneButton }] = useStyleOptions();
+  // If adapter has voice capability, voiceConfiguration will be defined,
+  const voiceConfiguration = useCapabilities(caps => caps.voiceConfiguration);
+
+  if (showMicrophoneButton === 'hide') {
+    return false;
+  }
+
+  return !!voiceConfiguration;
+}

package/src/hooks/internal/useVoiceHandlers.ts

@@ -0,0 +1,11 @@
+import type { VoiceHandler } from 'botframework-webchat-core';
+import { useSelector } from './WebChatReduxContext';
+
+/**
+ * Internal hook to get all registered voice handlers from Redux state.
+ */
+export default function useVoiceHandlers(): readonly [ReadonlyMap<string, VoiceHandler>] {
+  return Object.freeze([
+    useSelector((state: { voice: { voiceHandlers: Map<string, VoiceHandler> } }) => state.voice.voiceHandlers)
+  ]);
+}

package/src/hooks/internal/useVoiceStateWritable.ts

@@ -0,0 +1,18 @@
+import { setVoiceState, type VoiceState } from 'botframework-webchat-core';
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from './WebChatReduxContext';
+
+/**
+ * Internal hook to set the voice state.
+ */
+export default function useVoiceStateWritable(): readonly [VoiceState, (state: VoiceState) => void] {
+  const dispatch = useDispatch();
+  const setter = useCallback(
+    (state: VoiceState) => {
+      dispatch(setVoiceState(state));
+    },
+    [dispatch]
+  );
+  const value = useSelector(({ voice }) => voice.voiceState);
+  return Object.freeze([value, setter]);
+}

package/src/hooks/middleware/UserlandBoundary.js

@@ -1,8 +1,8 @@
+import { ErrorBoxPolymiddlewareProxy } from '@msinternal/botframework-webchat-api-middleware';
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 
 import ErrorBoundary from '../utils/ErrorBoundary';
-import ErrorBox from '../internal/ErrorBox';
 
 const UserlandBoundary = ({ children, type }) => {
   const [error, setError] = useState();
@@ -10,7 +10,7 @@ const UserlandBoundary = ({ children, type }) => {
   const handleError = useCallback(error => setError(error), []);
 
   return error ? (
-    <ErrorBox error={error} type={type} />
+    <ErrorBoxPolymiddlewareProxy error={error} where={type} />
   ) : (
     <ErrorBoundary onError={handleError}>{children}</ErrorBoundary>
   );

package/src/hooks/middleware/activityFallbackPolymiddleware.ts

@@ -0,0 +1,23 @@
+import { activityComponent, createActivityPolymiddleware } from '@msinternal/botframework-webchat-api-middleware';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { memo } from 'react';
+
+// eslint-disable-next-line prefer-arrow-callback
+const NoActivityToRenderComponent = memo(function NoActivityToRenderComponent({
+  activity
+}: {
+  readonly activity: WebChatActivity;
+  children?: never;
+}) {
+  throw new Error(`No renderer for activity of type "${activity.type}"`);
+});
+
+const activityFallbackPolymiddleware = createActivityPolymiddleware(
+  () =>
+    ({ activity }) =>
+      activityComponent<{ readonly activity: WebChatActivity; children?: never }>(NoActivityToRenderComponent, {
+        activity
+      })
+);
+
+export default activityFallbackPolymiddleware;

package/src/hooks/middleware/applyMiddleware.js

@@ -1,5 +1,5 @@
+import { ErrorBoxPolymiddlewareProxy } from '@msinternal/botframework-webchat-api-middleware';
 import React, { isValidElement } from 'react';
-import ErrorBox from '../internal/ErrorBox';
 import concatMiddleware from './concatMiddleware';
 import UserlandBoundary from './UserlandBoundary';
 
@@ -22,7 +22,7 @@ export function forLegacyRenderer(type, ...middleware) {
           try {
             return fn(...args);
           } catch (err) {
-            return <ErrorBox error={err} type={`render of ${type}`} />;
+            return <ErrorBoxPolymiddlewareProxy error={err} where={`render of ${type}`} />;
           }
         }}
       </UserlandBoundary>
@@ -42,7 +42,7 @@ export function forLegacyRenderer(type, ...middleware) {
 export function forRenderer(type, { strict = false } = {}, ...middleware) {
   return (...setupArgs) => {
     const runMiddleware = concatMiddleware(...middleware)(...setupArgs)(() => (
-      <ErrorBox error={new Error(`reached terminator of ${type}`)} type={type} />
+      <ErrorBoxPolymiddlewareProxy error={new Error(`reached terminator of ${type}`)} where={type} />
     ));
 
     return (...createRendererArgs) => {
@@ -73,13 +73,13 @@ export function forRenderer(type, { strict = false } = {}, ...middleware) {
 
                 return element;
               } catch (err) {
-                return <ErrorBox error={err} type={`render of ${type}`} />;
+                return <ErrorBoxPolymiddlewareProxy error={err} where={`render of ${type}`} />;
               }
             }}
           </UserlandBoundary>
         );
       } catch (err) {
-        return <ErrorBox error={err} type={`render of ${type}`} />;
+        return <ErrorBoxPolymiddlewareProxy error={err} where={`render of ${type}`} />;
       }
     };
   };

package/src/hooks/middleware/concatMiddleware.spec.js

@@ -53,3 +53,23 @@ test('one middleware ran twice by a single upstream middleware', () => {
 
   expect(work(1)).toEqual(210);
 });
+
+test('a middleware return undefined after setup should be skipped', () => {
+  const enhancer = concatMiddleware(
+    () => next => value => next(value + 2),
+    () => undefined,
+    () => next => value => next(value * 3)
+  );
+
+  expect(enhancer()(value => value)(5)).toEqual(21); // (5 + 2) * 3
+});
+
+test('an undefined middleware should be skipped', () => {
+  const enhancer = concatMiddleware(
+    () => next => value => next(value + 2),
+    undefined,
+    () => next => value => next(value * 3)
+  );
+
+  expect(enhancer()(value => value)(5)).toEqual(21); // (5 + 2) * 3
+});

package/src/hooks/middleware/concatMiddleware.ts

@@ -1,15 +1,16 @@
-type Work<T> = (...args: any[]) => T;
+type Work<T> = (...args: unknown[]) => T;
 type Enhancer<T> = (next: Work<T>) => Work<T>;
 type Middleware<Setup, Result> = (setup: Setup) => Enhancer<Result>;
 
 export default function concatMiddleware<Setup, Result>(
-  ...middleware: Middleware<Setup, Result>[]
+  ...middleware: readonly Middleware<Setup, Result>[]
 ): Middleware<Setup, Result> {
   return setupArgs => {
-    const setup = middleware.reduce(
-      (setup, middleware) => (middleware ? [...setup, middleware(setupArgs)] : setup),
-      []
-    );
+    const setup = middleware.reduce((setup, middleware) => {
+      const enhancer = middleware?.(setupArgs);
+
+      return enhancer ? [...setup, enhancer] : setup;
+    }, []);
 
     return last => {
       const stack = setup.slice();

package/src/hooks/private/reduceIterable.spec.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-magic-numbers */
-
 import reduceIterable from './reduceIterable';
 
 describe('when called with a summation reducer', () => {

package/src/hooks/useActiveTyping.ts

@@ -36,15 +36,16 @@ function useActiveTyping(expireAfter?: number): readonly [Readonly<Record<string
   ]);
 
   const earliestExpireAt = Math.min(...Object.values(activeTypingState[0]).map(({ expireAt }) => expireAt));
-  const timeToRender = earliestExpireAt && earliestExpireAt - now;
 
   useEffect(() => {
+    const timeToRender = earliestExpireAt && earliestExpireAt - Date.now();
+
     if (timeToRender && isFinite(timeToRender)) {
       const timeout = setTimeout(forceRender, Math.max(0, timeToRender));
 
       return () => clearTimeout(timeout);
     }
-  }, [clearTimeout, forceRender, setTimeout, timeToRender]);
+  }, [clearTimeout, Date, earliestExpireAt, forceRender, setTimeout]);
 
   return activeTypingState;
 }

package/src/hooks/useActivities.ts

@@ -1,7 +1,66 @@
+import { useOrderedActivities } from '@msinternal/botframework-webchat-api-graph';
 import type { WebChatActivity } from 'botframework-webchat-core';
 
-import { useSelector } from './internal/WebChatReduxContext';
+import { useSelector, useStore } from './internal/WebChatReduxContext';
+import usePrevious from './internal/usePrevious';
 
-export default function useActivities(): [WebChatActivity[]] {
-  return [useSelector(({ activities }) => activities)];
+declare const process: {
+  env: {
+    NODE_ENV?: string | undefined;
+  };
+};
+
+function useActivitiesForProduction(): readonly [readonly WebChatActivity[]] {
+  return useOrderedActivities();
 }
+
+function useActivitiesForDevelopment(): readonly [readonly WebChatActivity[]] {
+  const activitiesFromGraphState = useActivitiesForProduction();
+
+  // Checks if store changed.
+  const store = useStore();
+  const prevStore = usePrevious(store);
+
+  const [activitiesFromGraph] = activitiesFromGraphState;
+
+  const activitiesFromRedux = useSelector(({ activities }) => activities);
+
+  // If store changed, skip one assertion turn.
+  // This is because <GraphProvider> is using `useState()` for propagating changes.
+  // It is always one render behind if `store` changed.
+  if (prevStore === store) {
+    if (activitiesFromGraph.length !== activitiesFromRedux.length) {
+      throw new Error(
+        `botframework-webchat-internal: Activities from graph and Redux are of different size (graph has ${activitiesFromGraph.length} activities, Redux has ${activitiesFromRedux.length} activities)`,
+        {
+          cause: {
+            activitiesFromGraph,
+            activitiesFromRedux
+          }
+        }
+      );
+    }
+
+    for (let index = 0; index < activitiesFromGraph.length; index++) {
+      if (!Object.is(activitiesFromGraph.at(index), activitiesFromRedux.at(index))) {
+        throw new Error(
+          `botframework-webchat-internal: Activities from graph and Redux are different at index ${index}`,
+          {
+            cause: {
+              activitiesFromGraph,
+              activitiesFromRedux,
+              index
+            }
+          }
+        );
+      }
+    }
+  }
+
+  return activitiesFromGraphState;
+}
+
+const useActivities: () => readonly [readonly WebChatActivity[]] =
+  process.env.NODE_ENV === 'production' ? useActivitiesForProduction : useActivitiesForDevelopment;
+
+export default useActivities;

package/src/hooks/useCreateActivityRenderer.ts

@@ -1,8 +1,29 @@
-import { ActivityComponentFactory } from '../types/ActivityMiddleware';
-import useCreateActivityRendererInternal from './internal/useCreateActivityRendererInternal';
+import { useBuildRenderActivityCallback } from '@msinternal/botframework-webchat-api-middleware';
+import {
+  type LegacyActivityComponentFactory,
+  type LegacyActivityProps
+} from '@msinternal/botframework-webchat-api-middleware/legacy';
+import { useCallback } from 'react';
 
-// The newer useCreateActivityRenderer() hook does not support override renderAttachment().
-// Only the deprecated useRenderActivity() hook support overriding renderAttachment().
-export default function useCreateActivityRenderer(): ActivityComponentFactory {
-  return useCreateActivityRendererInternal();
+/**
+ * @deprecated Use useBuildRenderActivityCallback() instead, this hook will be removed on or after 2027-08-16.
+ */
+export default function useCreateActivityRenderer(): LegacyActivityComponentFactory {
+  const render = useBuildRenderActivityCallback();
+
+  return useCallback(
+    ({ activity }) =>
+      // TODO: [P2] TypeScript turns `{ children?: never | undefined }` into `{ children?: undefined }`.
+      //            Thus we are getting a typing error here.
+      //            Maybe moving to a stricter tsconfig would help removing the line below.
+      //
+      //            Use the following commented line once we move to stricter tsconfig.
+      //            (props: LegacyActivityProps) =>
+      (
+        /** @deprecated Some props are only processed by the legacy activity middleware and may not be processed by the newer activity middleware registered via `polymiddleware`. */
+        props: LegacyActivityProps & { children?: never }
+      ) =>
+        render({ activity })?.(props),
+    [render]
+  );
 }

package/src/hooks/useCreateActivityStatusRenderer.tsx

@@ -1,32 +1,29 @@
 /* eslint react/prop-types: "off" */
 /* eslint react/require-default-props: "off" */
 
-import type { WebChatActivity } from 'botframework-webchat-core';
+import { type WebChatActivity } from 'botframework-webchat-core';
 import React, { memo, useMemo, type ReactNode } from 'react';
 
 import useGetKeyByActivity from '../hooks/useGetKeyByActivity';
 import useSendStatusByActivityKey from '../hooks/useSendStatusByActivityKey';
-import type { RenderActivityStatus } from '../types/ActivityStatusMiddleware';
-import type { SendStatus } from '../types/SendStatus';
+import { type RenderActivityStatus } from '../types/ActivityStatusMiddleware';
+import { type SendStatus } from '../types/SendStatus';
 import useWebChatAPIContext from './internal/useWebChatAPIContext';
 
 type ActivityStatusContainerCoreProps = Readonly<{
   activity: WebChatActivity;
   hideTimestamp: boolean;
-  nextVisibleActivity: WebChatActivity;
   sendStatus: SendStatus;
 }>;
 
 const ActivityStatusContainerCore = memo(
-  ({ activity, hideTimestamp, nextVisibleActivity, sendStatus }: ActivityStatusContainerCoreProps) => {
+  ({ activity, hideTimestamp, sendStatus }: ActivityStatusContainerCoreProps) => {
     const { activityStatusRenderer: createActivityStatusRenderer }: { activityStatusRenderer: RenderActivityStatus } =
       useWebChatAPIContext();
 
     return createActivityStatusRenderer({
       activity,
       hideTimestamp,
-      nextVisibleActivity, // "nextVisibleActivity" is for backward compatibility, please remove this line on or after 2022-07-22.
-      sameTimestampGroup: hideTimestamp, // "sameTimestampGroup" is for backward compatibility, please remove this line on or after 2022-07-22.
       sendState: sendStatus === 'send failed' || sendStatus === 'sent' ? sendStatus : 'sending'
     });
   }
@@ -35,45 +32,28 @@ const ActivityStatusContainerCore = memo(
 type ActivityStatusContainerProps = Readonly<{
   activity: WebChatActivity;
   hideTimestamp: boolean;
-  nextVisibleActivity: WebChatActivity;
 }>;
 
-const ActivityStatusContainer = memo(
-  ({ activity, hideTimestamp, nextVisibleActivity }: ActivityStatusContainerProps) => {
-    const [sendStatusByActivityKey] = useSendStatusByActivityKey();
-    const getKeyByActivity = useGetKeyByActivity();
+const ActivityStatusContainer = memo(({ activity, hideTimestamp }: ActivityStatusContainerProps) => {
+  const [sendStatusByActivityKey] = useSendStatusByActivityKey();
+  const getKeyByActivity = useGetKeyByActivity();
 
-    const key = getKeyByActivity(activity);
+  const key = getKeyByActivity(activity);
 
-    const sendStatus = (typeof key === 'string' && sendStatusByActivityKey.get(key)) || 'sent';
+  const sendStatus = (typeof key === 'string' && sendStatusByActivityKey.get(key)) || 'sent';
 
-    return (
-      <ActivityStatusContainerCore
-        activity={activity}
-        hideTimestamp={hideTimestamp}
-        nextVisibleActivity={nextVisibleActivity}
-        sendStatus={sendStatus}
-      />
-    );
-  }
-);
+  return <ActivityStatusContainerCore activity={activity} hideTimestamp={hideTimestamp} sendStatus={sendStatus} />;
+});
 
 export type ActivityStatusRenderer = (renderOptions: {
   activity: WebChatActivity;
-  nextVisibleActivity: WebChatActivity;
 }) => (props?: { hideTimestamp?: boolean }) => ReactNode;
 
 export default function useCreateActivityStatusRenderer(): ActivityStatusRenderer {
   return useMemo<ActivityStatusRenderer>(
     () =>
-      ({ activity, nextVisibleActivity }) =>
-      ({ hideTimestamp } = {}) => (
-        <ActivityStatusContainer
-          activity={activity}
-          hideTimestamp={hideTimestamp}
-          nextVisibleActivity={nextVisibleActivity}
-        />
-      ),
+      ({ activity }) =>
+      ({ hideTimestamp } = {}) => <ActivityStatusContainer activity={activity} hideTimestamp={hideTimestamp} />,
     []
   );
 }