@azure/communication-react 1.28.0-alpha-202506060018 → 1.28.0-alpha-202506070019

package/dist/dist-cjs/communication-react/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DAvfOWzU.js');
+var index = require('./index-B1nXGt3n.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.28.0-alpha-202506060018';
+module.exports = '1.28.0-alpha-202506070019';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.28.0-alpha-202506060018';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.28.0-alpha-202506070019';\n"]}

package/dist/dist-esm/calling-component-bindings/src/captionsSelector.js

@@ -69,7 +69,8 @@ export const captionsBannerSelector = reselect.createSelector([
             displayName: finalDisplayName !== null && finalDisplayName !== void 0 ? finalDisplayName : 'Unnamed Participant',
             captionText: c.captionText,
             userId,
-            createdTimeStamp: c.timestamp
+            createdTimeStamp: c.timestamp,
+            isFinalized: c.resultType === 'Final'
         };
     });
     const completedRealTimeTexts = (_a = realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) === null || _a === void 0 ? void 0 : _a.filter((rtt) => rtt.message !== '').map((rtt) => {

package/dist/dist-esm/calling-component-bindings/src/captionsSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"captionsSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/captionsSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CallClientState, CaptionsInfo } from '@internal/calling-stateful-client';\nimport { RealTimeTextInfo, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport {\n  CallingBaseSelectorProps,\n  getDisplayName,\n  getIdentifier,\n  getStartCaptionsInProgress,\n  getSupportedCaptionLanguages\n} from './baseSelectors';\nimport { allRemoteParticipantsSelector } from './remoteParticipantsSelector';\nimport { getRealTimeTextStatus, getRealTimeText } from './baseSelectors';\nimport {\n  getCaptions,\n  getCaptionsStatus,\n  getCurrentCaptionLanguage,\n  getCurrentSpokenLanguage,\n  getSupportedSpokenLanguages\n} from './baseSelectors';\nimport * as reselect from 'reselect';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CaptionsInformation, SupportedCaptionLanguage, SupportedSpokenLanguage } from '@internal/react-components';\nimport { RealTimeTextInformation } from '@internal/react-components';\nimport { getRemoteParticipantDisplayName } from './utils/callUtils';\n\n/**\n * Selector type for the {@link StartCaptionsButton} component.\n * @public\n */\nexport type StartCaptionsButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked: boolean;\n  currentCaptionLanguage: string;\n  currentSpokenLanguage: string;\n};\n\n/**\n * Selector for {@link StartCaptionsButton} component.\n *\n * @public\n */\nexport const startCaptionsButtonSelector: StartCaptionsButtonSelector = reselect.createSelector(\n  [getCaptionsStatus, getCurrentCaptionLanguage, getCurrentSpokenLanguage],\n  (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {\n    return {\n      checked: isCaptionsFeatureActive ?? false,\n      currentCaptionLanguage: currentCaptionLanguage ?? '',\n      currentSpokenLanguage: currentSpokenLanguage ?? 'en-us'\n    };\n  }\n);\n\n/**\n * Selector type for components for Changing caption language and spoken language\n * @public\n */\nexport type CaptionSettingsSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  supportedCaptionLanguages: SupportedCaptionLanguage[];\n  currentCaptionLanguage: SupportedCaptionLanguage;\n  supportedSpokenLanguages: SupportedSpokenLanguage[];\n  currentSpokenLanguage: SupportedSpokenLanguage;\n  isCaptionsFeatureActive: boolean;\n};\n\n/**\n * Selector for Changing caption language and spoken language\n *\n * @public\n */\nexport const captionSettingsSelector: CaptionSettingsSelector = reselect.createSelector(\n  [\n    getSupportedCaptionLanguages,\n    getCurrentCaptionLanguage,\n    getSupportedSpokenLanguages,\n    getCurrentSpokenLanguage,\n    getCaptionsStatus\n  ],\n  (\n    supportedCaptionLanguages,\n    currentCaptionLanguage,\n    supportedSpokenLanguages,\n    currentSpokenLanguage,\n    isCaptionsFeatureActive\n  ) => {\n    return {\n      supportedCaptionLanguages: supportedCaptionLanguages ?? [],\n      currentCaptionLanguage: currentCaptionLanguage ?? 'en',\n      supportedSpokenLanguages: supportedSpokenLanguages ?? ['en-us'],\n      currentSpokenLanguage: currentSpokenLanguage ?? 'en-us',\n      isCaptionsFeatureActive: isCaptionsFeatureActive ?? false\n    };\n  }\n);\n/**\n * Selector type for the {@link CaptionsBanner} component.\n * @public\n */\nexport type CaptionsBannerSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  captions: CaptionsInformation[];\n  realTimeTexts: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  isCaptionsOn: boolean;\n  startCaptionsInProgress: boolean;\n  isRealTimeTextOn: boolean;\n  latestLocalRealTimeText: RealTimeTextInformation;\n};\n\n/**\n * Selector for {@link CaptionsBanner} component.\n *\n * @public\n */\nexport const captionsBannerSelector: CaptionsBannerSelector = reselect.createSelector(\n  [\n    getCaptions,\n    getRealTimeText,\n    getCaptionsStatus,\n    getRealTimeTextStatus,\n    getStartCaptionsInProgress,\n    allRemoteParticipantsSelector,\n    getDisplayName,\n    getIdentifier\n  ],\n  (\n    captions,\n    realTimeTexts,\n    isCaptionsFeatureActive,\n    isRealTimeTextActive,\n    startCaptionsInProgress,\n    allRemoteParticipants,\n    displayName,\n    identifier\n  ) => {\n    const captionsInfo = captions?.map((c, index) => {\n      const userId = getCaptionsSpeakerIdentifier(c);\n      let finalDisplayName;\n      if (userId === identifier) {\n        finalDisplayName = displayName;\n      } else {\n        finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n      }\n\n      return {\n        id: (finalDisplayName ?? 'Unnamed Participant') + index,\n        displayName: finalDisplayName ?? 'Unnamed Participant',\n        captionText: c.captionText,\n        userId,\n        createdTimeStamp: c.timestamp\n      };\n    });\n\n    const completedRealTimeTexts = realTimeTexts?.completedMessages\n      ?.filter((rtt) => rtt.message !== '')\n      .map((rtt) => {\n        const userId = getRealTimeTextSpeakerIdentifier(rtt);\n        return {\n          id: rtt.sequenceId,\n          displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n          message: rtt.message,\n          userId,\n          isTyping: rtt.resultType === 'Partial',\n          isMe: rtt.isMe,\n          finalizedTimeStamp: rtt.updatedTimestamp\n        };\n      });\n\n    const inProgressRealTimeTexts = realTimeTexts?.currentInProgress\n      ?.filter((rtt) => rtt.message !== '')\n      .map((rtt) => {\n        const userId = getRealTimeTextSpeakerIdentifier(rtt);\n        return {\n          id: rtt.sequenceId,\n          displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n          message: rtt.message,\n          userId,\n          isTyping: rtt.resultType === 'Partial',\n          isMe: rtt.isMe,\n          finalizedTimeStamp: rtt.updatedTimestamp\n        };\n      });\n\n    const myInProgress =\n      realTimeTexts?.myInProgress && realTimeTexts.myInProgress.message !== ''\n        ? {\n            id: realTimeTexts.myInProgress.sequenceId,\n            displayName: displayName,\n            message: realTimeTexts.myInProgress.message,\n            userId: identifier,\n            isTyping: realTimeTexts.myInProgress.resultType === 'Partial',\n            isMe: true,\n            finalizedTimeStamp: realTimeTexts.myInProgress.updatedTimestamp\n          }\n        : undefined;\n\n    // find the last final local real time text caption if myInProgress is not available\n    let latestLocalRealTimeText;\n\n    if (!myInProgress) {\n      latestLocalRealTimeText =\n        realTimeTexts &&\n        realTimeTexts.completedMessages &&\n        realTimeTexts.completedMessages\n          .slice()\n          .reverse()\n          .find((rtt) => rtt.isMe);\n    }\n\n    return {\n      captions: captionsInfo ?? [],\n\n      realTimeTexts: {\n        completedMessages: completedRealTimeTexts as RealTimeTextInformation[],\n        currentInProgress: inProgressRealTimeTexts as RealTimeTextInformation[],\n        myInProgress: myInProgress as RealTimeTextInformation\n      },\n      isCaptionsOn: isCaptionsFeatureActive ?? false,\n      startCaptionsInProgress: startCaptionsInProgress ?? false,\n\n      isRealTimeTextOn: isRealTimeTextActive ?? false,\n\n      latestLocalRealTimeText: (myInProgress ?? latestLocalRealTimeText) as RealTimeTextInformation\n    };\n  }\n);\n\nconst getCaptionsSpeakerIdentifier = (captions: CaptionsInfo): string => {\n  return captions.speaker.identifier ? toFlatCommunicationIdentifier(captions.speaker.identifier) : '';\n};\n\nconst getRealTimeTextSpeakerIdentifier = (realTimeText: RealTimeTextInfo): string => {\n  return realTimeText.sender.identifier ? toFlatCommunicationIdentifier(realTimeText.sender.identifier) : '';\n};\n\nconst getRealTimeTextDisplayName = (\n  realTimeText: RealTimeTextInfo,\n  identifier: string,\n  allRemoteParticipants:\n    | {\n        [keys: string]: RemoteParticipantState;\n      }\n    | undefined,\n  displayName: string | undefined,\n  userId: string\n): string => {\n  let finalDisplayName;\n  if (userId === identifier) {\n    finalDisplayName = displayName;\n  } else {\n    finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n  }\n  return finalDisplayName ?? 'Unnamed Participant';\n};\n"]}
+{"version":3,"file":"captionsSelector.js","sourceRoot":"","sources":["../../../../../calling-component-bindings/src/captionsSelector.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { CallClientState, CaptionsInfo } from '@internal/calling-stateful-client';\nimport { RealTimeTextInfo, RemoteParticipantState } from '@internal/calling-stateful-client';\nimport {\n  CallingBaseSelectorProps,\n  getDisplayName,\n  getIdentifier,\n  getStartCaptionsInProgress,\n  getSupportedCaptionLanguages\n} from './baseSelectors';\nimport { allRemoteParticipantsSelector } from './remoteParticipantsSelector';\nimport { getRealTimeTextStatus, getRealTimeText } from './baseSelectors';\nimport {\n  getCaptions,\n  getCaptionsStatus,\n  getCurrentCaptionLanguage,\n  getCurrentSpokenLanguage,\n  getSupportedSpokenLanguages\n} from './baseSelectors';\nimport * as reselect from 'reselect';\nimport { toFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { CaptionsInformation, SupportedCaptionLanguage, SupportedSpokenLanguage } from '@internal/react-components';\nimport { RealTimeTextInformation } from '@internal/react-components';\nimport { getRemoteParticipantDisplayName } from './utils/callUtils';\n\n/**\n * Selector type for the {@link StartCaptionsButton} component.\n * @public\n */\nexport type StartCaptionsButtonSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  checked: boolean;\n  currentCaptionLanguage: string;\n  currentSpokenLanguage: string;\n};\n\n/**\n * Selector for {@link StartCaptionsButton} component.\n *\n * @public\n */\nexport const startCaptionsButtonSelector: StartCaptionsButtonSelector = reselect.createSelector(\n  [getCaptionsStatus, getCurrentCaptionLanguage, getCurrentSpokenLanguage],\n  (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {\n    return {\n      checked: isCaptionsFeatureActive ?? false,\n      currentCaptionLanguage: currentCaptionLanguage ?? '',\n      currentSpokenLanguage: currentSpokenLanguage ?? 'en-us'\n    };\n  }\n);\n\n/**\n * Selector type for components for Changing caption language and spoken language\n * @public\n */\nexport type CaptionSettingsSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  supportedCaptionLanguages: SupportedCaptionLanguage[];\n  currentCaptionLanguage: SupportedCaptionLanguage;\n  supportedSpokenLanguages: SupportedSpokenLanguage[];\n  currentSpokenLanguage: SupportedSpokenLanguage;\n  isCaptionsFeatureActive: boolean;\n};\n\n/**\n * Selector for Changing caption language and spoken language\n *\n * @public\n */\nexport const captionSettingsSelector: CaptionSettingsSelector = reselect.createSelector(\n  [\n    getSupportedCaptionLanguages,\n    getCurrentCaptionLanguage,\n    getSupportedSpokenLanguages,\n    getCurrentSpokenLanguage,\n    getCaptionsStatus\n  ],\n  (\n    supportedCaptionLanguages,\n    currentCaptionLanguage,\n    supportedSpokenLanguages,\n    currentSpokenLanguage,\n    isCaptionsFeatureActive\n  ) => {\n    return {\n      supportedCaptionLanguages: supportedCaptionLanguages ?? [],\n      currentCaptionLanguage: currentCaptionLanguage ?? 'en',\n      supportedSpokenLanguages: supportedSpokenLanguages ?? ['en-us'],\n      currentSpokenLanguage: currentSpokenLanguage ?? 'en-us',\n      isCaptionsFeatureActive: isCaptionsFeatureActive ?? false\n    };\n  }\n);\n/**\n * Selector type for the {@link CaptionsBanner} component.\n * @public\n */\nexport type CaptionsBannerSelector = (\n  state: CallClientState,\n  props: CallingBaseSelectorProps\n) => {\n  captions: CaptionsInformation[];\n  realTimeTexts: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  isCaptionsOn: boolean;\n  startCaptionsInProgress: boolean;\n  isRealTimeTextOn: boolean;\n  latestLocalRealTimeText: RealTimeTextInformation;\n};\n\n/**\n * Selector for {@link CaptionsBanner} component.\n *\n * @public\n */\nexport const captionsBannerSelector: CaptionsBannerSelector = reselect.createSelector(\n  [\n    getCaptions,\n    getRealTimeText,\n    getCaptionsStatus,\n    getRealTimeTextStatus,\n    getStartCaptionsInProgress,\n    allRemoteParticipantsSelector,\n    getDisplayName,\n    getIdentifier\n  ],\n  (\n    captions,\n    realTimeTexts,\n    isCaptionsFeatureActive,\n    isRealTimeTextActive,\n    startCaptionsInProgress,\n    allRemoteParticipants,\n    displayName,\n    identifier\n  ) => {\n    const captionsInfo = captions?.map((c, index) => {\n      const userId = getCaptionsSpeakerIdentifier(c);\n      let finalDisplayName;\n      if (userId === identifier) {\n        finalDisplayName = displayName;\n      } else {\n        finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n      }\n\n      return {\n        id: (finalDisplayName ?? 'Unnamed Participant') + index,\n        displayName: finalDisplayName ?? 'Unnamed Participant',\n        captionText: c.captionText,\n        userId,\n        createdTimeStamp: c.timestamp,\n        isFinalized: c.resultType === 'Final'\n      };\n    });\n\n    const completedRealTimeTexts = realTimeTexts?.completedMessages\n      ?.filter((rtt) => rtt.message !== '')\n      .map((rtt) => {\n        const userId = getRealTimeTextSpeakerIdentifier(rtt);\n        return {\n          id: rtt.sequenceId,\n          displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n          message: rtt.message,\n          userId,\n          isTyping: rtt.resultType === 'Partial',\n          isMe: rtt.isMe,\n          finalizedTimeStamp: rtt.updatedTimestamp\n        };\n      });\n\n    const inProgressRealTimeTexts = realTimeTexts?.currentInProgress\n      ?.filter((rtt) => rtt.message !== '')\n      .map((rtt) => {\n        const userId = getRealTimeTextSpeakerIdentifier(rtt);\n        return {\n          id: rtt.sequenceId,\n          displayName: getRealTimeTextDisplayName(rtt, identifier, allRemoteParticipants, displayName, userId),\n          message: rtt.message,\n          userId,\n          isTyping: rtt.resultType === 'Partial',\n          isMe: rtt.isMe,\n          finalizedTimeStamp: rtt.updatedTimestamp\n        };\n      });\n\n    const myInProgress =\n      realTimeTexts?.myInProgress && realTimeTexts.myInProgress.message !== ''\n        ? {\n            id: realTimeTexts.myInProgress.sequenceId,\n            displayName: displayName,\n            message: realTimeTexts.myInProgress.message,\n            userId: identifier,\n            isTyping: realTimeTexts.myInProgress.resultType === 'Partial',\n            isMe: true,\n            finalizedTimeStamp: realTimeTexts.myInProgress.updatedTimestamp\n          }\n        : undefined;\n\n    // find the last final local real time text caption if myInProgress is not available\n    let latestLocalRealTimeText;\n\n    if (!myInProgress) {\n      latestLocalRealTimeText =\n        realTimeTexts &&\n        realTimeTexts.completedMessages &&\n        realTimeTexts.completedMessages\n          .slice()\n          .reverse()\n          .find((rtt) => rtt.isMe);\n    }\n\n    return {\n      captions: captionsInfo ?? [],\n      realTimeTexts: {\n        completedMessages: completedRealTimeTexts as RealTimeTextInformation[],\n        currentInProgress: inProgressRealTimeTexts as RealTimeTextInformation[],\n        myInProgress: myInProgress as RealTimeTextInformation\n      },\n      isCaptionsOn: isCaptionsFeatureActive ?? false,\n      startCaptionsInProgress: startCaptionsInProgress ?? false,\n      isRealTimeTextOn: isRealTimeTextActive ?? false,\n      latestLocalRealTimeText: (myInProgress ?? latestLocalRealTimeText) as RealTimeTextInformation\n    };\n  }\n);\n\nconst getCaptionsSpeakerIdentifier = (captions: CaptionsInfo): string => {\n  return captions.speaker.identifier ? toFlatCommunicationIdentifier(captions.speaker.identifier) : '';\n};\n\nconst getRealTimeTextSpeakerIdentifier = (realTimeText: RealTimeTextInfo): string => {\n  return realTimeText.sender.identifier ? toFlatCommunicationIdentifier(realTimeText.sender.identifier) : '';\n};\n\nconst getRealTimeTextDisplayName = (\n  realTimeText: RealTimeTextInfo,\n  identifier: string,\n  allRemoteParticipants:\n    | {\n        [keys: string]: RemoteParticipantState;\n      }\n    | undefined,\n  displayName: string | undefined,\n  userId: string\n): string => {\n  let finalDisplayName;\n  if (userId === identifier) {\n    finalDisplayName = displayName;\n  } else {\n    finalDisplayName = getRemoteParticipantDisplayName(userId, allRemoteParticipants);\n  }\n  return finalDisplayName ?? 'Unnamed Participant';\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts

@@ -27,6 +27,10 @@ export type CaptionsInformation = {
      * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated
      */
     createdTimeStamp?: Date;
+    /**
+     * If caption is finalized
+     */
+    isFinalized?: boolean;
 };
 /**
  * @public

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js

@@ -5,7 +5,7 @@ import { TextField } from '@fluentui/react';
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useMemo } from 'react';
 import { _Caption } from './Caption';
-import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
+import { captionContainerClassName, captionsBannerClassName, captionsBannerFullHeightClassName, captionsContainerClassName, hiddenAnnouncementClassName, loadingBannerFullHeightStyles, loadingBannerStyles } from './styles/Captions.style';
 import { rttDisclosureBannerClassName } from './styles/Captions.style';
 import { useLocale } from '../localization';
 import { RealTimeText } from './RealTimeText';
@@ -28,6 +28,10 @@ export const CaptionsBanner = (props) => {
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
     const theme = useTheme();
     const [expandBannerHeight, setExpandBannerHeight] = useState(false);
+    const [announcedRTT, setAnnouncedRTT] = useState([]);
+    const [announcedCaption, setAnnouncedCaption] = useState([]);
+    const [captionAnnouncementText, setCaptionAnnouncementText] = useState([]);
+    const [rttAnnouncementText, setRTTAnnouncementText] = useState([]);
     const getTitle = () => {
         var _a, _b, _c;
         if (isCaptionsOn && isRealTimeTextOn) {
@@ -84,6 +88,24 @@ export const CaptionsBanner = (props) => {
             setTextFieldValue('');
         }
     }, [latestLocalRealTimeText]);
+    useEffect(() => {
+        if (realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages) {
+            //filter out the messages that have already been announced
+            const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter((message) => !announcedRTT.includes(message.id));
+            if (rTTMessagesToAnnounce.length > 0) {
+                setRTTAnnouncementText(rTTMessagesToAnnounce);
+                setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);
+            }
+        }
+        if (captions.length > 0) {
+            // filter out the captions that have already been announced
+            const captionsToAnnounce = captions.filter((caption) => !announcedCaption.includes(caption.id) && caption.isFinalized);
+            if (captionsToAnnounce.length > 0) {
+                setCaptionAnnouncementText(captionsToAnnounce);
+                setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);
+            }
+        }
+    }, [captions, realTimeTexts === null || realTimeTexts === void 0 ? void 0 : realTimeTexts.completedMessages, announcedRTT, announcedCaption]);
     const handleKeyDown = (event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
@@ -111,6 +133,19 @@ export const CaptionsBanner = (props) => {
         })));
     };
     return (React.createElement(React.Fragment, null, (startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (React.createElement(FocusZone, { shouldFocusOnMount: true, className: captionsContainerClassName, "data-ui-id": "captions-banner" },
+        (rttAnnouncementText.length > 0 || (captionAnnouncementText === null || captionAnnouncementText === void 0 ? void 0 : captionAnnouncementText.length) > 0) && (React.createElement("div", { "aria-live": "assertive", role: "alert", "aria-atomic": "true", className: hiddenAnnouncementClassName },
+            React.createElement("span", null, rttAnnouncementText.map((text) => (React.createElement("span", null,
+                strings.realTimeTextBannerTitle,
+                " ",
+                text.displayName,
+                ": ",
+                text.message)))),
+            React.createElement("span", null, captionAnnouncementText.map((text) => (React.createElement("span", null,
+                strings.captionsOnlyContainerTitle,
+                " ",
+                text.displayName,
+                ": ",
+                text.captionText)))))),
         (isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: bannerTitleContainerClassName },
             React.createElement(Text, { className: titleClassName }, getTitle()),
             React.createElement(IconButton, { "data-ui-id": "captions-banner-expand-icon", iconProps: { iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }, ariaLabel: expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel, onClick: () => setExpandBannerHeight(!expandBannerHeight), styles: expandIconClassName(theme) }))),

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n  expandIconClassName,\n  bannerTitleContainerClassName,\n  realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return (\n      <>\n        {mergedCaptions\n          .filter((caption) => caption)\n          .map((caption) => {\n            if ('message' in caption) {\n              return (\n                <div\n                  key={`RealTimeText - ${caption.id}`}\n                  className={captionContainerClassName}\n                  data-is-focusable={true}\n                >\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </div>\n              );\n            }\n            return (\n              <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </div>\n            );\n          })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={bannerTitleContainerClassName}\n            >\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton\n                data-ui-id=\"captions-banner-expand-icon\"\n                iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n                ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n                onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n                styles={expandIconClassName(theme)}\n              />\n            </Stack>\n          )}\n          {(isCaptionsOn || isRealTimeTextOn) && (\n            <div\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor, expandBannerHeight)\n              }\n              data-ui-id=\"captions-banner-inner\"\n              data-is-focusable={true}\n            >\n              {isRealTimeTextOn && (\n                <Stack className={rttDisclosureBannerClassName()}>\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                </Stack>\n              )}\n              {captionsAndRealTimeText()}\n            </div>\n          )}\n          {isRealTimeTextOn && onSendRealTimeText && (\n            <TextField\n              styles={realTimeTextInputBoxStyles(theme)}\n              placeholder={strings.realTimeTextInputBoxDefaultText}\n              value={textFieldValue}\n              onKeyDown={handleKeyDown}\n              onChange={(_, newValue) => {\n                setTextFieldValue(newValue || '');\n                onSendRealTimeText(newValue || '', false);\n              }}\n              maxLength={2000}\n              errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n            />\n          )}\n          {!isCaptionsOn && !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport { Stack, FocusZone, Spinner, useTheme } from '@fluentui/react';\nimport { TextField } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { useMemo } from 'react';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsBannerFullHeightClassName,\n  captionsContainerClassName,\n  hiddenAnnouncementClassName,\n  loadingBannerFullHeightStyles,\n  loadingBannerStyles\n} from './styles/Captions.style';\nimport { rttDisclosureBannerClassName } from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\nimport { useLocale } from '../localization';\nimport { RealTimeText } from './RealTimeText';\nimport { _RTTDisclosureBanner } from './RTTDisclosureBanner';\nimport { sortCaptionsAndRealTimeTexts } from './utils/sortCaptionsAndRealTimeTexts';\nimport {\n  expandIconClassName,\n  bannerTitleContainerClassName,\n  realTimeTextInputBoxStyles\n} from './styles/Captions.style';\nimport { titleClassName } from './styles/CaptionsSettingsModal.styles';\nimport { Text, IconButton } from '@fluentui/react';\n\n/**\n * @public\n * information required for each line of caption\n */\nexport type CaptionsInformation = {\n  /**\n   * unique id for each caption\n   */\n  id: string;\n  /**\n   * speaker's display name\n   */\n  displayName: string;\n  /**\n   * content of the caption\n   */\n  captionText: string;\n  /**\n   * id of the speaker\n   */\n  userId?: string;\n  /**\n   * timestamp when the caption was created\n   * Please note that this value is essential for determining the order of captions and real time text messages\n   * If you are using both captions and real time text, please ensure that the createdTimeStamp is populated\n   */\n  createdTimeStamp?: Date;\n  /**\n   * If caption is finalized\n   */\n  isFinalized?: boolean;\n};\n\n/**\n * @public\n * information required for each line of real time text\n */\nexport type RealTimeTextInformation = {\n  /**\n   * The id of the real time text.\n   */\n  id: number;\n  /**\n   * sender's display name\n   */\n  displayName: string;\n  /**\n   * id of the sender\n   */\n  userId?: string;\n  /**\n   * The real time text message.\n   */\n  message: string;\n  /**\n   * if the real time text received is partial\n   */\n  isTyping: boolean;\n  /**\n   * timestamp when the real time text was finalized\n   */\n  finalizedTimeStamp: Date;\n  /**\n   * If message originated from the local participant\n   * default value is false\n   */\n  isMe?: boolean;\n};\n/**\n * @public\n * strings for captions banner\n */\nexport interface CaptionsBannerStrings {\n  /**\n   * Spinner text for captions banner\n   */\n  captionsBannerSpinnerText?: string;\n\n  /**\n   * Default text for RTT input text box\n   */\n  realTimeTextInputBoxDefaultText?: string;\n\n  /**\n   * Error message for RTT input text box when the size exceeds the limit 2000\n   */\n  realTimeTextInputErrorMessage?: string;\n\n  /**\n   * Real time text disclosure banner title\n   */\n  realTimeTextBannerTitle?: string;\n\n  /**\n   * Real time text disclosure banner content\n   */\n  realTimeTextBannerContent?: string;\n\n  /**\n   * Real time text disclosure banner link label\n   */\n  realTimeTextBannerLinkLabel?: string;\n\n  /**\n   * Title for the container when only captions is enabled\n   */\n  captionsOnlyContainerTitle?: string;\n  /**\n   * Title for the container when only real time text is enabled\n   */\n  realTimeTextOnlyContainerTitle?: string;\n  /**\n   * Title for the container when both captions and real time text is enabled\n   */\n  captionsAndRealTimeTextContainerTitle?: string;\n  /**\n   * Expand button aria label\n   */\n  expandButtonAriaLabel?: string;\n  /**\n   * Minimize button aria label\n   */\n  minimizeButtonAriaLabel?: string;\n}\n\n/**\n * @public\n * CaptionsBanner Component Props.\n */\nexport interface CaptionsBannerProps {\n  /**\n   * Array of captions to be displayed\n   */\n  captions: CaptionsInformation[];\n  /**\n   * Array of finalized and partial real time text messages\n   */\n  realTimeTexts?: {\n    completedMessages?: RealTimeTextInformation[];\n    currentInProgress?: RealTimeTextInformation[];\n    myInProgress?: RealTimeTextInformation;\n  };\n  /**\n   * Flag to indicate if captions are on\n   */\n  isCaptionsOn?: boolean;\n\n  /**\n   * Flag to indicate if real time text is on\n   */\n  isRealTimeTextOn?: boolean;\n  /**\n   * Flag to indicate if captions are being started\n   * This is used to show spinner while captions are being started\n   */\n  startCaptionsInProgress?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n  /**\n   * Optional strings for the component\n   */\n  strings?: CaptionsBannerStrings;\n  /**\n   * Optional form factor for the component.\n   * @defaultValue 'default'\n   */\n  formFactor?: 'default' | 'compact';\n  /**\n   * Optional options for the component.\n   */\n  captionsOptions?: {\n    height: 'full' | 'default';\n  };\n\n  /**\n   * Optional callback to send real time text.\n   */\n  onSendRealTimeText?: (text: string, isFinalized: boolean) => Promise<void>;\n\n  /**\n   * Latest local real time text\n   */\n  latestLocalRealTimeText?: RealTimeTextInformation;\n}\n\nconst SCROLL_OFFSET_ALLOWANCE = 20;\n\n/**\n * @public\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {\n  const {\n    captions,\n    realTimeTexts,\n    isCaptionsOn,\n    startCaptionsInProgress,\n    onRenderAvatar,\n    formFactor = 'default',\n    captionsOptions,\n    isRealTimeTextOn,\n    onSendRealTimeText,\n    latestLocalRealTimeText\n  } = props;\n  const localeStrings = useLocale().strings.captionsBanner;\n  const strings = { ...localeStrings, ...props.strings };\n  const captionsScrollDivRef = useRef<HTMLDivElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n  const theme = useTheme();\n\n  const [expandBannerHeight, setExpandBannerHeight] = useState<boolean>(false);\n  const [announcedRTT, setAnnouncedRTT] = useState<number[]>([]);\n  const [announcedCaption, setAnnouncedCaption] = useState<string[]>([]);\n  const [captionAnnouncementText, setCaptionAnnouncementText] = useState<CaptionsInformation[]>([]);\n  const [rttAnnouncementText, setRTTAnnouncementText] = useState<RealTimeTextInformation[]>([]);\n\n  const getTitle = (): string => {\n    if (isCaptionsOn && isRealTimeTextOn) {\n      return strings.captionsAndRealTimeTextContainerTitle ?? '';\n    } else if (isCaptionsOn) {\n      return strings.captionsOnlyContainerTitle ?? '';\n    } else if (isRealTimeTextOn) {\n      return strings.realTimeTextOnlyContainerTitle ?? '';\n    }\n    return '';\n  };\n\n  // merge realtimetexts and captions into one array based on timestamp\n  // Combine captions and realTimeTexts into one list\n  const combinedList: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return sortCaptionsAndRealTimeTexts(captions, realTimeTexts?.completedMessages ?? []);\n  }, [captions, realTimeTexts?.completedMessages]);\n\n  const mergedCaptions: (CaptionsInformation | RealTimeTextInformation)[] = useMemo(() => {\n    return [...combinedList, ...(realTimeTexts?.currentInProgress ?? []), realTimeTexts?.myInProgress].slice(-50) as (\n      | CaptionsInformation\n      | RealTimeTextInformation\n    )[];\n  }, [combinedList, realTimeTexts]);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight - SCROLL_OFFSET_ALLOWANCE;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom, isCaptionsOn, isRealTimeTextOn]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, realTimeTexts, isAtBottomOfScroll]);\n\n  const [textFieldValue, setTextFieldValue] = useState<string>('');\n\n  useEffect(() => {\n    // if the latest real time text sent by myself is final, clear the text field\n    if (latestLocalRealTimeText && !latestLocalRealTimeText.isTyping) {\n      setTextFieldValue('');\n    }\n  }, [latestLocalRealTimeText]);\n\n  useEffect(() => {\n    if (realTimeTexts?.completedMessages) {\n      //filter out the messages that have already been announced\n      const rTTMessagesToAnnounce = realTimeTexts.completedMessages.filter(\n        (message) => !announcedRTT.includes(message.id)\n      );\n      if (rTTMessagesToAnnounce.length > 0) {\n        setRTTAnnouncementText(rTTMessagesToAnnounce);\n        setAnnouncedRTT((prev) => [...prev, ...rTTMessagesToAnnounce.map((message) => message.id)]);\n      }\n    }\n    if (captions.length > 0) {\n      // filter out the captions that have already been announced\n      const captionsToAnnounce = captions.filter(\n        (caption) => !announcedCaption.includes(caption.id) && caption.isFinalized\n      );\n      if (captionsToAnnounce.length > 0) {\n        setCaptionAnnouncementText(captionsToAnnounce);\n        setAnnouncedCaption((prev) => [...prev, ...captionsToAnnounce.map((caption) => caption.id)]);\n      }\n    }\n  }, [captions, realTimeTexts?.completedMessages, announcedRTT, announcedCaption]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (textFieldValue && onSendRealTimeText) {\n        onSendRealTimeText(textFieldValue, true);\n        setTextFieldValue('');\n      }\n    }\n  };\n\n  const realTimeTextDisclosureBannerStrings = {\n    bannerTitle: strings.realTimeTextBannerTitle ?? '',\n    bannerContent: strings.realTimeTextBannerContent ?? '',\n    bannerLinkLabel: strings.realTimeTextBannerLinkLabel ?? ''\n  };\n\n  const captionsAndRealTimeText = (): JSX.Element => {\n    return (\n      <>\n        {mergedCaptions\n          .filter((caption) => caption)\n          .map((caption) => {\n            if ('message' in caption) {\n              return (\n                <div\n                  key={`RealTimeText - ${caption.id}`}\n                  className={captionContainerClassName}\n                  data-is-focusable={true}\n                >\n                  <RealTimeText {...(caption as RealTimeTextInformation)} />\n                </div>\n              );\n            }\n            return (\n              <div key={`Captions - ${caption.id}`} className={captionContainerClassName} data-is-focusable={true}>\n                <_Caption {...(caption as CaptionsInformation)} onRenderAvatar={onRenderAvatar} />\n              </div>\n            );\n          })}\n      </>\n    );\n  };\n\n  return (\n    <>\n      {(startCaptionsInProgress || isCaptionsOn || isRealTimeTextOn) && (\n        <FocusZone shouldFocusOnMount className={captionsContainerClassName} data-ui-id=\"captions-banner\">\n          {/* ARIA live region */}\n          {(rttAnnouncementText.length > 0 || captionAnnouncementText?.length > 0) && (\n            <div aria-live=\"assertive\" role=\"alert\" aria-atomic=\"true\" className={hiddenAnnouncementClassName}>\n              <span>\n                {rttAnnouncementText.map((text) => (\n                  <span>\n                    {strings.realTimeTextBannerTitle} {text.displayName}: {text.message}\n                  </span>\n                ))}\n              </span>\n              <span>\n                {captionAnnouncementText.map((text) => (\n                  <span>\n                    {strings.captionsOnlyContainerTitle} {text.displayName}: {text.captionText}\n                  </span>\n                ))}\n              </span>\n            </div>\n          )}\n\n          {(isCaptionsOn || isRealTimeTextOn) && formFactor === 'compact' && (\n            <Stack\n              horizontal\n              horizontalAlign=\"space-between\"\n              verticalAlign=\"center\"\n              className={bannerTitleContainerClassName}\n            >\n              <Text className={titleClassName}>{getTitle()}</Text>\n              <IconButton\n                data-ui-id=\"captions-banner-expand-icon\"\n                iconProps={{ iconName: expandBannerHeight ? 'MinimizeIcon' : 'ExpandIcon' }}\n                ariaLabel={expandBannerHeight ? strings.minimizeButtonAriaLabel : strings.expandButtonAriaLabel}\n                onClick={() => setExpandBannerHeight(!expandBannerHeight)}\n                styles={expandIconClassName(theme)}\n              />\n            </Stack>\n          )}\n          {(isCaptionsOn || isRealTimeTextOn) && (\n            <div\n              ref={captionsScrollDivRef}\n              className={\n                captionsOptions?.height === 'full'\n                  ? captionsBannerFullHeightClassName(theme)\n                  : captionsBannerClassName(formFactor, expandBannerHeight)\n              }\n              data-ui-id=\"captions-banner-inner\"\n              data-is-focusable={true}\n            >\n              {isRealTimeTextOn && (\n                <Stack className={rttDisclosureBannerClassName()}>\n                  <_RTTDisclosureBanner strings={realTimeTextDisclosureBannerStrings} />\n                </Stack>\n              )}\n              {captionsAndRealTimeText()}\n            </div>\n          )}\n          {isRealTimeTextOn && onSendRealTimeText && (\n            <TextField\n              styles={realTimeTextInputBoxStyles(theme)}\n              placeholder={strings.realTimeTextInputBoxDefaultText}\n              value={textFieldValue}\n              onKeyDown={handleKeyDown}\n              onChange={(_, newValue) => {\n                setTextFieldValue(newValue || '');\n                onSendRealTimeText(newValue || '', false);\n              }}\n              maxLength={2000}\n              errorMessage={textFieldValue.length >= 2000 ? strings.realTimeTextInputErrorMessage : undefined}\n            />\n          )}\n          {!isCaptionsOn && !isRealTimeTextOn && (\n            <Stack\n              verticalAlign=\"center\"\n              styles={\n                captionsOptions?.height === 'full'\n                  ? loadingBannerFullHeightStyles(theme)\n                  : loadingBannerStyles(formFactor)\n              }\n              data-is-focusable={true}\n            >\n              <Spinner label={strings?.captionsBannerSpinnerText} ariaLive=\"assertive\" labelPosition=\"right\" />\n            </Stack>\n          )}\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/Captions.style.d.ts

@@ -40,6 +40,10 @@ export declare const captionClassName: string;
  * @private
  */
 export declare const captionsContainerClassName: string;
+/**
+ * @private
+ */
+export declare const hiddenAnnouncementClassName: string;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/Captions.style.js

@@ -101,6 +101,19 @@ export const captionsContainerClassName = mergeStyles({
     padding: 0,
     overflowX: 'hidden'
 });
+/**
+ * @private
+ */
+export const hiddenAnnouncementClassName = mergeStyles({
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    whiteSpace: 'nowrap',
+    border: 0
+});
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/Captions.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n  marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(16)\n});\n\n/**\n * @private\n */\nexport const bannerTitleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(10)\n});\n\n/**\n * @private\n */\nexport const isTypingClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    backgroundColor: theme.palette.themeLighter,\n    color: theme.palette.themeDarker,\n    borderRadius: _pxToRem(4),\n    marginLeft: _pxToRem(4),\n    fontWeight: 400,\n    paddingLeft: _pxToRem(4),\n    paddingRight: _pxToRem(4),\n    fontSize: _pxToRem(11),\n    lineHeight: _pxToRem(16)\n  });\n};\n\n/**\n * @private\n */\nexport const rttContainerClassName = (theme: ITheme, isTyping: boolean): string => {\n  return mergeStyles({\n    borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'\n  });\n};\n\n/**\n * @private\n */\nexport const rttDisclosureBannerClassName = (): string => {\n  return mergeStyles({\n    padding: '0.25rem',\n    paddingTop: '0.5rem'\n  });\n};\n\n/**\n * @private\n */\nexport const realTimeTextInputBoxStyles = (theme: ITheme): Partial<ITextFieldStyles> => ({\n  root: {\n    marginBottom: _pxToRem(8)\n  },\n  fieldGroup: {\n    borderRadius: _pxToRem(4),\n    borderColor: theme.palette.neutralQuaternaryAlt\n  }\n});\n\n/**\n * @private\n */\nexport const expandIconClassName = (theme: ITheme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(22),\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n  height: '100%',\n  margin: 0,\n  overflow: 'auto',\n  padding: 0,\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n  marginTop: _pxToRem(6),\n  marginBottom: _pxToRem(6),\n  textAlign: 'unset', // ensure RTL spoken language captions are appropriately aligned to the right\n  overflowAnchor: 'auto',\n  overflowWrap: 'break-word',\n  wordBreak: 'break-word', // Additional breaking control for long words\n  maxWidth: '100%', // Ensure it never expands beyond 100% of the container\n  width: '100%',\n  overflow: 'hidden',\n  boxSizing: 'border-box', // Include padding in the width calculation\n  whiteSpace: 'normal' // Ensure text wraps\n});\n\n/** Reset styling set by the `ul` element */\nconst resetUlStyling = {\n  listStyleType: 'none',\n  padding: 0,\n  margin: 0\n};\n\n/**\n * @private\n */\nexport const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    height: formFactor === 'compact' ? (isExpanded ? '40vh' : '4.5rem') : '8.75rem',\n    overflowY: 'auto'\n  });\n};\n\n/**\n * @private\n */\nexport const captionsBannerFullHeightClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    height: '100%',\n    width: '100%',\n    position: 'absolute',\n    backgroundColor: theme.palette.white,\n    left: 0\n  });\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n  return {\n    root: {\n      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {\n  return {\n    root: {\n      height: '100%',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      backgroundColor: theme.palette.white\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n  width: '100%',\n  paddingInlineEnd: _pxToRem(4)\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis'\n});\n"]}
+{"version":3,"file":"Captions.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/Captions.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { IButtonStyles, ITextFieldStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const iconClassName = mergeStyles({\n  marginRight: _pxToRem(8)\n});\n\n/**\n * @private\n */\nexport const displayNameClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(12),\n  lineHeight: _pxToRem(16)\n});\n\n/**\n * @private\n */\nexport const bannerTitleContainerClassName = mergeStyles({\n  paddingBottom: _pxToRem(10)\n});\n\n/**\n * @private\n */\nexport const isTypingClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    backgroundColor: theme.palette.themeLighter,\n    color: theme.palette.themeDarker,\n    borderRadius: _pxToRem(4),\n    marginLeft: _pxToRem(4),\n    fontWeight: 400,\n    paddingLeft: _pxToRem(4),\n    paddingRight: _pxToRem(4),\n    fontSize: _pxToRem(11),\n    lineHeight: _pxToRem(16)\n  });\n};\n\n/**\n * @private\n */\nexport const rttContainerClassName = (theme: ITheme, isTyping: boolean): string => {\n  return mergeStyles({\n    borderLeft: isTyping ? `2px solid ${theme.palette.themeLighter}` : 'none'\n  });\n};\n\n/**\n * @private\n */\nexport const rttDisclosureBannerClassName = (): string => {\n  return mergeStyles({\n    padding: '0.25rem',\n    paddingTop: '0.5rem'\n  });\n};\n\n/**\n * @private\n */\nexport const realTimeTextInputBoxStyles = (theme: ITheme): Partial<ITextFieldStyles> => ({\n  root: {\n    marginBottom: _pxToRem(8)\n  },\n  fieldGroup: {\n    borderRadius: _pxToRem(4),\n    borderColor: theme.palette.neutralQuaternaryAlt\n  }\n});\n\n/**\n * @private\n */\nexport const expandIconClassName = (theme: ITheme): IButtonStyles => {\n  return {\n    root: {\n      color: theme.palette.neutralPrimary,\n      width: '1rem',\n      height: '1rem'\n    },\n    rootHovered: {\n      color: theme.palette.neutralDark\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionClassName = mergeStyles({\n  fontWeight: 400,\n  fontSize: _pxToRem(16),\n  lineHeight: _pxToRem(22),\n  width: '100%'\n});\n\n/**\n * @private\n */\nexport const captionsContainerClassName = mergeStyles({\n  height: '100%',\n  margin: 0,\n  overflow: 'auto',\n  padding: 0,\n  overflowX: 'hidden'\n});\n\n/**\n * @private\n */\nexport const hiddenAnnouncementClassName = mergeStyles({\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0\n});\n\n/**\n * @private\n */\nexport const captionContainerClassName = mergeStyles({\n  marginTop: _pxToRem(6),\n  marginBottom: _pxToRem(6),\n  textAlign: 'unset', // ensure RTL spoken language captions are appropriately aligned to the right\n  overflowAnchor: 'auto',\n  overflowWrap: 'break-word',\n  wordBreak: 'break-word', // Additional breaking control for long words\n  maxWidth: '100%', // Ensure it never expands beyond 100% of the container\n  width: '100%',\n  overflow: 'hidden',\n  boxSizing: 'border-box', // Include padding in the width calculation\n  whiteSpace: 'normal' // Ensure text wraps\n});\n\n/** Reset styling set by the `ul` element */\nconst resetUlStyling = {\n  listStyleType: 'none',\n  padding: 0,\n  margin: 0\n};\n\n/**\n * @private\n */\nexport const captionsBannerClassName = (formFactor: 'default' | 'compact', isExpanded?: boolean): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    height: formFactor === 'compact' ? (isExpanded ? '40vh' : '4.5rem') : '8.75rem',\n    overflowY: 'auto'\n  });\n};\n\n/**\n * @private\n */\nexport const captionsBannerFullHeightClassName = (theme: ITheme): string => {\n  return mergeStyles({\n    ...resetUlStyling,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    height: '100%',\n    width: '100%',\n    position: 'absolute',\n    backgroundColor: theme.palette.white,\n    left: 0\n  });\n};\n\n/**\n * @private\n */\nexport const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {\n  return {\n    root: {\n      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {\n  return {\n    root: {\n      height: '100%',\n      width: '100%',\n      position: 'absolute',\n      left: 0,\n      backgroundColor: theme.palette.white\n    }\n  };\n};\n\n/**\n * @private\n */\nexport const captionsContentContainerClassName = mergeStyles({\n  width: '100%',\n  paddingInlineEnd: _pxToRem(4)\n});\n\n/**\n * @private\n */\nexport const displayNameContainerClassName = mergeStyles({\n  overflow: 'hidden',\n  textOverflow: 'ellipsis'\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.28.0-alpha-202506060018",
+  "version": "1.28.0-alpha-202506070019",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [