@azure/communication-react 1.13.0-alpha-202402170012 → 1.13.0-alpha-202402220012

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

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.13.0-alpha-202402170012';
+var telemetryVersion = '1.13.0-alpha-202402220012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -385,7 +385,7 @@ const isHideAttendeeNamesEnabled = (state, props) => {
 /**
  * @private
  */
-const getCapabilites$1 = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities; };
+const getCapabilities = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities; };
 /**
  * @private
  */
@@ -413,17 +413,9 @@ const getLocalParticipantRaisedHand$1 = (state, props) => {
 /**
  * @private
  */
-const getSpotlightedParticipants = (state, props) => {
-    var _a, _b;
-    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.spotlightedParticipants;
-};
-/* @conditional-compile-remove(spotlight) */
-/**
- * @private
- */
-const getMaxParticipantsToSpotlight = (state, props) => {
-    var _a, _b;
-    return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight) === null || _b === void 0 ? void 0 : _b.maxParticipantsToSpotlight;
+const getSpotlightCallFeature = (state, props) => {
+    var _a;
+    return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.spotlight;
 };
 /* @conditional-compile-remove(reaction) */
 /**
@@ -649,7 +641,7 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
     getCallExists,
     getIsMuted,
     getDeviceManager$1,
-    /* @conditional-compile-remove(capabilities) */ getCapabilites$1,
+    /* @conditional-compile-remove(capabilities) */ getCapabilities,
     /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (callExists, isMuted, deviceManager, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
@@ -675,7 +667,7 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
 const cameraButtonSelector = reselect__namespace.createSelector([
     getLocalVideoStreams$1,
     getDeviceManager$1,
-    /* @conditional-compile-remove(capabilities) */ getCapabilites$1,
+    /* @conditional-compile-remove(capabilities) */ getCapabilities,
     /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (localVideoStreams, deviceManager, 
 /* @conditional-compile-remove(capabilities) */ capabilities, 
@@ -729,7 +721,7 @@ const reactionButtonSelector = reselect__namespace.createSelector([getLocalParti
 const screenShareButtonSelector = reselect__namespace.createSelector([
     getIsScreenSharingOn,
     /* @conditional-compile-remove(PSTN-calls) */ getCallState,
-    /* @conditional-compile-remove(capabilities) */ getCapabilites$1,
+    /* @conditional-compile-remove(capabilities) */ getCapabilities,
     /* @conditional-compile-remove(capabilities) */ getRole$1
 ], (isScreenSharingOn, 
 /* @conditional-compile-remove(PSTN-calls) */ callState, 
@@ -1170,6 +1162,32 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight(participants));
     });
+    /* @conditional-compile-remove(spotlight) */
+    const canSpotlight = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Capabilities).capabilities.spotlightParticipant.isPresent;
+    /* @conditional-compile-remove(spotlight) */
+    const onStartLocalSpotlight = canSpotlight
+        ? () => __awaiter$P(void 0, void 0, void 0, function* () {
+            yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight());
+        })
+        : undefined;
+    /* @conditional-compile-remove(spotlight) */
+    const onStopLocalSpotlight = () => __awaiter$P(void 0, void 0, void 0, function* () {
+        yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight());
+    });
+    /* @conditional-compile-remove(spotlight) */
+    const onStartRemoteSpotlight = canSpotlight
+        ? (userIds) => __awaiter$P(void 0, void 0, void 0, function* () {
+            const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
+            yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight(participants));
+        })
+        : undefined;
+    /* @conditional-compile-remove(spotlight) */
+    const onStopRemoteSpotlight = canSpotlight
+        ? (userIds) => __awaiter$P(void 0, void 0, void 0, function* () {
+            const participants = userIds === null || userIds === void 0 ? void 0 : userIds.map((userId) => _toCommunicationIdentifier(userId));
+            yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight(participants));
+        })
+        : undefined;
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -1223,7 +1241,15 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         /* @conditional-compile-remove(spotlight) */
         onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */
-        onStopSpotlight
+        onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStartRemoteSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlight
     };
 });
 
@@ -2238,7 +2264,7 @@ let CallContext$2 = class CallContext {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
             if (call) {
-                call.spotlight = { spotlightedParticipants, maxParticipantsToSpotlight };
+                call.spotlight = Object.assign(Object.assign({}, call.spotlight), { spotlightedParticipants, maxParticipantsToSpotlight });
             }
         });
     }
@@ -2251,6 +2277,11 @@ let CallContext$2 = class CallContext {
                 if (participant) {
                     participant.spotlight = { spotlightedOrderPosition: spotlightedParticipant.order };
                 }
+                else if (call.spotlight &&
+                    toFlatCommunicationIdentifier(draft.userId) ===
+                        toFlatCommunicationIdentifier(spotlightedParticipant.identifier)) {
+                    call.spotlight.localParticipantSpotlight = { spotlightedOrderPosition: spotlightedParticipant.order };
+                }
             }
         });
     }
@@ -2263,6 +2294,11 @@ let CallContext$2 = class CallContext {
                 if (participant) {
                     participant.spotlight = undefined;
                 }
+                else if (call.spotlight &&
+                    toFlatCommunicationIdentifier(draft.userId) ===
+                        toFlatCommunicationIdentifier(spotlightedParticipant.identifier)) {
+                    call.spotlight.localParticipantSpotlight = undefined;
+                }
             }
         });
     }
@@ -10682,7 +10718,7 @@ const messageContentAriaText = (props) => {
 };
 /* @conditional-compile-remove(image-overlay) */
 const defaultOnRenderInlineImage = (inlineImage) => {
-    return React.createElement("img", Object.assign({ tabIndex: 0, "data-ui-id": inlineImage.imgAttrs.id }, inlineImage.imgAttrs));
+    return (React.createElement("img", Object.assign({ key: inlineImage.imgAttrs.id, tabIndex: 0, "data-ui-id": inlineImage.imgAttrs.id }, inlineImage.imgAttrs)));
 };
 const processHtmlToReact = (props) => {
     var _a;
@@ -12863,24 +12899,25 @@ const useRemoteVideoStreamLifecycleMaintainer = (props) => {
  */
 const useVideoTileContextualMenuProps = (props) => {
     var _a;
-    const { remoteParticipant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, 
+    const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, 
     /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds = [], 
     /* @conditional-compile-remove(spotlight) */ isSpotlighted, 
     /* @conditional-compile-remove(spotlight) */ onStartSpotlight, 
     /* @conditional-compile-remove(spotlight) */ onStopSpotlight, 
-    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight } = props;
+    /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */ myUserId } = props;
     const scalingMode = React.useMemo(() => {
         var _a;
-        return (_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
-    }, [(_a = props.remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
+        return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
+    }, [(_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
     const contextualMenuProps = React.useMemo(() => {
         const items = [];
         if (isPinned !== undefined) {
             if (isPinned && onUnpinParticipant && (strings === null || strings === void 0 ? void 0 : strings.unpinParticipantForMe)) {
                 let unpinActionString = undefined;
-                if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && remoteParticipant.displayName) {
+                if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {
                     unpinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.unpinParticipantMenuItemAriaLabel, {
-                        participantName: remoteParticipant.displayName
+                        participantName: participant.displayName
                     });
                 }
                 items.push({
@@ -12891,7 +12928,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUnpinParticipant(remoteParticipant.userId);
+                        onUnpinParticipant(participant.userId);
                         unpinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(unpinActionString));
                     },
                     'data-ui-id': 'video-tile-unpin-participant-button',
@@ -12900,9 +12937,9 @@ const useVideoTileContextualMenuProps = (props) => {
             }
             if (!isPinned && onPinParticipant && (strings === null || strings === void 0 ? void 0 : strings.pinParticipantForMe)) {
                 let pinActionString = undefined;
-                if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && remoteParticipant.displayName) {
+                if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {
                     pinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.pinnedParticipantAnnouncementAriaLabel, {
-                        participantName: remoteParticipant.displayName
+                        participantName: participant.displayName
                     });
                 }
                 items.push({
@@ -12913,7 +12950,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onPinParticipant(remoteParticipant.userId);
+                        onPinParticipant(participant.userId);
                         pinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(pinActionString));
                     },
                     'data-ui-id': 'video-tile-pin-participant-button',
@@ -12924,15 +12961,18 @@ const useVideoTileContextualMenuProps = (props) => {
         }
         /* @conditional-compile-remove(spotlight) */
         if (isSpotlighted) {
-            if (onStopSpotlight && remoteParticipant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
+            const stopSpotlightMenuLabel = myUserId === participant.userId
+                ? strings === null || strings === void 0 ? void 0 : strings.stopSpotlightOnSelfVideoTileMenuLabel
+                : strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel;
+            if (onStopSpotlight && participant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
                 items.push({
                     key: 'stopSpotlight',
-                    text: strings.stopSpotlightVideoTileMenuLabel,
+                    text: stopSpotlightMenuLabel,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStopSpotlight([remoteParticipant.userId]),
+                    onClick: () => onStopSpotlight([participant.userId]),
                     ariaLabel: strings.stopSpotlightVideoTileMenuLabel
                 });
             }
@@ -12944,7 +12984,7 @@ const useVideoTileContextualMenuProps = (props) => {
             const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight
                 ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
                 : false;
-            if (onStartSpotlight && remoteParticipant.userId && startSpotlightMenuLabel) {
+            if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {
                 items.push({
                     key: 'startSpotlight',
                     text: startSpotlightMenuLabel,
@@ -12952,7 +12992,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
                     },
-                    onClick: () => onStartSpotlight([remoteParticipant.userId]),
+                    onClick: () => onStartSpotlight([participant.userId]),
                     ariaLabel: startSpotlightMenuLabel,
                     disabled: maxSpotlightedParticipantsReached,
                     title: maxSpotlightedParticipantsReached ? strings === null || strings === void 0 ? void 0 : strings.spotlightLimitReachedMenuTitle : undefined
@@ -12969,7 +13009,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Fit');
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Fit');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
                     },
                     'data-ui-id': 'video-tile-fit-to-frame',
@@ -12985,7 +13025,7 @@ const useVideoTileContextualMenuProps = (props) => {
                         styles: { root: { lineHeight: '1rem', textAlign: 'center' } }
                     },
                     onClick: () => {
-                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(remoteParticipant.userId, 'Crop');
+                        onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Crop');
                         view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
                     },
                     'data-ui-id': 'video-tile-fill-frame',
@@ -13005,15 +13045,16 @@ const useVideoTileContextualMenuProps = (props) => {
         onPinParticipant,
         onUnpinParticipant,
         onUpdateScalingMode,
-        remoteParticipant.userId,
-        remoteParticipant.displayName,
+        participant.userId,
+        participant.displayName,
         disablePinMenuItem,
         toggleAnnouncerString,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds,
         /* @conditional-compile-remove(spotlight) */ isSpotlighted,
         /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
         /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
-        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight
+        /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(spotlight) */ myUserId
     ]);
     return contextualMenuProps;
 };
@@ -13373,7 +13414,7 @@ const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], 
+    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 calculateMaxRemoteVideoStreams = () => {
@@ -13443,13 +13484,7 @@ const _useOrganizedParticipants = (props) => {
     ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive && localParticipant) {
-            const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
-            // If screen sharing is active, assign video and audio participants as overflow gallery participants
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return localParticipantPlusOverflow.concat(callingParticipants);
-        }
-        else if (isScreenShareActive) {
+        if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
@@ -13469,7 +13504,6 @@ const _useOrganizedParticipants = (props) => {
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
         isScreenShareActive,
-        localParticipant,
         maxRemoteVideoStreamsToUse
     ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
@@ -13806,7 +13840,7 @@ const _RemoteVideoTile = React.memo((props) => {
     // Handle creating, destroying and updating the video stream as necessary
     const createVideoStreamResult = useRemoteVideoStreamLifecycleMaintainer(remoteVideoStreamProps);
     const contextualMenuProps = useVideoTileContextualMenuProps({
-        remoteParticipant,
+        participant: remoteParticipant,
         view: createVideoStreamResult === null || createVideoStreamResult === void 0 ? void 0 : createVideoStreamResult.view,
         strings: Object.assign({}, props.strings),
         isPinned,
@@ -13842,7 +13876,7 @@ const _RemoteVideoTile = React.memo((props) => {
     }, [renderElement, showLoadingIndicator]);
     const onKeyDown = React.useCallback((e) => {
         if (e.key === 'Enter') {
-            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
+            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([])));
         }
     }, [setDrawerMenuItemProps, contextualMenuProps]);
     let displayName = remoteParticipant.displayName || (strings === null || strings === void 0 ? void 0 : strings.displayNamePlaceholder);
@@ -13865,7 +13899,7 @@ const _RemoteVideoTile = React.memo((props) => {
             reaction: remoteParticipant.reaction, isSpeaking: remoteParticipant.isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel, 
             /* @conditional-compile-remove(one-to-n-calling) */
             /* @conditional-compile-remove(PSTN-calls) */
-            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
+            participantState: participantState }, videoTileContextualMenuProps, { isPinned: props.isPinned, onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps$1(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted, 
             /* @conditional-compile-remove(reaction) */
@@ -13874,7 +13908,7 @@ const _RemoteVideoTile = React.memo((props) => {
             React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
 });
-const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
+const convertContextualMenuItemsToDrawerMenuItemProps$1 = (contextualMenuProps, onLightDismiss) => {
     if (!contextualMenuProps) {
         return [];
     }
@@ -14116,6 +14150,18 @@ const _LocalVideoTile = React.memo((props) => {
     reaction, 
     /* @conditional-compile-remove(spotlight) */
     isSpotlighted, 
+    /* @conditional-compile-remove(spotlight) */
+    spotlightedParticipantUserIds, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    maxParticipantsToSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    menuKind, 
+    /* @conditional-compile-remove(spotlight) */
+    strings, 
     /* @conditional-compile-remove(reaction) */
     reactionResources } = props;
     /* @conditional-compile-remove(spotlight) */
@@ -14138,13 +14184,53 @@ const _LocalVideoTile = React.memo((props) => {
     // Handle creating, destroying and updating the video stream as necessary
     useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);
     /* @conditional-compile-remove(spotlight) */
-    const spotlightBorder = React.useMemo(() => (React.createElement(react.Stack, { className: react.mergeStyles({
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            zIndex: 100,
-            border: `0.25rem solid ${theme.palette.black}`
-        }) })), [theme.palette.black]);
+    const contextualMenuProps = useVideoTileContextualMenuProps({
+        participant: { userId: userId !== null && userId !== void 0 ? userId : '' },
+        strings: Object.assign({}, strings),
+        spotlightedParticipantUserIds,
+        isSpotlighted,
+        onStartSpotlight,
+        onStopSpotlight,
+        maxParticipantsToSpotlight,
+        myUserId: userId
+    });
+    const videoTileContextualMenuProps = React.useMemo(() => {
+        /* @conditional-compile-remove(spotlight) */
+        if (menuKind !== 'contextual' || !contextualMenuProps) {
+            return {};
+        }
+        /* @conditional-compile-remove(spotlight) */
+        return {
+            contextualMenu: contextualMenuProps
+        };
+    }, [
+        /* @conditional-compile-remove(spotlight) */ contextualMenuProps,
+        /* @conditional-compile-remove(spotlight) */ menuKind
+    ]);
+    const videoTileStyles = React.useMemo(() => {
+        /* @conditional-compile-remove(spotlight) */
+        if (isSpotlighted) {
+            return react.concatStyleSets({
+                root: {
+                    outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,
+                    outlineOffset: '-0.25rem'
+                }
+            }, styles);
+        }
+        return styles;
+    }, [
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ theme.palette.neutralTertiaryAlt,
+        styles
+    ]);
+    /* @conditional-compile-remove(spotlight) */
+    const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState([]);
+    /* @conditional-compile-remove(spotlight) */
+    const onKeyDown = React.useCallback((e) => {
+        if (e.key === 'Enter') {
+            setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([])));
+        }
+    }, [setDrawerMenuItemProps, contextualMenuProps]);
     const renderVideoStreamElement = React.useMemo(() => {
         // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which
         // implies that, after their threshold, all streams have no child (blank video)
@@ -14154,28 +14240,30 @@ const _LocalVideoTile = React.memo((props) => {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
-            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }), /* @conditional-compile-remove(spotlight) */
-            isSpotlighted && spotlightBorder));
+            React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })));
     }, [
         localVideoCameraCycleButtonProps,
         localVideoCameraSwitcherLabel,
         localVideoSelectedDescription,
         renderElement,
-        showCameraSwitcherInLocalPreview,
-        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
-        /* @conditional-compile-remove(spotlight) */ spotlightBorder
+        showCameraSwitcherInLocalPreview
     ]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(VideoTile, { key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: styles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
+    return (React.createElement(react.Stack, { className: react.mergeStyles({ width: '100%', height: '100%' }), 
+        /* @conditional-compile-remove(spotlight) */ onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
+        React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, 
             /* @conditional-compile-remove(raise-hand) */
             raisedHand: raisedHand, 
             /* @conditional-compile-remove(reaction) */
             reaction: reaction, 
             /* @conditional-compile-remove(spotlight) */
-            isSpotlighted: isSpotlighted, 
+            isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { 
+            /* @conditional-compile-remove(spotlight) */
+            onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(reaction) */
-            reactionResources: reactionResources }), /* @conditional-compile-remove(spotlight) */
-        isSpotlighted && spotlightBorder));
+            reactionResources: reactionResources }), 
+        /* @conditional-compile-remove(spotlight) */ drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
+            React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
+                React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
 });
 const FloatingLocalCameraCycleButton = (props) => {
     const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
@@ -14189,6 +14277,25 @@ const FloatingLocalCameraCycleButton = (props) => {
         (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) !== undefined &&
         (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.onSelectCamera) !== undefined && (React.createElement(LocalVideoCameraCycleButton, { cameras: localVideoCameraCycleButtonProps.cameras, selectedCamera: localVideoCameraCycleButtonProps.selectedCamera, onSelectCamera: localVideoCameraCycleButtonProps.onSelectCamera, label: localVideoCameraSwitcherLabel, ariaDescription: ariaDescription }))));
 };
+/* @conditional-compile-remove(spotlight) */
+const convertContextualMenuItemsToDrawerMenuItemProps = (contextualMenuProps, onLightDismiss) => {
+    if (!contextualMenuProps) {
+        return [];
+    }
+    return contextualMenuProps.items.map((item) => {
+        return {
+            itemKey: item.key,
+            text: item.text,
+            iconProps: item.iconProps,
+            disabled: item.disabled,
+            onItemClick: () => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                onLightDismiss === null || onLightDismiss === void 0 ? void 0 : onLightDismiss();
+            }
+        };
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -15027,7 +15134,7 @@ const DefaultLayout = (props) => {
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
+    let gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -15041,14 +15148,19 @@ const DefaultLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
-        gridTiles.push(localVideoComponent);
+        if (screenShareComponent) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
     }
     const overflowGallery = React.useMemo(() => {
         if (overflowGalleryTiles.length === 0) {
@@ -16161,7 +16273,7 @@ const LargeGalleryLayout = (props) => {
         /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
     });
     let activeVideoStreams = 0;
-    const gridTiles = gridParticipants.map((p) => {
+    let gridTiles = gridParticipants.map((p) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && activeVideoStreams++ < maxRemoteVideoStreams
@@ -16175,14 +16287,19 @@ const LargeGalleryLayout = (props) => {
      * this case when those components are here
      */
     const [indexesToRender, setIndexesToRender] = React.useState([]);
-    const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+    let overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
             ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     if (localVideoComponent) {
-        gridTiles.push(localVideoComponent);
+        if (screenShareComponent) {
+            overflowGalleryTiles = [localVideoComponent].concat(overflowGalleryTiles);
+        }
+        else {
+            gridTiles = [localVideoComponent].concat(gridTiles);
+        }
     }
     const overflowGallery = React.useMemo(() => {
         if (overflowGalleryTiles.length === 0) {
@@ -16276,9 +16393,13 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(spotlight) */
     spotlightedParticipants, 
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight, 
+    onStartLocalSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight, 
+    onStartRemoteSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopLocalSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
     maxParticipantsToSpotlight, 
     /* @conditional-compile-remove(reaction) */
@@ -16349,7 +16470,21 @@ const VideoGallery = (props) => {
                 /* @conditional-compile-remove(reaction) */
                 reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
+                spotlightedParticipantUserIds: spotlightedParticipants, 
+                /* @conditional-compile-remove(spotlight) */
                 isSpotlighted: isSpotlighted, 
+                /* @conditional-compile-remove(spotlight) */
+                onStartSpotlight: onStartLocalSpotlight, 
+                /* @conditional-compile-remove(spotlight) */
+                onStopSpotlight: onStopLocalSpotlight, 
+                /* @conditional-compile-remove(spotlight) */
+                maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
+                /* @conditional-compile-remove(spotlight) */
+                menuKind: remoteVideoTileMenu ? (remoteVideoTileMenu.kind === 'drawer' ? 'drawer' : 'contextual') : undefined, 
+                /* @conditional-compile-remove(spotlight) */
+                drawerMenuHostId: drawerMenuHostId, 
+                /* @conditional-compile-remove(spotlight) */
+                strings: strings, 
                 /* @conditional-compile-remove(reaction) */
                 reactionResources: reactionResources })));
     }, [
@@ -16364,10 +16499,6 @@ const VideoGallery = (props) => {
         localTileNotInGrid,
         showCameraSwitcherInLocalPreview,
         showMuteIndicator,
-        strings.localVideoCameraSwitcherLabel,
-        strings.localVideoLabel,
-        strings.localVideoMovementLabel,
-        strings.localVideoSelectedDescription,
         styles === null || styles === void 0 ? void 0 : styles.localVideo,
         theme.effects.roundedCorner4,
         /*@conditional-compile-remove(click-to-call) */
@@ -16375,6 +16506,20 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(gallery-layouts) */
         layout,
         showLocalVideoTileLabel,
+        /* @conditional-compile-remove(spotlight) */
+        spotlightedParticipants,
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        maxParticipantsToSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        remoteVideoTileMenu,
+        /* @conditional-compile-remove(spotlight) */
+        strings,
+        /* @conditional-compile-remove(spotlight) */
+        drawerMenuHostId,
         /* @conditional-compile-remove(reaction) */
         reactionResources
     ]);
@@ -16439,9 +16584,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(spotlight) */
             isSpotlighted: isSpotlighted, 
             /* @conditional-compile-remove(spotlight) */
-            onStartSpotlight: onStartSpotlight, 
+            onStartSpotlight: onStartRemoteSpotlight, 
             /* @conditional-compile-remove(spotlight) */
-            onStopSpotlight: onStopSpotlight, 
+            onStopSpotlight: onStopRemoteSpotlight, 
             /* @conditional-compile-remove(spotlight) */
             maxParticipantsToSpotlight: maxParticipantsToSpotlight, 
             /* @conditional-compile-remove(reaction) */
@@ -16463,8 +16608,8 @@ const VideoGallery = (props) => {
         toggleAnnouncerString,
         onUpdateScalingMode,
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
-        /* @conditional-compile-remove(spotlight) */ onStartSpotlight,
-        /* @conditional-compile-remove(spotlight) */ onStopSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight,
+        /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight,
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight,
         /* @conditional-compile-remove(reaction) */ reactionResources
     ]);
@@ -20125,7 +20270,7 @@ spotlight // temp unknown type to build stable
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
         reaction: reaction,
-        /* @conditional-compile-remove(reaction) */
+        /* @conditional-compile-remove(spotlight) */
         spotlight: spotlight
     };
 };
@@ -20146,7 +20291,9 @@ const convertRemoteVideoStreamToVideoGalleryStream = (stream) => {
 const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, isScreenSharingOn, localVideoStream, 
 /* @conditional-compile-remove(rooms) */ role, 
 /* @conditional-compile-remove(raise-hand) */ raisedHand, 
-/* @conditional-compile-remove(reaction) */ reaction) => {
+/* @conditional-compile-remove(reaction) */ reaction, 
+/* @conditional-compile-remove(spotlight) */ localSpotlight, 
+/* @conditional-compile-remove(spotlight) */ capabilities) => {
     var _a, _b;
     return ({
         userId: identifier,
@@ -20163,7 +20310,11 @@ const memoizeLocalParticipant = memoizeOne((identifier, displayName, isMuted, is
         /* @conditional-compile-remove(raise-hand) */
         raisedHand: raisedHand,
         /* @conditional-compile-remove(reaction) */
-        reaction: reaction
+        reaction: reaction,
+        /* @conditional-compile-remove(spotlight) */
+        spotlight: localSpotlight,
+        /* @conditional-compile-remove(spotlight) */
+        capabilities
     });
 });
 /* @conditional-compile-remove(spotlight) */
@@ -20214,9 +20365,9 @@ const videoGallerySelector = reselect.createSelector([
     /* @conditional-compile-remove(reaction) */
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
-    getSpotlightedParticipants,
+    getSpotlightCallFeature,
     /* @conditional-compile-remove(spotlight) */
-    getMaxParticipantsToSpotlight
+    getCapabilities
 ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers, 
 /* @conditional-compile-remove(optimal-video-count) */
 optimalVideoCount, 
@@ -20229,9 +20380,9 @@ isHideAttendeeNamesEnabled,
 /* @conditional-compile-remove(reaction) */
 localParticipantReaction, 
 /* @conditional-compile-remove(spotlight) */
-spotlightedParticipants, 
+spotlightCallFeature, 
 /* @conditional-compile-remove(spotlight) */
-maxParticipantsToSpotlight) => {
+capabilities) => {
     const screenShareRemoteParticipant = screenShareRemoteParticipantId && remoteParticipants
         ? remoteParticipants[screenShareRemoteParticipantId]
         : undefined;
@@ -20242,7 +20393,7 @@ maxParticipantsToSpotlight) => {
     /* @conditional-compile-remove(reaction) */
     const localParticipantReactionState = memoizedConvertToVideoTileReaction(localParticipantReaction);
     /* @conditional-compile-remove(spotlight) */
-    const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightedParticipants);
+    const spotlightedParticipantIds = memoizeSpotlightedParticipantIds(spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants);
     return {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, 
@@ -20257,7 +20408,11 @@ maxParticipantsToSpotlight) => {
         /* @conditional-compile-remove(raise-hand) */
         raisedHand, 
         /* @conditional-compile-remove(reaction) */
-        localParticipantReactionState),
+        localParticipantReactionState, 
+        /* @conditional-compile-remove(spotlight) */
+        spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.localParticipantSpotlight, 
+        /* @conditional-compile-remove(spotlight) */
+        capabilities),
         remoteParticipants: _videoGalleryRemoteParticipantsMemo(updateUserDisplayNamesTrampoline$2(remoteParticipants ? Object.values(remoteParticipants) : noRemoteParticipants), 
         /* @conditional-compile-remove(hide-attendee-name) */
         isHideAttendeeNamesEnabled, 
@@ -20269,7 +20424,7 @@ maxParticipantsToSpotlight) => {
         /* @conditional-compile-remove(spotlight) */
         spotlightedParticipants: spotlightedParticipantIds,
         /* @conditional-compile-remove(spotlight) */
-        maxParticipantsToSpotlight: maxParticipantsToSpotlight
+        maxParticipantsToSpotlight: spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.maxParticipantsToSpotlight
     };
 });
 const updateUserDisplayNamesTrampoline$2 = (remoteParticipants) => {
@@ -20353,7 +20508,7 @@ const participantListSelector = reselect.createSelector([
     /* @conditional-compile-remove(reaction) */
     getLocalParticipantReactionState,
     /* @conditional-compile-remove(spotlight) */
-    getSpotlightedParticipants
+    getSpotlightCallFeature
 ], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted, 
 /* @conditional-compile-remove(raise-hand) */
 raisedHand, role, partitipantCount, 
@@ -20362,7 +20517,7 @@ isHideAttendeeNamesEnabled,
 /* @conditional-compile-remove(reaction) */
 localParticipantReactionState, 
 /* @conditional-compile-remove(spotlight) */
-spotlightedParticipants) => {
+spotlightCallFeature) => {
     const localUserCanRemoveOthers = localUserCanRemoveOthersTrampoline(role);
     const participants = remoteParticipants
         ? convertRemoteParticipantsToParticipantListParticipants(updateUserDisplayNamesTrampoline$1(Object.values(remoteParticipants)), localUserCanRemoveOthers, 
@@ -20371,7 +20526,7 @@ spotlightedParticipants) => {
         /* @conditional-compile-remove(hide-attendee-name) */
         role, 
         /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants)
+        spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants)
         : [];
     /* @conditional-compile-remove(reaction) */
     const localParticipantReaction = memoizedConvertToVideoTileReaction(localParticipantReactionState);
@@ -20388,7 +20543,7 @@ spotlightedParticipants) => {
         /* @conditional-compile-remove(reaction) */
         reaction: localParticipantReaction,
         /* @conditional-compile-remove(spotlight) */
-        spotlight: memoizedSpotlight(spotlightedParticipants, userId)
+        spotlight: memoizedSpotlight(spotlightCallFeature === null || spotlightCallFeature === void 0 ? void 0 : spotlightCallFeature.spotlightedParticipants, userId)
     });
     /* @conditional-compile-remove(total-participant-count) */
     const totalParticipantCount = partitipantCount;
@@ -21176,12 +21331,12 @@ const extractAttachedFilesMetadata = (metadata) => {
     }
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-const extractTeamsAttachmentsMetadata = (attachments) => {
+const extractTeamsAttachmentsMetadata = (attachments, resourceCache) => {
     /* @conditional-compile-remove(file-sharing) */
     const files = [];
     const inlineImages = [];
     attachments.forEach((attachment) => {
-        var _a;
+        var _a, _b, _c;
         const attachmentType = mapAttachmentType(attachment.attachmentType);
         /* @conditional-compile-remove(file-sharing) */
         const contentType = extractAttachmentContentTypeFromName(attachment.name);
@@ -21190,7 +21345,8 @@ const extractTeamsAttachmentsMetadata = (attachments) => {
                 attachmentType: attachmentType,
                 id: attachment.id,
                 url: extractAttachmentUrl(attachment),
-                previewUrl: attachment.previewUrl
+                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) */
@@ -21198,7 +21354,7 @@ const extractTeamsAttachmentsMetadata = (attachments) => {
             files.push({
                 attachmentType: attachmentType,
                 id: attachment.id,
-                name: (_a = attachment.name) !== null && _a !== void 0 ? _a : '',
+                name: (_c = attachment.name) !== null && _c !== void 0 ? _c : '',
                 extension: contentType !== null && contentType !== void 0 ? contentType : '',
                 url: extractAttachmentUrl(attachment),
                 payload: { teamsFileAttachment: 'true' }
@@ -21310,7 +21466,7 @@ const extractAttachmentsMetadata = (message) => {
     }
     /* @conditional-compile-remove(teams-inline-images-and-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);
+        const teamsAttachments = extractTeamsAttachmentsMetadata((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments, message.resourceCache);
         /* @conditional-compile-remove(file-sharing) */
         files = files.concat(teamsAttachments.files);
         inlineImages = inlineImages.concat(teamsAttachments.inlineImages);
@@ -21798,22 +21954,21 @@ class ResourceDownloadQueue {
                     else {
                         message = yield this.downloadAllPreviewUrls(message, operation);
                     }
-                    this.isActive = false;
                     this._context.setChatMessage(threadId, message);
                 }
                 catch (error) {
                     console.log('Downloading Resource error: ', error);
                 }
+                finally {
+                    this.isActive = false;
+                }
             }
         });
     }
     downloadSingleUrl(message, resourceUrl, operation) {
         return __awaiter$t(this, void 0, void 0, function* () {
-            if (message.resourceCache === undefined) {
-                message.resourceCache = {};
-            }
             const blobUrl = yield operation(resourceUrl, this._credential);
-            message.resourceCache[resourceUrl] = blobUrl;
+            message = Object.assign(Object.assign({}, message), { resourceCache: Object.assign(Object.assign({}, message.resourceCache), { [resourceUrl]: blobUrl }) });
             return message;
         });
     }
@@ -21938,16 +22093,18 @@ let ChatContext$1 = class ChatContext {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadResourceToCache(threadId, messageId, resourceUrl) {
-        this.modifyState((draft) => {
-            var _a;
-            const message = (_a = draft.threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
+        var _a;
+        return __awaiter$s(this, void 0, void 0, function* () {
+            let message = (_a = this.getState().threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
             if (message && this._fullsizeImageQueue) {
                 if (!message.resourceCache) {
-                    message.resourceCache = {};
+                    message = Object.assign(Object.assign({}, message), { resourceCache: {} });
                 }
                 // Need to discuss retry logic in case of failure
                 this._fullsizeImageQueue.addMessage(message);
-                this._fullsizeImageQueue.startQueue(threadId, fetchImageSource, { singleUrl: resourceUrl });
+                yield this._fullsizeImageQueue.startQueue(threadId, fetchImageSource, {
+                    singleUrl: resourceUrl
+                });
             }
         });
     }
@@ -23012,6 +23169,8 @@ const COMPOSITE_ONLY_ICONS = {
     ControlButtonCameraProhibited: React.createElement(reactIcons.VideoProhibited20Filled, null),
     /* @conditional-compile-remove(capabilities) */
     ControlButtonMicProhibited: React.createElement(reactIcons.MicProhibited20Filled, null),
+    /* @conditional-compile-remove(spotlight) */
+    ControlButtonExitSpotlight: React.createElement(reactIcons.VideoPersonStarOff20Filled, null),
     ControlBarPeopleButton: React.createElement(reactIcons.People20Regular, null),
     MoreDrawerMicrophones: React.createElement(reactIcons.Mic20Regular, null),
     MoreDrawerPeople: React.createElement(reactIcons.People20Regular, null),
@@ -23097,7 +23256,7 @@ const CallCompositeIcon = (props) => (React.createElement(react.FontIcon, Object
  */
 const CallWithChatCompositeIcon = (props) => (React.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",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited 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",startSpotlightParticipantListMenuLabel:"Spotlight for everyone",addSpotlightParticipantListMenuLabel:"Add spotlight",stopSpotlightParticipantListMenuLabel:"Stop spotlighting",stopSpotlightOnSelfParticipantListMenuLabel:"Exit spotlight",spotlightLimitReachedParticipantListMenuTitle:"Spotlight limit reached",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",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",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutBotTitle:"The call could not be completed",callTimeoutBotDetails:"The service that you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",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."}},surveyTitle:"Help us improve",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveySkipButtonLabel:"Skip",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",endOfSurveyText:"Thank you for your feedback!",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"},spotlightPrompt:{startSpotlightHeading:"Spotlight for everyone?",startSpotlightText:"You'll highlight this video for everyone in the meeting.",startSpotlightOnSelfText:"You'll highlight your video for everyone in the meeting.",startSpotlightConfirmButtonLabel:"Spotlight for everyone",startSpotlightCancelButtonLabel:"Cancel",stopSpotlightHeading:"Stop spotlighting?",stopSpotlightOnSelfHeading:"Exit spotlight?",stopSpotlightText:"This video will no longer be highlighted for everyone in the meeting.",stopSpotlightOnSelfText:"Your video will no longer be highlighted for everyone in the meeting.",stopSpotlightConfirmButtonLabel:"Stop spotlighting",stopSpotlightOnSelfConfirmButtonLabel:"Exit spotlight",stopSpotlightCancelButtonLabel:"Cancel"}};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",notInvitedToRoomDetails:"You are not able to join this room because you do not have an invite.",notInvitedToRoomTitle:"Not invited 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",startSpotlightParticipantListMenuLabel:"Spotlight for everyone",addSpotlightParticipantListMenuLabel:"Add spotlight",stopSpotlightParticipantListMenuLabel:"Stop spotlighting",stopSpotlightOnSelfParticipantListMenuLabel:"Exit spotlight",spotlightLimitReachedParticipantListMenuTitle:"Spotlight limit reached",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"The room ID provided could not be found.",roomNotFoundTitle:"Room not found",roomNotValidDetails:"This room is not valid at this current time.",roomNotValidTitle:"Room not valid",inviteToRoomRemovedDetails:"Your invite to join this room was removed.",inviteToRoomRemovedTitle:"Invite to room removed",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",callRejectedTitle:"The call could not be completed",callRejectedMoreDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutTitle:"The call could not be completed",callTimeoutDetails:"The person you are trying to reach is unavailable. Please try again later.",callTimeoutBotTitle:"The call could not be completed",callTimeoutBotDetails:"The service that you are trying to reach is unavailable. Please try again later.",dtmfDialerButtonLabel:"Dialpad",dtmfDialerButtonTooltipOn:"Show dialpad",dtmfDialerButtonTooltipOff:"Hide dialpad",dtmfDialerMoreButtonLabelOn:"Show dialpad",dtmfDialerMoreButtonLabelOff:"Hide dialpad",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."}},surveyTitle:"Help us improve",starSurveyHelperText:"How was the quality of the call?",starSurveyOneStarText:"The quality was bad.",starSurveyTwoStarText:"The quality was poor.",starSurveyThreeStarText:"The quality was good.",starSurveyFourStarText:"The quality was great.",starSurveyFiveStarText:"The quality was excellent.",surveyConfirmButtonLabel:"Send Feedback",starRatingAriaLabel:"Select {0} of {1} stars",surveySkipButtonLabel:"Skip",tagsSurveyQuestion:"What could have been better?",tagsSurveyTextFieldDefaultText:"Other, please specify",tagsSurveyHelperText:"Check any issues you experienced",surveyTextboxDefaultText:"Other, please specify",endOfSurveyText:"Thank you for your feedback!",surveyIssues:{overallRating:{callCannotJoin:"I could not join call",callCannotInvite:"I could not invite others into the call",hadToRejoin:"I had to rejoin the call",callEndedUnexpectedly:"Call ended for me unexpectedly",otherIssues:"I was having other issues with the call"},audioRating:{noLocalAudio:"The other side could not hear any sound",noRemoteAudio:"I could not hear any sound",echo:"I heard echos on the call",audioNoise:"I heard noise on the call",lowVolume:"Volume was low",audioStoppedUnexpectedly:"Audio stopped unexpectedly",distortedSpeech:"Audio was distorted",audioInterruption:"Audio was interrupted",otherIssues:"I was having other audio issues in this call"},videoRating:{noVideoReceived:"I could not see any video",noVideoSent:"Others could not see me",lowQuality:"Video quality was low",freezes:"Video frozen",stoppedUnexpectedly:"Video stopped unexpectedly",darkVideoReceived:"I can only see dark screens when others turn on their camera",audioVideoOutOfSync:"Audio and Video was out of sync",otherIssues:"I was having other video issues in this call"},screenshareRating:{noContentLocal:"Other people could not see my screenshare",noContentRemote:"I could not see other people's screenshare",cannotPresent:"I could not present my screen",lowQuality:"Screen share quality was low",freezes:"Screen share frozen",stoppedUnexpectedly:"Screen share stopped unexpectedly",largeDelay:"Screen share has a large delay",otherIssues:"I was having other screen share issues in this call"}},SurveyIssuesHeadingStrings:{overallRating:"Overall",audioRating:"Audio",videoRating:"Video",screenshareRating:"Presenting"},spotlightPrompt:{startSpotlightHeading:"Spotlight for everyone?",startSpotlightText:"You'll highlight this video for everyone in the meeting.",startSpotlightOnSelfText:"You'll highlight your video for everyone in the meeting.",startSpotlightConfirmButtonLabel:"Spotlight for everyone",startSpotlightCancelButtonLabel:"Cancel",stopSpotlightHeading:"Stop spotlighting this video?",stopSpotlightOnSelfHeading:"Exit spotlight?",stopSpotlightText:"This video will no longer be highlighted for everyone in the meeting.",stopSpotlightOnSelfText:"Your video will no longer be highlighted for everyone in the meeting.",stopSpotlightConfirmButtonLabel:"Stop spotlighting",stopSpotlightOnSelfConfirmButtonLabel:"Exit spotlight",stopSpotlightCancelButtonLabel:"Cancel"},exitSpotlightButtonLabel:"Exit spotlight",exitSpotlightButtonTooltip:"Exit spotlight"};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.
 // Licensed under the MIT License.
@@ -23425,19 +23584,12 @@ class ChatContext {
  * @private
  */
 class AzureCommunicationChatAdapter {
-    constructor(chatClient, chatThreadClient, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options) {
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.credential = undefined;
+    constructor(chatClient, chatThreadClient) {
         this.emitter = new EventEmitter();
         this.bindAllPublicMethods();
         this.chatClient = chatClient;
         this.chatThreadClient = chatThreadClient;
         this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        if (options && options.credential) {
-            this.credential = options.credential;
-        }
         /* @conditional-compile-remove(file-sharing) */
         this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context);
         const onStateChange = (clientState) => {
@@ -23483,8 +23635,6 @@ class AzureCommunicationChatAdapter {
         /* @conditional-compile-remove(file-sharing) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.downloadAttachment = this.downloadAttachment.bind(this); // ToDo: This method is to be removed
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
@@ -23631,47 +23781,12 @@ class AzureCommunicationChatAdapter {
         this.fileUploadAdapter.updateFileUploadMetadata(id, metadata);
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    // ToDo: This method is to be removed
-    downloadAttachment(options) {
-        return __awaiter$n(this, void 0, void 0, function* () {
-            return this.asyncTeeErrorToEventEmitter(() => __awaiter$n(this, void 0, void 0, function* () {
-                if (this.credential === undefined) {
-                    throw new ChatError('ChatThreadClient.getMessage', new Error('AccessToken is null'));
-                }
-                const accessToken = yield this.credential.getToken();
-                if (!accessToken) {
-                    throw new ChatError('ChatThreadClient.getMessage', new Error('AccessToken is null'));
-                }
-                return this.downloadAuthenticatedFile(accessToken.token, options);
-            }));
-        });
-    }
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    // ToDo: This method is to be removed
-    downloadAuthenticatedFile(accessToken, options) {
+    downloadResourceToCache(resourceDetails) {
         return __awaiter$n(this, void 0, void 0, function* () {
-            function fetchWithAuthentication(url, token) {
-                return __awaiter$n(this, void 0, void 0, function* () {
-                    const headers = new Headers();
-                    headers.append('Authorization', `Bearer ${token}`);
-                    try {
-                        return yield fetch(url, { headers });
-                    }
-                    catch (err) {
-                        throw new ChatError('ChatThreadClient.getMessage', err);
-                    }
-                });
-            }
-            const response = yield fetchWithAuthentication(options.attachmentUrl, accessToken);
-            const blob = yield response.blob();
-            return { blobUrl: URL.createObjectURL(blob) };
+            this.chatClient.downloadResourceToCache(resourceDetails.threadId, resourceDetails.messageId, resourceDetails.resourceUrl);
         });
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    downloadResourceToCache(resourceDetails) {
-        this.chatClient.downloadResourceToCache(resourceDetails.threadId, resourceDetails.messageId, resourceDetails.resourceUrl);
-    }
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     removeResourceFromCache(resourceDetails) {
         this.chatClient.removeResourceFromCache(resourceDetails.threadId, resourceDetails.messageId, resourceDetails.resourceUrl);
     }
@@ -23817,10 +23932,7 @@ const _createAzureCommunicationChatAdapterInner = (endpoint, userId, displayName
     }, undefined, telemetryImplementationHint);
     const chatThreadClient = yield chatClient.getChatThreadClient(threadId);
     yield chatClient.startRealtimeNotifications();
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const options = { credential: credential };
-    const adapter = yield createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options);
+    const adapter = yield createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
     return adapter;
 });
 /**
@@ -23927,12 +24039,9 @@ beforeDispose) => {
  *
  * @public
  */
-function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-options) {
+function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient) {
     return __awaiter$n(this, void 0, void 0, function* () {
-        return new AzureCommunicationChatAdapter(chatClient, chatThreadClient, 
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options);
+        return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
     });
 }
 const isChatError = (e) => {
@@ -24620,8 +24729,6 @@ const ChatScreen = (props) => {
     /* @conditional-compile-remove(file-sharing) */
     const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
     /* @conditional-compile-remove(image-overlay) */
-    const [fullSizeAttachments, setFullSizeAttachments] = React.useState({});
-    /* @conditional-compile-remove(image-overlay) */
     const [overlayImageItem, setOverlayImageItem] = React.useState();
     /* @conditional-compile-remove(image-overlay) */
     const [isImageOverlayOpen, setIsImageOverlayOpen] = React.useState(false);
@@ -24642,6 +24749,34 @@ const ChatScreen = (props) => {
     const typingIndicatorProps = usePropsFor$2(TypingIndicator);
     const headerProps = useAdaptedSelector$1(getHeaderProps);
     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) {
+                return;
+            }
+            setOverlayImageItem(Object.assign(Object.assign({}, overlayImageItem), { imageSrc: inlineImages[0].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
+    }, [messageThreadProps.messages]);
     const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
         return (React.createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
     }, [onFetchAvatarPersonaData]);
@@ -24695,28 +24830,24 @@ const ChatScreen = (props) => {
         const overlayImage = {
             title: chatMessage.senderDisplayName || '',
             titleIcon: titleIcon,
-            downloadFilename: attachment.id,
-            imageSrc: ''
+            attachmentId: attachment.id,
+            imageSrc: attachment.fullSizeImageSrc || '',
+            messageId: messageId
         };
         setIsImageOverlayOpen(true);
-        if (attachment.id in fullSizeAttachments) {
-            setOverlayImageItem(Object.assign(Object.assign({}, overlayImage), { imageSrc: fullSizeAttachments[attachment.id] }));
-            return;
-        }
+        setOverlayImageItem(overlayImage);
         if (attachment.attachmentType === 'inlineImage' && attachment.url) {
-            // ToDo: This method is to be removed
-            const blob = yield adapter.downloadAttachment({ attachmentUrl: attachment.url });
-            if (blob) {
-                const blobUrl = blob.blobUrl;
-                setFullSizeAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: blobUrl })));
-                setOverlayImageItem(Object.assign(Object.assign({}, overlayImage), { imageSrc: blobUrl }));
-            }
+            adapter.downloadResourceToCache({
+                threadId: adapter.getState().thread.threadId,
+                messageId: messageId,
+                resourceUrl: attachment.url
+            });
         }
-    }), [adapter, fullSizeAttachments, messageThreadProps.messages, onRenderAvatarCallback]);
+    }), [adapter, messageThreadProps, onRenderAvatarCallback]);
     /* @conditional-compile-remove(image-overlay) */
     const inlineImageOptions = {
         onRenderInlineImage: (inlineImage, defaultOnRender) => {
-            return (React.createElement("span", { onClick: () => onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
+            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);
                     }
@@ -24736,7 +24867,7 @@ const ChatScreen = (props) => {
             const a = document.createElement('a');
             // Set the href and download attributes for the anchor element
             a.href = imageSrc;
-            a.download = (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.downloadFilename) || '';
+            a.download = (overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId) || '';
             a.rel = 'noopener noreferrer';
             a.target = '_blank';
             // Programmatically click the anchor element to trigger the download
@@ -24744,7 +24875,7 @@ const ChatScreen = (props) => {
             a.click();
             document.body.removeChild(a);
         }
-    }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.downloadFilename]);
+    }, [overlayImageItem === null || overlayImageItem === void 0 ? void 0 : overlayImageItem.attachmentId]);
     const AttachFileButton = React.useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
@@ -25440,149 +25571,175 @@ var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments,
 const useHandlers = (
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 _component) => {
-    return createCompositeHandlers(useAdapter());
-};
-const createCompositeHandlers = memoizeOne((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.createStreamView(undefined, options);
-    }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.createStreamView(userId, options);
-    }),
-    onHangUp: (forEveryone) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.leaveCall(forEveryone);
-    }),
-    /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _a;
-        return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
-    }),
-    /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.addParticipant(participant, options);
-    }),
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.sendDtmfTone(dtmfTone);
-    }),
-    onRemoveParticipant: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.removeParticipant(userId);
-    }),
-    /* @conditional-compile-remove(raise-hand) */
-    onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.raiseHand();
-    }),
-    /* @conditional-compile-remove(raise-hand) */
-    onLowerHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.lowerHand();
-    }),
-    /* @conditional-compile-remove(raise-hand) */
-    onToggleRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _b;
-        ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
-            ? yield adapter.lowerHand()
-            : yield adapter.raiseHand();
-    }),
-    /* @conditional-compile-remove(reaction) */
-    onReactionClicked: (reaction) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.onReactionClicked(reaction);
-    }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setCamera(deviceInfo, options);
-    }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setMicrophone(deviceInfo);
-    }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setSpeaker(deviceInfo);
-    }),
-    onStartCall: (participants, options) => {
-        const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
-        return adapter.startCall(rawIds, options);
-    },
-    onStartScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startScreenShare();
-    }),
-    onStopScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopScreenShare();
-    }),
-    onToggleCamera: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
-    }),
-    onToggleMicrophone: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _c;
-        return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isMuted) ? yield adapter.unmute() : yield adapter.mute();
-    }),
-    onToggleScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        var _d;
-        return ((_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.isScreenSharingOn)
-            ? yield adapter.stopScreenShare()
-            : yield adapter.startScreenShare();
-    }),
-    onStartLocalVideo: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        if (adapter.getState().call) {
-            return adapter.startCamera();
-        }
-    }),
-    onDisposeLocalStreamView: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeLocalVideoStreamView();
-    }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeStreamView(userId);
-    }),
-    onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeScreenShareStreamView(userId);
-    }),
-    onDisposeRemoteVideoStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.disposeRemoteVideoStreamView(userId);
-    }),
-    /* @conditional-compile-remove(call-readiness) */
-    askDevicePermission: (constrain) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return adapter.askDevicePermission(constrain);
-    }),
-    /* @conditional-compile-remove(video-background-effects) */
-    onRemoveVideoBackgroundEffects: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.stopVideoBackgroundEffects();
-    }),
-    /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
-        const blurConfig = Object.assign({ effectName: 'blur' }, backgroundBlurConfig);
-        return yield adapter.startVideoBackgroundEffect(blurConfig);
-    }),
-    /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
-        const replacementConfig = Object.assign({ effectName: 'replacement' }, backgroundReplacementConfig);
-        return yield adapter.startVideoBackgroundEffect(replacementConfig);
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onStartCaptions: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startCaptions(options);
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onStopCaptions: () => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopCaptions();
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onSetSpokenLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setSpokenLanguage(language);
-    }),
-    /* @conditional-compile-remove(close-captions) */
-    onSetCaptionLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.setCaptionLanguage(language);
-    }),
-    /* @conditional-compile-remove(end-of-call-survey) */
-    onSubmitSurvey: (survey) => __awaiter$j(void 0, void 0, void 0, function* () {
-        return yield adapter.submitSurvey(survey);
-    }),
+    var _a, _b;
+    const adapter = useAdapter();
+    const compositeHandlers = createCompositeHandlers(adapter);
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.startSpotlight(userIds);
-    }),
+    const canSpotlight = (_b = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.spotlightParticipant.isPresent;
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
-        yield adapter.stopSpotlight(userIds);
-    })
-}));
+    return Object.assign(Object.assign({}, compositeHandlers), (canSpotlight
+        ? {}
+        : { onStartLocalSpotlight: undefined, onStartRemoteSpotlight: undefined, onStopRemoteSpotlight: undefined }));
+};
+const createCompositeHandlers = memoizeOne((adapter) => {
+    return {
+        onCreateLocalStreamView: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.createStreamView(undefined, options);
+        }),
+        onCreateRemoteStreamView: (userId, options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.createStreamView(userId, options);
+        }),
+        onHangUp: (forEveryone) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.leaveCall(forEveryone);
+        }),
+        /* @conditional-compile-remove(PSTN-calls) */
+        onToggleHold: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _a;
+            return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
+        }),
+        /* @conditional-compile-remove(PSTN-calls) */
+        onAddParticipant: (participant, options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.addParticipant(participant, options);
+        }),
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
+        onSendDtmfTone: (dtmfTone) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.sendDtmfTone(dtmfTone);
+        }),
+        onRemoveParticipant: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.removeParticipant(userId);
+        }),
+        /* @conditional-compile-remove(raise-hand) */
+        onRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.raiseHand();
+        }),
+        /* @conditional-compile-remove(raise-hand) */
+        onLowerHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.lowerHand();
+        }),
+        /* @conditional-compile-remove(raise-hand) */
+        onToggleRaiseHand: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _b;
+            ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.raiseHand.localParticipantRaisedHand)
+                ? yield adapter.lowerHand()
+                : yield adapter.raiseHand();
+        }),
+        /* @conditional-compile-remove(reaction) */
+        onReactionClicked: (reaction) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.onReactionClicked(reaction);
+        }),
+        onSelectCamera: (deviceInfo, options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setCamera(deviceInfo, options);
+        }),
+        onSelectMicrophone: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setMicrophone(deviceInfo);
+        }),
+        onSelectSpeaker: (deviceInfo) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setSpeaker(deviceInfo);
+        }),
+        onStartCall: (participants, options) => {
+            const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
+            return adapter.startCall(rawIds, options);
+        },
+        onStartScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startScreenShare();
+        }),
+        onStopScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopScreenShare();
+        }),
+        onToggleCamera: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
+        }),
+        onToggleMicrophone: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _c;
+            return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isMuted) ? yield adapter.unmute() : yield adapter.mute();
+        }),
+        onToggleScreenShare: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            var _d;
+            return ((_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.isScreenSharingOn)
+                ? yield adapter.stopScreenShare()
+                : yield adapter.startScreenShare();
+        }),
+        onStartLocalVideo: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            if (adapter.getState().call) {
+                return adapter.startCamera();
+            }
+        }),
+        onDisposeLocalStreamView: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeLocalVideoStreamView();
+        }),
+        onDisposeRemoteStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeStreamView(userId);
+        }),
+        onDisposeRemoteScreenShareStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeScreenShareStreamView(userId);
+        }),
+        onDisposeRemoteVideoStreamView: (userId) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.disposeRemoteVideoStreamView(userId);
+        }),
+        /* @conditional-compile-remove(call-readiness) */
+        askDevicePermission: (constrain) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return adapter.askDevicePermission(constrain);
+        }),
+        /* @conditional-compile-remove(video-background-effects) */
+        onRemoveVideoBackgroundEffects: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.stopVideoBackgroundEffects();
+        }),
+        /* @conditional-compile-remove(video-background-effects) */
+        onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
+            const blurConfig = Object.assign({ effectName: 'blur' }, backgroundBlurConfig);
+            return yield adapter.startVideoBackgroundEffect(blurConfig);
+        }),
+        /* @conditional-compile-remove(video-background-effects) */
+        onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$j(void 0, void 0, void 0, function* () {
+            const replacementConfig = Object.assign({ effectName: 'replacement' }, backgroundReplacementConfig);
+            return yield adapter.startVideoBackgroundEffect(replacementConfig);
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onStartCaptions: (options) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startCaptions(options);
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onStopCaptions: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopCaptions();
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onSetSpokenLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setSpokenLanguage(language);
+        }),
+        /* @conditional-compile-remove(close-captions) */
+        onSetCaptionLanguage: (language) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.setCaptionLanguage(language);
+        }),
+        /* @conditional-compile-remove(end-of-call-survey) */
+        onSubmitSurvey: (survey) => __awaiter$j(void 0, void 0, void 0, function* () {
+            return yield adapter.submitSurvey(survey);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStartSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startSpotlight(userIds);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStopSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopSpotlight(userIds);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlight: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startSpotlight();
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlight: () => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopSpotlight();
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStartRemoteSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.startSpotlight(userIds);
+        }),
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlight: (userIds) => __awaiter$j(void 0, void 0, void 0, function* () {
+            yield adapter.stopSpotlight(userIds);
+        })
+    };
+});
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -27290,6 +27447,17 @@ const DtmfDialpadButton = (props) => {
     return (React.createElement(ControlBarButton, Object.assign({}, props, { strings: strings ? strings : dialpadButtonStrings, showLabel: displayType !== 'compact', labelKey: 'dtmfDialpadButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon, onClick: onClick, styles: styles })));
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/* @conditional-compile-remove(spotlight) */
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @private
+ */
+const ExitSpotlightButton = (props) => {
+    return (React.createElement(ControlBarButton, Object.assign({ "data-ui-id": 'call-composite-exit-spotlight-button', labelKey: 'exitSpotlightButtonLabelKey', showLabel: props.displayType !== 'compact', onRenderIcon: () => React.createElement(_HighContrastAwareIcon, { iconName: 'StopSpotlightContextualMenuItem' }), onClick: props.onClick }, props)));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
@@ -27368,6 +27536,13 @@ const CommonCallControlBar = (props) => {
         label: callWithChatStrings.moreDrawerButtonLabel,
         tooltipContent: callWithChatStrings.moreDrawerButtonTooltip
     }), [callWithChatStrings]);
+    /* @conditional-compile-remove(spotlight) */
+    const callStrings = useLocale().strings.call;
+    /* @conditional-compile-remove(spotlight) */
+    const exitSpotlightButtonStrings = React.useMemo(() => ({
+        label: callStrings.exitSpotlightButtonLabel,
+        tooltipContent: callStrings.exitSpotlightButtonTooltip
+    }), [callStrings]);
     const centerContainerStyles = React.useMemo(() => {
         const styles = !props.mobileView ? desktopControlBarStyles : {};
         return react.mergeStyleSets(styles, {
@@ -27398,6 +27573,8 @@ const CommonCallControlBar = (props) => {
     const screenShareButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.screenShareButton);
     const microphoneButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.microphoneButton);
     const cameraButtonIsEnabled = isEnabled$1(options === null || options === void 0 ? void 0 : options.cameraButton);
+    /* @conditional-compile-remove(spotlight) */
+    const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
     const showDesktopMoreButton = 
     /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(close-captions) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.moreButton) &&
         (/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled$1(options === null || options === void 0 ? void 0 : options.holdButton) ||
@@ -27444,6 +27621,8 @@ const CommonCallControlBar = (props) => {
                                                 props.onSetDialpadPage();
                                             }
                                         } })),
+                                    /* @conditional-compile-remove(spotlight) */ showExitSpotlightButton &&
+                                        props.onStopLocalSpotlight && (React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings })),
                                     screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$4(options.screenShareButton) })), (_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
@@ -28891,11 +29070,13 @@ const usePeoplePane = (props) => {
     /* @conditional-compile-remove(spotlight) */
     spotlightedParticipantUserIds, 
     /* @conditional-compile-remove(spotlight) */
-    onStartSpotlight, 
+    onStartLocalSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    onStopSpotlight, 
+    onStopLocalSpotlight, 
+    /* @conditional-compile-remove(spotlight) */
+    onStartRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
-    ableToSpotlight, 
+    onStopRemoteSpotlight, 
     /* @conditional-compile-remove(spotlight) */
     maxParticipantsToSpotlight } = props;
     const closePane = React.useCallback(() => {
@@ -28909,17 +29090,23 @@ const usePeoplePane = (props) => {
     const onFetchParticipantMenuItemsForCallComposite = React.useCallback((participantId, myUserId, defaultMenuItems) => {
         const _defaultMenuItems = defaultMenuItems !== null && defaultMenuItems !== void 0 ? defaultMenuItems : [];
         const isSpotlighted = spotlightedParticipantUserIds === null || spotlightedParticipantUserIds === void 0 ? void 0 : spotlightedParticipantUserIds.find((p) => p === participantId);
+        const isMe = myUserId === participantId;
         if (isSpotlighted) {
-            const stopSpotlightMenuText = myUserId === participantId
+            const stopSpotlightMenuText = isMe
                 ? localeStrings.stopSpotlightOnSelfParticipantListMenuLabel
                 : localeStrings.stopSpotlightParticipantListMenuLabel;
-            if (onStopSpotlight && stopSpotlightMenuText && (ableToSpotlight || myUserId === participantId)) {
+            const onStopSpotlight = isMe
+                ? onStopLocalSpotlight
+                : onStopRemoteSpotlight
+                    ? () => {
+                        onStopRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
+            if (onStopSpotlight && stopSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'stop-spotlight',
                     text: stopSpotlightMenuText,
-                    onClick: () => {
-                        onStopSpotlight === null || onStopSpotlight === void 0 ? void 0 : onStopSpotlight([participantId]);
-                    },
+                    onClick: onStopSpotlight,
                     iconProps: {
                         iconName: 'StopSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
@@ -28937,13 +29124,18 @@ const usePeoplePane = (props) => {
                     ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight
                     : false
                 : false;
-            if (onStartSpotlight && startSpotlightMenuText && ableToSpotlight) {
+            const onStartSpotlight = isMe
+                ? onStartLocalSpotlight
+                : onStartRemoteSpotlight
+                    ? () => {
+                        onStartRemoteSpotlight([participantId]);
+                    }
+                    : undefined;
+            if (onStartSpotlight && startSpotlightMenuText) {
                 _defaultMenuItems.push({
                     key: 'start-spotlight',
                     text: startSpotlightMenuText,
-                    onClick: () => {
-                        onStartSpotlight === null || onStartSpotlight === void 0 ? void 0 : onStartSpotlight([participantId]);
-                    },
+                    onClick: onStartSpotlight,
                     iconProps: {
                         iconName: 'StartSpotlightContextualMenuItem',
                         styles: { root: { lineHeight: 0 } }
@@ -28961,15 +29153,16 @@ const usePeoplePane = (props) => {
             : _defaultMenuItems;
     }, [
         spotlightedParticipantUserIds,
-        onStartSpotlight,
-        onStopSpotlight,
+        onStartLocalSpotlight,
+        onStopLocalSpotlight,
+        onStartRemoteSpotlight,
+        onStopRemoteSpotlight,
         onFetchParticipantMenuItems,
         localeStrings.stopSpotlightParticipantListMenuLabel,
         localeStrings.stopSpotlightOnSelfParticipantListMenuLabel,
         localeStrings.addSpotlightParticipantListMenuLabel,
         localeStrings.startSpotlightParticipantListMenuLabel,
         localeStrings.spotlightLimitReachedParticipantListMenuTitle,
-        ableToSpotlight,
         maxParticipantsToSpotlight
     ]);
     let _onFetchParticipantMenuItems = onFetchParticipantMenuItems;
@@ -29684,31 +29877,94 @@ var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments,
 /**
  * @internal
  */
-const useSpotlightCallbacksWithPrompt = (onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps) => {
-    const myUserId = toFlatCommunicationIdentifier(useAdapter().getState().userId);
+const useLocalSpotlightCallbacksWithPrompt = (onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps) => {
+    const strings = useLocale().strings.call;
+    return React.useMemo(() => {
+        if (!setIsPromptOpen || !setPromptProps) {
+            return {
+                onStartLocalSpotlightWithPrompt: onStartLocalSpotlight,
+                onStopLocalSpotlightWithPrompt: onStopLocalSpotlight
+            };
+        }
+        return {
+            onStartLocalSpotlightWithPrompt: onStartLocalSpotlight
+                ? getStartLocalSpotlightWithPromptCallback(onStartLocalSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined,
+            onStopLocalSpotlightWithPrompt: onStopLocalSpotlight
+                ? getStopLocalSpotlightWithPromptCallback(onStopLocalSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined
+        };
+    }, [onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps, strings]);
+};
+/* @conditional-compile-remove(spotlight) */
+const getStartLocalSpotlightWithPromptCallback = (onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+    return () => __awaiter$d(void 0, void 0, void 0, function* () {
+        setPromptProps({
+            heading: strings.spotlightPrompt.startSpotlightHeading,
+            text: strings.spotlightPrompt.startSpotlightOnSelfText,
+            confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
+            cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
+            onConfirm: () => {
+                onStartSpotlight();
+                setIsPromptOpen(false);
+            },
+            onCancel: () => setIsPromptOpen(false)
+        });
+        setIsPromptOpen(true);
+    });
+};
+/* @conditional-compile-remove(spotlight) */
+const getStopLocalSpotlightWithPromptCallback = (onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+    return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
+        if (userIds && userIds.length > 1) {
+            onStopSpotlight(userIds);
+        }
+        setPromptProps({
+            heading: strings.spotlightPrompt.stopSpotlightOnSelfHeading,
+            text: strings.spotlightPrompt.stopSpotlightOnSelfText,
+            confirmButtonLabel: strings.spotlightPrompt.stopSpotlightOnSelfConfirmButtonLabel,
+            cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
+            onConfirm: () => {
+                onStopSpotlight(userIds);
+                setIsPromptOpen(false);
+            },
+            onCancel: () => setIsPromptOpen(false)
+        });
+        setIsPromptOpen(true);
+    });
+};
+/* @conditional-compile-remove(spotlight) */
+/**
+ * @internal
+ */
+const useRemoteSpotlightCallbacksWithPrompt = (onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps) => {
     const strings = useLocale().strings.call;
     return React.useMemo(() => {
         if (!setIsPromptOpen || !setPromptProps) {
-            return { onStartSpotlightWithPrompt: onStartSpotlight, onStopSpotlightWithPrompt: onStopSpotlight };
+            return {
+                onStartRemoteSpotlightWithPrompt: onStartRemoteSpotlight,
+                onStopRemoteSpotlightWithPrompt: onStopRemoteSpotlight
+            };
         }
         return {
-            onStartSpotlightWithPrompt: getStartSpotlightWithPromptCallback(myUserId, onStartSpotlight, setIsPromptOpen, setPromptProps, strings),
-            onStopSpotlightWithPrompt: getStopSpotlightWithPromptCallback(myUserId, onStopSpotlight, setIsPromptOpen, setPromptProps, strings)
+            onStartRemoteSpotlightWithPrompt: onStartRemoteSpotlight
+                ? getStartRemoteSpotlightWithPromptCallback(onStartRemoteSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined,
+            onStopRemoteSpotlightWithPrompt: onStopRemoteSpotlight
+                ? getStopRemoteSpotlightWithPromptCallback(onStopRemoteSpotlight, setIsPromptOpen, setPromptProps, strings)
+                : undefined
         };
-    }, [myUserId, onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps, strings]);
+    }, [onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps, strings]);
 };
 /* @conditional-compile-remove(spotlight) */
-const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+const getStartRemoteSpotlightWithPromptCallback = (onStartSpotlight, setIsPromptOpen, setPromptProps, strings) => {
     return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
         if (userIds && userIds.length > 1) {
             onStartSpotlight(userIds);
         }
-        const startSpotlightPromptText = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.startSpotlightOnSelfText
-            : strings.spotlightPrompt.startSpotlightText;
         setPromptProps({
             heading: strings.spotlightPrompt.startSpotlightHeading,
-            text: startSpotlightPromptText,
+            text: strings.spotlightPrompt.startSpotlightText,
             confirmButtonLabel: strings.spotlightPrompt.startSpotlightConfirmButtonLabel,
             cancelButtonLabel: strings.spotlightPrompt.startSpotlightCancelButtonLabel,
             onConfirm: () => {
@@ -29721,24 +29977,15 @@ const getStartSpotlightWithPromptCallback = (myUserId, onStartSpotlight, setIsPr
     });
 };
 /* @conditional-compile-remove(spotlight) */
-const getStopSpotlightWithPromptCallback = (myUserId, onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
+const getStopRemoteSpotlightWithPromptCallback = (onStopSpotlight, setIsPromptOpen, setPromptProps, strings) => {
     return (userIds) => __awaiter$d(void 0, void 0, void 0, function* () {
         if (userIds && userIds.length > 1) {
             onStopSpotlight(userIds);
         }
-        const stopSpotlightPromptHeading = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.stopSpotlightOnSelfHeading
-            : strings.spotlightPrompt.stopSpotlightHeading;
-        const stopSpotlightPromptText = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.stopSpotlightOnSelfText
-            : strings.spotlightPrompt.stopSpotlightText;
-        const stopSpotlightPromptConfirmButtonLabel = userIds === undefined || userIds[0] === myUserId
-            ? strings.spotlightPrompt.stopSpotlightOnSelfConfirmButtonLabel
-            : strings.spotlightPrompt.stopSpotlightConfirmButtonLabel;
         setPromptProps({
-            heading: stopSpotlightPromptHeading,
-            text: stopSpotlightPromptText,
-            confirmButtonLabel: stopSpotlightPromptConfirmButtonLabel,
+            heading: strings.spotlightPrompt.stopSpotlightHeading,
+            text: strings.spotlightPrompt.stopSpotlightText,
+            confirmButtonLabel: strings.spotlightPrompt.stopSpotlightConfirmButtonLabel,
             cancelButtonLabel: strings.spotlightPrompt.stopSpotlightCancelButtonLabel,
             onConfirm: () => {
                 onStopSpotlight(userIds);
@@ -29756,7 +30003,7 @@ const getStopSpotlightWithPromptCallback = (myUserId, onStopSpotlight, setIsProm
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -29800,14 +30047,17 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(spotlight) */
     const { setPromptProps, setIsPromptOpen } = props;
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlight, onStopSpotlight, spotlightedParticipants, maxParticipantsToSpotlight } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight, spotlightedParticipants, maxParticipantsToSpotlight, localParticipant } = videoGalleryProps;
+    /* @conditional-compile-remove(spotlight) */
+    const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlightWithPrompt, onStopSpotlightWithPrompt } = useSpotlightCallbacksWithPrompt(onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps);
+    const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(Object.assign(Object.assign({}, peoplePaneProps), { 
         /* @conditional-compile-remove(spotlight) */ spotlightedParticipantUserIds: spotlightedParticipants, 
-        /* @conditional-compile-remove(spotlight) */ onStartSpotlight: onStartSpotlightWithPrompt, 
-        /* @conditional-compile-remove(spotlight) */ onStopSpotlight: onStopSpotlightWithPrompt, 
-        /* @conditional-compile-remove(spotlight) */ ableToSpotlight: (_c = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.capabilitiesFeature) === null || _c === void 0 ? void 0 : _c.capabilities.spotlightParticipant.isPresent, 
+        /* @conditional-compile-remove(spotlight) */ onStartLocalSpotlight: onStartLocalSpotlightWithPrompt, 
+        /* @conditional-compile-remove(spotlight) */ onStopLocalSpotlight: onStopLocalSpotlightWithPrompt, 
+        /* @conditional-compile-remove(spotlight) */ onStartRemoteSpotlight: onStartRemoteSpotlightWithPrompt, 
+        /* @conditional-compile-remove(spotlight) */ onStopRemoteSpotlight: onStopRemoteSpotlightWithPrompt, 
         /* @conditional-compile-remove(spotlight) */ maxParticipantsToSpotlight }));
     const togglePeoplePane = React.useCallback(() => {
         if (isPeoplePaneOpen) {
@@ -29862,7 +30112,7 @@ const CallArrangement = (props) => {
     }, [togglePeoplePane]);
     const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     /* @conditional-compile-remove(rooms) */
-    const role = (_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.role;
+    const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
     let canUnmute = true;
     /* @conditional-compile-remove(rooms) */
     canUnmute = role !== 'Consumer' ? true : false;
@@ -29892,15 +30142,15 @@ const CallArrangement = (props) => {
     /* @conditional-compile-remove(capabilities) */
     // Filter out shareScreen capability notifications if on mobile
     const filteredCapabilitesChangedNotifications = props.mobileView
-        ? (_e = props.capabilitiesChangedNotificationBarProps) === null || _e === void 0 ? void 0 : _e.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
-        : (_f = props.capabilitiesChangedNotificationBarProps) === null || _f === void 0 ? void 0 : _f.capabilitiesChangedNotifications;
+        ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
+        : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
     return (React.createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React.createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
             React.createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
-                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React.createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
                         zIndex: CONTROL_BAR_Z_INDEX,
                         padding: verticalControlBar ? '0.25rem' : 'unset'
-                    }) }, isLegacyCallControlEnabled((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+                    }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React.createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: isPeoplePaneOpen, 
                     /* @conditional-compile-remove(one-to-n-calling) */
@@ -29922,8 +30172,10 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(dtmf-dialer) */
                     onSetDialpadPage: props.onSetDialpadPage, 
                     /* @conditional-compile-remove(dtmf-dialer) */
-                    dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
-                ((_j = props.callControlProps) === null || _j === void 0 ? void 0 : _j.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
+                    dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef, 
+                    /* @conditional-compile-remove(spotlight) */
+                    onStopLocalSpotlight: localParticipant.spotlight ? onStopLocalSpotlight : undefined }))))),
+                ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold, 
@@ -29959,7 +30211,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_k = props.callControlProps.options) === null || _k === void 0 ? void 0 : _k.participantsButton), onChatButtonClicked: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.onClick, disableChatButton: (_m = props.mobileChatTabHeader) === null || _m === void 0 ? void 0 : _m.disabled }),
+                            isDisabled$4((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -30015,7 +30267,7 @@ const remoteVideoViewOptions = {
  * @private
  */
 const MediaGallery = (props) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     /* @conditional-compile-remove(spotlight) */
     const { setIsPromptOpen, setPromptProps } = props;
     const videoGalleryProps = usePropsFor$1(VideoGallery);
@@ -30070,11 +30322,11 @@ const MediaGallery = (props) => {
         containerHeight
     ]);
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlight, onStopSpotlight } = videoGalleryProps;
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight } = videoGalleryProps;
     /* @conditional-compile-remove(spotlight) */
-    const { onStartSpotlightWithPrompt, onStopSpotlightWithPrompt } = useSpotlightCallbacksWithPrompt(onStartSpotlight, onStopSpotlight, setIsPromptOpen, setPromptProps);
+    const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
     /* @conditional-compile-remove(spotlight) */
-    const ableToSpotlight = (_e = (_d = adapter.getState().call) === null || _d === void 0 ? void 0 : _d.capabilitiesFeature) === null || _e === void 0 ? void 0 : _e.capabilities.spotlightParticipant.isPresent;
+    const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const VideoGalleryMemoized = React.useMemo(() => {
         const layoutBasedOnUserSelection = () => {
             /* @conditional-compile-remove(gallery-layouts) */
@@ -30092,9 +30344,13 @@ const MediaGallery = (props) => {
             /* @conditional-compile-remove(reaction) */
             reactionResources: reactionResources, 
             /* @conditional-compile-remove(spotlight) */
-            onStartSpotlight: ableToSpotlight ? onStartSpotlightWithPrompt : undefined, 
+            onStartLocalSpotlight: onStartLocalSpotlightWithPrompt, 
+            /* @conditional-compile-remove(spotlight) */
+            onStopLocalSpotlight: onStopLocalSpotlightWithPrompt, 
+            /* @conditional-compile-remove(spotlight) */
+            onStartRemoteSpotlight: onStartRemoteSpotlightWithPrompt, 
             /* @conditional-compile-remove(spotlight) */
-            onStopSpotlight: ableToSpotlight ? onStopSpotlightWithPrompt : undefined })));
+            onStopRemoteSpotlight: onStopRemoteSpotlightWithPrompt })));
     }, [
         videoGalleryProps,
         props.isMobile,
@@ -30117,11 +30373,13 @@ const MediaGallery = (props) => {
         /* @conditional-compile-remove(reaction) */
         reactionResources,
         /* @conditional-compile-remove(spotlight) */
-        ableToSpotlight,
+        onStartLocalSpotlightWithPrompt,
         /* @conditional-compile-remove(spotlight) */
-        onStartSpotlightWithPrompt,
+        onStopLocalSpotlightWithPrompt,
         /* @conditional-compile-remove(spotlight) */
-        onStopSpotlightWithPrompt
+        onStartRemoteSpotlightWithPrompt,
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlightWithPrompt
     ]);
     return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -34983,17 +35241,12 @@ class CallWithChatBackedChatAdapter {
         this.callWithChatAdapter = callWithChatAdapter;
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    // ToDo: This method is to be removed
-    downloadAttachment(options) {
+    downloadResourceToCache(resourceDetails) {
         return __awaiter$3(this, void 0, void 0, function* () {
-            return yield this.callWithChatAdapter.downloadAttachment(options);
+            this.callWithChatAdapter.downloadResourceToCache(resourceDetails);
         });
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    downloadResourceToCache(resourceDetails) {
-        this.callWithChatAdapter.downloadResourceToCache(resourceDetails);
-    }
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     removeResourceFromCache(resourceDetails) {
         this.callWithChatAdapter.removeResourceFromCache(resourceDetails);
     }
@@ -35640,8 +35893,6 @@ class AzureCommunicationCallWithChatAdapter {
         /* @conditional-compile-remove(file-sharing) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.downloadAttachment = this.downloadAttachment.bind(this); // ToDo: This method is to be removed
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
@@ -35900,17 +36151,12 @@ class AzureCommunicationCallWithChatAdapter {
         });
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    // ToDo: This method is to be removed
-    downloadAttachment(options) {
+    downloadResourceToCache(resourceDetails) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapter.downloadAttachment(options);
+            this.chatAdapter.downloadResourceToCache(resourceDetails);
         });
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    downloadResourceToCache(resourceDetails) {
-        this.chatAdapter.downloadResourceToCache(resourceDetails);
-    }
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     removeResourceFromCache(resourceDetails) {
         this.chatAdapter.removeResourceFromCache(resourceDetails);
     }
@@ -36324,15 +36570,11 @@ beforeDispose) => {
  */
 const createAzureCommunicationCallWithChatAdapterFromClients = ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, 
 /* @conditional-compile-remove(video-background-effects) */
-callAdapterOptions, 
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-chatAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
+callAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
     const createCallAdapterPromise = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, callLocator, 
     /* @conditional-compile-remove(video-background-effects) */
     callAdapterOptions);
-    const createChatAdapterPromise = createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    chatAdapterOptions);
+    const createChatAdapterPromise = createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
     const [callAdapter, chatAdapter] = yield Promise.all([createCallAdapterPromise, createChatAdapterPromise]);
     return new AzureCommunicationCallWithChatAdapter(callAdapter, chatAdapter);
 });