@azure/communication-react 1.5.1-alpha-202305030013 → 1.5.1-alpha-202305040013

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

@@ -1,47 +1,32 @@
 // 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 { CommonCallControlBar } from '../common/ControlBar/CommonCallControlBar';
-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 '../common/Drawer/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';
-/* @conditional-compile-remove(video-background-effects) */
-import { VideoEffectsPane } from '../common/VideoEffectsPane';
+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';
-    /* @conditional-compile-remove(video-background-effects) */
-    const [showVideoEffectsPane, setVideoEffectsPane] = useState(false);
-    /* @conditional-compile-remove(video-background-effects) */
-    const setShowVideoEffectsPane = useCallback((showVideoEffectsOptions) => {
-        setVideoEffectsPane(showVideoEffectsOptions);
-    }, [setVideoEffectsPane]);
     if (!callWithChatAdapter) {
         throw new Error('CallWithChatAdapter is undefined');
     }
     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;
@@ -54,105 +39,80 @@ 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(() => {
-                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');
-        }
-    }, [setActivePane, hasJoinedCall]);
-    const [showDrawer, setShowDrawer] = useState(false);
-    const onMoreButtonClicked = useCallback(() => {
-        closePane();
-        setShowDrawer(true);
-    }, [closePane]);
-    const closeDrawer = useCallback(() => {
-        setShowDrawer(false);
+    const closeChat = useCallback(() => {
+        setIsChatOpen(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) */
+    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);
+            }
+        }, 3);
+        setTimeout(() => {
+            clearInterval(chatFocusTimeout);
+        }, 300);
+    }, [compositeParentDivId]);
+    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;
-    /* @conditional-compile-remove(close-captions) */
-    const isTeamsCall = callAdapter.getState().isTeamsCall;
+    const theme = useTheme();
+    const commonButtonStyles = useMemo(() => (!mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [mobileView, theme]);
+    const showChatButton = checkShowChatButton(props.callControls);
+    const chatButtonDisabled = showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall);
+    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(() => {
+        var _a;
+        /* @conditional-compile-remove(control-bar-button-injection) */
+        return [...((_a = callControlOptionsFromProps.onFetchCustomButtonProps) !== null && _a !== void 0 ? _a : [])];
+        return [];
+    }, [callControlOptionsFromProps]);
     const callCompositeOptions = useMemo(() => ({
-        callControls: false,
+        callControls: props.callControls === false
+            ? false
+            : Object.assign(Object.assign({}, callControlOptionsFromProps), { onFetchCustomButtonProps: [
+                    ...(showChatButton ? [customChatButton] : []),
+                    /* @conditional-compile-remove(control-bar-button-injection) */
+                    ...injectedCustomButtonsFromProps
+                ], legacyControlBarExperience: false }),
         /* @conditional-compile-remove(call-readiness) */
         deviceChecks: props.deviceChecks,
         /* @conditional-compile-remove(call-readiness) */
@@ -162,6 +122,11 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(unsupported-browser) */
         onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick
     }), [
+        props.callControls,
+        callControlOptionsFromProps,
+        showChatButton,
+        customChatButton,
+        injectedCustomButtonsFromProps,
         /* @conditional-compile-remove(call-readiness) */
         props.deviceChecks,
         /* @conditional-compile-remove(unsupported-browser) */
@@ -171,49 +136,44 @@ const CallWithChatScreen = (props) => {
         /* @conditional-compile-remove(call-readiness) */
         props.onPermissionsTroubleshootingClick
     ]);
+    const onRenderChatContent = useCallback(() => (React.createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
+            topic: false,
+            /* @conditional-compile-remove(chat-composite-participant-pane) */
+            participantPane: false,
+            /* @conditional-compile-remove(file-sharing) */
+            fileSharing: props.fileSharing
+        }, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }))), [
+        chatProps,
+        /* @conditional-compile-remove(file-sharing) */ props.fileSharing,
+        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(mobileView), 
-                    // 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 }))),
-                /* @conditional-compile-remove(video-background-effects) */
-                React.createElement(CallAdapterProvider, { adapter: callAdapter },
-                    React.createElement(VideoEffectsPane, { showVideoEffectsOptions: showVideoEffectsPane, setshowVideoEffectsOptions: setShowVideoEffectsPane })),
-                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(CommonCallControlBar, { 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, 
-                        /* @conditional-compile-remove(close-captions) */
-                        isCaptionsSupported: isTeamsCall && hasJoinedCall, 
-                        /* @conditional-compile-remove(video-background-effects) */
-                        onShowVideoEffectsPicker: setShowVideoEffectsPane, rtl: props.rtl })))),
-            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(close-captions) */
-                            isCaptionsSupported: isTeamsCall && hasJoinedCall }))))),
-            /* @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.
@@ -236,7 +196,7 @@ const hasJoinedCallFn = (page, callStatus) => {
         (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;
     }
@@ -245,13 +205,7 @@ 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);
 };
 //# sourceMappingURL=CallWithChatComposite.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { LayerHost, mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\nimport { CallComposite, CallCompositePage } from '../CallComposite';\nimport { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { CommonCallControlBar } from '../common/ControlBar/CommonCallControlBar';\nimport { CallState } from '@azure/communication-calling';\nimport {\n  callCompositeContainerStyles,\n  compositeOuterContainerStyles,\n  controlBarContainerStyles\n} from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatCompositeProps } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { ChatAdapterProvider } from '../ChatComposite/adapter/ChatAdapterProvider';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { PreparedMoreDrawer } from '../common/Drawer/PreparedMoreDrawer';\nimport { ParticipantMenuItemsCallback, _useContainerHeight, _useContainerWidth } from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { CallWithChatPane, CallWithChatPaneOption } from './CallWithChatPane';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileSharingOptions } from '../ChatComposite';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { SendDtmfDialpad } from '../common/SendDtmfDialpad';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\n/* @conditional-compile-remove(video-background-effects) */\nimport { VideoEffectsPane } from '../common/VideoEffectsPane';\nimport { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n  adapter: CallWithChatAdapter;\n  /**\n   * Fluent theme for the composite.\n   *\n   * Defaults to a light theme if undefined.\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n   */\n  joinInvitationURL?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n   */\n  options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Customization options for the control bar in calling with chat experience.\n *\n * @public\n */\nexport interface CallWithChatControlOptions extends CommonCallControlOptions {\n  /**\n   * Show or hide the chat button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n  /**\n   * Call control options to change what buttons show on the call-with-chat composite control bar.\n   * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n   */\n  callControls?: boolean | CallWithChatControlOptions;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  fileSharing?: FileSharingOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\ntype CallWithChatScreenProps = {\n  callWithChatAdapter: CallWithChatAdapter;\n  fluentTheme?: PartialTheme | Theme;\n  formFactor?: 'desktop' | 'mobile';\n  joinInvitationURL?: string;\n  callControls?: boolean | CallWithChatControlOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /* @conditional-compile-remove(file-sharing) */\n  fileSharing?: FileSharingOptions;\n  rtl?: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n  const mobileView = formFactor === 'mobile';\n  /* @conditional-compile-remove(video-background-effects) */\n  const [showVideoEffectsPane, setVideoEffectsPane] = useState(false);\n\n  /* @conditional-compile-remove(video-background-effects) */\n  const setShowVideoEffectsPane = useCallback(\n    (showVideoEffectsOptions: boolean): void => {\n      setVideoEffectsPane(showVideoEffectsOptions);\n    },\n    [setVideoEffectsPane]\n  );\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n\n  const callAdapter: CallAdapter = useMemo(\n    () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n    [callWithChatAdapter]\n  );\n\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [activePane, setActivePane] = useState<CallWithChatPaneOption>('none');\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerWidth = _useContainerWidth(containerRef);\n  const containerHeight = _useContainerHeight(containerRef);\n\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n\n  const closePane = useCallback(() => {\n    setActivePane('none');\n  }, [setActivePane]);\n\n  const chatProps: ChatCompositeProps = useMemo(() => {\n    return {\n      adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)\n    };\n  }, [callWithChatAdapter]);\n\n  const modalLayerHostId = useId('modalLayerhost');\n\n  const isInLobbyOrConnecting = currentPage === 'lobby';\n  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n  const isInLocalHold = currentPage === 'hold';\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const showControlBar = isInLobbyOrConnecting || hasJoinedCall;\n  const isMobileWithActivePane = mobileView && hasJoinedCall && activePane !== 'none';\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n  const toggleChat = useCallback(() => {\n    if (activePane === 'chat' || !hasJoinedCall) {\n      setActivePane('none');\n    } else {\n      setActivePane('chat');\n      // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n      // 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.\n      const chatFocusTimeout = setInterval(() => {\n        const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n        const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n        if (sendbox !== null) {\n          sendbox.focus();\n          clearInterval(chatFocusTimeout);\n        }\n      }, 3);\n      setTimeout(() => {\n        clearInterval(chatFocusTimeout);\n      }, 300);\n    }\n  }, [activePane, setActivePane, compositeParentDivId, hasJoinedCall]);\n\n  const togglePeople = useCallback(() => {\n    if (activePane === 'people' || !hasJoinedCall) {\n      setActivePane('none');\n    } else {\n      setActivePane('people');\n    }\n  }, [activePane, setActivePane, hasJoinedCall]);\n\n  const selectChat = useCallback(() => {\n    if (hasJoinedCall) {\n      setActivePane('chat');\n    }\n  }, [setActivePane, hasJoinedCall]);\n\n  const selectPeople = useCallback(() => {\n    if (hasJoinedCall) {\n      setActivePane('people');\n    }\n  }, [setActivePane, hasJoinedCall]);\n\n  const [showDrawer, setShowDrawer] = useState(false);\n  const onMoreButtonClicked = useCallback(() => {\n    closePane();\n    setShowDrawer(true);\n  }, [closePane]);\n  const closeDrawer = useCallback(() => {\n    setShowDrawer(false);\n  }, []);\n  const onMoreDrawerPeopleClicked = useCallback(() => {\n    setShowDrawer(false);\n    togglePeople();\n  }, [togglePeople]);\n\n  // On mobile, when there is an active call and some side pane is active,\n  // we hide the call composite via CSS to show only the pane.\n  // We only set `display` to `none` instead of unmounting the call composite component tree\n  // to avoid the performance cost of rerendering video streams when we later show the composite again.\n  const callCompositeContainerCSS = useMemo(() => {\n    return { display: isMobileWithActivePane ? 'none' : 'flex' };\n  }, [isMobileWithActivePane]);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const onDismissDtmfDialpad = (): void => {\n    setShowDtmfDialpad(false);\n  };\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const onClickShowDialpad = (): void => {\n    setShowDtmfDialpad(true);\n  };\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const dialpadStrings = useMemo(\n    () => ({\n      dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,\n      dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,\n      placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText\n    }),\n    [callWithChatStrings]\n  );\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  const alternateCallerId = callAdapter.getState().alternateCallerId;\n  /* @conditional-compile-remove(close-captions) */\n  const isTeamsCall = callAdapter.getState().isTeamsCall;\n\n  const callCompositeOptions: CallCompositeOptions = useMemo(\n    () => ({\n      callControls: false,\n      /* @conditional-compile-remove(call-readiness) */\n      deviceChecks: props.deviceChecks,\n      /* @conditional-compile-remove(call-readiness) */\n      onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n      /* @conditional-compile-remove(unsupported-browser) */\n      onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick\n    }),\n    [\n      /* @conditional-compile-remove(call-readiness) */\n      props.deviceChecks,\n      /* @conditional-compile-remove(unsupported-browser) */\n      props.onEnvironmentInfoTroubleshootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onPermissionsTroubleshootingClick\n    ]\n  );\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n        <Stack horizontal grow>\n          <Stack.Item\n            grow\n            styles={callCompositeContainerStyles(mobileView)}\n            // Perf: Instead of removing the video gallery from DOM, we hide it to prevent re-renders.\n            style={callCompositeContainerCSS}\n          >\n            <CallComposite\n              {...props}\n              formFactor={formFactor}\n              options={callCompositeOptions}\n              adapter={callAdapter}\n              fluentTheme={fluentTheme}\n            />\n          </Stack.Item>\n          {\n            /* @conditional-compile-remove(video-background-effects) */\n            <CallAdapterProvider adapter={callAdapter}>\n              <VideoEffectsPane\n                showVideoEffectsOptions={showVideoEffectsPane}\n                setshowVideoEffectsOptions={setShowVideoEffectsPane}\n              />\n            </CallAdapterProvider>\n          }\n          {chatProps.adapter && callAdapter && hasJoinedCall && (\n            <CallWithChatPane\n              chatCompositeProps={chatProps}\n              inviteLink={props.joinInvitationURL}\n              onClose={closePane}\n              chatAdapter={chatProps.adapter}\n              callAdapter={callAdapter}\n              onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n              onFetchParticipantMenuItems={props.onFetchParticipantMenuItems}\n              onChatButtonClicked={showShowChatTabHeaderButton(props.callControls) ? selectChat : undefined}\n              onPeopleButtonClicked={showShowPeopleTabHeaderButton(props.callControls) ? selectPeople : undefined}\n              modalLayerHostId={modalLayerHostId}\n              mobileView={mobileView}\n              activePane={activePane}\n              /* @conditional-compile-remove(file-sharing) */\n              fileSharing={props.fileSharing}\n              rtl={props.rtl}\n              callControls={typeof props.callControls !== 'boolean' ? props.callControls : undefined}\n            />\n          )}\n        </Stack>\n        {showControlBar && !isMobileWithActivePane && (\n          <ChatAdapterProvider adapter={chatProps.adapter}>\n            <Stack.Item styles={controlBarContainerStyles}>\n              <CommonCallControlBar\n                callAdapter={callAdapter}\n                chatAdapter={chatProps.adapter}\n                chatButtonChecked={activePane === 'chat'}\n                onChatButtonClicked={toggleChat}\n                peopleButtonChecked={activePane === 'people'}\n                onPeopleButtonClicked={togglePeople}\n                onMoreButtonClicked={onMoreButtonClicked}\n                mobileView={mobileView}\n                disableButtonsForLobbyPage={isInLobbyOrConnecting}\n                /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                disableButtonsForHoldScreen={isInLocalHold}\n                callControls={props.callControls}\n                containerHeight={containerHeight}\n                containerWidth={containerWidth}\n                /* @conditional-compile-remove(PSTN-calls) */\n                onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n                /* @conditional-compile-remove(close-captions) */\n                isCaptionsSupported={isTeamsCall && hasJoinedCall}\n                /* @conditional-compile-remove(video-background-effects) */\n                onShowVideoEffectsPicker={setShowVideoEffectsPane}\n                rtl={props.rtl}\n              />\n            </Stack.Item>\n          </ChatAdapterProvider>\n        )}\n        {showControlBar && showDrawer && (\n          <ChatAdapterProvider adapter={chatProps.adapter}>\n            <CallAdapterProvider adapter={callAdapter}>\n              <Stack styles={drawerContainerStyles()}>\n                <PreparedMoreDrawer\n                  callControls={props.callControls}\n                  onLightDismiss={closeDrawer}\n                  onPeopleButtonClicked={onMoreDrawerPeopleClicked}\n                  /* @conditional-compile-remove(PSTN-calls) */\n                  onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n                  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n                  disableButtonsForHoldScreen={isInLocalHold}\n                  /* @conditional-compile-remove(close-captions) */\n                  isCaptionsSupported={isTeamsCall && hasJoinedCall}\n                />\n              </Stack>\n            </CallAdapterProvider>\n          </ChatAdapterProvider>\n        )}\n\n        {\n          /* @conditional-compile-remove(PSTN-calls) */\n          showControlBar && showDtmfDialpad && (\n            <ChatAdapterProvider adapter={chatProps.adapter}>\n              <CallAdapterProvider adapter={callAdapter}>\n                <Stack styles={drawerContainerStyles()}>\n                  <SendDtmfDialpad\n                    isMobile={mobileView}\n                    strings={dialpadStrings}\n                    showDialpad={showDtmfDialpad}\n                    onDismissDialpad={onDismissDtmfDialpad}\n                  />\n                </Stack>\n              </CallAdapterProvider>\n            </ChatAdapterProvider>\n          )\n        }\n        {\n          // This layer host is for ModalLocalAndRemotePIP in CallWithChatPane. This LayerHost cannot be inside the CallWithChatPane\n          // because when the CallWithChatPane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n          // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n          mobileView && <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n        }\n      </Stack>\n    </div>\n  );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n  const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n  return (\n    <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons}>\n      <CallWithChatScreen\n        {...props}\n        /* @conditional-compile-remove(call-readiness) */\n        deviceChecks={options?.deviceChecks}\n        callWithChatAdapter={adapter}\n        formFactor={formFactor}\n        callControls={options?.callControls}\n        joinInvitationURL={joinInvitationURL}\n        fluentTheme={fluentTheme}\n        /* @conditional-compile-remove(file-sharing) */\n        fileSharing={options?.fileSharing}\n      />\n    </BaseProvider>\n  );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return (\n    (page === 'call' &&\n      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n  );\n  return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');\n};\n\nconst showShowChatTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.chatButton !== false;\n};\n\nconst showShowPeopleTabHeaderButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.peopleButton !== false;\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\nimport { CallCompositePage } from '../CallComposite';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatComposite, ChatCompositeProps } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport {\n  ParticipantMenuItemsCallback,\n  _useContainerHeight,\n  _useContainerWidth,\n  useTheme\n} from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileSharingOptions } from '../ChatComposite';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport {\n  CommonCallControlOptions,\n  CustomCallControlButtonCallbackArgs,\n  _CommonCallControlOptions\n} from '../common/types/CommonCallControlOptions';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButton/ChatButtonWithUnreadMessagesBadge';\nimport { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallControlBar';\nimport { InjectedSidePaneProps } from '../CallComposite/components/SidePane/SidePaneProvider';\nimport { isDisabled } from '../CallComposite/utils';\nimport { CustomCallControlButtonCallback } from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { _CallControlOptions } from '../CallComposite/types/CallControlOptions';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n  adapter: CallWithChatAdapter;\n  /**\n   * Fluent theme for the composite.\n   *\n   * Defaults to a light theme if undefined.\n   */\n  fluentTheme?: PartialTheme | Theme;\n  /**\n   * Optimizes the composite form factor for either desktop or mobile.\n   * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n   * @defaultValue 'desktop'\n   */\n  formFactor?: 'desktop' | 'mobile';\n  /**\n   * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n   */\n  joinInvitationURL?: string;\n  /**\n   * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n   */\n  options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Customization options for the control bar in calling with chat experience.\n *\n * @public\n */\nexport interface CallWithChatControlOptions extends CommonCallControlOptions {\n  /**\n   * Show or hide the chat button in the call-with-chat composite control bar.\n   * @defaultValue true\n   */\n  chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n  /**\n   * Call control options to change what buttons show on the call-with-chat composite control bar.\n   * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n   */\n  callControls?: boolean | CallWithChatControlOptions;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  fileSharing?: FileSharingOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Device permissions check options for your call.\n   * Here you can choose what device permissions you prompt the user for,\n   * as well as what device permissions must be accepted before starting a call.\n   */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Callback you may provide to supply users with further steps to troubleshoot why they have been\n   * unable to grant your site the required permissions for the call.\n   *\n   * @example\n   * ```ts\n   * onPermissionsTroubleshootingClick: () =>\n   *  window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n   */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  /**\n   * Optional callback to supply users with further troubleshooting steps for network issues\n   * experienced when connecting to a call.\n   *\n   * @example\n   * ```ts\n   * onNetworkingTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/network-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n   */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  /**\n   * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n   *\n   * @example\n   * ```ts\n   * onBrowserTroubleShootingClick?: () =>\n   *  window.open('https://contoso.com/browser-troubleshooting', '_blank');\n   * ```\n   *\n   * @remarks\n   * if this is not supplied, the composite will not show a unsupported browser page.\n   */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\ntype CallWithChatScreenProps = {\n  callWithChatAdapter: CallWithChatAdapter;\n  fluentTheme?: PartialTheme | Theme;\n  formFactor?: 'desktop' | 'mobile';\n  joinInvitationURL?: string;\n  callControls?: boolean | CallWithChatControlOptions;\n  onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n  onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n  /* @conditional-compile-remove(file-sharing) */\n  fileSharing?: FileSharingOptions;\n  rtl?: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  deviceChecks?: DeviceCheckOptions;\n  /* @conditional-compile-remove(call-readiness) */\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  /* @conditional-compile-remove(call-readiness) */\n  onNetworkingTroubleShootingClick?: () => void;\n  /* @conditional-compile-remove(unsupported-browser) */\n  onEnvironmentInfoTroubleshootingClick?: () => void;\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n  const mobileView = formFactor === 'mobile';\n\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n\n  const callAdapter: CallAdapter = useMemo(\n    () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n    [callWithChatAdapter]\n  );\n\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [isChatOpen, setIsChatOpen] = useState(false);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n\n  const chatProps: ChatCompositeProps = useMemo(() => {\n    return {\n      adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)\n    };\n  }, [callWithChatAdapter]);\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n  const closeChat = useCallback(() => {\n    setIsChatOpen(false);\n  }, []);\n  const openChat = useCallback(() => {\n    setIsChatOpen(true);\n    // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n    // 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.\n    const chatFocusTimeout = setInterval(() => {\n      const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n      const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n      if (sendbox !== null) {\n        sendbox.focus();\n        clearInterval(chatFocusTimeout);\n      }\n    }, 3);\n    setTimeout(() => {\n      clearInterval(chatFocusTimeout);\n    }, 300);\n  }, [compositeParentDivId]);\n\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const toggleChat = useCallback(() => {\n    isChatOpen || !hasJoinedCall ? closeChat() : openChat();\n  }, [closeChat, hasJoinedCall, isChatOpen, openChat]);\n\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const chatButtonStrings = useMemo(\n    () => ({\n      label: callWithChatStrings.chatButtonLabel,\n      tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n      tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n    }),\n    [callWithChatStrings]\n  );\n  const theme = useTheme();\n  const commonButtonStyles = useMemo(\n    () => (!mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n    [mobileView, theme]\n  );\n\n  const showChatButton = checkShowChatButton(props.callControls);\n  const chatButtonDisabled = showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall);\n  const chatTabHeaderProps = useMemo(\n    () =>\n      mobileView && showChatButton\n        ? {\n            onClick: toggleChat,\n            disabled: chatButtonDisabled\n          }\n        : undefined,\n    [chatButtonDisabled, mobileView, toggleChat, showChatButton]\n  );\n\n  const customChatButton: CustomCallControlButtonCallback = useCallback(\n    (args: CustomCallControlButtonCallbackArgs) => ({\n      placement: mobileView ? 'primary' : 'secondary',\n      onRenderButton: () => (\n        <ChatButtonWithUnreadMessagesBadge\n          chatAdapter={chatProps.adapter}\n          isChatPaneVisible={isChatOpen}\n          checked={isChatOpen}\n          showLabel={args.displayType !== 'compact'}\n          onClick={toggleChat}\n          disabled={chatButtonDisabled}\n          strings={chatButtonStrings}\n          styles={commonButtonStyles}\n          newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n        />\n      )\n    }),\n    [\n      callWithChatStrings.chatButtonNewMessageNotificationLabel,\n      chatButtonStrings,\n      chatProps.adapter,\n      commonButtonStyles,\n      isChatOpen,\n      chatButtonDisabled,\n      mobileView,\n      toggleChat\n    ]\n  );\n\n  const callControlOptionsFromProps = useMemo(\n    () => ({\n      ...(typeof props.callControls === 'object' ? props.callControls : {})\n    }),\n    [props.callControls]\n  );\n\n  const injectedCustomButtonsFromProps = useMemo(() => {\n    /* @conditional-compile-remove(control-bar-button-injection) */\n    return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\n    return [];\n  }, [callControlOptionsFromProps]);\n\n  const callCompositeOptions: CallCompositeOptions = useMemo(\n    () => ({\n      callControls:\n        props.callControls === false\n          ? false\n          : ({\n              ...callControlOptionsFromProps,\n              onFetchCustomButtonProps: [\n                ...(showChatButton ? [customChatButton] : []),\n                /* @conditional-compile-remove(control-bar-button-injection) */\n                ...injectedCustomButtonsFromProps\n              ],\n              legacyControlBarExperience: false\n            } as _CallControlOptions),\n      /* @conditional-compile-remove(call-readiness) */\n      deviceChecks: props.deviceChecks,\n      /* @conditional-compile-remove(call-readiness) */\n      onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n      /* @conditional-compile-remove(unsupported-browser) */\n      onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick\n    }),\n    [\n      props.callControls,\n      callControlOptionsFromProps,\n      showChatButton,\n      customChatButton,\n      injectedCustomButtonsFromProps,\n      /* @conditional-compile-remove(call-readiness) */\n      props.deviceChecks,\n      /* @conditional-compile-remove(unsupported-browser) */\n      props.onEnvironmentInfoTroubleshootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onNetworkingTroubleShootingClick,\n      /* @conditional-compile-remove(call-readiness) */\n      props.onPermissionsTroubleshootingClick\n    ]\n  );\n\n  const onRenderChatContent = useCallback(\n    (): JSX.Element => (\n      <ChatComposite\n        {...chatProps}\n        fluentTheme={theme}\n        options={{\n          topic: false,\n          /* @conditional-compile-remove(chat-composite-participant-pane) */\n          participantPane: false,\n          /* @conditional-compile-remove(file-sharing) */\n          fileSharing: props.fileSharing\n        }}\n        onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n      />\n    ),\n    [\n      chatProps,\n      /* @conditional-compile-remove(file-sharing) */ props.fileSharing,\n      props.onFetchAvatarPersonaData,\n      theme\n    ]\n  );\n\n  const sidePaneHeaderRenderer = useCallback(\n    () => (\n      <SidePaneHeader\n        headingText={callWithChatStrings.chatPaneTitle}\n        onClose={closeChat}\n        dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}\n        mobileView={mobileView}\n      />\n    ),\n    [callWithChatStrings.chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]\n  );\n\n  const sidePaneContentRenderer = useMemo(\n    () => (hasJoinedCall ? onRenderChatContent : undefined),\n    [hasJoinedCall, onRenderChatContent]\n  );\n\n  const sidePaneRenderer = useMemo(\n    () => ({\n      contentRenderer: sidePaneContentRenderer,\n      headerRenderer: sidePaneHeaderRenderer,\n      id: 'chat'\n    }),\n    [sidePaneContentRenderer, sidePaneHeaderRenderer]\n  );\n\n  const overrideSidePaneProps: InjectedSidePaneProps = useMemo(\n    () => ({\n      renderer: sidePaneRenderer,\n      isActive: isChatOpen,\n      persistRenderingWhenClosed: true\n    }),\n    [isChatOpen, sidePaneRenderer]\n  );\n\n  const onSidePaneIdChange = useCallback(\n    (sidePaneId) => {\n      // If the pane is switched to something other than chat, removing rendering chat.\n      if (sidePaneId && sidePaneId !== 'chat') {\n        closeChat();\n      }\n    },\n    [closeChat]\n  );\n\n  return (\n    <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n      <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n        <Stack horizontal grow>\n          <Stack.Item grow styles={callCompositeContainerStyles(mobileView)}>\n            <CallCompositeInner\n              {...props}\n              formFactor={formFactor}\n              options={callCompositeOptions}\n              adapter={callAdapter}\n              fluentTheme={fluentTheme}\n              callInvitationUrl={props.joinInvitationURL}\n              overrideSidePane={overrideSidePaneProps}\n              onSidePaneIdChange={onSidePaneIdChange}\n              mobileChatTabHeader={chatTabHeaderProps}\n            />\n          </Stack.Item>\n        </Stack>\n      </Stack>\n    </div>\n  );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n  const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n  return (\n    <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons}>\n      <CallWithChatScreen\n        {...props}\n        /* @conditional-compile-remove(call-readiness) */\n        deviceChecks={options?.deviceChecks}\n        callWithChatAdapter={adapter}\n        formFactor={formFactor}\n        callControls={options?.callControls}\n        joinInvitationURL={joinInvitationURL}\n        fluentTheme={fluentTheme}\n        /* @conditional-compile-remove(file-sharing) */\n        fileSharing={options?.fileSharing}\n      />\n    </BaseProvider>\n  );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */\n  return (\n    (page === 'call' &&\n      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n  );\n  return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');\n};\n\nconst checkShowChatButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  if (callControls === undefined || callControls === true) {\n    return true;\n  }\n  if (callControls === false) {\n    return false;\n  }\n  return callControls.chatButton !== false;\n};\n\nconst checkChatButtonIsDisabled = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  return typeof callControls === 'object' && isDisabled(callControls?.chatButton);\n};\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButton.d.ts → ChatButton/ChatButton.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ControlBarButtonProps } from "../../../../react-components/src";
+import { ControlBarButtonProps } from "../../../../../react-components/src";
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButton.js → ChatButton/ChatButton.js}

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import React, { useMemo } from 'react';
-import { ControlBarButton, useTheme } from "../../../../react-components/src";
+import { ControlBarButton, useTheme } from "../../../../../react-components/src";
 import { concatStyleSets } from '@fluentui/react';
 /**
  * @private

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAiD,QAAQ,EAAE,4CAAmC;AACvH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA4B,EAAe,EAAE;IACtE,MAAM,OAAO,mBAAK,KAAK,EAAE,KAAK,CAAC,KAAK,IAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACzD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAC5C,GAAG,EAAE;;QACH,OAAA,eAAe,CACb;YACE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EACD,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CACnB,CAAA;KAAA,EACH,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAC3C,CAAC;IACF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,MAAM,EAAE,MAAM,IACd,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo } from 'react';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles, useTheme } from '@internal/react-components';\nimport { concatStyleSets } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const ChatButton = (props: ControlBarButtonProps): JSX.Element => {\n  const strings = { label: props.label, ...props.strings };\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(\n    () =>\n      concatStyleSets(\n        {\n          rootChecked: {\n            background: theme.palette.neutralLight\n          }\n        },\n        props.styles ?? {}\n      ),\n    [props.styles, theme.palette.neutralLight]\n  );\n  return (\n    <ControlBarButton\n      {...props}\n      labelKey={'chatButtonLabelKey'}\n      strings={strings}\n      onClick={props.onClick}\n      styles={styles}\n    />\n  );\n};\n\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButtonWithUnreadMessagesBadge.d.ts → ChatButton/ChatButtonWithUnreadMessagesBadge.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ControlBarButtonProps } from "../../../../react-components/src";
-import { ChatAdapter } from '../ChatComposite';
+import { ControlBarButtonProps } from "../../../../../react-components/src";
+import { ChatAdapter } from '../../ChatComposite';
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButtonWithUnreadMessagesBadge.js → ChatButton/ChatButtonWithUnreadMessagesBadge.js}

@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 import { Stack } from '@fluentui/react';
-import { _formatString } from "../../../../acs-ui-common/src";
+import { _formatString } from "../../../../../acs-ui-common/src";
 import React, { useCallback, useMemo, useState } from 'react';
 import { useEffect } from 'react';
-import { CallWithChatCompositeIcon } from '../common/icons';
+import { CallWithChatCompositeIcon } from '../../common/icons';
 import { ChatButton } from './ChatButton';
-import { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';
+import { useCallWithChatCompositeStrings } from '../hooks/useCallWithChatCompositeStrings';
 import { NotificationIcon } from './NotificationIcon';
 /**
  * Helper function to determine if the message in the event is a valid one from a user.

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatButtonWithUnreadMessagesBadge.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ChatMessage } from '@azure/communication-chat';\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { useEffect } from 'react';\nimport { ChatAdapter } from '../../ChatComposite';\nimport { CallWithChatCompositeIcon } from '../../common/icons';\nimport { ChatButton } from './ChatButton';\nimport { useCallWithChatCompositeStrings } from '../hooks/useCallWithChatCompositeStrings';\nimport { NotificationIcon } from './NotificationIcon';\n\n/**\n * @private\n */\nexport interface ChatButtonWithUnreadMessagesBadgeProps extends ControlBarButtonProps {\n  chatAdapter: ChatAdapter;\n  isChatPaneVisible: boolean;\n  newMessageLabel?: string;\n}\n\n/**\n * Helper function to determine if the message in the event is a valid one from a user.\n * Display name is used since system messages will not have one.\n */\nconst validNewChatMessage = (message): boolean =>\n  !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');\n\nconst filledIcon = <CallWithChatCompositeIcon iconName={'ControlBarChatButtonActive'} />;\nconst regularIcon = <CallWithChatCompositeIcon iconName={'ControlBarChatButtonInactive'} />;\n\n/**\n * @private\n */\nexport const ChatButtonWithUnreadMessagesBadge = (props: ChatButtonWithUnreadMessagesBadgeProps): JSX.Element => {\n  const { chatAdapter, isChatPaneVisible, newMessageLabel } = props;\n  const [unreadChatMessagesCount, setUnreadChatMessagesCount] = useState<number>(0);\n\n  const baseIcon = props.showLabel ? regularIcon : filledIcon;\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n\n  const numberOfMsgToolTip =\n    props.strings?.tooltipOffContent && unreadChatMessagesCount > 0\n      ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {\n          unreadMessagesCount: `${unreadChatMessagesCount}`\n        })\n      : undefined;\n\n  const chatStrings = useMemo(\n    () => ({\n      label: props.strings?.label,\n      tooltipOffContent: numberOfMsgToolTip ? numberOfMsgToolTip : props.strings?.tooltipOffContent,\n      tooltipOnContent: props.strings?.tooltipOnContent\n    }),\n    [numberOfMsgToolTip, props.strings?.label, props.strings?.tooltipOffContent, props.strings?.tooltipOnContent]\n  );\n  const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);\n  const notificationOnIcon = useCallback((): JSX.Element => {\n    return (\n      <Stack styles={chatNotificationContainerStyles}>\n        {unreadChatMessagesCount > 0 && (\n          <NotificationIcon chatMessagesCount={unreadChatMessagesCount} label={newMessageLabel} />\n        )}\n        {baseIcon}\n      </Stack>\n    );\n  }, [unreadChatMessagesCount, newMessageLabel, baseIcon]);\n\n  useEffect(() => {\n    if (isChatPaneVisible) {\n      setUnreadChatMessagesCount(0);\n      return;\n    }\n    const incrementUnreadChatMessagesCount = (event: { message: ChatMessage }): void => {\n      if (!isChatPaneVisible && validNewChatMessage(event.message)) {\n        setUnreadChatMessagesCount(unreadChatMessagesCount + 1);\n      }\n    };\n    chatAdapter.on('messageReceived', incrementUnreadChatMessagesCount);\n\n    return () => {\n      chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);\n    };\n  }, [chatAdapter, setUnreadChatMessagesCount, isChatPaneVisible, unreadChatMessagesCount]);\n\n  return (\n    <ChatButton\n      {...props}\n      data-ui-id=\"call-with-chat-composite-chat-button\"\n      onRenderOffIcon={notificationOnIcon}\n      onRenderOnIcon={onRenderOnIcon}\n      strings={chatStrings}\n    />\n  );\n};\n\nconst chatNotificationContainerStyles: IStackStyles = {\n  root: {\n    display: 'inline',\n    position: 'relative'\n  }\n};\n\"../../../../../acs-ui-common/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAS5G;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAe,EAAE;QACrD,IAAI,gBAAgB,GAAG,CAAC,EAAE;YACxB,OAAO,yCAAK,CAAC;SACd;aAAM;YACL,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5E,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,gBAAc,oBAAoB,GAAG,KAAK,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAClG,oBAAoB,CAChB,CACR,CAAC;SACH;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,kDAAkD,EAC7D,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC;QAE9C,oBAAC,KAAK,QAAE,YAAY,CAAC,iBAAiB,CAAC,CAAS,CAC1C,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,+BAA+B,GAAG,eAAe,CACrD,CAAC,KAAa,EAAe,EAAE,CAAC,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,GAAG,mBAAmB,KAAK;QACzC,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK;QACrC,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB;QAC/B,OAAO,EAAE,GAAG,0BAA0B,KAAK;QAE3C,kEAAkE;QAClE,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,IAAI,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;QAClD,IAAI,EAAE,GAAG,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;KACnD;CACF,CAAC,CACH,CAAC;AAEF,MAAM,sBAAsB,GAAG,eAAe,CAC5C,CAAC,KAAa,EAAgB,EAAE,CAAC,CAAC;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KACtC;CACF,CAAC,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React from 'react';\nimport { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';\n\n/**\n * @private\n */\nexport type NotificationIconProps = {\n  chatMessagesCount: number;\n  label?: string;\n};\n/**\n * @private\n */\nexport const NotificationIcon = (props: NotificationIconProps): JSX.Element => {\n  const { chatMessagesCount, label } = props;\n  const theme = useTheme();\n  const renderNumber = (numberOfMessages): JSX.Element => {\n    if (numberOfMessages < 1) {\n      return <></>;\n    } else {\n      const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';\n      return (\n        <Text role={'status'} aria-label={textNumberOfMessages + label} styles={notificationTextStyles(theme)}>\n          {textNumberOfMessages}\n        </Text>\n      );\n    }\n  };\n\n  return (\n    <Stack\n      data-ui-id=\"call-with-chat-composite-chat-button-unread-icon\"\n      horizontalAlign=\"center\"\n      verticalAlign=\"center\"\n      styles={notificationIconContainerStyles(theme)}\n    >\n      <Stack>{renderNumber(chatMessagesCount)}</Stack>\n    </Stack>\n  );\n};\n\nconst notificationIconPaddingREM = 0.225;\nconst notificationSizeREM = 1;\n\nconst notificationIconContainerStyles = memoizeFunction(\n  (theme: ITheme): IIconStyles => ({\n    root: {\n      borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.\n      height: `${notificationSizeREM}rem`,\n      minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)\n      background: theme.palette.themePrimary,\n      border: `0.0625rem solid white`, // border should always be white\n      padding: `${notificationIconPaddingREM}rem`,\n\n      // positioning to place the badge within the button appropriately.\n      position: 'absolute',\n      top: `-${0.5 - notificationIconPaddingREM / 2}rem`,\n      left: `${0.5 + notificationIconPaddingREM / 2}rem`\n    }\n  })\n);\n\nconst notificationTextStyles = memoizeFunction(\n  (theme: ITheme): IStackStyles => ({\n    root: {\n      color: 'white',\n      fontSize: theme.fonts.xSmall.fontSize\n    }\n  })\n);\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js

@@ -33,7 +33,7 @@ export const AddPeopleButton = (props) => {
         return (React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId }));
     }
     else {
-        return (React.createElement(Stack, { tokens: peoplePaneContainerTokens },
+        return (React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content" },
             React.createElement(AddPeopleDropdown, { strings: strings, mobileView: mobileView, inviteLink: inviteLink, onAddParticipant: props.onAddParticipant, alternateCallerId: props.alternateCallerId }),
             participantList));
     }
@@ -46,7 +46,7 @@ export const AddPeopleButton = (props) => {
                 }, styles: copyLinkButtonStylesThemed, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), text: strings.copyInviteLinkButtonLabel })))));
     }
     else {
-        return (React.createElement(Stack, { tokens: peoplePaneContainerTokens },
+        return (React.createElement(Stack, { tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content" },
             inviteLink && (React.createElement(Stack, { styles: copyLinkButtonStackStyles },
                 React.createElement(Announcer, { announcementString: copyInviteLinkAnnouncerStrings, ariaLive: 'polite' }),
                 React.createElement(DefaultButton, { text: strings.copyInviteLinkButtonLabel, onRenderIcon: () => React.createElement(CallWithChatCompositeIcon, { iconName: "Link", style: linkIconStyles }), onClick: () => {