@azure/communication-react 1.5.1-alpha-202306200012 → 1.5.1-alpha-202306210014

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

@@ -163,11 +163,22 @@ const _toCommunicationIdentifier = (id) => {
     }
     return id;
 };
+/**
+ * Check if an object is identifier.
+ *
+ * @internal
+ */
+const _isValidIdentifier = (identifier) => {
+    return (communicationCommon.isCommunicationUserIdentifier(identifier) ||
+        communicationCommon.isPhoneNumberIdentifier(identifier) ||
+        communicationCommon.isMicrosoftTeamsUserIdentifier(identifier) ||
+        communicationCommon.isUnknownIdentifier(identifier));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202306200012';
+var telemetryVersion = '1.5.1-alpha-202306210014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6311,7 +6322,7 @@ const updateHTML = (props) => {
         const updatedHTML = escapeHTMLChars(oldPlainText.substring(0, startIndex)) +
             changeWithSkippedChars +
             escapeHTMLChars(oldPlainText.substring(oldPlainTextEndIndex));
-        return { updatedHTML, updatedSelectionIndex: oldPlainTextEndIndex + change.length };
+        return { updatedHTML, updatedSelectionIndex: undefined };
     }
     let result = '';
     let lastProcessedHTMLIndex = 0;
@@ -7655,7 +7666,12 @@ const InputBoxComponent = (props) => {
         if (props.mentionLookupOptions) {
             return React__default['default'].createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
         }
-        return (React__default['default'].createElement(react.TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown })));
+        return (React__default['default'].createElement(react.TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
+                // Fix for setting the cursor to the correct position when multiline is true
+                // This approach should be reviewed during migration to FluentUI v9
+                e.currentTarget.value = '';
+                e.currentTarget.value = textValue;
+            } })));
     };
     return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
         React__default['default'].createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
@@ -19302,22 +19318,6 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
     }, {});
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * Subset of CallCompositePages that represent an end call state.
- * @private
- */
-const END_CALL_PAGES = [
-    'accessDeniedTeamsMeeting',
-    'joinCallFailedDueToNoNetwork',
-    'leftCall',
-    /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
-    'removedFromCall',
-    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
-    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
-];
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -19329,498 +19329,135 @@ var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments,
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
-const REMOTE_PSTN_USER_HUNG_UP = 560000;
-const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
-/* @conditional-compile-remove(rooms) */
-const ROOM_NOT_FOUND_SUB_CODE = 5751;
-/* @conditional-compile-remove(rooms) */
-const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
-/**
- * @private
- */
-const isCameraOn = (state) => {
-    if (state.call) {
-        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
-        return !!stream;
-    }
-    else {
-        if (state.devices.selectedCamera) {
-            const previewOn = _isPreviewOn(state.devices);
-            return previewOn;
-        }
-    }
-    return false;
+var __asyncValues = (window && window.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
 };
 /**
- * Reduce the set of call controls visible on mobile.
- * For example do not show screenshare button.
- *
+ * Context of Chat, which is a centralized context for all state updates
  * @private
  */
-const reduceCallControlsForMobile = (callControlOptions) => {
-    if (callControlOptions === false) {
-        return false;
-    }
-    // Ensure call controls a valid object.
-    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
-    // Set to compressed mode when composite is optimized for mobile
-    reduceCallControlOptions.displayType = 'compact';
-    // Do not show screen share button when composite is optimized for mobile unless the developer
-    // has explicitly opted in.
-    if (reduceCallControlOptions.screenShareButton !== true) {
-        reduceCallControlOptions.screenShareButton = false;
+class ChatContext {
+    constructor(clientState, threadId) {
+        this.emitter = new EventEmitter__default['default']();
+        const thread = clientState.threads[threadId];
+        this.threadId = threadId;
+        if (!thread) {
+            throw 'Cannot find threadId, please initialize thread before use!';
+        }
+        this.state = {
+            userId: clientState.userId,
+            displayName: clientState.displayName,
+            thread,
+            latestErrors: clientState.latestErrors
+        };
     }
-    return reduceCallControlOptions;
-};
-var CallEndReasons;
-(function (CallEndReasons) {
-    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
-    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
-    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
-    CallEndReasons[CallEndReasons["ROOM_NOT_FOUND"] = 3] = "ROOM_NOT_FOUND";
-    CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
-})(CallEndReasons || (CallEndReasons = {}));
-const getCallEndReason = (call) => {
-    var _a, _b, _c, _d, _e;
-    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
-    /**
-     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
-     * The code and subcode is the same as when a user is removed from a teams interop call.
-     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
-     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
-     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
-     */
-    if (remoteParticipantsEndedArray.length === 1 &&
-        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
-        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
-        return CallEndReasons.LEFT_CALL;
+    onStateChange(handler) {
+        this.emitter.on('stateChanged', handler);
     }
-    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
-        return CallEndReasons.ACCESS_DENIED;
+    offStateChange(handler) {
+        this.emitter.off('stateChanged', handler);
     }
-    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
-        return CallEndReasons.REMOVED_FROM_CALL;
+    setState(state) {
+        this.state = state;
+        this.emitter.emit('stateChanged', this.state);
     }
-    /* @conditional-compile-remove(rooms) */
-    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
-        return CallEndReasons.ROOM_NOT_FOUND;
+    getState() {
+        return this.state;
     }
-    /* @conditional-compile-remove(rooms) */
-    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
-        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
+    setError(error) {
+        this.setState(Object.assign(Object.assign({}, this.state), { error }));
     }
-    if (call.callEndReason) {
-        // No error codes match, assume the user simply left the call regularly
-        return CallEndReasons.LEFT_CALL;
+    updateClientState(clientState) {
+        const thread = clientState.threads[this.threadId];
+        if (!thread) {
+            throw 'Cannot find threadId, please make sure thread state is still in Stateful ChatClient.';
+        }
+        let updatedState = {
+            userId: clientState.userId,
+            displayName: clientState.displayName,
+            thread,
+            latestErrors: clientState.latestErrors
+        };
+        /* @conditional-compile-remove(file-sharing) */
+        updatedState = Object.assign(Object.assign({}, updatedState), { fileUploads: this.state.fileUploads });
+        this.setState(updatedState);
     }
-    throw new Error('No matching call end reason');
-};
+}
 /**
- * Get the current call composite page based on the current call composite state
- *
- * @param Call - The current call state
- * @param previousCall - The state of the most recent previous call that has ended.
- *
- * @remarks - The previousCall state is needed to determine if the call has ended.
- * When the call ends a new call object is created, and so we must lookback at the
- * previous call state to understand how the call has ended. If there is no previous
- * call we know that this is a fresh call and can display the configuration page.
- *
  * @private
  */
-const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo, transferCall) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
-        return 'unsupportedEnvironment';
+class AzureCommunicationChatAdapter {
+    constructor(chatClient, chatThreadClient, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options) {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this.credential = undefined;
+        this.emitter = new EventEmitter__default['default']();
+        this.bindAllPublicMethods();
+        this.chatClient = chatClient;
+        this.chatThreadClient = chatThreadClient;
+        this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        if (options && options.credential) {
+            this.credential = options.credential;
+        }
+        /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context);
+        const onStateChange = (clientState) => {
+            // unsubscribe when the instance gets disposed
+            if (!this) {
+                chatClient.offStateChange(onStateChange);
+                return;
+            }
+            this.context.updateClientState(clientState);
+        };
+        this.handlers = createDefaultChatHandlers(chatClient, chatThreadClient);
+        this.chatClient.onStateChange(onStateChange);
+        this.subscribeAllEvents();
     }
-    /* @conditional-compile-remove(call-transfer) */
-    if (transferCall !== undefined) {
-        return 'transferring';
+    bindAllPublicMethods() {
+        this.onStateChange = this.onStateChange.bind(this);
+        this.offStateChange = this.offStateChange.bind(this);
+        this.getState = this.getState.bind(this);
+        this.dispose = this.dispose.bind(this);
+        this.fetchInitialData = this.fetchInitialData.bind(this);
+        this.sendMessage = this.sendMessage.bind(this);
+        this.sendReadReceipt = this.sendReadReceipt.bind(this);
+        this.sendTypingIndicator = this.sendTypingIndicator.bind(this);
+        this.updateMessage = this.updateMessage.bind(this);
+        this.deleteMessage = this.deleteMessage.bind(this);
+        this.removeParticipant = this.removeParticipant.bind(this);
+        this.setTopic = this.setTopic.bind(this);
+        this.loadPreviousChatMessages = this.loadPreviousChatMessages.bind(this);
+        this.on = this.on.bind(this);
+        this.off = this.off.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.registerActiveFileUploads = this.registerActiveFileUploads.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.registerCompletedFileUploads = this.registerCompletedFileUploads.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.clearFileUploads = this.clearFileUploads.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.cancelFileUpload = this.cancelFileUpload.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.updateFileUploadProgress = this.updateFileUploadProgress.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.updateFileUploadErrorMessage = this.updateFileUploadErrorMessage.bind(this);
+        /* @conditional-compile-remove(file-sharing) */
+        this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this.downloadAttachments = this.downloadAttachments.bind(this);
     }
-    if (call) {
-        // Must check for ongoing call *before* looking at any previous calls.
-        // If the composite completes one call and joins another, the previous calls
-        // will be populated, but not relevant for determining the page.
-        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
-        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'lobby';
-            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
-        }
-        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return 'hold';
-        }
-        else if ((call === null || call === void 0 ? void 0 : call.state) === 'Disconnecting') {
-            return 'leaving';
-        }
-        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'call';
-        }
-        else {
-            // When the call object has been constructed after clicking , but before 'connecting' has been
-            // set on the call object, we continue to show the configuration screen.
-            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
-            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
-            // transitional state.
-            return 'configuration';
-        }
-    }
-    if (previousCall) {
-        const reason = getCallEndReason(previousCall);
-        /* @conditional-compile-remove(rooms) */
-        switch (reason) {
-            case CallEndReasons.ROOM_NOT_FOUND:
-                return 'roomNotFound';
-            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
-                return 'deniedPermissionToRoom';
-        }
-        switch (reason) {
-            case CallEndReasons.ACCESS_DENIED:
-                return 'accessDeniedTeamsMeeting';
-            case CallEndReasons.REMOVED_FROM_CALL:
-                return 'removedFromCall';
-            case CallEndReasons.LEFT_CALL:
-                if (previousCall.diagnostics.network.latest.noNetwork) {
-                    return 'joinCallFailedDueToNoNetwork';
-                }
-                return 'leftCall';
-        }
-    }
-    // No call state - show starting page (configuration)
-    return 'configuration';
-};
-/** @private */
-const IsCallEndedPage = (
-/**
- * Explicitly listing the pages of this function intentionally.
- * This protects against adding a new composite page that should be marked as an callEndedPage.
- * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
- * When you add a new composite page this will throw a compiler error. If this new page is an
- * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
- * type below to allow your new page, i.e. add `| <your new page>
- */
-page) => END_CALL_PAGES.includes(page);
-/**
- * Creates a new call control options object and sets the correct values for disabling
- * the buttons provided in the `disabledControls` array.
- * Returns a new object without changing the original object.
- * @param callControlOptions options for the call control component that need to be modified.
- * @param disabledControls An array of controls to disable.
- * @returns a copy of callControlOptions with disabledControls disabled
- * @private
- */
-const disableCallControls = (callControlOptions, disabledControls) => {
-    var _a;
-    if (callControlOptions === false) {
-        return false;
-    }
-    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
-    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
-    if (newOptions === true || newOptions === undefined) {
-        newOptions = disabledControls.reduce((acc, key) => {
-            acc[key] = { disabled: true };
-            return acc;
-        }, {});
-    }
-    else {
-        disabledControls.forEach((key) => {
-            if (newOptions[key] !== false) {
-                newOptions[key] = { disabled: true };
-            }
-        });
-    }
-    return newOptions;
-};
-/**
- * Check if a disabled object is provided for a button and returns if the button is disabled.
- * A button is only disabled if is explicitly set to disabled.
- *
- * @param option
- * @returns whether a button is disabled
- * @private
- */
-const isDisabled$2 = (option) => {
-    if (option === undefined || typeof option === 'boolean') {
-        return false;
-    }
-    return option.disabled;
-};
-/* @conditional-compile-remove(call-readiness) */
-/**
- * @returns Permissions state for the camera.
- */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
-    try {
-        return (yield navigator.permissions.query({ name: 'camera' })).state;
-    }
-    catch (e) {
-        console.info('permissions API is not supported by browser', e);
-        return 'unsupported';
-    }
-});
-/* @conditional-compile-remove(call-readiness) */
-/**
- * @returns Permissions state for the microphone.
- */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
-    try {
-        return (yield navigator.permissions.query({ name: 'microphone' })).state;
-    }
-    catch (e) {
-        console.info('permissions API is not supported by browser', e);
-        return 'unsupported';
-    }
-});
-/* @conditional-compile-remove(call-readiness) */
-/**
- *
- * This function uses permission API to determine if device permission state is granted, prompt or denied
- * @returns whether device permission state is granted, prompt or denied
- * If permission API is not supported on this browser, permission state is set to unsupported.
- * @private
- */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$i(void 0, void 0, void 0, function* () {
-    const [cameraResult, microphoneResult] = yield Promise.all([
-        queryCameraPermissionFromPermissionsAPI(),
-        queryMicrophonePermissionFromPermissionsAPI()
-    ]);
-    setVideoState(cameraResult);
-    setAudioState(microphoneResult);
-});
-/* @conditional-compile-remove(unsupported-browser) */
-const isUnsupportedEnvironment = (environmentInfo, unsupportedBrowserVersionOptedIn) => {
-    return !!((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
-        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn) ||
-        (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false);
-};
-/**
- * Check if an object is identifier.
- *
- * @param identifier
- * @returns whether an identifier is one of identifier types (for runtime validation)
- * @private
- */
-const isValidIdentifier = (identifier) => {
-    return (communicationCommon.isCommunicationUserIdentifier(identifier) ||
-        communicationCommon.isPhoneNumberIdentifier(identifier) ||
-        communicationCommon.isMicrosoftTeamsUserIdentifier(identifier) ||
-        communicationCommon.isUnknownIdentifier(identifier));
-};
-/**
- * Check if we are using safari browser
- * @private
- */
-const _isSafari = (environmentInfo) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
-};
-/**
- * @private
- * This is the util function to create a participant modifier for remote participantList
- * It memoize previous original participant items and only update the changed participant
- * It takes in one modifier function to generate one single participant object, it returns undefined if the object keeps unmodified
- */
-const createParticipantModifier = (createModifiedParticipant) => {
-    let previousParticipantState = undefined;
-    let modifiedParticipants = {};
-    const memoizedParticipants = {};
-    return (state) => {
-        var _a, _b, _c, _d;
-        // if root state is the same, we don't need to update the participants
-        if (((_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants) !== previousParticipantState) {
-            modifiedParticipants = {};
-            const originalParticipants = (_b = state.call) === null || _b === void 0 ? void 0 : _b.remoteParticipants;
-            for (const key in originalParticipants) {
-                const modifiedParticipant = createModifiedParticipant(key, originalParticipants[key]);
-                if (modifiedParticipant === undefined) {
-                    modifiedParticipants[key] = originalParticipants[key];
-                    continue;
-                }
-                // Generate the new item if original cached item has been changed
-                if (((_c = memoizedParticipants[key]) === null || _c === void 0 ? void 0 : _c.originalRef) !== originalParticipants[key]) {
-                    memoizedParticipants[key] = {
-                        newParticipant: modifiedParticipant,
-                        originalRef: originalParticipants[key]
-                    };
-                }
-                // the modified participant is always coming from the memoized cache, whether is was refreshed
-                // from the previous closure or not
-                modifiedParticipants[key] = memoizedParticipants[key].newParticipant;
-            }
-            previousParticipantState = (_d = state.call) === null || _d === void 0 ? void 0 : _d.remoteParticipants;
-        }
-        return Object.assign(Object.assign({}, state), { call: state.call
-                ? Object.assign(Object.assign({}, state.call), { remoteParticipants: modifiedParticipants }) : undefined });
-    };
-};
-/**
- * @private
- */
-const dismissVideoEffectsError = (toDismiss) => {
-    var _a;
-    const now = new Date(Date.now());
-    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
-    // Record that this error was dismissed for the first time right now.
-    return {
-        dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
-        activeSince: toDismiss.timestamp
-    };
-};
-/* @conditional-compile-remove(video-background-effects) */
-/** @private */
-const getBackgroundEffectFromSelectedEffect = (selectedEffect) => (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'blur'
-    ? new communicationCallingEffects.BackgroundBlurEffect()
-    : (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'replacement'
-        ? new communicationCallingEffects.BackgroundReplacementEffect({ backgroundImageUrl: selectedEffect.backgroundImageUrl })
-        : undefined;
-/* @conditional-compile-remove(video-background-effects) */
-/**
- * @remarks this logic should mimic the onToggleCamera in the common call handlers.
- * @private
- */
-const getSelectedCameraFromAdapterState = (state) => state.devices.selectedCamera || state.devices.cameras[0];
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-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); } }
-        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());
-    });
-};
-var __asyncValues = (window && window.__asyncValues) || function (o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-};
-/**
- * Context of Chat, which is a centralized context for all state updates
- * @private
- */
-class ChatContext {
-    constructor(clientState, threadId) {
-        this.emitter = new EventEmitter__default['default']();
-        const thread = clientState.threads[threadId];
-        this.threadId = threadId;
-        if (!thread) {
-            throw 'Cannot find threadId, please initialize thread before use!';
-        }
-        this.state = {
-            userId: clientState.userId,
-            displayName: clientState.displayName,
-            thread,
-            latestErrors: clientState.latestErrors
-        };
-    }
-    onStateChange(handler) {
-        this.emitter.on('stateChanged', handler);
-    }
-    offStateChange(handler) {
-        this.emitter.off('stateChanged', handler);
-    }
-    setState(state) {
-        this.state = state;
-        this.emitter.emit('stateChanged', this.state);
-    }
-    getState() {
-        return this.state;
-    }
-    setError(error) {
-        this.setState(Object.assign(Object.assign({}, this.state), { error }));
-    }
-    updateClientState(clientState) {
-        const thread = clientState.threads[this.threadId];
-        if (!thread) {
-            throw 'Cannot find threadId, please make sure thread state is still in Stateful ChatClient.';
-        }
-        let updatedState = {
-            userId: clientState.userId,
-            displayName: clientState.displayName,
-            thread,
-            latestErrors: clientState.latestErrors
-        };
-        /* @conditional-compile-remove(file-sharing) */
-        updatedState = Object.assign(Object.assign({}, updatedState), { fileUploads: this.state.fileUploads });
-        this.setState(updatedState);
-    }
-}
-/**
- * @private
- */
-class AzureCommunicationChatAdapter {
-    constructor(chatClient, chatThreadClient, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options) {
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.credential = undefined;
-        this.emitter = new EventEmitter__default['default']();
-        this.bindAllPublicMethods();
-        this.chatClient = chatClient;
-        this.chatThreadClient = chatThreadClient;
-        this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        if (options && options.credential) {
-            this.credential = options.credential;
-        }
-        /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context);
-        const onStateChange = (clientState) => {
-            // unsubscribe when the instance gets disposed
-            if (!this) {
-                chatClient.offStateChange(onStateChange);
-                return;
-            }
-            this.context.updateClientState(clientState);
-        };
-        this.handlers = createDefaultChatHandlers(chatClient, chatThreadClient);
-        this.chatClient.onStateChange(onStateChange);
-        this.subscribeAllEvents();
-    }
-    bindAllPublicMethods() {
-        this.onStateChange = this.onStateChange.bind(this);
-        this.offStateChange = this.offStateChange.bind(this);
-        this.getState = this.getState.bind(this);
-        this.dispose = this.dispose.bind(this);
-        this.fetchInitialData = this.fetchInitialData.bind(this);
-        this.sendMessage = this.sendMessage.bind(this);
-        this.sendReadReceipt = this.sendReadReceipt.bind(this);
-        this.sendTypingIndicator = this.sendTypingIndicator.bind(this);
-        this.updateMessage = this.updateMessage.bind(this);
-        this.deleteMessage = this.deleteMessage.bind(this);
-        this.removeParticipant = this.removeParticipant.bind(this);
-        this.setTopic = this.setTopic.bind(this);
-        this.loadPreviousChatMessages = this.loadPreviousChatMessages.bind(this);
-        this.on = this.on.bind(this);
-        this.off = this.off.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.registerActiveFileUploads = this.registerActiveFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.registerCompletedFileUploads = this.registerCompletedFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.clearFileUploads = this.clearFileUploads.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.cancelFileUpload = this.cancelFileUpload.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.updateFileUploadProgress = this.updateFileUploadProgress.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.updateFileUploadErrorMessage = this.updateFileUploadErrorMessage.bind(this);
-        /* @conditional-compile-remove(file-sharing) */
-        this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.downloadAttachments = this.downloadAttachments.bind(this);
-    }
-    dispose() {
-        this.unsubscribeAllEvents();
+    dispose() {
+        this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -19854,8 +19491,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(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) */
@@ -19872,51 +19509,51 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -19951,8 +19588,8 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadAttachments(options) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
                     const e = new Error();
                     e['target'] = 'ChatThreadClient.getMessage';
@@ -19972,9 +19609,9 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadAuthenticatedFile(accessToken, options) {
-        return __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             function fetchWithAuthentication(url, token) {
-                return __awaiter$h(this, void 0, void 0, function* () {
+                return __awaiter$i(this, void 0, void 0, function* () {
                     const headers = new Headers();
                     headers.append('Authorization', `Bearer ${token}`);
                     try {
@@ -20046,7 +19683,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -20088,8 +19725,8 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$h(void 0, void 0, void 0, function* () {
-    if (!isValidIdentifier(userId)) {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$i(void 0, void 0, void 0, function* () {
+    if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
     const chatClient = createStatefulChatClient({
@@ -20157,7 +19794,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$h(void 0, void 0, void 0, function* () {
+        (() => __awaiter$i(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -20189,7 +19826,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$h(void 0, void 0, void 0, function* () {
+            (() => __awaiter$i(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -20213,7 +19850,7 @@ beforeDispose) => {
 function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 options) {
-    return __awaiter$h(this, void 0, void 0, function* () {
+    return __awaiter$i(this, void 0, void 0, function* () {
         return new AzureCommunicationChatAdapter(chatClient, chatThreadClient, 
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options);
     });
@@ -20426,7 +20063,7 @@ const sendboxContainerStyles = {
 
 // 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); } }
@@ -20447,7 +20084,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$g(void 0, void 0, void 0, function* () {
+        (() => __awaiter$h(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -20814,6 +20451,253 @@ const FileDownloadErrorBar = (props) => {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+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); } }
+        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 ChatScreen = (props) => {
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
+    const defaultNumberOfChatMessagesToReload = 5;
+    /* @conditional-compile-remove(file-sharing) */
+    const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
+    const adapter = useAdapter$1();
+    const theme = useTheme();
+    React.useEffect(() => {
+        // Initial data should be always fetched by the composite(or external caller) instead of the adapter
+        const fetchData = () => __awaiter$g(void 0, void 0, void 0, function* () {
+            // Fetch initial data for adapter
+            yield adapter.fetchInitialData();
+            // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
+            yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
+        });
+        fetchData();
+    }, [adapter]);
+    const messageThreadProps = usePropsFor$2(MessageThread);
+    const sendBoxProps = usePropsFor$2(SendBox);
+    const typingIndicatorProps = usePropsFor$2(TypingIndicator);
+    const headerProps = useAdaptedSelector$1(getHeaderProps);
+    const errorBarProps = usePropsFor$2(ErrorBar);
+    const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
+        return (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
+    }, [onFetchAvatarPersonaData]);
+    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
+    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
+    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
+    const fileUploadButtonOnChange = React.useCallback((files) => {
+        if (!files) {
+            return;
+        }
+        /* @conditional-compile-remove(file-sharing) */
+        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
+        /* @conditional-compile-remove(file-sharing) */
+        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
+    }, [adapter, fileSharing, userId]);
+    /* @conditional-compile-remove(file-sharing) */
+    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
+            setDownloadErrorMessage(errorMessage);
+        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$g(void 0, void 0, void 0, function* () {
+        if (attachment.previewUrl) {
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
+            return blob;
+        }
+        return [{ blobUrl: '' }];
+    }), [adapter]);
+    const AttachFileButton = React.useCallback(() => {
+        if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
+            return null;
+        }
+        return (React__default['default'].createElement(FileUploadButtonWrapper, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
+    }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
+    return (React__default['default'].createElement(react.Stack, { className: chatContainer, grow: true },
+        (options === null || options === void 0 ? void 0 : options.topic) !== false && React__default['default'].createElement(ChatHeader, Object.assign({}, headerProps)),
+        React__default['default'].createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
+            React__default['default'].createElement(react.Stack, { className: chatWrapper, grow: true },
+                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)),
+                /* @conditional-compile-remove(file-sharing) */
+                React__default['default'].createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
+                        setDownloadErrorMessage('');
+                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
+                React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                    /* @conditional-compile-remove(file-sharing) */
+                    onRenderFileDownloads: onRenderFileDownloads, 
+                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
+                    React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
+                    React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
+                        formFactor === 'mobile' && (React__default['default'].createElement(react.Stack, { verticalAlign: "center" },
+                            React__default['default'].createElement(AttachFileButton, null))),
+                        React__default['default'].createElement(react.Stack, { grow: true },
+                            React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                activeFileUploads: useSelector$2(fileUploadsSelector).files, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                onCancelFileUpload: adapter.cancelFileUpload }))),
+                        formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
+            /* @conditional-compile-remove(chat-composite-participant-pane) */
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A customizable UI composite for the chat experience.
+ *
+ * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
+ *
+ * @public
+ */
+const ChatComposite = (props) => {
+    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
+    const formFactor = props['formFactor'] || 'desktop';
+    /**
+     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    const fileSharingOptions = () => {
+        /* @conditional-compile-remove(file-sharing) */
+        return {
+            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
+        };
+    };
+    return (React__default['default'].createElement("div", { className: chatScreenContainerStyle },
+        React__default['default'].createElement(BaseProvider, Object.assign({}, props),
+            React__default['default'].createElement(ChatAdapterProvider, { adapter: adapter },
+                React__default['default'].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
+};
+
+// Copyright (c) Microsoft Corporation.
+const CallAdapterContext = React.createContext(undefined);
+/**
+ * @private
+ */
+const CallAdapterProvider = (props) => {
+    const { adapter } = props;
+    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
+};
+/**
+ * @private
+ */
+const useAdapter = () => {
+    const adapter = React.useContext(CallAdapterContext);
+    if (!adapter) {
+        throw 'Cannot find adapter please initialize before usage.';
+    }
+    return adapter;
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const useAdaptedSelector = (selector, selectorProps) => {
+    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
+};
+/**
+ * @private
+ */
+const useSelectorWithAdaptation = (selector, adaptState, selectorProps) => {
+    var _a;
+    const adapter = useAdapter();
+    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
+    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    });
+    const callId = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.id;
+    const callConfigProps = React.useMemo(() => ({
+        callId
+    }), [callId]);
+    const [props, setProps] = React.useState(selector(adaptState(adapter.getState()), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps));
+    const propRef = React.useRef(props);
+    propRef.current = props;
+    React.useEffect(() => {
+        const onStateChange = (state) => {
+            if (!mounted.current) {
+                return;
+            }
+            const newProps = selector(adaptState(state), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps);
+            if (propRef.current !== newProps) {
+                setProps(newProps);
+            }
+        };
+        adapter.onStateChange(onStateChange);
+        return () => {
+            adapter.offStateChange(onStateChange);
+        };
+    }, [adaptState, adapter, selector, selectorProps, callConfigProps]);
+    return props;
+};
+const memoizeState = memoizeOne__default['default']((userId, deviceManager, calls, latestErrors, displayName, alternateCallerId, environmentInfo) => ({
+    userId,
+    incomingCalls: {},
+    incomingCallsEnded: {},
+    callsEnded: {},
+    deviceManager,
+    callAgent: { displayName },
+    calls,
+    latestErrors,
+    /* @conditional-compile-remove(PSTN-calls) */
+    alternateCallerId,
+    /* @conditional-compile-remove(unsupported-browser) */
+    environmentInfo
+}));
+const memoizeCalls = memoizeOne__default['default']((call) => (call ? { [call.id]: call } : {}));
+const adaptCompositeState = (compositeState) => {
+    return memoizeState(compositeState.userId, compositeState.devices, memoizeCalls(compositeState.call), 
+    // This is an unsafe type expansion.
+    // compositeState.latestErrors can contain properties that are not valid in CallErrors.
+    //
+    // But there is no way to check for valid property names at runtime:
+    // - The set of valid property names is built from types in the @azure/communication-calling.
+    //   Thus we don't have a literal array of allowed strings at runtime.
+    // - Due to minification / uglification, the property names from the objects at runtime can't be used
+    //   to compare against permissible values inferred from the types.
+    //
+    // This is not a huge problem -- it simply means that our adapted selector will include some extra operations
+    // that are unknown to the UI component and data binding libraries. Generic handling of the errors (e.g.,
+    // just displaying them in some UI surface) will continue to work for these operations. Handling of
+    // specific operations (e.g., acting on errors related to permission issues) will ignore these operations.
+    compositeState.latestErrors, compositeState.displayName, 
+    /* @conditional-compile-remove(PSTN-calls) */
+    compositeState.alternateCallerId, 
+    /* @conditional-compile-remove(unsupported-browser) */
+    compositeState.environmentInfo);
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Subset of CallCompositePages that represent an end call state.
+ * @private
+ */
+const END_CALL_PAGES = [
+    'accessDeniedTeamsMeeting',
+    'joinCallFailedDueToNoNetwork',
+    'leftCall',
+    /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
+    'removedFromCall',
+    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
+    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
+];
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -20825,225 +20709,344 @@ var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments,
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
+const REMOTE_PSTN_USER_HUNG_UP = 560000;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
+/* @conditional-compile-remove(rooms) */
+const ROOM_NOT_FOUND_SUB_CODE = 5751;
+/* @conditional-compile-remove(rooms) */
+const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
 /**
  * @private
  */
-const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
-    const defaultNumberOfChatMessagesToReload = 5;
-    /* @conditional-compile-remove(file-sharing) */
-    const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
-    const adapter = useAdapter$1();
-    const theme = useTheme();
-    React.useEffect(() => {
-        // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        const fetchData = () => __awaiter$f(void 0, void 0, void 0, function* () {
-            // Fetch initial data for adapter
-            yield adapter.fetchInitialData();
-            // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
-            yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
-        });
-        fetchData();
-    }, [adapter]);
-    const messageThreadProps = usePropsFor$2(MessageThread);
-    const sendBoxProps = usePropsFor$2(SendBox);
-    const typingIndicatorProps = usePropsFor$2(TypingIndicator);
-    const headerProps = useAdaptedSelector$1(getHeaderProps);
-    const errorBarProps = usePropsFor$2(ErrorBar);
-    const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
-        return (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
-    }, [onFetchAvatarPersonaData]);
-    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
-    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
-    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
-    const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
-    const fileUploadButtonOnChange = React.useCallback((files) => {
-        if (!files) {
-            return;
+const isCameraOn = (state) => {
+    if (state.call) {
+        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
+        return !!stream;
+    }
+    else {
+        if (state.devices.selectedCamera) {
+            const previewOn = _isPreviewOn(state.devices);
+            return previewOn;
         }
-        /* @conditional-compile-remove(file-sharing) */
-        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
-        /* @conditional-compile-remove(file-sharing) */
-        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
-    }, [adapter, fileSharing, userId]);
-    /* @conditional-compile-remove(file-sharing) */
-    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
-            setDownloadErrorMessage(errorMessage);
-        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$f(void 0, void 0, void 0, function* () {
-        if (attachment.previewUrl) {
-            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
-            return blob;
+    }
+    return false;
+};
+/**
+ * Reduce the set of call controls visible on mobile.
+ * For example do not show screenshare button.
+ *
+ * @private
+ */
+const reduceCallControlsForMobile = (callControlOptions) => {
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure call controls a valid object.
+    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
+    // Set to compressed mode when composite is optimized for mobile
+    reduceCallControlOptions.displayType = 'compact';
+    // Do not show screen share button when composite is optimized for mobile unless the developer
+    // has explicitly opted in.
+    if (reduceCallControlOptions.screenShareButton !== true) {
+        reduceCallControlOptions.screenShareButton = false;
+    }
+    return reduceCallControlOptions;
+};
+var CallEndReasons;
+(function (CallEndReasons) {
+    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
+    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
+    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
+    CallEndReasons[CallEndReasons["ROOM_NOT_FOUND"] = 3] = "ROOM_NOT_FOUND";
+    CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
+})(CallEndReasons || (CallEndReasons = {}));
+const getCallEndReason = (call) => {
+    var _a, _b, _c, _d, _e;
+    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
+    /**
+     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
+     * The code and subcode is the same as when a user is removed from a teams interop call.
+     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
+     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
+     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
+     */
+    if (remoteParticipantsEndedArray.length === 1 &&
+        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
+        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
+        return CallEndReasons.LEFT_CALL;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+        return CallEndReasons.ACCESS_DENIED;
+    }
+    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+        return CallEndReasons.REMOVED_FROM_CALL;
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
+        return CallEndReasons.ROOM_NOT_FOUND;
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
+        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
+    }
+    if (call.callEndReason) {
+        // No error codes match, assume the user simply left the call regularly
+        return CallEndReasons.LEFT_CALL;
+    }
+    throw new Error('No matching call end reason');
+};
+/**
+ * Get the current call composite page based on the current call composite state
+ *
+ * @param Call - The current call state
+ * @param previousCall - The state of the most recent previous call that has ended.
+ *
+ * @remarks - The previousCall state is needed to determine if the call has ended.
+ * When the call ends a new call object is created, and so we must lookback at the
+ * previous call state to understand how the call has ended. If there is no previous
+ * call we know that this is a fresh call and can display the configuration page.
+ *
+ * @private
+ */
+const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo, transferCall) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
+        return 'unsupportedEnvironment';
+    }
+    /* @conditional-compile-remove(call-transfer) */
+    if (transferCall !== undefined) {
+        return 'transferring';
+    }
+    if (call) {
+        // Must check for ongoing call *before* looking at any previous calls.
+        // If the composite completes one call and joins another, the previous calls
+        // will be populated, but not relevant for determining the page.
+        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
+        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'lobby';
+            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
         }
-        return [{ blobUrl: '' }];
-    }), [adapter]);
-    const AttachFileButton = React.useCallback(() => {
-        if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
-            return null;
+        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return 'hold';
         }
-        return (React__default['default'].createElement(FileUploadButtonWrapper, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
-    }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
-    return (React__default['default'].createElement(react.Stack, { className: chatContainer, grow: true },
-        (options === null || options === void 0 ? void 0 : options.topic) !== false && React__default['default'].createElement(ChatHeader, Object.assign({}, headerProps)),
-        React__default['default'].createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
-            React__default['default'].createElement(react.Stack, { className: chatWrapper, grow: true },
-                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)),
-                /* @conditional-compile-remove(file-sharing) */
-                React__default['default'].createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
-                        setDownloadErrorMessage('');
-                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
-                React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
-                    /* @conditional-compile-remove(file-sharing) */
-                    onRenderFileDownloads: onRenderFileDownloads, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
-                React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
-                    React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
-                    React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
-                        formFactor === 'mobile' && (React__default['default'].createElement(react.Stack, { verticalAlign: "center" },
-                            React__default['default'].createElement(AttachFileButton, null))),
-                        React__default['default'].createElement(react.Stack, { grow: true },
-                            React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
-                                /* @conditional-compile-remove(file-sharing) */
-                                activeFileUploads: useSelector$2(fileUploadsSelector).files, 
-                                /* @conditional-compile-remove(file-sharing) */
-                                onCancelFileUpload: adapter.cancelFileUpload }))),
-                        formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
-            /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+        else if ((call === null || call === void 0 ? void 0 : call.state) === 'Disconnecting') {
+            return 'leaving';
+        }
+        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'call';
+        }
+        else {
+            // When the call object has been constructed after clicking , but before 'connecting' has been
+            // set on the call object, we continue to show the configuration screen.
+            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
+            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
+            // transitional state.
+            return 'configuration';
+        }
+    }
+    if (previousCall) {
+        const reason = getCallEndReason(previousCall);
+        /* @conditional-compile-remove(rooms) */
+        switch (reason) {
+            case CallEndReasons.ROOM_NOT_FOUND:
+                return 'roomNotFound';
+            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
+                return 'deniedPermissionToRoom';
+        }
+        switch (reason) {
+            case CallEndReasons.ACCESS_DENIED:
+                return 'accessDeniedTeamsMeeting';
+            case CallEndReasons.REMOVED_FROM_CALL:
+                return 'removedFromCall';
+            case CallEndReasons.LEFT_CALL:
+                if (previousCall.diagnostics.network.latest.noNetwork) {
+                    return 'joinCallFailedDueToNoNetwork';
+                }
+                return 'leftCall';
+        }
+    }
+    // No call state - show starting page (configuration)
+    return 'configuration';
+};
+/** @private */
+const IsCallEndedPage = (
+/**
+ * Explicitly listing the pages of this function intentionally.
+ * This protects against adding a new composite page that should be marked as an callEndedPage.
+ * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
+ * When you add a new composite page this will throw a compiler error. If this new page is an
+ * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
+ * type below to allow your new page, i.e. add `| <your new page>
+ */
+page) => END_CALL_PAGES.includes(page);
+/**
+ * Creates a new call control options object and sets the correct values for disabling
+ * the buttons provided in the `disabledControls` array.
+ * Returns a new object without changing the original object.
+ * @param callControlOptions options for the call control component that need to be modified.
+ * @param disabledControls An array of controls to disable.
+ * @returns a copy of callControlOptions with disabledControls disabled
+ * @private
+ */
+const disableCallControls = (callControlOptions, disabledControls) => {
+    var _a;
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
+    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
+    if (newOptions === true || newOptions === undefined) {
+        newOptions = disabledControls.reduce((acc, key) => {
+            acc[key] = { disabled: true };
+            return acc;
+        }, {});
+    }
+    else {
+        disabledControls.forEach((key) => {
+            if (newOptions[key] !== false) {
+                newOptions[key] = { disabled: true };
+            }
+        });
+    }
+    return newOptions;
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
- * A customizable UI composite for the chat experience.
- *
- * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ * A button is only disabled if is explicitly set to disabled.
  *
- * @public
+ * @param option
+ * @returns whether a button is disabled
+ * @private
  */
-const ChatComposite = (props) => {
-    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
-    const formFactor = props['formFactor'] || 'desktop';
-    /**
-     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
-     * @private
-     */
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    const fileSharingOptions = () => {
-        /* @conditional-compile-remove(file-sharing) */
-        return {
-            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
-        };
-    };
-    return (React__default['default'].createElement("div", { className: chatScreenContainerStyle },
-        React__default['default'].createElement(BaseProvider, Object.assign({}, props),
-            React__default['default'].createElement(ChatAdapterProvider, { adapter: adapter },
-                React__default['default'].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
+const isDisabled$2 = (option) => {
+    if (option === undefined || typeof option === 'boolean') {
+        return false;
+    }
+    return option.disabled;
 };
-
-// Copyright (c) Microsoft Corporation.
-const CallAdapterContext = React.createContext(undefined);
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * @returns Permissions state for the camera.
+ */
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
+    try {
+        return (yield navigator.permissions.query({ name: 'camera' })).state;
+    }
+    catch (e) {
+        console.info('permissions API is not supported by browser', e);
+        return 'unsupported';
+    }
+});
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * @returns Permissions state for the microphone.
+ */
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
+    try {
+        return (yield navigator.permissions.query({ name: 'microphone' })).state;
+    }
+    catch (e) {
+        console.info('permissions API is not supported by browser', e);
+        return 'unsupported';
+    }
+});
+/* @conditional-compile-remove(call-readiness) */
 /**
+ *
+ * This function uses permission API to determine if device permission state is granted, prompt or denied
+ * @returns whether device permission state is granted, prompt or denied
+ * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const CallAdapterProvider = (props) => {
-    const { adapter } = props;
-    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$f(void 0, void 0, void 0, function* () {
+    const [cameraResult, microphoneResult] = yield Promise.all([
+        queryCameraPermissionFromPermissionsAPI(),
+        queryMicrophonePermissionFromPermissionsAPI()
+    ]);
+    setVideoState(cameraResult);
+    setAudioState(microphoneResult);
+});
+/* @conditional-compile-remove(unsupported-browser) */
+const isUnsupportedEnvironment = (environmentInfo, unsupportedBrowserVersionOptedIn) => {
+    return !!((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
+        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn) ||
+        (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false);
 };
 /**
+ * Check if we are using safari browser
  * @private
  */
-const useAdapter = () => {
-    const adapter = React.useContext(CallAdapterContext);
-    if (!adapter) {
-        throw 'Cannot find adapter please initialize before usage.';
-    }
-    return adapter;
+const _isSafari = (environmentInfo) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
  * @private
+ * This is the util function to create a participant modifier for remote participantList
+ * It memoize previous original participant items and only update the changed participant
+ * It takes in one modifier function to generate one single participant object, it returns undefined if the object keeps unmodified
  */
-const useAdaptedSelector = (selector, selectorProps) => {
-    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
+const createParticipantModifier = (createModifiedParticipant) => {
+    let previousParticipantState = undefined;
+    let modifiedParticipants = {};
+    const memoizedParticipants = {};
+    return (state) => {
+        var _a, _b, _c, _d;
+        // if root state is the same, we don't need to update the participants
+        if (((_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants) !== previousParticipantState) {
+            modifiedParticipants = {};
+            const originalParticipants = (_b = state.call) === null || _b === void 0 ? void 0 : _b.remoteParticipants;
+            for (const key in originalParticipants) {
+                const modifiedParticipant = createModifiedParticipant(key, originalParticipants[key]);
+                if (modifiedParticipant === undefined) {
+                    modifiedParticipants[key] = originalParticipants[key];
+                    continue;
+                }
+                // Generate the new item if original cached item has been changed
+                if (((_c = memoizedParticipants[key]) === null || _c === void 0 ? void 0 : _c.originalRef) !== originalParticipants[key]) {
+                    memoizedParticipants[key] = {
+                        newParticipant: modifiedParticipant,
+                        originalRef: originalParticipants[key]
+                    };
+                }
+                // the modified participant is always coming from the memoized cache, whether is was refreshed
+                // from the previous closure or not
+                modifiedParticipants[key] = memoizedParticipants[key].newParticipant;
+            }
+            previousParticipantState = (_d = state.call) === null || _d === void 0 ? void 0 : _d.remoteParticipants;
+        }
+        return Object.assign(Object.assign({}, state), { call: state.call
+                ? Object.assign(Object.assign({}, state.call), { remoteParticipants: modifiedParticipants }) : undefined });
+    };
 };
 /**
  * @private
  */
-const useSelectorWithAdaptation = (selector, adaptState, selectorProps) => {
+const dismissVideoEffectsError = (toDismiss) => {
     var _a;
-    const adapter = useAdapter();
-    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
-    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
-    const mounted = React.useRef(false);
-    React.useEffect(() => {
-        mounted.current = true;
-        return () => {
-            mounted.current = false;
-        };
-    });
-    const callId = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.id;
-    const callConfigProps = React.useMemo(() => ({
-        callId
-    }), [callId]);
-    const [props, setProps] = React.useState(selector(adaptState(adapter.getState()), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps));
-    const propRef = React.useRef(props);
-    propRef.current = props;
-    React.useEffect(() => {
-        const onStateChange = (state) => {
-            if (!mounted.current) {
-                return;
-            }
-            const newProps = selector(adaptState(state), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps);
-            if (propRef.current !== newProps) {
-                setProps(newProps);
-            }
-        };
-        adapter.onStateChange(onStateChange);
-        return () => {
-            adapter.offStateChange(onStateChange);
-        };
-    }, [adaptState, adapter, selector, selectorProps, callConfigProps]);
-    return props;
-};
-const memoizeState = memoizeOne__default['default']((userId, deviceManager, calls, latestErrors, displayName, alternateCallerId, environmentInfo) => ({
-    userId,
-    incomingCalls: {},
-    incomingCallsEnded: {},
-    callsEnded: {},
-    deviceManager,
-    callAgent: { displayName },
-    calls,
-    latestErrors,
-    /* @conditional-compile-remove(PSTN-calls) */
-    alternateCallerId,
-    /* @conditional-compile-remove(unsupported-browser) */
-    environmentInfo
-}));
-const memoizeCalls = memoizeOne__default['default']((call) => (call ? { [call.id]: call } : {}));
-const adaptCompositeState = (compositeState) => {
-    return memoizeState(compositeState.userId, compositeState.devices, memoizeCalls(compositeState.call), 
-    // This is an unsafe type expansion.
-    // compositeState.latestErrors can contain properties that are not valid in CallErrors.
-    //
-    // But there is no way to check for valid property names at runtime:
-    // - The set of valid property names is built from types in the @azure/communication-calling.
-    //   Thus we don't have a literal array of allowed strings at runtime.
-    // - Due to minification / uglification, the property names from the objects at runtime can't be used
-    //   to compare against permissible values inferred from the types.
-    //
-    // This is not a huge problem -- it simply means that our adapted selector will include some extra operations
-    // that are unknown to the UI component and data binding libraries. Generic handling of the errors (e.g.,
-    // just displaying them in some UI surface) will continue to work for these operations. Handling of
-    // specific operations (e.g., acting on errors related to permission issues) will ignore these operations.
-    compositeState.latestErrors, compositeState.displayName, 
-    /* @conditional-compile-remove(PSTN-calls) */
-    compositeState.alternateCallerId, 
-    /* @conditional-compile-remove(unsupported-browser) */
-    compositeState.environmentInfo);
+    const now = new Date(Date.now());
+    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
+    // Record that this error was dismissed for the first time right now.
+    return {
+        dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
+        activeSince: toDismiss.timestamp
+    };
 };
+/* @conditional-compile-remove(video-background-effects) */
+/** @private */
+const getBackgroundEffectFromSelectedEffect = (selectedEffect) => (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'blur'
+    ? new communicationCallingEffects.BackgroundBlurEffect()
+    : (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'replacement'
+        ? new communicationCallingEffects.BackgroundReplacementEffect({ backgroundImageUrl: selectedEffect.backgroundImageUrl })
+        : undefined;
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @remarks this logic should mimic the onToggleCamera in the common call handlers.
+ * @private
+ */
+const getSelectedCameraFromAdapterState = (state) => state.devices.selectedCamera || state.devices.cameras[0];
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -27614,7 +27617,7 @@ class AzureCommunicationCallAdapter {
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(video-background-effects) */ options }) => __awaiter$3(void 0, void 0, void 0, function* () {
-    if (!isValidIdentifier(userId)) {
+    if (!_isValidIdentifier(userId)) {
         throw new Error('Invalid identifier. Please provide valid identifier object.');
     }
     const callClient = createStatefulCallClient({