npm - @azure/communication-react - Versions diffs - 1.12.1-alpha-202401270011 → 1.12.1-alpha-202401300049 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

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

@@ -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-202401270011';
+var telemetryVersion = '1.12.1-alpha-202401300049';
 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$P = (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); } }
@@ -564,7 +564,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$P(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$O(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$O = (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); } }
@@ -793,7 +793,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager, call, options) => {
-    const onStartLocalVideo = () => __awaiter$O(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$O(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$N(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$O(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$N(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$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()); });
+    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()); });
     /* @conditional-compile-remove(raise-hand) */
-    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()); });
+    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()); });
     /* @conditional-compile-remove(raise-hand) */
-    const onToggleRaiseHand = () => __awaiter$O(void 0, void 0, void 0, function* () {
+    const onToggleRaiseHand = () => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onReactionClicked = (reaction) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$N(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$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 })); });
+    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 })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    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* () {
+    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* () {
         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$O(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteVideoStreamView = (userId) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteScreenShareStreamView = (userId) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$N(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$O(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    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 notImplemented = () => {
         throw new Error('Not implemented, cannot call a method from an abstract object');
     };
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$O(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onStartCaptions = (options) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onStopCaptions = () => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onSetSpokenLanguage = (language) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onSetCaptionLanguage = (language) => __awaiter$N(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$O(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$N(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$O(void 0, void 0, void 0, function* () {
+    const onStartSpotlight = (userId) => __awaiter$N(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$O(void 0, void 0, void 0, function* () {
+    const onStopSpotlight = (userId) => __awaiter$N(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$N = (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); } }
@@ -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$N(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$M(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$N(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$M(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$M = (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); } }
@@ -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$M(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$L(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$M(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$L(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$L = (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); } }
@@ -1453,13 +1453,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$L(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$K(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$L(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$K(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$K = (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); } }
@@ -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$K(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$J(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$J = (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); } }
@@ -3143,7 +3143,7 @@ var __awaiter$J = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$J(this, void 0, void 0, function* () {
+    return __awaiter$I(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$J(this, void 0, void 0, function* () {
+    return __awaiter$I(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$J(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$I(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$I = (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); } }
@@ -4071,14 +4071,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$I(this, void 0, void 0, function* () {
+                    return __awaiter$H(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$I(this, void 0, void 0, function* () {
+                    return __awaiter$H(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$H = (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); } }
@@ -4345,56 +4345,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$H(this, void 0, void 0, function* () {
+                    return __awaiter$G(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$H(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(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$H(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(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$H(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(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$H(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$G(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$G = (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); } }
@@ -4518,7 +4518,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$G(this, void 0, void 0, function* () {
+                    return __awaiter$F(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$F = (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); } }
@@ -4771,7 +4771,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$F(this, void 0, void 0, function* () {
+                    return __awaiter$E(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$E = (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); } }
@@ -4910,7 +4910,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$E(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$D(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$D = (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); } }
@@ -4953,7 +4953,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$D(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$C(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$D(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$C(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$D(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$C(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$D(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$C(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$D(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$C(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$C = (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); } }
@@ -7804,7 +7804,7 @@ const TextFieldWithMention = (props) => {
         onSuggestionSelected,
         updateMentionSuggestions
     ]);
-    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$C(void 0, void 0, void 0, function* () {
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$B(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$C(void 0, void 0, void 0, function* () {
+    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$B(void 0, void 0, void 0, function* () {
         var _b;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
@@ -10583,11 +10583,15 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
+/* @conditional-compile-remove(image-gallery) */
+const defaultOnRenderInlineImage = (inlineImage) => {
+    return (React.createElement("img", Object.assign({}, inlineImage.imgAttrs, { "data-ui-id": inlineImage.imgAttrs.id, tabIndex: 0, role: "button", style: Object.assign({ cursor: 'pointer' }, inlineImage.imgAttrs.style) })));
+};
 const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (domNode instanceof parse.Element && domNode.attribs) {
                 // Transform custom rendering of mentions
                 /* @conditional-compile-remove(mention) */
@@ -10609,20 +10613,13 @@ const processHtmlToReact = (props) => {
                         return metadata.id === domNode.attribs.id;
                     }))) {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
-                    /* @conditional-compile-remove(image-gallery) */
-                    const handleOnClick = () => {
-                        props.onInlineImageClicked && props.onInlineImageClicked(domNode.attribs.id);
-                    };
                     const imgProps = parse.attributesToProps(domNode.attribs);
                     /* @conditional-compile-remove(image-gallery) */
-                    return (React.createElement("span", { "data-ui-id": domNode.attribs.id, onClick: handleOnClick, tabIndex: 0, role: "button", style: {
-                            cursor: 'pointer'
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'Enter') {
-                                handleOnClick();
-                            }
-                        } },
-                        React.createElement("img", Object.assign({}, imgProps))));
+                    const inlineImageProps = { messageId: props.message.messageId, imgAttrs: imgProps };
+                    /* @conditional-compile-remove(image-gallery) */
+                    return ((_d = props.inlineImageOptions) === null || _d === void 0 ? void 0 : _d.onRenderInlineImage)
+                        ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
+                        : defaultOnRenderInlineImage(inlineImageProps);
                 }
             }
             // Pass through the original node
@@ -10657,7 +10654,7 @@ const chatMessageActionMenuProps = (menuProps) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-var __awaiter$B = (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); } }
@@ -10700,7 +10697,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$B(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$A(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -10752,15 +10749,6 @@ const useLocaleStringsTrampoline = () => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-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); } }
-        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)
@@ -10786,7 +10774,7 @@ const MessageBubble = (props) => {
     /* @conditional-compile-remove(file-sharing) */
     fileDownloadHandler,
     /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked, shouldOverlapAvatarAndMessage } = props;
+    inlineImageOptions, shouldOverlapAvatarAndMessage } = props;
     const defaultTimeStamp = message.createdOn
         ? generateDefaultTimestamp(message.createdOn, showDate, strings)
         : undefined;
@@ -10852,13 +10840,6 @@ 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$A(void 0, void 0, void 0, function* () {
-        if (onInlineImageClicked === undefined) {
-            return;
-        }
-        yield onInlineImageClicked(attachmentId, message.messageId);
-    }), [message, onInlineImageClicked]);
     const getContent = React.useCallback(() => {
         /* @conditional-compile-remove(data-loss-prevention) */
         if (message.messageType === 'blocked') {
@@ -10870,18 +10851,17 @@ const MessageBubble = (props) => {
                 /* @conditional-compile-remove(mention) */
                 mentionDisplayOptions: props.mentionDisplayOptions,
                 /* @conditional-compile-remove(image-gallery) */
-                onInlineImageClicked: handleOnInlineImageClicked }),
+                inlineImageOptions: inlineImageOptions }),
             /* @conditional-compile-remove(file-sharing) */ props.onRenderFileDownloads
                 ? props.onRenderFileDownloads(userId, message)
                 : defaultOnRenderFileDownloads()));
     }, [
         defaultOnRenderFileDownloads,
+        /* @conditional-compile-remove(image-gallery) */ inlineImageOptions,
         message,
         props,
         strings,
-        userId,
-        /* @conditional-compile-remove(image-gallery) */
-        handleOnInlineImageClicked
+        userId
     ]);
     const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();
@@ -11019,7 +10999,7 @@ const ChatMessageComponent = (props) => {
             /* @conditional-compile-remove(date-time-customization) */
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings,
             /* @conditional-compile-remove(image-gallery) */
-            onInlineImageClicked: props.onInlineImageClicked,
+            inlineImageOptions: props.inlineImageOptions,
             /* @conditional-compile-remove(mention) */
             mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
     }
@@ -11040,7 +11020,7 @@ const FluentChatMessageComponentWrapper = (props) => {
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString,
     /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked,
+    inlineImageOptions,
     /* @conditional-compile-remove(mention) */
     mentionOptions,
     /* @conditional-compile-remove(file-sharing) */
@@ -11065,7 +11045,7 @@ const FluentChatMessageComponentWrapper = (props) => {
                 /* @conditional-compile-remove(date-time-customization) */
                 onDisplayDateTimeString: onDisplayDateTimeString,
                 /* @conditional-compile-remove(image-gallery) */
-                onInlineImageClicked: onInlineImageClicked,
+                inlineImageOptions: inlineImageOptions,
                 /* @conditional-compile-remove(mention) */
                 mentionOptions: mentionOptions,
                 /* @conditional-compile-remove(file-sharing) */
@@ -11083,7 +11063,7 @@ const FluentChatMessageComponentWrapper = (props) => {
         /* @conditional-compile-remove(date-time-customization) */
         onDisplayDateTimeString,
         /* @conditional-compile-remove(image-gallery) */
-        onInlineImageClicked,
+        inlineImageOptions,
         /* @conditional-compile-remove(mention) */
         mentionOptions,
         /* @conditional-compile-remove(file-sharing) */
@@ -11444,7 +11424,7 @@ const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(mention) */
     mentionOptions,
     /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked,
+    inlineImageOptions,
     /* @conditional-compile-remove(file-sharing) */
     onRenderFileDownloads } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -11760,7 +11740,7 @@ const MessageThreadWrapper = (props) => {
                         /* @conditional-compile-remove(file-sharing) */
                         fileDownloadHandler: props.fileDownloadHandler,
                         /* @conditional-compile-remove(image-gallery) */
-                        onInlineImageClicked: onInlineImageClicked,
+                        inlineImageOptions: inlineImageOptions,
                         /* @conditional-compile-remove(date-time-customization) */
                         onDisplayDateTimeString: onDisplayDateTimeString,
                         /* @conditional-compile-remove(mention) */
@@ -13169,8 +13149,11 @@ function useLongPress(props) {
         startPressTimer();
     }, [startPressTimer]);
     const handleOnTouchEnd = React.useCallback(() => {
+        if (!isLongPress && onClick) {
+            onClick();
+        }
         timerRef.current && clearTimeout(timerRef.current);
-    }, []);
+    }, [onClick, isLongPress]);
     const handleOnTouchMove = React.useCallback(() => {
         timerRef.current && clearTimeout(timerRef.current);
     }, []);
@@ -18379,7 +18362,7 @@ const DtmfTones = [
 const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
-    const { digit, index, onClick, onLongPress, isMobile = false, dtmfToneAudioContext, disableDtmfPlayback } = props;
+    const { digit, index, onClick, onLongPress, longPressTrigger, dtmfToneAudioContext, disableDtmfPlayback } = props;
     const [buttonPressed, setButtonPressed] = React.useState(false);
     const dtmfToneSound = React.useRef(new Tone(dtmfToneAudioContext, dtmfFrequencies[digit].f1, dtmfFrequencies[digit].f2));
     const useLongPressProps = React.useMemo(() => ({
@@ -18389,8 +18372,8 @@ const DialpadButton = (props) => {
         onLongPress: () => __awaiter$u(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
-        touchEventsOnly: isMobile
-    }), [digit, index, isMobile, onClick, onLongPress]);
+        touchEventsOnly: longPressTrigger === 'touch'
+    }), [digit, index, longPressTrigger, onClick, onLongPress]);
     const longPressHandlers = useLongPress(useLongPressProps);
     return (React.createElement(react.DefaultButton, Object.assign({ "data-test-id": `dialpad-button-${props.index}`, styles: react.concatStyleSets(buttonStyles$1(), (_a = props.styles) === null || _a === void 0 ? void 0 : _a.button) }, longPressHandlers, { onKeyDown: (e) => {
             if ((e.key === 'Enter' || e.key === ' ') && !buttonPressed) {
@@ -18401,6 +18384,13 @@ const DialpadButton = (props) => {
                 setButtonPressed(true);
                 return;
             }
+            if (e.key === 'Tab' ||
+                e.key === 'ArrowLeft' ||
+                e.key === 'ArrowRight' ||
+                e.key === 'ArrowUp' ||
+                e.key === 'ArrowDown') {
+                dtmfToneSound.current.stop();
+            }
             longPressHandlers.onKeyDown();
         }, onKeyUp: (e) => {
             if ((e.key === 'Enter' || e.key === ' ') && buttonPressed) {
@@ -18435,7 +18425,7 @@ const DialpadButton = (props) => {
 const DialpadContainer = (props) => {
     var _a, _b;
     const theme = react.useTheme();
-    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, isMobile = false, disableDtmfPlayback, dialpadMode = 'dialer' } = props;
+    const { onSendDtmfTone, onClickDialpadButton, textFieldValue, onChange, showDeleteButton = true, longPressTrigger = 'mouseAndTouch', disableDtmfPlayback, dialpadMode = 'dialer' } = props;
     const dtmfToneAudioContext = React.useRef(new AudioContext());
     const [plainTextValue, setPlainTextValue] = React.useState(textFieldValue !== null && textFieldValue !== void 0 ? textFieldValue : '');
     const plainTextValuePreviousRenderValue = React.useRef(plainTextValue);
@@ -18511,7 +18501,7 @@ const DialpadContainer = (props) => {
                 then use this index to locate the corresponding dtmf tones
                 DtmfTones[index]
                 */
-                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, isMobile: isMobile, dtmfToneAudioContext: dtmfToneAudioContext.current, disableDtmfPlayback: disableDtmfPlayback })))));
+                index: columnIndex + rowIndex * rows.length, digit: button.digit, letter: button.letter, styles: props.styles, onClick: onClickDialpad, onLongPress: onLongPressDialpad, longPressTrigger: longPressTrigger, dtmfToneAudioContext: dtmfToneAudioContext.current, disableDtmfPlayback: disableDtmfPlayback })))));
         }))));
 };
 /**
@@ -24550,6 +24540,16 @@ const ChatScreen = (props) => {
         }
     }), [adapter, fullSizeAttachments, messageThreadProps.messages, onRenderAvatarCallback]);
     /* @conditional-compile-remove(image-gallery) */
+    const inlineImageOptions = {
+        onRenderInlineImage: (inlineImage, defaultOnRender) => {
+            return (React.createElement("span", { onClick: () => onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId), tabIndex: 0, role: "button", onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        onInlineImageClicked(inlineImage.imgAttrs.id || '', inlineImage.messageId);
+                    }
+                } }, defaultOnRender(inlineImage)));
+        }
+    };
+    /* @conditional-compile-remove(image-gallery) */
     const onImageDownloadButtonClicked = React.useCallback((imageUrl, downloadFilename) => {
         if (imageUrl === '') {
             return;
@@ -24590,7 +24590,7 @@ const ChatScreen = (props) => {
                     /* @conditional-compile-remove(file-sharing) */
                     onRenderFileDownloads: onRenderFileDownloads,
                     /* @conditional-compile-remove(image-gallery) */
-                    onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                    inlineImageOptions: inlineImageOptions, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React.createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
                     React.createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
                     React.createElement(react.Stack, { horizontal: formFactor === 'mobile' },
@@ -25906,6 +25906,10 @@ const getLatestCapabilitiesChangedInfo = (state) => {
  * @private
  */
 const getTargetCallees = (state) => state.targetCallees;
+/**
+ * @private
+ */
+const getStartTime = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.startTime; };
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -26018,122 +26022,6 @@ const People = (props) => {
     return (React.createElement(ControlBarButton, Object.assign({}, props, { "data-ui-id": "call-composite-participants-button", strings: strings, labelKey: 'peopleButtonLabelKey', onRenderOnIcon: onRenderOnIcon !== null && onRenderOnIcon !== void 0 ? onRenderOnIcon : icon$2, onRenderOffIcon: onRenderOffIcon !== null && onRenderOffIcon !== void 0 ? onRenderOffIcon : icon$2, onClick: onClick, styles: styles })));
 };
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const themeddialpadModalStyle$1 = (theme) => ({
-    main: {
-        borderRadius: theme.effects.roundedCorner6,
-        padding: '1rem'
-    }
-});
-/**
- * @private
- */
-const themedDialpadStyle$1 = (isMobile, theme) => ({
-    root: {
-        padding: 0,
-        marginLeft: 0,
-        marginRight: 0,
-        maxWidth: '100%'
-    },
-    textField: {
-        root: {
-            borderBottom: `1px solid ${theme.palette.neutralTertiaryAlt}`
-        },
-        field: {
-            backgroundColor: theme.palette.white,
-            fontSize: theme.fonts.large.fontSize,
-            padding: '0 0.5rem ',
-            textAlign: 'center',
-            ':active': {
-                padding: '0 0.5rem'
-            }
-        }
-    },
-    digit: {
-        color: theme.palette.themeDarkAlt
-    }
-});
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-const DEFAULT_Z_INDEX = 1;
-const mainScreenContainerStyle = {
-    height: '100%',
-    width: '100%'
-};
-/**
- * @private
- */
-const mainScreenContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '30rem', minHeight: '22rem' // max height of min-height of composite pages (Configuration page)
- }));
-/**
- * @private
- */
-const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '17.5rem', minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
- }));
-/**
- * @private
- * Drawer styles to be used to house the _DrawerComponent on top of other content on the screen.
- * @param zIndex: this defaults to DEFAULT_Z_INDEX if unset
- */
-const drawerContainerStyles = (zIndex = DEFAULT_Z_INDEX) => ({
-    root: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        // Any zIndex > 0 will work because this is the only absolutely
-        // positioned element in the container.
-        zIndex: zIndex
-    }
-});
-/**
- * @private
- * Page container style for leaving page
- */
-const leavingPageStyle = (palette) => ({
-    background: palette.neutralLighterAlt
-});
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/** @private */
-const SendDtmfDialpad = (props) => {
-    const dialpadProps = usePropsFor$1(Dialpad);
-    const { strings, isMobile, showDialpad, onDismissDialpad } = props;
-    const theme = react.useTheme();
-    const onDismissTriggered = () => {
-        onDismissDialpad();
-    };
-    const [textFieldValue, setTextFieldValue] = React.useState();
-    const onChange = (input) => {
-        if (input.length > 25) {
-            setTextFieldValue(input.slice(1));
-        }
-        else {
-            setTextFieldValue(input);
-        }
-    };
-    const dialpadModalStyle = React.useMemo(() => themeddialpadModalStyle$1(theme), [theme]);
-    const dialpadStyle = React.useMemo(() => themedDialpadStyle$1(isMobile, theme), [theme, isMobile]);
-    if (isMobile) {
-        return (React.createElement(react.Stack, null, showDialpad && (React.createElement(react.Stack, { styles: drawerContainerStyles() },
-            React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onDismissTriggered },
-                React.createElement(react.Stack, { style: { padding: '1rem' } },
-                    React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { showDeleteButton: false, textFieldValue: textFieldValue, onChange: onChange, strings: strings, isMobile: isMobile }))))))));
-    }
-    return (React.createElement(React.Fragment, null, React.createElement(react.Modal, { titleAriaId: strings.dialpadModalAriaLabel, isOpen: showDialpad, onDismiss: onDismissTriggered, isBlocking: true, styles: dialpadModalStyle },
-        React.createElement(react.Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "center" },
-            React.createElement(react.IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings.dialpadCloseModalButtonAriaLabel, onClick: onDismissTriggered, style: { color: theme.palette.black } })),
-        React.createElement(react.Stack, { style: { overflow: 'hidden' } },
-            React.createElement(Dialpad, Object.assign({ styles: dialpadStyle }, dialpadProps, { textFieldValue: textFieldValue, onChange: onChange, showDeleteButton: false, strings: strings, isMobile: isMobile }))))));
-};
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /** @private */
@@ -26396,12 +26284,6 @@ const CallControls = (props) => {
         label: localeStrings.strings.call.moreButtonCallingLabel,
         tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
     }), [localeStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const dialpadStrings = React.useMemo(() => ({
-        dialpadModalAriaLabel: localeStrings.strings.call.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: localeStrings.strings.call.dialpadCloseModalButtonAriaLabel,
-        placeholderText: localeStrings.strings.call.dtmfDialpadPlaceholderText
-    }), [localeStrings]);
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const holdButtonProps = usePropsFor$1(HoldButton);
     /* @conditional-compile-remove(raise-hand) */
@@ -26410,8 +26292,6 @@ const CallControls = (props) => {
     const capabilitiesSelector = useSelector$1(capabilitySelector);
     /* @conditional-compile-remove(reaction) */
     const isReactionAllowed = !(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) || capabilitiesSelector.capabilities.useReactions.isPresent;
-    /* @conditional-compile-remove(PSTN-calls) */
-    const alternateCallerId = useAdapter().getState().alternateCallerId;
     const devicesButtonProps = usePropsFor$1(DevicesButton);
     let numberOfButtons = 0;
     const screenShareButtonIsEnabled = isEnabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton);
@@ -26476,21 +26356,6 @@ const CallControls = (props) => {
                 ['data-ui-id']: 'hold-button'
             });
         }
-        /* @conditional-compile-remove(PSTN-calls) */
-        // dtmf tone sending only works for 1:1 PSTN call
-        if (alternateCallerId) {
-            items.push({
-                key: 'showDialpadKey',
-                text: localeStrings.strings.call.openDtmfDialpadLabel,
-                onClick: () => {
-                    setShowDialpad(true);
-                },
-                iconProps: { iconName: 'PeoplePaneOpenDialpad', styles: { root: { lineHeight: 0 } } },
-                itemProps: {
-                    styles: buttonFlyoutIncreasedSizeStyles
-                }
-            });
-        }
         return items;
     };
     const customDrawerButtons = React.useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof options === 'object' ? options : undefined), typeof options === 'object' ? options.displayType : undefined), [options]);
@@ -26587,20 +26452,12 @@ const CallControls = (props) => {
                 } }, element));
         });
     }
-    /* @conditional-compile-remove(PSTN-calls) */
-    const [showDialpad, setShowDialpad] = React.useState(false);
     const theme = react.useTheme();
     // when props.options is false then we want to hide the whole control bar.
     if (props.options === false) {
         return React.createElement(React.Fragment, null);
     }
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onDismissDialpad = () => {
-        setShowDialpad(false);
-    };
     return (React.createElement(react.Stack, { horizontalAlign: "center", className: callControlsContainerStyles },
-        /* @conditional-compile-remove(PSTN-calls) */
-        React.createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React.createElement(react.Stack.Item, null,
             React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 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) })),
@@ -28058,6 +27915,48 @@ const PreparedMoreDrawer = (props) => {
     return React.createElement(MoreDrawer, Object.assign({}, props, deviceProps, callHandlers, { strings: moreDrawerStrings }));
 };
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+const DEFAULT_Z_INDEX = 1;
+const mainScreenContainerStyle = {
+    height: '100%',
+    width: '100%'
+};
+/**
+ * @private
+ */
+const mainScreenContainerStyleDesktop = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '30rem', minHeight: '22rem' // max height of min-height of composite pages (Configuration page)
+ }));
+/**
+ * @private
+ */
+const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.assign({}, mainScreenContainerStyle), { minWidth: '17.5rem', minHeight: '13rem' // max height of min-height of composite pages (Configuration page & Call page)
+ }));
+/**
+ * @private
+ * Drawer styles to be used to house the _DrawerComponent on top of other content on the screen.
+ * @param zIndex: this defaults to DEFAULT_Z_INDEX if unset
+ */
+const drawerContainerStyles = (zIndex = DEFAULT_Z_INDEX) => ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        // Any zIndex > 0 will work because this is the only absolutely
+        // positioned element in the container.
+        zIndex: zIndex
+    }
+});
+/**
+ * @private
+ * Page container style for leaving page
+ */
+const leavingPageStyle = (palette) => ({
+    background: palette.neutralLighterAlt
+});
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 const SIDE_PANE_PADDING_LR_REM = 0.25;
@@ -28515,7 +28414,7 @@ const CallingDialpad = (props) => {
     const callButtonStyle = React.useMemo(() => themedCallButtonStyle(theme), [theme]);
     const dialpadComponent = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, isMobile: isMobile }),
+            React.createElement(Dialpad, { styles: dialpadStyle, onChange: setTextFieldInput, longPressTrigger: isMobile ? 'touch' : 'mouseAndTouch' }),
             React.createElement(react.PrimaryButton, { text: strings.dialpadStartCallButtonLabel, onRenderIcon: () => DialpadStartCallIconTrampoline(), onClick: onClickCall, styles: callButtonStyle, disabled: textFieldInput === '' })));
     };
     if (isMobile) {
@@ -29486,7 +29385,7 @@ const messageBarStyles = {
  * @private
  */
 const CallArrangement = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const containerClassName = React.useMemo(() => {
         return props.mobileView ? containerStyleMobile : containerStyleDesktop;
     }, [props.mobileView]);
@@ -29562,14 +29461,6 @@ const CallArrangement = (props) => {
             position: 'relative'
         };
     }, [isMobileWithActivePane, props.mobileView]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const callWithChatStrings = useCallWithChatCompositeStrings();
-    /* @conditional-compile-remove(PSTN-calls) */
-    const dialpadStrings = React.useMemo(() => ({
-        dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
-        placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
-    }), [callWithChatStrings]);
     /* @conditional-compile-remove(video-background-effects) */
     const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
     /* @conditional-compile-remove(video-background-effects) */
@@ -29585,18 +29476,6 @@ const CallArrangement = (props) => {
         setShowDrawer(false);
         togglePeoplePane();
     }, [togglePeoplePane]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const alternateCallerId = useAdapter().getState().alternateCallerId;
-    /* @conditional-compile-remove(PSTN-calls) */
-    const [showDtmfDialpad, setShowDtmfDialpad] = React.useState(false);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onDismissDtmfDialpad = () => {
-        setShowDtmfDialpad(false);
-    };
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onClickShowDialpad = () => {
-        setShowDtmfDialpad(true);
-    };
     const drawerContainerStylesValue = React.useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);
     /* @conditional-compile-remove(rooms) */
     const role = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
@@ -29649,9 +29528,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(close-captions) */
                     isCaptionsOn: isCaptionsOn,
                     /* @conditional-compile-remove(video-background-effects) */
-                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined,
-                    /* @conditional-compile-remove(PSTN-calls) */
-                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar,
+                    onClickVideoEffects: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined, displayVertical: verticalControlBar,
                     /* @conditional-compile-remove(gallery-layouts) */
                     onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange,
                     /* @conditional-compile-remove(gallery-layouts) */
@@ -29664,8 +29541,6 @@ const CallArrangement = (props) => {
                     dtmfDialerPresent: props.dtmfDialerPresent, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
                 ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React.createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked,
-                        /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined,
                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                         disableButtonsForHoldScreen: isInLocalHold,
                         /* @conditional-compile-remove(close-captions) */
@@ -29678,9 +29553,6 @@ const CallArrangement = (props) => {
                         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 }))),
                 React.createElement(react.Stack, { horizontal: true, grow: true },
                     React.createElement(react.Stack.Item, { style: callCompositeContainerCSS },
                         React.createElement(react.Stack.Item, { styles: callGalleryStyles, grow: true },
@@ -29703,7 +29575,7 @@ const CallArrangement = (props) => {
                         maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, minWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
                             ? undefined
                             : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
-                            isDisabled$4((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
+                            isDisabled$4((_h = props.callControlProps.options) === null || _h === void 0 ? void 0 : _h.participantsButton), onChatButtonClicked: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.onClick, disableChatButton: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.disabled }),
                     props.mobileView && (React.createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, strings: modalStrings, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition, onDismissSidePane: () => {
                             closePeoplePane();
                             if (props.onCloseChatPane) {
@@ -30119,15 +29991,19 @@ const DtmfDialpadPageContent = (props) => {
             React.createElement(Dialpad, { onSendDtmfTone: (tone) => __awaiter$b(void 0, void 0, void 0, function* () {
                     /* @conditional-compile-remove(dtmf-dialer) */
                     yield adapter.sendDtmfTone(tone);
-                }), dialpadMode: 'dtmf' }))));
+                }), longPressTrigger: props.mobileView ? 'touch' : 'mouseAndTouch', dialpadMode: 'dtmf' }))));
 };
 const DtmfDialerContentTimer = () => {
     const [time, setTime] = React.useState(0);
     const elapsedTime = getReadableTime$1(time);
-    const startTime = React.useRef(performance.now());
+    const statefulStartTime = useSelector$1(getStartTime);
+    const startTime = React.useMemo(() => {
+        return statefulStartTime !== null && statefulStartTime !== void 0 ? statefulStartTime : new Date(Date.now());
+    }, [statefulStartTime]);
     React.useEffect(() => {
         const interval = setInterval(() => {
-            setTime(performance.now() - startTime.current);
+            var _a;
+            setTime((_a = new Date(Date.now()).getTime() - (startTime === null || startTime === void 0 ? void 0 : startTime.getTime())) !== null && _a !== void 0 ? _a : 0);
         }, 10);
         return () => {
             clearInterval(interval);