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

package/src/providers/ReducedMotion/ReducedMotionComposer.tsx

@@ -0,0 +1,35 @@
+import React, { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
+
+import { type ContextOf } from '../../types/ContextOf';
+import Context from './private/Context';
+
+type ContextType = ContextOf<typeof Context>;
+
+type ReducedMotionComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+const ReducedMotionComposer = memo(({ children }: ReducedMotionComposerProps) => {
+  const shouldReduceMotionQueryList = useMemo(() => matchMedia?.('(prefers-reduced-motion: reduce)'), []);
+  const [shouldReduceMotion, setShouldReduceMotion] = useState<boolean>(
+    () => shouldReduceMotionQueryList?.matches ?? false
+  );
+
+  const shouldReduceMotionState = useMemo(() => Object.freeze([shouldReduceMotion] as const), [shouldReduceMotion]);
+
+  const context = useMemo<ContextType>(() => Object.freeze({ shouldReduceMotionState }), [shouldReduceMotionState]);
+
+  useEffect(() => {
+    const handleChange = ({ matches }: MediaQueryListEvent) => setShouldReduceMotion(matches);
+
+    shouldReduceMotionQueryList.addEventListener('change', handleChange);
+
+    return () => shouldReduceMotionQueryList.removeEventListener('change', handleChange);
+  }, [setShouldReduceMotion, shouldReduceMotionQueryList]);
+
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+});
+
+ReducedMotionComposer.displayName = 'ReducedMotionComposer';
+
+export default ReducedMotionComposer;

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

@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+
+type ContextType = Readonly<{
+  shouldReduceMotionState: readonly [boolean];
+}>;
+
+type ContextAsGetter<T extends Record<string, unknown>> =
+  T extends Record<infer K, infer V> ? Record<K, { get(): V }> : never;
+
+const defaultContextValue: ContextAsGetter<ContextType> = {
+  shouldReduceMotionState: {
+    get() {
+      throw new Error('shouldReduceMotionState cannot be used outside of <ReducedMotionComposer>.');
+    }
+  }
+};
+
+const Context = createContext<ContextType>(Object.create({}, defaultContextValue));
+
+Context.displayName = 'ReducedMotionComposer';
+
+export default Context;

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

@@ -0,0 +1,8 @@
+import { useContext as useReactContext } from 'react';
+
+import { type ContextOf } from '../../../types/ContextOf';
+import Context from './Context';
+
+export default function useContext(): ContextOf<typeof Context> {
+  return useReactContext(Context);
+}

package/src/providers/ReducedMotion/useShouldReduceMotion.ts

@@ -0,0 +1,5 @@
+import useContext from './private/useContext';
+
+export default function useShouldReduceMotion(): ReturnType<typeof useContext>['shouldReduceMotionState'] {
+  return useContext().shouldReduceMotionState;
+}

package/src/providers/RenderingActivities/RenderingActivitiesComposer.tsx

@@ -0,0 +1,84 @@
+import { hooks, type ActivityComponentFactory } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useMemo, type ReactNode } from 'react';
+
+import RenderingActivitiesContext, { type RenderingActivitiesContextType } from './private/RenderingActivitiesContext';
+import useInternalActivitiesWithRenderer from './private/useInternalActivitiesWithRenderer';
+
+type RenderingActivitiesComposerProps = Readonly<{
+  children?: ReactNode | undefined;
+}>;
+
+const { useActivities, useActivityKeys, useCreateActivityRenderer, useGetActivitiesByKey, useGetKeyByActivity } = hooks;
+
+const RenderingActivitiesComposer = ({ children }: RenderingActivitiesComposerProps) => {
+  const [activities] = useActivities();
+  const activityKeys = useActivityKeys();
+  const createActivityRenderer = useCreateActivityRenderer();
+  const getActivitiesByKey = useGetActivitiesByKey();
+  const getKeyByActivity = useGetKeyByActivity();
+
+  // TODO: Should move this logic into a new <LivestreamGrouping>.
+  //       The grouping would only show the latest one but it has access to previous.
+  const activitiesOfLatestRevision = useMemo<readonly WebChatActivity[]>(() => {
+    const activitiesOfLatestRevision: WebChatActivity[] = [];
+
+    if (!activityKeys) {
+      return activities;
+    }
+
+    for (const activity of activities) {
+      // If an activity has multiple revisions, display the latest revision only at the position of the first revision.
+
+      // "Activities with same key" means "multiple revisions of same activity."
+      const activitiesWithSameKey = getActivitiesByKey(getKeyByActivity(activity));
+
+      // TODO: We may want to send all revisions of activity to the middleware so they can render UI to see previous revisions.
+      activitiesWithSameKey?.[0] === activity &&
+        activitiesOfLatestRevision.push(activitiesWithSameKey[activitiesWithSameKey.length - 1]);
+    }
+
+    return Object.freeze(activitiesOfLatestRevision);
+  }, [activityKeys, getActivitiesByKey, getKeyByActivity, activities]);
+
+  const activitiesWithRenderer = useInternalActivitiesWithRenderer(activitiesOfLatestRevision, createActivityRenderer);
+
+  const renderingActivitiesState = useMemo(
+    () => Object.freeze([activitiesWithRenderer.map(({ activity }) => activity)] as const),
+    [activitiesWithRenderer]
+  );
+
+  const renderingActivityKeysState = useMemo<readonly [readonly string[]]>(() => {
+    const keys = Object.freeze(renderingActivitiesState[0].map(activity => getKeyByActivity(activity)));
+
+    if (keys.some(key => !key)) {
+      throw new Error('botframework-webchat internal: activitiesWithRenderer[].activity must have activity key');
+    }
+
+    return Object.freeze([keys] as const);
+  }, [renderingActivitiesState, getKeyByActivity]);
+
+  const renderActivityCallbackMap = useMemo<
+    ReadonlyMap<WebChatActivity, Exclude<ReturnType<ActivityComponentFactory>, false>>
+  >(
+    () =>
+      Object.freeze(new Map(activitiesWithRenderer.map(({ activity, renderActivity }) => [activity, renderActivity]))),
+    [activitiesWithRenderer]
+  );
+
+  const contextValue: RenderingActivitiesContextType = useMemo(
+    () => ({
+      renderActivityCallbackMap,
+      renderingActivitiesState,
+      renderingActivityKeysState
+    }),
+    [renderActivityCallbackMap, renderingActivitiesState, renderingActivityKeysState]
+  );
+
+  return <RenderingActivitiesContext.Provider value={contextValue}>{children}</RenderingActivitiesContext.Provider>;
+};
+
+RenderingActivitiesComposer.displayName = 'RenderingActivitiesComposer';
+
+export default memo(RenderingActivitiesComposer);
+export { type RenderingActivitiesComposerProps };

package/src/providers/RenderingActivities/private/RenderingActivitiesContext.ts

@@ -0,0 +1,15 @@
+import { type ActivityComponentFactory } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import createContextAndHook from '../../createContextAndHook';
+
+type RenderingActivitiesContextType = Readonly<{
+  renderActivityCallbackMap: ReadonlyMap<WebChatActivity, Exclude<ReturnType<ActivityComponentFactory>, false>>;
+  renderingActivitiesState: readonly [readonly WebChatActivity[]];
+  renderingActivityKeysState: readonly [readonly string[]];
+}>;
+
+const { contextComponentType, useContext } =
+  createContextAndHook<RenderingActivitiesContextType>('RenderingActivitiesContext');
+
+export default contextComponentType;
+export { useContext as useRenderingActivitiesContext, type RenderingActivitiesContextType };

package/src/providers/RenderingActivities/private/useInternalActivitiesWithRenderer.ts

@@ -0,0 +1,78 @@
+import { type ActivityComponentFactory } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import { useMemo } from 'react';
+
+import useMemoWithPrevious from '../../../hooks/internal/useMemoWithPrevious';
+
+type ActivityWithRenderer = Readonly<{
+  activity: WebChatActivity;
+  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
+}>;
+
+type Call = Readonly<{
+  activity: WebChatActivity;
+  nextVisibleActivity: WebChatActivity;
+  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
+}>;
+
+type Run = Readonly<{
+  createActivityRenderer: ActivityComponentFactory;
+  calls: readonly Call[];
+}>;
+
+export default function useInternalActivitiesWithRenderer(
+  activities: readonly WebChatActivity[],
+  createActivityRenderer: ActivityComponentFactory
+): readonly ActivityWithRenderer[] {
+  const run = useMemoWithPrevious<Run>(
+    prevRun => {
+      if (prevRun && !Object.is(prevRun.createActivityRenderer, createActivityRenderer)) {
+        // If `createActivityRenderer` changed, invalidate the cache.
+        prevRun = undefined;
+      }
+
+      const calls: Call[] = [];
+      let nextVisibleActivity: undefined | WebChatActivity;
+
+      for (let index = activities.length - 1; index >= 0; index--) {
+        const activity = activities[+index];
+
+        const prevEntry = prevRun?.calls.find(
+          entry => Object.is(activity, entry.activity) && Object.is(nextVisibleActivity, entry.nextVisibleActivity)
+        );
+
+        if (prevEntry) {
+          calls.unshift(prevEntry);
+
+          nextVisibleActivity = activity;
+        } else {
+          const renderActivity = createActivityRenderer({ activity, nextVisibleActivity });
+
+          if (renderActivity) {
+            calls.unshift(
+              Object.freeze({
+                activity,
+                nextVisibleActivity,
+                renderActivity
+              })
+            );
+
+            nextVisibleActivity = activity;
+          }
+        }
+      }
+
+      return Object.freeze({ createActivityRenderer, calls: Object.freeze(calls) });
+    },
+    [activities, createActivityRenderer]
+  );
+
+  return useMemo(
+    () =>
+      run.calls.map<ActivityWithRenderer>(call => ({
+        activity: call.activity,
+        renderActivity: call.renderActivity
+      })),
+    [run]
+  );
+}

package/src/providers/RenderingActivities/useGetRenderActivityCallback.ts

@@ -0,0 +1,11 @@
+import { type ActivityComponentFactory } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import { useRenderingActivitiesContext } from './private/RenderingActivitiesContext';
+
+export default function useGetRenderActivityCallback() {
+  const { renderActivityCallbackMap } = useRenderingActivitiesContext();
+
+  return (activity: WebChatActivity): Exclude<ReturnType<ActivityComponentFactory>, false> | undefined =>
+    renderActivityCallbackMap.get(activity);
+}

package/src/providers/RenderingActivities/useRenderingActivities.ts

@@ -0,0 +1,7 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import { useRenderingActivitiesContext } from './private/RenderingActivitiesContext';
+
+export default function useRenderingActivities(): readonly [readonly WebChatActivity[]] {
+  return useRenderingActivitiesContext().renderingActivitiesState;
+}

package/src/providers/RenderingActivities/useRenderingActivityKeys.ts

@@ -0,0 +1,5 @@
+import { useRenderingActivitiesContext } from './private/RenderingActivitiesContext';
+
+export default function useRenderingActivityKeys(): readonly [readonly string[]] {
+  return useRenderingActivitiesContext().renderingActivityKeysState;
+}

package/src/providers/RovingTabIndex/RovingTabIndexComposer.tsx

@@ -1,21 +1,39 @@
 /* eslint complexity: ["error", 50] */
 
-import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo, useCallback, useEffect, useMemo, useRef, type MutableRefObject } from 'react';
+import {
+  custom,
+  function_,
+  literal,
+  object,
+  optional,
+  pipe,
+  readonly,
+  safeParse,
+  union,
+  type InferInput
+} from 'valibot';
+
+import reactNode from '../../types/internal/reactNode';
+import RovingTabIndexContext, { type RovingTabIndexContextType } from './private/Context';
 
-import RovingTabIndexContext from './private/Context';
+type ItemRef = MutableRefObject<HTMLElement | undefined>;
 
-import type { FC, MutableRefObject, PropsWithChildren } from 'react';
-import type { RovingTabIndexContextType } from './private/Context';
+const rovingTabIndexContextProps = pipe(
+  object({
+    children: optional(reactNode()),
+    onEscapeKey: optional(custom<() => void>(value => safeParse(function_(), value).success)),
+    orientation: optional(union([literal('horizontal'), literal('vertical')]), 'horizontal')
+  }),
+  readonly()
+);
 
-type ItemRef = MutableRefObject<HTMLElement | undefined>;
+type RovingTabIndexContextProps = InferInput<typeof rovingTabIndexContextProps>;
 
-type RovingTabIndexContextProps = PropsWithChildren<{
-  onEscapeKey?: () => void;
-  orientation?: 'horizontal' | 'vertical';
-}>;
+function RovingTabIndexComposer(props: RovingTabIndexContextProps) {
+  const { children, onEscapeKey, orientation } = validateProps(rovingTabIndexContextProps, props);
 
-const RovingTabIndexComposer: FC<RovingTabIndexContextProps> = ({ children, onEscapeKey, orientation }) => {
   const activeItemIndexRef = useRef(0);
   const itemRefsRef = useRef<ItemRef[]>([]);
 
@@ -179,16 +197,7 @@ const RovingTabIndexComposer: FC<RovingTabIndexContextProps> = ({ children, onEs
   });
 
   return <RovingTabIndexContext.Provider value={contextValue}>{children}</RovingTabIndexContext.Provider>;
-};
-
-RovingTabIndexComposer.defaultProps = {
-  onEscapeKey: undefined,
-  orientation: 'horizontal'
-};
-
-RovingTabIndexComposer.propTypes = {
-  onEscapeKey: PropTypes.func,
-  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
-};
+}
 
-export default RovingTabIndexComposer;
+export default memo(RovingTabIndexComposer);
+export { rovingTabIndexContextProps, type RovingTabIndexContext };

package/src/providers/Theme/ThemeProvider.tsx

@@ -1,41 +1,42 @@
 import React, { memo, useContext, useMemo, type ReactNode } from 'react';
 
-import Context, { type ContextType } from './private/Context';
+import Context, { type ThemeContextType } from './private/Context';
 
-type Props = Readonly<{ children?: ReactNode | undefined } & Partial<ContextType>>;
+type Props = Readonly<{ children?: ReactNode | undefined } & Partial<ThemeContextType>>;
 
 const EMPTY_ARRAY = Object.freeze([] as const);
 
 const ThemeProvider = ({
-  children,
   activityMiddleware,
   activityStatusMiddleware,
   attachmentForScreenReaderMiddleware,
   attachmentMiddleware,
   avatarMiddleware,
   cardActionMiddleware,
+  children,
   groupActivitiesMiddleware,
   scrollToEndButtonMiddleware,
   sendBoxMiddleware,
   sendBoxToolbarMiddleware,
   styleOptions,
+  styles,
   toastMiddleware,
   typingIndicatorMiddleware
 }: Props) => {
   const existingContext = useContext(Context);
 
   // TODO: [P1] We should reduce boilerplate code.
-  const mergedActivityMiddleware = useMemo<ContextType['activityMiddleware']>(
+  const mergedActivityMiddleware = useMemo<ThemeContextType['activityMiddleware']>(
     () => Object.freeze([...(activityMiddleware || []), ...existingContext.activityMiddleware]),
     [activityMiddleware, existingContext.activityMiddleware]
   );
 
-  const mergedActivityStatusMiddleware = useMemo<ContextType['activityStatusMiddleware']>(
+  const mergedActivityStatusMiddleware = useMemo<ThemeContextType['activityStatusMiddleware']>(
     () => Object.freeze([...(activityStatusMiddleware || EMPTY_ARRAY), ...existingContext.activityStatusMiddleware]),
     [activityStatusMiddleware, existingContext.activityStatusMiddleware]
   );
 
-  const mergedAttachmentForScreenReaderMiddleware = useMemo<ContextType['attachmentForScreenReaderMiddleware']>(
+  const mergedAttachmentForScreenReaderMiddleware = useMemo<ThemeContextType['attachmentForScreenReaderMiddleware']>(
     () =>
       Object.freeze([
         ...(attachmentForScreenReaderMiddleware || EMPTY_ARRAY),
@@ -44,53 +45,58 @@ const ThemeProvider = ({
     [attachmentForScreenReaderMiddleware, existingContext.attachmentForScreenReaderMiddleware]
   );
 
-  const mergedAttachmentMiddleware = useMemo<ContextType['attachmentMiddleware']>(
+  const mergedAttachmentMiddleware = useMemo<ThemeContextType['attachmentMiddleware']>(
     () => Object.freeze([...(attachmentMiddleware || EMPTY_ARRAY), ...existingContext.attachmentMiddleware]),
     [attachmentMiddleware, existingContext.attachmentMiddleware]
   );
 
-  const mergedAvatarMiddleware = useMemo<ContextType['avatarMiddleware']>(
+  const mergedAvatarMiddleware = useMemo<ThemeContextType['avatarMiddleware']>(
     () => Object.freeze([...(avatarMiddleware || EMPTY_ARRAY), ...existingContext.avatarMiddleware]),
     [avatarMiddleware, existingContext.avatarMiddleware]
   );
 
-  const mergedCardActionMiddleware = useMemo<ContextType['cardActionMiddleware']>(
+  const mergedCardActionMiddleware = useMemo<ThemeContextType['cardActionMiddleware']>(
     () => Object.freeze([...(cardActionMiddleware || EMPTY_ARRAY), ...existingContext.cardActionMiddleware]),
     [cardActionMiddleware, existingContext.cardActionMiddleware]
   );
 
-  const mergedGroupActivitiesMiddleware = useMemo<ContextType['groupActivitiesMiddleware']>(
+  const mergedGroupActivitiesMiddleware = useMemo<ThemeContextType['groupActivitiesMiddleware']>(
     () => Object.freeze([...(groupActivitiesMiddleware || EMPTY_ARRAY), ...existingContext.groupActivitiesMiddleware]),
     [groupActivitiesMiddleware, existingContext.groupActivitiesMiddleware]
   );
 
-  const mergedScrollToEndButtonMiddleware = useMemo<ContextType['scrollToEndButtonMiddleware']>(
+  const mergedScrollToEndButtonMiddleware = useMemo<ThemeContextType['scrollToEndButtonMiddleware']>(
     () =>
       Object.freeze([...(scrollToEndButtonMiddleware || EMPTY_ARRAY), ...existingContext.scrollToEndButtonMiddleware]),
     [scrollToEndButtonMiddleware, existingContext.scrollToEndButtonMiddleware]
   );
 
-  const mergedSendBoxMiddleware = useMemo<ContextType['sendBoxMiddleware']>(
+  const mergedSendBoxMiddleware = useMemo<ThemeContextType['sendBoxMiddleware']>(
     () => Object.freeze([...(sendBoxMiddleware || EMPTY_ARRAY), ...existingContext.sendBoxMiddleware]),
     [sendBoxMiddleware, existingContext.sendBoxMiddleware]
   );
 
-  const mergedSendBoxToolbarMiddleware = useMemo<ContextType['sendBoxToolbarMiddleware']>(
+  const mergedSendBoxToolbarMiddleware = useMemo<ThemeContextType['sendBoxToolbarMiddleware']>(
     () => Object.freeze([...(sendBoxToolbarMiddleware || EMPTY_ARRAY), ...existingContext.sendBoxToolbarMiddleware]),
     [sendBoxToolbarMiddleware, existingContext.sendBoxToolbarMiddleware]
   );
 
-  const mergedStyleOptions = useMemo<ContextType['styleOptions']>(
+  const mergedStyleOptions = useMemo<ThemeContextType['styleOptions']>(
     () => Object.freeze({ ...styleOptions, ...existingContext.styleOptions }),
     [styleOptions, existingContext.styleOptions]
   );
 
-  const mergedToastMiddleware = useMemo<ContextType['toastMiddleware']>(
+  const mergedStyles = useMemo<ThemeContextType['styles']>(
+    () => [...(existingContext.styles || EMPTY_ARRAY), ...(styles || EMPTY_ARRAY)],
+    [styles, existingContext.styles]
+  );
+
+  const mergedToastMiddleware = useMemo<ThemeContextType['toastMiddleware']>(
     () => Object.freeze([...(toastMiddleware || EMPTY_ARRAY), ...existingContext.toastMiddleware]),
     [toastMiddleware, existingContext.toastMiddleware]
   );
 
-  const mergedTypingIndicatorMiddleware = useMemo<ContextType['typingIndicatorMiddleware']>(
+  const mergedTypingIndicatorMiddleware = useMemo<ThemeContextType['typingIndicatorMiddleware']>(
     () => Object.freeze([...(typingIndicatorMiddleware || EMPTY_ARRAY), ...existingContext.typingIndicatorMiddleware]),
     [typingIndicatorMiddleware, existingContext.typingIndicatorMiddleware]
   );
@@ -108,6 +114,7 @@ const ThemeProvider = ({
       sendBoxMiddleware: mergedSendBoxMiddleware,
       sendBoxToolbarMiddleware: mergedSendBoxToolbarMiddleware,
       styleOptions: mergedStyleOptions,
+      styles: mergedStyles,
       toastMiddleware: mergedToastMiddleware,
       typingIndicatorMiddleware: mergedTypingIndicatorMiddleware
     }),
@@ -123,6 +130,7 @@ const ThemeProvider = ({
       mergedSendBoxMiddleware,
       mergedSendBoxToolbarMiddleware,
       mergedStyleOptions,
+      mergedStyles,
       mergedToastMiddleware,
       mergedTypingIndicatorMiddleware
     ]

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

@@ -18,7 +18,7 @@ import { createContext } from 'react';
 const EMPTY_ARRAY = Object.freeze([] as const);
 const EMPTY_OBJECT = Object.freeze({} as const);
 
-export type ContextType = {
+export type ThemeContextType = {
   activityMiddleware: readonly ActivityMiddleware[];
   activityStatusMiddleware: readonly ActivityStatusMiddleware[];
   attachmentForScreenReaderMiddleware: readonly AttachmentForScreenReaderMiddleware[];
@@ -30,11 +30,12 @@ export type ContextType = {
   sendBoxMiddleware: readonly SendBoxMiddleware[];
   sendBoxToolbarMiddleware: readonly SendBoxToolbarMiddleware[];
   styleOptions: StyleOptions;
+  styles: readonly (HTMLStyleElement | HTMLLinkElement)[];
   toastMiddleware: readonly ToastMiddleware[];
   typingIndicatorMiddleware: readonly TypingIndicatorMiddleware[];
 };
 
-export default createContext<ContextType>({
+export default createContext<ThemeContextType>({
   activityMiddleware: EMPTY_ARRAY,
   activityStatusMiddleware: EMPTY_ARRAY,
   attachmentForScreenReaderMiddleware: EMPTY_ARRAY,
@@ -46,6 +47,7 @@ export default createContext<ContextType>({
   sendBoxMiddleware: EMPTY_ARRAY,
   sendBoxToolbarMiddleware: EMPTY_ARRAY,
   styleOptions: EMPTY_OBJECT,
+  styles: EMPTY_ARRAY,
   toastMiddleware: EMPTY_ARRAY,
   typingIndicatorMiddleware: EMPTY_ARRAY
 });

package/src/providers/TranscriptFocus/TranscriptFocusComposer.tsx

@@ -1,28 +1,19 @@
-import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
 import random from 'math-random';
-import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import React, { memo, useCallback, useMemo, type MutableRefObject, type ReactNode } from 'react';
 
-import scrollIntoViewWithBlockNearest from '../../Utils/scrollIntoViewWithBlockNearest';
-import TranscriptFocusContext from './private/Context';
-import useActivityTreeWithRenderer from '../ActivityTree/useActivityTreeWithRenderer';
 import usePrevious from '../../hooks/internal/usePrevious';
 import useStateRef from '../../hooks/internal/useStateRef';
 import useValueRef from '../../hooks/internal/useValueRef';
+import scrollIntoViewWithBlockNearest from '../../Utils/scrollIntoViewWithBlockNearest';
+import useRenderingActivityKeys from '../RenderingActivities/useRenderingActivityKeys';
+import TranscriptFocusContext, { type TranscriptFocusContextType } from './private/Context';
 
-import type { FC, MutableRefObject, PropsWithChildren } from 'react';
-import type { TranscriptFocusContextType } from './private/Context';
-
-const { useGetKeyByActivity } = hooks;
-
-type TranscriptFocusComposerProps = PropsWithChildren<{
+type TranscriptFocusComposerProps = Readonly<{
+  children?: ReactNode | undefined;
   containerRef: MutableRefObject<HTMLElement>;
 }>;
 
-function last<T>(array: ArrayLike<T>) {
-  return array[array.length - 1];
-}
-
 function uniqueId(count = Infinity) {
   return (
     random()
@@ -33,10 +24,9 @@ function uniqueId(count = Infinity) {
   );
 }
 
-const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, containerRef }) => {
-  const [flattenedActivityTree] = useActivityTreeWithRenderer({ flat: true });
+const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComposerProps) => {
+  const [renderingActivityKeys] = useRenderingActivityKeys();
   const [_, setRawFocusedActivityKey, rawFocusedActivityKeyRef] = useStateRef<string | undefined>();
-  const getKeyByActivity = useGetKeyByActivity();
 
   // As we need to use IDREF for `aria-activedescendant`,
   // this prefix will differentiate multiple instances of transcript on the same page.
@@ -48,11 +38,6 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
     [prefix]
   );
 
-  const renderingActivityKeys = useMemo<readonly string[]>(
-    () => Object.freeze(flattenedActivityTree.map(({ activity }) => getKeyByActivity(activity))),
-    [flattenedActivityTree, getKeyByActivity]
-  );
-
   const renderingActivityKeysRef = useValueRef<readonly string[]>(renderingActivityKeys);
 
   // While the transcript or any descendants are not focused, if the transcript is updated, reset the user-selected active descendant.
@@ -66,7 +51,9 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
   const { current: rawFocusedActivityKey } = rawFocusedActivityKeyRef;
 
   const focusedActivityKey = useMemo<string>(
-    () => (renderingActivityKeys.includes(rawFocusedActivityKey) ? rawFocusedActivityKey : last(renderingActivityKeys)),
+    () =>
+      // eslint-disable-next-line no-magic-numbers
+      renderingActivityKeys.includes(rawFocusedActivityKey) ? rawFocusedActivityKey : renderingActivityKeys.at(-1),
     [renderingActivityKeys, rawFocusedActivityKey]
   );
 
@@ -97,7 +84,8 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
         const activeDescendantId = getDescendantIdByActivityKey(
           activityKey === false
             ? // If "activityKey" is false, it means "focus nothing and reset it to the last activity".
-              last(renderingActivityKeysRef.current)
+              // eslint-disable-next-line no-magic-numbers
+              renderingActivityKeysRef.current.at(-1)
             : activityKey && activityKey !== true
               ? // If "activity" is not "undefined" and not "true", it means "focus on this activity".
                 activityKey
@@ -168,6 +156,8 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
   return <TranscriptFocusContext.Provider value={contextValue}>{children}</TranscriptFocusContext.Provider>;
 };
 
+TranscriptFocusComposer.displayName = 'TranscriptFocusComposer';
+
 TranscriptFocusComposer.propTypes = {
   // PropTypes is not fully compatible with TypeScript.
   // @ts-ignore
@@ -176,4 +166,4 @@ TranscriptFocusComposer.propTypes = {
   }).isRequired
 };
 
-export default TranscriptFocusComposer;
+export default memo(TranscriptFocusComposer);

package/src/providers/TranscriptFocus/useFocusRelativeActivity.ts

@@ -1,5 +1,5 @@
 import useTranscriptFocusContext from './private/useContext';
 
-export default function useFocusByActivityKey(): (delta: number) => void {
+export default function useFocusRelativeActivity(): (delta: number) => void {
   return useTranscriptFocusContext().focusRelativeActivity;
 }

package/src/providers/createContextAndHook.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext as reactUseContext, type Context } from 'react';
+
+export default function createContextAndHook<T extends object>(
+  displayName: string
+): Readonly<{
+  contextComponentType: Context<T>;
+  useContext: () => T;
+}> {
+  const contextComponentType = createContext<T>(
+    new Proxy({} as T, {
+      get() {
+        throw new Error(`botframework-webchat: This hook can only be used under <${displayName}>`);
+      }
+    })
+  );
+
+  contextComponentType.displayName = displayName;
+
+  return {
+    contextComponentType,
+    useContext: (): T => reactUseContext(contextComponentType)
+  };
+}