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

package/src/BasicTranscript.tsx

@@ -1,65 +1,72 @@
+// TODO: [P2] Fix ESLint error `no-use-before-define`
+/* eslint-disable @typescript-eslint/no-use-before-define */
+
 import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import React, {
+  forwardRef,
+  Fragment,
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  type KeyboardEventHandler,
+  type MutableRefObject,
+  type ReactNode
+} from 'react';
 import {
   Composer as ReactScrollToBottomComposer,
   Panel as ReactScrollToBottomPanel,
-  useAnimatingToEnd,
-  useAtEnd,
   useObserveScrollPosition,
   useScrollTo,
   useScrollToEnd,
   useSticky
 } from 'react-scroll-to-bottom';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef } from 'react';
+import { wrapWith } from 'react-wrap-with';
 
-import type { ActivityElementMap } from './Transcript/types';
-import type { FC, KeyboardEventHandler, MutableRefObject, ReactNode } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
-
-import { android } from './Utils/detectBrowser';
 import BasicTypingIndicator from './BasicTypingIndicator';
+import ChatHistoryBox from './ChatHistory/ChatHistoryBox';
+import ChatHistoryToolbar from './ChatHistory/ChatHistoryToolbar';
+import ScrollToEndButton from './ChatHistory/private/ScrollToEndButton';
+import ActivityTree from './Transcript/ActivityTree';
+import LiveRegionTranscript from './Transcript/LiveRegionTranscript';
+import { type ActivityElementMap } from './Transcript/types';
 import FocusRedirector from './Utils/FocusRedirector';
 import inputtableKey from './Utils/TypeFocusSink/inputtableKey';
-import isZeroOrPositive from './Utils/isZeroOrPositive';
-import KeyboardHelp from './Transcript/KeyboardHelp';
-import LiveRegionTranscript from './Transcript/LiveRegionTranscript';
-// TODO: [P2] #4133 Rename to "getTabbableElements".
-import tabbableElements from './Utils/tabbableElements';
-import TranscriptFocusComposer from './providers/TranscriptFocus/TranscriptFocusComposer';
-import useActiveDescendantId from './providers/TranscriptFocus/useActiveDescendantId';
-import useActivityTreeWithRenderer from './providers/ActivityTree/useActivityTreeWithRenderer';
+import { android } from './Utils/detectBrowser';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useDispatchScrollPosition from './hooks/internal/useDispatchScrollPosition';
 import useDispatchTranscriptFocusByActivityKey from './hooks/internal/useDispatchTranscriptFocusByActivityKey';
-import useFocus from './hooks/useFocus';
-import useFocusByActivityKey from './providers/TranscriptFocus/useFocusByActivityKey';
-import useFocusedActivityKey from './providers/TranscriptFocus/useFocusedActivityKey';
-import useFocusedExplicitly from './providers/TranscriptFocus/useFocusedExplicitly';
-import useFocusRelativeActivity from './providers/TranscriptFocus/useFocusRelativeActivity';
+import useNonce from './hooks/internal/useNonce';
 import useObserveFocusVisible from './hooks/internal/useObserveFocusVisible';
 import usePrevious from './hooks/internal/usePrevious';
 import useRegisterFocusTranscript from './hooks/internal/useRegisterFocusTranscript';
 import useRegisterScrollTo from './hooks/internal/useRegisterScrollTo';
 import useRegisterScrollToEnd from './hooks/internal/useRegisterScrollToEnd';
-import useStyleSet from './hooks/useStyleSet';
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 import useUniqueId from './hooks/internal/useUniqueId';
 import useValueRef from './hooks/internal/useValueRef';
-import TranscriptActivity from './TranscriptActivity';
-import useMemoized from './hooks/internal/useMemoized';
 import {
   useRegisterScrollRelativeTranscript,
   type TranscriptScrollRelativeOptions
 } from './hooks/transcriptScrollRelative';
+import useFocus from './hooks/useFocus';
+import useStyleSet from './hooks/useStyleSet';
+import ChatHistoryDOMComposer from './providers/ChatHistoryDOM/ChatHistoryDOMComposer';
+import useActivityElementMapRef from './providers/ChatHistoryDOM/useActivityElementRef';
+import GroupedRenderingActivitiesComposer from './providers/GroupedRenderingActivities/GroupedRenderingActivitiesComposer';
+import useNumRenderingActivities from './providers/GroupedRenderingActivities/useNumRenderingActivities';
+import RenderingActivitiesComposer from './providers/RenderingActivities/RenderingActivitiesComposer';
+import TranscriptFocusComposer from './providers/TranscriptFocus/TranscriptFocusComposer';
+import useActiveDescendantId from './providers/TranscriptFocus/useActiveDescendantId';
+import useFocusByActivityKey from './providers/TranscriptFocus/useFocusByActivityKey';
+import useFocusRelativeActivity from './providers/TranscriptFocus/useFocusRelativeActivity';
+import useFocusedActivityKey from './providers/TranscriptFocus/useFocusedActivityKey';
+import useFocusedExplicitly from './providers/TranscriptFocus/useFocusedExplicitly';
 
 const {
   useActivityKeys,
-  useActivityKeysByRead,
-  useCreateAvatarRenderer,
-  useCreateScrollToEndButtonRenderer,
   useDirection,
   useGetActivityByKey,
-  useGetKeyByActivity,
   useGetKeyByActivityId,
   useLastAcknowledgedActivityKey,
   useLocalizer,
@@ -99,36 +106,31 @@ type ScrollBehavior = 'auto' | 'smooth';
 type ScrollToOptions = { behavior?: ScrollBehavior };
 type ScrollToPosition = { activityID?: string; scrollTop?: number };
 
-type InternalTranscriptProps = {
-  activityElementMapRef: MutableRefObject<ActivityElementMap>;
+type InternalTranscriptProps = Readonly<{
   className?: string;
-};
+  terminatorRef: React.MutableRefObject<HTMLDivElement>;
+}>;
 
 // TODO: [P1] #4133 Add telemetry for computing how many re-render done so far.
 const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
-  ({ activityElementMapRef, className }, ref) => {
+  ({ className, terminatorRef }: InternalTranscriptProps, ref) => {
     const [{ basicTranscript: basicTranscriptStyleSet }] = useStyleSet();
-    const [{ bubbleFromUserNubOffset, bubbleNubOffset, groupTimestamp, showAvatarInGroup }] = useStyleOptions();
     const [activeDescendantId] = useActiveDescendantId();
-    const [activityWithRendererTree] = useActivityTreeWithRenderer();
     const [direction] = useDirection();
     const [focusedActivityKey] = useFocusedActivityKey();
     const [focusedExplicitly] = useFocusedExplicitly();
-    const createAvatarRenderer = useCreateAvatarRenderer();
+    const activityElementMapRef = useActivityElementMapRef();
     const focus = useFocus();
     const focusByActivityKey = useFocusByActivityKey();
     const focusRelativeActivity = useFocusRelativeActivity();
     const getActivityByKey = useGetActivityByKey();
-    const getKeyByActivity = useGetKeyByActivity();
     const getKeyByActivityId = useGetKeyByActivityId();
     const localize = useLocalizer();
     const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
     const rootElementRef = useRef<HTMLDivElement>();
     const terminatorLabelId = useUniqueId('webchat__basic-transcript__terminator-label');
-    const terminatorRef = useRef<HTMLDivElement>();
 
     const focusedActivityKeyRef = useValueRef(focusedActivityKey);
-    const hideAllTimestamps = groupTimestamp === false;
     const terminatorText = localize('TRANSCRIPT_TERMINATOR_TEXT');
     const transcriptAriaLabel = localize('TRANSCRIPT_ARIA_LABEL_ALT');
 
@@ -145,84 +147,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
       [ref, rootElementRef]
     );
 
-    const createAvatarRendererMemoized = useMemoized(
-      (activity: WebChatActivity) => createAvatarRenderer({ activity }),
-      [createAvatarRenderer]
-    );
-
-    // Flatten the tree back into an array with information related to rendering.
-    const renderingElements = useMemo(() => {
-      const renderingElements: ReactNode[] = [];
-      const topSideBotNub = isZeroOrPositive(bubbleNubOffset);
-      const topSideUserNub = isZeroOrPositive(bubbleFromUserNubOffset);
-
-      activityWithRendererTree.forEach(entriesWithSameSender => {
-        const [[{ activity: firstActivity }]] = entriesWithSameSender;
-        const renderAvatar = createAvatarRendererMemoized(firstActivity);
-
-        entriesWithSameSender.forEach((entriesWithSameSenderAndStatus, indexWithinSenderGroup) => {
-          const firstInSenderGroup = !indexWithinSenderGroup;
-          const lastInSenderGroup = indexWithinSenderGroup === entriesWithSameSender.length - 1;
-
-          entriesWithSameSenderAndStatus.forEach(({ activity, renderActivity }, indexWithinSenderAndStatusGroup) => {
-            // We only show the timestamp at the end of the sender group. But we always show the "Send failed, retry" prompt.
-            const firstInSenderAndStatusGroup = !indexWithinSenderAndStatusGroup;
-            const key: string = getKeyByActivity(activity);
-            const lastInSenderAndStatusGroup =
-              indexWithinSenderAndStatusGroup === entriesWithSameSenderAndStatus.length - 1;
-            const topSideNub = activity.from?.role === 'user' ? topSideUserNub : topSideBotNub;
-
-            let showCallout: boolean;
-
-            // Depending on the "showAvatarInGroup" setting, the avatar will render in different positions.
-            if (showAvatarInGroup === 'sender') {
-              if (topSideNub) {
-                showCallout = firstInSenderGroup && firstInSenderAndStatusGroup;
-              } else {
-                showCallout = lastInSenderGroup && lastInSenderAndStatusGroup;
-              }
-            } else if (showAvatarInGroup === 'status') {
-              if (topSideNub) {
-                showCallout = firstInSenderAndStatusGroup;
-              } else {
-                showCallout = lastInSenderAndStatusGroup;
-              }
-            } else {
-              showCallout = true;
-            }
-
-            renderingElements.push(
-              <TranscriptActivity
-                activity={activity}
-                activityElementMapRef={activityElementMapRef}
-                // "hideTimestamp" is a render-time parameter for renderActivityStatus().
-                // If true, it will hide the timestamp, but it will continue to show the
-                // retry prompt. And show the screen reader version of the timestamp.
-                activityKey={key}
-                hideTimestamp={
-                  hideAllTimestamps || indexWithinSenderAndStatusGroup !== entriesWithSameSenderAndStatus.length - 1
-                }
-                key={key}
-                renderActivity={renderActivity}
-                renderAvatar={renderAvatar}
-                showCallout={showCallout}
-              />
-            );
-          });
-        });
-      });
-
-      return renderingElements;
-    }, [
-      activityElementMapRef,
-      activityWithRendererTree,
-      bubbleFromUserNubOffset,
-      bubbleNubOffset,
-      createAvatarRendererMemoized,
-      getKeyByActivity,
-      hideAllTimestamps,
-      showAvatarInGroup
-    ]);
+    const [numRenderingActivities] = useNumRenderingActivities();
 
     const scrollToBottomScrollTo: (scrollTop: number, options?: ScrollToOptions) => void = useScrollTo();
     const scrollToBottomScrollToEnd: (options?: ScrollToOptions) => void = useScrollToEnd();
@@ -409,11 +334,15 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
             // This is capturing plain ENTER.
             // When screen reader is not running, or screen reader is running outside of scan mode, the ENTER key will be captured here.
             if (!fromEndOfTranscriptIndicator) {
-              const body: HTMLElement = activityElementMapRef.current
+              const activityFocusTrapTarget: HTMLElement = activityElementMapRef.current
                 .get(focusedActivityKeyRef.current)
-                ?.querySelector('.webchat__basic-transcript__activity-body');
-
-              tabbableElements(body)[0]?.focus();
+                ?.querySelector('.webchat__basic-transcript__activity-focus-target');
+              // TODO: review focus approach:
+              // It is not clear how to handle focus without introducing something like context.
+              // Ideally we would want a way to interact with focus outside of React
+              // so it doesn't cause transcript re-renders while still having an ability
+              // to scope activity-related handlers and data in a single place.
+              activityFocusTrapTarget?.focus();
             }
 
             break;
@@ -459,7 +388,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
           focus('sendBox');
         }
       },
-      [focus]
+      [focus, terminatorRef]
     );
 
     useRegisterFocusTranscript(useCallback(() => focusByActivityKey(undefined), [focusByActivityKey]));
@@ -494,6 +423,8 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
       useCallback(() => focusByActivityKey(undefined), [focusByActivityKey])
     );
 
+    const hasAnyChild = !!numRenderingActivities;
+
     return (
       <div
         // Although Android TalkBack 12.1 does not support `aria-activedescendant`, when used, it become buggy and will narrate content twice.
@@ -520,12 +451,11 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
         tabIndex={0}
       >
         <LiveRegionTranscript activityElementMapRef={activityElementMapRef} />
-        {/* TODO: [P2] Fix ESLint error `no-use-before-define` */}
-        {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
-        <InternalTranscriptScrollable onFocusFiller={handleFocusFiller} terminatorRef={terminatorRef}>
-          {renderingElements}
+        {hasAnyChild && <FocusRedirector redirectRef={terminatorRef} />}
+        <InternalTranscriptScrollable onFocusFiller={handleFocusFiller}>
+          {hasAnyChild && <ActivityTree />}
         </InternalTranscriptScrollable>
-        {!!renderingElements.length && (
+        {hasAnyChild && (
           <Fragment>
             <FocusRedirector redirectRef={rootElementRef} />
             <div
@@ -551,73 +481,25 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
   }
 );
 
-InternalTranscript.defaultProps = {
-  className: ''
-};
-
 InternalTranscript.displayName = 'InternalTranscript';
 
-InternalTranscript.propTypes = {
-  // PropTypes cannot validate precisely with its TypeScript counterpart.
-  // @ts-ignore
-  activityElementMapRef: PropTypes.shape({
-    current: PropTypes.instanceOf(Map)
-  }).isRequired,
-  className: PropTypes.string
-};
-
-type InternalTranscriptScrollableProps = {
+type InternalTranscriptScrollableProps = Readonly<{
   children?: ReactNode;
   onFocusFiller: () => void;
-  terminatorRef: MutableRefObject<HTMLDivElement>;
-};
+}>;
 
 // Separating high-frequency hooks to improve performance.
-const InternalTranscriptScrollable: FC<InternalTranscriptScrollableProps> = ({
-  children,
-  onFocusFiller,
-  terminatorRef
-}) => {
+const InternalTranscriptScrollable = ({ children, onFocusFiller }: InternalTranscriptScrollableProps) => {
   const [{ activities: activitiesStyleSet }] = useStyleSet();
-  const [animatingToEnd]: [boolean] = useAnimatingToEnd();
-  const [atEnd]: [boolean] = useAtEnd();
-  const [, unreadActivityKeys] = useActivityKeysByRead();
   const [sticky]: [boolean] = useSticky();
-  const [styleOptions] = useStyleOptions();
-  const focusByActivityKey = useFocusByActivityKey();
   const localize = useLocalizer();
-  const markActivityKeyAsRead = useMarkActivityKeyAsRead();
   const markAllAsAcknowledged = useMarkAllAsAcknowledged();
-  const scrollToEnd: (options?: ScrollToOptions) => void = useScrollToEnd();
 
   const prevSticky = usePrevious(sticky);
   const transcriptRoleDescription = localize('TRANSCRIPT_ARIA_ROLE_ALT');
 
   const stickyChangedToTrue = prevSticky !== sticky && sticky;
 
-  // Acknowledged means either:
-  // 1. The user sent a message
-  //    - We don't need a condition here. When Web Chat sends the user's message, it will scroll to bottom, and it will trigger condition 2 below.
-  // 2. The user scroll to the bottom of the transcript, from a non-bottom scroll position
-  //    - If the transcript is already at the bottom, the user needs to scroll up and then go back down
-  //    - What happens if we are relaxing "scrolled from a non-bottom scroll position":
-  //      1. The condition will become solely "at the bottom of the transcript"
-  //      2. Auto-scroll will always scroll the transcript to the bottom
-  //      3. Web Chat will always acknowledge all activities as it is at the bottom
-  //      4. Acknowledge flag become useless
-  //      5. Therefore, even the developer set "pause after 3 activities", if activities are coming in at a slow pace (not batched in a single render)
-  //         Web Chat will keep scrolling and not snapped/paused
-
-  // Note: When Web Chat is loaded, there are no activities acknowledged. We need to assume all arriving activities are acknowledged until end-user sends their first activity.
-  //       Activities loaded initially could be from conversation history. Without assuming acknowledgement, Web Chat will not scroll initially (as everything is not acknowledged).
-  //       It would be better if the chat adapter should let Web Chat know if the activity is loaded from history or not.
-
-  // TODO: [P2] #3670 Move the "conversation history acknowledgement" logic mentioned above to polyfill of chat adapters.
-  //       1. Chat adapter should send "acknowledged" as part of "channelData"
-  //       2. If "acknowledged" is "undefined", we set it to:
-  //          a. true, if there are no egress activities yet
-  //          b. Otherwise, false
-
   useMemo(
     () =>
       stickyChangedToTrue &&
@@ -628,71 +510,12 @@ const InternalTranscriptScrollable: FC<InternalTranscriptScrollableProps> = ({
     [markAllAsAcknowledged, stickyChangedToTrue]
   );
 
-  const [flattenedActivityTreeWithRenderer] = useActivityTreeWithRenderer({ flat: true });
-  const getKeyByActivity = useGetKeyByActivity();
-
-  const renderingActivityKeys: string[] = useMemo<string[]>(
-    () => flattenedActivityTreeWithRenderer.map(({ activity }) => getKeyByActivity(activity)),
-    [flattenedActivityTreeWithRenderer, getKeyByActivity]
-  );
-
-  const renderingActivityKeysRef = useValueRef(renderingActivityKeys);
-
-  // To prevent flashy button, we are not waiting for another render loop to update the `[readActivityKeys, unreadActivityKeys]` state.
-  // Instead, we are building the next one in this `useMemo` call.
-  const nextUnreadActivityKeys = useMemo(() => {
-    // This code need to be careful reviewed as it will cause another render. The code should be converging.
-    // After we call `markActivityKeyAsRead`, everything will be read and nothing will be unread.
-    // That means, in next render, `unreadActivityKeys` will be emptied and the `markActivityKeyAsRead` will not get called again.
-    if (sticky && unreadActivityKeys.length) {
-      markActivityKeyAsRead(unreadActivityKeys[unreadActivityKeys.length - 1]);
-
-      return [];
-    }
-
-    return unreadActivityKeys;
-  }, [markActivityKeyAsRead, sticky, unreadActivityKeys]);
-
-  const nextUnreadActivityKeysRef = useValueRef(nextUnreadActivityKeys);
-
-  // If we are rendering anything that is unread, we should show the "New messages" button.
-  // Not everything in the `unreadActivityKeys` are rendered, say, bot typing indicator.
-  // We should not show the "New messages" button for bot typing indicator as it will confuse the user.
-  const unread = useMemo(
-    () => nextUnreadActivityKeys.some(key => renderingActivityKeys.includes(key)),
-    [renderingActivityKeys, nextUnreadActivityKeys]
-  );
-
-  const handleScrollToEndButtonClick = useCallback(() => {
-    scrollToEnd({ behavior: 'smooth' });
-
-    const { current: renderingActivityKeys } = renderingActivityKeysRef;
-
-    // After the "New message" button is clicked, focus on the first unread activity which will be rendered.
-    const firstUnreadRenderingActivityKey = nextUnreadActivityKeysRef.current.find(key =>
-      renderingActivityKeys.includes(key)
-    );
-
-    if (firstUnreadRenderingActivityKey) {
-      focusByActivityKey(firstUnreadRenderingActivityKey);
-    } else {
-      // If no unread activity, send the focus to the terminator block.
-      terminatorRef.current?.focus();
-    }
-  }, [focusByActivityKey, nextUnreadActivityKeysRef, renderingActivityKeysRef, scrollToEnd, terminatorRef]);
-
-  const renderScrollToEndButton = useCreateScrollToEndButtonRenderer()({
-    atEnd: animatingToEnd || atEnd || sticky,
-    styleOptions,
-    unread
-  });
-
-  const hasAnyChild = !!React.Children.count(children);
+  // We need to check if `children` is `false` or not.
+  // If `children` is `false`, React.Children.count(children) will still return 1 (truthy).
+  const hasAnyChild = !!children && !!React.Children.count(children);
 
   return (
     <React.Fragment>
-      {renderScrollToEndButton && renderScrollToEndButton({ onClick: handleScrollToEndButtonClick })}
-      {hasAnyChild && <FocusRedirector redirectRef={terminatorRef} />}
       <ReactScrollToBottomPanel className="webchat__basic-transcript__scrollable">
         <div aria-hidden={true} className="webchat__basic-transcript__filler" onFocus={onFocusFiller} />
         {hasAnyChild && (
@@ -710,12 +533,6 @@ const InternalTranscriptScrollable: FC<InternalTranscriptScrollableProps> = ({
   );
 };
 
-InternalTranscriptScrollable.propTypes = {
-  children: PropTypes.any.isRequired,
-  onFocusFiller: PropTypes.func.isRequired,
-  terminatorRef: PropTypes.any.isRequired
-};
-
 type Scroller = ({ offsetHeight, scrollTop }: { offsetHeight: number; scrollTop: number }) => number;
 
 // "scroller" is the auto-scroll limiter, a.k.a. auto scroll snap.
@@ -834,32 +651,37 @@ const useScroller = (activityElementMapRef: MutableRefObject<ActivityElementMap>
   );
 };
 
-type BasicTranscriptProps = {
-  className?: string;
-};
+type BasicTranscriptProps = Readonly<{
+  className: string;
+}>;
 
-const BasicTranscript: FC<BasicTranscriptProps> = ({ className }) => {
-  const activityElementMapRef = useRef<ActivityElementMap>(new Map());
+const BasicTranscript = ({ className = '' }: BasicTranscriptProps) => {
+  const [{ stylesRoot }] = useStyleOptions();
+  const [nonce] = useNonce();
+  const activityElementMapRef = useActivityElementMapRef();
   const containerRef = useRef<HTMLDivElement>();
+  const terminatorRef = useRef<HTMLDivElement>();
 
   const scroller = useScroller(activityElementMapRef);
+  const styleOptions = useMemo(() => ({ stylesRoot }), [stylesRoot]);
 
   return (
-    <TranscriptFocusComposer containerRef={containerRef}>
-      <ReactScrollToBottomComposer scroller={scroller}>
-        <KeyboardHelp />
-        <InternalTranscript activityElementMapRef={activityElementMapRef} className={className} ref={containerRef} />
-      </ReactScrollToBottomComposer>
-    </TranscriptFocusComposer>
+    <ChatHistoryBox className={className}>
+      <RenderingActivitiesComposer>
+        <TranscriptFocusComposer containerRef={containerRef}>
+          <ReactScrollToBottomComposer nonce={nonce} scroller={scroller} styleOptions={styleOptions}>
+            <ChatHistoryToolbar>
+              <ScrollToEndButton terminatorRef={terminatorRef} />
+            </ChatHistoryToolbar>
+            <GroupedRenderingActivitiesComposer>
+              <InternalTranscript ref={containerRef} terminatorRef={terminatorRef} />
+            </GroupedRenderingActivitiesComposer>
+          </ReactScrollToBottomComposer>
+        </TranscriptFocusComposer>
+      </RenderingActivitiesComposer>
+    </ChatHistoryBox>
   );
 };
 
-BasicTranscript.defaultProps = {
-  className: ''
-};
-
-BasicTranscript.propTypes = {
-  className: PropTypes.string
-};
-
-export default memo(BasicTranscript);
+export default wrapWith(ChatHistoryDOMComposer)(memo(BasicTranscript));
+export { type BasicTranscriptProps };

package/src/BasicWebChat.tsx

@@ -2,16 +2,17 @@
 /* eslint react/no-unsafe: off */
 
 import { SendBoxMiddlewareProxy, hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { fallback, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
 
 import BasicConnectivityStatus from './BasicConnectivityStatus';
 import BasicToaster from './BasicToaster';
 import BasicTranscript from './BasicTranscript';
-import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
-import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from './hooks/internal/styleToEmotionObject';
 import useStyleSet from './hooks/useStyleSet';
+import AccessKeySinkSurface from './Utils/AccessKeySink/Surface';
 
 const { useStyleOptions } = hooks;
 
@@ -33,18 +34,31 @@ const TOASTER_STYLE = {
 };
 
 const TRANSCRIPT_STYLE = {
-  flex: 1
+  '.webchat__basic-transcript': {
+    flex: 1
+  }
 };
 
-// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
-const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
+const basicWebChatPropsSchema = pipe(
+  object({
+    className: optional(string()),
+    role: fallback(
+      optional(
+        // Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
+        union([literal('complementary'), literal('contentinfo'), literal('form'), literal('main'), literal('region')])
+      ),
+      // Fallback to "complementary" if specified is not a valid landmark role.
+      'complementary'
+    )
+  }),
+  readonly()
+);
+
+type BasicWebChatProps = InferInput<typeof basicWebChatPropsSchema>;
+
+function BasicWebChat(props: BasicWebChatProps) {
+  const { className, role } = validateProps(basicWebChatPropsSchema, props, 'strict');
 
-type BasicWebChatProps = {
-  className?: string;
-  role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
-};
-
-const BasicWebChat: FC<BasicWebChatProps> = ({ className, role }) => {
   const [{ root: rootStyleSet }] = useStyleSet();
   const [options] = useStyleOptions();
   const styleToEmotionObject = useStyleToEmotionObject();
@@ -55,33 +69,18 @@ const BasicWebChat: FC<BasicWebChatProps> = ({ className, role }) => {
   const toasterClassName = styleToEmotionObject(TOASTER_STYLE) + '';
   const transcriptClassName = styleToEmotionObject(TRANSCRIPT_STYLE) + '';
 
-  // Fallback to "complementary" if specified is not a valid landmark role.
-  if (!ARIA_LANDMARK_ROLES.includes(role)) {
-    role = 'complementary';
-  }
-
   return (
-    <AccessKeySinkSurface className={classNames(rootClassName, rootStyleSet + '', (className || '') + '')} role={role}>
+    <AccessKeySinkSurface
+      className={classNames('webchat__surface', rootClassName, rootStyleSet + '', className)}
+      role={role}
+    >
       {!options.hideToaster && <BasicToaster className={toasterClassName} />}
       <BasicTranscript className={transcriptClassName} />
       <BasicConnectivityStatus className={connectivityStatusClassName} />
       <SendBoxMiddlewareProxy className={sendBoxClassName} request={undefined} />
     </AccessKeySinkSurface>
   );
-};
-
-BasicWebChat.defaultProps = {
-  className: '',
-  role: 'complementary'
-};
-
-BasicWebChat.propTypes = {
-  className: PropTypes.string,
-  // Ignoring deficiencies with TypeScript/PropTypes inference.
-  // @ts-ignore
-  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES)
-};
-
-export default BasicWebChat;
+}
 
-export type { BasicWebChatProps };
+export default memo(BasicWebChat);
+export { basicWebChatPropsSchema, type BasicWebChatProps };

package/src/BuiltInDecorator.tsx

@@ -0,0 +1,17 @@
+import { LowPriorityDecoratorComposer } from 'botframework-webchat-api/internal';
+import React, { memo, type ReactNode } from 'react';
+
+import createDefaultActivityGroupingDecoratorMiddleware from './Middleware/ActivityGrouping/createDefaultActivityGroupingDecoratorMiddleware';
+
+const middleware = Object.freeze([...createDefaultActivityGroupingDecoratorMiddleware()] as const);
+
+type BuiltInDecoratorProps = Readonly<{
+  readonly children?: ReactNode | undefined;
+}>;
+
+function BuiltInDecorator({ children }: BuiltInDecoratorProps) {
+  return <LowPriorityDecoratorComposer middleware={middleware}>{children}</LowPriorityDecoratorComposer>;
+}
+
+export default memo(BuiltInDecorator);
+export { type BuiltInDecoratorProps };

package/src/ChatHistory/ChatHistoryBox.tsx

@@ -0,0 +1,28 @@
+import { validateProps } from 'botframework-webchat-api/internal';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import { useStyleSet } from '../hooks';
+import reactNode from '../types/internal/reactNode';
+
+const chatHistoryBoxPropsSchema = pipe(
+  object({
+    children: optional(reactNode()),
+    className: optional(string())
+  }),
+  readonly()
+);
+
+type ChatHistoryBoxProps = InferInput<typeof chatHistoryBoxPropsSchema>;
+
+function ChatHistoryBox(props: ChatHistoryBoxProps) {
+  const { children, className } = validateProps(chatHistoryBoxPropsSchema, props);
+
+  const [{ chatHistoryBox }] = useStyleSet();
+
+  return <div className={classNames('webchat__chat-history-box', className, chatHistoryBox)}>{children}</div>;
+}
+
+export default memo(ChatHistoryBox);
+export { chatHistoryBoxPropsSchema, type ChatHistoryBoxProps };