botframework-webchat-component 4.18.2 → 4.19.0

package/src/providers/TranscriptFocus/TranscriptFocusComposer.tsx

@@ -1,46 +1,40 @@
-import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
+/* eslint-disable no-magic-numbers */
 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 { useGetGroupState, useGetLogicalGroupKey } from '../ActivityLogicalGrouping';
+import useGetLogicalGroupBoundaries from '../ActivityLogicalGrouping/useGetLogicalGroupBoundaries';
+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()
-      // eslint-disable-next-line no-magic-numbers
-      .toString(36)
-      // eslint-disable-next-line no-magic-numbers
-      .substring(2, 2 + count)
-  );
+  return random()
+    .toString(36)
+    .substring(2, 2 + count);
 }
 
-const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, containerRef }) => {
-  const [flattenedActivityTree] = useActivityTreeWithRenderer({ flat: true });
-  const [_, setRawFocusedActivityKey, rawFocusedActivityKeyRef] = useStateRef<string | undefined>();
-  const getKeyByActivity = useGetKeyByActivity();
+const TranscriptFocusComposer = ({ children, containerRef }: TranscriptFocusComposerProps) => {
+  const [rawFocusedActivityGroupKey, setRawFocusedActivityGroupKey, rawFocusedActivityGroupKeyRef] = useStateRef<
+    string | undefined
+  >();
+  const [renderingActivityKeys] = useRenderingActivityKeys();
+  const [, setRawFocusedActivityKey, rawFocusedActivityKeyRef] = useStateRef<string | undefined>();
+  const getGroupBoundaries = useGetLogicalGroupBoundaries();
+  const getGroupKeyByActivityKey = useGetLogicalGroupKey();
+  const getGroupState = useGetGroupState();
 
   // As we need to use IDREF for `aria-activedescendant`,
   // this prefix will differentiate multiple instances of transcript on the same page.
-  // eslint-disable-next-line no-magic-numbers
   const prefix = useMemo<string>(() => uniqueId(3), []);
 
   const getDescendantIdByActivityKey: (activityKey?: string) => string | undefined = useCallback(
@@ -48,9 +42,14 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
     [prefix]
   );
 
-  const renderingActivityKeys = useMemo<readonly string[]>(
-    () => Object.freeze(flattenedActivityTree.map(({ activity }) => getKeyByActivity(activity))),
-    [flattenedActivityTree, getKeyByActivity]
+  const getGroupDescendantIdByGroupKey: (groupKey?: string) => string | undefined = useCallback(
+    (groupKey?: string) => groupKey && `webchat__transcript-focus-${prefix}__group-${groupKey}`,
+    [prefix]
+  );
+
+  const getGroupDescendantIdByActivityKey: (activityKey?: string) => string | undefined = useCallback(
+    (activityKey?: string) => activityKey && getGroupDescendantIdByGroupKey(getGroupKeyByActivityKey(activityKey)),
+    [getGroupDescendantIdByGroupKey, getGroupKeyByActivityKey]
   );
 
   const renderingActivityKeysRef = useValueRef<readonly string[]>(renderingActivityKeys);
@@ -66,7 +65,8 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
   const { current: rawFocusedActivityKey } = rawFocusedActivityKeyRef;
 
   const focusedActivityKey = useMemo<string>(
-    () => (renderingActivityKeys.includes(rawFocusedActivityKey) ? rawFocusedActivityKey : last(renderingActivityKeys)),
+    () =>
+      renderingActivityKeys.includes(rawFocusedActivityKey) ? rawFocusedActivityKey : renderingActivityKeys.at(-1),
     [renderingActivityKeys, rawFocusedActivityKey]
   );
 
@@ -77,6 +77,42 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
     [getDescendantIdByActivityKey, focusedActivityKey]
   );
 
+  const activeGroupDescendantId = useMemo<string>(
+    () => getGroupDescendantIdByGroupKey(rawFocusedActivityGroupKey),
+    [getGroupDescendantIdByGroupKey, rawFocusedActivityGroupKey]
+  );
+
+  const handleFocus = useCallback(
+    (activeDescendantId: string) => {
+      containerRef.current?.focus();
+
+      const activeDescendantElement = activeDescendantId && document.getElementById(activeDescendantId);
+
+      // Don't scroll active descendant into view if the focus is already inside it.
+      // Otherwise, given the focus is on the send box, clicking on any <input> inside the Adaptive Cards may cause the view to move.
+      // This UX is not desirable because click should not cause scroll.
+      if (activeDescendantElement && !activeDescendantElement.contains(document.activeElement)) {
+        scrollIntoViewWithBlockNearest(activeDescendantElement);
+      }
+    },
+    [containerRef]
+  );
+
+  const focusByGroupKey = useCallback(
+    (groupKey: string | undefined, withFocus = true) => {
+      if (!groupKey) {
+        setRawFocusedActivityGroupKey(undefined);
+        return;
+      }
+      setRawFocusedActivityGroupKey(groupKey);
+
+      const groupDescendantId = getGroupDescendantIdByGroupKey(groupKey);
+
+      withFocus && groupDescendantId && handleFocus(groupDescendantId);
+    },
+    [getGroupDescendantIdByGroupKey, handleFocus, setRawFocusedActivityGroupKey]
+  );
+
   const focusByActivityKey = useCallback<
     (activityKey: boolean | string | undefined, withFocus: boolean | undefined) => void
   >(
@@ -89,46 +125,196 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
         setRawFocusedActivityKey(key => key || focusedActivityKeyRef.current);
       } else if (activityKey) {
         setRawFocusedActivityKey(activityKey);
+        focusByGroupKey(undefined, false);
+      } else if (activityKey === undefined) {
+        // if nothing is supplied assume we want to focus current activity and scroll it into view
+        withFocus = true;
       }
 
-      if (withFocus) {
-        containerRef.current?.focus();
-
-        const activeDescendantId = getDescendantIdByActivityKey(
-          activityKey === false
-            ? // If "activityKey" is false, it means "focus nothing and reset it to the last activity".
-              last(renderingActivityKeysRef.current)
-            : activityKey && activityKey !== true
-              ? // If "activity" is not "undefined" and not "true", it means "focus on this activity".
-                activityKey
-              : // If "activityKey" is "undefined", it means "don't modify the focus".
-                // If "activityKey" is "true", it means "try to focus on anything".
-                rawFocusedActivityKeyRef.current
-        );
-
-        const activeDescendantElement = activeDescendantId && document.getElementById(activeDescendantId);
-
-        // Don't scroll active descendant into view if the focus is already inside it.
-        // Otherwise, given the focus is on the send box, clicking on any <input> inside the Adaptive Cards may cause the view to move.
-        // This UX is not desirable because click should not cause scroll.
-        if (activeDescendantElement && !activeDescendantElement.contains(document.activeElement)) {
-          scrollIntoViewWithBlockNearest(activeDescendantElement);
-        }
+      const groupKey = typeof activityKey === 'string' && getGroupKeyByActivityKey(activityKey);
+      const groupState = groupKey && getGroupState(groupKey);
+
+      // shortcut for collapsed group
+      // when collapsed, we do not want to focus on the group or scroll it into view
+      if (groupState?.isCollapsed) {
+        return;
       }
+
+      const activeDescendantId = getDescendantIdByActivityKey(
+        activityKey === false
+          ? // If "activityKey" is false, it means "focus nothing and reset it to the last activity".
+            renderingActivityKeysRef.current.at(-1)
+          : activityKey && activityKey !== true
+            ? // If "activity" is not "undefined" and not "true", it means "focus on this activity".
+              activityKey
+            : // If "activityKey" is "undefined", it means "don't modify the focus".
+              // If "activityKey" is "true", it means "try to focus on anything".
+              rawFocusedActivityKeyRef.current
+      );
+
+      withFocus && handleFocus(activeDescendantId);
     },
     [
-      getDescendantIdByActivityKey,
-      containerRef,
+      focusByGroupKey,
       focusedActivityKeyRef,
-      renderingActivityKeysRef,
+      getDescendantIdByActivityKey,
+      getGroupKeyByActivityKey,
+      getGroupState,
+      handleFocus,
       rawFocusedActivityKeyRef,
+      renderingActivityKeysRef,
       setRawFocusedActivityKey
     ]
   );
 
+  // Helper function to get the next activity linearly
+  const getNextActivityLinear = useCallback(
+    (currentActivityKey: string, direction: 'up' | 'down'): string | undefined => {
+      const { current: orderedActivityKeys } = renderingActivityKeysRef;
+      const currentIndex = orderedActivityKeys.indexOf(currentActivityKey);
+
+      if (currentIndex === -1) {
+        return undefined;
+      }
+
+      const delta = direction === 'up' ? -1 : 1;
+      const nextIndex = currentIndex + delta;
+
+      if (nextIndex >= 0 && nextIndex < orderedActivityKeys.length) {
+        return orderedActivityKeys[+nextIndex];
+      }
+
+      return undefined;
+    },
+    [renderingActivityKeysRef]
+  );
+
+  // Handle navigation from a focused group header
+  const handleHeaderTransition = useCallback(
+    (direction: 'up' | 'down') => {
+      const { current: currentGroupKey } = rawFocusedActivityGroupKeyRef;
+      const { current: orderedActivityKeys } = renderingActivityKeysRef;
+      const currentGroupState = getGroupState(currentGroupKey);
+      const [firstActivityKey, lastActivityKey] = getGroupBoundaries(currentGroupKey);
+
+      if (direction === 'down') {
+        if (!currentGroupState?.isCollapsed) {
+          // From expanded group header, go to first activity in the group
+          if (firstActivityKey) {
+            focusByActivityKey(firstActivityKey, true);
+          }
+        } else {
+          // From collapsed group header, skip to next activity/group outside this group
+          const lastGroupActivityIndex = orderedActivityKeys.indexOf(lastActivityKey);
+
+          if (lastGroupActivityIndex !== -1 && lastGroupActivityIndex + 1 < orderedActivityKeys.length) {
+            const nextActivityKey = orderedActivityKeys[lastGroupActivityIndex + 1];
+            const nextGroupKey = getGroupKeyByActivityKey(nextActivityKey);
+
+            if (nextGroupKey) {
+              // Next activity is in a group, focus the group header first
+              focusByGroupKey(nextGroupKey);
+            } else {
+              // Next activity is not in a group, focus it normally
+              focusByActivityKey(nextActivityKey, true);
+            }
+          }
+        }
+      } else if (direction === 'up') {
+        // From group header, go to previous activity/group
+        const currentIndex = orderedActivityKeys.indexOf(firstActivityKey);
+        if (currentIndex !== -1) {
+          const prevActivityKey = orderedActivityKeys[currentIndex - 1];
+          const prevGroupKey = getGroupKeyByActivityKey(prevActivityKey);
+          const prevGroupState =
+            prevGroupKey && prevGroupKey !== currentGroupKey ? getGroupState(prevGroupKey) : undefined;
+
+          // Previous activity is in a different collapsed group
+          if (prevGroupState?.isCollapsed) {
+            focusByActivityKey(prevActivityKey, false);
+            focusByGroupKey(prevGroupKey);
+          } else {
+            focusByActivityKey(prevActivityKey, true);
+          }
+        }
+      }
+    },
+    [
+      focusByActivityKey,
+      focusByGroupKey,
+      getGroupBoundaries,
+      getGroupKeyByActivityKey,
+      getGroupState,
+      rawFocusedActivityGroupKeyRef,
+      renderingActivityKeysRef
+    ]
+  );
+
+  // Helper function to handle navigation to a different group
+  const handleGroupTransition = useCallback(
+    (currentActivityKey: string, nextActivityKey: string, direction: 'up' | 'down') => {
+      const currentGroupKey = getGroupKeyByActivityKey(currentActivityKey);
+      const nextGroupKey = getGroupKeyByActivityKey(nextActivityKey);
+
+      if (!nextGroupKey || nextGroupKey === currentGroupKey) {
+        // Not changing groups - focus activity, reset group
+        focusByActivityKey(nextActivityKey, true);
+        return;
+      }
+
+      // Moving to a different group
+      const [firstActivityKey, lastActivityKey] = getGroupBoundaries(nextGroupKey);
+      const nextGroupState = getGroupState(nextGroupKey);
+
+      if (direction === 'down' && firstActivityKey === nextActivityKey) {
+        // Going down into a new group - always focus header first
+        focusByActivityKey(currentActivityKey, false);
+        focusByGroupKey(nextGroupKey);
+      } else if (direction === 'up' && lastActivityKey === nextActivityKey && nextGroupState?.isCollapsed) {
+        // Going up into a collapsed group from below - focus header
+        focusByGroupKey(nextGroupKey);
+      } else {
+        // Other cases - focus activity, reset header focus
+        focusByActivityKey(nextActivityKey, true);
+      }
+    },
+    [focusByActivityKey, focusByGroupKey, getGroupBoundaries, getGroupKeyByActivityKey, getGroupState]
+  );
+
+  // Helper function to handle delta > 1 navigation
+  const handleDeltaNavigation = useCallback(
+    (delta: number) => {
+      const { current: orderedActivityKeys } = renderingActivityKeysRef;
+      const { current: focusedActivityKey } = focusedActivityKeyRef;
+
+      // Handle jumping to first/last activity
+      if (Math.abs(delta) === Infinity || Math.abs(delta) >= orderedActivityKeys.length) {
+        const targetActivityKey = delta < 0 ? orderedActivityKeys.at(0) : orderedActivityKeys.at(-1);
+        if (targetActivityKey) {
+          focusByActivityKey(targetActivityKey, true);
+        }
+        return;
+      }
+
+      // For delta > 1, handle multi-step navigation
+      if (Math.abs(delta) > 1) {
+        const currentIndex = orderedActivityKeys.indexOf(focusedActivityKey || '');
+        if (currentIndex !== -1) {
+          const targetIndex = Math.max(0, Math.min(orderedActivityKeys.length - 1, currentIndex + delta));
+          const targetActivityKey = orderedActivityKeys.at(targetIndex);
+          if (targetActivityKey) {
+            focusByActivityKey(targetActivityKey, true);
+          }
+        }
+      }
+    },
+    [focusByActivityKey, focusedActivityKeyRef, renderingActivityKeysRef]
+  );
+
   const focusRelativeActivity = useCallback(
     (delta: number) => {
       const { current: orderedActivityKeys } = renderingActivityKeysRef;
+      const { current: rawFocusedActivityGroupKey } = rawFocusedActivityGroupKeyRef;
 
       if (isNaN(delta) || !orderedActivityKeys.length) {
         return focusByActivityKey(false, true);
@@ -136,31 +322,100 @@ const TranscriptFocusComposer: FC<TranscriptFocusComposerProps> = ({ children, c
 
       const { current: focusedActivityKey } = focusedActivityKeyRef;
 
-      const index = orderedActivityKeys.indexOf(focusedActivityKey);
-      const nextIndex = ~index
-        ? Math.max(0, Math.min(orderedActivityKeys.length - 1, index + delta))
-        : orderedActivityKeys.length - 1;
+      const isHeaderFocused = !!activeGroupDescendantId;
+
+      if (delta === 0) {
+        if (isHeaderFocused) {
+          focusByGroupKey(rawFocusedActivityGroupKey, true);
+        } else {
+          focusByActivityKey(focusedActivityKey, true);
+        }
+        return;
+      }
+
+      if (Math.abs(delta) > 1) {
+        return handleDeltaNavigation(delta);
+      }
 
-      focusByActivityKey(orderedActivityKeys[+nextIndex], true);
+      const direction = delta < 0 ? 'up' : 'down';
+
+      // Handle navigation from a focused group header
+      if (isHeaderFocused && rawFocusedActivityGroupKey) {
+        return handleHeaderTransition(direction);
+      }
+
+      // Handle navigation from a focused activity
+      const groupKey = getGroupKeyByActivityKey(focusedActivityKey);
+      const [firstActivityKey, lastActivityKey] = getGroupBoundaries(groupKey);
+      const groupState = groupKey ? getGroupState(groupKey) : undefined;
+
+      // In group special cases
+      if (groupKey) {
+        if (direction === 'up') {
+          // For expanded groups: only focus header when going up from first activity
+          // For collapsed groups: focus header when going up from any activity in the group
+          if ((firstActivityKey === focusedActivityKey && !groupState?.isCollapsed) || groupState?.isCollapsed) {
+            // From first activity in expanded group OR any activity in collapsed group, go to group header
+            focusByActivityKey(focusedActivityKey, false);
+            focusByGroupKey(groupKey);
+            return;
+          }
+        } else if (direction === 'down') {
+          // Special handling for collapsed groups: when moving down from any activity in a collapsed group,
+          // jump to the next visible element outside the group
+          if (groupState?.isCollapsed) {
+            const nextActivityKey = getNextActivityLinear(lastActivityKey, direction);
+            return handleGroupTransition(lastActivityKey, nextActivityKey, direction);
+          }
+        }
+      }
+
+      // Handle regular linear navigation
+      const nextActivityKey = getNextActivityLinear(focusedActivityKey, direction);
+      if (nextActivityKey) {
+        return handleGroupTransition(focusedActivityKey, nextActivityKey, direction);
+      }
     },
-    [focusedActivityKeyRef, renderingActivityKeysRef, focusByActivityKey]
+    [
+      activeGroupDescendantId,
+      focusByActivityKey,
+      focusByGroupKey,
+      focusedActivityKeyRef,
+      getGroupBoundaries,
+      getGroupKeyByActivityKey,
+      getGroupState,
+      getNextActivityLinear,
+      handleDeltaNavigation,
+      handleGroupTransition,
+      handleHeaderTransition,
+      rawFocusedActivityGroupKeyRef,
+      renderingActivityKeysRef
+    ]
   );
 
   const contextValue = useMemo<TranscriptFocusContextType>(
     () => ({
       activeDescendantIdState: Object.freeze([activeDescendantId]) as readonly [string],
-      getDescendantIdByActivityKey,
+      activeGroupDescendantIdState: Object.freeze([activeGroupDescendantId]) as readonly [string],
       focusByActivityKey,
+      focusByGroupKey,
       focusedActivityKeyState: Object.freeze([focusedActivityKey]) as readonly [string],
       focusedExplicitlyState: Object.freeze([!!rawFocusedActivityKey]) as readonly [boolean],
-      focusRelativeActivity
+      focusedGroupKeyState: Object.freeze([rawFocusedActivityGroupKey]) as readonly [string],
+      focusRelativeActivity,
+      getDescendantIdByActivityKey,
+      getGroupDescendantIdByActivityKey
     }),
     [
       activeDescendantId,
-      getDescendantIdByActivityKey,
+      activeGroupDescendantId,
       focusByActivityKey,
+      focusByGroupKey,
       focusedActivityKey,
       focusRelativeActivity,
+      getDescendantIdByActivityKey,
+      getGroupDescendantIdByActivityKey,
+      rawFocusedActivityGroupKey,
       rawFocusedActivityKey
     ]
   );
@@ -168,6 +423,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 +433,4 @@ TranscriptFocusComposer.propTypes = {
   }).isRequired
 };
 
-export default TranscriptFocusComposer;
+export default memo(TranscriptFocusComposer);

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

@@ -2,11 +2,15 @@ import { createContext } from 'react';
 
 type TranscriptFocusContextType = {
   activeDescendantIdState: readonly [string];
+  activeGroupDescendantIdState: readonly [string];
   focusByActivityKey: (activityKey: boolean | string | undefined, withFocus: boolean | undefined) => void;
+  focusByGroupKey: (groupKey: string | undefined, withFocus: boolean | undefined) => void;
   focusedActivityKeyState: readonly [string];
   focusedExplicitlyState: readonly [boolean];
+  focusedGroupKeyState: readonly [string];
   focusRelativeActivity: (delta: number) => void;
   getDescendantIdByActivityKey: (activityKey?: string) => string | undefined;
+  getGroupDescendantIdByActivityKey: (activityKey?: string) => string | undefined;
 };
 
 const TranscriptFocusContext = createContext<TranscriptFocusContextType>(undefined);

package/src/providers/TranscriptFocus/useActiveDescendantId.ts

@@ -1,5 +1,8 @@
 import useTranscriptFocusContext from './private/useContext';
 
 export default function useActiveDescendantId(): readonly [string] {
-  return useTranscriptFocusContext().activeDescendantIdState;
+  const context = useTranscriptFocusContext();
+  return context.activeGroupDescendantIdState[0]
+    ? context.activeGroupDescendantIdState
+    : context.activeDescendantIdState;
 }

package/src/providers/TranscriptFocus/useFocusByGroupKey.ts

@@ -0,0 +1,11 @@
+import useTranscriptFocusContext from './private/useContext';
+
+/**
+ * Put the focus on an activity based on its activity key.
+ *
+ * @param {boolean | string | undefined} activityKey - The activity key to focus on, `false` to reset focus to most recent activity, `true` to focus on anything, `undefined` for not changing the focus.
+ * @param {boolean} withFocus - `true` if the user agent focus should be sent to the transcript, otherwise, `false`.
+ */
+export default function useFocusByGroupKey(): (groupKey: string | undefined, withFocus?: boolean) => void {
+  return useTranscriptFocusContext().focusByGroupKey;
+}

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/TranscriptFocus/useFocusedKey.ts

@@ -0,0 +1,6 @@
+import useTranscriptFocusContext from './private/useContext';
+
+export default function useFocusedKey(): readonly [string] {
+  const context = useTranscriptFocusContext();
+  return context.focusedGroupKeyState[0] ? context.focusedGroupKeyState : context.focusedActivityKeyState;
+}

package/src/providers/TranscriptFocus/useGetGroupDescendantIdByActivityKey.ts

@@ -0,0 +1,5 @@
+import useTranscriptFocusContext from './private/useContext';
+
+export default function useGetGroupDescendantIdByActivityKey(): (activityKey?: string) => string | undefined {
+  return useTranscriptFocusContext().getGroupDescendantIdByActivityKey;
+}

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)
+  };
+}