botframework-webchat-component 4.15.0 → 4.15.2-main.20220413.d89850f

package/src/Middleware/ActivityStatus/SendStatus/SendStatus.tsx

@@ -1,7 +1,8 @@
-import { Constants, DirectLineActivity } from 'botframework-webchat-core';
+import { Constants } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
 import React, { FC, useCallback } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import connectToWebChat from '../../../connectToWebChat';
 import ScreenReaderText from '../../../ScreenReaderText';
@@ -33,7 +34,7 @@ const connectSendStatus = (...selectors) =>
   );
 
 type SendStatusProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   sendState: 'sending' | 'send failed' | 'sent';
 };
 
@@ -72,9 +73,10 @@ const SendStatus: FC<SendStatusProps> = ({ activity, sendState }) => {
 };
 
 SendStatus.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
   activity: PropTypes.shape({
     channelData: PropTypes.shape({
-      clientTimestamp: PropTypes.string,
       state: PropTypes.string
     })
   }).isRequired,

package/src/Middleware/ActivityStatus/Timestamp.tsx

@@ -1,8 +1,8 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import AbsoluteTime from './AbsoluteTime';
 import RelativeTime from './RelativeTime';
@@ -11,7 +11,7 @@ import useStyleSet from '../../hooks/useStyleSet';
 const { useStyleOptions } = hooks;
 
 type TimestampProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   className?: string;
 };
 
@@ -40,8 +40,10 @@ Timestamp.defaultProps = {
 };
 
 Timestamp.propTypes = {
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
   activity: PropTypes.shape({
-    timestamp: PropTypes.string.isRequired
+    timestamp: PropTypes.string
   }).isRequired,
   className: PropTypes.string
 };

package/src/SendBox/SuggestedAction.tsx

@@ -2,6 +2,7 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { MouseEventHandler, useCallback, useRef, VFC } from 'react';
+import type { DirectLineCardAction } from 'botframework-webchat-core';
 
 import AccessibleButton from '../Utils/AccessibleButton';
 import connectToWebChat from '../connectToWebChat';
@@ -13,7 +14,6 @@ import useScrollToEnd from '../hooks/useScrollToEnd';
 import useSuggestedActionsAccessKey from '../hooks/internal/useSuggestedActionsAccessKey';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-import { DirectLineCardAction } from 'botframework-webchat-core';
 
 const { useDirection, useDisabled, usePerformCardAction, useStyleOptions, useSuggestedActions } = hooks;
 

package/src/SendBox/SuggestedActions.tsx

@@ -1,11 +1,11 @@
 /* eslint react/no-array-index-key: "off" */
 
-import { DirectLineCardAction } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { FC, useMemo, useRef } from 'react';
+import type { DirectLineCardAction } from 'botframework-webchat-core';
 
 import connectToWebChat from '../connectToWebChat';
 import ScreenReaderText from '../ScreenReaderText';

package/src/Transcript/ActivityRow.tsx

@@ -2,9 +2,8 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useCallback, useRef } from 'react';
-
-import type { DirectLineActivity } from 'botframework-webchat-core';
 import type { MouseEventHandler, PropsWithChildren } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import { android } from '../Utils/detectBrowser';
 import FocusTrap from './FocusTrap';
@@ -18,9 +17,7 @@ import useValueRef from '../hooks/internal/useValueRef';
 
 const { useActivityKeysByRead, useGetHasAcknowledgedByActivityKey, useGetKeyByActivity } = hooks;
 
-type ActivityRowProps = PropsWithChildren<{
-  activity: DirectLineActivity;
-}>;
+type ActivityRowProps = PropsWithChildren<{ activity: WebChatActivity }>;
 
 const ActivityRow = forwardRef<HTMLLIElement, ActivityRowProps>(({ activity, children }, ref) => {
   const [activeDescendantId] = useActiveDescendantId();
@@ -112,6 +109,8 @@ ActivityRow.defaultProps = {
 };
 
 ActivityRow.propTypes = {
+  // PropTypes cannot fully capture TypeScript type.
+  // @ts-ignore
   activity: PropTypes.shape({
     channelData: PropTypes.shape({
       speak: PropTypes.bool,

package/src/Transcript/ActivityTextAlt.tsx

@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import type { DirectLineActivity } from 'botframework-webchat-core';
 import type { RefObject, VFC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import ScreenReaderText from '../ScreenReaderText';
 import useActivityAccessibleName from './useActivityAccessibleName';
 
 type ActivityTextAltProps = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   bodyRef: RefObject<HTMLDivElement>;
   id: string;
 };

package/src/Transcript/LiveRegionTranscript.tsx

@@ -1,10 +1,10 @@
 import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import random from 'math-random';
 import React, { useEffect, useMemo, useRef } from 'react';
-
-import type { DirectLineActivity } from 'botframework-webchat-core';
 import type { FC, RefObject, VFC } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import LiveRegionTwinComposer from '../providers/LiveRegionTwin/LiveRegionTwinComposer';
 import ScreenReaderActivity from '../ScreenReaderActivity';
@@ -12,15 +12,15 @@ import tabbableElements from '../Utils/tabbableElements';
 import useActivityTreeWithRenderer from '../providers/ActivityTree/useActivityTreeWithRenderer';
 import useQueueStaticElement from '../providers/LiveRegionTwin/useQueueStaticElement';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import useTypistNames from './useTypistNames';
 
 import type { ActivityElementMap } from './types';
-import classNames from 'classnames';
 
 const { useGetKeyByActivity, useLocalizer, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__live-region-transcript': {
-    '& .webchat__live-region-transcript__interactive_note': {
+    '& .webchat__live-region-transcript__interactive-note, & .webchat__live-region-transcript__text-element': {
       color: 'transparent',
       height: 1,
       overflow: 'hidden',
@@ -37,9 +37,12 @@ const ROOT_STYLE = {
  *
  * Presentational activity, will be rendered visually but not going through screen reader.
  */
-function isPresentational(activity: DirectLineActivity): boolean {
-  const { channelData }: { attachments?: []; channelData?: { messageBack?: { displayText?: string } }; text?: string } =
-    activity;
+function isPresentational(activity: WebChatActivity): boolean {
+  if (activity.type !== 'message') {
+    return;
+  }
+
+  const { channelData } = activity;
 
   // "Fallback text" includes both message text and narratives for attachments.
   // Emptying out "fallback text" essentially mute for both message and attachments.
@@ -53,7 +56,7 @@ function isPresentational(activity: DirectLineActivity): boolean {
   return !(channelData?.messageBack?.displayText || activity.text || activity.attachments?.length);
 }
 
-type RenderingActivities = Map<string, DirectLineActivity>;
+type RenderingActivities = Map<string, WebChatActivity>;
 
 type LiveRegionTranscriptCoreProps = {
   activityElementMapRef: RefObject<ActivityElementMap>;
@@ -61,19 +64,26 @@ type LiveRegionTranscriptCoreProps = {
 
 const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityElementMapRef }) => {
   const [flattenedActivityTree] = useActivityTreeWithRenderer({ flat: true });
+  const [typistNames] = useTypistNames();
   const getKeyByActivity = useGetKeyByActivity();
   const localize = useLocalizer();
   const queueStaticElement = useQueueStaticElement();
 
   const liveRegionInteractiveLabelAlt = localize('TRANSCRIPT_LIVE_REGION_INTERACTIVE_LABEL_ALT');
   const liveRegionInteractiveWithLinkLabelAlt = localize('TRANSCRIPT_LIVE_REGION_INTERACTIVE_WITH_LINKS_LABEL_ALT');
+  const typingIndicator =
+    !!typistNames.length &&
+    localize(
+      typistNames.length > 1 ? 'TYPING_INDICATOR_MULTIPLE_TEXT' : 'TYPING_INDICATOR_SINGLE_TEXT',
+      typistNames[0]
+    );
 
   const renderingActivities = useMemo<Readonly<RenderingActivities>>(
     () =>
       Object.freeze(
         flattenedActivityTree.reduce<RenderingActivities>(
           (intermediate, { activity }) => intermediate.set(getKeyByActivity(activity), activity),
-          new Map<string, DirectLineActivity>()
+          new Map<string, WebChatActivity>()
         )
       ),
     [flattenedActivityTree, getKeyByActivity]
@@ -83,7 +93,7 @@ const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityE
 
   useEffect(() => {
     const { current: prevRenderingActivities } = prevRenderingActivitiesRef;
-    const appendedActivities: { activity: DirectLineActivity; key: string }[] = [];
+    const appendedActivities: { activity: WebChatActivity; key: string }[] = [];
 
     // Bottom-up, find activities which are recently appended (i.e. new activity will have a new key).
     // We only consider new activities added to the bottom of the chat history.
@@ -109,7 +119,7 @@ const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityE
 
     if (hasNewLink || hasNewWidget) {
       // eslint-disable-next-line no-magic-numbers
-      const labelId = `webchat__live-region-transcript__interactive_note--${random().toString(36).substr(2, 5)}`;
+      const labelId = `webchat__live-region-transcript__interactive-note--${random().toString(36).substr(2, 5)}`;
 
       queueStaticElement(
         // Inside ARIA live region:
@@ -123,7 +133,7 @@ const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityE
         <div
           aria-atomic="true"
           aria-labelledby={labelId}
-          className="webchat__live-region-transcript__interactive_note"
+          className="webchat__live-region-transcript__interactive-note"
           role="note"
         >
           {/* "id" is required for "aria-activedescendant" */}
@@ -144,6 +154,10 @@ const LiveRegionTranscriptCore: FC<LiveRegionTranscriptCoreProps> = ({ activityE
     renderingActivities
   ]);
 
+  useEffect(() => {
+    typingIndicator && queueStaticElement(typingIndicator);
+  }, [queueStaticElement, typingIndicator]);
+
   return null;
 };
 
@@ -164,6 +178,7 @@ const LiveRegionTranscript: VFC<LiveRegionTranscriptProps> = ({ activityElementM
       className={classNames('webchat__live-region-transcript', rootClassName)}
       fadeAfter={internalLiveRegionFadeAfter}
       role="log"
+      textElementClassName="webchat__live-region-transcript__text-element"
     >
       <LiveRegionTranscriptCore activityElementMapRef={activityElementMapRef} />
     </LiveRegionTwinComposer>

package/src/Transcript/useActivityAccessibleName.ts

@@ -1,8 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
 import { useEffect, useMemo, useState } from 'react';
-
-import type { DirectLineActivity } from 'botframework-webchat-core';
 import type { RefObject } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import activityAltText from '../Utils/activityAltText';
 import tabbableElements from '../Utils/tabbableElements';
@@ -24,13 +23,13 @@ const ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {
   two: 'ACTIVITY_NUM_ATTACHMENTS_TWO_ALT'
 };
 
-export default function useActivityAccessibleName(activity: DirectLineActivity, bodyRef: RefObject<HTMLElement>) {
+export default function useActivityAccessibleName(activity: WebChatActivity, bodyRef: RefObject<HTMLElement>) {
   const [{ initials: botInitials }] = useAvatarForBot();
   const [interactiveType, setInteractiveType] = useState<InteractiveType | false>(false);
   const fromSelf = activity.from?.role === 'user';
   const localize = useLocalizer();
   const localizeWithPlural = useLocalizer({ plural: true });
-  const numAttachments = activity.attachments?.length || 0;
+  const numAttachments = activity.type === 'message' ? activity.attachments?.length || 0 : 0;
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
 
   const activityInteractiveAlt = localize('ACTIVITY_INTERACTIVE_LABEL_ALT'); // "Click to interact."

package/src/Transcript/useTypistNames.ts

@@ -0,0 +1,37 @@
+import { hooks } from 'botframework-webchat-api';
+import { useEffect, useRef } from 'react';
+
+const { useActiveTyping } = hooks;
+
+function arrayEquals<T>(x: readonly T[], y: readonly T[]): boolean {
+  return x.length === y.length && x.every((value, index) => y[+index] === value);
+}
+
+/** Gets names of users who are actively typing, sorted by the time they started typing. */
+export default function useTypistNames(): readonly [readonly string[]] {
+  const [activeTyping] = useActiveTyping();
+  const prevTypistNamesStateRef = useRef<readonly [readonly string[]]>(
+    Object.freeze([Object.freeze([] as string[])]) as [readonly string[]]
+  );
+
+  const activeTypingFromOthersValues = Object.values(activeTyping).filter(({ role }) => role !== 'user');
+
+  // Sort the list by the first typist.
+  const sortedActiveTypingFromOthersValues = activeTypingFromOthersValues.sort(({ at: x }, { at: y }) => x - y);
+
+  const typistNamesState: readonly [readonly string[]] = Object.freeze([
+    Object.freeze(sortedActiveTypingFromOthersValues.map(({ name }) => name))
+  ]) as readonly [readonly string[]];
+
+  const { current: prevTypistNamesState } = prevTypistNamesStateRef;
+
+  const nextTypistNamesState = arrayEquals(typistNamesState[0], prevTypistNamesState[0])
+    ? prevTypistNamesState
+    : typistNamesState;
+
+  useEffect(() => {
+    prevTypistNamesStateRef.current = nextTypistNamesState;
+  }, [prevTypistNamesStateRef, nextTypistNamesState]);
+
+  return nextTypistNamesState;
+}

package/src/Utils/getActivityUniqueId.ts

@@ -1,5 +1,5 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
-export default function getActivityUniqueId(activity: DirectLineActivity): string {
+export default function getActivityUniqueId(activity: WebChatActivity): string {
   return activity?.channelData?.clientActivityID || activity?.id;
 }

package/src/hooks/internal/useMemoize.ts

@@ -12,9 +12,9 @@ type Fn<TArgs, TResult> = (...args: TArgs[]) => TResult;
  * @param {(fn: Fn<TArgs, TIntermediate>) => TFinal} callback - When called, this function should execute the memoizing function.
  * @param {DependencyList[]} deps - Dependencies to detect for chagnes.
  */
-export default function useMemoize<TArgs extends [], TIntermediate, TFinal>(
-  fn: Fn<TArgs, TIntermediate>,
-  callback: (fn: Fn<TArgs, TIntermediate>) => TFinal,
+export default function useMemoize<TIntermediate, TFinal>(
+  fn: Fn<unknown, TIntermediate>,
+  callback: (fn: Fn<unknown, TIntermediate>) => TFinal,
   deps: DependencyList[]
 ): TFinal {
   if (typeof fn !== 'function') {
@@ -26,10 +26,10 @@ export default function useMemoize<TArgs extends [], TIntermediate, TFinal>(
   }
 
   const memoizedFn = useMemo(() => {
-    let cache: Cache<TArgs, TIntermediate>[] = [];
+    let cache: Cache<unknown, TIntermediate>[] = [];
 
-    return (run: (fn: Fn<TArgs, TIntermediate>) => TFinal) => {
-      const nextCache: Cache<TArgs, TIntermediate>[] = [];
+    return (run: (fn: Fn<unknown, TIntermediate>) => TFinal) => {
+      const nextCache: Cache<unknown, TIntermediate>[] = [];
       const result = run((...args) => {
         const { result } = [...cache, ...nextCache].find(
           ({ args: cachedArgs }) =>

package/src/hooks/useObserveTranscriptFocus.ts

@@ -1,10 +1,10 @@
-import { DirectLineActivity } from 'botframework-webchat-core';
 import { useEffect } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import useWebChatUIContext from './internal/useWebChatUIContext';
 
 export default function useObserveTranscriptFocus(
-  observer: (event: { activity: DirectLineActivity }) => void,
+  observer: (event: { activity: WebChatActivity }) => void,
   deps: any[]
 ): void {
   if (typeof observer !== 'function') {

package/src/hooks/useSendFiles.ts

@@ -1,6 +1,3 @@
-/* eslint no-magic-numbers: ["error", { "ignore": [0, 1024] }] */
-
-import { DirectLineAttachment } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import { useCallback } from 'react';
 
@@ -41,8 +38,13 @@ export default function useSendFiles(): (files: File[]) => void {
         // TODO: [P3] We need to find revokeObjectURL on the UI side
         //       Redux store should not know about the browser environment
         //       One fix is to use ArrayBuffer instead of object URL, but that would requires change to DirectLineJS
-        const attachments: DirectLineAttachment[] = await Promise.all(
-          [].map.call(files, async file => {
+        const attachments: {
+          name: string;
+          size: number;
+          url: string;
+          thumbnail?: string;
+        }[] = await Promise.all(
+          Array.from(files).map(async file => {
             let thumbnail;
 
             if (downscaleImageToDataURL && enableUploadThumbnail && canMakeThumbnail(file)) {

package/src/providers/ActivityTree/ActivityTreeComposer.tsx

@@ -2,8 +2,8 @@ import { hooks } from 'botframework-webchat-api';
 import React, { useMemo } from 'react';
 
 import type { ActivityComponentFactory } from 'botframework-webchat-api';
-import type { DirectLineActivity } from 'botframework-webchat-core';
 import type { FC, PropsWithChildren } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import { ActivityWithRenderer, ReadonlyActivityTree } from './private/types';
 import ActivityTreeContext from './private/Context';
@@ -25,7 +25,7 @@ const ActivityTreeComposer: FC<ActivityTreeComposerProps> = ({ children }) => {
     throw new Error('botframework-webchat internal: <ActivityTreeComposer> should not be nested.');
   }
 
-  const [activities]: [DirectLineActivity[]] = useActivities();
+  const [activities]: [WebChatActivity[]] = useActivities();
   const createActivityRenderer: ActivityComponentFactory = useCreateActivityRenderer();
 
   const activitiesWithRenderer = useActivitiesWithRenderer(activities, createActivityRenderer);

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

@@ -1,8 +1,8 @@
 import type { ActivityComponentFactory } from 'botframework-webchat-api';
-import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 type ActivityWithRenderer = {
-  activity: DirectLineActivity;
+  activity: WebChatActivity;
   renderActivity: Exclude<ReturnType<ActivityComponentFactory>, false>;
 };
 

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

@@ -1,17 +1,15 @@
 import { useCallback, useRef } from 'react';
-
-import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import useMemoize from '../../../hooks/internal/useMemoize';
-
 import type { ActivityWithRenderer } from './types';
 
 export default function useActivitiesWithRenderer(
-  activities: readonly DirectLineActivity[],
+  activities: readonly WebChatActivity[],
   createActivityRenderer
 ): readonly ActivityWithRenderer[] {
   const createActivityRendererWithLiteralArgs = useCallback(
-    (activity: DirectLineActivity, nextVisibleActivity: DirectLineActivity) =>
+    (activity: WebChatActivity, nextVisibleActivity: WebChatActivity) =>
       createActivityRenderer({ activity, nextVisibleActivity }),
     [createActivityRenderer]
   );
@@ -27,7 +25,7 @@ export default function useActivitiesWithRenderer(
       // useMemoize() allows any number of memoization.
 
       const activitiesWithRenderer: ActivityWithRenderer[] = [];
-      let nextVisibleActivity: DirectLineActivity;
+      let nextVisibleActivity: WebChatActivity;
 
       for (let index = activities.length - 1; index >= 0; index--) {
         const activity = activities[+index];

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

@@ -1,19 +1,14 @@
 import { hooks } from 'botframework-webchat-api';
 import { useMemo } from 'react';
-
-import type { DirectLineActivity } from 'botframework-webchat-core';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
 import intersectionOf from '../../../Utils/intersectionOf';
 import removeInline from '../../../Utils/removeInline';
-
 import type { ActivityWithRenderer, ReadonlyActivityTree } from './types';
 
 const { useGroupActivities } = hooks;
 
-function validateAllEntriesTagged(
-  entries: readonly ActivityWithRenderer[],
-  bins: readonly (readonly ActivityWithRenderer[])[]
-): boolean {
+function validateAllEntriesTagged<T>(entries: readonly T[], bins: readonly (readonly T[])[]): boolean {
   return entries.every(entry => bins.some(bin => bin.includes(entry)));
 }
 
@@ -48,8 +43,8 @@ function useActivityTreeWithRenderer(entries: readonly ActivityWithRenderer[]):
   // Both arrays should contains all activities.
 
   const { entriesBySender, entriesByStatus } = useMemo<{
-    entriesBySender: readonly (readonly DirectLineActivity[])[];
-    entriesByStatus: readonly (readonly DirectLineActivity[])[];
+    entriesBySender: readonly (readonly ActivityWithRenderer[])[];
+    entriesByStatus: readonly (readonly ActivityWithRenderer[])[];
   }>(() => {
     const visibleActivities = entries.map(({ activity }) => activity);
 
@@ -57,8 +52,8 @@ function useActivityTreeWithRenderer(entries: readonly ActivityWithRenderer[]):
       sender: activitiesBySender,
       status: activitiesByStatus
     }: {
-      sender: readonly (readonly DirectLineActivity[])[];
-      status: readonly (readonly DirectLineActivity[])[];
+      sender: readonly (readonly WebChatActivity[])[];
+      status: readonly (readonly WebChatActivity[])[];
     } = groupActivities({
       activities: visibleActivities
     });

package/src/providers/LiveRegionTwin/LiveRegionTwinComposer.tsx

@@ -36,6 +36,9 @@ type LiveRegionTwinComposerProps = PropsWithChildren<{
 
   /** Optional "role" attribute for the live region twin container. */
   role?: string;
+
+  /** Optional "className" attribute for static text element. */
+  textElementClassName?: string;
 }>;
 
 /**
@@ -56,7 +59,8 @@ const LiveRegionTwinComposer: FC<LiveRegionTwinComposerProps> = ({
   children,
   className,
   fadeAfter = DEFAULT_FADE_AFTER,
-  role
+  role,
+  textElementClassName
 }) => {
   const [staticElementEntries, setStaticElementEntries] = useState<StaticElementEntry[]>([]);
   const fadeAfterRef = useValueRef(fadeAfter);
@@ -125,6 +129,7 @@ const LiveRegionTwinComposer: FC<LiveRegionTwinComposerProps> = ({
         aria-roledescription={ariaRoleDescription}
         className={className}
         role={role}
+        textElementClassName={textElementClassName}
       />
       {children}
     </LiveRegionTwinContext.Provider>
@@ -138,7 +143,8 @@ LiveRegionTwinComposer.defaultProps = {
   children: undefined,
   className: undefined,
   fadeAfter: DEFAULT_FADE_AFTER,
-  role: undefined
+  role: undefined,
+  textElementClassName: undefined
 };
 
 LiveRegionTwinComposer.propTypes = {
@@ -148,7 +154,8 @@ LiveRegionTwinComposer.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
   fadeAfter: PropTypes.number,
-  role: PropTypes.string
+  role: PropTypes.string,
+  textElementClassName: PropTypes.string
 };
 
 export default LiveRegionTwinComposer;

package/src/providers/LiveRegionTwin/private/LiveRegionTwinContainer.tsx

@@ -12,6 +12,7 @@ type LiveRegionTwinContainerProps = {
   'aria-roledescription'?: string;
   className?: string;
   role?: string;
+  textElementClassName?: string;
 };
 
 // This container is marked as private because we assume there is only one instance under the <LiveRegionTwinContext>.
@@ -20,7 +21,8 @@ const LiveRegionTwinContainer: VFC<LiveRegionTwinContainerProps> = ({
   'aria-live': ariaLive,
   'aria-roledescription': ariaRoleDescription,
   className,
-  role
+  role,
+  textElementClassName
 }) => {
   const [staticElementEntries] = useStaticElementEntries();
 
@@ -37,9 +39,21 @@ const LiveRegionTwinContainer: VFC<LiveRegionTwinContainerProps> = ({
       className={className}
       role={role}
     >
-      {staticElementEntries.map(({ element, key }) =>
-        typeof element === 'string' ? <div key={key}>{element}</div> : <Fragment key={key}>{element}</Fragment>
-      )}
+      {staticElementEntries.map(({ element, key }) => {
+        if (typeof element === 'string') {
+          const id = `webchat__live-region-twin__text-element-${key}`;
+
+          return (
+            <div aria-atomic={true} aria-labelledby={id} className={textElementClassName} key={key}>
+              {/* "aria-labelledby" requires the use of "id" attribute. */}
+              {/* eslint-disable-next-line react/forbid-dom-props */}
+              <p id={id}>{element}</p>
+            </div>
+          );
+        }
+
+        return <Fragment key={key}>{element}</Fragment>;
+      })}
     </div>
   );
 };
@@ -48,7 +62,8 @@ LiveRegionTwinContainer.defaultProps = {
   'aria-label': undefined,
   'aria-roledescription': undefined,
   className: undefined,
-  role: undefined
+  role: undefined,
+  textElementClassName: undefined
 };
 
 LiveRegionTwinContainer.propTypes = {
@@ -58,7 +73,8 @@ LiveRegionTwinContainer.propTypes = {
   'aria-live': PropTypes.oneOf(['assertive', 'polite']).isRequired,
   'aria-roledescription': PropTypes.string,
   className: PropTypes.string,
-  role: PropTypes.string
+  role: PropTypes.string,
+  textElementClassName: PropTypes.string
 };
 
 export default LiveRegionTwinContainer;