botframework-webchat-component 4.13.0 → 4.15.0

package/src/hooks/internal/useResumeAudioContext.ts

@@ -0,0 +1,7 @@
+import useWebSpeechPonyfill from '../useWebSpeechPonyfill';
+
+export default function useResumeAudioContext(): () => Promise<void> {
+  const [{ resumeAudioContext }] = useWebSpeechPonyfill();
+
+  return () => resumeAudioContext && resumeAudioContext();
+}

package/src/hooks/internal/useScrollRelative.js

@@ -5,7 +5,8 @@ import useWebChatUIContext from './useWebChatUIContext';
 export default function useScrollRelative() {
   const { scrollRelativeCallbacksRef } = useWebChatUIContext();
 
-  return useCallback((...args) => scrollRelativeCallbacksRef.current.forEach(callback => callback(...args)), [
-    scrollRelativeCallbacksRef
-  ]);
+  return useCallback(
+    (...args) => scrollRelativeCallbacksRef.current.forEach(callback => callback(...args)),
+    [scrollRelativeCallbacksRef]
+  );
 }

package/src/hooks/internal/useStateRef.ts

@@ -0,0 +1,31 @@
+import { useCallback, useRef, useState } from 'react';
+
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+
+export default function useStateRef<T>(
+  initialValue?: T
+): readonly [T, Dispatch<SetStateAction<T>>, MutableRefObject<T>] {
+  const [_, forceRender] = useState<{}>();
+  const valueRef: MutableRefObject<T> = useRef<T>(initialValue);
+
+  const setter: Dispatch<SetStateAction<T>> = useCallback(
+    (value: SetStateAction<T>) => {
+      const { current } = valueRef;
+
+      value = value instanceof Function ? value(current) : value;
+
+      if (current !== value) {
+        valueRef.current = value;
+
+        forceRender({});
+      }
+    },
+    [forceRender, valueRef]
+  );
+
+  return Object.freeze([valueRef.current, setter, valueRef]) as readonly [
+    T,
+    Dispatch<SetStateAction<T>>,
+    MutableRefObject<T>
+  ];
+}

package/src/hooks/internal/{useUniqueId.js → useUniqueId.ts}

@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 import random from 'math-random';
 
-export default function useUniqueId(prefix) {
+export default function useUniqueId(prefix?: string): string {
   const id = useMemo(() => random().toString(36).substr(2, 5), []);
 
   prefix = prefix ? `${prefix}--` : '';

package/src/hooks/internal/useValueRef.ts

@@ -0,0 +1,22 @@
+// TODO: [P0] #4133 Don't copy.
+import { RefObject, useMemo, useRef } from 'react';
+
+export default function useValueRef<T>(value: T): RefObject<T> {
+  const ref = useRef<T>();
+  const readOnlyRef = useMemo(
+    () =>
+      Object.create(
+        {},
+        {
+          current: {
+            get: () => ref.current
+          }
+        }
+      ),
+    []
+  );
+
+  ref.current = value;
+
+  return readOnlyRef;
+}

package/src/hooks/{useDictateAbortable.js → useDictateAbortable.ts}

@@ -1,6 +1,6 @@
 import useSettableDictateAbortable from './internal/useSettableDictateAbortable';
 
-export default function useDictateAbortable() {
+export default function useDictateAbortable(): [boolean] {
   // We are only exporting a read-only version of dictateAbortable.
   const [dictateAbortable] = useSettableDictateAbortable();
 

package/src/hooks/{useFocus.js → useFocus.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useFocus() {
+export default function useFocus(): (where?: 'main' | 'sendBox' | 'sendBoxWithoutKeyboard') => void {
   const { focusSendBoxCallbacksRef, focusTranscriptCallbacksRef } = useWebChatUIContext();
 
   return useCallback(

package/src/hooks/{useFocusSendBox.js → useFocusSendBox.ts}

@@ -2,7 +2,8 @@ import useFocus from './useFocus';
 
 let showDeprecationNotes = true;
 
-export default function useFocusSendBox() {
+/** @deprecated Please use `useFocus('sendBox')` instead. */
+export default function useFocusSendBox(): () => void {
   if (showDeprecationNotes) {
     console.warn(
       'botframework-webchat: "useFocusSendBox" is deprecated and will be removed on or after 2022-04-21. Please use "useFocus(\'sendBox\')" instead.'

package/src/hooks/{useObserveScrollPosition.js → useObserveScrollPosition.ts}

@@ -1,7 +1,12 @@
 import { useEffect } from 'react';
+
+import ScrollPosition from '../types/ScrollPosition';
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useObserveScrollPosition(observer, deps) {
+export default function useObserveScrollPosition(
+  observer: (scrollPosition: ScrollPosition) => void,
+  deps: any[]
+): void {
   if (typeof observer !== 'function') {
     observer = undefined;
     console.warn('botframework-webchat: First argument passed to "useObserveScrollPosition" must be a function.');

package/src/hooks/{useObserveTranscriptFocus.js → useObserveTranscriptFocus.ts}

@@ -1,7 +1,12 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
 import { useEffect } from 'react';
+
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useObserveTranscriptFocus(observer, deps) {
+export default function useObserveTranscriptFocus(
+  observer: (event: { activity: DirectLineActivity }) => void,
+  deps: any[]
+): void {
   if (typeof observer !== 'function') {
     observer = undefined;
     console.warn('botframework-webchat: First argument passed to "useObserveTranscriptFocus" must be a function.');

package/src/hooks/useRenderMarkdownAsHTML.ts

@@ -0,0 +1,23 @@
+import { hooks, StrictStyleOptions } from 'botframework-webchat-api';
+import { useMemo } from 'react';
+
+import useWebChatUIContext from './internal/useWebChatUIContext';
+
+const { useLocalizer, useStyleOptions } = hooks;
+
+export default function useRenderMarkdownAsHTML(): (
+  markdown: string,
+  styleOptions?: StrictStyleOptions,
+  options?: { externalLinkAlt: string }
+) => string {
+  const { renderMarkdown } = useWebChatUIContext();
+  const [styleOptions] = useStyleOptions();
+  const localize = useLocalizer();
+
+  const externalLinkAlt = localize('MARKDOWN_EXTERNAL_LINK_ALT');
+
+  return useMemo(
+    () => renderMarkdown && (markdown => renderMarkdown(markdown, styleOptions, { externalLinkAlt })),
+    [externalLinkAlt, renderMarkdown, styleOptions]
+  );
+}

package/src/hooks/{useScrollDown.js → useScrollDown.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useScrollRelative from './internal/useScrollRelative';
 
-export default function useScrollDown() {
+export default function useScrollDown(): (options?: { displacement: number }) => void {
   const scrollRelative = useScrollRelative();
 
   return useCallback((...args) => scrollRelative('down', ...args), [scrollRelative]);

package/src/hooks/useScrollTo.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+
+import ScrollPosition from '../types/ScrollPosition';
+import useWebChatUIContext from './internal/useWebChatUIContext';
+
+export default function useScrollTo(): (
+  position: ScrollPosition,
+  scrollToOptions: { behavior?: 'auto' | 'smooth' }
+) => void {
+  const { scrollToCallbacksRef } = useWebChatUIContext();
+
+  return useCallback(
+    (...args) => scrollToCallbacksRef.current.forEach(callback => callback(...args)),
+    [scrollToCallbacksRef]
+  );
+}

package/src/hooks/useScrollToEnd.ts

@@ -0,0 +1,12 @@
+import { useCallback } from 'react';
+
+import useWebChatUIContext from './internal/useWebChatUIContext';
+
+export default function useScrollToEnd(): () => void {
+  const { scrollToEndCallbacksRef } = useWebChatUIContext();
+
+  return useCallback(
+    () => scrollToEndCallbacksRef.current.forEach(callback => callback({ behavior: 'smooth' })),
+    [scrollToEndCallbacksRef]
+  );
+}

package/src/hooks/{useScrollUp.js → useScrollUp.ts}

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import useScrollRelative from './internal/useScrollRelative';
 
-export default function useScrollUp() {
+export default function useScrollUp(): (options?: { displacement: number }) => void {
   const scrollRelative = useScrollRelative();
 
   return useCallback((...args) => scrollRelative('up', ...args), [scrollRelative]);

package/src/hooks/{useSendFiles.js → useSendFiles.ts}

@@ -1,5 +1,6 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [0, 1024] }] */
 
+import { DirectLineAttachment } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import { useCallback } from 'react';
 
@@ -19,7 +20,7 @@ async function makeThumbnail(file, width, height, contentType, quality) {
   }
 }
 
-export default function useSendFiles() {
+export default function useSendFiles(): (files: File[]) => void {
   const sendFiles = useAPISendFiles();
   const [
     {
@@ -40,7 +41,7 @@ export default function useSendFiles() {
         // TODO: [P3] We need to find revokeObjectURL on the UI side
         //       Redux store should not know about the browser environment
         //       One fix is to use ArrayBuffer instead of object URL, but that would requires change to DirectLineJS
-        const attachments = await Promise.all(
+        const attachments: DirectLineAttachment[] = await Promise.all(
           [].map.call(files, async file => {
             let thumbnail;
 

package/src/hooks/{useStyleSet.js → useStyleSet.ts}

@@ -1,5 +1,5 @@
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
-export default function useStyleSet() {
+export default function useStyleSet(): [any] {
   return [useWebChatUIContext().styleSet];
 }

package/src/hooks/useWebSpeechPonyfill.ts

@@ -0,0 +1,7 @@
+import { WebSpeechPonyfill } from 'botframework-webchat-api';
+
+import useWebChatUIContext from './internal/useWebChatUIContext';
+
+export default function useWebSpeechPonyfill(): [WebSpeechPonyfill] {
+  return [useWebChatUIContext().webSpeechPonyfill];
+}

package/src/index.ts

@@ -1,8 +1,10 @@
-import ReactWebChat from './ReactWebChat';
+import { concatMiddleware, hooks as apiHooks, Localize, localize } from 'botframework-webchat-api';
+
+import ReactWebChat, { ReactWebChatProps } from './ReactWebChat';
 
-import Composer from './Composer';
+import Composer, { ComposerProps } from './Composer';
 
-import BasicWebChat from './BasicWebChat';
+import BasicWebChat, { BasicWebChatProps } from './BasicWebChat';
 
 import Avatar from './Activity/Avatar';
 import Bubble from './Activity/Bubble';
@@ -35,14 +37,6 @@ import createCoreAttachmentMiddleware from './Middleware/Attachment/createCoreMi
 import createStyleSet from './Styles/createStyleSet';
 import getTabIndex from './Utils/TypeFocusSink/getTabIndex';
 
-declare module 'botframework-webchat-api' {
-  export function concatMiddleware(): any;
-  export const hooks: any;
-  export function Localize(): any;
-  export function localize(): any;
-}
-
-import { concatMiddleware, hooks as apiHooks, Localize, localize } from 'botframework-webchat-api';
 import * as componentHooks from './hooks/index';
 
 const hooks = {
@@ -50,7 +44,6 @@ const hooks = {
   ...componentHooks
 };
 
-// eslint-disable-next-line no-undef
 const version = process.env.npm_package_version;
 
 const Components = {
@@ -111,3 +104,5 @@ export {
   localize,
   version
 };
+
+export type { BasicWebChatProps, ComposerProps, ReactWebChatProps };

package/src/providers/ActivityTree/ActivityTreeComposer.tsx

@@ -0,0 +1,74 @@
+import { hooks } from 'botframework-webchat-api';
+import React, { useMemo } from 'react';
+
+import type { ActivityComponentFactory } from 'botframework-webchat-api';
+import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { FC, PropsWithChildren } from 'react';
+
+import { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
+import ActivityTreeContext from './private/Context';
+import useActivitiesWithRenderer from './private/useActivitiesWithRenderer';
+import useActivityTreeContext from './private/useContext';
+import useActivityTreeWithRenderer from './private/useActivityTreeWithRenderer';
+import useMemoWithPrevious from '../../hooks/internal/useMemoWithPrevious';
+
+import type { ActivityTreeContextType } from './private/Context';
+
+type ActivityTreeComposerProps = PropsWithChildren<{}>;
+
+const { useActivities, useCreateActivityRenderer } = hooks;
+
+const ActivityTreeComposer: FC<ActivityTreeComposerProps> = ({ children }) => {
+  const existingContext = useActivityTreeContext(false);
+
+  if (existingContext) {
+    throw new Error('botframework-webchat internal: <ActivityTreeComposer> should not be nested.');
+  }
+
+  const [activities]: [DirectLineActivity[]] = useActivities();
+  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 { DirectLineActivity } from 'botframework-webchat-core';
+
+type ActivityWithRenderer = {
+  activity: DirectLineActivity;
+  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,66 @@
+import { useCallback, useRef } from 'react';
+
+import type { DirectLineActivity } from 'botframework-webchat-core';
+
+import useMemoize from '../../../hooks/internal/useMemoize';
+
+import type { ActivityWithRenderer } from './types';
+
+export default function useActivitiesWithRenderer(
+  activities: readonly DirectLineActivity[],
+  createActivityRenderer
+): readonly ActivityWithRenderer[] {
+  const createActivityRendererWithLiteralArgs = useCallback(
+    (activity: DirectLineActivity, nextVisibleActivity: DirectLineActivity) =>
+      createActivityRenderer({ activity, nextVisibleActivity }),
+    [createActivityRenderer]
+  );
+
+  // Create a memoized context of the createActivityRenderer function.
+  // TODO: [P2] Rename useMemoize to useMemoAll
+  const entries = useMemoize(
+    createActivityRendererWithLiteralArgs,
+    createActivityRendererWithLiteralArgsMemoized => {
+      // All calls to createActivityRendererWithLiteralArgsMemoized() in this function will be memoized (LRU = 1).
+      // In the next render cycle, calls to createActivityRendererWithLiteralArgsMemoized() might return the memoized result instead.
+      // This is an improvement to React useMemo(), because it only allows 1 memoization.
+      // useMemoize() allows any number of memoization.
+
+      const activitiesWithRenderer: ActivityWithRenderer[] = [];
+      let nextVisibleActivity: DirectLineActivity;
+
+      for (let index = activities.length - 1; index >= 0; index--) {
+        const activity = activities[+index];
+        const renderActivity = createActivityRendererWithLiteralArgsMemoized(activity, nextVisibleActivity);
+
+        if (renderActivity) {
+          activitiesWithRenderer.splice(0, 0, {
+            activity,
+            renderActivity
+          });
+
+          nextVisibleActivity = activity;
+        }
+      }
+
+      return Object.freeze(activitiesWithRenderer);
+    },
+    [activities]
+  );
+
+  const prevEntriesRef = useRef<readonly ActivityWithRenderer[]>([]);
+  const { current: prevEntries } = prevEntriesRef;
+
+  if (
+    prevEntries.length !== entries.length ||
+    prevEntries.some((prevEntry, index) => {
+      const entry = entries[+index];
+
+      return entry.activity !== prevEntry.activity || entry.renderActivity !== prevEntry.renderActivity;
+    })
+  ) {
+    prevEntriesRef.current = entries;
+  }
+
+  return prevEntriesRef.current;
+}

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

@@ -0,0 +1,140 @@
+import { hooks } from 'botframework-webchat-api';
+import { useMemo } from 'react';
+
+import type { DirectLineActivity } 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(
+  entries: readonly ActivityWithRenderer[],
+  bins: readonly (readonly ActivityWithRenderer[])[]
+): 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();
+
+  // 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 DirectLineActivity[])[];
+    entriesByStatus: readonly (readonly DirectLineActivity[])[];
+  }>(() => {
+    const visibleActivities = entries.map(({ activity }) => activity);
+
+    const {
+      sender: activitiesBySender,
+      status: activitiesByStatus
+    }: {
+      sender: readonly (readonly DirectLineActivity[])[];
+      status: readonly (readonly DirectLineActivity[])[];
+    } = groupActivities({
+      activities: visibleActivities
+    });
+
+    const [entriesBySender, entriesByStatus] = [activitiesBySender, activitiesByStatus].map(bins =>
+      bins.map(bin => bin.map(activity => entries.find(entry => entry.activity === 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
+    };
+  }, [entries, 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) {
+      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);
+        }
+      });
+
+      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;
+}