@azure/communication-react 1.5.1-alpha-202306180015 → 1.5.1-alpha-202306210014

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

@@ -163,11 +163,22 @@ const _toCommunicationIdentifier = (id) => {
     }
     return id;
 };
+/**
+ * Check if an object is identifier.
+ *
+ * @internal
+ */
+const _isValidIdentifier = (identifier) => {
+    return (communicationCommon.isCommunicationUserIdentifier(identifier) ||
+        communicationCommon.isPhoneNumberIdentifier(identifier) ||
+        communicationCommon.isMicrosoftTeamsUserIdentifier(identifier) ||
+        communicationCommon.isUnknownIdentifier(identifier));
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202306180015';
+var telemetryVersion = '1.5.1-alpha-202306210014';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6304,10 +6315,14 @@ const getTagClosingTagInfo = (tag) => {
  * @returns Updated HTML and selection index if the selection index should be set.
  */
 const updateHTML = (props) => {
-    const { htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
+    const { htmlText, oldPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
     if (tags.length === 0 || (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length - 1)) {
         // no tags added yet or the whole text is changed
-        return { updatedHTML: newPlainText, updatedSelectionIndex: undefined };
+        const changeWithSkippedChars = escapeHTMLChars(change);
+        const updatedHTML = escapeHTMLChars(oldPlainText.substring(0, startIndex)) +
+            changeWithSkippedChars +
+            escapeHTMLChars(oldPlainText.substring(oldPlainTextEndIndex));
+        return { updatedHTML, updatedSelectionIndex: undefined };
     }
     let result = '';
     let lastProcessedHTMLIndex = 0;
@@ -6317,7 +6332,7 @@ const updateHTML = (props) => {
     // e.g.: change is after and partially in tag => change will be added after the tag and outdated text in the tag will be removed
     // e.g.: change is on the beginning of the tag => change will be added before the tag
     // e.g.: change is on the end of the tag => change will be added to the tag if it's not mention and after the tag if it's mention
-    let processedChange = change;
+    let processedChange = escapeHTMLChars(change);
     // end tag plain text index of the last processed tag
     let lastProcessedPlainTextTagEndIndex = 0;
     // as some tags/text can be removed fully, selection should be updated correctly
@@ -6339,13 +6354,13 @@ const updateHTML = (props) => {
         if (startIndex <= tag.plainTextBeginIndex) {
             // change start is before the open tag
             // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range
-            const startChangeDiff = tag.plainTextBeginIndex - Math.max(lastProcessedPlainTextTagEndIndex, startIndex);
+            const startChangeDiff = getChangeDiff(oldPlainText, Math.max(lastProcessedPlainTextTagEndIndex, startIndex), tag.plainTextBeginIndex);
             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex - startChangeDiff) + processedChange;
             processedChange = '';
             if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {
                 // the whole change is before tag start
                 // mentionTag length can be ignored here as the change is before the tag
-                const endChangeDiff = tag.plainTextBeginIndex - oldPlainTextEndIndex;
+                const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, tag.plainTextBeginIndex);
                 lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
                 // the change is handled; exit
                 break;
@@ -6375,13 +6390,13 @@ const updateHTML = (props) => {
                         if (startIndex !== tag.plainTextBeginIndex && startIndex !== closingTagInfo.plainTextEndIndex) {
                             // mention tag should be deleted when user tries to edit it in the middle
                             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                         }
                         else if (startIndex === tag.plainTextBeginIndex) {
                             // non empty change at the beginning of the mention tag to be added before the mention tag
                             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = tag.openTagIndex;
                         }
                         else if (startIndex === closingTagInfo.plainTextEndIndex) {
@@ -6389,12 +6404,13 @@ const updateHTML = (props) => {
                             result +=
                                 htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
                                     processedChange;
-                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
+                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                         }
                         processedChange = '';
                     }
                     else {
+                        // When change is empty, it means that this change is a deletion
                         const updateMentionTagResult = handleMentionTagUpdate({
                             htmlText,
                             oldPlainText,
@@ -6422,7 +6438,6 @@ const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -6434,13 +6449,13 @@ const updateHTML = (props) => {
                 }
                 else {
                     // no subtags
-                    const startChangeDiff = startIndex - tag.plainTextBeginIndex;
+                    const startChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, startIndex);
                     result +=
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
                             processedChange;
                     processedChange = '';
                     if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
-                        const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
+                        const endChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, oldPlainTextEndIndex);
                         lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
                     }
                     else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
@@ -6479,7 +6494,6 @@ const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -6539,7 +6553,6 @@ const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -6555,7 +6568,7 @@ const updateHTML = (props) => {
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
                     processedChange = '';
                     // oldPlainTextEndIndex already includes mentionTag length
-                    const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
+                    const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, closingTagInfo.plainTextEndIndex);
                     // as change may be before the end of the tag, we need to add the rest of the tag
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
                 }
@@ -6567,9 +6580,9 @@ const updateHTML = (props) => {
         if (i === tags.length - 1 && oldPlainTextEndIndex >= closingTagInfo.plainTextEndIndex) {
             // the last tag should handle the end of the change if needed
             // oldPlainTextEndIndex already includes mentionTag length
-            const endChangeDiff = oldPlainTextEndIndex - closingTagInfo.plainTextEndIndex;
+            const endChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, oldPlainTextEndIndex);
             if (startIndex >= closingTagInfo.plainTextEndIndex) {
-                const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
+                const startChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, startIndex);
                 result +=
                     htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
             }
@@ -6719,17 +6732,18 @@ const textToTagParser = (text, trigger) => {
         if (!foundHtmlTag) {
             if (parseIndex !== 0) {
                 // Add the remaining text to the plain text representation
-                plainTextRepresentation += text.substring(parseIndex);
+                const newText = text.substring(parseIndex);
+                plainTextRepresentation += unEscapeHtmlCharacters(newText);
             }
             else {
-                plainTextRepresentation = text;
+                plainTextRepresentation = unEscapeHtmlCharacters(text);
             }
             break;
         }
         if (foundHtmlTag.type === 'open' || foundHtmlTag.type === 'self-closing') {
             const nextTag = parseOpenTag(foundHtmlTag.content, foundHtmlTag.startIdx);
             // Add the plain text between the last tag and this one found
-            plainTextRepresentation += text.substring(parseIndex, foundHtmlTag.startIdx);
+            plainTextRepresentation += unEscapeHtmlCharacters(text.substring(parseIndex, foundHtmlTag.startIdx));
             nextTag.plainTextBeginIndex = plainTextRepresentation.length;
             if (foundHtmlTag.type === 'open') {
                 tagParseStack.push(nextTag);
@@ -6755,14 +6769,14 @@ const textToTagParser = (text, trigger) => {
                             plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
                 }
                 if (!currentOpenTag.subTags) {
-                    plainTextRepresentation += currentOpenTag.content;
+                    plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);
                 }
                 else if (currentOpenTag.subTags.length > 0) {
                     // Add text after the last tag
                     const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
                     const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
                     const trailingText = currentOpenTag.content.substring(startOfRemainingText);
-                    plainTextRepresentation += trailingText;
+                    plainTextRepresentation += unEscapeHtmlCharacters(trailingText);
                 }
                 currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
                 addTag(currentOpenTag, tagParseStack, tags);
@@ -6850,6 +6864,32 @@ const addTag = (tag, parseStack, tags) => {
         }
     }
 };
+// We should revisit this in the future when we support other text such as rich text editing.
+const escapeHTMLChars = (text) => {
+    const mentionRegex = new RegExp(`<${MSFT_MENTION_TAG}(.*?)>(.*?)</${MSFT_MENTION_TAG}>`, 'i');
+    if (!text.match(mentionRegex)) {
+        return text
+            .replace(/&(?![A-Z]+;)/gi, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    return text;
+};
+const getChangeDiff = (plainText, startIndex, endIndex) => {
+    return endIndex - startIndex + getLengthDiffForEscapedHtmlChars(plainText, startIndex, endIndex);
+};
+const getLengthDiffForEscapedHtmlChars = (text, startIndex, endIndex) => {
+    var _a, _b;
+    const subText = text.substring(startIndex, endIndex);
+    const escapedAngleBracketCount = ((_a = subText.match(/(<)|(>)/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    let escapedCharLength = escapedAngleBracketCount * ('&lt;'.length - '<'.length);
+    const escapedAmpersandCount = ((_b = subText.match(/&/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    escapedCharLength += escapedAmpersandCount * ('&amp;'.length - '&'.length);
+    return escapedCharLength;
+};
+const unEscapeHtmlCharacters = (text) => {
+    return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7117,13 +7157,11 @@ const TextFieldWithMention = (props) => {
         const oldPlainText = inputTextValue;
         const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
         // update plain text with the mention html text
-        const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
         const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
         // update html text with updated plain text
         const updatedContent = updateHTML({
             htmlText: textValue,
             oldPlainText,
-            newPlainText,
             tags: tagsValue,
             startIndex: currentTriggerStartIndex,
             oldPlainTextEndIndex: selectionEnd,
@@ -7438,44 +7476,32 @@ const TextFieldWithMention = (props) => {
                 }
             }
         }
-        let result = '';
-        if (tagsValue.length === 0) {
-            // no tags in the string and newValue should be used as a result string
-            result = newValue;
-        }
-        else {
-            // there are tags in the text value and htmlTextValue is html string
-            // find diff between old and new text
-            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
-                oldText: inputTextValue,
-                newText: newValue,
-                previousSelectionStart: previousSelectionStartValue,
-                previousSelectionEnd: previousSelectionEndValue,
-                currentSelectionStart: currentSelectionStartValue,
-                currentSelectionEnd: currentSelectionEndValue
-            });
-            const change = newValue.substring(changeStart, newChangeEnd);
-            // get updated html string
-            const updatedContent = updateHTML({
-                htmlText: htmlTextValue,
-                oldPlainText: inputTextValue,
-                newPlainText: newValue,
-                tags: tagsValue,
-                startIndex: changeStart,
-                oldPlainTextEndIndex: oldChangeEnd,
-                change,
-                mentionTrigger: triggerText
-            });
-            result = updatedContent.updatedHTML;
-            // update caret index if needed
-            if (updatedContent.updatedSelectionIndex !== undefined) {
-                setCaretIndex(updatedContent.updatedSelectionIndex);
-                setSelectionEndValue(updatedContent.updatedSelectionIndex);
-                setSelectionStartValue(updatedContent.updatedSelectionIndex);
-            }
-        }
-        onChange && onChange(event, result);
-    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
+        const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
+            oldText: inputTextValue,
+            newText: newValue,
+            previousSelectionStart: previousSelectionStartValue,
+            previousSelectionEnd: previousSelectionEndValue,
+            currentSelectionStart: currentSelectionStartValue,
+            currentSelectionEnd: currentSelectionEndValue
+        });
+        const change = newValue.substring(changeStart, newChangeEnd);
+        const updatedContent = updateHTML({
+            htmlText: htmlTextValue,
+            oldPlainText: inputTextValue,
+            tags: tagsValue,
+            startIndex: changeStart,
+            oldPlainTextEndIndex: oldChangeEnd,
+            change,
+            mentionTrigger: triggerText
+        });
+        // update caret index if needed
+        if (updatedContent.updatedSelectionIndex !== undefined) {
+            setCaretIndex(updatedContent.updatedSelectionIndex);
+            setSelectionEndValue(updatedContent.updatedSelectionIndex);
+            setSelectionStartValue(updatedContent.updatedSelectionIndex);
+        }
+        onChange && onChange(event, updatedContent.updatedHTML);
+    }), [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]);
     // Adjust the selection range based on a mouse / touch interaction
     const handleOnMove = React.useCallback(({ event, selectionStartValue, selectionEndValue, interactionStartSelection, shouldHandleMoveEvent }) => {
         if (shouldHandleMoveEvent &&
@@ -7640,7 +7666,12 @@ const InputBoxComponent = (props) => {
         if (props.mentionLookupOptions) {
             return React__default['default'].createElement(TextFieldWithMention, Object.assign({}, textFieldWithMentionProps));
         }
-        return (React__default['default'].createElement(react.TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown })));
+        return (React__default['default'].createElement(react.TextField, Object.assign({}, textFieldProps, { "data-ui-id": dataUiId, value: textValue, onChange: onChange, onKeyDown: onTextFieldKeyDown, onFocus: (e) => {
+                // Fix for setting the cursor to the correct position when multiline is true
+                // This approach should be reviewed during migration to FluentUI v9
+                e.currentTarget.value = '';
+                e.currentTarget.value = textValue;
+            } })));
     };
     return (React__default['default'].createElement(react.Stack, { className: mergedRootStyle },
         React__default['default'].createElement("div", { className: mergedTextContainerStyle }, renderTextField())));
@@ -11271,7 +11302,7 @@ const VideoTile = (props) => {
         }
         const currentObserver = observer.current;
         return () => currentObserver.disconnect();
-    }, [observer, videoTileRef]);
+    }, [videoTileRef]);
     /* @conditional-compile-remove(pinned-participants) */
     const useLongPressProps = React.useMemo(() => {
         return {
@@ -11630,6 +11661,12 @@ const localVideoCameraCycleButtonStyles = (theme) => {
         }
     };
 };
+/**
+ * @private
+ */
+const localVideoTileContainerStyles = {
+    root: { width: '100%', height: '100%' }
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11772,7 +11809,7 @@ const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     visibleGridParticipants.current =
         pinnedParticipantUserIds.length > 0 || isScreenShareActive
@@ -11810,7 +11847,13 @@ const _useOrganizedParticipants = (props) => {
     ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
+        if (isScreenShareActive && localParticipant) {
+            const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
+            // If screen sharing is active, assign video and audio participants as overflow gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return localParticipantPlusOverflow.concat(callingParticipants);
+        }
+        else if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
@@ -11825,7 +11868,8 @@ const _useOrganizedParticipants = (props) => {
         }
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
+        isScreenShareActive,
+        localParticipant
     ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
     return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
@@ -11978,9 +12022,12 @@ const HorizontalGallery = (props) => {
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = React.useMemo(() => {
-        return indexesArray[clippedPage].map((index) => {
-            return React__default['default'].Children.toArray(children)[index];
-        });
+        if (indexesArray[0] !== undefined) {
+            return indexesArray[clippedPage].map((index) => {
+                return React__default['default'].Children.toArray(children)[index];
+            });
+        }
+        return [];
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
@@ -12036,10 +12083,13 @@ const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
+const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent) => {
+    console.log(screenSharePresent);
     return {
-        minWidth: `${localVideoTileSizeRem.width}rem`,
-        minHeight: `${localVideoTileSizeRem.height}rem`,
+        width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
+        height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
+        minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
+        minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
         bottom: `${localVideoTileOuterPaddingRem}rem`,
         borderRadius: theme.effects.roundedCorner4,
@@ -12366,7 +12416,7 @@ const childrenContainerStyle = (pageControlBarHeight) => {
  */
 const rootStyle = {
     height: '100%',
-    width: '100%',
+    width: 'inherit',
     gap: `${VERTICAL_GALLERY_GAP}rem`,
     position: 'relative'
 };
@@ -12435,9 +12485,12 @@ const VerticalGallery = (props) => {
     const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = React.useMemo(() => {
-        return indexesArray[clippedPage - 1].map((index) => {
-            return React__default['default'].Children.toArray(children)[index];
-        });
+        if (indexesArray[0] !== undefined) {
+            return indexesArray[clippedPage - 1].map((index) => {
+                return React__default['default'].Children.toArray(children)[index];
+            });
+        }
+        return;
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const onPreviousButtonClick = () => {
@@ -12521,13 +12574,14 @@ const VerticalGalleryControlBar = (props) => {
  * @beta
  */
 const ResponsiveVerticalGallery = (props) => {
+    var _a;
     const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
     const containerRef = React.useRef(null);
     const containerHeight = _useContainerHeight(containerRef);
     const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
     const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
     const childrenPerPage = calculateVerticalChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(children),
+        numberOfChildren: (_a = React__default['default'].Children.count(children)) !== null && _a !== void 0 ? _a : 0,
         containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
         gapHeightRem,
         controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
@@ -12621,16 +12675,16 @@ const OverflowGallery = (props) => {
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryPosition === 'VerticalRight') {
-        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
+        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)]));
     }
     /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible
         onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
+        return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
+    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)]));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12641,7 +12695,7 @@ const OverflowGallery = (props) => {
  * @private
  */
 const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
     /* @conditional-compile-remove(vertical-gallery) */
     parentHeight, pinnedParticipantUserIds = [], 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
@@ -12650,14 +12704,16 @@ const DefaultLayout = (props) => {
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     // This is for tracking the number of children in the first page of overflow gallery.
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+    // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
     const childrenPerPage = React.useRef(4);
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
+        localParticipant,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
@@ -13502,7 +13558,10 @@ const FloatingLocalVideoLayout = (props) => {
     const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
+                indexesToRender &&
+                indexesToRender.includes(i) &&
+                activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
@@ -13511,7 +13570,7 @@ const FloatingLocalVideoLayout = (props) => {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
             return isNarrow
                 ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
@@ -13519,25 +13578,26 @@ const FloatingLocalVideoLayout = (props) => {
                     : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
         /*@conditional-compile-remove(click-to-call) */
-        if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'HorizontalBottom') {
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
             return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
         }
         return LARGE_FLOATING_MODAL_SIZE_REM;
     }, [
         overflowGalleryTiles.length,
         isNarrow,
+        screenShareComponent,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     ]);
-    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
+    const wrappedLocalVideoComponent = (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
     showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
-        if (overflowGalleryTiles.length === 0) {
+        if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
         return (React__default['default'].createElement(OverflowGallery
@@ -13554,6 +13614,7 @@ const FloatingLocalVideoLayout = (props) => {
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        screenShareComponent,
         overflowGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
@@ -13670,7 +13731,7 @@ const VideoGallery = (props) => {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
-        return (React__default['default'].createElement(react.Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
+        return (React__default['default'].createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((shouldFloatLocalVideo && isNarrow) ||
                     /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
@@ -13732,11 +13793,13 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            menuKind: remoteVideoTileMenuOptions
-                ? remoteVideoTileMenuOptions.kind === 'drawer'
-                    ? 'drawer'
-                    : 'contextual'
-                : undefined, 
+            menuKind: participant.userId === localParticipant.userId
+                ? undefined
+                : remoteVideoTileMenuOptions
+                    ? remoteVideoTileMenuOptions.kind === 'drawer'
+                        ? 'drawer'
+                        : 'contextual'
+                    : undefined, 
             /* @conditional-compile-remove(pinned-participants) */
             drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -13753,6 +13816,7 @@ const VideoGallery = (props) => {
         onCreateRemoteStreamView,
         onDisposeRemoteVideoStreamView,
         remoteVideoViewOptions,
+        localParticipant,
         onRenderAvatar,
         showMuteIndicator,
         strings,
@@ -13773,6 +13837,7 @@ const VideoGallery = (props) => {
             : undefined;
     const layoutProps = React.useMemo(() => ({
         remoteParticipants,
+        localParticipant,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -13787,6 +13852,7 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     }), [
         remoteParticipants,
+        localParticipant,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -18786,7 +18852,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
+var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
 
 var call$i={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown"};var chat$i={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$i={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$i,chat:chat$i,callWithChat:callWithChat$i};
 
@@ -19252,22 +19318,6 @@ const convertObservableFileUploadToFileUploadsUiState = (fileUploads) => {
     }, {});
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-/**
- * Subset of CallCompositePages that represent an end call state.
- * @private
- */
-const END_CALL_PAGES = [
-    'accessDeniedTeamsMeeting',
-    'joinCallFailedDueToNoNetwork',
-    'leftCall',
-    /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
-    'removedFromCall',
-    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
-    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
-];
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -19279,443 +19329,80 @@ var __awaiter$i = (window && window.__awaiter) || function (thisArg, _arguments,
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
-const REMOTE_PSTN_USER_HUNG_UP = 560000;
-const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
-/* @conditional-compile-remove(rooms) */
-const ROOM_NOT_FOUND_SUB_CODE = 5751;
-/* @conditional-compile-remove(rooms) */
-const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
-/**
- * @private
- */
-const isCameraOn = (state) => {
-    if (state.call) {
-        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
-        return !!stream;
-    }
-    else {
-        if (state.devices.selectedCamera) {
-            const previewOn = _isPreviewOn(state.devices);
-            return previewOn;
-        }
-    }
-    return false;
+var __asyncValues = (window && window.__asyncValues) || function (o) {
+    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+    var m = o[Symbol.asyncIterator], i;
+    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
 };
 /**
- * Reduce the set of call controls visible on mobile.
- * For example do not show screenshare button.
- *
+ * Context of Chat, which is a centralized context for all state updates
  * @private
  */
-const reduceCallControlsForMobile = (callControlOptions) => {
-    if (callControlOptions === false) {
-        return false;
-    }
-    // Ensure call controls a valid object.
-    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
-    // Set to compressed mode when composite is optimized for mobile
-    reduceCallControlOptions.displayType = 'compact';
-    // Do not show screen share button when composite is optimized for mobile unless the developer
-    // has explicitly opted in.
-    if (reduceCallControlOptions.screenShareButton !== true) {
-        reduceCallControlOptions.screenShareButton = false;
+class ChatContext {
+    constructor(clientState, threadId) {
+        this.emitter = new EventEmitter__default['default']();
+        const thread = clientState.threads[threadId];
+        this.threadId = threadId;
+        if (!thread) {
+            throw 'Cannot find threadId, please initialize thread before use!';
+        }
+        this.state = {
+            userId: clientState.userId,
+            displayName: clientState.displayName,
+            thread,
+            latestErrors: clientState.latestErrors
+        };
     }
-    return reduceCallControlOptions;
-};
-var CallEndReasons;
-(function (CallEndReasons) {
-    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
-    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
-    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
-    CallEndReasons[CallEndReasons["ROOM_NOT_FOUND"] = 3] = "ROOM_NOT_FOUND";
-    CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
-})(CallEndReasons || (CallEndReasons = {}));
-const getCallEndReason = (call) => {
-    var _a, _b, _c, _d, _e;
-    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
-    /**
-     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
-     * The code and subcode is the same as when a user is removed from a teams interop call.
-     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
-     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
-     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
-     */
-    if (remoteParticipantsEndedArray.length === 1 &&
-        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
-        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
-        return CallEndReasons.LEFT_CALL;
+    onStateChange(handler) {
+        this.emitter.on('stateChanged', handler);
     }
-    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
-        return CallEndReasons.ACCESS_DENIED;
+    offStateChange(handler) {
+        this.emitter.off('stateChanged', handler);
     }
-    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
-        return CallEndReasons.REMOVED_FROM_CALL;
+    setState(state) {
+        this.state = state;
+        this.emitter.emit('stateChanged', this.state);
     }
-    /* @conditional-compile-remove(rooms) */
-    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
-        return CallEndReasons.ROOM_NOT_FOUND;
+    getState() {
+        return this.state;
     }
-    /* @conditional-compile-remove(rooms) */
-    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
-        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
+    setError(error) {
+        this.setState(Object.assign(Object.assign({}, this.state), { error }));
     }
-    if (call.callEndReason) {
-        // No error codes match, assume the user simply left the call regularly
-        return CallEndReasons.LEFT_CALL;
+    updateClientState(clientState) {
+        const thread = clientState.threads[this.threadId];
+        if (!thread) {
+            throw 'Cannot find threadId, please make sure thread state is still in Stateful ChatClient.';
+        }
+        let updatedState = {
+            userId: clientState.userId,
+            displayName: clientState.displayName,
+            thread,
+            latestErrors: clientState.latestErrors
+        };
+        /* @conditional-compile-remove(file-sharing) */
+        updatedState = Object.assign(Object.assign({}, updatedState), { fileUploads: this.state.fileUploads });
+        this.setState(updatedState);
     }
-    throw new Error('No matching call end reason');
-};
+}
 /**
- * Get the current call composite page based on the current call composite state
- *
- * @param Call - The current call state
- * @param previousCall - The state of the most recent previous call that has ended.
- *
- * @remarks - The previousCall state is needed to determine if the call has ended.
- * When the call ends a new call object is created, and so we must lookback at the
- * previous call state to understand how the call has ended. If there is no previous
- * call we know that this is a fresh call and can display the configuration page.
- *
  * @private
  */
-const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo, transferCall) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
-        return 'unsupportedEnvironment';
-    }
-    /* @conditional-compile-remove(call-transfer) */
-    if (transferCall !== undefined) {
-        return 'transferring';
-    }
-    if (call) {
-        // Must check for ongoing call *before* looking at any previous calls.
-        // If the composite completes one call and joins another, the previous calls
-        // will be populated, but not relevant for determining the page.
-        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
-        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'lobby';
-            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
-        }
-        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return 'hold';
-        }
-        else if ((call === null || call === void 0 ? void 0 : call.state) === 'Disconnecting') {
-            return 'leaving';
-        }
-        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
-            return 'call';
-        }
-        else {
-            // When the call object has been constructed after clicking , but before 'connecting' has been
-            // set on the call object, we continue to show the configuration screen.
-            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
-            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
-            // transitional state.
-            return 'configuration';
-        }
-    }
-    if (previousCall) {
-        const reason = getCallEndReason(previousCall);
-        /* @conditional-compile-remove(rooms) */
-        switch (reason) {
-            case CallEndReasons.ROOM_NOT_FOUND:
-                return 'roomNotFound';
-            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
-                return 'deniedPermissionToRoom';
-        }
-        switch (reason) {
-            case CallEndReasons.ACCESS_DENIED:
-                return 'accessDeniedTeamsMeeting';
-            case CallEndReasons.REMOVED_FROM_CALL:
-                return 'removedFromCall';
-            case CallEndReasons.LEFT_CALL:
-                if (previousCall.diagnostics.network.latest.noNetwork) {
-                    return 'joinCallFailedDueToNoNetwork';
-                }
-                return 'leftCall';
-        }
-    }
-    // No call state - show starting page (configuration)
-    return 'configuration';
-};
-/** @private */
-const IsCallEndedPage = (
-/**
- * Explicitly listing the pages of this function intentionally.
- * This protects against adding a new composite page that should be marked as an callEndedPage.
- * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
- * When you add a new composite page this will throw a compiler error. If this new page is an
- * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
- * type below to allow your new page, i.e. add `| <your new page>
- */
-page) => END_CALL_PAGES.includes(page);
-/**
- * Creates a new call control options object and sets the correct values for disabling
- * the buttons provided in the `disabledControls` array.
- * Returns a new object without changing the original object.
- * @param callControlOptions options for the call control component that need to be modified.
- * @param disabledControls An array of controls to disable.
- * @returns a copy of callControlOptions with disabledControls disabled
- * @private
- */
-const disableCallControls = (callControlOptions, disabledControls) => {
-    var _a;
-    if (callControlOptions === false) {
-        return false;
-    }
-    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
-    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
-    if (newOptions === true || newOptions === undefined) {
-        newOptions = disabledControls.reduce((acc, key) => {
-            acc[key] = { disabled: true };
-            return acc;
-        }, {});
-    }
-    else {
-        disabledControls.forEach((key) => {
-            if (newOptions[key] !== false) {
-                newOptions[key] = { disabled: true };
-            }
-        });
-    }
-    return newOptions;
-};
-/**
- * Check if a disabled object is provided for a button and returns if the button is disabled.
- * A button is only disabled if is explicitly set to disabled.
- *
- * @param option
- * @returns whether a button is disabled
- * @private
- */
-const isDisabled$2 = (option) => {
-    if (option === undefined || typeof option === 'boolean') {
-        return false;
-    }
-    return option.disabled;
-};
-/* @conditional-compile-remove(call-readiness) */
-/**
- * @returns Permissions state for the camera.
- */
-const queryCameraPermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
-    try {
-        return (yield navigator.permissions.query({ name: 'camera' })).state;
-    }
-    catch (e) {
-        console.info('permissions API is not supported by browser', e);
-        return 'unsupported';
-    }
-});
-/* @conditional-compile-remove(call-readiness) */
-/**
- * @returns Permissions state for the microphone.
- */
-const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$i(void 0, void 0, void 0, function* () {
-    try {
-        return (yield navigator.permissions.query({ name: 'microphone' })).state;
-    }
-    catch (e) {
-        console.info('permissions API is not supported by browser', e);
-        return 'unsupported';
-    }
-});
-/* @conditional-compile-remove(call-readiness) */
-/**
- *
- * This function uses permission API to determine if device permission state is granted, prompt or denied
- * @returns whether device permission state is granted, prompt or denied
- * If permission API is not supported on this browser, permission state is set to unsupported.
- * @private
- */
-const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$i(void 0, void 0, void 0, function* () {
-    const [cameraResult, microphoneResult] = yield Promise.all([
-        queryCameraPermissionFromPermissionsAPI(),
-        queryMicrophonePermissionFromPermissionsAPI()
-    ]);
-    setVideoState(cameraResult);
-    setAudioState(microphoneResult);
-});
-/* @conditional-compile-remove(unsupported-browser) */
-const isUnsupportedEnvironment = (environmentInfo, unsupportedBrowserVersionOptedIn) => {
-    return !!((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
-        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn) ||
-        (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false);
-};
-/**
- * Check if an object is identifier.
- *
- * @param identifier
- * @returns whether an identifier is one of identifier types (for runtime validation)
- * @private
- */
-const isValidIdentifier = (identifier) => {
-    return (communicationCommon.isCommunicationUserIdentifier(identifier) ||
-        communicationCommon.isPhoneNumberIdentifier(identifier) ||
-        communicationCommon.isMicrosoftTeamsUserIdentifier(identifier) ||
-        communicationCommon.isUnknownIdentifier(identifier));
-};
-/**
- * Check if we are using safari browser
- * @private
- */
-const _isSafari = (environmentInfo) => {
-    /* @conditional-compile-remove(unsupported-browser) */
-    return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
-};
-/**
- * @private
- * This is the util function to create a participant modifier for remote participantList
- * It memoize previous original participant items and only update the changed participant
- * It takes in one modifier function to generate one single participant object, it returns undefined if the object keeps unmodified
- */
-const createParticipantModifier = (createModifiedParticipant) => {
-    let previousParticipantState = undefined;
-    let modifiedParticipants = {};
-    const memoizedParticipants = {};
-    return (state) => {
-        var _a, _b, _c, _d;
-        // if root state is the same, we don't need to update the participants
-        if (((_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants) !== previousParticipantState) {
-            modifiedParticipants = {};
-            const originalParticipants = (_b = state.call) === null || _b === void 0 ? void 0 : _b.remoteParticipants;
-            for (const key in originalParticipants) {
-                const modifiedParticipant = createModifiedParticipant(key, originalParticipants[key]);
-                if (modifiedParticipant === undefined) {
-                    modifiedParticipants[key] = originalParticipants[key];
-                    continue;
-                }
-                // Generate the new item if original cached item has been changed
-                if (((_c = memoizedParticipants[key]) === null || _c === void 0 ? void 0 : _c.originalRef) !== originalParticipants[key]) {
-                    memoizedParticipants[key] = {
-                        newParticipant: modifiedParticipant,
-                        originalRef: originalParticipants[key]
-                    };
-                }
-                // the modified participant is always coming from the memoized cache, whether is was refreshed
-                // from the previous closure or not
-                modifiedParticipants[key] = memoizedParticipants[key].newParticipant;
-            }
-            previousParticipantState = (_d = state.call) === null || _d === void 0 ? void 0 : _d.remoteParticipants;
-        }
-        return Object.assign(Object.assign({}, state), { call: state.call
-                ? Object.assign(Object.assign({}, state.call), { remoteParticipants: modifiedParticipants }) : undefined });
-    };
-};
-/**
- * @private
- */
-const dismissVideoEffectsError = (toDismiss) => {
-    var _a;
-    const now = new Date(Date.now());
-    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
-    // Record that this error was dismissed for the first time right now.
-    return {
-        dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
-        activeSince: toDismiss.timestamp
-    };
-};
-/* @conditional-compile-remove(video-background-effects) */
-/** @private */
-const getBackgroundEffectFromSelectedEffect = (selectedEffect) => (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'blur'
-    ? new communicationCallingEffects.BackgroundBlurEffect()
-    : (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'replacement'
-        ? new communicationCallingEffects.BackgroundReplacementEffect({ backgroundImageUrl: selectedEffect.backgroundImageUrl })
-        : undefined;
-/* @conditional-compile-remove(video-background-effects) */
-/**
- * @remarks this logic should mimic the onToggleCamera in the common call handlers.
- * @private
- */
-const getSelectedCameraFromAdapterState = (state) => state.devices.selectedCamera || state.devices.cameras[0];
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __asyncValues = (window && window.__asyncValues) || function (o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-};
-/**
- * Context of Chat, which is a centralized context for all state updates
- * @private
- */
-class ChatContext {
-    constructor(clientState, threadId) {
-        this.emitter = new EventEmitter__default['default']();
-        const thread = clientState.threads[threadId];
-        this.threadId = threadId;
-        if (!thread) {
-            throw 'Cannot find threadId, please initialize thread before use!';
-        }
-        this.state = {
-            userId: clientState.userId,
-            displayName: clientState.displayName,
-            thread,
-            latestErrors: clientState.latestErrors
-        };
-    }
-    onStateChange(handler) {
-        this.emitter.on('stateChanged', handler);
-    }
-    offStateChange(handler) {
-        this.emitter.off('stateChanged', handler);
-    }
-    setState(state) {
-        this.state = state;
-        this.emitter.emit('stateChanged', this.state);
-    }
-    getState() {
-        return this.state;
-    }
-    setError(error) {
-        this.setState(Object.assign(Object.assign({}, this.state), { error }));
-    }
-    updateClientState(clientState) {
-        const thread = clientState.threads[this.threadId];
-        if (!thread) {
-            throw 'Cannot find threadId, please make sure thread state is still in Stateful ChatClient.';
-        }
-        let updatedState = {
-            userId: clientState.userId,
-            displayName: clientState.displayName,
-            thread,
-            latestErrors: clientState.latestErrors
-        };
-        /* @conditional-compile-remove(file-sharing) */
-        updatedState = Object.assign(Object.assign({}, updatedState), { fileUploads: this.state.fileUploads });
-        this.setState(updatedState);
-    }
-}
-/**
- * @private
- */
-class AzureCommunicationChatAdapter {
-    constructor(chatClient, chatThreadClient, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options) {
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.credential = undefined;
-        this.emitter = new EventEmitter__default['default']();
-        this.bindAllPublicMethods();
-        this.chatClient = chatClient;
-        this.chatThreadClient = chatThreadClient;
-        this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        if (options && options.credential) {
-            this.credential = options.credential;
+class AzureCommunicationChatAdapter {
+    constructor(chatClient, chatThreadClient, 
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options) {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this.credential = undefined;
+        this.emitter = new EventEmitter__default['default']();
+        this.bindAllPublicMethods();
+        this.chatClient = chatClient;
+        this.chatThreadClient = chatThreadClient;
+        this.context = new ChatContext(chatClient.getState(), chatThreadClient.threadId);
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        if (options && options.credential) {
+            this.credential = options.credential;
         }
         /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         this.fileUploadAdapter = new AzureCommunicationFileUploadAdapter(this.context);
@@ -19768,9 +19455,9 @@ class AzureCommunicationChatAdapter {
         this.unsubscribeAllEvents();
     }
     fetchInitialData() {
-        return __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             // If get properties fails we dont want to try to get the participants after.
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 var e_1, _a;
                 yield this.chatThreadClient.getProperties();
                 try {
@@ -19804,8 +19491,8 @@ class AzureCommunicationChatAdapter {
         this.context.offStateChange(handler);
     }
     sendMessage(content, options = {}) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
                 /* @conditional-compile-remove(file-sharing) */
@@ -19822,51 +19509,51 @@ class AzureCommunicationChatAdapter {
         });
     }
     sendReadReceipt(chatMessageId) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onMessageSeen(chatMessageId);
             }));
         });
     }
     sendTypingIndicator() {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onTyping();
             }));
         });
     }
     removeParticipant(userId) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.onRemoveParticipant(userId);
             }));
         });
     }
     setTopic(topicName) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 yield this.handlers.updateThreadTopicName(topicName);
             }));
         });
     }
     loadPreviousChatMessages(messagesToLoad) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 return yield this.handlers.onLoadPreviousChatMessages(messagesToLoad);
             }));
         });
     }
     updateMessage(messageId, content, metadata, options) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 return yield this.handlers.onUpdateMessage(messageId, content, metadata, options);
             }));
         });
     }
     deleteMessage(messageId) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return yield this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 return yield this.handlers.onDeleteMessage(messageId);
             }));
         });
@@ -19901,8 +19588,8 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadAttachments(options) {
-        return __awaiter$h(this, void 0, void 0, function* () {
-            return this.asyncTeeErrorToEventEmitter(() => __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
+            return this.asyncTeeErrorToEventEmitter(() => __awaiter$i(this, void 0, void 0, function* () {
                 if (this.credential === undefined) {
                     const e = new Error();
                     e['target'] = 'ChatThreadClient.getMessage';
@@ -19922,9 +19609,9 @@ class AzureCommunicationChatAdapter {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadAuthenticatedFile(accessToken, options) {
-        return __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             function fetchWithAuthentication(url, token) {
-                return __awaiter$h(this, void 0, void 0, function* () {
+                return __awaiter$i(this, void 0, void 0, function* () {
                     const headers = new Headers();
                     headers.append('Authorization', `Bearer ${token}`);
                     try {
@@ -19996,7 +19683,7 @@ class AzureCommunicationChatAdapter {
         this.emitter.off(event, listener);
     }
     asyncTeeErrorToEventEmitter(f) {
-        return __awaiter$h(this, void 0, void 0, function* () {
+        return __awaiter$i(this, void 0, void 0, function* () {
             try {
                 return yield f();
             }
@@ -20038,8 +19725,8 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$h(void 0, void 0, void 0, function* () {
-    if (!isValidIdentifier(userId)) {
+const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$i(void 0, void 0, void 0, function* () {
+    if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
     const chatClient = createStatefulChatClient({
@@ -20107,7 +19794,7 @@ beforeDispose) => {
         if (!credential || !displayName || !endpoint || !threadId || !userId) {
             return;
         }
-        (() => __awaiter$h(void 0, void 0, void 0, function* () {
+        (() => __awaiter$i(void 0, void 0, void 0, function* () {
             if (adapterRef.current) {
                 // Dispose the old adapter when a new one is created.
                 //
@@ -20139,7 +19826,7 @@ beforeDispose) => {
     // Dispose any existing adapter when the component unmounts.
     React.useEffect(() => {
         return () => {
-            (() => __awaiter$h(void 0, void 0, void 0, function* () {
+            (() => __awaiter$i(void 0, void 0, void 0, function* () {
                 if (adapterRef.current) {
                     if (beforeDisposeRef.current) {
                         yield beforeDisposeRef.current(adapterRef.current);
@@ -20163,7 +19850,7 @@ beforeDispose) => {
 function createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, 
 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 options) {
-    return __awaiter$h(this, void 0, void 0, function* () {
+    return __awaiter$i(this, void 0, void 0, function* () {
         return new AzureCommunicationChatAdapter(chatClient, chatThreadClient, 
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ options);
     });
@@ -20376,7 +20063,7 @@ const sendboxContainerStyles = {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+var __awaiter$h = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -20397,7 +20084,7 @@ const AvatarPersona = (props) => {
     const { userId, dataProvider, text, imageUrl, imageInitials, initialsColor, initialsTextColor, showOverflowTooltip } = props;
     const [data, setData] = React.useState();
     React.useEffect(() => {
-        (() => __awaiter$g(void 0, void 0, void 0, function* () {
+        (() => __awaiter$h(void 0, void 0, void 0, function* () {
             if (dataProvider && userId) {
                 const newData = yield dataProvider(userId);
                 if (avatarDeepDifferenceCheck(data, newData)) {
@@ -20764,6 +20451,253 @@ const FileDownloadErrorBar = (props) => {
     }
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+var __awaiter$g = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * @private
+ */
+const ChatScreen = (props) => {
+    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
+    const defaultNumberOfChatMessagesToReload = 5;
+    /* @conditional-compile-remove(file-sharing) */
+    const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
+    const adapter = useAdapter$1();
+    const theme = useTheme();
+    React.useEffect(() => {
+        // Initial data should be always fetched by the composite(or external caller) instead of the adapter
+        const fetchData = () => __awaiter$g(void 0, void 0, void 0, function* () {
+            // Fetch initial data for adapter
+            yield adapter.fetchInitialData();
+            // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
+            yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
+        });
+        fetchData();
+    }, [adapter]);
+    const messageThreadProps = usePropsFor$2(MessageThread);
+    const sendBoxProps = usePropsFor$2(SendBox);
+    const typingIndicatorProps = usePropsFor$2(TypingIndicator);
+    const headerProps = useAdaptedSelector$1(getHeaderProps);
+    const errorBarProps = usePropsFor$2(ErrorBar);
+    const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
+        return (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
+    }, [onFetchAvatarPersonaData]);
+    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
+    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
+    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
+    const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
+    const fileUploadButtonOnChange = React.useCallback((files) => {
+        if (!files) {
+            return;
+        }
+        /* @conditional-compile-remove(file-sharing) */
+        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
+        /* @conditional-compile-remove(file-sharing) */
+        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
+    }, [adapter, fileSharing, userId]);
+    /* @conditional-compile-remove(file-sharing) */
+    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
+            setDownloadErrorMessage(errorMessage);
+        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$g(void 0, void 0, void 0, function* () {
+        if (attachment.previewUrl) {
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
+            return blob;
+        }
+        return [{ blobUrl: '' }];
+    }), [adapter]);
+    const AttachFileButton = React.useCallback(() => {
+        if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
+            return null;
+        }
+        return (React__default['default'].createElement(FileUploadButtonWrapper, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
+    }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
+    return (React__default['default'].createElement(react.Stack, { className: chatContainer, grow: true },
+        (options === null || options === void 0 ? void 0 : options.topic) !== false && React__default['default'].createElement(ChatHeader, Object.assign({}, headerProps)),
+        React__default['default'].createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
+            React__default['default'].createElement(react.Stack, { className: chatWrapper, grow: true },
+                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)),
+                /* @conditional-compile-remove(file-sharing) */
+                React__default['default'].createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
+                        setDownloadErrorMessage('');
+                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
+                React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
+                    /* @conditional-compile-remove(file-sharing) */
+                    onRenderFileDownloads: onRenderFileDownloads, 
+                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
+                    React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
+                    React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
+                        formFactor === 'mobile' && (React__default['default'].createElement(react.Stack, { verticalAlign: "center" },
+                            React__default['default'].createElement(AttachFileButton, null))),
+                        React__default['default'].createElement(react.Stack, { grow: true },
+                            React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                activeFileUploads: useSelector$2(fileUploadsSelector).files, 
+                                /* @conditional-compile-remove(file-sharing) */
+                                onCancelFileUpload: adapter.cancelFileUpload }))),
+                        formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
+            /* @conditional-compile-remove(chat-composite-participant-pane) */
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * A customizable UI composite for the chat experience.
+ *
+ * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
+ *
+ * @public
+ */
+const ChatComposite = (props) => {
+    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
+    const formFactor = props['formFactor'] || 'desktop';
+    /**
+     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
+     * @private
+     */
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    const fileSharingOptions = () => {
+        /* @conditional-compile-remove(file-sharing) */
+        return {
+            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
+        };
+    };
+    return (React__default['default'].createElement("div", { className: chatScreenContainerStyle },
+        React__default['default'].createElement(BaseProvider, Object.assign({}, props),
+            React__default['default'].createElement(ChatAdapterProvider, { adapter: adapter },
+                React__default['default'].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
+};
+
+// Copyright (c) Microsoft Corporation.
+const CallAdapterContext = React.createContext(undefined);
+/**
+ * @private
+ */
+const CallAdapterProvider = (props) => {
+    const { adapter } = props;
+    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
+};
+/**
+ * @private
+ */
+const useAdapter = () => {
+    const adapter = React.useContext(CallAdapterContext);
+    if (!adapter) {
+        throw 'Cannot find adapter please initialize before usage.';
+    }
+    return adapter;
+};
+
+// Copyright (c) Microsoft Corporation.
+/**
+ * @private
+ */
+const useAdaptedSelector = (selector, selectorProps) => {
+    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
+};
+/**
+ * @private
+ */
+const useSelectorWithAdaptation = (selector, adaptState, selectorProps) => {
+    var _a;
+    const adapter = useAdapter();
+    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
+    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
+    const mounted = React.useRef(false);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    });
+    const callId = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.id;
+    const callConfigProps = React.useMemo(() => ({
+        callId
+    }), [callId]);
+    const [props, setProps] = React.useState(selector(adaptState(adapter.getState()), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps));
+    const propRef = React.useRef(props);
+    propRef.current = props;
+    React.useEffect(() => {
+        const onStateChange = (state) => {
+            if (!mounted.current) {
+                return;
+            }
+            const newProps = selector(adaptState(state), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps);
+            if (propRef.current !== newProps) {
+                setProps(newProps);
+            }
+        };
+        adapter.onStateChange(onStateChange);
+        return () => {
+            adapter.offStateChange(onStateChange);
+        };
+    }, [adaptState, adapter, selector, selectorProps, callConfigProps]);
+    return props;
+};
+const memoizeState = memoizeOne__default['default']((userId, deviceManager, calls, latestErrors, displayName, alternateCallerId, environmentInfo) => ({
+    userId,
+    incomingCalls: {},
+    incomingCallsEnded: {},
+    callsEnded: {},
+    deviceManager,
+    callAgent: { displayName },
+    calls,
+    latestErrors,
+    /* @conditional-compile-remove(PSTN-calls) */
+    alternateCallerId,
+    /* @conditional-compile-remove(unsupported-browser) */
+    environmentInfo
+}));
+const memoizeCalls = memoizeOne__default['default']((call) => (call ? { [call.id]: call } : {}));
+const adaptCompositeState = (compositeState) => {
+    return memoizeState(compositeState.userId, compositeState.devices, memoizeCalls(compositeState.call), 
+    // This is an unsafe type expansion.
+    // compositeState.latestErrors can contain properties that are not valid in CallErrors.
+    //
+    // But there is no way to check for valid property names at runtime:
+    // - The set of valid property names is built from types in the @azure/communication-calling.
+    //   Thus we don't have a literal array of allowed strings at runtime.
+    // - Due to minification / uglification, the property names from the objects at runtime can't be used
+    //   to compare against permissible values inferred from the types.
+    //
+    // This is not a huge problem -- it simply means that our adapted selector will include some extra operations
+    // that are unknown to the UI component and data binding libraries. Generic handling of the errors (e.g.,
+    // just displaying them in some UI surface) will continue to work for these operations. Handling of
+    // specific operations (e.g., acting on errors related to permission issues) will ignore these operations.
+    compositeState.latestErrors, compositeState.displayName, 
+    /* @conditional-compile-remove(PSTN-calls) */
+    compositeState.alternateCallerId, 
+    /* @conditional-compile-remove(unsupported-browser) */
+    compositeState.environmentInfo);
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+/**
+ * Subset of CallCompositePages that represent an end call state.
+ * @private
+ */
+const END_CALL_PAGES = [
+    'accessDeniedTeamsMeeting',
+    'joinCallFailedDueToNoNetwork',
+    'leftCall',
+    /* @conditional-compile-remove(rooms) */ 'deniedPermissionToRoom',
+    'removedFromCall',
+    /* @conditional-compile-remove(rooms) */ 'roomNotFound',
+    /* @conditional-compile-remove(unsupported-browser) */ 'unsupportedEnvironment'
+];
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -20775,225 +20709,344 @@ var __awaiter$f = (window && window.__awaiter) || function (thisArg, _arguments,
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+const ACCESS_DENIED_TEAMS_MEETING_SUB_CODE = 5854;
+const REMOTE_PSTN_USER_HUNG_UP = 560000;
+const REMOVED_FROM_CALL_SUB_CODES = [5000, 5300, REMOTE_PSTN_USER_HUNG_UP];
+/* @conditional-compile-remove(rooms) */
+const ROOM_NOT_FOUND_SUB_CODE = 5751;
+/* @conditional-compile-remove(rooms) */
+const DENIED_PERMISSION_TO_ROOM_SUB_CODE = 5828;
 /**
  * @private
  */
-const ChatScreen = (props) => {
-    const { onFetchAvatarPersonaData, onRenderMessage, onRenderTypingIndicator, options, styles, fileSharing, formFactor } = props;
-    const defaultNumberOfChatMessagesToReload = 5;
-    /* @conditional-compile-remove(file-sharing) */
-    const [downloadErrorMessage, setDownloadErrorMessage] = React__default['default'].useState('');
-    const adapter = useAdapter$1();
-    const theme = useTheme();
-    React.useEffect(() => {
-        // Initial data should be always fetched by the composite(or external caller) instead of the adapter
-        const fetchData = () => __awaiter$f(void 0, void 0, void 0, function* () {
-            // Fetch initial data for adapter
-            yield adapter.fetchInitialData();
-            // Fetch initial set of messages. Without fetching messages here, if the Composite's adapter is changed the message thread does not load new messages.
-            yield adapter.loadPreviousChatMessages(defaultNumberOfChatMessagesToReload);
-        });
-        fetchData();
-    }, [adapter]);
-    const messageThreadProps = usePropsFor$2(MessageThread);
-    const sendBoxProps = usePropsFor$2(SendBox);
-    const typingIndicatorProps = usePropsFor$2(TypingIndicator);
-    const headerProps = useAdaptedSelector$1(getHeaderProps);
-    const errorBarProps = usePropsFor$2(ErrorBar);
-    const onRenderAvatarCallback = React.useCallback((userId, defaultOptions) => {
-        return (React__default['default'].createElement(AvatarPersona, Object.assign({ userId: userId, hidePersonaDetails: true }, defaultOptions, { dataProvider: onFetchAvatarPersonaData })));
-    }, [onFetchAvatarPersonaData]);
-    const messageThreadStyles = Object.assign({}, messageThreadChatCompositeStyles(theme.semanticColors.bodyBackground), styles === null || styles === void 0 ? void 0 : styles.messageThread);
-    const typingIndicatorStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.typingIndicator);
-    const sendBoxStyles = Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.sendBox);
-    const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
-    const fileUploadButtonOnChange = React.useCallback((files) => {
-        if (!files) {
-            return;
+const isCameraOn = (state) => {
+    if (state.call) {
+        const stream = state.call.localVideoStreams.find((stream) => stream.mediaStreamType === 'Video');
+        return !!stream;
+    }
+    else {
+        if (state.devices.selectedCamera) {
+            const previewOn = _isPreviewOn(state.devices);
+            return previewOn;
         }
-        /* @conditional-compile-remove(file-sharing) */
-        const fileUploads = adapter.registerActiveFileUploads(Array.from(files));
-        /* @conditional-compile-remove(file-sharing) */
-        fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler(userId, fileUploads);
-    }, [adapter, fileSharing, userId]);
-    /* @conditional-compile-remove(file-sharing) */
-    const onRenderFileDownloads = React.useCallback((userId, message) => (React__default['default'].createElement(_FileDownloadCards, { userId: userId, fileMetadata: message.attachedFilesMetadata || [], downloadHandler: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler, onDownloadErrorMessage: (errorMessage) => {
-            setDownloadErrorMessage(errorMessage);
-        } })), [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.downloadHandler]);
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onRenderInlineAttachment = React.useCallback((attachment) => __awaiter$f(void 0, void 0, void 0, function* () {
-        if (attachment.previewUrl) {
-            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.previewUrl] });
-            return blob;
+    }
+    return false;
+};
+/**
+ * Reduce the set of call controls visible on mobile.
+ * For example do not show screenshare button.
+ *
+ * @private
+ */
+const reduceCallControlsForMobile = (callControlOptions) => {
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure call controls a valid object.
+    const reduceCallControlOptions = callControlOptions === true ? {} : callControlOptions || {};
+    // Set to compressed mode when composite is optimized for mobile
+    reduceCallControlOptions.displayType = 'compact';
+    // Do not show screen share button when composite is optimized for mobile unless the developer
+    // has explicitly opted in.
+    if (reduceCallControlOptions.screenShareButton !== true) {
+        reduceCallControlOptions.screenShareButton = false;
+    }
+    return reduceCallControlOptions;
+};
+var CallEndReasons;
+(function (CallEndReasons) {
+    CallEndReasons[CallEndReasons["LEFT_CALL"] = 0] = "LEFT_CALL";
+    CallEndReasons[CallEndReasons["ACCESS_DENIED"] = 1] = "ACCESS_DENIED";
+    CallEndReasons[CallEndReasons["REMOVED_FROM_CALL"] = 2] = "REMOVED_FROM_CALL";
+    CallEndReasons[CallEndReasons["ROOM_NOT_FOUND"] = 3] = "ROOM_NOT_FOUND";
+    CallEndReasons[CallEndReasons["DENIED_PERMISSION_TO_ROOM"] = 4] = "DENIED_PERMISSION_TO_ROOM";
+})(CallEndReasons || (CallEndReasons = {}));
+const getCallEndReason = (call) => {
+    var _a, _b, _c, _d, _e;
+    const remoteParticipantsEndedArray = Array.from(Object.values(call.remoteParticipantsEnded));
+    /**
+     * Handle the special case in a PSTN call where removing the last user kicks the caller out of the call.
+     * The code and subcode is the same as when a user is removed from a teams interop call.
+     * Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
+     * If yes, the caller was kicked out of the call, but we need to show them that they left the call.
+     * Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
+     */
+    if (remoteParticipantsEndedArray.length === 1 &&
+        communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
+        ((_a = call.callEndReason) === null || _a === void 0 ? void 0 : _a.subCode) !== REMOTE_PSTN_USER_HUNG_UP) {
+        return CallEndReasons.LEFT_CALL;
+    }
+    if (((_b = call.callEndReason) === null || _b === void 0 ? void 0 : _b.subCode) && call.callEndReason.subCode === ACCESS_DENIED_TEAMS_MEETING_SUB_CODE) {
+        return CallEndReasons.ACCESS_DENIED;
+    }
+    if (((_c = call.callEndReason) === null || _c === void 0 ? void 0 : _c.subCode) && REMOVED_FROM_CALL_SUB_CODES.includes(call.callEndReason.subCode)) {
+        return CallEndReasons.REMOVED_FROM_CALL;
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (((_d = call.callEndReason) === null || _d === void 0 ? void 0 : _d.subCode) && call.callEndReason.subCode === ROOM_NOT_FOUND_SUB_CODE) {
+        return CallEndReasons.ROOM_NOT_FOUND;
+    }
+    /* @conditional-compile-remove(rooms) */
+    if (((_e = call.callEndReason) === null || _e === void 0 ? void 0 : _e.subCode) && call.callEndReason.subCode === DENIED_PERMISSION_TO_ROOM_SUB_CODE) {
+        return CallEndReasons.DENIED_PERMISSION_TO_ROOM;
+    }
+    if (call.callEndReason) {
+        // No error codes match, assume the user simply left the call regularly
+        return CallEndReasons.LEFT_CALL;
+    }
+    throw new Error('No matching call end reason');
+};
+/**
+ * Get the current call composite page based on the current call composite state
+ *
+ * @param Call - The current call state
+ * @param previousCall - The state of the most recent previous call that has ended.
+ *
+ * @remarks - The previousCall state is needed to determine if the call has ended.
+ * When the call ends a new call object is created, and so we must lookback at the
+ * previous call state to understand how the call has ended. If there is no previous
+ * call we know that this is a fresh call and can display the configuration page.
+ *
+ * @private
+ */
+const getCallCompositePage = (call, previousCall, unsupportedBrowserInfo, transferCall) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    if (isUnsupportedEnvironment(unsupportedBrowserInfo.environmentInfo, unsupportedBrowserInfo.unsupportedBrowserVersionOptedIn)) {
+        return 'unsupportedEnvironment';
+    }
+    /* @conditional-compile-remove(call-transfer) */
+    if (transferCall !== undefined) {
+        return 'transferring';
+    }
+    if (call) {
+        // Must check for ongoing call *before* looking at any previous calls.
+        // If the composite completes one call and joins another, the previous calls
+        // will be populated, but not relevant for determining the page.
+        // `_isInLobbyOrConnecting` needs to be checked first because `_isInCall` also returns true when call is in lobby.
+        if (_isInLobbyOrConnecting(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'lobby';
+            // `LocalHold` needs to be checked before `isInCall` since it is also a state that's considered in call.
         }
-        return [{ blobUrl: '' }];
-    }), [adapter]);
-    const AttachFileButton = React.useCallback(() => {
-        if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
-            return null;
+        else if ((call === null || call === void 0 ? void 0 : call.state) === 'LocalHold') {
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return 'hold';
         }
-        return (React__default['default'].createElement(FileUploadButtonWrapper, { accept: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, multiple: fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, onChange: fileUploadButtonOnChange }));
-    }, [fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.accept, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.multiple, fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler, fileUploadButtonOnChange]);
-    return (React__default['default'].createElement(react.Stack, { className: chatContainer, grow: true },
-        (options === null || options === void 0 ? void 0 : options.topic) !== false && React__default['default'].createElement(ChatHeader, Object.assign({}, headerProps)),
-        React__default['default'].createElement(react.Stack, { className: chatArea, tokens: participantListContainerPadding, horizontal: true, grow: true },
-            React__default['default'].createElement(react.Stack, { className: chatWrapper, grow: true },
-                (options === null || options === void 0 ? void 0 : options.errorBar) !== false && React__default['default'].createElement(ErrorBar, Object.assign({}, errorBarProps)),
-                /* @conditional-compile-remove(file-sharing) */
-                React__default['default'].createElement(FileDownloadErrorBar, { onDismissDownloadErrorMessage: React.useCallback(() => {
-                        setDownloadErrorMessage('');
-                    }, []), fileDownloadErrorMessage: downloadErrorMessage || '' }),
-                React__default['default'].createElement(MessageThread, Object.assign({}, messageThreadProps, { onRenderAvatar: onRenderAvatarCallback, onRenderMessage: onRenderMessage, 
-                    /* @conditional-compile-remove(file-sharing) */
-                    onRenderFileDownloads: onRenderFileDownloads, 
-                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
-                React__default['default'].createElement(react.Stack, { className: react.mergeStyles(sendboxContainerStyles) },
-                    React__default['default'].createElement("div", { className: react.mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React__default['default'].createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
-                    React__default['default'].createElement(react.Stack, { horizontal: formFactor === 'mobile' },
-                        formFactor === 'mobile' && (React__default['default'].createElement(react.Stack, { verticalAlign: "center" },
-                            React__default['default'].createElement(AttachFileButton, null))),
-                        React__default['default'].createElement(react.Stack, { grow: true },
-                            React__default['default'].createElement(SendBox, Object.assign({}, sendBoxProps, { autoFocus: options === null || options === void 0 ? void 0 : options.autoFocus, styles: sendBoxStyles, 
-                                /* @conditional-compile-remove(file-sharing) */
-                                activeFileUploads: useSelector$2(fileUploadsSelector).files, 
-                                /* @conditional-compile-remove(file-sharing) */
-                                onCancelFileUpload: adapter.cancelFileUpload }))),
-                        formFactor !== 'mobile' && React__default['default'].createElement(AttachFileButton, null)))),
-            /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React__default['default'].createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+        else if ((call === null || call === void 0 ? void 0 : call.state) === 'Disconnecting') {
+            return 'leaving';
+        }
+        else if (_isInCall(call === null || call === void 0 ? void 0 : call.state)) {
+            return 'call';
+        }
+        else {
+            // When the call object has been constructed after clicking , but before 'connecting' has been
+            // set on the call object, we continue to show the configuration screen.
+            // The call object does not correctly reflect local device state until `call.state` moves to `connecting`.
+            // Moving to the 'lobby' page too soon leads to components that depend on the `call` object to show incorrect
+            // transitional state.
+            return 'configuration';
+        }
+    }
+    if (previousCall) {
+        const reason = getCallEndReason(previousCall);
+        /* @conditional-compile-remove(rooms) */
+        switch (reason) {
+            case CallEndReasons.ROOM_NOT_FOUND:
+                return 'roomNotFound';
+            case CallEndReasons.DENIED_PERMISSION_TO_ROOM:
+                return 'deniedPermissionToRoom';
+        }
+        switch (reason) {
+            case CallEndReasons.ACCESS_DENIED:
+                return 'accessDeniedTeamsMeeting';
+            case CallEndReasons.REMOVED_FROM_CALL:
+                return 'removedFromCall';
+            case CallEndReasons.LEFT_CALL:
+                if (previousCall.diagnostics.network.latest.noNetwork) {
+                    return 'joinCallFailedDueToNoNetwork';
+                }
+                return 'leftCall';
+        }
+    }
+    // No call state - show starting page (configuration)
+    return 'configuration';
+};
+/** @private */
+const IsCallEndedPage = (
+/**
+ * Explicitly listing the pages of this function intentionally.
+ * This protects against adding a new composite page that should be marked as an callEndedPage.
+ * EndCallPages are used to trigger onCallEnded events so this could easily be missed.
+ * When you add a new composite page this will throw a compiler error. If this new page is an
+ * EndCallPage ensure you update the END_CALL_PAGES. Afterwards update the `page` parameter
+ * type below to allow your new page, i.e. add `| <your new page>
+ */
+page) => END_CALL_PAGES.includes(page);
+/**
+ * Creates a new call control options object and sets the correct values for disabling
+ * the buttons provided in the `disabledControls` array.
+ * Returns a new object without changing the original object.
+ * @param callControlOptions options for the call control component that need to be modified.
+ * @param disabledControls An array of controls to disable.
+ * @returns a copy of callControlOptions with disabledControls disabled
+ * @private
+ */
+const disableCallControls = (callControlOptions, disabledControls) => {
+    var _a;
+    if (callControlOptions === false) {
+        return false;
+    }
+    // Ensure we clone the prop if it is an object to ensure we do not mutate the original prop.
+    let newOptions = (_a = (callControlOptions instanceof Object ? Object.assign({}, callControlOptions) : callControlOptions)) !== null && _a !== void 0 ? _a : {};
+    if (newOptions === true || newOptions === undefined) {
+        newOptions = disabledControls.reduce((acc, key) => {
+            acc[key] = { disabled: true };
+            return acc;
+        }, {});
+    }
+    else {
+        disabledControls.forEach((key) => {
+            if (newOptions[key] !== false) {
+                newOptions[key] = { disabled: true };
+            }
+        });
+    }
+    return newOptions;
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
- * A customizable UI composite for the chat experience.
- *
- * @remarks Chat composite min width and height are respectively 17.5rem and 20rem (280px and 320px, with default rem at 16px)
+ * Check if a disabled object is provided for a button and returns if the button is disabled.
+ * A button is only disabled if is explicitly set to disabled.
  *
- * @public
+ * @param option
+ * @returns whether a button is disabled
+ * @private
  */
-const ChatComposite = (props) => {
-    const { adapter, options, onFetchAvatarPersonaData, onRenderTypingIndicator, onRenderMessage, onFetchParticipantMenuItems } = props;
-    const formFactor = props['formFactor'] || 'desktop';
-    /**
-     * @TODO Remove this function and pass the props directly when file-sharing is promoted to stable.
-     * @private
-     */
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    const fileSharingOptions = () => {
-        /* @conditional-compile-remove(file-sharing) */
-        return {
-            fileSharing: options === null || options === void 0 ? void 0 : options.fileSharing
-        };
-    };
-    return (React__default['default'].createElement("div", { className: chatScreenContainerStyle },
-        React__default['default'].createElement(BaseProvider, Object.assign({}, props),
-            React__default['default'].createElement(ChatAdapterProvider, { adapter: adapter },
-                React__default['default'].createElement(ChatScreen, Object.assign({ formFactor: formFactor, options: options, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onRenderTypingIndicator: onRenderTypingIndicator, onRenderMessage: onRenderMessage, onFetchParticipantMenuItems: onFetchParticipantMenuItems }, fileSharingOptions()))))));
+const isDisabled$2 = (option) => {
+    if (option === undefined || typeof option === 'boolean') {
+        return false;
+    }
+    return option.disabled;
 };
-
-// Copyright (c) Microsoft Corporation.
-const CallAdapterContext = React.createContext(undefined);
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * @returns Permissions state for the camera.
+ */
+const queryCameraPermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
+    try {
+        return (yield navigator.permissions.query({ name: 'camera' })).state;
+    }
+    catch (e) {
+        console.info('permissions API is not supported by browser', e);
+        return 'unsupported';
+    }
+});
+/* @conditional-compile-remove(call-readiness) */
+/**
+ * @returns Permissions state for the microphone.
+ */
+const queryMicrophonePermissionFromPermissionsAPI = () => __awaiter$f(void 0, void 0, void 0, function* () {
+    try {
+        return (yield navigator.permissions.query({ name: 'microphone' })).state;
+    }
+    catch (e) {
+        console.info('permissions API is not supported by browser', e);
+        return 'unsupported';
+    }
+});
+/* @conditional-compile-remove(call-readiness) */
 /**
+ *
+ * This function uses permission API to determine if device permission state is granted, prompt or denied
+ * @returns whether device permission state is granted, prompt or denied
+ * If permission API is not supported on this browser, permission state is set to unsupported.
  * @private
  */
-const CallAdapterProvider = (props) => {
-    const { adapter } = props;
-    return React__default['default'].createElement(CallAdapterContext.Provider, { value: adapter }, props.children);
+const getDevicePermissionState = (setVideoState, setAudioState) => __awaiter$f(void 0, void 0, void 0, function* () {
+    const [cameraResult, microphoneResult] = yield Promise.all([
+        queryCameraPermissionFromPermissionsAPI(),
+        queryMicrophonePermissionFromPermissionsAPI()
+    ]);
+    setVideoState(cameraResult);
+    setAudioState(microphoneResult);
+});
+/* @conditional-compile-remove(unsupported-browser) */
+const isUnsupportedEnvironment = (environmentInfo, unsupportedBrowserVersionOptedIn) => {
+    return !!((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowser) === false ||
+        ((environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedBrowserVersion) === false && !unsupportedBrowserVersionOptedIn) ||
+        (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.isSupportedPlatform) === false);
 };
 /**
+ * Check if we are using safari browser
  * @private
  */
-const useAdapter = () => {
-    const adapter = React.useContext(CallAdapterContext);
-    if (!adapter) {
-        throw 'Cannot find adapter please initialize before usage.';
-    }
-    return adapter;
+const _isSafari = (environmentInfo) => {
+    /* @conditional-compile-remove(unsupported-browser) */
+    return (environmentInfo === null || environmentInfo === void 0 ? void 0 : environmentInfo.environment.browser) === 'safari';
 };
-
-// Copyright (c) Microsoft Corporation.
 /**
  * @private
+ * This is the util function to create a participant modifier for remote participantList
+ * It memoize previous original participant items and only update the changed participant
+ * It takes in one modifier function to generate one single participant object, it returns undefined if the object keeps unmodified
  */
-const useAdaptedSelector = (selector, selectorProps) => {
-    return useSelectorWithAdaptation(selector, adaptCompositeState, selectorProps);
+const createParticipantModifier = (createModifiedParticipant) => {
+    let previousParticipantState = undefined;
+    let modifiedParticipants = {};
+    const memoizedParticipants = {};
+    return (state) => {
+        var _a, _b, _c, _d;
+        // if root state is the same, we don't need to update the participants
+        if (((_a = state.call) === null || _a === void 0 ? void 0 : _a.remoteParticipants) !== previousParticipantState) {
+            modifiedParticipants = {};
+            const originalParticipants = (_b = state.call) === null || _b === void 0 ? void 0 : _b.remoteParticipants;
+            for (const key in originalParticipants) {
+                const modifiedParticipant = createModifiedParticipant(key, originalParticipants[key]);
+                if (modifiedParticipant === undefined) {
+                    modifiedParticipants[key] = originalParticipants[key];
+                    continue;
+                }
+                // Generate the new item if original cached item has been changed
+                if (((_c = memoizedParticipants[key]) === null || _c === void 0 ? void 0 : _c.originalRef) !== originalParticipants[key]) {
+                    memoizedParticipants[key] = {
+                        newParticipant: modifiedParticipant,
+                        originalRef: originalParticipants[key]
+                    };
+                }
+                // the modified participant is always coming from the memoized cache, whether is was refreshed
+                // from the previous closure or not
+                modifiedParticipants[key] = memoizedParticipants[key].newParticipant;
+            }
+            previousParticipantState = (_d = state.call) === null || _d === void 0 ? void 0 : _d.remoteParticipants;
+        }
+        return Object.assign(Object.assign({}, state), { call: state.call
+                ? Object.assign(Object.assign({}, state.call), { remoteParticipants: modifiedParticipants }) : undefined });
+    };
 };
 /**
  * @private
  */
-const useSelectorWithAdaptation = (selector, adaptState, selectorProps) => {
+const dismissVideoEffectsError = (toDismiss) => {
     var _a;
-    const adapter = useAdapter();
-    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
-    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
-    const mounted = React.useRef(false);
-    React.useEffect(() => {
-        mounted.current = true;
-        return () => {
-            mounted.current = false;
-        };
-    });
-    const callId = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.id;
-    const callConfigProps = React.useMemo(() => ({
-        callId
-    }), [callId]);
-    const [props, setProps] = React.useState(selector(adaptState(adapter.getState()), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps));
-    const propRef = React.useRef(props);
-    propRef.current = props;
-    React.useEffect(() => {
-        const onStateChange = (state) => {
-            if (!mounted.current) {
-                return;
-            }
-            const newProps = selector(adaptState(state), selectorProps !== null && selectorProps !== void 0 ? selectorProps : callConfigProps);
-            if (propRef.current !== newProps) {
-                setProps(newProps);
-            }
-        };
-        adapter.onStateChange(onStateChange);
-        return () => {
-            adapter.offStateChange(onStateChange);
-        };
-    }, [adaptState, adapter, selector, selectorProps, callConfigProps]);
-    return props;
-};
-const memoizeState = memoizeOne__default['default']((userId, deviceManager, calls, latestErrors, displayName, alternateCallerId, environmentInfo) => ({
-    userId,
-    incomingCalls: {},
-    incomingCallsEnded: {},
-    callsEnded: {},
-    deviceManager,
-    callAgent: { displayName },
-    calls,
-    latestErrors,
-    /* @conditional-compile-remove(PSTN-calls) */
-    alternateCallerId,
-    /* @conditional-compile-remove(unsupported-browser) */
-    environmentInfo
-}));
-const memoizeCalls = memoizeOne__default['default']((call) => (call ? { [call.id]: call } : {}));
-const adaptCompositeState = (compositeState) => {
-    return memoizeState(compositeState.userId, compositeState.devices, memoizeCalls(compositeState.call), 
-    // This is an unsafe type expansion.
-    // compositeState.latestErrors can contain properties that are not valid in CallErrors.
-    //
-    // But there is no way to check for valid property names at runtime:
-    // - The set of valid property names is built from types in the @azure/communication-calling.
-    //   Thus we don't have a literal array of allowed strings at runtime.
-    // - Due to minification / uglification, the property names from the objects at runtime can't be used
-    //   to compare against permissible values inferred from the types.
-    //
-    // This is not a huge problem -- it simply means that our adapted selector will include some extra operations
-    // that are unknown to the UI component and data binding libraries. Generic handling of the errors (e.g.,
-    // just displaying them in some UI surface) will continue to work for these operations. Handling of
-    // specific operations (e.g., acting on errors related to permission issues) will ignore these operations.
-    compositeState.latestErrors, compositeState.displayName, 
-    /* @conditional-compile-remove(PSTN-calls) */
-    compositeState.alternateCallerId, 
-    /* @conditional-compile-remove(unsupported-browser) */
-    compositeState.environmentInfo);
+    const now = new Date(Date.now());
+    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
+    // Record that this error was dismissed for the first time right now.
+    return {
+        dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
+        activeSince: toDismiss.timestamp
+    };
 };
+/* @conditional-compile-remove(video-background-effects) */
+/** @private */
+const getBackgroundEffectFromSelectedEffect = (selectedEffect) => (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'blur'
+    ? new communicationCallingEffects.BackgroundBlurEffect()
+    : (selectedEffect === null || selectedEffect === void 0 ? void 0 : selectedEffect.effectName) === 'replacement'
+        ? new communicationCallingEffects.BackgroundReplacementEffect({ backgroundImageUrl: selectedEffect.backgroundImageUrl })
+        : undefined;
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @remarks this logic should mimic the onToggleCamera in the common call handlers.
+ * @private
+ */
+const getSelectedCameraFromAdapterState = (state) => state.devices.selectedCamera || state.devices.cameras[0];
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
@@ -26021,6 +26074,10 @@ const outboundCallStringsTrampoline = (strings) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+/**
+ * @private
+ */
+const pageContainer = { width: '100%', height: '100%' };
 /**
  * @private
  */
@@ -26081,6 +26138,8 @@ const TransferPage = (props) => {
     const remoteParticipants = useSelector$1(getRemoteParticipants);
     /* @conditional-compile-remove(call-transfer) */
     const transferCall = useSelector$1(getTransferCall);
+    /* @conditional-compile-remove(call-transfer) */
+    const [announcerString, setAnnouncerString] = React.useState(undefined);
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
@@ -26095,6 +26154,10 @@ const TransferPage = (props) => {
         }
         return 'transferor';
     }, [transferCall, transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName]);
+    /* @conditional-compile-remove(call-transfer) */
+    React.useEffect(() => {
+        setAnnouncerString(strings.transferPageNoticeString);
+    }, [strings.transferPageNoticeString]);
     let transferTileParticipant = transferor;
     /* @conditional-compile-remove(call-transfer) */
     if (pageSubject === 'transferTarget') {
@@ -26107,16 +26170,19 @@ const TransferPage = (props) => {
         transferParticipantDisplayName =
             (_d = transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName) !== null && _d !== void 0 ? _d : strings.transferPageUnknownTransferTargetDisplayName;
     }
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
-        // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-        errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
-            options: callControlOptions,
-            increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
-            /* @conditional-compile-remove(call-transfer) */
-            statusText: pageSubject === 'transferTarget'
-                ? strings.transferPageTransferTargetText
-                : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(pageContainer) },
+        /* @conditional-compile-remove(call-transfer) */
+        React__default['default'].createElement(Announcer$1, { announcementString: announcerString, ariaLive: "polite" }),
+        React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
+            // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
+            errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+                options: callControlOptions,
+                increaseFlyoutItemSize: props.mobileView
+            }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
+                /* @conditional-compile-remove(call-transfer) */
+                statusText: pageSubject === 'transferTarget'
+                    ? strings.transferPageTransferTargetText
+                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader })));
 };
 const TransferTile = (props) => {
     const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;
@@ -27551,7 +27617,7 @@ class AzureCommunicationCallAdapter {
 const createAzureCommunicationCallAdapter = ({ userId, displayName, credential, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
 /* @conditional-compile-remove(video-background-effects) */ options }) => __awaiter$3(void 0, void 0, void 0, function* () {
-    if (!isValidIdentifier(userId)) {
+    if (!_isValidIdentifier(userId)) {
         throw new Error('Invalid identifier. Please provide valid identifier object.');
     }
     const callClient = createStatefulCallClient({