@azure/communication-react 1.4.0 → 1.4.1-beta.1

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

@@ -1,3 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -7,8 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Chat, Flex, Ref, mergeStyles as mergeNorthstarThemes } from '@fluentui/react-northstar';
 import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, buttonWithIconStyles, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle, defaultChatItemMessageContainer, defaultMyChatMessageContainer, defaultChatMessageContainer, gutterWithAvatar, gutterWithHiddenAvatar, FailedMyChatMessageContainer } from './styles/MessageThread.styles';
@@ -24,7 +24,13 @@ import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
 import { getParticipantsWhoHaveReadMessage } from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
 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.
@@ -51,7 +57,8 @@ const isThereNewMessageNotFromCurrentUser = (userId, latestMessageFromPreviousMe
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId !== userId;
     }
-    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId !== userId;
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId !== userId);
 };
 /**
  * Returns true if the current user sent the latest message and false otherwise. It will ignore messages that have no
@@ -66,19 +73,24 @@ const didUserSendTheLatestMessage = (userId, latestMessageFromPreviousMessages,
     if (latestMessageFromPreviousMessages === undefined) {
         return latestMessageFromNewMessages.senderId === userId;
     }
-    return !isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) && latestMessageFromNewMessages.senderId === userId;
+    return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+        latestMessageFromNewMessages.senderId === userId);
 };
 const DefaultJumpToNewMessageButton = (props) => {
     const { text, onClick } = props;
-    return React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) });
+    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, styles: buttonWithIconStyles, text: text, onClick: onClick, onRenderIcon: () => React.createElement(Icon, { iconName: "Down", className: DownIconStyle }) }));
 };
-const generateParticipantsStr = (participants, defaultName) => participants.map(participant => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`).join(', ');
+const generateParticipantsStr = (participants, defaultName) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? defaultName : participant.displayName}`)
+    .join(', ');
 const ParticipantSystemMessageComponent = ({ message, style, defaultName }) => {
     const { strings } = useLocale();
     const participantsStr = generateParticipantsStr(message.participants, defaultName);
-    const messageSuffix = message.systemMessageType === 'participantAdded' ? strings.messageThread.participantJoined : strings.messageThread.participantLeft;
+    const messageSuffix = message.systemMessageType === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
     if (participantsStr !== '') {
-        return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style });
+        return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
     }
     return React.createElement(React.Fragment, null);
 };
@@ -89,10 +101,10 @@ const DefaultSystemMessage = (props) => {
         case 'system':
             switch (message.systemMessageType) {
                 case 'content':
-                    return React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle });
+                    return (React.createElement(SystemMessageComponent, { iconName: (message.iconName ? message.iconName : ''), content: (_a = message.content) !== null && _a !== void 0 ? _a : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
                 case 'participantAdded':
                 case 'participantRemoved':
-                    return React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub });
+                    return (React.createElement(ParticipantSystemMessageComponent, { message: message, style: props.messageContainerStyle, defaultName: props.strings.noDisplayNameSub }));
             }
     }
     return React.createElement(React.Fragment, null);
@@ -108,56 +120,56 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         onSendMessage
     };
     switch (message.messageType) {
-        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;
-                messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-                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 chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
-                return {
-                    gutter: {
-                        styles: chatGutterStyles,
-                        content: message.mine ? '' : onRenderAvatar ? onRenderAvatar((_e = message.senderId) !== null && _e !== void 0 ? _e : '', 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" },
-                            chatMessageComponent,
-                            React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_f = message.mine) !== null && _f !== void 0 ? _f : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_g = message.mine) !== null && _g !== void 0 ? _g : 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
-                };
-            }
-        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;
+            messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
+            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 chatGutterStyles = message.attached === 'top' || message.attached === false ? gutterWithAvatar : gutterWithHiddenAvatar;
+            return {
+                gutter: {
+                    styles: chatGutterStyles,
+                    content: message.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_e = message.senderId) !== null && _e !== void 0 ? _e : '', 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" },
+                        chatMessageComponent,
+                        React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_f = message.mine) !== null && _f !== void 0 ? _f : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_g = message.mine) !== null && _g !== void 0 ? _g : 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
+            };
+        }
+        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) => {
@@ -182,19 +194,24 @@ 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, onDeleteMessage, onSendMessage } = props;
+    const { messages: newMessages, userId, participantCount, readReceiptsBySenderId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 5, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, 
+    /* @conditional-compile-remove(date-time-customization) */
+    onDisplayDateTimeString } = 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.
+    const [messages, setMessages] = useState([]);
+    // 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);
     const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
-    const [forceUpdate, setForceUpdate] = useState(0); // Used to decide if should auto scroll to bottom or show "new message" button
+    const [forceUpdate, setForceUpdate] = useState(0);
+    // Used to decide if should auto scroll to bottom or show "new message" button
     const [latestPreviousChatMessage, setLatestPreviousChatMessage] = useState(undefined);
     const [latestCurrentChatMessage, setLatestCurrentChatMessage] = useState(undefined);
     const [existsNewChatMessage, setExistsNewChatMessage] = useState(false);
     const [lastSeenChatMessage, setLastSeenChatMessage] = useState(undefined);
     const [lastDeliveredChatMessage, setLastDeliveredChatMessage] = useState(undefined);
-    const [lastSendingChatMessage, setLastSendingChatMessage] = useState(undefined); // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
+    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);
     const isAllChatMessagesLoadedRef = useRef(false);
     const previousTopRef = useRef(-1);
@@ -202,7 +219,8 @@ export const MessageThread = (props) => {
     const messageIdSeenByMeRef = useRef('');
     const chatScrollDivRef = useRef(null);
     const chatThreadRef = useRef(null);
-    const isLoadingChatMessagesRef = useRef(false); // When the chat thread is narrow, we perform space optimizations such as overlapping
+    const isLoadingChatMessagesRef = useRef(false);
+    // When the chat thread is narrow, we perform space optimizations such as overlapping
     // the avatar on top of the chat message and moving the chat accept/reject edit buttons
     // to a new line
     const chatThreadWidth = _useContainerWidth(chatThreadRef);
@@ -221,12 +239,17 @@ export const MessageThread = (props) => {
     const setChatMessagesInitializedRef = (chatMessagesInitialized) => {
         chatMessagesInitializedRef.current = chatMessagesInitialized;
         setChatMessagesInitialized(chatMessagesInitialized);
-    }; // we try to only send those message status if user is scrolled to the bottom.
+    };
+    // 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) {
@@ -234,7 +257,10 @@ 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;
             }
@@ -255,7 +281,8 @@ 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) {
@@ -263,12 +290,16 @@ export const MessageThread = (props) => {
             }
         }
         setIsAtBottomOfScrollRef(atBottom);
-    }, [scrollToBottom, sendMessageStatusIfAtBottom]); // Infinite scrolling + threadInitialize function
+    }, [scrollToBottom, sendMessageStatusIfAtBottom]);
+    // Infinite scrolling + threadInitialize function
     const fetchNewMessageWhenAtTop = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (chatScrollDivRef.current && !isLoadingChatMessagesRef.current) {
+        if (!isLoadingChatMessagesRef.current) {
             if (onLoadPreviousChatMessages) {
-                isLoadingChatMessagesRef.current = true; // Fetch message until scrollTop reach the threshold for fetching new message
-                while (!isAllChatMessagesLoadedRef.current && chatScrollDivRef.current.scrollTop <= 500) {
+                isLoadingChatMessagesRef.current = true;
+                // Fetch message until scrollTop reach the threshold for fetching new message
+                while (!isAllChatMessagesLoadedRef.current &&
+                    chatScrollDivRef.current &&
+                    chatScrollDivRef.current.scrollTop <= 500) {
                     isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
                     yield delay(200);
                 }
@@ -276,12 +307,7 @@ export const MessageThread = (props) => {
             }
         }
     }), [numberOfChatMessagesToReload, onLoadPreviousChatMessages]);
-    const handleInfiniteScroll = useCallback(() => {
-        if (!chatScrollDivRef.current) {
-            return;
-        }
-        fetchNewMessageWhenAtTop();
-    }, [fetchNewMessageWhenAtTop]); // The below 2 of useEffects are design for fixing infinite scrolling problem
+    // The below 2 of useEffects are design for fixing infinite scrolling problem
     // Scrolling element will behave differently when scrollTop = 0(it sticks at the top)
     // we need to get previousTop before it prepend contents
     // Execute order [newMessage useEffect] => get previousTop => dom update => [messages useEffect]
@@ -296,8 +322,10 @@ export const MessageThread = (props) => {
         if (!chatScrollDivRef.current) {
             return;
         }
-        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.
+        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(() => {
         fetchNewMessageWhenAtTop();
     }, [fetchNewMessageWhenAtTop]);
@@ -316,12 +344,12 @@ export const MessageThread = (props) => {
     useEffect(() => {
         const chatScrollDiv = chatScrollDivRef.current;
         chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.addEventListener('scroll', handleScrollToTheBottom);
-        chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.addEventListener('scroll', handleInfiniteScroll);
+        chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.addEventListener('scroll', fetchNewMessageWhenAtTop);
         return () => {
             chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.removeEventListener('scroll', handleScrollToTheBottom);
-            chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.removeEventListener('scroll', handleInfiniteScroll);
+            chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.removeEventListener('scroll', fetchNewMessageWhenAtTop);
         };
-    }, [handleInfiniteScroll, handleScrollToTheBottom]);
+    }, [fetchNewMessageWhenAtTop, handleScrollToTheBottom]);
     /**
      * ClientHeight controls the number of messages to render. However ClientHeight will not be initialized after the
      * first render (not sure but I guess Fluent is updating it in hook which is after render maybe?) so we need to
@@ -332,7 +360,8 @@ export const MessageThread = (props) => {
         if (clientHeight === undefined) {
             setForceUpdate(forceUpdate + 1);
             return;
-        } // Only scroll to bottom if isAtBottomOfScrollRef is true
+        }
+        // Only scroll to bottom if isAtBottomOfScrollRef is true
         isAtBottomOfScrollRef.current && scrollToBottom();
     }, [clientHeight, forceUpdate, scrollToBottom, chatMessagesInitialized]);
     /**
@@ -353,12 +382,15 @@ 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
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [messages]);
     const participantCountRef = useRef(participantCount);
     const readReceiptsBySenderIdRef = useRef(readReceiptsBySenderId);
@@ -370,13 +402,30 @@ export const MessageThread = (props) => {
         }
     }, []);
     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 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') {
-            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(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 })));
         }
         return React.createElement(React.Fragment, null);
-    }, [onRenderFileDownloads, props.userId, participantCount, isNarrow, onRenderAvatar, showMessageStatus, onActionButtonClickMemo]);
+    }, [
+        onRenderFileDownloads,
+        /* @conditional-compile-remove(file-sharing) */
+        strings,
+        props.userId,
+        participantCount,
+        isNarrow,
+        onRenderAvatar,
+        showMessageStatus,
+        onActionButtonClickMemo,
+        /* @conditional-compile-remove(date-time-customization) */
+        onDisplayDateTimeString
+    ]);
     const defaultStatusRenderer = useCallback((message, status, participantCount, readCount) => {
         const onToggleToolTip = (isToggled) => {
             if (isToggled && readReceiptsBySenderIdRef.current) {
@@ -386,9 +435,11 @@ export const MessageThread = (props) => {
                 setReadCountForHoveredIndicator(undefined);
             }
         };
-        return React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, remoteParticipantsCount: participantCount ? participantCount - 1 : 0 });
+        return (React.createElement(MessageStatusIndicator, { status: status, readCount: readCount, onToggleToolTip: onToggleToolTip, 
+            // -1 because participant count does not include myself
+            remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
-    const messagesToDisplay = useMemo(() => memoizeAllMessages(memoizedMessageFn => {
+    const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
             let key = message.messageId;
             let statusToRender = undefined;
@@ -398,47 +449,64 @@ export const MessageThread = (props) => {
                 }
                 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') {
                     statusToRender = 'failed';
                 }
             }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, // Temporary solution to make sure we re-render if attach attribute is changed.
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, 
+            // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
             message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage);
         });
-    }), [messages, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, lastSeenChatMessage, lastSendingChatMessage, lastDeliveredChatMessage]);
+    }), [
+        messages,
+        showMessageDate,
+        showMessageStatus,
+        onRenderAvatar,
+        isNarrow,
+        styles,
+        onRenderMessageStatus,
+        defaultStatusRenderer,
+        defaultChatMessageRenderer,
+        strings,
+        participantCount,
+        readCountForHoveredIndicator,
+        onRenderMessage,
+        onUpdateMessage,
+        onDeleteMessage,
+        onSendMessage,
+        lastSeenChatMessage,
+        lastSendingChatMessage,
+        lastDeliveredChatMessage
+    ]);
     const theme = useTheme();
     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) => {