@azure/communication-react 1.8.0-alpha-202309160012 → 1.8.0

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

@@ -1,11 +1,6 @@
 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 { FileDownloadHandler } from './FileDownloadCards';
-import { FileMetadata } from './FileDownloadCards';
-import { AttachmentDownloadResult } from './FileDownloadCards';
-import { MentionOptions } from './MentionPopover';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -31,7 +26,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;
 }
@@ -93,14 +87,6 @@ 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;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -123,9 +109,7 @@ export declare type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export declare type UpdateMessageCallback = (messageId: string, content: string, metadata?: Record<string, string>, options?: {
-    attachedFilesMetadata?: FileMetadata[];
-}) => Promise<void>;
+export declare type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -144,7 +128,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
      */
@@ -226,17 +210,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?: (attachment: FileMetadata) => Promise<AttachmentDownloadResult[]>;
     /**
      * Optional callback to edit a message.
      *
@@ -278,28 +251,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.

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

@@ -12,8 +12,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Chat, Flex, mergeStyles as mergeNorthstarThemes, Ref } from "../../../northstar-wrapper/src";
 import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, buttonWithIconStyles, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle, defaultChatItemMessageContainer, defaultMyChatMessageContainer, defaultChatMessageContainer, gutterWithAvatar, gutterWithHiddenAvatar, FailedMyChatMessageContainer } from './styles/MessageThread.styles';
-/* @conditional-compile-remove(data-loss-prevention) */
-import { defaultBlockedMessageStyleContainer } from './styles/MessageThread.styles';
 import { Icon, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack } from '@fluentui/react';
 import { delay } from './utils/delay';
 import { MessageStatusIndicator } from './MessageStatusIndicator';
@@ -25,16 +23,8 @@ import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
 import getParticipantsWhoHaveReadMessage from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
 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';
 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.
@@ -61,8 +51,7 @@ 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
@@ -77,24 +66,19 @@ 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);
 };
@@ -105,16 +89,16 @@ 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);
 };
 const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d;
     const messageProps = {
         message,
         strings,
@@ -127,69 +111,59 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
     };
     const chatMessageItemProps = (message, messageProps) => {
         var _a, _b, _c;
-        const chatMessageComponent = onRenderMessage === undefined
-            ? defaultChatMessageRenderer(messageProps)
-            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+        const chatMessageComponent = onRenderMessage === undefined ? defaultChatMessageRenderer(messageProps) : onRenderMessage(messageProps, defaultChatMessageRenderer);
         const personaOptions = {
             hidePersonaDetails: true,
             size: PersonaSize.size32,
             text: message.senderDisplayName,
             showOverflowTooltip: false
         };
-        const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) ||
-            defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
+        const chatItemMessageStyle = (message.mine ? styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer : styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) || defaultChatItemMessageContainer(shouldOverlapAvatarAndMessage);
         const chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
         return {
             gutter: {
                 styles: chatGutterStyles,
-                content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_a = message.senderId) !== null && _a !== void 0 ? _a : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions)))
+                content: message.mine ? '' : onRenderAvatar ? onRenderAvatar((_a = message.senderId) !== null && _a !== void 0 ? _a : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))
             },
             contentPosition: message.mine ? 'end' : 'start',
             message: {
                 styles: chatItemMessageStyle,
-                content: (React.createElement(Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
+                content: React.createElement(Flex, { hAlign: message.mine ? 'end' : undefined, vAlign: "end" },
                     chatMessageComponent,
-                    React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_b = message.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = message.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))))
+                    React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_b = message.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = message.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? onRenderMessageStatus ? onRenderMessageStatus({
+                        status: statusToRender
+                    }) : defaultStatusRenderer(message, statusToRender, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0) : React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))
             },
             attached: message.attached,
             key: _messageKey
         };
     };
-    /* @conditional-compile-remove(data-loss-prevention) */
-    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stablize)
-    if (message.messageType === 'blocked') {
-        const myChatMessageStyle = message.status === 'failed'
-            ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
-            : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultBlockedMessageStyleContainer(theme);
-        const blockedMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer) !== null && _d !== void 0 ? _d : defaultBlockedMessageStyleContainer(theme);
-        messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return chatMessageItemProps(message, messageProps);
-    }
     switch (message.messageType) {
-        case 'chat': {
-            const myChatMessageStyle = message.status === 'failed'
-                ? (_f = (_e = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _e !== void 0 ? _e : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _f !== void 0 ? _f : FailedMyChatMessageContainer
-                : (_g = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _g !== void 0 ? _g : defaultMyChatMessageContainer;
-            const chatMessageStyle = (_h = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _h !== void 0 ? _h : defaultChatMessageContainer(theme);
-            messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            return chatMessageItemProps(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 {
-                children: systemMessageComponent,
-                key: _messageKey
-            };
-        }
-        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 {
-                children: customMessageComponent,
-                key: _messageKey
-            };
-        }
+        case 'chat':
+            {
+                const myChatMessageStyle = message.status === 'failed' ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
+                const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer(theme);
+                messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+                return chatMessageItemProps(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 {
+                    children: systemMessageComponent,
+                    key: _messageKey
+                };
+            }
+        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 {
+                    children: customMessageComponent,
+                    key: _messageKey
+                };
+            }
     }
 });
 const getLastChatMessageIdWithStatus = (messages, status) => {
@@ -214,15 +188,7 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  */
 export const MessageThread = (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 { 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;
     const onRenderFileDownloads = onRenderFileDownloadsTrampoline(props);
     const [messages, setMessages] = useState([]);
     // We need this state to wait for one tick and scroll to bottom after messages have been initialized.
@@ -239,19 +205,6 @@ export const MessageThread = (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((attachment) => __awaiter(void 0, void 0, void 0, function* () {
-        if (!onFetchAttachments || attachment.attachmentType !== 'inlineImage' || attachment.id in inlineAttachments) {
-            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 })));
-        }
-    }), [inlineAttachments, onFetchAttachments]);
     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
@@ -260,10 +213,6 @@ export const MessageThread = (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('');
@@ -292,14 +241,10 @@ export const MessageThread = (props) => {
     };
     // 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) {
@@ -307,10 +252,7 @@ export const MessageThread = (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;
             }
@@ -331,8 +273,7 @@ export const MessageThread = (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) {
@@ -348,9 +289,7 @@ export const MessageThread = (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);
                     }
@@ -377,8 +316,7 @@ export const MessageThread = (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(() => {
@@ -437,12 +375,10 @@ export const MessageThread = (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
@@ -460,44 +396,11 @@ export const MessageThread = (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, inlineAcceptRejectEditButtons: !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 })));
+        if (messageProps.message.messageType === 'chat') {
+            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { onRenderFileDownloads: onRenderFileDownloads, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, inlineAcceptRejectEditButtons: !isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo }));
         }
         return React.createElement(React.Fragment, null);
-    }, [
-        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,
-        /* @conditional-compile-remove(mention) */
-        mentionOptions
-    ]);
+    }, [onRenderFileDownloads, props.userId, participantCount, isNarrow, onRenderAvatar, showMessageStatus, onActionButtonClickMemo]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
@@ -507,34 +410,36 @@ export const MessageThread = (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 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') {
                 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') {
@@ -544,48 +449,23 @@ export const MessageThread = (props) => {
             return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, 
             // 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' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, props.disableEditing);
         });
-    }), [
-        messages,
-        showMessageDate,
-        showMessageStatus,
-        onRenderAvatar,
-        isNarrow,
-        styles,
-        onRenderMessageStatus,
-        defaultStatusRenderer,
-        defaultChatMessageRenderer,
-        strings,
-        theme,
-        participantCount,
-        readCountForHoveredIndicator,
-        onRenderMessage,
-        onUpdateMessage,
-        onCancelEditMessage,
-        onDeleteMessage,
-        onSendMessage,
-        lastSeenChatMessage,
-        lastSendingChatMessage,
-        lastDeliveredChatMessage,
-        props.disableEditing
-    ]);
+    }), [messages, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage, props.disableEditing]);
     const chatBody = useMemo(() => {
         var _a;
-        return (React.createElement(LiveAnnouncer, null,
-            React.createElement(Chat, { styles: mergeNorthstarThemes(chatStyle, linkStyles(theme), (_a = styles === null || styles === void 0 ? void 0 : styles.chatContainer) !== null && _a !== void 0 ? _a : {}), items: messagesToDisplay })));
+        return React.createElement(LiveAnnouncer, null,
+            React.createElement(Chat, { styles: mergeNorthstarThemes(chatStyle, linkStyles(theme), (_a = styles === null || styles === void 0 ? void 0 : styles.chatContainer) !== null && _a !== void 0 ? _a : {}), items: messagesToDisplay }));
     }, [theme, styles === null || styles === void 0 ? void 0 : styles.chatContainer, messagesToDisplay]);
-    return (React.createElement(Ref, { innerRef: chatThreadRef },
+    return React.createElement(Ref, { innerRef: chatThreadRef },
         React.createElement(Stack, { className: mergeStyles(messageThreadContainerStyle, styles === null || styles === void 0 ? void 0 : styles.root), grow: true },
-            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 })))),
-            React.createElement(Ref, { innerRef: chatScrollDivRef }, chatBody))));
+            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 })),
+            React.createElement(Ref, { innerRef: chatScrollDivRef }, chatBody)));
 };
 const onRenderFileDownloadsTrampoline = (props) => {
-    /* @conditional-compile-remove(file-sharing) */
-    return props.onRenderFileDownloads;
     return undefined;
 };
 const linkStyles = (theme) => {