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

package/src/hooks/transcriptScrollRelative.ts

@@ -2,10 +2,7 @@ import { createPropagation } from 'use-propagate';
 
 export type TranscriptScrollRelativeOptions = { direction: 'down' | 'up'; displacement?: number };
 
-const {
-  PropagationScope: ScrollRelativeTranscriptScope,
-  useListen: useRegisterScrollRelativeTranscript,
-  usePropagate: useScrollRelativeTranscript
-} = createPropagation<TranscriptScrollRelativeOptions>();
+const { useListen: useRegisterScrollRelativeTranscript, usePropagate: useScrollRelativeTranscript } =
+  createPropagation<TranscriptScrollRelativeOptions>();
 
-export { ScrollRelativeTranscriptScope, useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };
+export { useRegisterScrollRelativeTranscript, useScrollRelativeTranscript };

package/src/hooks/useObserveScrollPosition.ts

@@ -8,10 +8,7 @@ export default function useObserveScrollPosition(
   deps: any[]
 ): void {
   if (typeof observer !== 'function') {
-    // This is for shortcutting invalid props.
-    // eslint-disable-next-line react-hooks/immutability
     observer = undefined;
-
     console.warn('botframework-webchat: First argument passed to "useObserveScrollPosition" must be a function.');
   } else if (typeof deps !== 'undefined' && !Array.isArray(deps)) {
     console.warn(

package/src/hooks/useObserveTranscriptFocus.ts

@@ -4,14 +4,11 @@ import type { WebChatActivity } from 'botframework-webchat-core';
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
 export default function useObserveTranscriptFocus(
-  observer: ((event: { activity: WebChatActivity }) => void) | undefined,
+  observer: (event: { activity: WebChatActivity }) => void,
   deps: any[]
 ): void {
   if (typeof observer !== 'function') {
-    // Shortcut for disabling the observer.
-    // eslint-disable-next-line react-hooks/immutability
     observer = undefined;
-
     console.warn('botframework-webchat: First argument passed to "useObserveTranscriptFocus" must be a function.');
   } else if (typeof deps !== 'undefined' && !Array.isArray(deps)) {
     console.warn(
@@ -21,9 +18,6 @@ export default function useObserveTranscriptFocus(
 
   const { observeTranscriptFocus } = useWebChatUIContext();
 
-  useEffect(
-    () => observer && observeTranscriptFocus(observer),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [...(deps || []), observer, observeTranscriptFocus]
-  );
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  useEffect(() => observer && observeTranscriptFocus(observer), [...(deps || []), observer, observeTranscriptFocus]);
 }

package/src/hooks/useRenderMarkdownAsHTML.ts

@@ -2,64 +2,61 @@ import { cx } from '@emotion/css';
 import { hooks, StrictStyleOptions } from 'botframework-webchat-api';
 import { useMemo } from 'react';
 
-import { useTransformHTMLContent } from '../providers/HTMLContentTransformCOR/index';
-import parseDocumentFragmentFromString from '../Utils/parseDocumentFragmentFromString';
-import serializeDocumentFragmentIntoString from '../Utils/serializeDocumentFragmentIntoString';
+import parseDocumentFromString from '../Utils/parseDocumentFromString';
+import serializeDocumentIntoString from '../Utils/serializeDocumentIntoString';
 import useWebChatUIContext from './internal/useWebChatUIContext';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-
-import styles from './RenderMarkdown.module.css';
+import useStyleSet from './useStyleSet';
 
 const { useLocalizer, useStyleOptions } = hooks;
 
-type RenderMarkdownAsHTMLFn = (
-  markdown: string,
-  styleOptions?: Readonly<StrictStyleOptions>,
-  options?: Readonly<{ externalLinkAlt: string }>
-) => string;
-
 export default function useRenderMarkdownAsHTML(
   mode: 'accessible name' | 'adaptive cards' | 'citation modal' | 'message activity' = 'message activity'
-): RenderMarkdownAsHTMLFn | undefined {
+):
+  | ((
+      markdown: string,
+      styleOptions?: Readonly<StrictStyleOptions>,
+      options?: Readonly<{ externalLinkAlt: string }>
+    ) => string)
+  | undefined {
   const { renderMarkdown } = useWebChatUIContext();
   const [styleOptions] = useStyleOptions();
+  const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet();
   const localize = useLocalizer();
-  const transformHTMLContent = useTransformHTMLContent();
-
-  const classNames = useStyles(styles);
 
   const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT');
 
   const containerClassName = useMemo(
     () =>
-      cx(classNames['render-markdown'], {
-        [classNames['render-markdown--adaptive-cards']]: mode === 'adaptive cards',
-        [classNames['render-markdown--citation']]: mode === 'citation modal',
-        [classNames['render-markdown--message-activity']]:
-          mode !== 'accessible name' && mode !== 'adaptive cards' && mode !== 'citation modal'
-      }),
-    [classNames, mode]
+      cx(
+        'webchat__render-markdown',
+        {
+          'webchat__render-markdown--adaptive-cards': mode === 'adaptive cards',
+          'webchat__render-markdown--citation': mode === 'citation modal',
+          'webchat__render-markdown--message-activity':
+            mode !== 'accessible name' && mode !== 'adaptive cards' && mode !== 'citation modal'
+        },
+        renderMarkdownStyleSet + ''
+      ),
+    [mode, renderMarkdownStyleSet]
   );
 
-  // For 'message activity' mode, streaming rendering is available via useStreamingMarkdownWithDefinitions hook.
-  // This hook still returns a full-render function for backward compatibility and other consumers.
   return useMemo(
     () =>
       renderMarkdown &&
       (markdown => {
-        const html = renderMarkdown(markdown, styleOptions, { externalLinkAlt });
+        const htmlAfterSanitization = renderMarkdown(markdown, styleOptions, { containerClassName, externalLinkAlt });
 
-        const documentFragment = transformHTMLContent(parseDocumentFragmentFromString(html));
+        const documentAfterSanitization = parseDocumentFromString(htmlAfterSanitization);
 
-        const rootElement = document.createElement('div');
+        const rootElement = documentAfterSanitization.createElement('div');
 
         containerClassName && rootElement.classList.add(...containerClassName.split(' ').filter(Boolean));
 
-        rootElement.append(...documentFragment.childNodes);
-        documentFragment.append(rootElement);
+        rootElement.append(...documentAfterSanitization.body.children);
+        documentAfterSanitization.body.append(rootElement);
 
-        return serializeDocumentFragmentIntoString(documentFragment);
+        return serializeDocumentIntoString(documentAfterSanitization);
       }),
-    [containerClassName, externalLinkAlt, renderMarkdown, styleOptions, transformHTMLContent]
+    [containerClassName, externalLinkAlt, renderMarkdown, styleOptions]
   );
 }

package/src/hooks/useSendFiles.ts

@@ -33,10 +33,7 @@ export default function useSendFiles(): (files: readonly File[]) => void {
                   name: file.name,
                   size: file.size,
                   thumbnail: thumbnailURL?.toString(),
-                  // The URL is passed to chat adapter and should be treated as binary.
-                  // Just in case the chat adapter naively echo back, it should show up as binary.
-                  // eslint-disable-next-line no-restricted-properties
-                  url: URL.createObjectURL(new Blob([file], { type: 'application/octet-stream' }))
+                  url: URL.createObjectURL(file)
                 }))
               )
             )

package/src/index.ts

@@ -1,32 +1,127 @@
-export { concatMiddleware, localize } from 'botframework-webchat-api';
-export { type WebChatActivity } from 'botframework-webchat-core';
+import { hooks as apiHooks, concatMiddleware, localize } from 'botframework-webchat-api';
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+import ReactWebChat, { ReactWebChatProps } from './ReactWebChat';
+
+import Composer, { ComposerProps } from './Composer';
+
+import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
+
+import BasicConnectivityStatus from './BasicConnectivityStatus';
+import BasicToaster from './BasicToaster';
+import BasicTranscript from './BasicTranscript';
+import BasicWebChat, { BasicWebChatProps } from './BasicWebChat';
+import BasicSendBox from './SendBox/BasicSendBox';
+import BasicSendBoxToolbar from './SendBoxToolbar/BasicSendBoxToolbar';
+
+import Avatar from './Activity/Avatar';
+import Bubble from './Activity/Bubble';
+import SpeakActivity from './Activity/Speak';
+import SendStatus from './ActivityStatus/SendStatus/SendStatus';
+import Timestamp from './ActivityStatus/Timestamp';
+import ErrorBox from './ErrorBox';
+
+import LocalizedString from './Utils/LocalizedString';
+
+import AudioContent from './Attachment/AudioContent';
+import FileContent from './Attachment/FileContent';
+import HTMLVideoContent from './Attachment/HTMLVideoContent';
+import ImageContent from './Attachment/ImageContent';
+import TextContent from './Attachment/Text/TextContent';
+import VideoContent from './Attachment/VideoContent';
+import VimeoContent from './Attachment/VimeoContent';
+import YouTubeContent from './Attachment/YouTubeContent';
+
+import DictationInterims from './SendBox/DictationInterims';
+import MicrophoneButton from './SendBox/MicrophoneButton';
+import SendButton from './SendBox/SendButton';
+import SuggestedActions from './SendBox/SuggestedActions';
+import SendTextBox from './SendBox/TextBox';
+import UploadButton from './SendBoxToolbar/UploadButton';
+
+import createCoreAttachmentMiddleware from './Attachment/createMiddleware';
+import createCoreActivityMiddleware from './Middleware/Activity/createCoreMiddleware';
+import createCoreActivityStatusMiddleware from './Middleware/ActivityStatus/createCoreMiddleware';
+import createStyleSet from './Styles/createStyleSet';
+import getTabIndex from './Utils/TypeFocusSink/getTabIndex';
+import Context from './hooks/internal/WebChatUIContext';
+import ThemeProvider from './providers/Theme/ThemeProvider';
+import withEmoji from './withEmoji/withEmoji';
+
+import * as componentHooks from './hooks/index';
+
+export { type SendBoxFocusOptions } from './hooks/index';
+
+const hooks = {
+  ...apiHooks,
+  ...componentHooks
+};
+
+const buildTool = process.env.build_tool;
+const moduleFormat = process.env.module_format;
+const version = process.env.npm_package_version;
+
+const buildInfo = { buildTool, moduleFormat, version };
+
+const Components = {
+  BasicWebChat,
+  Composer,
+  ThemeProvider,
+
+  // Components for restructuring BasicWebChat
+  AccessKeySinkSurface,
+  BasicConnectivityStatus,
+  BasicSendBox,
+  BasicSendBoxToolbar,
+  BasicToaster,
+  BasicTranscript,
+
+  // Components for recomposing activities and attachments
+  AudioContent,
+  FileContent,
+  HTMLVideoContent,
+  ImageContent,
+  TextContent,
+  VideoContent,
+  VimeoContent,
+  YouTubeContent,
+
+  // Components for recomposing transcript
+  Avatar,
+  Bubble,
+  ErrorBox,
+  SendStatus,
+  SpeakActivity,
+  Timestamp,
+
+  // Components for recomposing send box
+  DictationInterims,
+  MicrophoneButton,
+  SendButton,
+  SendTextBox,
+  SuggestedActions,
+  UploadButton,
+
+  // Components for localization
+  LocalizedString
+};
+
+export default ReactWebChat;
 
-export { default as createCoreAttachmentMiddleware } from './Attachment/createMiddleware';
-export { default as Context } from './hooks/internal/WebChatUIContext';
-export { createCoreActivityMiddleware } from './Middleware/Activity/defaultActivityPolymiddleware';
-export { default as createCoreActivityStatusMiddleware } from './Middleware/ActivityStatus/createCoreMiddleware';
 export {
-  type HTMLContentTransformEnhancer,
-  type HTMLContentTransformFunction,
-  type HTMLContentTransformMiddleware,
-  type HTMLContentTransformRequest
-} from './providers/HTMLContentTransformCOR/index';
-export { default as createStyleSet } from './Styles/createStyleSet';
-export { default as testIds } from './testIds';
-export { default as getTabIndex } from './Utils/TypeFocusSink/getTabIndex';
-export { default as withEmoji } from './withEmoji/withEmoji';
-
-export type * from './boot/component';
-export * as Components from './boot/component';
-export type * from './boot/hook';
-export * as hooks from './boot/hook';
-
-export { ReactWebChat as default } from './boot/component';
-
-// #region Build info
-import buildInfo from './buildInfo';
-
-const { object: buildInfoObject, version } = buildInfo;
-
-export { buildInfoObject as buildInfo, version };
-// #endregion
+  Components,
+  Context,
+  buildInfo,
+  concatMiddleware,
+  createCoreActivityMiddleware,
+  createCoreActivityStatusMiddleware,
+  createCoreAttachmentMiddleware,
+  createStyleSet,
+  getTabIndex,
+  hooks,
+  localize,
+  version,
+  withEmoji
+};
+
+export type { BasicWebChatProps, ComposerProps, ReactWebChatProps, WebChatActivity };

package/src/internal.ts

@@ -0,0 +1,4 @@
+import parseDocumentFromString from './Utils/parseDocumentFromString';
+import serializeDocumentIntoString from './Utils/serializeDocumentIntoString';
+
+export { parseDocumentFromString, serializeDocumentIntoString };

package/src/providers/ActivityTree/ActivityTreeComposer.tsx

@@ -0,0 +1,90 @@
+import { hooks, type ActivityComponentFactory } from 'botframework-webchat-api';
+import type { WebChatActivity } from 'botframework-webchat-core';
+import React, { useMemo, type ReactNode } from 'react';
+
+import useMemoWithPrevious from '../../hooks/internal/useMemoWithPrevious';
+import ActivityTreeContext from './private/Context';
+import { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
+import useActivitiesWithRenderer from './private/useActivitiesWithRenderer';
+import useActivityTreeWithRenderer from './private/useActivityTreeWithRenderer';
+import useActivityTreeContext from './private/useContext';
+
+import type { ActivityTreeContextType } from './private/Context';
+
+type ActivityTreeComposerProps = Readonly<{ children?: ReactNode | undefined }>;
+
+const { useActivities, useCreateActivityRenderer, useGetActivitiesByKey, useGetKeyByActivity } = hooks;
+
+const ActivityTreeComposer = ({ children }: ActivityTreeComposerProps) => {
+  const existingContext = useActivityTreeContext(false);
+
+  if (existingContext) {
+    throw new Error('botframework-webchat internal: <ActivityTreeComposer> should not be nested.');
+  }
+
+  const [rawActivities] = useActivities();
+  const getActivitiesByKey = useGetActivitiesByKey();
+  const getKeyByActivity = useGetKeyByActivity();
+
+  const activities = useMemo<readonly WebChatActivity[]>(() => {
+    const activities: WebChatActivity[] = [];
+
+    for (const activity of rawActivities) {
+      // 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 && activities.push(activitiesWithSameKey[activitiesWithSameKey.length - 1]);
+    }
+
+    return Object.freeze(activities);
+  }, [getActivitiesByKey, getKeyByActivity, rawActivities]);
+
+  const createActivityRenderer: ActivityComponentFactory = useCreateActivityRenderer();
+
+  const activitiesWithRenderer = useActivitiesWithRenderer(activities, createActivityRenderer);
+
+  const activityTreeWithRenderer = useActivityTreeWithRenderer(activitiesWithRenderer);
+
+  const flattenedActivityTreeWithRenderer = useMemoWithPrevious<Readonly<ActivityWithRenderer[]>>(
+    prevFlattenedActivityTree => {
+      const nextFlattenedActivityTree = Object.freeze(
+        activityTreeWithRenderer.reduce<ActivityWithRenderer[]>(
+          (intermediate, entriesWithSameSender) =>
+            entriesWithSameSender.reduce<ActivityWithRenderer[]>(
+              (intermediate, entriesWithSameSenderAndStatus) =>
+                entriesWithSameSenderAndStatus.reduce<ActivityWithRenderer[]>((intermediate, entry) => {
+                  intermediate.push(entry);
+
+                  return intermediate;
+                }, intermediate),
+              intermediate
+            ),
+          []
+        )
+      );
+
+      return nextFlattenedActivityTree.length === prevFlattenedActivityTree?.length &&
+        nextFlattenedActivityTree.every((item, index) => item === prevFlattenedActivityTree[+index])
+        ? prevFlattenedActivityTree
+        : nextFlattenedActivityTree;
+    },
+    [activityTreeWithRenderer]
+  );
+
+  const contextValue: ActivityTreeContextType = useMemo(
+    () => ({
+      activityTreeWithRendererState: Object.freeze([activityTreeWithRenderer]) as readonly [ReadonlyActivityTree],
+      flattenedActivityTreeWithRendererState: Object.freeze([flattenedActivityTreeWithRenderer]) as readonly [
+        readonly ActivityWithRenderer[]
+      ]
+    }),
+    [activityTreeWithRenderer, flattenedActivityTreeWithRenderer]
+  );
+
+  return <ActivityTreeContext.Provider value={contextValue}>{children}</ActivityTreeContext.Provider>;
+};
+
+export default ActivityTreeComposer;

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

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+import type { ActivityWithRenderer, ReadonlyActivityTree } from './types';
+
+type ActivityTreeContextType = {
+  activityTreeWithRendererState: readonly [ReadonlyActivityTree];
+  flattenedActivityTreeWithRendererState: readonly [readonly ActivityWithRenderer[]];
+};
+
+export default createContext<ActivityTreeContextType>(undefined);
+
+export type { ActivityTreeContextType };

package/src/providers/ActivityTree/private/types.ts

@@ -0,0 +1,12 @@
+import type { ActivityComponentFactory } from 'botframework-webchat-api';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+type ActivityWithRenderer = {
+  activity: WebChatActivity;
+  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
+};
+
+type ActivityTree = ActivityWithRenderer[][][];
+type ReadonlyActivityTree = readonly (readonly (readonly ActivityWithRenderer[])[])[];
+
+export type { ActivityTree, ActivityWithRenderer, ReadonlyActivityTree };

package/src/providers/ActivityTree/private/useActivitiesWithRenderer.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
+
+import type { ActivityWithRenderer } from './types';
+import useMemoized from '../../../hooks/internal/useMemoized';
+
+export default function useActivitiesWithRenderer(
+  activities: readonly WebChatActivity[],
+  createActivityRenderer
+): readonly ActivityWithRenderer[] {
+  // Create a memoized context of the createActivityRenderer function.
+  const createActivityRendererMemoized = useMemoized(
+    (activity: WebChatActivity, nextVisibleActivity: WebChatActivity) =>
+      createActivityRenderer({ activity, nextVisibleActivity }),
+    [createActivityRenderer]
+  );
+
+  const entries = useMemo(() => {
+    const activitiesWithRenderer: ActivityWithRenderer[] = [];
+    let nextVisibleActivity: WebChatActivity;
+
+    for (let index = activities.length - 1; index >= 0; index--) {
+      const activity = activities[+index];
+      const renderActivity = createActivityRendererMemoized(activity, nextVisibleActivity);
+
+      if (renderActivity) {
+        activitiesWithRenderer.splice(0, 0, {
+          activity,
+          renderActivity
+        });
+
+        nextVisibleActivity = activity;
+      }
+    }
+
+    return Object.freeze(activitiesWithRenderer);
+  }, [activities, createActivityRendererMemoized]);
+
+  return entries;
+}

package/src/providers/ActivityTree/private/useActivityTreeWithRenderer.ts

@@ -0,0 +1,140 @@
+import { hooks } from 'botframework-webchat-api';
+import { useMemo } from 'react';
+
+import type { WebChatActivity } from 'botframework-webchat-core';
+import intersectionOf from '../../../Utils/intersectionOf';
+import removeInline from '../../../Utils/removeInline';
+import type { ActivityWithRenderer, ReadonlyActivityTree } from './types';
+
+const { useGroupActivities } = hooks;
+
+function validateAllEntriesTagged<T>(entries: readonly T[], bins: readonly (readonly T[])[]): boolean {
+  return entries.every(entry => bins.some(bin => bin.includes(entry)));
+}
+
+// Activity tree is a multidimensional array, while activities is a 1D array.
+// - The first dimension of the array contains activities with same sender;
+// - The second dimension of the array contains activities with same status.
+
+// [
+//   [
+//     // Both messages are from bot and is sent as a batch, we will group them as an array.
+//     'Bot: Hello!'
+//     'Bot: What can I help today?'
+//   ],
+//   [
+//     'User: What is the weather?'
+//   ],
+//   [
+//     'Bot: Let me look it up... hold on.'
+//   ],
+//   [
+//     // This message is in a different group because it is more than a few seconds apart from the previous message.
+//     'Bot: Here is the weather forecast.'
+//   ]
+// ]
+
+function useActivityTreeWithRenderer(entries: readonly ActivityWithRenderer[]): ReadonlyActivityTree {
+  const groupActivities = useGroupActivities();
+  const entryMap: Map<WebChatActivity, ActivityWithRenderer> = useMemo(
+    () => new Map(entries.map(entry => [entry.activity, entry])),
+    [entries]
+  );
+
+  // We bin activities in 2 different ways:
+  // - `activitiesBySender` is a 2D array containing activities with same sender
+  // - `activitiesByStatus` is a 2D array containing activities with same status
+  // Both arrays should contains all activities.
+
+  const { entriesBySender, entriesByStatus } = useMemo<{
+    entriesBySender: readonly (readonly ActivityWithRenderer[])[];
+    entriesByStatus: readonly (readonly ActivityWithRenderer[])[];
+  }>(() => {
+    const visibleActivities = [...entryMap.keys()];
+
+    const groupActivitiesResult = groupActivities({ activities: visibleActivities });
+
+    const activitiesBySender = groupActivitiesResult?.sender || [];
+    const activitiesByStatus = groupActivitiesResult?.status || [];
+
+    const [entriesBySender, entriesByStatus] = [activitiesBySender, activitiesByStatus].map(bins =>
+      bins.map(bin => bin.map(activity => entryMap.get(activity)))
+    );
+
+    if (!validateAllEntriesTagged(visibleActivities, activitiesBySender)) {
+      console.warn(
+        'botframework-webchat: Not every activities are grouped in the "sender" property. Please fix "groupActivitiesMiddleware" and group every activities.'
+      );
+    }
+
+    if (!validateAllEntriesTagged(visibleActivities, activitiesByStatus)) {
+      console.warn(
+        'botframework-webchat: Not every activities are grouped in the "status" property. Please fix "groupActivitiesMiddleware" and group every activities.'
+      );
+    }
+
+    return {
+      entriesBySender,
+      entriesByStatus
+    };
+  }, [entryMap, groupActivities]);
+
+  // Create a tree of activities with 2 dimensions: sender, followed by status.
+
+  const activityTree: ReadonlyActivityTree = useMemo(() => {
+    const entriesPendingGrouping = [...entries];
+    const activityTree: (readonly (readonly ActivityWithRenderer[])[])[] = [];
+
+    while (entriesPendingGrouping.length) {
+      let found: boolean;
+      const entriesWithSameSender = entriesBySender.find(bin => bin.includes(entriesPendingGrouping[0]));
+      const senderTree: (readonly ActivityWithRenderer[])[] = [];
+
+      entriesWithSameSender?.forEach(entry => {
+        const entriesWithSameStatus = entriesByStatus.find(bin => bin.includes(entry));
+
+        const entriesWithSameSenderAndStatus = intersectionOf<ActivityWithRenderer>(
+          entriesPendingGrouping,
+          entriesWithSameSender,
+          entriesWithSameStatus
+        );
+
+        if (entriesWithSameSenderAndStatus.length) {
+          senderTree.push(Object.freeze(entriesWithSameSenderAndStatus));
+          removeInline(entriesPendingGrouping, ...entriesWithSameSenderAndStatus);
+
+          found = true;
+        }
+      });
+
+      // If the entry is not grouped by the middleware, just put the entry in its own bin.
+      found || senderTree.push(Object.freeze([entriesPendingGrouping.shift()]));
+
+      activityTree.push(Object.freeze(senderTree));
+    }
+
+    // Assertion: All entries must be assigned to the activityTree.
+    if (
+      !entries.every(activity =>
+        activityTree.some(activitiesWithSameSender =>
+          activitiesWithSameSender.some(activitiesWithSameSenderAndStatus =>
+            activitiesWithSameSenderAndStatus.includes(activity)
+          )
+        )
+      )
+    ) {
+      console.warn('botframework-webchat internal: Not all visible activities are grouped in the activityTree.', {
+        entries,
+        activityTree
+      });
+    }
+
+    return Object.freeze(activityTree);
+  }, [entriesBySender, entriesByStatus, entries]);
+
+  return activityTree;
+}
+
+export type { ActivityWithRenderer };
+
+export default useActivityTreeWithRenderer;

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

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import ActivityTreeContext from './Context';
+
+import type { ActivityTreeContextType } from './Context';
+
+export default function useActivityTreeContext(thrownOnUndefined = true): ActivityTreeContextType {
+  const contextValue = useContext(ActivityTreeContext);
+
+  if (thrownOnUndefined && !contextValue) {
+    throw new Error('botframework-webchat internal: This hook can only be used under <ActivityTreeComposer>.');
+  }
+
+  return contextValue;
+}

package/src/providers/ActivityTree/useActivityTreeWithRenderer.ts

@@ -0,0 +1,16 @@
+import useActivityTreeContext from './private/useContext';
+
+import type { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
+
+export default function useActivityTreeWithRenderer(options?: { flat?: false }): readonly [ReadonlyActivityTree];
+export default function useActivityTreeWithRenderer(options: {
+  flat: true;
+}): readonly [readonly ActivityWithRenderer[]];
+
+export default function useActivityTreeWithRenderer(options: { flat?: boolean } = {}) {
+  const context = useActivityTreeContext();
+
+  return options?.flat === true
+    ? context.flattenedActivityTreeWithRendererState
+    : context.activityTreeWithRendererState;
+}