@azure/communication-react 1.22.0 → 1.23.0-alpha-202412190017

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

@@ -2,7 +2,11 @@
 // Licensed under the MIT License.
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(breakout-rooms) */
+import { Spinner, SpinnerSize } from '@fluentui/react';
 import { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';
+/* @conditional-compile-remove(breakout-rooms) */
+import { chatSpinnerContainerStyles } from './styles/CallWithChatCompositeStyles';
 import { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';
 import { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';
 import { ChatComposite } from '../ChatComposite';
@@ -17,7 +21,10 @@ import { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallCon
 import { isDisabled } from '../CallComposite/utils';
 import { SidePaneHeader } from '../common/SidePaneHeader';
 import { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';
+/* @conditional-compile-remove(breakout-rooms) */
+import { useLocale } from '../localization';
 const CallWithChatScreen = (props) => {
+    var _a, _b;
     const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;
     const { surveyOptions } = props;
     const mobileView = formFactor === 'mobile';
@@ -84,27 +91,52 @@ const CallWithChatScreen = (props) => {
         tooltipOnContent: callWithChatStrings.chatButtonTooltipClose
     }), [callWithChatStrings]);
     const theme = useTheme();
-    const commonButtonStyles = useMemo(() => !mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [mobileView, theme]);
+    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 chatTabHeaderProps = useMemo(() => mobileView && showChatButton
+        ? {
+            onClick: toggleChat,
+            disabled: chatButtonDisabled
+        }
+        : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);
     const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen, isChatInitialized);
     const customChatButton = useCallback((args) => ({
         placement: mobileView ? 'primary' : 'secondary',
-        onRenderButton: () => React.createElement(ChatButtonWithUnreadMessagesBadge, { checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel, unreadChatMessagesCount: unreadChatMessagesCount, 
+        onRenderButton: () => (React.createElement(ChatButtonWithUnreadMessagesBadge, { checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel, unreadChatMessagesCount: unreadChatMessagesCount, 
             // As chat is disabled when on hold, we don't want to show the unread badge when on hold
-            hideUnreadChatMessagesBadge: isOnHold, disableTooltip: mobileView })
-    }), [callWithChatStrings.chatButtonNewMessageNotificationLabel, chatButtonStrings, commonButtonStyles, isChatOpen, chatButtonDisabled, mobileView, toggleChat, unreadChatMessagesCount, isOnHold]);
+            hideUnreadChatMessagesBadge: isOnHold, disableTooltip: mobileView }))
+    }), [
+        callWithChatStrings.chatButtonNewMessageNotificationLabel,
+        chatButtonStrings,
+        commonButtonStyles,
+        isChatOpen,
+        chatButtonDisabled,
+        mobileView,
+        toggleChat,
+        unreadChatMessagesCount,
+        isOnHold
+    ]);
     const callControlOptionsFromProps = useMemo(() => (Object.assign({}, (typeof props.callControls === 'object' ? props.callControls : {}))), [props.callControls]);
     const injectedCustomButtonsFromProps = useMemo(() => {
         var _a;
         return [...((_a = callControlOptionsFromProps.onFetchCustomButtonProps) !== null && _a !== void 0 ? _a : [])];
     }, [callControlOptionsFromProps]);
     const callCompositeOptions = useMemo(() => ({
-        callControls: props.callControls === false ? false : Object.assign(Object.assign({}, callControlOptionsFromProps), { onFetchCustomButtonProps: [...(showChatButton ? [customChatButton] : []), ...injectedCustomButtonsFromProps], legacyControlBarExperience: false }),
+        callControls: props.callControls === false
+            ? false
+            : Object.assign(Object.assign({}, callControlOptionsFromProps), { onFetchCustomButtonProps: [
+                    ...(showChatButton ? [customChatButton] : []),
+                    ...injectedCustomButtonsFromProps
+                ], legacyControlBarExperience: 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,
         remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,
         galleryOptions: props.galleryOptions,
         localVideoTile: props.localVideoTile,
@@ -114,16 +146,69 @@ const CallWithChatScreen = (props) => {
             backgroundImage: props.backgroundImage
         },
         spotlight: props.spotlight
-    }), [props.callControls, callControlOptionsFromProps, showChatButton, customChatButton, injectedCustomButtonsFromProps, props.galleryOptions, props.localVideoTile, props.remoteVideoTileMenuOptions, surveyOptions, props.logo, props.backgroundImage, props.spotlight]);
+    }), [
+        props.callControls,
+        callControlOptionsFromProps,
+        showChatButton,
+        customChatButton,
+        injectedCustomButtonsFromProps,
+        /* @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,
+        props.galleryOptions,
+        props.localVideoTile,
+        props.remoteVideoTileMenuOptions,
+        surveyOptions,
+        props.logo,
+        props.backgroundImage,
+        props.spotlight
+    ]);
     const chatCompositeOptions = useMemo(() => ({
-        topic: false
-    }), []);
+        topic: false,
+        /* @conditional-compile-remove(chat-composite-participant-pane) */
+        participantPane: false,
+        /* @conditional-compile-remove(file-sharing-acs) */
+        attachmentOptions: props.attachmentOptions,
+        /* @conditional-compile-remove(rich-text-editor-composite-support) */
+        richTextEditor: props.richTextEditor
+    }), [
+        /* @conditional-compile-remove(file-sharing-acs) */
+        props.attachmentOptions,
+        /* @conditional-compile-remove(rich-text-editor-composite-support) */
+        props.richTextEditor
+    ]);
+    /* @conditional-compile-remove(breakout-rooms) */
+    const chatSpinnerLabel = useLocale().strings.callWithChat.chatContentSpinnerLabel;
     const onRenderChatContent = useCallback(() => {
-        return React.createElement(ChatComposite, { adapter: chatAdapter, fluentTheme: theme, options: chatCompositeOptions, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData });
-    }, [chatAdapter, props.onFetchAvatarPersonaData, chatCompositeOptions, theme]);
+        /* @conditional-compile-remove(breakout-rooms) */
+        if (!isChatInitialized) {
+            return (React.createElement(Stack, { styles: chatSpinnerContainerStyles },
+                React.createElement(Spinner, { label: chatSpinnerLabel, size: SpinnerSize.large })));
+        }
+        return (React.createElement(ChatComposite, { adapter: chatAdapter, fluentTheme: theme, options: chatCompositeOptions, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData }));
+    }, [
+        chatAdapter,
+        props.onFetchAvatarPersonaData,
+        chatCompositeOptions,
+        theme,
+        /* @conditional-compile-remove(breakout-rooms) */ isChatInitialized,
+        /* @conditional-compile-remove(breakout-rooms) */ chatSpinnerLabel
+    ]);
     let chatPaneTitle = callWithChatStrings.chatPaneTitle;
-    const sidePaneHeaderRenderer = useCallback(() => { var _a; return React.createElement(SidePaneHeader, { headingText: chatPaneTitle, onClose: closeChat, dismissSidePaneButtonAriaLabel: (_a = callWithChatStrings.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : '', mobileView: mobileView }); }, [chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]);
-    const sidePaneContentRenderer = useMemo(() => hasJoinedCall ? onRenderChatContent : undefined, [hasJoinedCall, onRenderChatContent]);
+    /* @conditional-compile-remove(breakout-rooms) */
+    if ((_b = (_a = callAdapter.getState().call) === null || _a === void 0 ? void 0 : _a.breakoutRooms) === null || _b === void 0 ? void 0 : _b.breakoutRoomOriginCallId) {
+        chatPaneTitle = callWithChatStrings.breakoutRoomChatPaneTitle;
+    }
+    const sidePaneHeaderRenderer = useCallback(() => {
+        var _a;
+        return (React.createElement(SidePaneHeader, { headingText: chatPaneTitle, onClose: closeChat, dismissSidePaneButtonAriaLabel: (_a = callWithChatStrings.dismissSidePaneButtonLabel) !== null && _a !== void 0 ? _a : '', mobileView: mobileView }));
+    }, [chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]);
+    const sidePaneContentRenderer = useMemo(() => (hasJoinedCall ? onRenderChatContent : undefined), [hasJoinedCall, onRenderChatContent]);
     const sidePaneRenderer = useMemo(() => ({
         contentRenderer: sidePaneContentRenderer,
         headerRenderer: sidePaneHeaderRenderer,
@@ -147,11 +232,11 @@ const CallWithChatScreen = (props) => {
             callAdapter.off('callEnded', closeChat);
         };
     }, [callAdapter, closeChat]);
-    return React.createElement("div", { ref: containerRef, className: mergeStyles(containerDivStyles) },
+    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) },
-                    React.createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps, onCloseChatPane: closeChat }))))));
+                    React.createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps, onCloseChatPane: closeChat })))))));
 };
 /**
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.
@@ -161,11 +246,19 @@ const CallWithChatScreen = (props) => {
 export const CallWithChatComposite = (props) => {
     var _a, _b;
     const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;
-    return React.createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons, formFactor: props.formFactor },
-        React.createElement(CallWithChatScreen, Object.assign({}, props, { callWithChatAdapter: adapter, formFactor: formFactor, callControls: options === null || options === void 0 ? void 0 : options.callControls, joinInvitationURL: joinInvitationURL, fluentTheme: fluentTheme, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage, surveyOptions: options === null || options === void 0 ? void 0 : options.surveyOptions, spotlight: options === null || options === void 0 ? void 0 : options.spotlight })));
+    return (React.createElement(BaseProvider, { fluentTheme: fluentTheme, rtl: rtl, locale: props.locale, icons: props.icons, formFactor: props.formFactor },
+        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, remoteVideoTileMenuOptions: options === null || options === void 0 ? void 0 : options.remoteVideoTileMenuOptions, 
+            /* @conditional-compile-remove(file-sharing-acs) */
+            attachmentOptions: options === null || options === void 0 ? void 0 : options.attachmentOptions, localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile, galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions, logo: (_a = options === null || options === void 0 ? void 0 : options.branding) === null || _a === void 0 ? void 0 : _a.logo, backgroundImage: (_b = options === null || options === void 0 ? void 0 : options.branding) === null || _b === void 0 ? void 0 : _b.backgroundImage, surveyOptions: options === null || options === void 0 ? void 0 : options.surveyOptions, spotlight: options === null || options === void 0 ? void 0 : options.spotlight, 
+            /* @conditional-compile-remove(rich-text-editor-composite-support) */
+            richTextEditor: options === null || options === void 0 ? void 0 : options.richTextEditor }))));
 };
 const hasJoinedCallFn = (page, callStatus) => {
-    return page === 'call' && (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting') || page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting');
+    return ((page === 'call' &&
+        (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||
+        (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting')));
 };
 const checkShowChatButton = (callControls) => {
     if (callControls === undefined || callControls === true) {

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

@@ -1 +1 @@
-{"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/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 { CallSurvey } from '@azure/communication-calling';\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, ChatAdapter, ChatCompositeOptions } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport { ParticipantMenuItemsCallback, _useContainerHeight, _useContainerWidth, useTheme } from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';\nimport { LocalVideoTileOptions } from '../CallComposite/CallComposite';\nimport { CommonCallControlOptions } 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, CustomCallControlButtonCallbackArgs } from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { CallControlOptions } from '../CallComposite/types/CallControlOptions';\nimport { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';\nimport { VideoGalleryLayout } from '@internal/react-components';\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 | {\n    disabled: boolean;\n  };\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  /**\n   * Remote participant video tile menu options\n   */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /**\n   * Options for controlling the local video tile.\n   *\n   * @remarks if 'false' the local video tile will not be rendered.\n   */\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  /**\n   * Options for controlling the starting layout of the composite's video gallery\n   */\n  galleryOptions?: {\n    /**\n     * Layout for the gallery when the call starts\n     */\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (callId: string, surveyId: string,\n    /**\n     * This is the survey results containing star survey data and API tag survey data.\n     * This part of the result will always be sent to the calling sdk\n     * This callback provides user with the ability to gain access to survey data\n     */\n    submittedSurvey: CallSurvey,\n    /**\n     * This is the survey results containing free form text\n     * This part of the result will not be handled by composites\n     * User will need to collect and handle this information 100% on their own\n     * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n     */\n    improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;\n  };\n  /**\n   * Options for setting additional customizations related to personalized branding.\n   */\n  branding?: {\n    /**\n     * Logo displayed on the configuration page.\n     */\n    logo?: {\n      /**\n       * URL for the logo image.\n       *\n       * @remarks\n       * Recommended size is 80x80 pixels.\n       */\n      url: string;\n      /**\n       * Alt text for the logo image.\n       */\n      alt?: string;\n      /**\n       * The logo can be displayed as a circle.\n       *\n       * @defaultValue 'unset'\n       */\n      shape?: 'unset' | 'circle';\n    };\n    /**\n     * Background image displayed on the configuration page.\n     */\n    backgroundImage?: {\n      /**\n       * URL for the background image.\n       *\n       * @remarks\n       * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n       */\n      url: string;\n    };\n  };\n  /**\n   * Options for settings related to spotlight.\n   */\n  spotlight?: {\n    /**\n     * Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.\n     * @defaultValue false\n     */\n    hideSpotlightButtons?: boolean;\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  rtl?: boolean;\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  galleryOptions?: {\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (callId: string, surveyId: string,\n    /**\n     * This is the survey results containing star survey data and API tag survey data.\n     * This part of the result will always be sent to the calling sdk\n     * This callback provides user with the ability to gain access to survey data\n     */\n    submittedSurvey: CallSurvey,\n    /**\n     * This is the survey results containing free form text\n     * This part of the result will not be handled by composites\n     * User will need to collect and handle this information 100% on their own\n     * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n     */\n    improvementSuggestions: CallSurveyImprovementSuggestions) => Promise<void>;\n  };\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n  spotlight?: {\n    hideSpotlightButtons?: boolean;\n  };\n};\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const {\n    callWithChatAdapter,\n    fluentTheme,\n    formFactor = 'desktop'\n  } = props;\n  const {\n    surveyOptions\n  } = props;\n  const mobileView = formFactor === 'mobile';\n  if (!callWithChatAdapter) {\n    throw new Error('CallWithChatAdapter is undefined');\n  }\n  const callAdapter: CallAdapter = useMemo(() => new CallWithChatBackedCallAdapter(callWithChatAdapter), [callWithChatAdapter]);\n  const [currentCallState, setCurrentCallState] = useState<CallState>();\n  const [isChatInitialized, setIsChatInitialized] = useState(false);\n  const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n  const [isChatOpen, setIsChatOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n      setCurrentPage(newState.page);\n      setCurrentCallState(newState.call?.state);\n      setIsChatInitialized(newState.chat ? true : false);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n  const chatAdapter: ChatAdapter = useMemo(() => {\n    return new CallWithChatBackedChatAdapter(callWithChatAdapter);\n  }, [callWithChatAdapter]);\n\n  /** Constant setting of id for the parent stack of the composite */\n  const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\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  const isOnHold = currentPage === 'hold';\n  useEffect(() => {\n    if (isOnHold) {\n      closeChat();\n    }\n  }, [closeChat, isOnHold]);\n  const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n  const toggleChat = useCallback(() => {\n    isChatOpen || !hasJoinedCall ? closeChat() : openChat();\n  }, [closeChat, hasJoinedCall, isChatOpen, openChat]);\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const chatButtonStrings = useMemo(() => ({\n    label: callWithChatStrings.chatButtonLabel,\n    tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n    tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n  }), [callWithChatStrings]);\n  const theme = useTheme();\n  const commonButtonStyles = useMemo(() => !mobileView ? getDesktopCommonButtonStyles(theme) : undefined, [mobileView, theme]);\n  const showChatButton = checkShowChatButton(props.callControls);\n  const chatButtonDisabled = showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);\n  const chatTabHeaderProps = useMemo(() => mobileView && showChatButton ? {\n    onClick: toggleChat,\n    disabled: chatButtonDisabled\n  } : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);\n  const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen, isChatInitialized);\n  const customChatButton: CustomCallControlButtonCallback = useCallback((args: CustomCallControlButtonCallbackArgs) => ({\n    placement: mobileView ? 'primary' : 'secondary',\n    onRenderButton: () => <ChatButtonWithUnreadMessagesBadge checked={isChatOpen} showLabel={args.displayType !== 'compact'} onClick={toggleChat} disabled={chatButtonDisabled} strings={chatButtonStrings} styles={commonButtonStyles} newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel} unreadChatMessagesCount={unreadChatMessagesCount}\n    // As chat is disabled when on hold, we don't want to show the unread badge when on hold\n    hideUnreadChatMessagesBadge={isOnHold} disableTooltip={mobileView} />\n  }), [callWithChatStrings.chatButtonNewMessageNotificationLabel, chatButtonStrings, commonButtonStyles, isChatOpen, chatButtonDisabled, mobileView, toggleChat, unreadChatMessagesCount, isOnHold]);\n  const callControlOptionsFromProps = useMemo(() => ({\n    ...(typeof props.callControls === 'object' ? props.callControls : {})\n  }), [props.callControls]);\n  const injectedCustomButtonsFromProps = useMemo(() => {\n    return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\n  }, [callControlOptionsFromProps]);\n  const callCompositeOptions: CallCompositeOptions = useMemo(() => ({\n    callControls: props.callControls === false ? false : {\n      ...callControlOptionsFromProps,\n      onFetchCustomButtonProps: [...(showChatButton ? [customChatButton] : []), ...injectedCustomButtonsFromProps],\n      legacyControlBarExperience: false\n    } as CallControlOptions,\n    remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,\n    galleryOptions: props.galleryOptions,\n    localVideoTile: props.localVideoTile,\n    surveyOptions: surveyOptions,\n    branding: {\n      logo: props.logo,\n      backgroundImage: props.backgroundImage\n    },\n    spotlight: props.spotlight\n  }), [props.callControls, callControlOptionsFromProps, showChatButton, customChatButton, injectedCustomButtonsFromProps, props.galleryOptions, props.localVideoTile, props.remoteVideoTileMenuOptions, surveyOptions, props.logo, props.backgroundImage, props.spotlight]);\n  const chatCompositeOptions: ChatCompositeOptions = useMemo(() => ({\n    topic: false\n  }), []);\n  const onRenderChatContent = useCallback((): JSX.Element => {\n    return <ChatComposite adapter={chatAdapter} fluentTheme={theme} options={chatCompositeOptions} onFetchAvatarPersonaData={props.onFetchAvatarPersonaData} />;\n  }, [chatAdapter, props.onFetchAvatarPersonaData, chatCompositeOptions, theme]);\n  let chatPaneTitle = callWithChatStrings.chatPaneTitle;\n  const sidePaneHeaderRenderer = useCallback(() => <SidePaneHeader headingText={chatPaneTitle} onClose={closeChat} dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''} mobileView={mobileView} />, [chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]);\n  const sidePaneContentRenderer = useMemo(() => hasJoinedCall ? onRenderChatContent : undefined, [hasJoinedCall, onRenderChatContent]);\n  const sidePaneRenderer = useMemo(() => ({\n    contentRenderer: sidePaneContentRenderer,\n    headerRenderer: sidePaneHeaderRenderer,\n    id: 'chat'\n  }), [sidePaneContentRenderer, sidePaneHeaderRenderer]);\n  const overrideSidePaneProps: InjectedSidePaneProps = useMemo(() => ({\n    renderer: sidePaneRenderer,\n    isActive: isChatOpen,\n    persistRenderingWhenClosed: true\n  }), [isChatOpen, sidePaneRenderer]);\n  const onSidePaneIdChange = useCallback((sidePaneId: string | undefined) => {\n    // If the pane is switched to something other than chat, removing rendering chat.\n    if (sidePaneId && sidePaneId !== 'chat') {\n      closeChat();\n    }\n  }, [closeChat]);\n\n  // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.\n  useEffect(() => {\n    callAdapter.on('callEnded', closeChat);\n    return () => {\n      callAdapter.off('callEnded', closeChat);\n    };\n  }, [callAdapter, closeChat]);\n  return <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 {...props} formFactor={formFactor} options={callCompositeOptions} adapter={callAdapter} fluentTheme={fluentTheme} callInvitationUrl={props.joinInvitationURL} overrideSidePane={overrideSidePaneProps} onSidePaneIdChange={onSidePaneIdChange} mobileChatTabHeader={chatTabHeaderProps} onCloseChatPane={closeChat} />\n          </Stack.Item>\n        </Stack>\n      </Stack>\n    </div>;\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 {\n    adapter,\n    fluentTheme,\n    rtl,\n    formFactor,\n    joinInvitationURL,\n    options\n  } = props;\n  return <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons} formFactor={props.formFactor}>\n      <CallWithChatScreen {...props} callWithChatAdapter={adapter} formFactor={formFactor} callControls={options?.callControls} joinInvitationURL={joinInvitationURL} fluentTheme={fluentTheme} remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions} localVideoTile={options?.localVideoTile} galleryOptions={options?.galleryOptions} logo={options?.branding?.logo} backgroundImage={options?.branding?.backgroundImage} surveyOptions={options?.surveyOptions} spotlight={options?.spotlight} />\n    </BaseProvider>;\n};\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  return page === 'call' && (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting') || page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting');\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};\nconst checkChatButtonIsDisabled = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n  return typeof callControls === 'object' && isDisabled(callControls?.chatButton);\n};"]}
+{"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';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { Spinner, SpinnerSize } from '@fluentui/react';\nimport { CallCompositePage } from '../CallComposite';\nimport { CallSurvey } from '@azure/communication-calling';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { chatSpinnerContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatComposite, ChatAdapter, ChatCompositeOptions } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport {\n  ParticipantMenuItemsCallback,\n  _useContainerHeight,\n  _useContainerWidth,\n  useTheme\n} from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';\nimport { LocalVideoTileOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { CommonCallControlOptions } 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 {\n  CustomCallControlButtonCallback,\n  CustomCallControlButtonCallbackArgs\n} from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { CallControlOptions } from '../CallComposite/types/CallControlOptions';\nimport { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/* @conditional-compile-remove(file-sharing-acs) */\nimport { AttachmentOptions } from '@internal/react-components';\n/* @conditional-compile-remove(breakout-rooms) */\nimport { useLocale } from '../localization';\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 | { 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-acs) */\n  /**\n   * Properties for configuring the File Sharing feature.\n   * If undefined, file sharing feature will be disabled.\n   * @beta\n   */\n  attachmentOptions?: AttachmentOptions;\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   * Remote participant video tile menu options\n   */\n  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  /**\n   * Options for controlling the local video tile.\n   *\n   * @remarks if 'false' the local video tile will not be rendered.\n   */\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  /**\n   * Options for controlling the starting layout of the composite's video gallery\n   */\n  galleryOptions?: {\n    /**\n     * Layout for the gallery when the call starts\n     */\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (\n      callId: string,\n      surveyId: string,\n      /**\n       * This is the survey results containing star survey data and API tag survey data.\n       * This part of the result will always be sent to the calling sdk\n       * This callback provides user with the ability to gain access to survey data\n       */\n      submittedSurvey: CallSurvey,\n      /**\n       * This is the survey results containing free form text\n       * This part of the result will not be handled by composites\n       * User will need to collect and handle this information 100% on their own\n       * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n       */\n      improvementSuggestions: CallSurveyImprovementSuggestions\n    ) => Promise<void>;\n  };\n  /**\n   * Options for setting additional customizations related to personalized branding.\n   */\n  branding?: {\n    /**\n     * Logo displayed on the configuration page.\n     */\n    logo?: {\n      /**\n       * URL for the logo image.\n       *\n       * @remarks\n       * Recommended size is 80x80 pixels.\n       */\n      url: string;\n      /**\n       * Alt text for the logo image.\n       */\n      alt?: string;\n      /**\n       * The logo can be displayed as a circle.\n       *\n       * @defaultValue 'unset'\n       */\n      shape?: 'unset' | 'circle';\n    };\n    /**\n     * Background image displayed on the configuration page.\n     */\n    backgroundImage?: {\n      /**\n       * URL for the background image.\n       *\n       * @remarks\n       * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n       */\n      url: string;\n    };\n  };\n  /**\n   * Options for settings related to spotlight.\n   */\n  spotlight?: {\n    /**\n     * Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.\n     * @defaultValue false\n     */\n    hideSpotlightButtons?: boolean;\n  };\n\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  /**\n   * Enables rich text editor for the send and edit boxes\n   * @defaultValue `false`\n   *\n   * @beta\n   */\n  richTextEditor?: boolean;\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-acs) */\n  attachmentOptions?: AttachmentOptions;\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  remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n  localVideoTile?: boolean | LocalVideoTileOptions;\n  galleryOptions?: {\n    layout?: VideoGalleryLayout;\n  };\n  /**\n   * Options for end of call survey\n   */\n  surveyOptions?: {\n    /**\n     * Disable call survey at the end of a call.\n     * @defaultValue false\n     */\n    disableSurvey?: boolean;\n    /**\n     * Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n     * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n     */\n    onSurveyClosed?: (surveyState: 'sent' | 'skipped' | 'error', surveyError?: string) => void;\n    /**\n     * Optional callback to handle survey data including free form text response\n     * Note that free form text response survey option is only going to be enabled when this callback is provided\n     * User will need to handle all free form text response on their own\n     */\n    onSurveySubmitted?: (\n      callId: string,\n      surveyId: string,\n      /**\n       * This is the survey results containing star survey data and API tag survey data.\n       * This part of the result will always be sent to the calling sdk\n       * This callback provides user with the ability to gain access to survey data\n       */\n      submittedSurvey: CallSurvey,\n      /**\n       * This is the survey results containing free form text\n       * This part of the result will not be handled by composites\n       * User will need to collect and handle this information 100% on their own\n       * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n       */\n      improvementSuggestions: CallSurveyImprovementSuggestions\n    ) => Promise<void>;\n  };\n  logo?: {\n    url: string;\n    alt?: string;\n    shape?: 'unset' | 'circle';\n  };\n  backgroundImage?: {\n    url: string;\n  };\n  spotlight?: {\n    hideSpotlightButtons?: boolean;\n  };\n  /* @conditional-compile-remove(rich-text-editor-composite-support) */\n  richTextEditor?: boolean;\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n  const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n  const { surveyOptions } = 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 [isChatInitialized, setIsChatInitialized] = useState(false);\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      setIsChatInitialized(newState.chat ? true : false);\n    };\n    updateCallWithChatPage(callWithChatAdapter.getState());\n    callWithChatAdapter.onStateChange(updateCallWithChatPage);\n    return () => {\n      callWithChatAdapter.offStateChange(updateCallWithChatPage);\n    };\n  }, [callWithChatAdapter]);\n\n  const chatAdapter: ChatAdapter = useMemo(() => {\n    return new CallWithChatBackedChatAdapter(callWithChatAdapter);\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 isOnHold = currentPage === 'hold';\n  useEffect(() => {\n    if (isOnHold) {\n      closeChat();\n    }\n  }, [closeChat, isOnHold]);\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 =\n    showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);\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 unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen, isChatInitialized);\n\n  const customChatButton: CustomCallControlButtonCallback = useCallback(\n    (args: CustomCallControlButtonCallbackArgs) => ({\n      placement: mobileView ? 'primary' : 'secondary',\n      onRenderButton: () => (\n        <ChatButtonWithUnreadMessagesBadge\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          unreadChatMessagesCount={unreadChatMessagesCount}\n          // As chat is disabled when on hold, we don't want to show the unread badge when on hold\n          hideUnreadChatMessagesBadge={isOnHold}\n          disableTooltip={mobileView}\n        />\n      )\n    }),\n    [\n      callWithChatStrings.chatButtonNewMessageNotificationLabel,\n      chatButtonStrings,\n      commonButtonStyles,\n      isChatOpen,\n      chatButtonDisabled,\n      mobileView,\n      toggleChat,\n      unreadChatMessagesCount,\n      isOnHold\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    return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\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                ...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      remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,\n\n      galleryOptions: props.galleryOptions,\n      localVideoTile: props.localVideoTile,\n      surveyOptions: surveyOptions,\n      branding: {\n        logo: props.logo,\n        backgroundImage: props.backgroundImage\n      },\n      spotlight: props.spotlight\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      props.galleryOptions,\n      props.localVideoTile,\n      props.remoteVideoTileMenuOptions,\n      surveyOptions,\n      props.logo,\n      props.backgroundImage,\n      props.spotlight\n    ]\n  );\n\n  const chatCompositeOptions: ChatCompositeOptions = useMemo(\n    () => ({\n      topic: false,\n      /* @conditional-compile-remove(chat-composite-participant-pane) */\n      participantPane: false,\n      /* @conditional-compile-remove(file-sharing-acs) */\n      attachmentOptions: props.attachmentOptions,\n      /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      richTextEditor: props.richTextEditor\n    }),\n    [\n      /* @conditional-compile-remove(file-sharing-acs) */\n      props.attachmentOptions,\n      /* @conditional-compile-remove(rich-text-editor-composite-support) */\n      props.richTextEditor\n    ]\n  );\n\n  /* @conditional-compile-remove(breakout-rooms) */\n  const chatSpinnerLabel = useLocale().strings.callWithChat.chatContentSpinnerLabel;\n\n  const onRenderChatContent = useCallback((): JSX.Element => {\n    /* @conditional-compile-remove(breakout-rooms) */\n    if (!isChatInitialized) {\n      return (\n        <Stack styles={chatSpinnerContainerStyles}>\n          <Spinner label={chatSpinnerLabel} size={SpinnerSize.large} />\n        </Stack>\n      );\n    }\n    return (\n      <ChatComposite\n        adapter={chatAdapter}\n        fluentTheme={theme}\n        options={chatCompositeOptions}\n        onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n      />\n    );\n  }, [\n    chatAdapter,\n    props.onFetchAvatarPersonaData,\n    chatCompositeOptions,\n    theme,\n    /* @conditional-compile-remove(breakout-rooms) */ isChatInitialized,\n    /* @conditional-compile-remove(breakout-rooms) */ chatSpinnerLabel\n  ]);\n\n  let chatPaneTitle = callWithChatStrings.chatPaneTitle;\n  /* @conditional-compile-remove(breakout-rooms) */\n  if (callAdapter.getState().call?.breakoutRooms?.breakoutRoomOriginCallId) {\n    chatPaneTitle = callWithChatStrings.breakoutRoomChatPaneTitle;\n  }\n\n  const sidePaneHeaderRenderer = useCallback(\n    () => (\n      <SidePaneHeader\n        headingText={chatPaneTitle}\n        onClose={closeChat}\n        dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}\n        mobileView={mobileView}\n      />\n    ),\n    [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: string | undefined) => {\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  // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.\n  useEffect(() => {\n    callAdapter.on('callEnded', closeChat);\n    return () => {\n      callAdapter.off('callEnded', closeChat);\n    };\n  }, [callAdapter, closeChat]);\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              onCloseChatPane={closeChat}\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\n      fluentTheme={fluentTheme}\n      rtl={rtl}\n      locale={props.locale}\n      icons={props.icons}\n      formFactor={props.formFactor}\n    >\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        remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n        /* @conditional-compile-remove(file-sharing-acs) */\n        attachmentOptions={options?.attachmentOptions}\n        localVideoTile={options?.localVideoTile}\n        galleryOptions={options?.galleryOptions}\n        logo={options?.branding?.logo}\n        backgroundImage={options?.branding?.backgroundImage}\n        surveyOptions={options?.surveyOptions}\n        spotlight={options?.spotlight}\n        /* @conditional-compile-remove(rich-text-editor-composite-support) */\n        richTextEditor={options?.richTextEditor}\n      />\n    </BaseProvider>\n  );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n  return (\n    (page === 'call' &&\n      (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n    (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n  );\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"]}

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

@@ -17,6 +17,6 @@ export const ChatButton = (props) => {
             }
         }, (_a = props.styles) !== null && _a !== void 0 ? _a : {});
     }, [props.styles, theme.palette.neutralLight]);
-    return React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'chatButtonLabelKey', strings: strings, onClick: props.onClick, styles: styles }));
+    return (React.createElement(ControlBarButton, Object.assign({}, props, { labelKey: 'chatButtonLabelKey', strings: strings, onClick: props.onClick, styles: styles })));
 };
 //# sourceMappingURL=ChatButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChatButton.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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,mBACX,KAAK,EAAE,KAAK,CAAC,KAAK,IACf,KAAK,CAAC,OAAO,CACjB,CAAC;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,MAAM,GAA2B,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,eAAe,CAAC;YACnE,WAAW,EAAE;gBACX,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;aACvC;SACF,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA;KAAA,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IACpE,OAAO,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AACnI,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 = {\n    label: props.label,\n    ...props.strings\n  };\n  const theme = useTheme();\n  const styles: ControlBarButtonStyles = useMemo(() => concatStyleSets({\n    rootChecked: {\n      background: theme.palette.neutralLight\n    }\n  }, props.styles ?? {}), [props.styles, theme.palette.neutralLight]);\n  return <ControlBarButton {...props} labelKey={'chatButtonLabelKey'} strings={strings} onClick={props.onClick} styles={styles} />;\n};"]}
+{"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"]}

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

@@ -17,9 +17,11 @@ export const ChatButtonWithUnreadMessagesBadge = (props) => {
     const { newMessageLabel, unreadChatMessagesCount, hideUnreadChatMessagesBadge } = props;
     const baseIcon = props.showLabel ? regularIcon : filledIcon;
     const callWithChatStrings = useCallWithChatCompositeStrings();
-    const numberOfMsgToolTip = ((_a = props.strings) === null || _a === void 0 ? void 0 : _a.tooltipOffContent) && unreadChatMessagesCount > 0 ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {
-        unreadMessagesCount: `${unreadChatMessagesCount}`
-    }) : undefined;
+    const numberOfMsgToolTip = ((_a = props.strings) === null || _a === void 0 ? void 0 : _a.tooltipOffContent) && unreadChatMessagesCount > 0
+        ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {
+            unreadMessagesCount: `${unreadChatMessagesCount}`
+        })
+        : undefined;
     const chatStrings = useMemo(() => {
         var _a, _b, _c;
         return ({
@@ -30,11 +32,11 @@ export const ChatButtonWithUnreadMessagesBadge = (props) => {
     }, [numberOfMsgToolTip, (_b = props.strings) === null || _b === void 0 ? void 0 : _b.label, (_c = props.strings) === null || _c === void 0 ? void 0 : _c.tooltipOffContent, (_d = props.strings) === null || _d === void 0 ? void 0 : _d.tooltipOnContent]);
     const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);
     const notificationOnIcon = useCallback(() => {
-        return React.createElement(Stack, { styles: chatNotificationContainerStyles },
-            unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && React.createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel }),
-            baseIcon);
+        return (React.createElement(Stack, { styles: chatNotificationContainerStyles },
+            unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && (React.createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
+            baseIcon));
     }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);
-    return React.createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings }));
+    return (React.createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
 };
 const chatNotificationContainerStyles = {
     root: {

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

@@ -1 +1 @@
-{"version":3,"file":"ChatButtonWithUnreadMessagesBadge.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,yCAAgC;AAExD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,MAAM,UAAU,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,4BAA4B,GAAI,CAAC;AACzF,MAAM,WAAW,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,8BAA8B,GAAI,CAAC;AAE5F;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAA6C,EAAe,EAAE;;IAC9G,MAAM,EACJ,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5D,MAAM,mBAAmB,GAAG,+BAA+B,EAAE,CAAC;IAC9D,MAAM,kBAAkB,GAAG,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,KAAI,uBAAuB,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,mBAAmB,CAAC,uCAAuC,EAAE;QACtK,mBAAmB,EAAE,GAAG,uBAAuB,EAAE;KAClD,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,CAAC;YACjC,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;YAC3B,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB;YAC7F,gBAAgB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB;SAClD,CAAC,CAAA;KAAA,EAAE,CAAC,kBAAkB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,CAAC,CAAC,CAAC;IACnH,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAgB,EAAE;QACvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,+BAA+B;YAChD,uBAAuB,GAAG,CAAC,IAAI,CAAC,2BAA2B,IAAI,oBAAC,gBAAgB,IAAC,iBAAiB,EAAE,uBAAuB,EAAE,KAAK,EAAE,eAAe,GAAI;YACvJ,QAAQ,CACH,CAAC;IACb,CAAC,EAAE,CAAC,uBAAuB,EAAE,eAAe,EAAE,QAAQ,EAAE,2BAA2B,CAAC,CAAC,CAAC;IACtF,OAAO,oBAAC,UAAU,oBAAK,KAAK,kBAAa,sCAAsC,EAAC,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,IAAI,CAAC;AAChL,CAAC,CAAC;AACF,MAAM,+BAA+B,GAAiB;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\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  unreadChatMessagesCount: number;\n  hideUnreadChatMessagesBadge?: boolean;\n  newMessageLabel: string;\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 {\n    newMessageLabel,\n    unreadChatMessagesCount,\n    hideUnreadChatMessagesBadge\n  } = props;\n  const baseIcon = props.showLabel ? regularIcon : filledIcon;\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const numberOfMsgToolTip = props.strings?.tooltipOffContent && unreadChatMessagesCount > 0 ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {\n    unreadMessagesCount: `${unreadChatMessagesCount}`\n  }) : undefined;\n  const chatStrings = useMemo(() => ({\n    label: props.strings?.label,\n    tooltipOffContent: numberOfMsgToolTip ? numberOfMsgToolTip : props.strings?.tooltipOffContent,\n    tooltipOnContent: props.strings?.tooltipOnContent\n  }), [numberOfMsgToolTip, props.strings?.label, props.strings?.tooltipOffContent, props.strings?.tooltipOnContent]);\n  const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);\n  const notificationOnIcon = useCallback((): JSX.Element => {\n    return <Stack styles={chatNotificationContainerStyles}>\n        {unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && <NotificationIcon chatMessagesCount={unreadChatMessagesCount} label={newMessageLabel} />}\n        {baseIcon}\n      </Stack>;\n  }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);\n  return <ChatButton {...props} data-ui-id=\"call-with-chat-composite-chat-button\" onRenderOffIcon={notificationOnIcon} onRenderOnIcon={onRenderOnIcon} strings={chatStrings} />;\n};\nconst chatNotificationContainerStyles: IStackStyles = {\n  root: {\n    display: 'inline',\n    position: 'relative'\n  }\n};"]}
+{"version":3,"file":"ChatButtonWithUnreadMessagesBadge.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,yCAAgC;AAExD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAWtD,MAAM,UAAU,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,4BAA4B,GAAI,CAAC;AACzF,MAAM,WAAW,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,8BAA8B,GAAI,CAAC;AAE5F;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAA6C,EAAe,EAAE;;IAC9G,MAAM,EAAE,eAAe,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,GAAG,KAAK,CAAC;IAExF,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5D,MAAM,mBAAmB,GAAG,+BAA+B,EAAE,CAAC;IAE9D,MAAM,kBAAkB,GACtB,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,KAAI,uBAAuB,GAAG,CAAC;QAC7D,CAAC,CAAC,aAAa,CAAC,mBAAmB,CAAC,uCAAuC,EAAE;YACzE,mBAAmB,EAAE,GAAG,uBAAuB,EAAE;SAClD,CAAC;QACJ,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE;;QAAC,OAAA,CAAC;YACL,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;YAC3B,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB;YAC7F,gBAAgB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB;SAClD,CAAC,CAAA;KAAA,EACF,CAAC,kBAAkB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,CAAC,CAC9G,CAAC;IACF,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAgB,EAAE;QACvD,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,+BAA+B;YAC3C,uBAAuB,GAAG,CAAC,IAAI,CAAC,2BAA2B,IAAI,CAC9D,oBAAC,gBAAgB,IAAC,iBAAiB,EAAE,uBAAuB,EAAE,KAAK,EAAE,eAAe,GAAI,CACzF;YACA,QAAQ,CACH,CACT,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,EAAE,eAAe,EAAE,QAAQ,EAAE,2BAA2B,CAAC,CAAC,CAAC;IAEtF,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,kBACE,sCAAsC,EACjD,eAAe,EAAE,kBAAkB,EACnC,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,WAAW,IACpB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,+BAA+B,GAAiB;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\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  unreadChatMessagesCount: number;\n  hideUnreadChatMessagesBadge?: boolean;\n  newMessageLabel: string;\n}\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 { newMessageLabel, unreadChatMessagesCount, hideUnreadChatMessagesBadge } = props;\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 && !hideUnreadChatMessagesBadge && (\n          <NotificationIcon chatMessagesCount={unreadChatMessagesCount} label={newMessageLabel} />\n        )}\n        {baseIcon}\n      </Stack>\n    );\n  }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);\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"]}

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

@@ -14,24 +14,21 @@ export const NotificationIcon = (props) => {
         }
         else {
             const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';
-            return React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages);
+            return (React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages));
         }
     };
-    return React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },
-        React.createElement(Stack, null, renderNumber(chatMessagesCount)));
+    return (React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },
+        React.createElement(Stack, null, renderNumber(chatMessagesCount))));
 };
 const notificationIconPaddingREM = 0.225;
 const notificationSizeREM = 1;
 const notificationIconContainerStyles = memoizeFunction((theme) => ({
     root: {
-        borderRadius: `${notificationSizeREM}rem`,
-        // Create a css circle. This should match the height.
+        borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.
         height: `${notificationSizeREM}rem`,
-        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+)
+        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+)
         background: theme.palette.themePrimary,
-        border: `0.0625rem solid white`,
-        // border should always be white
+        border: `0.0625rem solid white`, // border should always be white
         padding: `${notificationIconPaddingREM}rem`,
         // positioning to place the badge within the button appropriately.
         position: 'absolute',

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/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,EACJ,iBAAiB,EACjB,KAAK,EACN,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,CAAC,gBAAwB,EAAe,EAAE;QAC7D,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,yCAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5E,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,gBAAc,oBAAoB,GAAG,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAC/G,oBAAoB,CAChB,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,kBAAY,kDAAkD,EAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC;QACtK,oBAAC,KAAK,QAAE,YAAY,CAAC,iBAAiB,CAAC,CAAS,CAC1C,CAAC;AACb,CAAC,CAAC;AACF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAC9B,MAAM,+BAA+B,GAAG,eAAe,CAAC,CAAC,KAAa,EAAe,EAAE,CAAC,CAAC;IACvF,IAAI,EAAE;QACJ,YAAY,EAAE,GAAG,mBAAmB,KAAK;QACzC,qDAAqD;QACrD,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK;QACrC,sIAAsI;QACtI,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB;QAC/B,gCAAgC;QAChC,OAAO,EAAE,GAAG,0BAA0B,KAAK;QAC3C,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,CAAC,CAAC;AACJ,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,KAAa,EAAgB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KACtC;CACF,CAAC,CAAC,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 {\n    chatMessagesCount,\n    label\n  } = props;\n  const theme = useTheme();\n  const renderNumber = (numberOfMessages: number): JSX.Element => {\n    if (numberOfMessages < 1) {\n      return <></>;\n    } else {\n      const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';\n      return <Text role={'status'} aria-label={textNumberOfMessages + (label ?? '')} styles={notificationTextStyles(theme)}>\n          {textNumberOfMessages}\n        </Text>;\n    }\n  };\n  return <Stack data-ui-id=\"call-with-chat-composite-chat-button-unread-icon\" horizontalAlign=\"center\" verticalAlign=\"center\" styles={notificationIconContainerStyles(theme)}>\n      <Stack>{renderNumber(chatMessagesCount)}</Stack>\n    </Stack>;\n};\nconst notificationIconPaddingREM = 0.225;\nconst notificationSizeREM = 1;\nconst notificationIconContainerStyles = memoizeFunction((theme: ITheme): IIconStyles => ({\n  root: {\n    borderRadius: `${notificationSizeREM}rem`,\n    // Create a css circle. This should match the height.\n    height: `${notificationSizeREM}rem`,\n    minWidth: `${notificationSizeREM}rem`,\n    // 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`,\n    // border should always be white\n    padding: `${notificationIconPaddingREM}rem`,\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}));\nconst notificationTextStyles = memoizeFunction((theme: ITheme): IStackStyles => ({\n  root: {\n    color: 'white',\n    fontSize: theme.fonts.xSmall.fontSize\n  }\n}));"]}
+{"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,gBAAwB,EAAe,EAAE;QAC7D,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,yCAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,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,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAC1G,oBAAoB,CAChB,CACR,CAAC;QACJ,CAAC;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,EAAE,qDAAqD;QAChG,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK,EAAE,sIAAsI;QAC7K,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB,EAAE,gCAAgC;QACjE,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: number): 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/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.js

@@ -17,7 +17,7 @@ export const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible, isChatI
         // Increment unread messages when a new message is received and the chat pane is closed
         const incrementUnreadChatMessagesCount = (event) => {
             if (!isChatPaneVisible && validNewChatMessage(event.message)) {
-                setUnreadChatMessages(prevUnreadChatMessages => {
+                setUnreadChatMessages((prevUnreadChatMessages) => {
                     const newUnreadChatMessages = new Set(prevUnreadChatMessages);
                     newUnreadChatMessages.add(event.message.id);
                     return newUnreadChatMessages;
@@ -27,7 +27,7 @@ export const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible, isChatI
         // Decrement unread messages when a message is deleted and the chat pane is closed
         const decrementUnreadChatMessagesCount = (event) => {
             if (!isChatPaneVisible) {
-                setUnreadChatMessages(prevUnreadChatMessages => {
+                setUnreadChatMessages((prevUnreadChatMessages) => {
                     const newUnreadChatMessages = new Set(prevUnreadChatMessages);
                     newUnreadChatMessages.delete(event.message.id);
                     return newUnreadChatMessages;

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

@@ -1 +1 @@
-{"version":3,"file":"useUnreadMessagesTracker.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAwB,EAAE,iBAA0B,EAAE,eAAwB,EAAU,EAAE;IACjI,sCAAsC;IACtC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,iDAAiD;QACjD,IAAI,iBAAiB,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1C,qBAAqB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,uFAAuF;QACvF,MAAM,gCAAgC,GAAG,CAAC,KAEzC,EAAQ,EAAE;YACT,IAAI,CAAC,iBAAiB,IAAI,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7D,qBAAqB,CAAC,sBAAsB,CAAC,EAAE;oBAC7C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC5C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,kFAAkF;QAClF,MAAM,gCAAgC,GAAG,CAAC,KAEzC,EAAQ,EAAE;YACT,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACvB,qBAAqB,CAAC,sBAAsB,CAAC,EAAE;oBAC7C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC/C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QACF,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;QACpE,WAAW,CAAC,EAAE,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QACnE,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,GAAG,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;YACrE,WAAW,CAAC,GAAG,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;IAC7E,OAAO,kBAAkB,CAAC,IAAI,CAAC;AACjC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAW,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useState } from 'react';\nimport { ChatAdapter } from '../../ChatComposite/adapter/ChatAdapter';\nimport { ChatMessage } from '@azure/communication-chat';\n\n/**\n * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.\n * @private\n */\nexport const useUnreadMessagesTracker = (chatAdapter: ChatAdapter, isChatPaneVisible: boolean, isChatInitiazed: boolean): number => {\n  // Store messageIds of unread messages\n  const [unreadChatMessages, setUnreadChatMessages] = useState<Set<string>>(new Set());\n  useEffect(() => {\n    // Clear unread messages when chat pane is opened\n    if (isChatPaneVisible || !isChatInitiazed) {\n      setUnreadChatMessages(new Set());\n      return;\n    }\n\n    // Increment unread messages when a new message is received and the chat pane is closed\n    const incrementUnreadChatMessagesCount = (event: {\n      message: ChatMessage;\n    }): void => {\n      if (!isChatPaneVisible && validNewChatMessage(event.message)) {\n        setUnreadChatMessages(prevUnreadChatMessages => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.add(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n\n    // Decrement unread messages when a message is deleted and the chat pane is closed\n    const decrementUnreadChatMessagesCount = (event: {\n      message: ChatMessage;\n    }): void => {\n      if (!isChatPaneVisible) {\n        setUnreadChatMessages(prevUnreadChatMessages => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.delete(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n    chatAdapter.on('messageReceived', incrementUnreadChatMessagesCount);\n    chatAdapter.on('messageDeleted', decrementUnreadChatMessagesCount);\n    return () => {\n      chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);\n      chatAdapter.off('messageDeleted', decrementUnreadChatMessagesCount);\n    };\n  }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible, isChatInitiazed]);\n  return unreadChatMessages.size;\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: ChatMessage): boolean => !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');"]}
+{"version":3,"file":"useUnreadMessagesTracker.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,WAAwB,EACxB,iBAA0B,EAC1B,eAAwB,EAChB,EAAE;IACV,sCAAsC;IACtC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IAErF,SAAS,CAAC,GAAG,EAAE;QACb,iDAAiD;QACjD,IAAI,iBAAiB,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1C,qBAAqB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,uFAAuF;QACvF,MAAM,gCAAgC,GAAG,CAAC,KAA+B,EAAQ,EAAE;YACjF,IAAI,CAAC,iBAAiB,IAAI,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7D,qBAAqB,CAAC,CAAC,sBAAsB,EAAE,EAAE;oBAC/C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC5C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,kFAAkF;QAClF,MAAM,gCAAgC,GAAG,CAAC,KAA+B,EAAQ,EAAE;YACjF,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACvB,qBAAqB,CAAC,CAAC,sBAAsB,EAAE,EAAE;oBAC/C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC/C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;QACpE,WAAW,CAAC,EAAE,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QAEnE,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,GAAG,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;YACrE,WAAW,CAAC,GAAG,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;IAE7E,OAAO,kBAAkB,CAAC,IAAI,CAAC;AACjC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAW,EAAE,CAC5D,CAAC,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useState } from 'react';\nimport { ChatAdapter } from '../../ChatComposite/adapter/ChatAdapter';\nimport { ChatMessage } from '@azure/communication-chat';\n\n/**\n * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.\n * @private\n */\nexport const useUnreadMessagesTracker = (\n  chatAdapter: ChatAdapter,\n  isChatPaneVisible: boolean,\n  isChatInitiazed: boolean\n): number => {\n  // Store messageIds of unread messages\n  const [unreadChatMessages, setUnreadChatMessages] = useState<Set<string>>(new Set());\n\n  useEffect(() => {\n    // Clear unread messages when chat pane is opened\n    if (isChatPaneVisible || !isChatInitiazed) {\n      setUnreadChatMessages(new Set());\n      return;\n    }\n\n    // Increment unread messages when a new message is received and the chat pane is closed\n    const incrementUnreadChatMessagesCount = (event: { message: ChatMessage }): void => {\n      if (!isChatPaneVisible && validNewChatMessage(event.message)) {\n        setUnreadChatMessages((prevUnreadChatMessages) => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.add(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n\n    // Decrement unread messages when a message is deleted and the chat pane is closed\n    const decrementUnreadChatMessagesCount = (event: { message: ChatMessage }): void => {\n      if (!isChatPaneVisible) {\n        setUnreadChatMessages((prevUnreadChatMessages) => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.delete(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n\n    chatAdapter.on('messageReceived', incrementUnreadChatMessagesCount);\n    chatAdapter.on('messageDeleted', decrementUnreadChatMessagesCount);\n\n    return () => {\n      chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);\n      chatAdapter.off('messageDeleted', decrementUnreadChatMessagesCount);\n    };\n  }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible, isChatInitiazed]);\n\n  return unreadChatMessages.size;\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: ChatMessage): boolean =>\n  !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');\n"]}

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

@@ -106,6 +106,14 @@ export interface CallWithChatCompositeStrings {
      * Side pane Chat screen title.
      */
     chatPaneTitle: string;
+    /**
+     * Side pane Chat screen title in a breakout room.
+     */
+    breakoutRoomChatPaneTitle: string;
+    /**
+     * Label for spinner when chat content is loading.
+     */
+    chatContentSpinnerLabel: string;
     /**
      * New Message label for chat button with notification icon component.
      */