@azure/communication-react 1.3.2-alpha-202207190020.0 → 1.3.2-alpha-202207220024.0

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

@@ -191,7 +191,7 @@ const fromFlatCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.3.2-alpha-202207190020.0';
+var telemetryVersion = '1.3.2-alpha-202207220024.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -364,7 +364,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // 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); } }
@@ -402,7 +402,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$s(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$t(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -509,7 +509,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // 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); } }
@@ -533,7 +533,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$s(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?
@@ -553,7 +553,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$s(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -566,7 +566,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (call && _isInCall(call.state)) {
             const stream = call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
             if (stream) {
@@ -596,19 +596,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -631,19 +631,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$s(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$r(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$r(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$r(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = () => __awaiter$r(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
+    const onStartScreenShare = () => __awaiter$s(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$s(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$s(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = () => __awaiter$s(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp()); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$r(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$r(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$s(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$s(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -659,7 +659,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         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$r(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -687,7 +687,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
         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$r(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -708,7 +708,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$s(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');
@@ -720,11 +720,11 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         // TODO: we need to remember which LocalVideoStream was used for LocalPreview and dispose that one.
         yield disposeAllLocalPreviewViews(callClient);
     });
-    const onRemoveParticipant = (userId) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$s(void 0, void 0, void 0, function* () {
         yield (call === null || call === void 0 ? void 0 : call.removeParticipant(fromFlatCommunicationIdentifier(userId)));
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onAddParticipant = (participant, options) => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onAddParticipant = (participant, options) => __awaiter$s(void 0, void 0, void 0, function* () {
         if (communicationCommon.isPhoneNumberIdentifier(participant)) {
             yield (call === null || call === void 0 ? void 0 : call.addParticipant(participant, options));
         }
@@ -733,7 +733,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     /* @conditional-compile-remove(dialpad) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$r(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$s(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     return {
         onHangUp,
         /* @conditional-compile-remove(PSTN-calls) */
@@ -3280,21 +3280,15 @@ const ChatMessageActionFlyout = (props) => {
         messageReadByList
     ]);
     // gap space uses pixels
-    return (React__default['default'].createElement(react.ContextualMenu, { id: "chat-composite-message-contextual-menu", alignTargetEdge: true, gapSpace: 5 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: react.DirectionalHint.topRightEdge, className: chatMessageMenuStyle }));
+    return (React__default['default'].createElement(react.ContextualMenu, { id: "chat-composite-message-contextual-menu", alignTargetEdge: true, gapSpace: 5 /*px*/, isBeakVisible: false, items: menuItems, hidden: props.hidden, target: props.target, onDismiss: props.onDismiss, directionalHint: react.DirectionalHint.topRightEdge, className: chatMessageMenuStyle, calloutProps: preventUnwantedDismissProps }));
 };
+/**
+ * Similar to {@link preventDismissOnEvent}, but not prevent dismissing from scrolling, since it is causing bugs in chat thread.
+ */
 const preventUnwantedDismissProps = {
-    // Disable dismiss on resize to work around a couple Fluent UI bugs
-    // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
-    //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
-    //   by the headless SDK.
-    // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
-    //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
-    //   deterministically avoid dismissal.
-    //
-    // A side effect of this workaround is that the context menu stays open when window is resized, and may
-    // get detached from original target visually. That bug is preferable to the bug when this value is not set -
-    // The Callout (frequently) gets dismissed automatically.
-    preventDismissOnResize: true
+    preventDismissOnEvent: (ev) => {
+        return ev.type === 'resize';
+    }
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -3378,7 +3372,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-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); } }
@@ -3409,7 +3403,7 @@ const _FileDownloadCards = (props) => {
         /* @conditional-compile-remove(file-sharing) */
         localeStrings.downloadFile
     ]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$q(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$r(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -3547,7 +3541,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // 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); } }
@@ -3581,7 +3575,7 @@ const ChatMessageComponent = (props) => {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     else if (isEditing) {
-        return (React__default['default'].createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter$p(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$q(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -3607,6 +3601,21 @@ const ChatMessageComponent = (props) => {
 const convertRemToPx = (rem) => {
     return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 };
+/**
+ * Converts units of rem to units of pixels
+ * @private
+ * Disable dismiss on resize to work around a couple Fluent UI bugs
+ * - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
+ * happens when we change the VideoGallery layout, or even when the video stream element is internally resized
+ * by the headless SDK.
+ * - We also want to prevent dismiss when chat pane is scrolling especially a new message is added.
+ * A side effect of this workaround is that the context menu stays open when window is resized, and may
+ * get detached from original target visually. That bug is preferable to the bug when this value is not set -
+ * The Callout (frequently) gets dismissed automatically.
+ */
+const preventDismissOnEvent = (ev) => {
+    return ev.type === 'resize' || ev.type === 'scroll';
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -3691,7 +3700,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$p = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3918,7 +3927,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$o(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -3969,7 +3978,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$p(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -4415,18 +4424,7 @@ const ParticipantItem = (props) => {
         menuItems && menuItems.length > 0 && (React__default['default'].createElement(React__default['default'].Fragment, null,
             menuButton,
             React__default['default'].createElement(react.ContextualMenu, { items: menuItems, hidden: menuHidden, target: containerRef, onItemClick: onDismissMenu, onDismiss: onDismissMenu, directionalHint: react.DirectionalHint.bottomRightEdge, className: contextualMenuStyle, calloutProps: {
-                    // Disable dismiss on resize to work around a couple Fluent UI bugs
-                    // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
-                    //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
-                    //   by the headless SDK.
-                    // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
-                    //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
-                    //   deterministically avoid dismissal.
-                    //
-                    // A side effect of this workaround is that the context menu stays open when window is resized, and may
-                    // get detached from original target visually. That bug is preferable to the bug when this value is not set -
-                    // The Callout (frequently) gets dismissed automatically.
-                    preventDismissOnResize: true
+                    preventDismissOnEvent
                 } })))));
 };
 
@@ -6466,18 +6464,7 @@ const generateDefaultDeviceMenuProps = (props, strings) => {
                     maxWidth: '95%'
                 }
             },
-            // Disable dismiss on resize to work around a couple Fluent UI bugs
-            // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
-            //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
-            //   by the headless SDK.
-            // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
-            //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
-            //   deterministically avoid dismissal.
-            //
-            // A side effect of this workaround is that the context menu stays open when window is resized, and may
-            // get detached from original target visually. That bug is preferable to the bug when this value is not set -
-            // The Callout (frequently) gets dismissed automatically.
-            preventDismissOnResize: true
+            preventDismissOnEvent
         }
     };
     const menuItemStyles = react.merge(buttonFlyoutItemStyles, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuItemStyles) !== null && _b !== void 0 ? _b : {});
@@ -6590,7 +6577,7 @@ const DevicesButton = (props) => {
 
 // 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); } }
@@ -6627,7 +6614,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$n(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$o(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -6759,7 +6746,7 @@ const lightThemeCallButtonStyles = {
 
 // 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); } }
@@ -6800,7 +6787,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$m(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$n(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -6901,18 +6888,7 @@ const ParticipantsButton = (props) => {
             styles: react.merge(participantsButtonMenuPropsStyle, styles === null || styles === void 0 ? void 0 : styles.menuStyles),
             items: [],
             calloutProps: {
-                // Disable dismiss on resize to work around a couple Fluent UI bugs
-                // - The Callout is dismissed whenever *any child of window (inclusive)* is resized. In practice, this
-                //   happens when we change the VideoGallery layout, or even when the video stream element is internally resized
-                //   by the headless SDK.
-                // - There is a `preventDismissOnEvent` prop that we could theoretically use to only dismiss when the target of
-                //   of the 'resize' event is the window itself. But experimentation shows that setting that prop doesn't
-                //   deterministically avoid dismissal.
-                //
-                // A side effect of this workaround is that the context menu stays open when window is resized, and may
-                // get detached from original target visually. That bug is preferable to the bug when this value is not set -
-                // The Callout (frequently) gets dismissed automatically.
-                preventDismissOnResize: true
+                preventDismissOnEvent
             }
         };
         if (participantCount > 0) {
@@ -6941,7 +6917,7 @@ const ParticipantsButton = (props) => {
                         },
                         // Disable dismiss on resize to work around a couple Fluent UI bugs
                         // See reasoning in the props for the parent menu.
-                        preventDismissOnResize: true
+                        preventDismissOnEvent
                     }
                 },
                 'data-ui-id': ids.participantButtonPeopleMenuItem
@@ -7776,6 +7752,60 @@ const HoldButton = (props) => {
     return (React__default['default'].createElement(ControlBarButton, Object.assign({}, props, { strings: strings, onClick: onToggleHold !== null && onToggleHold !== void 0 ? onToggleHold : props.onClick, onRenderOnIcon: onRenderResumeIcon, onRenderOffIcon: onRenderHoldIcon })));
 };
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * @internal
+ */
+const presenterPermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: true,
+    participantList: true
+};
+/**
+ * @internal
+ */
+const consumerPermissions = {
+    cameraButton: false,
+    microphoneButton: false,
+    screenShare: false,
+    participantList: false
+};
+/**
+ * @internal
+ */
+const attendeePermissions = {
+    cameraButton: true,
+    microphoneButton: true,
+    screenShare: false,
+    participantList: true
+};
+/**
+ * @internal
+ */
+const PermissionsContext = React.createContext(presenterPermissions);
+/**
+ * @internal
+ */
+const _PermissionsProvider = (props) => {
+    const { permissions, children } = props;
+    return React__default['default'].createElement(PermissionsContext.Provider, { value: permissions }, children);
+};
+/**
+ * @internal
+ */
+const _getPermissions = (role) => {
+    if (role === 'Consumer') {
+        return consumerPermissions;
+    }
+    else if (role === 'Attendee') {
+        return attendeePermissions;
+    }
+    else {
+        return presenterPermissions;
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 /**
@@ -8215,7 +8245,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // 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); } }
@@ -8238,35 +8268,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$l(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$m(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$l(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$m(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$l(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$m(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$l(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$m(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$l(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$m(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$l(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$m(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$l(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$m(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$l(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$m(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.
@@ -8957,7 +8987,7 @@ const findSelector = (component) => {
 
 // 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); } }
@@ -9006,10 +9036,10 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$k(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$l(this, void 0, void 0, function* () {
             this._context.setDeviceManagerCameras(dedupeById(yield this._deviceManager.getCameras()));
         });
-        this.audioDevicesUpdated = () => __awaiter$k(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$l(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -9206,7 +9236,7 @@ class CallIdHistory {
 
 // 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); } }
@@ -9691,7 +9721,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$j(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$k(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -9755,7 +9785,7 @@ const findOldestCallEnded = (calls) => {
 
 // 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); } }
@@ -9775,63 +9805,63 @@ class ProxyCall {
         switch (prop) {
             case 'mute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.mute(...args);
                     });
                 }, 'Call.mute');
             }
             case 'unmute': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.unmute(...args);
                     });
                 }, 'Call.unmute');
             }
             case 'startVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.startVideo(...args);
                     });
                 }, 'Call.startVideo');
             }
             case 'stopVideo': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.stopVideo(...args);
                     });
                 }, 'Call.stopVideo');
             }
             case 'startScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.startScreenSharing(...args);
                     });
                 }, 'Call.startScreenSharing');
             }
             case 'stopScreenSharing': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.stopScreenSharing(...args);
                     });
                 }, 'Call.stopScreenSharing');
             }
             case 'hold': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.hold(...args);
                     });
                 }, 'Call.hold');
             }
             case 'resume': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.resume(...args);
                     });
                 }, 'Call.resume');
             }
             case 'addParticipant': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$i(this, void 0, void 0, function* () {
+                    return __awaiter$j(this, void 0, void 0, function* () {
                         return yield target.addParticipant(...args);
                     });
                 }, 'Call.addParticipant');
@@ -10039,7 +10069,7 @@ class RemoteVideoStreamSubscriber {
 
 // 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); } }
@@ -10049,7 +10079,7 @@ var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$h(this, void 0, void 0, function* () {
+    return __awaiter$i(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -10157,7 +10187,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$h(this, void 0, void 0, function* () {
+    return __awaiter$i(this, void 0, void 0, function* () {
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
@@ -10273,7 +10303,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$h(this, void 0, void 0, function* () {
+    return __awaiter$i(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -10833,7 +10863,7 @@ class CallSubscriber {
 
 // 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); } }
@@ -10853,14 +10883,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$g(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$g(this, void 0, void 0, function* () {
+                    return __awaiter$h(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -11198,7 +11228,7 @@ class InternalCallContext {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$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); } }
@@ -11220,7 +11250,7 @@ class ProxyCallClient {
     get(target, prop) {
         switch (prop) {
             case 'createCallAgent': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$f(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$g(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.
@@ -11233,7 +11263,7 @@ class ProxyCallClient {
                 }), 'CallClient.createCallAgent');
             }
             case 'getDeviceManager': {
-                return this._context.withAsyncErrorTeedToState(() => __awaiter$f(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState(() => __awaiter$g(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.
@@ -11356,7 +11386,7 @@ const chatStatefulLogger = logger.createClientLogger('communication-react:chat-s
 
 // 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); } }
@@ -11631,7 +11661,7 @@ class ChatContext$1 {
      * @throws ChatError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(f, target) {
-        return (...args) => __awaiter$e(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$f(this, void 0, void 0, function* () {
             try {
                 return yield f(...args);
             }
@@ -11738,7 +11768,7 @@ const convertChatMessage = (message, status = 'delivered', clientMessageId) => {
 
 // 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); } }
@@ -11822,7 +11852,7 @@ class EventSubscriber {
             this.fetchLastParticipantMessage(event.threadId, 'participantAdded');
         };
         // This is a hot fix that no participant message is received for onChatMessageReceived event, which should be handled by JS SDK
-        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$d(this, void 0, void 0, function* () {
+        this.fetchLastParticipantMessage = (threadId, actionType) => __awaiter$e(this, void 0, void 0, function* () {
             var e_1, _a;
             try {
                 for (var _b = __asyncValues$1(this.chatClient
@@ -11908,7 +11938,7 @@ class EventSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$d = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -11930,7 +11960,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
         const threadsIterator = iteratorCreator(...args);
         return {
             next() {
-                return __awaiter$c(this, void 0, void 0, function* () {
+                return __awaiter$d(this, void 0, void 0, function* () {
                     const result = yield threadsIterator.next();
                     if (!result.done && result.value) {
                         decorateFn(result.value, context);
@@ -11945,7 +11975,7 @@ const createDecoratedIterator = (iteratorCreator, context, decorateFn) => {
                 const pages = threadsIterator.byPage(settings);
                 return {
                     next() {
-                        return __awaiter$c(this, void 0, void 0, function* () {
+                        return __awaiter$d(this, void 0, void 0, function* () {
                             const result = yield pages.next();
                             const page = result.value;
                             if (!result.done && result.value) {
@@ -12029,7 +12059,7 @@ const createDecoratedListParticipants = (chatThreadClient, context) => {
 
 // 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); } }
@@ -12048,14 +12078,14 @@ class ProxyChatThreadClient {
                 return createDecoratedListMessages(chatThreadClient, this._context);
             }
             case 'getMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(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$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(this, void 0, void 0, function* () {
                     // Retry logic?
                     const [request, options] = args;
                     const { content } = request;
@@ -12095,7 +12125,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.sendMessage');
             }
             case 'addParticipants': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.addParticipants(...args);
                     const [addRequest] = args;
                     const participantsToAdd = addRequest.participants;
@@ -12104,7 +12134,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.addParticipants');
             }
             case 'deleteMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(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)) {
@@ -12122,7 +12152,7 @@ class ProxyChatThreadClient {
                 return createDecoratedListReadReceipts(chatThreadClient, this._context);
             }
             case 'removeParticipant': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.removeParticipant(...args);
                     const [removeIdentifier] = args;
                     this._context.deleteParticipant(chatThreadClient.threadId, communicationCommon.getIdentifierKind(removeIdentifier));
@@ -12130,7 +12160,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.removeParticipant');
             }
             case 'updateMessage': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(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);
@@ -12138,7 +12168,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateMessage');
             }
             case 'updateTopic': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.updateTopic(...args);
                     const [topic] = args;
                     this._context.updateThreadTopic(chatThreadClient.threadId, topic);
@@ -12146,7 +12176,7 @@ class ProxyChatThreadClient {
                 }), 'ChatThreadClient.updateTopic');
             }
             case 'getProperties': {
-                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$b(this, void 0, void 0, function* () {
+                return this._context.withAsyncErrorTeedToState((...args) => __awaiter$c(this, void 0, void 0, function* () {
                     const result = yield chatThreadClient.getProperties(...args);
                     this._context.updateThread(chatThreadClient.threadId, result);
                     return result;
@@ -12183,7 +12213,7 @@ const createDecoratedListThreads = (chatClient, context) => {
 
 // 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); } }
@@ -12202,7 +12232,7 @@ const proxyChatClient = {
         switch (prop) {
             case 'createChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$a(this, void 0, void 0, function* () {
+                    return __awaiter$b(this, void 0, void 0, function* () {
                         const result = yield chatClient.createChatThread(...args);
                         const thread = result.chatThread;
                         if (thread) {
@@ -12215,7 +12245,7 @@ const proxyChatClient = {
             }
             case 'deleteChatThread': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$a(this, void 0, void 0, function* () {
+                    return __awaiter$b(this, void 0, void 0, function* () {
                         const result = yield chatClient.deleteChatThread(...args);
                         context.deleteThread(args[0]);
                         return result;
@@ -12235,7 +12265,7 @@ const proxyChatClient = {
             }
             case 'startRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$a(this, void 0, void 0, function* () {
+                    return __awaiter$b(this, void 0, void 0, function* () {
                         const ret = yield chatClient.startRealtimeNotifications(...args);
                         if (!receiver.eventSubscriber) {
                             receiver.eventSubscriber = new EventSubscriber(chatClient, context);
@@ -12246,7 +12276,7 @@ const proxyChatClient = {
             }
             case 'stopRealtimeNotifications': {
                 return context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$a(this, void 0, void 0, function* () {
+                    return __awaiter$b(this, void 0, void 0, function* () {
                         const ret = yield chatClient.stopRealtimeNotifications(...args);
                         if (receiver.eventSubscriber) {
                             receiver.eventSubscriber.unsubscribe();
@@ -12427,7 +12457,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
+var call$d={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",peopleButtonLabel:"People",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",soundLabel:"Sound",startCallButtonLabel:"Start call"};var chat$d={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$d={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_US = {call:call$d,chat:chat$d,callWithChat:callWithChat$d};
 
 var call$c={cameraLabel:"Camera",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",defaultPlaceHolder:"Select an option",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",soundLabel:"Sound",startCallButtonLabel:"Start call",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby."};var chat$c={chatListHeader:"In this chat"};var callWithChat$c={peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",chatButtonLabel:"Chat",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipOpen:"Show chat",chatButtonTooltipClose:"Hide chat",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",peoplePaneTitle:"People",peoplePaneSubTitle:"In this call",chatPaneTitle:"Chat",chatButtonNewMessageNotificationLabel:"New Message",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",copyInviteLinkButtonLabel:"Copy invite link",dismissSidePaneButton:"Close",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back"};var en_GB = {call:call$c,chat:chat$c,callWithChat:callWithChat$c};
 
@@ -12830,7 +12860,7 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
 
 // 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); } }
@@ -12956,9 +12986,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -12992,8 +13022,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(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) */
@@ -13010,49 +13040,49 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
             yield this.handlers.onTyping();
         });
     }
     removeParticipant(userId) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$9(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$a(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -13133,7 +13163,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$9(this, void 0, void 0, function* () {
+        return __awaiter$a(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -13175,7 +13205,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$9(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$a(void 0, void 0, void 0, function* () {
     const chatClient = createStatefulChatClient({
         userId,
         displayName,
@@ -13238,7 +13268,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$9(void 0, void 0, void 0, function* () {
+        (() => __awaiter$a(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -13270,7 +13300,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$9(void 0, void 0, void 0, function* () {
+            (() => __awaiter$a(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -13291,7 +13321,7 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$9(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapterFromClient = (chatClient, chatThreadClient) => __awaiter$a(void 0, void 0, void 0, function* () {
     return new AzureCommunicationChatAdapter(chatClient, chatThreadClient);
 });
 const isChatError = (e) => {
@@ -13472,7 +13502,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-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); } }
@@ -13493,7 +13523,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$8(void 0, void 0, void 0, function* () {
+        (() => __awaiter$9(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -14168,7 +14198,7 @@ const getCallCompositePage = (call, previousCall) => {
 
 // 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); } }
@@ -14187,68 +14217,68 @@ _component) => {
     return createCompositeHandlers(useAdapter());
 };
 const createCompositeHandlers = memoizeOne__default['default']((adapter) => ({
-    onCreateLocalStreamView: (options) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onCreateLocalStreamView: (options) => __awaiter$8(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(undefined, options);
     }),
-    onCreateRemoteStreamView: (userId, options) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onCreateRemoteStreamView: (userId, options) => __awaiter$8(void 0, void 0, void 0, function* () {
         return yield adapter.createStreamView(userId, options);
     }),
-    onHangUp: () => __awaiter$7(void 0, void 0, void 0, function* () {
+    onHangUp: () => __awaiter$8(void 0, void 0, void 0, function* () {
         yield adapter.leaveCall();
     }),
     /* @conditional-compile-remove(PSTN-calls) */
-    onToggleHold: () => __awaiter$7(void 0, void 0, void 0, function* () {
+    onToggleHold: () => __awaiter$8(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$7(void 0, void 0, void 0, function* () {
+    onAddParticipant: (participant, options) => __awaiter$8(void 0, void 0, void 0, function* () {
         return yield adapter.addParticipant(participant, options);
     }),
-    onRemoveParticipant: (userId) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onRemoveParticipant: (userId) => __awaiter$8(void 0, void 0, void 0, function* () {
         yield adapter.removeParticipant(userId);
     }),
-    onSelectCamera: (deviceInfo, options) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onSelectCamera: (deviceInfo, options) => __awaiter$8(void 0, void 0, void 0, function* () {
         yield adapter.setCamera(deviceInfo, options);
     }),
-    onSelectMicrophone: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onSelectMicrophone: (deviceInfo) => __awaiter$8(void 0, void 0, void 0, function* () {
         yield adapter.setMicrophone(deviceInfo);
     }),
-    onSelectSpeaker: (deviceInfo) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onSelectSpeaker: (deviceInfo) => __awaiter$8(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$7(void 0, void 0, void 0, function* () {
+    onStartScreenShare: () => __awaiter$8(void 0, void 0, void 0, function* () {
         yield adapter.startScreenShare();
     }),
-    onStopScreenShare: () => __awaiter$7(void 0, void 0, void 0, function* () {
+    onStopScreenShare: () => __awaiter$8(void 0, void 0, void 0, function* () {
         yield adapter.stopScreenShare();
     }),
-    onToggleCamera: (options) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onToggleCamera: (options) => __awaiter$8(void 0, void 0, void 0, function* () {
         isCameraOn(adapter.getState()) ? yield adapter.stopCamera() : yield adapter.startCamera(options);
     }),
-    onToggleMicrophone: () => __awaiter$7(void 0, void 0, void 0, function* () {
+    onToggleMicrophone: () => __awaiter$8(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$7(void 0, void 0, void 0, function* () {
+    onToggleScreenShare: () => __awaiter$8(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$7(void 0, void 0, void 0, function* () {
+    onStartLocalVideo: () => __awaiter$8(void 0, void 0, void 0, function* () {
         if (adapter.getState().call) {
             return adapter.startCamera();
         }
     }),
-    onDisposeLocalStreamView: () => __awaiter$7(void 0, void 0, void 0, function* () {
+    onDisposeLocalStreamView: () => __awaiter$8(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView();
     }),
-    onDisposeRemoteStreamView: (userId) => __awaiter$7(void 0, void 0, void 0, function* () {
+    onDisposeRemoteStreamView: (userId) => __awaiter$8(void 0, void 0, void 0, function* () {
         return adapter.disposeStreamView(userId);
     })
 }));
@@ -15288,7 +15318,7 @@ const localPreviewTileStyle = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$6 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+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); } }
@@ -15308,7 +15338,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$6(void 0, void 0, void 0, function* () {
+    const onToggleMic = React.useCallback(() => __awaiter$7(void 0, void 0, void 0, function* () {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const theme = useTheme();
@@ -15639,7 +15669,7 @@ const mainScreenContainerStyleMobile = react.mergeStyles(Object.assign(Object.as
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$5 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$6 = (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); } }
@@ -15653,26 +15683,41 @@ const MainScreen = (props) => {
     const page = useSelector$1(getPage);
     const adapter = useAdapter();
     const locale = useLocale();
+    let pageElement;
     switch (page) {
         case 'configuration':
-            return (React__default['default'].createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
+            pageElement = (React__default['default'].createElement(ConfigurationPage, { mobileView: props.mobileView, startCallHandler: () => {
                     adapter.joinCall();
                 } }));
+            break;
         case 'accessDeniedTeamsMeeting':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
+            break;
         case 'removedFromCall':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageRemovedFromCall", title: locale.strings.call.removedFromCallTitle, moreDetails: locale.strings.call.removedFromCallMoreDetails, dataUiId: 'removed-from-call-page' }));
+            break;
         case 'joinCallFailedDueToNoNetwork':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageJoinCallFailedDueToNoNetwork", title: locale.strings.call.failedToJoinCallDueToNoNetworkTitle, moreDetails: locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails, dataUiId: 'join-call-failed-due-to-no-network-page' }));
+            break;
         case 'leftCall':
-            return (React__default['default'].createElement(NoticePage, { iconName: "NoticePageLeftCall", title: locale.strings.call.leftCallTitle, moreDetails: locale.strings.call.leftCallMoreDetails, dataUiId: 'left-call-page' }));
+            pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageLeftCall", title: locale.strings.call.leftCallTitle, moreDetails: locale.strings.call.leftCallMoreDetails, dataUiId: 'left-call-page' }));
+            break;
         case 'lobby':
-            return React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, options: props.options });
+            pageElement = React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, options: props.options });
+            break;
         case 'call':
-            return (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, options: props.options }));
+            pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, options: props.options }));
+            break;
         default:
             throw new Error('Invalid call composite page');
     }
+    /* @conditional-compile-remove(rooms) */
+    const permissions = _getPermissions(props.role);
+    // default retElement for stable version
+    let retElement = pageElement;
+    /* @conditional-compile-remove(rooms) */
+    retElement = React__default['default'].createElement(_PermissionsProvider, { permissions: permissions }, pageElement);
+    return retElement;
 };
 /**
  * A customizable UI composite for calling experience.
@@ -15684,9 +15729,11 @@ const MainScreen = (props) => {
  * @public
  */
 const CallComposite = (props) => {
-    const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = props;
+    const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop', 
+    /* @conditional-compile-remove(rooms) */
+    role } = props;
     React.useEffect(() => {
-        (() => __awaiter$5(void 0, void 0, void 0, function* () {
+        (() => __awaiter$6(void 0, void 0, void 0, function* () {
             yield adapter.askDevicePermission({ video: true, audio: true });
             adapter.queryCameras();
             adapter.queryMicrophones();
@@ -15700,7 +15747,9 @@ const CallComposite = (props) => {
     return (React__default['default'].createElement("div", { className: mainScreenContainerClassName },
         React__default['default'].createElement(BaseProvider, Object.assign({}, props),
             React__default['default'].createElement(CallAdapterProvider, { adapter: adapter },
-                React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, options: options })))));
+                React__default['default'].createElement(MainScreen, { callInvitationUrl: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: mobileView, options: options, 
+                    /* @conditional-compile-remove(rooms) */
+                    role: role })))));
 };
 
 /**
@@ -15777,7 +15826,7 @@ class DiagnosticsForwarder {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$5 = (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); } }
@@ -15942,29 +15991,29 @@ class AzureCommunicationCallAdapter {
         this.callAgent.dispose();
     }
     queryCameras() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 return this.deviceManager.getCameras();
             }));
         });
     }
     queryMicrophones() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 return this.deviceManager.getMicrophones();
             }));
         });
     }
     querySpeakers() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 return this.deviceManager.isSpeakerSelectionAvailable ? this.deviceManager.getSpeakers() : [];
             }));
         });
     }
     askDevicePermission(constrain) {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 yield this.deviceManager.askDevicePermission(constrain);
             }));
         });
@@ -16014,7 +16063,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     createStreamView(remoteUserId, options) {
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             if (remoteUserId === undefined) {
                 return yield this.handlers.onCreateLocalStreamView(options);
             }
@@ -16024,7 +16073,7 @@ class AzureCommunicationCallAdapter {
         });
     }
     disposeStreamView(remoteUserId) {
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             if (remoteUserId === undefined) {
                 yield this.handlers.onDisposeLocalStreamView();
             }
@@ -16035,7 +16084,7 @@ class AzureCommunicationCallAdapter {
     }
     leaveCall() {
         var _a;
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             const callId = (_a = this.call) === null || _a === void 0 ? void 0 : _a.id;
             yield this.handlers.onHangUp();
             this.unsubscribeCallEvents();
@@ -16050,29 +16099,29 @@ class AzureCommunicationCallAdapter {
         });
     }
     setCamera(device, options) {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectCamera(device, options);
             }));
         });
     }
     setMicrophone(device) {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectMicrophone(device);
             }));
         });
     }
     setSpeaker(device) {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 yield this.handlers.onSelectSpeaker(device);
             }));
         });
     }
     startCamera(options) {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 if (!isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera(options);
                 }
@@ -16080,8 +16129,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     stopCamera() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 if (isCameraOn(this.getState())) {
                     yield this.handlers.onToggleCamera();
                 }
@@ -16089,8 +16138,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     mute() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.context.setIsLocalMicrophoneEnabled(false);
                 if (_isInCall((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) && !((_b = this.call) === null || _b === void 0 ? void 0 : _b.isMuted)) {
@@ -16100,8 +16149,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     unmute() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.context.setIsLocalMicrophoneEnabled(true);
                 if (_isInCall((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) && ((_b = this.call) === null || _b === void 0 ? void 0 : _b.isMuted)) {
@@ -16111,8 +16160,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     startScreenShare() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 var _a;
                 if (!((_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn)) {
                     yield this.handlers.onToggleScreenShare();
@@ -16121,8 +16170,8 @@ class AzureCommunicationCallAdapter {
         });
     }
     stopScreenShare() {
-        return __awaiter$4(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$5(this, void 0, void 0, function* () {
                 var _a;
                 if ((_a = this.call) === null || _a === void 0 ? void 0 : _a.isScreenSharingOn) {
                     yield this.handlers.onToggleScreenShare();
@@ -16166,20 +16215,20 @@ class AzureCommunicationCallAdapter {
         this.subscribeCallEvents();
     }
     removeParticipant(userId) {
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onRemoveParticipant(userId);
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */
     addParticipant(participant, options) {
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             this.handlers.onAddParticipant(participant, options);
         });
     }
     /* @conditional-compile-remove(PSTN-calls) */
     holdCall() {
         var _a;
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) !== 'LocalHold') {
                 this.handlers.onToggleHold();
             }
@@ -16188,7 +16237,7 @@ class AzureCommunicationCallAdapter {
     /* @conditional-compile-remove(PSTN-calls) */
     resumeCall() {
         var _a;
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold') {
                 this.handlers.onToggleHold();
             }
@@ -16262,7 +16311,7 @@ class AzureCommunicationCallAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$4(this, void 0, void 0, function* () {
+        return __awaiter$5(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -16296,7 +16345,7 @@ class AzureCommunicationCallAdapter {
  * @public
  */
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
-/* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId }) => __awaiter$4(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId }) => __awaiter$5(void 0, void 0, void 0, function* () {
     const callClient = createStatefulCallClient({
         userId,
         /* @conditional-compile-remove(PSTN-calls) */ alternativeCallerId
@@ -16358,7 +16407,7 @@ beforeDispose) => {
         if (!credential || !displayName || !locator || !userId) {
             return;
         }
-        (() => __awaiter$4(void 0, void 0, void 0, function* () {
+        (() => __awaiter$5(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -16389,7 +16438,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$4(void 0, void 0, void 0, function* () {
+            (() => __awaiter$5(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -16410,7 +16459,7 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter$4(void 0, void 0, void 0, function* () {
+const createAzureCommunicationCallAdapterFromClient = (callClient, callAgent, locator) => __awaiter$5(void 0, void 0, void 0, function* () {
     const deviceManager = (yield callClient.getDeviceManager());
     return new AzureCommunicationCallAdapter(callClient, locator, callAgent, deviceManager);
 });
@@ -16856,7 +16905,7 @@ const modalLayerHostStyle = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$3 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$4 = (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); } }
@@ -16917,36 +16966,36 @@ class CallWithChatBackedCallAdapter {
         this.joinCall = (microphoneOn) => {
             return this.callWithChatAdapter.joinCall(microphoneOn);
         };
-        this.leaveCall = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.leaveCall(); });
+        this.leaveCall = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.leaveCall(); });
         this.startCall = (participants, options) => {
             return this.callWithChatAdapter.startCall(participants, options);
         };
-        this.setCamera = (sourceId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setCamera(sourceId, options); });
-        this.setMicrophone = (sourceId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setMicrophone(sourceId); });
-        this.setSpeaker = (sourceId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setSpeaker(sourceId); });
-        this.askDevicePermission = (constraints) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.askDevicePermission(constraints); });
-        this.queryCameras = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.queryCameras(); });
-        this.queryMicrophones = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.queryMicrophones(); });
-        this.querySpeakers = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.querySpeakers(); });
-        this.startCamera = (options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startCamera(options); });
-        this.stopCamera = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopCamera(); });
-        this.mute = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.mute(); });
-        this.unmute = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.unmute(); });
-        this.startScreenShare = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startScreenShare(); });
-        this.stopScreenShare = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopScreenShare(); });
-        this.removeParticipant = (userId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.removeParticipant(userId); });
-        this.createStreamView = (remoteUserId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.createStreamView(remoteUserId, options); });
-        this.disposeStreamView = (remoteUserId, options) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.disposeStreamView(remoteUserId, options); });
+        this.setCamera = (sourceId, options) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setCamera(sourceId, options); });
+        this.setMicrophone = (sourceId) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setMicrophone(sourceId); });
+        this.setSpeaker = (sourceId) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.setSpeaker(sourceId); });
+        this.askDevicePermission = (constraints) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.askDevicePermission(constraints); });
+        this.queryCameras = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.queryCameras(); });
+        this.queryMicrophones = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.queryMicrophones(); });
+        this.querySpeakers = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.querySpeakers(); });
+        this.startCamera = (options) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startCamera(options); });
+        this.stopCamera = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopCamera(); });
+        this.mute = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.mute(); });
+        this.unmute = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.unmute(); });
+        this.startScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.startScreenShare(); });
+        this.stopScreenShare = () => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.stopScreenShare(); });
+        this.removeParticipant = (userId) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.removeParticipant(userId); });
+        this.createStreamView = (remoteUserId, options) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.createStreamView(remoteUserId, options); });
+        this.disposeStreamView = (remoteUserId, options) => __awaiter$4(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.disposeStreamView(remoteUserId, options); });
         /* @conditional-compile-remove(PSTN-calls) */
-        this.holdCall = () => __awaiter$3(this, void 0, void 0, function* () {
+        this.holdCall = () => __awaiter$4(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.holdCall();
         });
         /* @conditional-compile-remove(PSTN-calls) */
-        this.resumeCall = () => __awaiter$3(this, void 0, void 0, function* () {
+        this.resumeCall = () => __awaiter$4(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.resumeCall();
         });
         /* @conditional-compile-remove(PSTN-calls) */
-        this.addParticipant = (participant, options) => __awaiter$3(this, void 0, void 0, function* () {
+        this.addParticipant = (participant, options) => __awaiter$4(this, void 0, void 0, function* () {
             yield this.callWithChatAdapter.addParticipant(participant, options);
         });
         this.callWithChatAdapter = callWithChatAdapter;
@@ -16967,7 +17016,7 @@ function callAdapterStateFromCallWithChatAdapterState(callWithChatAdapterState)
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$2 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$3 = (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); } }
@@ -16988,12 +17037,12 @@ class CallWithChatBackedChatAdapter {
         // For onStateChange we must convert CallWithChat state to chat state. This involves creating a new handler to be passed into the onStateChange.
         // In order to unsubscribe the handler when offStateChange is called we must have a mapping of the original handler to the newly created handler.
         this.eventStore = new Map();
-        this.fetchInitialData = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.fetchInitialData(); });
-        this.sendMessage = (content) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.sendMessage(content); });
-        this.sendReadReceipt = (chatMessageId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.sendReadReceipt(chatMessageId); });
-        this.sendTypingIndicator = () => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.sendTypingIndicator(); });
-        this.removeParticipant = (userId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.removeParticipant(userId); });
-        this.loadPreviousChatMessages = (messagesToLoad) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.loadPreviousChatMessages(messagesToLoad); });
+        this.fetchInitialData = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.fetchInitialData(); });
+        this.sendMessage = (content) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.sendMessage(content); });
+        this.sendReadReceipt = (chatMessageId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.sendReadReceipt(chatMessageId); });
+        this.sendTypingIndicator = () => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.sendTypingIndicator(); });
+        this.removeParticipant = (userId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.removeParticipant(userId); });
+        this.loadPreviousChatMessages = (messagesToLoad) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.loadPreviousChatMessages(messagesToLoad); });
         this.dispose = () => this.callWithChatAdapter.dispose();
         this.onStateChange = (handler) => {
             const convertedHandler = (state) => {
@@ -17032,12 +17081,12 @@ class CallWithChatBackedChatAdapter {
                     return this.callWithChatAdapter.off(event, listener);
             }
         };
-        this.updateMessage = (messageId, content, metadata) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.updateMessage(messageId, content, metadata); });
-        this.deleteMessage = (messageId) => __awaiter$2(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.deleteMessage(messageId); });
+        this.updateMessage = (messageId, content, metadata) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.updateMessage(messageId, content, metadata); });
+        this.deleteMessage = (messageId) => __awaiter$3(this, void 0, void 0, function* () { return yield this.callWithChatAdapter.deleteMessage(messageId); });
         this.clearErrors = (errorTypes) => {
             throw new Error(`Method not supported in CallWithChatComposite.`);
         };
-        this.setTopic = (topicName) => __awaiter$2(this, void 0, void 0, function* () {
+        this.setTopic = (topicName) => __awaiter$3(this, void 0, void 0, function* () {
             throw new Error(`Chat Topics are not supported in CallWithChatComposite.`);
         });
         /* @conditional-compile-remove(file-sharing) */
@@ -17225,10 +17274,9 @@ const SidePaneHeader = (props) => {
         iconHovered: { color: theme.palette.neutralSecondary },
         iconPressed: { color: theme.palette.neutralSecondary }
     }), [theme.palette.neutralSecondary]);
-    const callWithChatStrings = useCallWithChatCompositeStrings();
     return (React__default['default'].createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", styles: sidePaneHeaderContainerStyles },
         React__default['default'].createElement(react.Stack.Item, { styles: sidePaneHeaderStyles }, props.headingText),
-        React__default['default'].createElement(react.CommandBarButton, { ariaLabel: callWithChatStrings.dismissSidePaneButtonLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose })));
+        React__default['default'].createElement(react.CommandBarButton, { ariaLabel: props.strings.dismissSidePaneButtonLabel, styles: sidePaneCloseButtonStyles, iconProps: { iconName: 'cancel' }, onClick: props.onClose })));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -17352,6 +17400,61 @@ const localAndRemotePIPSelector = reselect__namespace.createSelector([getDisplay
     };
 });
 
+// Copyright (c) Microsoft Corporation.
+/**
+ * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.
+ *
+ * @private
+ */
+const MODAL_PIP_DEFAULT_PX = {
+    rightPositionPx: 16,
+    topPositionPx: 52,
+    widthPx: 88,
+    heightPx: 128
+};
+/**
+ * @private
+ */
+const getPipStyles = (theme) => ({
+    modal: {
+        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
+            // Above the message thread / people pane.
+            zIndex: 2 }, (theme.rtl
+            ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }
+            : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) })), { top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx) })
+    }
+});
+/**
+ * @private
+ */
+const PIPContainerStyle = {
+    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
+};
+/**
+ * @private
+ */
+const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
+/**
+ * @private
+ */
+const modalStyle = {
+    main: {
+        minWidth: 'min-content',
+        minHeight: 'min-content',
+        position: 'absolute',
+        overflow: 'hidden',
+        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
+        pointerEvents: 'auto',
+        touchAction: 'none'
+    },
+    root: {
+        width: '100%',
+        height: '100%',
+        // pointer events for root Modal div set to none to make descendants interactive
+        pointerEvents: 'none'
+    }
+};
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Drag options for Modal in {@link ModalLocalAndRemotePIP} component
@@ -17384,27 +17487,6 @@ const ModalLocalAndRemotePIP = (props) => {
     return (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
         React__default['default'].createElement(_ModalLocalAndRemotePIP, Object.assign({}, props), props.children)));
 };
-const PIPContainerStyle = {
-    root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
-};
-const hiddenStyle = react.concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });
-const modalStyle = {
-    main: {
-        minWidth: 'min-content',
-        minHeight: 'min-content',
-        position: 'absolute',
-        overflow: 'hidden',
-        // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive
-        pointerEvents: 'auto',
-        touchAction: 'none'
-    },
-    root: {
-        width: '100%',
-        height: '100%',
-        // pointer events for root Modal div set to none to make descendants interactive
-        pointerEvents: 'none'
-    }
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -17446,7 +17528,7 @@ const copyLinkButtonStyles = {
  */
 const linkIconStyles = { marginRight: '0.5rem' };
 
-var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$2 = (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); } }
@@ -17459,7 +17541,7 @@ var __awaiter$1 = (window && window.__awaiter) || function (thisArg, _arguments,
  * @private
  */
 const PeoplePaneContent = (props) => {
-    const { callAdapter, chatAdapter, inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems, strings } = props;
+    const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems, strings, onRemoveParticipant } = props;
     const participantListDefaultProps = usePropsFor$1(ParticipantList);
     const setDrawerMenuItemsForParticipant = React.useMemo(() => {
         return (participant) => {
@@ -17480,13 +17562,13 @@ const PeoplePaneContent = (props) => {
         setDrawerMenuItems
     ]);
     const participantListProps = React.useMemo(() => {
-        const onRemoveParticipant = (participantId) => __awaiter$1(void 0, void 0, void 0, function* () { return removeParticipantFromCallWithChat(callAdapter, chatAdapter, participantId); });
+        const onRemoveAParticipant = (participantId) => __awaiter$2(void 0, void 0, void 0, function* () { return onRemoveParticipant(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 : onRemoveParticipant, 
+            onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant, 
             // We want the drawer menu items to appear when participants in ParticipantList are clicked
             onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined });
-    }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, callAdapter, chatAdapter]);
+    }, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, onRemoveParticipant]);
     const participantList = (React__default['default'].createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, title: props.strings.peoplePaneSubTitle }));
     const theme = react.useTheme();
     const copyLinkButtonStylesThemed = React.useMemo(() => react.concatStyleSets(copyLinkButtonStyles, {
@@ -17506,28 +17588,20 @@ const PeoplePaneContent = (props) => {
             React__default['default'].createElement(react.DefaultButton, { text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => copy__default['default'](inviteLink), styles: copyLinkButtonStylesThemed }))),
         participantList));
 };
-/**
- * In a CallWithChat when a participant is removed, we must remove them from both
- * the call and the chat thread.
- */
-const removeParticipantFromCallWithChat = (callAdapter, chatAdapter, participantId) => __awaiter$1(void 0, void 0, void 0, function* () {
-    yield callAdapter.removeParticipant(participantId);
-    yield chatAdapter.removeParticipant(participantId);
-});
 /**
  * Create default contextual menu items for particant
  * @param participant - participant to create contextual menu items for
- * @param callWithChatStrings - localized strings for menu item text
+ * @param strings - localized strings for menu item text
  * @param onRemoveParticipant - callback to remove participant
  * @param localParticipantUserId - Local participant user id
  * @returns - IContextualMenuItem[]
  */
-const createDefaultContextualMenuItems = (participant, callWithChatStrings, onRemoveParticipant, localParticipantUserId) => {
+const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId) => {
     const menuItems = [];
     if ((participant === null || participant === void 0 ? void 0 : participant.userId) !== localParticipantUserId) {
         menuItems.push({
             key: 'remove',
-            text: callWithChatStrings.removeMenuLabel,
+            text: strings.removeMenuLabel,
             onClick: () => {
                 if (participant === null || participant === void 0 ? void 0 : participant.userId) {
                     onRemoveParticipant === null || onRemoveParticipant === void 0 ? void 0 : onRemoveParticipant(participant === null || participant === void 0 ? void 0 : participant.userId);
@@ -17613,14 +17687,43 @@ const mobilePaneButtonStyles = {
     },
     labelChecked: { fontWeight: 600 }
 };
+/**
+ * @private
+ */
+const hiddenStyles = {
+    root: {
+        display: 'none'
+    }
+};
+/**
+ * @private
+ */
+const sidePaneStyles = {
+    root: {
+        height: '100%',
+        padding: '0.5rem 0.25rem',
+        maxWidth: '21.5rem'
+    }
+};
+/**
+ * @private
+ */
+const availableSpaceStyles = { root: { width: '100%', height: '100%' } };
+/**
+ * @private
+ */
+const sidePaneTokens = {
+    childrenGap: '0.5rem'
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
  * @private
  */
 const TabHeader = (props) => {
+    const { onClose, onChatButtonClicked, onPeopleButtonClicked, activeTab, strings } = props;
     const theme = useTheme();
-    const haveMultipleTabs = props.onChatButtonClicked && props.onPeopleButtonClicked;
+    const haveMultipleTabs = onChatButtonClicked && onPeopleButtonClicked;
     const mobilePaneButtonStylesThemed = React.useMemo(() => {
         return react.concatStyleSets(mobilePaneButtonStyles, {
             root: {
@@ -17638,15 +17741,50 @@ const TabHeader = (props) => {
             }
             : {});
     }, [theme, haveMultipleTabs]);
-    const strings = useCallWithChatCompositeStrings();
     return (React__default['default'].createElement(react.Stack, { horizontal: true, grow: true, styles: mobilePaneControlBarStyle },
-        React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: props.onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, props.onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: props.onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: props.activeTab === 'chat', role: 'tab' }, strings.chatButtonLabel))),
-        React__default['default'].createElement(react.Stack.Item, { grow: true }, props.onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: props.onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: props.activeTab === 'people', role: 'tab' }, strings.peopleButtonLabel))),
+        React__default['default'].createElement(react.DefaultButton, { ariaLabel: strings.returnToCallButtonAriaLabel, ariaDescription: strings.returnToCallButtonAriaDescription, onClick: onClose, styles: mobilePaneBackButtonStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }), autoFocus: true }),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onChatButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onChatButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'chat', role: 'tab' }, strings.chatButtonLabel))),
+        React__default['default'].createElement(react.Stack.Item, { grow: true }, onPeopleButtonClicked && (React__default['default'].createElement(react.DefaultButton, { onClick: onPeopleButtonClicked, styles: mobilePaneButtonStylesThemed, checked: activeTab === 'people', role: 'tab' }, strings.peopleButtonLabel))),
         React__default['default'].createElement(react.DefaultButton, { styles: mobilePaneHiddenIconStyles, onRenderIcon: () => React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: "ChevronLeft" }) })));
 };
 
 // Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+// Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
+const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
+    const modalHostRef = React.useRef(document.getElementById(modalLayerHostId));
+    const modalHostWidth = _useContainerWidth(modalHostRef);
+    const modalHostHeight = _useContainerHeight(modalHostRef);
+    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? -1 * MODAL_PIP_DEFAULT_PX.rightPositionPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx - modalHostWidth + MODAL_PIP_DEFAULT_PX.widthPx,
+            y: -1 * MODAL_PIP_DEFAULT_PX.topPositionPx
+        }, [modalHostWidth, rtl]);
+    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
+        ? undefined
+        : {
+            x: rtl
+                ? modalHostWidth - MODAL_PIP_DEFAULT_PX.rightPositionPx - MODAL_PIP_DEFAULT_PX.widthPx
+                : MODAL_PIP_DEFAULT_PX.rightPositionPx,
+            y: modalHostHeight - MODAL_PIP_DEFAULT_PX.topPositionPx - MODAL_PIP_DEFAULT_PX.heightPx
+        }, [modalHostHeight, modalHostWidth, rtl]);
+    return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
+};
+
+var __awaiter$1 = (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());
+    });
+};
 /**
  * Pane that is used to store chat and people for CallWithChat composite
  * @private
@@ -17657,7 +17795,7 @@ const CallWithChatPane = (props) => {
     const paneStyles = hidden ? hiddenStyles : props.mobileView ? availableSpaceStyles : sidePaneStyles;
     const callWithChatStrings = useCallWithChatCompositeStrings();
     const theme = useTheme();
-    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { headingText: props.activePane === 'chat'
+    const header = props.activePane === 'none' ? null : props.mobileView ? (React__default['default'].createElement(TabHeader, Object.assign({}, props, { strings: callWithChatStrings, activeTab: props.activePane }))) : (React__default['default'].createElement(SidePaneHeader, Object.assign({}, props, { strings: callWithChatStrings, headingText: props.activePane === 'chat'
             ? callWithChatStrings.chatPaneTitle
             : props.activePane === 'people'
                 ? callWithChatStrings.peoplePaneTitle
@@ -17669,25 +17807,17 @@ const CallWithChatPane = (props) => {
             /* @conditional-compile-remove(file-sharing) */
             fileSharing: props.fileSharing
         }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })));
+    /**
+     * In a CallWithChat when a participant is removed, we must remove them from both
+     * the call and the chat thread.
+     */
+    const removeParticipantFromCallWithChat = (participantId) => __awaiter$1(void 0, void 0, void 0, function* () {
+        yield props.callAdapter.removeParticipant(participantId);
+        yield props.chatAdapter.removeParticipant(participantId);
+    });
     const peopleContent = (React__default['default'].createElement(CallAdapterProvider, { adapter: props.callAdapter },
-        React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings }))));
-    // Use document.getElementById until Fluent's Stack supports componentRef property: https://github.com/microsoft/fluentui/issues/20410
-    const modalLayerHostElement = document.getElementById(props.modalLayerHostId);
-    const modalHostRef = React.useRef(modalLayerHostElement);
-    const modalHostWidth = _useContainerWidth(modalHostRef);
-    const modalHostHeight = _useContainerHeight(modalHostRef);
-    const minDragPosition = React.useMemo(() => modalHostWidth === undefined
-        ? undefined
-        : {
-            x: props.rtl ? -1 * modalPipRightPositionPx : modalPipRightPositionPx - modalHostWidth + modalPipWidthPx,
-            y: -1 * modalPipTopPositionPx
-        }, [modalHostWidth, props.rtl]);
-    const maxDragPosition = React.useMemo(() => modalHostWidth === undefined || modalHostHeight === undefined
-        ? undefined
-        : {
-            x: props.rtl ? modalHostWidth - modalPipRightPositionPx - modalPipWidthPx : modalPipRightPositionPx,
-            y: modalHostHeight - modalPipTopPositionPx - modalPipHeightPx
-        }, [modalHostHeight, modalHostWidth, props.rtl]);
+        React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCallWithChat, setDrawerMenuItems: setDrawerMenuItems, strings: callWithChatStrings }))));
+    const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId, props.rtl);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
     const dataUiId = props.activePane === 'chat'
         ? 'call-with-chat-composite-chat-pane'
@@ -17701,37 +17831,10 @@ const CallWithChatPane = (props) => {
                 React__default['default'].createElement(react.Stack.Item, { verticalFill: true, styles: scrollableContainerContents },
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'chat' ? availableSpaceStyles : hiddenStyles }, chatContent),
                     React__default['default'].createElement(react.Stack, { styles: props.activePane === 'people' ? availableSpaceStyles : hiddenStyles }, peopleContent)))),
-        props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minDragPosition, maxDragPosition: maxDragPosition })),
+        props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { callAdapter: props.callAdapter, modalLayerHostId: props.modalLayerHostId, hidden: hidden, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
         drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles },
             React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems })))));
 };
-const hiddenStyles = {
-    root: {
-        display: 'none'
-    }
-};
-const sidePaneStyles = {
-    root: {
-        height: '100%',
-        padding: '0.5rem 0.25rem',
-        maxWidth: '21.5rem'
-    }
-};
-const availableSpaceStyles = { root: { width: '100%', height: '100%' } };
-const sidePaneTokens = {
-    childrenGap: '0.5rem'
-};
-const modalPipRightPositionPx = 16;
-const modalPipTopPositionPx = 52;
-const modalPipWidthPx = 88;
-const modalPipHeightPx = 128;
-const getPipStyles = (theme) => ({
-    modal: {
-        main: Object.assign(Object.assign({ borderRadius: theme.effects.roundedCorner4, boxShadow: theme.effects.elevation8, 
-            // Above the message thread / people pane.
-            zIndex: 2 }, (theme.rtl ? { left: _pxToRem(modalPipRightPositionPx) } : { right: _pxToRem(modalPipRightPositionPx) })), { top: _pxToRem(modalPipTopPositionPx) })
-    }
-});
 
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {