npm - @azure/communication-react - Versions diffs - 1.5.1-alpha-202305050017 → 1.5.1-alpha-202305090013 - Mend

@azure/communication-react 1.5.1-alpha-202305050017 → 1.5.1-alpha-202305090013

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 (64) hide show

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

@@ -14,6 +14,8 @@ var React = require('react');
 var react = require('@fluentui/react');
 var reactNorthstar = require('@fluentui/react-northstar');
 var reactIcons = require('@fluentui/react-icons');
+var textareaCaretTs = require('textarea-caret-ts');
+var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var reactAriaLive = require('react-aria-live');
 var htmlToReact = require('html-to-react');
@@ -162,7 +164,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202305050017';
+var telemetryVersion = '1.5.1-alpha-202305090013';
 // Copyright (c) Microsoft Corporation.
 /**
@@ -408,7 +410,7 @@ const getSupportedSpokenLanguages = (state, props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$H = (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); } }
@@ -446,7 +448,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$H(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$J(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -572,7 +574,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$G = (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); } }
@@ -593,7 +595,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @private
  */
 const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callClient, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$I(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?
@@ -613,7 +615,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$I(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -622,7 +624,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             yield call.stopVideo(stream);
         }
     });
-    const onToggleCamera = (options) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$I(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.
@@ -670,19 +672,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }
         }
     });
-    const onSelectMicrophone = (device) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -705,19 +707,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$I(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$G(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$G(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$G(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$G(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$I(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$I(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$I(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$I(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$G(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$G(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$I(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$I(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -733,7 +735,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$G(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -764,7 +766,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$G(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$I(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -785,7 +787,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$I(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');
@@ -798,18 +800,18 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         yield disposeAllLocalPreviewViews(callClient);
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$G(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$I(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$G(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$I(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$G(void 0, void 0, void 0, function* () {
+    const onRemoveVideoBackgroundEffects = () => __awaiter$I(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) {
@@ -817,7 +819,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onBlurVideoBackground = (backgroundBlurConfig) => __awaiter$I(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) {
@@ -825,7 +827,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(video-background-effects) */
-    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onReplaceVideoBackground = (backgroundReplacementConfig) => __awaiter$I(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) {
@@ -835,19 +837,19 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
         }
     });
     /* @conditional-compile-remove(close-captions) */
-    const onStartCaptions = (options) => __awaiter$G(void 0, void 0, void 0, function* () {
+    const onStartCaptions = (options) => __awaiter$I(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$G(void 0, void 0, void 0, function* () {
+    const onStopCaptions = () => __awaiter$I(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$G(void 0, void 0, void 0, function* () {
+    const onSetSpokenLanguage = (language) => __awaiter$I(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$G(void 0, void 0, void 0, function* () {
+    const onSetCaptionLanguage = (language) => __awaiter$I(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.feature(communicationCalling.Features.TeamsCaptions).setCaptionLanguage(language));
     });
     return {
@@ -893,7 +895,7 @@ const createDefaultCommonCallingHandlers = memoizeOne__default['default']((callC
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$F = (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); } }
@@ -918,7 +920,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             return callAgent === null || callAgent === void 0 ? void 0 : callAgent.startCall(participants, options);
         },
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$F(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$H(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);
@@ -926,7 +928,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             else if (communicationCommon.isCommunicationUserIdentifier(participant) || communicationCommon.isMicrosoftTeamsUserIdentifier(participant)) {
                 call === null || call === void 0 ? void 0 : call.addParticipant(participant);
             }
-        }), onRemoveParticipant: (userId) => __awaiter$F(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$H(void 0, void 0, void 0, function* () {
             const participant = _toCommunicationIdentifier(userId);
             yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
         }) });
@@ -934,7 +936,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$E = (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); } }
@@ -966,7 +968,7 @@ const createDefaultTeamsCallingHandlers = memoizeOne__default['default']((callCl
         },
         /* @conditional-compile-remove(teams-identity-support) */
         /* @conditional-compile-remove(PSTN-calls) */
-        onAddParticipant: (userId, options) => __awaiter$E(void 0, void 0, void 0, function* () {
+        onAddParticipant: (userId, options) => __awaiter$G(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;
@@ -979,7 +981,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$E(void 0, void 0, void 0, function* () {
+        }), onRemoveParticipant: (userId) => __awaiter$G(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!');
@@ -1041,7 +1043,7 @@ const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions,
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$D = (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); } }
@@ -1090,13 +1092,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$D(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$F(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$D(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$F(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -1462,7 +1464,7 @@ function convertFromSDKToCaptionInfoState(caption) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$C = (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); } }
@@ -2125,7 +2127,7 @@ class CallContext$2 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$C(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$E(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -2553,7 +2555,7 @@ function _logStreamEvent(eventName, streamLogInfo, error) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$B = (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); } }
@@ -2563,7 +2565,7 @@ var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewVideo(context, internalContext, callId, stream, participantId, options) {
-    return __awaiter$B(this, void 0, void 0, function* () {
+    return __awaiter$D(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.
@@ -2685,7 +2687,7 @@ function createViewVideo(context, internalContext, callId, stream, participantId
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$B(this, void 0, void 0, function* () {
+    return __awaiter$D(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -2853,7 +2855,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$B(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
+        return context.withAsyncErrorTeedToState(() => __awaiter$D(this, void 0, void 0, function* () { return yield createViewUnparentedVideo(context, internalContext, stream, options); }), 'Call.startVideo')();
     }
     else {
         _logStreamEvent(EventNames.CREATE_STREAM_INVALID_PARAMS, { streamType });
@@ -3302,7 +3304,7 @@ class CallSubscriber {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$A = (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); } }
@@ -3322,14 +3324,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$A(this, void 0, void 0, function* () {
+                    return __awaiter$C(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$A(this, void 0, void 0, function* () {
+                    return __awaiter$C(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -3566,7 +3568,7 @@ const clearCallRelatedState = (context, internalContext) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$z = (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); } }
@@ -3592,56 +3594,56 @@ class ProxyCallCommon {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$z(this, void 0, void 0, function* () {
+                    return __awaiter$B(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
@@ -3675,7 +3677,7 @@ class ProxyTeamsCaptionsFeature {
     get(target, prop) {
         switch (prop) {
             case 'startCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$z(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     var _a, _b;
                     const ret = yield target.startCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, true);
@@ -3683,19 +3685,19 @@ class ProxyTeamsCaptionsFeature {
                     return ret;
                 }), 'Call.feature');
             case 'stopCaptions':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$z(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     const ret = yield target.stopCaptions(...args);
                     this._context.setIsCaptionActive(this._call.id, false);
                     return ret;
                 }), 'Call.feature');
             case 'setSpokenLanguage':
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$z(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(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$z(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$B(this, void 0, void 0, function* () {
                     const ret = yield target.setCaptionLanguage(...args);
                     this._context.setSelectedCaptionLanguage(this._call.id, args[0]);
                     return ret;
@@ -3708,7 +3710,7 @@ class ProxyTeamsCaptionsFeature {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$y = (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); } }
@@ -3722,7 +3724,7 @@ class ProxyCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$y(this, void 0, void 0, function* () {
+                    return __awaiter$A(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -3943,7 +3945,7 @@ class InternalCallContext {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$x = (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); } }
@@ -3958,7 +3960,7 @@ class ProxyTeamsCall extends ProxyCallCommon {
         switch (prop) {
             case 'addParticipant': {
                 return this.getContext().withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$x(this, void 0, void 0, function* () {
+                    return __awaiter$z(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'TeamsCall.addParticipant');
@@ -4073,7 +4075,7 @@ const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$w = (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); } }
@@ -4095,7 +4097,7 @@ class ProxyVideoStreamRendererView {
     get(target, prop) {
         switch (prop) {
             case 'updateScalingMode': {
-                return (...args) => __awaiter$w(this, void 0, void 0, function* () {
+                return (...args) => __awaiter$y(this, void 0, void 0, function* () {
                     yield target.updateScalingMode(...args);
                     this._context.setRemoteVideoStreamViewScalingMode(this._callId, this._participantId, this._streamId, args[0]);
                 });
@@ -4116,7 +4118,7 @@ const videoStreamRendererViewDeclaratify = (view, context, callId, participantId
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4138,7 +4140,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$v(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$x(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.
@@ -4151,7 +4153,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'createTeamsCallAgent': {
-                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$v(this, void 0, void 0, function* () {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$x(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.
@@ -4164,7 +4166,7 @@ class ProxyCallClient {
                 }), 'CallClient.createTeamsCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$v(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$x(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.
@@ -4193,7 +4195,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$v(this, void 0, void 0, function* () {
+                        return Object.assign(Object.assign({}, feature), { getEnvironmentInfo: () => __awaiter$x(this, void 0, void 0, function* () {
                                 const environmentInfo = yield feature.getEnvironmentInfo();
                                 this._context.setEnvironmentInfo(environmentInfo);
                                 return environmentInfo;
@@ -4246,7 +4248,7 @@ const createStatefulCallClientWithDeps = (callClient, context, internalContext)
     });
     Object.defineProperty(callClient, 'createView', {
         configurable: false,
-        value: (callId, participantId, stream, options) => __awaiter$v(void 0, void 0, void 0, function* () {
+        value: (callId, participantId, stream, options) => __awaiter$x(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.
@@ -4475,7 +4477,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
     wordBreak: 'break-word'
 });
-var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",micPrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organizational policy.",blockedWarningLinkText:"Details"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneAccessDeniedSafari:"Unable to access microphone. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAccessDeniedSafari:"Unable to access camera. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link.",startScreenSharingGeneric:"There was an issue starting screen share.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network.",unableToStartVideoEffect:"Unable to apply video effect."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$d={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraSitePermissionsRequest$d={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneSitePermissionsRequest$d={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneSitePermissionsCheck$d={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraSitePermissionsCheck$d={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneSitePermissionsCheck$d={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneSitePermissionsDenied$d={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraAndMicrophoneSitePermissionsDeniedSafari$d={primaryText:"Unable to access camera and microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDenied$d={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDenied$d={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDeniedSafari$d={primaryText:"Unable to access camera",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDeniedSafari$d={primaryText:"Unable to access microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$e={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$e={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var VerticalGallery$e={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$d,CameraSitePermissionsRequest:CameraSitePermissionsRequest$d,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$d,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$d,CameraSitePermissionsCheck:CameraSitePermissionsCheck$d,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$d,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$d,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$d,CameraSitePermissionsDenied:CameraSitePermissionsDenied$d,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$d,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$d,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$d,UnsupportedBrowser:UnsupportedBrowser$e,UnsupportedBrowserVersion:UnsupportedBrowserVersion$e,UnsupportedOperatingSystem:UnsupportedOperatingSystem$e,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d,VerticalGallery:VerticalGallery$e};
+var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var mentionPopover={mentionPopoverHeader:"Suggestions"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",micPrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$d={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organizational policy.",blockedWarningLinkText:"Details"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneAccessDeniedSafari:"Unable to access microphone. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAccessDeniedSafari:"Unable to access camera. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link.",startScreenSharingGeneric:"There was an issue starting screen share.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network.",unableToStartVideoEffect:"Unable to apply video effect."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$d={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$d={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$d={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraSitePermissionsRequest$d={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneSitePermissionsRequest$d={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneSitePermissionsCheck$d={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraSitePermissionsCheck$d={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneSitePermissionsCheck$d={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneSitePermissionsDenied$d={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraAndMicrophoneSitePermissionsDeniedSafari$d={primaryText:"Unable to access camera and microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDenied$d={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDenied$d={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDeniedSafari$d={primaryText:"Unable to access camera",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDeniedSafari$d={primaryText:"Unable to access microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$e={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$e={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$e={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$d={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$d={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var VerticalGallery$e={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,mentionPopover:mentionPopover,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton$d,videoTile:videoTile$d,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$d,CameraSitePermissionsRequest:CameraSitePermissionsRequest$d,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$d,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$d,CameraSitePermissionsCheck:CameraSitePermissionsCheck$d,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$d,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$d,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$d,CameraSitePermissionsDenied:CameraSitePermissionsDenied$d,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$d,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$d,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$d,UnsupportedBrowser:UnsupportedBrowser$e,UnsupportedBrowserVersion:UnsupportedBrowserVersion$e,UnsupportedOperatingSystem:UnsupportedOperatingSystem$e,BrowserPermissionDenied:BrowserPermissionDenied$d,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$d,VerticalGallery:VerticalGallery$e};
 var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed participant",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$c={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$c={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$c={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave",tooltipContent:"Leave call"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off",onSplitButtonPrimaryActionCamera:"Turn off camera",offSplitButtonPrimaryActionCamera:"Turn on camera",cameraPrimaryActionSplitButtonTitle:"Use camera"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off",offSplitButtonMicrophonePrimaryAction:"Unmute microphone",onSplitButtonMicrophonePrimaryAction:"Mute microphone",micPrimaryActionSplitButtonTitle:"Use microphone"};var devicesButton$c={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose audio device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose speaker"};var participantsButton$c={label:"People",tooltipContent:"Show participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied"};var screenShareButton$c={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$c={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file",blockedWarningText:"This message was deleted due to organisational policy.",blockedWarningLinkText:"Details"};var errorBar$c={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneAccessDeniedSafari:"Unable to access microphone. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAccessDeniedSafari:"Unable to access camera. Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link.",startScreenSharingGeneric:"There was an issue starting screen share.",cameraFrozenForRemoteParticipants:"Users in the call are having issues seeing your video. Please check your devices and network."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed participant",fitRemoteParticipantToFrame:"Fit to frame",fillRemoteParticipantFrame:"Fill frame",pinParticipantForMe:"Pin for me",pinParticipantForMeLimitReached:"Pin (limit reached)",unpinParticipantForMe:"Unpin",pinParticipantMenuItemAriaLabel:"Pin {participantName}",unpinParticipantMenuItemAriaLabel:"Unpin {participantName}",pinnedParticipantAnnouncementAriaLabel:"Pinned {participantName}",unpinnedParticipantAnnouncementAriaLabel:"Unpinned {participantName}"};var dialpad$c={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton$c={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile$c={participantStateRinging:"Calling...",participantStateHold:"On hold"};var CameraAndMicrophoneSitePermissionsRequest$c={primaryText:"Allow {appName} to use your camera and microphone",secondaryText:"This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Allow camera and microphone access"};var CameraSitePermissionsRequest$c={primaryText:"Allow {appName} to use your camera",secondaryText:"This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Allow camera access"};var MicrophoneSitePermissionsRequest$c={primaryText:"Allow {appName} to use your microphone",secondaryText:"This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Allow microphone access"};var CameraAndMicrophoneSitePermissionsCheck$c={primaryText:"Checking for camera and microphone access",secondaryText:"Allow access if prompted. This is so participants can see and hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera and microphone",ariaLabel:"Checking for camera and microphone access. Allow access if prompted."};var CameraSitePermissionsCheck$c={primaryText:"Checking for camera access",secondaryText:"Allow access if prompted. This is so participants can see you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without camera",ariaLabel:"Checking for camera access. Allow access if prompted."};var MicrophoneSitePermissionsCheck$c={primaryText:"Checking for microphone access",secondaryText:"Allow access if prompted. This is so participants can hear you.",linkText:"Need help? Get troubleshooting help",primaryButtonText:"Continue without microphone",ariaLabel:"Checking for microphone access. Allow access if prompted."};var CameraAndMicrophoneSitePermissionsDenied$c={primaryText:"Unable to access camera and microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraAndMicrophoneSitePermissionsDeniedSafari$c={primaryText:"Unable to access camera and microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera and microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDenied$c={primaryText:"Unable to access camera",secondaryText:"Click the lock icon in the address bar to grant camera permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDenied$c={primaryText:"Unable to access microphone",secondaryText:"Click the lock icon in the address bar to grant microphone permissions to this webpage. A page refresh may be required.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var CameraSitePermissionsDeniedSafari$c={primaryText:"Unable to access camera",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without camera",linkText:"Need help? Get troubleshooting help"};var MicrophoneSitePermissionsDeniedSafari$c={primaryText:"Unable to access microphone",secondaryText:"Refresh the page to allow permissions, or check this browser’s settings and verify permissions are enabled for this website.",primaryButtonText:"Continue without microphone",linkText:"Need help? Get troubleshooting help"};var UnsupportedBrowser$d={primaryText:"Browser not supported",secondaryText:"Please join this call using a compatible browser.",moreHelpLinkText:"See compatibility requirements"};var UnsupportedBrowserVersion$d={primaryText:"Browser update needed",secondaryText:"To ensure the best call possible, please update your browser and then try joining the call again.",moreHelpLinkText:"See compatibility requirements",continueAnywayButtonText:"Start call without updating"};var UnsupportedOperatingSystem$d={primaryText:"Operating system not supported",secondaryText:"Please join this call using a device with a compatible operating system.",moreHelpLinkText:"See compatibility requirements"};var BrowserPermissionDenied$c={primaryText:"Can't use your camera or microphone",secondaryText:"Your browser might not have access to your camera or microphone. To fix this, open System Preferences.",primaryButtonText:"Try again",linkText:"Need help? Get troubleshooting help"};var BrowserPermissionDeniedIOS$c={primaryText:"Allow microphone access to continue",secondaryText:"So other participants can hear you.",primaryButtonText:"Try again",imageAltText:"Microphone and camera device permission location for iOS",linkText:"Need help? Get troubleshooting help",step1Text:"Go to the Settings app",step2Text:"Scroll down to settings for this browser",step3Text:"Turn on Microphone (Camera optional)",step4Text:"Try joining the call again",step1DigitText:"1",step2DigitText:"2",step3DigitText:"3",step4DigitText:"4"};var VerticalGallery$d={leftNavButtonAriaLabel:"previous page",rightNavButtonAriaLabel:"next page"};var en_GB$1 = {participantItem:participantItem$c,typingIndicator:typingIndicator$c,sendBox:sendBox$c,messageStatusIndicator:messageStatusIndicator$c,endCallButton:endCallButton$c,cameraButton:cameraButton$c,microphoneButton:microphoneButton$c,devicesButton:devicesButton$c,participantsButton:participantsButton$c,screenShareButton:screenShareButton$c,messageThread:messageThread$c,errorBar:errorBar$c,videoGallery:videoGallery$c,dialpad:dialpad$c,holdButton:holdButton$c,videoTile:videoTile$c,CameraAndMicrophoneSitePermissionsRequest:CameraAndMicrophoneSitePermissionsRequest$c,CameraSitePermissionsRequest:CameraSitePermissionsRequest$c,MicrophoneSitePermissionsRequest:MicrophoneSitePermissionsRequest$c,CameraAndMicrophoneSitePermissionsCheck:CameraAndMicrophoneSitePermissionsCheck$c,CameraSitePermissionsCheck:CameraSitePermissionsCheck$c,MicrophoneSitePermissionsCheck:MicrophoneSitePermissionsCheck$c,CameraAndMicrophoneSitePermissionsDenied:CameraAndMicrophoneSitePermissionsDenied$c,CameraAndMicrophoneSitePermissionsDeniedSafari:CameraAndMicrophoneSitePermissionsDeniedSafari$c,CameraSitePermissionsDenied:CameraSitePermissionsDenied$c,MicrophoneSitePermissionsDenied:MicrophoneSitePermissionsDenied$c,CameraSitePermissionsDeniedSafari:CameraSitePermissionsDeniedSafari$c,MicrophoneSitePermissionsDeniedSafari:MicrophoneSitePermissionsDeniedSafari$c,UnsupportedBrowser:UnsupportedBrowser$d,UnsupportedBrowserVersion:UnsupportedBrowserVersion$d,UnsupportedOperatingSystem:UnsupportedOperatingSystem$d,BrowserPermissionDenied:BrowserPermissionDenied$c,BrowserPermissionDeniedIOS:BrowserPermissionDeniedIOS$c,VerticalGallery:VerticalGallery$d};
@@ -4638,10 +4640,10 @@ const defaultIdentifiers = {
     horizontalGalleryVideoTile: 'horizontal-gallery-video-tile',
     /* @conditional-compile-remove(vertical-gallery) */
     verticalGalleryPageCounter: 'vertical-gallery-page-counter',
-    /* @conditional-compile-remove(at-mention) */
-    atMentionSuggestionList: 'at-mention-suggestion-list',
-    /* @conditional-compile-remove(at-mention) */
-    atMentionSuggestionItem: 'at-mention-suggestion-item'
+    /* @conditional-compile-remove(mention) */
+    mentionSuggestionList: 'mention-suggestion-list',
+    /* @conditional-compile-remove(mention) */
+    mentionSuggestionItem: 'mention-suggestion-item'
 };
 /**
  * @private
@@ -5835,11 +5837,253 @@ const getPerceptualBrightnessOfHexColor = (hexColor) => {
 };
 // Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ * z-index to ensure that chat container has lower z-index than mention popover
+ */
+const CHAT_CONTAINER_ZINDEX$1 = 1;
+/**
+ * @private
+ */
+const mentionPopoverContainerStyle = (theme) => react.mergeStyles({
+    boxShadow: theme.effects.elevation16,
+    background: theme.semanticColors.bodyBackground,
+    overflow: 'visible',
+    // zIndex to set the mentionPopover above the chat container
+    zIndex: CHAT_CONTAINER_ZINDEX$1 + 1
+});
+/**
+ * @private
+ */
+const headerStyleThemed = (theme) => {
+    return {
+        root: {
+            color: theme.palette.neutralSecondary,
+            margin: '0.5rem 1rem 0.25rem',
+            fontSize: theme.fonts.smallPlus.fontSize
+        }
+    };
+};
+/**
+ * @private
+ */
+react.mergeStyles({
+    height: '100%',
+    overflowY: 'visible',
+    overflowX: 'hidden'
+});
+/**
+ * @private
+ */
+const suggestionListStyle = react.mergeStyles({
+    padding: '0.25rem 0rem 0',
+    overflow: 'visible'
+});
+/**
+ * @private
+ */
+const suggestionItemWrapperStyle = (theme) => {
+    return react.mergeStyles({
+        margin: '0.05rem 0.1rem',
+        '&:focus-visible': {
+            outline: `${theme.palette.black} solid 0.1rem`
+        }
+    });
+};
+/**
+ * @private
+ */
+const suggestionItemStackStyle = (theme, isSuggestionHovered, activeBorder) => {
+    return react.mergeStyles({
+        width: '10rem',
+        alignItems: 'center',
+        height: '36px',
+        padding: '0 0.75rem',
+        background: isSuggestionHovered ? theme.palette.neutralLight : theme.palette.white,
+        border: activeBorder ? `0.0625rem solid ${theme.palette.neutralSecondary}` : 'none'
+    });
+};
+// Copyright (c) Microsoft Corporation.
+/**
+ * Component to render a pop-up of mention suggestions.
+ *
+ * @internal
+ */
+const _MentionPopover = (props) => {
+    const { suggestions, activeSuggestionIndex, title, target, targetPositionOffset, onRenderSuggestionItem, onSuggestionSelected, onDismiss, location } = props;
+    const theme = react.useTheme();
+    /* @conditional-compile-remove(mention) */
+    const ids = useIdentifiers();
+    const localeStrings = useLocale$1().strings;
+    const popoverRef = React.useRef();
+    const [position, setPosition] = React.useState({ left: 0 });
+    const [hoveredSuggestion, setHoveredSuggestion] = React.useState(undefined);
+    const [changedSelection, setChangedSelection] = React.useState(undefined); // Selection UI as per teams
+    const dismissPopoverWhenClickingOutside = React.useCallback((e) => {
+        const target = e.target;
+        if (popoverRef.current && !popoverRef.current.contains(target)) {
+            onDismiss && onDismiss();
+        }
+    }, [onDismiss]);
+    React.useEffect(() => {
+        if (changedSelection === undefined) {
+            setChangedSelection(false);
+        }
+        else if (changedSelection === false) {
+            setChangedSelection(true);
+        }
+    }, [activeSuggestionIndex, changedSelection]);
+    React.useEffect(() => {
+        window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
+        return () => {
+            window && window.removeEventListener('click', dismissPopoverWhenClickingOutside);
+        };
+    }, [dismissPopoverWhenClickingOutside]);
+    // Determine popover position
+    React.useEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const rect = (_a = target === null || target === void 0 ? void 0 : target.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const maxWidth = 200;
+        const finalPosition = { maxWidth };
+        // Figure out whether it will fit horizontally
+        const leftOffset = (_b = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.left) !== null && _b !== void 0 ? _b : 0;
+        if (leftOffset + maxWidth > ((_c = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _c !== void 0 ? _c : 0)) {
+            finalPosition.right = ((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0) - leftOffset;
+        }
+        else {
+            finalPosition.left = leftOffset;
+        }
+        if (location === 'below') {
+            finalPosition.top = ((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0) + ((_f = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _f !== void 0 ? _f : 0);
+        }
+        else {
+            // (location === 'above')
+            finalPosition.bottom = ((_g = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _g !== void 0 ? _g : 0) - ((_h = targetPositionOffset === null || targetPositionOffset === void 0 ? void 0 : targetPositionOffset.top) !== null && _h !== void 0 ? _h : 0);
+        }
+        setPosition(finalPosition);
+    }, [location, target, targetPositionOffset]);
+    const handleOnKeyDown = React.useCallback((e) => {
+        switch (e.key) {
+            case 'Escape':
+                onDismiss && onDismiss();
+                break;
+        }
+    }, [onDismiss]);
+    const personaRenderer = React.useCallback((displayName) => {
+        const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
+        const avatarOptions = {
+            text: (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayNamePlaceholder,
+            size: react.PersonaSize.size24,
+            initialsColor: theme.palette.neutralLight,
+            initialsTextColor: theme.palette.neutralSecondary,
+            showOverflowTooltip: false,
+            showUnknownPersonaCoin: !(displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || displayName === displayNamePlaceholder
+        };
+        return React__default['default'].createElement(react.Persona, Object.assign({}, avatarOptions));
+    }, [localeStrings, theme]);
+    const defaultOnRenderSuggestionItem = React.useCallback((suggestion, onSuggestionSelected, active) => {
+        return (React__default['default'].createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
+                handleOnKeyDown(e);
+            }, className: suggestionItemWrapperStyle(theme) },
+            React__default['default'].createElement(react.Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, (changedSelection !== null && changedSelection !== void 0 ? changedSelection : false) && active) }, personaRenderer(suggestion.displayText))));
+    }, [
+        handleOnKeyDown,
+        theme,
+        /* @conditional-compile-remove(mention) */
+        ids,
+        hoveredSuggestion,
+        changedSelection,
+        personaRenderer
+    ]);
+    const getHeaderTitle = React.useCallback(() => {
+        if (title) {
+            return title;
+        }
+        /* @conditional-compile-remove(mention) */
+        return localeStrings.mentionPopover.mentionPopoverHeader;
+    }, [localeStrings, title]);
+    return (React__default['default'].createElement("div", { ref: popoverRef },
+        React__default['default'].createElement(react.Stack, { className: react.mergeStyles({
+                maxHeight: 212,
+                maxWidth: position.maxWidth
+            }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
+            React__default['default'].createElement(react.Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
+            React__default['default'].createElement(react.Stack
+            /* @conditional-compile-remove(mention) */
+            , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
+                const active = index === activeSuggestionIndex;
+                return onRenderSuggestionItem
+                    ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
+                    : defaultOnRenderSuggestionItem(suggestion, onSuggestionSelected, active);
+            })))));
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* @conditional-compile-remove(mention) */
+const defaultMentionTrigger = '@';
 /**
  * @private
  */
 const InputBoxComponent = (props) => {
-    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
+    const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children,
+    /* @conditional-compile-remove(mention) */
+    mentionLookupOptions } = props;
+    const inputBoxRef = React.useRef(null);
+    /* @conditional-compile-remove(mention) */
+    // Current suggestion list, provided by the callback
+    const [mentionSuggestions, setMentionSuggestions] = React.useState([]);
+    /* @conditional-compile-remove(mention) */
+    // Current suggestion list, provided by the callback
+    const [activeSuggestionIndex, setActiveSuggestionIndex] = React.useState(undefined);
+    /* @conditional-compile-remove(mention) */
+    // Index of the current trigger character in the text field
+    const [currentTriggerStartIndex, setCurrentTriggerStartIndex] = React.useState(-1);
+    /* @conditional-compile-remove(mention) */
+    const [inputTextValue, setInputTextValue] = React.useState('');
+    /* @conditional-compile-remove(mention) */
+    const [tagsValue, setTagsValue] = React.useState([]);
+    /* @conditional-compile-remove(mention) */
+    const [selectionStartValue, setSelectionStartValue] = React.useState(null);
+    /* @conditional-compile-remove(mention) */
+    const [selectionEndValue, setSelectionEndValue] = React.useState(null);
+    /* @conditional-compile-remove(mention) */
+    const [shouldHandleOnMouseDownDuringSelect, setShouldHandleOnMouseDownDuringSelect] = React.useState(true);
+    /* @conditional-compile-remove(mention) */
+    // Caret position in the text field
+    const [caretPosition, setCaretPosition] = React.useState(undefined);
+    /* @conditional-compile-remove(mention) */
+    // Index of where the caret is in the text field
+    const [caretIndex, setCaretIndex] = React.useState(undefined);
+    /* @conditional-compile-remove(mention) */
+    const localeStrings = useLocale$1().strings;
+    /* @conditional-compile-remove(mention) */
+    const updateMentionSuggestions = React.useCallback((suggestions) => {
+        var _a;
+        setMentionSuggestions(suggestions);
+        if (caretIndex !== undefined) {
+            (_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionEnd(caretIndex);
+        }
+    }, [textFieldRef, caretIndex]);
+    /* @conditional-compile-remove(mention) */
+    // Parse the text and get the plain text version to display in the input box
+    React.useEffect(() => {
+        const trigger = (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) || defaultMentionTrigger;
+        const [tags, plainText] = textToTagParser(textValue, trigger);
+        setInputTextValue(plainText);
+        setTagsValue(tags);
+        updateMentionSuggestions([]);
+    }, [textValue, mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger, updateMentionSuggestions]);
     const mergedRootStyle = react.mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
     const mergedTextFiledStyle = react.mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
     const mergedTextContainerStyle = react.mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
@@ -5847,20 +6091,307 @@ const InputBoxComponent = (props) => {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
         errorMessage: styles === null || styles === void 0 ? void 0 : styles.systemMessage
     });
-    const onTexFieldKeyDown = React.useCallback((ev) => {
+    /* @conditional-compile-remove(mention) */
+    const onSuggestionSelected = React.useCallback((suggestion) => {
+        var _a, _b;
+        let selectionEnd = ((_a = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _a === void 0 ? void 0 : _a.selectionEnd) || -1;
+        if (selectionEnd < 0) {
+            selectionEnd = 0;
+        }
+        else if (selectionEnd > inputTextValue.length) {
+            selectionEnd = inputTextValue.length;
+        }
+        const oldPlainText = inputTextValue;
+        const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
+        // update plain text with the mention html text
+        const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : defaultMentionTrigger;
+        // update html text with updated plain text
+        const [updatedHTML] = updateHTML(textValue, oldPlainText, newPlainText, tagsValue, currentTriggerStartIndex, selectionEnd, mention, triggerText);
+        const displayName = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
+        // Move the caret in the text field to the end of the mention plain text
+        setCaretIndex(selectionEnd + displayName.length);
+        setCurrentTriggerStartIndex(-1);
+        updateMentionSuggestions([]);
+        setActiveSuggestionIndex(undefined);
+        onChange && onChange(undefined, updatedHTML);
+    }, [
+        textFieldRef,
+        inputTextValue,
+        currentTriggerStartIndex,
+        mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger,
+        onChange,
+        textValue,
+        tagsValue,
+        /* @conditional-compile-remove(mention) */
+        updateMentionSuggestions,
+        /* @conditional-compile-remove(mention) */
+        localeStrings
+    ]);
+    const onTextFieldKeyDown = React.useCallback((ev) => {
         // Uses KeyCode 229 and which code 229 to determine if the press of the enter key is from a composition session or not (Safari only)
         if (ev.nativeEvent.isComposing || ev.nativeEvent.keyCode === 229 || ev.nativeEvent.which === 229) {
             return;
         }
+        if (ev.key === 'ArrowUp') {
+            ev.preventDefault();
+            /* @conditional-compile-remove(mention) */
+            if (mentionSuggestions.length > 0) {
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? mentionSuggestions.length - 1
+                    : Math.max(activeSuggestionIndex - 1, 0);
+                setActiveSuggestionIndex(newActiveIndex);
+            }
+        }
+        else if (ev.key === 'ArrowDown') {
+            ev.preventDefault();
+            /* @conditional-compile-remove(mention) */
+            if (mentionSuggestions.length > 0) {
+                const newActiveIndex = activeSuggestionIndex === undefined
+                    ? 0
+                    : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
+                setActiveSuggestionIndex(newActiveIndex);
+            }
+        }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
             ev.preventDefault();
+            // If we are looking up a mention, select the focused suggestion
+            /* @conditional-compile-remove(mention) */
+            if (mentionSuggestions.length > 0 && activeSuggestionIndex !== undefined) {
+                const selectedMention = mentionSuggestions[activeSuggestionIndex];
+                if (selectedMention) {
+                    onSuggestionSelected(selectedMention);
+                    return;
+                }
+            }
             onEnterKeyDown && onEnterKeyDown();
         }
         onKeyDown && onKeyDown(ev);
-    }, [onEnterKeyDown, onKeyDown, supportNewline]);
+    }, [
+        onEnterKeyDown,
+        onKeyDown,
+        supportNewline,
+        /* @conditional-compile-remove(mention) */
+        mentionSuggestions,
+        /* @conditional-compile-remove(mention) */
+        activeSuggestionIndex,
+        /* @conditional-compile-remove(mention) */
+        onSuggestionSelected
+    ]);
+    /* @conditional-compile-remove(mention) */
+    const debouncedQueryUpdate = useDebounce.useDebouncedCallback((query) => __awaiter$w(void 0, void 0, void 0, function* () {
+        var _a;
+        const suggestions = (_a = (yield (mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onQueryUpdated(query)))) !== null && _a !== void 0 ? _a : [];
+        if (suggestions.length === 0) {
+            setActiveSuggestionIndex(undefined);
+        }
+        else if (activeSuggestionIndex === undefined) {
+            setActiveSuggestionIndex(0);
+        }
+        updateMentionSuggestions(suggestions);
+    }), 500);
+    /* @conditional-compile-remove(mention) */
+    React.useEffect(() => {
+        return () => {
+            debouncedQueryUpdate.cancel();
+        };
+    }, [debouncedQueryUpdate]);
+    /* @conditional-compile-remove(mention) */
+    const handleOnChange = React.useCallback((event, updatedValue) => __awaiter$w(void 0, void 0, void 0, function* () {
+        var _b, _c;
+        const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
+        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : defaultMentionTrigger;
+        const newTextLength = newValue.length;
+        let selectionEnd = ((_c = textFieldRef === null || textFieldRef === void 0 ? void 0 : textFieldRef.current) === null || _c === void 0 ? void 0 : _c.selectionEnd) || -1;
+        selectionEnd = Math.max(0, selectionEnd);
+        selectionEnd = Math.min(selectionEnd, newTextLength - 1);
+        // If we are enabled for lookups,
+        if (mentionLookupOptions !== undefined) {
+            // Look at the range of the change for a trigger character
+            const triggerPriorIndex = newValue.lastIndexOf(triggerText, selectionEnd - 1);
+            // Update the caret position, if not doing a lookup
+            setCaretPosition(textareaCaretTs.Caret.getRelativePosition(event.currentTarget));
+            if (triggerPriorIndex !== undefined) {
+                // trigger is found
+                const isSpaceBeforeTrigger = newValue.substring(triggerPriorIndex - 1, triggerPriorIndex) === ' ';
+                const wordAtSelection = newValue.substring(triggerPriorIndex, selectionEnd);
+                let tagIndex = currentTriggerStartIndex;
+                if (!isSpaceBeforeTrigger && triggerPriorIndex !== 0) {
+                    //no space before the trigger <- continuation of the previous word
+                    tagIndex = -1;
+                    setCurrentTriggerStartIndex(tagIndex);
+                }
+                else if (wordAtSelection === triggerText) {
+                    // start of the mention
+                    tagIndex = selectionEnd - triggerText.length;
+                    if (tagIndex < 0) {
+                        tagIndex = 0;
+                    }
+                    setCurrentTriggerStartIndex(tagIndex);
+                }
+                if (tagIndex === -1) {
+                    updateMentionSuggestions([]);
+                }
+                else {
+                    // In the middle of a @mention lookup
+                    if (tagIndex > -1) {
+                        const query = wordAtSelection.substring(triggerText.length, wordAtSelection.length);
+                        if (query !== undefined) {
+                            yield debouncedQueryUpdate(query);
+                        }
+                    }
+                }
+            }
+        }
+        let result = '';
+        if (tagsValue.length === 0) {
+            // no tags in the string, textValue is a sting
+            result = newValue;
+        }
+        else {
+            // there are tags in the text value, textValue is html string
+            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes(inputTextValue, newValue, selectionEnd);
+            // get updated html string
+            const change = newValue.substring(changeStart, newChangeEnd);
+            const [updatedHTML, updatedChangeNewEndIndex] = updateHTML(textValue, inputTextValue, newValue, tagsValue, changeStart, oldChangeEnd, change, triggerText);
+            result = updatedHTML;
+            if (updatedChangeNewEndIndex !== null) {
+                if ((change.length === 1 && event.currentTarget.selectionStart === event.currentTarget.selectionEnd) || // simple input
+                    (change.length === 0 && newChangeEnd === changeStart) //delete
+                ) {
+                    setCaretIndex(updatedChangeNewEndIndex);
+                }
+            }
+        }
+        onChange && onChange(event, result);
+    }), [
+        onChange,
+        mentionLookupOptions,
+        tagsValue,
+        textValue,
+        inputTextValue,
+        currentTriggerStartIndex,
+        setCaretIndex,
+        setCaretPosition,
+        updateMentionSuggestions,
+        debouncedQueryUpdate,
+        textFieldRef
+    ]);
+    /* @conditional-compile-remove(mention) */
+    const updateSelectionIndexesWithMentionIfNeeded = (event) => {
+        var _a;
+        let updatedStartIndex = event.currentTarget.selectionStart;
+        let updatedEndIndex = event.currentTarget.selectionEnd;
+        if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd &&
+            event.currentTarget.selectionStart !== null &&
+            event.currentTarget.selectionStart !== -1) {
+            const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
+            if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                if (selectionStartValue === null) {
+                    updatedStartIndex = mentionTag.plainTextBeginIndex;
+                    updatedEndIndex = (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex;
+                }
+                else {
+                    const newSelectionIndex = findNewSelectionIndexForMention(mentionTag, inputTextValue, event.currentTarget.selectionStart, selectionStartValue);
+                    updatedStartIndex = newSelectionIndex;
+                    updatedEndIndex = newSelectionIndex;
+                }
+            }
+        }
+        else if (event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
+            // Both e.currentTarget.selectionStart !== selectionStartValue and e.currentTarget.selectionEnd !== selectionEndValue can be true when a user selects a text by double click
+            if (event.currentTarget.selectionStart !== null && event.currentTarget.selectionStart !== selectionStartValue) {
+                // the selection start is changed
+                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionStart);
+                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                    //TODO: here it takes -1 when it shouldn't, update selectionstart and end with mouse move and or touch move
+                    updatedStartIndex = findNewSelectionIndexForMention(mentionTag, inputTextValue, event.currentTarget.selectionStart, selectionStartValue !== null && selectionStartValue !== void 0 ? selectionStartValue : -1);
+                }
+            }
+            if (event.currentTarget.selectionEnd !== null && event.currentTarget.selectionEnd !== selectionEndValue) {
+                // the selection end is changed
+                const mentionTag = findMentionTagForSelection(tagsValue, event.currentTarget.selectionEnd);
+                if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                    //TODO: here it takes -1 when it shouldn't, update selectionstart and end with mouse move and or touch move
+                    updatedEndIndex = findNewSelectionIndexForMention(mentionTag, inputTextValue, event.currentTarget.selectionEnd, selectionEndValue !== null && selectionEndValue !== void 0 ? selectionEndValue : -1);
+                }
+            }
+        }
+        // e.currentTarget.selectionDirection should be set to handle shift + arrow keys
+        if (event.currentTarget.selectionDirection === null) {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex);
+        }
+        else {
+            event.currentTarget.setSelectionRange(updatedStartIndex, updatedEndIndex, event.currentTarget.selectionDirection);
+        }
+        setSelectionStartValue(updatedStartIndex);
+        setSelectionEndValue(updatedEndIndex);
+    };
+    const getInputFieldTextValue = () => {
+        /* @conditional-compile-remove(mention) */
+        return inputTextValue;
+    };
     return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
         React__default['default'].createElement("div", { className: mergedTextContainerStyle },
-            React__default['default'].createElement(react.TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: textValue, onChange: onChange, autoComplete: "off", onKeyDown: onTexFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage }),
+            /* @conditional-compile-remove(mention) */ mentionSuggestions.length > 0 && (React__default['default'].createElement(_MentionPopover, { suggestions: mentionSuggestions, activeSuggestionIndex: activeSuggestionIndex, target: inputBoxRef, targetPositionOffset: caretPosition, onRenderSuggestionItem: mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.onRenderSuggestionItem, onSuggestionSelected: onSuggestionSelected, onDismiss: () => {
+                    updateMentionSuggestions([]);
+                } })),
+            React__default['default'].createElement(react.TextField, { autoFocus: props.autoFocus === 'sendBoxTextField', "data-ui-id": dataUiId, multiline: true, autoAdjustHeight: true, multiple: false, resizable: false, componentRef: textFieldRef, id: id, inputClassName: mergedTextFiledStyle, placeholder: placeholderText, value: getInputFieldTextValue(), onChange: (e, newValue) => {
+                    /* @conditional-compile-remove(mention) */
+                    setInputTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+                    /* @conditional-compile-remove(mention) */
+                    handleOnChange(e, newValue);
+                    /* @conditional-compile-remove(mention) */
+                    return;
+                },
+                /* @conditional-compile-remove(mention) */
+                onSelect: (e) => {
+                    var _a, _b, _c;
+                    if (caretIndex !== undefined) {
+                        e.currentTarget.setSelectionRange(caretIndex, caretIndex);
+                        setCaretIndex(undefined);
+                        return;
+                    }
+                    //TODO: need to check to navigate before/after space correctly in tag + when selecting by mouse
+                    /* @conditional-compile-remove(mention) */
+                    if (shouldHandleOnMouseDownDuringSelect &&
+                        e.currentTarget.selectionStart !== null &&
+                        e.currentTarget.selectionStart === e.currentTarget.selectionEnd) {
+                        // handle mention click
+                        const mentionTag = findMentionTagForSelection(tagsValue, e.currentTarget.selectionStart);
+                        if (mentionTag !== undefined && mentionTag.plainTextBeginIndex !== undefined) {
+                            if (e.currentTarget.selectionDirection === null) {
+                                e.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_a = mentionTag.plainTextEndIndex) !== null && _a !== void 0 ? _a : mentionTag.plainTextBeginIndex);
+                            }
+                            else {
+                                e.currentTarget.setSelectionRange(mentionTag.plainTextBeginIndex, (_b = mentionTag.plainTextEndIndex) !== null && _b !== void 0 ? _b : mentionTag.plainTextBeginIndex, e.currentTarget.selectionDirection);
+                            }
+                            setSelectionStartValue(mentionTag.plainTextBeginIndex);
+                            setSelectionEndValue((_c = mentionTag.plainTextEndIndex) !== null && _c !== void 0 ? _c : mentionTag.plainTextBeginIndex);
+                        }
+                        else {
+                            setSelectionStartValue(e.currentTarget.selectionStart);
+                            setSelectionEndValue(e.currentTarget.selectionEnd);
+                        }
+                    }
+                    else {
+                        updateSelectionIndexesWithMentionIfNeeded(e);
+                    }
+                    /* @conditional-compile-remove(mention) */
+                    setShouldHandleOnMouseDownDuringSelect(false);
+                }, onMouseDown: () => {
+                    // as events order is onMouseDown -> onSelect -> onClick
+                    // onClick and onMouseDown can't handle clicking on mention event because
+                    // onClick has wrong range as it's called after onSelect
+                    // onMouseDown doesn't have correct selectionRange yet
+                    // so we need to handle onMouseDown to prevent onSelect default behavior
+                    /* @conditional-compile-remove(mention) */
+                    setShouldHandleOnMouseDownDuringSelect(true);
+                }, onTouchStart: () => {
+                    // see onMouseDown for more details
+                    /* @conditional-compile-remove(mention) */
+                    setShouldHandleOnMouseDownDuringSelect(true);
+                }, autoComplete: "off", onKeyDown: onTextFieldKeyDown, styles: mergedTextFieldStyle, disabled: disabled, errorMessage: errorMessage, elementRef: inputBoxRef }),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props.inlineChildren ? inlineButtonsContainerStyle : newLineButtonsContainerStyle) }, children))));
 };
 /**
@@ -5885,6 +6416,682 @@ const InputBoxButton = (props) => {
                 setIsHover(false);
             }, onRenderIcon: () => onRenderIcon(isHover) })));
 };
+/* @conditional-compile-remove(mention) */
+/**
+ * Find mention tag if selection is inside of it
+ *
+ * @private
+ */
+const findMentionTagForSelection = (tags, selection) => {
+    let mentionTag = undefined;
+    for (let i = 0; i < tags.length; i++) {
+        const tag = tags[i];
+        let plainTextEndIndex = 0;
+        if (tag.plainTextEndIndex !== undefined && tag.closeTagIdx !== undefined) {
+            // close tag exists
+            plainTextEndIndex = tag.plainTextEndIndex;
+        }
+        else if (tag.plainTextBeginIndex !== undefined) {
+            //no close tag
+            plainTextEndIndex = tag.plainTextBeginIndex;
+        }
+        if (tag.subTags !== undefined && tag.subTags.length !== 0) {
+            const selectedTag = findMentionTagForSelection(tag.subTags, selection);
+            if (selectedTag !== undefined) {
+                mentionTag = selectedTag;
+                break;
+            }
+        }
+        else if (tag.tagType === 'msft-mention' &&
+            tag.plainTextBeginIndex !== undefined &&
+            tag.plainTextBeginIndex < selection &&
+            selection < plainTextEndIndex) {
+            mentionTag = tag;
+            break;
+        }
+    }
+    return mentionTag;
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Go through tags and find a new the selection index if it is inside of a mention tag
+ *
+ * @private
+ */
+const findNewSelectionIndexForMention = (tag, textValue, selection, previousSelection) => {
+    var _a;
+    if (tag.plainTextBeginIndex === undefined ||
+        tag.tagType !== 'msft-mention' ||
+        selection === previousSelection ||
+        tag.plainTextEndIndex === undefined) {
+        return selection;
+    }
+    let spaceIndex = 0;
+    if (selection <= previousSelection) {
+        // the cursor is moved to the left
+        spaceIndex = textValue.lastIndexOf(' ', selection !== null && selection !== void 0 ? selection : 0);
+        if (spaceIndex === -1) {
+            // no space before the selection
+            spaceIndex = tag.plainTextBeginIndex;
+        }
+    }
+    else {
+        // the cursor is moved to the right
+        spaceIndex = textValue.indexOf(' ', selection !== null && selection !== void 0 ? selection : 0);
+        if (spaceIndex === -1) {
+            // no space after the selection
+            spaceIndex = (_a = tag.plainTextEndIndex) !== null && _a !== void 0 ? _a : tag.plainTextBeginIndex;
+        }
+    }
+    if (spaceIndex < tag.plainTextBeginIndex) {
+        spaceIndex = tag.plainTextBeginIndex;
+    }
+    else if (spaceIndex > tag.plainTextEndIndex) {
+        spaceIndex = tag.plainTextEndIndex;
+    }
+    return spaceIndex;
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Handle mention tag edit and by word deleting
+ *
+ * @private
+ */
+const handleMentionTagUpdate = (htmlText, oldPlainText, lastProcessedHTMLIndex, processedChange, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength) => {
+    if (tag.tagType !== 'msft-mention' || tag.plainTextBeginIndex === undefined) {
+        return ['', processedChange, lastProcessedHTMLIndex, null];
+    }
+    let result = '';
+    let plainTextSelectionEndIndex = null;
+    let rangeStart;
+    let rangeEnd;
+    // check if space symbol is handled in case if string looks like '<1 2 3>'
+    let isSpaceLengthHandled = false;
+    rangeStart = oldPlainText.lastIndexOf(' ', startIndex);
+    if (rangeStart !== -1 && rangeStart !== undefined && rangeStart > tag.plainTextBeginIndex) {
+        isSpaceLengthHandled = true;
+    }
+    rangeEnd = oldPlainText.indexOf(' ', oldPlainTextEndIndex);
+    if (rangeEnd === -1 || rangeEnd === undefined) {
+        // check if space symbol is not found
+        rangeEnd = plainTextEndIndex;
+    }
+    else if (!isSpaceLengthHandled) {
+        // +1 to include the space symbol
+        rangeEnd += 1;
+    }
+    isSpaceLengthHandled = true;
+    if (rangeStart === -1 || rangeStart === undefined || rangeStart < tag.plainTextBeginIndex) {
+        rangeStart = tag.plainTextBeginIndex;
+    }
+    if (rangeEnd > plainTextEndIndex) {
+        rangeEnd = plainTextEndIndex;
+    }
+    if (rangeStart === tag.plainTextBeginIndex && rangeEnd === plainTextEndIndex) {
+        // the whole tag should be removed
+        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+        plainTextSelectionEndIndex = tag.plainTextBeginIndex + processedChange.length;
+        processedChange = '';
+        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+    }
+    else {
+        // only part of the tag should be removed
+        let startChangeDiff = 0;
+        let endChangeDiff = 0;
+        // need to check only rangeStart > tag.plainTextBeginIndex as when rangeStart === tag.plainTextBeginIndex startChangeDiff = 0 and mentionTagLength shouldn't be subtracted
+        if (rangeStart > tag.plainTextBeginIndex) {
+            startChangeDiff = rangeStart - tag.plainTextBeginIndex - mentionTagLength;
+        }
+        endChangeDiff = rangeEnd - tag.plainTextBeginIndex - mentionTagLength;
+        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff);
+        // plainTextSelectionEndIndex = rangeStart + processedChange.length;
+        lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
+        // processed change should not be changed as it should be added after the tag
+    }
+    return [result, processedChange, lastProcessedHTMLIndex, plainTextSelectionEndIndex];
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Go through the text and update it with the changed text
+ *
+ * @private
+ */
+const updateHTML = (htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger) => {
+    let result = '';
+    if (tags.length === 0) {
+        // no tags added yet
+        return [newPlainText, null];
+    }
+    if (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length) {
+        // the whole text is changed
+        return [newPlainText, null];
+    }
+    let lastProcessedHTMLIndex = 0;
+    // the value can be updated with empty string when the change covers more than 1 place (tag + before or after the tag)
+    // in this case change won't be added as part of the tag
+    // e.g.: change is before and partially in tag => change will be added before the tag and outdated text in the tag will be removed
+    // e.g.: change is after and partially in tag => change will be added after the tag and outdated text in the tag will be removed
+    // e.g.: change is on the beginning of the tag => change will be added before the tag
+    // e.g.: change is on the end of the tag => change will be added to the tag if it's not mention and after the tag if it's mention
+    let processedChange = change;
+    // end tag plain text index of the last processed tag
+    let lastProcessedPlainTextTagEndIndex = 0;
+    // as some tags/text can be removed fully, selectionEnd should be updated correctly
+    let changeNewEndIndex = null;
+    for (let i = 0; i < tags.length; i++) {
+        const tag = tags[i];
+        if (tag.plainTextBeginIndex === undefined) {
+            continue;
+        }
+        // all plain text indexes includes trigger length for the mention that shouldn't be included in
+        // htmlText.substring because html strings don't include the trigger
+        // mentionTagLength will be set only for 'msft-mention', otherwise should be 0
+        let mentionTagLength = 0;
+        let isMentionTag = false;
+        if (tag.tagType === 'msft-mention') {
+            mentionTagLength = mentionTrigger.length;
+            isMentionTag = true;
+        }
+        //change start is before the open tag
+        if (startIndex <= tag.plainTextBeginIndex) {
+            // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range
+            const startChangeDiff = tag.plainTextBeginIndex - Math.max(lastProcessedPlainTextTagEndIndex, startIndex);
+            result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx - startChangeDiff) + processedChange;
+            if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {
+                // the whole change is before tag start
+                // oldPlainTextEndIndex already includes mentionTag length
+                const endChangeDiff = tag.plainTextBeginIndex - oldPlainTextEndIndex;
+                lastProcessedHTMLIndex = tag.openTagIdx - endChangeDiff;
+                processedChange = '';
+                // the change is handled; exit
+                break;
+            }
+            else {
+                // change continues in the tag
+                lastProcessedHTMLIndex = tag.openTagIdx;
+                processedChange = '';
+                // proceed to the next check
+            }
+        }
+        let plainTextEndIndex = 0;
+        let closeTagIdx = 0;
+        let closeTagLength = 0;
+        if (tag.plainTextEndIndex !== undefined && tag.closeTagIdx !== undefined) {
+            // close tag exists
+            plainTextEndIndex = tag.plainTextEndIndex;
+            closeTagIdx = tag.closeTagIdx;
+            // tag.tagType.length + </>
+            closeTagLength = tag.tagType.length + 3;
+        }
+        else {
+            // no close tag
+            plainTextEndIndex = tag.plainTextBeginIndex;
+            closeTagIdx = tag.openTagIdx + tag.openTagBody.length;
+            closeTagLength = 0;
+        }
+        if (startIndex < plainTextEndIndex) {
+            // change started before the end tag
+            if (startIndex <= tag.plainTextBeginIndex && oldPlainTextEndIndex === plainTextEndIndex) {
+                // the change is a tag or starts before the tag
+                // tag should be removed, no matter if there are subtags
+                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+                processedChange = '';
+                lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                // the change is handled; exit
+                break;
+            }
+            else if (startIndex >= tag.plainTextBeginIndex && oldPlainTextEndIndex < plainTextEndIndex) {
+                // edge case: the change is between tag
+                if (isMentionTag) {
+                    if (change !== '') {
+                        // mention tag should be deleted when user tries to edit it
+                        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+                        changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                        processedChange = '';
+                        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                    }
+                    else {
+                        const [resultValue, updatedChange, htmlIndex, plainTextSelectionEndIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, processedChange, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
+                        result += resultValue;
+                        changeNewEndIndex = plainTextSelectionEndIndex;
+                        processedChange = updatedChange;
+                        lastProcessedHTMLIndex = htmlIndex;
+                    }
+                    // the change is handled; exit
+                    break;
+                }
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content) {
+                    // with subtags
+                    // before the tag content
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closeTagIdx;
+                    const [content, updatedChangeNewEndIndex] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, processedChange, mentionTrigger);
+                    result += stringBefore + content;
+                    changeNewEndIndex = updatedChangeNewEndIndex;
+                    break;
+                }
+                else {
+                    // no subtags
+                    const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
+                    const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex - mentionTagLength;
+                    result +=
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff) +
+                            processedChange;
+                    processedChange = '';
+                    lastProcessedHTMLIndex = tag.openTagIdx + tag.openTagBody.length + endChangeDiff;
+                    // the change is handled; exit
+                    break;
+                }
+            }
+            else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex > plainTextEndIndex) {
+                //the change started in the tag but finishes somewhere further
+                const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
+                if (isMentionTag) {
+                    const [resultValue, updatedChange, htmlIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, oldPlainText.substring(startIndex, startIndex + 1) !== ' ' && change === '' ? ' ' : '', // if substring !== ' ' && change is empty -> the change should be " " and not empty string but " " wasn't included in change; otherwise the part of mention should be just deleted without processedChange update
+                    tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
+                    result += resultValue;
+                    lastProcessedHTMLIndex = htmlIndex;
+                    processedChange = updatedChange;
+                    // no need to handle plainTextSelectionEndIndex as the change will be added later
+                    // proceed with the next calculations
+                }
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
+                    // with subtags
+                    // before the tag content
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closeTagIdx;
+                    const [content] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, '', // the part of the tag should be just deleted without processedChange update and change will be added after this tag
+                    mentionTrigger);
+                    result += stringBefore + content;
+                    // proceed with the next calculations
+                }
+                else {
+                    // no subtags
+                    result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff);
+                    lastProcessedHTMLIndex = closeTagIdx;
+                    // proceed with the next calculations
+                }
+            }
+            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex > plainTextEndIndex) {
+                // the change starts before  the tag and finishes after it
+                // tag should be removed, no matter if there are subtags
+                // no need to save anything between lastProcessedHTMLIndex and closeTagIdx + closeTagLength
+                lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                // proceed with the next calculations
+            }
+            else if (startIndex === tag.plainTextBeginIndex && oldPlainTextEndIndex > plainTextEndIndex) {
+                // the change starts in the tag and finishes after it
+                // tag should be removed, no matter if there are subtags
+                result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx);
+                // processedChange shouldn't be updated as it will be added after the tag
+                lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                // proceed with the next calculations
+            }
+            else if (startIndex < tag.plainTextBeginIndex && oldPlainTextEndIndex < plainTextEndIndex) {
+                // the change  starts before the tag and ends in a tag
+                if (isMentionTag) {
+                    const [resultValue, , htmlIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, '', // the part of mention should be just deleted without processedChange update
+                    tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
+                    changeNewEndIndex = tag.plainTextBeginIndex;
+                    result += resultValue;
+                    lastProcessedHTMLIndex = htmlIndex;
+                }
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
+                    // with subtags
+                    // before the tag content
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closeTagIdx;
+                    const [content] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, processedChange, // processedChange should equal '' and the part of the tag should be deleted as the change was handled before this tag
+                    mentionTrigger);
+                    result += stringBefore + content;
+                }
+                else {
+                    // no subtags
+                    result +=
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length) + processedChange;
+                    processedChange = '';
+                    // oldPlainTextEndIndex already includes mentionTag length
+                    const endChangeDiff = plainTextEndIndex - oldPlainTextEndIndex;
+                    // as change may be before the end of the tag, we need to add the rest of the tag
+                    lastProcessedHTMLIndex = closeTagIdx - endChangeDiff;
+                }
+                // the change is handled; exit
+                break;
+            }
+            else if (startIndex > tag.plainTextBeginIndex && oldPlainTextEndIndex === plainTextEndIndex) {
+                // the change  starts in the tag and ends at the end of a tag
+                if (isMentionTag) {
+                    if (change !== '' && startIndex === plainTextEndIndex) {
+                        // non empty change at the end of the mention tag to be added after the mention tag
+                        result += htmlText.substring(lastProcessedHTMLIndex, closeTagIdx + closeTagLength) + processedChange;
+                        changeNewEndIndex = plainTextEndIndex + processedChange.length;
+                        processedChange = '';
+                        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                    }
+                    else if (change !== '') {
+                        // mention tag should be deleted when user tries to edit it
+                        result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx) + processedChange;
+                        changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                        processedChange = '';
+                        lastProcessedHTMLIndex = closeTagIdx + closeTagLength;
+                    }
+                    else {
+                        const [resultValue, updatedChange, htmlIndex, plainTextSelectionEndIndex] = handleMentionTagUpdate(htmlText, oldPlainText, lastProcessedHTMLIndex, processedChange, tag, closeTagIdx, closeTagLength, plainTextEndIndex, startIndex, oldPlainTextEndIndex, mentionTagLength);
+                        result += resultValue;
+                        processedChange = updatedChange;
+                        lastProcessedHTMLIndex = htmlIndex;
+                        changeNewEndIndex = plainTextSelectionEndIndex;
+                    }
+                    // the change is handled; exit
+                    break;
+                }
+                else if (tag.subTags !== undefined && tag.subTags.length !== 0 && tag.content !== undefined) {
+                    // with subtags
+                    // before the tag content
+                    const stringBefore = htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length);
+                    lastProcessedHTMLIndex = closeTagIdx;
+                    const [content, updatedChangeNewEndIndex] = updateHTML(tag.content, oldPlainText, newPlainText, tag.subTags, startIndex - mentionTagLength, oldPlainTextEndIndex - mentionTagLength, processedChange, mentionTrigger);
+                    result += stringBefore + content;
+                    changeNewEndIndex = updatedChangeNewEndIndex;
+                    break;
+                }
+                else {
+                    // no subtags
+                    const startChangeDiff = startIndex - tag.plainTextBeginIndex - mentionTagLength;
+                    result +=
+                        htmlText.substring(lastProcessedHTMLIndex, tag.openTagIdx + tag.openTagBody.length + startChangeDiff) +
+                            processedChange;
+                    processedChange = '';
+                    lastProcessedHTMLIndex = closeTagIdx;
+                    // the change is handled; exit
+                    break;
+                }
+            }
+            lastProcessedPlainTextTagEndIndex = plainTextEndIndex;
+        }
+        if (i === tags.length - 1 && oldPlainTextEndIndex >= plainTextEndIndex) {
+            // the last tag should handle the end of the change if needed
+            // oldPlainTextEndIndex already includes mentionTag length
+            const endChangeDiff = oldPlainTextEndIndex - plainTextEndIndex;
+            if (startIndex >= plainTextEndIndex) {
+                const startChangeDiff = startIndex - plainTextEndIndex;
+                result +=
+                    htmlText.substring(lastProcessedHTMLIndex, closeTagIdx + closeTagLength + startChangeDiff) + processedChange;
+            }
+            else {
+                result += htmlText.substring(lastProcessedHTMLIndex, closeTagIdx + closeTagLength) + processedChange;
+            }
+            processedChange = '';
+            lastProcessedHTMLIndex = closeTagIdx + closeTagLength + endChangeDiff;
+            // the change is handled; exit
+            // break is not required here as this is the last element but added for consistency
+            break;
+        }
+    }
+    if (lastProcessedHTMLIndex < htmlText.length) {
+        result += htmlText.substring(lastProcessedHTMLIndex);
+    }
+    return [result, changeNewEndIndex];
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Given the oldText and newText, find the start index, old end index and new end index for the changes
+ *
+ * @param oldText - the old text
+ * @param newText - the new text
+ * @param selectionEnd - the end of the selection
+ * @returns change start index, old end index and new end index. The old and new end indexes are exclusive.
+ * @private
+ */
+const findStringsDiffIndexes = (oldText, newText, selectionEnd // should be a valid position in the input field
+) => {
+    const newTextLength = newText.length;
+    const oldTextLength = oldText.length;
+    let changeStart = 0;
+    let newChangeEnd = newTextLength;
+    let oldChangeEnd = oldTextLength;
+    const length = Math.min(newTextLength, oldTextLength, selectionEnd);
+    for (let i = 0; i < length; i++) {
+        if (newText[i] !== oldText[i]) {
+            // the symbol with changeStart index is updated
+            changeStart = i;
+            break;
+        }
+        else if (i === length - 1 && newText[i] === oldText[i]) {
+            // the symbol is added at the end of inputTextValue
+            changeStart = length;
+            break;
+        }
+    }
+    if (oldTextLength < newTextLength) {
+        //insert or replacement
+        if (oldTextLength === changeStart) {
+            // when change was at the end of string
+            // Change is found
+            newChangeEnd = newTextLength;
+            oldChangeEnd = oldTextLength;
+        }
+        else {
+            for (let i = 1; i < newTextLength && oldTextLength - i >= changeStart; i++) {
+                newChangeEnd = newTextLength - i - 1;
+                oldChangeEnd = oldTextLength - i - 1;
+                if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
+                    // Change is found
+                    break;
+                }
+            }
+            // make indexes exclusive
+            newChangeEnd += 1;
+            oldChangeEnd += 1;
+        }
+    }
+    else if (oldTextLength > newTextLength) {
+        //deletion or replacement
+        if (newTextLength === changeStart) {
+            // when change was at the end of string
+            // Change is found
+            newChangeEnd = newTextLength;
+            oldChangeEnd = oldTextLength;
+        }
+        else {
+            for (let i = 1; i < oldTextLength && newTextLength - i >= changeStart; i++) {
+                newChangeEnd = newTextLength - i - 1;
+                oldChangeEnd = oldTextLength - i - 1;
+                if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
+                    // Change is found
+                    break;
+                }
+            }
+            // make indexes exclusive
+            newChangeEnd += 1;
+            oldChangeEnd += 1;
+        }
+    }
+    else {
+        //replacement
+        for (let i = 1; i < oldTextLength && oldTextLength - i >= changeStart; i++) {
+            newChangeEnd = newTextLength - i - 1;
+            oldChangeEnd = oldTextLength - i - 1;
+            if (newText[newChangeEnd] !== oldText[oldChangeEnd]) {
+                // Change is found
+                break;
+            }
+        }
+        // make indexes exclusive if they aren't equal to the length of the string
+        if (newChangeEnd !== newText.length) {
+            newChangeEnd += 1;
+        }
+        if (oldChangeEnd !== oldText.length) {
+            oldChangeEnd += 1;
+        }
+    }
+    return { changeStart, oldChangeEnd, newChangeEnd };
+};
+/* @conditional-compile-remove(mention) */
+const htmlStringForMentionSuggestion = (suggestion, localeStrings) => {
+    const idHTML = ' id ="' + suggestion.id + '"';
+    const displayTextHTML = ' displayText ="' + suggestion.displayText + '"';
+    const displayText = getDisplayNameForMentionSuggestion(suggestion, localeStrings);
+    return '<msft-mention' + idHTML + displayTextHTML + '>' + displayText + '</msft-mention>';
+};
+/* @conditional-compile-remove(mention) */
+const getDisplayNameForMentionSuggestion = (suggestion, localeStrings) => {
+    const displayNamePlaceholder = localeStrings.participantItem.displayNamePlaceholder;
+    return suggestion.displayText !== '' ? suggestion.displayText : displayNamePlaceholder !== null && displayNamePlaceholder !== void 0 ? displayNamePlaceholder : '';
+};
+/* @conditional-compile-remove(mention) */
+/**
+ * Parse the text and return the tags and the plain text in one go
+ * @param text - The text to parse for HTML tags
+ * @param trigger The trigger to show for the msft-mention tag in plain text
+ *
+ * @returns An array of tags and the plain text representation
+ */
+const textToTagParser = (text, trigger) => {
+    var _a, _b;
+    const tags = []; // Tags passed back to the caller
+    const tagParseStack = []; // Local stack to use while parsing
+    let plainTextRepresentation = '';
+    let parseIndex = 0;
+    while (parseIndex < text.length) {
+        const foundHtmlTag = findNextHtmlTag(text, parseIndex);
+        if (!foundHtmlTag) {
+            if (parseIndex !== 0) {
+                // Add the remaining text to the plain text representation
+                plainTextRepresentation += text.substring(parseIndex);
+            }
+            else {
+                plainTextRepresentation = text;
+            }
+            break;
+        }
+        if (foundHtmlTag.type === 'open' || foundHtmlTag.type === 'self-closing') {
+            const nextTag = parseOpenTag(foundHtmlTag.content, foundHtmlTag.startIdx);
+            // Add the plain text between the last tag and this one found
+            plainTextRepresentation += text.substring(parseIndex, foundHtmlTag.startIdx);
+            nextTag.plainTextBeginIndex = plainTextRepresentation.length;
+            if (foundHtmlTag.type === 'open') {
+                tagParseStack.push(nextTag);
+            }
+            else {
+                nextTag.content = '';
+                nextTag.plainTextBeginIndex = plainTextRepresentation.length;
+                nextTag.plainTextEndIndex = plainTextRepresentation.length;
+                addTag(nextTag, tagParseStack, tags);
+            }
+        }
+        if (foundHtmlTag.type === 'close') {
+            const currentOpenTag = tagParseStack.pop();
+            const closeTagType = foundHtmlTag.content.substring(2, foundHtmlTag.content.length - 1).toLowerCase();
+            if (currentOpenTag && currentOpenTag.tagType === closeTagType) {
+                // Tag startIdx is absolute to the text. This is updated later to be relative to the parent tag
+                currentOpenTag.content = text.substring(currentOpenTag.openTagIdx + currentOpenTag.openTagBody.length, foundHtmlTag.startIdx);
+                // Insert the plain text pieces for the sub tags
+                if (currentOpenTag.tagType === 'msft-mention') {
+                    plainTextRepresentation =
+                        plainTextRepresentation.slice(0, currentOpenTag.plainTextBeginIndex) +
+                            trigger +
+                            plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
+                }
+                if (!currentOpenTag.subTags) {
+                    plainTextRepresentation += currentOpenTag.content;
+                }
+                else if (currentOpenTag.subTags.length > 0) {
+                    // Add text after the last tag
+                    const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
+                    const startOfRemainingText = ((_a = lastSubTag.closeTagIdx) !== null && _a !== void 0 ? _a : lastSubTag.openTagIdx) + lastSubTag.tagType.length + 3;
+                    const trailingText = currentOpenTag.content.substring(startOfRemainingText);
+                    plainTextRepresentation += trailingText;
+                }
+                currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
+                addTag(currentOpenTag, tagParseStack, tags);
+            }
+            else {
+                console.error('Unexpected close tag found. Got "' +
+                    closeTagType +
+                    '" but expected "' +
+                    ((_b = tagParseStack[tagParseStack.length - 1]) === null || _b === void 0 ? void 0 : _b.tagType) +
+                    '"');
+            }
+        }
+        // Update parsing index; move past the end of the close tag
+        parseIndex = foundHtmlTag.startIdx + foundHtmlTag.content.length;
+    } // While parseIndex < text.length loop
+    return [tags, plainTextRepresentation];
+};
+/* @conditional-compile-remove(mention) */
+const parseOpenTag = (tag, startIdx) => {
+    const tagType = tag
+        .substring(1, tag.length - 1)
+        .split(' ')[0]
+        .toLowerCase()
+        .replace('/', '');
+    return {
+        tagType,
+        openTagIdx: startIdx,
+        openTagBody: tag
+    };
+};
+/* @conditional-compile-remove(mention) */
+const findNextHtmlTag = (text, startIndex) => {
+    const tagStartIndex = text.indexOf('<', startIndex);
+    if (tagStartIndex === -1) {
+        // No more tags
+        return undefined;
+    }
+    const tagEndIndex = text.indexOf('>', tagStartIndex);
+    if (tagEndIndex === -1) {
+        // No close tag
+        return undefined;
+    }
+    const tag = text.substring(tagStartIndex, tagEndIndex + 1);
+    let type = 'open';
+    if (tag[1] === '/') {
+        type = 'close';
+    }
+    else if (tag[tag.length - 2] === '/') {
+        type = 'self-closing';
+    }
+    return {
+        content: tag,
+        startIdx: tagStartIndex,
+        type
+    };
+};
+/* @conditional-compile-remove(mention) */
+const addTag = (tag, parseStack, tags) => {
+    var _a;
+    // Add as sub-tag to the parent stack tag, if there is one
+    const parentTag = parseStack[parseStack.length - 1];
+    if (parentTag) {
+        // Adjust the open tag index to be relative to the parent tag
+        const parentContentStartIdx = parentTag.openTagIdx + parentTag.openTagBody.length;
+        const relativeIdx = tag.openTagIdx - parentContentStartIdx;
+        tag.openTagIdx = relativeIdx;
+    }
+    if (!tag.closeTagIdx) {
+        // If the tag is self-closing, the close tag is the same as the open tag
+        if (tag.openTagBody[tag.openTagBody.length - 2] === '/') {
+            tag.closeTagIdx = tag.openTagIdx;
+        }
+        else {
+            // Otherwise, the close tag index is the open tag index + the open tag body + the content length
+            tag.closeTagIdx = tag.openTagIdx + tag.openTagBody.length + ((_a = tag.content) !== null && _a !== void 0 ? _a : []).length;
+        }
+    }
+    // Put the tag where it belongs
+    if (!parentTag) {
+        tags.push(tag);
+    }
+    else {
+        if (!parentTag.subTags) {
+            parentTag.subTags = [tag];
+        }
+        else {
+            parentTag.subTags.push(tag);
+        }
+    }
+};
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6189,7 +7396,9 @@ const MAXIMUM_LENGTH_OF_MESSAGE$1 = 8000;
  * @public
  */
 const SendBox = (props) => {
-    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus } = props;
+    const { disabled, systemMessage, supportNewline, onSendMessage, onTyping, onRenderIcon, onRenderSystemMessage, styles, autoFocus,
+    /* @conditional-compile-remove(mention) */
+    mentionLookupOptions } = props;
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.sendBox;
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
@@ -6212,15 +7421,16 @@ const SendBox = (props) => {
             setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });
             return;
         }
-        // we dont want to send empty messages including spaces, newlines, tabs
+        const message = textValue;
+        // we don't want to send empty messages including spaces, newlines, tabs
         // Message can be empty if there is a valid file upload
-        if (!EMPTY_MESSAGE_REGEX.test(textValue) || hasFile(props)) {
-            onSendMessage && onSendMessage(sanitizeText(textValue));
+        if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {
+            onSendMessage && onSendMessage(sanitizeText(message));
             setTextValue('');
         }
         (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const setText = (event, newValue) => {
+    const setText = (newValue) => {
         if (newValue === undefined) {
             return;
         }
@@ -6242,7 +7452,7 @@ const SendBox = (props) => {
         color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary
     }, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon), [errorMessage, hasTextOrFile, theme, styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React__default['default'].createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
-    // Ensure that errors are cleared when there are no files in sendbox
+    // Ensure that errors are cleared when there are no files in sendBox
     React__default['default'].useEffect(() => {
         if (!(activeFileUploads === null || activeFileUploads === void 0 ? void 0 : activeFileUploads.filter((upload) => !upload.error).length)) {
             setFileUploadsPendingError(undefined);
@@ -6268,21 +7478,24 @@ const SendBox = (props) => {
                     uploadCompleted: (_f = (_e = props.strings) === null || _e === void 0 ? void 0 : _e.uploadCompleted) !== null && _f !== void 0 ? _f : localeStrings.uploadCompleted
                 } })));
     }, [activeFileUploads, props, localeStrings]);
-    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles) },
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendBoxWrapperStyles, { overflow: 'visible' } // This is needed for the mention popup to be visible
+        ) },
         React__default['default'].createElement(SendBoxErrors, Object.assign({}, sendBoxErrorsProps)),
         React__default['default'].createElement(react.Stack, { className: react.mergeStyles(borderAndBoxShadowStyle({
                 theme,
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
-            React__default['default'].createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", inputClassName: sendBoxStyle, placeholderText: strings.placeholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
+            React__default['default'].createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", inputClassName: sendBoxStyle, placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();
                     }
                 }, onEnterKeyDown: () => {
                     sendMessageOnClick();
-                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE$1 },
+                }, styles: mergedStyles, supportNewline: supportNewline, maxLength: MAXIMUM_LENGTH_OF_MESSAGE$1,
+                /* @conditional-compile-remove(mention) */
+                mentionLookupOptions: mentionLookupOptions },
                 React__default['default'].createElement(VoiceOverButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                         if (!textValueOverflow) {
                             sendMessageOnClick();
@@ -6317,22 +7530,6 @@ const activeFileUploadsTrampoline = (props) => {
     return props.activeFileUploads;
 };
-// Copyright (c) Microsoft Corporation.
-/**
- * @private
- */
-react.mergeStyles({
-    height: '100%',
-    overflowY: 'auto',
-    overflowX: 'hidden'
-});
-/**
- * @private
- */
-react.mergeStyles({
-    padding: '0.25rem 0rem 0'
-});
 // Copyright (c) Microsoft Corporation.
 /** @private */
 const MESSAGE_STATUS_INDICATOR_SIZE_REM = 1;
@@ -6486,7 +7683,11 @@ const defaultChatItemMessageContainer = (overlapAvatarAndMessage) => {
         marginRight: '0rem',
         marginLeft: `${messageAvatarGap}rem`,
         width: `calc(100% - ${AVATAR_WIDTH_REM + MESSAGE_AMOUNT_OUT_FROM_EDGE_REM + messageAvatarGap}rem)`,
-        zIndex: CHAT_MESSAGE_ZINDEX
+        zIndex: CHAT_MESSAGE_ZINDEX,
+        '& msft-mention': {
+            color: '#D83B01',
+            fontWeight: 600
+        }
     };
 };
 /**
@@ -6810,6 +8011,8 @@ const onRenderSubmitIcon = (color) => {
  */
 const ChatMessageComponentAsEditBox = (props) => {
     const { onCancel, onSubmit, strings, message } = props;
+    /* @conditional-compile-remove(mention) */
+    const { mentionLookupOptions } = props;
     const [textValue, setTextValue] = React.useState(message.content || '');
     const [attachedFilesMetadata, setAttachedFilesMetadata] = React__default['default'].useState(getMessageAttachedFilesMetadata(message));
     const editTextFieldRef = React__default['default'].useRef(null);
@@ -6851,7 +8054,9 @@ const ChatMessageComponentAsEditBox = (props) => {
                     onSubmit(textValue, message.metadata, {
                         attachedFilesMetadata
                     });
-            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
+            }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles,
+            /* @conditional-compile-remove(mention) */
+            mentionLookupOptions: mentionLookupOptions },
             React__default['default'].createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                     onCancel && onCancel(message.messageId);
                 }, id: 'dismissIconWrapper' }),
@@ -7137,8 +8342,19 @@ const preventUnwantedDismissProps = {
 };
 // Copyright (c) Microsoft Corporation.
-const processNodeDefinitions = new htmlToReact.ProcessNodeDefinitions(React__default['default']);
-const isValidNode = () => true;
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+const defaultOnMentionRender = (mention) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MsftMention = 'msft-mention';
+    return (React__default['default'].createElement(MsftMention, { id: mention.id, displayText: mention.displayText }, mention.displayText));
+};
+// Copyright (c) Microsoft Corporation.
 /** @private */
 const ChatMessageContent = (props) => {
     switch (props.message.contentType) {
@@ -7214,44 +8430,65 @@ const messageContentAriaText = (props) => {
             })
         : undefined;
 };
-const processHtmlToReact = (props) => {
-    const htmlToReactParser = new htmlToReact.Parser();
-    /* @conditional-compile-remove(teams-inline-images) */
-    const processInlineImage = {
-        // Custom <img> processing
-        shouldProcessNode: (node) => {
-            var _a;
-            // Process img node with id in attachments list
-            return (node.name &&
-                node.name === 'img' &&
-                node.attribs &&
-                node.attribs.id &&
-                ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id)));
-        },
-        processNode: (node, children, index) => {
-            // logic to check id in map/list
-            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);
+const processNodeDefinitions = htmlToReact.ProcessNodeDefinitions();
+const htmlToReactParser = htmlToReact.Parser();
+/* @conditional-compile-remove(teams-inline-images) */
+const processInlineImage = (props) => ({
+    // Custom <img> processing
+    shouldProcessNode: (node) => {
+        var _a;
+        // Process img node with id in attachments list
+        return (node.name &&
+            node.name === 'img' &&
+            node.attribs &&
+            node.attribs.id &&
+            ((_a = props.message.attachedFilesMetadata) === null || _a === void 0 ? void 0 : _a.find((f) => f.id === node.attribs.id)));
+    },
+    processNode: (node, children, index) => {
+        // logic to check id in map/list
+        if (props.attachmentsMap && node.attribs.id in props.attachmentsMap) {
+            node.attribs = Object.assign(Object.assign({}, node.attribs), { src: props.attachmentsMap[node.attribs.id] });
         }
-    };
-    const addProcessingStep = () => {
-        const steps = [];
+        return processNodeDefinitions.processDefaultNode(node, children, index);
+    }
+});
+/* @conditional-compile-remove(mention) */
+const processMention = (props) => ({
+    shouldProcessNode: (node) => {
+        var _a;
+        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
+            // Override the handling of the <msft-mention> tag in the HTML if there's a custom renderer
+            return node.name === 'msft-mention';
+        }
+        return false;
+    },
+    processNode: (node) => {
+        var _a;
+        if ((_a = props.mentionDisplayOptions) === null || _a === void 0 ? void 0 : _a.onRenderMention) {
+            const { id, displaytext } = node.attribs;
+            const mention = {
+                id: id,
+                displayText: displaytext
+            };
+            return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+        }
+        return processNodeDefinitions.processDefaultNode;
+    }
+});
+const processHtmlToReact = (props) => {
+    var _a;
+    const steps = [
         /* @conditional-compile-remove(teams-inline-images) */
-        steps.push(processInlineImage);
-        return steps;
-    };
-    const processingInstructions = [
-        ...addProcessingStep(),
+        processInlineImage(props),
+        /* @conditional-compile-remove(mention) */
+        processMention(props),
         {
-            shouldProcessNode: () => {
-                return true;
-            },
+            // Process everything else in the default way
+            shouldProcessNode: htmlToReact.IsValidNodeDefinitions.alwaysValid,
             processNode: processNodeDefinitions.processDefaultNode
         }
     ];
-    return htmlToReactParser.parseWithInstructions(props.message.content, isValidNode, processingInstructions);
+    return htmlToReactParser.parseWithInstructions((_a = props.message.content) !== null && _a !== void 0 ? _a : '', htmlToReact.IsValidNodeDefinitions.alwaysValid, steps);
 };
 // Copyright (c) Microsoft Corporation.
@@ -7286,7 +8523,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7311,7 +8548,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$u(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -7453,7 +8690,9 @@ const MessageBubble = (props) => {
                 /* @conditional-compile-remove(teams-inline-images) */
                 onFetchAttachment: props.onFetchAttachments,
                 /* @conditional-compile-remove(teams-inline-images) */
-                attachmentsMap: props.attachmentsMap }),
+                attachmentsMap: props.attachmentsMap,
+                /* @conditional-compile-remove(mention) */
+                mentionDisplayOptions: props.mentionDisplayOptions }),
             props.onRenderFileDownloads ? props.onRenderFileDownloads(userId, message) : defaultOnRenderFileDownloads()));
     }, [defaultOnRenderFileDownloads, message, props, strings, userId]);
     const chatMessage = (React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -7480,7 +8719,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7493,6 +8732,7 @@ var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const ChatMessageComponent = (props) => {
+    var _a, _b;
     const [isEditing, setIsEditing] = React.useState(false);
     const onEditClick = React.useCallback(() => setIsEditing(true), [setIsEditing]);
     const { onDeleteMessage, onSendMessage, message } = props;
@@ -7512,7 +8752,7 @@ const ChatMessageComponent = (props) => {
         onSendMessage && onSendMessage(content !== undefined ? content : '');
     }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
     if (isEditing && message.messageType === 'chat') {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$t(void 0, void 0, void 0, function* () {
+        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$u(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     message.messageId &&
                     (yield props.onUpdateMessage(message.messageId, text, metadata, options));
@@ -7520,7 +8760,9 @@ const ChatMessageComponent = (props) => {
             }), onCancel: (messageId) => {
                 props.onCancelMessageEdit && props.onCancelMessageEdit(messageId);
                 setIsEditing(false);
-            } }));
+            },
+            /* @conditional-compile-remove(mention) */
+            mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions }));
     }
     else {
         return (React__default['default'].createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar,
@@ -7529,7 +8771,9 @@ const ChatMessageComponent = (props) => {
             /* @conditional-compile-remove(teams-inline-images) */
             onFetchAttachments: props.onFetchAttachments,
             /* @conditional-compile-remove(teams-inline-images) */
-            attachmentsMap: props.attachmentsMap })));
+            attachmentsMap: props.attachmentsMap,
+            /* @conditional-compile-remove(mention) */
+            mentionDisplayOptions: (_b = props.mentionOptions) === null || _b === void 0 ? void 0 : _b.displayOptions })));
     }
 };
@@ -7623,7 +8867,7 @@ var getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7823,7 +9067,9 @@ const MessageThread = (props) => {
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString,
     /* @conditional-compile-remove(teams-inline-images) */
-    onFetchAttachments } = props;
+    onFetchAttachments,
+    /* @conditional-compile-remove(mention) */
+    mentionOptions } = 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.
@@ -7843,7 +9089,7 @@ const MessageThread = (props) => {
     /* @conditional-compile-remove(teams-inline-images) */
     const [inlineAttachments, setInlineAttachments] = React.useState({});
     /* @conditional-compile-remove(teams-inline-images) */
-    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$s(void 0, void 0, void 0, function* () {
+    const onFetchInlineAttachment = React.useCallback((attachment) => __awaiter$t(void 0, void 0, void 0, function* () {
         if (!onFetchAttachments || attachment.id in inlineAttachments) {
             return;
         }
@@ -7888,7 +9134,7 @@ const MessageThread = (props) => {
         setChatMessagesInitialized(chatMessagesInitialized);
     };
     // we try to only send those message status if user is scrolled to the bottom.
-    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -7939,7 +9185,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
         if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -8067,7 +9313,9 @@ const MessageThread = (props) => {
                 /* @conditional-compile-remove(teams-inline-images) */
                 onFetchAttachments: onFetchInlineAttachment,
                 /* @conditional-compile-remove(teams-inline-images) */
-                attachmentsMap: inlineAttachments })));
+                attachmentsMap: inlineAttachments,
+                /* @conditional-compile-remove(mention) */
+                mentionOptions: mentionOptions })));
         }
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }, [
@@ -8085,7 +9333,9 @@ const MessageThread = (props) => {
         /* @conditional-compile-remove(teams-inline-images) */
         onFetchInlineAttachment,
         /* @conditional-compile-remove(teams-inline-images) */
-        inlineAttachments
+        inlineAttachments,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions
     ]);
     const defaultStatusRenderer = React.useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
@@ -12271,7 +13521,7 @@ const DevicesButton = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12309,7 +13559,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -12477,7 +13727,7 @@ const lightThemeCallButtonStyles = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$r = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -12518,7 +13768,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -13414,7 +14664,7 @@ const formatPhoneNumber = (phoneNumber) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$q = (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); } }
@@ -13456,10 +14706,10 @@ const DialpadButton = (props) => {
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
     const useLongPressProps = React__default['default'].useMemo(() => ({
-        onClick: () => __awaiter$p(void 0, void 0, void 0, function* () {
+        onClick: () => __awaiter$q(void 0, void 0, void 0, function* () {
             onClick(digit, index);
         }),
-        onLongPress: () => __awaiter$p(void 0, void 0, void 0, function* () {
+        onLongPress: () => __awaiter$q(void 0, void 0, void 0, function* () {
             onLongPress(digit, index);
         }),
         touchEventsOnly: isMobile
@@ -14197,7 +15447,7 @@ const dropdownStyles = {
     callout: Object.assign({ height: _pxToRem(300), overflow: 'auto' }, scrollbarStyles)
 };
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -14222,7 +15472,7 @@ const _CaptionsSettingsModal = (props) => {
             onDismissCaptionsSettings();
         }
     }, [onDismissCaptionsSettings]);
-    const onConfirm = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const onConfirm = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         const languageCode = selectedItem.key.toString();
         if (isCaptionsFeatureActive) {
             onSetSpokenLanguage(languageCode);
@@ -14819,7 +16069,7 @@ const findConditionalCompiledSelector = (component) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -14842,35 +16092,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$o(void 0, void 0, void 0, function* () {
             const sendMessageRequest = {
                 content,
                 senderDisplayName: chatClient.getState().displayName
             };
             yield chatThreadClient.sendMessage(sendMessageRequest, options);
         }),
-        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$o(void 0, void 0, void 0, function* () {
             const updatedMetadata = metadata ? Object.assign({}, metadata) : {};
             updatedMetadata['fileSharingMetadata'] = JSON.stringify((options === null || options === void 0 ? void 0 : options.attachedFilesMetadata) || []);
             yield chatThreadClient.updateMessage(messageId, { content, metadata: updatedMetadata });
         }),
-        onDeleteMessage: (messageId) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$n(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$n(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$o(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$n(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$o(void 0, void 0, void 0, function* () {
             var _a, _b, _c;
             if (messageIterator === undefined) {
                 // Lazy definition so that errors in the method call are reported correctly.
@@ -15669,7 +16919,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$m = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$n = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -15944,7 +17194,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$m(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$n(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -16056,7 +17306,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 // 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); } }
@@ -16145,7 +17395,7 @@ class EventSubscriber {
         };
         // This is a temporary fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK.
         // Without the temporary fix, there are missing 'participant joined' and 'participant left' system messages in the chat thread.
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$l(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$m(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -16237,7 +17487,7 @@ class EventSubscriber {
 // 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); } }
@@ -16259,7 +17509,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$k(this, void 0, void 0, function* () {
+                return __awaiter$l(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -16274,7 +17524,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$k(this, void 0, void 0, function* () {
+                        return __awaiter$l(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -16358,7 +17608,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 // 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); } }
@@ -16377,14 +17627,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     const message = yield chatThreadClient.getMessage(...args);
                     this._context.setChatMessage(chatThreadClient.threadId, convertChatMessage(message));
                     return message;
                 }), 'ChatThreadClient.getMessage');
             }
             case 'sendMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -16424,7 +17674,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -16433,7 +17683,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     // DeleteMessage is able to either delete local one(for failed message) or synced message
                     const [messageId] = args;
                     if (this._context.deleteLocalMessage(chatThreadClient.threadId, messageId)) {
@@ -16451,12 +17701,12 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'sendTypingNotification': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     return yield chatThreadClient.sendTypingNotification(...args);
                 }), 'ChatThreadClient.sendTypingNotification');
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -16464,7 +17714,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateMessage(...args);
                     const [messageId, updateOption] = args;
                     this._context.updateChatMessageContent(chatThreadClient.threadId, messageId, updateOption === null || updateOption === void 0 ? void 0 : updateOption.content);
@@ -16472,7 +17722,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -16480,7 +17730,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$k(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -16517,7 +17767,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 // 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); } }
@@ -16536,7 +17786,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -16549,7 +17799,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -16569,7 +17819,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -16580,7 +17830,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -17185,7 +18435,7 @@ const END_CALL_PAGES = [
 // 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); } }
@@ -17221,7 +18471,7 @@ const isCameraOn = (state) => {
 /**
  * @private
  */
-const startSelectedVideoEffect = (adapter) => __awaiter$h(void 0, void 0, void 0, function* () {
+const startSelectedVideoEffect = (adapter) => __awaiter$i(void 0, void 0, void 0, function* () {
     if (adapter.getState().selectedVideoBackgroundEffect) {
         const selectedVideoBackgroundEffect = adapter.getState().selectedVideoBackgroundEffect;
         if ((selectedVideoBackgroundEffect === null || selectedVideoBackgroundEffect === void 0 ? void 0 : selectedVideoBackgroundEffect.effectName) === 'blur') {
@@ -17426,7 +18676,7 @@ const isDisabled$2 = (option) => {
 /**
  * @returns Permissions state for the camera.
  */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$h(void 0, void 0, void 0, function* () {
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'camera' })).state;
     }
@@ -17439,7 +18689,7 @@ const queryCameraPermissionFromPermissionsAPI = () => __awaiter$h(void 0, void 0
 /**
  * @returns Permissions state for the microphone.
  */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$h(void 0, void 0, void 0, function* () {
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
     try {
         return (yield navigator.permissions.query({ name: 'microphone' })).state;
     }
@@ -17456,7 +18706,7 @@ const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$h(void 0, vo
  * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$h(void 0, void 0, void 0, function* () {
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$i(void 0, void 0, void 0, function* () {
     const [cameraResult, microphoneResult] = yield Promise.all([
         queryCameraPermissionFromPermissionsAPI(),
         queryMicrophonePermissionFromPermissionsAPI()
@@ -17546,7 +18796,7 @@ const dismissVideoEffectsError = (toDismiss) => {
 // 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); } }
@@ -17681,9 +18931,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -17717,8 +18967,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -17735,51 +18985,51 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -17814,8 +19064,8 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images) */
     downloadAttachments(options) {
-        return __awaiter$g(this, void 0, void 0, function* () {
-            return this.asyncTeeErrorToEventEmitter(() => __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
+            return this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
                     const e = new Error();
                     e['target'] = 'ChatThreadClient.getMessage';
@@ -17835,9 +19085,9 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images) */
     downloadAuthenticatedFile(accessToken, options) {
-        return __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
             function fetchWithAuthentication(url, token) {
-                return __awaiter$g(this, void 0, void 0, function* () {
+                return __awaiter$h(this, void 0, void 0, function* () {
                     const headers = new Headers();
                     headers.append('Authorization', `Bearer ${token}`);
                     try {
@@ -17905,7 +19155,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$g(this, void 0, void 0, function* () {
+        return __awaiter$h(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -17947,7 +19197,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$g(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$h(void 0, void 0, void 0, function* () {
     if (!isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -18016,7 +19266,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$g(void 0, void 0, void 0, function* () {
+        (() => __awaiter$h(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -18048,7 +19298,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$g(void 0, void 0, void 0, function* () {
+            (() => __awaiter$h(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -18072,7 +19322,7 @@ beforeDispose) => {
 function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient,
 /* @conditional-compile-remove(teams-inline-images) */
 options) {
-    return __awaiter$g(this, void 0, void 0, function* () {
+    return __awaiter$h(this, void 0, void 0, function* () {
         return new AzureCommunicationChatAdapter(chatClient, chatThreadClient,
         /* @conditional-compile-remove(teams-inline-images) */ options);
     });
@@ -18285,7 +19535,7 @@ const sendboxContainerStyles = {
 // 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); } }
@@ -18306,7 +19556,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$f(void 0, void 0, void 0, function* () {
+        (() => __awaiter$g(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -18670,7 +19920,7 @@ const FileDownloadErrorBar = (props) => {
 // 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); } }
@@ -18691,7 +19941,7 @@ const ChatScreen = (props) => {
     const theme = useTheme();
     React.useEffect(() => {
         // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        const fetchData = () => __awaiter$e(void 0, void 0, void 0, function* () {
+        const fetchData = () => __awaiter$f(void 0, void 0, void 0, function* () {
             // Fetch initial data for adapter
             yield adapter.fetchInitialData();
             // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
@@ -18725,7 +19975,7 @@ const ChatScreen = (props) => {
             setDownloadErrorMessage(errorMessage);
         } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
     /* @conditional-compile-remove(teams-inline-images) */
-    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$e(void 0, void 0, void 0, function* () {
+    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$f(void 0, void 0, void 0, function* () {
         if (attachment.previewUrl) {
             const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
             return blob;
@@ -18901,7 +20151,7 @@ const adaptCompositeState = (compositeState) => {
 // 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); } }
@@ -18920,104 +20170,104 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$e(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$e(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: (forEveryone) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onHangUp: (forEveryone) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall(forEveryone);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$e(void 0, void 0, void 0, function* () {
         var _a;
         return ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold' ? yield adapter.resumeCall() : yield adapter.holdCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onAddParticipant: (participant, options) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$e(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onSendDtmfTone: (dtmfTone) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onSendDtmfTone: (dtmfTone) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.sendDtmfTone(dtmfTone);
     }),
-    onRemoveParticipant: (userId) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.setSpeaker(deviceInfo);
     }),
     onStartCall: (participants, options) => {
         const rawIds = participants.map((participant) => toFlatCommunicationIdentifier(participant));
         return adapter.startCall(rawIds, options);
     },
-    onStartScreenShare: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$e(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$e(void 0, void 0, void 0, function* () {
         var _b;
         return ((_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.isMuted) ? yield adapter.unmute() : yield adapter.mute();
     }),
-    onToggleScreenShare: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$e(void 0, void 0, void 0, function* () {
         var _c;
         return ((_c = adapter.getState().call) === null || _c === void 0 ? void 0 : _c.isScreenSharingOn)
             ? yield adapter.stopScreenShare()
             : yield adapter.startScreenShare();
     }),
-    onStartLocalVideo: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$e(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$e(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$e(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     }),
     /* @conditional-compile-remove(call-readiness) */
-    askDevicePermission: (constrain) => __awaiter$d(void 0, void 0, void 0, function* () {
+    askDevicePermission: (constrain) => __awaiter$e(void 0, void 0, void 0, function* () {
         return adapter.askDevicePermission(constrain);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onRemoveVideoBackgroundEffects: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onRemoveVideoBackgroundEffects: () => __awaiter$e(void 0, void 0, void 0, function* () {
         return yield adapter.stopVideoBackgroundEffect();
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onBlurVideoBackground: (backgroundBlurConfig) => __awaiter$e(void 0, void 0, void 0, function* () {
         return yield adapter.blurVideoBackground(backgroundBlurConfig);
     }),
     /* @conditional-compile-remove(video-background-effects) */
-    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onReplaceVideoBackground: (backgroundReplacementConfig) => __awaiter$e(void 0, void 0, void 0, function* () {
         return yield adapter.replaceVideoBackground(backgroundReplacementConfig);
     }),
     /* @conditional-compile-remove(close-captions) */
-    onStartCaptions: (options) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onStartCaptions: (options) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.startCaptions(options);
     }),
     /* @conditional-compile-remove(close-captions) */
-    onStopCaptions: () => __awaiter$d(void 0, void 0, void 0, function* () {
+    onStopCaptions: () => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.stopCaptions();
     }),
     /* @conditional-compile-remove(close-captions) */
-    onSetSpokenLanguage: (language) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onSetSpokenLanguage: (language) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.setSpokenLanguage(language);
     }),
     /* @conditional-compile-remove(close-captions) */
-    onSetCaptionLanguage: (language) => __awaiter$d(void 0, void 0, void 0, function* () {
+    onSetCaptionLanguage: (language) => __awaiter$e(void 0, void 0, void 0, function* () {
         yield adapter.setCaptionLanguage(language);
     })
 }));
@@ -19148,7 +20398,7 @@ const MoreButton = (props) => {
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'optionsButtonLabelKey', showLabel: props.showLabel, onRenderOnIcon: icon$2, onRenderOffIcon: icon$2, onClick: props.onClick, "data-ui-id": props['data-ui-id'] })));
 };
-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); } }
@@ -19176,7 +20426,7 @@ const CaptionsBannerMoreButton = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const moreButtonContextualMenuItems = [];
     /* @conditional-compile-remove(close-captions) */
-    const startCaptions = React.useCallback(() => __awaiter$c(void 0, void 0, void 0, function* () {
+    const startCaptions = React.useCallback(() => __awaiter$d(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
@@ -20016,7 +21266,7 @@ const onFetchCustomButtonPropsTrampoline = (options) => {
 // 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); } }
@@ -20039,7 +21289,7 @@ const DesktopMoreButton = (props) => {
     /* @conditional-compile-remove(close-captions) */
     const startCaptionsButtonHandlers = useHandlers();
     /* @conditional-compile-remove(close-captions) */
-    const startCaptions = React.useCallback(() => __awaiter$b(void 0, void 0, void 0, function* () {
+    const startCaptions = React.useCallback(() => __awaiter$c(void 0, void 0, void 0, function* () {
         yield startCaptionsButtonHandlers.onStartCaptions({
             spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
         });
@@ -20715,7 +21965,7 @@ const themedToggleButtonStyle = (theme, checked) => {
 // 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); } }
@@ -20857,7 +22107,7 @@ const MoreDrawer = (props) => {
         ? defaultSpokenLanguage
         : startCaptionsButtonProps.currentSpokenLanguage);
     /* @conditional-compile-remove(close-captions) */
-    const onToggleChange = React.useCallback(() => __awaiter$a(void 0, void 0, void 0, function* () {
+    const onToggleChange = React.useCallback(() => __awaiter$b(void 0, void 0, void 0, function* () {
         if (!startCaptionsButtonProps.checked) {
             yield startCaptionsButtonHandlers.onStartCaptions({
                 spokenLanguage: currentSpokenLanguage
@@ -21160,7 +22410,7 @@ const SidePane = (props) => {
     return (React__default['default'].createElement(react.Stack, { verticalFill: true, grow: true, styles: paneStyles, "data-ui-id": "SidePane", tokens: props.mobileView ? {} : sidePaneTokens },
         React__default['default'].createElement(Header, null),
         React__default['default'].createElement(react.Stack.Item, { verticalFill: true, grow: true, styles: paneBodyContainer },
-            React__default['default'].createElement(react.Stack, { horizontal: true, styles: scrollableContainer },
+            React__default['default'].createElement(react.Stack, { verticalFill: true, styles: scrollableContainer },
                 ContentRender && (React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React__default['default'].createElement(ContentRender, null))),
                 OverrideContentRender && (React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: !(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive) && (overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.persistRenderingWhenClosed)
@@ -21540,7 +22790,7 @@ const AddPeopleButton = (props) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$9 = (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); } }
@@ -21562,11 +22812,11 @@ const PeoplePaneContent = (props) => {
         return localeStrings.strings.call;
     };
     const strings = getStrings();
-    const removeParticipantFromCall = React.useCallback((participantId) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const removeParticipantFromCall = React.useCallback((participantId) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(participantId);
     }), [adapter]);
     /* @conditional-compile-remove(PSTN-calls) */
-    const addParticipantToCall = React.useCallback((participant, options) => __awaiter$9(void 0, void 0, void 0, function* () {
+    const addParticipantToCall = React.useCallback((participant, options) => __awaiter$a(void 0, void 0, void 0, function* () {
         yield adapter.addParticipant(participant, options);
     }), [adapter]);
     /* @conditional-compile-remove(PSTN-calls) */
@@ -21593,7 +22843,7 @@ const PeoplePaneContent = (props) => {
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveAParticipant = (participantId) => __awaiter$9(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$a(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
         return Object.assign(Object.assign({}, participantListDefaultProps), {
             // Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
             onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant,
@@ -21724,7 +22974,7 @@ const localVideoSelector = reselect__namespace.createSelector([callStatusSelecto
     };
 });
-var __awaiter$8 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$9 = (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); } }
@@ -21787,7 +23037,7 @@ const VideoEffectsPaneContent = (props) => {
         return videoEffects;
     }, [strings, adapter]);
     /* @conditional-compile-remove(video-background-effects) */
-    const onEffectChange = React.useCallback((effectKey) => __awaiter$8(void 0, void 0, void 0, function* () {
+    const onEffectChange = React.useCallback((effectKey) => __awaiter$9(void 0, void 0, void 0, function* () {
         if (effectKey === 'blur') {
             const blurEffect = {
                 effectName: effectKey
@@ -22153,7 +23403,8 @@ const CallArrangement = (props) => {
             display: isMobileWithActivePane ? 'none' : 'flex',
             minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,
             width: '100%',
-            height: '100%'
+            height: '100%',
+            position: 'relative'
         };
     }, [isMobileWithActivePane, props.mobileView]);
     /* @conditional-compile-remove(PSTN-calls) */
@@ -23124,6 +24375,22 @@ const effectsButtonStyles = (theme) => {
 const fillWidth = react.mergeStyles({
     width: '100%'
 });
+/** @private */
+const panelStyles = {
+    content: {
+        display: 'flex',
+        flexBasis: '100%'
+    },
+    scrollableContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+    }
+};
+/** @private */
+const panelFocusProps = {
+    forceFocusInsideTrap: false
+};
 // Copyright (c) Microsoft Corporation.
 /**
@@ -23189,7 +24456,7 @@ const localPreviewButtonStyle = {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$8 = (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); } }
@@ -23209,7 +24476,7 @@ const LocalPreview = (props) => {
     const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector$1(devicePermissionSelector);
     const isLocalMicrophoneEnabled = useSelector$1(getLocalMicrophoneEnabled);
     const adapter = useAdapter();
-    const onToggleMic = React.useCallback(() => __awaiter$7(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$8(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
@@ -23476,13 +24743,22 @@ const CallReadinessModalFallBack = (props) => {
 };
 // Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$7 = (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());
+    });
+};
 /**
  * @private
  */
 const ConfigurationPage = (props) => {
     var _a, _b;
-    const { startCallHandler, mobileView,
-    /* @conditional-compile-remove(call-readiness) */ modalLayerHostId,
+    const { startCallHandler, mobileView, modalLayerHostId,
     /* @conditional-compile-remove(call-readiness) */ deviceChecks,
     /* @conditional-compile-remove(call-readiness) */ onPermissionsTroubleshootingClick,
     /* @conditional-compile-remove(call-readiness) */ onNetworkingTroubleShootingClick } = props;
@@ -23575,7 +24851,15 @@ const ConfigurationPage = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     const forceShowingCheckPermissions = !minimumFallbackTimerElapsed;
     /* @conditional-compile-remove(video-background-effects) */
-    const { toggleVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView);
+    const { toggleVideoEffectsPane, closeVideoEffectsPane, isVideoEffectsPaneOpen } = useVideoEffectsPane(props.updateSidePaneRenderer, mobileView);
+    const startCall = React.useCallback(() => __awaiter$7(void 0, void 0, void 0, function* () {
+        /* @conditional-compile-remove(video-background-effects) */
+        closeVideoEffectsPane();
+        startCallHandler();
+    }), [startCallHandler, /* @conditional-compile-remove(video-background-effects) */ closeVideoEffectsPane]);
+    const panelLayerProps = React.useMemo(() => ({
+        hostId: modalLayerHostId
+    }), [modalLayerHostId]);
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
             React__default['default'].createElement(ConfigurationPageErrorBar
@@ -23593,11 +24877,7 @@ const ConfigurationPage = (props) => {
                 onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, errorBarProps: errorBarProps })),
         /* @conditional-compile-remove(call-readiness) */
         // show the following screen if permission API is availible (not unsupported) and videoState, audioState is assigned values
-        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal
-        /* @conditional-compile-remove(call-readiness) */
-        , {
-            /* @conditional-compile-remove(call-readiness) */
-            modalLayerHostId: modalLayerHostId, mobileView: mobileView,
+        videoState && videoState !== 'unsupported' && audioState && audioState !== 'unsupported' && (React__default['default'].createElement(CallReadinessModal, { modalLayerHostId: modalLayerHostId, mobileView: mobileView,
             /* @conditional-compile-remove(unsupported-browser) */
             environmentInfo: environmentInfo, permissionsState: permissionsState, isPermissionsModalDismissed: isPermissionsModalDismissed, setIsPermissionsModalDismissed: setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick })),
         /* @conditional-compile-remove(call-readiness) */
@@ -23631,8 +24911,13 @@ const ConfigurationPage = (props) => {
                                 setIsPermissionsModalDismissed(true);
                             } })))),
                     React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
-                        React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton })))),
-            React__default['default'].createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer }))));
+                        React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCall, disabled: disableStartCallButton })))),
+            React__default['default'].createElement(react.Panel
+            /* @conditional-compile-remove(video-background-effects) */
+            , {
+                /* @conditional-compile-remove(video-background-effects) */
+                isOpen: isVideoEffectsPaneOpen, hasCloseButton: false, isBlocking: false, isHiddenOnDismiss: false, styles: panelStyles, focusTrapZoneProps: panelFocusProps, layerProps: panelLayerProps },
+                React__default['default'].createElement(SidePane, { mobileView: props.mobileView, updateSidePaneRenderer: props.updateSidePaneRenderer })))));
 };
 const localPreviewTrampoline = (mobileView, doNotShow) => {
     /* @conditional-compile-remove(rooms) */
@@ -24105,9 +25390,7 @@ const MainScreen = (props) => {
         case 'configuration':
             pageElement = (React__default['default'].createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
                     adapter.joinCall();
-                }, updateSidePaneRenderer: setSidePaneRenderer,
-                /* @conditional-compile-remove(call-readiness) */
-                modalLayerHostId: props.modalLayerHostId,
+                }, updateSidePaneRenderer: setSidePaneRenderer, modalLayerHostId: props.modalLayerHostId,
                 /* @conditional-compile-remove(call-readiness) */
                 deviceChecks: (_a = props.options) === null || _a === void 0 ? void 0 : _a.deviceChecks,
                 /* @conditional-compile-remove(call-readiness) */