@azure/communication-react 1.7.0-alpha-202308040014 → 1.7.0-alpha-202308050013

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.0-alpha-202308040014';
+var telemetryVersion = '1.7.0-alpha-202308050013';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -454,7 +454,7 @@ const getSupportedSpokenLanguages = (state, props) => {
 
 // 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); } }
@@ -493,7 +493,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$L(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$M(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -661,7 +661,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // 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); } }
@@ -682,7 +682,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callClient, deviceManager, call, options) => {
-    const onStartLocalVideo = () => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$L(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?
@@ -702,7 +702,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$L(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -711,7 +711,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$L(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         if (previewOn && call && call.state === 'Connecting') {
             // This is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
@@ -759,19 +759,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -794,19 +794,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!call || !_isInCall(call.state)) {
             throw new Error(`Please invoke onToggleMicrophone after call is started`);
         }
         return call.isMuted ? yield call.unmute() : yield call.mute();
     });
-    const onStartScreenShare = () => __awaiter$K(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$K(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$K(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$K(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$L(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$L(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$L(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$L(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$K(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$K(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$L(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$L(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -822,7 +822,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         const { view } = (_a = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _a !== void 0 ? _a : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -853,7 +853,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
         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$K(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -874,7 +874,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -891,7 +891,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, remoteVideoStream);
         }
     });
-    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$L(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -908,7 +908,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$L(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');
@@ -921,18 +921,18 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$K(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$L(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$K(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$L(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$K(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$L(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) {
@@ -945,7 +945,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$L(void 0, void 0, void 0, function* () {
         var _b;
         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'));
@@ -959,7 +959,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$L(void 0, void 0, void 0, function* () {
         var _c;
         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'));
@@ -973,19 +973,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStartCaptions = (options) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onStartCaptions = (options) => __awaiter$L(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).startCaptions(options));
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStopCaptions = () => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onStopCaptions = () => __awaiter$L(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).stopCaptions());
     });
     /* @conditional-compile-remove(close-captions) */
-    const onSetSpokenLanguage = (language) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onSetSpokenLanguage = (language) => __awaiter$L(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).setSpokenLanguage(language));
     });
     /* @conditional-compile-remove(close-captions) */
-    const onSetCaptionLanguage = (language) => __awaiter$K(void 0, void 0, void 0, function* () {
+    const onSetCaptionLanguage = (language) => __awaiter$L(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).setCaptionLanguage(language));
     });
     return {
@@ -1033,7 +1033,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
 
 // 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); } }
@@ -1061,7 +1061,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((...args) =>
             return callAgent === null || callAgent === void 0 ? void 0 : callAgent.startCall(participants, options);
         }, 
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$J(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$K(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);
@@ -1069,7 +1069,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((...args) =>
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$J(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$K(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -1077,7 +1077,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((...args) =>
 
 // 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); } }
@@ -1109,7 +1109,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         }, 
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$I(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$J(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;
@@ -1126,7 +1126,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
             }
             /* @conditional-compile-remove(teams-identity-support) */
             call === null || call === void 0 ? void 0 : call.addParticipant(participant);
-        }), onRemoveParticipant: (userId) => __awaiter$I(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$J(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!');
@@ -1208,7 +1208,7 @@ const getCaptionsSpeakerIdentifier = (captions) => {
 
 // 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); } }
@@ -1257,13 +1257,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$H(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$I(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$H(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$I(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1651,7 +1651,7 @@ function convertFromSDKToDeclarativeVideoStreamVideoEffects(videoEffects) {
 
 // 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); } }
@@ -2370,7 +2370,7 @@ class CallContext$2 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$G(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$H(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -2790,7 +2790,7 @@ function _logStreamEvent(eventName, streamLogInfo, error) {
 
 // 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); } }
@@ -2800,7 +2800,7 @@ var __awaiter$F = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$F(this, void 0, void 0, function* () {
+    return __awaiter$G(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.
@@ -2922,7 +2922,7 @@ function createViewVideo(context, internalContext, callId, stream, participantId
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$F(this, void 0, void 0, function* () {
+    return __awaiter$G(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -3090,7 +3090,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$F(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$G(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
@@ -3638,7 +3638,7 @@ class CallSubscriber {
 
 // 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); } }
@@ -3658,14 +3658,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$E(this, void 0, void 0, function* () {
+                    return __awaiter$F(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$E(this, void 0, void 0, function* () {
+                    return __awaiter$F(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -3906,7 +3906,7 @@ const clearCallRelatedState = (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); } }
@@ -3932,56 +3932,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$D(this, void 0, void 0, function* () {
+                    return __awaiter$E(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -4021,7 +4021,7 @@ class ProxyTeamsCaptionsFeature {
     get(target, prop) {
         switch (prop) {
             case 'startCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$D(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$E(this, void 0, void 0, function* () {
                     var _a, _b;
                     this._context.setStartCaptionsInProgress(this._call.id, true);
                     const ret = yield target.startCaptions(...args);
@@ -4029,20 +4029,20 @@ class ProxyTeamsCaptionsFeature {
                     return ret;
                 }), 'Call.feature');
             case 'stopCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$D(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$E(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);
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$D(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$E(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$D(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$E(this, void 0, void 0, function* () {
                     const ret = yield target.setCaptionLanguage(...args);
                     this._context.setSelectedCaptionLanguage(this._call.id, args[0]);
                     return ret;
@@ -4090,7 +4090,7 @@ class ProxyTransferCallFeature {
 
 // 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); } }
@@ -4104,7 +4104,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$C(this, void 0, void 0, function* () {
+                    return __awaiter$D(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -4325,7 +4325,7 @@ class InternalCallContext {
 
 // 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); } }
@@ -4340,7 +4340,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$B(this, void 0, void 0, function* () {
+                    return __awaiter$C(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -4455,7 +4455,7 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
 
 // 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); } }
@@ -4477,7 +4477,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$A(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$B(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -4498,7 +4498,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 
 // 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); } }
@@ -4520,7 +4520,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$z(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$A(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.
@@ -4533,7 +4533,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$z(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$A(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.
@@ -4546,7 +4546,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$z(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$A(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.
@@ -4575,7 +4575,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$z(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$A(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -4628,7 +4628,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$z(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$A(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.
@@ -7330,7 +7330,7 @@ const _MentionPopover = (props) => {
 
 // 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); } }
@@ -7505,7 +7505,7 @@ const TextFieldWithMention = (props) => {
         onSuggestionSelected,
         updateMentionSuggestions
     ]);
-    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$y(void 0, void 0, void 0, function* () {
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$z(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() !== '');
@@ -7682,7 +7682,7 @@ const TextFieldWithMention = (props) => {
             });
         }
     }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
-    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$y(void 0, void 0, void 0, function* () {
+    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$z(void 0, void 0, void 0, function* () {
         var _b;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
@@ -8362,6 +8362,244 @@ const activeFileUploadsTrampoline = (props) => {
     return props.activeFileUploads;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * @private
+ */
+const cancelIcon = { iconName: 'Cancel' };
+/**
+ * @private
+ */
+const downloadIcon = {
+    iconName: 'Download'
+};
+/**
+ * @private
+ */
+const overlayStyles = (theme, isDarkThemed) => {
+    return {
+        root: {
+            // The overlay background color should always be black in both light and dark theme.
+            // In dark theme, theme.palette.white is actually black.
+            background: isDarkThemed ? theme.palette.white : theme.palette.black,
+            opacity: '0.85'
+        }
+    };
+};
+/**
+ * @private
+ */
+const focusTrapZoneStyle = {
+    boxShadow: 'none',
+    background: 'transparent',
+    display: 'flex'
+};
+/**
+ * @private
+ */
+const scrollableContentStyle = {
+    overflowY: 'hidden',
+    display: 'flex',
+    flexFlow: 'column wrap',
+    maxWidth: '100%',
+    maxHeight: '100%'
+};
+/**
+ * @private
+ */
+const headerStyle = {
+    fontSize: 'inherit',
+    margin: '0',
+    width: '100%',
+    height: '3.5rem',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: '0 0.75rem'
+};
+/**
+ * @private
+ */
+const titleBarContainerStyle = {
+    flexDirection: 'row',
+    justifyContent: 'start',
+    flexWrap: 'wrap',
+    alignContent: 'center',
+    alignItems: 'center'
+};
+/**
+ * @private
+ */
+const titleStyle$2 = (theme, isDarkThemed) => {
+    return {
+        paddingLeft: '0.5rem',
+        marginLeft: '0.5rem',
+        color: isDarkThemed ? undefined : theme.palette.white,
+        fontFamily: 'inherit',
+        fontSize: '0.875rem',
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: '1.25rem'
+    };
+};
+/**
+ * @private
+ */
+const controlBarContainerStyle = {
+    flexDirection: 'row',
+    justifyContent: 'start',
+    flexWrap: 'wrap',
+    alignContent: 'center',
+    alignItems: 'center'
+};
+/**
+ * @private
+ */
+const downloadIconStyle = {
+    marginRight: '0.5em',
+    fontSize: '0.875rem' // 14px
+};
+/**
+ * @private
+ */
+const imageContainer = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    margin: '4rem 0 2rem'
+};
+/**
+ * @private
+ */
+const normalImageStyle = {
+    objectFit: 'contain',
+    height: '100%',
+    width: '100%'
+};
+/**
+ * @private
+ */
+const brokenImageStyle = (theme, isDarkThemed) => {
+    return {
+        // The color should be white in dark theme.
+        // In dark theme, theme.palette.black is actually white.
+        color: isDarkThemed ? theme.palette.black : theme.palette.white
+    };
+};
+/**
+ * @private
+ */
+const closeButtonStyles = (theme, isDarkThemed) => {
+    return {
+        // The color should be white in dark theme.
+        // In dark theme, theme.palette.black is actually white.
+        color: isDarkThemed ? theme.palette.black : theme.palette.white,
+        ':hover': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+        },
+        ':active': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+        }
+    };
+};
+/**
+ * @private
+ */
+const downloadButtonStyle = (theme, isDarkThemed) => {
+    return {
+        margin: '0 0.5rem',
+        height: '32px',
+        borderWidth: '1px',
+        fontSize: '0.875rem',
+        fontWeight: 600,
+        padding: '0.38rem 0.75rem',
+        borderRadius: '4px',
+        backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,
+        color: isDarkThemed ? undefined : theme.palette.white,
+        whiteSpace: 'nowrap',
+        ':hover': {
+            // The color should be white in dark theme.
+            // In dark theme, theme.palette.black is actually white.
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+        },
+        ':active': {
+            // The color should be white in dark theme.
+            // In dark theme, theme.palette.black is actually white.
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+        },
+        '@media (max-width: 25rem)': {
+            display: 'none'
+        }
+    };
+};
+/**
+ * @private
+ */
+const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
+    return {
+        marginRight: '0.5rem',
+        // The color should be white in dark theme.
+        // In dark theme, theme.palette.black is actually white.
+        color: isDarkThemed ? theme.palette.black : theme.palette.white,
+        whiteSpace: 'nowrap',
+        ':hover': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
+        },
+        ':active': {
+            color: isDarkThemed ? theme.palette.black : theme.palette.white,
+            backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
+        },
+        '@media (min-width: 25rem)': {
+            display: 'none'
+        }
+    };
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Component to render a fullscreen modal for a selected image.
+ *
+ * @beta
+ */
+const ImageGallery = (props) => {
+    const { images, modalLayerHostId, onImageDownloadButtonClicked, onDismiss, onError, styles, startIndex = 0 } = props;
+    const theme = useTheme();
+    const isDarkTheme = isDarkThemed(theme);
+    const downloadButtonTitleString = 'Download';
+    const closeString = 'Close';
+    const defaultAltText = 'image';
+    const [isImageLoaded, setIsImageLoaded] = React.useState(true);
+    const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);
+    if (images.length <= startIndex) {
+        console.log('Unable to display Image Gallery due to startIndex is out of range.');
+        return React__default['default'].createElement(React__default['default'].Fragment, null);
+    }
+    const image = images[startIndex];
+    return (React__default['default'].createElement(react.Layer, { hostId: modalLayerHostId },
+        React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: images.length > 0, onDismiss: onDismiss, overlay: { styles: Object.assign(Object.assign({}, overlayStyles(theme, isDarkTheme)), styles === null || styles === void 0 ? void 0 : styles.overlay) }, layerProps: { id: modalLayerHostId }, styles: Object.assign({ main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, styles === null || styles === void 0 ? void 0 : styles.modal) },
+            React__default['default'].createElement("div", { className: react.mergeStyles(imageContainer, styles === null || styles === void 0 ? void 0 : styles.imageContainer) },
+                React__default['default'].createElement("img", { src: image.imageUrl, className: react.mergeStyles(imageStyle, styles === null || styles === void 0 ? void 0 : styles.image), alt: image.altText || defaultAltText, onError: (event) => {
+                        setIsImageLoaded(false);
+                        onError && onError(event);
+                    } }))),
+        React__default['default'].createElement(react.Stack, { className: react.mergeStyles(headerStyle, styles === null || styles === void 0 ? void 0 : styles.header) },
+            React__default['default'].createElement(react.Stack, { className: react.mergeStyles(titleBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.titleBarContainer) },
+                image.titleIcon,
+                React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.title), "aria-label": image.title }, image.title)),
+            React__default['default'].createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle, styles === null || styles === void 0 ? void 0 : styles.controlBarContainer) },
+                React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.downloadButton), text: downloadButtonTitleString, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => (React__default['default'].createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle, styles === null || styles === void 0 ? void 0 : styles.downloadButtonIcon) })), "aria-live": 'polite', "aria-label": downloadButtonTitleString }),
+                React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.smallDownloadButton), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": downloadButtonTitleString, "aria-live": 'polite' }),
+                React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme, isDarkTheme), styles === null || styles === void 0 ? void 0 : styles.closeIcon), onClick: onDismiss, ariaLabel: closeString, "aria-live": 'polite' })))));
+};
+
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;
@@ -9356,7 +9594,12 @@ const processInlineImage = (props) => ({
         if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
             node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
         }
-        return processNodeDefinitions.processDefaultNode(node, children, index);
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        const handleOnClick = () => {
+            props.onInlineImageClicked && props.onInlineImageClicked(node.attribs.id);
+        };
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        return (React__default['default'].createElement("span", { onClick: handleOnClick, "data-ui-id": node.attribs.id }, processNodeDefinitions.processDefaultNode(node, children, index)));
     }
 });
 /* @conditional-compile-remove(mention) */
@@ -9430,7 +9673,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-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); } }
@@ -9473,7 +9716,7 @@ const _FileDownloadCards = (props) => {
             fileCount: `${fileMetadata.filter(isFileSharingAttachment).length}`
         });
     }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$x(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -9523,6 +9766,16 @@ const useLocaleStringsTrampoline = () => {
 };
 
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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); } }
+        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());
+    });
+};
 const generateDefaultTimestamp = (createdOn, showDate, strings) => {
     const formattedTimestamp = showDate
         ? formatTimestampForChatMessage(createdOn, new Date(), strings)
@@ -9544,7 +9797,9 @@ const MessageBubble = (props) => {
     const ids = useIdentifiers();
     const theme = useTheme();
     const locale = useLocale$1();
-    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler } = props;
+    const { userId, message, onRemoveClick, onResendClick, disableEditing, showDate, messageContainerStyle, strings, onEditClick, remoteParticipantsCount = 0, onRenderAvatar, showMessageStatus, messageStatus, fileDownloadHandler, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    onInlineImageClicked } = props;
     const defaultTimeStamp = message.createdOn
         ? generateDefaultTimestamp(message.createdOn, showDate, strings)
         : undefined;
@@ -9603,6 +9858,21 @@ const MessageBubble = (props) => {
         }
         return undefined;
     }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const handleOnInlineImageClicked = React.useCallback((attachmentId) => __awaiter$x(void 0, void 0, void 0, function* () {
+        var _b;
+        if (onInlineImageClicked === undefined) {
+            return;
+        }
+        (_b = message.attachedFilesMetadata) === null || _b === void 0 ? void 0 : _b.forEach((attachment) => __awaiter$x(void 0, void 0, void 0, function* () {
+            if (attachment.id === attachmentId) {
+                const onRenderTitleIcon = (personaProps) => {
+                    return (React__default['default'].createElement(react.Persona, Object.assign({ text: message.senderDisplayName, imageAlt: message.senderDisplayName, size: react.PersonaSize.size32, hidePersonaDetails: true, showOverflowTooltip: false }, personaProps)));
+                };
+                yield onInlineImageClicked(Object.assign(Object.assign({}, attachment), { name: message.senderDisplayName || '' }), onRenderTitleIcon);
+            }
+        }));
+    }), [message, onInlineImageClicked]);
     const getContent = React.useCallback(() => {
         /* @conditional-compile-remove(data-loss-prevention) */
         if (message.messageType === 'blocked') {
@@ -9616,9 +9886,19 @@ const MessageBubble = (props) => {
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 attachmentsMap: props.attachmentsMap, 
                 /* @conditional-compile-remove(mention) */
-                mentionDisplayOptions: props.mentionDisplayOptions }),
+                mentionDisplayOptions: props.mentionDisplayOptions, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                onInlineImageClicked: handleOnInlineImageClicked }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
-    }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
+    }, [
+        defaultOnRenderFileDownloads,
+        message,
+        props,
+        strings,
+        userId,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        handleOnInlineImageClicked
+    ]);
     const chatMessage = (React__default['default'].createElement(React__default['default'].Fragment, null,
         React__default['default'].createElement("div", { ref: messageRef },
             React__default['default'].createElement(i.Message, { "data-ui-id": "chat-composite-message", className: react.mergeStyles(messageContainerStyle), styles: messageContainerStyle, content: getContent(), author: React__default['default'].createElement(d, { className: chatMessageDateStyle }, message.senderDisplayName), mine: message.mine, timestamp: React__default['default'].createElement(d, { "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails(), positionActionMenu: false, actionMenu: actionMenuProps, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onBlur: () => setWasInteractionByTouch(false), onClick: () => {
@@ -9695,6 +9975,8 @@ const ChatMessageComponent = (props) => {
             /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
             onFetchAttachments: props.onFetchAttachments, 
             /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+            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 })));
@@ -10067,7 +10349,9 @@ const MessageThread = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     onFetchAttachments, 
     /* @conditional-compile-remove(mention) */
-    mentionOptions } = props;
+    mentionOptions, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    onInlineImageClicked } = props;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = React.useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -10315,6 +10599,8 @@ const MessageThread = (props) => {
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 onFetchAttachments: onFetchInlineAttachment, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                onInlineImageClicked: onInlineImageClicked, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
                 attachmentsMap: inlineAttachments, 
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions })));
@@ -10335,6 +10621,8 @@ const MessageThread = (props) => {
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         onFetchInlineAttachment,
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        onInlineImageClicked,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         inlineAttachments,
         /* @conditional-compile-remove(mention) */
         mentionOptions
@@ -20836,6 +21124,10 @@ const ChatScreen = (props) => {
     const defaultNumberOfChatMessagesToReload = 5;
     /* @conditional-compile-remove(file-sharing) */
     const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const [fullSizeAttachments, setFullSizeAttachments] = React.useState({});
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const [galleryImages, setGalleryImages] = React.useState(undefined);
     const adapter = useAdapter$1();
     const theme = useTheme();
     React.useEffect(() => {
@@ -20881,6 +21173,37 @@ const ChatScreen = (props) => {
         }
         return [{ blobUrl: '' }];
     }), [adapter]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const onInlineImageClicked = React.useCallback((attachment, onRenderTitleIcon) => __awaiter$i(void 0, void 0, void 0, function* () {
+        const titleIcon = onRenderTitleIcon && onRenderTitleIcon();
+        const galleryImage = {
+            title: attachment.name,
+            titleIcon: titleIcon,
+            saveAsName: attachment.id,
+            imageUrl: ''
+        };
+        if (attachment.id in fullSizeAttachments) {
+            setGalleryImages([
+                Object.assign(Object.assign({}, galleryImage), { imageUrl: fullSizeAttachments[attachment.id] })
+            ]);
+            return;
+        }
+        if (attachment.attachmentType === 'inlineImage' && attachment.url) {
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.url] });
+            if (blob[0]) {
+                const blobUrl = blob[0].blobUrl;
+                setFullSizeAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: blobUrl })));
+                setGalleryImages([
+                    Object.assign(Object.assign({}, galleryImage), { imageUrl: blobUrl })
+                ]);
+            }
+        }
+    }), [adapter, fullSizeAttachments]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const handleOnDownloadImage = (blobUrl, filename) => {
+        // Place holder function for download handler
+        console.log(blobUrl, filename);
+    };
     const AttachFileButton = React.useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
@@ -20900,7 +21223,9 @@ const ChatScreen = (props) => {
                     /* @conditional-compile-remove(file-sharing) */
                     onRenderFileDownloads: onRenderFileDownloads, 
                     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                    onFetchAttachments: onRenderInlineAttachment, 
+                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
                     React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
                     React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
@@ -20914,7 +21239,9 @@ const ChatScreen = (props) => {
                                 onCancelFileUpload: adapter.cancelFileUpload }))),
                         formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        galleryImages && galleryImages.length > 0 && (React__default['default'].createElement(ImageGallery, { modalLayerHostId: props.modalLayerHostId, images: galleryImages, onDismiss: () => setGalleryImages(undefined), onImageDownloadButtonClicked: handleOnDownloadImage }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -30170,6 +30497,7 @@ exports.ErrorBar = ErrorBar;
 exports.FluentThemeProvider = FluentThemeProvider;
 exports.GridLayout = GridLayout;
 exports.HoldButton = HoldButton;
+exports.ImageGallery = ImageGallery;
 exports.LocalizationProvider = LocalizationProvider$1;
 exports.MessageStatusIndicator = MessageStatusIndicator;
 exports.MessageThread = MessageThread;