botframework-webchat-api 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/hooks/index.ts

@@ -1,6 +1,3 @@
-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';
@@ -29,6 +26,7 @@ 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';
@@ -59,9 +57,7 @@ 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';
@@ -70,15 +66,9 @@ 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,
@@ -88,7 +78,6 @@ export {
   useAvatarForBot,
   useAvatarForUser,
   useByteFormatter,
-  useCapabilities,
   useConnectivityStatus,
   useCreateActivityRenderer,
   useCreateActivityStatusRenderer,
@@ -111,7 +100,6 @@ export {
   useGetSendTimeoutForActivity,
   useGrammars,
   useGroupActivities,
-  useGroupActivitiesByName,
   useGroupTimestamp,
   useLanguage,
   useLastAcknowledgedActivityKey,
@@ -142,9 +130,7 @@ export {
   useSetNotification,
   useShouldSpeakIncomingActivity,
   useStartDictate,
-  useStartVoice,
   useStopDictate,
-  useStopVoice,
   useStyleOptions,
   useSubmitSendBox,
   useSuggestedActions,
@@ -153,10 +139,7 @@ export {
   useTrackEvent,
   useTrackException,
   useTrackTiming,
-  useUIState,
   useUserID,
   useUsername,
-  useVoiceRecordingMuted,
-  useVoiceSelector,
-  useVoiceState
+  useVoiceSelector
 };

package/src/hooks/internal/ErrorBox.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+import { createElement, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import useErrorBoxClass from './useErrorBoxClass';
+import useTrackException from '../useTrackException';
+
+const ErrorBox = ({ error, type }) => {
+  const [errorBoxClass] = useErrorBoxClass();
+  const trackException = useTrackException();
+
+  useEffect(() => {
+    trackException(error, false);
+  }, [error, trackException]);
+
+  useEffect(() => {
+    console.group(`botframework-webchat: ${type}`);
+    console.error(error);
+    console.groupEnd();
+  }, [error, type]);
+
+  return !!errorBoxClass && createElement(errorBoxClass, { error, type });
+};
+
+ErrorBox.defaultProps = {
+  type: undefined
+};
+
+ErrorBox.propTypes = {
+  error: PropTypes.any.isRequired,
+  type: PropTypes.string
+};
+
+export default ErrorBox;

package/src/hooks/internal/SendBoxMiddleware.ts

@@ -0,0 +1,21 @@
+import templateMiddleware from './private/templateMiddleware';
+
+const {
+  initMiddleware: initSendBoxMiddleware,
+  Provider: SendBoxMiddlewareProvider,
+  Proxy: SendBoxMiddlewareProxy,
+  types
+} = templateMiddleware<void, void, { className?: string | undefined }>('sendBoxMiddleware');
+
+type SendBoxMiddleware = typeof types.middleware;
+type SendBoxMiddlewareProps = typeof types.props;
+type SendBoxMiddlewareRequest = typeof types.request;
+
+export {
+  SendBoxMiddlewareProvider,
+  SendBoxMiddlewareProxy,
+  initSendBoxMiddleware,
+  type SendBoxMiddleware,
+  type SendBoxMiddlewareProps,
+  type SendBoxMiddlewareRequest
+};

package/src/hooks/internal/SendBoxToolbarMiddleware.ts

@@ -0,0 +1,21 @@
+import templateMiddleware from './private/templateMiddleware';
+
+const {
+  initMiddleware: initSendBoxToolbarMiddleware,
+  Provider: SendBoxToolbarMiddlewareProvider,
+  Proxy: SendBoxToolbarMiddlewareProxy,
+  types
+} = templateMiddleware<void, void, { className?: string | undefined }>('sendBoxToolbarMiddleware');
+
+type SendBoxToolbarMiddleware = typeof types.middleware;
+type SendBoxToolbarMiddlewareProps = typeof types.props;
+type SendBoxToolbarMiddlewareRequest = typeof types.request;
+
+export {
+  SendBoxToolbarMiddlewareProvider,
+  SendBoxToolbarMiddlewareProxy,
+  initSendBoxToolbarMiddleware,
+  type SendBoxToolbarMiddleware,
+  type SendBoxToolbarMiddlewareProps,
+  type SendBoxToolbarMiddlewareRequest
+};

package/src/hooks/internal/Tracker.ts

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

package/src/hooks/internal/WebChatAPIContext.ts

@@ -1,4 +1,3 @@
-import { type LegacyRenderAttachment } from '@msinternal/botframework-webchat-api-middleware/legacy';
 import {
   type DirectLineJSBotConnection,
   type Observable,
@@ -9,8 +8,12 @@ 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';
@@ -20,13 +23,16 @@ import { ScrollToEndButtonComponentFactory } from '../../types/ScrollToEndButton
 import TelemetryMeasurementEvent from '../../types/TelemetryMeasurementEvent';
 import { RenderToast } from '../../types/ToastMiddleware';
 
-export type WebChatAPIContextType = {
+type WebChatAPIContext = {
+  activityRenderer?: LegacyActivityRenderer;
   activityStatusRenderer: RenderActivityStatus;
   attachmentForScreenReaderRenderer?: AttachmentForScreenReaderComponentFactory;
-  attachmentRenderer?: LegacyRenderAttachment;
+  attachmentRenderer?: RenderAttachment;
+  avatarRenderer: AvatarComponentFactory;
   clearSuggestedActions?: () => void;
   dir?: string;
   directLine?: DirectLineJSBotConnection;
+  disabled?: boolean;
   dismissNotification?: (id: string) => void;
   downscaleImageToDataURL?: (
     blob: Blob,
@@ -38,6 +44,7 @@ export type WebChatAPIContextType = {
   emitTypingIndicator?: () => void;
   grammars?: any;
   groupActivities?: GroupActivities;
+  internalErrorBoxClass?: React.Component | Function;
   language?: string;
   localizedGlobalizeState?: PrecompiledGlobalize[];
   localizedStrings?: { [language: string]: LocalizedStrings };
@@ -69,21 +76,19 @@ export type WebChatAPIContextType = {
   setSendTimeout?: (timeout: number) => void;
   startDictate?: () => void;
   startSpeakingActivity?: () => void;
-  startVoice?: () => void;
   stopDictate?: () => void;
   stopSpeakingActivity?: () => void;
-  stopVoice?: () => void;
+  styleOptions?: StrictStyleOptions;
   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<WebChatAPIContextType>(undefined);
+const context = createContext<WebChatAPIContext>(undefined);
 
 context.displayName = 'WebChatAPIContext';
 

package/src/hooks/internal/WebChatReduxContext.js

@@ -1,14 +1,13 @@
 import { createContext } from 'react';
-import { createDispatchHook, createSelectorHook, createStoreHook } from 'react-redux';
+import { createDispatchHook, createSelectorHook } 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, useStore };
+export { useDispatch, useSelector };

package/src/hooks/internal/private/templateMiddleware.ts

@@ -0,0 +1,4 @@
+import templateMiddleware from '../../../decorator/private/templateMiddleware';
+
+// TODO: We should move them to a common directory.
+export default templateMiddleware;

package/src/hooks/internal/useCreateActivityRendererInternal.ts

@@ -0,0 +1,46 @@
+import { isValidElement, useMemo } from 'react';
+
+import { ActivityComponentFactory } from '../../types/ActivityMiddleware';
+import { RenderAttachment } from '../../types/AttachmentMiddleware';
+import useRenderAttachment from '../useRenderAttachment';
+import useWebChatAPIContext from './useWebChatAPIContext';
+
+export default function useCreateActivityRendererInternal(
+  renderAttachmentOverride?: RenderAttachment
+): ActivityComponentFactory {
+  const { activityRenderer: createActivityRenderer } = useWebChatAPIContext();
+  const defaultRenderAttachment = useRenderAttachment();
+
+  const renderAttachment: RenderAttachment = renderAttachmentOverride || defaultRenderAttachment;
+
+  return useMemo(
+    () =>
+      (...createActivityRendererOptions) => {
+        const renderActivity = createActivityRenderer(...createActivityRendererOptions);
+
+        if (!renderActivity) {
+          return false;
+        }
+
+        return renderActivityOptions => {
+          if (isValidElement(renderActivity)) {
+            return renderActivity;
+          }
+
+          const activityElement = renderActivity(
+            (...renderAttachmentArgs) => renderAttachment(...renderAttachmentArgs),
+            renderActivityOptions
+          );
+
+          // "activityElement" cannot be false. If the middleware want to hide the "activityElement", it should return "false" when we call createActivityRenderer().
+          activityElement ||
+            console.warn(
+              'botframework-webchat: To hide an activity, the activity renderer should return false. It should not return a function that will return false when called.'
+            );
+
+          return activityElement;
+        };
+      },
+    [createActivityRenderer, renderAttachment]
+  );
+}

package/src/hooks/internal/useDebugDeps.js

@@ -0,0 +1,30 @@
+/* eslint no-console: "off" */
+
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+import { useRef } from 'react';
+
+export default function useDebugDeps(depsMap, name) {
+  const lastDepsMapRef = useRef({});
+
+  const { current: lastDepsMap } = lastDepsMapRef;
+  const keys = new Set([...Object.keys(depsMap), ...Object.keys(lastDepsMap)]);
+  const keysChanged = Array.from(keys).filter(
+    // Mitigation through denylisting.
+    // eslint-disable-next-line security/detect-object-injection
+    key => !isForbiddenPropertyName(key) && !Object.is(depsMap[key], lastDepsMap[key])
+  );
+
+  if (keysChanged.length) {
+    console.groupCollapsed(`Changes found in ${name}`);
+
+    keysChanged.forEach(key => {
+      // Mitigation through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
+      isForbiddenPropertyName(key) || console.log(key, { from: lastDepsMap[key], to: depsMap[key] });
+    });
+
+    console.groupEnd();
+  }
+
+  lastDepsMapRef.current = depsMap;
+}

package/src/hooks/internal/useErrorBoxClass.js

@@ -0,0 +1,7 @@
+import useWebChatAPIContext from './useWebChatAPIContext';
+
+export default function useErrorBoxClass() {
+  const { internalErrorBoxClass } = useWebChatAPIContext();
+
+  return [internalErrorBoxClass];
+}

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 ? (
-    <ErrorBoxPolymiddlewareProxy error={error} where={type} />
+    <ErrorBox error={error} type={type} />
   ) : (
     <ErrorBoundary onError={handleError}>{children}</ErrorBoundary>
   );

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 <ErrorBoxPolymiddlewareProxy error={err} where={`render of ${type}`} />;
+            return <ErrorBox error={err} type={`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)(() => (
-      <ErrorBoxPolymiddlewareProxy error={new Error(`reached terminator of ${type}`)} where={type} />
+      <ErrorBox error={new Error(`reached terminator of ${type}`)} type={type} />
     ));
 
     return (...createRendererArgs) => {
@@ -73,13 +73,13 @@ export function forRenderer(type, { strict = false } = {}, ...middleware) {
 
                 return element;
               } catch (err) {
-                return <ErrorBoxPolymiddlewareProxy error={err} where={`render of ${type}`} />;
+                return <ErrorBox error={err} type={`render of ${type}`} />;
               }
             }}
           </UserlandBoundary>
         );
       } catch (err) {
-        return <ErrorBoxPolymiddlewareProxy error={err} where={`render of ${type}`} />;
+        return <ErrorBox error={err} type={`render of ${type}`} />;
       }
     };
   };

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

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

package/src/hooks/middleware/createDefaultGroupActivitiesMiddleware.ts

@@ -0,0 +1,75 @@
+import GroupActivitiesMiddleware from '../../types/GroupActivitiesMiddleware';
+
+import type { GlobalScopePonyfill, WebChatActivity } from 'botframework-webchat-core';
+import type { SendStatus } from '../../types/SendStatus';
+
+function bin<T>(items: T[], grouping: (last: T, current: T) => boolean): T[][] {
+  let lastBin: T[];
+  const bins: T[][] = [];
+  let lastItem: T;
+
+  items.forEach(item => {
+    if (lastItem && grouping(lastItem, item)) {
+      lastBin.push(item);
+    } else {
+      lastBin = [item];
+      bins.push(lastBin);
+    }
+
+    lastItem = item;
+  });
+
+  return bins;
+}
+
+function sending(activity: WebChatActivity): SendStatus | undefined {
+  if (activity.from.role === 'user') {
+    const {
+      channelData: { state, 'webchat:send-status': sendStatus }
+    } = activity;
+
+    // `channelData.state` is being deprecated in favor of `channelData['webchat:send-status']`.
+    // Please refer to #4362 for details. Remove on or after 2024-07-31.
+    return sendStatus || (state === 'sent' ? 'sent' : 'sending');
+  }
+}
+
+function shouldGroupTimestamp(
+  activityX: WebChatActivity,
+  activityY: WebChatActivity,
+  groupTimestamp: boolean | number,
+  { Date }: GlobalScopePonyfill
+): 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;
+}
+
+export default function createDefaultGroupActivitiesMiddleware({
+  groupTimestamp,
+  ponyfill
+}: {
+  groupTimestamp: boolean | number;
+  ponyfill: GlobalScopePonyfill;
+}): GroupActivitiesMiddleware {
+  return () =>
+    () =>
+    ({ activities }) => ({
+      sender: bin(activities, (x, y) => x.from.role === y.from.role),
+      status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp, ponyfill))
+    });
+}

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

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

package/src/hooks/useActiveTyping.ts

@@ -36,16 +36,15 @@ 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, Date, earliestExpireAt, forceRender, setTimeout]);
+  }, [clearTimeout, forceRender, setTimeout, timeToRender]);
 
   return activeTypingState;
 }

package/src/hooks/useActivities.ts

@@ -1,66 +1,7 @@
-import { useOrderedActivities } from '@msinternal/botframework-webchat-api-graph';
 import type { WebChatActivity } from 'botframework-webchat-core';
 
-import { useSelector, useStore } from './internal/WebChatReduxContext';
-import usePrevious from './internal/usePrevious';
+import { useSelector } from './internal/WebChatReduxContext';
 
-declare const process: {
-  env: {
-    NODE_ENV?: string | undefined;
-  };
-};
-
-function useActivitiesForProduction(): readonly [readonly WebChatActivity[]] {
-  return useOrderedActivities();
+export default function useActivities(): [WebChatActivity[]] {
+  return [useSelector(({ activities }) => activities)];
 }
-
-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,29 +1,8 @@
-import { useBuildRenderActivityCallback } from '@msinternal/botframework-webchat-api-middleware';
-import {
-  type LegacyActivityComponentFactory,
-  type LegacyActivityProps
-} from '@msinternal/botframework-webchat-api-middleware/legacy';
-import { useCallback } from 'react';
+import { ActivityComponentFactory } from '../types/ActivityMiddleware';
+import useCreateActivityRendererInternal from './internal/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]
-  );
+// The newer useCreateActivityRenderer() hook does not support override renderAttachment().
+// Only the deprecated useRenderActivity() hook support overriding renderAttachment().
+export default function useCreateActivityRenderer(): ActivityComponentFactory {
+  return useCreateActivityRendererInternal();
 }