@azure/communication-react 1.4.2-alpha-202211020017.0 → 1.4.2-alpha-202211040017.0

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

@@ -202,7 +202,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.4.2-alpha-202211020017.0';
+var telemetryVersion = '1.4.2-alpha-202211040017.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -401,7 +401,7 @@ const getCallState = (state, props) => { var _a; return (_a = state.calls[props.
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$z = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -439,7 +439,7 @@ const _isPreviewOn = (deviceManager) => {
  *
  * @private
  */
-const disposeAllLocalPreviewViews = (callClient) => __awaiter$x(void 0, void 0, void 0, function* () {
+const disposeAllLocalPreviewViews = (callClient) => __awaiter$z(void 0, void 0, void 0, function* () {
     const unparentedViews = callClient.getState().deviceManager.unparentedViews;
     for (const view of unparentedViews) {
         yield callClient.disposeView(undefined, undefined, view);
@@ -549,7 +549,7 @@ const holdButtonSelector = reselect__namespace.createSelector([getCallState], (c
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$y = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -573,7 +573,7 @@ const areStreamsEqual = (prevStream, newStream) => {
  * @public
  */
 const createDefaultCallingHandlers = memoizeOne__default['default']((callClient, callAgent, deviceManager, call) => {
-    const onStartLocalVideo = () => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onStartLocalVideo = () => __awaiter$y(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?
@@ -593,7 +593,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             yield call.startVideo(stream);
         }
     });
-    const onStopLocalVideo = (stream) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onStopLocalVideo = (stream) => __awaiter$y(void 0, void 0, void 0, function* () {
         const callId = call === null || call === void 0 ? void 0 : call.id;
         if (!callId) {
             return;
@@ -606,7 +606,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             });
         }
     });
-    const onToggleCamera = (options) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onToggleCamera = (options) => __awaiter$y(void 0, void 0, void 0, function* () {
         const previewOn = _isPreviewOn(callClient.getState().deviceManager);
         if (previewOn && call && call.state === 'Connecting') {
             // This is to workaround: https://skype.visualstudio.com/SPOOL/_workitems/edit/3030558.
@@ -657,19 +657,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
     const onStartCall = (participants, options) => {
         return callAgent ? callAgent.startCall(participants, options) : undefined;
     };
-    const onSelectMicrophone = (device) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onSelectMicrophone = (device) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectMicrophone(device);
     });
-    const onSelectSpeaker = (device) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onSelectSpeaker = (device) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
         return deviceManager.selectSpeaker(device);
     });
-    const onSelectCamera = (device, options) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onSelectCamera = (device, options) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!deviceManager) {
             return;
         }
@@ -692,19 +692,19 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             }, options);
         }
     });
-    const onToggleMicrophone = () => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onToggleMicrophone = () => __awaiter$y(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$w(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
-    const onStopScreenShare = () => __awaiter$w(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
-    const onToggleScreenShare = () => __awaiter$w(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
-    const onHangUp = (forEveryone) => __awaiter$w(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
+    const onStartScreenShare = () => __awaiter$y(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.startScreenSharing()); });
+    const onStopScreenShare = () => __awaiter$y(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.stopScreenSharing()); });
+    const onToggleScreenShare = () => __awaiter$y(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.isScreenSharingOn) ? yield onStopScreenShare() : yield onStartScreenShare(); });
+    const onHangUp = (forEveryone) => __awaiter$y(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onToggleHold = () => __awaiter$w(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$w(void 0, void 0, void 0, function* () {
+    const onToggleHold = () => __awaiter$y(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$y(void 0, void 0, void 0, function* () {
         var _a;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -720,7 +720,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$w(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -748,7 +748,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$w(void 0, void 0, void 0, function* () {
+    const onDisposeRemoteStreamView = (userId) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (!call) {
             return;
         }
@@ -769,7 +769,7 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
             callClient.disposeView(call.id, participant.identifier, screenShareStream);
         }
     });
-    const onDisposeLocalStreamView = () => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onDisposeLocalStreamView = () => __awaiter$y(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');
@@ -781,12 +781,12 @@ 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$w(void 0, void 0, void 0, function* () {
+    const onRemoveParticipant = (userId) => __awaiter$y(void 0, void 0, void 0, function* () {
         const participant = _toCommunicationIdentifier(userId);
         yield (call === null || call === void 0 ? void 0 : call.removeParticipant(participant));
     });
     /* @conditional-compile-remove(PSTN-calls) */
-    const onAddParticipant = (participant, options) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const onAddParticipant = (participant, options) => __awaiter$y(void 0, void 0, void 0, function* () {
         const participantType = participantTypeHelper(participant);
         switch (participantType) {
             case 'PSTN':
@@ -798,9 +798,9 @@ const createDefaultCallingHandlers = memoizeOne__default['default']((callClient,
         }
     });
     /* @conditional-compile-remove(dialpad) */ /* @conditional-compile-remove(PSTN-calls) */
-    const onSendDtmfTone = (dtmfTone) => __awaiter$w(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
+    const onSendDtmfTone = (dtmfTone) => __awaiter$y(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.sendDtmf(dtmfTone)); });
     /* @conditional-compile-remove(call-readiness) */
-    const askDevicePermission = (constrain) => __awaiter$w(void 0, void 0, void 0, function* () {
+    const askDevicePermission = (constrain) => __awaiter$y(void 0, void 0, void 0, function* () {
         if (deviceManager) {
             yield (deviceManager === null || deviceManager === void 0 ? void 0 : deviceManager.askDevicePermission(constrain));
         }
@@ -1510,6 +1510,13 @@ const customIconName = {
     callVideoRecoveredBySystem: 'ErrorBarCallVideoRecoveredBySystem',
     callMacOsCameraAccessDenied: 'ErrorBarCallMacOsCameraAccessDenied'
 };
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * @private
+ */
+const isValidString = (string) => {
+    return !!string && string.length > 0;
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -3546,7 +3553,7 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
-var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$x = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3571,7 +3578,7 @@ const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$v(void 0, void 0, void 0, function* () {
+    const fileDownloadHandler = React.useCallback((userId, file) => __awaiter$x(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
         }
@@ -3719,7 +3726,7 @@ const ChatMessageComponentAsMessageBubble = React__default['default'].memo(Messa
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$w = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -3753,7 +3760,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$u(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$w(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
                     props.message.messageId &&
                     (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
@@ -3852,7 +3859,7 @@ const getParticipantsWhoHaveReadMessage = (message, readReceiptsBySenderId) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$t = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$v = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -4079,7 +4086,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$t(void 0, void 0, void 0, function* () {
+    const sendMessageStatusIfAtBottom = React.useCallback(() => __awaiter$v(void 0, void 0, void 0, function* () {
         if (!isAtBottomOfScrollRef.current ||
             !document.hasFocus() ||
             !messagesRef.current ||
@@ -4130,7 +4137,7 @@ const MessageThread = (props) => {
         setIsAtBottomOfScrollRef(atBottom);
     }, [scrollToBottom, sendMessageStatusIfAtBottom]);
     // Infinite scrolling + threadInitialize function
-    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
+    const fetchNewMessageWhenAtTop = React.useCallback(() => __awaiter$v(void 0, void 0, void 0, function* () {
         if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
                 isLoadingChatMessagesRef.current = true;
@@ -6921,7 +6928,7 @@ const DevicesButton = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$s = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$u = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -6959,7 +6966,7 @@ const CameraButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isCameraOn) => {
         setAnnouncerString(!isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement);
     }, [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$u(void 0, void 0, void 0, function* () {
         // Throttle click on camera, need to await onToggleCamera then allow another click
         if (onToggleCamera) {
             setWaitForCamera(true);
@@ -7091,7 +7098,7 @@ const lightThemeCallButtonStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$r = (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); } }
@@ -7132,7 +7139,7 @@ const MicrophoneButton = (props) => {
     const toggleAnnouncerString = React.useCallback((isMicOn) => {
         setAnnouncerString(!isMicOn ? strings.microphoneActionTurnedOffAnnouncement : strings.microphoneActionTurnedOnAnnouncement);
     }, [strings.microphoneActionTurnedOffAnnouncement, strings.microphoneActionTurnedOnAnnouncement]);
-    const onToggleClick = React.useCallback(() => __awaiter$r(void 0, void 0, void 0, function* () {
+    const onToggleClick = React.useCallback(() => __awaiter$t(void 0, void 0, void 0, function* () {
         if (onToggleMicrophone) {
             try {
                 yield onToggleMicrophone();
@@ -7263,10 +7270,6 @@ const DomainPermissions = (props) => {
     /* @conditional-compile-remove(call-readiness) */
     return React__default['default'].createElement(DomainPermissionsContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
 };
-/* @conditional-compile-remove(call-readiness) */
-const isValidString = (string) => {
-    return !!string && string.length > 0;
-};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -8128,7 +8131,7 @@ function useLongPress(onClick, onLongPress, isMobile) {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$q = (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); } }
@@ -8169,10 +8172,10 @@ const DialpadButton = (props) => {
     var _a, _b, _c, _d;
     const theme = react.useTheme();
     const { digit, index, onClick, onLongPress, isMobile = false } = props;
-    const clickFunction = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const clickFunction = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         onClick(digit, index);
     }), [digit, index, onClick]);
-    const longPressFunction = React.useCallback(() => __awaiter$q(void 0, void 0, void 0, function* () {
+    const longPressFunction = React.useCallback(() => __awaiter$s(void 0, void 0, void 0, function* () {
         onLongPress(digit, index);
     }), [digit, index, onLongPress]);
     const { handlers } = useLongPress(clickFunction, longPressFunction, isMobile);
@@ -8478,7 +8481,7 @@ const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
  * @internal
  */
 const _DevicePermissionDropdown = (props) => {
-    const { icon, askDevicePermission, constrain, strings, options, styles } = props;
+    const { icon, askDevicePermission, onClick, constrain, strings, options, styles } = props;
     const onRenderPlaceholder = () => {
         return (React__default['default'].createElement(react.Stack, { horizontal: true, verticalAlign: "center" },
             icon,
@@ -8487,10 +8490,11 @@ const _DevicePermissionDropdown = (props) => {
     const onRenderCaretDown = () => {
         return React__default['default'].createElement(react.Text, null, strings === null || strings === void 0 ? void 0 : strings.actionButtonContent);
     };
-    return (React__default['default'].createElement(react.Dropdown, { placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
+    return (React__default['default'].createElement(react.Dropdown, { "data-ui-id": 'permission-dropdown', placeholder: strings === null || strings === void 0 ? void 0 : strings.placeHolderText, label: strings === null || strings === void 0 ? void 0 : strings.label, onRenderPlaceholder: onRenderPlaceholder, onRenderCaretDown: onRenderCaretDown, onClick: () => {
             if (askDevicePermission) {
                 askDevicePermission(constrain !== null && constrain !== void 0 ? constrain : { video: true, audio: true });
             }
+            onClick === null || onClick === void 0 ? void 0 : onClick();
         }, options: options !== null && options !== void 0 ? options : [], styles: styles }));
 };
 
@@ -8950,7 +8954,7 @@ const findConditionalCompiledSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$p = (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); } }
@@ -8973,35 +8977,35 @@ const createDefaultChatHandlers = memoizeOne__default['default']((chatClient, ch
     let messageIterator = undefined;
     let readReceiptIterator = undefined;
     return {
-        onSendMessage: (content, options) => __awaiter$p(void 0, void 0, void 0, function* () {
+        onSendMessage: (content, options) => __awaiter$r(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$p(void 0, void 0, void 0, function* () {
+        onUpdateMessage: (messageId, content, metadata, options) => __awaiter$r(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$p(void 0, void 0, void 0, function* () {
+        onDeleteMessage: (messageId) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.deleteMessage(messageId);
         }),
         // This handler is designed for chatThread to consume
-        onMessageSeen: (chatMessageId) => __awaiter$p(void 0, void 0, void 0, function* () {
+        onMessageSeen: (chatMessageId) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendReadReceipt({ chatMessageId });
         }),
-        onTyping: () => __awaiter$p(void 0, void 0, void 0, function* () {
+        onTyping: () => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.sendTypingNotification();
         }),
-        onRemoveParticipant: (userId) => __awaiter$p(void 0, void 0, void 0, function* () {
+        onRemoveParticipant: (userId) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.removeParticipant(fromFlatCommunicationIdentifier(userId));
         }),
-        updateThreadTopicName: (topicName) => __awaiter$p(void 0, void 0, void 0, function* () {
+        updateThreadTopicName: (topicName) => __awaiter$r(void 0, void 0, void 0, function* () {
             yield chatThreadClient.updateTopic(topicName);
         }),
-        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$p(void 0, void 0, void 0, function* () {
+        onLoadPreviousChatMessages: (messagesToLoad) => __awaiter$r(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.
@@ -9703,7 +9707,7 @@ const findSelector = (component) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$o = (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); } }
@@ -9752,13 +9756,13 @@ class ProxyDeviceManager {
         this.selectCamera = (videoDeviceInfo) => {
             this._context.setDeviceManagerSelectedCamera(videoDeviceInfo);
         };
-        this.videoDevicesUpdated = () => __awaiter$o(this, void 0, void 0, function* () {
+        this.videoDevicesUpdated = () => __awaiter$q(this, void 0, void 0, function* () {
             // Device Manager always has a camera with '' name if there are no real camera devices available.
             // We don't want to show that in the UI.
             const realCameras = (yield this._deviceManager.getCameras()).filter((c) => !!c.name);
             this._context.setDeviceManagerCameras(dedupeById(realCameras));
         });
-        this.audioDevicesUpdated = () => __awaiter$o(this, void 0, void 0, function* () {
+        this.audioDevicesUpdated = () => __awaiter$q(this, void 0, void 0, function* () {
             this._context.setDeviceManagerMicrophones(dedupeById(yield this._deviceManager.getMicrophones()));
             this._context.setDeviceManagerSpeakers(dedupeById(yield this._deviceManager.getSpeakers()));
         });
@@ -9964,7 +9968,7 @@ class CallIdHistory {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$n = (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); } }
@@ -10472,7 +10476,7 @@ class CallContext$1 {
      * @throws CallError. Exceptions thrown from `f` are tagged with the failed `target.
      */
     withAsyncErrorTeedToState(action, target) {
-        return (...args) => __awaiter$n(this, void 0, void 0, function* () {
+        return (...args) => __awaiter$p(this, void 0, void 0, function* () {
             try {
                 return yield action(...args);
             }
@@ -10536,108 +10540,33 @@ const findOldestCallEnded = (calls) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-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); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+/**
+ * @private
+ */
+const isACSCall = (call) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return call.kind === 'Call';
 };
-class ProxyCall {
-    constructor(context) {
-        this._context = context;
-    }
-    unsubscribe() {
-        /** No subscriptions yet. But there will be one for transfer feature soon. */
-    }
-    get(target, prop) {
-        switch (prop) {
-            case 'mute': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.mute(...args);
-                    });
-                }, 'Call.mute');
-            }
-            case 'unmute': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.unmute(...args);
-                    });
-                }, 'Call.unmute');
-            }
-            case 'startVideo': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.startVideo(...args);
-                    });
-                }, 'Call.startVideo');
-            }
-            case 'stopVideo': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.stopVideo(...args);
-                    });
-                }, 'Call.stopVideo');
-            }
-            case 'startScreenSharing': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.startScreenSharing(...args);
-                    });
-                }, 'Call.startScreenSharing');
-            }
-            case 'stopScreenSharing': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.stopScreenSharing(...args);
-                    });
-                }, 'Call.stopScreenSharing');
-            }
-            case 'hold': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.hold(...args);
-                    });
-                }, 'Call.hold');
-            }
-            case 'resume': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.resume(...args);
-                    });
-                }, 'Call.resume');
-            }
-            case 'addParticipant': {
-                return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$m(this, void 0, void 0, function* () {
-                        return yield target.addParticipant(...args);
-                    });
-                }, 'Call.addParticipant');
-            }
-            default:
-                return Reflect.get(target, prop);
-        }
-    }
-}
 /**
- * Creates a declarative Call by proxying Call with ProxyCall.
- * This should only be used with CallAgentDeclarative as CallAgentDeclarative will add that
- * call to the context properly (need to have the Call in context to update it - CallAgentDeclarative will add Call to
- * context)
- *
- * @param call - Call from SDK
- * @param context - CallContext from StatefulCallClient
+ * @private
  */
-const callDeclaratify = (call, context) => {
-    const proxyCall = new ProxyCall(context);
-    Object.defineProperty(call, 'unsubscribe', {
-        configurable: false,
-        value: () => proxyCall.unsubscribe()
-    });
-    return new Proxy(call, proxyCall);
+const isACSCallAgent = (callAgent) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return callAgent.kind === 'CallAgent';
+};
+/**
+ * @private
+ */
+const isTeamsCall = (call) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return call.kind === 'TeamsCall';
+};
+/**
+ * @private
+ */
+const isTeamsCallAgent = (callAgent) => {
+    /* @conditional-compile-remove(teams-identity-support) */
+    return callAgent.kind === 'TeamsCallAgent';
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -10695,6 +10624,8 @@ function convertSdkCallToDeclarativeCall(call) {
     });
     return {
         id: call.id,
+        /* @conditional-compile-remove(teams-identity-support) */
+        type: isACSCall(call) ? 'ACS' : 'Teams',
         callerInfo: call.callerInfo,
         state: call.state,
         callEndReason: call.callEndReason,
@@ -10822,7 +10753,7 @@ class RemoteVideoStreamSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$l = (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); } }
@@ -10832,7 +10763,7 @@ var __awaiter$l = (window && window.__awaiter) || function (thisArg, _arguments,
     });
 };
 function createViewRemoteVideo(context, internalContext, callId, participantId, stream, options) {
-    return __awaiter$l(this, void 0, void 0, function* () {
+    return __awaiter$o(this, void 0, void 0, function* () {
         // Render RemoteVideoStream that is part of a Call
         const streamId = stream.id;
         let participantKey;
@@ -10940,7 +10871,7 @@ function createViewRemoteVideo(context, internalContext, callId, participantId,
     });
 }
 function createViewLocalVideo(context, internalContext, callId, options) {
-    return __awaiter$l(this, void 0, void 0, function* () {
+    return __awaiter$o(this, void 0, void 0, function* () {
         _logEvent(callingStatefulLogger, {
             name: EventNames.START_LOCAL_STREAM_RENDERING,
             level: 'info',
@@ -11056,7 +10987,7 @@ function createViewLocalVideo(context, internalContext, callId, options) {
     });
 }
 function createViewUnparentedVideo(context, internalContext, stream, options) {
-    return __awaiter$l(this, void 0, void 0, function* () {
+    return __awaiter$o(this, void 0, void 0, function* () {
         const renderInfo = internalContext.getUnparentedRenderInfo(stream);
         if (renderInfo && renderInfo.status === 'Rendered') {
             console.warn('Unparented LocalVideoStream is already rendered');
@@ -11700,7 +11631,7 @@ class CallSubscriber {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$k = (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); } }
@@ -11720,14 +11651,14 @@ class ProxyIncomingCall {
         switch (prop) {
             case 'accept': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.accept(...args);
                     });
                 }, 'IncomingCall.accept');
             }
             case 'reject': {
                 return this._context.withAsyncErrorTeedToState(function (...args) {
-                    return __awaiter$k(this, void 0, void 0, function* () {
+                    return __awaiter$n(this, void 0, void 0, function* () {
                         return yield target.reject(...args);
                     });
                 }, 'IncomingCall.reject');
@@ -11790,22 +11721,11 @@ class IncomingCallSubscriber {
  * updates in the CallAgent and in the contained Calls and RemoteParticipants. When dispose is called it will
  * unsubscribe from all state updates.
  */
-class ProxyCallAgent {
-    constructor(callAgent, context, internalContext) {
-        this.subscribe = () => {
-            this._callAgent.on('callsUpdated', this.callsUpdated);
-            this._callAgent.on('incomingCall', this.incomingCall);
-            // There could be scenario that when ProxyCallAgent is created that the given CallAgent already has Calls. In this
-            // case we need to make sure to subscribe to those already existing Calls.
-            for (const call of this._callAgent.calls) {
-                this.addCall(call);
-            }
-        };
-        this.unsubscribe = () => {
-            this._callAgent.off('callsUpdated', this.callsUpdated);
-            this._callAgent.off('incomingCall', this.incomingCall);
-            // Unsubscribe is called when CallAgent is disposed. This should mean no more updating of existing call but we don't
-            // remove any existing state.
+class ProxyCallAgentCommon {
+    constructor(context, internalContext) {
+        // Unsubscribe is called when CallAgent is disposed. This should mean no more updating of existing call but we don't
+        // remove any existing state.
+        this.unregisterSubscriber = () => {
             for (const [_, callSubscriber] of this._callSubscribers.entries()) {
                 callSubscriber.unsubscribe();
             }
@@ -11842,7 +11762,7 @@ class ProxyCallAgent {
                     this._declarativeCalls.delete(call);
                 }
                 else {
-                    removedStatefulCall.push(callDeclaratify(call, this._context));
+                    removedStatefulCall.push(this.callDeclaratify(call, this._context));
                 }
             }
             for (const externalCallsUpdatedListener of this._externalCallsUpdatedListeners) {
@@ -11880,11 +11800,10 @@ class ProxyCallAgent {
             if (declarativeCall) {
                 return declarativeCall;
             }
-            const newDeclarativeCall = callDeclaratify(call, this._context);
+            const newDeclarativeCall = this.callDeclaratify(call, this._context);
             this._declarativeCalls.set(call, newDeclarativeCall);
             return newDeclarativeCall;
         };
-        this._callAgent = callAgent;
         this._context = context;
         this._internalContext = internalContext;
         this._callSubscribers = new Map();
@@ -11892,20 +11811,21 @@ class ProxyCallAgent {
         this._declarativeIncomingCalls = new Map();
         this._declarativeCalls = new Map();
         this._externalCallsUpdatedListeners = new Set();
-        this.subscribe();
     }
-    get(target, prop) {
+    // We can't directly override get function because it is proxied,
+    // Add a getCommon function and call it in child class
+    getCommon(target, prop) {
         switch (prop) {
             case 'startCall': {
                 return this._context.withErrorTeedToState((...args) => {
-                    const call = target.startCall(...args);
+                    const call = this.startCall(target, args);
                     this.addCall(call);
                     return this.getOrCreateDeclarativeCall(call);
                 }, 'CallAgent.startCall');
             }
             case 'join': {
                 return this._context.withErrorTeedToState((...args) => {
-                    const call = target.join(...args);
+                    const call = this.joinCall(target, args);
                     this.addCall(call);
                     return this.getOrCreateDeclarativeCall(call);
                 }, 'CallAgent.join');
@@ -11921,7 +11841,7 @@ class ProxyCallAgent {
                         this._externalCallsUpdatedListeners.add(listener);
                     }
                     else {
-                        target.on(...args);
+                        this.agentSubscribe(target, args);
                     }
                 };
             }
@@ -11933,7 +11853,7 @@ class ProxyCallAgent {
                         this._externalCallsUpdatedListeners.delete(listener);
                     }
                     else {
-                        target.off(...args);
+                        this.agentUnsubscribe(target, args);
                     }
                 };
             }
@@ -11961,6 +11881,210 @@ class ProxyCallAgent {
         }
     }
 }
+/**
+ * @private
+ */
+const clearCallRelatedState = (context, internalContext) => {
+    // Make sure there are no existing call data if creating a new CallAgentDeclarative (if creating a new
+    // CallAgentDeclarative after disposing of the hold one will mean context have old call state). TODO: should we stop
+    // rendering when the previous callAgent is disposed?
+    disposeAllViews(context, internalContext);
+    context.clearCallRelatedState();
+    internalContext.clearCallRelatedState();
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * @private
+ */
+class ProxyCallCommon {
+    constructor(context) {
+        this._context = context;
+    }
+    unsubscribe() {
+        /** No subscriptions yet. But there will be one for transfer feature soon. */
+    }
+    getContext() {
+        return this._context;
+    }
+    get(target, prop) {
+        switch (prop) {
+            case 'mute': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.mute(...args);
+                    });
+                }, 'Call.mute');
+            }
+            case 'unmute': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.unmute(...args);
+                    });
+                }, 'Call.unmute');
+            }
+            case 'startVideo': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.startVideo(...args);
+                    });
+                }, 'Call.startVideo');
+            }
+            case 'stopVideo': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.stopVideo(...args);
+                    });
+                }, 'Call.stopVideo');
+            }
+            case 'startScreenSharing': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.startScreenSharing(...args);
+                    });
+                }, 'Call.startScreenSharing');
+            }
+            case 'stopScreenSharing': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.stopScreenSharing(...args);
+                    });
+                }, 'Call.stopScreenSharing');
+            }
+            case 'hold': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.hold(...args);
+                    });
+                }, 'Call.hold');
+            }
+            case 'resume': {
+                return this._context.withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$m(this, void 0, void 0, function* () {
+                        return yield target.resume(...args);
+                    });
+                }, 'Call.resume');
+            }
+            default:
+                return Reflect.get(target, prop);
+        }
+    }
+}
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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); } }
+        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());
+    });
+};
+class ProxyCall extends ProxyCallCommon {
+    get(target, prop) {
+        switch (prop) {
+            case 'addParticipant': {
+                return this.getContext().withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$l(this, void 0, void 0, function* () {
+                        return yield target.addParticipant(...args);
+                    });
+                }, 'Call.addParticipant');
+            }
+            default:
+                return super.get(target, prop);
+        }
+    }
+}
+/**
+ * Creates a declarative Call by proxying Call with ProxyCall.
+ * This should only be used with CallAgentDeclarative as CallAgentDeclarative will add that
+ * call to the context properly (need to have the Call in context to update it - CallAgentDeclarative will add Call to
+ * context)
+ *
+ * @param call - Call from SDK
+ * @param context - CallContext from StatefulCallClient
+ */
+const callDeclaratify = (call, context) => {
+    const proxyCall = new ProxyCall(context);
+    Object.defineProperty(call, 'unsubscribe', {
+        configurable: false,
+        value: () => proxyCall.unsubscribe()
+    });
+    return new Proxy(call, proxyCall);
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * ProxyCallAgent proxies CallAgent and saves any returned state in the given context. It will subscribe to all state
+ * updates in the CallAgent and in the contained Calls and RemoteParticipants. When dispose is called it will
+ * unsubscribe from all state updates.
+ */
+class ProxyCallAgent extends ProxyCallAgentCommon {
+    constructor(callAgent, context, internalContext) {
+        super(context, internalContext);
+        this.subscribe = () => {
+            this._callAgent.on('callsUpdated', this.callsUpdated);
+            this._callAgent.on('incomingCall', this.incomingCall);
+            // There could be scenario that when ProxyCallAgent is created that the given CallAgent already has Calls. In this
+            // case we need to make sure to subscribe to those already existing Calls.
+            for (const call of this._callAgent.calls) {
+                this.addCall(call);
+            }
+        };
+        this.unsubscribe = () => {
+            this._callAgent.off('callsUpdated', this.callsUpdated);
+            this._callAgent.off('incomingCall', this.incomingCall);
+            this.unregisterSubscriber();
+        };
+        this._callAgent = callAgent;
+        this.subscribe();
+    }
+    callDeclaratify(call, context) {
+        if (isACSCall(call)) {
+            return callDeclaratify(call, context);
+        }
+        throw new Error('Not reachable code, DeclarativeCallAgent.callDeclaratify must be called with an ACS call.');
+    }
+    startCall(agent, args) {
+        if (isACSCallAgent(agent)) {
+            return agent.startCall(...args);
+        }
+        throw Error('Unreachable code, DeclarativeCallAgent.startCall must be called with an ACS callAgent.');
+    }
+    joinCall(agent, args) {
+        if (isACSCallAgent(agent)) {
+            return agent.join(...args);
+        }
+        throw Error('Unreachable code, DeclarativeCallAgent.joinCall must be called with an ACS callAgent.');
+    }
+    agentSubscribe(agent, args) {
+        if (isACSCallAgent(agent)) {
+            return agent.on(...args);
+        }
+        throw Error('Unreachable code, DeclarativeCallAgent.agentSubscribe must be called with an ACS callAgent.');
+    }
+    agentUnsubscribe(agent, args) {
+        if (isACSCallAgent(agent)) {
+            return agent.off(...args);
+        }
+        throw Error('Unreachable code, DeclarativeCallAgent.agentUnsubscribe must be called with an ACS callAgent.');
+    }
+    get(target, prop) {
+        return super.getCommon(target, prop);
+    }
+}
 /**
  * Creates a declarative CallAgent by proxying CallAgent with ProxyCallAgent which will track state updates by updating
  * the given context.
@@ -11970,12 +12094,7 @@ class ProxyCallAgent {
  * @param internalContext- InternalCallContext from StatefulCallClient
  */
 const callAgentDeclaratify = (callAgent, context, internalContext) => {
-    // Make sure there are no existing call data if creating a new CallAgentDeclarative (if creating a new
-    // CallAgentDeclarative after disposing of the hold one will mean context have old call state). TODO: should we stop
-    // rendering when the previous callAgent is disposed?
-    disposeAllViews(context, internalContext);
-    context.clearCallRelatedState();
-    internalContext.clearCallRelatedState();
+    clearCallRelatedState(context, internalContext);
     return new Proxy(callAgent, new ProxyCallAgent(callAgent, context, internalContext));
 };
 
@@ -12073,6 +12192,136 @@ class InternalCallContext {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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); } }
+        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());
+    });
+};
+class ProxyTeamsCall extends ProxyCallCommon {
+    get(target, prop) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        switch (prop) {
+            case 'addParticipant': {
+                return this.getContext().withAsyncErrorTeedToState(function (...args) {
+                    return __awaiter$k(this, void 0, void 0, function* () {
+                        return yield target.addParticipant(...args);
+                    });
+                }, 'TeamsCall.addParticipant');
+            }
+            default:
+                return super.get(target, prop);
+        }
+    }
+}
+/**
+ * Creates a declarative Call by proxying Call with ProxyCall.
+ * This should only be used with CallAgentDeclarative as CallAgentDeclarative will add that
+ * call to the context properly (need to have the Call in context to update it - CallAgentDeclarative will add Call to
+ * context)
+ *
+ * @param call - TeamsCall from SDK
+ * @param context - CallContext from StatefulCallClient
+ */
+const teamsCallDeclaratify = (call, context) => {
+    const proxyCall = new ProxyTeamsCall(context);
+    proxyCall.unsubscribe();
+    Object.defineProperty(call, 'unsubscribe', {
+        configurable: false,
+        value: () => proxyCall.unsubscribe()
+    });
+    return new Proxy(call, proxyCall);
+};
+
+/**
+ * ProxyTeamsCallAgent proxies TeamsCallAgent and saves any returned state in the given context. It will subscribe to all state
+ * updates in the TeamsCallAgent and in the contained TeamsCalls and RemoteParticipants. When dispose is called it will
+ * unsubscribe from all state updates.
+ */
+class ProxyTeamsCallAgent extends ProxyCallAgentCommon {
+    constructor(callAgent, context, internalContext) {
+        super(context, internalContext);
+        this.subscribe = () => {
+            /* @conditional-compile-remove(teams-identity-support) */
+            this._callAgent.on('callsUpdated', this.callsUpdated);
+            /* @conditional-compile-remove(teams-identity-support) */
+            this._callAgent.on('incomingCall', this.incomingCall);
+            /* @conditional-compile-remove(teams-identity-support) */
+            // There could be scenario that when ProxyTeamsCallAgent is created that the given CallAgent already has TeamsCalls. In this
+            // case we need to make sure to subscribe to those already existing Calls.
+            for (const call of this._callAgent.calls) {
+                this.addCall(call);
+            }
+        };
+        this.unsubscribe = () => {
+            /* @conditional-compile-remove(teams-identity-support) */
+            this._callAgent.off('callsUpdated', this.callsUpdated);
+            /* @conditional-compile-remove(teams-identity-support) */
+            this._callAgent.off('incomingCall', this.incomingCall);
+            this.unregisterSubscriber();
+        };
+        /* @conditional-compile-remove(teams-identity-support) */
+        this._callAgent = callAgent;
+        this.subscribe();
+    }
+    callDeclaratify(call, context) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        if (isTeamsCall(call)) {
+            return teamsCallDeclaratify(call, context);
+        }
+        throw new Error('Not reachable code, DeclarativeTeamsCallAgent.callDeclaratify must be called with an TeamsCall.');
+    }
+    startCall(agent, args) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        if (isTeamsCallAgent(agent)) {
+            return agent.startCall(...args);
+        }
+        throw new Error('Not reachable code, DeclarativeTeamsCallAgent.startCall must be called with an TeamsCallAgent.');
+    }
+    joinCall(agent, args) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        if (isTeamsCallAgent(agent)) {
+            return agent.join(...args);
+        }
+        throw new Error('Not reachable code, DeclarativeTeamsCallAgent.joinCall must be called with an TeamsCallAgent.');
+    }
+    agentSubscribe(agent, args) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        if (isTeamsCallAgent(agent)) {
+            agent.on(...args);
+        }
+        throw new Error('Not reachable code, DeclarativeTeamsCallAgent.agentSubscribe must be called with an TeamsCallAgent.');
+    }
+    agentUnsubscribe(agent, args) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        if (isTeamsCallAgent(agent)) {
+            agent.off(...args);
+        }
+        throw new Error('Not reachable code, DeclarativeTeamsCallAgent.agentUnsubscribe must be called with an TeamsCallAgent.');
+    }
+    get(target, prop) {
+        /* @conditional-compile-remove(teams-identity-support) */
+        return super.getCommon(target, prop);
+    }
+}
+/**
+ * Creates a declarative CallAgent by proxying TeamsCallAgent with ProxyTeamsCallAgent which will track state updates by updating
+ * the given context.
+ *
+ * @param callAgent - TeamsCallAgent from SDK
+ * @param context - CallContext from StatefulCallClient
+ * @param internalContext- InternalCallContext from StatefulCallClient
+ */
+const teamsCallAgentDeclaratify = (callAgent, context, internalContext) => {
+    clearCallRelatedState(context, internalContext);
+    return new Proxy(callAgent, new ProxyTeamsCallAgent(callAgent, context, internalContext));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$j = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -12109,6 +12358,19 @@ class ProxyCallClient {
                     return this._callAgent;
                 }), 'CallClient.createCallAgent');
             }
+            case 'createTeamsCallAgent': {
+                /* @conditional-compile-remove(teams-identity-support) */ return this._context.withAsyncErrorTeedToState((...args) => __awaiter$j(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.
+                    const callAgent = yield target.createTeamsCallAgent(...args);
+                    this._callAgent = teamsCallAgentDeclaratify(callAgent, this._context, this._internalContext);
+                    this._context.setCallAgent({
+                        displayName: undefined
+                    });
+                    return this._callAgent;
+                }), 'CallClient.createTeamsCallAgent');
+            }
             case 'getDeviceManager': {
                 return this._context.withAsyncErrorTeedToState(() => __awaiter$j(this, void 0, void 0, function* () {
                     // As of writing, the SDK always returns the same instance of DeviceManager so we keep a reference of
@@ -17392,7 +17654,7 @@ const ConfigurationpageCameraDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const cameraBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }) }, props.dropdownProps)));
+    const cameraBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission }, props.dropdownProps)));
     /* @conditional-compile-remove(call-readiness) */
     if (props.callReadinessOptedIn) {
         return React__default['default'].createElement(React__default['default'].Fragment, null, props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown);
@@ -17413,7 +17675,7 @@ const ConfigurationpageMicDropdown = (props) => {
         actionButtonContent: 'Allow'
     };
     /* @conditional-compile-remove(call-readiness) */
-    const microphoneBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }) }, props.dropdownProps)));
+    const microphoneBlockedDropdown = (React__default['default'].createElement(_DevicePermissionDropdown, Object.assign({ styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React__default['default'].createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission }, props.dropdownProps)));
     /* @conditional-compile-remove(call-readiness) */
     if (props.callReadinessOptedIn) {
         return React__default['default'].createElement(React__default['default'].Fragment, null,
@@ -17527,7 +17789,9 @@ const LocalDeviceSettings = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 dropdownProps: dropdownProps, 
                 /* @conditional-compile-remove(call-readiness) */
-                callReadinessOptedIn: (_b = props.callReadinessOptedIn) !== null && _b !== void 0 ? _b : false }))),
+                callReadinessOptedIn: (_b = props.callReadinessOptedIn) !== null && _b !== void 0 ? _b : false, 
+                /* @conditional-compile-remove(call-readiness) */
+                onClickEnableDevicePermission: props.onClickEnableDevicePermission }))),
         React__default['default'].createElement(react.Stack, null,
             React__default['default'].createElement(react.Label, { id: 'call-composite-local-sound-settings-label', className: react.mergeStyles(dropDownStyles(theme).label), disabled: !micPermissionGranted }, soundLabel),
             React__default['default'].createElement(react.Stack, { "data-ui-id": "call-composite-sound-settings", tokens: mainStackTokens },
@@ -17535,7 +17799,9 @@ const LocalDeviceSettings = (props) => {
                     /* @conditional-compile-remove(call-readiness) */
                     dropdownProps: dropdownProps, 
                     /* @conditional-compile-remove(call-readiness) */
-                    callReadinessOptedIn: (_c = props.callReadinessOptedIn) !== null && _c !== void 0 ? _c : false }),
+                    callReadinessOptedIn: (_c = props.callReadinessOptedIn) !== null && _c !== void 0 ? _c : false, 
+                    /* @conditional-compile-remove(call-readiness) */
+                    onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
                 React__default['default'].createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: defaultPlaceHolder, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
                         props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
                     }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
@@ -17891,6 +18157,8 @@ const ConfigurationPage = (props) => {
         // do nothing here
         // only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
     };
+    /* @conditional-compile-remove(call-readiness) */
+    const [isModalShowing, setIsModalShowing] = React.useState(false);
     return (React__default['default'].createElement(react.Stack, { className: mobileView ? configurationContainerStyleMobile : configurationContainerStyleDesktop },
         React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
             React__default['default'].createElement(ConfigurationpageErrorBar
@@ -17909,6 +18177,17 @@ const ConfigurationPage = (props) => {
                 /* @conditional-compile-remove(call-readiness) */
                 callReadinessOptedIn: callReadinessOptedIn })),
         /* @conditional-compile-remove(call-readiness) */
+        //show this when clicking on enable camera button or enable mic button on desktop for the first time
+        //does not show if user has already grant mic or camera access
+        !mobileView && !cameraPermissionGranted && !microphonePermissionGranted && callReadinessOptedIn && (React__default['default'].createElement(react.Modal, { isOpen: isModalShowing, isBlocking: false, onDismiss: () => {
+                setIsModalShowing(false);
+            }, overlay: { styles: { root: { background: 'rgba(0,0,0,0.9)' } } } },
+            React__default['default'].createElement(DomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
+                    ? () => {
+                        onPermissionsTroubleshootingClick(permissionsState);
+                    }
+                    : undefined }))),
+        /* @conditional-compile-remove(call-readiness) */
         mobileView && isDrawerShowing && callReadinessOptedIn && (React__default['default'].createElement(_DrawerSurface, { onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
             React__default['default'].createElement(DomainPermissions, { appName: 'app', onTroubleshootingClick: onPermissionsTroubleshootingClick
                     ? () => {
@@ -17934,7 +18213,11 @@ const ConfigurationPage = (props) => {
                         callDescription),
                     React__default['default'].createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGranted, microphonePermissionGranted: microphonePermissionGranted, 
                         /* @conditional-compile-remove(call-readiness) */
-                        callReadinessOptedIn: callReadinessOptedIn })))),
+                        callReadinessOptedIn: callReadinessOptedIn, 
+                        /* @conditional-compile-remove(call-readiness) */
+                        onClickEnableDevicePermission: () => {
+                            setIsModalShowing(true);
+                        } })))),
                 React__default['default'].createElement(react.Stack, { styles: mobileWithPreview ? startCallButtonContainerStyleMobile : startCallButtonContainerStyleDesktop },
                     React__default['default'].createElement(StartCallButton, { className: mobileWithPreview ? startCallButtonStyleMobile : undefined, onClick: startCallHandler, disabled: disableStartCallButton }))))));
 };
@@ -18572,7 +18855,7 @@ var __awaiter$4 = (window && window.__awaiter) || function (thisArg, _arguments,
 };
 /** Context of call, which is a centralized context for all state updates */
 class CallContext {
-    constructor(clientState, isTeamsCall) {
+    constructor(clientState, isTeamsCall, maxListeners = 50) {
         var _a;
         this.emitter = new EventEmitter.EventEmitter();
         this.state = {
@@ -18586,6 +18869,7 @@ class CallContext {
             isTeamsCall,
             /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId: clientState.alternateCallerId
         };
+        this.emitter.setMaxListeners(maxListeners);
     }
     onStateChange(handler) {
         this.emitter.on('stateChanged', handler);
@@ -20486,9 +20770,10 @@ var __awaiter = (window && window.__awaiter) || function (thisArg, _arguments, P
 };
 /** Context of Call with Chat, which is a centralized context for all state updates */
 class CallWithChatContext {
-    constructor(clientState) {
+    constructor(clientState, maxListeners = 50) {
         this.emitter = new EventEmitter.EventEmitter();
         this.state = clientState;
+        this.emitter.setMaxListeners(maxListeners);
     }
     onStateChange(handler) {
         this.emitter.on('stateChanged', handler);