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

package/src/BasicTranscript.tsx

@@ -1,62 +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, useCallback, useMemo, useRef } from 'react';
+import { wrapWith } from 'react-wrap-with';
 
-import type { ActivityComponentFactory } from 'botframework-webchat-api';
-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 ActivityRow from './Transcript/ActivityRow';
 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 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 useRegisterScrollRelative from './hooks/internal/useRegisterScrollRelative';
 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 {
+  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,
-  useCreateActivityStatusRenderer,
-  useCreateAvatarRenderer,
-  useCreateScrollToEndButtonRenderer,
   useDirection,
   useGetActivityByKey,
-  useGetKeyByActivity,
   useGetKeyByActivityId,
   useLastAcknowledgedActivityKey,
   useLocalizer,
@@ -92,52 +102,35 @@ const ROOT_STYLE = {
   }
 };
 
-type RenderingElement = {
-  activity: WebChatActivity;
-  callbackRef: (element: HTMLElement) => void;
-  hideTimestamp: boolean;
-  key: string;
-  renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
-  renderActivityStatus: (props: { hideTimestamp?: boolean }) => ReactNode;
-  renderAvatar: false | (() => Exclude<ReactNode, boolean | null | undefined>);
-  showCallout: boolean;
-};
-
 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 createActivityStatusRenderer = useCreateActivityStatusRenderer();
-    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');
 
@@ -154,88 +147,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
       [ref, rootElementRef]
     );
 
-    // Flatten the tree back into an array with information related to rendering.
-    const renderingElements = useMemo(() => {
-      const renderingElements: RenderingElement[] = [];
-      const topSideBotNub = isZeroOrPositive(bubbleNubOffset);
-      const topSideUserNub = isZeroOrPositive(bubbleFromUserNubOffset);
-
-      activityWithRendererTree.forEach(entriesWithSameSender => {
-        const [[{ activity: firstActivity }]] = entriesWithSameSender;
-        const renderAvatar = createAvatarRenderer({ activity: 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 renderActivityStatus = createActivityStatusRenderer({
-              activity,
-              nextVisibleActivity: undefined
-            });
-            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({
-              activity,
-
-              // After the element is mounted, set it to activityElementsRef.
-              callbackRef: activityElement => {
-                activityElement
-                  ? activityElementMapRef.current.set(key, activityElement)
-                  : activityElementMapRef.current.delete(key);
-              },
-
-              // "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.
-              hideTimestamp:
-                hideAllTimestamps || indexWithinSenderAndStatusGroup !== entriesWithSameSenderAndStatus.length - 1,
-              key,
-              renderActivity,
-              renderActivityStatus,
-              renderAvatar,
-              showCallout
-            });
-          });
-        });
-      });
-
-      return renderingElements;
-    }, [
-      activityElementMapRef,
-      activityWithRendererTree,
-      bubbleFromUserNubOffset,
-      bubbleNubOffset,
-      createActivityStatusRenderer,
-      createAvatarRenderer,
-      getKeyByActivity,
-      hideAllTimestamps,
-      showAvatarInGroup
-    ]);
+    const [numRenderingActivities] = useNumRenderingActivities();
 
     const scrollToBottomScrollTo: (scrollTop: number, options?: ScrollToOptions) => void = useScrollTo();
     const scrollToBottomScrollToEnd: (options?: ScrollToOptions) => void = useScrollToEnd();
@@ -290,7 +202,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     );
 
     const scrollRelative = useCallback(
-      (direction: 'down' | 'up', { displacement }: { displacement?: number } = {}) => {
+      ({ direction, displacement }: TranscriptScrollRelativeOptions) => {
         const { current: rootElement } = rootElementRef;
 
         if (!rootElement) {
@@ -322,7 +234,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
     // We call `useRegisterScrollXXX` to register a callback function, the `useScrollXXX` will multiplex the call into each instance of <BasicTranscript>.
     useRegisterScrollTo(scrollTo);
     useRegisterScrollToEnd(scrollToEnd);
-    useRegisterScrollRelative(scrollRelative);
+    useRegisterScrollRelativeTranscript(scrollRelative);
 
     const markActivityKeyAsRead = useMarkActivityKeyAsRead();
 
@@ -422,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;
@@ -472,7 +388,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
           focus('sendBox');
         }
       },
-      [focus]
+      [focus, terminatorRef]
     );
 
     useRegisterFocusTranscript(useCallback(() => focusByActivityKey(undefined), [focusByActivityKey]));
@@ -507,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.
@@ -533,32 +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.map(
-            ({
-              activity,
-              callbackRef,
-              hideTimestamp,
-              key,
-              renderActivity,
-              renderActivityStatus,
-              renderAvatar,
-              showCallout
-            }) => (
-              <ActivityRow activity={activity} key={key} ref={callbackRef}>
-                {renderActivity({
-                  hideTimestamp,
-                  renderActivityStatus,
-                  renderAvatar,
-                  showCallout
-                })}
-              </ActivityRow>
-            )
-          )}
+        {hasAnyChild && <FocusRedirector redirectRef={terminatorRef} />}
+        <InternalTranscriptScrollable onFocusFiller={handleFocusFiller}>
+          {hasAnyChild && <ActivityTree />}
         </InternalTranscriptScrollable>
-        {!!renderingElements.length && (
+        {hasAnyChild && (
           <Fragment>
             <FocusRedirector redirectRef={rootElementRef} />
             <div
@@ -584,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 &&
@@ -661,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 && (
@@ -743,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.
@@ -867,31 +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}>
-        <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 BasicTranscript;
+export default wrapWith(ChatHistoryDOMComposer)(memo(BasicTranscript));
+export { type BasicTranscriptProps };

package/src/BasicTypingIndicator.tsx

@@ -1,15 +1,24 @@
 import { hooks } from 'botframework-webchat-api';
-import React, { Fragment, VFC } from 'react';
+import React, { Fragment, useMemo } from 'react';
 
 const { useActiveTyping, useRenderTypingIndicator } = hooks;
 
-function useTypingIndicatorVisible(): [boolean] {
+function useTypingIndicatorVisible(): readonly [boolean] {
   const [activeTyping] = useActiveTyping();
 
-  return [!!Object.values(activeTyping).filter(({ role }) => role !== 'user').length];
+  return useMemo(
+    () =>
+      Object.freeze([
+        !!Object.values(activeTyping).some(
+          // Show typing indicator if anyone is typing and not livestreaming.
+          ({ role, type }) => role !== 'user' && type !== 'livestream'
+        )
+      ]),
+    [activeTyping]
+  );
 }
 
-const BasicTypingIndicator: VFC<{}> = () => {
+const BasicTypingIndicator = () => {
   const [activeTyping] = useActiveTyping();
   const [visible] = useTypingIndicatorVisible();
   const [typing] = useActiveTyping(Infinity);