@azure/communication-react 1.23.0-alpha-202501160016 → 1.23.0

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

@@ -1,15 +1,9 @@
 /// <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 { AttachmentMetadataInProgress } from "../../../acs-ui-common/src";
-import { MessageOptions } from "../../../acs-ui-common/src";
-import { AttachmentOptions } from '../types/Attachment';
-import { MentionOptions } from './MentionPopover';
 import { InlineImageOptions } from './ChatMessage/ChatMessageContent';
-import { RichTextEditorOptions, RichTextStrings } from './RichTextEditor/RichTextSendBox';
 /**
  * Fluent styles for {@link MessageThread}.
  *
@@ -35,7 +29,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;
 }
@@ -99,20 +92,10 @@ export interface MessageThreadStrings {
     actionMenuMoreOptions?: string;
     /** Aria label to announce when a message is deleted */
     messageDeletedAnnouncementAriaLabel: string;
-    /** String for download attachment button in attachment card */
-    downloadAttachment: string;
     /** String for open attachment button in attachment card */
     openAttachment: string;
-    /** String for policy violation message removal */
-    blockedWarningText: string;
-    /** String for policy violation message removal details link */
-    blockedWarningLinkText: string;
     /** String for aria text in attachment card group*/
     attachmentCardGroupMessage: string;
-    /**
-     * Error message indicating that one or more image uploads are not complete.
-     */
-    imageUploadsPendingError: string;
 }
 /**
  * Arguments for {@link MessageThreadProps.onRenderJumpToNewMessageButton}.
@@ -135,7 +118,7 @@ export type MessageRenderer = (props: MessageProps) => JSX.Element;
  * @public
  * Callback function run when a message is updated.
  */
-export type UpdateMessageCallback = (messageId: string, content: string, options?: MessageOptions) => Promise<void>;
+export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 /**
  * @public
  * Callback function run when a message edit is cancelled.
@@ -154,7 +137,7 @@ export 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
      */
@@ -235,11 +218,6 @@ export 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 attachments in the message component.
-     * @beta
-     */
-    onRenderAttachmentDownloads?: (message: ChatMessage) => JSX.Element;
     /**
      * Optional callback to edit a message.
      *
@@ -268,7 +246,7 @@ export type MessageThreadProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
     /**
     /**
      * Disable editing messages.
@@ -282,66 +260,12 @@ export type MessageThreadProps = {
      * Optional strings to override in component
      */
     strings?: Partial<MessageThreadStrings>;
-    /**
-     * @beta
-     * Optional attachment options, which defines behvaiour for uploading and downloading attachments.
-     * As this moment, the uploadOptions would be ignored and this option is intended for download only.
-     */
-    attachmentOptions?: AttachmentOptions;
-    /**
-     * 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
      */
     inlineImageOptions?: InlineImageOptions;
-    /**
-     * Options to enable rich text editor for the edit box.
-     * @beta
-     */
-    richTextEditorOptions?: RichTextEditBoxOptions;
 };
-/**
- * Options for the rich text editor edit box configuration.
- *
- * @beta
- */
-export interface RichTextEditBoxOptions extends RichTextEditorOptions {
-    /**
-     * Optional callback to handle an inline image that's inserted in the rich text editor.
-     * When not provided, pasting images into rich text editor will be disabled.
-     * @param imageAttributes - attributes of the image such as id, src, style, etc.
-     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name']
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onInsertInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional callback invoked after inline image is removed from the UI.
-     * @param imageAttributes - attributes of the image such as id, src, style, etc.
-     *        It also contains the image file name which can be accessed through imageAttributes['data-image-file-name'].
-     *        Note that if the src attribute is a local blob url, it has been revoked at this point.
-     * @param messageId - the id of the message that the inlineImage belongs to.
-     */
-    onRemoveInlineImage?: (imageAttributes: Record<string, string>, messageId: string) => void;
-    /**
-     * Optional Record of type {@link AttachmentMetadataInProgress}
-     * to render the errorBar for inline images inserted in the MessageThread's edit boxes when:
-     *   - there is an error provided in the messagesInlineImagesWithProgress
-     *   - progress is less than 1 when the send button is clicked
-     *   - content html string is longer than the max allowed length.
-     *     (Note that the id and the url prop of the messagesInlineImagesWithProgress will be used as the id and src attribute of the content html
-     *     when calculating the content length, only for the purpose of displaying the content length overflow error.)
-     */
-    messagesInlineImagesWithProgress?: Record<string, AttachmentMetadataInProgress[]>;
-}
 /**
  * Props to render a single message.
  *
@@ -357,7 +281,7 @@ export type MessageProps = {
     /**
      * Strings from parent MessageThread component
      */
-    strings: MessageThreadStrings & /* @conditional-compile-remove(rich-text-editor) */ Partial<RichTextStrings>;
+    strings: MessageThreadStrings;
     /**
      * Custom CSS styles for chat message container.
      */
@@ -403,7 +327,7 @@ export type MessageProps = {
      * @param options - message options to be included in the message
      *
      */
-    onSendMessage?: (content: string, options?: MessageOptions) => Promise<void>;
+    onSendMessage?: (content: string) => Promise<void>;
 };
 /**
  * @internal

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

@@ -26,16 +26,8 @@ import { createStyleFromV8Style } from './styles/v8StyleShim';
 import { ChatMessageComponentWrapper } from './ChatMessage/ChatMessageComponentWrapper';
 import { MessageStatusIndicatorInternal } from './MessageStatusIndicatorInternal';
 import { Announcer } from './Announcer';
-/* @conditional-compile-remove(rich-text-editor) */
-import { loadChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsEditBoxPicker';
 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 &&
-        JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn));
+    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 && JSON.stringify(first.editedOn) === JSON.stringify(second.editedOn);
 };
 /**
  * Get the latest message from the message array.
@@ -62,8 +54,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
@@ -78,35 +69,36 @@ 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 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' ||
-        /* @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') {
@@ -160,8 +152,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);
 };
@@ -170,17 +162,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(mention) */
-    mentionOptions, inlineImageOptions, 
-    /* @conditional-compile-remove(file-sharing-acs) */
-    attachmentOptions, 
-    /* @conditional-compile-remove(file-sharing-acs) */
-    onRenderAttachmentDownloads, 
-    /* @conditional-compile-remove(rich-text-editor) */
-    richTextEditorOptions } = 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, inlineImageOptions } = 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);
@@ -206,15 +188,6 @@ export const MessageThreadWrapper = (props) => {
     const previousMessagesRef = useRef([]);
     // an aria label for Narrator to notify when a message is deleted
     const [deletedMessageAriaLabel, setDeletedMessageAriaLabel] = useState(undefined);
-    /* @conditional-compile-remove(rich-text-editor) */
-    useEffect(() => {
-        // if rich text editor is enabled, the rich text editor component should be loaded early for good UX
-        if (richTextEditorOptions !== undefined) {
-            // this line is needed to load the Rooster JS dependencies early in the lifecycle
-            // when the rich text editor is enabled
-            loadChatMessageComponentAsRichTextEditBox();
-        }
-    }, [richTextEditorOptions]);
     const onDeleteMessageCallback = useCallback((messageId) => __awaiter(void 0, void 0, void 0, function* () {
         if (!onDeleteMessage) {
             return;
@@ -250,12 +223,12 @@ export const MessageThreadWrapper = (props) => {
             setDeletedMessageAriaLabel(undefined);
         }
         else {
-            if (!previousMessagesRef.current.find((message) => message.messageId === latestDeletedMessageId)) {
+            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)) {
+            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);
@@ -297,14 +270,10 @@ 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) {
@@ -312,10 +281,7 @@ 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;
             }
@@ -336,8 +302,7 @@ 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) {
@@ -353,9 +318,7 @@ 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);
                     }
@@ -382,8 +345,7 @@ 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(() => {
@@ -453,12 +415,10 @@ 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
@@ -486,35 +446,28 @@ export const MessageThreadWrapper = (props) => {
                 setReadCountForHoveredIndicator(undefined);
             }
         };
-        return (React.createElement(MessageStatusIndicatorInternal, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
+        return React.createElement(MessageStatusIndicatorInternal, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
             // -1 because participant count does not include myself
-            remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldAnnounce: shouldAnnounce }));
+            remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldAnnounce: shouldAnnounce });
     }, []);
     const theme = useTheme();
     const messagesToDisplay = useMemo(() => {
-        return memoizeAllMessages((memoizedMessageFn) => {
+        return memoizeAllMessages(memoizedMessageFn => {
             return messages.map((message, index) => {
                 return memoizedMessageFn(message, showMessageDate, showMessageStatus, strings, index, onUpdateMessage, onCancelEditMessage, onDeleteMessageCallback, onSendMessage, props.disableEditing, lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage);
             });
         });
-    }, [
-        lastDeliveredChatMessage,
-        lastSeenChatMessage,
-        lastSendingChatMessage,
-        messages,
-        onCancelEditMessage,
-        onDeleteMessageCallback,
-        onSendMessage,
-        onUpdateMessage,
-        props.disableEditing,
-        showMessageDate,
-        showMessageStatus,
-        strings
-    ]);
+    }, [lastDeliveredChatMessage, lastSeenChatMessage, lastSendingChatMessage, messages, onCancelEditMessage, onDeleteMessageCallback, onSendMessage, onUpdateMessage, props.disableEditing, showMessageDate, showMessageStatus, strings]);
     const classes = useChatStyles();
-    const chatArrowNavigationAttributes = useArrowNavigationGroup({ axis: 'vertical', memorizeCurrent: false });
-    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 })))),
+    const chatArrowNavigationAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        memorizeCurrent: false
+    });
+    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 })),
         React.createElement(LiveAnnouncer, null,
             React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
                 React.createElement(Chat
@@ -522,30 +475,10 @@ export const MessageThreadWrapper = (props) => {
                 , Object.assign({ 
                     // 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)) }, chatArrowNavigationAttributes),
-                    latestDeletedMessageId && (React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' })),
+                    latestDeletedMessageId && React.createElement(Announcer, { key: latestDeletedMessageId, announcementString: deletedMessageAriaLabel, ariaLive: 'polite' }),
                     messagesToDisplay.map((message) => {
-                        var _a;
-                        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, 
-                            /* @conditional-compile-remove(file-sharing-acs) */
-                            actionsForAttachment: (_a = attachmentOptions === null || attachmentOptions === void 0 ? void 0 : attachmentOptions.downloadOptions) === null || _a === void 0 ? void 0 : _a.actionsForAttachment, inlineImageOptions: inlineImageOptions, 
-                            /* @conditional-compile-remove(date-time-customization) */
-                            onDisplayDateTimeString: onDisplayDateTimeString, 
-                            /* @conditional-compile-remove(mention) */
-                            mentionOptions: mentionOptions, 
-                            /* @conditional-compile-remove(file-sharing-acs) */
-                            onRenderAttachmentDownloads: onRenderAttachmentDownloads, 
-                            /* @conditional-compile-remove(rich-text-editor) */
-                            isRichTextEditorEnabled: !!richTextEditorOptions, 
-                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            onPaste: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onPaste, 
-                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            onInsertInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onInsertInlineImage, 
-                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            inlineImagesWithProgress: (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress) &&
-                                (richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.messagesInlineImagesWithProgress[message.message.messageId]), 
-                            /* @conditional-compile-remove(rich-text-editor-image-upload) */
-                            onRemoveInlineImage: richTextEditorOptions === null || richTextEditorOptions === void 0 ? void 0 : richTextEditorOptions.onRemoveInlineImage })));
-                    }))))));
+                        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, inlineImageOptions: inlineImageOptions }));
+                    })))));
 };
 const MemoChatMessageComponentWrapper = React.memo((obj) => {
     return React.createElement(ChatMessageComponentWrapper, Object.assign({}, obj));