@azure/communication-react 1.5.1-alpha-202304140012 → 1.5.1-alpha-202304172318

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

@@ -162,7 +162,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202304140012';
+var telemetryVersion = '1.5.1-alpha-202304172318';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -375,10 +375,40 @@ const getEnvironmentInfo = (state) => {
     /* @conditional-compile-remove(unsupported-browser) */
     return state.environmentInfo;
 };
+/* @conditional-compile-remove(close-captions) */
+/** @private */
+const getCaptions = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.captions;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
+const getCaptionsStatus = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.isCaptionsFeatureActive;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
+const getCurrentCaptionLanguage = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.currentCaptionLanguage;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
+const getCurrentSpokenLanguage = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.currentSpokenLanguage;
+};
+/* @conditional-compile-remove(close-captions) */
+/** @private */
+const getSupportedSpokenLanguages = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.supportedSpokenLanguages;
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -416,7 +446,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$F(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$J(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -455,13 +485,6 @@ const memoizedUpdateDisplayName = memoizeFnAll((participantId, participant) => {
 const isTeamsCallParticipants = (participants) => {
     return participants.every((p) => !communicationCommon.isCommunicationUserIdentifier(p));
 };
-/**
- * @private
- * A type guard to ensure all participants are acceptable type for ACS call
- */
-const isACSCallParticipants = (participants) => {
-    return participants.every((p) => !communicationCommon.isMicrosoftTeamsUserIdentifier(p));
-};
 /**
  * @private
  * Checks whether the user is a 'Ringing' PSTN user.
@@ -549,7 +572,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -570,7 +593,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callClient, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$I(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -590,7 +613,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$I(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -599,7 +622,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$I(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         if (previewOn && call && call.state === 'Connecting') {
             // This is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
@@ -647,19 +670,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -682,19 +705,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$E(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = (forEveryone) => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
+    const onStartScreenShare = () => __awaiter$I(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$I(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$I(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = (forEveryone) => __awaiter$I(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$E(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$I(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$I(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -710,7 +733,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -741,7 +764,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -762,7 +785,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$I(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -775,18 +798,18 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$E(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$I(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     const notImplemented = () => {
         throw new Error('Not implemented, cannot call a method from an abstract object');
     };
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onRemoveVideoBackgroundEffects = () => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$I(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -794,7 +817,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$I(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -802,7 +825,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$E(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$I(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -811,6 +834,22 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
                 .startEffects(new communicationCallingEffects.BackgroundReplacementEffect(backgroundReplacementConfig));
         }
     });
+    /* @conditional-compile-remove(close-captions) */
+    const onStartCaptions = (options) => __awaiter$I(void 0, void 0, void 0, function* () {
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).startCaptions(options));
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const onStopCaptions = () => __awaiter$I(void 0, void 0, void 0, function* () {
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).stopCaptions());
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const onSetSpokenLanguage = (language) => __awaiter$I(void 0, void 0, void 0, function* () {
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).setSpokenLanguage(language));
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const onSetCaptionLanguage = (language) => __awaiter$I(void 0, void 0, void 0, function* () {
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).setCaptionLanguage(language));
+    });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -840,13 +879,21 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         /* @conditional-compile-remove(video-background-effects) */
         onBlurVideoBackground,
         /* @conditional-compile-remove(video-background-effects) */
-        onReplaceVideoBackground
+        onReplaceVideoBackground,
+        /* @conditional-compile-remove(close-captions) */
+        onStartCaptions,
+        /* @conditional-compile-remove(close-captions) */
+        onStopCaptions,
+        /* @conditional-compile-remove(close-captions) */
+        onSetCaptionLanguage,
+        /* @conditional-compile-remove(close-captions) */
+        onSetSpokenLanguage
     };
 });
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -867,13 +914,11 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     return Object.assign(Object.assign({}, createDefaultCommonCallingHandlers(callClient, deviceManager, call)), { 
         // FIXME: onStartCall API should use string, not the underlying SDK types.
         onStartCall: (participants, options) => {
-            if (!isACSCallParticipants(participants)) {
-                throw new Error('TeamsUserIdentifier in Teams call is not supported!');
-            }
-            return callAgent ? callAgent.startCall(participants, options) : undefined;
+            /* @conditional-compile-remove(teams-adhoc-call) */
+            return callAgent === null || callAgent === void 0 ? void 0 : callAgent.startCall(participants, options);
         }, 
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$D(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$H(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isPhoneNumberIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant, options);
@@ -881,7 +926,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$D(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$H(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -889,7 +934,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -921,7 +966,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         }, 
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$C(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$G(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             /* @conditional-compile-remove(teams-identity-support) */
             const threadId = options === null || options === void 0 ? void 0 : options.threadId;
@@ -934,7 +979,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
             }
             /* @conditional-compile-remove(teams-identity-support) */
             call === null || call === void 0 ? void 0 : call.addParticipant(participant);
-        }), onRemoveParticipant: (userId) => __awaiter$C(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$G(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isCommunicationUserIdentifier(participant)) {
                 throw new Error('CommunicationIdentifier in Teams call is not supported!');
@@ -944,9 +989,57 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         }) });
 });
 
+/* @conditional-compile-remove(close-captions) */
+/* @conditional-compile-remove(close-captions) */
+/**
+ * Selector for {@link StartCaptionsButton} component.
+ *
+ * @internal
+ */
+const _startCaptionsButtonSelector = reselect__namespace.createSelector([getCaptionsStatus, getCurrentCaptionLanguage, getCurrentSpokenLanguage], (isCaptionsFeatureActive, currentCaptionLanguage, currentSpokenLanguage) => {
+    return {
+        checked: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false,
+        currentCaptionLanguage: currentCaptionLanguage !== null && currentCaptionLanguage !== void 0 ? currentCaptionLanguage : 'en-us',
+        currentSpokenLanguage: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : 'en-us'
+    };
+});
+/* @conditional-compile-remove(close-captions) */
+/**
+ * Selector for {@link ChangeSpokenLanguageButton} component.
+ *
+ * @internal
+ */
+const _changeSpokenLanguageSelector = reselect__namespace.createSelector([getSupportedSpokenLanguages, getCurrentSpokenLanguage, getCaptionsStatus], (supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive) => {
+    return {
+        supportedSpokenLanguages: supportedSpokenLanguages !== null && supportedSpokenLanguages !== void 0 ? supportedSpokenLanguages : ['en-us'],
+        currentSpokenLanguage: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : 'en-us',
+        isCaptionsFeatureActive: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false
+    };
+});
+/* @conditional-compile-remove(close-captions) */
+/**
+ * Selector for {@link CaptionsBanner} component.
+ *
+ * @internal
+ */
+const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions, getCaptionsStatus], (captions, isCaptionsFeatureActive) => {
+    const captionsInfo = captions === null || captions === void 0 ? void 0 : captions.map((c) => {
+        var _a, _b;
+        return {
+            displayName: (_a = c.speaker.displayName) !== null && _a !== void 0 ? _a : 'Unnamed Participant',
+            captionText: (_b = c.captionText) !== null && _b !== void 0 ? _b : '',
+            userId: c.speaker.identifier ? toFlatCommunicationIdentifier(c.speaker.identifier) : ''
+        };
+    });
+    return {
+        captions: captionsInfo !== null && captionsInfo !== void 0 ? captionsInfo : [],
+        isCaptionsOn: isCaptionsFeatureActive !== null && isCaptionsFeatureActive !== void 0 ? isCaptionsFeatureActive : false
+    };
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -995,13 +1088,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$B(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$F(this, void 0, void 0, function* () {
             // Device Manager always has a camera with '' name if there are no real camera devices available.
             // We don't want to show that in the UI.
             const realCameras = (yield this._deviceManager.getCameras()).filter((c) => !!c.name);
             this._context.setDeviceManagerCameras(dedupeById(realCameras));
         });
-        this.audioDevicesUpdated = () => __awaiter$B(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$F(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1204,7 +1297,170 @@ class CallIdHistory {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+/**
+ * @internal
+ */
+const _isACSCall = (call) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return !call.kind || call.kind === 'Call';
+};
+/**
+ * @internal
+ */
+const _isACSCallAgent = (callAgent) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return !callAgent.kind || callAgent.kind === 'CallAgent';
+};
+/**
+ * @internal
+ */
+const _isTeamsCall = (call) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return call.kind === 'TeamsCall';
+};
+/**
+ * @internal
+ */
+const _isTeamsCallAgent = (callAgent) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return callAgent.kind === 'TeamsCallAgent';
+};
+/* @conditional-compile-remove(close-captions) */
+/**
+ * @private
+ * Determine whether a call is:
+ * A TeamsCall
+ * or a ACS Call joining the teams meeting
+ */
+const _isTeamsMeetingCall = (call) => {
+    return _isTeamsCall(call) || (_isACSCall(call) && !call.info.groupId && !call.info.roomId); // there should be a better way to determine if a call is joining a teams meeting ideally should be a meetingID in the info object
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+function convertSdkLocalStreamToDeclarativeLocalStream(stream) {
+    return {
+        source: stream.source,
+        mediaStreamType: stream.mediaStreamType,
+        view: undefined
+        // TODO [video-background-effects]: Add video effects state when it is added to the SDK
+    };
+}
+/**
+ * @private
+ */
+function convertSdkRemoteStreamToDeclarativeRemoteStream(stream) {
+    return {
+        id: stream.id,
+        mediaStreamType: stream.mediaStreamType,
+        isAvailable: stream.isAvailable,
+        /* @conditional-compile-remove(video-stream-is-receiving-flag) */
+        isReceiving: stream.isReceiving,
+        view: undefined
+    };
+}
+/**
+ * @private
+ */
+function convertSdkParticipantToDeclarativeParticipant(participant) {
+    const declarativeVideoStreams = {};
+    for (const videoStream of participant.videoStreams) {
+        declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);
+    }
+    return {
+        identifier: participant.identifier,
+        displayName: participant.displayName,
+        state: participant.state,
+        callEndReason: participant.callEndReason,
+        videoStreams: declarativeVideoStreams,
+        isMuted: participant.isMuted,
+        isSpeaking: participant.isSpeaking
+    };
+}
+/**
+ * @private
+ *
+ * Note at the time of writing only one LocalVideoStream is supported by the SDK.
+ */
+function convertSdkCallToDeclarativeCall(call) {
+    const declarativeRemoteParticipants = {};
+    call.remoteParticipants.forEach((participant) => {
+        declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =
+            convertSdkParticipantToDeclarativeParticipant(participant);
+    });
+    return {
+        id: call.id,
+        /* @conditional-compile-remove(teams-identity-support) */
+        kind: _isACSCall(call) ? 'Call' : 'TeamsCall',
+        callerInfo: call.callerInfo,
+        state: call.state,
+        callEndReason: call.callEndReason,
+        diagnostics: {
+            network: {
+                latest: {}
+            },
+            media: {
+                latest: {}
+            }
+        },
+        direction: call.direction,
+        isMuted: call.isMuted,
+        isScreenSharingOn: call.isScreenSharingOn,
+        localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),
+        remoteParticipants: declarativeRemoteParticipants,
+        remoteParticipantsEnded: {},
+        recording: { isRecordingActive: false },
+        transcription: { isTranscriptionActive: false },
+        screenShareRemoteParticipant: undefined,
+        startTime: new Date(),
+        endTime: undefined,
+        /* @conditional-compile-remove(rooms) */
+        role: call.role,
+        /* @conditional-compile-remove(close-captions) */
+        captionsFeature: {
+            captions: [],
+            supportedSpokenLanguages: [],
+            supportedCaptionLanguages: [],
+            currentCaptionLanguage: '',
+            currentSpokenLanguage: '',
+            isCaptionsFeatureActive: false
+        }
+    };
+}
+/**
+ * @private
+ */
+function convertSdkIncomingCallToDeclarativeIncomingCall(call) {
+    return {
+        id: call.id,
+        callerInfo: call.callerInfo,
+        startTime: new Date(),
+        endTime: undefined
+    };
+}
+/**
+ * @private
+ */
+function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
+    return {
+        scalingMode: view.scalingMode,
+        isMirrored: view.isMirrored,
+        target: view.target
+    };
+}
+/* @conditional-compile-remove(close-captions) */
+/**
+ * @private
+ */
+function convertFromSDKToCaptionInfoState(caption) {
+    return Object.assign({}, caption);
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1322,6 +1578,10 @@ class CallContext$2 {
                 /* @conditional-compile-remove(total-participant-count) */
                 existingCall.totalParticipantCount = call.totalParticipantCount;
                 // We don't update the startTime and endTime if we are updating an existing active call
+                /* @conditional-compile-remove(close-captions) */
+                existingCall.captionsFeature.currentSpokenLanguage = call.captionsFeature.currentSpokenLanguage;
+                /* @conditional-compile-remove(close-captions) */
+                existingCall.captionsFeature.currentCaptionLanguage = call.captionsFeature.currentCaptionLanguage;
             }
             else {
                 draft.calls[latestCallId] = call;
@@ -1779,6 +2039,81 @@ class CallContext$2 {
         this._atomicId++;
         return id;
     }
+    /* @conditional-compile-remove(close-captions) */
+    processNewCaption(captions, newCaption) {
+        // going through current captions to find the last caption said by the same speaker, remove that caption if it's partial and replace with the new caption
+        for (let index = captions.length - 1; index >= 0; index--) {
+            const currentCaption = captions[index];
+            if (currentCaption &&
+                currentCaption.resultType !== 'Final' &&
+                currentCaption.speaker.identifier &&
+                newCaption.speaker.identifier &&
+                toFlatCommunicationIdentifier(currentCaption.speaker.identifier) ===
+                    toFlatCommunicationIdentifier(newCaption.speaker.identifier)) {
+                captions.splice(index, 1);
+                break;
+            }
+        }
+        captions.push(newCaption);
+        // If the array length exceeds 50, remove the oldest caption
+        if (captions.length > 50) {
+            captions.shift();
+        }
+    }
+    /* @conditional-compile-remove(close-captions) */
+    addCaption(callId, caption) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                this.processNewCaption(call.captionsFeature.captions, convertFromSDKToCaptionInfoState(caption));
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setIsCaptionActive(callId, isCaptionsActive) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.isCaptionsFeatureActive = isCaptionsActive;
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setSelectedSpokenLanguage(callId, spokenLanguage) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.currentSpokenLanguage = spokenLanguage;
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setSelectedCaptionLanguage(callId, captionLanguage) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.currentCaptionLanguage = captionLanguage;
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setAvailableCaptionLanguages(callId, captionLanguages) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.supportedCaptionLanguages = captionLanguages;
+            }
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setAvailableSpokenLanguages(callId, spokenLanguages) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.captionsFeature.supportedSpokenLanguages = spokenLanguages;
+            }
+        });
+    }
     /**
      * Tees any errors encountered in an async function to the state.
      *
@@ -1788,7 +2123,7 @@ class CallContext$2 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$A(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$E(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -1852,139 +2187,40 @@ const findOldestCallEnded = (calls) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-/**
- * @internal
- */
-const _isACSCall = (call) => {
-    /* @conditional-compile-remove(teams-identity-support) */
-    return !call.kind || call.kind === 'Call';
-};
-/**
- * @internal
- */
-const _isACSCallAgent = (callAgent) => {
-    /* @conditional-compile-remove(teams-identity-support) */
-    return !callAgent.kind || callAgent.kind === 'CallAgent';
-};
-/**
- * @internal
- */
-const _isTeamsCall = (call) => {
-    /* @conditional-compile-remove(teams-identity-support) */
-    return call.kind === 'TeamsCall';
-};
-/**
- * @internal
- */
-const _isTeamsCallAgent = (callAgent) => {
-    /* @conditional-compile-remove(teams-identity-support) */
-    return callAgent.kind === 'TeamsCallAgent';
-};
-
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-function convertSdkLocalStreamToDeclarativeLocalStream(stream) {
-    return {
-        source: stream.source,
-        mediaStreamType: stream.mediaStreamType,
-        view: undefined
-        // TODO [video-background-effects]: Add video effects state when it is added to the SDK
-    };
-}
-/**
- * @private
- */
-function convertSdkRemoteStreamToDeclarativeRemoteStream(stream) {
-    return {
-        id: stream.id,
-        mediaStreamType: stream.mediaStreamType,
-        isAvailable: stream.isAvailable,
-        /* @conditional-compile-remove(video-stream-is-receiving-flag) */
-        isReceiving: stream.isReceiving,
-        view: undefined
-    };
-}
+/* @conditional-compile-remove(close-captions) */
 /**
  * @private
  */
-function convertSdkParticipantToDeclarativeParticipant(participant) {
-    const declarativeVideoStreams = {};
-    for (const videoStream of participant.videoStreams) {
-        declarativeVideoStreams[videoStream.id] = convertSdkRemoteStreamToDeclarativeRemoteStream(videoStream);
+class CaptionsSubscriber {
+    constructor(callIdRef, context, captions) {
+        this.subscribe = () => {
+            this._captions.on('isCaptionsActiveChanged', this.isCaptionsActiveChanged);
+            this._captions.on('captionsReceived', this.onCaptionsReceived);
+        };
+        this.unsubscribe = () => {
+            this._captions.off('isCaptionsActiveChanged', this.isCaptionsActiveChanged);
+            this._captions.off('captionsReceived', this.onCaptionsReceived);
+        };
+        this.onCaptionsReceived = (caption) => {
+            this._context.addCaption(this._callIdRef.callId, caption);
+            this._context.setSelectedSpokenLanguage(this._callIdRef.callId, caption.spokenLanguage);
+            this._context.setSelectedCaptionLanguage(this._callIdRef.callId, caption.spokenLanguage);
+        };
+        this.isCaptionsActiveChanged = () => {
+            this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._captions = captions;
+        if (this._captions.isCaptionsFeatureActive) {
+            this._context.setIsCaptionActive(this._callIdRef.callId, this._captions.isCaptionsFeatureActive);
+        }
+        this._context.setAvailableSpokenLanguages(this._callIdRef.callId, this._captions.supportedSpokenLanguages);
+        if ('availableSubtitleLanguages' in this._captions) {
+            this._context.setAvailableCaptionLanguages(this._callIdRef.callId, this._captions.supportedCaptionLanguages);
+        }
+        this.subscribe();
     }
-    return {
-        identifier: participant.identifier,
-        displayName: participant.displayName,
-        state: participant.state,
-        callEndReason: participant.callEndReason,
-        videoStreams: declarativeVideoStreams,
-        isMuted: participant.isMuted,
-        isSpeaking: participant.isSpeaking
-    };
-}
-/**
- * @private
- *
- * Note at the time of writing only one LocalVideoStream is supported by the SDK.
- */
-function convertSdkCallToDeclarativeCall(call) {
-    const declarativeRemoteParticipants = {};
-    call.remoteParticipants.forEach((participant) => {
-        declarativeRemoteParticipants[toFlatCommunicationIdentifier(participant.identifier)] =
-            convertSdkParticipantToDeclarativeParticipant(participant);
-    });
-    return {
-        id: call.id,
-        /* @conditional-compile-remove(teams-identity-support) */
-        kind: _isACSCall(call) ? 'Call' : 'TeamsCall',
-        callerInfo: call.callerInfo,
-        state: call.state,
-        callEndReason: call.callEndReason,
-        diagnostics: {
-            network: {
-                latest: {}
-            },
-            media: {
-                latest: {}
-            }
-        },
-        direction: call.direction,
-        isMuted: call.isMuted,
-        isScreenSharingOn: call.isScreenSharingOn,
-        localVideoStreams: call.localVideoStreams.map(convertSdkLocalStreamToDeclarativeLocalStream),
-        remoteParticipants: declarativeRemoteParticipants,
-        remoteParticipantsEnded: {},
-        recording: { isRecordingActive: false },
-        transcription: { isTranscriptionActive: false },
-        screenShareRemoteParticipant: undefined,
-        startTime: new Date(),
-        endTime: undefined,
-        /* @conditional-compile-remove(rooms) */
-        role: call.role
-    };
-}
-/**
- * @private
- */
-function convertSdkIncomingCallToDeclarativeIncomingCall(call) {
-    return {
-        id: call.id,
-        callerInfo: call.callerInfo,
-        startTime: new Date(),
-        endTime: undefined
-    };
-}
-/**
- * @private
- */
-function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
-    return {
-        scalingMode: view.scalingMode,
-        isMirrored: view.isMirrored,
-        target: view.target
-    };
 }
 
 // Copyright (c) Microsoft Corporation.
@@ -2315,7 +2551,7 @@ function _logStreamEvent(eventName, streamLogInfo, error) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2325,7 +2561,7 @@ var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$z(this, void 0, void 0, function* () {
+    return __awaiter$D(this, void 0, void 0, function* () {
         // we can only have 3 types of createView
         let streamEventType;
         // we will reuse these for local as well but we need to make sure the remote stream is passed in like before.
@@ -2447,7 +2683,7 @@ function createViewVideo(context, internalContext, callId, stream, participantId
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$z(this, void 0, void 0, function* () {
+    return __awaiter$D(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -2615,7 +2851,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
         // Render LocalVideoStream that is not part of a Call
         // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
         // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
-        return context.withAsyncErrorTeedToState(() => __awaiter$z(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$D(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
@@ -2898,6 +3134,8 @@ class CallSubscriber {
     constructor(call, context, internalContext) {
         this.subscribe = () => {
             this._call.on('stateChanged', this.stateChanged);
+            /* @conditional-compile-remove(close-captions) */
+            this._call.on('stateChanged', this.initCaptionSubscriber);
             this._call.on('idChanged', this.idChanged);
             this._call.on('isScreenSharingOnChanged', this.isScreenSharingOnChanged);
             this._call.on('remoteParticipantsUpdated', this.remoteParticipantsUpdated);
@@ -2920,7 +3158,10 @@ class CallSubscriber {
             }
         };
         this.unsubscribe = () => {
+            var _a;
             this._call.off('stateChanged', this.stateChanged);
+            /* @conditional-compile-remove(close-captions) */
+            this._call.off('stateChanged', this.initCaptionSubscriber);
             this._call.off('idChanged', this.idChanged);
             this._call.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged);
             this._call.off('remoteParticipantsUpdated', this.remoteParticipantsUpdated);
@@ -2943,10 +3184,20 @@ class CallSubscriber {
             this._diagnosticsSubscriber.unsubscribe();
             this._recordingSubscriber.unsubscribe();
             this._transcriptionSubscriber.unsubscribe();
+            /* @conditional-compile-remove(close-captions) */
+            (_a = this._captionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
         this.stateChanged = () => {
             this._context.setCallState(this._callIdRef.callId, this._call.state);
         };
+        /* @conditional-compile-remove(close-captions) */
+        this.initCaptionSubscriber = () => {
+            // subscribe to captions here so that we don't call captions when call is not initialized
+            if (_isTeamsMeetingCall(this._call) && this._call.state === 'Connected' && !this._captionsSubscriber) {
+                this._captionsSubscriber = new CaptionsSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.TeamsCaptions));
+                this._call.off('stateChanged', this.initCaptionSubscriber);
+            }
+        };
         this.idChanged = () => {
             this._internalContext.setCallId(this._call.id, this._callIdRef.callId);
             this._context.setCallId(this._call.id, this._callIdRef.callId);
@@ -3049,7 +3300,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3069,14 +3320,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$y(this, void 0, void 0, function* () {
+                    return __awaiter$C(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$y(this, void 0, void 0, function* () {
+                    return __awaiter$C(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -3313,7 +3564,7 @@ const clearCallRelatedState = (context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3339,60 +3590,114 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
             }
+            case 'feature': {
+                // these are mini version of Proxy object - if it grows too big, a real Proxy object should be used.
+                return this._context.withErrorTeedToState((...args) => {
+                    /* @conditional-compile-remove(close-captions) */
+                    if (args[0] === communicationCalling.Features.TeamsCaptions) {
+                        const captionsFeature = target.feature(communicationCalling.Features.TeamsCaptions);
+                        const proxyFeature = new ProxyTeamsCaptionsFeature(this._context, target);
+                        return new Proxy(captionsFeature, proxyFeature);
+                    }
+                    return target.feature(...args);
+                }, 'Call.feature');
+            }
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
+/* @conditional-compile-remove(close-captions) */
+/**
+ * @private
+ */
+class ProxyTeamsCaptionsFeature {
+    constructor(context, call) {
+        this._context = context;
+        this._call = call;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'startCaptions':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
+                    var _a, _b;
+                    const ret = yield target.startCaptions(...args);
+                    this._context.setIsCaptionActive(this._call.id, true);
+                    this._context.setSelectedSpokenLanguage(this._call.id, (_b = (_a = args[0]) === null || _a === void 0 ? void 0 : _a.spokenLanguage) !== null && _b !== void 0 ? _b : 'en-us');
+                    return ret;
+                }), 'Call.feature');
+            case 'stopCaptions':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
+                    const ret = yield target.stopCaptions(...args);
+                    this._context.setIsCaptionActive(this._call.id, false);
+                    return ret;
+                }), 'Call.feature');
+            case 'setSpokenLanguage':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
+                    const ret = yield target.setSpokenLanguage(...args);
+                    this._context.setSelectedSpokenLanguage(this._call.id, args[0]);
+                    return ret;
+                }), 'Call.feature');
+            case 'setCaptionLanguage':
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
+                    const ret = yield target.setCaptionLanguage(...args);
+                    this._context.setSelectedCaptionLanguage(this._call.id, args[0]);
+                    return ret;
+                }), 'Call.feature');
             default:
                 return Reflect.get(target, prop);
         }
@@ -3401,7 +3706,7 @@ class ProxyCallCommon {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3415,7 +3720,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$w(this, void 0, void 0, function* () {
+                    return __awaiter$A(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -3636,7 +3941,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3651,7 +3956,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$v(this, void 0, void 0, function* () {
+                    return __awaiter$z(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -3766,7 +4071,7 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3788,7 +4093,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$u(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$y(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -3809,7 +4114,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3831,7 +4136,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$t(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$x(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -3844,7 +4149,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$t(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$x(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -3857,7 +4162,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$t(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$x(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -3886,7 +4191,7 @@ class ProxyCallClient {
                         /**
                          * add to this object if we want to proxy anything else off the DebugInfo feature object.
                          */
-                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$t(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$x(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -3939,7 +4244,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$x(void 0, void 0, void 0, function* () {
             const participantIdKind = participantId ? communicationCommon.getIdentifierKind(participantId) : undefined;
             const result = yield createView(context, internalContext, callId, participantIdKind, stream, options);
             // We only need to declaratify the VideoStreamRendererView object for remote participants. Because the updateScalingMode only needs to be called on remote participant stream views.
@@ -4330,7 +4635,11 @@ const defaultIdentifiers = {
     verticalGalleryVideoTile: 'vertical-gallery-video-tile',
     horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',
     /* @conditional-compile-remove(vertical-gallery) */
-    verticalGalleryPageCounter: 'vertical-gallery-page-counter'
+    verticalGalleryPageCounter: 'vertical-gallery-page-counter',
+    /* @conditional-compile-remove(at-mention) */
+    atMentionSuggestionList: 'at-mention-suggestion-list',
+    /* @conditional-compile-remove(at-mention) */
+    atMentionSuggestionItem: 'at-mention-suggestion-item'
 };
 /**
  * @private
@@ -4697,6 +5006,10 @@ function chunk(options, itemsPerRow) {
     }
     return rows;
 }
+/**
+ * @private
+ */
+const defaultSpokenLanguage$1 = 'en-us';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -5362,7 +5675,15 @@ const DEFAULT_COMPONENT_ICONS = {
     /* @conditional-compile-remove(vertical-gallery) */
     VerticalGalleryRightButton: React__default['default'].createElement(reactIcons.ChevronRight20Regular, null),
     /* @conditional-compile-remove(video-background-effects) */
-    OptionsVideoBackgroundEffect: React__default['default'].createElement(reactIcons.VideoBackgroundEffect20Regular, null)
+    OptionsVideoBackgroundEffect: React__default['default'].createElement(reactIcons.VideoBackgroundEffect20Regular, null),
+    /* @conditional-compile-remove(close-captions) */
+    CaptionsIcon: React__default['default'].createElement(reactIcons.ClosedCaption20Regular, null),
+    /* @conditional-compile-remove(close-captions) */
+    CaptionsOffIcon: React__default['default'].createElement(reactIcons.ClosedCaptionOff20Regular, null),
+    /* @conditional-compile-remove(close-captions) */
+    CaptionsSettingsIcon: React__default['default'].createElement(reactIcons.Settings20Regular, null),
+    /* @conditional-compile-remove(close-captions) */
+    ChangeSpokenLanguageIcon: React__default['default'].createElement(reactIcons.PersonVoice20Regular, null)
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -5982,6 +6303,22 @@ const activeFileUploadsTrampoline = (props) => {
     return props.activeFileUploads;
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+react.mergeStyles({
+    height: '100%',
+    overflowY: 'auto',
+    overflowX: 'hidden'
+});
+/**
+ * @private
+ */
+react.mergeStyles({
+    padding: '0.25rem 0rem 0'
+});
+
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;
@@ -6941,7 +7278,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6966,7 +7303,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$s(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$w(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -7135,7 +7472,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7167,7 +7504,7 @@ const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$v(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
@@ -7278,7 +7615,7 @@ var getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7498,7 +7835,7 @@ const MessageThread = (props) => {
     /* @conditional-compile-remove(teams-inline-images) */
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images) */
-    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$u(void 0, void 0, void 0, function* () {
         if (!onFetchAttachments || attachment.id in inlineAttachments) {
             return;
         }
@@ -7540,7 +7877,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -7591,7 +7928,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -8309,6 +8646,7 @@ const DrawerMenuItem = (props) => {
             React__default['default'].createElement(react.Text, { styles: {
                     root: { color: props.disabled ? theme.palette.neutralTertiaryAlt : theme.palette.neutralSecondary }
                 } }, props.secondaryText))),
+        props.secondaryComponent && React__default['default'].createElement(react.Stack.Item, null, props.secondaryComponent),
         secondaryIcon && React__default['default'].createElement(react.Stack.Item, null, secondaryIcon)));
 };
 const MenuItemIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({ className: react.mergeStyles(iconStyles$1) }, props)));
@@ -11922,7 +12260,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11960,7 +12298,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -12128,7 +12466,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12169,7 +12507,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -12936,7 +13274,7 @@ const containerStyles$3 = (theme) => {
 /**
  * @private
  */
-const buttonStyles = (theme) => ({
+const buttonStyles$1 = (theme) => ({
     root: {
         background: 'none',
         border: 'none',
@@ -13057,7 +13395,7 @@ const formatPhoneNumber = (phoneNumber) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -13099,16 +13437,16 @@ const DialpadButton = (props) => {
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const useLongPressProps = React__default['default'].useMemo(() => ({
-        onClick: () => __awaiter$n(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$r(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$n(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$r(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: isMobile
     }), [digit, index, isMobile, onClick, onLongPress]);
     const longPressHandlers = useLongPress(useLongPressProps);
-    return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers),
+    return (React__default['default'].createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles$1(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(digitStyles(theme), (_b = props.styles) === null || _b === void 0 ? void 0 : _b.digit) }, props.digit),
             React__default['default'].createElement(react.Text, { className: react.mergeStyles(letterStyles(theme), (_c = props.styles) === null || _c === void 0 ? void 0 : _c.letter) }, (_d = props.letter) !== null && _d !== void 0 ? _d : ' '))));
@@ -13606,13 +13944,13 @@ const _VideoBackgroundEffectsPicker = (props) => {
 /**
  * @private
  */
-react.mergeStyles({
+const iconClassName = react.mergeStyles({
     marginRight: _pxToRem(8)
 });
 /**
  * @private
  */
-react.mergeStyles({
+const displayNameClassName = react.mergeStyles({
     fontWeight: 400,
     fontSize: _pxToRem(12),
     lineHeight: _pxToRem(16)
@@ -13620,7 +13958,7 @@ react.mergeStyles({
 /**
  * @private
  */
-react.mergeStyles({
+const captionClassName = react.mergeStyles({
     fontWeight: 400,
     fontSize: _pxToRem(16),
     lineHeight: _pxToRem(22)
@@ -13628,17 +13966,278 @@ react.mergeStyles({
 /**
  * @private
  */
-react.mergeStyles({
+const captionContainerClassName = react.mergeStyles({
     marginTop: _pxToRem(6),
-    marginBottom: _pxToRem(6)
+    marginBottom: _pxToRem(6),
+    overflowAnchor: 'none'
 });
 /**
  * @private
  */
-react.mergeStyles({
+const captionsBannerClassName = react.mergeStyles({
     height: _pxToRem(100),
-    overflow: 'scroll'
+    overflowY: 'auto',
+    overflowX: 'hidden'
+});
+/**
+ * @private
+ */
+const captionsContentContainerClassName = react.mergeStyles({
+    minWidth: 0
+});
+/**
+ * @private
+ */
+const displayNameContainerClassName = react.mergeStyles({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+});
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ * A component for displaying a single line of caption
+ */
+const _Caption = (props) => {
+    const { displayName, userId, captionText, onRenderAvatar } = props;
+    const personaOptions = {
+        hidePersonaDetails: true,
+        size: react.PersonaSize.size32,
+        text: displayName,
+        showOverflowTooltip: false,
+        initialsTextColor: 'white',
+        styles: {
+            root: {
+                margin: '0.25rem'
+            }
+        }
+    };
+    const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React__default['default'].createElement(react.Persona, Object.assign({}, personaOptions));
+    return (React__default['default'].createElement(react.Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
+        React__default['default'].createElement(react.Stack.Item, { className: iconClassName }, userIcon),
+        React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
+            React__default['default'].createElement(react.Stack.Item, { className: displayNameContainerClassName },
+                React__default['default'].createElement(react.Text, { className: displayNameClassName }, displayName)),
+            React__default['default'].createElement(react.Stack.Item, null,
+                React__default['default'].createElement(react.Text, { className: captionClassName }, captionText)))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
+ */
+const _CaptionsBanner = (props) => {
+    const { captions, isCaptionsOn, onRenderAvatar } = props;
+    const captionsScrollDivRef = React.useRef(null);
+    const [isAtBottomOfScroll, setIsAtBottomOfScroll] = React.useState(true);
+    const scrollToBottom = () => {
+        if (captionsScrollDivRef.current) {
+            captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;
+        }
+    };
+    const handleScrollToTheBottom = React.useCallback(() => {
+        if (!captionsScrollDivRef.current) {
+            return;
+        }
+        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >=
+            captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;
+        setIsAtBottomOfScroll(atBottom);
+    }, []);
+    React.useEffect(() => {
+        const captionsScrollDiv = captionsScrollDivRef.current;
+        captionsScrollDiv === null || captionsScrollDiv === void 0 ? void 0 : captionsScrollDiv.addEventListener('scroll', handleScrollToTheBottom);
+        return () => {
+            captionsScrollDiv === null || captionsScrollDiv === void 0 ? void 0 : captionsScrollDiv.removeEventListener('scroll', handleScrollToTheBottom);
+        };
+    }, [handleScrollToTheBottom]);
+    React.useEffect(() => {
+        // only auto scroll to bottom is already is at bottom of scroll before new caption comes in
+        if (isAtBottomOfScroll) {
+            scrollToBottom();
+        }
+    }, [captions, isAtBottomOfScroll]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, isCaptionsOn && (React__default['default'].createElement("div", { "data-is-focusable": true },
+        React__default['default'].createElement(reactNorthstar.Ref, { innerRef: captionsScrollDivRef },
+            React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption, key) => {
+                return (React__default['default'].createElement("div", { key: key, className: captionContainerClassName, tabIndex: 0 },
+                    React__default['default'].createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
+            })))))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+(window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const themedCaptionsSettingsModalStyle = (theme) => ({
+    main: {
+        borderRadius: theme.effects.roundedCorner6,
+        padding: _pxToRem(24),
+        width: _pxToRem(440),
+        height: _pxToRem(268),
+        overflow: 'hidden'
+    }
+});
+/**
+ * @private
+ */
+const titleClassName = react.mergeStyles({
+    fontWeight: 600,
+    fontSize: _pxToRem(20),
+    lineHeight: _pxToRem(28)
+});
+/**
+ * @private
+ */
+const titleContainerClassName = react.mergeStyles({
+    paddingBottom: _pxToRem(20)
+});
+/**
+ * @private
+ */
+const dropdownContainerClassName = react.mergeStyles({
+    paddingBottom: _pxToRem(16),
+    paddingTop: _pxToRem(16)
+});
+/**
+ * @private
+ */
+const dropdownInfoTextStyle = (theme) => react.mergeStyles({
+    fontWeight: 400,
+    fontSize: _pxToRem(12),
+    lineHeight: _pxToRem(16),
+    color: theme.palette.neutralSecondary
 });
+/**
+ * @private
+ */
+const buttonsContainerClassName = react.mergeStyles({
+    paddingTop: _pxToRem(16)
+});
+/**
+ * @private
+ */
+const buttonStyles = (theme) => {
+    return {
+        root: {
+            borderRadius: _pxToRem(2),
+            margin: _pxToRem(8)
+        },
+        rootHovered: {
+            backgroundColor: theme.palette.themePrimary,
+            borderColor: theme.palette.themePrimary,
+            color: theme.palette.white
+        },
+        rootFocused: {
+            backgroundColor: theme.palette.themePrimary,
+            borderColor: theme.palette.themePrimary,
+            color: theme.palette.white
+        },
+        rootPressed: {
+            backgroundColor: theme.palette.themePrimary,
+            borderColor: theme.palette.themePrimary,
+            color: theme.palette.white
+        }
+    };
+};
+/**
+ * @private
+ */
+const dropdownStyles = {
+    callout: { height: _pxToRem(300), overflow: 'auto' }
+};
+
+var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * @internal
+ * a component for setting spoken languages
+ */
+const _CaptionsSettingsModal = (props) => {
+    const { supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onDismissCaptionsSettings, onStartCaptions, strings, captionsAvailableLanguageStrings } = props;
+    const theme = react.useTheme();
+    const [selectedItem, setSelectedItem] = React.useState({
+        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1,
+        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1
+    });
+    const onDismiss = React.useCallback(() => {
+        if (onDismissCaptionsSettings) {
+            onDismissCaptionsSettings();
+        }
+    }, [onDismissCaptionsSettings]);
+    const onConfirm = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+        const languageCode = selectedItem.key.toString();
+        if (isCaptionsFeatureActive) {
+            onSetSpokenLanguage(languageCode);
+        }
+        else {
+            yield onStartCaptions({ spokenLanguage: languageCode });
+            // set spoken language when start captions with a spoken language specified.
+            // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+            onSetSpokenLanguage(languageCode);
+        }
+        onDismiss();
+    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
+    const dropdownOptions = React.useMemo(() => {
+        return supportedSpokenLanguages.map((languageCode) => {
+            return {
+                key: languageCode,
+                text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode
+            };
+        });
+    }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);
+    const onChange = (event, option) => {
+        if (option) {
+            setSelectedItem(option);
+        }
+    };
+    const calloutProps = React.useMemo(() => ({
+        preventDismissOnEvent: _preventDismissOnEvent
+    }), []);
+    const CaptionsSettingsComponent = React.useCallback(() => {
+        return (React__default['default'].createElement(react.Stack, null,
+            React__default['default'].createElement(react.Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage$1, options: dropdownOptions, styles: dropdownStyles }),
+            React__default['default'].createElement(react.Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText)));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        dropdownOptions,
+        selectedItem,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel,
+        theme
+    ]);
+    const CaptionsSettingsModalStyle = React.useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(react.Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
+        React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
+            React__default['default'].createElement(react.Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
+            React__default['default'].createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
+        React__default['default'].createElement(react.Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
+        React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
+            React__default['default'].createElement(react.PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
+                React__default['default'].createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
+            React__default['default'].createElement(react.DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
+                React__default['default'].createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -14180,7 +14779,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -14203,35 +14802,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$p(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$p(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$p(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$p(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$m(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$p(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$p(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$m(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$p(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$m(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$p(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -15003,7 +15602,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15278,7 +15877,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$l(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$o(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -15390,7 +15989,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15475,7 +16074,7 @@ class EventSubscriber {
         };
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$k(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$n(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -15567,7 +16166,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15589,7 +16188,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$j(this, void 0, void 0, function* () {
+                return __awaiter$m(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -15604,7 +16203,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$j(this, void 0, void 0, function* () {
+                        return __awaiter$m(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -15688,7 +16287,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15707,14 +16306,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -15754,7 +16353,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -15763,7 +16362,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -15781,12 +16380,12 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'sendTypingNotification': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     return yield chatThreadClient.sendTypingNotification(...args);
                 }), 'ChatThreadClient.sendTypingNotification');
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -15794,7 +16393,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -15802,7 +16401,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -15810,7 +16409,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$i(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$l(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -15847,7 +16446,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$k = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15866,7 +16465,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$k(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -15879,7 +16478,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$k(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -15899,7 +16498,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$k(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -15910,7 +16509,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$h(this, void 0, void 0, function* () {
+                    return __awaiter$k(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -16097,7 +16696,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",effects:"Effects",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",effects:"Effects",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"}};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number",outboundCallingNoticeString:"Calling..."};var chat$c={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$c={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceHolderText:"Enter number"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -16515,7 +17114,7 @@ const END_CALL_PAGES = [
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16551,7 +17150,7 @@ const isCameraOn = (state) => {
 /**
  * @private
  */
-const startSelectedVideoEffect = (adapter) => __awaiter$g(void 0, void 0, void 0, function* () {
+const startSelectedVideoEffect = (adapter) => __awaiter$j(void 0, void 0, void 0, function* () {
     if (adapter.getState().selectedVideoBackgroundEffect) {
         const selectedVideoBackgroundEffect = adapter.getState().selectedVideoBackgroundEffect;
         if ((selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectName) === 'blur') {
@@ -16756,7 +17355,7 @@ const isDisabled$2 = (option) => {
 /**
  * @returns Permissions state for the camera.
  */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$g(void 0, void 0, void 0, function* () {
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$j(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'camera' })).state;
     }
@@ -16769,7 +17368,7 @@ const queryCameraPermissionFromPermissionsAPI = () => __awaiter$g(void 0, void 0
 /**
  * @returns Permissions state for the microphone.
  */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$g(void 0, void 0, void 0, function* () {
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$j(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'microphone' })).state;
     }
@@ -16786,7 +17385,7 @@ const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$g(void 0, vo
  * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$g(void 0, void 0, void 0, function* () {
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$j(void 0, void 0, void 0, function* () {
     const [cameraResult, microphoneResult] = yield Promise.all([
         queryCameraPermissionFromPermissionsAPI(),
         queryMicrophonePermissionFromPermissionsAPI()
@@ -16863,7 +17462,7 @@ const createParticipantModifier = (createModifiedParticipant) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16998,9 +17597,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -17034,8 +17633,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -17052,51 +17651,51 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -17131,8 +17730,8 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images) */
     downloadAuthenticatedAttachment(attachmentUrl) {
-        return __awaiter$f(this, void 0, void 0, function* () {
-            return this.asyncTeeErrorToEventEmitter(() => __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
                     const e = new Error();
                     e['target'] = 'ChatThreadClient.getMessage';
@@ -17147,7 +17746,7 @@ class AzureCommunicationChatAdapter {
                     throw e;
                 }
                 function fetchWithAuthentication(url, token) {
-                    return __awaiter$f(this, void 0, void 0, function* () {
+                    return __awaiter$i(this, void 0, void 0, function* () {
                         const headers = new Headers();
                         headers.append('Authorization', `Bearer ${token}`);
                         try {
@@ -17215,7 +17814,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$f(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -17257,7 +17856,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$f(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$i(void 0, void 0, void 0, function* () {
     if (!isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -17326,7 +17925,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$f(void 0, void 0, void 0, function* () {
+        (() => __awaiter$i(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -17358,7 +17957,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$f(void 0, void 0, void 0, function* () {
+            (() => __awaiter$i(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -17382,7 +17981,7 @@ beforeDispose) => {
 function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
 /* @conditional-compile-remove(teams-inline-images) */
 options) {
-    return __awaiter$f(this, void 0, void 0, function* () {
+    return __awaiter$i(this, void 0, void 0, function* () {
         return new AzureCommunicationChatAdapter(chatClient, chatThreadClient, 
         /* @conditional-compile-remove(teams-inline-images) */ options);
     });
@@ -17595,7 +18194,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17616,7 +18215,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$e(void 0, void 0, void 0, function* () {
+        (() => __awaiter$h(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -17980,7 +18579,7 @@ const FileDownloadErrorBar = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -18001,7 +18600,7 @@ const ChatScreen = (props) => {
     const theme = useTheme();
     React.useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        const fetchData = () => __awaiter$d(void 0, void 0, void 0, function* () {
+        const fetchData = () => __awaiter$g(void 0, void 0, void 0, function* () {
             // Fetch initial data for adapter
             yield adapter.fetchInitialData();
             // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
@@ -18116,20 +18715,6 @@ const useAdapter = () => {
     return adapter;
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/** @private */
-const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * This minimum width is to make sure the side pane does not overlap with the composite when the screen is narrow.
- *
- * @private
- */
-const compositeMinWidthRem = 30;
-
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
@@ -18215,7 +18800,7 @@ const adaptCompositeState = (compositeState) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -18234,103 +18819,131 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$f(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$f(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: (forEveryone) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onHangUp: (forEveryone) => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall(forEveryone);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$f(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$f(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onSendDtmfTone: (dtmfTone) => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.sendDtmfTone(dtmfTone);
     }),
-    onRemoveParticipant: (userId) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants, options) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds, options);
     },
-    onStartScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$f(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$f(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$f(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$f(void 0, void 0, void 0, function* () {
         var _c;
         return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$f(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$f(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$f(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     }),
     /* @conditional-compile-remove(call-readiness) */
-    askDevicePermission: (constrain) => __awaiter$c(void 0, void 0, void 0, function* () {
+    askDevicePermission: (constrain) => __awaiter$f(void 0, void 0, void 0, function* () {
         return adapter.askDevicePermission(constrain);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onRemoveVideoBackgroundEffects: () => __awaiter$c(void 0, void 0, void 0, function* () {
+    onRemoveVideoBackgroundEffects: () => __awaiter$f(void 0, void 0, void 0, function* () {
         return yield adapter.stopVideoBackgroundEffect();
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$f(void 0, void 0, void 0, function* () {
         return yield adapter.blurVideoBackground(backgroundBlurConfig);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$c(void 0, void 0, void 0, function* () {
+    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$f(void 0, void 0, void 0, function* () {
         return yield adapter.replaceVideoBackground(backgroundReplacementConfig);
+    }),
+    /* @conditional-compile-remove(close-captions) */
+    onStartCaptions: (options) => __awaiter$f(void 0, void 0, void 0, function* () {
+        yield adapter.startCaptions(options);
+    }),
+    /* @conditional-compile-remove(close-captions) */
+    onStopCaptions: () => __awaiter$f(void 0, void 0, void 0, function* () {
+        yield adapter.stopCaptions();
+    }),
+    /* @conditional-compile-remove(close-captions) */
+    onSetSpokenLanguage: (language) => __awaiter$f(void 0, void 0, void 0, function* () {
+        yield adapter.setSpokenLanguage(language);
+    }),
+    /* @conditional-compile-remove(close-captions) */
+    onSetCaptionLanguage: (language) => __awaiter$f(void 0, void 0, void 0, function* () {
+        yield adapter.setCaptionLanguage(language);
     })
 }));
 
 // Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
-const usePropsFor$1 = (component) => {
-    const selector = getSelector$1(component);
-    if (!selector) {
-        throw new Error("Can't find the selector for component, please check supported component list");
-    }
-    return Object.assign(Object.assign({}, useAdaptedSelector(selector)), useHandlers());
+/** @private */
+const CaptionsSettingsModal = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const CaptionsSettingsModalProps = useAdaptedSelector(_changeSpokenLanguageSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const handlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
+    const strings = useLocale().strings.call;
+    /* @conditional-compile-remove(close-captions) */
+    const modalStrings = {
+        captionsSettingsModalTitle: strings.captionsSettingsModalTitle,
+        captionsSettingsDropdownLabel: strings.captionsSettingsDropdownLabel,
+        captionsSettingsDropdownInfoText: strings.captionsSettingsDropdownInfoText,
+        captionsSettingsConfirmButtonLabel: strings.captionsSettingsConfirmButtonLabel,
+        captionsSettingsCancelButtonLabel: strings.captionsSettingsCancelButtonLabel,
+        captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,
+        captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const captionsAvailableLanguageStrings = strings.captionsAvailableLanguageStrings;
+    /* @conditional-compile-remove(close-captions) */
+    return (React__default['default'].createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, captionsAvailableLanguageStrings: captionsAvailableLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18398,31 +19011,192 @@ const participantButtonWithIncreasedTouchTargets = {
         }
     }
 };
-/**
- * @private
- */
-const devicesButtonWithIncreasedTouchTargets = {
-    menuStyles: {
-        menuItemStyles: buttonFlyoutIncreasedSizeStyles
-    }
+/**
+ * @private
+ */
+const devicesButtonWithIncreasedTouchTargets = {
+    menuStyles: {
+        menuItemStyles: buttonFlyoutIncreasedSizeStyles
+    }
+};
+/**
+ * @private
+ */
+const controlButtonBaseStyle = {
+    label: {
+        minWidth: '2.25rem'
+    }
+};
+/**
+ * @private
+ */
+const concatButtonBaseStyles = (...styles) => {
+    let result = controlButtonBaseStyle;
+    styles.forEach((style) => {
+        result = react.concatStyleSets(result, style);
+    });
+    return result;
+};
+
+// Copyright (c) Microsoft Corporation.
+const icon$2 = () => React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
+/**
+ * @private
+ */
+const MoreButton = (props) => {
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$2, onRenderOffIcon: icon$2, onClick: props.onClick, "data-ui-id": props['data-ui-id'] })));
+};
+
+var __awaiter$e = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ *
+ * @private
+ */
+const CaptionsBannerMoreButton = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const localeStrings = useLocale();
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonHandlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
+    const moreButtonStrings = React.useMemo(() => ({
+        label: localeStrings.strings.call.captionsBannerMoreButtonCallingLabel,
+        tooltipOffContent: localeStrings.strings.call.captionsBannerMoreButtonTooltip
+    }), [localeStrings]);
+    /* @conditional-compile-remove(close-captions) */
+    const moreButtonContextualMenuItems = [];
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptions = React.useCallback(() => __awaiter$e(void 0, void 0, void 0, function* () {
+        yield startCaptionsButtonHandlers.onStartCaptions({
+            spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
+        });
+        // set spoken language when start captions with a spoken language specified.
+        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+        startCaptionsButtonHandlers.onSetSpokenLanguage(startCaptionsButtonProps.currentSpokenLanguage);
+    }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
+    /* @conditional-compile-remove(close-captions) */
+    moreButtonContextualMenuItems.push({
+        key: 'ToggleCaptionsKey',
+        text: startCaptionsButtonProps.checked
+            ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+            : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+        onClick: () => {
+            startCaptionsButtonProps.checked
+                ? startCaptionsButtonHandlers.onStopCaptions()
+                : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                    ? startCaptions()
+                    : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+        },
+        iconProps: {
+            iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
+            styles: { root: { lineHeight: 0 } }
+        },
+        itemProps: {
+            styles: buttonFlyoutIncreasedSizeStyles
+        }
+    });
+    /* @conditional-compile-remove(close-captions) */
+    if (props.onCaptionsSettingsClick) {
+        moreButtonContextualMenuItems.push({
+            key: 'openCaptionsSettingsKey',
+            id: 'common-call-composite-captions-settings-button',
+            text: localeStrings.strings.call.captionsSettingsLabel,
+            onClick: props.onCaptionsSettingsClick,
+            iconProps: {
+                iconName: 'CaptionsSettingsIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: !startCaptionsButtonProps.checked
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
+            items: moreButtonContextualMenuItems,
+            calloutProps: {
+                preventDismissOnEvent: _preventDismissOnEvent
+            }
+        } })));
+};
+
+// Copyright (c) Microsoft Corporation.
+/* @conditional-compile-remove(close-captions) */
+const mobileViewBannerWidth = '90%';
+/* @conditional-compile-remove(close-captions) */
+const desktopViewBannerWidth = '50%';
+/** @private */
+const CaptionsBanner = (props) => {
+    /* @conditional-compile-remove(close-captions) */
+    const captionsBannerProps = useAdaptedSelector(_captionsBannerSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const handlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
+    const [isCaptionsSettingsOpen, setIsCaptionsSettingsOpen] = React.useState(false);
+    /* @conditional-compile-remove(close-captions) */
+    const onClickCaptionsSettings = () => {
+        setIsCaptionsSettingsOpen(true);
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const onDismissCaptionsSettings = () => {
+        setIsCaptionsSettingsOpen(false);
+    };
+    /* @conditional-compile-remove(close-captions) */
+    const containerClassName = react.mergeStyles({
+        position: 'relative'
+    });
+    /* @conditional-compile-remove(close-captions) */
+    const floatingChildClassName = react.mergeStyles({
+        position: 'absolute',
+        right: 0,
+        top: 0
+    });
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
+        /* @conditional-compile-remove(close-captions) */ captionsBannerProps.captions.length > 0 &&
+            captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: containerClassName },
+            React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+                React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
+                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers)))),
+            !props.isMobile && (React__default['default'].createElement("div", { className: floatingChildClassName },
+                React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings })))))));
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/** @private */
+const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 /**
+ * This minimum width is to make sure the side pane does not overlap with the composite when the screen is narrow.
+ *
  * @private
  */
-const controlButtonBaseStyle = {
-    label: {
-        minWidth: '2.25rem'
-    }
-};
+const compositeMinWidthRem = 30;
+
+// Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
-const concatButtonBaseStyles = (...styles) => {
-    let result = controlButtonBaseStyle;
-    styles.forEach((style) => {
-        result = react.concatStyleSets(result, style);
-    });
-    return result;
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+const usePropsFor$1 = (component) => {
+    const selector = getSelector$1(component);
+    if (!selector) {
+        throw new Error("Can't find the selector for component, please check supported component list");
+    }
+    return Object.assign(Object.assign({}, useAdaptedSelector(selector)), useHandlers());
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18591,6 +19365,11 @@ const getDominantSpeakerInfo = (state) => { var _a; return (_a = state.call) ===
  * @private
  */
 const getRemoteParticipants = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants; };
+/* @conditional-compile-remove(close-captions) */
+/**
+ * @private
+ */
+const getIsTeamsCall = (state) => state.isTeamsCall;
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -18660,7 +19439,7 @@ const isDisabled = (option) => {
 };
 
 // Copyright (c) Microsoft Corporation.
-const icon$2 = () => React__default['default'].createElement(CallCompositeIcon, { iconName: 'ControlButtonParticipants' });
+const icon$1 = () => React__default['default'].createElement(CallCompositeIcon, { iconName: 'ControlButtonParticipants' });
 /**
  * @private
  */
@@ -18676,16 +19455,7 @@ const People = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {}, controlButtonBaseStyle);
     }, [props.styles, theme.palette.neutralLight]);
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$2, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$2, onClick: onClick, styles: styles })));
-};
-
-// Copyright (c) Microsoft Corporation.
-const icon$1 = () => React__default['default'].createElement(reactIcons.MoreHorizontal20Filled, { key: 'chatOnIconKey', primaryFill: "currentColor" });
-/**
- * @private
- */
-const MoreButton = (props) => {
-    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$1, onRenderOffIcon: icon$1, onClick: props.onClick, "data-ui-id": 'common-call-composite-more-button' })));
+    return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$1, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$1, onClick: onClick, styles: styles })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -18917,7 +19687,7 @@ const CallControls = (props) => {
                 React__default['default'].createElement(People, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "call-composite-people-button", strings: peopleButtonStrings, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.participantsButton) })),
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) && (React__default['default'].createElement(Devices, { displayType: options === null || options === void 0 ? void 0 : options.displayType, increaseFlyoutItemSize: props.increaseFlyoutItemSize, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.devicesButton) })),
                 /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
-                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
+                isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton) && moreButtonContextualMenuItems().length > 0 && (React__default['default'].createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems() }, showLabel: (options === null || options === void 0 ? void 0 : options.displayType) !== 'compact' })),
                 customButtons['primary'],
                 isEnabled$2(options === null || options === void 0 ? void 0 : options.endCallButton) && React__default['default'].createElement(EndCall, { displayType: options === null || options === void 0 ? void 0 : options.displayType })))));
 };
@@ -19248,16 +20018,39 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
 };
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  *
  * @private
  */
 const DesktopMoreButton = (props) => {
-    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const localeStrings = useLocale();
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonHandlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptions = React.useCallback(() => __awaiter$d(void 0, void 0, void 0, function* () {
+        yield startCaptionsButtonHandlers.onStartCaptions({
+            spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
+        });
+        // set spoken language when start captions with a spoken language specified.
+        // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+        startCaptionsButtonHandlers.onSetSpokenLanguage(startCaptionsButtonProps.currentSpokenLanguage);
+    }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
     const moreButtonStrings = React.useMemo(() => ({
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
@@ -19276,6 +20069,77 @@ const DesktopMoreButton = (props) => {
         },
         disabled: props.disableButtonsForHoldScreen
     });
+    // is captions feature is active
+    /* @conditional-compile-remove(close-captions) */
+    if (props.isCaptionsSupported) {
+        const captionsContextualMenuItems = [];
+        const menuSubIconStyleSet = {
+            root: {
+                height: 'unset',
+                lineHeight: '100%',
+                width: '1.25rem'
+            }
+        };
+        moreButtonContextualMenuItems.push({
+            key: 'liveCaptionsKey',
+            id: 'common-call-composite-captions-button',
+            text: localeStrings.strings.call.liveCaptionsLabel,
+            iconProps: { iconName: 'CaptionsIcon', styles: { root: { lineHeight: 0 } } },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: props.disableButtonsForHoldScreen,
+            subMenuProps: {
+                id: 'captions-contextual-menu',
+                items: captionsContextualMenuItems,
+                calloutProps: {
+                    preventDismissOnEvent: _preventDismissOnEvent
+                }
+            },
+            submenuIconProps: {
+                iconName: 'HorizontalGalleryRightButton',
+                styles: menuSubIconStyleSet
+            }
+        });
+        captionsContextualMenuItems.push({
+            key: 'ToggleCaptionsKey',
+            id: 'common-call-composite-captions-toggle-button',
+            text: startCaptionsButtonProps.checked
+                ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+                : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+            onClick: () => {
+                startCaptionsButtonProps.checked
+                    ? startCaptionsButtonHandlers.onStopCaptions()
+                    : startCaptionsButtonProps.currentSpokenLanguage !== ''
+                        ? startCaptions()
+                        : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
+            },
+            iconProps: {
+                iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            itemProps: {
+                styles: buttonFlyoutIncreasedSizeStyles
+            },
+            disabled: props.disableButtonsForHoldScreen
+        });
+        if (props.onCaptionsSettingsClick) {
+            captionsContextualMenuItems.push({
+                key: 'openCaptionsSettingsKey',
+                id: 'common-call-composite-captions-settings-button',
+                text: localeStrings.strings.call.captionsSettingsLabel,
+                onClick: props.onCaptionsSettingsClick,
+                iconProps: {
+                    iconName: 'CaptionsSettingsIcon',
+                    styles: { root: { lineHeight: 0 } }
+                },
+                itemProps: {
+                    styles: buttonFlyoutIncreasedSizeStyles
+                },
+                disabled: props.disableButtonsForHoldScreen || !startCaptionsButtonProps.checked
+            });
+        }
+    }
     /*@conditional-compile-remove(PSTN-calls) */
     if (props.onClickShowDialpad) {
         moreButtonContextualMenuItems.push({
@@ -19314,8 +20178,13 @@ const DesktopMoreButton = (props) => {
             } }, element));
     });
     return (React__default['default'].createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", 
-        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: { items: moreButtonContextualMenuItems } })));
+        /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
+        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
+            items: moreButtonContextualMenuItems,
+            calloutProps: {
+                preventDismissOnEvent: _preventDismissOnEvent
+            }
+        } })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -19387,6 +20256,8 @@ const CommonCallControlBar = (props) => {
     const [isOutOfSpace, setIsOutOfSpace] = React.useState(false);
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
+    /* @conditional-compile-remove(close-captions) */
+    const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = React.useState(false);
     const handleResize = React.useCallback(() => {
         setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
         setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
@@ -19413,6 +20284,14 @@ const CommonCallControlBar = (props) => {
     React.useEffect(() => {
         setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);
     }, [totalButtonsWidth, controlBarContainerWidth]);
+    /* @conditional-compile-remove(close-captions) */
+    const openCaptionsSettingsModal = React.useCallback(() => {
+        setShowCaptionsSettingsModal(true);
+    }, []);
+    /* @conditional-compile-remove(close-captions) */
+    const onDismissCaptionsSettings = React.useCallback(() => {
+        setShowCaptionsSettingsModal(false);
+    }, []);
     const chatButtonStrings = React.useMemo(() => ({
         label: callWithChatStrings.chatButtonLabel,
         tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,
@@ -19452,6 +20331,8 @@ const CommonCallControlBar = (props) => {
     }
     const chatButton = props.chatAdapter ? (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: (_a = props.chatButtonChecked) !== null && _a !== void 0 ? _a : false, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled$2(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel })) : (React__default['default'].createElement(React__default['default'].Fragment, null));
     return (React__default['default'].createElement("div", { ref: controlBarSizeRef },
+        React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
+        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings }))),
         React__default['default'].createElement(react.Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles$1, controlBarDesktopContainerStyles) },
             React__default['default'].createElement(react.Stack.Item, { grow: true, className: react.mergeStyles(controlBarWrapperDesktopStyles) },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -19484,7 +20365,11 @@ const CommonCallControlBar = (props) => {
                                         /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) &&
                                         !props.mobileView && (React__default['default'].createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, 
                                         /* @conditional-compile-remove(control-bar-button-injection) */
-                                        callControls: props.callControls })),
+                                        callControls: props.callControls, 
+                                        /* @conditional-compile-remove(close-captions) */
+                                        isCaptionsSupported: props.isCaptionsSupported, 
+                                        /* @conditional-compile-remove(close-captions) */
+                                        onCaptionsSettingsClick: openCaptionsSettingsModal })),
                                     React__default['default'].createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
             !props.mobileView && (React__default['default'].createElement(react.Stack.Item, null,
                 React__default['default'].createElement("div", { ref: sidepaneControlsRef },
@@ -20230,7 +21115,7 @@ const AddPeopleButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20266,7 +21151,7 @@ const PeoplePaneContent = (props) => {
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveAParticipant = (participantId) => __awaiter$b(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$c(void 0, void 0, void 0, function* () { return onRemoveParticipant(participantId); });
         return Object.assign(Object.assign({}, participantListDefaultProps), { 
             // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
             onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant, 
@@ -20464,8 +21349,12 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
         }, [modalHostHeight, modalHostWidth, rtl]);
     return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
 };
+/**
+ * @private
+ */
+const defaultSpokenLanguage = 'en-us';
 
-var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$b = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20495,11 +21384,11 @@ const CallPane = (props) => {
     /**
      * In a Call Composite when a participant is removed, we must remove them from the call.
      */
-    const removeParticipantFromCall = (participantId) => __awaiter$a(void 0, void 0, void 0, function* () {
+    const removeParticipantFromCall = (participantId) => __awaiter$b(void 0, void 0, void 0, function* () {
         yield props.callAdapter.removeParticipant(participantId);
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const addParticipantToCall = (participant, options) => __awaiter$a(void 0, void 0, void 0, function* () {
+    const addParticipantToCall = (participant, options) => __awaiter$b(void 0, void 0, void 0, function* () {
         yield props.callAdapter.addParticipant(participant, options);
     });
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
@@ -20563,6 +21452,99 @@ const isSpeakingAndMutedAnimationStyles = Object.assign({}, react.AnimationStyle
 const isNotSpeakingAndMutedAnimationStyles = Object.assign(Object.assign({}, react.AnimationStyles.fadeOut200), { display: 'none' });
 
 // Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const spokenLanguageDrawerStyles = (theme) => ({
+    root: {
+        height: _pxToRem(300),
+        overflow: 'auto'
+    },
+    drawerSurfaceStyles: {
+        drawerContentContainer: {
+            root: {
+                span: {
+                    fontWeight: 600,
+                    fontSize: _pxToRem(17),
+                    lineHeight: _pxToRem(22),
+                    color: theme.palette.neutralDark
+                }
+            }
+        }
+    }
+});
+
+// Copyright (c) Microsoft Corporation.
+/** @private */
+const SpokenLanguageDrawer = (props) => {
+    var _a;
+    /* @conditional-compile-remove(close-captions) */
+    const theme = useTheme();
+    /* @conditional-compile-remove(close-captions) */
+    const changeSpokenLanguageProps = useAdaptedSelector(_changeSpokenLanguageSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const changeSpokenLanguageHandlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
+    const onSpokenLanguageDrawerItemClick = React.useCallback((languageCode) => {
+        props.setCurrentSpokenLanguage(languageCode);
+    }, [props]);
+    /* @conditional-compile-remove(close-captions) */
+    const spokenLanguageDrawerItems = React.useMemo(() => {
+        var _a;
+        return (_a = changeSpokenLanguageProps === null || changeSpokenLanguageProps === void 0 ? void 0 : changeSpokenLanguageProps.supportedSpokenLanguages) === null || _a === void 0 ? void 0 : _a.map((languageCode) => ({
+            itemKey: languageCode,
+            text: props.supportedLanguageStrings ? props.supportedLanguageStrings[languageCode] : languageCode,
+            onItemClick: () => onSpokenLanguageDrawerItemClick(languageCode),
+            secondaryIconProps: props.currentSpokenLanguage === languageCode ? { iconName: 'Accept' } : undefined
+        }));
+    }, [
+        changeSpokenLanguageProps === null || changeSpokenLanguageProps === void 0 ? void 0 : changeSpokenLanguageProps.supportedSpokenLanguages,
+        props.currentSpokenLanguage,
+        props.supportedLanguageStrings,
+        onSpokenLanguageDrawerItemClick
+    ]);
+    /* @conditional-compile-remove(close-captions) */
+    return (React__default['default'].createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.spokenLanguageMenuTitle, items: spokenLanguageDrawerItems !== null && spokenLanguageDrawerItems !== void 0 ? spokenLanguageDrawerItems : [], onLightDismiss: () => {
+            changeSpokenLanguageHandlers.onSetSpokenLanguage(props.currentSpokenLanguage);
+            props.onLightDismiss();
+        }, styles: spokenLanguageDrawerStyles(theme) }));
+};
+
+/**
+ * @private
+ */
+const themedToggleButtonStyle = (theme, checked) => {
+    if (checked) {
+        return {
+            root: {
+                margin: 0
+            },
+            pill: {
+                backgroundColor: `${theme.palette.themePrimary} !important`
+            },
+            thumb: {
+                backgroundColor: `${theme.palette.white} !important`
+            }
+        };
+    }
+    return {
+        root: {
+            margin: 0
+        }
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$a = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 const inferCallWithChatControlOptions = (callWithChatControls) => {
     if (callWithChatControls === false) {
         return false;
@@ -20573,6 +21555,8 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 /** @private */
 const MoreDrawer = (props) => {
     var _a, _b;
+    /* @conditional-compile-remove(close-captions) */
+    const theme = react.useTheme();
     const drawerMenuItems = [];
     const { speakers, onSelectSpeaker, onLightDismiss } = props;
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
@@ -20680,6 +21664,76 @@ const MoreDrawer = (props) => {
             iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }
         });
     }
+    /* @conditional-compile-remove(close-captions) */
+    //Captions drawer menu
+    const supportedLanguageStrings = useLocale().strings.call.captionsAvailableLanguageStrings;
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
+    /* @conditional-compile-remove(close-captions) */
+    const startCaptionsButtonHandlers = useHandlers();
+    /* @conditional-compile-remove(close-captions) */
+    const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = React.useState(false);
+    /* @conditional-compile-remove(close-captions) */
+    const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState(startCaptionsButtonProps.currentSpokenLanguage === ''
+        ? defaultSpokenLanguage
+        : startCaptionsButtonProps.currentSpokenLanguage);
+    /* @conditional-compile-remove(close-captions) */
+    const onToggleChange = React.useCallback(() => __awaiter$a(void 0, void 0, void 0, function* () {
+        if (!startCaptionsButtonProps.checked) {
+            yield startCaptionsButtonHandlers.onStartCaptions({
+                spokenLanguage: currentSpokenLanguage
+            });
+            // set spoken language when start captions with a spoken language specified.
+            // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+            startCaptionsButtonHandlers.onSetSpokenLanguage(currentSpokenLanguage);
+        }
+        else {
+            startCaptionsButtonHandlers.onStopCaptions();
+        }
+    }), [startCaptionsButtonProps.checked, startCaptionsButtonHandlers, currentSpokenLanguage]);
+    /* @conditional-compile-remove(close-captions) */
+    if (props.isCaptionsSupported) {
+        const captionsDrawerItems = [];
+        drawerMenuItems.push({
+            itemKey: 'captions',
+            id: 'common-call-composite-captions-button',
+            disabled: props.disableButtonsForHoldScreen,
+            text: props.strings.captionsMenuTitle,
+            iconProps: { iconName: 'CaptionsIcon' },
+            subMenuProps: captionsDrawerItems
+        });
+        captionsDrawerItems.push({
+            itemKey: 'ToggleCaptionsKey',
+            text: startCaptionsButtonProps.checked
+                ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent
+                : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
+            iconProps: {
+                iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            disabled: props.disableButtonsForHoldScreen,
+            secondaryComponent: (React__default['default'].createElement(react.Stack, { verticalFill: true, verticalAlign: "center" },
+                React__default['default'].createElement(react.Toggle, { id: "common-call-composite-captions-toggle-button", checked: startCaptionsButtonProps.checked, styles: themedToggleButtonStyle(theme, startCaptionsButtonProps.checked), onChange: onToggleChange })))
+        });
+        captionsDrawerItems.push({
+            itemKey: 'ChangeSpokenLanguage',
+            text: props.strings.spokenLanguageMenuTitle,
+            id: 'common-call-composite-captions-settings-button',
+            secondaryText: supportedLanguageStrings ? supportedLanguageStrings[currentSpokenLanguage] : currentSpokenLanguage,
+            iconProps: {
+                iconName: 'ChangeSpokenLanguageIcon',
+                styles: { root: { lineHeight: 0 } }
+            },
+            disabled: props.disableButtonsForHoldScreen || !startCaptionsButtonProps.checked,
+            onItemClick: () => {
+                setIsSpokenLanguageDrawerOpen(true);
+            },
+            secondaryIconProps: {
+                iconName: 'ChevronRight',
+                styles: { root: { lineHeight: 0 } }
+            }
+        });
+    }
     /* @conditional-compile-remove(control-bar-button-injection) */
     const customDrawerButtons = React.useMemo(() => generateCustomCallDrawerButtons(onFetchCustomButtonPropsTrampoline(drawerSelectionOptions !== false ? drawerSelectionOptions : undefined), drawerSelectionOptions !== false ? drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.displayType : undefined), [drawerSelectionOptions]);
     /* @conditional-compile-remove(control-bar-button-injection) */
@@ -20694,7 +21748,10 @@ const MoreDrawer = (props) => {
     customDrawerButtons['overflow'].forEach((element) => {
         drawerMenuItems.push(element);
     });
-    return React__default['default'].createElement(_DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss });
+    /* @conditional-compile-remove(close-captions) */
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        isSpokenLanguageDrawerOpen && props.isCaptionsSupported && (React__default['default'].createElement(SpokenLanguageDrawer, { onLightDismiss: props.onLightDismiss, setCurrentSpokenLanguage: setCurrentSpokenLanguage, currentSpokenLanguage: currentSpokenLanguage, strings: props.strings, supportedLanguageStrings: supportedLanguageStrings })),
+        !isSpokenLanguageDrawerOpen && React__default['default'].createElement(_DrawerMenu, { items: drawerMenuItems, onLightDismiss: props.onLightDismiss })));
 };
 const isDeviceSelected = (speaker, selectedSpeaker) => !!selectedSpeaker && speaker.id === selectedSpeaker.id;
 const isEnabled = (option) => option !== false;
@@ -20720,7 +21777,11 @@ const PreparedMoreDrawer = (props) => {
         peopleButtonLabel: strings.peopleButtonLabel,
         audioDeviceMenuTitle: strings.moreDrawerAudioDeviceMenuTitle,
         microphoneMenuTitle: strings.moreDrawerMicrophoneMenuTitle,
-        speakerMenuTitle: strings.moreDrawerSpeakerMenuTitle
+        speakerMenuTitle: strings.moreDrawerSpeakerMenuTitle,
+        /* @conditional-compile-remove(close-captions) */
+        captionsMenuTitle: strings.moreDrawerCaptionsMenuTitle,
+        /* @conditional-compile-remove(close-captions) */
+        spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle
     }), [strings]);
     const deviceProps = useSelector$1(moreDrawerSelector);
     const callHandlers = useHandlers();
@@ -20939,6 +22000,10 @@ const CallArrangement = (props) => {
     if (!rolePermissions.cameraButton && props.errorBarProps) {
         errorBarProps = Object.assign(Object.assign({}, props.errorBarProps), { activeErrorMessages: props.errorBarProps.activeErrorMessages.filter((e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari') });
     }
+    /* @conditional-compile-remove(close-captions) */
+    const isTeamsCall = useSelector$1(getIsTeamsCall);
+    /* @conditional-compile-remove(close-captions) */
+    const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React__default['default'].createElement(react.Stack, { grow: true, styles: callArrangementContainerStyles },
@@ -20949,6 +22014,8 @@ const CallArrangement = (props) => {
                     peopleButtonChecked: activePane === 'people', 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
+                    /* @conditional-compile-remove(close-captions) */
+                    isCaptionsSupported: isTeamsCall && hasJoinedCall, 
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: setShowVideoEffectsPane }))))),
                 ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
@@ -20956,7 +22023,9 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                        disableButtonsForHoldScreen: isInLocalHold }))),
+                        disableButtonsForHoldScreen: isInLocalHold, 
+                        /* @conditional-compile-remove(close-captions) */
+                        isCaptionsSupported: isTeamsCall && hasJoinedCall }))),
                 /* @conditional-compile-remove(PSTN-calls) */
                 ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
@@ -20970,7 +22039,9 @@ const CallArrangement = (props) => {
                                     errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
                                         React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)))),
                                     canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
-                                props.onRenderGalleryContent && props.onRenderGalleryContent()))),
+                                props.onRenderGalleryContent && props.onRenderGalleryContent(),
+                                /* @conditional-compile-remove(close-captions) */
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React__default['default'].createElement(CaptionsBanner, { isMobile: props.mobileView }))))),
                     /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
                     callPaneContent()),
                 /* @conditional-compile-remove(video-background-effects) */
@@ -23242,6 +24313,13 @@ class AzureCommunicationCallAdapter {
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
+        /* @conditional-compile-remove(close-captions) */
+        {
+            this.startCaptions.bind(this);
+            this.stopCaptions.bind(this);
+            this.setSpokenLanguage.bind(this);
+            this.setCaptionLanguage.bind(this);
+        }
         /* @conditional-compile-remove(video-background-effects) */
         this.blurVideoBackground.bind(this);
         /* @conditional-compile-remove(video-background-effects) */
@@ -23564,6 +24642,30 @@ class AzureCommunicationCallAdapter {
             this.handlers.onSendDtmfTone(dtmfTone);
         });
     }
+    /* @conditional-compile-remove(close-captions) */
+    startCaptions(options) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            this.handlers.onStartCaptions(options);
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    stopCaptions() {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            this.handlers.onStopCaptions();
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setCaptionLanguage(language) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            this.handlers.onSetCaptionLanguage(language);
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setSpokenLanguage(language) {
+        return __awaiter$4(this, void 0, void 0, function* () {
+            this.handlers.onSetSpokenLanguage(language);
+        });
+    }
     getState() {
         return this.context.getState();
     }
@@ -23577,15 +24679,26 @@ class AzureCommunicationCallAdapter {
     on(event, listener) {
         this.emitter.on(event, listener);
     }
-    subscribeCallEvents() {
+    /* @conditional-compile-remove(close-captions) */
+    subscribeToCaptionEvents() {
         var _a, _b, _c, _d;
+        if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) === 'Connected') {
+            (_b = this.call) === null || _b === void 0 ? void 0 : _b.feature(communicationCalling.Features.TeamsCaptions).on('captionsReceived', this.captionsReceived.bind(this));
+            (_c = this.call) === null || _c === void 0 ? void 0 : _c.feature(communicationCalling.Features.TeamsCaptions).on('isCaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+            (_d = this.call) === null || _d === void 0 ? void 0 : _d.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
+        }
+    }
+    subscribeCallEvents() {
+        var _a, _b, _c, _d, _e;
         (_a = this.call) === null || _a === void 0 ? void 0 : _a.on('remoteParticipantsUpdated', this.onRemoteParticipantsUpdated.bind(this));
         (_b = this.call) === null || _b === void 0 ? void 0 : _b.on('isMutedChanged', this.isMyMutedChanged.bind(this));
         (_c = this.call) === null || _c === void 0 ? void 0 : _c.on('isScreenSharingOnChanged', this.isScreenSharingOnChanged.bind(this));
         (_d = this.call) === null || _d === void 0 ? void 0 : _d.on('idChanged', this.callIdChanged.bind(this));
+        /* @conditional-compile-remove(close-captions) */
+        (_e = this.call) === null || _e === void 0 ? void 0 : _e.on('stateChanged', this.subscribeToCaptionEvents.bind(this));
     }
     unsubscribeCallEvents() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g;
         for (const subscriber of this.participantSubscribers.values()) {
             subscriber.unsubscribeAll();
         }
@@ -23594,6 +24707,12 @@ class AzureCommunicationCallAdapter {
         (_b = this.call) === null || _b === void 0 ? void 0 : _b.off('isMutedChanged', this.isMyMutedChanged.bind(this));
         (_c = this.call) === null || _c === void 0 ? void 0 : _c.off('isScreenSharingOnChanged', this.isScreenSharingOnChanged.bind(this));
         (_d = this.call) === null || _d === void 0 ? void 0 : _d.off('idChanged', this.callIdChanged.bind(this));
+        /* @conditional-compile-remove(close-captions) */
+        (_e = this._call) === null || _e === void 0 ? void 0 : _e.feature(communicationCalling.Features.TeamsCaptions).off('captionsReceived', this.captionsReceived.bind(this));
+        /* @conditional-compile-remove(close-captions) */
+        (_f = this._call) === null || _f === void 0 ? void 0 : _f.feature(communicationCalling.Features.TeamsCaptions).off('isCaptionsActiveChanged', this.isCaptionsActiveChanged.bind(this));
+        /* @conditional-compile-remove(close-captions) */
+        (_g = this.call) === null || _g === void 0 ? void 0 : _g.off('stateChanged', this.subscribeToCaptionEvents.bind(this));
     }
     onRemoteParticipantsUpdated({ added, removed }) {
         if (added && added.length > 0) {
@@ -23615,6 +24734,17 @@ class AzureCommunicationCallAdapter {
         var _a;
         this.emitter.emit('isLocalScreenSharingActiveChanged', { isScreenSharingOn: (_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn });
     }
+    /* @conditional-compile-remove(close-captions) */
+    captionsReceived(captionsInfo) {
+        this.emitter.emit('captionsReceived', { captionsInfo });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    isCaptionsActiveChanged() {
+        var _a;
+        this.emitter.emit('isCaptionsActiveChanged', {
+            isActive: (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.TeamsCaptions).isCaptionsFeatureActive
+        });
+    }
     callIdChanged() {
         var _a;
         ((_a = this.call) === null || _a === void 0 ? void 0 : _a.id) && this.emitter.emit('callIdChanged', { callId: this.call.id });
@@ -24079,6 +25209,30 @@ class CallWithChatBackedCallAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callWithChatAdapter.allowUnsupportedBrowserVersion();
     }
+    /* @conditional-compile-remove(close-captions) */
+    startCaptions(options) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            this.callWithChatAdapter.startCaptions(options);
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    stopCaptions() {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            this.callWithChatAdapter.stopCaptions();
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setCaptionLanguage(language) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            this.callWithChatAdapter.setCaptionLanguage(language);
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setSpokenLanguage(language) {
+        return __awaiter$3(this, void 0, void 0, function* () {
+            this.callWithChatAdapter.setSpokenLanguage(language);
+        });
+    }
     /* @conditional-compile-remove(video-background-effects) */
     blurVideoBackground(backgroundBlurConfig) {
         return __awaiter$3(this, void 0, void 0, function* () {
@@ -24444,6 +25598,8 @@ const CallWithChatScreen = (props) => {
     }), [callWithChatStrings]);
     /* @conditional-compile-remove(PSTN-calls) */
     const alternateCallerId = callAdapter.getState().alternateCallerId;
+    /* @conditional-compile-remove(close-captions) */
+    const isTeamsCall = callAdapter.getState().isTeamsCall;
     const callCompositeOptions = React.useMemo(() => ({
         callControls: false,
         /* @conditional-compile-remove(call-readiness) */
@@ -24483,6 +25639,8 @@ const CallWithChatScreen = (props) => {
                         disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
                         /* @conditional-compile-remove(PSTN-calls) */
                         onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
+                        /* @conditional-compile-remove(close-captions) */
+                        isCaptionsSupported: isTeamsCall && hasJoinedCall, 
                         /* @conditional-compile-remove(video-background-effects) */
                         onShowVideoEffectsPicker: setShowVideoEffectsPane, rtl: props.rtl })))),
             showControlBar && showDrawer && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
@@ -24492,7 +25650,9 @@ const CallWithChatScreen = (props) => {
                             /* @conditional-compile-remove(PSTN-calls) */
                             onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
                             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                            disableButtonsForHoldScreen: isInLocalHold }))))),
+                            disableButtonsForHoldScreen: isInLocalHold, 
+                            /* @conditional-compile-remove(close-captions) */
+                            isCaptionsSupported: isTeamsCall && hasJoinedCall }))))),
             /* @conditional-compile-remove(PSTN-calls) */
             showControlBar && showDtmfDialpad && (React__default['default'].createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
                 React__default['default'].createElement(CallAdapterProvider, { adapter: callAdapter },
@@ -24769,6 +25929,12 @@ class AzureCommunicationCallWithChatAdapter {
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
+        /* @conditional-compile-remove(close-captions) */ {
+            this.startCaptions.bind(this);
+            this.stopCaptions.bind(this);
+            this.setSpokenLanguage.bind(this);
+            this.setCaptionLanguage.bind(this);
+        }
         /* @conditional-compile-remove(video-background-effects) */
         this.blurVideoBackground.bind(this);
         /* @conditional-compile-remove(video-background-effects) */
@@ -24993,6 +26159,30 @@ class AzureCommunicationCallWithChatAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callAdapter.allowUnsupportedBrowserVersion();
     }
+    /* @conditional-compile-remove(close-captions) */
+    startCaptions(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.startCaptions(options);
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    stopCaptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.stopCaptions();
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setCaptionLanguage(language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setCaptionLanguage(language);
+        });
+    }
+    /* @conditional-compile-remove(close-captions) */
+    setSpokenLanguage(language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.setSpokenLanguage(language);
+        });
+    }
     /* @conditional-compile-remove(video-background-effects) */
     blurVideoBackground(backgroundBlurConfig) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -25052,6 +26242,14 @@ class AzureCommunicationCallWithChatAdapter {
             case 'selectedSpeakerChanged':
                 this.callAdapter.on('selectedSpeakerChanged', listener);
                 break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'captionsReceived':
+                this.callAdapter.on('captionsReceived', listener);
+                break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'isCaptionsActiveChanged':
+                this.callAdapter.on('isCaptionsActiveChanged', listener);
+                break;
             case 'messageReceived':
                 this.chatAdapter.on('messageReceived', listener);
                 break;
@@ -25110,6 +26308,14 @@ class AzureCommunicationCallWithChatAdapter {
             case 'selectedSpeakerChanged':
                 this.callAdapter.off('selectedSpeakerChanged', listener);
                 break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'captionsReceived':
+                this.callAdapter.off('captionsReceived', listener);
+                break;
+            /* @conditional-compile-remove(close-captions) */
+            case 'isCaptionsActiveChanged':
+                this.callAdapter.off('isCaptionsActiveChanged', listener);
+                break;
             case 'messageReceived':
                 this.chatAdapter.off('messageReceived', listener);
                 break;