@azure/communication-react 1.14.0-alpha-202403030013 → 1.14.0-alpha-202403060013

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

@@ -174,7 +174,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202403030013';
+var telemetryVersion = '1.14.0-alpha-202403060013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -11037,7 +11037,7 @@ const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (domNode instanceof parse.Element && domNode.attribs) {
                 // Transform custom rendering of mentions
                 /* @conditional-compile-remove(mention) */
@@ -11054,19 +11054,13 @@ const processHtmlToReact = (props) => {
                 }
                 // Transform inline images
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                if (domNode.name &&
-                    domNode.name === 'img' &&
-                    domNode.attribs &&
-                    domNode.attribs.id &&
-                    ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find((metadata) => {
-                        return metadata.id === domNode.attribs.id;
-                    }))) {
+                if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
                     const imgProps = parse.attributesToProps(domNode.attribs);
                     /* @conditional-compile-remove(image-overlay) */
                     const inlineImageProps = { messageId: props.message.messageId, imgAttrs: imgProps };
                     /* @conditional-compile-remove(image-overlay) */
-                    return ((_d = props.inlineImageOptions) === null || _d === void 0 ? void 0 : _d.onRenderInlineImage)
+                    return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
                         ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
                         : defaultOnRenderInlineImage(inlineImageProps);
                 }
@@ -13753,16 +13747,12 @@ const participantsById = (participants) => {
 // Licensed under the MIT License.
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
-/* @conditional-compile-remove(gallery-layouts) */
 const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
-    /* @conditional-compile-remove(gallery-layouts) */
-    layout } = props;
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], layout } = props;
     const calculateMaxRemoteVideoStreams = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
         if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
             return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
         }
@@ -13773,7 +13763,6 @@ const _useOrganizedParticipants = (props) => {
     const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const participantsToSortTrampoline = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
         return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
     };
     visibleGridParticipants.current =
@@ -13785,13 +13774,11 @@ const _useOrganizedParticipants = (props) => {
                 lastVisibleParticipants: visibleGridParticipants.current,
                 maxDominantSpeakers: maxRemoteVideoStreamsToUse
             }).slice(0, maxRemoteVideoStreamsToUse);
-    /* @conditional-compile-remove(gallery-layouts) */
     const dominantSpeakerToGrid = layout === 'speaker'
         ? dominantSpeakers && dominantSpeakers[0]
             ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
             : [visibleGridParticipants.current[0]]
         : [];
-    /* @conditional-compile-remove(gallery-layouts) */
     if (dominantSpeakerToGrid[0]) {
         visibleGridParticipants.current = dominantSpeakerToGrid;
     }
@@ -15474,7 +15461,7 @@ const DefaultLayout = (props) => {
             ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
         pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'default',
+        layout: 'default',
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
@@ -15534,13 +15521,11 @@ const DefaultLayout = (props) => {
     , { 
         /* @conditional-compile-remove(vertical-gallery) */
         horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
-        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
+        props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
         screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        overflowGalleryTrampoline$3(overflowGallery, 
-        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition)));
+        overflowGalleryTrampoline$3(overflowGallery, props.overflowGalleryPosition)));
 };
 const overflowGalleryTrampoline$3 = (gallery, galleryPosition) => {
-    /* @conditional-compile-remove(gallery-layouts) */
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 
@@ -16320,7 +16305,7 @@ const FloatingLocalVideoLayout = (props) => {
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
         pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo',
+        layout: 'floatingLocalVideo',
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
@@ -16382,8 +16367,7 @@ const FloatingLocalVideoLayout = (props) => {
     showCameraSwitcherInLocalPreview ? (React.createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React.createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, 
-        /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React.createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)) }, localVideoComponent)) : (React.createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
@@ -16419,13 +16403,11 @@ const FloatingLocalVideoLayout = (props) => {
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
             horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
-            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
+            props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
             screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            overflowGalleryTrampoline$2(overflowGallery, 
-            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition))));
+            overflowGalleryTrampoline$2(overflowGallery, props.overflowGalleryPosition))));
 };
 const overflowGalleryTrampoline$2 = (gallery, galleryPosition) => {
-    /* @conditional-compile-remove(gallery-layouts) */
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 
@@ -16457,7 +16439,7 @@ const SpeakerVideoLayout = (props) => {
             ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
             : childrenPerPage.current,
         pinnedParticipantUserIds,
-        /* @conditional-compile-remove(gallery-layouts) */ layout: 'speaker'
+        layout: 'speaker'
     });
     let activeVideoStreams = 0;
     const gridTiles = gridParticipants.map((p) => {
@@ -16513,8 +16495,7 @@ const SpeakerVideoLayout = (props) => {
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     ]);
-    const wrappedLocalVideoComponent = localVideoComponent || (screenShareComponent && localVideoComponent) ? (React.createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, 
-        /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition)) }, localVideoComponent)) : undefined;
+    const wrappedLocalVideoComponent = localVideoComponent || (screenShareComponent && localVideoComponent) ? (React.createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent, overflowGalleryPosition)) }, localVideoComponent)) : undefined;
     const overflowGallery = React.useMemo(() => {
         if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
@@ -16550,13 +16531,11 @@ const SpeakerVideoLayout = (props) => {
         , { 
             /* @conditional-compile-remove(vertical-gallery) */
             horizontal: overflowGalleryPosition === 'verticalRight', styles: innerLayoutStyle, tokens: videoGalleryLayoutGap },
-            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
+            props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
             screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-            overflowGalleryTrampoline$1(overflowGallery, 
-            /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition))));
+            overflowGalleryTrampoline$1(overflowGallery, props.overflowGalleryPosition))));
 };
 const overflowGalleryTrampoline$1 = (gallery, galleryPosition) => {
-    /* @conditional-compile-remove(gallery-layouts) */
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
 
@@ -16576,9 +16555,7 @@ const FocusedContentLayout = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const DEFAULT_CHILDREN_PER_PAGE = 5;
-/* @conditional-compile-remove(gallery-layouts) */
 const REM_TO_PIXEL = 16;
-/* @conditional-compile-remove(gallery-layouts) */
 const LARGE_GALLERY_PARTICIPANT_CAP = 48;
 /**
  * VideoGallery Layout for when user is in a large meeting and wants to see more participants
@@ -16588,14 +16565,11 @@ const LARGE_GALLERY_PARTICIPANT_CAP = 48;
  * @private
  */
 const LargeGalleryLayout = (props) => {
-    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
-    /* @conditional-compile-remove(gallery-layouts) */ parentHeight, pinnedParticipantUserIds = [], 
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, parentHeight, pinnedParticipantUserIds = [], 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'horizontalBottom' } = props;
     const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
-    /* @conditional-compile-remove(gallery-layouts) */
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     const maxStreamsTrampoline = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
         return parentWidth && parentHeight
             ? calculateMaxTilesInLargeGrid(parentWidth, parentHeight)
             : maxRemoteVideoStreams;
@@ -16649,9 +16623,7 @@ const LargeGalleryLayout = (props) => {
         if (overflowGalleryTiles.length === 0) {
             return null;
         }
-        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, 
-            /* @conditional-compile-remove(gallery-layouts) */
-            isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
+        return (React.createElement(OverflowGallery, { isNarrow: isNarrow, isShort: isShort, shouldFloatLocalVideo: false, overflowGalleryElements: overflowGalleryTiles, horizontalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.horizontalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
             verticalGalleryStyles: styles === null || styles === void 0 ? void 0 : styles.verticalGallery, 
             /* @conditional-compile-remove(vertical-gallery) */
@@ -16660,7 +16632,7 @@ const LargeGalleryLayout = (props) => {
             }, parentWidth: parentWidth }));
     }, [
         isNarrow,
-        /* @conditional-compile-remove(gallery-layouts) */ isShort,
+        isShort,
         overflowGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
@@ -16673,16 +16645,13 @@ const LargeGalleryLayout = (props) => {
     , { 
         /* @conditional-compile-remove(vertical-gallery) */
         horizontal: overflowGalleryPosition === 'verticalRight', styles: rootLayoutStyle$1, tokens: videoGalleryLayoutGap },
-        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'horizontalTop' ? (overflowGallery) : (React.createElement(React.Fragment, null)),
+        props.overflowGalleryPosition === 'horizontalTop' ? overflowGallery : React.createElement(React.Fragment, null),
         screenShareComponent ? (screenShareComponent) : (React.createElement(GridLayout, { key: "grid-layout", styles: styles === null || styles === void 0 ? void 0 : styles.gridLayout }, gridTiles)),
-        overflowGalleryTrampoline(overflowGallery, 
-        /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition)));
+        overflowGalleryTrampoline(overflowGallery, props.overflowGalleryPosition)));
 };
 const overflowGalleryTrampoline = (gallery, galleryPosition) => {
-    /* @conditional-compile-remove(gallery-layouts) */
     return galleryPosition !== 'horizontalTop' ? gallery : React.createElement(React.Fragment, null);
 };
-/* @conditional-compile-remove(gallery-layouts) */
 const calculateMaxTilesInLargeGrid = (parentWidth, parentHeight) => {
     const xAxisTiles = Math.floor(parentWidth / (VERTICAL_GALLERY_TILE_SIZE_REM.width * REM_TO_PIXEL));
     const yAxisTiles = Math.floor(parentHeight / (VERTICAL_GALLERY_TILE_SIZE_REM.minHeight * REM_TO_PIXEL));
@@ -16756,8 +16725,7 @@ const VideoGallery = (props) => {
         ? remoteVideoTileMenu.hostId
         : undefined;
     const drawerMenuHostId = reactHooks.useId('drawerMenuHost', drawerMenuHostIdFromProp);
-    const localTileNotInGrid = (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&
-        remoteParticipants.length > 0;
+    const localTileNotInGrid = (layout === 'floatingLocalVideo' || layout === 'speaker') && remoteParticipants.length > 0;
     const containerRef = React.useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -16784,7 +16752,7 @@ const VideoGallery = (props) => {
     const pinnedParticipants = (_a = props.pinnedParticipants) !== null && _a !== void 0 ? _a : pinnedParticipantsState;
     const showLocalVideoTileLabel = !((localTileNotInGrid && isNarrow) ||
         /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
-            '9:16') || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default';
+            '9:16') || layout === 'default';
     /**
      * Utility function for memoized rendering of LocalParticipant.
      */
@@ -16804,7 +16772,6 @@ const VideoGallery = (props) => {
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
         const showDisplayNameTrampoline = () => {
-            /* @conditional-compile-remove(gallery-layouts) */
             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' },
@@ -16847,7 +16814,6 @@ const VideoGallery = (props) => {
         theme.effects.roundedCorner4,
         /*@conditional-compile-remove(click-to-call) */
         localVideoTileSize,
-        /* @conditional-compile-remove(gallery-layouts) */
         layout,
         showLocalVideoTileLabel,
         /* @conditional-compile-remove(spotlight) */
@@ -17000,14 +16966,12 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
     ]);
     const videoGalleryLayout = React.useMemo(() => {
-        /* @conditional-compile-remove(gallery-layouts) */
         if (screenShareParticipant && layout === 'focusedContent') {
             return React.createElement(FocusedContentLayout, Object.assign({}, layoutProps));
         }
         if (layout === 'floatingLocalVideo') {
             return React.createElement(FloatingLocalVideoLayout, Object.assign({}, layoutProps));
         }
-        /* @conditional-compile-remove(gallery-layouts) */
         if (layout === 'speaker') {
             return React.createElement(SpeakerVideoLayout, Object.assign({}, layoutProps));
         }
@@ -17016,7 +16980,7 @@ const VideoGallery = (props) => {
             return React.createElement(LargeGalleryLayout, Object.assign({}, layoutProps));
         }
         return React.createElement(DefaultLayout, Object.assign({}, layoutProps));
-    }, [layout, layoutProps, /* @conditional-compile-remove(gallery-layouts) */ screenShareParticipant]);
+    }, [layout, layoutProps, screenShareParticipant]);
     return (React.createElement("div", { 
         // We don't assign an drawer menu host id to the VideoGallery when a drawerMenuHostId is assigned from props
         id: drawerMenuHostIdFromProp ? undefined : drawerMenuHostId, "data-ui-id": ids.videoGallery, ref: containerRef, className: react.mergeStyles(videoGalleryOuterDivStyle, styles === null || styles === void 0 ? void 0 : styles.root, unselectable) },
@@ -19318,16 +19282,12 @@ const _TagsSurvey = (props) => {
         else {
             if (issue) {
                 setSelectedTags((prevState) => {
-                    var _a;
-                    if ((_a = prevState[issueCategory]) === null || _a === void 0 ? void 0 : _a.issues) {
-                        prevState[issueCategory].issues = prevState[issueCategory].issues.filter(function (value) {
-                            return value !== issue;
-                        });
-                        if (prevState[issueCategory].issues.length === 0) {
-                            delete prevState[issueCategory];
-                        }
-                    }
-                    return prevState;
+                    var _a, _b;
+                    // 'prevState[issueCategory]?.issues as ...' typing is required here to avoid a typescript limitation
+                    // "This expression is not callable" caused by filter().
+                    // More information can be found here: https://github.com/microsoft/TypeScript/issues/44373
+                    const categoryIssues = (_b = (_a = prevState[issueCategory]) === null || _a === void 0 ? void 0 : _a.issues) === null || _b === void 0 ? void 0 : _b.filter((value) => value !== issue);
+                    return Object.assign(Object.assign({}, prevState), { [issueCategory]: Object.assign(Object.assign({}, (prevState[issueCategory] || {})), { issues: categoryIssues }) });
                 });
             }
             else {
@@ -21700,33 +21660,21 @@ const extractAttachedFilesMetadata = (metadata) => {
         return [];
     }
 };
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-const extractTeamsAttachmentsMetadata = (attachments, resourceCache) => {
+/* @conditional-compile-remove(file-sharing) */
+const extractTeamsAttachmentsMetadata = (attachments) => {
     /* @conditional-compile-remove(file-sharing) */
     const files = [];
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const inlineImages = [];
     attachments.forEach((attachment) => {
-        var _a, _b, _c;
+        var _a;
         const attachmentType = mapAttachmentType(attachment.attachmentType);
         /* @conditional-compile-remove(file-sharing) */
         const contentType = extractAttachmentContentTypeFromName(attachment.name);
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        if (attachmentType === 'inlineImage') {
-            inlineImages.push({
-                attachmentType: attachmentType,
-                id: attachment.id,
-                url: extractAttachmentUrl(attachment),
-                previewUrl: attachment.previewUrl,
-                fullSizeImageSrc: (_b = resourceCache === null || resourceCache === void 0 ? void 0 : resourceCache[(_a = attachment.url) !== null && _a !== void 0 ? _a : '']) !== null && _b !== void 0 ? _b : ''
-            });
-        }
         /* @conditional-compile-remove(file-sharing) */
         if (attachmentType === 'file') {
             files.push({
                 attachmentType: attachmentType,
                 id: attachment.id,
-                name: (_c = attachment.name) !== null && _c !== void 0 ? _c : '',
+                name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
                 extension: contentType !== null && contentType !== void 0 ? contentType : '',
                 url: extractAttachmentUrl(attachment),
                 payload: { teamsFileAttachment: 'true' }
@@ -21734,8 +21682,7 @@ const extractTeamsAttachmentsMetadata = (attachments, resourceCache) => {
         }
     });
     return {
-        /* @conditional-compile-remove(file-sharing) */ files,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ inlineImages
+        /* @conditional-compile-remove(file-sharing) */ files
     };
 };
 /* @conditional-compile-remove(data-loss-prevention) */
@@ -21754,7 +21701,7 @@ const convertToUiBlockedMessage = (message, userId, isSeen, isLargeGroup) => {
         link: DEFAULT_DATA_LOSS_PREVENTION_POLICY_URL
     };
 };
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+/* @conditional-compile-remove(file-sharing) */
 const mapAttachmentType = (attachmentType) => {
     if (attachmentType === 'image') {
         return 'inlineImage';
@@ -21765,7 +21712,7 @@ const mapAttachmentType = (attachmentType) => {
     }
     return 'unknown';
 };
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+/* @conditional-compile-remove(file-sharing) */
 const extractAttachmentUrl = (attachment) => {
     /* @conditional-compile-remove(file-sharing) */
     return attachment.attachmentType === 'file' && attachment.previewUrl ? attachment.previewUrl : attachment.url || '';
@@ -21834,31 +21781,24 @@ const extractAttachmentsMetadata = (message) => {
     var _a, _b;
     /* @conditional-compile-remove(file-sharing) */
     let files = [];
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    let inlineImages = [];
     /* @conditional-compile-remove(file-sharing) */
     if (message.metadata) {
         files = files.concat(extractAttachedFilesMetadata(message.metadata));
     }
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    /* @conditional-compile-remove(file-sharing) */
     if ((_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments) {
-        const teamsAttachments = extractTeamsAttachmentsMetadata((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments, message.resourceCache);
+        const teamsAttachments = extractTeamsAttachmentsMetadata((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments);
         /* @conditional-compile-remove(file-sharing) */
         files = files.concat(teamsAttachments.files);
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        inlineImages = inlineImages.concat(teamsAttachments.inlineImages);
     }
     return {
-        /* @conditional-compile-remove(file-sharing) */ files,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ inlineImages
+        /* @conditional-compile-remove(file-sharing) */ files
     };
 };
 const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
     const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;
     /* @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const { 
-    /* @conditional-compile-remove(file-sharing) */ files, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ inlineImages } = extractAttachmentsMetadata(message);
+    const { /* @conditional-compile-remove(file-sharing) */ files } = extractAttachmentsMetadata(message);
     return {
         messageType: 'chat',
         createdOn: message.createdOn,
@@ -21874,9 +21814,7 @@ const convertToUiChatMessage = (message, userId, isSeen, isLargeGroup) => {
         mine: messageSenderId === userId,
         metadata: message.metadata,
         /* @conditional-compile-remove(file-sharing) */
-        files,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        inlineImages
+        files
     };
 };
 const convertToUiSystemMessage = (message) => {
@@ -23602,19 +23540,12 @@ const COMPOSITE_ONLY_ICONS = {
     BlurVideoBackground: React.createElement(reactIcons.VideoBackgroundEffect20Regular, null),
     /* @conditional-compile-remove(video-background-effects) */
     RemoveVideoBackgroundEffect: React.createElement(reactIcons.VideoPerson20Filled, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     GalleryOptions: React.createElement(reactIcons.Grid20Regular, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     OverflowGalleryTop: React.createElement(reactIcons.WindowHeaderHorizontal20Regular, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     SpeakerGalleryLayout: React.createElement(reactIcons.PersonSquare20Regular, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     DefaultGalleryLayout: React.createElement(reactIcons.TableSimple20Regular, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     FloatingLocalVideoGalleryLayout: React.createElement(reactIcons.BoardSplit20Regular, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     FocusedContentGalleryLayout: React.createElement(reactIcons.ContentView20Regular, null),
-    /* @conditional-compile-remove(gallery-layouts) */
     LargeGalleryLayout: React.createElement(reactIcons.Table20Regular, null),
     /* @conditional-compile-remove(control-bar-button-injection) */
     DefaultCustomButton: React.createElement(reactIcons.Circle20Regular, null),
@@ -24139,7 +24070,7 @@ class AzureCommunicationChatAdapter {
         return __awaiter$n(this, void 0, void 0, function* () {
             return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$n(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
-                const updatedOptions = options ? { attachmentMetadata: options.attachmentMetadata, metadata: metadata } : {};
+                const updatedOptions = { attachmentMetadata: options === null || options === void 0 ? void 0 : options.attachmentMetadata, metadata: metadata };
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, updatedOptions);
             }));
@@ -25153,28 +25084,17 @@ const ChatScreen = (props) => {
     const errorBarProps = usePropsFor$2(ErrorBar);
     /* @conditional-compile-remove(image-overlay) */
     React.useEffect(() => {
-        var _a;
         if (overlayImageItem === undefined) {
             return;
         }
-        const messages = messageThreadProps.messages.filter((message) => {
-            return message.messageId === (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.messageId);
-        });
-        if (messages.length <= 0 || messages[0].messageType !== 'chat') {
-            return;
-        }
-        const message = messages[0];
-        if (overlayImageItem.imageSrc === '' && message.inlineImages && ((_a = message.inlineImages) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            const inlineImages = message.inlineImages.filter((attachment) => {
-                return attachment.id === (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId);
-            });
-            if (inlineImages.length <= 0 ||
-                inlineImages[0].fullSizeImageSrc === undefined ||
-                inlineImages[0].fullSizeImageSrc === '' ||
-                overlayImageItem.imageSrc === inlineImages[0].fullSizeImageSrc) {
+        const message = adapter.getState().thread.chatMessages[overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.messageId];
+        const resourceCache = message.resourceCache;
+        if (overlayImageItem.imageSrc === '' && resourceCache) {
+            const fullSizeImageSrc = resourceCache[overlayImageItem.imageUrl];
+            if (fullSizeImageSrc === undefined || fullSizeImageSrc === '' || overlayImageItem.imageSrc === fullSizeImageSrc) {
                 return;
             }
-            setOverlayImageItem(Object.assign(Object.assign({}, overlayImageItem), { imageSrc: inlineImages[0].fullSizeImageSrc }));
+            setOverlayImageItem(Object.assign(Object.assign({}, overlayImageItem), { imageSrc: fullSizeImageSrc }));
         }
         // Disable eslint because we are using the overlayImageItem in this effect but don't want to have it as a dependency, as it will cause an infinite loop.
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -25208,47 +25128,56 @@ const ChatScreen = (props) => {
     /* @conditional-compile-remove(image-overlay) */
     const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$l(void 0, void 0, void 0, function* () {
         var _a, _b;
-        const messages = (_a = messageThreadProps.messages) === null || _a === void 0 ? void 0 : _a.filter((message) => {
-            return message.messageId === messageId;
-        });
-        if (!messages || messages.length <= 0) {
-            return;
-        }
-        const chatMessage = messages[0];
-        const inlinedImages = (_b = chatMessage.inlineImages) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
-            return attachment.id === attachmentId;
+        const message = adapter.getState().thread.chatMessages[messageId];
+        const inlinedImages = (_b = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.filter((attachment) => {
+            return attachment.attachmentType === 'image' && attachment.id === attachmentId;
         });
         if (!inlinedImages || inlinedImages.length <= 0) {
             return;
         }
         const attachment = inlinedImages[0];
+        const resourceCache = message.resourceCache;
+        let imageSrc = '';
+        if (attachment.url) {
+            if (resourceCache && resourceCache[attachment.url]) {
+                imageSrc = resourceCache[attachment.url];
+            }
+            else {
+                adapter.downloadResourceToCache({
+                    threadId: adapter.getState().thread.threadId,
+                    messageId: messageId,
+                    resourceUrl: attachment.url
+                });
+            }
+        }
         const titleIconRenderOptions = {
-            text: chatMessage.senderDisplayName,
+            text: message.senderDisplayName,
             size: react.PersonaSize.size32,
             showOverflowTooltip: false,
-            imageAlt: chatMessage.senderDisplayName
+            imageAlt: message.senderDisplayName
         };
-        const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(chatMessage.senderId, titleIconRenderOptions);
+        const messageSenderId = message.sender !== undefined ? toFlatCommunicationIdentifier(message.sender) : userId;
+        const titleIcon = onRenderAvatarCallback && onRenderAvatarCallback(messageSenderId, titleIconRenderOptions);
         const overlayImage = {
-            title: chatMessage.senderDisplayName || '',
+            title: message.senderDisplayName || '',
             titleIcon: titleIcon,
             attachmentId: attachment.id,
-            imageSrc: attachment.fullSizeImageSrc || '',
-            messageId: messageId
+            imageSrc: imageSrc,
+            messageId: messageId,
+            imageUrl: attachment.url || ''
         };
         setIsImageOverlayOpen(true);
         setOverlayImageItem(overlayImage);
-        if (attachment.attachmentType === 'inlineImage' && attachment.url) {
-            adapter.downloadResourceToCache({
-                threadId: adapter.getState().thread.threadId,
-                messageId: messageId,
-                resourceUrl: attachment.url
-            });
-        }
-    }), [adapter, messageThreadProps, onRenderAvatarCallback]);
+    }), [adapter, onRenderAvatarCallback, userId]);
     /* @conditional-compile-remove(image-overlay) */
     const inlineImageOptions = {
         onRenderInlineImage: (inlineImage, defaultOnRender) => {
+            var _a, _b;
+            const message = adapter.getState().thread.chatMessages[inlineImage.messageId];
+            const attachments = (_b = (_a = message === null || message === void 0 ? void 0 : message.content) === null || _a === void 0 ? void 0 : _a.attachments) === null || _b === void 0 ? void 0 : _b.find((attachment) => attachment.id === inlineImage.imgAttrs.id);
+            if (attachments === undefined) {
+                return defaultOnRender(inlineImage);
+            }
             return (React.createElement("span", { key: inlineImage.imgAttrs.id, onClick: () => onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
                     if (e.key === 'Enter') {
                         onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);
@@ -25316,6 +25245,11 @@ const ChatScreen = (props) => {
         overlayImageItem && (React.createElement(ImageOverlay, Object.assign({}, overlayImageItem, { isOpen: isImageOverlayOpen, onDismiss: () => {
                 setOverlayImageItem(undefined);
                 setIsImageOverlayOpen(false);
+                adapter.removeResourceFromCache({
+                    threadId: adapter.getState().thread.threadId,
+                    messageId: overlayImageItem.messageId,
+                    resourceUrl: overlayImageItem.imageUrl
+                });
             }, onDownloadButtonClicked: onDownloadButtonClicked })))));
 };
 
@@ -27501,9 +27435,7 @@ const DesktopMoreButton = (props) => {
     }), [startCaptionsButtonHandlers, startCaptionsButtonProps.currentSpokenLanguage]);
     /* @conditional-compile-remove(overflow-top-composite) */
     const [galleryPositionTop, setGalleryPositionTop] = React.useState(false);
-    /* @conditional-compile-remove(gallery-layouts) */
     const [focusedContentOn, setFocusedContentOn] = React.useState(false);
-    /* @conditional-compile-remove(gallery-layouts) */
     const [previousLayout, setPreviousLayout] = React.useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
     /* @conditional-compile-remove(dtmf-dialer) */
     const callees = useSelector$1(getTargetCallees);
@@ -27517,7 +27449,7 @@ const DesktopMoreButton = (props) => {
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
     const moreButtonContextualMenuItems = [];
-    /* @conditional-compile-remove(close-captions) */ /* @conditional-compile-remove(gallery-layouts) */
+    /* @conditional-compile-remove(close-captions) */
     const menuSubIconStyleSet = {
         root: {
             height: 'unset',
@@ -27627,7 +27559,6 @@ const DesktopMoreButton = (props) => {
     if (props.onSetDialpadPage && allowDtmfDialer) {
         moreButtonContextualMenuItems.push(dtmfDialerScreenOption);
     }
-    /* @conditional-compile-remove(gallery-layouts) */
     if (props.onUserSetOverflowGalleryPositionChange) {
         const galleryOptions = {
             key: 'overflowGalleryPositionKey',
@@ -27777,7 +27708,6 @@ const DesktopMoreButton = (props) => {
         (_f = (_e = galleryOptions.subMenuProps) === null || _e === void 0 ? void 0 : _e.items) === null || _f === void 0 ? void 0 : _f.push(galleryOption);
         /* @conditional-compile-remove(overflow-top-composite) */
         (_h = (_g = galleryOptions.subMenuProps) === null || _g === void 0 ? void 0 : _g.items) === null || _h === void 0 ? void 0 : _h.push(overflowGalleryOption);
-        /* @conditional-compile-remove(gallery-layouts) */
         moreButtonContextualMenuItems.push(galleryOptions);
     }
     /* @conditional-compile-remove(control-bar-button-injection) */
@@ -28013,7 +27943,7 @@ const CommonCallControlBar = (props) => {
     /*@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) &&
         (/*@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) */ props.isCaptionsSupported ||
-            /* @conditional-compile-remove(gallery-layouts) */ props.onUserSetGalleryLayout);
+            props.onUserSetGalleryLayout);
     /*@conditional-compile-remove(rooms) */
     const role = (_a = props.callAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     /*@conditional-compile-remove(rooms) */
@@ -28074,13 +28004,7 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(close-captions) */
                                         isCaptionsSupported: props.isCaptionsSupported, 
                                         /* @conditional-compile-remove(close-captions) */
-                                        onCaptionsSettingsClick: openCaptionsSettingsModal, 
-                                        /* @conditional-compile-remove(gallery-layouts) */
-                                        onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, 
-                                        /* @conditional-compile-remove(gallery-layouts) */
-                                        onUserSetGalleryLayout: props.onUserSetGalleryLayout, 
-                                        /* @conditional-compile-remove(gallery-layouts) */
-                                        userSetGalleryLayout: props.userSetGalleryLayout, 
+                                        onCaptionsSettingsClick: openCaptionsSettingsModal, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, 
                                         /* @conditional-compile-remove(dtmf-dialer) */
                                         dtmfDialerPresent: props.dtmfDialerPresent, 
                                         /* @conditional-compile-remove(dtmf-dialer) */
@@ -28501,7 +28425,6 @@ const MoreDrawer = (props) => {
     if (props.onSetDialpadPage && allowDtmfDialer) {
         drawerMenuItems.push(dtmfDialerScreenOption);
     }
-    /* @conditional-compile-remove(gallery-layouts) */
     const galleryLayoutOptions = {
         itemKey: 'galleryPositionKey',
         iconProps: {
@@ -28555,7 +28478,6 @@ const MoreDrawer = (props) => {
     };
     /* @conditional-compile-remove(gallery-layout-composite) */
     (_d = galleryLayoutOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.push(galleryOption);
-    /* @conditional-compile-remove(gallery-layouts) */
     drawerMenuItems.push(galleryLayoutOptions);
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
         drawerMenuItems.push({
@@ -28759,7 +28681,6 @@ const PreparedMoreDrawer = (props) => {
         spokenLanguageMenuTitle: strings.moreDrawerSpokenLanguageMenuTitle,
         /* @conditional-compile-remove(close-captions) */
         captionLanguageMenuTitle: strings.moreDrawerCaptionLanguageMenuTitle,
-        /* @conditional-compile-remove(gallery-layouts) */
         galleryOptionsMenuTitle: strings.moreDrawerGalleryOptionsMenuTitle
     }), [strings]);
     const deviceProps = useSelector$1(moreDrawerSelector);
@@ -30723,13 +30644,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsOn: isCaptionsOn, 
                     /* @conditional-compile-remove(video-background-effects) */
-                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, 
-                    /* @conditional-compile-remove(gallery-layouts) */
-                    onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, 
-                    /* @conditional-compile-remove(gallery-layouts) */
-                    onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
-                    /* @conditional-compile-remove(gallery-layouts) */
-                    userSetGalleryLayout: props.userSetGalleryLayout, 
+                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, 
                     /* @conditional-compile-remove(dtmf-dialer) */
                     onSetDialpadPage: props.onSetDialpadPage, 
                     /* @conditional-compile-remove(dtmf-dialer) */
@@ -30741,11 +30656,7 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
                         /* @conditional-compile-remove(close-captions) */
-                        isCaptionsSupported: isTeamsCall && hasJoinedCall, 
-                        /* @conditional-compile-remove(gallery-layouts) */
-                        onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
-                        /* @conditional-compile-remove(gallery-layouts) */
-                        userSetGalleryLayout: props.userSetGalleryLayout, 
+                        isCaptionsSupported: isTeamsCall && hasJoinedCall, onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, userSetGalleryLayout: props.userSetGalleryLayout, 
                         /* @conditional-compile-remove(dtmf-dialer) */
                         onSetDialpadPage: props.onSetDialpadPage, 
                         /* @conditional-compile-remove(dtmf-dialer) */
@@ -30872,7 +30783,7 @@ const MediaGallery = (props) => {
     }, [(_c = props.remoteVideoTileMenuOptions) === null || _c === void 0 ? void 0 : _c.isHidden, props.isMobile, props.drawerMenuHostId]);
     /* @conditional-compile-remove(vertical-gallery) */
     const overflowGalleryPosition = React.useMemo(() => {
-        /* @conditional-compile-remove(gallery-layouts) */
+        /* @conditional-compile-remove(overflow-top-composite) */
         if (props.userSetOverflowGalleryPosition === 'horizontalTop') {
             return props.userSetOverflowGalleryPosition;
         }
@@ -30880,7 +30791,7 @@ const MediaGallery = (props) => {
             ? 'verticalRight'
             : 'horizontalBottom';
     }, [
-        /* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition,
+        /* @conditional-compile-remove(overflow-top-composite) */ props.userSetOverflowGalleryPosition,
         containerWidth,
         containerHeight
     ]);
@@ -30892,7 +30803,6 @@ const MediaGallery = (props) => {
     const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const VideoGalleryMemoized = React.useMemo(() => {
         const layoutBasedOnUserSelection = () => {
-            /* @conditional-compile-remove(gallery-layouts) */
             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, 
@@ -30930,7 +30840,6 @@ const MediaGallery = (props) => {
         isRoomsCall,
         /* @conditional-compile-remove(vertical-gallery) */
         containerAspectRatio,
-        /* @conditional-compile-remove(gallery-layouts) */
         props.userSetGalleryLayout,
         layoutBasedOnTilePosition,
         /* @conditional-compile-remove(reaction) */
@@ -31283,15 +31192,7 @@ const buttonTextStyles = { label: { fontSize: '0.875rem' } };
  */
 const CallPage = (props) => {
     var _a;
-    const { callInvitationURL, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, 
-    /* @conditional-compile-remove(gallery-layouts) */
-    galleryLayout = 'floatingLocalVideo', 
-    /* @conditional-compile-remove(gallery-layouts) */
-    onUserSetGalleryLayoutChange, 
-    /* @conditional-compile-remove(gallery-layouts) */
-    userSetOverflowGalleryPosition = 'Responsive', 
-    /* @conditional-compile-remove(gallery-layouts) */
-    onSetUserSetOverflowGalleryPosition, onCloseChatPane } = props;
+    const { callInvitationURL, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, mobileView, galleryLayout = 'floatingLocalVideo', onUserSetGalleryLayoutChange, userSetOverflowGalleryPosition = 'Responsive', 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);
@@ -31328,11 +31229,7 @@ const CallPage = (props) => {
         else {
             return (React.createElement(MediaGallery, Object.assign({ isMobile: mobileView }, mediaGalleryProps, mediaGalleryHandlers, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, drawerMenuHostId: drawerMenuHostId, 
                 /* @conditional-compile-remove(click-to-call) */
-                localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile, 
-                /* @conditional-compile-remove(gallery-layouts) */
-                userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
-                /* @conditional-compile-remove(gallery-layouts) */
-                userSetGalleryLayout: galleryLayout, 
+                localVideoTileOptions: options === null || options === void 0 ? void 0 : options.localVideoTile, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, userSetGalleryLayout: galleryLayout, 
                 /* @conditional-compile-remove(spotlight) */
                 setIsPromptOpen: setIsPromptOpen, 
                 /* @conditional-compile-remove(spotlight) */
@@ -31349,13 +31246,7 @@ const CallPage = (props) => {
                 increaseFlyoutItemSize: mobileView
             }, 
             /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */
-            onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (onRenderGalleryContentTrampoline()) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.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) */
-            onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, 
-            /* @conditional-compile-remove(gallery-layouts) */
-            userSetGalleryLayout: galleryLayout, 
+            onFetchAvatarPersonaData: onFetchAvatarPersonaData, mobileView: mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => _isInCall(callStatus) ? (isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (onRenderGalleryContentTrampoline()) : (React.createElement(NetworkReconnectTile, Object.assign({}, networkReconnectTileProps)))) : (React.createElement(React.Fragment, null)), updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: onCloseChatPane, dataUiId: 'call-page', latestErrors: props.latestErrors, onDismissError: props.onDismissError, onUserSetOverflowGalleryPositionChange: onSetUserSetOverflowGalleryPosition, onUserSetGalleryLayoutChange: onUserSetGalleryLayoutChange, userSetGalleryLayout: galleryLayout, 
             /* @conditional-compile-remove(capabilities) */
             capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps, 
             /* @conditional-compile-remove(dtmf-dialer) */
@@ -33669,9 +33560,7 @@ const MainScreen = (props) => {
     const endedCall = useSelector$1(getEndedCall);
     const [sidePaneRenderer, setSidePaneRenderer] = React.useState();
     const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState();
-    /* @conditional-compile-remove(gallery-layouts) */
     const [userSetGalleryLayout, setUserSetGalleryLayout] = React.useState((_c = (_b = (_a = props.options) === null || _a === void 0 ? void 0 : _a.galleryOptions) === null || _b === void 0 ? void 0 : _b.layout) !== null && _c !== void 0 ? _c : 'floatingLocalVideo');
-    /* @conditional-compile-remove(gallery-layouts) */
     const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = React.useState('Responsive');
     const overridePropsRef = React.useRef(props.overrideSidePane);
     React.useEffect(() => {
@@ -33778,15 +33667,7 @@ const MainScreen = (props) => {
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = (React.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) */
-                onUserSetGalleryLayoutChange: setUserSetGalleryLayout, 
-                /* @conditional-compile-remove(gallery-layouts) */
-                onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, 
-                /* @conditional-compile-remove(gallery-layouts) */
-                userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
+            pageElement = (React.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, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, 
                 /* @conditional-compile-remove(capabilities) */
                 capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
@@ -36129,7 +36010,6 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(unsupported-browser) */
         onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,
         remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,
-        /* @conditional-compile-remove(gallery-layouts) */
         galleryOptions: props.galleryOptions,
         /* @conditional-compile-remove(click-to-call) */
         localVideoTile: props.localVideoTile,
@@ -36156,7 +36036,6 @@ const CallWithChatScreen = (props) => {
         props.onNetworkingTroubleShootingClick,
         /* @conditional-compile-remove(call-readiness) */
         props.onPermissionsTroubleshootingClick,
-        /* @conditional-compile-remove(gallery-layouts) */
         props.galleryOptions,
         /* @conditional-compile-remove(click-to-call) */
         props.localVideoTile,
@@ -36231,9 +36110,7 @@ const CallWithChatComposite = (props) => {
             /* @conditional-compile-remove(file-sharing) */
             fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing, 
             /* @conditional-compile-remove(click-to-call) */
-            localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, 
-            /* @conditional-compile-remove(gallery-layouts) */
-            galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, 
+            localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, 
             /* @conditional-compile-remove(custom-branding) */
             logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, 
             /* @conditional-compile-remove(custom-branding) */