@azure/communication-react 1.9.0-alpha-202310270012 → 1.9.0-alpha-202310310013

package/dist/communication-react.d.ts

@@ -242,9 +242,11 @@ export declare type AreParamEqual<A extends (props: any) => JSX.Element | undefi
 export declare type AreTypeEqual<A, B> = A extends B ? (B extends A ? true : false) : false;
 
 /**
+ * Meta Data of the attachment object returned by the ACS SDK.
  * @beta
  */
 export declare interface AttachmentDownloadResult {
+    attachmentId: string;
     blobUrl: string;
 }
 
@@ -2132,6 +2134,10 @@ export declare interface CallCompositeStrings {
      * All strings for capability changed notification
      */
     capabilityChangedNotification?: CapabilityChangedNotificationStrings;
+    /**
+     * String for the dismiss control on the local and remote PIP on mobile
+     */
+    dismissModalAriaLabel?: string;
 }
 
 /**
@@ -2761,7 +2767,7 @@ export declare interface CallWithChatAdapterManagement {
     /** @beta */
     updateFileUploadMetadata: (id: string, metadata: FileMetadata) => void;
     downloadAttachments: (options: {
-        attachmentUrls: string[];
+        attachmentUrls: Record<string, string>;
     }) => Promise<AttachmentDownloadResult[]>;
     /**
      * Puts the Call in a Localhold.
@@ -3904,7 +3910,7 @@ export declare interface ChatAdapterThreadManagement {
      */
     loadPreviousChatMessages(messagesToLoad: number): Promise<boolean>;
     downloadAttachments: (options: {
-        attachmentUrls: string[];
+        attachmentUrls: Record<string, string>;
     }) => Promise<AttachmentDownloadResult[]>;
 }
 
@@ -7555,7 +7561,7 @@ export declare type MessageThreadProps = {
      * @param attachment - FileMetadata object we want to render
      * @beta
      */
-    onFetchAttachments?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult[]>;
+    onFetchAttachments?: (attachments: FileMetadata[]) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *

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

@@ -177,7 +177,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.9.0-alpha-202310270012';
+var telemetryVersion = '1.9.0-alpha-202310310013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -9523,14 +9523,17 @@ const MessageContentAsRichTextHTML = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     React.useEffect(() => {
         var _a;
-        (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.map((fileMetadata) => {
-            if (props.onFetchAttachment &&
-                props.attachmentsMap &&
-                fileMetadata.attachmentType === 'inlineImage' &&
-                props.attachmentsMap[fileMetadata.id] === undefined) {
-                props.onFetchAttachment(fileMetadata);
-            }
+        const attachments = (_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.filter((fileMetadata) => {
+            return fileMetadata.attachmentType === 'inlineImage';
         });
+        if (props.attachmentsMap && attachments) {
+            attachments.forEach((fileMetadata) => {
+                if (props.onFetchAttachment && props.attachmentsMap && props.attachmentsMap[fileMetadata.id] === undefined) {
+                    props.onFetchAttachment([fileMetadata], props.message.messageId);
+                    return;
+                }
+            });
+        }
     }, [props]);
     return (React__default["default"].createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
@@ -10840,14 +10843,18 @@ const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$v(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
+    const onFetchInlineAttachment = React.useCallback((attachments, messageId) => __awaiter$v(void 0, void 0, void 0, function* () {
+        if (!onFetchAttachments) {
             return;
         }
-        setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
-        const attachmentDownloadResult = yield onFetchAttachments(attachment);
-        if (attachmentDownloadResult[0]) {
-            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
+        const attachmentDownloadResult = yield onFetchAttachments(attachments);
+        const listOfAttachments = inlineAttachments[messageId];
+        for (const result of attachmentDownloadResult) {
+            const { attachmentId, blobUrl } = result;
+            listOfAttachments[attachmentId] = blobUrl;
+        }
+        if (Object.keys(listOfAttachments).length > 0) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments })));
         }
     }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = React.useRef(false);
@@ -11058,6 +11065,11 @@ const MessageThreadWrapper = (props) => {
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
+        var _a;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        if (inlineAttachments[messageProps.message.messageId] === undefined) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageProps.message.messageId]: {} })));
+        }
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
             return (React__default["default"].createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
@@ -11070,7 +11082,7 @@ const MessageThreadWrapper = (props) => {
                 /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: onInlineImageClicked, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                attachmentsMap: inlineAttachments, 
+                attachmentsMap: (_a = inlineAttachments[messageProps.message.messageId]) !== null && _a !== void 0 ? _a : {}, 
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions })));
         }
@@ -21054,7 +21066,7 @@ const CallCompositeIcon = (props) => (React__default["default"].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default["default"].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
+var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",dismissModalAriaLabel:"Local and remote picture and picture, press enter to return to call",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"View",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic",moreButtonGalleryDefaultLayoutLabel:"Gallery view",moreButtonGalleryFocusedContentLayoutLabel:"Focus on content",moreButtonLargeGalleryDefaultLayoutLabel:"Large Gallery",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",moreDrawerGalleryOptionsMenuTitle:"Gallery options",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -21611,10 +21623,13 @@ class AzureCommunicationChatAdapter {
                     }
                 });
             }
-            const attachmentUrl = options.attachmentUrls[0];
-            const response = yield fetchWithAuthentication(attachmentUrl, accessToken);
-            const blob = yield response.blob();
-            return [{ blobUrl: URL.createObjectURL(blob) }];
+            const attachmentDownloadResults = [];
+            for (const id in options.attachmentUrls) {
+                const response = yield fetchWithAuthentication(options.attachmentUrls[id], accessToken);
+                const blob = yield response.blob();
+                attachmentDownloadResults.push({ attachmentId: id, blobUrl: URL.createObjectURL(blob) });
+            }
+            return attachmentDownloadResults;
         });
     }
     messageReceivedListener(event) {
@@ -22509,11 +22524,14 @@ const ChatScreen = (props) => {
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$i(void 0, void 0, void 0, function* () {
-        if (attachment.attachmentType === 'inlineImage' && attachment.previewUrl) {
-            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
-            return blob;
-        }
-        return [{ blobUrl: '' }];
+        const entry = {};
+        attachment.forEach((target) => {
+            if (target.attachmentType === 'inlineImage' && target.previewUrl) {
+                entry[target.id] = target.previewUrl;
+            }
+        });
+        const blob = yield adapter.downloadAttachments({ attachmentUrls: entry });
+        return blob;
     }), [adapter]);
     /* @conditional-compile-remove(image-gallery) */
     const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$i(void 0, void 0, void 0, function* () {
@@ -22554,7 +22572,7 @@ const ChatScreen = (props) => {
             return;
         }
         if (attachment.attachmentType === 'inlineImage' && attachment.url) {
-            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.url] });
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: { [attachment.id]: attachment.url } });
             if (blob[0]) {
                 const blobUrl = blob[0].blobUrl;
                 setFullSizeAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: blobUrl })));
@@ -26774,7 +26792,15 @@ const getPipStyles = (theme) => ({
  * @private
  */
 const PIPContainerStyle = {
-    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
+    root: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        ':focus-within': {
+            outline: '1px solid #00000000'
+        }
+    }
 };
 /**
  * @private
@@ -26797,7 +26823,11 @@ const modalStyle = {
         width: '100%',
         height: '100%',
         // pointer events for root Modal div set to none to make descendants interactive
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        ':focus-within': {
+            outline: '3px solid #00000000',
+            outlineOffset: '-3px'
+        }
     }
 };
 /**
@@ -26840,25 +26870,55 @@ const ModalLocalAndRemotePIP = (props) => {
     /* @conditional-compile-remove(rooms) */
     const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     const pictureInPictureProps = useSelector$1(localAndRemotePIPSelector);
+    const [touchStartTouches, setTouchStartTouches] = React.useState(null);
+    const onTouchEnd = React.useCallback((event) => {
+        var _a;
+        if (touchStartTouches && touchStartTouches.length === 1 && event.changedTouches.length === 1) {
+            const touchStartTouch = touchStartTouches[0];
+            const touchEndTouch = event.changedTouches[0];
+            if (Math.abs(touchStartTouch.clientX - touchEndTouch.clientX) < 10 &&
+                Math.abs(touchStartTouch.clientY - touchEndTouch.clientY) < 10) {
+                (_a = props.onDismissSidePane) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+        }
+    }, [props, touchStartTouches]);
+    const onTouchStart = React.useCallback((event) => {
+        setTouchStartTouches(event.touches);
+    }, []);
+    const onKeyDown = React.useCallback((event) => {
+        var _a;
+        if (event.key === 'Enter' || event.key === ' ') {
+            (_a = props.onDismissSidePane) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+    }, [props]);
     const pictureInPictureHandlers = useHandlers();
     const localAndRemotePIP = React.useMemo(() => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         /* @conditional-compile-remove(rooms) */
         if (role === 'Consumer' && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
-            return (React__default["default"].createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant })));
+            return (React__default["default"].createElement(react.Stack, { tabIndex: 0, "aria-label": (_c = (_b = props.strings) === null || _b === void 0 ? void 0 : _b.dismissModalAriaLabel) !== null && _c !== void 0 ? _c : '', onKeyDown: onKeyDown },
+                React__default["default"].createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant }))));
         }
-        return React__default["default"].createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers));
-    }, [pictureInPictureProps, pictureInPictureHandlers, /* @conditional-compile-remove(rooms) */ role]);
+        return (React__default["default"].createElement(react.Stack, { tabIndex: 0, "aria-label": (_e = (_d = props.strings) === null || _d === void 0 ? void 0 : _d.dismissModalAriaLabel) !== null && _e !== void 0 ? _e : '', onKeyDown: onKeyDown },
+            React__default["default"].createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers))));
+    }, [
+        /* @conditional-compile-remove(rooms) */ role,
+        onKeyDown,
+        pictureInPictureProps,
+        props,
+        pictureInPictureHandlers
+    ]);
     /* @conditional-compile-remove(rooms) */
     if (role === 'Consumer' && !pictureInPictureProps.dominantRemoteParticipant) {
         return null;
     }
     const modalStylesThemed = react.concatStyleSets(modalStyle, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.modal);
     return (React__default["default"].createElement(react.Stack, { styles: rootStyles },
-        React__default["default"].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStylesThemed, layerProps: { hostId: props.modalLayerHostId }, minDragPosition: props.minDragPosition, maxDragPosition: props.maxDragPosition }, 
-        // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have
-        // possession of the dominant remote participant video stream
-        !props.hidden && localAndRemotePIP)));
+        React__default["default"].createElement(react.Stack, { onTouchStart: onTouchStart, onTouchEnd: onTouchEnd },
+            React__default["default"].createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStylesThemed, layerProps: { hostId: props.modalLayerHostId }, minDragPosition: props.minDragPosition, maxDragPosition: props.maxDragPosition }, 
+            // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have
+            // possession of the dominant remote participant video stream
+            !props.hidden && localAndRemotePIP))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -27037,6 +27097,8 @@ const CallArrangement = (props) => {
         }
     }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);
     const isSidePaneOpen = useIsSidePaneOpen();
+    const locale = useLocale();
+    const modalStrings = { dismissModalAriaLabel: locale.strings.call.dismissModalAriaLabel };
     const isMobileWithActivePane = props.mobileView && isSidePaneOpen;
     const callCompositeContainerCSS = React.useMemo(() => {
         return {
@@ -27181,7 +27243,12 @@ const CallArrangement = (props) => {
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
                             isDisabled$3((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
-                    props.mobileView && (React__default["default"].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
+                    props.mobileView && (React__default["default"].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
+                            closePeoplePane();
+                            if (props.onCloseChatPane) {
+                                props.onCloseChatPane();
+                            }
+                        } })),
                     drawerMenuItems.length > 0 && (React__default["default"].createElement(react.Stack, { styles: drawerContainerStyles() },
                         React__default["default"].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
 };
@@ -27669,7 +27736,7 @@ const CallPage = (props) => {
     /* @conditional-compile-remove(gallery-layouts) */
     userSetOverflowGalleryPosition = 'Responsive', 
     /* @conditional-compile-remove(gallery-layouts) */
-    onSetUserSetOverflowGalleryPosition } = props;
+    onSetUserSetOverflowGalleryPosition, onCloseChatPane } = props;
     // To use useProps to get these states, we need to create another file wrapping Call,
     // It seems unnecessary in this case, so we get the updated states using this approach.
     const { callStatus } = useSelector$1(callStatusSelector);
@@ -27698,7 +27765,7 @@ const CallPage = (props) => {
             /* @conditional-compile-remove(gallery-layouts) */
             userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
             /* @conditional-compile-remove(gallery-layouts) */
-            userSetGalleryLayout: galleryLayout }))) : (React__default["default"].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default["default"].createElement(React__default["default"].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
+            userSetGalleryLayout: galleryLayout }))) : (React__default["default"].createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React__default["default"].createElement(React__default["default"].Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, 
         /* @conditional-compile-remove(gallery-layouts) */
         onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, 
         /* @conditional-compile-remove(gallery-layouts) */
@@ -27820,7 +27887,7 @@ const ConfigurationPageMicDropdown = (props) => {
  * @private
  */
 const configurationStackTokensDesktop = {
-    childrenGap: '2rem'
+    childrenGap: '1rem'
 };
 /**
  * @private
@@ -27846,7 +27913,7 @@ const configurationContainerStyleMobile = react.mergeStyles(Object.assign(Object
  * @private
  */
 const selectionContainerStyle = react.mergeStyles({
-    width: '50%',
+    width: '100%',
     minWidth: '11rem',
     maxWidth: '18.75rem',
     padding: '0.5rem'
@@ -27871,9 +27938,11 @@ const titleContainerStyleMobile = react.mergeStyles({
 /**
  * @private
  */
-const callDetailsContainerStylesDesktop = {
+const callDetailsContainerStyles = {
     root: {
-        marginBottom: '1.563rem'
+        textAlign: 'center',
+        maxWidth: _pxToRem(700),
+        alignSelf: 'center'
     }
 };
 const callDetailsStyle = {
@@ -28670,27 +28739,26 @@ const ConfigurationPage = (props) => {
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         React__default["default"].createElement(react.Stack, { verticalFill: true, grow: true, horizontal: true, className: fillWidth },
-            React__default["default"].createElement(react.Stack, { className: fillWidth, horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalAlign: "center", tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
-                mobileWithPreview && (React__default["default"].createElement(react.Stack.Item, null,
+            React__default["default"].createElement(react.Stack, { className: fillWidth, verticalAlign: "center", verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : configurationStackTokensDesktop },
+                React__default["default"].createElement(react.Stack.Item, { styles: callDetailsContainerStyles },
                     title,
-                    callDescription)),
-                localPreviewTrampoline(mobileWithPreview, /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
-                React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
-                    !mobileWithPreview && (React__default["default"].createElement(React__default["default"].Fragment, null,
-                        React__default["default"].createElement(react.Stack.Item, { styles: callDetailsContainerStylesDesktop },
-                            title,
-                            callDescription),
-                        React__default["default"].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
-                            /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
-                            /* @conditional-compile-remove(call-readiness) */ audioState), 
-                            /* @conditional-compile-remove(call-readiness) */
-                            onClickEnableDevicePermission: () => {
-                                setIsPermissionsModalDismissed(true);
-                            }, 
-                            /* @conditional-compile-remove(video-background-effects) */
-                            onClickVideoEffects: toggleVideoEffectsPane })))),
-                    React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                        React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton })))),
+                    callDescription),
+                React__default["default"].createElement(react.Stack, { horizontal: !mobileWithPreview, horizontalAlign: mobileWithPreview ? 'stretch' : 'center', verticalFill: mobileWithPreview, tokens: mobileWithPreview ? configurationStackTokensMobile : undefined },
+                    localPreviewTrampoline(mobileWithPreview, 
+                    /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
+                    React__default["default"].createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle },
+                        !mobileWithPreview && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
+                                /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
+                                /* @conditional-compile-remove(call-readiness) */ audioState), 
+                                /* @conditional-compile-remove(call-readiness) */
+                                onClickEnableDevicePermission: () => {
+                                    setIsPermissionsModalDismissed(true);
+                                }, 
+                                /* @conditional-compile-remove(video-background-effects) */
+                                onClickVideoEffects: toggleVideoEffectsPane })))),
+                        React__default["default"].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
+                            React__default["default"].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : startCallButtonStyleDesktop, onClick: startCall, disabled: disableStartCallButton }))))),
             React__default["default"].createElement(react.Panel
             /* @conditional-compile-remove(video-background-effects) */
             , { 
@@ -29516,7 +29584,7 @@ const MainScreen = (props) => {
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = (React__default["default"].createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError, 
+            pageElement = (React__default["default"].createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, 
                 /* @conditional-compile-remove(gallery-layouts) */
                 galleryLayout: userSetGalleryLayout, 
                 /* @conditional-compile-remove(gallery-layouts) */
@@ -29569,7 +29637,7 @@ const CallCompositeInner = (props) => {
     return (React__default["default"].createElement("div", { className: mainScreenContainerClassName },
         React__default["default"].createElement(BaseProvider, Object.assign({}, props),
             React__default["default"].createElement(CallAdapterProvider, { adapter: adapter },
-                React__default["default"].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, modalLayerHostId: modalLayerHostId, options: options, onSidePaneIdChange: props.onSidePaneIdChange, overrideSidePane: props.overrideSidePane, mobileChatTabHeader: props.mobileChatTabHeader }),
+                React__default["default"].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, modalLayerHostId: modalLayerHostId, options: options, onSidePaneIdChange: props.onSidePaneIdChange, overrideSidePane: props.overrideSidePane, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane }),
                 // This layer host is for ModalLocalAndRemotePIP in SidePane. This LayerHost cannot be inside the SidePane
                 // because when the SidePane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging
                 // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.
@@ -31688,7 +31756,7 @@ const CallWithChatScreen = (props) => {
         React__default["default"].createElement(react.Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React__default["default"].createElement(react.Stack, { horizontal: true, grow: true },
                 React__default["default"].createElement(react.Stack.Item, { grow: true, styles: callCompositeContainerStyles(mobileView) },
-                    React__default["default"].createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps })))))));
+                    React__default["default"].createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps, onCloseChatPane: closeChat })))))));
 };
 /**
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.