@azure/communication-react 1.7.0-alpha-202307150015 → 1.7.0-alpha-202307190021

package/dist/communication-react.d.ts

@@ -74,6 +74,7 @@ import { MicrosoftTeamsUserIdentifier } from '@azure/communication-common';
 import { MicrosoftTeamsUserKind } from '@azure/communication-common';
 import type { NetworkDiagnosticChangedEventArgs } from '@azure/communication-calling';
 import { PartialTheme } from '@fluentui/react';
+import { ParticipantCapabilities } from '@azure/communication-calling';
 import { ParticipantRole } from '@azure/communication-calling';
 import { PermissionConstraints } from '@azure/communication-calling';
 import { PersonaInitialsColor } from '@fluentui/react';
@@ -2332,6 +2333,10 @@ export declare interface CallState {
      * Transfer state of call
      */
     transfer: TransferFeature;
+    /**
+     * Proxy of {@link @azure/communication-calling#CapabilitiesFeature}.
+     */
+    capabilities?: CapabilitiesCallFeature;
 }
 
 /**
@@ -3398,6 +3403,18 @@ export declare type CameraSitePermissionsStrings = SitePermissionsStrings;
  */
 export declare type CancelEditCallback = (messageId: string) => void;
 
+/**
+ * State only version of {@link @azure/communication-calling#CapabilitiesFeature}
+ *
+ * @beta
+ */
+export declare interface CapabilitiesCallFeature {
+    /**
+     * Proxy of {@link @azure/communication-calling#CapabilitiesFeature.capabilities}.
+     */
+    capabilities: ParticipantCapabilities;
+}
+
 /**
  * @beta
  * strings for captions setting modal
@@ -6132,7 +6149,7 @@ export declare type FileMetadata = FileSharingMetadata | /* @conditional-compile
 /**
  * @beta
  */
-export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'attachedImage' | 'unknown';
+export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ 'inlineImage' | 'unknown';
 
 /**
  * Meta Data containing basic information about the uploaded file.
@@ -6141,7 +6158,7 @@ export declare type FileMetadataAttachmentType = 'fileSharing' | /* @conditional
  */
 export declare interface FileSharingMetadata extends BaseFileMetadata {
     attachmentType: 'fileSharing';
-    payload?: Record<string, string> | undefined;
+    payload?: Record<string, string>;
 }
 
 /**
@@ -6528,7 +6545,7 @@ export declare interface _Identifiers {
  * @beta
  */
 export declare interface ImageFileMetadata extends BaseFileMetadata {
-    attachmentType: 'inlineImage' | 'attachedImage';
+    attachmentType: 'inlineImage';
     previewUrl?: string;
 }
 

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

@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.7.0-alpha-202307150015';
+var telemetryVersion = '1.7.0-alpha-202307190021';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -1843,6 +1843,15 @@ class CallContext$2 {
             }
         });
     }
+    /* @conditional-compile-remove(capabilities) */
+    setCapabilities(callId, capabilities) {
+        this.modifyState((draft) => {
+            const call = draft.calls[this._callIdHistory.latestCallId(callId)];
+            if (call) {
+                call.capabilities = { capabilities: capabilities };
+            }
+        });
+    }
     setCallScreenShareParticipant(callId, participantKey) {
         this.modifyState((draft) => {
             const call = draft.calls[this._callIdHistory.latestCallId(callId)];
@@ -3264,6 +3273,30 @@ class OptimalVideoCountSubscriber {
     }
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/* @conditional-compile-remove(capabilities) */
+/**
+ * @private
+ */
+class CapabilitiesSubscriber {
+    constructor(callIdRef, context, capabilities) {
+        this.subscribe = () => {
+            this._capabilitiesFeature.on('capabilitiesChanged', this.capabilitiesChanged);
+        };
+        this.unsubscribe = () => {
+            this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);
+        };
+        this.capabilitiesChanged = () => {
+            this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities);
+        };
+        this._callIdRef = callIdRef;
+        this._context = context;
+        this._capabilitiesFeature = capabilities;
+        this.subscribe();
+    }
+}
+
 // Copyright (c) Microsoft Corporation.
 /**
  * Keeps track of the listeners assigned to a particular call because when we get an event from SDK, it doesn't tell us
@@ -3328,6 +3361,8 @@ class CallSubscriber {
             this._optimalVideoCountSubscriber.unsubscribe();
             /* @conditional-compile-remove(close-captions) */
             (_a = this._captionsSubscriber) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            /* @conditional-compile-remove(capabilities) */
+            this._capabilitiesSubscriber.unsubscribe();
         };
         this.stateChanged = () => {
             this._context.setCallState(this._callIdRef.callId, this._call.state);
@@ -3429,6 +3464,8 @@ class CallSubscriber {
         });
         /* @conditional-compile-remove(video-background-effects) */
         this._localVideoStreamVideoEffectsSubscribers = new Map();
+        /* @conditional-compile-remove(capabilities) */
+        this._capabilitiesSubscriber = new CapabilitiesSubscriber(this._callIdRef, this._context, this._call.feature(communicationCalling.Features.Capabilities));
         this.subscribe();
     }
     addParticipantListener(participant) {
@@ -7529,9 +7566,8 @@ const TextFieldWithMention = (props) => {
             // Update the caret position, used for positioning the suggestions popover
             const textField = event.currentTarget;
             const relativePosition = textareaCaretTs.Caret.getRelativePosition(textField);
-            const adjustOffset = Math.max(0, textField.scrollHeight - textField.clientHeight);
-            if (relativePosition.top > adjustOffset) {
-                relativePosition.top -= adjustOffset;
+            if (textField.scrollHeight > textField.clientHeight) {
+                relativePosition.top -= textField.scrollTop;
             }
             setCaretPosition(relativePosition);
             if (triggerPriorIndex !== undefined) {
@@ -16119,7 +16155,8 @@ const _VideoBackgroundEffectsPicker = (props) => {
         optionsByRow.map((options, rowIndex) => {
             var _a;
             return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles((_a = props.styles) === null || _a === void 0 ? void 0 : _a.rowRoot), wrap: props.itemsPerRow === 'wrap', horizontal: true, key: rowIndex, tokens: { childrenGap: '0.5rem' }, "data-ui-id": "video-effects-picker-row" },
-                options.map((option) => (React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { key: option.itemKey, itemKey: option.itemKey })))),
+                options.map((option) => (React__default['default'].createElement(react.FocusZone, { key: option.itemKey, shouldFocusOnMount: option.itemKey === 'none' },
+                    React__default['default'].createElement(_VideoEffectsItem, Object.assign({}, option, { itemKey: option.itemKey }))))),
                 fillCount > 0 &&
                     rowIndex === optionsByRow.length - 1 &&
                     Array.from({ length: fillCount }).map((_, index) => (React__default['default'].createElement(react.Stack, { key: index, styles: hiddenVideoEffectsItemContainerStyles, "data-ui-id": "video-effects-hidden-item" })))));
@@ -16184,7 +16221,11 @@ const captionContainerClassName = react.mergeStyles({
 /**
  * @private
  */
-const captionsBannerClassName = react.mergeStyles(Object.assign({ height: _pxToRem(100), overflowY: 'auto', overflowX: 'hidden' }, scrollbarStyles));
+const captionsBannerClassName = (formFactor) => {
+    return {
+        root: Object.assign({ overflowX: 'hidden', height: formFactor === 'compact' ? '4.5rem' : '6.25rem', overflowY: 'auto' }, scrollbarStyles)
+    };
+};
 /**
  * @private
  */
@@ -16239,7 +16280,7 @@ const _Caption = (props) => {
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 const _CaptionsBanner = (props) => {
-    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings } = props;
+    const { captions, isCaptionsOn, startCaptionsInProgress, onRenderAvatar, strings, formFactor = 'default' } = props;
     const captionsScrollDivRef = React.useRef(null);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = React.useState(true);
     const scrollToBottom = () => {
@@ -16270,7 +16311,7 @@ const _CaptionsBanner = (props) => {
     }, [captions, isAtBottomOfScroll]);
     return (React__default['default'].createElement(React__default['default'].Fragment, null, startCaptionsInProgress && (React__default['default'].createElement(react.FocusZone, { as: "ul", className: captionsContainerClassName },
         isCaptionsOn && (React__default['default'].createElement(c, { innerRef: captionsScrollDivRef },
-            React__default['default'].createElement(react.Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption) => {
+            React__default['default'].createElement(react.Stack, { verticalAlign: "start", styles: captionsBannerClassName(formFactor) }, captions.map((caption) => {
                 return (React__default['default'].createElement("div", { key: caption.id, className: captionContainerClassName, "data-is-focusable": true },
                     React__default['default'].createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
             })))),
@@ -21636,11 +21677,10 @@ const CaptionsBanner = (props) => {
     };
     return (React__default['default'].createElement(React__default['default'].Fragment, null,
         /* @conditional-compile-remove(close-captions) */ isCaptionsSettingsOpen && (React__default['default'].createElement(CaptionsSettingsModal, { showCaptionsSettingsModal: isCaptionsSettingsOpen, onDismissCaptionsSettings: onDismissCaptionsSettings })),
-        /* @conditional-compile-remove(close-captions) */
-        React__default['default'].createElement("div", { className: containerClassName },
+        /* @conditional-compile-remove(close-captions) */ React__default['default'].createElement("div", { className: containerClassName },
             React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
                 React__default['default'].createElement(react.Stack.Item, { style: { width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth } },
-                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { strings: captionsBannerStrings })))),
+                    React__default['default'].createElement(_CaptionsBanner, Object.assign({}, captionsBannerProps, handlers, { formFactor: props.isMobile ? 'compact' : 'default', strings: captionsBannerStrings })))),
             !props.isMobile && captionsBannerProps.isCaptionsOn && (React__default['default'].createElement("div", { className: floatingChildClassName },
                 React__default['default'].createElement(CaptionsBannerMoreButton, { onCaptionsSettingsClick: onClickCaptionsSettings }))))));
 };
@@ -22143,12 +22183,14 @@ const bannerNotificationStyles = {
 /**
  * @private
  */
-const callArrangementContainerStyles = {
-    root: {
-        width: '100%',
-        height: '100%',
-        flexDirection: 'column-reverse' // to allow first initial keyboard focus on ControlBar
-    }
+const callArrangementContainerStyles = (verticalControlBar) => {
+    return {
+        root: {
+            width: '100%',
+            height: '100%',
+            flexDirection: verticalControlBar ? 'unset' : 'column-reverse' // to allow first initial keyboard focus on ControlBar
+        }
+    };
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -22262,7 +22304,7 @@ const CallControls = (props) => {
         /* @conditional-compile-remove(PSTN-calls) */
         React__default['default'].createElement(SendDtmfDialpad, { isMobile: !!props.isMobile, strings: dialpadStrings, showDialpad: showDialpad, onDismissDialpad: onDismissDialpad }),
         React__default['default'].createElement(react.Stack.Item, null,
-            React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: controlBarStyles(theme.semanticColors.bodyBackground) },
+            React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: controlBarStyles(theme.semanticColors.bodyBackground) },
                 microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.microphoneButton) })),
                 cameraButtonIsEnabled && (React__default['default'].createElement(Camera, { displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.cameraButton) })),
                 screenShareButtonIsEnabled && (React__default['default'].createElement(ScreenShare, { option: options === null || options === void 0 ? void 0 : options.screenShareButton, displayType: options === null || options === void 0 ? void 0 : options.displayType, disabled: isDisabled$2(options === null || options === void 0 ? void 0 : options.screenShareButton) })),
@@ -22723,7 +22765,7 @@ const CommonCallControlBar = (props) => {
                         React__default['default'].createElement(HiddenFocusStartPoint, null),
                         React__default['default'].createElement(react.Stack.Item, null,
                             React__default['default'].createElement("div", { ref: controlBarContainerRef },
-                                React__default['default'].createElement(ControlBar, { layout: "horizontal", styles: centerContainerStyles },
+                                React__default['default'].createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
                                     microphoneButtonIsEnabled && (React__default['default'].createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, 
                                         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                                         disabled: props.disableButtonsForHoldScreen || isDisabled$2(options.microphoneButton) })),
@@ -24003,7 +24045,9 @@ const localVideoSelector = reselect__namespace.createSelector([callStatusSelecto
     return {
         isAvailable: !!localVideoStream,
         isMirrored: (_a = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _a === void 0 ? void 0 : _a.isMirrored,
-        renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target
+        renderElement: (_b = localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.view) === null || _b === void 0 ? void 0 : _b.target,
+        /* @conditional-compile-remove(video-background-effects) */
+        activeVideoEffects: localVideoStream === null || localVideoStream === void 0 ? void 0 : localVideoStream.videoEffects
     };
 });
 
@@ -24022,6 +24066,7 @@ var __awaiter$9 = (window && window.__awaiter) || function (thisArg, _arguments,
  */
 /** @beta */
 const VideoEffectsPaneContent = (props) => {
+    var _a;
     const { onDismissError, activeVideoEffectError, 
     /* @conditional-compile-remove(video-background-effects) */
     activeVideoEffectChange } = props;
@@ -24032,6 +24077,8 @@ const VideoEffectsPaneContent = (props) => {
     /* @conditional-compile-remove(video-background-effects) */
     const strings = locale.strings.call;
     /* @conditional-compile-remove(video-background-effects) */
+    const activeVideoEffects = (_a = useSelector$1(localVideoSelector).activeVideoEffects) === null || _a === void 0 ? void 0 : _a.activeEffects;
+    /* @conditional-compile-remove(video-background-effects) */
     const selectableVideoEffects = React.useMemo(() => {
         const videoEffects = [
             {
@@ -24078,19 +24125,19 @@ const VideoEffectsPaneContent = (props) => {
             const blurEffect = {
                 effectName: effectKey
             };
-            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
             activeVideoEffectChange({
                 type: 'blur',
                 timestamp: new Date(Date.now())
             });
             yield adapter.startVideoBackgroundEffect(blurEffect);
+            adapter.updateSelectedVideoBackgroundEffect(blurEffect);
         }
         else if (effectKey === 'none') {
             const noneEffect = {
                 effectName: effectKey
             };
-            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
             yield adapter.stopVideoBackgroundEffects();
+            adapter.updateSelectedVideoBackgroundEffect(noneEffect);
         }
         else {
             const backgroundImg = selectableVideoEffects.find((effect) => {
@@ -24102,15 +24149,22 @@ const VideoEffectsPaneContent = (props) => {
                     key: effectKey,
                     backgroundImageUrl: backgroundImg.backgroundProps.url
                 };
-                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
                 activeVideoEffectChange({
                     type: 'replacement',
                     timestamp: new Date(Date.now())
                 });
                 yield adapter.startVideoBackgroundEffect(replaceEffect);
+                adapter.updateSelectedVideoBackgroundEffect(replaceEffect);
             }
         }
     }), [adapter, activeVideoEffectChange, selectableVideoEffects]);
+    /* @conditional-compile-remove(video-background-effects) */
+    if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {
+        const noneEffect = {
+            effectName: 'none'
+        };
+        adapter.updateSelectedVideoBackgroundEffect(noneEffect);
+    }
     return VideoEffectsPaneTrampoline(onDismissError, activeVideoEffectError, 
     /* @conditional-compile-remove(video-background-effects) */
     selectableVideoEffects, 
@@ -24127,7 +24181,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
-    return (React__default['default'].createElement(react.Stack, { horizontalAlign: "center" },
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles({ paddingLeft: '0.5rem' }) },
         activeVideoEffectError && isCameraOn && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React__default['default'].createElement(react.MessageBar, { messageBarType: react.MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
         React__default['default'].createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
@@ -24599,14 +24653,18 @@ const CallArrangement = (props) => {
     const hasJoinedCall = useSelector$1(getCallStatus) === 'Connected';
     const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
     const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
+    const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
     return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
         React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
-            React__default['default'].createElement(react.Stack, { grow: true, styles: callArrangementContainerStyles },
-                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles({ zIndex: CONTROL_BAR_Z_INDEX }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
+            React__default['default'].createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
+                ((_b = props.callControlProps) === null || _b === void 0 ? void 0 : _b.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
+                        zIndex: CONTROL_BAR_Z_INDEX,
+                        padding: verticalControlBar ? '0.25rem' : 'unset'
+                    }) }, isLegacyCallControlEnabled((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView, 
                     /* @conditional-compile-remove(one-to-n-calling) */
                     peopleButtonChecked: isPeoplePaneOpen, 
                     /* @conditional-compile-remove(one-to-n-calling) */
-                    onPeopleButtonClicked: togglePeoplePane }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, 
+                    onPeopleButtonClicked: togglePeoplePane, displayVertical: verticalControlBar }))) : (React__default['default'].createElement(CommonCallControlBar, Object.assign({}, props.callControlProps, { callControls: props.callControlProps.options, callAdapter: adapter, mobileView: props.mobileView, disableButtonsForLobbyPage: isInLobby, 
                     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
                     disableButtonsForHoldScreen: isInLocalHold, peopleButtonChecked: isPeoplePaneOpen, onPeopleButtonClicked: togglePeoplePane, onMoreButtonClicked: onMoreButtonClicked, 
                     /* @conditional-compile-remove(close-captions) */
@@ -24614,7 +24672,7 @@ const CallArrangement = (props) => {
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: openVideoEffectsPane, 
                     /* @conditional-compile-remove(PSTN-calls) */
-                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined }))))),
+                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar }))))),
                 ((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
                     React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked, 
                         /* @conditional-compile-remove(PSTN-calls) */
@@ -28627,11 +28685,6 @@ const notificationTextStyles = react.memoizeFunction((theme) => ({
 }));
 
 // Copyright (c) Microsoft Corporation.
-/**
- * Helper function to determine if the message in the event is a valid one from a user.
- * Display name is used since system messages will not have one.
- */
-const validNewChatMessage = (message) => !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');
 const filledIcon = React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarChatButtonActive' });
 const regularIcon = React__default['default'].createElement(CallWithChatCompositeIcon, { iconName: 'ControlBarChatButtonInactive' });
 /**
@@ -28639,8 +28692,7 @@ const regularIcon = React__default['default'].createElement(CallWithChatComposit
  */
 const ChatButtonWithUnreadMessagesBadge = (props) => {
     var _a, _b, _c, _d;
-    const { chatAdapter, isChatPaneVisible, newMessageLabel } = props;
-    const [unreadChatMessagesCount, setUnreadChatMessagesCount] = React.useState(0);
+    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
@@ -28659,9 +28711,25 @@ const ChatButtonWithUnreadMessagesBadge = (props) => {
     const onRenderOnIcon = React.useCallback(() => baseIcon, [baseIcon]);
     const notificationOnIcon = React.useCallback(() => {
         return (React__default['default'].createElement(react.Stack, { styles: chatNotificationContainerStyles },
-            unreadChatMessagesCount > 0 && (React__default['default'].createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
+            unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && (React__default['default'].createElement(NotificationIcon, { chatMessagesCount: unreadChatMessagesCount, label: newMessageLabel })),
             baseIcon));
-    }, [unreadChatMessagesCount, newMessageLabel, baseIcon]);
+    }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);
+    return (React__default['default'].createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
+};
+const chatNotificationContainerStyles = {
+    root: {
+        display: 'inline',
+        position: 'relative'
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.
+ * @private
+ */
+const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
+    const [unreadChatMessagesCount, setUnreadChatMessagesCount] = React.useState(0);
     React.useEffect(() => {
         if (isChatPaneVisible) {
             setUnreadChatMessagesCount(0);
@@ -28677,14 +28745,13 @@ const ChatButtonWithUnreadMessagesBadge = (props) => {
             chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);
         };
     }, [chatAdapter, setUnreadChatMessagesCount, isChatPaneVisible, unreadChatMessagesCount]);
-    return (React__default['default'].createElement(ChatButton, Object.assign({}, props, { "data-ui-id": "call-with-chat-composite-chat-button", onRenderOffIcon: notificationOnIcon, onRenderOnIcon: onRenderOnIcon, strings: chatStrings })));
-};
-const chatNotificationContainerStyles = {
-    root: {
-        display: 'inline',
-        position: 'relative'
-    }
+    return unreadChatMessagesCount;
 };
+/**
+ * Helper function to determine if the message in the event is a valid one from a user.
+ * Display name is used since system messages will not have one.
+ */
+const validNewChatMessage = (message) => !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');
 
 // Copyright (c) Microsoft Corporation.
 const CallWithChatScreen = (props) => {
@@ -28762,18 +28829,22 @@ const CallWithChatScreen = (props) => {
             disabled: chatButtonDisabled
         }
         : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);
+    const unreadChatMessagesCount = useUnreadMessagesTracker(chatProps.adapter, isChatOpen);
     const customChatButton = React.useCallback((args) => ({
         placement: mobileView ? 'primary' : 'secondary',
-        onRenderButton: () => (React__default['default'].createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: chatProps.adapter, isChatPaneVisible: isChatOpen, checked: isChatOpen, showLabel: args.displayType !== 'compact', onClick: toggleChat, disabled: chatButtonDisabled, strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel }))
+        onRenderButton: () => (React__default['default'].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 }))
     }), [
         callWithChatStrings.chatButtonNewMessageNotificationLabel,
         chatButtonStrings,
-        chatProps.adapter,
         commonButtonStyles,
         isChatOpen,
         chatButtonDisabled,
         mobileView,
-        toggleChat
+        toggleChat,
+        unreadChatMessagesCount,
+        isOnHold
     ]);
     const callControlOptionsFromProps = React.useMemo(() => (Object.assign({}, (typeof props.callControls === 'object' ? props.callControls : {}))), [props.callControls]);
     const injectedCustomButtonsFromProps = React.useMemo(() => {