@azure/communication-react 1.0.0-beta.1 → 1.0.0-beta.5

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

@@ -1,448 +1,467 @@
-// 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) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Linkify from 'react-linkify';
-import { Chat, Flex, Ref } from '@fluentui/react-northstar';
-import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatMessageStyle, chatStyle, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle } from './styles/MessageThread.styles';
-import { Icon, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack, Link } from '@fluentui/react';
-import { LiveAnnouncer, LiveMessage } from 'react-aria-live';
-import { formatTimestampForChatMessage } from './utils/Datetime';
-import { delay } from './utils/delay';
-import { MessageStatusIndicator } from './MessageStatusIndicator';
-import { memoizeFnAll } from "../../../acs-ui-common/src";
-import { SystemMessage as SystemMessageComponent } from './SystemMessage';
-import { Parser } from 'html-to-react';
-const NEW_MESSAGES = 'New Messages';
-const isMessageSame = (first, second) => {
-    return (first.messageId === second.messageId &&
-        first.content === second.content &&
-        first.type === second.type &&
-        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.
- *
- * @param messages
- */
-const getLatestChatMessage = (messages) => {
-    let latestChatMessage = undefined;
-    for (let i = messages.length - 1; i >= 0; i--) {
-        const message = messages[i];
-        if (message.type === 'chat') {
-            const payload = message.payload;
-            if (payload.createdOn !== undefined) {
-                latestChatMessage = payload;
-                break;
-            }
-        }
-    }
-    return latestChatMessage;
-};
-/**
- * Compare latestMessageFromPreviousMessages & latestMessageFromNewMessages to see if the new message is not from
- * current user.
- *
- * @param latestMessageFromPreviousMessages
- * @param latestMessageFromNewMessages
- * @param userId
- */
-const isThereNewMessageNotFromCurrentUser = (latestMessageFromPreviousMessages, latestMessageFromNewMessages, userId) => {
-    if (latestMessageFromNewMessages === undefined) {
-        return false;
-    }
-    else {
-        if (latestMessageFromPreviousMessages === undefined) {
-            return latestMessageFromNewMessages.senderId !== userId;
-        }
-        else {
-            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
- * sender, messages that have failed to send, and messages from the current user that is marked as SEEN. This is meant
- * as an indirect way to detect if user is at bottom of the chat when the component updates with new messages. If we
- * updated this component due to current user sending a message we want to then call scrollToBottom.
- *
- * @param latestMessageFromPreviousMessages
- * @param latestMessageFromNewMessages
- */
-const didUserSendTheLatestMessage = (latestMessageFromPreviousMessages, latestMessageFromNewMessages, userId) => {
-    if (latestMessageFromNewMessages === undefined) {
-        return false;
-    }
-    else {
-        if (latestMessageFromPreviousMessages === undefined) {
-            return latestMessageFromNewMessages.senderId === userId;
-        }
-        else {
-            return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
-                latestMessageFromNewMessages.senderId === userId);
-        }
-    }
-};
-const DefaultJumpToNewMessageButton = (props) => {
-    const { onClick } = props;
-    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, onClick: onClick },
-        React.createElement(Icon, { iconName: "Down", className: DownIconStyle }),
-        NEW_MESSAGES));
-};
-const DefaultSystemMessageRenderer = (props) => {
-    var _a, _b;
-    if (props.message.type === 'system') {
-        const payload = props.message.payload;
-        return (React.createElement(SystemMessageComponent, { iconName: ((_a = payload.iconName) !== null && _a !== void 0 ? _a : ''), content: (_b = payload.content) !== null && _b !== void 0 ? _b : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
-    }
-    return React.createElement(React.Fragment, null);
-};
-// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript
-function extractContent(s) {
-    const span = document.createElement('span');
-    span.innerHTML = s;
-    return span.textContent || span.innerText;
-}
-const generateRichTextHTMLMessageContent = (payload) => {
-    const htmlToReactParser = new Parser();
-    const liveAuthor = `${payload.senderDisplayName} says `;
-    return (React.createElement("div", null,
-        React.createElement(LiveMessage, { message: `${payload.mine ? '' : liveAuthor} ${extractContent(payload.content)}`, "aria-live": "polite" }),
-        htmlToReactParser.parse(payload.content)));
-};
-const generateTextMessageContent = (payload) => {
-    const liveAuthor = `${payload.senderDisplayName} says `;
-    return (React.createElement("div", null,
-        React.createElement(LiveMessage, { message: `${payload.mine ? '' : liveAuthor} ${payload.content}`, "aria-live": "polite" }),
-        React.createElement(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => {
-                return (React.createElement(Link, { href: decoratedHref, key: key }, decoratedText));
-            } }, payload.content)));
-};
-const generateMessageContent = (payload) => {
-    switch (payload.type) {
-        case 'text':
-            return generateTextMessageContent(payload);
-        case 'html':
-            return generateRichTextHTMLMessageContent(payload);
-        case 'richtext/html':
-            return generateRichTextHTMLMessageContent(payload);
-        default:
-            console.warn('unknown message content type');
-            return React.createElement(React.Fragment, null);
-    }
-};
-const DefaultChatMessageRenderer = (props) => {
-    if (props.message.type === 'chat') {
-        const payload = props.message.payload;
-        const messageContentItem = generateMessageContent(payload);
-        return (React.createElement(Chat.Message, { className: mergeStyles(chatMessageStyle, props.messageContainerStyle), content: messageContentItem, author: payload.senderDisplayName, mine: payload.mine, timestamp: payload.createdOn ? formatTimestampForChatMessage(payload.createdOn, new Date()) : undefined }));
-    }
-    return React.createElement(React.Fragment, null);
-};
-const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageStatus, onRenderAvatar, styles, onRenderMessageStatus, defaultChatMessageRenderer, _attached, statusToRender, onRenderMessage) => {
-    var _a, _b, _c;
-    const messageProps = {
-        message: message
-    };
-    if (message.type === 'chat') {
-        const payload = message.payload;
-        messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
-        const chatMessageComponent = onRenderMessage === undefined
-            ? defaultChatMessageRenderer(messageProps)
-            : onRenderMessage(messageProps, DefaultChatMessageRenderer);
-        return {
-            gutter: payload.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_a = payload.senderId) !== null && _a !== void 0 ? _a : '')) : (React.createElement(Persona, { text: payload.senderDisplayName, hidePersonaDetails: true, size: PersonaSize.size32 })),
-            contentPosition: payload.mine ? 'end' : 'start',
-            message: (React.createElement(Flex, { vAlign: "end" },
-                chatMessageComponent,
-                React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_b = payload.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = payload.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (MessageStatusIndicator({ status: statusToRender }))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) }))))),
-            attached: payload.attached,
-            key: _messageKey
-        };
-    }
-    else if (message.type === 'system') {
-        messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
-        const systemMessageComponent = onRenderMessage === undefined
-            ? DefaultSystemMessageRenderer(messageProps)
-            : onRenderMessage(messageProps, DefaultSystemMessageRenderer);
-        return {
-            children: systemMessageComponent,
-            key: _messageKey
-        };
-    }
-    else {
-        // 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) => {
-    for (let i = messages.length - 1; i >= 0; i--) {
-        const message = messages[i];
-        if (message.type === 'chat' && message.payload.status === status && message.payload.mine) {
-            return message.payload.messageId;
-        }
-    }
-    return undefined;
-};
-/**
- * `MessageThread` allows you to easily create a component for rendering chat messages, handling scrolling behavior of new/old messages and customizing icons & controls inside the chat thread.
- * @param props - of type MessageThreadProps
- *
- * 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).
- */
-export const MessageThread = (props) => {
-    var _a;
-    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageStatus = false, numberOfChatMessagesToReload = 0, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage } = props;
-    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 [isAtTopOfScroll, setIsAtTopOfScroll] = useState(false);
-    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 [chatMessageIdJustSeen, setChatMessageIdJustSeen] = useState(undefined);
-    const [existsNewChatMessage, setExistsNewChatMessage] = useState(false);
-    const [lastSeenChatMessage, setLastSeenChatMessage] = useState(undefined);
-    const [lastDeliveredChatMessage, setLastDeliveredChatMessage] = useState(undefined);
-    const [lastSendingChatMessage, setLastSendingChatMessage] = useState(undefined);
-    const [isAllChatMessagesLoaded, setIsAllChatMessagesLoaded] = useState(false);
-    const isAllChatMessagesLoadedRef = useRef(isAllChatMessagesLoaded);
-    isAllChatMessagesLoadedRef.current = isAllChatMessagesLoaded;
-    const chatScrollDivRef = useRef();
-    const chatThreadRef = useRef();
-    const isLoadingChatMessagesRef = useRef(false);
-    const messagesRef = useRef(messages);
-    const setMessagesRef = (messagesWithAttachedValue) => {
-        messagesRef.current = messagesWithAttachedValue;
-        setMessages(messagesWithAttachedValue);
-    };
-    const isAtBottomOfScrollRef = useRef(isAtBottomOfScroll);
-    const setIsAtBottomOfScrollRef = (isAtBottomOfScrollValue) => {
-        isAtBottomOfScrollRef.current = isAtBottomOfScrollValue;
-        setIsAtBottomOfScroll(isAtBottomOfScrollValue);
-    };
-    const isAtTopOfScrollRef = useRef(isAtTopOfScroll);
-    const setIsAtTopOfScrollRef = (isAtTopOfScrollValue) => {
-        isAtTopOfScrollRef.current = isAtTopOfScrollValue;
-        setIsAtTopOfScroll(isAtTopOfScrollValue);
-    };
-    const chatMessagesInitializedRef = useRef(chatMessagesInitialized);
-    const setChatMessagesInitializedRef = (chatMessagesInitialized) => {
-        chatMessagesInitializedRef.current = chatMessagesInitialized;
-        setChatMessagesInitialized(chatMessagesInitialized);
-    };
-    // 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) {
-            return;
-        }
-        const messagesWithId = messagesRef.current.filter((message) => {
-            return message.type === 'chat' && !message.payload.mine && !!message.payload.messageId;
-        });
-        if (messagesWithId.length === 0) {
-            return;
-        }
-        const lastMessage = messagesWithId[messagesWithId.length - 1];
-        try {
-            if (onMessageSeen &&
-                lastMessage &&
-                lastMessage.payload.messageId &&
-                lastMessage.payload.messageId !== chatMessageIdJustSeen) {
-                yield onMessageSeen(lastMessage.payload.messageId);
-                setChatMessageIdJustSeen(lastMessage.payload.messageId);
-            }
-        }
-        catch (e) {
-            console.log('onMessageSeen Error', lastMessage, e);
-        }
-    }), [showMessageStatus, onMessageSeen, chatMessageIdJustSeen]);
-    const scrollToBottom = useCallback(() => {
-        chatScrollDivRef.current.scrollTop = chatScrollDivRef.current.scrollHeight;
-        setExistsNewChatMessage(false);
-        setIsAtBottomOfScrollRef(true);
-        sendMessageStatusIfAtBottom();
-    }, [sendMessageStatusIfAtBottom]);
-    const handleScroll = () => {
-        const atBottom = Math.floor(chatScrollDivRef.current.scrollTop) >=
-            chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
-        const atTop = chatScrollDivRef.current.scrollTop === 0;
-        if (atBottom) {
-            sendMessageStatusIfAtBottom();
-            if (!isAtBottomOfScrollRef.current) {
-                scrollToBottom();
-            }
-        }
-        setIsAtBottomOfScrollRef(atBottom);
-        setIsAtTopOfScrollRef(atTop);
-        // Make sure we do not stuck at the top if more messages are being fetched.
-        if (chatScrollDivRef.current.scrollTop === 0 && !isAllChatMessagesLoadedRef.current)
-            chatScrollDivRef.current.scrollTop = 5;
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            if (chatScrollDivRef.current.scrollTop <= 200 &&
-                !isAllChatMessagesLoadedRef.current &&
-                !isLoadingChatMessagesRef.current) {
-                if (onLoadPreviousChatMessages) {
-                    isLoadingChatMessagesRef.current = true;
-                    setIsAllChatMessagesLoaded(yield onLoadPreviousChatMessages(numberOfChatMessagesToReload));
-                    isLoadingChatMessagesRef.current = false;
-                }
-            }
-        }))();
-    };
-    /**
-     * One time run useEffect. Sets up listeners when component is mounted and tears down listeners when component
-     * unmounts.
-     */
-    useEffect(() => {
-        window && window.addEventListener('click', sendMessageStatusIfAtBottom);
-        window && window.addEventListener('focus', sendMessageStatusIfAtBottom);
-        chatScrollDivRef.current && chatScrollDivRef.current.addEventListener('scroll', handleScroll);
-        const chatScrollDiv = chatScrollDivRef.current;
-        return () => {
-            window && window.removeEventListener('click', sendMessageStatusIfAtBottom);
-            window && window.removeEventListener('focus', sendMessageStatusIfAtBottom);
-            chatScrollDiv && chatScrollDiv.removeEventListener('scroll', handleScroll);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    /**
-     * 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);
-            return;
-        }
-        // Only scroll to bottom if isAtBottomOfScrollRef is true
-        isAtBottomOfScrollRef.current && scrollToBottom();
-    }, [clientHeight, forceUpdate, scrollToBottom, chatMessagesInitialized]);
-    /**
-     * This needs to run to update latestPreviousChatMessage & latestCurrentChatMessage.
-     * These two states are used to manipulate scrollbar
-     */
-    useEffect(() => {
-        setLatestPreviousChatMessage(getLatestChatMessage(messagesRef.current));
-        setLatestCurrentChatMessage(getLatestChatMessage(newMessages));
-        setMessagesRef(newMessages);
-        !chatMessagesInitializedRef.current && setChatMessagesInitializedRef(true);
-        setLastDeliveredChatMessage(getLastChatMessageIdWithStatus(newMessages, 'delivered'));
-        setLastSeenChatMessage(getLastChatMessageIdWithStatus(newMessages, 'seen'));
-        setLastSendingChatMessage(getLastChatMessageIdWithStatus(newMessages, 'sending'));
-    }, [newMessages]);
-    /**
-     * This needs to run after messages are rendererd so we can manipulate the scroll bar.
-     */
-    useEffect(() => {
-        // If user just sent the latest message then we assume we can move user to bottom of scroll.
-        if (isThereNewMessageNotFromCurrentUser(latestPreviousChatMessage, latestCurrentChatMessage, userId) &&
-            !isAtBottomOfScrollRef.current) {
-            setExistsNewChatMessage(true);
-        }
-        else if (didUserSendTheLatestMessage(latestPreviousChatMessage, latestCurrentChatMessage, userId) ||
-            isAtBottomOfScrollRef.current) {
-            scrollToBottom();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [messages]);
-    // Fetch more messages to make the scroll bar appear, infinity scroll is then handled in the handleScroll function.
-    useEffect(() => {
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            if (onLoadPreviousChatMessages) {
-                while (chatScrollDivRef.current.scrollTop <= 200 && !isAllChatMessagesLoadedRef.current) {
-                    setIsAllChatMessagesLoaded(yield onLoadPreviousChatMessages(numberOfChatMessagesToReload));
-                    // Release CPU resources for 200 milliseconds between each loop.
-                    yield delay(200);
-                }
-            }
-        }))();
-    }, [onLoadPreviousChatMessages, numberOfChatMessagesToReload]);
-    // To rerender the defaultChatMessageRenderer if app running across days(every new day chat time stamp need to be regenerated)
-    const defaultChatMessageRenderer = useCallback((messageProps) => {
-        return DefaultChatMessageRenderer(messageProps);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [new Date().toDateString()]);
-    const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
-        return messages.map((message, index) => {
-            let key = message.payload.messageId;
-            if (message.type === 'chat' && (!message.payload.messageId || message.payload.messageId === '')) {
-                key = message.payload.clientMessageId;
-            }
-            let statusToRender = undefined;
-            if (message.type === 'chat') {
-                if (showMessageStatus && message.payload.mine) {
-                    switch (message.payload.messageId) {
-                        case lastSeenChatMessage: {
-                            statusToRender = 'seen';
-                            break;
-                        }
-                        case lastSendingChatMessage: {
-                            statusToRender = 'sending';
-                            break;
-                        }
-                        case lastDeliveredChatMessage: {
-                            statusToRender = 'delivered';
-                            break;
-                        }
-                    }
-                }
-                if (message.payload.mine && message.payload.status === 'failed')
-                    statusToRender = 'failed';
-            }
-            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageStatus, onRenderAvatar, styles, onRenderMessageStatus, defaultChatMessageRenderer, 
-            // Temporary solution to make sure we re-render if attach attribute is changed.
-            // The proper fix should be in selector.
-            message.type === 'chat' ? message.payload.attached : undefined, statusToRender, onRenderMessage);
-        });
-    }), [
-        messages,
-        showMessageStatus,
-        onRenderAvatar,
-        styles,
-        onRenderMessageStatus,
-        defaultChatMessageRenderer,
-        lastSeenChatMessage,
-        lastSendingChatMessage,
-        lastDeliveredChatMessage,
-        onRenderMessage
-    ]);
-    const chatBody = useMemo(() => {
-        var _a;
-        return (React.createElement(LiveAnnouncer, null,
-            React.createElement(Chat, { styles: (_a = styles === null || styles === void 0 ? void 0 : styles.chatContainer) !== null && _a !== void 0 ? _a : chatStyle, items: messagesToDisplay })));
-    }, [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 },
-            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({ onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { onClick: scrollToBottom })))))));
-};
+// 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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Chat, Flex, Ref } from '@fluentui/react-northstar';
+import { DownIconStyle, newMessageButtonContainerStyle, messageThreadContainerStyle, chatStyle, newMessageButtonStyle, messageStatusContainerStyle, noMessageStatusStyle } from './styles/MessageThread.styles';
+import { Icon, mergeStyles, Persona, PersonaSize, PrimaryButton, Stack } from '@fluentui/react';
+import { LiveAnnouncer } from 'react-aria-live';
+import { delay } from './utils/delay';
+import { MessageStatusIndicator } from './MessageStatusIndicator';
+import { memoizeFnAll } from "../../../acs-ui-common/src";
+import { SystemMessage as SystemMessageComponent } from './SystemMessage';
+import { ChatMessageComponent } from './ChatMessageComponent';
+import { useLocale } from '../localization/LocalizationProvider';
+const NEW_MESSAGES = 'New Messages';
+const isMessageSame = (first, second) => {
+    return (first.messageId === second.messageId &&
+        first.content === second.content &&
+        first.type === second.type &&
+        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.
+ *
+ * @param messages
+ */
+const getLatestChatMessage = (messages) => {
+    let latestChatMessage = undefined;
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const message = messages[i];
+        if (message.type === 'chat') {
+            const payload = message.payload;
+            if (payload.createdOn !== undefined) {
+                latestChatMessage = payload;
+                break;
+            }
+        }
+    }
+    return latestChatMessage;
+};
+/**
+ * Compare latestMessageFromPreviousMessages & latestMessageFromNewMessages to see if the new message is not from
+ * current user.
+ *
+ * @param latestMessageFromPreviousMessages
+ * @param latestMessageFromNewMessages
+ * @param userId
+ */
+const isThereNewMessageNotFromCurrentUser = (latestMessageFromPreviousMessages, latestMessageFromNewMessages, userId) => {
+    if (latestMessageFromNewMessages === undefined) {
+        return false;
+    }
+    else {
+        if (latestMessageFromPreviousMessages === undefined) {
+            return latestMessageFromNewMessages.senderId !== userId;
+        }
+        else {
+            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
+ * sender, messages that have failed to send, and messages from the current user that is marked as SEEN. This is meant
+ * as an indirect way to detect if user is at bottom of the chat when the component updates with new messages. If we
+ * updated this component due to current user sending a message we want to then call scrollToBottom.
+ *
+ * @param latestMessageFromPreviousMessages
+ * @param latestMessageFromNewMessages
+ */
+const didUserSendTheLatestMessage = (latestMessageFromPreviousMessages, latestMessageFromNewMessages, userId) => {
+    if (latestMessageFromNewMessages === undefined) {
+        return false;
+    }
+    else {
+        if (latestMessageFromPreviousMessages === undefined) {
+            return latestMessageFromNewMessages.senderId === userId;
+        }
+        else {
+            return (!isMessageSame(latestMessageFromNewMessages, latestMessageFromPreviousMessages) &&
+                latestMessageFromNewMessages.senderId === userId);
+        }
+    }
+};
+const DefaultJumpToNewMessageButton = (props) => {
+    const { onClick } = props;
+    return (React.createElement(PrimaryButton, { className: newMessageButtonStyle, onClick: onClick },
+        React.createElement(Icon, { iconName: "Down", className: DownIconStyle }),
+        NEW_MESSAGES));
+};
+const generateParticipantsStr = (participants) => participants
+    .map((participant) => `${!participant.displayName || participant.displayName === '' ? 'No name' : participant.displayName}`)
+    .join(', ');
+const ParticipantSystemMessageComponent = ({ payload, style }) => {
+    var _a;
+    const { strings } = useLocale();
+    const participantsStr = generateParticipantsStr(payload.participants);
+    const messageSuffix = payload.type === 'participantAdded'
+        ? strings.messageThread.participantJoined
+        : strings.messageThread.participantLeft;
+    if (participantsStr !== '') {
+        return (React.createElement(SystemMessageComponent, { iconName: ((_a = payload.iconName) !== null && _a !== void 0 ? _a : ''), content: `${participantsStr} ${messageSuffix}`, containerStyle: style }));
+    }
+    return React.createElement(React.Fragment, null);
+};
+const DefaultSystemMessageRenderer = (props) => {
+    var _a, _b;
+    if (props.message.type === 'system') {
+        const payload = props.message.payload;
+        if (payload.type === 'content') {
+            return (React.createElement(SystemMessageComponent, { iconName: ((_a = payload.iconName) !== null && _a !== void 0 ? _a : ''), content: (_b = payload.content) !== null && _b !== void 0 ? _b : '', containerStyle: props === null || props === void 0 ? void 0 : props.messageContainerStyle }));
+        }
+        if (payload.type === 'participantAdded' || payload.type === 'participantRemoved') {
+            return React.createElement(ParticipantSystemMessageComponent, { payload: payload, style: props.messageContainerStyle });
+        }
+    }
+    return React.createElement(React.Fragment, null);
+};
+const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, onRenderMessage, onUpdateMessage, onDeleteMessage) => {
+    var _a, _b, _c;
+    const messageProps = {
+        message,
+        strings,
+        showDate: showMessageDate,
+        onUpdateMessage,
+        onDeleteMessage
+    };
+    if (message.type === 'chat') {
+        const payload = message.payload;
+        messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer;
+        const chatMessageComponent = onRenderMessage === undefined
+            ? defaultChatMessageRenderer(messageProps)
+            : onRenderMessage(messageProps, defaultChatMessageRenderer);
+        const personaOptions = {
+            text: payload.senderDisplayName,
+            hidePersonalDetails: true,
+            size: PersonaSize.size32
+        };
+        return {
+            gutter: payload.mine ? ('') : onRenderAvatar ? (onRenderAvatar((_a = payload.senderId) !== null && _a !== void 0 ? _a : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions))),
+            contentPosition: payload.mine ? 'end' : 'start',
+            message: {
+                className: mergeStyles({ width: 'calc(100% - 6.25rem)' }),
+                content: (React.createElement(Flex, { hAlign: payload.mine ? 'end' : undefined, vAlign: "end" },
+                    chatMessageComponent,
+                    React.createElement("div", { className: mergeStyles(messageStatusContainerStyle((_b = payload.mine) !== null && _b !== void 0 ? _b : false), (styles === null || styles === void 0 ? void 0 : styles.messageStatusContainer) ? styles.messageStatusContainer((_c = payload.mine) !== null && _c !== void 0 ? _c : false) : '') }, showMessageStatus && statusToRender ? (onRenderMessageStatus ? (onRenderMessageStatus({ status: statusToRender })) : (defaultStatusRenderer(statusToRender))) : (React.createElement("div", { className: mergeStyles(noMessageStatusStyle) })))))
+            },
+            attached: payload.attached,
+            key: _messageKey
+        };
+    }
+    else if (message.type === 'system') {
+        messageProps.messageContainerStyle = styles === null || styles === void 0 ? void 0 : styles.systemMessageContainer;
+        const systemMessageComponent = onRenderMessage === undefined ? (React.createElement(DefaultSystemMessageRenderer, Object.assign({}, messageProps))) : (onRenderMessage(messageProps, (props) => React.createElement(DefaultSystemMessageRenderer, Object.assign({}, props))));
+        return {
+            children: systemMessageComponent,
+            key: _messageKey
+        };
+    }
+    else {
+        // 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) => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const message = messages[i];
+        if (message.type === 'chat' && message.payload.status === status && message.payload.mine) {
+            return message.payload.messageId;
+        }
+    }
+    return undefined;
+};
+/**
+ * `MessageThread` allows you to easily create a component for rendering chat messages, handling scrolling behavior of new/old messages and customizing icons & controls inside the chat thread.
+ * @param props - of type MessageThreadProps
+ *
+ * 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).
+ */
+export const MessageThread = (props) => {
+    var _a;
+    const { messages: newMessages, userId, styles, disableJumpToNewMessageButton = false, showMessageDate = false, showMessageStatus = false, numberOfChatMessagesToReload = 0, onMessageSeen, onRenderMessageStatus, onRenderAvatar, onLoadPreviousChatMessages, onRenderJumpToNewMessageButton, onRenderMessage, onUpdateMessage, onDeleteMessage } = props;
+    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 [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);
+    const isAllChatMessagesLoadedRef = useRef(false);
+    const previousTopRef = useRef(-1);
+    const previousHeightRef = useRef(-1);
+    const messageIdSeenByMeRef = useRef('');
+    const chatScrollDivRef = useRef(null);
+    const chatThreadRef = useRef(null);
+    const isLoadingChatMessagesRef = useRef(false);
+    const messagesRef = useRef(messages);
+    const setMessagesRef = (messagesWithAttachedValue) => {
+        messagesRef.current = messagesWithAttachedValue;
+        setMessages(messagesWithAttachedValue);
+    };
+    const isAtBottomOfScrollRef = useRef(isAtBottomOfScroll);
+    const setIsAtBottomOfScrollRef = (isAtBottomOfScrollValue) => {
+        isAtBottomOfScrollRef.current = isAtBottomOfScrollValue;
+        setIsAtBottomOfScroll(isAtBottomOfScrollValue);
+    };
+    const chatMessagesInitializedRef = useRef(chatMessagesInitialized);
+    const setChatMessagesInitializedRef = (chatMessagesInitialized) => {
+        chatMessagesInitializedRef.current = chatMessagesInitialized;
+        setChatMessagesInitialized(chatMessagesInitialized);
+    };
+    // 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) {
+            return;
+        }
+        const messagesWithId = messagesRef.current.filter((message) => {
+            return message.type === 'chat' && !message.payload.mine && !!message.payload.messageId;
+        });
+        if (messagesWithId.length === 0) {
+            return;
+        }
+        const lastMessage = messagesWithId[messagesWithId.length - 1];
+        try {
+            if (onMessageSeen &&
+                lastMessage &&
+                lastMessage.payload.messageId &&
+                lastMessage.payload.messageId !== messageIdSeenByMeRef.current) {
+                yield onMessageSeen(lastMessage.payload.messageId);
+                messageIdSeenByMeRef.current = lastMessage.payload.messageId;
+            }
+        }
+        catch (e) {
+            console.log('onMessageSeen Error', lastMessage, e);
+        }
+    }), [showMessageStatus, onMessageSeen]);
+    const scrollToBottom = useCallback(() => {
+        if (chatScrollDivRef.current) {
+            chatScrollDivRef.current.scrollTop = chatScrollDivRef.current.scrollHeight;
+        }
+        setExistsNewChatMessage(false);
+        setIsAtBottomOfScrollRef(true);
+        sendMessageStatusIfAtBottom();
+    }, [sendMessageStatusIfAtBottom]);
+    const handleScrollToTheBottom = useCallback(() => {
+        if (!chatScrollDivRef.current) {
+            return;
+        }
+        const atBottom = Math.floor(chatScrollDivRef.current.scrollTop) >=
+            chatScrollDivRef.current.scrollHeight - chatScrollDivRef.current.clientHeight;
+        if (atBottom) {
+            sendMessageStatusIfAtBottom();
+            if (!isAtBottomOfScrollRef.current) {
+                scrollToBottom();
+            }
+        }
+        setIsAtBottomOfScrollRef(atBottom);
+    }, [scrollToBottom, sendMessageStatusIfAtBottom]);
+    // Infinite scrolling + threadInitialize function
+    const fetchNewMessageWhenAtTop = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (chatScrollDivRef.current && !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) {
+                    isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
+                    // Release CPU resources for 200 milliseconds between each loop.
+                    yield delay(200);
+                }
+                isLoadingChatMessagesRef.current = false;
+            }
+        }
+    }), [numberOfChatMessagesToReload, onLoadPreviousChatMessages]);
+    const handleInfiniteScroll = useCallback(() => {
+        if (!chatScrollDivRef.current) {
+            return;
+        }
+        fetchNewMessageWhenAtTop();
+    }, [fetchNewMessageWhenAtTop]);
+    // 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]
+    useEffect(() => {
+        if (!chatScrollDivRef.current)
+            return;
+        previousTopRef.current = chatScrollDivRef.current.scrollTop;
+        previousHeightRef.current = chatScrollDivRef.current.scrollHeight;
+    }, [newMessages]);
+    useEffect(() => {
+        if (!chatScrollDivRef.current)
+            return;
+        if (previousTopRef.current === 0) {
+            const currentHeight = chatScrollDivRef.current.scrollHeight;
+            chatScrollDivRef.current.scrollTop =
+                chatScrollDivRef.current.scrollTop + currentHeight - previousHeightRef.current;
+        }
+    }, [messages]);
+    // Fetch more messages to make the scroll bar appear, infinity scroll is then handled in the handleScroll function.
+    useEffect(() => {
+        fetchNewMessageWhenAtTop();
+    }, [fetchNewMessageWhenAtTop]);
+    /**
+     * One time run useEffects. Sets up listeners when component is mounted and tears down listeners when component
+     * unmounts unless these function changed
+     */
+    useEffect(() => {
+        window && window.addEventListener('click', sendMessageStatusIfAtBottom);
+        window && window.addEventListener('focus', sendMessageStatusIfAtBottom);
+        return () => {
+            window && window.removeEventListener('click', sendMessageStatusIfAtBottom);
+            window && window.removeEventListener('focus', sendMessageStatusIfAtBottom);
+        };
+    }, [sendMessageStatusIfAtBottom]);
+    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);
+        return () => {
+            chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.removeEventListener('scroll', handleScrollToTheBottom);
+            chatScrollDiv === null || chatScrollDiv === void 0 ? void 0 : chatScrollDiv.removeEventListener('scroll', handleInfiniteScroll);
+        };
+    }, [handleInfiniteScroll, 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);
+            return;
+        }
+        // Only scroll to bottom if isAtBottomOfScrollRef is true
+        isAtBottomOfScrollRef.current && scrollToBottom();
+    }, [clientHeight, forceUpdate, scrollToBottom, chatMessagesInitialized]);
+    /**
+     * This needs to run to update latestPreviousChatMessage & latestCurrentChatMessage.
+     * These two states are used to manipulate scrollbar
+     */
+    useEffect(() => {
+        setLatestPreviousChatMessage(getLatestChatMessage(messagesRef.current));
+        setLatestCurrentChatMessage(getLatestChatMessage(newMessages));
+        setMessagesRef(newMessages);
+        !chatMessagesInitializedRef.current && setChatMessagesInitializedRef(true);
+        setLastDeliveredChatMessage(getLastChatMessageIdWithStatus(newMessages, 'delivered'));
+        setLastSeenChatMessage(getLastChatMessageIdWithStatus(newMessages, 'seen'));
+        setLastSendingChatMessage(getLastChatMessageIdWithStatus(newMessages, 'sending'));
+    }, [newMessages]);
+    /**
+     * This needs to run after messages are rendererd so we can manipulate the scroll bar.
+     */
+    useEffect(() => {
+        // If user just sent the latest message then we assume we can move user to bottom of scroll.
+        if (isThereNewMessageNotFromCurrentUser(latestPreviousChatMessage, latestCurrentChatMessage, userId) &&
+            !isAtBottomOfScrollRef.current) {
+            setExistsNewChatMessage(true);
+        }
+        else if (didUserSendTheLatestMessage(latestPreviousChatMessage, latestCurrentChatMessage, userId) ||
+            isAtBottomOfScrollRef.current) {
+            scrollToBottom();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [messages]);
+    // 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.type === 'chat') {
+            return React.createElement(ChatMessageComponent, Object.assign({}, messageProps, { message: messageProps.message }));
+        }
+        return React.createElement(React.Fragment, null);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [new Date().toDateString()]);
+    const localeStrings = useLocale().strings.messageThread;
+    const strings = useMemo(() => (Object.assign(Object.assign({}, localeStrings), props.strings)), [localeStrings, props.strings]);
+    const defaultStatusRenderer = useCallback((status) => React.createElement(MessageStatusIndicator, { status: status }), []);
+    const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
+        return messages.map((message, index) => {
+            let key = message.payload.messageId;
+            if (message.type === 'chat' && (!message.payload.messageId || message.payload.messageId === '')) {
+                key = message.payload.clientMessageId;
+            }
+            let statusToRender = undefined;
+            if (message.type === 'chat') {
+                if (showMessageStatus && message.payload.mine) {
+                    switch (message.payload.messageId) {
+                        case lastSeenChatMessage: {
+                            statusToRender = 'seen';
+                            break;
+                        }
+                        case lastSendingChatMessage: {
+                            statusToRender = 'sending';
+                            break;
+                        }
+                        case lastDeliveredChatMessage: {
+                            statusToRender = 'delivered';
+                            break;
+                        }
+                    }
+                }
+                if (message.payload.mine && message.payload.status === 'failed')
+                    statusToRender = 'failed';
+            }
+            console.log('function: ' + onUpdateMessage);
+            return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, 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.type === 'chat' ? message.payload.attached : undefined, statusToRender, onRenderMessage, onUpdateMessage, onDeleteMessage);
+        });
+    }), [
+        messages,
+        showMessageDate,
+        showMessageStatus,
+        onRenderAvatar,
+        styles,
+        onRenderMessageStatus,
+        defaultStatusRenderer,
+        defaultChatMessageRenderer,
+        lastSeenChatMessage,
+        lastSendingChatMessage,
+        lastDeliveredChatMessage,
+        onRenderMessage,
+        onUpdateMessage,
+        onDeleteMessage,
+        strings
+    ]);
+    const chatBody = useMemo(() => {
+        var _a;
+        return (React.createElement(LiveAnnouncer, null,
+            React.createElement(Chat, { styles: (_a = styles === null || styles === void 0 ? void 0 : styles.chatContainer) !== null && _a !== void 0 ? _a : chatStyle, items: messagesToDisplay })));
+    }, [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 },
+            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({ onClick: scrollToBottom })) : (React.createElement(DefaultJumpToNewMessageButton, { onClick: scrollToBottom })))))));
+};
 //# sourceMappingURL=MessageThread.js.map