@azure/communication-react 1.3.2-alpha-202207190020.0 → 1.3.2-alpha-202207200014.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-202207200014.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
@@ -8215,7 +8191,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 +8214,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 +8933,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 +8982,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 +9182,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 +9667,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 +9731,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 +9751,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 +10015,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 +10025,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 +10133,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 +10249,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 +10809,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 +10829,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 +11174,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 +11196,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 +11209,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 +11332,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 +11607,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 +11714,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 +11798,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 +11884,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 +11906,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 +11921,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 +12005,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 +12024,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 +12071,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 +12080,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 +12098,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 +12106,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 +12114,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 +12122,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 +12159,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 +12178,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 +12191,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 +12211,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 +12222,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();
@@ -12830,7 +12806,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 +12932,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 +12968,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 +12986,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 +13109,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 +13151,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 +13214,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 +13246,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 +13267,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 +13448,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 +13469,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 +14144,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 +14163,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 +15264,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 +15284,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 +15615,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); } }
@@ -15686,7 +15662,7 @@ const MainScreen = (props) => {
 const CallComposite = (props) => {
     const { adapter, callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems, options, formFactor = 'desktop' } = 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();
@@ -15777,7 +15753,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 +15918,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 +15990,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 +16000,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 +16011,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 +16026,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 +16056,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 +16065,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 +16076,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 +16087,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 +16097,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 +16142,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 +16164,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 +16238,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 +16272,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 +16334,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 +16365,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 +16386,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 +16832,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 +16893,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 +16943,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 +16964,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 +17008,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 +17201,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.
@@ -17446,7 +17421,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 +17434,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 +17455,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,14 +17481,6 @@ 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
@@ -17522,12 +17489,12 @@ const removeParticipantFromCallWithChat = (callAdapter, chatAdapter, 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);
@@ -17619,8 +17586,9 @@ const mobilePaneButtonStyles = {
  * @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 +17606,22 @@ 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.
+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 +17632,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,8 +17644,16 @@ 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 }))));
+        React__default['default'].createElement(PeoplePaneContent, Object.assign({}, props, { onRemoveParticipant: removeParticipantFromCallWithChat, 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);