@azure/communication-react 1.11.1-alpha-202401050013 → 1.11.1-alpha-202401090013

package/dist/communication-react.d.ts

@@ -2303,7 +2303,7 @@ export declare interface CallCompositeStrings {
     /**
      * String for title when the call is rejected by the callee
      */
-    callRejectedTitle: string;
+    callRejectedTitle?: string;
     /**
      * String for more details when the call is rejected by the callee
      */
@@ -2448,7 +2448,7 @@ export declare type CallingHandlersOptions = {
 export declare type CallingReturnProps<Component extends (props: any) => JSX.Element> = GetCallingSelector<Component> extends (state: CallClientState, props: any) => any ? ReturnType<GetCallingSelector<Component>> & Common<CallingHandlers, Parameters<Component>[0]> : never;
 
 /**
- * @beta
+ * @public
  * Type for representing a set of sounds to use for different calling events
  */
 export declare type CallingSounds = {
@@ -3135,12 +3135,16 @@ export declare interface CallWithChatAdapterSubscriptions {
     off(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
     off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
     on(event: 'messageReceived', listener: MessageReceivedListener): void;
+    on(event: 'messageEdited', listener: MessageEditedListener): void;
+    on(event: 'messageDeleted', listener: MessageDeletedListener): void;
     on(event: 'messageSent', listener: MessageSentListener): void;
     on(event: 'messageRead', listener: MessageReadListener): void;
     on(event: 'chatParticipantsAdded', listener: ParticipantsAddedListener): void;
     on(event: 'chatParticipantsRemoved', listener: ParticipantsRemovedListener): void;
     on(event: 'chatError', listener: (e: AdapterError) => void): void;
     off(event: 'messageReceived', listener: MessageReceivedListener): void;
+    off(event: 'messageEdited', listener: MessageEditedListener): void;
+    off(event: 'messageDeleted', listener: MessageDeletedListener): void;
     off(event: 'messageSent', listener: MessageSentListener): void;
     off(event: 'messageRead', listener: MessageReadListener): void;
     off(event: 'chatParticipantsAdded', listener: ParticipantsAddedListener): void;
@@ -3680,7 +3684,7 @@ export declare interface CallWithChatControlOptions extends CommonCallControlOpt
  *
  * @public
  */
-export declare type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | /* @conditional-compile-remove(close-captions) */ 'isCaptionLanguageChanged' | /* @conditional-compile-remove(close-captions) */ 'isSpokenLanguageChanged' | /* @conditional-compile-remove(capabilities) */ 'capabilitiesChanged' | 'messageReceived' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
+export declare type CallWithChatEvent = 'callError' | 'chatError' | 'callEnded' | 'isMutedChanged' | 'callIdChanged' | 'isLocalScreenSharingActiveChanged' | 'displayNameChanged' | 'isSpeakingChanged' | 'callParticipantsJoined' | 'callParticipantsLeft' | 'selectedMicrophoneChanged' | 'selectedSpeakerChanged' | /* @conditional-compile-remove(close-captions) */ 'isCaptionsActiveChanged' | /* @conditional-compile-remove(close-captions) */ 'captionsReceived' | /* @conditional-compile-remove(close-captions) */ 'isCaptionLanguageChanged' | /* @conditional-compile-remove(close-captions) */ 'isSpokenLanguageChanged' | /* @conditional-compile-remove(capabilities) */ 'capabilitiesChanged' | 'messageReceived' | 'messageEdited' | 'messageDeleted' | 'messageSent' | 'messageRead' | 'chatParticipantsAdded' | 'chatParticipantsRemoved';
 
 /**
  * @beta
@@ -4116,6 +4120,14 @@ export declare interface ChatAdapterSubscribers {
      * Subscribe function for 'messageReceived' event.
      */
     on(event: 'messageReceived', listener: MessageReceivedListener): void;
+    /**
+     * Subscribe function for 'messageEdited' event.
+     */
+    on(event: 'messageEdited', listener: MessageEditedListener): void;
+    /**
+     * Subscribe function for 'messageDeleted' event.
+     */
+    on(event: 'messageDeleted', listener: MessageDeletedListener): void;
     /**
      * Subscribe function for 'messageSent' event.
      */
@@ -4144,6 +4156,14 @@ export declare interface ChatAdapterSubscribers {
      * Unsubscribe function for 'messageReceived' event.
      */
     off(event: 'messageReceived', listener: MessageReceivedListener): void;
+    /**
+     * Unsubscribe function for 'messageEdited' event.
+     */
+    off(event: 'messageEdited', listener: MessageEditedListener): void;
+    /**
+     * Unsubscribe function for 'messageDeleted' event.
+     */
+    off(event: 'messageDeleted', listener: MessageDeletedListener): void;
     /**
      * Unsubscribe function for 'messageSent' event.
      */
@@ -7638,6 +7658,20 @@ export declare interface MessageCommon {
  */
 export declare type MessageContentType = 'text' | 'html' | 'richtext/html' | 'unknown';
 
+/**
+ * Callback for {@link ChatAdapterSubscribers} 'messageDeleted' event.
+ *
+ * @public
+ */
+export declare type MessageDeletedListener = MessageReceivedListener;
+
+/**
+ * Callback for {@link ChatAdapterSubscribers} 'messageEdited' event.
+ *
+ * @public
+ */
+export declare type MessageEditedListener = MessageReceivedListener;
+
 /**
  * Props to render a single message.
  *
@@ -9331,7 +9365,7 @@ export declare interface SitePermissionsStyles extends BaseCustomStyles {
 }
 
 /**
- * @beta
+ * @public
  * Type for representing a custom sound to use for a calling event
  */
 export declare type SoundEffect = {

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

@@ -11,11 +11,11 @@ var React = require('react');
 var react = require('@fluentui/react');
 var reactIcons = require('@fluentui/react-icons');
 var textareaCaretTs = require('textarea-caret-ts');
+var reactComponents = require('@fluentui/react-components');
 var useDebounce = require('use-debounce');
 var reactFileTypeIcons = require('@fluentui/react-file-type-icons');
 var uuid = require('uuid');
 var reactChat = require('@fluentui-contrib/react-chat');
-var reactComponents = require('@fluentui/react-components');
 var react$1 = require('@griffel/react');
 var htmlToReact = require('html-to-react');
 var Linkify = require('react-linkify');
@@ -170,7 +170,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.11.1-alpha-202401050013';
+var telemetryVersion = '1.11.1-alpha-202401090013';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -7361,17 +7361,17 @@ react.mergeStyles({
 /**
  * @private
  */
-const suggestionListStyle = react.mergeStyles({
-    padding: '0.25rem 0rem 0',
-    overflow: 'visible',
-    overflowY: 'scroll'
+const useSuggestionListStyle = reactComponents.makeStyles({
+    root: Object.assign(Object.assign(Object.assign({}, reactComponents.shorthands.padding('0.25rem', '0rem', '0rem')), reactComponents.shorthands.overflow('visible')), { overflowY: 'scroll' })
 });
 /**
  * @private
  */
 const suggestionItemWrapperStyle = (theme) => {
     return react.mergeStyles({
-        margin: '0.05rem 0',
+        margin: '0.0625rem 0',
+        'scroll-margin-top': '0.0625rem',
+        'scroll-margin-bottom': '0.0625rem',
         '&:focus-visible': {
             outline: `${theme.palette.black} solid 0.1rem`
         }
@@ -7391,6 +7391,37 @@ const suggestionItemStackStyle = (theme, isSuggestionHovered, activeBorder) => {
     });
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+// These are styles that should be used during the migration from FluentUI v8 Stack component to flex.
+// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-flex-stack--page
+/**
+ * @private
+ */
+const useDefaultStackStyles = reactComponents.makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'nowrap',
+        width: 'auto',
+        height: 'auto',
+        boxSizing: 'border-box',
+        '> *': {
+            textOverflow: 'ellipsis'
+        }
+        // As per CSS props, these two styles are not in the original Stack styles
+        // (and they have higher specificity that just classes and will be applied instead of rules in classes).
+        // They also break a layout for the first selected item in MentionPopover if applied.
+        // Please check that component, if you want to apply these styles
+        // '> :not(:first-child)': {
+        //   marginTop: '0px'
+        // },
+        // '> *:not(.ms-StackItem)': {
+        //   flexShrink: 1
+        // }
+    }
+});
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -7405,9 +7436,11 @@ const _MentionPopover = (props) => {
     const ids = useIdentifiers();
     const localeStrings = useLocale$1().strings;
     const popoverRef = React.useRef();
+    const suggestionsListRef = React.useRef(null);
     const [position, setPosition] = React.useState();
     const [hoveredSuggestion, setHoveredSuggestion] = React.useState(undefined);
-    const [changedSelection, setChangedSelection] = React.useState(undefined); // Selection UI as per teams
+    const suggestionListStyle = useSuggestionListStyle();
+    const defaultStackStyles = useDefaultStackStyles();
     const dismissPopoverWhenClickingOutside = React.useCallback((e) => {
         const target = e.target;
         if (popoverRef.current && !popoverRef.current.contains(target)) {
@@ -7415,13 +7448,13 @@ const _MentionPopover = (props) => {
         }
     }, [onDismiss]);
     React.useEffect(() => {
-        if (changedSelection === undefined) {
-            setChangedSelection(false);
-        }
-        else if (changedSelection === false) {
-            setChangedSelection(true);
+        if (suggestionsListRef.current && activeSuggestionIndex !== undefined && activeSuggestionIndex >= 0) {
+            const selectedItem = suggestionsListRef.current.children[activeSuggestionIndex];
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
         }
-    }, [activeSuggestionIndex, changedSelection]);
+    }, [activeSuggestionIndex]);
     React.useEffect(() => {
         window && window.addEventListener('click', dismissPopoverWhenClickingOutside);
         return () => {
@@ -7475,14 +7508,13 @@ const _MentionPopover = (props) => {
         return (React.createElement("div", { "data-is-focusable": true, "data-ui-id": ids.mentionSuggestionItem, key: suggestion.id, onClick: () => onSuggestionSelected(suggestion), onMouseEnter: () => setHoveredSuggestion(suggestion), onMouseLeave: () => setHoveredSuggestion(undefined), onKeyDown: (e) => {
                 handleOnKeyDown(e);
             }, className: suggestionItemWrapperStyle(theme) },
-            React.createElement(react.Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, (changedSelection !== null && changedSelection !== void 0 ? changedSelection : false) && active) }, personaRenderer(suggestion.displayText))));
+            React.createElement(react.Stack, { horizontal: true, className: suggestionItemStackStyle(theme, (hoveredSuggestion === null || hoveredSuggestion === void 0 ? void 0 : hoveredSuggestion.id) === suggestion.id, active) }, personaRenderer(suggestion.displayText))));
     }, [
         handleOnKeyDown,
         theme,
         /* @conditional-compile-remove(mention) */
         ids,
         hoveredSuggestion,
-        changedSelection,
         personaRenderer
     ]);
     const getHeaderTitle = React.useCallback(() => {
@@ -7497,9 +7529,7 @@ const _MentionPopover = (props) => {
             maxWidth: position.maxWidth
         }, mentionPopoverContainerStyle(theme), Object.assign(Object.assign({}, position), { position: 'absolute' })) },
         React.createElement(react.Stack.Item, { styles: headerStyleThemed(theme), "aria-label": title }, getHeaderTitle()),
-        React.createElement(react.Stack
-        /* @conditional-compile-remove(mention) */
-        , { "data-ui-id": ids.mentionSuggestionList, className: suggestionListStyle }, suggestions.map((suggestion, index) => {
+        React.createElement("div", { className: reactComponents.mergeClasses(defaultStackStyles.root, suggestionListStyle.root), "data-ui-id": ids.mentionSuggestionList, ref: suggestionsListRef }, suggestions.map((suggestion, index) => {
             const active = index === activeSuggestionIndex;
             return onRenderSuggestionItem
                 ? onRenderSuggestionItem(suggestion, onSuggestionSelected, active)
@@ -7643,6 +7673,7 @@ const TextFieldWithMention = (props) => {
         if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
         }
+        let isActiveSuggestionIndexUpdated = false;
         if (mentionSuggestions.length > 0) {
             if (ev.key === 'ArrowUp') {
                 ev.preventDefault();
@@ -7650,6 +7681,7 @@ const TextFieldWithMention = (props) => {
                     ? mentionSuggestions.length - 1
                     : Math.max(activeSuggestionIndex - 1, 0);
                 setActiveSuggestionIndex(newActiveIndex);
+                isActiveSuggestionIndexUpdated = true;
             }
             else if (ev.key === 'ArrowDown') {
                 ev.preventDefault();
@@ -7657,9 +7689,13 @@ const TextFieldWithMention = (props) => {
                     ? 0
                     : Math.min(activeSuggestionIndex + 1, mentionSuggestions.length - 1);
                 setActiveSuggestionIndex(newActiveIndex);
+                isActiveSuggestionIndexUpdated = true;
             }
             else if (ev.key === 'Escape') {
                 updateMentionSuggestions([]);
+                // reset active suggestion index when suggestions are closed
+                setActiveSuggestionIndex(undefined);
+                isActiveSuggestionIndexUpdated = true;
             }
         }
         if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {
@@ -7674,6 +7710,11 @@ const TextFieldWithMention = (props) => {
             }
             onEnterKeyDown && onEnterKeyDown();
         }
+        else if (!isActiveSuggestionIndexUpdated) {
+            // Update the active suggestion index if the user is typing,
+            // otherwise the focus will be lost
+            setActiveSuggestionIndex(undefined);
+        }
         onKeyDown && onKeyDown(ev);
     }, [
         onEnterKeyDown,
@@ -22834,6 +22875,22 @@ class AzureCommunicationChatAdapter {
             this.emitter.emit('messageSent', { message });
         }
     }
+    messageEditedListener(event) {
+        const isCurrentChatAdapterThread = event.threadId === this.chatThreadClient.threadId;
+        if (!isCurrentChatAdapterThread) {
+            return;
+        }
+        const message = convertEventToChatMessage(event);
+        this.emitter.emit('messageEdited', { message });
+    }
+    messageDeletedListener(event) {
+        const isCurrentChatAdapterThread = event.threadId === this.chatThreadClient.threadId;
+        if (!isCurrentChatAdapterThread) {
+            return;
+        }
+        const message = convertEventToChatMessage(event);
+        this.emitter.emit('messageDeleted', { message });
+    }
     messageReadListener({ chatMessageId, recipient }) {
         const message = this.getState().thread.chatMessages[chatMessageId];
         if (message) {
@@ -22854,6 +22911,8 @@ class AzureCommunicationChatAdapter {
         this.chatClient.on('participantsAdded', this.participantsAddedListener.bind(this));
         this.chatClient.on('participantsRemoved', this.participantsRemovedListener.bind(this));
         this.chatClient.on('chatMessageReceived', this.messageReceivedListener.bind(this));
+        this.chatClient.on('chatMessageEdited', this.messageEditedListener.bind(this));
+        this.chatClient.on('chatMessageDeleted', this.messageDeletedListener.bind(this));
         this.chatClient.on('readReceiptReceived', this.messageReadListener.bind(this));
         this.chatClient.on('participantsRemoved', this.participantsRemovedListener.bind(this));
     }
@@ -22862,6 +22921,8 @@ class AzureCommunicationChatAdapter {
         this.chatClient.off('participantsAdded', this.participantsAddedListener.bind(this));
         this.chatClient.off('participantsRemoved', this.participantsRemovedListener.bind(this));
         this.chatClient.off('chatMessageReceived', this.messageReceivedListener.bind(this));
+        this.chatClient.off('chatMessageEdited', this.messageEditedListener.bind(this));
+        this.chatClient.off('chatMessageDeleted', this.messageDeletedListener.bind(this));
         this.chatClient.off('readReceiptReceived', this.messageReadListener.bind(this));
         this.chatClient.off('participantsRemoved', this.participantsRemovedListener.bind(this));
     }
@@ -22891,14 +22952,22 @@ const convertEventToChatMessage = (event) => {
     return {
         id: event.id,
         version: event.version,
-        content: { message: event.message },
+        content: isChatMessageDeletedEvent(event) ? undefined : { message: event.message },
         type: convertEventType(event.type),
         sender: event.sender,
         senderDisplayName: event.senderDisplayName,
         sequenceId: '',
-        createdOn: new Date(event.createdOn)
+        createdOn: new Date(event.createdOn),
+        editedOn: isChatMessageEditedEvent(event) ? event.editedOn : undefined,
+        deletedOn: isChatMessageDeletedEvent(event) ? event.deletedOn : undefined
     };
 };
+const isChatMessageEditedEvent = (event) => {
+    return event['editedOn'] !== undefined;
+};
+const isChatMessageDeletedEvent = (event) => {
+    return event['deletedOn'] !== undefined;
+};
 // only text/html message type will be received from event
 const convertEventType = (type) => {
     const lowerCaseType = type.toLowerCase();
@@ -29367,9 +29436,9 @@ const configurationSectionStyle = {
 /**
  * @private
  */
-const selectionContainerStyle = (theme) => react.mergeStyles({
+const selectionContainerStyle = (theme, noSpeakerDropdownShown) => react.mergeStyles({
     width: '100%',
-    height: `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
+    height: noSpeakerDropdownShown ? 'auto' : `${CONFIGURATION_PAGE_SECTION_HEIGHT_REM}rem`,
     padding: '1rem',
     borderRadius: theme.effects.roundedCorner6,
     border: `0.0625rem solid ${theme.palette.neutralLight}`,
@@ -29628,7 +29697,7 @@ const localVideoViewOptions = {
  * @private
  */
 const LocalDeviceSettings = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = useTheme();
     const locale = useLocale();
     /* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(video-background-effects) */ /* @conditional-compile-remove(rooms) */
@@ -29669,13 +29738,15 @@ const LocalDeviceSettings = (props) => {
     const hasCameras = props.cameras.length > 0;
     const hasMicrophones = props.microphones.length > 0;
     const hasSpeakers = props.speakers.length > 0;
+    /* @conditional-compile-remove(unsupported-browser) */
+    const isSafariWithNoSpeakers = ((_b = adapter.getState().environmentInfo) === null || _b === void 0 ? void 0 : _b.environment.browser.toLowerCase()) === 'safari' && !hasSpeakers;
     const cameraGrantedDropdown = (React.createElement(react.Dropdown, { "data-ui-id": "call-composite-local-camera-settings", "aria-labelledby": 'call-composite-local-camera-settings-label', placeholder: hasCameras ? defaultPlaceHolder : noCameraLabel, options: cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }], styles: dropDownStyles(theme), disabled: !cameraPermissionGranted || !hasCameras, errorMessage: props.cameraPermissionGranted === undefined || props.cameraPermissionGranted
             ? undefined
             : locale.strings.call.cameraPermissionDenied, defaultSelectedKey: micPermissionGranted
             ? props.selectedCamera
                 ? props.selectedCamera.id
                 : props.cameras
-                    ? (_b = props.cameras[0]) === null || _b === void 0 ? void 0 : _b.id
+                    ? (_c = props.cameras[0]) === null || _c === void 0 ? void 0 : _c.id
                     : ''
             : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectCamera(props.cameras[index !== null && index !== void 0 ? index : 0], localVideoViewOptions);
@@ -29689,6 +29760,16 @@ const LocalDeviceSettings = (props) => {
             : 'deniedOrUnknown', onChange: (event, option, index) => {
             props.onSelectMicrophone(props.microphones[index !== null && index !== void 0 ? index : 0]);
         }, onRenderTitle: (props) => onRenderTitle('Microphone', props) }))));
+    const speakerDropdown = (React.createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
+            props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
+        }, onRenderTitle: (props) => onRenderTitle('Speaker', props) }));
+    const SafariBrowserSpeakerDropdownTrampoline = () => {
+        /* @conditional-compile-remove(unsupported-browser) */
+        if (isSafariWithNoSpeakers) {
+            return React.createElement(React.Fragment, null);
+        }
+        return speakerDropdown;
+    };
     return (React.createElement(react.Stack, { "data-ui-id": "call-composite-device-settings", tokens: mainStackTokens },
         roleCanUseCamera && (React.createElement(react.Stack, null,
             React.createElement(react.Stack, { horizontal: true, horizontalAlign: "space-between", styles: cameraAndVideoEffectsContainerStyleDesktop },
@@ -29708,9 +29789,7 @@ const LocalDeviceSettings = (props) => {
                     dropdownProps: dropdownProps, 
                     /* @conditional-compile-remove(call-readiness) */
                     onClickEnableDevicePermission: props.onClickEnableDevicePermission }),
-                React.createElement(react.Dropdown, { "aria-labelledby": 'call-composite-local-sound-settings-label', placeholder: hasSpeakers ? defaultPlaceHolder : noSpeakersLabel, styles: dropDownStyles(theme), disabled: props.speakers.length === 0, options: getDropDownList(props.speakers), defaultSelectedKey: props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers), onChange: (event, option, index) => {
-                        props.onSelectSpeaker(props.speakers[index !== null && index !== void 0 ? index : 0]);
-                    }, onRenderTitle: (props) => onRenderTitle('Speaker', props) })))));
+                React.createElement(SafariBrowserSpeakerDropdownTrampoline, null)))));
 };
 const defaultDeviceId = (devices) => {
     if (devices.length === 0) {
@@ -30403,7 +30482,10 @@ const ConfigurationPage = (props) => {
                     localPreviewTrampoline(mobileWithPreview, 
                     /* @conditional-compile-remove(rooms) */ !!(role === 'Consumer')),
                     React.createElement(react.Stack, { styles: mobileView ? undefined : configurationSectionStyle },
-                        !mobileWithPreview && (React.createElement(react.Stack, { className: mobileView ? undefined : selectionContainerStyle(theme) },
+                        !mobileWithPreview && (React.createElement(react.Stack, { className: mobileView
+                                ? undefined
+                                : selectionContainerStyle(theme, isSafariBrowserEnvironmentTrampoline(
+                                /* @conditional-compile-remove(unsupported-browser) */ environmentInfo)) },
                             React.createElement(LocalDeviceSettings, Object.assign({}, options, localDeviceSettingsHandlers, { cameraPermissionGranted: cameraPermissionGrantedTrampoline(cameraPermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ videoState), microphonePermissionGranted: micPermissionGrantedTrampoline(microphonePermissionGranted, 
                                 /* @conditional-compile-remove(call-readiness) */ audioState), 
@@ -30445,6 +30527,10 @@ const Logo = (props) => {
     }
     return React.createElement(react.Image, { styles: logoStyles(props.logo.shape), src: props.logo.url, alt: props.logo.alt });
 };
+const isSafariBrowserEnvironmentTrampoline = (environmentInfo) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return environmentInfo && (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser.toLowerCase()) === 'safari';
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -32809,6 +32895,9 @@ class AzureCommunicationCallAdapter {
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(video-background-effects) */ options }) => __awaiter$5(void 0, void 0, void 0, function* () {
+    if (communicationCommon.isMicrosoftTeamsUserIdentifier(userId)) {
+        throw new Error('Microsoft Teams user identifier is not supported by AzureCommunicationCallAdapter. Instead use TeamsCallAdapter.');
+    }
     return _createAzureCommunicationCallAdapterInner({
         userId,
         displayName,
@@ -32848,6 +32937,9 @@ const _createAzureCommunicationCallAdapterInner = ({ userId, displayName, creden
  * @beta
  */
 const createTeamsCallAdapter = ({ userId, credential, locator, options }) => __awaiter$5(void 0, void 0, void 0, function* () {
+    if (communicationCommon.isCommunicationUserIdentifier(userId)) {
+        throw new Error('Communication User identifier is not supported by TeamsCallAdapter, please use our AzureCommunicationCallAdapter.');
+    }
     const callClient = _createStatefulCallClientInner({
         userId
     }, undefined, 'Call');
@@ -33570,23 +33662,42 @@ const chatNotificationContainerStyles = {
  * @private
  */
 const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
-    const [unreadChatMessagesCount, setUnreadChatMessagesCount] = React.useState(0);
+    // Store messageIds of unread messages
+    const [unreadChatMessages, setUnreadChatMessages] = React.useState(new Set());
     React.useEffect(() => {
+        // Clear unread messages when chat pane is opened
         if (isChatPaneVisible) {
-            setUnreadChatMessagesCount(0);
+            setUnreadChatMessages(new Set());
             return;
         }
+        // Increment unread messages when a new message is received and the chat pane is closed
         const incrementUnreadChatMessagesCount = (event) => {
             if (!isChatPaneVisible && validNewChatMessage(event.message)) {
-                setUnreadChatMessagesCount(unreadChatMessagesCount + 1);
+                setUnreadChatMessages((prevUnreadChatMessages) => {
+                    const newUnreadChatMessages = new Set(prevUnreadChatMessages);
+                    newUnreadChatMessages.add(event.message.id);
+                    return newUnreadChatMessages;
+                });
+            }
+        };
+        // Decrement unread messages when a message is deleted and the chat pane is closed
+        const decrementUnreadChatMessagesCount = (event) => {
+            if (!isChatPaneVisible) {
+                setUnreadChatMessages((prevUnreadChatMessages) => {
+                    const newUnreadChatMessages = new Set(prevUnreadChatMessages);
+                    newUnreadChatMessages.delete(event.message.id);
+                    return newUnreadChatMessages;
+                });
             }
         };
         chatAdapter.on('messageReceived', incrementUnreadChatMessagesCount);
+        chatAdapter.on('messageDeleted', decrementUnreadChatMessagesCount);
         return () => {
             chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);
+            chatAdapter.off('messageDeleted', decrementUnreadChatMessagesCount);
         };
-    }, [chatAdapter, setUnreadChatMessagesCount, isChatPaneVisible, unreadChatMessagesCount]);
-    return unreadChatMessagesCount;
+    }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible]);
+    return unreadChatMessages.size;
 };
 /**
  * Helper function to determine if the message in the event is a valid one from a user.
@@ -34453,6 +34564,12 @@ class AzureCommunicationCallWithChatAdapter {
             case 'messageReceived':
                 this.chatAdapter.on('messageReceived', listener);
                 break;
+            case 'messageEdited':
+                this.chatAdapter.on('messageEdited', listener);
+                break;
+            case 'messageDeleted':
+                this.chatAdapter.on('messageDeleted', listener);
+                break;
             case 'messageSent':
                 this.chatAdapter.on('messageSent', listener);
                 break;
@@ -34527,6 +34644,12 @@ class AzureCommunicationCallWithChatAdapter {
             case 'messageReceived':
                 this.chatAdapter.off('messageReceived', listener);
                 break;
+            case 'messageEdited':
+                this.chatAdapter.off('messageEdited', listener);
+                break;
+            case 'messageDeleted':
+                this.chatAdapter.off('messageDeleted', listener);
+                break;
             case 'messageSent':
                 this.chatAdapter.off('messageSent', listener);
                 break;