@azure/communication-react 1.8.1-alpha-202309300012 → 1.8.1-alpha-202310040013

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

@@ -10,11 +10,10 @@ 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 { Icon, mergeStyles, PrimaryButton, Persona, PersonaSize } from '@fluentui/react';
+import { Chat, ChatMessage as FluentChatMessage, ChatMyMessage as FluentChatMyMessage } from '@fluentui-contrib/react-chat';
+import { mergeClasses } from '@fluentui/react-components';
+import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, messageThreadWrapperContainerStyle, useChatStyles, buttonWithIconStyles, newMessageButtonStyle, noMessageStatusStyle, useChatMessageRenderStyles, gutterWithAvatar, gutterWithHiddenAvatar } from './styles/MessageThread.styles';
 import { delay } from './utils/delay';
 import { MessageStatusIndicator } from './MessageStatusIndicator';
 import { memoizeFnAll } from "../../../acs-ui-common/src";
@@ -24,9 +23,11 @@ import { useLocale } from '../localization/LocalizationProvider';
 import { isNarrowWidth, _useContainerWidth } from './utils/responsive';
 import getParticipantsWhoHaveReadMessage from './utils/getParticipantsWhoHaveReadMessage';
 import { useTheme } from '../theming';
+import { FluentV9ThemeProvider } from './../theming/FluentV9ThemeProvider';
 import LiveAnnouncer from './Announcer/LiveAnnouncer';
 /* @conditional-compile-remove(file-sharing) */ /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
 import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
+import { createStyleFromV8Style } from './styles/v8StyleShim';
 const isMessageSame = (first, second) => {
     return (first.messageId === second.messageId &&
         first.content === second.content &&
@@ -113,8 +114,8 @@ const DefaultSystemMessage = (props) => {
     }
     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;
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onCancelEditMessage, onDeleteMessage, onSendMessage, disableEditing) => {
+    var _a, _b;
     const messageProps = {
         message,
         strings,
@@ -125,70 +126,88 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
         onSendMessage,
         disableEditing
     };
-    const chatMessageItemProps = (message, messageProps) => {
-        var _a, _b, _c;
-        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((_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" },
-                    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) })))))
-            },
-            attached: message.attached,
-            key: _messageKey
-        };
+    const chatMessage = (message, messageProps) => {
+        var _a;
+        const messageStatusRenderer = showMessageStatus && statusToRender
+            ? onRenderMessageStatus
+                ? (status) => onRenderMessageStatus({ status })
+                : (status) => defaultStatusRenderer(message, status, participantCount !== null && participantCount !== void 0 ? participantCount : 0, readCount !== null && readCount !== void 0 ? readCount : 0)
+            : () => React.createElement("div", { className: mergeStyles(noMessageStatusStyle) });
+        let chatMessageComponent;
+        const shouldShowAvatar = message.attached === 'top' || message.attached === false;
+        const attached = shouldShowAvatar ? 'top' : 'center';
+        if (message.mine === true) {
+            chatMessageComponent = (React.createElement(FluentChatMyMessage, { attached: attached, root: {
+                    // myChatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+                    className: mergeClasses(chatMessageRenderStyles.rootMyMessage, chatMessageRenderStyles.rootCommon, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)),
+                    style: (styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer) !== undefined
+                        ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.myChatItemMessageContainer)
+                        : {},
+                    role: 'none'
+                }, body: {
+                    className: mergeClasses(chatMessageRenderStyles.bodyCommon, chatMessageRenderStyles.bodyMyMessage),
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    tabIndex: -1,
+                    role: 'none'
+                }, statusIcon: React.createElement("div", { className: mergeStyles({ paddingLeft: '0.25rem' }, (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_a = message.mine) !== null && _a !== void 0 ? _a : false) : '') }, message.status ? messageStatusRenderer(message.status) : undefined) }, onRenderMessage === undefined
+                ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer }))
+                : onRenderMessage(messageProps, defaultChatMessageRenderer)));
+        }
+        else {
+            const chatAvatarStyle = shouldShowAvatar ? gutterWithAvatar : gutterWithHiddenAvatar;
+            const personaOptions = {
+                hidePersonaDetails: true,
+                size: PersonaSize.size32,
+                text: message.senderDisplayName,
+                showOverflowTooltip: false
+            };
+            chatMessageComponent = (React.createElement(FluentChatMessage, { attached: attached, root: { className: mergeClasses(chatMessageRenderStyles.rootMessage, chatMessageRenderStyles.rootCommon) }, body: {
+                    // chatItemMessageContainer used in className and style prop as style prop can't handle CSS selectors
+                    className: mergeClasses(chatMessageRenderStyles.bodyCommon, !shouldShowAvatar ? chatMessageRenderStyles.bodyWithoutAvatar : chatMessageRenderStyles.bodyWithAvatar, shouldOverlapAvatarAndMessage
+                        ? chatMessageRenderStyles.avatarOverlap
+                        : chatMessageRenderStyles.avatarNoOverlap, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)),
+                    style: (styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer) !== undefined
+                        ? createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatItemMessageContainer)
+                        : {},
+                    // make body not focusable to remove repetitions from narrators.
+                    // inner components are already focusable
+                    tabIndex: -1,
+                    role: 'none'
+                }, avatar: React.createElement("div", { className: mergeStyles(chatAvatarStyle) }, onRenderAvatar ? onRenderAvatar === null || onRenderAvatar === void 0 ? void 0 : onRenderAvatar(message.senderId, personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions))) }, onRenderMessage === undefined
+                ? defaultChatMessageRenderer(Object.assign(Object.assign({}, messageProps), { messageStatusRenderer }))
+                : onRenderMessage(messageProps, defaultChatMessageRenderer)));
+        }
+        return React.createElement("div", { key: _messageKey }, chatMessageComponent);
     };
     /* @conditional-compile-remove(data-loss-prevention) */
-    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stablize)
+    // Similar logic as switch statement case 'chat', if statement for conditional compile (merge logic to switch case when stabilize)
     if (message.messageType === 'blocked') {
         const myChatMessageStyle = message.status === 'failed'
-            ? (_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);
+            ? (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+            : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+        const blockedMessageStyle = styles === null || styles === void 0 ? void 0 : styles.blockedMessageContainer;
         messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : blockedMessageStyle;
-        return chatMessageItemProps(message, messageProps);
+        return chatMessage(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);
+                ? (_b = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _b !== void 0 ? _b : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer
+                : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer;
+            const chatMessageStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
             messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
-            return chatMessageItemProps(message, messageProps);
+            return chatMessage(message, messageProps);
         }
         case 'system': {
             messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
             const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessage, Object.assign({}, messageProps))) : (onRenderMessage(messageProps, (props) => React.createElement(DefaultSystemMessage, Object.assign({}, props))));
-            return {
-                children: systemMessageComponent,
-                key: _messageKey
-            };
+            return (React.createElement("div", { key: _messageKey, style: { paddingTop: '0.5rem' } }, systemMessageComponent));
         }
         default: {
             // We do not handle custom type message by default, users can handle custom type by using onRenderMessage function.
             const customMessageComponent = onRenderMessage === undefined ? React.createElement(React.Fragment, null) : onRenderMessage(messageProps);
-            return {
-                children: customMessageComponent,
-                key: _messageKey
-            };
+            return (React.createElement("div", { key: _messageKey, style: { paddingTop: '1rem', paddingBottom: '0.25rem' } }, customMessageComponent));
         }
     }
 });
@@ -208,11 +227,23 @@ const getLastChatMessageIdWithStatus = (messages, status) => {
  * Users will need to provide at least chat messages and userId to render the `MessageThread` component.
  * Users can also customize `MessageThread` by passing in their own Avatar, `MessageStatusIndicator` icon, `JumpToNewMessageButton`, `LoadPreviousMessagesButton` and the behavior of these controls.
  *
- * `MessageThread` internally uses the `Chat` & `Chat.Message` component from `@fluentui/react-northstar`. You can checkout the details about these [two components](https://fluentsite.z22.web.core.windows.net/0.53.0/components/chat/props).
+ * `MessageThread` internally uses the `Chat` component from `@fluentui-contrib/chat`. You can checkout the details about these components [here](https://microsoft.github.io/fluentui-contrib/react-chat/).
  *
  * @public
  */
 export const MessageThread = (props) => {
+    var _a;
+    const theme = useTheme();
+    const chatBody = useMemo(() => {
+        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);
+};
+/**
+ * @private
+ */
+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) */
@@ -268,13 +299,7 @@ export const MessageThread = (props) => {
     const previousHeightRef = useRef(-1);
     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
-    // the avatar on top of the chat message and moving the chat accept/reject edit buttons
-    // to a new line
-    const chatThreadWidth = _useContainerWidth(chatThreadRef);
-    const isNarrow = chatThreadWidth ? isNarrowWidth(chatThreadWidth) : false;
     const messagesRef = useRef(messages);
     const setMessagesRef = (messagesWithAttachedValue) => {
         messagesRef.current = messagesWithAttachedValue;
@@ -290,6 +315,18 @@ export const MessageThread = (props) => {
         chatMessagesInitializedRef.current = chatMessagesInitialized;
         setChatMessagesInitialized(chatMessagesInitialized);
     };
+    const chatThreadRef = useRef(null);
+    // 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);
+    const isNarrow = chatThreadWidth ? isNarrowWidth(chatThreadWidth) : false;
+    /**
+     * 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
+     * trigger a re-render until ClientHeight is initialized. This force re-render should only happen once.
+     */
+    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 ||
@@ -405,12 +442,6 @@ export const MessageThread = (props) => {
             chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.removeEventListener('scroll', fetchNewMessageWhenAtTop);
         };
     }, [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
-     * trigger a re-render until ClientHeight is initialized. This force re-render should only happen once.
-     */
-    const clientHeight = (_a = chatThreadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
     useEffect(() => {
         if (clientHeight === undefined) {
             setForceUpdate(forceUpdate + 1);
@@ -464,7 +495,7 @@ export const MessageThread = (props) => {
             /* @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, 
+                strings: strings, message: messageProps.message, userId: props.userId, remoteParticipantsCount: participantCount ? participantCount - 1 : 0, shouldOverlapAvatarAndMessage: isNarrow, onRenderAvatar: onRenderAvatar, showMessageStatus: showMessageStatus, messageStatus: messageProps.message.status, onActionButtonClick: onActionButtonClickMemo, 
                 /* @conditional-compile-remove(date-time-customization) */
                 onDisplayDateTimeString: onDisplayDateTimeString, 
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
@@ -512,6 +543,7 @@ export const MessageThread = (props) => {
             remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
     }, []);
     const theme = useTheme();
+    const chatMessageRenderStyles = useChatMessageRenderStyles();
     const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
         return messages.map((message, index) => {
             let key = message.messageId;
@@ -541,7 +573,7 @@ export const MessageThread = (props) => {
                     statusToRender = 'failed';
                 }
             }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, 
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, chatMessageRenderStyles, 
             // Temporary solution to make sure we re-render if attach attribute is changed.
             // The proper fix should be in selector.
             message.messageType === 'chat' ||
@@ -561,6 +593,7 @@ export const MessageThread = (props) => {
         defaultChatMessageRenderer,
         strings,
         theme,
+        chatMessageRenderStyles,
         participantCount,
         readCountForHoveredIndicator,
         onRenderMessage,
@@ -568,40 +601,28 @@ export const MessageThread = (props) => {
         onCancelEditMessage,
         onDeleteMessage,
         onSendMessage,
+        props.disableEditing,
         lastSeenChatMessage,
         lastSendingChatMessage,
-        lastDeliveredChatMessage,
-        props.disableEditing
+        lastDeliveredChatMessage
     ]);
+    const classes = useChatStyles();
     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 })));
-    }, [theme, styles === null || styles === void 0 ? void 0 : styles.chatContainer, messagesToDisplay]);
-    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))));
+            React.createElement(FluentV9ThemeProvider, { v8Theme: theme },
+                React.createElement(Chat
+                // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
+                , { 
+                    // styles?.chatContainer used in className and style prop as style prop can't handle CSS selectors
+                    className: mergeClasses(classes.root, mergeStyles(styles === null || styles === void 0 ? void 0 : styles.chatContainer)), ref: chatScrollDivRef, style: Object.assign({}, createStyleFromV8Style(styles === null || styles === void 0 ? void 0 : styles.chatContainer)) }, messagesToDisplay))));
+    }, [theme, classes.root, styles === null || styles === void 0 ? void 0 : styles.chatContainer, messagesToDisplay]);
+    return (React.createElement("div", { className: mergeStyles(messageThreadWrapperContainerStyle), ref: chatThreadRef },
+        existsNewChatMessage && !disableJumpToNewMessageButton && (React.createElement("div", { className: mergeStyles(newMessageButtonContainerStyle, styles === null || styles === void 0 ? void 0 : styles.newMessageButtonContainer) }, onRenderJumpToNewMessageButton ? (onRenderJumpToNewMessageButton({ text: strings.newMessagesIndicator, onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { text: strings.newMessagesIndicator, onClick: scrollToBottom })))),
+        chatBody));
 };
 const onRenderFileDownloadsTrampoline = (props) => {
     /* @conditional-compile-remove(file-sharing) */
     return props.onRenderFileDownloads;
     return undefined;
 };
-const linkStyles = (theme) => {
-    return {
-        '& a:link': {
-            color: theme.palette.themePrimary
-        },
-        '& a:visited': {
-            color: theme.palette.themeDarker
-        },
-        '& a:hover': {
-            color: theme.palette.themeDarker
-        },
-        '& a:selected': {
-            color: theme.palette.themeDarker
-        }
-    };
-};
 //# sourceMappingURL=MessageThread.js.map