@azure/communication-react 1.9.0-beta.1 → 1.10.0-alpha-202311040013

package/dist/dist-esm/react-components/src/components/MessageThread.js

@@ -29,7 +29,13 @@ import LiveAnnouncer from './Announcer/LiveAnnouncer';
 import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
 import { createStyleFromV8Style } from './styles/v8StyleShim';
 const isMessageSame = (first, second) => {
-    return first.messageId === second.messageId && first.content === second.content && first.contentType === second.contentType && JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) && first.senderId === second.senderId && first.senderDisplayName === second.senderDisplayName && first.status === second.status;
+    return (first.messageId === second.messageId &&
+        first.content === second.content &&
+        first.contentType === second.contentType &&
+        JSON.stringify(first.createdOn) === JSON.stringify(second.createdOn) &&
+        first.senderId === second.senderId &&
+        first.senderDisplayName === second.senderDisplayName &&
+        first.status === second.status);
 };
 /**
  * Get the latest message from the message array.
@@ -56,7 +62,8 @@ const isThereNewMessageNotFromCurrentUser = (userId, latestMessageFromPreviousMe
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId !== userId;
     }
-    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId !== userId;
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId !== userId);
 };
 /**
  * Returns true if the current user sent the latest message and false otherwise. It will ignore messages that have no
@@ -71,19 +78,24 @@ const didUserSendTheLatestMessage = (userId, latestMessageFromPreviousMessages,
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId === userId;
     }
-    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId === userId;
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId === userId);
 };
 const DefaultJumpToNewMessageButton = (props) => {
     const { text, onClick } = props;
-    return React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) });
+    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) }));
 };
-const generateParticipantsStr = (participants, defaultName) => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
 const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
     const { strings } = useLocale();
     const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
     if (participantsStr !== '') {
-        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
+        return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
     }
     return React.createElement(React.Fragment, null);
 };
@@ -94,10 +106,10 @@ const DefaultSystemMessage = (props) => {
         case 'system':
             switch (message.systemMessageType) {
                 case 'content':
-                    return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle });
+                    return (React.createElement(SystemMessageComponent, { 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(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
             }
     }
     return React.createElement(React.Fragment, null);
@@ -116,17 +128,21 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
     };
     const chatMessage = (message, messageProps) => {
         var _a;
-        const messageStatusRenderer = showMessageStatus && statusToRender ? onRenderMessageStatus ? (status) => onRenderMessageStatus({
-            status
-        }) : (status) => defaultStatusRenderer(message, status, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0) : () => React.createElement("div", { className: mergeStyles(noMessageStatusStyle) });
+        const messageStatusRenderer = showMessageStatus && statusToRender
+            ? onRenderMessageStatus
+                ? (status) => onRenderMessageStatus({ status })
+                : (status) => defaultStatusRenderer(message, status, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0)
+            : () => React.createElement("div", { className: mergeStyles(noMessageStatusStyle) });
         let chatMessageComponent;
         const shouldShowAvatar = message.attached === 'top' || message.attached === false;
         const attached = shouldShowAvatar ? 'top' : 'center';
         if (message.mine === true) {
-            chatMessageComponent = React.createElement(FluentChatMyMessage, { attached: attached, root: {
+            chatMessageComponent = (React.createElement(FluentChatMyMessage, { attached: attached, root: {
                     // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
                     className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)),
-                    style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) : {},
+                    style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined
+                        ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)
+                        : {},
                     role: 'none'
                 }, body: {
                     className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
@@ -134,9 +150,9 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
                     // inner components are already focusable
                     tabIndex: -1,
                     role: 'none'
-                }, statusIcon: React.createElement("div", { className: mergeStyles({
-                        paddingLeft: '0.25rem'
-                    }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status ? messageStatusRenderer(message.status) : undefined) }, onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer })) : onRenderMessage(messageProps, defaultChatMessageRenderer));
+                }, statusIcon: React.createElement("div", { className: mergeStyles({ paddingLeft: '0.25rem' }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status ? messageStatusRenderer(message.status) : undefined) }, onRenderMessage === undefined
+                ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer }))
+                : onRenderMessage(messageProps, defaultChatMessageRenderer)));
         }
         else {
             const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
@@ -146,53 +162,53 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
                 text: message.senderDisplayName,
                 showOverflowTooltip: false
             };
-            chatMessageComponent = React.createElement(FluentChatMessage, { attached: attached, root: {
-                    className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon)
-                }, body: {
+            chatMessageComponent = (React.createElement(FluentChatMessage, { attached: attached, root: { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) }, body: {
                     // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
-                    className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage ? chatMessageRenderStyles.avatarOverlap : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
-                    style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) : {},
+                    className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage
+                        ? chatMessageRenderStyles.avatarOverlap
+                        : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+                    style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined
+                        ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)
+                        : {},
                     // make body not focusable to remove repetitions from narrators.
                     // inner components are already focusable
                     tabIndex: -1,
                     role: 'none'
-                }, avatar: React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))) }, onRenderMessage === undefined ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer })) : onRenderMessage(messageProps, defaultChatMessageRenderer));
+                }, avatar: React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))) }, onRenderMessage === undefined
+                ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer }))
+                : onRenderMessage(messageProps, defaultChatMessageRenderer)));
         }
         return React.createElement("div", { key: _messageKey }, chatMessageComponent);
     };
     /* @conditional-compile-remove(data-loss-prevention) */
     // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
     if (message.messageType === 'blocked') {
-        const myChatMessageStyle = message.status === 'failed' ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+        const myChatMessageStyle = message.status === 'failed'
+            ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+            : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
         const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
         messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
         return chatMessage(message, messageProps);
     }
     switch (message.messageType) {
-        case 'chat':
-            {
-                const myChatMessageStyle = message.status === 'failed' ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
-                const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
-                messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-                return chatMessage(message, messageProps);
-            }
-        case 'system':
-            {
-                messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-                const systemMessageComponent = onRenderMessage === undefined ? React.createElement(DefaultSystemMessage, Object.assign({}, messageProps)) : onRenderMessage(messageProps, props => React.createElement(DefaultSystemMessage, Object.assign({}, props)));
-                return React.createElement("div", { key: _messageKey, style: {
-                        paddingTop: '0.5rem'
-                    } }, systemMessageComponent);
-            }
-        default:
-            {
-                // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
-                const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(messageProps);
-                return React.createElement("div", { key: _messageKey, style: {
-                        paddingTop: '1rem',
-                        paddingBottom: '0.25rem'
-                    } }, customMessageComponent);
-            }
+        case 'chat': {
+            const myChatMessageStyle = message.status === 'failed'
+                ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+                : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+            const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
+            messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+            return chatMessage(message, messageProps);
+        }
+        case 'system': {
+            messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
+            const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessage, Object.assign({}, messageProps))) : (onRenderMessage(messageProps, (props) => React.createElement(DefaultSystemMessage, Object.assign({}, props))));
+            return (React.createElement("div", { key: _messageKey, style: { paddingTop: '0.5rem' } }, systemMessageComponent));
+        }
+        default: {
+            // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
+            const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(messageProps);
+            return (React.createElement("div", { key: _messageKey, style: { paddingTop: '1rem', paddingBottom: '0.25rem' } }, customMessageComponent));
+        }
     }
 });
 const getLastChatMessageIdWithStatus = (messages, status) => {
@@ -219,8 +235,8 @@ export const MessageThread = (props) => {
     var _a;
     const theme = useTheme();
     const chatBody = useMemo(() => {
-        return React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
-            React.createElement(MessageThreadWrapper, Object.assign({}, props)));
+        return (React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+            React.createElement(MessageThreadWrapper, Object.assign({}, props))));
     }, [theme, props]);
     return React.createElement("div", { className: mergeStyles(messageThreadContainerStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) }, chatBody);
 };
@@ -257,14 +273,18 @@ export const MessageThreadWrapper = (props) => {
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const [inlineAttachments, setInlineAttachments] = useState({});
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    const onFetchInlineAttachment = useCallback((attachment) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
+    const onFetchInlineAttachment = useCallback((attachments, messageId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onFetchAttachments) {
             return;
         }
-        setInlineAttachments(prev => (Object.assign(Object.assign({}, prev), { [attachment.id]: '' })));
-        const attachmentDownloadResult = yield onFetchAttachments(attachment);
-        if (attachmentDownloadResult[0]) {
-            setInlineAttachments(prev => (Object.assign(Object.assign({}, prev), { [attachment.id]: attachmentDownloadResult[0].blobUrl })));
+        const attachmentDownloadResult = yield onFetchAttachments(attachments);
+        const listOfAttachments = inlineAttachments[messageId];
+        for (const result of attachmentDownloadResult) {
+            const { attachmentId, blobUrl } = result;
+            listOfAttachments[attachmentId] = blobUrl;
+        }
+        if (Object.keys(listOfAttachments).length > 0) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments })));
         }
     }), [inlineAttachments, onFetchAttachments]);
     const isAllChatMessagesLoadedRef = useRef(false);
@@ -313,10 +333,14 @@ export const MessageThreadWrapper = (props) => {
     const clientHeight = (_a = chatThreadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
     // we try to only send those message status if user is scrolled to the bottom.
     const sendMessageStatusIfAtBottom = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!isAtBottomOfScrollRef.current || !document.hasFocus() || !messagesRef.current || messagesRef.current.length === 0 || !showMessageStatus) {
+        if (!isAtBottomOfScrollRef.current ||
+            !document.hasFocus() ||
+            !messagesRef.current ||
+            messagesRef.current.length === 0 ||
+            !showMessageStatus) {
             return;
         }
-        const messagesWithId = messagesRef.current.filter(message => {
+        const messagesWithId = messagesRef.current.filter((message) => {
             return message.messageType === 'chat' && !message.mine && !!message.messageId;
         });
         if (messagesWithId.length === 0) {
@@ -324,7 +348,10 @@ export const MessageThreadWrapper = (props) => {
         }
         const lastMessage = messagesWithId[messagesWithId.length - 1];
         try {
-            if (onMessageSeen && lastMessage && lastMessage.messageId && lastMessage.messageId !== messageIdSeenByMeRef.current) {
+            if (onMessageSeen &&
+                lastMessage &&
+                lastMessage.messageId &&
+                lastMessage.messageId !== messageIdSeenByMeRef.current) {
                 yield onMessageSeen(lastMessage.messageId);
                 messageIdSeenByMeRef.current = lastMessage.messageId;
             }
@@ -345,7 +372,8 @@ export const MessageThreadWrapper = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >= chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
+        const atBottom = Math.ceil(chatScrollDivRef.current.scrollTop) >=
+            chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
         if (atBottom) {
             sendMessageStatusIfAtBottom();
             if (!isAtBottomOfScrollRef.current) {
@@ -361,7 +389,9 @@ export const MessageThreadWrapper = (props) => {
                 isLoadingChatMessagesRef.current = true;
                 try {
                     // Fetch message until scrollTop reach the threshold for fetching new message
-                    while (!isAllChatMessagesLoadedRef.current && chatScrollDivRef.current && chatScrollDivRef.current.scrollTop <= 500) {
+                    while (!isAllChatMessagesLoadedRef.current &&
+                        chatScrollDivRef.current &&
+                        chatScrollDivRef.current.scrollTop <= 500) {
                         isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
                         yield delay(200);
                     }
@@ -388,7 +418,8 @@ export const MessageThreadWrapper = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        chatScrollDivRef.current.scrollTop = chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
+        chatScrollDivRef.current.scrollTop =
+            chatScrollDivRef.current.scrollHeight - (previousHeightRef.current - previousTopRef.current);
     }, [messages]);
     // Fetch more messages to make the scroll bar appear, infinity scroll is then handled in the handleScroll function.
     useEffect(() => {
@@ -441,10 +472,12 @@ export const MessageThreadWrapper = (props) => {
      */
     useEffect(() => {
         // If user just sent the latest message then we assume we can move user to bottom of scroll.
-        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) && !isAtBottomOfScrollRef.current) {
+        if (isThereNewMessageNotFromCurrentUser(userId, latestPreviousChatMessage, latestCurrentChatMessage) &&
+            !isAtBottomOfScrollRef.current) {
             setExistsNewChatMessage(true);
         }
-        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) || isAtBottomOfScrollRef.current) {
+        else if (didUserSendTheLatestMessage(userId, latestPreviousChatMessage, latestCurrentChatMessage) ||
+            isAtBottomOfScrollRef.current) {
             scrollToBottom();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -462,23 +495,49 @@ export const MessageThreadWrapper = (props) => {
     const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
     // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
     const defaultChatMessageRenderer = useCallback((messageProps) => {
-        if (messageProps.message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
-            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
-                /* @conditional-compile-remove(file-sharing) */ strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
-                /* @conditional-compile-remove(date-time-customization) */ onDisplayDateTimeString: onDisplayDateTimeString, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ onFetchAttachments: onFetchInlineAttachment, 
-                /* @conditional-compile-remove(image-gallery) */ onInlineImageClicked: onInlineImageClicked, 
-                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ attachmentsMap: inlineAttachments, 
-                /* @conditional-compile-remove(mention) */ mentionOptions: mentionOptions }));
+        var _a;
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        if (inlineAttachments[messageProps.message.messageId] === undefined) {
+            setInlineAttachments((prev) => (Object.assign(Object.assign({}, prev), { [messageProps.message.messageId]: {} })));
+        }
+        if (messageProps.message.messageType === 'chat' ||
+            /* @conditional-compile-remove(data-loss-prevention) */ messageProps.message.messageType === 'blocked') {
+            return (React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, 
+                /* @conditional-compile-remove(file-sharing) */
+                strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
+                /* @conditional-compile-remove(date-time-customization) */
+                onDisplayDateTimeString: onDisplayDateTimeString, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                onFetchAttachments: onFetchInlineAttachment, 
+                /* @conditional-compile-remove(image-gallery) */
+                onInlineImageClicked: onInlineImageClicked, 
+                /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                attachmentsMap: (_a = inlineAttachments[messageProps.message.messageId]) !== null && _a !== void 0 ? _a : {}, 
+                /* @conditional-compile-remove(mention) */
+                mentionOptions: mentionOptions })));
         }
         return React.createElement(React.Fragment, null);
-    }, [onRenderFileDownloads,
-        strings, props.userId, participantCount, isNarrow, onRenderAvatar, showMessageStatus, onActionButtonClickMemo,
+    }, [
+        onRenderFileDownloads,
+        /* @conditional-compile-remove(file-sharing) */
+        strings,
+        props.userId,
+        participantCount,
+        isNarrow,
+        onRenderAvatar,
+        showMessageStatus,
+        onActionButtonClickMemo,
+        /* @conditional-compile-remove(date-time-customization) */
         onDisplayDateTimeString,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         onFetchInlineAttachment,
+        /* @conditional-compile-remove(image-gallery) */
         onInlineImageClicked,
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
         inlineAttachments,
-        mentionOptions]);
+        /* @conditional-compile-remove(mention) */
+        mentionOptions
+    ]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
@@ -488,37 +547,35 @@ export const MessageThreadWrapper = (props) => {
                 setReadCountForHoveredIndicator(undefined);
             }
         };
-        return React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
+        return (React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
             // -1 because participant count does not include myself
-            remoteParticipantsCount: participantCount ? participantCount - 1 : 0 });
+            remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
     const theme = useTheme();
     const chatMessageRenderStyles = useChatMessageRenderStyles();
-    const messagesToDisplay = useMemo(() => memoizeAllMessages(memoizedMessageFn => {
+    const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
             let key = message.messageId;
             let statusToRender = undefined;
-            if (message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
+            if (message.messageType === 'chat' ||
+                /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked') {
                 if ((!message.messageId || message.messageId === '') && 'clientMessageId' in message) {
                     key = message.clientMessageId;
                 }
                 if (showMessageStatus && message.mine) {
                     switch (message.messageId) {
-                        case lastSeenChatMessage:
-                            {
-                                statusToRender = 'seen';
-                                break;
-                            }
-                        case lastSendingChatMessage:
-                            {
-                                statusToRender = 'sending';
-                                break;
-                            }
-                        case lastDeliveredChatMessage:
-                            {
-                                statusToRender = 'delivered';
-                                break;
-                            }
+                        case lastSeenChatMessage: {
+                            statusToRender = 'seen';
+                            break;
+                        }
+                        case lastSendingChatMessage: {
+                            statusToRender = 'sending';
+                            break;
+                        }
+                        case lastDeliveredChatMessage: {
+                            statusToRender = 'delivered';
+                            break;
+                        }
                     }
                 }
                 if (message.mine && message.status === 'failed') {
@@ -528,25 +585,49 @@ export const MessageThreadWrapper = (props) => {
             return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
-            message.messageType === 'chat' || /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing);
+            message.messageType === 'chat' ||
+                /* @conditional-compile-remove(data-loss-prevention) */ message.messageType === 'blocked'
+                ? message.attached
+                : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing);
         });
-    }), [messages, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage]);
+    }), [
+        messages,
+        showMessageDate,
+        showMessageStatus,
+        onRenderAvatar,
+        isNarrow,
+        styles,
+        onRenderMessageStatus,
+        defaultStatusRenderer,
+        defaultChatMessageRenderer,
+        strings,
+        theme,
+        chatMessageRenderStyles,
+        participantCount,
+        readCountForHoveredIndicator,
+        onRenderMessage,
+        onUpdateMessage,
+        onCancelEditMessage,
+        onDeleteMessage,
+        onSendMessage,
+        props.disableEditing,
+        lastSeenChatMessage,
+        lastSendingChatMessage,
+        lastDeliveredChatMessage
+    ]);
     const classes = useChatStyles();
     const chatBody = useMemo(() => {
-        return React.createElement(LiveAnnouncer, null,
+        return (React.createElement(LiveAnnouncer, null,
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
                 React.createElement(Chat
                 // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
                 , { 
                     // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
-                    className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay)));
+                    className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay))));
     }, [theme, classes.root, styles === null || styles === void 0 ? void 0 : styles.chatContainer, messagesToDisplay]);
-    return React.createElement("div", { className: mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
-        existsNewChatMessage && !disableJumpToNewMessageButton && React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? onRenderJumpToNewMessageButton({
-            text: strings.newMessagesIndicator,
-            onClick: scrollToBottom
-        }) : React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })),
-        chatBody);
+    return (React.createElement("div", { className: mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
+        existsNewChatMessage && !disableJumpToNewMessageButton && (React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
+        chatBody));
 };
 const onRenderFileDownloadsTrampoline = (props) => {
     /* @conditional-compile-remove(file-sharing) */