@azure/communication-react 1.11.0-beta.1 → 1.11.0

package/dist/dist-esm/react-components/src/components/MessageThread.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { IStyle } from '@fluentui/react';
 import { BaseCustomStyles, ChatMessage, CustomMessage, SystemMessage, OnRenderAvatarCallback, Message, ReadReceiptsBySenderId, ComponentSlotStyle } from '../types';
-import { BlockedMessage } from '../types';
 import { MessageStatusIndicatorProps } from './MessageStatusIndicator';
 import { MessageStatus } from "../../../acs-ui-common/src";
-import { FileDownloadHandler } from './FileDownloadCards';
-import { FileMetadata } from './FileDownloadCards';
-import { AttachmentDownloadResult } from './FileDownloadCards';
-import { MentionOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -33,7 +28,6 @@ export interface MessageThreadStyles extends BaseCustomStyles {
     /** Styles for system message container. */
     systemMessageContainer?: ComponentSlotStyle;
     /** Styles for blocked message container. */
-    blockedMessageContainer?: ComponentSlotStyle;
     /** Styles for message status indicator container. */
     messageStatusContainer?: (mine: boolean) => IStyle;
 }
@@ -95,14 +89,8 @@ export interface MessageThreadStrings {
     editBoxSubmitButton: string;
     /** String for action menu indicating there are more options */
     actionMenuMoreOptions?: string;
-    /** String for download file button in file card */
-    downloadFile: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
-    /** String for aria text in file attachment group*/
-    fileCardGroupMessage: string;
+    /** Aria label to announce when a message is deleted */
+    messageDeletedAnnouncementAriaLabel: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -120,26 +108,23 @@ export interface JumpToNewMessageButtonProps {
  *
  * @public
  */
-export declare type MessageRenderer = (props: MessageProps) => JSX.Element;
+export type MessageRenderer = (props: MessageProps) => JSX.Element;
 /**
  * @public
  * Callback function run when a message is updated.
  */
-export declare type UpdateMessageCallback = (messageId: string, content: string, /* @conditional-compile-remove(file-sharing) */ options?: {
-    metadata?: Record<string, string>;
-    attachedFilesMetadata?: FileMetadata[];
-}) => Promise<void>;
+export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
  */
-export declare type CancelEditCallback = (messageId: string) => void;
+export type CancelEditCallback = (messageId: string) => void;
 /**
  * Props for {@link MessageThread}.
  *
  * @public
  */
-export declare type MessageThreadProps = {
+export type MessageThreadProps = {
     /**
      * UserId of the current user.
      */
@@ -147,7 +132,7 @@ export declare type MessageThreadProps = {
     /**
      * Messages to render in message thread. A message can be of type `ChatMessage`, `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
-    messages: (ChatMessage | SystemMessage | CustomMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage)[];
+    messages: (ChatMessage | SystemMessage | CustomMessage)[];
     /**
      * number of participants in the thread
      */
@@ -210,8 +195,7 @@ export declare type MessageThreadProps = {
     /**
      * Optional callback to override render of the button for jumping to the new message.
      *
-     * @param newMessageButtonProps - button props of type JumpToNewMessageButtonProps
-     */
+     * @param newMessageButtonProps - button props of type JumpToNewMessageButtonProps 0  */
     onRenderJumpToNewMessageButton?: (newMessageButtonProps: JumpToNewMessageButtonProps) => JSX.Element;
     /**
      * Optional callback to override loading of previous messages.
@@ -229,17 +213,6 @@ export declare type MessageThreadProps = {
      * `messageRenderer` is not provided for `CustomMessage` and thus only available for `ChatMessage` and `SystemMessage`.
      */
     onRenderMessage?: (messageProps: MessageProps, messageRenderer?: MessageRenderer) => JSX.Element;
-    /**
-     * Optional callback to render uploaded files in the message component.
-     * @beta
-     */
-    onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;
-    /**
-     * Optional callback to retrieve the inline image in a message.
-     * @param attachment - FileMetadata object we want to render
-     * @beta
-     */
-    onFetchAttachments?: (attachments: FileMetadata[]) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *
@@ -281,28 +254,6 @@ export declare type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional function called when someone clicks on the file download icon.
-     * If file attachments are defined in the `message.metadata` property using the `fileSharingMetadata` key,
-     * this function will be called with the data inside `fileSharingMetadata` key.
-     */
-    fileDownloadHandler?: FileDownloadHandler;
-    /**
-     * Optional function to provide customized date format.
-     * @beta
-     */
-    onDisplayDateTimeString?: (messageDate: Date) => string;
-    /**
-     * Optional props needed to lookup a mention query and display mentions
-     * @beta
-     */
-    mentionOptions?: MentionOptions;
-    /**
-     * Optional callback called when an inline image is clicked.
-     * @beta
-     */
-    onInlineImageClicked?: (attachmentId: string, messageId: string) => Promise<void>;
 };
 /**
  * Props to render a single message.
@@ -311,7 +262,7 @@ export declare type MessageThreadProps = {
  *
  * @public
  */
-export declare type MessageProps = {
+export type MessageProps = {
     /**
      * Message to render. It can type `ChatMessage` or `SystemMessage`, `BlockedMessage` or `CustomMessage`.
      */
@@ -369,11 +320,10 @@ export declare type MessageProps = {
 /**
  * @internal
  */
-export declare type _MessagePropsInternal = MessageProps & {
-    /**
-     * Render the message status indicator.
-     */
-    messageStatusRenderer?: (status: MessageStatus) => JSX.Element | null;
+export type _ChatMessageProps = MessageProps & {
+    key: string;
+    statusToRender: MessageStatus | undefined;
+    showMessageStatus?: boolean;
 };
 /**
  * `MessageThread` allows you to easily create a component for rendering chat messages, handling scrolling behavior of new/old messages and customizing icons & controls inside the chat thread.

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

@@ -10,24 +10,22 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Icon, mergeStyles, PrimaryButton, Persona, PersonaSize } from '@fluentui/react';
-import { Chat, ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';
+import { Icon, mergeStyles, PrimaryButton } from '@fluentui/react';
+import { Chat } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
-import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, messageThreadWrapperContainerStyle, useChatStyles, buttonWithIconStyles, newMessageButtonStyle, noMessageStatusStyle, useChatMessageRenderStyles, gutterWithAvatar, gutterWithHiddenAvatar } from './styles/MessageThread.styles';
+import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, messageThreadWrapperContainerStyle, useChatStyles, buttonWithIconStyles, newMessageButtonStyle } from './styles/MessageThread.styles';
 import { delay } from './utils/delay';
 import { MessageStatusIndicator } from './MessageStatusIndicator';
 import { memoizeFnAll } from "../../../acs-ui-common/src";
-import { SystemMessage as SystemMessageComponent } from './SystemMessage';
-import { ChatMessageComponent } from './ChatMessage/ChatMessageComponent';
 import { useLocale } from '../localization/LocalizationProvider';
 import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
 import getParticipantsWhoHaveReadMessage from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
 import { FluentV9ThemeProvider } from './../theming/FluentV9ThemeProvider';
 import LiveAnnouncer from './Announcer/LiveAnnouncer';
-/* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
 import { createStyleFromV8Style } from './styles/v8StyleShim';
+import { ChatMessageComponentWrapper } from './ChatMessage/ChatMessageComponentWrapper';
+import { Announcer } from './Announcer';
 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;
 };
@@ -77,34 +75,39 @@ 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 }) });
 };
-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;
-    if (participantsStr !== '') {
-        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
-    }
-    return React.createElement(React.Fragment, null);
-};
-const DefaultSystemMessage = (props) => {
-    var _a;
-    const message = props.message;
-    switch (message.messageType) {
-        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 });
-                case 'participantAdded':
-                case 'participantRemoved':
-                    return React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub });
+const memoizeAllMessages = memoizeFnAll((message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage) => {
+    let key = message.messageId;
+    let statusToRender = undefined;
+    if (message.messageType === 'chat') {
+        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;
+                    }
             }
+        }
+        if (message.mine && message.status === 'failed') {
+            statusToRender = 'failed';
+        }
     }
-    return React.createElement(React.Fragment, null);
-};
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing) => {
-    var _a, _b;
-    const messageProps = {
+    return {
+        key: key !== null && key !== void 0 ? key : 'id_' + index,
+        statusToRender,
         message,
         strings,
         showDate: showMessageDate,
@@ -112,88 +115,9 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         onCancelEditMessage,
         onDeleteMessage,
         onSendMessage,
-        disableEditing
+        disableEditing,
+        showMessageStatus
     };
-    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) });
-        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: {
-                    // 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) : {},
-                    role: 'none'
-                }, body: {
-                    className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
-                    // make body not focusable to remove repetitions from narrators.
-                    // 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));
-        }
-        else {
-            const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
-            const personaOptions = {
-                hidePersonaDetails: true,
-                size: PersonaSize.size32,
-                text: message.senderDisplayName,
-                showOverflowTooltip: false
-            };
-            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) : {},
-                    // 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));
-        }
-        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 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);
-            }
-    }
 });
 const getLastChatMessageIdWithStatus = (messages, status) => {
     for (let i = messages.length - 1; i >= 0; i--) {
@@ -229,17 +153,7 @@ export const MessageThread = (props) => {
  */
 export const MessageThreadWrapper = (props) => {
     var _a;
-    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, 
-    /* @conditional-compile-remove(date-time-customization) */
-    onDisplayDateTimeString, 
-    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    onFetchAttachments, 
-    /* @conditional-compile-remove(mention) */
-    mentionOptions, 
-    /* @conditional-compile-remove(image-gallery) */
-    onInlineImageClicked } = props;
-    const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
-    const [messages, setMessages] = useState([]);
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage } = props;
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
     // Otherwise chatScrollDivRef.current.clientHeight is wrong if we scroll to bottom before messages are initialized.
     const [chatMessagesInitialized, setChatMessagesInitialized] = useState(false);
@@ -254,23 +168,28 @@ export const MessageThreadWrapper = (props) => {
     const [lastSendingChatMessage, setLastSendingChatMessage] = useState(undefined);
     // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
     const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState(undefined);
-    /* @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((attachments, messageId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments) {
+    const localeStrings = useLocale().strings.messageThread;
+    const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
+    // id for the latest deleted message
+    const [latestDeletedMessageId, setLatestDeletedMessageId] = useState(undefined);
+    // this value is used to check if a message is deleted for the previous value of messages array
+    const previousMessagesRef = useRef([]);
+    // an aria label for Narrator to notify when a message is deleted
+    const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState(undefined);
+    const onDeleteMessageCallback = useCallback((messageId) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onDeleteMessage) {
             return;
         }
-        const attachmentDownloadResult = yield onFetchAttachments(attachments);
-        const listOfAttachments = inlineAttachments[messageId];
-        for (const result of attachmentDownloadResult) {
-            const { attachmentId, blobUrl } = result;
-            listOfAttachments[attachmentId] = blobUrl;
+        try {
+            yield onDeleteMessage(messageId);
+            // reset deleted message label in case if there was a value already (messages are deleted 1 after another)
+            setDeletedMessageAriaLabel(undefined);
+            setLatestDeletedMessageId(messageId);
         }
-        if (Object.keys(listOfAttachments).length > 0) {
-            setInlineAttachments(prev => (Object.assign(Object.assign({}, prev), { [messageId]: listOfAttachments })));
+        catch (e) {
+            console.log('onDeleteMessage failed: messageId', messageId, 'error', e);
         }
-    }), [inlineAttachments, onFetchAttachments]);
+    }), [onDeleteMessage]);
     const isAllChatMessagesLoadedRef = useRef(false);
     // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
     // onLoadPreviousChatMessages is updated when a new adapter is set
@@ -279,19 +198,40 @@ export const MessageThreadWrapper = (props) => {
             isAllChatMessagesLoadedRef.current = false;
         }
     }, [onLoadPreviousChatMessages]);
-    /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    useEffect(() => {
-        initializeFileTypeIcons();
-    }, []);
     const previousTopRef = useRef(-1);
     const previousHeightRef = useRef(-1);
     const messageIdSeenByMeRef = useRef('');
     const chatScrollDivRef = useRef(null);
     const isLoadingChatMessagesRef = useRef(false);
+    const messages = useMemo(() => {
+        return newMessages;
+    }, [newMessages]);
+    useEffect(() => {
+        if (latestDeletedMessageId === undefined) {
+            setDeletedMessageAriaLabel(undefined);
+        }
+        else {
+            if (!previousMessagesRef.current.find(message => message.messageId === latestDeletedMessageId)) {
+                // the message is deleted in previousMessagesRef
+                // no need to update deletedMessageAriaLabel
+                setDeletedMessageAriaLabel(undefined);
+            }
+            else if (!messages.find(message => message.messageId === latestDeletedMessageId)) {
+                // the message is deleted in messages array but still exists in previousMessagesRef
+                // update deletedMessageAriaLabel
+                setDeletedMessageAriaLabel(strings.messageDeletedAnnouncementAriaLabel);
+            }
+            else {
+                // the message exists in both arrays
+                // no need to update deletedMessageAriaLabel
+                setDeletedMessageAriaLabel(undefined);
+            }
+        }
+        previousMessagesRef.current = messages;
+    }, [latestDeletedMessageId, messages, strings.messageDeletedAnnouncementAriaLabel]);
     const messagesRef = useRef(messages);
     const setMessagesRef = (messagesWithAttachedValue) => {
         messagesRef.current = messagesWithAttachedValue;
-        setMessages(messagesWithAttachedValue);
     };
     const isAtBottomOfScrollRef = useRef(isAtBottomOfScroll);
     const setIsAtBottomOfScrollRef = (isAtBottomOfScrollValue) => {
@@ -462,33 +402,7 @@ export const MessageThreadWrapper = (props) => {
             setMessageReadBy(getParticipantsWhoHaveReadMessage(message, readReceiptsBySenderIdRef.current));
         }
     }, []);
-    const localeStrings = useLocale().strings.messageThread;
-    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) => {
-        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,
-        onDisplayDateTimeString,
-        onFetchInlineAttachment,
-        onInlineImageClicked,
-        inlineAttachments,
-        mentionOptions]);
-    const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
+    const defaultStatusRenderer = useCallback((message, participantCount, readCount, status) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
                 setReadCountForHoveredIndicator(getParticipantsWhoHaveReadMessage(message, readReceiptsBySenderIdRef.current).length);
@@ -502,64 +416,31 @@ export const MessageThreadWrapper = (props) => {
             remoteParticipantsCount: participantCount ? participantCount - 1 : 0 });
     }, []);
     const theme = useTheme();
-    const chatMessageRenderStyles = useChatMessageRenderStyles();
-    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.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;
-                            }
-                    }
-                }
-                if (message.mine && message.status === 'failed') {
-                    statusToRender = 'failed';
-                }
-            }
-            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);
+    const messagesToDisplay = useMemo(() => {
+        return memoizeAllMessages(memoizedMessageFn => {
+            return messages.map((message, index) => {
+                return memoizedMessageFn(message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessageCallback, onSendMessage, props.disableEditing, lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage);
+            });
         });
-    }), [messages, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage]);
+    }, [lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage, messages, onCancelEditMessage, onDeleteMessageCallback, onSendMessage, onUpdateMessage, props.disableEditing, showMessageDate, showMessageStatus, strings]);
     const classes = useChatStyles();
-    const chatBody = useMemo(() => {
-        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)));
-    }, [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);
-};
-const onRenderFileDownloadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.onRenderFileDownloads;
-    return undefined;
+        React.createElement(LiveAnnouncer, null,
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(Announcer, { announcementString: deletedMessageAriaLabel, ariaLive: 'assertive' }),
+                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.map((message) => {
+                    return React.createElement(MemoChatMessageComponentWrapper, Object.assign({}, message, { userId: userId, key: message.key, styles: styles, shouldOverlapAvatarAndMessage: isNarrow, strings: strings, onRenderAvatar: onRenderAvatar, onRenderMessage: onRenderMessage, onRenderMessageStatus: onRenderMessageStatus, defaultStatusRenderer: defaultStatusRenderer, onActionButtonClick: onActionButtonClickMemo, readCount: readCountForHoveredIndicator, participantCount: participantCount }));
+                })))));
 };
+const MemoChatMessageComponentWrapper = React.memo((obj) => {
+    return React.createElement(ChatMessageComponentWrapper, Object.assign({}, obj));
+});
 //# sourceMappingURL=MessageThread.js.map