@azure/communication-react 1.16.0-alpha-202404252104 → 1.16.0-alpha-202404270012

package/dist/dist-cjs/communication-react/{index-BTXDJhYg.js → index-aGXLnB_I.js}

@@ -176,7 +176,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.16.0-alpha-202404252104';
+var telemetryVersion = '1.16.0-alpha-202404270012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -1359,7 +1359,7 @@ const _captionsBannerSelector = reselect__namespace.createSelector([getCaptions,
         var _a, _b, _c;
         const userId = getCaptionsSpeakerIdentifier(c);
         return {
-            id: (_a = c.speaker.displayName) !== null && _a !== void 0 ? _a : 'Unnamed Participant' + index,
+            id: ((_a = c.speaker.displayName) !== null && _a !== void 0 ? _a : 'Unnamed Participant') + index,
             displayName: (_b = c.speaker.displayName) !== null && _b !== void 0 ? _b : 'Unnamed Participant',
             captionText: (_c = c.captionText) !== null && _c !== void 0 ? _c : '',
             userId
@@ -8727,7 +8727,7 @@ const iconWrapperStyle$1 = react.mergeStyles({
  * @private
  */
 const InputBoxButton = (props) => {
-    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId } = props;
+    const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent, 'data-testId': dataTestId, ariaDisabled = false } = props;
     const [isHover, setIsHover] = React.useState(false);
     const mergedButtonStyle = react.mergeStyles(inputBoxButtonStyle, className);
     const theme = react.useTheme();
@@ -8739,13 +8739,14 @@ const InputBoxButton = (props) => {
         backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
     };
     return (React.createElement(react.TooltipHost, { hostClassName: inputBoxButtonTooltipStyle, content: tooltipContent, calloutProps: Object.assign({}, calloutProps) },
-        React.createElement(react.IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
-                setIsHover(true);
-            }, onMouseLeave: () => {
-                setIsHover(false);
-            }, 
-            // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
-            onRenderIcon: () => React.createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)), "data-testid": dataTestId })));
+        React.createElement(react.Stack, { "aria-disabled": ariaDisabled },
+            React.createElement(react.IconButton, { className: mergedButtonStyle, ariaLabel: ariaLabel, onClick: onClick, id: id, onMouseEnter: () => {
+                    setIsHover(true);
+                }, onMouseLeave: () => {
+                    setIsHover(false);
+                }, 
+                // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none
+                onRenderIcon: () => React.createElement(react.Stack, { className: iconWrapperStyle$1 }, onRenderIcon(isHover)), "data-testid": dataTestId }))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -9043,6 +9044,25 @@ const sanitizeText = (message) => {
         return message;
     }
 };
+/**
+ * Determines whether the send box should be disabled for ARIA accessibility.
+ *
+ * @param hasContent - Indicates whether the send box has content.
+ * @param hasCompletedAttachmentUploads - Indicates whether attachment uploads have completed.
+ * @param hasError - Indicates whether there is an error.
+ * @param disabled - Indicates whether the send box is disabled.
+ * @returns A boolean value indicating whether the send box should be disabled for ARIA accessibility.
+ */
+const isSendBoxButtonAriaDisabled = ({ hasContent, 
+/* @conditional-compile-remove(attachment-upload) */
+hasCompletedAttachmentUploads, hasError, disabled }) => {
+    return (
+    // no content
+    !(hasContent || /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads) ||
+        //error message exists
+        hasError ||
+        disabled);
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -9447,8 +9467,8 @@ const SendBox = (props) => {
             /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads(attachmentsWithProgress)) {
             onSendMessage && onSendMessage(message);
             setTextValue('');
+            (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-        (_a = sendTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     const setText = (newValue) => {
         if (newValue === undefined) {
@@ -9463,17 +9483,27 @@ const SendBox = (props) => {
     const mergedStyles = React.useMemo(() => react.concatStyleSets(styles), [styles]);
     const mergedSendIconStyle = React.useMemo(() => sendIconStyle({
         theme,
-        hasText: !!textValue,
+        hasText: sanitizeText(textValue).length > 0,
         /* @conditional-compile-remove(attachment-upload) */ hasAttachment: hasCompletedAttachmentUploads(attachmentsWithProgress),
         hasErrorMessage: !!errorMessage,
-        customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+        customSendIconStyle: styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon,
+        disabled: !!disabled
     }), [
         theme,
         textValue,
         /* @conditional-compile-remove(attachment-upload) */ attachmentsWithProgress,
         errorMessage,
-        styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon
+        styles === null || styles === void 0 ? void 0 : styles.sendMessageIcon,
+        disabled
     ]);
+    const isSendBoxButtonAriaDisabledValue = React.useMemo(() => {
+        return isSendBoxButtonAriaDisabled({
+            hasContent: sanitizeText(textValue).length > 0,
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads: hasCompletedAttachmentUploads(attachmentsWithProgress),
+            hasError: !!errorMessage,
+            disabled: !!disabled
+        });
+    }, [/* @conditional-compile-remove(attachment-upload) */ attachmentsWithProgress, disabled, errorMessage, textValue]);
     const onRenderSendIcon = React.useCallback((isHover) => onRenderIcon ? (onRenderIcon(isHover)) : (React.createElement(react.Icon, { iconName: isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend', className: mergedSendIconStyle })), [mergedSendIconStyle, onRenderIcon, textValue]);
     // Ensure that errors are cleared when there are no attachments in sendBox
     /* @conditional-compile-remove(attachment-upload) */
@@ -9542,7 +9572,7 @@ const SendBox = (props) => {
                             sendMessageOnClick();
                         }
                         e.stopPropagation();
-                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel })),
+                    }, id: 'sendIconWrapper', className: mergedSendButtonStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, ariaDisabled: isSendBoxButtonAriaDisabledValue })),
             /* @conditional-compile-remove(attachment-upload) */
             onRenderAttachmentUploads())));
 };
@@ -10159,9 +10189,10 @@ const RowColumnInitialValue = 0;
  * Component for the insert table pane
  */
 const RichTextInsertTablePane = (props) => {
-    const { item, onClick, theme, maxColumnsNumber, maxRowsNumber } = props;
+    const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;
     const [column, setColumn] = React.useState(RowColumnInitialValue);
     const [row, setRow] = React.useState(RowColumnInitialValue);
+    const theme = useTheme();
     const updateSize = React.useCallback((target) => {
         if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {
             const column = parseInt(target.dataset.column);
@@ -10188,7 +10219,7 @@ const RichTextInsertTablePane = (props) => {
             for (let j = 0; j < maxColumnsNumber; j++) {
                 const key = `cell_${i}_${j}`;
                 const isSelected = j <= column && i <= row;
-                items.push(React.createElement("button", { className: react.mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', i, j) }));
+                items.push(React.createElement("button", { className: react.mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
             }
         }
         return items;
@@ -10230,7 +10261,7 @@ const insertTableButton = (theme, maxRowsNumber, maxColumnsNumber) => {
                 insertTablePane: `Insert ${ColumnRowReplaceString} table`
             },
             itemRender: (item, onClick) => {
-                return (React.createElement(RichTextInsertTablePane, { item: item, onClick: onClick, theme: theme, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
+                return (React.createElement(RichTextInsertTablePane, { item: item, onClick: onClick, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
             },
             commandBarSubMenuProperties: {
                 className: insertTableMenuTablePane
@@ -10872,8 +10903,8 @@ const RichTextSendBox = (props) => {
             onSendMessage(message);
             setContentValue('');
             (_b = editorComponentRef.current) === null || _b === void 0 ? void 0 : _b.setEmptyContent();
+            (_c = editorComponentRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         }
-        (_c = editorComponentRef.current) === null || _c === void 0 ? void 0 : _c.focus();
     }, [
         contentValue,
         contentValueOverflow,
@@ -10899,16 +10930,18 @@ const RichTextSendBox = (props) => {
         attachmentUploadsPendingError,
         systemMessage
     ]);
-    const onRenderSendIcon = React.useCallback((isHover) => {
+    const hasContent = React.useMemo(() => {
         var _a;
         // get plain text content from the editor to check if the message is empty
         // as the content may contain tags even when the content is empty
         const plainTextContent = (_a = editorComponentRef.current) === null || _a === void 0 ? void 0 : _a.getPlainContent();
-        const hasContent = !isContentEmpty({
+        return !isContentEmpty({
             plainTextContent: plainTextContent,
             content: contentValue,
             placeholder: strings.placeholderText
         });
+    }, [contentValue, strings.placeholderText]);
+    const onRenderSendIcon = React.useCallback((isHover) => {
         return (React.createElement(react.Icon, { iconName: isHover && hasContent ? 'SendBoxSendHovered' : 'SendBoxSend', className: sendIconStyle({
                 theme,
                 hasText: hasContent,
@@ -10918,7 +10951,7 @@ const RichTextSendBox = (props) => {
                 defaultTextColor: theme.palette.neutralSecondary,
                 disabled: disabled
             }) }));
-    }, [contentValue, disabled, hasErrorMessage, strings.placeholderText, theme]);
+    }, [disabled, hasContent, hasErrorMessage, theme]);
     const sendBoxErrorsProps = React.useMemo(() => {
         var _a, _b;
         /* @conditional-compile-remove(attachment-upload) */
@@ -10963,12 +10996,25 @@ const RichTextSendBox = (props) => {
         strings.attachmentMoreMenu,
         theme
     ]);
+    const isSendBoxButtonAriaDisabledValue = React.useMemo(() => {
+        return isSendBoxButtonAriaDisabled({
+            hasContent,
+            /* @conditional-compile-remove(attachment-upload) */ hasCompletedAttachmentUploads: hasCompletedAttachmentUploads(attachmentsWithProgress),
+            hasError: hasErrorMessage,
+            disabled
+        });
+    }, [
+        /* @conditional-compile-remove(attachment-upload) */ attachmentsWithProgress,
+        disabled,
+        hasContent,
+        hasErrorMessage
+    ]);
     const sendButton = React.useMemo(() => {
         return (React.createElement(InputBoxButton, { onRenderIcon: onRenderSendIcon, onClick: (e) => {
                 sendMessageOnClick();
                 e.stopPropagation(); // Prevents the click from bubbling up and triggering a focus event on the chat.
-            }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel }));
-    }, [localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
+            }, className: richTextActionButtonsStyle, ariaLabel: localeStrings.sendButtonAriaLabel, tooltipContent: localeStrings.sendButtonAriaLabel, ariaDisabled: isSendBoxButtonAriaDisabledValue }));
+    }, [isSendBoxButtonAriaDisabledValue, localeStrings.sendButtonAriaLabel, onRenderSendIcon, sendMessageOnClick]);
     /* @conditional-compile-remove(attachment-upload) */
     const hasAttachmentUploads = React.useMemo(() => {
         return (hasCompletedAttachmentUploads(attachmentsWithProgress) || hasIncompleteAttachmentUploads(attachmentsWithProgress));
@@ -12224,7 +12270,9 @@ const extractContentForAllyMessage = (props) => {
             parsedContent.appendChild(attachmentTextNode);
         }
         // Strip all html tags from the content for aria.
-        const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
+        let message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
+        // decode HTML entities so that screen reader can read the content properly.
+        message = decodeEntities(message);
         return message;
     }
     return '';
@@ -12299,6 +12347,31 @@ const processHtmlToReact = (props) => {
     };
     return React.createElement(React.Fragment, null, parse((_a = props.message.content) !== null && _a !== void 0 ? _a : '', options));
 };
+const decodeEntities = (encodedString) => {
+    // This regular expression matches HTML entities.
+    const translate_re = /&(nbsp|amp|quot|lt|gt);/g;
+    // This object maps HTML entities to their respective characters.
+    const translate = {
+        nbsp: ' ',
+        amp: '&',
+        quot: '"',
+        lt: '<',
+        gt: '>'
+    };
+    return (encodedString
+        // Find all matches of HTML entities defined in translate_re and
+        // replace them with the corresponding character from the translate object.
+        .replace(translate_re, function (match, entity) {
+        return translate[entity];
+    })
+        // Find numeric entities (e.g., &#65;)
+        // and replace them with the equivalent character using the String.fromCharCode method,
+        // which converts Unicode values into characters.
+        .replace(/&#(\d+);/gi, function (match, numStr) {
+        const num = parseInt(numStr, 10);
+        return String.fromCharCode(num);
+    }));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -12831,7 +12904,7 @@ class ErrorBoundary extends React.Component {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CWvESa8u.js'); }));
+const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DSlV4PZz.js'); }));
 /**
  * @private
  * Use this function to load RoosterJS dependencies early in the lifecycle.
@@ -12839,7 +12912,7 @@ const ChatMessageComponentAsRichTextEditBox = React.lazy(() => Promise.resolve()
  *
  * @conditional-compile-remove(rich-text-editor)
  */
-const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-CWvESa8u.js'); });
+const loadChatMessageComponentAsRichTextEditBox = () => Promise.resolve().then(function () { return require('./ChatMessageComponentAsRichTextEditBox-DSlV4PZz.js'); });
 /**
  * @private
  */
@@ -19300,6 +19373,10 @@ const _HighContrastAwareIcon = (props) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+const defaultLocalVideoViewOptions$1 = {
+    scalingMode: 'Crop',
+    isMirrored: true
+};
 /**
  * Generates default {@link IContextualMenuProps} for buttons that
  * show a drop-down to select devices to use.
@@ -19354,7 +19431,7 @@ const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSel
                                 isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
                                 onClick: () => {
                                     if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
-                                        onSelectCamera(camera);
+                                        onSelectCamera(camera, defaultLocalVideoViewOptions$1);
                                     }
                                 }
                             }))
@@ -26454,6 +26531,30 @@ const globalLayerHostStyle = {
     visibility: 'hidden'
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ *
+ * @param props
+ * @returns
+ */
+const ACSAudioProvider = (props) => {
+    const { audioContext, children } = props;
+    const alreadyWrapped = useAudio();
+    if (alreadyWrapped) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return React.createElement(ACSAudioContext.Provider, { value: audioContext }, props.children);
+};
+/**
+ * @private
+ */
+const ACSAudioContext = React.createContext(new AudioContext());
+/**
+ * @private
+ */
+const useAudio = () => React.useContext(ACSAudioContext);
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -26489,12 +26590,17 @@ const BaseProvider = (props) => {
      * to ensure all icons render correctly.
      */
     react.registerIcons({ icons: Object.assign(Object.assign({}, iconsToRegister), props.icons) });
+    /**
+     * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.
+     */
+    const compositeAudioContext = new AudioContext();
     // we use Customizer to override default LayerHost injected to <body />
     // which stop polluting global dom tree and increase compatibility with react-full-screen
     const CompositeElement = (React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
         React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" }),
         React.createElement(react.Customizer, { scopedSettings: { Layer: { hostId: globalLayerHostId } } },
-            React.createElement(WithBackgroundColor, null, props.children)),
+            React.createElement(ACSAudioProvider, { audioContext: compositeAudioContext },
+                React.createElement(WithBackgroundColor, null, props.children))),
         React.createElement(react.LayerHost, { id: globalLayerHostId, className: react.mergeStyles(globalLayerHostStyle) })));
     const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;
     return React.createElement(BaseContext.Provider, { value: true }, localizedElement);
@@ -35526,7 +35632,7 @@ const MainScreen = (props) => {
             adapter.off('callEnded', closeSidePane);
         };
     }, [adapter]);
-    const compositeAudioContext = React.useRef(new AudioContext());
+    const compositeAudioContext = useAudio();
     const capabilitiesChangedInfoAndRole = useSelector$1(capabilitiesChangedInfoAndRoleSelector);
     const capabilitiesChangedNotificationBarProps = useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
     // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
@@ -35601,7 +35707,7 @@ const MainScreen = (props) => {
             pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext.current }));
+            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         case 'hold':
@@ -37748,12 +37854,12 @@ const chatNotificationContainerStyles = {
  * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.
  * @private
  */
-const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
+const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible, isChatInitiazed) => {
     // Store messageIds of unread messages
     const [unreadChatMessages, setUnreadChatMessages] = React.useState(new Set());
     React.useEffect(() => {
         // Clear unread messages when chat pane is opened
-        if (isChatPaneVisible) {
+        if (isChatPaneVisible || !isChatInitiazed) {
             setUnreadChatMessages(new Set());
             return;
         }
@@ -37783,7 +37889,7 @@ const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
             chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);
             chatAdapter.off('messageDeleted', decrementUnreadChatMessagesCount);
         };
-    }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible]);
+    }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible, isChatInitiazed]);
     return unreadChatMessages.size;
 };
 /**
@@ -37804,6 +37910,7 @@ const CallWithChatScreen = (props) => {
     }
     const callAdapter = React.useMemo(() => new CallWithChatBackedCallAdapter(callWithChatAdapter), [callWithChatAdapter]);
     const [currentCallState, setCurrentCallState] = React.useState();
+    const [isChatInitialized, setIsChatInitialized] = React.useState(false);
     const [currentPage, setCurrentPage] = React.useState();
     const [isChatOpen, setIsChatOpen] = React.useState(false);
     const containerRef = React.useRef(null);
@@ -37812,6 +37919,7 @@ const CallWithChatScreen = (props) => {
             var _a;
             setCurrentPage(newState.page);
             setCurrentCallState((_a = newState.call) === null || _a === void 0 ? void 0 : _a.state);
+            setIsChatInitialized(newState.chat ? true : false);
         };
         updateCallWithChatPage(callWithChatAdapter.getState());
         callWithChatAdapter.onStateChange(updateCallWithChatPage);
@@ -37869,7 +37977,7 @@ const CallWithChatScreen = (props) => {
             disabled: chatButtonDisabled
         }
         : undefined, [chatButtonDisabled, mobileView, toggleChat, showChatButton]);
-    const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen);
+    const unreadChatMessagesCount = useUnreadMessagesTracker(chatAdapter, isChatOpen, isChatInitialized);
     const customChatButton = React.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, 
@@ -38123,44 +38231,48 @@ class CallWithChatContext {
  * Created for easy use with the {@link CallWithChatComposite}.
  */
 class AzureCommunicationCallWithChatAdapter {
-    constructor(callAdapter, chatAdapterPromise) {
+    constructor(callAdapter, chatAdapter) {
+        this.emitter = new EventEmitter.EventEmitter();
+        this.isAdapterDisposed = false;
         /* @conditional-compile-remove(attachment-upload) */
         this.registerActiveUploads = (files) => {
-            var _a, _b;
-            return (_b = (_a = this.chatAdapter) === null || _a === void 0 ? void 0 : _a.registerActiveUploads(files)) !== null && _b !== void 0 ? _b : [];
+            return this.executeWithResolvedChatAdapter((adapter) => {
+                return adapter.registerActiveUploads(files);
+            });
         };
         /* @conditional-compile-remove(attachment-upload) */
         this.registerCompletedUploads = (metadata) => {
-            var _a, _b;
-            return (_b = (_a = this.chatAdapter) === null || _a === void 0 ? void 0 : _a.registerCompletedUploads(metadata)) !== null && _b !== void 0 ? _b : [];
+            return this.executeWithResolvedChatAdapter((adapter) => {
+                return adapter.registerCompletedUploads(metadata);
+            });
         };
         /* @conditional-compile-remove(attachment-upload) */
         this.clearUploads = () => {
-            this.chatAdapterPromise.then((adapter) => {
+            this.executeWithResolvedChatAdapter((adapter) => {
                 adapter.clearUploads();
             });
         };
         /* @conditional-compile-remove(attachment-upload) */
         this.cancelUpload = (id) => {
-            this.chatAdapterPromise.then((adapter) => {
+            this.executeWithResolvedChatAdapter((adapter) => {
                 adapter.cancelUpload(id);
             });
         };
         /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadProgress = (id, progress) => {
-            this.chatAdapterPromise.then((adapter) => {
+            this.executeWithResolvedChatAdapter((adapter) => {
                 adapter.updateUploadProgress(id, progress);
             });
         };
         /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadStatusMessage = (id, errorMessage) => {
-            this.chatAdapterPromise.then((adapter) => {
+            this.executeWithResolvedChatAdapter((adapter) => {
                 adapter.updateUploadStatusMessage(id, errorMessage);
             });
         };
         /* @conditional-compile-remove(attachment-upload) */
         this.updateUploadMetadata = (id, metadata) => {
-            this.chatAdapterPromise.then((adapter) => {
+            this.executeWithResolvedChatAdapter((adapter) => {
                 adapter.updateUploadMetadata(id, metadata);
             });
         };
@@ -38171,19 +38283,28 @@ class AzureCommunicationCallWithChatAdapter {
             this.context.updateClientStateWithChatState(newChatAdapterState);
         };
         this.onChatStateChange = onChatStateChange;
-        this.chatAdapterPromise = chatAdapterPromise;
-        this.chatAdapterPromise.then((chatAdapter) => {
-            chatAdapter.onStateChange(this.onChatStateChange);
-            /* @conditional-compile-remove(attachment-download) @conditional-compile-remove(attachment-upload) */
-            this.chatAdapter = chatAdapter;
-            this.context.updateClientStateWithChatState(chatAdapter.getState());
-        });
+        if (chatAdapter) {
+            this.updateChatAdapter(chatAdapter);
+        }
         const onCallStateChange = (newCallAdapterState) => {
             this.context.updateClientStateWithCallState(newCallAdapterState);
         };
         this.callAdapter.onStateChange(onCallStateChange);
         this.onCallStateChange = onCallStateChange;
     }
+    setChatAdapterPromise(chatAdapter) {
+        chatAdapter.then((adapter) => {
+            if (!this.isAdapterDisposed) {
+                this.updateChatAdapter(adapter);
+            }
+        });
+    }
+    updateChatAdapter(chatAdapter) {
+        this.chatAdapter = chatAdapter;
+        this.chatAdapter.onStateChange(this.onChatStateChange);
+        this.context.updateClientStateWithChatState(chatAdapter.getState());
+        this.emitter.emit('chatInitialized', this.chatAdapter);
+    }
     bindPublicMethods() {
         this.joinCall.bind(this);
         this.leaveCall.bind(this);
@@ -38304,16 +38425,13 @@ class AzureCommunicationCallWithChatAdapter {
     }
     /** Dispose of the current CallWithChatAdapter. */
     dispose() {
-        return __awaiter$2(this, void 0, void 0, function* () {
-            this.chatAdapterPromise.then((adapter) => {
-                adapter.offStateChange(this.onChatStateChange);
-            });
-            this.callAdapter.offStateChange(this.onCallStateChange);
-            yield this.chatAdapterPromise.then((adapter) => {
-                adapter.dispose();
-            });
-            this.callAdapter.dispose();
-        });
+        this.isAdapterDisposed = true;
+        if (this.chatAdapter) {
+            this.chatAdapter.offStateChange(this.onChatStateChange);
+            this.chatAdapter.dispose();
+        }
+        this.callAdapter.offStateChange(this.onCallStateChange);
+        this.callAdapter.dispose();
     }
     /** Remove a participant from the Call only. */
     removeParticipant(userId) {
@@ -38451,7 +38569,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Fetch initial Call and Chat data such as chat messages. */
     fetchInitialData() {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.fetchInitialData();
             });
         });
@@ -38459,7 +38577,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Send a chat message. */
     sendMessage(content) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.sendMessage(content);
             });
         });
@@ -38468,7 +38586,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Send a chat message with attachments. */
     sendMessageWithAttachments(content, attachments) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 const fileSharingMetadata = {
                     fileSharingMetadata: JSON.stringify(attachments)
                 };
@@ -38481,7 +38599,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Send a chat read receipt. */
     sendReadReceipt(chatMessageId) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.sendReadReceipt(chatMessageId);
             });
         });
@@ -38489,7 +38607,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Send an isTyping indicator. */
     sendTypingIndicator() {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.sendTypingIndicator();
             });
         });
@@ -38497,7 +38615,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Load previous Chat messages. */
     loadPreviousChatMessages(messagesToLoad) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.loadPreviousChatMessages(messagesToLoad);
             });
         });
@@ -38505,7 +38623,7 @@ class AzureCommunicationCallWithChatAdapter {
     /** Update an existing message. */
     updateMessage(messageId, content, metadata, options) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return this.chatAdapterPromise.then((adapter) => {
+            return this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.updateMessage(messageId, content, metadata, 
                 /* @conditional-compile-remove(attachment-upload) */ options);
             });
@@ -38514,20 +38632,20 @@ class AzureCommunicationCallWithChatAdapter {
     /** Delete an existing message. */
     deleteMessage(messageId) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return yield this.chatAdapterPromise.then((adapter) => {
+            return yield this.executeWithResolvedChatAdapter((adapter) => {
                 return adapter.deleteMessage(messageId);
             });
         });
     }
     downloadResourceToCache(resourceDetails) {
         return __awaiter$2(this, void 0, void 0, function* () {
-            this.chatAdapterPromise.then((adapter) => {
+            this.executeWithResolvedChatAdapter((adapter) => {
                 adapter.downloadResourceToCache(resourceDetails);
             });
         });
     }
     removeResourceFromCache(resourceDetails) {
-        this.chatAdapterPromise.then((adapter) => {
+        this.executeWithResolvedChatAdapter((adapter) => {
             adapter.removeResourceFromCache(resourceDetails);
         });
     }
@@ -38669,37 +38787,37 @@ class AzureCommunicationCallWithChatAdapter {
                 this.callAdapter.on('isSpokenLanguageChanged', listener);
                 break;
             case 'messageReceived':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('messageReceived', listener);
                 });
                 break;
             case 'messageEdited':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('messageEdited', listener);
                 });
                 break;
             case 'messageDeleted':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('messageDeleted', listener);
                 });
                 break;
             case 'messageSent':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('messageSent', listener);
                 });
                 break;
             case 'messageRead':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('messageRead', listener);
                 });
                 break;
             case 'chatParticipantsAdded':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('participantsAdded', listener);
                 });
                 break;
             case 'chatParticipantsRemoved':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('participantsRemoved', listener);
                 });
                 break;
@@ -38707,10 +38825,13 @@ class AzureCommunicationCallWithChatAdapter {
                 this.callAdapter.on('error', listener);
                 break;
             case 'chatError':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.on('error', listener);
                 });
                 break;
+            case 'chatInitialized':
+                this.emitter.on(event, listener);
+                break;
             default:
                 throw `Unknown AzureCommunicationCallWithChatAdapter Event: ${event}`;
         }
@@ -38761,37 +38882,37 @@ class AzureCommunicationCallWithChatAdapter {
                 this.callAdapter.off('isSpokenLanguageChanged', listener);
                 break;
             case 'messageReceived':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('messageReceived', listener);
                 });
                 break;
             case 'messageEdited':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('messageEdited', listener);
                 });
                 break;
             case 'messageDeleted':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('messageDeleted', listener);
                 });
                 break;
             case 'messageSent':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('messageSent', listener);
                 });
                 break;
             case 'messageRead':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('messageRead', listener);
                 });
                 break;
             case 'chatParticipantsAdded':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('participantsAdded', listener);
                 });
                 break;
             case 'chatParticipantsRemoved':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('participantsRemoved', listener);
                 });
                 break;
@@ -38799,33 +38920,51 @@ class AzureCommunicationCallWithChatAdapter {
                 this.callAdapter.off('error', listener);
                 break;
             case 'chatError':
-                this.chatAdapterPromise.then((adapter) => {
+                this.executeWithResolvedChatAdapter((adapter) => {
                     adapter.off('error', listener);
                 });
                 break;
+            case 'chatInitialized':
+                this.emitter.off(event, listener);
+                break;
             default:
                 throw `Unknown AzureCommunicationCallWithChatAdapter Event: ${event}`;
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    executeWithResolvedChatAdapter(callback) {
+        if (!this.chatAdapter) {
+            console.error('Chat is not initialized');
+        }
+        else {
+            return callback(this.chatAdapter);
+        }
+    }
 }
 /**
  * Arguments for use in {@link createAzureCommunicationCallWithChatAdapter} to join a Group Call with an associated Chat thread.
- * @public
+ * @private
  */
 class CallAndChatProvider {
     constructor(locator) {
         this.locator = locator;
     }
-    getChatThread() {
+    isCallInfoRequired() {
+        return false;
+    }
+    getChatThreadPromise() {
         return __awaiter$2(this, void 0, void 0, function* () {
-            return this.locator.chatThreadId;
+            return this.getChatThread();
         });
     }
+    getChatThread() {
+        return this.locator.chatThreadId;
+    }
 }
 /**
  * Arguments for use in {@link createAzureCommunicationCallWithChatAdapter} to join a Teams meeting with an associated Chat thread.
  *
- * @public
+ * @private
  */
 class TeamsMeetingLinkProvider {
     constructor(locator, 
@@ -38834,7 +38973,14 @@ class TeamsMeetingLinkProvider {
         /** @conditional-compile-remove(meeting-id) */
         this.callAdapterPromise = callAdapterPromise;
     }
+    isCallInfoRequired() {
+        return true;
+    }
     getChatThread() {
+        /** @conditional-compile-remove(meeting-id) */
+        throw new Error('Chat thread ID should be retrieved from call.callInfo using method getChatThreadPromise');
+    }
+    getChatThreadPromise() {
         return __awaiter$2(this, void 0, void 0, function* () {
             /** @conditional-compile-remove(meeting-id) */
             {
@@ -38863,28 +39009,45 @@ class TeamsMeetingLinkProvider {
 /**
  * Arguments for use in {@link createAzureCommunicationCallWithChatAdapter} to join a Teams meeting using meeting id.
  *
- * @public
+ * @private
  */
 class TeamsMeetingIdProvider {
     constructor(locator, callAdapter) {
         this.locator = locator;
         this.callAdapter = callAdapter;
     }
+    isCallInfoRequired() {
+        return true;
+    }
+    getChatThread() {
+        throw new Error('Chat thread ID is not available for Teams meeting ID');
+    }
     /**
      * Wait call to be connected to get thread ID.
      * @returns the chat thread ID for the given meeting ID.
      */
-    getChatThread() {
+    getChatThreadPromise() {
         return __awaiter$2(this, void 0, void 0, function* () {
             return new Promise((resolve) => {
                 const stateChangeListener = (state) => {
                     var _a, _b, _c;
                     if (((_a = state.call) === null || _a === void 0 ? void 0 : _a.state) === 'Connected' && ((_b = state.call.info) === null || _b === void 0 ? void 0 : _b.threadId)) {
+                        this.callAdapter.then((adapter) => {
+                            adapter.offStateChange(stateChangeListener);
+                        });
                         resolve((_c = state.call.info) === null || _c === void 0 ? void 0 : _c.threadId);
                     }
                 };
                 this.callAdapter.then((adapter) => {
-                    adapter.onStateChange(stateChangeListener);
+                    var _a, _b, _c;
+                    const callState = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.state;
+                    const threadId = (_c = (_b = adapter.getState().call) === null || _b === void 0 ? void 0 : _b.info) === null || _c === void 0 ? void 0 : _c.threadId;
+                    if (callState === 'Connected' && threadId) {
+                        resolve(threadId);
+                    }
+                    else {
+                        adapter.onStateChange(stateChangeListener);
+                    }
                 });
             });
         });
@@ -38909,8 +39072,16 @@ const createAzureCommunicationCallWithChatAdapter = (_a) => __awaiter$2(void 0,
         telemetryImplementationHint: 'CallWithChat'
     });
     const chatThreadAdapter = _createChatThreadAdapterInner(locator, callAdapter);
-    const chatAdapter = _createLazyAzureCommunicationChatAdapterInner(endpoint, userId, displayName, credential, chatThreadAdapter.getChatThread(), 'CallWithChat');
-    return new AzureCommunicationCallWithChatAdapter(yield callAdapter, chatAdapter);
+    if (chatThreadAdapter.isCallInfoRequired()) {
+        const callWithChatAdapter = new AzureCommunicationCallWithChatAdapter(yield callAdapter);
+        const chatAdapterPromise = _createLazyAzureCommunicationChatAdapterInner(endpoint, userId, displayName, credential, chatThreadAdapter.getChatThreadPromise(), 'CallWithChat');
+        callWithChatAdapter.setChatAdapterPromise(chatAdapterPromise);
+        return callWithChatAdapter;
+    }
+    else {
+        const chatAdapter = _createAzureCommunicationChatAdapterInner(endpoint, userId, displayName, credential, chatThreadAdapter.getChatThread(), 'CallWithChat');
+        return new AzureCommunicationCallWithChatAdapter(yield callAdapter, yield chatAdapter);
+    }
 });
 /**
  * A custom React hook to simplify the creation of {@link CallWithChatAdapter}.
@@ -39039,8 +39210,8 @@ beforeDispose) => {
  */
 const createAzureCommunicationCallWithChatAdapterFromClients = (_b) => __awaiter$2(void 0, [_b], void 0, function* ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, callAdapterOptions }) {
     const callAdapter = yield createAzureCommunicationCallAdapterFromClient(callClient, callAgent, callLocator, callAdapterOptions);
-    const chatAdapterPromise = createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
-    return new AzureCommunicationCallWithChatAdapter(callAdapter, chatAdapterPromise);
+    const chatAdapter = yield createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
+    return new AzureCommunicationCallWithChatAdapter(callAdapter, chatAdapter);
 });
 const isTeamsMeetingLocator = (locator) => {
     return 'meetingLink' in locator || 'meetingId' in locator;
@@ -39628,4 +39799,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-BTXDJhYg.js.map
+//# sourceMappingURL=index-aGXLnB_I.js.map