@azure/communication-react 1.16.0-alpha-202404190012 → 1.16.0-alpha-202404200012

package/dist/dist-cjs/communication-react/{index-oaEwmItW.js → index-C2GfkUGz.js}

@@ -176,7 +176,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.16.0-alpha-202404190012';
+var telemetryVersion = '1.16.0-alpha-202404200012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -484,43 +484,36 @@ const getParticipantCount = (state, props) => {
     /* @conditional-compile-remove(total-participant-count) */
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.totalParticipantCount;
 };
-/* @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$1 = (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 getStartCaptionsInProgress = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.startCaptionsInProgress;
 };
-/* @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 getSupportedCaptionLanguages = (state, props) => {
     var _a;
     return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.captionsFeature.supportedCaptionLanguages;
 };
-/* @conditional-compile-remove(close-captions) */
 /** @private */
 const getSupportedSpokenLanguages = (state, props) => {
     var _a;
@@ -1101,22 +1094,18 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             return (createEffect && stream.feature(communicationCalling.Features.VideoEffects).startEffects(createEffect(backgroundReplacementConfig)));
         }
     });
-    /* @conditional-compile-remove(close-captions) */
     const onStartCaptions = (options) => __awaiter$R(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.startCaptions(options));
     });
-    /* @conditional-compile-remove(close-captions) */
     const onStopCaptions = () => __awaiter$R(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.stopCaptions());
     });
-    /* @conditional-compile-remove(close-captions) */
     const onSetSpokenLanguage = (language) => __awaiter$R(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.setSpokenLanguage(language));
     });
-    /* @conditional-compile-remove(close-captions) */
     const onSetCaptionLanguage = (language) => __awaiter$R(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield captionsFeature.setCaptionLanguage(language);
@@ -1198,13 +1187,9 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         onRemoveVideoBackgroundEffects,
         onBlurVideoBackground,
         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,
         /* @conditional-compile-remove(end-of-call-survey) */
         onSubmitSurvey,
@@ -1332,8 +1317,6 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(close-captions) */
-/* @conditional-compile-remove(close-captions) */
 /**
  * Selector for {@link StartCaptionsButton} component.
  *
@@ -1346,7 +1329,6 @@ const _startCaptionsButtonSelector = reselect__namespace.createSelector([getCapt
         currentSpokenLanguage: currentSpokenLanguage !== null && currentSpokenLanguage !== void 0 ? currentSpokenLanguage : 'en-us'
     };
 });
-/* @conditional-compile-remove(close-captions) */
 /**
  * Selector for Changing caption language and spoken language
  *
@@ -1367,34 +1349,19 @@ const _captionSettingsSelector = reselect__namespace.createSelector([
         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$1, getStartCaptionsInProgress], (captions, isCaptionsFeatureActive, startCaptionsInProgress) => {
-    // Following Teams app logic, no matter how many 'Partial' captions come,
-    // we only pick first one according to start time, and all the other partial captions will be filtered out
-    // This will give customers a stable captions experience when others talking over the dominant speaker
-    // First turn all partial captions that are older than 5 seconds to final
-    captions === null || captions === void 0 ? void 0 : captions.filter((captions) => captions.resultType === 'Partial').forEach((c) => {
-        // if c is created more than 5 seconds ago, make it final
-        if (c.timestamp.getTime() + 5000 < Date.now()) {
-            // make it final
-            c.resultType = 'Final';
-        }
-    });
-    const captionsToRender = captions === null || captions === void 0 ? void 0 : captions.filter((captions) => captions.resultType === 'Final');
-    const firstPartialCaptions = captions === null || captions === void 0 ? void 0 : captions.filter((captions) => captions.resultType === 'Partial').sort(captionsComparator)[0];
-    firstPartialCaptions && (captionsToRender === null || captionsToRender === void 0 ? void 0 : captionsToRender.push(firstPartialCaptions));
-    const captionsInfo = captionsToRender === null || captionsToRender === void 0 ? void 0 : captionsToRender.map((c) => {
-        var _a, _b;
+    const captionsInfo = captions === null || captions === void 0 ? void 0 : captions.map((c, index) => {
+        var _a, _b, _c;
         const userId = getCaptionsSpeakerIdentifier(c);
         return {
-            id: c.timestamp.getTime() + userId + c.speaker.displayName,
-            displayName: (_a = c.speaker.displayName) !== null && _a !== void 0 ? _a : 'Unnamed Participant',
-            captionText: (_b = c.captionText) !== null && _b !== void 0 ? _b : '',
+            id: (_a = c.speaker.displayName) !== null && _a !== void 0 ? _a : 'Unnamed Participant' + index,
+            displayName: (_b = c.speaker.displayName) !== null && _b !== void 0 ? _b : 'Unnamed Participant',
+            captionText: (_c = c.captionText) !== null && _c !== void 0 ? _c : '',
             userId
         };
     });
@@ -1404,12 +1371,6 @@ const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions,
         startCaptionsInProgress: startCaptionsInProgress !== null && startCaptionsInProgress !== void 0 ? startCaptionsInProgress : false
     };
 });
-/* @conditional-compile-remove(close-captions) */
-const captionsComparator = (captionsA, captionsB) => {
-    return (captionsA.timestamp.getTime() - captionsB.timestamp.getTime() ||
-        getCaptionsSpeakerIdentifier(captionsA).localeCompare(getCaptionsSpeakerIdentifier(captionsB)));
-};
-/* @conditional-compile-remove(close-captions) */
 const getCaptionsSpeakerIdentifier = (captions) => {
     return captions.speaker.identifier ? toFlatCommunicationIdentifier(captions.speaker.identifier) : '';
 };
@@ -1862,7 +1823,6 @@ function convertSdkCallToDeclarativeCall(call) {
         startTime: new Date(),
         endTime: undefined,
         role: call.role,
-        /* @conditional-compile-remove(close-captions) */
         captionsFeature: {
             captions: [],
             supportedSpokenLanguages: [],
@@ -1908,7 +1868,6 @@ function convertFromSDKToDeclarativeVideoStreamRendererView(view) {
         target: view.target
     };
 }
-/* @conditional-compile-remove(close-captions) */
 /**
  * @private
  */
@@ -2066,9 +2025,7 @@ let CallContext$2 = class CallContext {
                 /* @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;
                 /* @conditional-compile-remove(meeting-id) */
                 existingCall.info = call.info;
@@ -2713,28 +2670,36 @@ let CallContext$2 = class CallContext {
         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;
+        // time stamp when new caption comes in
+        newCaption.timestamp = new Date();
+        // if this is the first caption, push it in
+        if (captions.length === 0) {
+            captions.push(newCaption);
+        }
+        // if the last caption is final, then push the new one in
+        else if (captions[captions.length - 1].resultType === 'Final') {
+            captions.push(newCaption);
+        }
+        // if the last caption is Partial, then check if the speaker is the same as the new caption, if so, update the last caption
+        else {
+            if (toFlatCommunicationIdentifier(captions[captions.length - 1].speaker.identifier) === toFlatCommunicationIdentifier(newCaption.speaker.identifier)) {
+                captions[captions.length - 1] = newCaption;
+            }
+            // if different speaker, ignore the interjector until the current speaker finishes
+            // edge case: if we dont receive the final caption from the current speaker for 5 secs, we turn the current speaker caption to final and push in the new interjector
+            else {
+                if (Date.now() - captions[captions.length - 1].timestamp.getTime() > 5000) {
+                    captions[captions.length - 1].resultType = 'Final';
+                    captions.push(newCaption);
+                }
             }
         }
-        captions.push(newCaption);
         // If the array length exceeds 50, remove the oldest caption
         if (captions.length > 50) {
             captions.shift();
         }
     }
-    /* @conditional-compile-remove(close-captions) */
     addTeamsCaption(callId, caption) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2766,7 +2731,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     clearCaptions(callId) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2775,7 +2739,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setIsCaptionActive(callId, isCaptionsActive) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2784,7 +2747,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setStartCaptionsInProgress(callId, startCaptionsInProgress) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2793,7 +2755,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setSelectedSpokenLanguage(callId, spokenLanguage) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2802,7 +2763,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setSelectedCaptionLanguage(callId, captionLanguage) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2811,7 +2771,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setAvailableCaptionLanguages(callId, captionLanguages) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2820,7 +2779,6 @@ let CallContext$2 = class CallContext {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setAvailableSpokenLanguages(callId, spokenLanguages) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -2913,7 +2871,6 @@ function clearParticipantReactionState(callContext, callId, participantKey) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(close-captions) */
 /**
  * @private
  */
@@ -4195,7 +4152,6 @@ 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);
             /* @conditional-compile-remove(local-recording-notification) */
             this._call.on('stateChanged', this.initLocalRecordingNotificationSubscriber);
@@ -4221,7 +4177,6 @@ class CallSubscriber {
         this.unsubscribe = () => {
             var _a, _b, _c, _d;
             this._call.off('stateChanged', this.stateChanged);
-            /* @conditional-compile-remove(close-captions) */
             this._call.off('stateChanged', this.initCaptionSubscriber);
             /* @conditional-compile-remove(local-recording-notification) */
             this._call.off('stateChanged', this.initLocalRecordingNotificationSubscriber);
@@ -4262,7 +4217,6 @@ class CallSubscriber {
         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 (this._call.state === 'Connected' && !this._CaptionsFeatureSubscriber) {
@@ -4734,7 +4688,6 @@ class ProxyCallCommon {
             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.Captions) {
                         const captionsFeature = target.feature(communicationCalling.Features.Captions).captions;
                         let proxyFeature;
@@ -4765,7 +4718,6 @@ class ProxyCallCommon {
         }
     }
 }
-/* @conditional-compile-remove(close-captions) */
 /**
  * @private
  */
@@ -6526,7 +6478,8 @@ const lightTheme = {
         callRedDark: '#8b2c3d',
         callRedDarker: '#772a38',
         iconWhite: '#ffffff',
-        raiseHandGold: '#eaa300'
+        raiseHandGold: '#eaa300',
+        videoTileLabelBackgroundLight: 'rgba(255,255,255,0.8)'
     },
     semanticColors: {
         errorText: '#a80000'
@@ -6568,7 +6521,8 @@ const darkTheme = {
         callRedDark: '#a42e43',
         callRedDarker: '#8b2c3d',
         iconWhite: '#ffffff',
-        raiseHandGold: '#eaa300'
+        raiseHandGold: '#eaa300',
+        videoTileLabelBackgroundLight: 'rgba(37,36,35,0.8)'
     },
     semanticColors: {
         errorText: '#f1707b'
@@ -6847,15 +6801,10 @@ const DEFAULT_COMPONENT_ICONS = {
     VerticalGalleryRightButton: React.createElement(GalleryRightButton, null),
     ControlButtonVideoEffectsOption: React.createElement(reactIcons.VideoBackgroundEffect20Regular, null),
     ConfigurationScreenVideoEffectsButton: React.createElement(reactIcons.VideoBackgroundEffect20Filled, null),
-    /* @conditional-compile-remove(close-captions) */
     CaptionsIcon: React.createElement(reactIcons.ClosedCaption20Regular, null),
-    /* @conditional-compile-remove(close-captions) */
     CaptionsOffIcon: React.createElement(reactIcons.ClosedCaptionOff20Regular, null),
-    /* @conditional-compile-remove(close-captions) */
     CaptionsSettingsIcon: React.createElement(reactIcons.Settings20Regular, null),
-    /* @conditional-compile-remove(close-captions) */
     ChangeSpokenLanguageIcon: React.createElement(reactIcons.PersonVoice20Regular, null),
-    /* @conditional-compile-remove(close-captions) */
     ChangeCaptionLanguageIcon: React.createElement(reactIcons.Translate20Regular, null),
     ContextMenuCameraIcon: React.createElement(reactIcons.Video20Regular, null),
     ContextMenuMicIcon: React.createElement(reactIcons.Mic20Regular, null),
@@ -8813,15 +8762,15 @@ const SendBoxErrorBar = (props) => {
  * @private
  */
 const SendBoxErrors = (props) => {
-    const { attachmentUploadError, attachmentUploadsPendingError } = props;
+    const { attachmentProgressError, attachmentUploadsPendingError } = props;
     const errorToDisplay = React.useMemo(() => {
-        if (attachmentUploadError && attachmentUploadsPendingError) {
-            return attachmentUploadError.timestamp > attachmentUploadsPendingError.timestamp
-                ? attachmentUploadError
+        if (attachmentProgressError && attachmentUploadsPendingError) {
+            return attachmentProgressError.timestamp > attachmentUploadsPendingError.timestamp
+                ? attachmentProgressError
                 : attachmentUploadsPendingError;
         }
-        return attachmentUploadError || attachmentUploadsPendingError;
-    }, [attachmentUploadError, attachmentUploadsPendingError]);
+        return attachmentProgressError || attachmentUploadsPendingError;
+    }, [attachmentProgressError, attachmentUploadsPendingError]);
     return React.createElement(SendBoxErrorBar, { error: errorToDisplay, dismissAfterMs: 10 * 1000 });
 };
 
@@ -8884,8 +8833,8 @@ const _AttachmentCard = (props) => {
     const { attachment, menuActions, onActionHandlerFailed } = props;
     const attachmentCardStyles = useAttachmentCardStyles();
     const progress = React.useMemo(() => {
-        return attachment.progress;
-    }, [attachment.progress]);
+        return 'progress' in attachment ? attachment.progress : undefined;
+    }, [attachment]);
     const isUploadComplete = React.useMemo(() => {
         return progress !== undefined && progress > 0 && progress < 1;
     }, [progress]);
@@ -8987,7 +8936,7 @@ const actionIconStyle = { height: '1rem' };
  */
 const _AttachmentUploadCards = (props) => {
     var _a;
-    const attachments = props.activeAttachmentUploads;
+    const attachments = props.attachmentsWithProgress;
     const localeStrings = useLocaleAttachmentCardStringsTrampoline();
     const removeAttachmentButtonString = React.useMemo(() => () => {
         var _a, _b;
@@ -8998,7 +8947,7 @@ const _AttachmentUploadCards = (props) => {
     }
     return (React.createElement(_AttachmentCardGroup, null, attachments &&
         attachments
-            .filter((attachment) => !attachment.uploadError)
+            .filter((attachment) => !attachment.error)
             .map((attachment) => {
             var _a, _b;
             return (React.createElement(_AttachmentCard, { attachment: attachment, key: attachment.id, menuActions: [
@@ -9033,18 +8982,18 @@ const EMPTY_MESSAGE_REGEX = /^\s*$/;
 /**
  * @private
  */
-const hasIncompleteAttachmentUploads = (activeAttachmentUploads) => {
-    return !!((activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.length) &&
-        !activeAttachmentUploads
-            .filter((attachmentUpload) => !attachmentUpload.uploadError)
+const hasIncompleteAttachmentUploads = (attachmentsWithProgress) => {
+    return !!((attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.length) &&
+        !attachmentsWithProgress
+            .filter((attachmentUpload) => !attachmentUpload.error)
             .every((attachmentUpload) => attachmentUpload.progress === 1 && attachmentUpload.progress !== undefined));
 };
 /* @conditional-compile-remove(attachment-upload) */
 /**
  * @private
  */
-const hasCompletedAttachmentUploads = (activeAttachmentUploads) => {
-    return !!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.find((attachment) => !attachment.uploadError));
+const hasCompletedAttachmentUploads = (attachmentsWithProgress) => {
+    return !!(attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.find((attachment) => !attachment.error));
 };
 /**
  * @private
@@ -9436,7 +9385,7 @@ const SendBox = (props) => {
     /* @conditional-compile-remove(mention) */
     mentionLookupOptions, 
     /* @conditional-compile-remove(attachment-upload) */
-    activeAttachmentUploads } = props;
+    attachmentsWithProgress } = props;
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -9456,7 +9405,7 @@ const SendBox = (props) => {
         /* @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
         /* @conditional-compile-remove(attachment-upload) */
-        if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {
+        if (hasIncompleteAttachmentUploads(attachmentsWithProgress)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
         }
@@ -9464,7 +9413,7 @@ const SendBox = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (sanitizeText(message).length > 0 ||
-            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(attachmentsWithProgress)) {
             onSendMessage && onSendMessage(message);
             setTextValue('');
         }
@@ -9484,13 +9433,13 @@ const SendBox = (props) => {
     const mergedSendIconStyle = React.useMemo(() => sendIconStyle({
         theme,
         hasText: !!textValue,
-        /* @conditional-compile-remove(attachment-upload) */ hasAttachment: hasCompletedAttachmentUploads(activeAttachmentUploads),
+        /* @conditional-compile-remove(attachment-upload) */ hasAttachment: hasCompletedAttachmentUploads(attachmentsWithProgress),
         hasErrorMessage: !!errorMessage,
         customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     }), [
         theme,
         textValue,
-        /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
+        /* @conditional-compile-remove(attachment-upload) */ attachmentsWithProgress,
         errorMessage,
         styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
     ]);
@@ -9498,34 +9447,34 @@ const SendBox = (props) => {
     // Ensure that errors are cleared when there are no attachments in sendBox
     /* @conditional-compile-remove(attachment-upload) */
     React.useEffect(() => {
-        if (!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((upload) => !upload.uploadError).length)) {
+        if (!(attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((upload) => !upload.error).length)) {
             setAttachmentUploadsPendingError(undefined);
         }
-    }, [activeAttachmentUploads]);
+    }, [attachmentsWithProgress]);
     /* @conditional-compile-remove(attachment-upload) */
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a;
         return {
             attachmentUploadsPendingError: attachmentUploadsPendingError,
-            attachmentUploadError: (_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError
+            attachmentProgressError: (_a = attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error
         };
-    }, [activeAttachmentUploads, attachmentUploadsPendingError]);
+    }, [attachmentsWithProgress, attachmentUploadsPendingError]);
     /* @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentUploads = React.useCallback(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!(activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((upload) => !upload.uploadError).length)) {
+        if (!(attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((upload) => !upload.error).length)) {
             return null;
         }
         return props.onRenderAttachmentUploads ? (props.onRenderAttachmentUploads()) : (React.createElement(react.Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-                React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: activeAttachmentUploads, onCancelAttachmentUpload: props.onCancelAttachmentUpload, strings: {
+                React.createElement(_AttachmentUploadCards, { attachmentsWithProgress: attachmentsWithProgress, onCancelAttachmentUpload: props.onCancelAttachmentUpload, strings: {
                         removeAttachment: (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.removeAttachment) !== null && _b !== void 0 ? _b : localeStrings.removeAttachment,
                         uploading: (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.uploading) !== null && _d !== void 0 ? _d : localeStrings.uploading,
                         uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted,
                         attachmentMoreMenu: (_h = (_g = props.strings) === null || _g === void 0 ? void 0 : _g.attachmentMoreMenu) !== null && _h !== void 0 ? _h : localeStrings.attachmentMoreMenu
                     } }))));
     }, [
-        activeAttachmentUploads,
+        attachmentsWithProgress,
         props,
         theme,
         localeStrings.removeAttachment,
@@ -9534,8 +9483,14 @@ const SendBox = (props) => {
         localeStrings.attachmentMoreMenu
     ]);
     return (React.createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
-        ) }, /* @conditional-compile-remove(attachment-upload) */
-        React.createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
+        ) },
+        /* @conditional-compile-remove(attachment-upload) */
+        React.createElement(SendBoxErrors, { attachmentProgressError: sendBoxErrorsProps.attachmentProgressError
+                ? {
+                    message: sendBoxErrorsProps.attachmentProgressError.message,
+                    timestamp: Date.now()
+                }
+                : undefined, attachmentUploadsPendingError: sendBoxErrorsProps.attachmentUploadsPendingError }),
         React.createElement(react.Stack, { className: borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
@@ -10628,10 +10583,17 @@ const RichTextEditor = React.forwardRef((props, ref) => {
                 onKeyDown: props.onKeyDown, focusOnInit: autoFocus === 'sendBoxTextField' }))));
 });
 const focusAndUpdateContent = (editor, content) => {
-    // focus the editor to set correct selection position
-    editor.focus();
-    // set initial content
+    // setting focus before setting content, works for Chrome and Edge but not Safari
     editor.setContent(content);
+    // this is a recommended way (by RoosterJS team) to set focus at the end of the text
+    // RoosterJS v9 has this issue fixed and this code can be removed
+    editor.insertContent('<span id="focus-position-span"></span>', { position: roosterjsEditorTypesCompatible.CompatibleContentPosition.DomEnd });
+    const elements = editor.queryElements('#focus-position-span');
+    if (elements.length > 0) {
+        const placeholder = editor.queryElements('#focus-position-span')[0];
+        editor.select(placeholder, roosterjsEditorTypesCompatible.CompatiblePositionType.Before);
+        placeholder.remove();
+    }
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10744,7 +10706,7 @@ const RichTextInputBoxComponent = (props) => {
 const RichTextSendBoxErrors = (props) => {
     const { 
     /* @conditional-compile-remove(attachment-upload) */
-    attachmentUploadError, 
+    attachmentProgressError, 
     /* @conditional-compile-remove(attachment-upload) */
     attachmentUploadsPendingError, systemMessage, textTooLongMessage } = props;
     const [sendBoxError, setSendBoxError] = React.useState(undefined);
@@ -10775,8 +10737,8 @@ const RichTextSendBoxErrors = (props) => {
                 errors.push(attachmentUploadsPendingError);
             }
             /* @conditional-compile-remove(attachment-upload) */
-            if (attachmentUploadError) {
-                errors.push(attachmentUploadError);
+            if (attachmentProgressError) {
+                errors.push(attachmentProgressError);
             }
             if (errors.length === 0) {
                 return undefined;
@@ -10786,7 +10748,7 @@ const RichTextSendBoxErrors = (props) => {
             return sortedErrors[0];
         });
     }, [
-        /* @conditional-compile-remove(attachment-upload) */ attachmentUploadError,
+        /* @conditional-compile-remove(attachment-upload) */ attachmentProgressError,
         /* @conditional-compile-remove(attachment-upload) */ attachmentUploadsPendingError
     ]);
     const onDismiss = React.useCallback(() => {
@@ -10812,7 +10774,7 @@ const isMessageEmpty$1 = (message) => {
 const RichTextSendBox = (props) => {
     const { disabled = false, systemMessage, autoFocus, onSendMessage, onTyping, 
     /* @conditional-compile-remove(attachment-upload) */
-    activeAttachmentUploads, 
+    attachmentsWithProgress, 
     /* @conditional-compile-remove(attachment-upload) */
     onCancelAttachmentUpload } = props;
     const theme = useTheme();
@@ -10846,7 +10808,7 @@ const RichTextSendBox = (props) => {
         /* @conditional-compile-remove(attachment-upload) */
         setAttachmentUploadsPendingError(undefined);
         /* @conditional-compile-remove(attachment-upload) */
-        if (hasIncompleteAttachmentUploads(activeAttachmentUploads)) {
+        if (hasIncompleteAttachmentUploads(attachmentsWithProgress)) {
             setAttachmentUploadsPendingError({ message: strings.attachmentUploadsPendingError, timestamp: Date.now() });
             return;
         }
@@ -10862,7 +10824,7 @@ const RichTextSendBox = (props) => {
         // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid attachment upload
         if (hasContent ||
-            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(activeAttachmentUploads)) {
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(attachmentsWithProgress)) {
             onSendMessage(message);
             setContentValue('');
             (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.setEmptyContent();
@@ -10874,7 +10836,7 @@ const RichTextSendBox = (props) => {
         disabled,
         onSendMessage,
         strings.placeholderText,
-        /* @conditional-compile-remove(attachment-upload) */ activeAttachmentUploads,
+        /* @conditional-compile-remove(attachment-upload) */ attachmentsWithProgress,
         /* @conditional-compile-remove(attachment-upload) */ strings.attachmentUploadsPendingError
     ]);
     const hasErrorMessage = React.useMemo(() => {
@@ -10884,10 +10846,10 @@ const RichTextSendBox = (props) => {
             /* @conditional-compile-remove(attachment-upload) */
             !!attachmentUploadsPendingError ||
             /* @conditional-compile-remove(attachment-upload) */
-            !!((_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError));
+            !!((_a = attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error));
     }, [
         /* @conditional-compile-remove(attachment-upload) */
-        activeAttachmentUploads,
+        attachmentsWithProgress,
         contentTooLongMessage,
         /* @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
@@ -10914,18 +10876,25 @@ const RichTextSendBox = (props) => {
             }) }));
     }, [contentValue, disabled, hasErrorMessage, strings.placeholderText, theme]);
     const sendBoxErrorsProps = React.useMemo(() => {
-        var _a;
+        var _a, _b;
+        /* @conditional-compile-remove(attachment-upload) */
+        const uploadErrorMessage = (_b = (_a = attachmentsWithProgress === null || attachmentsWithProgress === void 0 ? void 0 : attachmentsWithProgress.filter((attachmentUpload) => attachmentUpload.error).pop()) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message;
         return {
             /* @conditional-compile-remove(attachment-upload) */
             attachmentUploadsPendingError: attachmentUploadsPendingError,
             /* @conditional-compile-remove(attachment-upload) */
-            attachmentUploadError: (_a = activeAttachmentUploads === null || activeAttachmentUploads === void 0 ? void 0 : activeAttachmentUploads.filter((attachmentUpload) => attachmentUpload.uploadError).pop()) === null || _a === void 0 ? void 0 : _a.uploadError,
+            attachmentProgressError: uploadErrorMessage
+                ? {
+                    message: uploadErrorMessage,
+                    timestamp: Date.now()
+                }
+                : undefined,
             systemMessage: systemMessage,
             textTooLongMessage: contentTooLongMessage
         };
     }, [
         /* @conditional-compile-remove(attachment-upload) */
-        activeAttachmentUploads,
+        attachmentsWithProgress,
         contentTooLongMessage,
         /* @conditional-compile-remove(attachment-upload) */
         attachmentUploadsPendingError,
@@ -10935,14 +10904,14 @@ const RichTextSendBox = (props) => {
     const onRenderAttachmentUploads = React.useCallback(() => {
         return (React.createElement(react.Stack, { className: attachmentUploadCardsStyles },
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-                React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: activeAttachmentUploads, onCancelAttachmentUpload: onCancelAttachmentUpload, strings: {
+                React.createElement(_AttachmentUploadCards, { attachmentsWithProgress: attachmentsWithProgress, onCancelAttachmentUpload: onCancelAttachmentUpload, strings: {
                         removeAttachment: strings.removeAttachment,
                         uploading: strings.uploading,
                         uploadCompleted: strings.uploadCompleted,
                         attachmentMoreMenu: strings.attachmentMoreMenu
                     } }))));
     }, [
-        activeAttachmentUploads,
+        attachmentsWithProgress,
         onCancelAttachmentUpload,
         strings.removeAttachment,
         strings.uploadCompleted,
@@ -10958,8 +10927,8 @@ const RichTextSendBox = (props) => {
     }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
     /* @conditional-compile-remove(attachment-upload) */
     const hasAttachmentUploads = React.useMemo(() => {
-        return (hasCompletedAttachmentUploads(activeAttachmentUploads) || hasIncompleteAttachmentUploads(activeAttachmentUploads));
-    }, [activeAttachmentUploads]);
+        return (hasCompletedAttachmentUploads(attachmentsWithProgress) || hasIncompleteAttachmentUploads(attachmentsWithProgress));
+    }, [attachmentsWithProgress]);
     return (React.createElement(react.Stack, null,
         React.createElement(RichTextSendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React.createElement(RichTextInputBoxComponent
@@ -11224,7 +11193,7 @@ const useChatMessageStyles = reactComponents.makeStyles({
         }, '& video': {
             maxWidth: '100% !important', // Add !important to make sure it won't be overridden by style defined in element
             height: 'auto !important'
-        }, '& p': Object.assign({}, reactComponents.shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, reactComponents.shorthands.border('solid')), reactComponents.shorthands.borderRadius('4px')), reactComponents.shorthands.borderWidth('1px')), reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }), '& table': Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted }, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderCollapse: 'collapse', tableLayout: 'auto', width: '100%', '& tr': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { '& td': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) }) }) }),
+        }, '& p': Object.assign({}, reactComponents.shorthands.marginBlock('0.125rem')), '& blockquote': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted, clear: 'left', minHeight: '2.25rem', width: 'fit-content', marginTop: '7px', marginRight: '0px', marginLeft: '0px', marginBottom: '7px', paddingTop: '7px', paddingRight: '15px', paddingLeft: '15px', paddingBottom: '7px' }, reactComponents.shorthands.border('solid')), reactComponents.shorthands.borderRadius('4px')), reactComponents.shorthands.borderWidth('1px')), reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderLeftWidth: '4px' }) }),
     bodyWithPlaceholderImage: {
         '& img[src=""]': {
             display: 'block',
@@ -11260,6 +11229,9 @@ const useChatMessageStyles = reactComponents.makeStyles({
  * @private
  */
 const useChatMessageCommonStyles = reactComponents.makeStyles({
+    body: {
+        '& table': Object.assign(Object.assign({ backgroundColor: reactComponents.tokens.colorBrandBackgroundInverted }, reactComponents.shorthands.borderColor(reactComponents.tokens.colorNeutralStroke1Selected)), { borderCollapse: 'collapse', tableLayout: 'auto', width: '100%', '& tr': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { '& td': Object.assign(Object.assign({}, reactComponents.shorthands.border('1px', 'solid', `${reactComponents.tokens.colorNeutralStroke1Selected}`)), { wordBreak: 'normal', paddingTop: '0px', paddingRight: '5px' }) }) })
+    },
     failed: {
         //TODO: can we reuse a theme color here?
         backgroundColor: 'rgba(168, 0, 0, 0.2)'
@@ -12636,7 +12608,7 @@ const MessageBubble$1 = (props) => {
         React.createElement("div", { key: props.message.messageId },
             React.createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
                     // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-                    className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
+                    className: reactComponents.mergeClasses(chatMessageCommonStyles.body, chatMyMessageStyles.body, isBlockedMessage
                         ? chatMessageCommonStyles.blocked
                         : props.message.status === 'failed'
                             ? chatMessageCommonStyles.failed
@@ -12737,7 +12709,7 @@ const ChatMessageComponentAsEditBox = (props) => {
     const onRenderAttachmentUploads = React.useCallback(() => {
         return (!!attachmentMetadata &&
             attachmentMetadata.length > 0 && (React.createElement("div", { style: { margin: '0.25rem' } },
-            React.createElement(_AttachmentUploadCards, { activeAttachmentUploads: attachmentMetadata, onCancelAttachmentUpload: (attachmentId) => {
+            React.createElement(_AttachmentUploadCards, { attachmentsWithProgress: attachmentMetadata, onCancelAttachmentUpload: (attachmentId) => {
                     setAttachmentMetadata(attachmentMetadata === null || attachmentMetadata === void 0 ? void 0 : attachmentMetadata.filter((attachment) => attachment.id !== attachmentId));
                 } }))));
     }, [attachmentMetadata]);
@@ -12813,7 +12785,7 @@ class ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-WGqg2woK.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DpYUiI1l.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -12821,7 +12793,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-WGqg2woK.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DpYUiI1l.js'); });
 /**
  * @private
  */
@@ -13073,9 +13045,7 @@ const MessageBubble = (props) => {
     const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMessageCommonStyles = useChatMessageCommonStyles();
     const chatMessageStyles = useChatMessageStyles();
-    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
-    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-    chatMessageStyles.body, 
+    const chatItemMessageContainerClassName = reactComponents.mergeClasses(chatMessageCommonStyles.body, chatMessageStyles.body, 
     // disable placeholder functionality for GA releases as it might confuse users
     chatMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
         ? chatMessageCommonStyles.blocked
@@ -13083,7 +13053,9 @@ const MessageBubble = (props) => {
             ? chatMessageCommonStyles.failed
             : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
         ? chatMessageStyles.bodyWithAvatar
-        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
+        : chatMessageStyles.bodyWithoutAvatar, 
+    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+    react.mergeStyles(messageContainerStyle));
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     const chatMessage = (React.createElement(React.Fragment, null,
         React.createElement("div", { key: props.message.messageId },
@@ -15204,13 +15176,6 @@ const disabledVideoHint = react.mergeStyles({
     padding: '0.15rem',
     maxWidth: '100%'
 });
-/**
- * @private
- */
-const videoHint = react.mergeStyles(disabledVideoHint, {
-    // This will appear on top of the video stream, so no dependency on theme and explicitly use a translucent white
-    backgroundColor: 'rgba(255,255,255,0.8)'
-});
 /**
  * @private
  */
@@ -15340,16 +15305,6 @@ const reactionRenderingStyle = (args) => {
     });
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const getVideoTileOverrideColor = (isVideoRendered, theme, color) => {
-    // when video is being rendered, the info has a grey-ish background, so no use of theme
-    return { color: isVideoRendered ? react.DefaultPalette[color] : theme.palette[color] };
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -15490,6 +15445,7 @@ const VideoTile = (props) => {
     const videoTileRef = React.useRef(null);
     const locale = useLocale$1();
     const theme = useTheme();
+    const callingPalette = theme.callingPalette;
     const isVideoRendered = !!renderElement;
     const observer = React.useRef(new ResizeObserver((entries) => {
         const { width, height } = entries[0].contentRect;
@@ -15560,14 +15516,16 @@ const VideoTile = (props) => {
         styles: defaultPersonaStyles$1,
         hidePersonaDetails: true
     };
-    const videoHintWithBorderRadius = react.mergeStyles(videoHint, { borderRadius: theme.effects.roundedCorner4 });
-    const tileInfoStyle = React.useMemo(() => react.mergeStyles(isVideoRendered ? videoHintWithBorderRadius : disabledVideoHint, getVideoTileOverrideColor(isVideoRendered, theme, 'neutralPrimary'), styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, theme, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer]);
+    const videoHintWithBorderRadius = react.mergeStyles(disabledVideoHint, {
+        borderRadius: theme.effects.roundedCorner4,
+        backgroundColor: callingPalette.videoTileLabelBackgroundLight
+    });
+    const tileInfoStyle = React.useMemo(() => react.mergeStyles(isVideoRendered || props.alwaysShowLabelBackground ? videoHintWithBorderRadius : disabledVideoHint, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer), [isVideoRendered, videoHintWithBorderRadius, styles === null || styles === void 0 ? void 0 : styles.displayNameContainer, props.alwaysShowLabelBackground]);
     const ids = useIdentifiers();
     const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
     const participantStateString = participantStateStringTrampoline(props, locale);
     const canShowContextMenuButton = isHovered || isFocused;
     let raisedHandBackgroundColor = '';
-    const callingPalette = theme.callingPalette;
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
     return (React.createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
@@ -16405,7 +16363,7 @@ const _RemoteVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(hide-attendee-name) */
     displayName = formatDisplayName();
     return (React.createElement(react.Stack, { tabIndex: menuKind === 'drawer' ? 0 : undefined, onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined, style: remoteVideoTileWrapperStyle },
-        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
+        React.createElement(VideoTile, Object.assign({ key: userId, userId: userId, initialsName: (_b = remoteParticipant.displayName) !== null && _b !== void 0 ? _b : '', renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: remoteParticipant.isMuted, raisedHand: remoteParticipant.raisedHand, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, alwaysShowLabelBackground: props.alwaysShowLabelBackground, 
             /* @conditional-compile-remove(one-to-n-calling) */
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
@@ -16656,7 +16614,7 @@ const LocalVideoCameraCycleButton = (props) => {
  * @internal
  */
 const _LocalVideoTile = React.memo((props) => {
-    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, 
+    const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, 
     /* @conditional-compile-remove(spotlight) */
     isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */
@@ -16758,7 +16716,7 @@ const _LocalVideoTile = React.memo((props) => {
     const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
     return (React.createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), 
         /* @conditional-compile-remove(spotlight) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
-        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, 
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, 
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { 
             /* @conditional-compile-remove(spotlight) */
@@ -18800,7 +18758,7 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(spotlight) */
     onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    maxParticipantsToSpotlight, reactionResources } = props;
+    maxParticipantsToSpotlight, reactionResources, videoTilesOptions } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -18856,7 +18814,7 @@ const VideoGallery = (props) => {
             return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
         };
         return (React.createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
-            React.createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, 
+            React.createElement(_LocalVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: showDisplayNameTrampoline(), initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: showLocalVideoTileLabel, showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles, raisedHand: localParticipant.raisedHand, reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
                 spotlightedParticipantUserIds: spotlightedParticipants, 
                 /* @conditional-compile-remove(spotlight) */
@@ -18904,7 +18862,8 @@ const VideoGallery = (props) => {
         strings,
         /* @conditional-compile-remove(spotlight) */
         drawerMenuHostId,
-        reactionResources
+        reactionResources,
+        videoTilesOptions
     ]);
     const onPinParticipant = React.useCallback((userId) => {
         if (pinnedParticipants.length >= MAX_PINNED_REMOTE_VIDEO_TILES) {
@@ -18953,7 +18912,7 @@ const VideoGallery = (props) => {
                 }
                 : remoteVideoViewOptions;
         };
-        return (React.createElement(_RemoteVideoTile, { streamId: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.id, key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: createViewOptions(), onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
+        return (React.createElement(_RemoteVideoTile, { alwaysShowLabelBackground: videoTilesOptions === null || videoTilesOptions === void 0 ? void 0 : videoTilesOptions.alwaysShowLabelBackground, streamId: remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.id, key: participant.userId, userId: participant.userId, remoteParticipant: participant, onCreateRemoteStreamView: isVideoParticipant ? onCreateRemoteStreamView : undefined, onDisposeRemoteStreamView: isVideoParticipant ? onDisposeRemoteVideoStreamView : undefined, isAvailable: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isAvailable : false, isReceiving: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.isReceiving : false, renderElement: isVideoParticipant ? remoteVideoStream === null || remoteVideoStream === void 0 ? void 0 : remoteVideoStream.renderElement : undefined, remoteVideoViewOptions: createViewOptions(), onRenderAvatar: onRenderAvatar, showMuteIndicator: showMuteIndicator, strings: strings, 
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, menuKind: participant.userId === localParticipant.userId
                 ? undefined
@@ -18992,7 +18951,8 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
-        reactionResources
+        reactionResources,
+        videoTilesOptions
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -25416,7 +25376,7 @@ class AttachmentUpload {
     constructor(data) {
         this._emitter = new EventEmitter.EventEmitter();
         this._emitter.setMaxListeners(_MAX_EVENT_LISTENERS);
-        this.id = nanoid.nanoid();
+        this.taskId = nanoid.nanoid();
         if (data instanceof File) {
             this.file = data;
         }
@@ -25426,14 +25386,14 @@ class AttachmentUpload {
         const name = data === null || data === void 0 ? void 0 : data.name;
         this.name = name;
     }
-    notifyProgressChanged(value) {
-        this._emitter.emit('uploadProgressChange', this.id, value);
+    notifyUploadProgressChanged(value) {
+        this._emitter.emit('uploadProgressChange', this.taskId, value);
     }
-    notifyCompleted(metadata) {
-        this._emitter.emit('uploadComplete', this.id, metadata);
+    notifyUploadCompleted(id, url) {
+        this._emitter.emit('uploadComplete', this.taskId, id, url);
     }
-    notifyFailed(message) {
-        this._emitter.emit('uploadFail', this.id, message);
+    notifyUploadFailed(message) {
+        this._emitter.emit('uploadFail', this.taskId, message);
     }
     /**
      * Attachment upload event subscriber.
@@ -25631,7 +25591,7 @@ const AttachmentUploadButton = (props) => {
             } })));
 };
 const SendBoxAttachFileIconTrampoline = () => {
-    // @conditional-compile-remove(attachment-upload)
+    /* @conditional-compile-remove(attachment-upload) */
     return React.createElement(ChatCompositeIcon, { iconName: "SendBoxAttachFile" });
 };
 /**
@@ -25665,27 +25625,27 @@ class AttachmentUploadContext {
         this.chatContext = chatContext;
     }
     getAttachmentUploads() {
-        return this.chatContext.getState().attachmentUploads;
+        return this.chatContext.getState()._attachmentUploads;
     }
     addAttachmentUploads(attachmentUploads) {
         const attachmentUploadsMap = convertObservableAttachmentUploadToAttachmentUploadsUiState(attachmentUploads);
         this.chatContext.setState(immer.produce(this.chatContext.getState(), (draft) => {
-            draft.attachmentUploads = draft.attachmentUploads || {};
-            draft.attachmentUploads = Object.assign(Object.assign({}, draft.attachmentUploads), attachmentUploadsMap);
+            draft._attachmentUploads = draft._attachmentUploads || {};
+            draft._attachmentUploads = Object.assign(Object.assign({}, draft._attachmentUploads), attachmentUploadsMap);
         }));
     }
     clearUploads() {
         this.chatContext.setState(immer.produce(this.chatContext.getState(), (draft) => {
-            draft.attachmentUploads = {};
+            draft._attachmentUploads = {};
         }));
     }
     updateAttachmentUpload(id, data) {
         this.chatContext.setState(immer.produce(this.chatContext.getState(), (draft) => {
             var _a, _b, _c, _d;
-            if ((_a = draft.attachmentUploads) === null || _a === void 0 ? void 0 : _a[id]) {
-                draft.attachmentUploads[(_b = data.id) !== null && _b !== void 0 ? _b : id] = Object.assign(Object.assign({}, (_c = draft.attachmentUploads) === null || _c === void 0 ? void 0 : _c[id]), data);
+            if ((_a = draft._attachmentUploads) === null || _a === void 0 ? void 0 : _a[id]) {
+                draft._attachmentUploads[(_b = data.id) !== null && _b !== void 0 ? _b : id] = Object.assign(Object.assign({}, (_c = draft._attachmentUploads) === null || _c === void 0 ? void 0 : _c[id]), data);
                 if (data.id) {
-                    (_d = draft.attachmentUploads) === null || _d === void 0 ? true : delete _d[id];
+                    (_d = draft._attachmentUploads) === null || _d === void 0 ? true : delete _d[id];
                 }
             }
         }));
@@ -25694,10 +25654,10 @@ class AttachmentUploadContext {
         this.chatContext.setState(immer.produce(this.chatContext.getState(), (draft) => {
             ids.forEach((id) => {
                 var _a;
-                const keys = Object.keys((_a = draft === null || draft === void 0 ? void 0 : draft.attachmentUploads) !== null && _a !== void 0 ? _a : []).filter((rawID) => { var _a; return ((_a = draft.attachmentUploads) === null || _a === void 0 ? void 0 : _a[rawID].id) === id; });
+                const keys = Object.keys((_a = draft === null || draft === void 0 ? void 0 : draft._attachmentUploads) !== null && _a !== void 0 ? _a : []).filter((rawID) => { var _a; return ((_a = draft._attachmentUploads) === null || _a === void 0 ? void 0 : _a[rawID].id) === id; });
                 keys.forEach((key) => {
                     var _a;
-                    (_a = draft.attachmentUploads) === null || _a === void 0 ? true : delete _a[key];
+                    (_a = draft._attachmentUploads) === null || _a === void 0 ? true : delete _a[key];
                 });
             });
         }));
@@ -25713,16 +25673,16 @@ class AzureCommunicationAttachmentUploadAdapter {
         this.context = new AttachmentUploadContext(chatContext);
     }
     findAttachmentUpload(id) {
-        return this.attachmentUploads.find((attachmentUpload) => attachmentUpload.id === id);
+        return this.attachmentUploads.find((attachmentUpload) => attachmentUpload.taskId === id);
     }
     deleteAttachmentUploads(ids) {
-        this.attachmentUploads = this.attachmentUploads.filter((attachmentUpload) => !ids.includes(attachmentUpload.id));
+        this.attachmentUploads = this.attachmentUploads.filter((attachmentUpload) => !ids.includes(attachmentUpload.taskId));
         this.context.deleteAttachmentUploads(ids);
     }
     deleteErroneousAttachmentUploads() {
         const attachmentUploads = this.context.getAttachmentUploads() || {};
         const ids = Object.values(attachmentUploads)
-            .filter((item) => item.uploadError)
+            .filter((item) => item.error)
             .map((item) => item.id);
         ids.forEach((id) => {
             const attachmentUpload = this.findAttachmentUpload(id);
@@ -25761,9 +25721,8 @@ class AzureCommunicationAttachmentUploadAdapter {
     }
     updateUploadStatusMessage(id, errorMessage) {
         this.context.updateAttachmentUpload(id, {
-            uploadError: {
-                message: errorMessage,
-                timestamp: Date.now()
+            error: {
+                message: errorMessage
             }
         });
     }
@@ -25776,20 +25735,30 @@ class AzureCommunicationAttachmentUploadAdapter {
             extension: metadata.extension
         });
     }
+    setAttachmentMetadata(taskId, attachmentId, attachmentUrl) {
+        const attachmentUpload = this.findAttachmentUpload(taskId);
+        this.context.updateAttachmentUpload(taskId, {
+            progress: 1,
+            id: attachmentId,
+            name: attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.name,
+            url: attachmentUrl,
+            extension: (attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.name.split('.').pop()) || ''
+        });
+    }
     subscribeAllEvents(attachmentUpload) {
         attachmentUpload.on('uploadProgressChange', this.updateUploadProgress.bind(this));
-        attachmentUpload.on('uploadComplete', this.updateUploadMetadata.bind(this));
+        attachmentUpload.on('uploadComplete', this.setAttachmentMetadata.bind(this));
         attachmentUpload.on('uploadFail', this.updateUploadStatusMessage.bind(this));
     }
     unsubscribeAllEvents(attachmentUpload) {
         attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.off('uploadProgressChange', this.updateUploadProgress.bind(this));
-        attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.off('uploadComplete', this.updateUploadMetadata.bind(this));
+        attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.off('uploadComplete', this.setAttachmentMetadata.bind(this));
         attachmentUpload === null || attachmentUpload === void 0 ? void 0 : attachmentUpload.off('uploadFail', this.updateUploadStatusMessage.bind(this));
     }
 }
 /* @conditional-compile-remove(attachment-upload) */
 /**
- * @param attachmentUploadUiState {@link AttachmentUploadsUiState}
+ * @param attachmentUploadUiState {@link _AttachmentUploadsUiState}
  * @private
  */
 const convertAttachmentUploadsUiStateToMessageMetadata = (attachmentUploads) => {
@@ -25797,7 +25766,7 @@ const convertAttachmentUploadsUiStateToMessageMetadata = (attachmentUploads) =>
         const attachmentMetadata = [];
         Object.keys(attachmentUploads).forEach((key) => {
             const attachment = attachmentUploads[key];
-            if (attachment && !attachment.uploadError) {
+            if (attachment && !attachment.error) {
                 attachmentMetadata.push({
                     id: attachment.id,
                     name: attachment.name,
@@ -25819,8 +25788,8 @@ const convertAttachmentUploadsUiStateToMessageMetadata = (attachmentUploads) =>
  */
 const convertObservableAttachmentUploadToAttachmentUploadsUiState = (attachmentUploads) => {
     return attachmentUploads.reduce((map, attachmentUpload) => {
-        map[attachmentUpload.id] = {
-            id: attachmentUpload.id,
+        map[attachmentUpload.taskId] = {
+            id: attachmentUpload.taskId,
             name: attachmentUpload.name,
             progress: 0,
             extension: attachmentUpload.name.split('.').pop() || ''
@@ -25894,7 +25863,7 @@ class ChatContext {
             latestErrors: clientState.latestErrors
         };
         /* @conditional-compile-remove(attachment-upload) */
-        updatedState = Object.assign(Object.assign({}, updatedState), { attachmentUploads: this.state.attachmentUploads });
+        updatedState = Object.assign(Object.assign({}, updatedState), { _attachmentUploads: this.state._attachmentUploads });
         this.setState(updatedState);
     }
 }
@@ -25929,6 +25898,8 @@ class AzureCommunicationChatAdapter {
         this.dispose = this.dispose.bind(this);
         this.fetchInitialData = this.fetchInitialData.bind(this);
         this.sendMessage = this.sendMessage.bind(this);
+        /* @conditional-compile-remove(attachment-upload) */
+        this.sendMessageWithAttachments = this.sendMessageWithAttachments.bind(this);
         this.sendReadReceipt = this.sendReadReceipt.bind(this);
         this.sendTypingIndicator = this.sendTypingIndicator.bind(this);
         this.updateMessage = this.updateMessage.bind(this);
@@ -26001,7 +25972,7 @@ class AzureCommunicationChatAdapter {
         return __awaiter$o(this, arguments, void 0, function* (content, options = {}) {
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$o(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(attachment-upload) */
-                options.metadata = Object.assign(Object.assign({}, options.metadata), convertAttachmentUploadsUiStateToMessageMetadata(this.context.getState().attachmentUploads));
+                options.metadata = Object.assign(Object.assign({}, options.metadata), convertAttachmentUploadsUiStateToMessageMetadata(this.context.getState()._attachmentUploads));
                 /* @conditional-compile-remove(attachment-upload) */
                 /**
                  * All the current uploads need to be clear from the state before a message has been sent.
@@ -26015,6 +25986,28 @@ class AzureCommunicationChatAdapter {
             }));
         });
     }
+    /* @conditional-compile-remove(attachment-upload) */
+    /** Send a chat message with attachments. */
+    sendMessageWithAttachments(content, attachments) {
+        return __awaiter$o(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$o(this, void 0, void 0, function* () {
+                const fileSharingMetadata = {
+                    fileSharingMetadata: JSON.stringify(attachments)
+                };
+                /**
+                 * All the current uploads need to be clear from the state before a message has been sent.
+                 * This ensures the following behavior:
+                 * 1. Attachment Upload cards are removed from sendbox at the same time text in sendbox is removed.
+                 * 2. any component rendering these attachment uploads doesn't continue to do so.
+                 * 3. Cleans the state for new attachment uploads with a fresh message.
+                 */
+                this.attachmentUploadAdapter.clearUploads();
+                yield this.handlers.onSendMessage(content, {
+                    metadata: fileSharingMetadata
+                });
+            }));
+        });
+    }
     sendReadReceipt(chatMessageId) {
         return __awaiter$o(this, void 0, void 0, function* () {
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$o(this, void 0, void 0, function* () {
@@ -27062,7 +27055,7 @@ const useSelector$2 = (selector, selectorProps) => {
  */
 const getAttachmentUploads = (state) => {
     /* @conditional-compile-remove(attachment-upload) */
-    return state === null || state === void 0 ? void 0 : state.attachmentUploads;
+    return state === null || state === void 0 ? void 0 : state._attachmentUploads;
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -27162,9 +27155,9 @@ const ChatScreen = (props) => {
             return;
         }
         /* @conditional-compile-remove(attachment-upload) */
-        const attachmentUploads = adapter.registerActiveUploads(Array.from(files));
+        const uploadTasks = adapter.registerActiveUploads(Array.from(files));
         /* @conditional-compile-remove(attachment-upload) */
-        (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handler(attachmentUploads);
+        (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection(uploadTasks);
     }, [adapter, attachmentOptions]);
     /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
     const onRenderAttachmentDownloads = React.useCallback((userId, message) => {
@@ -27263,18 +27256,18 @@ const ChatScreen = (props) => {
     }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId]);
     const AttachmentButton = React.useCallback(() => {
         var _a, _b, _c;
-        if (!((_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handler)) {
+        if (!((_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _a === void 0 ? void 0 : _a.handleAttachmentSelection)) {
             return null;
         }
         return (React.createElement(AttachmentUploadButtonWrapper, { supportedMediaTypes: (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.supportedMediaTypes, disableMultipleUploads: (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.disableMultipleUploads, onChange: attachmentUploadButtonOnChange }));
     }, [
-        (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.handler,
+        (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.handleAttachmentSelection,
         (_c = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _c === void 0 ? void 0 : _c.supportedMediaTypes,
         (_d = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _d === void 0 ? void 0 : _d.disableMultipleUploads,
         attachmentUploadButtonOnChange
     ]);
     /* @conditional-compile-remove(attachment-upload) */
-    const activeAttachmentUploads = useSelector$2(attachmentUploadsSelector).attachments;
+    const attachmentsWithProgress = useSelector$2(attachmentUploadsSelector).attachments;
     return (React.createElement(react.Stack, { className: chatContainer, grow: true },
         (options === null || options === void 0 ? void 0 : options.topic) !== false && React.createElement(ChatHeader, Object.assign({}, headerProps)),
         React.createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
@@ -27295,9 +27288,13 @@ const ChatScreen = (props) => {
                         React.createElement(react.Stack, { grow: true },
                             React.createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
                                 /* @conditional-compile-remove(attachment-upload) */
-                                activeAttachmentUploads: activeAttachmentUploads, 
+                                attachmentsWithProgress: attachmentsWithProgress, 
                                 /* @conditional-compile-remove(attachment-upload) */
-                                onCancelAttachmentUpload: adapter.cancelUpload }))),
+                                onCancelAttachmentUpload: (id) => {
+                                    var _a, _b, _c;
+                                    (_a = adapter.cancelUpload) === null || _a === void 0 ? void 0 : _a.call(adapter, id);
+                                    (_c = (_b = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.uploadOptions) === null || _b === void 0 ? void 0 : _b.handleAttachmentRemoval) === null || _c === void 0 ? void 0 : _c.call(_b, id);
+                                } }))),
                         formFactor !== 'mobile' && React.createElement(AttachmentButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
             (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
@@ -28103,19 +28100,15 @@ const createCompositeHandlers = memoizeOne((adapter, capabilities) => {
             const replacementConfig = Object.assign({ effectName: 'replacement' }, backgroundReplacementConfig);
             return yield adapter.startVideoBackgroundEffect(replacementConfig);
         }),
-        /* @conditional-compile-remove(close-captions) */
         onStartCaptions: (options) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield adapter.startCaptions(options);
         }),
-        /* @conditional-compile-remove(close-captions) */
         onStopCaptions: () => __awaiter$k(void 0, void 0, void 0, function* () {
             yield adapter.stopCaptions();
         }),
-        /* @conditional-compile-remove(close-captions) */
         onSetSpokenLanguage: (language) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield adapter.setSpokenLanguage(language);
         }),
-        /* @conditional-compile-remove(close-captions) */
         onSetCaptionLanguage: (language) => __awaiter$k(void 0, void 0, void 0, function* () {
             yield adapter.setCaptionLanguage(language);
         }),
@@ -28164,13 +28157,9 @@ const createCompositeHandlers = memoizeOne((adapter, capabilities) => {
 // Licensed under the MIT License.
 /** @private */
 const CaptionsSettingsModal = (props) => {
-    /* @conditional-compile-remove(close-captions) */
     const CaptionsSettingsModalProps = useAdaptedSelector(_captionSettingsSelector);
-    /* @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,
         captionsSettingsSpokenLanguageDropdownLabel: strings.captionsSettingsSpokenLanguageDropdownLabel,
@@ -28182,11 +28171,8 @@ const CaptionsSettingsModal = (props) => {
         captionsSettingsModalAriaLabel: strings.captionsSettingsModalAriaLabel,
         captionsSettingsCloseModalButtonAriaLabel: strings.captionsSettingsCloseModalButtonAriaLabel
     };
-    /* @conditional-compile-remove(close-captions) */
     const spokenLanguageStrings = strings.spokenLanguageStrings;
-    /* @conditional-compile-remove(close-captions) */
     const captionLanguageStrings = strings.captionLanguageStrings;
-    /* @conditional-compile-remove(close-captions) */
     return (React.createElement(_CaptionsSettingsModal, Object.assign({}, CaptionsSettingsModalProps, handlers, { strings: modalStrings, spokenLanguageStrings: spokenLanguageStrings, captionLanguageStrings: captionLanguageStrings, showModal: props.showCaptionsSettingsModal, onDismissCaptionsSettings: props.onDismissCaptionsSettings, changeCaptionLanguage: props.changeCaptionLanguage })));
 };
 
@@ -28313,26 +28299,19 @@ var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments,
  * @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$j(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
-    /* @conditional-compile-remove(close-captions) */
     moreButtonContextualMenuItems.push({
         key: 'ToggleCaptionsKey',
         text: startCaptionsButtonProps.checked
@@ -28353,7 +28332,6 @@ const CaptionsBannerMoreButton = (props) => {
             styles: buttonFlyoutIncreasedSizeStyles
         }
     });
-    /* @conditional-compile-remove(close-captions) */
     if (props.onCaptionsSettingsClick) {
         moreButtonContextualMenuItems.push({
             key: 'openCaptionsSettingsKey',
@@ -28370,7 +28348,6 @@ const CaptionsBannerMoreButton = (props) => {
             disabled: !startCaptionsButtonProps.checked
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "captions-banner-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
             items: moreButtonContextualMenuItems,
             calloutProps: {
@@ -28381,49 +28358,35 @@ const CaptionsBannerMoreButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-/* @conditional-compile-remove(close-captions) */
 const mobileViewBannerWidth = '90%';
 /** @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
     });
-    /* @conditional-compile-remove(close-captions) */
     const strings = useLocale().strings.call;
-    /* @conditional-compile-remove(close-captions) */
     const captionsBannerStrings = {
         captionsBannerSpinnerText: strings.captionsBannerSpinnerText
     };
-    /* @conditional-compile-remove(close-captions) */
     const onRenderAvatar = React.useCallback((userId, options) => {
         return React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }));
     }, [props.onFetchAvatarPersonaData]);
-    /* @conditional-compile-remove(close-captions) */
     const { innerWidth: width } = window;
-    /* @conditional-compile-remove(close-captions) */
     const [windowWidth, setWindowWidth] = React.useState(width);
-    /* @conditional-compile-remove(close-captions) */
     React.useEffect(() => {
         function handleResize() {
             setWindowWidth(window.innerWidth);
@@ -28431,11 +28394,10 @@ const CaptionsBanner = (props) => {
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
     }, []);
-    /* @conditional-compile-remove(close-captions) */
     const desktopViewBannerWidth = windowWidth > 620 ? '35rem' : '80%';
     return (React.createElement(React.Fragment, null,
-        /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions })),
-        /* @conditional-compile-remove(close-captions) */ React.createElement("div", { className: containerClassName },
+        isCaptionsSettingsOpen && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.useTeamsCaptions })),
+        React.createElement("div", { className: containerClassName },
             React.createElement(react.Stack, { horizontalAlign: "center" },
                 React.createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
                     React.createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { onRenderAvatar: onRenderAvatar, formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
@@ -28727,13 +28689,11 @@ const getCaptionsKind = (state) => {
     var _a;
     return (_a = state.call) === null || _a === void 0 ? void 0 : _a.captionsFeature.captionsKind;
 };
-/* @conditional-compile-remove(close-captions) */
 /** @private */
 const getCaptionsStatus = (state) => {
     var _a;
     return (_a = state.call) === null || _a === void 0 ? void 0 : _a.captionsFeature.isCaptionsFeatureActive;
 };
-/* @conditional-compile-remove(close-captions) */
 /**
  * @private
  */
@@ -29519,15 +29479,11 @@ var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments,
  */
 const DesktopMoreButton = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    /*@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(close-captions) */
     const startCaptionsButtonProps = useAdaptedSelector(_startCaptionsButtonSelector);
-    /* @conditional-compile-remove(close-captions) */
     const startCaptionsButtonHandlers = useHandlers();
-    /* @conditional-compile-remove(close-captions) */
     const startCaptions = React.useCallback(() => __awaiter$h(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
@@ -29540,13 +29496,11 @@ const DesktopMoreButton = (props) => {
     const callees = useSelector$1(getTargetCallees);
     const allowDtmfDialer = showDtmfDialer(callees);
     const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
-    /* @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
     }), [localeStrings]);
     const moreButtonContextualMenuItems = [];
-    /* @conditional-compile-remove(close-captions) */
     const menuSubIconStyleSet = {
         root: {
             height: 'unset',
@@ -29568,7 +29522,6 @@ const DesktopMoreButton = (props) => {
         disabled: props.disableButtonsForHoldScreen
     });
     // is captions feature is active
-    /* @conditional-compile-remove(close-captions) */
     if (props.isCaptionsSupported) {
         const captionsContextualMenuItems = [];
         moreButtonContextualMenuItems.push({
@@ -29823,9 +29776,7 @@ const DesktopMoreButton = (props) => {
                 styles: buttonFlyoutIncreasedSizeStyles
             } }, element));
     });
-    return (React.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) */ /* @conditional-compile-remove(close-captions) */
-        strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
+    return (React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: { hidden: true }, menuProps: {
             items: moreButtonContextualMenuItems,
             calloutProps: {
                 preventDismissOnEvent: _preventDismissOnEvent
@@ -30061,7 +30012,6 @@ 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);
     /* @conditional-compile-remove(end-call-options) */
     // If the hangup capability is not present, we default to true
@@ -30094,11 +30044,9 @@ 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);
     }, []);
@@ -30154,17 +30102,15 @@ const CommonCallControlBar = (props) => {
     const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
     const showCaptionsButton = props.isCaptionsSupported &&
         /* @conditional-compile-remove(acs-close-captions) */ isEnabled$1(options.captionsButton);
-    const showDesktopMoreButton = 
-    /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
+    const showDesktopMoreButton = isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
         (/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) ||
-            /* @conditional-compile-remove(close-captions) */ showCaptionsButton ||
+            showCaptionsButton ||
             props.onUserSetGalleryLayout);
     const role = (_b = props.callAdapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     const hideRaiseHandButtonInRoomsCall = props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
     const reactionResources = props.callAdapter.getState().reactions;
     return (React.createElement("div", { ref: controlBarSizeRef },
-        React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
-        /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions }))),
+        React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions }))),
         React.createElement(react.Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: react.mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
             React.createElement(react.Stack.Item, { grow: true, className: react.mergeStyles(controlBarWrapperDesktopStyles) },
                 React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
@@ -30204,11 +30150,7 @@ const CommonCallControlBar = (props) => {
                                     props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
                                     !props.mobileView && showDesktopMoreButton && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, 
                                         /*@conditional-compile-remove(PSTN-calls) */
-                                        onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, 
-                                        /* @conditional-compile-remove(close-captions) */
-                                        isCaptionsSupported: showCaptionsButton, 
-                                        /* @conditional-compile-remove(close-captions) */
-                                        onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage })),
+                                        onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, isCaptionsSupported: showCaptionsButton, onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage })),
                                     React.createElement(EndCall, { displayType: "compact", mobileView: props.mobileView, styles: endCallButtonStyles, 
                                         /* @conditional-compile-remove(end-call-options) */
                                         enableEndCallMenu: !isBoolean(props.callControls) &&
@@ -30405,13 +30347,10 @@ const captionSettingsDrawerStyles = (theme) => ({
 /** @private */
 const CaptionLanguageSettingsDrawer = (props) => {
     var _a;
-    /* @conditional-compile-remove(close-captions) */
     const theme = useTheme();
-    /* @conditional-compile-remove(close-captions) */
     const onDrawerItemClick = React.useCallback((languageCode) => {
         props.selectLanguage(languageCode);
     }, [props]);
-    /* @conditional-compile-remove(close-captions) */
     const drawerItems = React.useMemo(() => {
         var _a;
         return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
@@ -30425,7 +30364,6 @@ const CaptionLanguageSettingsDrawer = (props) => {
         const copy = [...drawerItems];
         return copy.sort((a, b) => (a.text && b.text && a.text > b.text ? 1 : -1));
     }, [drawerItems]);
-    /* @conditional-compile-remove(close-captions) */
     return (React.createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
             props.setCurrentLanguage(props.currentLanguage);
             props.onLightDismiss();
@@ -30463,13 +30401,10 @@ const themedToggleButtonStyle = (theme, checked) => {
 /** @private */
 const SpokenLanguageSettingsDrawer = (props) => {
     var _a;
-    /* @conditional-compile-remove(close-captions) */
     const theme = useTheme();
-    /* @conditional-compile-remove(close-captions) */
     const onDrawerItemClick = React.useCallback((languageCode) => {
         props.selectLanguage(languageCode);
     }, [props]);
-    /* @conditional-compile-remove(close-captions) */
     const drawerItems = React.useMemo(() => {
         var _a;
         return _getKeys((_a = props.supportedLanguageStrings) !== null && _a !== void 0 ? _a : []).map((languageCode) => ({
@@ -30483,7 +30418,6 @@ const SpokenLanguageSettingsDrawer = (props) => {
         const copy = [...drawerItems];
         return copy.sort((a, b) => (a.text && b.text && a.text > b.text ? 1 : -1));
     }, [drawerItems]);
-    /* @conditional-compile-remove(close-captions) */
     return (React.createElement(_DrawerMenu, { heading: (_a = props.strings) === null || _a === void 0 ? void 0 : _a.menuTitle, items: sortedDrawerItems !== null && sortedDrawerItems !== void 0 ? sortedDrawerItems : [], onLightDismiss: () => {
             props.setCurrentLanguage(props.currentLanguage);
             props.onLightDismiss();
@@ -30511,7 +30445,6 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 /** @private */
 const MoreDrawer = (props) => {
     var _a, _b, _c, _d, _e, _f, _g;
-    /* @conditional-compile-remove(close-captions) */
     const theme = react.useTheme();
     const callAdapter = useAdapter();
     const drawerMenuItems = [];
@@ -30725,27 +30658,17 @@ const MoreDrawer = (props) => {
             }
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     //Captions drawer menu
     const supportedSpokenLanguageStrings = useLocale().strings.call.spokenLanguageStrings;
-    /* @conditional-compile-remove(close-captions) */
     //Captions drawer menu
     const supportedCaptionLanguageStrings = useLocale().strings.call.captionLanguageStrings;
-    /* @conditional-compile-remove(close-captions) */
     const captionSettingsProp = useAdaptedSelector(_captionSettingsSelector);
-    /* @conditional-compile-remove(close-captions) */
     const startCaptionsButtonHandlers = useHandlers();
-    /* @conditional-compile-remove(close-captions) */
     const captionSettingsHandlers = useHandlers();
-    /* @conditional-compile-remove(close-captions) */
     const [isSpokenLanguageDrawerOpen, setIsSpokenLanguageDrawerOpen] = React.useState(false);
-    /* @conditional-compile-remove(close-captions) */
     const [isCaptionLanguageDrawerOpen, setIsCaptionLanguageDrawerOpen] = React.useState(false);
-    /* @conditional-compile-remove(close-captions) */
     const [currentSpokenLanguage, setCurrentSpokenLanguage] = React.useState((_f = captionSettingsProp.currentSpokenLanguage) !== null && _f !== void 0 ? _f : 'en-us');
-    /* @conditional-compile-remove(close-captions) */
     const [currentCaptionLanguage, setCurrentCaptionLanguage] = React.useState((_g = captionSettingsProp.currentCaptionLanguage) !== null && _g !== void 0 ? _g : _spokenLanguageToCaptionLanguage[currentSpokenLanguage]);
-    /* @conditional-compile-remove(close-captions) */
     const onToggleChange = React.useCallback(() => __awaiter$g(void 0, void 0, void 0, function* () {
         if (!captionSettingsProp.isCaptionsFeatureActive) {
             yield startCaptionsButtonHandlers.onStartCaptions({
@@ -30756,7 +30679,6 @@ const MoreDrawer = (props) => {
             startCaptionsButtonHandlers.onStopCaptions();
         }
     }), [captionSettingsProp.isCaptionsFeatureActive, startCaptionsButtonHandlers, currentSpokenLanguage]);
-    /* @conditional-compile-remove(close-captions) */
     if (showCaptionsButton) {
         const captionsDrawerItems = [];
         const spokenLanguageString = supportedSpokenLanguageStrings
@@ -30836,7 +30758,6 @@ const MoreDrawer = (props) => {
     customDrawerButtons['overflow'].forEach((element) => {
         drawerMenuItems.push(element);
     });
-    /* @conditional-compile-remove(close-captions) */
     return (React.createElement(React.Fragment, null,
         isSpokenLanguageDrawerOpen && showCaptionsButton && (React.createElement(SpokenLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentSpokenLanguage, setCurrentLanguage: captionSettingsHandlers.onSetSpokenLanguage, currentLanguage: currentSpokenLanguage, strings: { menuTitle: props.strings.spokenLanguageMenuTitle }, supportedLanguageStrings: supportedSpokenLanguageStrings })),
         isCaptionLanguageDrawerOpen && showCaptionsButton && (React.createElement(CaptionLanguageSettingsDrawer, { onLightDismiss: props.onLightDismiss, selectLanguage: setCurrentCaptionLanguage, setCurrentLanguage: captionSettingsHandlers.onSetCaptionLanguage, currentLanguage: currentCaptionLanguage, strings: { menuTitle: props.strings.captionLanguageMenuTitle }, supportedLanguageStrings: supportedCaptionLanguageStrings })),
@@ -30869,11 +30790,8 @@ const PreparedMoreDrawer = (props) => {
         audioDeviceMenuTitle: strings.moreDrawerAudioDeviceMenuTitle,
         microphoneMenuTitle: strings.moreDrawerMicrophoneMenuTitle,
         speakerMenuTitle: strings.moreDrawerSpeakerMenuTitle,
-        /* @conditional-compile-remove(close-captions) */
         captionsMenuTitle: strings.moreDrawerCaptionsMenuTitle,
-        /* @conditional-compile-remove(close-captions) */
         spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle,
-        /* @conditional-compile-remove(close-captions) */
         captionLanguageMenuTitle: strings.moreDrawerCaptionLanguageMenuTitle,
         galleryOptionsMenuTitle: strings.moreDrawerGalleryOptionsMenuTitle
     }), [strings]);
@@ -32677,11 +32595,8 @@ const CallArrangement = (props) => {
     }
     /* @conditional-compile-remove(acs-close-captions) */
     const isTeamsCaptions = useSelector$1(getCaptionsKind) === 'TeamsCaptions';
-    /* @conditional-compile-remove(close-captions) */
     const useTeamsCaptions = useSelector$1(getIsTeamsCall) || /* @conditional-compile-remove(acs-close-captions) */ isTeamsCaptions;
-    /* @conditional-compile-remove(close-captions) */
     const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
-    /* @conditional-compile-remove(close-captions) */
     const isCaptionsOn = useSelector$1(getCaptionsStatus);
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
@@ -32702,25 +32617,15 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(one-to-n-calling) */
                     onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React.createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, 
                     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                    disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
-                    /* @conditional-compile-remove(close-captions) */
-                    isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
-                        /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, 
-                    /* @conditional-compile-remove(close-captions) */
-                    useTeamsCaptions: useTeamsCaptions, 
-                    /* @conditional-compile-remove(close-captions) */
-                    isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, 
+                    disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
+                        /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, isCaptionsOn: isCaptionsOn, onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, 
                     /* @conditional-compile-remove(spotlight) */
                     onStopLocalSpotlight: !hideSpotlightButtons && localParticipant.spotlight ? onStopLocalSpotlightWithPrompt : undefined }))))),
                 ((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                        disableButtonsForHoldScreen: isInLocalHold, 
-                        /* @conditional-compile-remove(close-captions) */
-                        isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
-                            /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, 
-                        /* @conditional-compile-remove(close-captions) */
-                        useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: adapter.getState().reactions }))),
+                        disableButtonsForHoldScreen: isInLocalHold, isCaptionsSupported: (useTeamsCaptions && hasJoinedCall) ||
+                            /* @conditional-compile-remove(acs-close-captions) */ hasJoinedCall, useTeamsCaptions: useTeamsCaptions, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, onSetDialpadPage: props.onSetDialpadPage, dtmfDialerPresent: props.dtmfDialerPresent, reactionResources: adapter.getState().reactions }))),
                 React.createElement(react.Stack, { horizontal: true, grow: true },
                     React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -32735,10 +32640,7 @@ const CallArrangement = (props) => {
                                         React.createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
                                     canUnmute && !!props.mutedNotificationProps && (React.createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
                                 renderGallery && props.onRenderGalleryContent && props.onRenderGalleryContent(),
-                                /* @conditional-compile-remove(close-captions) */
-                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, 
-                                    /* @conditional-compile-remove(close-captions) */
-                                    useTeamsCaptions: useTeamsCaptions }))))),
+                                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !isInLocalHold && (React.createElement(CaptionsBanner, { isMobile: props.mobileView, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, useTeamsCaptions: useTeamsCaptions }))))),
                     React.createElement(SidePane, { mobileView: props.mobileView, maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
@@ -32802,7 +32704,7 @@ const MediaGallery = (props) => {
     const { pinnedParticipants = [], setPinnedParticipants, 
     /* @conditional-compile-remove(spotlight) */ setIsPromptOpen, 
     /* @conditional-compile-remove(spotlight) */ setPromptProps, 
-    /* @conditional-compile-remove(spotlight) */ hideSpotlightButtons } = props;
+    /* @conditional-compile-remove(spotlight) */ hideSpotlightButtons, videoTilesOptions } = props;
     const videoGalleryProps = usePropsFor$1(VideoGallery);
     const cameraSwitcherCameras = useSelector$1(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers();
@@ -32870,7 +32772,7 @@ const MediaGallery = (props) => {
         const layoutBasedOnUserSelection = () => {
             return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
         };
-        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, remoteVideoTileMenu: remoteVideoTileMenuOptions, overflowGalleryPosition: overflowGalleryPosition, localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')
+        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { videoTilesOptions: videoTilesOptions, localVideoViewOptions: localVideoViewOptions$2, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, remoteVideoTileMenu: remoteVideoTileMenuOptions, overflowGalleryPosition: overflowGalleryPosition, localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')
                 ? 'hidden'
                 : props.isMobile && containerAspectRatio < 1
                     ? '9:16'
@@ -32909,7 +32811,8 @@ const MediaGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */
         onStopRemoteSpotlightWithPrompt,
         /* @conditional-compile-remove(spotlight) */
-        hideSpotlightButtons
+        hideSpotlightButtons,
+        videoTilesOptions
     ]);
     return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -33243,7 +33146,7 @@ const CallPage = (props) => {
                 /* @conditional-compile-remove(spotlight) */
                 setPromptProps: setPromptProps, 
                 /* @conditional-compile-remove(spotlight) */
-                hideSpotlightButtons: (_a = options === null || options === void 0 ? void 0 : options.spotlight) === null || _a === void 0 ? void 0 : _a.hideSpotlightButtons })));
+                hideSpotlightButtons: (_a = options === null || options === void 0 ? void 0 : options.spotlight) === null || _a === void 0 ? void 0 : _a.hideSpotlightButtons, videoTilesOptions: options === null || options === void 0 ? void 0 : options.videoTilesOptions })));
         }
     };
     return (React.createElement(React.Fragment, null,
@@ -36245,13 +36148,10 @@ 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);
-        }
+        this.startCaptions.bind(this);
+        this.stopCaptions.bind(this);
+        this.setSpokenLanguage.bind(this);
+        this.setCaptionLanguage.bind(this);
         this.startVideoBackgroundEffect.bind(this);
         this.stopVideoBackgroundEffects.bind(this);
         this.updateBackgroundPickerImages.bind(this);
@@ -36694,25 +36594,21 @@ class AzureCommunicationCallAdapter {
             this.handlers.onSendDtmfTone(dtmfTone);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     startCaptions(options) {
         return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onStartCaptions(options);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     stopCaptions() {
         return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onStopCaptions();
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setCaptionLanguage(language) {
         return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onSetCaptionLanguage(language);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setSpokenLanguage(language) {
         return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onSetSpokenLanguage(language);
@@ -36755,7 +36651,6 @@ class AzureCommunicationCallAdapter {
     on(event, listener) {
         this.emitter.on(event, listener);
     }
-    /* @conditional-compile-remove(close-captions) */
     subscribeToCaptionEvents() {
         var _a, _b;
         if (this.call && this.call.state === 'Connected') {
@@ -36778,7 +36673,6 @@ class AzureCommunicationCallAdapter {
             }
         }
     }
-    /* @conditional-compile-remove(close-captions) */
     unsubscribeFromCaptionEvents() {
         var _a, _b, _c;
         if (this.call && this.call.state === 'Connected') {
@@ -36811,7 +36705,6 @@ class AzureCommunicationCallAdapter {
         (_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));
         (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('roleChanged', this.roleChanged.bind(this));
         (_g = this.call) === null || _g === void 0 ? void 0 : _g.feature(communicationCalling.Features.Transfer).on('transferAccepted', this.transferAccepted.bind(this));
@@ -36830,7 +36723,6 @@ class AzureCommunicationCallAdapter {
         (_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));
         (_e = this.call) === null || _e === void 0 ? void 0 : _e.off('roleChanged', this.roleChanged.bind(this));
-        /* @conditional-compile-remove(close-captions) */
         this.unsubscribeFromCaptionEvents();
         if (this.callingSoundSubscriber) {
             this.callingSoundSubscriber.unsubscribeAll();
@@ -36856,7 +36748,6 @@ 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) */
     teamsCaptionsReceived(captionsInfo) {
         this.emitter.emit('captionsReceived', { captionsInfo });
     }
@@ -36864,7 +36755,6 @@ class AzureCommunicationCallAdapter {
     captionsReceived(captionsInfo) {
         this.emitter.emit('captionsReceived', { captionsInfo });
     }
-    /* @conditional-compile-remove(close-captions) */
     isCaptionsActiveChanged() {
         var _a;
         const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
@@ -36872,7 +36762,6 @@ class AzureCommunicationCallAdapter {
             isActive: captionsFeature.isCaptionsFeatureActive
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     isSpokenLanguageChanged() {
         var _a;
         const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
@@ -36880,7 +36769,6 @@ class AzureCommunicationCallAdapter {
             activeSpokenLanguage: captionsFeature.activeSpokenLanguage
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     isCaptionLanguageChanged() {
         var _a;
         const captionsFeature = (_a = this.call) === null || _a === void 0 ? void 0 : _a.feature(communicationCalling.Features.Captions).captions;
@@ -37451,25 +37339,21 @@ class CallWithChatBackedCallAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callWithChatAdapter.allowUnsupportedBrowserVersion();
     }
-    /* @conditional-compile-remove(close-captions) */
     startCaptions(options) {
         return __awaiter$4(this, void 0, void 0, function* () {
             this.callWithChatAdapter.startCaptions(options);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     stopCaptions() {
         return __awaiter$4(this, void 0, void 0, function* () {
             this.callWithChatAdapter.stopCaptions();
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setCaptionLanguage(language) {
         return __awaiter$4(this, void 0, void 0, function* () {
             this.callWithChatAdapter.setCaptionLanguage(language);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setSpokenLanguage(language) {
         return __awaiter$4(this, void 0, void 0, function* () {
             this.callWithChatAdapter.setSpokenLanguage(language);
@@ -37643,6 +37527,10 @@ class CallWithChatBackedChatAdapter {
         };
         this.callWithChatAdapter = callWithChatAdapter;
     }
+    /* @conditional-compile-remove(attachment-upload) */
+    sendMessageWithAttachments(content, attachments) {
+        return this.callWithChatAdapter.sendMessageWithAttachments(content, attachments);
+    }
     downloadResourceToCache(resourceDetails) {
         return __awaiter$3(this, void 0, void 0, function* () {
             this.callWithChatAdapter.downloadResourceToCache(resourceDetails);
@@ -37662,7 +37550,7 @@ function chatAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
         thread: callWithChatAdapterState.chat,
         latestErrors: callWithChatAdapterState.latestChatErrors,
         /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploads: callWithChatAdapterState.attachmentUploads
+        _attachmentUploads: callWithChatAdapterState._attachmentUploads
     };
 }
 
@@ -38074,7 +37962,7 @@ function callWithChatAdapterStateFromBackingStates(callAdapter) {
         latestCallErrors: callAdapterState.latestErrors,
         latestChatErrors: {},
         /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploads: {},
+        _attachmentUploads: {},
         /* @conditional-compile-remove(PSTN-calls) */
         alternateCallerId: callAdapterState.alternateCallerId,
         /* @conditional-compile-remove(unsupported-browser) */
@@ -38094,7 +37982,7 @@ function callWithChatAdapterStateFromBackingStates(callAdapter) {
 function mergeChatAdapterStateIntoCallWithChatAdapterState(existingCallWithChatAdapterState, chatAdapterState) {
     return Object.assign(Object.assign({}, existingCallWithChatAdapterState), { chat: chatAdapterState.thread, latestChatErrors: chatAdapterState.latestErrors, 
         /* @conditional-compile-remove(attachment-upload) */
-        attachmentUploads: chatAdapterState.attachmentUploads });
+        _attachmentUploads: chatAdapterState._attachmentUploads });
 }
 /**
  * @private
@@ -38240,6 +38128,8 @@ class AzureCommunicationCallWithChatAdapter {
         this.disposeScreenShareStreamView.bind(this);
         this.fetchInitialData.bind(this);
         this.sendMessage.bind(this);
+        /* @conditional-compile-remove(attachment-upload) */
+        this.sendMessageWithAttachments.bind(this);
         this.sendReadReceipt.bind(this);
         this.sendTypingIndicator.bind(this);
         this.loadPreviousChatMessages.bind(this);
@@ -38272,12 +38162,10 @@ 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);
-        }
+        this.startCaptions.bind(this);
+        this.stopCaptions.bind(this);
+        this.setSpokenLanguage.bind(this);
+        this.setCaptionLanguage.bind(this);
         this.startVideoBackgroundEffect.bind(this);
         this.stopVideoBackgroundEffects.bind(this);
         this.updateBackgroundPickerImages.bind(this);
@@ -38490,6 +38378,20 @@ class AzureCommunicationCallWithChatAdapter {
             });
         });
     }
+    /* @conditional-compile-remove(attachment-upload) */
+    /** Send a chat message with attachments. */
+    sendMessageWithAttachments(content, attachments) {
+        return __awaiter$2(this, void 0, void 0, function* () {
+            return yield this.chatAdapterPromise.then((adapter) => {
+                const fileSharingMetadata = {
+                    fileSharingMetadata: JSON.stringify(attachments)
+                };
+                return adapter.sendMessage(content, {
+                    metadata: fileSharingMetadata
+                });
+            });
+        });
+    }
     /** Send a chat read receipt. */
     sendReadReceipt(chatMessageId) {
         return __awaiter$2(this, void 0, void 0, function* () {
@@ -38575,25 +38477,21 @@ class AzureCommunicationCallWithChatAdapter {
     allowUnsupportedBrowserVersion() {
         return this.callAdapter.allowUnsupportedBrowserVersion();
     }
-    /* @conditional-compile-remove(close-captions) */
     startCaptions(options) {
         return __awaiter$2(this, void 0, void 0, function* () {
             yield this.callAdapter.startCaptions(options);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     stopCaptions() {
         return __awaiter$2(this, void 0, void 0, function* () {
             yield this.callAdapter.stopCaptions();
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setCaptionLanguage(language) {
         return __awaiter$2(this, void 0, void 0, function* () {
             yield this.callAdapter.setCaptionLanguage(language);
         });
     }
-    /* @conditional-compile-remove(close-captions) */
     setSpokenLanguage(language) {
         return __awaiter$2(this, void 0, void 0, function* () {
             yield this.callAdapter.setSpokenLanguage(language);
@@ -38672,19 +38570,15 @@ 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;
-            /* @conditional-compile-remove(close-captions) */
             case 'isCaptionLanguageChanged':
                 this.callAdapter.on('isCaptionLanguageChanged', listener);
                 break;
-            /* @conditional-compile-remove(close-captions) */
             case 'isSpokenLanguageChanged':
                 this.callAdapter.on('isSpokenLanguageChanged', listener);
                 break;
@@ -38768,19 +38662,15 @@ 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;
-            /* @conditional-compile-remove(close-captions) */
             case 'isCaptionLanguageChanged':
                 this.callAdapter.off('isCaptionLanguageChanged', listener);
                 break;
-            /* @conditional-compile-remove(close-captions) */
             case 'isSpokenLanguageChanged':
                 this.callAdapter.off('isSpokenLanguageChanged', listener);
                 break;
@@ -39652,4 +39542,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-oaEwmItW.js.map
+//# sourceMappingURL=index-C2GfkUGz.js.map