@azure/communication-react 1.4.3-alpha-202212140016.0 → 1.4.3-alpha-202212150014.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.3-alpha-202212140016.0';
+var telemetryVersion = '1.4.3-alpha-202212150014.0';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -14747,6 +14747,280 @@ 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.
+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;
+};
+/**
+ * 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) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (isUnsupportedEnvironment(unsupportedBrowserInfo.features, unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
+        return 'unsupportedEnvironment';
+    }
+    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 (_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) */
+/**
+ *
+ * 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, do nothing and log out error
+ * @private
+ */
+const getDevicePermissionState = (setVideoState, setAudioState) => {
+    navigator.permissions
+        .query({ name: 'camera' })
+        .then((result) => {
+        setVideoState(result.state);
+    })
+        .catch(() => {
+        setVideoState('unsupported');
+    });
+    navigator.permissions
+        .query({ name: 'microphone' })
+        .then((result) => {
+        setAudioState(result.state);
+    })
+        .catch(() => {
+        setAudioState('unsupported');
+    });
+};
+/* @conditional-compile-remove(unsupported-browser) */
+const isUnsupportedEnvironment = (features, environmentInfo, unsupportedBrowserVersionOptedIn) => {
+    return !!((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) &&
+        ((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));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$c = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -15097,6 +15371,9 @@ const convertEventType = (type) => {
  * @public
  */
 const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$c(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({
         userId,
         displayName,
@@ -15864,409 +16141,156 @@ const ChatScreen = (props) => {
                 React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
                     /* @conditional-compile-remove(file-sharing) */
                     onRenderFileDownloads: onRenderFileDownloads, 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.
-// Licensed under the MIT license.
-/** @private */
-const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
-
-// 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) => ({
-    userId,
-    incomingCalls: {},
-    incomingCallsEnded: {},
-    callsEnded: {},
-    deviceManager,
-    callAgent: { displayName },
-    calls,
-    latestErrors
-}));
-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);
-};
-
-// 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.
-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;
-};
-/**
- * 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');
+                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.
 /**
- * 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.
+ * A customizable UI composite for the chat experience.
  *
- * @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.
+ * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
  *
- * @private
+ * @public
  */
-const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.features, unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
-        return 'unsupportedEnvironment';
-    }
-    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 (_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';
+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()))))));
 };
-/** @private */
-const IsCallEndedPage = (
+
+// Copyright (c) Microsoft Corporation.
+const CallAdapterContext = React.createContext(undefined);
 /**
- * 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>
+ * @private
  */
-page) => END_CALL_PAGES.includes(page);
+const CallAdapterProvider = (props) => {
+    const { adapter } = props;
+    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
+};
 /**
- * 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 };
-            }
-        });
+const useAdapter = () => {
+    const adapter = React.useContext(CallAdapterContext);
+    if (!adapter) {
+        throw 'Cannot find adapter please initialize before usage.';
     }
-    return newOptions;
+    return adapter;
 };
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/** @private */
+const containerDivStyles = { position: 'relative', width: '100%', height: '100%' };
+
+// Copyright (c) Microsoft Corporation.
 /**
- * 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;
+const useAdaptedSelector = (selector, selectorProps) => {
+    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
 };
-/* @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, do nothing and log out error
  * @private
  */
-const getDevicePermissionState = (setVideoState, setAudioState) => {
-    navigator.permissions
-        .query({ name: 'camera' })
-        .then((result) => {
-        setVideoState(result.state);
-    })
-        .catch(() => {
-        setVideoState('unsupported');
-    });
-    navigator.permissions
-        .query({ name: 'microphone' })
-        .then((result) => {
-        setAudioState(result.state);
-    })
-        .catch(() => {
-        setAudioState('unsupported');
+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;
 };
-/* @conditional-compile-remove(unsupported-browser) */
-const isUnsupportedEnvironment = (features, environmentInfo, unsupportedBrowserVersionOptedIn) => {
-    return !!((features === null || features === void 0 ? void 0 : features.unsupportedEnvironment) &&
-        ((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));
+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.
@@ -20603,6 +20627,9 @@ class AzureCommunicationCallAdapter {
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(rooms) */ options }) => __awaiter$4(void 0, void 0, void 0, function* () {
+    if (!isValidIdentifier(userId)) {
+        throw new Error('Invalid identifier. Please provide valid identifier object.');
+    }
     const callClient = createStatefulCallClient({
         userId,
         /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId