botframework-webchat-component 4.18.1 → 4.19.0

package/src/Transcript/FocusTrap.tsx

@@ -1,24 +1,43 @@
-import PropTypes from 'prop-types';
-import React, { Fragment, memo, useCallback, useRef } from 'react';
+/* eslint-disable no-magic-numbers */
+import React, {
+  Fragment,
+  memo,
+  type FocusEvent,
+  type KeyboardEventHandler,
+  type ReactNode,
+  useCallback,
+  useRef
+} from 'react';
 
-import type { FC, KeyboardEventHandler, PropsWithChildren } from 'react';
-
-import FocusRedirector from '../Utils/FocusRedirector';
 import tabbableElements from '../Utils/tabbableElements';
 import { useRefFrom } from 'use-ref-from';
 
-type FocusTrapProps = PropsWithChildren<{
+const FocusTrap = ({
+  children,
+  onFocus,
+  onLeave,
+  targetClassName
+}: Readonly<{
+  children: ReactNode;
   onFocus: () => void;
   onLeave: () => void;
-}>;
-
-const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
+  targetClassName?: string | undefined;
+}>) => {
   const bodyRef = useRef<HTMLDivElement>();
-  const onLeaveRef = useRefFrom<() => void>(onLeave);
-
-  const getTabbableElementsInBody = useCallback(
-    () => tabbableElements(bodyRef.current).filter(element => element.getAttribute('aria-disabled') !== 'true'),
-    [bodyRef]
+  const lastFocused = useRef<HTMLElement>();
+  const onFocusRef = useRefFrom(onFocus);
+  const onLeaveRef = useRefFrom(onLeave);
+
+  const getTabbableElementsInBody = useCallback(() => {
+    const nestedTraps = Array.from(bodyRef.current?.querySelectorAll('.webchat__focus-trap'));
+    return tabbableElements(bodyRef.current)
+      .filter(element => element.getAttribute('aria-disabled') !== 'true')
+      .filter(element => !nestedTraps.some(trap => trap.contains(element)));
+  }, [bodyRef]);
+
+  const focusOrTriggerLeave = useCallback(
+    (element: HTMLElement | undefined) => (element ? element.focus() : onLeaveRef.current?.()),
+    [onLeaveRef]
   );
 
   const handleBodyKeyDown: KeyboardEventHandler = useCallback(
@@ -28,47 +47,86 @@ const FocusTrap: FC<FocusTrapProps> = ({ children, onFocus, onLeave }) => {
         event.stopPropagation();
 
         onLeaveRef.current?.();
+      } else if (event.key === 'Tab') {
+        const activeElement = document.activeElement as HTMLElement;
+        const focusables = getTabbableElementsInBody();
+        const focusedIndex = focusables.indexOf(activeElement);
+
+        if (event.shiftKey && focusedIndex === 0) {
+          event.preventDefault();
+
+          focusOrTriggerLeave(focusables.at(-1));
+        } else if (!event.shiftKey && focusedIndex === focusables.length - 1) {
+          event.preventDefault();
+
+          focusOrTriggerLeave(focusables.at(0));
+        }
       }
     },
-    [onLeaveRef]
+    [focusOrTriggerLeave, getTabbableElementsInBody, onLeaveRef]
   );
 
-  const handleFirstSentinelFocus: () => void = useCallback(() => {
-    const focusables = getTabbableElementsInBody();
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement, Element>) => {
+      onFocusRef.current?.();
+
+      lastFocused.current = event.target;
+    },
+    [lastFocused, onFocusRef]
+  );
+
+  const handleBlur = useCallback(
+    event => {
+      const { target } = event;
+      const focusables = getTabbableElementsInBody();
+
+      // When blurred element became non-focusable, move to the first focusable element if available.
+      // Otherwise trigger leave.
+      if (!focusables.includes(target)) {
+        event.preventDefault();
+        event.stopPropagation();
 
-    const lastTabbableElement = focusables[focusables.length - 1];
+        focusOrTriggerLeave(focusables.at(0));
+      } else if (bodyRef.current.contains(target)) {
+        event.stopPropagation();
+      }
+    },
+    [focusOrTriggerLeave, getTabbableElementsInBody]
+  );
 
-    lastTabbableElement ? lastTabbableElement.focus() : onLeaveRef.current?.();
-  }, [getTabbableElementsInBody, onLeaveRef]);
+  const handleTrapFocus = useCallback(
+    event => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.target.blur();
 
-  const handleLastSentinelFocus: () => void = useCallback(() => {
-    const [firstTabbableElement] = getTabbableElementsInBody();
+      const focusables = getTabbableElementsInBody();
 
-    firstTabbableElement ? firstTabbableElement.focus() : onLeaveRef.current?.();
-  }, [getTabbableElementsInBody, onLeaveRef]);
+      if (lastFocused.current && focusables.includes(lastFocused.current)) {
+        lastFocused.current.focus();
+      } else {
+        focusOrTriggerLeave(focusables.at(0));
+      }
+    },
+    [focusOrTriggerLeave, getTabbableElementsInBody]
+  );
 
   return (
     <Fragment>
-      <FocusRedirector onFocus={handleFirstSentinelFocus} />
-      <div onFocus={onFocus} onKeyDown={handleBodyKeyDown} ref={bodyRef}>
+      <div
+        className="webchat__focus-trap"
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onKeyDown={handleBodyKeyDown}
+        ref={bodyRef}
+      >
         {children}
       </div>
-      <FocusRedirector onFocus={handleLastSentinelFocus} />
+      <div aria-hidden="true" className={targetClassName} onFocus={handleTrapFocus} tabIndex={-1} />
     </Fragment>
   );
 };
 
-FocusTrap.defaultProps = {
-  children: undefined,
-  onFocus: undefined
-};
-
-FocusTrap.propTypes = {
-  children: PropTypes.any,
-  onFocus: PropTypes.func,
-  onLeave: PropTypes.func.isRequired
-};
-
 FocusTrap.displayName = 'FocusTrap';
 
 export default memo(FocusTrap);

package/src/Transcript/LiveRegion/SendFailed.tsx

@@ -1,11 +1,10 @@
 import { hooks } from 'botframework-webchat-api';
-import { useEffect, useMemo } from 'react';
-import type { VFC } from 'react';
+import { memo, useMemo } from 'react';
 
+import usePrevious from '../../hooks/internal/usePrevious';
+import { useLiveRegion } from '../../providers/LiveRegionTwin';
 import { SEND_FAILED } from '../../types/internal/SendStatus';
 import isPresentational from './isPresentational';
-import usePrevious from '../../hooks/internal/usePrevious';
-import useQueueStaticElement from '../../providers/LiveRegionTwin/useQueueStaticElement';
 
 const { useGetActivityByKey, useLocalizer, useSendStatusByActivityKey } = hooks;
 
@@ -19,11 +18,10 @@ const { useGetActivityByKey, useLocalizer, useSendStatusByActivityKey } = hooks;
  *
  * Thus, we need to use a live region "footnote" to indicate the message was failed to send.
  */
-const LiveRegionSendFailed: VFC<{}> = () => {
+const LiveRegionSendFailed = () => {
   const [sendStatusByActivityKey] = useSendStatusByActivityKey();
   const getActivityByKey = useGetActivityByKey();
   const localize = useLocalizer();
-  const queueStaticElement = useQueueStaticElement();
 
   /**
    * List of keys of outgoing and non-presentational activities that are failed to send.
@@ -63,11 +61,11 @@ const LiveRegionSendFailed: VFC<{}> = () => {
     return false;
   }, [activityKeysOfSendFailed, prevActivityKeysOfSendFailed]);
 
-  useEffect(() => {
-    hasNewSendFailed && queueStaticElement(liveRegionSendFailedAlt);
-  }, [hasNewSendFailed, liveRegionSendFailedAlt, queueStaticElement]);
+  useLiveRegion(() => hasNewSendFailed && liveRegionSendFailedAlt, [hasNewSendFailed, liveRegionSendFailedAlt]);
 
   return null;
 };
 
-export default LiveRegionSendFailed;
+LiveRegionSendFailed.displayName = 'LiveRegionSendFailed';
+
+export default memo(LiveRegionSendFailed);

package/src/Transcript/LiveRegionTranscript.tsx

@@ -1,47 +1,28 @@
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { useEffect, useMemo, useRef } from 'react';
-import type { FC, RefObject, VFC } from 'react';
 import type { WebChatActivity } from 'botframework-webchat-core';
+import type { RefObject } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 
-import isPresentational from './LiveRegion/isPresentational';
 import LiveRegionActivity from '../LiveRegion/LiveRegionActivity';
-import LiveRegionSendFailed from './LiveRegion/SendFailed';
-import LiveRegionTwinComposer from '../providers/LiveRegionTwin/LiveRegionTwinComposer';
 import tabbableElements from '../Utils/tabbableElements';
 import useLocalizeAccessKey from '../hooks/internal/useLocalizeAccessKey';
-import useQueueStaticElement from '../providers/LiveRegionTwin/useQueueStaticElement';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
+import { useQueueStaticElement } from '../providers/LiveRegionTwin';
+import LiveRegionSendFailed from './LiveRegion/SendFailed';
+import isPresentational from './LiveRegion/isPresentational';
 import useTypistNames from './useTypistNames';
 
 import type { ActivityElementMap } from './types';
 
-const { useActivities, useGetKeyByActivity, useLocalizer, useStyleOptions } = hooks;
-
-const ROOT_STYLE = {
-  '&.webchat__live-region-transcript': {
-    '& .webchat__live-region-transcript__note, & .webchat__live-region-transcript__note, & .webchat__live-region-transcript__text-element':
-      {
-        color: 'transparent',
-        height: 1,
-        overflow: 'hidden',
-        position: 'absolute',
-        top: 0,
-        whiteSpace: 'nowrap',
-        width: 1
-      }
-  }
-};
+const { useActivities, useGetKeyByActivity, useLocalizer } = hooks;
 
 type RenderingActivities = Map<string, WebChatActivity>;
 
-type LiveRegionTranscriptCoreProps = Readonly<{
+type LiveRegionTranscriptProps = Readonly<{
   activityElementMapRef: RefObject<ActivityElementMap>;
 }>;
 
-const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityElementMapRef }) => {
+const LiveRegionTranscript = ({ activityElementMapRef }: LiveRegionTranscriptProps) => {
   // We are looking for all activities instead of just those will be rendered.
   // This is because some activities that chosen not be rendered in the chat history,
   // we might still need to be read by screen reader. Such as, suggested actions without text content.
@@ -147,43 +128,11 @@ const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityE
     keyedActivities
   ]);
 
-  useEffect(() => {
-    typingIndicator && queueStaticElement(typingIndicator);
-  }, [queueStaticElement, typingIndicator]);
+  useMemo(() => typingIndicator && queueStaticElement(typingIndicator), [queueStaticElement, typingIndicator]);
 
   return <LiveRegionSendFailed />;
 };
 
-type LiveRegionTranscriptProps = {
-  activityElementMapRef: RefObject<ActivityElementMap>;
-};
-
-const LiveRegionTranscript: VFC<LiveRegionTranscriptProps> = ({ activityElementMapRef }) => {
-  const [{ internalLiveRegionFadeAfter }] = useStyleOptions();
-  const localize = useLocalizer();
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  const transcriptRoleDescription = localize('TRANSCRIPT_ARIA_ROLE_ALT');
-
-  return (
-    <LiveRegionTwinComposer
-      aria-roledescription={transcriptRoleDescription}
-      className={classNames('webchat__live-region-transcript', rootClassName)}
-      fadeAfter={internalLiveRegionFadeAfter}
-      role="log"
-      textElementClassName="webchat__live-region-transcript__text-element"
-    >
-      <LiveRegionTranscriptCore activityElementMapRef={activityElementMapRef} />
-    </LiveRegionTwinComposer>
-  );
-};
-
-LiveRegionTranscript.propTypes = {
-  // PropTypes cannot be fully expressed in TypeScript.
-  // @ts-ignore
-  activityElementMapRef: PropTypes.shape({
-    current: PropTypes.instanceOf(Map)
-  }).isRequired
-};
+LiveRegionTranscript.displayName = 'LiveRegionTranscript';
 
-export default LiveRegionTranscript;
+export default memo(LiveRegionTranscript);

package/src/Transcript/TranscriptFocus/TranscriptActivityList.tsx

@@ -0,0 +1,22 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, memo, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptActivityListProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptActivityList = forwardRef<HTMLDivElement, TranscriptActivityListProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <section {...props} className={cx(classNames['transcript-focus-area__activity-list'], className)} ref={ref} />
+    );
+  }
+);
+
+TranscriptActivityList.displayName = 'TranscriptActivityList';
+
+export default memo(TranscriptActivityList);
+export { type TranscriptActivityListProps };

package/src/Transcript/TranscriptFocus/TranscriptFocus.module.css

@@ -0,0 +1,117 @@
+/* Focus area container */
+
+:global(.webchat) .transcript-focus-area {
+  display: grid;
+  grid-template-areas: 'content';
+  outline: 0;
+
+  --webchat__transcript--spacing: 10px;
+
+  .transcript-focus-area__indicator,
+  .transcript-focus-area__transcript-indicator {
+    box-sizing: border-box;
+    font-size: 0;
+    grid-area: content;
+    isolation: isolate;
+    min-height: 0;
+    pointer-events: none;
+  }
+
+  .transcript-focus-area__root,
+  .transcript-focus-area__content-root {
+    grid-area: content;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &:focus
+    .transcript-focus-area__content--focused
+    > .transcript-focus-area__content-overlay
+    .transcript-focus-area__indicator {
+    border-color: var(--webchat__color--transcript-activity-visual-keyboard-indicator);
+    border-style: var(--webchat__border-style--transcript-activity-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-activity-visual-keyboard-indicator);
+    inset: calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2)
+      calc(var(--webchat__transcript--spacing) / -2) calc(var(--webchat__transcript--spacing) / 2);
+    position: absolute;
+  }
+
+  &:focus-visible .transcript-focus-area__transcript-indicator,
+  .transcript-focus-area__root:has(.transcript-focus-area__terminator:focus-visible)
+    + .transcript-focus-area__transcript-indicator {
+    border-color: var(--webchat__border-color--transcript-visual-keyboard-indicator);
+    border-style: var(--webchat__border-style--transcript-visual-keyboard-indicator);
+    border-width: var(--webchat__border-width--transcript-visual-keyboard-indicator);
+  }
+
+  .transcript-focus-area__activity-list {
+    display: grid;
+    gap: var(--webchat__transcript--spacing);
+    padding-block: var(--webchat__transcript--spacing);
+  }
+
+  .transcript-focus-area__content {
+    display: grid;
+    grid-template-areas: 'content';
+    min-height: 0;
+    min-width: 0;
+
+    > * {
+      grid-area: content;
+      min-width: 0;
+    }
+  }
+
+  /*
+    TODO: see if we can remove the wrapper along with absolute/relative positioning by:
+    - Using intersection observer to observe a given activity is in the view
+    - Supplying the edge we'd like the focus indicator to align with
+
+    Browser handles differently both bounding boxes and scroll into view for static vs relative/absolute positioning.
+    To account for the differences, we use absolute/relative positioning as the rest of our code assumes so.
+  */
+  .transcript-focus-area__content-overlay {
+    min-height: 0;
+    grid-area: content;
+    /* The bounding box is expanded to both top and bottom to scroll focus indicator into view. */
+    /* We should ignore clicks to make sure this expansion don't register click as focus. */
+    /* Otherwise, when clicking on the very bottom edge of the activity, it will focus on next activity instead. */
+    pointer-events: none;
+    position: relative;
+    width: 100%;
+  }
+
+  /* When the content is focused as active descendant, scrollIntoView() will scroll this invisible div into view. */
+  .transcript-focus-area__content-active-descendant {
+    inset: calc(var(--webchat__transcript--spacing) / -1) 0 calc(var(--webchat__transcript--spacing) / -1) 0;
+    position: absolute;
+  }
+
+  .transcript-focus-area__terminator {
+    height: 0;
+    outline: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  .transcript-focus-area__terminator-body {
+    display: flex;
+    inset: auto 0 0 0;
+    justify-content: center;
+    position: absolute;
+  }
+
+  .transcript-focus-area__terminator:not(:focus) .transcript-focus-area__terminator-body {
+    display: none;
+  }
+
+  .transcript-focus-area__terminator-text {
+    background: var(--webchat__background--transcript-terminator);
+    border-radius: var(--webchat__border-radius--transcript-terminator);
+    color: var(--webchat__color--transcript-terminator);
+    font-family: var(--webchat__font--primary);
+    font-size: var(--webchat__font-size--transcript-terminator);
+    margin: calc(var(--webchat__transcript--spacing) / 2);
+    padding: calc(var(--webchat__transcript--spacing) / 2);
+  }
+}

package/src/Transcript/TranscriptFocus/TranscriptFocusArea.tsx

@@ -0,0 +1,27 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import TranscriptFocusIndicator from './TranscriptFocusIndicator';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusAreaProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusArea = forwardRef<HTMLDivElement, TranscriptFocusAreaProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <div {...props} className={cx(classNames['transcript-focus-area'], className)} ref={ref}>
+        <div className={classNames['transcript-focus-area__root']}>{children}</div>
+        <TranscriptFocusIndicator type="transcript" />
+      </div>
+    );
+  }
+);
+
+TranscriptFocusArea.displayName = 'TranscriptFocusArea';
+
+export default TranscriptFocusArea;
+export { type TranscriptFocusAreaProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusContent.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/require-default-props */
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusContentProps = HTMLAttributes<HTMLDivElement> & {
+  readonly focused?: boolean;
+  readonly tag?: string | React.JSXElementConstructor<any>;
+};
+
+const TranscriptFocusContent = forwardRef<HTMLDivElement, TranscriptFocusContentProps>(
+  ({ className, focused, tag: Tag = 'div', ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <Tag
+        {...props}
+        className={cx(
+          classNames['transcript-focus-area__content'],
+          { [classNames['transcript-focus-area__content--focused']]: focused },
+          className
+        )}
+        ref={ref}
+      />
+    );
+  }
+);
+
+TranscriptFocusContent.displayName = 'TranscriptFocusContent';
+
+export default TranscriptFocusContent;
+export { type TranscriptFocusContentProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusContentActiveDescendant.tsx

@@ -0,0 +1,26 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusContentActiveDescendantProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusContentActiveDescendant = forwardRef<HTMLDivElement, TranscriptFocusContentActiveDescendantProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return (
+      <div
+        {...props}
+        className={cx(classNames['transcript-focus-area__content-active-descendant'], className)}
+        ref={ref}
+      />
+    );
+  }
+);
+
+TranscriptFocusContentActiveDescendant.displayName = 'TranscriptFocusContentActiveDescendant';
+
+export default TranscriptFocusContentActiveDescendant;
+export { type TranscriptFocusContentActiveDescendantProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusContentBody.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusContentBodyProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusContentBody = forwardRef<HTMLDivElement, TranscriptFocusContentBodyProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__content-body'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusContentBody.displayName = 'TranscriptFocusContentBody';
+
+export default TranscriptFocusContentBody;
+export { type TranscriptFocusContentBodyProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusContentOverlay.tsx

@@ -0,0 +1,20 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusContentOverlayProps = HTMLAttributes<HTMLDivElement>;
+
+const TranscriptFocusContentOverlay = forwardRef<HTMLDivElement, TranscriptFocusContentOverlayProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    return <div {...props} className={cx(classNames['transcript-focus-area__content-overlay'], className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusContentOverlay.displayName = 'TranscriptFocusContentOverlay';
+
+export default TranscriptFocusContentOverlay;
+export { type TranscriptFocusContentOverlayProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusIndicator.tsx

@@ -0,0 +1,28 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+
+type TranscriptFocusIndicatorProps = HTMLAttributes<HTMLDivElement> &
+  Readonly<{
+    type?: 'content' | 'transcript';
+  }>;
+
+const TranscriptFocusIndicator = forwardRef<HTMLDivElement, TranscriptFocusIndicatorProps>(
+  ({ className, type = 'content', ...props }, ref) => {
+    const classNames = useStyles(styles);
+
+    const indicatorClass =
+      type === 'content'
+        ? classNames['transcript-focus-area__indicator']
+        : classNames['transcript-focus-area__transcript-indicator'];
+
+    return <div {...props} className={cx(indicatorClass, className)} ref={ref} />;
+  }
+);
+
+TranscriptFocusIndicator.displayName = 'TranscriptFocusIndicator';
+
+export default TranscriptFocusIndicator;
+export { type TranscriptFocusIndicatorProps };

package/src/Transcript/TranscriptFocus/TranscriptFocusTerminator.tsx

@@ -0,0 +1,42 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import { hooks } from 'botframework-webchat-api';
+import cx from 'classnames';
+import React, { forwardRef, type HTMLAttributes } from 'react';
+
+import styles from './TranscriptFocus.module.css';
+import useUniqueId from '../../hooks/internal/useUniqueId';
+
+type TranscriptFocusTerminatorProps = HTMLAttributes<HTMLDivElement>;
+
+const { useLocalizer } = hooks;
+
+const TranscriptFocusTerminator = forwardRef<HTMLDivElement, TranscriptFocusTerminatorProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useStyles(styles);
+    const localize = useLocalizer();
+    const terminatorText = localize('TRANSCRIPT_TERMINATOR_TEXT');
+    const terminatorLabelId = useUniqueId('webchat__basic-transcript__terminator-label');
+
+    return (
+      <div
+        {...props}
+        aria-labelledby={terminatorLabelId}
+        className={cx(classNames['transcript-focus-area__terminator'], className)}
+        ref={ref}
+      >
+        <div className={cx(classNames['transcript-focus-area__terminator-body'])}>
+          {/* `id` is required for `aria-labelledby` */}
+          {/* eslint-disable-next-line react/forbid-dom-props */}
+          <div className={cx(classNames['transcript-focus-area__terminator-text'])} id={terminatorLabelId}>
+            {terminatorText}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+TranscriptFocusTerminator.displayName = 'TranscriptFocusTerminator';
+
+export default TranscriptFocusTerminator;
+export { type TranscriptFocusTerminatorProps };