@azure/communication-react 1.14.0-alpha-202403160012 → 1.14.0-alpha-202403190012

package/dist/dist-cjs/communication-react/{index-BfFCLrEO.js → index-DyaTe_Bz.js}

@@ -173,7 +173,7 @@ function getDefaultExportFromCjs (x) {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.14.0-alpha-202403160012';
+var telemetryVersion = '1.14.0-alpha-202403190012';
 
 
 var telemetryVersion$1 = /*@__PURE__*/getDefaultExportFromCjs(telemetryVersion);
@@ -964,7 +964,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
     const onHangUp = (forEveryone) => __awaiter$Q(void 0, void 0, void 0, function* () { return yield (call === null || call === void 0 ? void 0 : call.hangUp({ forEveryone: forEveryone === true ? true : false })); });
     /* @conditional-compile-remove(PSTN-calls) */
     const onToggleHold = () => __awaiter$Q(void 0, void 0, void 0, function* () { return (call === null || call === void 0 ? void 0 : call.state) === 'LocalHold' ? yield (call === null || call === void 0 ? void 0 : call.resume()) : yield (call === null || call === void 0 ? void 0 : call.hold()); });
-    const onCreateLocalStreamView = (options = { scalingMode: 'Crop', isMirrored: true }) => __awaiter$Q(void 0, void 0, void 0, function* () {
+    const onCreateLocalStreamView = (...args_1) => __awaiter$Q(void 0, [...args_1], void 0, function* (options = { scalingMode: 'Crop', isMirrored: true }) {
         var _d;
         if (!call || call.localVideoStreams.length === 0) {
             return;
@@ -980,7 +980,7 @@ const createDefaultCommonCallingHandlers = memoizeOne((callClient, deviceManager
         const { view } = (_d = (yield callClient.createView(call.id, undefined, localStream, options))) !== null && _d !== void 0 ? _d : {};
         return view ? { view } : undefined;
     });
-    const onCreateRemoteStreamView = (userId, options = { scalingMode: 'Crop' }) => __awaiter$Q(void 0, void 0, void 0, function* () {
+    const onCreateRemoteStreamView = (userId_1, ...args_2) => __awaiter$Q(void 0, [userId_1, ...args_2], void 0, function* (userId, options = { scalingMode: 'Crop' }) {
         if (!call) {
             return;
         }
@@ -8334,8 +8334,8 @@ const TextFieldWithMention = (props) => {
             });
         }
     }, [updateSelectionIndexesWithMentionIfNeeded, setSelectionStartValue, setSelectionEndValue]);
-    const handleOnChange = React.useCallback(({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) => __awaiter$D(void 0, void 0, void 0, function* () {
-        var _b;
+    const handleOnChange = React.useCallback((_b) => __awaiter$D(void 0, [_b], void 0, function* ({ currentSelectionEnd, currentSelectionStart, currentTriggerStartIndex, event, htmlTextValue, inputTextValue, previousSelectionEnd, previousSelectionStart, tagsValue, updatedValue }) {
+        var _c;
         debouncedQueryUpdate.cancel();
         if (event.currentTarget === null) {
             return;
@@ -8344,7 +8344,7 @@ const TextFieldWithMention = (props) => {
         // onSelect is not called for backspace as selection is not changed and local caret index is outdated
         setCaretIndex(undefined);
         const newValue = updatedValue !== null && updatedValue !== void 0 ? updatedValue : '';
-        const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
+        const triggerText = (_c = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _c !== void 0 ? _c : DEFAULT_MENTION_TRIGGER;
         const newTextLength = newValue.length;
         // updating indexes to set between 0 and text length, otherwise selectionRange won't be set correctly
         const currentSelectionEndValue = getValidatedIndexInRange({
@@ -11129,6 +11129,63 @@ function createStyleFromV8Style(v8Style) {
     return result;
 }
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const systemMessageIconStyle = react.mergeStyles({
+    marginInlineEnd: '0.688rem'
+});
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const SystemMessage = (props) => {
+    const { iconName, content } = props;
+    const Icon = React.createElement(react.FontIcon, { iconName: iconName, className: react.mergeStyles(systemMessageIconStyle) });
+    return (React.createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
+        Icon,
+        React.createElement(react.Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * @private
+ */
+const DefaultSystemMessage = (props) => {
+    var _a;
+    const message = props.message;
+    switch (message.messageType) {
+        case 'system':
+            switch (message.systemMessageType) {
+                case 'content':
+                    return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
+                case 'participantAdded':
+                case 'participantRemoved':
+                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
+            }
+    }
+    return React.createElement(React.Fragment, null);
+};
+const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
+    const { strings } = useLocale$1();
+    const participantsStr = generateParticipantsStr(message.participants, defaultName);
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
+    if (participantsStr !== '') {
+        return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
+    }
+    return React.createElement(React.Fragment, null);
+};
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -11224,85 +11281,6 @@ const ChatMessageComponentAsEditBox = (props) => {
         } }, getContent()));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const formatTimeForChatMessage = (messageDate) => {
-    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-};
-/**
- * @private
- */
-const formatDateForChatMessage = (messageDate) => {
-    return messageDate.toLocaleDateString();
-};
-/**
- * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
- * using the system locale.
- * <time in locale format>.
- * Yesterday <time in locale format>.
- * <dateStrings day of week> <time in locale format>.
- * <date in locale format> <time in locale format>.
- *
- * If message is after yesterday, then only show the time.
- * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
- * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
- *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
- * If message is in previous or older weeks, then show date string plus the time.
- *
- * @param messageDate - date of message
- * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)
- *
- * @private
- */
-const formatTimestampForChatMessage = (messageDate, todayDate, dateStrings) => {
-    // If message was in the same day timestamp string is just the time like '1:30 p.m.'.
-    const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
-    if (messageDate > startOfDay) {
-        return formatTimeForChatMessage(messageDate);
-    }
-    // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.
-    const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);
-    if (messageDate > yesterdayDate) {
-        return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message was before Sunday and today is Sunday (start of week) then timestamp string is like
-    // '2021-01-10 1:30 p.m.'.
-    const weekDay = todayDate.getDay();
-    if (weekDay === 0) {
-        return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.
-    const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);
-    if (messageDate > firstDayOfTheWeekDate) {
-        return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);
-    }
-    // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.
-    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
-};
-const dayToDayName = (day, dateStrings) => {
-    switch (day) {
-        case 0:
-            return dateStrings.sunday;
-        case 1:
-            return dateStrings.monday;
-        case 2:
-            return dateStrings.tuesday;
-        case 3:
-            return dateStrings.wednesday;
-        case 4:
-            return dateStrings.thursday;
-        case 5:
-            return dateStrings.friday;
-        case 6:
-            return dateStrings.saturday;
-        default:
-            throw new Error(`Invalid day [${day}] passed`);
-    }
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -11475,147 +11453,6 @@ const preventUnwantedDismissProps = {
 };
 const calloutMenuProps = Object.assign(Object.assign({}, preventUnwantedDismissProps), { styles: { root: { marginRight: '3px' } } });
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * Provides the default implementation for rendering an Mention in a message thread
- * @param mention - The mention to render
- *
- * @private
- */
-const defaultOnMentionRender = (mention) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const MsftMention = 'msft-mention';
-    return (React.createElement(MsftMention, { id: mention.id, key: Math.random().toString() }, mention.displayText));
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/** @private */
-const ChatMessageContent = (props) => {
-    switch (props.message.contentType) {
-        case 'text':
-            return MessageContentAsText(props);
-        case 'html':
-            return MessageContentAsRichTextHTML(props);
-        case 'richtext/html':
-            return MessageContentAsRichTextHTML(props);
-        default:
-            console.warn('unknown message content type');
-            return React.createElement(React.Fragment, null);
-    }
-};
-const MessageContentWithLiveAria = (props) => {
-    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
-        React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
-        props.content));
-};
-const MessageContentAsRichTextHTML = (props) => {
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
-};
-const MessageContentAsText = (props) => {
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return (React.createElement(react.Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
-            } }, props.message.content) }));
-};
-/* @conditional-compile-remove(data-loss-prevention) */
-/**
- * @private
- */
-const BlockedMessageContent = (props) => {
-    var _a;
-    const Icon = React.createElement(react.FontIcon, { iconName: 'DataLossPreventionProhibited' });
-    const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
-    const blockedMessageLink = props.message.link;
-    const blockedMessageLinkText = blockedMessageLink
-        ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText
-        : '';
-    const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
-    const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
-    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React.createElement(react.Stack, { horizontal: true, wrap: true },
-            Icon,
-            blockedMessage && React.createElement("p", null, blockedMessage),
-            blockedMessageLink && (React.createElement(react.Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
-};
-const extractContentForAllyMessage = (props) => {
-    if (props.message.content) {
-        // Replace all <img> tags with 'image' for aria.
-        const parsedContent = DOMPurify.sanitize(props.message.content, {
-            ALLOWED_TAGS: ['img'],
-            RETURN_DOM_FRAGMENT: true
-        });
-        parsedContent.childNodes.forEach((child) => {
-            if (child.nodeName.toLowerCase() !== 'img') {
-                return;
-            }
-            const imageTextNode = document.createElement('div');
-            imageTextNode.innerHTML = 'image ';
-            parsedContent.replaceChild(imageTextNode, child);
-        });
-        // Strip all html tags from the content for aria.
-        const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
-        return message;
-    }
-    return '';
-};
-const generateLiveMessage = (props) => {
-    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
-    return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContentForAllyMessage(props)} `;
-};
-const messageContentAriaText = (props) => {
-    const message = extractContentForAllyMessage(props);
-    return props.message.mine
-        ? _formatString(props.strings.messageContentMineAriaText, {
-            message: message
-        })
-        : _formatString(props.strings.messageContentAriaText, {
-            author: `${props.message.senderDisplayName}`,
-            message: message
-        });
-};
-/* @conditional-compile-remove(image-overlay) */
-const defaultOnRenderInlineImage = (inlineImage) => {
-    return (React.createElement("img", Object.assign({ key: inlineImage.imageAttributes.id, tabIndex: 0, "data-ui-id": inlineImage.imageAttributes.id }, inlineImage.imageAttributes)));
-};
-const processHtmlToReact = (props) => {
-    var _a;
-    const options = {
-        transform(reactNode, domNode) {
-            var _a, _b, _c;
-            if (domNode instanceof parse.Element && domNode.attribs) {
-                // Transform custom rendering of mentions
-                /* @conditional-compile-remove(mention) */
-                if (domNode.name === 'msft-mention') {
-                    const { id } = domNode.attribs;
-                    const mention = {
-                        id: id,
-                        displayText: (_a = domNode.children[0].nodeValue) !== null && _a !== void 0 ? _a : ''
-                    };
-                    if ((_b = props.mentionDisplayOptions) === null || _b === void 0 ? void 0 : _b.onRenderMention) {
-                        return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
-                    }
-                    return defaultOnMentionRender(mention);
-                }
-                // Transform inline images
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
-                    domNode.attribs['aria-label'] = domNode.attribs.name;
-                    const imgProps = parse.attributesToProps(domNode.attribs);
-                    /* @conditional-compile-remove(image-overlay) */
-                    const inlineImageProps = { messageId: props.message.messageId, imageAttributes: imgProps };
-                    /* @conditional-compile-remove(image-overlay) */
-                    return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
-                        ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
-                        : defaultOnRenderInlineImage(inlineImageProps);
-                }
-            }
-            // Pass through the original node
-            return reactNode;
-        }
-    };
-    return React.createElement(React.Fragment, null, parse((_a = props.message.content) !== null && _a !== void 0 ? _a : '', options));
-};
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -11639,6 +11476,147 @@ const chatMessageActionMenuProps = (menuProps) => {
     return actionMenuProps;
 };
 
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * Provides the default implementation for rendering an Mention in a message thread
+ * @param mention - The mention to render
+ *
+ * @private
+ */
+const defaultOnMentionRender = (mention) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const MsftMention = 'msft-mention';
+    return (React.createElement(MsftMention, { id: mention.id, key: Math.random().toString() }, mention.displayText));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @private */
+const ChatMessageContent = (props) => {
+    switch (props.message.contentType) {
+        case 'text':
+            return MessageContentAsText(props);
+        case 'html':
+            return MessageContentAsRichTextHTML(props);
+        case 'richtext/html':
+            return MessageContentAsRichTextHTML(props);
+        default:
+            console.warn('unknown message content type');
+            return React.createElement(React.Fragment, null);
+    }
+};
+const MessageContentWithLiveAria = (props) => {
+    return (React.createElement("div", { "data-ui-status": props.message.status, role: "text", "aria-label": props.ariaLabel },
+        React.createElement(LiveMessage, { message: props.liveMessage, ariaLive: "polite" }),
+        props.content));
+};
+const MessageContentAsRichTextHTML = (props) => {
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: processHtmlToReact(props) }));
+};
+const MessageContentAsText = (props) => {
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: generateLiveMessage(props), ariaLabel: messageContentAriaText(props), content: React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
+                return (React.createElement(react.Link, { target: "_blank", href: decoratedHref, key: key }, decoratedText));
+            } }, props.message.content) }));
+};
+/* @conditional-compile-remove(data-loss-prevention) */
+/**
+ * @private
+ */
+const BlockedMessageContent = (props) => {
+    var _a;
+    const Icon = React.createElement(react.FontIcon, { iconName: 'DataLossPreventionProhibited' });
+    const blockedMessage = props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;
+    const blockedMessageLink = props.message.link;
+    const blockedMessageLinkText = blockedMessageLink
+        ? (_a = props.message.linkText) !== null && _a !== void 0 ? _a : props.strings.blockedWarningLinkText
+        : '';
+    const liveAuthor = props.message.mine || props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;
+    const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;
+    return (React.createElement(MessageContentWithLiveAria, { message: props.message, liveMessage: liveBlockedWarningText, ariaLabel: liveBlockedWarningText, content: React.createElement(react.Stack, { horizontal: true, wrap: true },
+            Icon,
+            blockedMessage && React.createElement("p", null, blockedMessage),
+            blockedMessageLink && (React.createElement(react.Link, { target: '_blank', href: blockedMessageLink }, blockedMessageLinkText))) }));
+};
+const extractContentForAllyMessage = (props) => {
+    if (props.message.content) {
+        // Replace all <img> tags with 'image' for aria.
+        const parsedContent = DOMPurify.sanitize(props.message.content, {
+            ALLOWED_TAGS: ['img'],
+            RETURN_DOM_FRAGMENT: true
+        });
+        parsedContent.childNodes.forEach((child) => {
+            if (child.nodeName.toLowerCase() !== 'img') {
+                return;
+            }
+            const imageTextNode = document.createElement('div');
+            imageTextNode.innerHTML = 'image ';
+            parsedContent.replaceChild(imageTextNode, child);
+        });
+        // Strip all html tags from the content for aria.
+        const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });
+        return message;
+    }
+    return '';
+};
+const generateLiveMessage = (props) => {
+    const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });
+    return `${props.message.editedOn ? props.strings.editedTag : ''} ${props.message.mine ? '' : liveAuthor} ${extractContentForAllyMessage(props)} `;
+};
+const messageContentAriaText = (props) => {
+    const message = extractContentForAllyMessage(props);
+    return props.message.mine
+        ? _formatString(props.strings.messageContentMineAriaText, {
+            message: message
+        })
+        : _formatString(props.strings.messageContentAriaText, {
+            author: `${props.message.senderDisplayName}`,
+            message: message
+        });
+};
+/* @conditional-compile-remove(image-overlay) */
+const defaultOnRenderInlineImage = (inlineImage) => {
+    return (React.createElement("img", Object.assign({ key: inlineImage.imageAttributes.id, tabIndex: 0, "data-ui-id": inlineImage.imageAttributes.id }, inlineImage.imageAttributes)));
+};
+const processHtmlToReact = (props) => {
+    var _a;
+    const options = {
+        transform(reactNode, domNode) {
+            var _a, _b, _c;
+            if (domNode instanceof parse.Element && domNode.attribs) {
+                // Transform custom rendering of mentions
+                /* @conditional-compile-remove(mention) */
+                if (domNode.name === 'msft-mention') {
+                    const { id } = domNode.attribs;
+                    const mention = {
+                        id: id,
+                        displayText: (_a = domNode.children[0].nodeValue) !== null && _a !== void 0 ? _a : ''
+                    };
+                    if ((_b = props.mentionDisplayOptions) === null || _b === void 0 ? void 0 : _b.onRenderMention) {
+                        return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);
+                    }
+                    return defaultOnMentionRender(mention);
+                }
+                // Transform inline images
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
+                    domNode.attribs['aria-label'] = domNode.attribs.name;
+                    const imgProps = parse.attributesToProps(domNode.attribs);
+                    /* @conditional-compile-remove(image-overlay) */
+                    const inlineImageProps = { messageId: props.message.messageId, imageAttributes: imgProps };
+                    /* @conditional-compile-remove(image-overlay) */
+                    return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
+                        ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
+                        : defaultOnRenderInlineImage(inlineImageProps);
+                }
+            }
+            // Pass through the original node
+            return reactNode;
+        }
+    };
+    return React.createElement(React.Fragment, null, parse((_a = props.message.content) !== null && _a !== void 0 ? _a : '', options));
+};
+
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 var __awaiter$C = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -11726,6 +11704,138 @@ const useLocaleStringsTrampoline = () => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/**
+ * @private
+ */
+const formatTimeForChatMessage = (messageDate) => {
+    return messageDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+};
+/**
+ * @private
+ */
+const formatDateForChatMessage = (messageDate) => {
+    return messageDate.toLocaleDateString();
+};
+/**
+ * Given a message date object in ISO8601 and a current date object, generates a user friendly timestamp text
+ * using the system locale.
+ * <time in locale format>.
+ * Yesterday <time in locale format>.
+ * <dateStrings day of week> <time in locale format>.
+ * <date in locale format> <time in locale format>.
+ *
+ * If message is after yesterday, then only show the time.
+ * If message is before yesterday and after day before yesterday, then show 'Yesterday' plus the time.
+ * If message is before day before yesterday and within the current week, then show 'Monday/Tuesday/etc' plus the time.
+ *   - We consider start of the week as Sunday. If current day is Sunday, then any time before that is in previous week.
+ * If message is in previous or older weeks, then show date string plus the time.
+ *
+ * @param messageDate - date of message
+ * @param currentDate - date used as offset to create the user friendly timestamp (e.g. to create 'Yesterday' instead of an absolute date)
+ *
+ * @private
+ */
+const formatTimestampForChatMessage = (messageDate, todayDate, dateStrings) => {
+    // If message was in the same day timestamp string is just the time like '1:30 p.m.'.
+    const startOfDay = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate());
+    if (messageDate > startOfDay) {
+        return formatTimeForChatMessage(messageDate);
+    }
+    // If message was yesterday then timestamp string is like this 'Yesterday 1:30 p.m.'.
+    const yesterdayDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - 1);
+    if (messageDate > yesterdayDate) {
+        return dateStrings.yesterday + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message was before Sunday and today is Sunday (start of week) then timestamp string is like
+    // '2021-01-10 1:30 p.m.'.
+    const weekDay = todayDate.getDay();
+    if (weekDay === 0) {
+        return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message was before first day of the week then timestamp string is like Monday 1:30 p.m.
+    const firstDayOfTheWeekDate = new Date(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate() - weekDay);
+    if (messageDate > firstDayOfTheWeekDate) {
+        return dayToDayName(messageDate.getDay(), dateStrings) + ' ' + formatTimeForChatMessage(messageDate);
+    }
+    // If message date is in previous or older weeks then timestamp string is like 2021-01-10 1:30 p.m.
+    return formatDateForChatMessage(messageDate) + ' ' + formatTimeForChatMessage(messageDate);
+};
+const dayToDayName = (day, dateStrings) => {
+    switch (day) {
+        case 0:
+            return dateStrings.sunday;
+        case 1:
+            return dateStrings.monday;
+        case 2:
+            return dateStrings.tuesday;
+        case 3:
+            return dateStrings.wednesday;
+        case 4:
+            return dateStrings.thursday;
+        case 5:
+            return dateStrings.friday;
+        case 6:
+            return dateStrings.saturday;
+        default:
+            throw new Error(`Invalid day [${day}] passed`);
+    }
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @private
+ * Return the string value for the FluentUI message attached prop based on the message's attached status.
+ * @param attached - The message's attached status.
+ */
+const getFluentUIAttachedValue = (messageAttachedStatus) => {
+    return messageAttachedStatus === 'top' || messageAttachedStatus === false ? 'top' : 'center';
+};
+/**
+ * @private
+ *  Get the message bubble content for the message.
+ */
+function getMessageBubbleContent(message, strings, userId, 
+/* @conditional-compile-remove(image-overlay) */
+inlineImageOptions, 
+/* @conditional-compile-remove(file-sharing) */
+onRenderFileDownloads, 
+/* @conditional-compile-remove(mention) */
+mentionDisplayOptions, 
+/* @conditional-compile-remove(file-sharing) */
+fileDownloadHandler) {
+    /* @conditional-compile-remove(data-loss-prevention) */
+    if (message.messageType === 'blocked') {
+        return (React.createElement("div", { tabIndex: 0 },
+            React.createElement(BlockedMessageContent, { message: message, strings: strings })));
+    }
+    return (React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
+        React.createElement(ChatMessageContent, { message: message, strings: strings, 
+            /* @conditional-compile-remove(mention) */
+            mentionDisplayOptions: mentionDisplayOptions, 
+            /* @conditional-compile-remove(image-overlay) */
+            inlineImageOptions: inlineImageOptions }),
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads
+            ? onRenderFileDownloads(userId, message)
+            : defaultOnRenderFileDownloads(userId, message, strings, 
+            /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler)));
+}
+/**
+ * Default component for rendering file downloads.
+ */
+/* @conditional-compile-remove(file-sharing) */
+const defaultOnRenderFileDownloads = (userId, message, strings, 
+/* @conditional-compile-remove(file-sharing) */
+fileDownloadHandler) => {
+    /* @conditional-compile-remove(file-sharing) */
+    return (React.createElement(_FileDownloadCards, { userId: userId, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileMetadata: message.files || [], 
+        /* @conditional-compile-remove(file-sharing) */
+        downloadHandler: fileDownloadHandler, 
+        /* @conditional-compile-remove(file-sharing) */
+        strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } }));
+};
+/** @private */
 const generateDefaultTimestamp = (createdOn, showDate, strings) => {
     const formattedTimestamp = showDate
         ? formatTimestampForChatMessage(createdOn, new Date(), strings)
@@ -11733,16 +11843,31 @@ const generateDefaultTimestamp = (createdOn, showDate, strings) => {
     return formattedTimestamp;
 };
 // onDisplayDateTimeString from props overwrite onDisplayDateTimeString from locale
-const generateCustomizedTimestamp = (props, createdOn, locale) => {
+/** @private */
+const generateCustomizedTimestamp = (createdOn, locale, onDisplayDateTimeString) => {
     /* @conditional-compile-remove(date-time-customization) */
-    return props.onDisplayDateTimeString
-        ? props.onDisplayDateTimeString(createdOn)
+    return onDisplayDateTimeString
+        ? onDisplayDateTimeString(createdOn)
         : locale.onDisplayDateTimeString
             ? locale.onDisplayDateTimeString(createdOn)
             : '';
 };
+/**
+ * @private
+ *  Get the edited tag for the message if it is edited.
+ */
+const getMessageEditedDetails = (message, theme, editedTag) => {
+    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
+    if (message.messageType === 'chat' && editedOn) {
+        return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, editedTag);
+    }
+    return undefined;
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 /** @private */
-const MessageBubble = (props) => {
+const MessageBubble$1 = (props) => {
     var _a;
     const ids = useIdentifiers();
     const theme = useTheme();
@@ -11751,12 +11876,20 @@ const MessageBubble = (props) => {
     /* @conditional-compile-remove(file-sharing) */
     fileDownloadHandler, 
     /* @conditional-compile-remove(image-overlay) */
-    inlineImageOptions, shouldOverlapAvatarAndMessage } = props;
-    const defaultTimeStamp = message.createdOn
-        ? generateDefaultTimestamp(message.createdOn, showDate, strings)
-        : undefined;
-    const customTimestamp = message.createdOn ? generateCustomizedTimestamp(props, message.createdOn, locale) : '';
-    const formattedTimestamp = customTimestamp || defaultTimeStamp;
+    inlineImageOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionDisplayOptions, onDisplayDateTimeString } = props;
+    const formattedTimestamp = React.useMemo(() => {
+        const defaultTimeStamp = message.createdOn
+            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+            : undefined;
+        const customTimestamp = message.createdOn
+            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
+            : '';
+        return customTimestamp || defaultTimeStamp;
+    }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
     // Track if the action menu was opened by touch - if so we increase the touch targets for the items
     const [wasInteractionByTouch, setWasInteractionByTouch] = React.useState(false);
     // `focused` state is used for show/hide actionMenu
@@ -11790,139 +11923,95 @@ const MessageBubble = (props) => {
         // or not we need to set the target to undefined here to actually hide the action flyout
         setChatMessageActionFlyoutTarget(undefined);
     }, [setChatMessageActionFlyoutTarget]);
-    const defaultOnRenderFileDownloads = React.useCallback(() => {
-        /* @conditional-compile-remove(file-sharing) */
-        return (React.createElement(_FileDownloadCards, { userId: userId, 
-            /* @conditional-compile-remove(file-sharing) */
-            fileMetadata: message.files || [], 
-            /* @conditional-compile-remove(file-sharing) */
-            downloadHandler: fileDownloadHandler, 
-            /* @conditional-compile-remove(file-sharing) */
-            strings: { downloadFile: strings.downloadFile, fileCardGroupMessage: strings.fileCardGroupMessage } }));
-    }, [
-        userId,
-        message,
-        /* @conditional-compile-remove(file-sharing) */
-        strings,
-        /* @conditional-compile-remove(file-sharing) */
-        fileDownloadHandler
-    ]);
-    const editedOn = 'editedOn' in message ? message.editedOn : undefined;
     const getMessageDetails = React.useCallback(() => {
         if (messageStatus === 'failed') {
             return React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, strings.failToSendTag);
         }
-        else if (message.messageType === 'chat' && editedOn) {
-            return React.createElement("div", { className: chatMessageEditedTagStyle(theme) }, strings.editedTag);
+        else {
+            return getMessageEditedDetails(message, theme, strings.editedTag);
         }
-        return undefined;
-    }, [editedOn, message.messageType, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
+    }, [message, messageStatus, strings.editedTag, strings.failToSendTag, theme]);
     const getContent = React.useCallback(() => {
-        /* @conditional-compile-remove(data-loss-prevention) */
-        if (message.messageType === 'blocked') {
-            return (React.createElement("div", { tabIndex: 0 },
-                React.createElement(BlockedMessageContent, { message: message, strings: strings })));
-        }
-        return (React.createElement("div", { tabIndex: 0, className: "ui-chat__message__content" },
-            React.createElement(ChatMessageContent, { message: message, strings: strings, 
-                /* @conditional-compile-remove(mention) */
-                mentionDisplayOptions: props.mentionDisplayOptions, 
-                /* @conditional-compile-remove(image-overlay) */
-                inlineImageOptions: inlineImageOptions }),
-            /* @conditional-compile-remove(file-sharing) */ props.onRenderFileDownloads
-                ? props.onRenderFileDownloads(userId, message)
-                : defaultOnRenderFileDownloads()));
+        return getMessageBubbleContent(message, strings, userId, 
+        /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        onRenderFileDownloads, 
+        /* @conditional-compile-remove(mention) */
+        mentionDisplayOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler);
     }, [
-        defaultOnRenderFileDownloads,
+        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
         /* @conditional-compile-remove(image-overlay) */ inlineImageOptions,
+        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
         message,
-        props,
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
         strings,
         userId
     ]);
     const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
     const chatMyMessageStyles = useChatMyMessageStyles();
     const chatMessageCommonStyles = useChatMessageCommonStyles();
-    const chatMessageStyles = useChatMessageStyles();
-    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
-    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-    chatMessageStyles.body, 
-    // disable placeholder functionality for GA releases as it might confuse users
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    chatMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
-        ? chatMessageCommonStyles.blocked
-        : props.message.status === 'failed'
-            ? chatMessageCommonStyles.failed
-            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
-        ? chatMessageStyles.bodyWithAvatar
-        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
     const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
     const chatMessage = (React.createElement(React.Fragment, null,
-        React.createElement("div", { key: props.message.messageId }, message.mine ? (React.createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
-                // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
-                className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
-                    ? chatMessageCommonStyles.blocked
-                    : props.message.status === 'failed'
-                        ? chatMessageCommonStyles.failed
-                        : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, react.mergeStyles(messageContainerStyle)),
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
-                ref: messageRef
-            }, root: {
-                className: chatMyMessageStyles.root,
-                onBlur: (e) => {
-                    // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
-                    // with keyboard the focused element will be changed and there is no way to use `:focus` selector
-                    if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
-                        // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
+        React.createElement("div", { key: props.message.messageId },
+            React.createElement(reactChat.ChatMyMessage, { attached: attached, key: props.message.messageId, body: {
+                    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+                    className: reactComponents.mergeClasses(chatMyMessageStyles.body, isBlockedMessage
+                        ? chatMessageCommonStyles.blocked
+                        : props.message.status === 'failed'
+                            ? chatMessageCommonStyles.failed
+                            : undefined, attached !== 'top' ? chatMyMessageStyles.bodyAttached : undefined, react.mergeStyles(messageContainerStyle)),
+                    style: Object.assign({}, createStyleFromV8Style(messageContainerStyle)),
+                    ref: messageRef
+                }, root: {
+                    className: chatMyMessageStyles.root,
+                    onBlur: (e) => {
+                        // `focused` controls is focused the whole `ChatMessage` or any of its children. When we're navigating
+                        // with keyboard the focused element will be changed and there is no way to use `:focus` selector
+                        if (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current) {
+                            // doesn't dismiss action button if flyout is open, otherwise, narrator's focus will stay on the closed action menu
+                            return;
+                        }
+                        const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
+                        setFocused(shouldPreserveFocusState);
+                    },
+                    onFocus: () => {
+                        // react onFocus is called even when nested component receives focus (i.e. it bubbles)
+                        // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
+                        setFocused(true);
+                    },
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    role: 'none',
+                    tabIndex: -1
+                }, "data-ui-id": "chat-composite-message", author: React.createElement(react.Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
+                    children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
+                    className: reactComponents.mergeClasses(chatMyMessageStyles.menu, 
+                    // Make actions menu visible when the message is focused or the flyout is shown
+                    focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
+                        ? chatMyMessageStyles.menuVisible
+                        : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
+                }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
+                    if (!wasInteractionByTouch) {
                         return;
                     }
-                    const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget);
-                    setFocused(shouldPreserveFocusState);
-                },
-                onFocus: () => {
-                    // react onFocus is called even when nested component receives focus (i.e. it bubbles)
-                    // so when focus moves within actionMenu, the `focus` state in chatMessage remains true, and keeps actionMenu visible
-                    setFocused(true);
-                },
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                role: 'none',
-                tabIndex: -1
-            }, "data-ui-id": "chat-composite-message", author: React.createElement(react.Text, { className: chatMessageDateStyle, tabIndex: 0 }, message.senderDisplayName), timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp, tabIndex: 0 }, formattedTimestamp), details: getMessageDetails(), actions: {
-                children: actionMenuProps === null || actionMenuProps === void 0 ? void 0 : actionMenuProps.children,
-                className: reactComponents.mergeClasses(chatMyMessageStyles.menu, 
-                // Make actions menu visible when the message is focused or the flyout is shown
-                focused || (chatMessageActionFlyoutTarget === null || chatMessageActionFlyoutTarget === void 0 ? void 0 : chatMessageActionFlyoutTarget.current)
-                    ? chatMyMessageStyles.menuVisible
-                    : chatMyMessageStyles.menuHidden, attached !== 'top' ? chatMyMessageStyles.menuAttached : undefined)
-            }, onTouchStart: () => setWasInteractionByTouch(true), onPointerDown: () => setWasInteractionByTouch(false), onKeyDown: () => setWasInteractionByTouch(false), onClick: () => {
-                if (!wasInteractionByTouch) {
-                    return;
-                }
-                // If the message was touched via touch we immediately open the menu
-                // flyout (when using mouse the 3-dot menu that appears on hover
-                // must be clicked to open the flyout).
-                // In doing so here we set the target of the flyout to be the message and
-                // not the 3-dot menu button to position the flyout correctly.
-                setChatMessageActionFlyoutTarget(messageRef);
-                if (message.messageType === 'chat') {
-                    props.onActionButtonClick(message, setMessageReadBy);
-                }
-            } }, getContent())) : (React.createElement(reactChat.ChatMessage, { attached: attached, key: props.message.messageId, root: {
-                className: chatMessageStyles.root,
-                // make body not focusable to remove repetitions from narrators.
-                // inner components are already focusable
-                tabIndex: -1,
-                role: 'none'
-            }, author: React.createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
-                className: chatItemMessageContainerClassName,
-                style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
-            }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails() }, getContent()))),
+                    // If the message was touched via touch we immediately open the menu
+                    // flyout (when using mouse the 3-dot menu that appears on hover
+                    // must be clicked to open the flyout).
+                    // In doing so here we set the target of the flyout to be the message and
+                    // not the 3-dot menu button to position the flyout correctly.
+                    setChatMessageActionFlyoutTarget(messageRef);
+                    if (message.messageType === 'chat') {
+                        props.onActionButtonClick(message, setMessageReadBy);
+                    }
+                } }, getContent())),
         chatActionsEnabled && (React.createElement(ChatMessageActionFlyout, { hidden: !chatMessageActionFlyoutTarget, target: chatMessageActionFlyoutTarget, increaseFlyoutItemSize: wasInteractionByTouch, onDismiss: onActionFlyoutDismiss, onEditClick: onEditClick, onRemoveClick: onRemoveClick, onResendClick: onResendClick, strings: strings, messageReadBy: messageReadBy, messageStatus: messageStatus !== null && messageStatus !== void 0 ? messageStatus : 'failed', remoteParticipantsCount: remoteParticipantsCount, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus }))));
     return chatMessage;
 };
 /** @private */
-const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
+const ChatMyMessageComponentAsMessageBubble = React.memo(MessageBubble$1);
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -11938,7 +12027,7 @@ var __awaiter$B = (window && window.__awaiter) || function (thisArg, _arguments,
 /**
  * @private
  */
-const ChatMessageComponent = (props) => {
+const ChatMyMessageComponent = (props) => {
     var _a, _b;
     const { onDeleteMessage, onSendMessage, message } = props;
     const [isEditing, setIsEditing] = React.useState(false);
@@ -11972,7 +12061,7 @@ const ChatMessageComponent = (props) => {
             mentionLookupOptions: (_a = props.mentionOptions) === null || _a === void 0 ? void 0 : _a.lookupOptions }));
     }
     else {
-        return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
+        return (React.createElement(ChatMyMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
             /* @conditional-compile-remove(date-time-customization) */
             onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
             /* @conditional-compile-remove(image-overlay) */
@@ -11992,7 +12081,7 @@ const ChatMessageComponent = (props) => {
  *
  * @private
  */
-const FluentChatMessageComponentWrapper = (props) => {
+const FluentChatMyMessageComponent = (props) => {
     const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, showMessageStatus, onRenderMessageStatus, participantCount, readCount, onActionButtonClick, 
     /* @conditional-compile-remove(date-time-customization) */
     onDisplayDateTimeString, 
@@ -12014,7 +12103,7 @@ const FluentChatMessageComponentWrapper = (props) => {
     const defaultChatMessageRenderer = React.useCallback((messageProps) => {
         if (messageProps.message.messageType === 'chat' ||
             /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return (React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { 
+            return (React.createElement(ChatMyMessageComponent, Object.assign({}, messageProps, { 
                 /* @conditional-compile-remove(file-sharing) */
                 onRenderFileDownloads: onRenderFileDownloadsMemo, 
                 /* @conditional-compile-remove(file-sharing) */
@@ -12056,12 +12145,9 @@ const FluentChatMessageComponentWrapper = (props) => {
     const messageStatusRenderer = React.useCallback((onRenderMessageStatus, defaultStatusRenderer, showMessageStatus, participantCount, readCount) => {
         return showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: message.status })) : (defaultStatusRenderer(message, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0, message.status))) : (React.createElement("div", { className: react.mergeStyles(noMessageStatusStyle) }));
     }, [message, statusToRender]);
-    const shouldShowAvatar = React.useMemo(() => {
-        return message.attached === 'top' || message.attached === false;
-    }, [message.attached]);
     const attached = React.useMemo(() => {
-        return shouldShowAvatar ? 'top' : 'center';
-    }, [shouldShowAvatar]);
+        return getFluentUIAttachedValue(message.attached);
+    }, [message.attached]);
     const myMessageRootProps = React.useMemo(() => {
         return {
             // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
@@ -12097,6 +12183,166 @@ const FluentChatMessageComponentWrapper = (props) => {
         showMessageStatus,
         styles
     ]);
+    // Fluent UI message components are used here as for default message renderer,
+    // timestamp and author name should be shown but they aren't shown for custom renderer.
+    // More investigations are needed to check if this can be simplified with states.
+    // Status and avatar should be shown for both custom and default renderers.
+    return (React.createElement(reactChat.ChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props))));
+};
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/** @private */
+const MessageBubble = (props) => {
+    const ids = useIdentifiers();
+    const theme = useTheme();
+    const locale = useLocale$1();
+    const { userId, message, showDate, messageContainerStyle, strings, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, 
+    /* @conditional-compile-remove(image-overlay) */
+    inlineImageOptions, shouldOverlapAvatarAndMessage, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionDisplayOptions, onDisplayDateTimeString } = props;
+    const formattedTimestamp = React.useMemo(() => {
+        const defaultTimeStamp = message.createdOn
+            ? generateDefaultTimestamp(message.createdOn, showDate, strings)
+            : undefined;
+        const customTimestamp = message.createdOn
+            ? generateCustomizedTimestamp(message.createdOn, locale, onDisplayDateTimeString)
+            : '';
+        return customTimestamp || defaultTimeStamp;
+    }, [locale, message.createdOn, onDisplayDateTimeString, showDate, strings]);
+    const getMessageDetails = React.useCallback(() => {
+        return getMessageEditedDetails(message, theme, strings.editedTag);
+    }, [strings.editedTag, theme, message]);
+    const getContent = React.useCallback(() => {
+        return getMessageBubbleContent(message, strings, userId, 
+        /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        onRenderFileDownloads, 
+        /* @conditional-compile-remove(mention) */
+        mentionDisplayOptions, 
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler);
+    }, [
+        /* @conditional-compile-remove(file-sharing) */ fileDownloadHandler,
+        /* @conditional-compile-remove(image-overlay) */ inlineImageOptions,
+        /* @conditional-compile-remove(mention) */ mentionDisplayOptions,
+        message,
+        /* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads,
+        strings,
+        userId
+    ]);
+    const isBlockedMessage = /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked';
+    const chatMessageCommonStyles = useChatMessageCommonStyles();
+    const chatMessageStyles = useChatMessageStyles();
+    const chatItemMessageContainerClassName = reactComponents.mergeClasses(
+    // messageContainerStyle used in className and style prop as style prop can't handle CSS selectors
+    chatMessageStyles.body, 
+    // disable placeholder functionality for GA releases as it might confuse users
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    chatMessageStyles.bodyWithPlaceholderImage, isBlockedMessage
+        ? chatMessageCommonStyles.blocked
+        : props.message.status === 'failed'
+            ? chatMessageCommonStyles.failed
+            : undefined, shouldOverlapAvatarAndMessage ? chatMessageStyles.avatarOverlap : chatMessageStyles.avatarNoOverlap, message.attached === 'top' || message.attached === false
+        ? chatMessageStyles.bodyWithAvatar
+        : chatMessageStyles.bodyWithoutAvatar, react.mergeStyles(messageContainerStyle));
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    const chatMessage = (React.createElement(React.Fragment, null,
+        React.createElement("div", { key: props.message.messageId },
+            React.createElement(reactChat.ChatMessage, { attached: attached, key: props.message.messageId, root: {
+                    className: chatMessageStyles.root,
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    tabIndex: -1,
+                    role: 'none'
+                }, author: React.createElement(react.Text, { className: chatMessageAuthorStyle }, message.senderDisplayName), body: {
+                    className: chatItemMessageContainerClassName,
+                    style: Object.assign({}, createStyleFromV8Style(messageContainerStyle))
+                }, "data-ui-id": "chat-composite-message", timestamp: React.createElement(react.Text, { className: chatMessageDateStyle, "data-ui-id": ids.messageTimestamp }, formattedTimestamp), details: getMessageDetails() }, getContent()))));
+    return chatMessage;
+};
+/** @private */
+const ChatMessageComponentAsMessageBubble = React.memo(MessageBubble);
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+/**
+ * The component for rendering a chat message using Fluent UI components
+ * and handling default and custom renderers.
+ * This component handles rendering for chat message body, avatar and message status.
+ * The chat message body, avatar and message status should be shown for both default and custom renderers.
+ *
+ * @private
+ */
+const FluentChatMessageComponent = (props) => {
+    const { message, styles, shouldOverlapAvatarAndMessage, onRenderMessage, onRenderAvatar, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString, 
+    /* @conditional-compile-remove(image-overlay) */
+    inlineImageOptions, 
+    /* @conditional-compile-remove(file-sharing) */
+    fileDownloadHandler, userId, 
+    /* @conditional-compile-remove(file-sharing) */
+    onRenderFileDownloads, 
+    /* @conditional-compile-remove(mention) */
+    mentionOptions } = props;
+    const chatMessageRenderStyles = useChatMessageRenderStyles();
+    const onRenderFileDownloadsMemo = React.useMemo(() => {
+        /* @conditional-compile-remove(file-sharing) */
+        return onRenderFileDownloads;
+    }, [/* @conditional-compile-remove(file-sharing) */ onRenderFileDownloads]);
+    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp
+    // needs to be regenerated), the dependency on "new Date().toDateString()"" is added.
+    const defaultChatMessageRenderer = React.useCallback((messageProps) => {
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, messageProps, { 
+                /* @conditional-compile-remove(file-sharing) */
+                onRenderFileDownloads: onRenderFileDownloadsMemo, 
+                /* @conditional-compile-remove(file-sharing) */
+                strings: messageProps.strings, message: messageProps.message, userId: userId, shouldOverlapAvatarAndMessage: shouldOverlapAvatarAndMessage, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(image-overlay) */
+                inlineImageOptions: inlineImageOptions, 
+                /* @conditional-compile-remove(file-sharing) */
+                fileDownloadHandler: fileDownloadHandler, 
+                /* @conditional-compile-remove(mention) */
+                mentionDisplayOptions: mentionOptions === null || mentionOptions === void 0 ? void 0 : mentionOptions.displayOptions })));
+        }
+        return React.createElement(React.Fragment, null);
+    }, [
+        onRenderFileDownloadsMemo,
+        shouldOverlapAvatarAndMessage,
+        userId,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString,
+        /* @conditional-compile-remove(image-overlay) */
+        inlineImageOptions,
+        /* @conditional-compile-remove(file-sharing) */
+        fileDownloadHandler,
+        /* @conditional-compile-remove(mention) */
+        mentionOptions,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        new Date().toDateString()
+    ]);
+    const messageRenderer = React.useCallback((messageProps) => {
+        return onRenderMessage === undefined
+            ? defaultChatMessageRenderer(Object.assign({}, messageProps))
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+    }, [defaultChatMessageRenderer, onRenderMessage]);
+    const shouldShowAvatar = React.useMemo(() => {
+        return message.attached === 'top' || message.attached === false;
+    }, [message.attached]);
+    const attached = React.useMemo(() => {
+        return getFluentUIAttachedValue(message.attached);
+    }, [message.attached]);
     const messageRootProps = React.useMemo(() => {
         return { className: reactComponents.mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) };
     }, [chatMessageRenderStyles.rootCommon, chatMessageRenderStyles.rootMessage]);
@@ -12133,74 +12379,10 @@ const FluentChatMessageComponentWrapper = (props) => {
     // Fluent UI message components are used here as for default message renderer,
     // timestamp and author name should be shown but they aren't shown for custom renderer.
     // More investigations are needed to check if this can be simplified with states.
-    // Status and avatar should be shown for both custom and default renderers.
-    if (message.mine === true) {
-        return (React.createElement("div", null,
-            React.createElement(reactChat.ChatMyMessage, { attached: attached, root: myMessageRootProps, body: myMessageBodyProps, statusIcon: myMessageStatusIcon }, messageRenderer(Object.assign({}, props)))));
-    }
-    else {
-        return (React.createElement("div", null,
-            React.createElement(reactChat.ChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props)))));
-    }
-};
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const systemMessageIconStyle = react.mergeStyles({
-    marginInlineEnd: '0.688rem'
-});
-
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const SystemMessage = (props) => {
-    const { iconName, content } = props;
-    const Icon = React.createElement(react.FontIcon, { iconName: iconName, className: react.mergeStyles(systemMessageIconStyle) });
-    return (React.createElement(react.Stack, { horizontal: true, className: react.mergeStyles(props === null || props === void 0 ? void 0 : props.containerStyle), tabIndex: 0 },
-        Icon,
-        React.createElement(react.Text, { style: { wordBreak: 'break-word' }, role: "status", title: content, variant: 'small' }, content)));
+    // Avatar should be shown for both custom and default renderers.
+    return (React.createElement(reactChat.ChatMessage, { attached: attached, root: messageRootProps, body: messageBodyProps, avatar: avatar }, messageRenderer(Object.assign({}, props))));
 };
 
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-/**
- * @private
- */
-const DefaultSystemMessage = (props) => {
-    var _a;
-    const message = props.message;
-    switch (message.messageType) {
-        case 'system':
-            switch (message.systemMessageType) {
-                case 'content':
-                    return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
-                case 'participantAdded':
-                case 'participantRemoved':
-                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
-            }
-    }
-    return React.createElement(React.Fragment, null);
-};
-const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
-    const { strings } = useLocale$1();
-    const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded'
-        ? strings.messageThread.participantJoined
-        : strings.messageThread.participantLeft;
-    if (participantsStr !== '') {
-        return (React.createElement(SystemMessage, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
-    }
-    return React.createElement(React.Fragment, null);
-};
-const generateParticipantsStr = (participants, defaultName) => participants
-    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
-    .join(', ');
-
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /**
@@ -12227,7 +12409,7 @@ const ChatMessageComponentWrapper = (props) => {
             : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
         const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
         const messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return (React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+        return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
     }
     switch (message.messageType) {
         case 'chat': {
@@ -12236,7 +12418,7 @@ const ChatMessageComponentWrapper = (props) => {
                 : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
             const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
             const messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            return (React.createElement(FluentChatMessageComponentWrapper, Object.assign({}, props, { message: message, messageContainerStyle: messageContainerStyle })));
+            return fluentChatComponent(Object.assign(Object.assign({}, props), { message: message, messageContainerStyle: messageContainerStyle }));
         }
         case 'system': {
             const messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
@@ -12250,6 +12432,14 @@ const ChatMessageComponentWrapper = (props) => {
         }
     }
 };
+const fluentChatComponent = (props) => {
+    if (props.message.mine === true) {
+        return React.createElement(FluentChatMyMessageComponent, Object.assign({}, props));
+    }
+    else {
+        return React.createElement(FluentChatMessageComponent, Object.assign({}, props));
+    }
+};
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
@@ -14406,7 +14596,7 @@ function useLongPress(props) {
  * @returns VideoGalleryRemoteParticipant[] {@link @azure/communication-react#VideoGalleryRemoteParticipant}
  */
 const smartDominantSpeakerParticipants = (args) => {
-    const { participants, dominantSpeakers = [], lastVisibleParticipants = [], maxDominantSpeakers } = args;
+    const { participants, dominantSpeakers = [], currentParticipants = [], maxDominantSpeakers } = args;
     // Don't apply any logic if total number of video streams is less than max dominant speakers.
     if (participants.length <= maxDominantSpeakers) {
         return participants;
@@ -14414,7 +14604,7 @@ const smartDominantSpeakerParticipants = (args) => {
     const participantsMap = participantsById(participants);
     // Only use the Max allowed dominant speakers that exist in participants
     const dominantSpeakerIds = dominantSpeakers.filter((id) => !!participantsMap[id]).slice(0, maxDominantSpeakers);
-    const newVisibleParticipantIds = lastVisibleParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
+    const newVisibleParticipantIds = currentParticipants.map((p) => p.userId).slice(0, maxDominantSpeakers);
     const newDominantSpeakerIds = dominantSpeakerIds.filter((id) => !newVisibleParticipantIds.includes(id));
     // Remove participants that are no longer dominant and replace them with new dominant speakers.
     for (let index = 0; index < maxDominantSpeakers; index++) {
@@ -14450,99 +14640,61 @@ const participantsById = (participants) => {
 const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const DEFAULT_MAX_VIDEO_SREAMS = 4;
 const MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY = 9;
-const _useOrganizedParticipants = (props) => {
-    const visibleGridParticipants = React.useRef([]);
-    const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [], layout } = props;
-    const calculateMaxRemoteVideoStreams = () => {
-        if (maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY) {
-            return MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY;
-        }
-        else {
-            return maxRemoteVideoStreams;
-        }
-    };
-    const maxRemoteVideoStreamsToUse = calculateMaxRemoteVideoStreams();
+const getOrganizedParticipants = (props) => {
+    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams = DEFAULT_MAX_VIDEO_SREAMS, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, layout, previousGridParticipants = [], previousOverflowParticipants = [] } = props;
+    const maxRemoteVideoStreamsToUse = maxRemoteVideoStreams > MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
+        ? MAX_GRID_PARTICIPANTS_NOT_LARGE_GALLERY
+        : maxRemoteVideoStreams;
+    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
-    const participantsToSortTrampoline = () => {
-        return layout !== 'floatingLocalVideo' ? putVideoParticipantsFirst(remoteParticipants) : videoParticipants;
-    };
-    visibleGridParticipants.current =
-        pinnedParticipantUserIds.length > 0 || isScreenShareActive
-            ? []
-            : smartDominantSpeakerParticipants({
-                participants: participantsToSortTrampoline(),
-                dominantSpeakers,
-                lastVisibleParticipants: visibleGridParticipants.current,
-                maxDominantSpeakers: maxRemoteVideoStreamsToUse
-            }).slice(0, maxRemoteVideoStreamsToUse);
+    const participants = layout === 'floatingLocalVideo' && videoParticipants.length > 0 ? videoParticipants : remoteParticipantsOrdered;
+    let newGridParticipants = smartDominantSpeakerParticipants({
+        participants: participants,
+        dominantSpeakers,
+        currentParticipants: previousGridParticipants,
+        maxDominantSpeakers: maxRemoteVideoStreamsToUse
+    }).slice(0, maxRemoteVideoStreamsToUse);
     const dominantSpeakerToGrid = layout === 'speaker'
         ? dominantSpeakers && dominantSpeakers[0]
-            ? visibleGridParticipants.current.filter((p) => p.userId === dominantSpeakers[0])
-            : [visibleGridParticipants.current[0]]
+            ? newGridParticipants.filter((p) => p.userId === dominantSpeakers[0])
+            : [newGridParticipants[0]]
         : [];
     if (dominantSpeakerToGrid[0]) {
-        visibleGridParticipants.current = dominantSpeakerToGrid;
+        newGridParticipants = dominantSpeakerToGrid;
     }
-    const visibleGridParticipantsSet = new Set(visibleGridParticipants.current.map((p) => p.userId));
-    const remoteParticipantsOrdered = putVideoParticipantsFirst(remoteParticipants);
+    const gridParticipantSet = new Set(newGridParticipants.map((p) => p.userId));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const callingParticipants = remoteParticipantsOrdered.filter((p) => p.state === ('Connecting' ));
     /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
     const callingParticipantsSet = new Set(callingParticipants.map((p) => p.userId));
-    visibleOverflowGalleryParticipants.current = smartDominantSpeakerParticipants({
-        participants: remoteParticipantsOrdered.filter((p) => !visibleGridParticipantsSet.has(p.userId) &&
+    const newOverflowGalleryParticipants = smartDominantSpeakerParticipants({
+        participants: remoteParticipantsOrdered.filter((p) => !gridParticipantSet.has(p.userId) &&
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ !callingParticipantsSet.has(p.userId)),
         dominantSpeakers: dominantSpeakers,
-        lastVisibleParticipants: visibleOverflowGalleryParticipants.current,
+        currentParticipants: previousOverflowParticipants,
         maxDominantSpeakers: maxOverflowGalleryDominantSpeakers
     });
-    const getGridParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
-            return [];
-        }
-        // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
-        // we will use the max streams provided to the function to find the max participants that can go in the grid
-        // if there are less participants than max streams then we will use all participants including joining in the grid
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-        return visibleGridParticipants.current.length > 0
-            ? visibleGridParticipants.current
-            : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
-                ? visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse)
-                : visibleOverflowGalleryParticipants.current.slice(0, maxRemoteVideoStreamsToUse).concat(callingParticipants);
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+    const gridParticipants = getGridParticipants({
         isScreenShareActive,
-        maxRemoteVideoStreamsToUse
-    ]);
-    const gridParticipants = getGridParticipants();
-    const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
-        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));
-        }
-        else {
-            // If screen sharing is not active, then assign all video tiles as grid tiles.
-            // If there are no video tiles, then assign audio tiles as grid tiles.
-            // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
-            // overflow should be empty if total participants including calling participants is less than max streams
-            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
-            return visibleGridParticipants.current.length > 0
-                ? visibleOverflowGalleryParticipants.current.concat(callingParticipants)
-                : visibleOverflowGalleryParticipants.current.length > maxRemoteVideoStreamsToUse
-                    ? visibleOverflowGalleryParticipants.current.slice(maxRemoteVideoStreamsToUse).concat(callingParticipants)
-                    : [];
-        }
-    }, [
-        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
+        gridParticipants: newGridParticipants,
+        overflowGalleryParticipants: newOverflowGalleryParticipants,
+        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    });
+    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants({
         isScreenShareActive,
-        maxRemoteVideoStreamsToUse
-    ]);
-    const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
-    return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
+        gridParticipants: newGridParticipants,
+        overflowGalleryParticipants: newOverflowGalleryParticipants,
+        maxRemoteVideoStreams: maxRemoteVideoStreamsToUse,
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants
+    });
+    return { gridParticipants, overflowGalleryParticipants };
 };
-const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
+/**
+ * Hook to determine which participants should be in grid and overflow gallery and their order respectively
+ * @private
+ */
+const useOrganizedParticipants = (props) => {
     var _a, _b;
     // map remote participants by userId
     const remoteParticipantMap = props.remoteParticipants.reduce((map, remoteParticipant) => {
@@ -14550,35 +14702,62 @@ const _useOrganizedParticipantsWithFocusedParticipants = (props) => {
         return map;
     }, {});
     const spotlightedParticipantUserIds = (_a = props.spotlightedParticipantUserIds) !== null && _a !== void 0 ? _a : [];
-    // declare focused participant user ids as spotlighted participants user ids followed by
-    // pinned participants user ids
-    const focusedParticipantUserIds = [
-        ...new Set(spotlightedParticipantUserIds.concat((_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : []))
-    ];
+    const pinnedParticipantUserIds = (_b = props.pinnedParticipantUserIds) !== null && _b !== void 0 ? _b : [];
+    // declare set of focused participant user ids as spotlighted participants user ids followed by
+    // pinned participants user ids which is deduplicated while maintaining order
+    const focusedParticipantUserIdSet = new Set(spotlightedParticipantUserIds.concat(pinnedParticipantUserIds).filter((p) => remoteParticipantMap[p]));
     // get focused participants from map of remote participants in the order of the user ids
-    const focusedParticipants = [];
-    focusedParticipantUserIds.forEach((id) => {
-        const pinnedParticipant = remoteParticipantMap[id];
-        if (pinnedParticipant) {
-            focusedParticipants.push(pinnedParticipant);
-        }
-    });
-    // get unfocused participants by filtering out set of focused participant user ids from all remote participants
-    const focusedParticipantUserIdSet = new Set(focusedParticipantUserIds);
+    const focusedParticipants = [...focusedParticipantUserIdSet].map((p) => remoteParticipantMap[p]);
+    const currentGridParticipants = React.useRef([]);
+    const currentOverflowGalleryParticipants = React.useRef([]);
     const unfocusedParticipants = props.remoteParticipants.filter((p) => !focusedParticipantUserIdSet.has(p.userId));
     const useOrganizedParticipantsProps = Object.assign(Object.assign({}, props), { 
-        // if there are pinned participants then we should only consider unpinned participants
-        remoteParticipants: unfocusedParticipants });
-    const useOrganizedParticipantsResult = _useOrganizedParticipants(useOrganizedParticipantsProps);
-    if (focusedParticipants.length === 0) {
-        return useOrganizedParticipantsResult;
+        // if there are focused participants then leave no room in the grid by setting maxGridParticipants to 0
+        maxRemoteVideoStreams: focusedParticipants.length > 0 || props.isScreenShareActive ? 0 : props.maxRemoteVideoStreams, remoteParticipants: unfocusedParticipants, previousGridParticipants: currentGridParticipants.current, previousOverflowParticipants: currentOverflowGalleryParticipants.current });
+    const useOrganizedParticipantsResult = getOrganizedParticipants(useOrganizedParticipantsProps);
+    currentGridParticipants.current = useOrganizedParticipantsResult.gridParticipants;
+    currentOverflowGalleryParticipants.current = useOrganizedParticipantsResult.overflowGalleryParticipants;
+    return focusedParticipants.length > 0
+        ? {
+            gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
+            overflowGalleryParticipants: props.isScreenShareActive
+                ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
+                : useOrganizedParticipantsResult.overflowGalleryParticipants
+        }
+        : useOrganizedParticipantsResult;
+};
+const getGridParticipants = (args) => {
+    if (args.isScreenShareActive) {
+        return [];
+    }
+    // if we have no grid participants we need to cap the max number of overflowGallery participants in the grid
+    // we will use the max streams provided to the function to find the max participants that can go in the grid
+    // if there are less participants than max streams then we will use all participants including joining in the grid
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+    return args.gridParticipants.length > 0
+        ? args.gridParticipants
+        : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
+            ? args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams)
+            : args.overflowGalleryParticipants.slice(0, args.maxRemoteVideoStreams).concat(args.callingParticipants);
+};
+const getOverflowGalleryRemoteParticipants = (args) => {
+    if (args.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 args.gridParticipants.concat(args.overflowGalleryParticipants.concat(args.callingParticipants));
+    }
+    else {
+        // If screen sharing is not active, then assign all video tiles as grid tiles.
+        // If there are no video tiles, then assign audio tiles as grid tiles.
+        // if there are more overflow tiles than max streams then find the tiles that don't fit in the grid and put them in overflow
+        // overflow should be empty if total participants including calling participants is less than max streams
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+        return args.gridParticipants.length > 0
+            ? args.overflowGalleryParticipants.concat(args.callingParticipants)
+            : args.overflowGalleryParticipants.length > args.maxRemoteVideoStreams
+                ? args.overflowGalleryParticipants.slice(args.maxRemoteVideoStreams).concat(args.callingParticipants)
+                : [];
     }
-    return {
-        gridParticipants: props.isScreenShareActive ? [] : focusedParticipants,
-        overflowGalleryParticipants: props.isScreenShareActive
-            ? focusedParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-            : useOrganizedParticipantsResult.gridParticipants.concat(useOrganizedParticipantsResult.overflowGalleryParticipants)
-    };
 };
 const putVideoParticipantsFirst = (remoteParticipants) => {
     const videoParticipants = [];
@@ -14595,13 +14774,6 @@ const putVideoParticipantsFirst = (remoteParticipants) => {
     const remoteParticipantSortedByVideo = videoParticipants.concat(audioParticipants);
     return remoteParticipantSortedByVideo;
 };
-/**
- * Hook to determine which participants should be in grid and overflow gallery and their order respectively
- * @private
- */
-const useOrganizedParticipants = (args) => {
-    return _useOrganizedParticipantsWithFocusedParticipants(args);
-};
 /* @conditional-compile-remove(reaction) */
 /**
  * @private
@@ -21142,38 +21314,40 @@ const _videoGalleryRemoteParticipantsMemo = (remoteParticipants, isHideAttendeeN
             /* @conditional-compile-remove(reaction) */
             const remoteParticipantReaction = memoizedConvertToVideoTileReaction(participant.reactionState);
             return memoizedFn(toFlatCommunicationIdentifier(participant.identifier), participant.isMuted, checkIsSpeaking(participant), participant.videoStreams, state, displayName, participant.raisedHand, 
+            /* @conditional-compile-remove(ppt-live) */
+            participant.contentSharingStream, 
             /* @conditional-compile-remove(reaction) */
             remoteParticipantReaction, 
             /* @conditional-compile-remove(spotlight) */
-            participant.spotlight, 
-            /* @conditional-compile-remove(ppt-live) */
-            participant.contentSharingStream);
+            participant.spotlight);
         }));
     });
 };
 const memoizedAllConvertRemoteParticipant = memoizeFnAll((userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream, 
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight, // temp unknown type to build stable
-/* @conditional-compile-remove(ppt-live) */
-contentSharingStream) => {
+spotlight // temp unknown type to build stable
+) => {
     return convertRemoteParticipantToVideoGalleryRemoteParticipant(userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, 
+    /* @conditional-compile-remove(ppt-live) */
+    contentSharingStream, 
     /* @conditional-compile-remove(reaction) */
     reaction, 
     /* @conditional-compile-remove(spotlight) */
-    spotlight, 
-    /* @conditional-compile-remove(ppt-live) */
-    contentSharingStream);
+    spotlight);
 });
 /** @private */
 const convertRemoteParticipantToVideoGalleryRemoteParticipant = (userId, isMuted, isSpeaking, videoStreams, state, displayName, raisedHand, // temp unknown type to build stable
+/* @conditional-compile-remove(ppt-live) */
+contentSharingStream, 
 /* @conditional-compile-remove(reaction) */
 reaction, // temp unknown type to build stable
 /* @conditional-compile-remove(spotlight) */
-spotlight, // temp unknown type to build stable
-/* @conditional-compile-remove(ppt-live) */
-contentSharingStream) => {
+spotlight // temp unknown type to build stable
+) => {
     const rawVideoStreamsArray = Object.values(videoStreams);
     let videoStream = undefined;
     let screenShareStream = undefined;
@@ -21333,6 +21507,8 @@ capabilities) => {
     return {
         screenShareParticipant: screenShareRemoteParticipant
             ? convertRemoteParticipantToVideoGalleryRemoteParticipant(toFlatCommunicationIdentifier(screenShareRemoteParticipant.identifier), screenShareRemoteParticipant.isMuted, checkIsSpeaking(screenShareRemoteParticipant), screenShareRemoteParticipant.videoStreams, screenShareRemoteParticipant.state, screenShareRemoteParticipant.displayName, screenShareRemoteParticipant.raisedHand, 
+            /* @conditional-compile-remove(ppt-live) */
+            screenShareRemoteParticipant.contentSharingStream, 
             /* @conditional-compile-remove(spotlight) */
             screenShareRemoteParticipant.spotlight)
             : undefined,
@@ -22896,8 +23072,8 @@ class ResourceDownloadQueue {
         });
     }
     downloadAllPreviewUrls(message, operation) {
-        var _a;
         return __awaiter$t(this, void 0, void 0, function* () {
+            var _a;
             const attachments = (_a = message.content) === null || _a === void 0 ? void 0 : _a.attachments;
             if (message.type === 'html' && attachments) {
                 if (message.resourceCache === undefined) {
@@ -23055,8 +23231,8 @@ let ChatContext$1 = class ChatContext {
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     downloadResourceToCache(threadId, messageId, resourceUrl) {
-        var _a;
         return __awaiter$s(this, void 0, void 0, function* () {
+            var _a;
             let message = (_a = this.getState().threads[threadId]) === null || _a === void 0 ? void 0 : _a.chatMessages[messageId];
             if (message && this._fullsizeImageQueue) {
                 if (!message.resourceCache) {
@@ -24650,8 +24826,8 @@ class AzureCommunicationChatAdapter {
     offStateChange(handler) {
         this.context.offStateChange(handler);
     }
-    sendMessage(content, options = {}) {
-        return __awaiter$n(this, void 0, void 0, function* () {
+    sendMessage(content_1) {
+        return __awaiter$n(this, arguments, void 0, function* (content, options = {}) {
             yield this.asyncTeeErrorToEventEmitter(() => __awaiter$n(this, void 0, void 0, function* () {
                 /* @conditional-compile-remove(file-sharing) */
                 options.metadata = Object.assign(Object.assign({}, options.metadata), convertFileUploadsUiStateToMessageMetadata(this.context.getState().fileUploads));
@@ -24880,7 +25056,7 @@ const convertEventType = (type) => {
  *
  * @public
  */
-const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) => __awaiter$n(void 0, void 0, void 0, function* () {
+const createAzureCommunicationChatAdapter = (_a) => __awaiter$n(void 0, [_a], void 0, function* ({ endpoint: endpointUrl, userId, displayName, credential, threadId }) {
     return _createAzureCommunicationChatAdapterInner(endpointUrl, userId, displayName, credential, threadId);
 });
 /**
@@ -24888,7 +25064,7 @@ const createAzureCommunicationChatAdapter = ({ endpoint: endpointUrl, userId, di
  *
  * @internal
  */
-const _createAzureCommunicationChatAdapterInner = (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') => __awaiter$n(void 0, void 0, void 0, function* () {
+const _createAzureCommunicationChatAdapterInner = (endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1) => __awaiter$n(void 0, [endpoint_1, userId_1, displayName_1, credential_1, threadId_1, ...args_1], void 0, function* (endpoint, userId, displayName, credential, threadId, telemetryImplementationHint = 'Chat') {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Provided userId is invalid. Please provide valid identifier object.');
     }
@@ -25676,7 +25852,7 @@ const useSelector$2 = (selector, selectorProps) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 /* @conditional-compile-remove(rich-text-editor) */
-const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-BCdGFyar.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
+const RichTextSendBoxWrapper = React.lazy(() => Promise.resolve().then(function () { return require('./RichTextSendBoxWrapper-Bw9vaT1f.js'); }).then((module) => ({ default: module.RichTextSendBoxWrapper })));
 /**
  * @private
  */
@@ -35347,8 +35523,8 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(PSTN-calls) */
     holdCall() {
-        var _a, _b;
         return __awaiter$5(this, void 0, void 0, function* () {
+            var _a, _b;
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) !== 'LocalHold') {
                 if ((_b = this.call) === null || _b === void 0 ? void 0 : _b.isLocalVideoStarted) {
                     this.stopCamera().then(() => {
@@ -35363,8 +35539,8 @@ class AzureCommunicationCallAdapter {
     }
     /* @conditional-compile-remove(PSTN-calls) */
     resumeCall() {
-        var _a;
         return __awaiter$5(this, void 0, void 0, function* () {
+            var _a;
             if (((_a = this.call) === null || _a === void 0 ? void 0 : _a.state) === 'LocalHold') {
                 this.handlers.onToggleHold().then(() => {
                     var _a;
@@ -35691,9 +35867,9 @@ function createAzureCommunicationCallAdapter(args) {
  *
  * @internal
  */
-const _createAzureCommunicationCallAdapterInner = ({ userId, displayName, credential, locator, targetCallees, 
+const _createAzureCommunicationCallAdapterInner = (_a) => __awaiter$5(void 0, [_a], void 0, function* ({ userId, displayName, credential, locator, targetCallees, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
-/* @conditional-compile-remove(video-background-effects) */ options, telemetryImplementationHint = 'Call' }) => __awaiter$5(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(video-background-effects) */ options, telemetryImplementationHint = 'Call' }) {
     if (!_isValidIdentifier(userId)) {
         throw new Error('Invalid identifier. Please provide valid identifier object.');
     }
@@ -35720,7 +35896,7 @@ const _createAzureCommunicationCallAdapterInner = ({ userId, displayName, creden
 /**
  * @beta
  */
-const createTeamsCallAdapter = ({ userId, credential, locator, options }) => __awaiter$5(void 0, void 0, void 0, function* () {
+const createTeamsCallAdapter = (_b) => __awaiter$5(void 0, [_b], void 0, function* ({ userId, credential, locator, options }) {
     if (communicationCommon.isCommunicationUserIdentifier(userId)) {
         throw new Error('Communication User identifier is not supported by TeamsCallAdapter, please use our AzureCommunicationCallAdapter.');
     }
@@ -37538,9 +37714,9 @@ class AzureCommunicationCallWithChatAdapter {
  *
  * @public
  */
-const createAzureCommunicationCallWithChatAdapter = ({ userId, displayName, credential, endpoint, locator, 
+const createAzureCommunicationCallWithChatAdapter = (_a) => __awaiter$2(void 0, [_a], void 0, function* ({ userId, displayName, credential, endpoint, locator, 
 /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
-/* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
+/* @conditional-compile-remove(video-background-effects) */ callAdapterOptions }) {
     const callAdapterLocator = isTeamsMeetingLinkLocator(locator) ? locator : locator.callLocator;
     const createCallAdapterPromise = _createAzureCommunicationCallAdapterInner({
         userId,
@@ -37684,9 +37860,9 @@ beforeDispose) => {
  *
  * @public
  */
-const createAzureCommunicationCallWithChatAdapterFromClients = ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, 
+const createAzureCommunicationCallWithChatAdapterFromClients = (_b) => __awaiter$2(void 0, [_b], void 0, function* ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, 
 /* @conditional-compile-remove(video-background-effects) */
-callAdapterOptions }) => __awaiter$2(void 0, void 0, void 0, function* () {
+callAdapterOptions }) {
     const createCallAdapterPromise = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, callLocator, 
     /* @conditional-compile-remove(video-background-effects) */
     callAdapterOptions);
@@ -38253,4 +38429,4 @@ exports.useTeamsCall = useTeamsCall;
 exports.useTeamsCallAdapter = useTeamsCallAdapter;
 exports.useTeamsCallAgent = useTeamsCallAgent;
 exports.useTheme = useTheme;
-//# sourceMappingURL=index-BfFCLrEO.js.map
+//# sourceMappingURL=index-DyaTe_Bz.js.map