@azure/communication-react 1.12.1-alpha-202401250013 → 1.12.1-alpha-202401270011

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.12.1-alpha-202401250013';
+var telemetryVersion = '1.12.1-alpha-202401270011';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -525,7 +525,7 @@ const getSupportedSpokenLanguages = (state, props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$O = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$P = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -564,7 +564,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$O(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$P(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -772,7 +772,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$N = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$O = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -793,7 +793,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager, call, options) => {
-    const onStartLocalVideo = () => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$O(void 0, void 0, void 0, function* () {
         // Before the call object creates a stream, dispose of any local preview streams.
         // @TODO: is there any way to parent the unparented view to the call object instead
         // of disposing and creating a new stream?
@@ -813,7 +813,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$O(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -822,7 +822,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$O(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         // the disposal of the unparented views is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
         // The root cause of the issue is caused by never transitioning the unparented view to the
@@ -879,19 +879,19 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -922,11 +922,11 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(raise-hand) */
-    const onRaiseHand = () => __awaiter$N(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
+    const onRaiseHand = () => __awaiter$O(void 0, void 0, void 0, function* () { var _a; return yield ((_a = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _a === void 0 ? void 0 : _a.raiseHand()); });
     /* @conditional-compile-remove(raise-hand) */
-    const onLowerHand = () => __awaiter$N(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
+    const onLowerHand = () => __awaiter$O(void 0, void 0, void 0, function* () { var _b; return yield ((_b = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand)) === null || _b === void 0 ? void 0 : _b.lowerHand()); });
     /* @conditional-compile-remove(raise-hand) */
-    const onToggleRaiseHand = () => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onToggleRaiseHand = () => __awaiter$O(void 0, void 0, void 0, function* () {
         const raiseHandFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.RaiseHand);
         const localUserId = callClient.getState().userId;
         const isLocalRaisedHand = raiseHandFeature === null || raiseHandFeature === void 0 ? void 0 : raiseHandFeature.getRaisedHands().find((publishedState) => toFlatCommunicationIdentifier(publishedState.identifier) === toFlatCommunicationIdentifier(localUserId));
@@ -938,7 +938,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(reaction) */
-    const onReactionClicked = (reaction) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onReactionClicked = (reaction) => __awaiter$O(void 0, void 0, void 0, function* () {
         var _c;
         if (reaction === 'like' ||
             reaction === 'applause' ||
@@ -952,19 +952,19 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
         return;
     });
-    const onToggleMicrophone = () => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!call || !(_isInCall(call.state) || _isInLobbyOrConnecting(call.state))) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$N(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = (forEveryone) => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
+    const onStartScreenShare = () => __awaiter$O(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$O(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$O(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = (forEveryone) => __awaiter$O(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$N(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$O(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
+    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$O(void 0, void 0, void 0, function* () {
         var _d;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -980,7 +980,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const { view } = (_d = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _d !== void 0 ? _d : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1011,7 +1011,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
         return (createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view) ? { view: createViewResult === null || createViewResult === void 0 ? void 0 : createViewResult.view } : undefined;
     });
-    const onDisposeRemoteStreamView = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1032,7 +1032,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1049,7 +1049,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             callClient.disposeView(call.id, participant.identifier, remoteVideoStream);
         }
     });
-    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -1066,7 +1066,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$O(void 0, void 0, void 0, function* () {
         // If the user is currently in a call, dispose of the local stream view attached to that call.
         const callState = call && callClient.getState().calls[call.id];
         const localStream = callState === null || callState === void 0 ? void 0 : callState.localVideoStreams.find((item) => item.mediaStreamType === 'Video');
@@ -1079,18 +1079,18 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$O(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     const notImplemented = () => {
         throw new Error('Not implemented, cannot call a method from an abstract object');
     };
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$O(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onRemoveVideoBackgroundEffects = () => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$O(void 0, void 0, void 0, function* () {
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
         if (stream) {
@@ -1103,7 +1103,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$O(void 0, void 0, void 0, function* () {
         var _e;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
@@ -1117,7 +1117,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$O(void 0, void 0, void 0, function* () {
         var _f;
         const stream = (call === null || call === void 0 ? void 0 : call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video')) ||
             (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.getUnparentedVideoStreams().find((stream) => stream.mediaStreamType === 'Video'));
@@ -1131,34 +1131,34 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         }
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStartCaptions = (options) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onStartCaptions = (options) => __awaiter$O(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.startCaptions(options));
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStopCaptions = () => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onStopCaptions = () => __awaiter$O(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.stopCaptions());
     });
     /* @conditional-compile-remove(close-captions) */
-    const onSetSpokenLanguage = (language) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onSetSpokenLanguage = (language) => __awaiter$O(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield (captionsFeature === null || captionsFeature === void 0 ? void 0 : captionsFeature.setSpokenLanguage(language));
     });
     /* @conditional-compile-remove(close-captions) */
-    const onSetCaptionLanguage = (language) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onSetCaptionLanguage = (language) => __awaiter$O(void 0, void 0, void 0, function* () {
         const captionsFeature = call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Captions).captions;
         yield captionsFeature.setCaptionLanguage(language);
     });
     /* @conditional-compile-remove(end-of-call-survey) */
-    const onSubmitSurvey = (survey) => __awaiter$N(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
+    const onSubmitSurvey = (survey) => __awaiter$O(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.CallSurvey).submitSurvey(survey)); });
     /* @conditional-compile-remove(spotlight) */
-    const onStartSpotlight = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onStartSpotlight = (userId) => __awaiter$O(void 0, void 0, void 0, function* () {
         const participant = _toCommunicationIdentifier(userId);
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).startSpotlight([participant]));
     });
     /* @conditional-compile-remove(spotlight) */
-    const onStopSpotlight = (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
+    const onStopSpotlight = (userId) => __awaiter$O(void 0, void 0, void 0, function* () {
         const participant = _toCommunicationIdentifier(userId);
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.Spotlight).stopSpotlight([participant]));
     });
@@ -1221,7 +1221,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$M = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$N = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1249,7 +1249,7 @@ const createDefaultCallingHandlers = memoizeOne((...args) => {
             return callAgent === null || callAgent === void 0 ? void 0 : callAgent.startCall(participants, options);
         }, 
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$M(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$N(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isPhoneNumberIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant, options);
@@ -1257,7 +1257,7 @@ const createDefaultCallingHandlers = memoizeOne((...args) => {
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$N(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -1265,7 +1265,7 @@ const createDefaultCallingHandlers = memoizeOne((...args) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$L = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$M = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1297,7 +1297,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
         }, 
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$L(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$M(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             /* @conditional-compile-remove(teams-identity-support) */
             const threadId = options === null || options === void 0 ? void 0 : options.threadId;
@@ -1313,7 +1313,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne((callClient, callAgent, dev
             }
             /* @conditional-compile-remove(teams-identity-support) */
             call === null || call === void 0 ? void 0 : call.addParticipant(participant);
-        }), onRemoveParticipant: (userId) => __awaiter$L(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$M(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             if (communicationCommon.isCommunicationUserIdentifier(participant)) {
                 throw new Error('CommunicationIdentifier in Teams call is not supported!');
@@ -1404,7 +1404,7 @@ const getCaptionsSpeakerIdentifier = (captions) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$L = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -1453,13 +1453,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$K(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$L(this, void 0, void 0, function* () {
             // Device Manager always has a camera with '' name if there are no real camera devices available.
             // We don't want to show that in the UI.
             const realCameras = (yield this._deviceManager.getCameras()).filter((c) => !!c.name);
             this._context.setDeviceManagerCameras(dedupeById(realCameras));
         });
-        this.audioDevicesUpdated = () => __awaiter$K(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$L(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1860,7 +1860,7 @@ function convertFromSDKToRaisedHandState(raisedHand) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$K = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -2679,7 +2679,7 @@ let CallContext$2 = class CallContext {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$J(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$K(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -3133,7 +3133,7 @@ function _logStreamEvent(eventName, streamLogInfo, error) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3143,7 +3143,7 @@ var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$I(this, void 0, void 0, function* () {
+    return __awaiter$J(this, void 0, void 0, function* () {
         // we can only have 3 types of createView
         let streamEventType;
         // we will reuse these for local as well but we need to make sure the remote stream is passed in like before.
@@ -3272,7 +3272,7 @@ function createViewVideo(context, internalContext, callId, stream, participantId
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$I(this, void 0, void 0, function* () {
+    return __awaiter$J(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -3441,7 +3441,7 @@ function createView(context, internalContext, callId, participantId, stream, opt
         // Render LocalVideoStream that is not part of a Call
         // Because it is not part of the call we don't tee errors to state naturally (e.g. via a Call Client function such as startVideo).
         // We do not have a startLocalPreviewVideo function, so as a workaround we ensure any errors are propagated here.
-        return context.withAsyncErrorTeedToState(() => __awaiter$I(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$J(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
@@ -4051,7 +4051,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$I = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4071,14 +4071,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$I(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$I(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -4319,7 +4319,7 @@ const clearCallRelatedState = (context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$H = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4345,56 +4345,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -4434,7 +4434,7 @@ class ProxyTeamsCaptions {
     get(target, prop) {
         switch (prop) {
             case 'startCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$H(this, void 0, void 0, function* () {
                     var _a, _b;
                     this._context.setStartCaptionsInProgress(this._call.id, true);
                     const ret = yield target.startCaptions(...args);
@@ -4442,7 +4442,7 @@ class ProxyTeamsCaptions {
                     return ret;
                 }), 'Call.feature');
             case 'stopCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$H(this, void 0, void 0, function* () {
                     const ret = yield target.stopCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, false);
                     this._context.setStartCaptionsInProgress(this._call.id, false);
@@ -4450,13 +4450,13 @@ class ProxyTeamsCaptions {
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$H(this, void 0, void 0, function* () {
                     const ret = yield target.setSpokenLanguage(...args);
                     this._context.setSelectedSpokenLanguage(this._call.id, args[0]);
                     return ret;
                 }), 'Call.feature');
             case 'setCaptionLanguage':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$H(this, void 0, void 0, function* () {
                     const ret = yield target.setCaptionLanguage(...args);
                     this._context.setSelectedCaptionLanguage(this._call.id, args[0]);
                     return ret;
@@ -4504,7 +4504,7 @@ class ProxyTransferCallFeature {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$G = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4518,7 +4518,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -4756,7 +4756,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4771,7 +4771,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$E(this, void 0, void 0, function* () {
+                    return __awaiter$F(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -4888,7 +4888,7 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$E = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4910,7 +4910,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$D(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$E(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -4931,7 +4931,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$D = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4953,7 +4953,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$C(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$D(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -4966,7 +4966,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$C(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$D(this, void 0, void 0, function* () {
                     // createCallAgent will throw an exception if the previous callAgent was not disposed. If the previous
                     // callAgent was disposed then it would have unsubscribed to events so we can just create a new declarative
                     // callAgent if the createCallAgent succeeds.
@@ -4979,7 +4979,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$C(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$D(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
                     // DeviceManager and if it does not change we return the cached DeclarativeDeviceManager. If it does not we'll
                     // throw an error that indicate we need to fix this issue as our implementation has diverged from the SDK.
@@ -5008,7 +5008,7 @@ class ProxyCallClient {
                         /**
                          * add to this object if we want to proxy anything else off the DebugInfo feature object.
                          */
-                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$C(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$D(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -5069,7 +5069,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$C(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$D(void 0, void 0, void 0, function* () {
             const participantIdKind = participantId ? communicationCommon.getIdentifierKind(participantId) : undefined;
             const result = yield createView(context, internalContext, callId, participantIdKind, stream, options);
             // We only need to declaratify the VideoStreamRendererView object for remote participants. Because the updateScalingMode only needs to be called on remote participant stream views.
@@ -7618,7 +7618,7 @@ const _MentionPopover = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7804,7 +7804,7 @@ const TextFieldWithMention = (props) => {
         onSuggestionSelected,
         updateMentionSuggestions
     ]);
-    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$B(void 0, void 0, void 0, function* () {
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$C(void 0, void 0, void 0, function* () {
         var _a;
         let suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
         suggestions = suggestions.filter((suggestion) => suggestion.displayText.trim() !== '');
@@ -7981,7 +7981,7 @@ const TextFieldWithMention = (props) => {
             });
         }
     }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
-    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$B(void 0, void 0, void 0, function* () {
+    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$C(void 0, void 0, void 0, function* () {
         var _b;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
@@ -10534,27 +10534,6 @@ const MessageContentWithLiveAria = (props) => {
         props.content));
 };
 const MessageContentAsRichTextHTML = (props) => {
-    const { 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    // message is used only in useEffect that is under teams-inline-images-and-file-sharing cc
-    message, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    attachmentsMap, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    onFetchAttachments } = props;
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    React.useEffect(() => {
-        var _a;
-        if (!attachmentsMap || !onFetchAttachments) {
-            return;
-        }
-        const attachments = (_a = message.inlineImages) === null || _a === void 0 ? void 0 : _a.filter((inlinedImages) => {
-            return attachmentsMap[inlinedImages.id] === undefined;
-        });
-        if (attachments && attachments.length > 0) {
-            onFetchAttachments(attachments, message.messageId);
-        }
-    }, [message.inlineImages, message.messageId, onFetchAttachments, attachmentsMap]);
     return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
 };
 const MessageContentAsText = (props) => {
@@ -10630,10 +10609,6 @@ const processHtmlToReact = (props) => {
                         return metadata.id === domNode.attribs.id;
                     }))) {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
-                    // logic to check id in map/list
-                    if (props.attachmentsMap && domNode.attribs.id in props.attachmentsMap) {
-                        domNode.attribs.src = props.attachmentsMap[domNode.attribs.id];
-                    }
                     /* @conditional-compile-remove(image-gallery) */
                     const handleOnClick = () => {
                         props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);
@@ -10682,7 +10657,7 @@ const chatMessageActionMenuProps = (menuProps) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10725,7 +10700,7 @@ const _FileDownloadCards = (props) => {
             fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.filter(isFileSharingAttachment).length) !== null && _c !== void 0 ? _c : 0}`
         });
     }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$A(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$B(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -10777,7 +10752,7 @@ const useLocaleStringsTrampoline = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$A = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -10878,7 +10853,7 @@ const MessageBubble = (props) => {
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     /* @conditional-compile-remove(image-gallery) */
-    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$z(void 0, void 0, void 0, function* () {
+    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (onInlineImageClicked === undefined) {
             return;
         }
@@ -10892,10 +10867,6 @@ const MessageBubble = (props) => {
         }
         return (React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
             React.createElement(ChatMessageContent, { message: message, strings: strings, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                onFetchAttachments: props.onFetchAttachments, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                attachmentsMap: props.attachmentsMap, 
                 /* @conditional-compile-remove(mention) */
                 mentionDisplayOptions: props.mentionDisplayOptions, 
                 /* @conditional-compile-remove(image-gallery) */
@@ -10998,7 +10969,7 @@ const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11031,7 +11002,7 @@ const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$y(void 0, void 0, void 0, function* () {
+        return (React.createElement(ChatMessageComponentAsEditBox, { message: message, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$z(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
@@ -11047,12 +11018,8 @@ const ChatMessageComponent = (props) => {
         return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
             /* @conditional-compile-remove(date-time-customization) */
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
-            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-            onFetchAttachments: props.onFetchAttachments, 
             /* @conditional-compile-remove(image-gallery) */
             onInlineImageClicked: props.onInlineImageClicked, 
-            /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-            attachmentsMap: props.attachmentsMap, 
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
     }
@@ -11072,12 +11039,8 @@ const FluentChatMessageComponentWrapper = (props) => {
     const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    onFetchInlineAttachment, 
     /* @conditional-compile-remove(image-gallery) */
     onInlineImageClicked, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    inlineAttachments, 
     /* @conditional-compile-remove(mention) */
     mentionOptions, 
     /* @conditional-compile-remove(file-sharing) */
@@ -11092,7 +11055,6 @@ const FluentChatMessageComponentWrapper = (props) => {
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
     // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
-        var _a;
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
             return (React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { 
@@ -11102,12 +11064,8 @@ const FluentChatMessageComponentWrapper = (props) => {
                 strings: messageProps.strings, message: messageProps.message, userId: userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClick, 
                 /* @conditional-compile-remove(date-time-customization) */
                 onDisplayDateTimeString: onDisplayDateTimeString, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                onFetchAttachments: onFetchInlineAttachment, 
                 /* @conditional-compile-remove(image-gallery) */
                 onInlineImageClicked: onInlineImageClicked, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                attachmentsMap: (_a = inlineAttachments[messageProps.message.messageId]) !== null && _a !== void 0 ? _a : {}, 
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions, 
                 /* @conditional-compile-remove(file-sharing) */
@@ -11124,12 +11082,8 @@ const FluentChatMessageComponentWrapper = (props) => {
         userId,
         /* @conditional-compile-remove(date-time-customization) */
         onDisplayDateTimeString,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        onFetchInlineAttachment,
         /* @conditional-compile-remove(image-gallery) */
         onInlineImageClicked,
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        inlineAttachments,
         /* @conditional-compile-remove(mention) */
         mentionOptions,
         /* @conditional-compile-remove(file-sharing) */
@@ -11342,7 +11296,7 @@ const ChatMessageComponentWrapper = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11487,8 +11441,6 @@ const MessageThreadWrapper = (props) => {
     const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    onFetchAttachments, 
     /* @conditional-compile-remove(mention) */
     mentionOptions, 
     /* @conditional-compile-remove(image-gallery) */
@@ -11509,28 +11461,6 @@ const MessageThreadWrapper = (props) => {
     const [lastSendingChatMessage, setLastSendingChatMessage] = React.useState(undefined);
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = React.useState(undefined);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const [inlineAttachments, setInlineAttachments] = React.useState({});
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onFetchInlineAttachment = React.useCallback((attachments, messageId) => __awaiter$x(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments || attachments.length === 0) {
-            return;
-        }
-        const attachmentDownloadResult = yield onFetchAttachments(attachments);
-        if (attachmentDownloadResult.length > 0) {
-            setInlineAttachments((prev) => {
-                var _a;
-                // The new state should always be based on the previous one
-                // otherwise there can be issues with renders
-                const listOfAttachments = (_a = prev[messageId]) !== null && _a !== void 0 ? _a : {};
-                for (const result of attachmentDownloadResult) {
-                    const { attachmentId, blobUrl } = result;
-                    listOfAttachments[attachmentId] = blobUrl;
-                }
-                return Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments });
-            });
-        }
-    }), [onFetchAttachments]);
     const localeStrings = useLocale$1().strings.messageThread;
     const strings = React.useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     // it is required to use useState for messages
@@ -11542,7 +11472,7 @@ const MessageThreadWrapper = (props) => {
     const previousMessagesRef = React.useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = React.useState(undefined);
-    const onDeleteMessageCallback = React.useCallback((messageId) => __awaiter$x(void 0, void 0, void 0, function* () {
+    const onDeleteMessageCallback = React.useCallback((messageId) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
         }
@@ -11622,7 +11552,7 @@ const MessageThreadWrapper = (props) => {
      */
     const clientHeight = (_a = chatThreadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$x(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -11673,7 +11603,7 @@ const MessageThreadWrapper = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$x(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -11829,10 +11759,6 @@ const MessageThreadWrapper = (props) => {
                     return (React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount, 
                         /* @conditional-compile-remove(file-sharing) */
                         fileDownloadHandler: props.fileDownloadHandler, 
-                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                        onFetchInlineAttachment: onFetchInlineAttachment, 
-                        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                        inlineAttachments: inlineAttachments, 
                         /* @conditional-compile-remove(image-gallery) */
                         onInlineImageClicked: onInlineImageClicked, 
                         /* @conditional-compile-remove(date-time-customization) */
@@ -13146,22 +13072,25 @@ const playFrames$1 = react.memoizeFunction(() => react.keyframes({
 /**
  * @private
  */
-const reactionRenderingStyle = (args) => react.mergeStyles({
-    height: '100%',
-    width: '100%',
-    overflow: 'hidden',
-    animationName: playFrames$1(),
-    backgroundImage: args.backgroundImageUrl,
-    animationDuration: '5.12s',
-    animationTimingFunction: `steps(102)`,
-    backgroundSize: `cover`,
-    animationPlayState: 'running',
-    animationIterationCount: 'infinite',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundPosition: `center`,
-    transform: `scale(${84 < args.personaSize ? 84 / args.personaSize : args.personaSize / 84})`
-});
+const reactionRenderingStyle = (args) => {
+    const imageUrl = `url(${args.spriteImageUrl})`;
+    return react.mergeStyles({
+        height: '100%',
+        width: '100%',
+        overflow: 'hidden',
+        animationName: playFrames$1(),
+        backgroundImage: imageUrl,
+        animationDuration: '5.12s',
+        animationTimingFunction: `steps(102)`,
+        backgroundSize: `cover`,
+        animationPlayState: 'running',
+        animationIterationCount: 'infinite',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundPosition: `center`,
+        transform: `scale(${84 < args.personaSize ? 84 / args.personaSize : args.personaSize / 84})`
+    });
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -13172,18 +13101,6 @@ const getVideoTileOverrideColor = (isVideoRendered, theme, color) => {
     // when video is being rendered, the info has a grey-ish background, so no use of theme
     return { color: isVideoRendered ? react.DefaultPalette[color] : theme.palette[color] };
 };
-/* @conditional-compile-remove(reaction) */
-/**
- * Temporary mapping of paths for the reaction emoji resources.
- * @private
- */
-const reactionEmoji = new Map([
-    ['like', `url('/assets/reactions/likeEmoji.png')`],
-    ['applause', `url('/assets/reactions/clapEmoji.png')`],
-    ['heart', `url('/assets/reactions/heartEmoji.png')`],
-    ['laugh', `url('/assets/reactions/laughEmoji.png')`],
-    ['surprised', `url('/assets/reactions/surprisedEmoji.png')`]
-]);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -13280,99 +13197,345 @@ function useLongPress(props) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-// Coin max size is set to PersonaSize.size100
-const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
-// Coin min size is set PersonaSize.size32
-const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
-const DefaultPlaceholder = (props) => {
-    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
-    return (React.createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
-        React.createElement(react.Stack, { styles: defaultPersonaStyles$1 }, coinSize && (React.createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })))));
-};
-const defaultPersonaStyles$1 = { root: { margin: 'auto', maxHeight: '100%' } };
-/* @conditional-compile-remove(pinned-participants) */
-const videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };
-/* @conditional-compile-remove(pinned-participants) */
-const videoTileMoreMenuProps = {
-    directionalHint: react.DirectionalHint.topLeftEdge,
-    isBeakVisible: false,
-    styles: { container: { maxWidth: '8rem' } }
-};
-/* @conditional-compile-remove(pinned-participants) */
-const VideoTileMoreOptionsButton = (props) => {
-    const { contextualMenu, canShowContextMenuButton } = props;
-    if (!contextualMenu) {
-        return React.createElement(React.Fragment, null);
+/**
+ * Calculates the participants that should be rendered based on the list of dominant
+ * speakers and currently rendered participants in a call.
+ * @param args - SmartDominantSpeakerParticipantsArgs
+ * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
+ */
+const smartDominantSpeakerParticipants = (args) => {
+    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
+    // Don't apply any logic if total number of video streams is less than max dominant speakers.
+    if (participants.length <= maxDominantSpeakers) {
+        return participants;
     }
-    const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;
-    return (React.createElement(react.IconButton, { "data-ui-id": "video-tile-more-options-button", styles: moreButtonStyles, menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu), iconProps: { iconName: optionsIcon } }));
+    const participantsMap = participantsById(participants);
+    // Only use the Max allowed dominant speakers that exist in participants
+    const dominantSpeakerIds = dominantSpeakers.filter((id) => !!participantsMap[id]).slice(0, maxDominantSpeakers);
+    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
+    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
+    // Remove participants that are no longer dominant and replace them with new dominant speakers.
+    for (let index = 0; index < maxDominantSpeakers; index++) {
+        const newVisibleParticipantId = newVisibleParticipantIds[index];
+        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
+            const replacement = newDominantSpeakerIds.shift();
+            if (!replacement) {
+                break;
+            }
+            newVisibleParticipantIds[index] = replacement;
+        }
+    }
+    let newVisibleParticipants = newVisibleParticipantIds
+        .map((participantId) => participantsMap[participantId])
+        .filter((p) => p !== undefined);
+    const newVisibleParticipantIdsSet = new Set(newVisibleParticipantIds);
+    const remainingParticipants = participants.filter((p) => !newVisibleParticipantIdsSet.has(p.userId));
+    newVisibleParticipants = newVisibleParticipants.concat(remainingParticipants);
+    return newVisibleParticipants;
 };
 /**
- * A component to render the video stream for a single call participant.
- *
- * Use with {@link GridLayout} in a {@link VideoGallery}.
- *
- * @public
+ * maps the participants array to an object with userId as key
+ * @private
  */
-const VideoTile = (props) => {
-    const { children, displayName, initialsName, isMirrored, isMuted, 
-    /* @conditional-compile-remove(spotlight) */
-    isSpotlighted, 
-    /* @conditional-compile-remove(pinned-participants) */
-    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
-    /* @conditional-compile-remove(raise-hand) */
-    raisedHand, 
-    /* @conditional-compile-remove(reaction) */
-    reaction, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
-    /* @conditional-compile-remove(pinned-participants) */
-    contextualMenu } = props;
-    /* @conditional-compile-remove(pinned-participants) */
-    const [isHovered, setIsHovered] = React.useState(false);
-    /* @conditional-compile-remove(pinned-participants) */
-    const [isFocused, setIsFocused] = React.useState(false);
-    // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.
-    const [personaSize, setPersonaSize] = React.useState(1);
-    const videoTileRef = React.useRef(null);
-    const locale = useLocale$1();
-    const theme = useTheme();
-    const isVideoRendered = !!renderElement;
-    const observer = React.useRef(new ResizeObserver((entries) => {
-        const { width, height } = entries[0].contentRect;
-        const personaCalcSize = Math.min(width, height) / 3;
-        // we only want to set the persona size if it has changed
-        if (personaCalcSize !== personaSize) {
-            setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));
+const participantsById = (participants) => {
+    const response = {};
+    participants.forEach((p) => (response[p.userId] = p));
+    return response;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
+const DEFAULT_MAX_VIDEO_SREAMS = 4;
+/* @conditional-compile-remove(gallery-layouts) */
+const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
+const _useOrganizedParticipants = (props) => {
+    const visibleGridParticipants = React.useRef([]);
+    const visibleOverflowGalleryParticipants = React.useRef([]);
+    const { remoteParticipants = [], localParticipant, 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 = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
+            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
         }
-    }));
-    React.useLayoutEffect(() => {
-        if (videoTileRef.current) {
-            observer.current.observe(videoTileRef.current);
+        else {
+            return maxRemoteVideoStreams;
         }
-        const currentObserver = observer.current;
-        return () => currentObserver.disconnect();
-    }, [videoTileRef]);
-    /* @conditional-compile-remove(pinned-participants) */
-    const useLongPressProps = React.useMemo(() => {
-        return {
-            onLongPress: () => {
-                var _a;
-                (_a = props.onLongTouch) === null || _a === void 0 ? void 0 : _a.call(props);
-            },
-            touchEventsOnly: true
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.onLongTouch]);
-    /* @conditional-compile-remove(pinned-participants) */
-    const longPressHandlers = useLongPress(useLongPressProps);
-    const longPressHandlersTrampoline = React.useMemo(() => {
-        /* @conditional-compile-remove(pinned-participants) */
-        return longPressHandlers;
-    }, [
-        /* @conditional-compile-remove(pinned-participants) */
-        longPressHandlers
-    ]);
-    const hoverHandlers = React.useMemo(() => {
-        /* @conditional-compile-remove(pinned-participants) */
+    };
+    const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
+    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
+    const participantsToSortTrampoline = () => {
+        /* @conditional-compile-remove(gallery-layouts) */
+        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
+    };
+    visibleGridParticipants.current =
+        pinnedParticipantUserIds.length > 0 || isScreenShareActive
+            ? []
+            : smartDominantSpeakerParticipants({
+                participants: participantsToSortTrampoline(),
+                dominantSpeakers,
+                lastVisibleParticipants: visibleGridParticipants.current,
+                maxDominantSpeakers: maxRemoteVideoStreamsToUse
+            }).slice(0, maxRemoteVideoStreamsToUse);
+    /* @conditional-compile-remove(gallery-layouts) */
+    const dominantSpeakerToGrid = layout === 'speaker'
+        ? dominantSpeakers && dominantSpeakers[0]
+            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
+            : [visibleGridParticipants.current[0]]
+        : [];
+    /* @conditional-compile-remove(gallery-layouts) */
+    if (dominantSpeakerToGrid[0]) {
+        visibleGridParticipants.current = dominantSpeakerToGrid;
+    }
+    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
+    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' ));
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
+    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
+        participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
+        dominantSpeakers: dominantSpeakers,
+        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
+    });
+    const getGridParticipants = React.useCallback(() => {
+        if (isScreenShareActive) {
+            return [];
+        }
+        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
+        // we will use the max streams provided to the function to find the max participants that can go in the grid
+        // if there are less participants than max streams then we will use all participants including joining in the grid
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return visibleGridParticipants.current.length > 0
+            ? visibleGridParticipants.current
+            : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
+                ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)
+                : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive,
+        maxRemoteVideoStreamsToUse
+    ]);
+    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 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));
+        }
+        else {
+            // If screen sharing is not active, then assign all video tiles as grid tiles.
+            // If there are no video tiles, then assign audio tiles as grid tiles.
+            // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
+            // overflow should be empty if total participants including calling participants is less than max streams
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return visibleGridParticipants.current.length > 0
+                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
+                : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
+                    ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)
+                    : [];
+        }
+    }, [
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        isScreenShareActive,
+        localParticipant,
+        maxRemoteVideoStreamsToUse
+    ]);
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
+    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
+};
+/* @conditional-compile-remove(pinned-participants) */
+const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
+    var _a, _b;
+    // map remote participants by userId
+    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
+        map[remoteParticipant.userId] = remoteParticipant;
+        return map;
+    }, {});
+    const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
+    // declare focused participant user ids as spotlighted participants user ids followed by
+    // pinned participants user ids
+    const focusedParticipantUserIds = [
+        ...new Set(spotlightedParticipantUserIds.concat((_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : []))
+    ];
+    // get focused participants from map of remote participants in the order of the user ids
+    const focusedParticipants = [];
+    focusedParticipantUserIds.forEach((id) => {
+        const pinnedParticipant = remoteParticipantMap[id];
+        if (pinnedParticipant) {
+            focusedParticipants.push(pinnedParticipant);
+        }
+    });
+    // get unfocused participants by filtering out set of focused participant user ids from all remote participants
+    const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);
+    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
+    const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
+        // if there are pinned participants then we should only consider unpinned participants
+        remoteParticipants: unfocusedParticipants });
+    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
+    if (focusedParticipants.length === 0) {
+        return useOrganizedParticipantsResult;
+    }
+    return {
+        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
+        overflowGalleryParticipants: props.isScreenShareActive
+            ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+    };
+};
+const putVideoParticipantsFirst = (remoteParticipants) => {
+    const videoParticipants = [];
+    const audioParticipants = [];
+    remoteParticipants.forEach((p) => {
+        var _a;
+        if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
+            videoParticipants.push(p);
+        }
+        else {
+            audioParticipants.push(p);
+        }
+    });
+    const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
+    return remoteParticipantSortedByVideo;
+};
+/**
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
+ * @private
+ */
+const useOrganizedParticipants = (args) => {
+    /* @conditional-compile-remove(pinned-participants) */
+    return _useOrganizedParticipantsWithFocusedParticipants(args);
+};
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+const getEmojiResource = (reactionName, reactionResources) => {
+    var _a, _b, _c, _d, _e;
+    switch (reactionName) {
+        case 'like':
+            return (_a = reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url;
+        case 'heart':
+            return (_b = reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url;
+        case 'laugh':
+            return (_c = reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.url;
+        case 'applause':
+            return (_d = reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url;
+        case 'surprised':
+            return (_e = reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url;
+    }
+    return '';
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+// Coin max size is set to PersonaSize.size100
+const DEFAULT_PERSONA_MAX_SIZE_PX = 100;
+// Coin min size is set PersonaSize.size32
+const DEFAULT_PERSONA_MIN_SIZE_PX = 32;
+const DefaultPlaceholder = (props) => {
+    const { text, noVideoAvailableAriaLabel, coinSize, hidePersonaDetails } = props;
+    return (React.createElement(react.Stack, { className: react.mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+        React.createElement(react.Stack, { styles: defaultPersonaStyles$1 }, coinSize && (React.createElement(react.Persona, { coinSize: coinSize, hidePersonaDetails: hidePersonaDetails, text: text !== null && text !== void 0 ? text : '', initialsTextColor: "white", "aria-label": noVideoAvailableAriaLabel !== null && noVideoAvailableAriaLabel !== void 0 ? noVideoAvailableAriaLabel : '', showOverflowTooltip: false })))));
+};
+const defaultPersonaStyles$1 = { root: { margin: 'auto', maxHeight: '100%' } };
+/* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreMenuIconProps = { iconName: undefined, style: { display: 'none' } };
+/* @conditional-compile-remove(pinned-participants) */
+const videoTileMoreMenuProps = {
+    directionalHint: react.DirectionalHint.topLeftEdge,
+    isBeakVisible: false,
+    styles: { container: { maxWidth: '8rem' } }
+};
+/* @conditional-compile-remove(pinned-participants) */
+const VideoTileMoreOptionsButton = (props) => {
+    const { contextualMenu, canShowContextMenuButton } = props;
+    if (!contextualMenu) {
+        return React.createElement(React.Fragment, null);
+    }
+    const optionsIcon = canShowContextMenuButton ? 'VideoTileMoreOptions' : undefined;
+    return (React.createElement(react.IconButton, { "data-ui-id": "video-tile-more-options-button", styles: moreButtonStyles, menuIconProps: videoTileMoreMenuIconProps, menuProps: Object.assign(Object.assign({}, videoTileMoreMenuProps), contextualMenu), iconProps: { iconName: optionsIcon } }));
+};
+/**
+ * A component to render the video stream for a single call participant.
+ *
+ * Use with {@link GridLayout} in a {@link VideoGallery}.
+ *
+ * @public
+ */
+const VideoTile = (props) => {
+    const { children, displayName, initialsName, isMirrored, isMuted, 
+    /* @conditional-compile-remove(spotlight) */
+    isSpotlighted, 
+    /* @conditional-compile-remove(pinned-participants) */
+    isPinned, onRenderPlaceholder, renderElement, showLabel = true, showMuteIndicator = true, styles, userId, noVideoAvailableAriaLabel, isSpeaking, 
+    /* @conditional-compile-remove(raise-hand) */
+    raisedHand, 
+    /* @conditional-compile-remove(reaction) */
+    reaction, personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX, personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX, 
+    /* @conditional-compile-remove(pinned-participants) */
+    contextualMenu, 
+    /* @conditional-compile-remove(reaction) */
+    reactionResources } = props;
+    /* @conditional-compile-remove(pinned-participants) */
+    const [isHovered, setIsHovered] = React.useState(false);
+    /* @conditional-compile-remove(pinned-participants) */
+    const [isFocused, setIsFocused] = React.useState(false);
+    // need to set a default otherwise the resizeObserver will get stuck in an infinite loop.
+    const [personaSize, setPersonaSize] = React.useState(1);
+    /* @conditional-compile-remove(reaction) */
+    const [isValidImageSource, setIsValidImageSource] = React.useState(false);
+    const videoTileRef = React.useRef(null);
+    const locale = useLocale$1();
+    const theme = useTheme();
+    const isVideoRendered = !!renderElement;
+    const observer = React.useRef(new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        const personaCalcSize = Math.min(width, height) / 3;
+        // we only want to set the persona size if it has changed
+        if (personaCalcSize !== personaSize) {
+            setPersonaSize(Math.max(Math.min(personaCalcSize, personaMaxSize), personaMinSize));
+        }
+    }));
+    React.useLayoutEffect(() => {
+        if (videoTileRef.current) {
+            observer.current.observe(videoTileRef.current);
+        }
+        const currentObserver = observer.current;
+        return () => currentObserver.disconnect();
+    }, [videoTileRef]);
+    /* @conditional-compile-remove(pinned-participants) */
+    const useLongPressProps = React.useMemo(() => {
+        return {
+            onLongPress: () => {
+                var _a;
+                (_a = props.onLongTouch) === null || _a === void 0 ? void 0 : _a.call(props);
+            },
+            touchEventsOnly: true
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.onLongTouch]);
+    /* @conditional-compile-remove(pinned-participants) */
+    const longPressHandlers = useLongPress(useLongPressProps);
+    const longPressHandlersTrampoline = React.useMemo(() => {
+        /* @conditional-compile-remove(pinned-participants) */
+        return longPressHandlers;
+    }, [
+        /* @conditional-compile-remove(pinned-participants) */
+        longPressHandlers
+    ]);
+    const hoverHandlers = React.useMemo(() => {
+        /* @conditional-compile-remove(pinned-participants) */
         return {
             onMouseEnter: () => setIsHovered(true),
             onMouseLeave: () => setIsHovered(false),
@@ -13401,7 +13564,9 @@ const VideoTile = (props) => {
     /* @conditional-compile-remove(raise-hand) */
     raisedHandBackgroundColor = callingPalette.raiseHandGold;
     /* @conditional-compile-remove(reaction) */
-    const backgroundImageUrl = reaction !== undefined ? reactionEmoji.get(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType) : '';
+    const backgroundImageUrl = reaction !== undefined && reactionResources !== undefined
+        ? getEmojiResource(reaction === null || reaction === void 0 ? void 0 : reaction.reactionType, reactionResources)
+        : '';
     /* @conditional-compile-remove(reaction) */
     const currentTimestamp = new Date();
     /* @conditional-compile-remove(reaction) */
@@ -13409,12 +13574,25 @@ const VideoTile = (props) => {
     /* @conditional-compile-remove(reaction) */
     const receivedUnixTimestamp = reaction ? Math.floor(reaction.receivedAt.getTime() / 1000) : undefined;
     /* @conditional-compile-remove(reaction) */
-    const canRenderReaction = receivedUnixTimestamp ? currentUnixTimeStamp - receivedUnixTimestamp < 3000 : false;
+    const canRenderReaction = (receivedUnixTimestamp ? currentUnixTimeStamp - receivedUnixTimestamp < 3000 : false) &&
+        backgroundImageUrl !== undefined;
+    /* @conditional-compile-remove(reaction) */
+    React.useEffect(() => {
+        if (!backgroundImageUrl || backgroundImageUrl.length === 0) {
+            return;
+        }
+        fetch(`${backgroundImageUrl}`)
+            .then((res) => setIsValidImageSource(res.ok))
+            .catch((warning) => console.warn(`Sprite image for animation rendering failed with warning: ${warning}`));
+        return () => setIsValidImageSource(false);
+    }, [backgroundImageUrl]);
+    /* @conditional-compile-remove(reaction) */
+    const spriteImageUrl = backgroundImageUrl !== undefined ? backgroundImageUrl : '';
     /* @conditional-compile-remove(reaction) */
     const reactionContainerStyles = React.useCallback(() => reactionRenderingStyle({
-        backgroundImageUrl,
+        spriteImageUrl,
         personaSize
-    }), [backgroundImageUrl, personaSize]);
+    }), [spriteImageUrl, personaSize]);
     return (React.createElement(react.Stack, Object.assign({ "data-ui-id": ids.videoTile, className: react.mergeStyles(rootStyles, {
             background: theme.palette.neutralLighter,
             borderRadius: theme.effects.roundedCorner4
@@ -13437,7 +13615,7 @@ const VideoTile = (props) => {
                         : 1
                 }) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React.createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
             /* @conditional-compile-remove(reaction) */
-            canRenderReaction && (React.createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, {
+            canRenderReaction && isValidImageSource && (React.createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -13501,7 +13679,8 @@ const _RemoteVideoTile = React.memo((props) => {
     var _a;
     const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
     isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, onRenderAvatar, showMuteIndicator, remoteParticipant, participantState, menuKind, isPinned, onPinParticipant, onUnpinParticipant, 
-    /* @conditional-compile-remove(spotlight) */ isSpotlighted, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings } = props;
+    /* @conditional-compile-remove(spotlight) */ isSpotlighted, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, strings, 
+    /* @conditional-compile-remove(reaction) */ reactionResources } = props;
     const remoteVideoStreamProps = React.useMemo(() => ({
         isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
         isScreenSharingOn,
@@ -13592,7 +13771,9 @@ const _RemoteVideoTile = React.memo((props) => {
             /* @conditional-compile-remove(pinned-participants) */
             onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), 
             /* @conditional-compile-remove(spotlight) */
-            isSpotlighted: isSpotlighted })),
+            isSpotlighted: isSpotlighted, 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources })),
         drawerMenuItemProps.length > 0 && (React.createElement(react.Layer, { hostId: props.drawerMenuHostId },
             React.createElement(react.Stack, { styles: drawerMenuWrapperStyles },
                 React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps, heading: remoteParticipant.displayName }))))));
@@ -13794,7 +13975,7 @@ const localVideoTileContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -13811,7 +13992,7 @@ const LocalVideoCameraCycleButton = (props) => {
     const { cameras, selectedCamera, onSelectCamera, label, ariaDescription, size } = props;
     const theme = react.useTheme();
     const [waitForCamera, setWaitForCamera] = React.useState(false);
-    const onChangeCameraClick = React.useCallback((device) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onChangeCameraClick = React.useCallback((device) => __awaiter$x(void 0, void 0, void 0, function* () {
         // Throttle changing camera to prevent too many callbacks
         if (onSelectCamera) {
             setWaitForCamera(true);
@@ -13848,7 +14029,9 @@ const _LocalVideoTile = React.memo((props) => {
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
-    isSpotlighted } = props;
+    isSpotlighted, 
+    /* @conditional-compile-remove(reaction) */
+    reactionResources } = props;
     /* @conditional-compile-remove(spotlight) */
     const theme = useTheme();
     const localVideoStreamProps = React.useMemo(() => ({
@@ -13888,275 +14071,55 @@ const _LocalVideoTile = React.memo((props) => {
             React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }), /* @conditional-compile-remove(spotlight) */
             isSpotlighted && spotlightBorder));
     }, [
-        localVideoCameraCycleButtonProps,
-        localVideoCameraSwitcherLabel,
-        localVideoSelectedDescription,
-        renderElement,
-        showCameraSwitcherInLocalPreview,
-        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
-        /* @conditional-compile-remove(spotlight) */ spotlightBorder
-    ]);
-    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, 
-            /* @conditional-compile-remove(raise-hand) */
-            raisedHand: raisedHand, 
-            /* @conditional-compile-remove(reaction) */
-            reaction: reaction, 
-            /* @conditional-compile-remove(spotlight) */
-            isSpotlighted: isSpotlighted }), /* @conditional-compile-remove(spotlight) */
-        isSpotlighted && spotlightBorder));
-});
-const FloatingLocalCameraCycleButton = (props) => {
-    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
-    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
-        localVideoSelectedDescription &&
-        _formatString(localVideoSelectedDescription, {
-            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
-        });
-    return (React.createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
-        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
-        (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 }))));
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const rootLayoutStyle$1 = {
-    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const videoGalleryLayoutGap = {
-    childrenGap: '0.5rem'
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * Calculates the participants that should be rendered based on the list of dominant
- * speakers and currently rendered participants in a call.
- * @param args - SmartDominantSpeakerParticipantsArgs
- * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
- */
-const smartDominantSpeakerParticipants = (args) => {
-    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
-    // Don't apply any logic if total number of video streams is less than max dominant speakers.
-    if (participants.length <= maxDominantSpeakers) {
-        return participants;
-    }
-    const participantsMap = participantsById(participants);
-    // Only use the Max allowed dominant speakers that exist in participants
-    const dominantSpeakerIds = dominantSpeakers.filter((id) => !!participantsMap[id]).slice(0, maxDominantSpeakers);
-    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
-    const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
-    // Remove participants that are no longer dominant and replace them with new dominant speakers.
-    for (let index = 0; index < maxDominantSpeakers; index++) {
-        const newVisibleParticipantId = newVisibleParticipantIds[index];
-        if (newVisibleParticipantId === undefined || !dominantSpeakerIds.includes(newVisibleParticipantId)) {
-            const replacement = newDominantSpeakerIds.shift();
-            if (!replacement) {
-                break;
-            }
-            newVisibleParticipantIds[index] = replacement;
-        }
-    }
-    let newVisibleParticipants = newVisibleParticipantIds
-        .map((participantId) => participantsMap[participantId])
-        .filter((p) => p !== undefined);
-    const newVisibleParticipantIdsSet = new Set(newVisibleParticipantIds);
-    const remainingParticipants = participants.filter((p) => !newVisibleParticipantIdsSet.has(p.userId));
-    newVisibleParticipants = newVisibleParticipants.concat(remainingParticipants);
-    return newVisibleParticipants;
-};
-/**
- * maps the participants array to an object with userId as key
- * @private
- */
-const participantsById = (participants) => {
-    const response = {};
-    participants.forEach((p) => (response[p.userId] = p));
-    return response;
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
-const DEFAULT_MAX_VIDEO_SREAMS = 4;
-/* @conditional-compile-remove(gallery-layouts) */
-const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
-const _useOrganizedParticipants = (props) => {
-    const visibleGridParticipants = React.useRef([]);
-    const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], localParticipant, 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 = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
-        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
-            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
-        }
-        else {
-            return maxRemoteVideoStreams;
-        }
-    };
-    const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
-    const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const participantsToSortTrampoline = () => {
-        /* @conditional-compile-remove(gallery-layouts) */
-        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
-    };
-    visibleGridParticipants.current =
-        pinnedParticipantUserIds.length > 0 || isScreenShareActive
-            ? []
-            : smartDominantSpeakerParticipants({
-                participants: participantsToSortTrampoline(),
-                dominantSpeakers,
-                lastVisibleParticipants: visibleGridParticipants.current,
-                maxDominantSpeakers: maxRemoteVideoStreamsToUse
-            }).slice(0, maxRemoteVideoStreamsToUse);
-    /* @conditional-compile-remove(gallery-layouts) */
-    const dominantSpeakerToGrid = layout === 'speaker'
-        ? dominantSpeakers && dominantSpeakers[0]
-            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
-            : [visibleGridParticipants.current[0]]
-        : [];
-    /* @conditional-compile-remove(gallery-layouts) */
-    if (dominantSpeakerToGrid[0]) {
-        visibleGridParticipants.current = dominantSpeakerToGrid;
-    }
-    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
-    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' ));
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
-        dominantSpeakers: dominantSpeakers,
-        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
-        maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
-    });
-    const getGridParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            return [];
-        }
-        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
-        // we will use the max streams provided to the function to find the max participants that can go in the grid
-        // if there are less participants than max streams then we will use all participants including joining in the grid
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0
-            ? visibleGridParticipants.current
-            : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
-                ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)
-                : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive,
-        maxRemoteVideoStreamsToUse
-    ]);
-    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 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));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
-            // overflow should be empty if total participants including calling participants is less than max streams
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.length > 0
-                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
-                : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
-                    ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)
-                    : [];
-        }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive,
-        localParticipant,
-        maxRemoteVideoStreamsToUse
+        localVideoCameraCycleButtonProps,
+        localVideoCameraSwitcherLabel,
+        localVideoSelectedDescription,
+        renderElement,
+        showCameraSwitcherInLocalPreview,
+        /* @conditional-compile-remove(spotlight) */ isSpotlighted,
+        /* @conditional-compile-remove(spotlight) */ spotlightBorder
     ]);
-    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
-    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
-};
-/* @conditional-compile-remove(pinned-participants) */
-const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
-    var _a, _b;
-    // map remote participants by userId
-    const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
-        map[remoteParticipant.userId] = remoteParticipant;
-        return map;
-    }, {});
-    const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
-    // declare focused participant user ids as spotlighted participants user ids followed by
-    // pinned participants user ids
-    const focusedParticipantUserIds = [
-        ...new Set(spotlightedParticipantUserIds.concat((_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : []))
-    ];
-    // get focused participants from map of remote participants in the order of the user ids
-    const focusedParticipants = [];
-    focusedParticipantUserIds.forEach((id) => {
-        const pinnedParticipant = remoteParticipantMap[id];
-        if (pinnedParticipant) {
-            focusedParticipants.push(pinnedParticipant);
-        }
-    });
-    // get unfocused participants by filtering out set of focused participant user ids from all remote participants
-    const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);
-    const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
-    const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
-        // if there are pinned participants then we should only consider unpinned participants
-        remoteParticipants: unfocusedParticipants });
-    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
-    if (focusedParticipants.length === 0) {
-        return useOrganizedParticipantsResult;
-    }
-    return {
-        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
-        overflowGalleryParticipants: props.isScreenShareActive
-            ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-    };
+    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, 
+            /* @conditional-compile-remove(raise-hand) */
+            raisedHand: raisedHand, 
+            /* @conditional-compile-remove(reaction) */
+            reaction: reaction, 
+            /* @conditional-compile-remove(spotlight) */
+            isSpotlighted: isSpotlighted, 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources }), /* @conditional-compile-remove(spotlight) */
+        isSpotlighted && spotlightBorder));
+});
+const FloatingLocalCameraCycleButton = (props) => {
+    const { showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription } = props;
+    const ariaDescription = (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.selectedCamera) &&
+        localVideoSelectedDescription &&
+        _formatString(localVideoSelectedDescription, {
+            cameraName: localVideoCameraCycleButtonProps.selectedCamera.name
+        });
+    return (React.createElement(react.Stack, { horizontalAlign: "end" }, showCameraSwitcherInLocalPreview &&
+        (localVideoCameraCycleButtonProps === null || localVideoCameraCycleButtonProps === void 0 ? void 0 : localVideoCameraCycleButtonProps.cameras) !== undefined &&
+        (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 }))));
 };
-const putVideoParticipantsFirst = (remoteParticipants) => {
-    const videoParticipants = [];
-    const audioParticipants = [];
-    remoteParticipants.forEach((p) => {
-        var _a;
-        if ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) {
-            videoParticipants.push(p);
-        }
-        else {
-            audioParticipants.push(p);
-        }
-    });
-    const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
-    return remoteParticipantSortedByVideo;
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const rootLayoutStyle$1 = {
+    root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /**
- * Hook to determine which participants should be in grid and overflow gallery and their order respectively
  * @private
  */
-const useOrganizedParticipants = (args) => {
-    /* @conditional-compile-remove(pinned-participants) */
-    return _useOrganizedParticipantsWithFocusedParticipants(args);
+const videoGalleryLayoutGap = {
+    childrenGap: '0.5rem'
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -16233,7 +16196,9 @@ const VideoGallery = (props) => {
     /* @conditional-compile-remove(rooms) */
     localVideoTileSize = 'followDeviceOrientation', 
     /* @conditional-compile-remove(spotlight) */
-    spotlightedParticipants } = props;
+    spotlightedParticipants, 
+    /* @conditional-compile-remove(reaction) */
+    reactionResources } = props;
     const ids = useIdentifiers();
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.videoGallery;
@@ -16307,7 +16272,9 @@ const VideoGallery = (props) => {
                 /* @conditional-compile-remove(reaction) */
                 reaction: localParticipant.reaction, 
                 /* @conditional-compile-remove(spotlight) */
-                isSpotlighted: isSpotlighted })));
+                isSpotlighted: isSpotlighted, 
+                /* @conditional-compile-remove(reaction) */
+                reactionResources: reactionResources })));
     }, [
         isNarrow,
         localParticipant,
@@ -16332,7 +16299,9 @@ const VideoGallery = (props) => {
         layout,
         showLocalVideoTileLabel,
         /* @conditional-compile-remove(spotlight) */
-        spotlightedParticipants
+        spotlightedParticipants,
+        /* @conditional-compile-remove(reaction) */
+        reactionResources
     ]);
     /* @conditional-compile-remove(pinned-participants) */
     const onPinParticipant = React.useCallback((userId) => {
@@ -16415,7 +16384,9 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(pinned-participants) */
             toggleAnnouncerString: toggleAnnouncerString, 
             /* @conditional-compile-remove(spotlight) */
-            isSpotlighted: isSpotlighted }));
+            isSpotlighted: isSpotlighted, 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources }));
     }, [
         onCreateRemoteStreamView,
         onDisposeRemoteVideoStreamView,
@@ -16432,7 +16403,8 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(pinned-participants) */ onUnpinParticipant,
         /* @conditional-compile-remove(pinned-participants) */ toggleAnnouncerString,
         /* @conditional-compile-remove(pinned-participants) */ onUpdateScalingMode,
-        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants
+        /* @conditional-compile-remove(spotlight) */ spotlightedParticipants,
+        /* @conditional-compile-remove(reaction) */ reactionResources
     ]);
     const screenShareParticipant = remoteParticipants.find((participant) => { var _a; return (_a = participant.screenShareStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     const localScreenShareStreamComponent = React.createElement(LocalScreenShare, { localParticipant: localParticipant });
@@ -16917,7 +16889,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -16955,7 +16927,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$w(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -16969,7 +16941,7 @@ const CameraButton = (props) => {
             }
         }
     }), [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);
-    const onChangeCameraClick = React.useCallback((device) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const onChangeCameraClick = React.useCallback((device) => __awaiter$w(void 0, void 0, void 0, function* () {
         // Throttle changing camera to prevent too many callbacks
         if (onSelectCamera) {
             setWaitForCamera(true);
@@ -17140,7 +17112,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -17181,7 +17153,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$v(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -17702,12 +17674,13 @@ const playFrames = react.memoizeFunction(() => react.keyframes({
  * @private
  */
 const emojiStyles = (backgroundImage, animationPlayState) => {
+    const imageResourceUrl = `url(${backgroundImage})`;
     return {
         display: 'flex',
         flexDirection: 'column',
         height: '100%',
         width: '100%',
-        backgroundImage: backgroundImage,
+        backgroundImage: imageResourceUrl,
         animationName: playFrames(),
         animationDuration: '8.12s',
         animationTimingFunction: `steps(102)`,
@@ -17765,7 +17738,7 @@ const reactionToolTipHostStyle = () => {
  * @beta
  */
 const ReactionButton = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g;
     const localeStrings = useLocale$1().strings.reactionButton;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     const theme = react.useTheme();
@@ -17780,31 +17753,41 @@ const ReactionButton = (props) => {
         ['applause', strings.applauseReactionTooltipContent],
         ['surprised', strings.surprisedReactionTooltipContent]
     ]);
+    const emojiResource = new Map([
+        ['like', (_a = props.reactionResources.likeReaction) === null || _a === void 0 ? void 0 : _a.url],
+        ['heart', (_b = props.reactionResources.heartReaction) === null || _b === void 0 ? void 0 : _b.url],
+        ['laugh', (_c = props.reactionResources.laughReaction) === null || _c === void 0 ? void 0 : _c.url],
+        ['applause', (_d = props.reactionResources.applauseReaction) === null || _d === void 0 ? void 0 : _d.url],
+        ['surprised', (_e = props.reactionResources.surprisedReaction) === null || _e === void 0 ? void 0 : _e.url]
+    ]);
     const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
     const calloutProps = {
         gapSpace: 4,
         styles: calloutStyle,
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
-    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
-        React.createElement(react.IconButton, { key: index, onClick: () => {
-                props.onReactionClicked(emoji);
-                setIsHoveredMap((prevMap) => {
+    const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => {
+        const resourceUrl = emojiResource.get(emoji);
+        return (React.createElement(react.TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
+            React.createElement(react.IconButton, { key: index, onClick: () => {
+                    props.onReactionClicked(emoji);
+                    setIsHoveredMap((prevMap) => {
+                        return new Map(prevMap).set(emoji, false);
+                    });
+                    dismissMenu();
+                }, style: emojiStyles(resourceUrl ? resourceUrl : '', isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
+                    return new Map(prevMap).set(emoji, true);
+                }), onMouseLeave: () => setIsHoveredMap((prevMap) => {
                     return new Map(prevMap).set(emoji, false);
-                });
-                dismissMenu();
-            }, style: emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
-                return new Map(prevMap).set(emoji, true);
-            }), onMouseLeave: () => setIsHoveredMap((prevMap) => {
-                return new Map(prevMap).set(emoji, false);
-            }) }))))));
+                }) })));
+    })));
     const emojiList = [
         { key: 'reactions', itemType: react.ContextualMenuItemType.Normal, onRender: renderEmoji }
     ];
     return (React.createElement(ControlBarButton, Object.assign({}, props, { className: react.mergeStyles(styles, props.styles), menuProps: {
             shouldFocusOnMount: true,
             items: emojiList
-        }, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled })));
+        }, onRenderIcon: (_f = props.onRenderIcon) !== null && _f !== void 0 ? _f : onRenderIcon, strings: strings, labelKey: (_g = props.labelKey) !== null && _g !== void 0 ? _g : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled })));
 };
 /* @conditional-compile-remove(reaction) */
 const reactionButtonStyles = (theme) => ({
@@ -18356,7 +18339,7 @@ const dtmfFrequencies = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -18400,10 +18383,10 @@ const DialpadButton = (props) => {
     const [buttonPressed, setButtonPressed] = React.useState(false);
     const dtmfToneSound = React.useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
     const useLongPressProps = React.useMemo(() => ({
-        onClick: () => __awaiter$t(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$u(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$t(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$u(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: isMobile
@@ -19548,7 +19531,7 @@ const _spokenLanguageToCaptionLanguage = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -19591,7 +19574,7 @@ const _CaptionsSettingsModal = (props) => {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
-    const onConfirm = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
+    const onConfirm = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
         const spokenLanguageCode = selectedSpokenLanguage.key.toString();
         const captionLanguageCode = selectedCaptionLanguage.key.toString();
         if (isCaptionsFeatureActive) {
@@ -20679,7 +20662,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20702,35 +20685,35 @@ const createDefaultChatHandlers = memoizeOne((chatClient, chatThreadClient) => {
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$s(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, options) => __awaiter$s(void 0, void 0, void 0, function* () {
             const updatedMetadata = (options === null || options === void 0 ? void 0 : options.metadata) ? Object.assign({}, options.metadata) : {};
             updatedMetadata.fileSharingMetadata = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachmentMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$r(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$s(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$r(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$s(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$r(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$s(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$r(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$s(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$r(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$s(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$r(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$s(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -21166,24 +21149,47 @@ const extractAttachmentUrl = (attachment) => {
     return attachment.attachmentType === 'file' && attachment.previewUrl ? attachment.previewUrl : attachment.url || '';
 };
 const processChatMessageContent = (message) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
+    let content = (_a = message.content) === null || _a === void 0 ? void 0 : _a.message;
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    if (sanitizedMessageContentType(message.type).includes('html') && ((_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments)) {
-        const attachments = (_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments;
+    if (content && ((_b = message.content) === null || _b === void 0 ? void 0 : _b.attachments) && sanitizedMessageContentType(message.type).includes('html')) {
+        const attachments = (_c = message.content) === null || _c === void 0 ? void 0 : _c.attachments;
+        // Fill in the src here
+        const document = new DOMParser().parseFromString(content, 'text/html');
+        document.querySelectorAll('img').forEach((img) => {
+            var _a, _b, _c;
+            const attachmentPreviewUrl = (_a = attachments.find((attachment) => attachment.id === img.id)) === null || _a === void 0 ? void 0 : _a.previewUrl;
+            if (attachmentPreviewUrl) {
+                const src = (_c = (_b = message.resourceCache) === null || _b === void 0 ? void 0 : _b[attachmentPreviewUrl]) !== null && _c !== void 0 ? _c : '';
+                img.src = src;
+            }
+        });
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        content = document.documentElement.innerHTML;
         const teamsImageHtmlContent = attachments
-            .filter((attachment) => { var _a, _b; return attachment.attachmentType === 'image' && !((_b = (_a = message.content) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.includes(attachment.id)); })
-            .map((attachment) => generateImageAttachmentImgHtml(attachment))
+            .filter((attachment) => {
+            var _a, _b;
+            return attachment.attachmentType === 'image' &&
+                attachment.previewUrl !== undefined &&
+                !((_b = (_a = message.content) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.includes(attachment.id));
+        })
+            .map((attachment) => generateImageAttachmentImgHtml(message, attachment))
             .join('');
         if (teamsImageHtmlContent) {
-            return ((_d = (_c = message.content) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : '') + teamsImageHtmlContent;
+            return (content !== null && content !== void 0 ? content : '') + teamsImageHtmlContent;
         }
     }
-    return (_e = message.content) === null || _e === void 0 ? void 0 : _e.message;
+    return content;
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-const generateImageAttachmentImgHtml = (attachment) => {
-    const contentType = extractAttachmentContentTypeFromName(attachment.name);
-    return `\r\n<p><img alt="image" src="" itemscope="${contentType}" id="${attachment.id}"></p>`;
+const generateImageAttachmentImgHtml = (message, attachment) => {
+    var _a, _b;
+    if (attachment.previewUrl !== undefined) {
+        const contentType = extractAttachmentContentTypeFromName(attachment.name);
+        const src = (_b = (_a = message.resourceCache) === null || _a === void 0 ? void 0 : _a[attachment.previewUrl]) !== null && _b !== void 0 ? _b : '';
+        return `\r\n<p><img alt="image" src="${src}" itemscope="${contentType}" id="${attachment.id}"></p>`;
+    }
+    return '';
 };
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 const extractAttachmentContentTypeFromName = (name) => {
@@ -21637,6 +21643,131 @@ const Constants = {
  */
 const chatStatefulLogger = logger.createClientLogger('communication-react:chat-stateful');
 
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+/**
+ * @private
+ */
+class ResourceDownloadQueue {
+    constructor(context, credential) {
+        this._messagesNeedingResourceRetrieval = [];
+        this.isActive = false;
+        this._context = context;
+        this._credential = credential;
+    }
+    containsMessageWithSameAttachments(message) {
+        var _a, _b, _c;
+        let contains = false;
+        const incomingAttachment = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
+        if (incomingAttachment) {
+            for (const m of this._messagesNeedingResourceRetrieval) {
+                const existingAttachment = (_c = (_b = m.content) === null || _b === void 0 ? void 0 : _b.attachments) !== null && _c !== void 0 ? _c : [];
+                contains = incomingAttachment.every((element, index) => element === existingAttachment[index]);
+                if (contains) {
+                    break;
+                }
+            }
+        }
+        return contains;
+    }
+    addMessage(message) {
+        // make a copy of message and add to queue
+        const copy = Object.assign({}, message);
+        this._messagesNeedingResourceRetrieval.push(copy);
+    }
+    startQueue(threadId, operation) {
+        return __awaiter$r(this, void 0, void 0, function* () {
+            if (this.isActive) {
+                return;
+            }
+            while (this._messagesNeedingResourceRetrieval.length > 0) {
+                this.isActive = true;
+                const message = this._messagesNeedingResourceRetrieval.shift();
+                if (!message) {
+                    this.isActive = false;
+                    continue;
+                }
+                try {
+                    const newMessage = yield operation(message, this._credential);
+                    if (newMessage) {
+                        this.isActive = false;
+                        this._context.setChatMessage(threadId, newMessage);
+                    }
+                }
+                catch (error) {
+                    console.log('Downloading Resource error: ', error);
+                }
+            }
+        });
+    }
+}
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+/**
+ * @private
+ */
+const requestAttachments = (message, credential) => __awaiter$r(void 0, void 0, void 0, function* () {
+    var _a;
+    const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
+    if (message.type === 'html' && attachments) {
+        if (message.resourceCache === undefined) {
+            message.resourceCache = {};
+        }
+        for (const attachment of attachments) {
+            if (attachment.previewUrl) {
+                const previewUrl = attachment.previewUrl;
+                try {
+                    const src = yield fetchImageSource(previewUrl, credential);
+                    message.resourceCache[previewUrl] = src;
+                }
+                catch (error) {
+                    throw new ResourceDownloadError(message);
+                }
+            }
+        }
+    }
+    return message;
+});
+/**
+ * @private
+ */
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+const fetchImageSource = (src, credential) => __awaiter$r(void 0, void 0, void 0, function* () {
+    function fetchWithAuthentication(url, token) {
+        return __awaiter$r(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 accessToken = yield credential.getToken();
+    const response = yield fetchWithAuthentication(src, accessToken.token);
+    const blob = yield response.blob();
+    return URL.createObjectURL(blob);
+});
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+/**
+ * @private
+ */
+class ResourceDownloadError extends Error {
+    constructor(chatMessageWithStatus) {
+        super();
+        this.chatMessageWithStatus = chatMessageWithStatus;
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -21655,7 +21786,8 @@ immer.enablePatches();
  * @private
  */
 let ChatContext$1 = class ChatContext {
-    constructor(maxListeners) {
+    constructor(maxListeners, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ credential) {
         this._state = {
             userId: { id: '' },
             displayName: '',
@@ -21664,8 +21796,14 @@ let ChatContext$1 = class ChatContext {
         };
         this._batchMode = false;
         this.typingIndicatorInterval = undefined;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this._messageQueue = undefined;
         this._logger = logger.createClientLogger('communication-react:chat-context');
         this._emitter = new EventEmitter();
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        if (credential) {
+            this._messageQueue = new ResourceDownloadQueue(this, credential);
+        }
         if (maxListeners) {
             this._emitter.setMaxListeners(maxListeners);
         }
@@ -21887,6 +22025,8 @@ let ChatContext$1 = class ChatContext {
         this.startTypingIndicatorCleanUp();
     }
     setChatMessage(threadId, message) {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this.parseAttachments(threadId, message);
         const { id: messageId, clientMessageId } = message;
         if (messageId || clientMessageId) {
             this.modifyState((draft) => {
@@ -21905,6 +22045,20 @@ let ChatContext$1 = class ChatContext {
             });
         }
     }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    parseAttachments(threadId, message) {
+        var _a, _b;
+        const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
+        if (message.type === 'html' && ((_b = message.content) === null || _b === void 0 ? void 0 : _b.message) && attachments && attachments.length > 0) {
+            if (this._messageQueue &&
+                !this._messageQueue.containsMessageWithSameAttachments(message) &&
+                message.resourceCache === undefined) {
+                // Need to discuss retry logic in case of failure
+                this._messageQueue.addMessage(message);
+                this._messageQueue.startQueue(threadId, requestAttachments);
+            }
+        }
+    }
     /**
      * Tees any errors encountered in an async function to the state.
      *
@@ -22599,7 +22753,8 @@ const _createStatefulChatClientInner = (args, options, telemetryImplementationHi
  * @internal
  */
 const _createStatefulChatClientWithDeps = (chatClient, args, options) => {
-    const context = new ChatContext$1(options === null || options === void 0 ? void 0 : options.maxStateChangeListeners);
+    const context = new ChatContext$1(options === null || options === void 0 ? void 0 : options.maxStateChangeListeners, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential);
     let eventSubscriber;
     context.updateChatConfig(communicationCommon.getIdentifierKind(args.userId), args.displayName);
     const proxy = new Proxy(chatClient, proxyChatClient);
@@ -24345,17 +24500,6 @@ const ChatScreen = (props) => {
     const onRenderFileDownloads = React.useCallback((userId, message) => (React.createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.files || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
             setDownloadErrorMessage(errorMessage);
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$j(void 0, void 0, void 0, function* () {
-        const entry = {};
-        attachment.forEach((target) => {
-            if (target.attachmentType === 'inlineImage' && target.previewUrl) {
-                entry[target.id] = target.previewUrl;
-            }
-        });
-        const blob = yield adapter.downloadAttachments({ attachmentUrls: entry });
-        return blob;
-    }), [adapter]);
     /* @conditional-compile-remove(image-gallery) */
     const onInlineImageClicked = React.useCallback((attachmentId, messageId) => __awaiter$j(void 0, void 0, void 0, function* () {
         var _a, _b;
@@ -24394,6 +24538,7 @@ const ChatScreen = (props) => {
             return;
         }
         if (attachment.attachmentType === 'inlineImage' && attachment.url) {
+            // TBD: Need to begin investigating how to download HQ images.
             const blob = yield adapter.downloadAttachments({ attachmentUrls: { [attachment.id]: attachment.url } });
             if (blob[0]) {
                 const blobUrl = blob[0].blobUrl;
@@ -24444,8 +24589,6 @@ const ChatScreen = (props) => {
                 React.createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
                     /* @conditional-compile-remove(file-sharing) */
                     onRenderFileDownloads: onRenderFileDownloads, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                    onFetchAttachments: onRenderInlineAttachment, 
                     /* @conditional-compile-remove(image-gallery) */
                     onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React.createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
@@ -26196,7 +26339,7 @@ const Reaction = (props) => {
     const reactionButtonProps = usePropsFor$1(ReactionButton);
     const styles = React.useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
     const reactionButtonDisabled = isDisabled(props.option) || reactionButtonProps.disabled;
-    return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles, disableTooltip: props.disableTooltip, persistMenu: true })));
+    return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles, disableTooltip: props.disableTooltip, persistMenu: true, reactionResources: props.reactionResource })));
 };
 /* @conditional-compile-remove(reaction) */
 const isDisabled = (option) => {
@@ -26366,6 +26509,8 @@ const CallControls = (props) => {
         showDevicesButtonInControlBar = false;
         showMoreButton = isEnabled$2(options === null || options === void 0 ? void 0 : options.moreButton);
     }
+    /* @conditional-compile-remove(reaction) */
+    const reactionResources = adapter.getState().reactions;
     /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.raiseHandButton);
     /* @conditional-compile-remove(raise-hand) */
@@ -26461,7 +26606,7 @@ const CallControls = (props) => {
                 microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
                 cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.cameraButton) })),
                 /* @conditional-compile-remove(reaction) */
-                showReactionButtonInControlBar && React.createElement(Reaction, { displayType: options === null || options === void 0 ? void 0 : options.displayType }),
+                showReactionButtonInControlBar && reactionResources && (React.createElement(Reaction, { displayType: options === null || options === void 0 ? void 0 : options.displayType, reactionResource: reactionResources })),
                 /* @conditional-compile-remove(raise-hand) */ showRaiseHandButtonInControlBar &&
                     /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options === null || options === void 0 ? void 0 : options.displayType })),
                 screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$4(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
@@ -27196,6 +27341,8 @@ const CommonCallControlBar = (props) => {
     const role = (_a = props.callAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
     /*@conditional-compile-remove(rooms) */
     const hideRaiseHandButtonInRoomsCall = props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
+    /*@conditional-compile-remove(reaction) */
+    const reactionResources = props.callAdapter.getState().reactions;
     return (React.createElement("div", { ref: controlBarSizeRef },
         React.createElement(CallAdapterProvider, { adapter: props.callAdapter }, 
         /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (React.createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn }))),
@@ -27216,7 +27363,10 @@ const CommonCallControlBar = (props) => {
                                         /* @conditional-compile-remove(video-background-effects) */
                                         onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView })),
                                     /* @conditional-compile-remove(reaction) */
-                                    !props.mobileView && isReactionAllowed && isEnabled$1(options.reactionButton) && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen })),
+                                    !props.mobileView &&
+                                        isReactionAllowed &&
+                                        isEnabled$1(options.reactionButton) &&
+                                        reactionResources && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources })),
                                     /* @conditional-compile-remove(raise-hand) */ !props.mobileView &&
                                         isEnabled$1(options.raiseHandButton) &&
                                         /* @conditional-compile-remove(rooms) */ !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, 
@@ -27531,7 +27681,7 @@ const inferCallWithChatControlOptions = (callWithChatControls) => {
 };
 /** @private */
 const MoreDrawer = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     /* @conditional-compile-remove(close-captions) */
     const theme = react.useTheme();
     /* @conditional-compile-remove(rooms) */
@@ -27542,6 +27692,12 @@ const MoreDrawer = (props) => {
     const localeStrings = useLocale();
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const callees = useSelector$1(getTargetCallees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const allowDtmfDialer = showDtmfDialer(callees);
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const [dtmfDialerChecked, setDtmfDialerChecked] = React.useState((_a = props.dtmfDialerPresent) !== null && _a !== void 0 ? _a : false);
     /* @conditional-compile-remove(raise-hand) */
     const raiseHandButtonProps = usePropsFor$1(RaiseHandButton);
     const onSpeakerItemClick = React.useCallback((_ev, itemKey) => {
@@ -27571,7 +27727,7 @@ const MoreDrawer = (props) => {
                 onItemClick: onSpeakerItemClick,
                 secondaryIconProps: isDeviceSelected(speaker, props.selectedSpeaker) ? { iconName: 'Accept' } : undefined
             })),
-            secondaryText: (_a = props.selectedSpeaker) === null || _a === void 0 ? void 0 : _a.name
+            secondaryText: (_b = props.selectedSpeaker) === null || _b === void 0 ? void 0 : _b.name
         });
     }
     const { microphones, onSelectMicrophone } = props;
@@ -27606,9 +27762,34 @@ const MoreDrawer = (props) => {
                 secondaryIconProps: isDeviceSelected(mic, props.selectedMicrophone) ? { iconName: 'Accept' } : undefined,
                 disabled: drawerSelectionOptions !== false ? isDisabled$4(drawerSelectionOptions.microphoneButton) : undefined
             })),
-            secondaryText: (_b = props.selectedMicrophone) === null || _b === void 0 ? void 0 : _b.name
+            secondaryText: (_c = props.selectedMicrophone) === null || _c === void 0 ? void 0 : _c.name
         });
     }
+    /* @conditional-compile-remove(dtmf-dialer) */
+    const dtmfDialerScreenOption = {
+        itemKey: 'dtmfDialerScreenKey',
+        text: !dtmfDialerChecked
+            ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn
+            : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
+        onItemClick: () => {
+            if (props.onSetDialpadPage) {
+                props.onSetDialpadPage();
+            }
+            setDtmfDialerChecked(!dtmfDialerChecked);
+            onLightDismiss();
+        },
+        iconProps: {
+            iconName: 'DtmfDialpadButton',
+            styles: { root: { lineHeight: 0 } }
+        }
+    };
+    /* @conditional-compile-remove(dtmf-dialer) */
+    /**
+     * Only render the dtmf dialer if the dialpad for PSTN calls is not present
+     */
+    if (props.onSetDialpadPage && allowDtmfDialer) {
+        drawerMenuItems.push(dtmfDialerScreenOption);
+    }
     /* @conditional-compile-remove(gallery-layouts) */
     const galleryLayoutOptions = {
         itemKey: 'galleryPositionKey',
@@ -27662,7 +27843,7 @@ const MoreDrawer = (props) => {
         secondaryIconProps: props.userSetGalleryLayout === 'default' ? { iconName: 'Accept' } : undefined
     };
     /* @conditional-compile-remove(gallery-layout-composite) */
-    (_c = galleryLayoutOptions.subMenuProps) === null || _c === void 0 ? void 0 : _c.push(galleryOption);
+    (_d = galleryLayoutOptions.subMenuProps) === null || _d === void 0 ? void 0 : _d.push(galleryOption);
     /* @conditional-compile-remove(gallery-layouts) */
     drawerMenuItems.push(galleryLayoutOptions);
     if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions === null || drawerSelectionOptions === void 0 ? void 0 : drawerSelectionOptions.peopleButton)) {
@@ -27689,7 +27870,7 @@ const MoreDrawer = (props) => {
         });
     }
     /*@conditional-compile-remove(rooms) */
-    const role = (_d = callAdapter.getState().call) === null || _d === void 0 ? void 0 : _d.role;
+    const role = (_e = callAdapter.getState().call) === null || _e === void 0 ? void 0 : _e.role;
     /*@conditional-compile-remove(rooms) */
     const hideRaiseHandButtonInRoomsCall = callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
     /* @conditional-compile-remove(raise-hand) */
@@ -27715,20 +27896,6 @@ const MoreDrawer = (props) => {
             }
         });
     }
-    /*@conditional-compile-remove(PSTN-calls) */
-    // dtmf tone sending only works for 1:1 PSTN call
-    if (drawerSelectionOptions !== false && props.onClickShowDialpad) {
-        drawerMenuItems.push({
-            itemKey: 'showDialpadKey',
-            disabled: props.disableButtonsForHoldScreen,
-            text: localeStrings.strings.callWithChat.openDtmfDialpadLabel,
-            onItemClick: () => {
-                props.onClickShowDialpad && props.onClickShowDialpad();
-                onLightDismiss();
-            },
-            iconProps: { iconName: 'Dialpad', styles: { root: { lineHeight: 0 } } }
-        });
-    }
     /* @conditional-compile-remove(close-captions) */
     //Captions drawer menu
     const supportedSpokenLanguageStrings = useLocale().strings.call.spokenLanguageStrings;
@@ -29506,7 +29673,11 @@ const CallArrangement = (props) => {
                         /* @conditional-compile-remove(gallery-layouts) */
                         onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange, 
                         /* @conditional-compile-remove(gallery-layouts) */
-                        userSetGalleryLayout: props.userSetGalleryLayout }))),
+                        userSetGalleryLayout: props.userSetGalleryLayout, 
+                        /* @conditional-compile-remove(dtmf-dialer) */
+                        onSetDialpadPage: props.onSetDialpadPage, 
+                        /* @conditional-compile-remove(dtmf-dialer) */
+                        dtmfDialerPresent: props.dtmfDialerPresent }))),
                 /* @conditional-compile-remove(PSTN-calls) */
                 ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDtmfDialpad && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
@@ -29607,6 +29778,8 @@ const MediaGallery = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
+    /* @conditional-compile-remove(reaction) */
+    const reactionResources = adapter.getState().reactions;
     const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
     /* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
     const cameraSwitcherProps = React.useMemo(() => {
@@ -29654,7 +29827,9 @@ const MediaGallery = (props) => {
                 ? 'hidden'
                 : props.isMobile && containerAspectRatio < 1
                     ? '9:16'
-                    : '16:9' })));
+                    : '16:9', 
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources })));
     }, [
         videoGalleryProps,
         props.isMobile,
@@ -29674,7 +29849,9 @@ const MediaGallery = (props) => {
         containerAspectRatio,
         /* @conditional-compile-remove(gallery-layouts) */
         props.userSetGalleryLayout,
-        layoutBasedOnTilePosition
+        layoutBasedOnTilePosition,
+        /* @conditional-compile-remove(reaction) */
+        reactionResources
     ]);
     return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer$1, { announcementString: announcerString, ariaLive: 'polite' }),
@@ -32710,7 +32887,8 @@ class CallContext {
             onResolveVideoEffectDependency: (_c = options === null || options === void 0 ? void 0 : options.videoBackgroundOptions) === null || _c === void 0 ? void 0 : _c.onResolveDependency,
             /* @conditional-compile-remove(video-background-effects) */ selectedVideoBackgroundEffect: undefined,
             cameraStatus: undefined,
-            /* @conditional-compile-remove(calling-sounds) */ sounds: options === null || options === void 0 ? void 0 : options.callingSounds
+            /* @conditional-compile-remove(calling-sounds) */ sounds: options === null || options === void 0 ? void 0 : options.callingSounds,
+            /* @conditional-compile-remove(reaction) */ reactions: options === null || options === void 0 ? void 0 : options.reactionResources
         };
         this.emitter.setMaxListeners((_d = options === null || options === void 0 ? void 0 : options.maxListeners) !== null && _d !== void 0 ? _d : 50);
         this.bindPublicMethods();