@azure/communication-react 1.5.2-alpha-202301190014.0 → 1.6.0

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
 import { PartialTheme, Theme } from '@fluentui/react';
-import { CallControlDisplayType } from '../CallComposite';
 import { CallWithChatAdapter } from './adapter/CallWithChatAdapter';
 import { BaseCompositeProps } from '../common/BaseComposite';
 import { CallWithChatCompositeIcons } from '../common/icons';
-import { FileSharingOptions } from '../ChatComposite';
-import { CustomCallWithChatControlButtonCallback } from './CustomButton';
-import { DeviceCheckOptions } from '../CallComposite/CallComposite';
+import { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';
 /**
  * Props required for the {@link CallWithChatComposite}
  *
@@ -36,146 +33,29 @@ export interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithC
     options?: CallWithChatCompositeOptions;
 }
 /**
- * Optional features of the {@link CallWithChatComposite}.
+ * Customization options for the control bar in calling with chat experience.
  *
  * @public
  */
-export declare type CallWithChatCompositeOptions = {
-    /**
-     * Call control options to change what buttons show on the call-with-chat composite control bar.
-     * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.
-     */
-    callControls?: boolean | CallWithChatControlOptions;
-    /**
-     * Properties for configuring the File Sharing feature.
-     * If undefined, file sharing feature will be disabled.
-     * @beta
-     */
-    fileSharing?: FileSharingOptions;
-    /**
-     * Device permissions check options for your call.
-     * Here you can choose what device permissions you prompt the user for,
-     * as well as what device permissions must be accepted before starting a call.
-     */
-    deviceChecks?: DeviceCheckOptions;
-    /**
-     * Callback you may provide to supply users with further steps to troubleshoot why they have been
-     * unable to grant your site the required permissions for the call.
-     *
-     * @example
-     * ```ts
-     * onPermissionsTroubleshootingClick: () =>
-     *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');
-     * ```
-     *
-     * @remarks
-     * if this is not supplied, the composite will not show a 'further troubleshooting' link.
-     */
-    onPermissionsTroubleshootingClick?: (permissionsState: {
-        camera: PermissionState;
-        microphone: PermissionState;
-    }) => void;
+export interface CallWithChatControlOptions extends CommonCallControlOptions {
     /**
-     * Optional callback to supply users with further troubleshooting steps for network issues
-     * experienced when connecting to a call.
-     *
-     * @example
-     * ```ts
-     * onNetworkingTroubleShootingClick?: () =>
-     *  window.open('https://contoso.com/network-troubleshooting', '_blank');
-     * ```
-     *
-     * @remarks
-     * if this is not supplied, the composite will not show a 'network troubleshooting' link.
-     */
-    onNetworkingTroubleShootingClick?: () => void;
-    /**
-     * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.
-     *
-     * @example
-     * ```ts
-     * onBrowserTroubleShootingClick?: () =>
-     *  window.open('https://contoso.com/browser-troubleshooting', '_blank');
-     * ```
-     *
-     * @remarks
-     * if this is not supplied, the composite will not show a unsupported browser page.
+     * Show or hide the chat button in the call-with-chat composite control bar.
+     * @defaultValue true
      */
-    onEnvironmentInfoTroubleshootingClick?: () => void;
-};
+    chatButton?: boolean;
+}
 /**
- * {@link CallWithChatComposite} Call controls to show or hide buttons on the calling control bar.
+ * Optional features of the {@link CallWithChatComposite}.
  *
  * @public
  */
-export interface CallWithChatControlOptions {
-    /**
-     * {@link CallControlDisplayType} to change how the call controls are displayed.
-     * `'compact'` display type will decreases the size of buttons and hide the labels.
-     *
-     * @remarks
-     * If the composite `formFactor` is set to `'mobile'`, the control bar will always use compact view.
-     *
-     * @defaultValue 'default'
-     */
-    displayType?: CallControlDisplayType;
-    /**
-     * Show or Hide Microphone button during a call.
-     * @defaultValue true
-     */
-    microphoneButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show or Hide Camera Button during a call
-     * @defaultValue true
-     */
-    cameraButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show, Hide or Disable the screen share button during a call.
-     * @defaultValue true
-     */
-    screenShareButton?: boolean | {
-        disabled: boolean;
-    };
-    /**
-     * Show or Hide EndCall button during a call.
-     * @defaultValue true
-     */
-    endCallButton?: boolean;
-    /**
-     * Show or hide the chat button in the call-with-chat composite control bar.
-     * @defaultValue true
-     */
-    chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Show or hide the people button in the call-with-chat composite control bar.
-     * @defaultValue true
-     */
-    peopleButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ {
-        disabled: boolean;
-    };
-    /**
-     * Inject custom buttons in the call controls.
-     *
-     * @beta
-     */
-    onFetchCustomButtonProps?: CustomCallWithChatControlButtonCallback[];
-    /**
-     * Show or hide the more button in the call-with-chat control bar.
-     */
-    moreButton?: boolean;
+export declare type CallWithChatCompositeOptions = {
     /**
-     * Show or hide the hold button in the bottom sheet drawer
+     * Call control options to change what buttons show on the call-with-chat composite control bar.
+     * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.
      */
-    holdButton?: boolean | {
-        disabled: boolean;
-    };
-}
+    callControls?: boolean | CallWithChatControlOptions;
+};
 /**
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.
  *

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js

@@ -1,26 +1,21 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
-import { LayerHost, mergeStyles, Stack } from '@fluentui/react';
-import { CallComposite } from '../CallComposite';
-import { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';
-import { CallWithChatControlBar } from './CallWithChatControlBar';
-import { callCompositeContainerStyles, compositeOuterContainerStyles, controlBarContainerStyles } from './styles/CallWithChatCompositeStyles';
+import { mergeStyles, Stack } from '@fluentui/react';
+import { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';
 import { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';
 import { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';
+import { ChatComposite } from '../ChatComposite';
 import { BaseProvider } from '../common/BaseComposite';
-import { ChatAdapterProvider } from '../ChatComposite/adapter/ChatAdapterProvider';
-import { PreparedMoreDrawer } from './PreparedMoreDrawer';
-import { _useContainerHeight, _useContainerWidth } from "../../../../react-components/src";
+import { useTheme } from "../../../../react-components/src";
 import { useId } from '@fluentui/react-hooks';
-import { CallWithChatPane } from './CallWithChatPane';
 import { containerDivStyles } from '../common/ContainerRectProps';
-import { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';
-/* @conditional-compile-remove(PSTN-calls) */
-import { SendDtmfDialpad } from '../common/SendDtmfDialpad';
-/* @conditional-compile-remove(PSTN-calls) */
 import { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';
-import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
+import { CallCompositeInner } from '../CallComposite/CallComposite';
+import { ChatButtonWithUnreadMessagesBadge } from './ChatButton/ChatButtonWithUnreadMessagesBadge';
+import { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallControlBar';
+import { isDisabled } from '../CallComposite/utils';
+import { SidePaneHeader } from '../common/SidePaneHeader';
 const CallWithChatScreen = (props) => {
     const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
     const mobileView = formFactor === 'mobile';
@@ -30,10 +25,8 @@ const CallWithChatScreen = (props) => {
     const callAdapter = useMemo(() => new CallWithChatBackedCallAdapter(callWithChatAdapter), [callWithChatAdapter]);
     const [currentCallState, setCurrentCallState] = useState();
     const [currentPage, setCurrentPage] = useState();
-    const [activePane, setActivePane] = useState('none');
+    const [isChatOpen, setIsChatOpen] = useState(false);
     const containerRef = useRef(null);
-    const containerWidth = _useContainerWidth(containerRef);
-    const containerHeight = _useContainerHeight(containerRef);
     useEffect(() => {
         const updateCallWithChatPage = (newState) => {
             var _a;
@@ -46,155 +39,94 @@ const CallWithChatScreen = (props) => {
             callWithChatAdapter.offStateChange(updateCallWithChatPage);
         };
     }, [callWithChatAdapter]);
-    const closePane = useCallback(() => {
-        setActivePane('none');
-    }, [setActivePane]);
     const chatProps = useMemo(() => {
         return {
             adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)
         };
     }, [callWithChatAdapter]);
-    const modalLayerHostId = useId('modalLayerhost');
-    const isInLobbyOrConnecting = currentPage === 'lobby';
-    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-    const isInLocalHold = currentPage === 'hold';
-    const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
-    const showControlBar = isInLobbyOrConnecting || hasJoinedCall;
-    const isMobileWithActivePane = mobileView && hasJoinedCall && activePane !== 'none';
     /** Constant setting of id for the parent stack of the composite */
     const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');
-    const toggleChat = useCallback(() => {
-        if (activePane === 'chat' || !hasJoinedCall) {
-            setActivePane('none');
-        }
-        else {
-            setActivePane('chat');
-            // timeout is required to give the window time to render the sendbox so we have something to send focus to.
-            // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.
-            const chatFocusTimeout = setInterval(() => {
-                const callWithChatCompositeRootDiv = document.querySelector(`[id="${compositeParentDivId}"]`);
-                const sendbox = callWithChatCompositeRootDiv === null || callWithChatCompositeRootDiv === void 0 ? void 0 : callWithChatCompositeRootDiv.querySelector(`[id="sendbox"]`);
-                if (sendbox !== null) {
-                    sendbox.focus();
-                    clearInterval(chatFocusTimeout);
-                }
-            }, 3);
-            setTimeout(() => {
+    const closeChat = useCallback(() => {
+        setIsChatOpen(false);
+    }, []);
+    const openChat = useCallback(() => {
+        setIsChatOpen(true);
+        // timeout is required to give the window time to render the sendbox so we have something to send focus to.
+        // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.
+        const chatFocusTimeout = setInterval(() => {
+            const callWithChatCompositeRootDiv = document.querySelector(`[id="${compositeParentDivId}"]`);
+            const sendbox = callWithChatCompositeRootDiv === null || callWithChatCompositeRootDiv === void 0 ? void 0 : callWithChatCompositeRootDiv.querySelector(`[id="sendbox"]`);
+            if (sendbox !== null) {
+                sendbox.focus();
                 clearInterval(chatFocusTimeout);
-            }, 300);
-        }
-    }, [activePane, setActivePane, compositeParentDivId, hasJoinedCall]);
-    const togglePeople = useCallback(() => {
-        if (activePane === 'people' || !hasJoinedCall) {
-            setActivePane('none');
-        }
-        else {
-            setActivePane('people');
-        }
-    }, [activePane, setActivePane, hasJoinedCall]);
-    const selectChat = useCallback(() => {
-        if (hasJoinedCall) {
-            setActivePane('chat');
-        }
-    }, [setActivePane, hasJoinedCall]);
-    const selectPeople = useCallback(() => {
-        if (hasJoinedCall) {
-            setActivePane('people');
+            }
+        }, 3);
+        setTimeout(() => {
+            clearInterval(chatFocusTimeout);
+        }, 300);
+    }, [compositeParentDivId]);
+    const isOnHold = isOnHoldTrampoline(currentPage);
+    useEffect(() => {
+        if (isOnHold) {
+            closeChat();
         }
-    }, [setActivePane, hasJoinedCall]);
-    const [showDrawer, setShowDrawer] = useState(false);
-    const onMoreButtonClicked = useCallback(() => {
-        closePane();
-        setShowDrawer(true);
-    }, [closePane]);
-    const closeDrawer = useCallback(() => {
-        setShowDrawer(false);
-    }, []);
-    const onMoreDrawerPeopleClicked = useCallback(() => {
-        setShowDrawer(false);
-        togglePeople();
-    }, [togglePeople]);
-    // On mobile, when there is an active call and some side pane is active,
-    // we hide the call composite via CSS to show only the pane.
-    // We only set `display` to `none` instead of unmounting the call composite component tree
-    // to avoid the performance cost of rerendering video streams when we later show the composite again.
-    const callCompositeContainerCSS = useMemo(() => {
-        return { display: isMobileWithActivePane ? 'none' : 'flex' };
-    }, [isMobileWithActivePane]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onDismissDtmfDialpad = () => {
-        setShowDtmfDialpad(false);
-    };
-    /* @conditional-compile-remove(PSTN-calls) */
-    const onClickShowDialpad = () => {
-        setShowDtmfDialpad(true);
-    };
-    /* @conditional-compile-remove(PSTN-calls) */
+    }, [closeChat, isOnHold]);
+    const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState !== null && currentCallState !== void 0 ? currentCallState : 'None'));
+    const toggleChat = useCallback(() => {
+        isChatOpen || !hasJoinedCall ? closeChat() : openChat();
+    }, [closeChat, hasJoinedCall, isChatOpen, openChat]);
     const callWithChatStrings = useCallWithChatCompositeStrings();
-    /* @conditional-compile-remove(PSTN-calls) */
-    const dialpadStrings = useMemo(() => ({
-        dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,
-        dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,
-        placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText
+    const chatButtonStrings = useMemo(() => ({
+        label: callWithChatStrings.chatButtonLabel,
+        tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,
+        tooltipOnContent: callWithChatStrings.chatButtonTooltipClose
     }), [callWithChatStrings]);
-    /* @conditional-compile-remove(PSTN-calls) */
-    const alternateCallerId = callAdapter.getState().alternateCallerId;
+    const theme = useTheme();
+    const commonButtonStyles = useMemo(() => !mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [mobileView, theme]);
+    const showChatButton = checkShowChatButton(props.callControls);
+    const chatButtonDisabled = showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);
+    const chatTabHeaderProps = useMemo(() => mobileView && showChatButton ? {
+        onClick: toggleChat,
+        disabled: chatButtonDisabled
+    } : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);
+    const customChatButton = useCallback((args) => ({
+        placement: mobileView ? 'primary' : 'secondary',
+        onRenderButton: () => React.createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: chatProps.adapter, isChatPaneVisible: isChatOpen, checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel })
+    }), [callWithChatStrings.chatButtonNewMessageNotificationLabel, chatButtonStrings, chatProps.adapter, commonButtonStyles, isChatOpen, chatButtonDisabled, mobileView, toggleChat]);
+    const callControlOptionsFromProps = useMemo(() => (Object.assign({}, (typeof props.callControls === 'object' ? props.callControls : {}))), [props.callControls]);
+    const injectedCustomButtonsFromProps = useMemo(() => {
+        return [];
+    }, [callControlOptionsFromProps]);
     const callCompositeOptions = useMemo(() => ({
-        callControls: false,
-        /* @conditional-compile-remove(call-readiness) */
-        deviceChecks: props.deviceChecks,
-        /* @conditional-compile-remove(call-readiness) */
-        onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,
-        /* @conditional-compile-remove(call-readiness) */
-        onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,
-        /* @conditional-compile-remove(unsupported-browser) */
-        onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick
-    }), [
-        /* @conditional-compile-remove(call-readiness) */
-        props.deviceChecks,
-        /* @conditional-compile-remove(unsupported-browser) */
-        props.onEnvironmentInfoTroubleshootingClick,
-        /* @conditional-compile-remove(call-readiness) */
-        props.onNetworkingTroubleShootingClick,
-        /* @conditional-compile-remove(call-readiness) */
-        props.onPermissionsTroubleshootingClick
-    ]);
-    return (React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles) },
+        callControls: props.callControls === false ? false : Object.assign(Object.assign({}, callControlOptionsFromProps), { onFetchCustomButtonProps: [...(showChatButton ? [customChatButton] : []),
+                ...injectedCustomButtonsFromProps], legacyControlBarExperience: false })
+    }), [props.callControls, callControlOptionsFromProps, showChatButton, customChatButton, injectedCustomButtonsFromProps]);
+    const onRenderChatContent = useCallback(() => React.createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
+            topic: false
+        }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), [chatProps, props.onFetchAvatarPersonaData, theme]);
+    const sidePaneHeaderRenderer = useCallback(() => { var _a; return React.createElement(SidePaneHeader, { headingText: callWithChatStrings.chatPaneTitle, onClose: closeChat, dismissSidePaneButtonAriaLabel: (_a = callWithChatStrings.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : '', mobileView: mobileView }); }, [callWithChatStrings.chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]);
+    const sidePaneContentRenderer = useMemo(() => hasJoinedCall ? onRenderChatContent : undefined, [hasJoinedCall, onRenderChatContent]);
+    const sidePaneRenderer = useMemo(() => ({
+        contentRenderer: sidePaneContentRenderer,
+        headerRenderer: sidePaneHeaderRenderer,
+        id: 'chat'
+    }), [sidePaneContentRenderer, sidePaneHeaderRenderer]);
+    const overrideSidePaneProps = useMemo(() => ({
+        renderer: sidePaneRenderer,
+        isActive: isChatOpen,
+        persistRenderingWhenClosed: true
+    }), [isChatOpen, sidePaneRenderer]);
+    const onSidePaneIdChange = useCallback(sidePaneId => {
+        // If the pane is switched to something other than chat, removing rendering chat.
+        if (sidePaneId && sidePaneId !== 'chat') {
+            closeChat();
+        }
+    }, [closeChat]);
+    return React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles) },
         React.createElement(Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
             React.createElement(Stack, { horizontal: true, grow: true },
-                React.createElement(Stack.Item, { grow: true, styles: callCompositeContainerStyles, 
-                    // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.
-                    style: callCompositeContainerCSS },
-                    React.createElement(CallComposite, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme }))),
-                chatProps.adapter && callAdapter && hasJoinedCall && (React.createElement(CallWithChatPane, { chatCompositeProps: chatProps, inviteLink: props.joinInvitationURL, onClose: closePane, chatAdapter: chatProps.adapter, callAdapter: callAdapter, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, onChatButtonClicked: showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined, onPeopleButtonClicked: showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined, modalLayerHostId: modalLayerHostId, mobileView: mobileView, activePane: activePane, 
-                    /* @conditional-compile-remove(file-sharing) */
-                    fileSharing: props.fileSharing, rtl: props.rtl, callControls: typeof props.callControls !== 'boolean' ? props.callControls : undefined }))),
-            showControlBar && !isMobileWithActivePane && (React.createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
-                React.createElement(Stack.Item, { styles: controlBarContainerStyles },
-                    React.createElement(CallWithChatControlBar, { callAdapter: callAdapter, chatAdapter: chatProps.adapter, chatButtonChecked: activePane === 'chat', onChatButtonClicked: toggleChat, peopleButtonChecked: activePane === 'people', onPeopleButtonClicked: togglePeople, onMoreButtonClicked: onMoreButtonClicked, mobileView: mobileView, disableButtonsForLobbyPage: isInLobbyOrConnecting, 
-                        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                        disableButtonsForHoldScreen: isInLocalHold, callControls: props.callControls, containerHeight: containerHeight, containerWidth: containerWidth, 
-                        /* @conditional-compile-remove(PSTN-calls) */
-                        onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined })))),
-            showControlBar && showDrawer && (React.createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
-                React.createElement(CallAdapterProvider, { adapter: callAdapter },
-                    React.createElement(Stack, { styles: drawerContainerStyles() },
-                        React.createElement(PreparedMoreDrawer, { callControls: props.callControls, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
-                            /* @conditional-compile-remove(PSTN-calls) */
-                            onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, 
-                            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-                            disableButtonsForHoldScreen: isInLocalHold }))))),
-            /* @conditional-compile-remove(PSTN-calls) */
-            showControlBar && showDtmfDialpad && (React.createElement(ChatAdapterProvider, { adapter: chatProps.adapter },
-                React.createElement(CallAdapterProvider, { adapter: callAdapter },
-                    React.createElement(Stack, { styles: drawerContainerStyles() },
-                        React.createElement(SendDtmfDialpad, { isMobile: mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))))),
-            // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane
-            // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging
-            // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.
-            mobileView && React.createElement(LayerHost, { id: modalLayerHostId, className: mergeStyles(modalLayerHostStyle) }))));
+                React.createElement(Stack.Item, { grow: true, styles: callCompositeContainerStyles(mobileView) },
+                    React.createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps }))))));
 };
 /**
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.
@@ -203,21 +135,13 @@ const CallWithChatScreen = (props) => {
  */
 export const CallWithChatComposite = (props) => {
     const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;
-    return (React.createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons },
-        React.createElement(CallWithChatScreen, Object.assign({}, props, { 
-            /* @conditional-compile-remove(call-readiness) */
-            deviceChecks: options === null || options === void 0 ? void 0 : options.deviceChecks, callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, 
-            /* @conditional-compile-remove(file-sharing) */
-            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing }))));
+    return React.createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons },
+        React.createElement(CallWithChatScreen, Object.assign({}, props, { callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme })));
 };
 const hasJoinedCallFn = (page, callStatus) => {
-    /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
-    return ((page === 'call' &&
-        (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||
-        (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting')));
     return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');
 };
-const showShowChatTabHeaderButton = (callControls) => {
+const checkShowChatButton = (callControls) => {
     if (callControls === undefined || callControls === true) {
         return true;
     }
@@ -226,13 +150,10 @@ const showShowChatTabHeaderButton = (callControls) => {
     }
     return callControls.chatButton !== false;
 };
-const showShowPeopleTabHeaderButton = (callControls) => {
-    if (callControls === undefined || callControls === true) {
-        return true;
-    }
-    if (callControls === false) {
-        return false;
-    }
-    return callControls.peopleButton !== false;
+const checkChatButtonIsDisabled = (callControls) => {
+    return typeof callControls === 'object' && isDisabled(callControls === null || callControls === void 0 ? void 0 : callControls.chatButton);
+};
+const isOnHoldTrampoline = (page) => {
+    return false;
 };
 //# sourceMappingURL=CallWithChatComposite.js.map