@sendbird/uikit-react 3.7.0-rc.1 → 3.8.0

package/cjs/Channel/components/MessageList.js

@@ -1,78 +1,79 @@
 'use strict';
 
 var React = require('react');
-var Channel_context = require('../../ChannelProvider-95309057.js');
+var Channel_context = require('../../chunks/bundle-4DATo50q.js');
 var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
 var ui_Icon = require('../../ui/Icon.js');
 var Channel_components_Message = require('./Message.js');
-var utils = require('../../utils-ef688ff7.js');
+var utils = require('../../chunks/bundle-4q81wd8X.js');
 var Channel_utils_getMessagePartsInfo = require('../utils/getMessagePartsInfo.js');
 var Channel_components_UnreadCount = require('./UnreadCount.js');
 var Channel_components_FrozenNotification = require('./FrozenNotification.js');
-var consts = require('../../consts-838d8c0a.js');
+var consts = require('../../chunks/bundle-L9ushBZQ.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
 var Message_context = require('../../Message/context.js');
-var index = require('../../index-8c79fc87.js');
-require('../../UserProfileContext-712f02b1.js');
-require('../../const-ea1110b8.js');
-require('../../tslib.es6-b66710d0.js');
-require('../../index-ab04f4c1.js');
-require('../../index-94db47de.js');
+var index = require('../../chunks/bundle-TEIqVGqn.js');
+require('../../chunks/bundle-4bb_98h6.js');
+require('../../chunks/bundle-P_B0eyVT.js');
+require('../../chunks/bundle-hK4x7nmG.js');
+require('../../chunks/bundle-28p7K0N-.js');
+require('../../chunks/bundle-n1yh-qDb.js');
 require('@sendbird/chat/message');
-require('../../index-d0d79864.js');
-require('../../useSendMultipleFilesMessage-a050e482.js');
-require('../../pubSub/topics.js');
+require('../../chunks/bundle-I_9_5a8a.js');
+require('../../chunks/bundle-c6O8NjZI.js');
+require('../../chunks/bundle-tmB_l3Q9.js');
+require('../../chunks/bundle-FHx0K-3z.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../compareIds-6d33d98c.js');
-require('../../index-23d284a0.js');
 require('@sendbird/chat/groupChannel');
-require('../../uuid-121cea7a.js');
-require('../../_rollupPluginBabelHelpers-b21be8d6.js');
-require('../../resolvedReplyType-e4155c81.js');
-require('../../LocalizationContext-e12e7229.js');
-require('../../stringSet-f086c338.js');
-require('../../index-6f4ca5cf.js');
-require('prop-types');
+require('../../chunks/bundle-gMxOq93o.js');
+require('../hooks/useInitialMessagesFetch.js');
+require('../../pubSub/topics.js');
+require('../../chunks/bundle-6o4fw0w0.js');
+require('../../chunks/bundle-g_OXBrgT.js');
+require('../../chunks/bundle-QmSa90PC.js');
+require('../../chunks/bundle-z-Bvsn0B.js');
+require('../../chunks/bundle-6ziaqiUd.js');
 require('../../ui/Loader.js');
+require('../../chunks/bundle-1yOirqug.js');
 require('./SuggestedMentionList.js');
 require('../../ui/Avatar.js');
 require('../../ui/ImageRenderer.js');
-require('../../const-9692feaf.js');
+require('../../chunks/bundle-dXhGOQQM.js');
 require('../../Thread/context.js');
 require('../../Thread/context/types.js');
 require('@sendbird/chat');
+require('../../withSendbird.js');
 require('../../ui/DateSeparator.js');
-require('../../color-45578eb6.js');
+require('../../chunks/bundle-B2MaAm21.js');
 require('../../ui/MessageInput.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../types-949e3eb4.js');
-require('../../index-35a2f604.js');
+require('../../chunks/bundle-b4fiCQuI.js');
 require('dompurify');
-require('../../consts-4ddf1e9d.js');
-require('../../consts-2425b1dc.js');
-require('../../consts-39b0df2d.js');
-require('../../tokenize-db0fb550.js');
+require('../../chunks/bundle-gS0bojlA.js');
+require('../../chunks/bundle-g0lpRY8_.js');
+require('../../chunks/bundle-RaQV-Bpr.js');
+require('../../chunks/bundle-FLCJVplO.js');
 require('../../ui/MessageContent.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../utils-de8b30fe.js');
-require('../../index-c0e391a9.js');
-require('../../index-e61f36ff.js');
-require('../../index-2a618f4d.js');
+require('../../chunks/bundle-11ybpGNN.js');
+require('../../chunks/bundle-CUP2x37z.js');
+require('../../chunks/bundle-4rFcKXQa.js');
 require('../../ui/MessageItemMenu.js');
 require('../../ui/ContextMenu.js');
 require('react-dom');
 require('../../ui/SortByRow.js');
-require('../../types-6edcfd89.js');
+require('../../chunks/bundle-lii4Ueh3.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/ReactionButton.js');
-require('../../useLongPress-d5d1f4da.js');
-require('../../MediaQueryContext-77316b55.js');
+require('../../chunks/bundle-tywVawyg.js');
+require('../../chunks/bundle-Y9TkHVI5.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/BottomSheet.js');
-require('../../index-6fdf155b.js');
+require('../../hooks/useModal.js');
+require('../../chunks/bundle-UooP2IDU.js');
 require('../../ui/UserListItem.js');
 require('../../ui/MutedAvatarOverlay.js');
 require('../../ui/Checkbox.js');
@@ -80,308 +81,216 @@ require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
 require('../../ui/AdminMessage.js');
 require('../../ui/TextMessageItemBody.js');
-require('../../index-dfe39552.js');
+require('../../chunks/bundle-iwsbhMUN.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
 require('../../ui/ThumbnailMessageItemBody.js');
-require('../../utils-20fdce6e.js');
+require('../../chunks/bundle-p1cCW0sH.js');
 require('../../ui/OGMessageItemBody.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('../../ui/QuoteMessage.js');
-require('../../index-b1e163b7.js');
+require('../../chunks/bundle-41ZfOrRZ.js');
 require('../../ui/ThreadReplies.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-1c49b970.js');
+require('../../chunks/bundle-BJe68nS0.js');
 require('../../VoiceRecorder/context.js');
-require('../../ui/Modal.js');
-require('../../withSendbird.js');
 require('../../ui/PlaybackTime.js');
-require('../../useStatefulFileInfoList-aa28d0cd.js');
-require('../../index-6b215583.js');
+require('../../chunks/bundle-RlFjml8m.js');
+require('../../chunks/bundle-JggdKsJa.js');
 require('./FileViewer.js');
 require('./RemoveMessageModal.js');
-require('../../stringFormatterUtils-db5c0b13.js');
+require('../../chunks/bundle-6OOGDxxE.js');
 require('../../Message/hooks/useDirtyGetMentions.js');
 require('../utils/compareMessagesForGrouping.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var DELAY = 500;
-function useSetScrollToBottom(_a) {
-  var loading = _a.loading;
-  var _b = React.useState(0),
-    scrollBottom = _b[0],
-    setScrollBottom = _b[1];
-  React.useEffect(function () {
-    if (loading) {
-      setScrollBottom(0);
-    }
-  }, [loading]);
-  var scrollCb = function (e) {
-    var element = e.target;
-    try {
-      setScrollBottom(element.scrollHeight - element.scrollTop - element.offsetHeight);
-    } catch (_a) {
-      //
-    }
-  };
-  return {
-    scrollBottom: scrollBottom,
-    scrollToBottomHandler: index.useDebounce(scrollCb, DELAY)
-  };
+var DELAY = 500;
+function useSetScrollToBottom(_a) {
+    var loading = _a.loading;
+    var _b = React.useState(0), scrollBottom = _b[0], setScrollBottom = _b[1];
+    React.useEffect(function () {
+        if (loading) {
+            setScrollBottom(0);
+        }
+    }, [loading]);
+    var scrollCb = function (e) {
+        var element = e.target;
+        try {
+            setScrollBottom(element.scrollHeight - element.scrollTop - element.offsetHeight);
+        }
+        catch (_a) {
+            //
+        }
+    };
+    return {
+        scrollBottom: scrollBottom,
+        scrollToBottomHandler: index.useDebounce(scrollCb, DELAY),
+    };
 }
 
-function useScrollBehavior() {
-  var _a = Channel_context.useChannelContext(),
-    scrollRef = _a.scrollRef,
-    _b = _a.scrollBehavior,
-    scrollBehavior = _b === void 0 ? 'auto' : _b;
-  React.useEffect(function () {
-    if (scrollRef.current) {
-      scrollRef.current.style.scrollBehavior = scrollBehavior;
-    }
-  }, [scrollRef.current]);
-  return null;
+function useScrollBehavior() {
+    var _a = Channel_context.useChannelContext(), scrollRef = _a.scrollRef, _b = _a.scrollBehavior, scrollBehavior = _b === void 0 ? 'auto' : _b;
+    React.useEffect(function () {
+        if (scrollRef.current) {
+            scrollRef.current.style.scrollBehavior = scrollBehavior;
+        }
+    }, [scrollRef.current]);
+    return null;
 }
 
-var SCROLL_BOTTOM_PADDING = 50;
-var MessageList = function (_a) {
-  var _b = _a.className,
-    className = _b === void 0 ? '' : _b,
-    renderMessage = _a.renderMessage,
-    renderPlaceholderEmpty = _a.renderPlaceholderEmpty,
-    renderCustomSeparator = _a.renderCustomSeparator,
-    renderPlaceholderLoader = _a.renderPlaceholderLoader;
-  var _c = Channel_context.useChannelContext(),
-    allMessages = _c.allMessages,
-    localMessages = _c.localMessages,
-    hasMorePrev = _c.hasMorePrev,
-    hasMoreNext = _c.hasMoreNext,
-    setInitialTimeStamp = _c.setInitialTimeStamp,
-    setAnimatedMessageId = _c.setAnimatedMessageId,
-    setHighLightedMessageId = _c.setHighLightedMessageId,
-    isMessageGroupingEnabled = _c.isMessageGroupingEnabled,
-    scrollRef = _c.scrollRef,
-    onScrollCallback = _c.onScrollCallback,
-    onScrollDownCallback = _c.onScrollDownCallback,
-    messagesDispatcher = _c.messagesDispatcher,
-    messageActionTypes = _c.messageActionTypes,
-    currentGroupChannel = _c.currentGroupChannel,
-    disableMarkAsRead = _c.disableMarkAsRead,
-    filterMessageList = _c.filterMessageList,
-    replyType = _c.replyType,
-    loading = _c.loading,
-    isScrolled = _c.isScrolled,
-    unreadSince = _c.unreadSince;
-  var store = useSendbirdStateContext.useSendbirdStateContext();
-  var allMessagesFiltered = typeof filterMessageList === 'function' ? allMessages.filter(filterMessageList) : allMessages;
-  var markAsReadScheduler = store.config.markAsReadScheduler;
-  useScrollBehavior();
-  var onScroll = function () {
-    var element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
-    if (element == null) {
-      return;
-    }
-    var scrollTop = element.scrollTop,
-      clientHeight = element.clientHeight,
-      scrollHeight = element.scrollHeight;
-    if (utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
-      onScrollCallback();
-    }
-    if (utils.isAboutSame(clientHeight + scrollTop, scrollHeight, consts.SCROLL_BUFFER) && hasMoreNext) {
-      onScrollDownCallback(function (_a) {
-        var messages = _a[0];
-        if (messages) {
-          try {
-            setTimeout(function () {
-              return utils.scrollIntoLast(0, scrollRef);
-            },
-            /**
-             * Rendering MFM takes long time so we need this.
-             * But later we should find better solution.
-             */
-            1000);
-            // element.scrollTop = scrollHeight - clientHeight;
-            // scrollRef.current.scrollTop = scrollHeight - clientHeight;
-          } catch (error) {
-            //
-          }
-        }
-      });
-    }
-    if (!disableMarkAsRead && utils.isAboutSame(clientHeight + scrollTop, scrollHeight, consts.SCROLL_BUFFER) && !!currentGroupChannel) {
-      messagesDispatcher({
-        type: messageActionTypes.MARK_AS_READ,
-        payload: {
-          channel: currentGroupChannel
-        }
-      });
-      markAsReadScheduler.push(currentGroupChannel);
-    }
-  };
-  var onClickScrollBot = function () {
-    var _a, _b, _c, _d, _e;
-    setInitialTimeStamp === null || setInitialTimeStamp === void 0 ? void 0 : setInitialTimeStamp(null);
-    setAnimatedMessageId === null || setAnimatedMessageId === void 0 ? void 0 : setAnimatedMessageId(null);
-    setHighLightedMessageId === null || setHighLightedMessageId === void 0 ? void 0 : setHighLightedMessageId(null);
-    if (((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) > -1) {
-      scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
-    }
-  };
-  /**
-   * 1. Move the messsage list scroll
-   *    when each message's height is changed by `reactions` OR `showEdit`
-   * 2. Keep the scrollBottom value after fetching new message list
-   */
-  var moveScroll = function (isBottomMessageAffected) {
-    if (isBottomMessageAffected === void 0) {
-      isBottomMessageAffected = false;
-    }
-    var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
-    if (current) {
-      var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-      if (scrollBottom < bottom && (!isBottomMessageAffected || scrollBottom < consts.SCROLL_BUFFER)) {
-        // Move the scroll as much as the height of the message has changed
-        current.scrollTop += bottom - scrollBottom;
-      }
-    }
-  };
-  var handleOnScroll = index.useHandleOnScrollCallback({
-    hasMore: hasMorePrev,
-    hasNext: hasMoreNext,
-    onScroll: onScroll,
-    scrollRef: scrollRef
-  });
-  var _d = useSetScrollToBottom({
-      loading: loading
-    }),
-    scrollToBottomHandler = _d.scrollToBottomHandler,
-    scrollBottom = _d.scrollBottom;
-  if (loading) {
-    return typeof renderPlaceholderLoader === 'function' ? renderPlaceholderLoader() : /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
-      type: ui_PlaceHolder.PlaceHolderTypes.LOADING
-    });
-  }
-  if (allMessagesFiltered.length < 1) {
-    if (renderPlaceholderEmpty && typeof renderPlaceholderEmpty === 'function') {
-      return renderPlaceholderEmpty();
-    }
-    return /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
-      className: "sendbird-conversation__no-messages",
-      type: ui_PlaceHolder.PlaceHolderTypes.NO_MESSAGES
-    });
-  }
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isScrolled && /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder["default"], {
-    type: ui_PlaceHolder.PlaceHolderTypes.LOADING
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-conversation__messages ".concat(className)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-conversation__scroll-container"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-conversation__padding"
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-conversation__messages-padding",
-    ref: scrollRef,
-    onScroll: function (e) {
-      handleOnScroll();
-      scrollToBottomHandler(e);
-    }
-  }, allMessagesFiltered.map(function (m, idx) {
-    var _a, _b;
-    var _c = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
-        allMessages: allMessagesFiltered,
-        replyType: replyType,
-        isMessageGroupingEnabled: isMessageGroupingEnabled,
-        currentIndex: idx,
-        currentMessage: m,
-        currentChannel: currentGroupChannel
-      }),
-      chainTop = _c.chainTop,
-      chainBottom = _c.chainBottom,
-      hasSeparator = _c.hasSeparator;
-    var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
-    return /*#__PURE__*/React__default["default"].createElement(Message_context.MessageProvider, {
-      message: m,
-      key: m === null || m === void 0 ? void 0 : m.messageId,
-      isByMe: isByMe
-    }, /*#__PURE__*/React__default["default"].createElement(Channel_components_Message, {
-      handleScroll: moveScroll,
-      renderMessage: renderMessage,
-      message: m,
-      hasSeparator: hasSeparator,
-      chainTop: chainTop,
-      chainBottom: chainBottom,
-      renderCustomSeparator: renderCustomSeparator
-    }));
-  }), localMessages.map(function (m, idx) {
-    var _a, _b;
-    var _c = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
-        allMessages: allMessagesFiltered,
-        replyType: replyType,
-        isMessageGroupingEnabled: isMessageGroupingEnabled,
-        currentIndex: idx,
-        currentMessage: m,
-        currentChannel: currentGroupChannel
-      }),
-      chainTop = _c.chainTop,
-      chainBottom = _c.chainBottom;
-    var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
-    return /*#__PURE__*/React__default["default"].createElement(Message_context.MessageProvider, {
-      message: m,
-      key: m === null || m === void 0 ? void 0 : m.messageId,
-      isByMe: isByMe
-    }, /*#__PURE__*/React__default["default"].createElement(Channel_components_Message, {
-      handleScroll: moveScroll,
-      renderMessage: renderMessage,
-      message: m,
-      chainTop: chainTop,
-      chainBottom: chainBottom,
-      renderCustomSeparator: renderCustomSeparator
-    }));
-  }))), (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && /*#__PURE__*/React__default["default"].createElement(Channel_components_FrozenNotification, {
-    className: "sendbird-conversation__messages__notification"
-  }), unreadSince && /*#__PURE__*/React__default["default"].createElement(Channel_components_UnreadCount, {
-    className: "sendbird-conversation__messages__notification",
-    count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount,
-    time: unreadSince,
-    onClick: function () {
-      var _a, _b, _c, _d, _e;
-      if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) {
-        scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
-      }
-      if (!disableMarkAsRead && !!currentGroupChannel) {
-        markAsReadScheduler.push(currentGroupChannel);
-        messagesDispatcher({
-          type: messageActionTypes.MARK_AS_READ,
-          payload: {
-            channel: currentGroupChannel
-          }
-        });
-      }
-      setInitialTimeStamp(null);
-      setAnimatedMessageId(null);
-      setHighLightedMessageId(null);
-    }
-  }),
-  // This flag is an unmatched variable
-  scrollBottom > SCROLL_BOTTOM_PADDING && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "sendbird-conversation__scroll-bottom-button",
-    onClick: onClickScrollBot,
-    onKeyDown: onClickScrollBot,
-    tabIndex: 0,
-    role: "button"
-  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-    width: "24px",
-    height: "24px",
-    type: ui_Icon.IconTypes.CHEVRON_DOWN,
-    fillColor: ui_Icon.IconColors.PRIMARY
-  }))));
+var SCROLL_BOTTOM_PADDING = 50;
+var MessageList = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, renderMessage = _a.renderMessage, renderPlaceholderEmpty = _a.renderPlaceholderEmpty, renderCustomSeparator = _a.renderCustomSeparator, renderPlaceholderLoader = _a.renderPlaceholderLoader;
+    var _c = Channel_context.useChannelContext(), allMessages = _c.allMessages, localMessages = _c.localMessages, hasMorePrev = _c.hasMorePrev, hasMoreNext = _c.hasMoreNext, setInitialTimeStamp = _c.setInitialTimeStamp, setAnimatedMessageId = _c.setAnimatedMessageId, setHighLightedMessageId = _c.setHighLightedMessageId, isMessageGroupingEnabled = _c.isMessageGroupingEnabled, scrollRef = _c.scrollRef, onScrollCallback = _c.onScrollCallback, onScrollDownCallback = _c.onScrollDownCallback, messagesDispatcher = _c.messagesDispatcher, messageActionTypes = _c.messageActionTypes, currentGroupChannel = _c.currentGroupChannel, disableMarkAsRead = _c.disableMarkAsRead, filterMessageList = _c.filterMessageList, replyType = _c.replyType, loading = _c.loading, isScrolled = _c.isScrolled, unreadSince = _c.unreadSince, unreadSinceDate = _c.unreadSinceDate;
+    var store = useSendbirdStateContext.useSendbirdStateContext();
+    var allMessagesFiltered = (typeof filterMessageList === 'function')
+        ? allMessages.filter(filterMessageList)
+        : allMessages;
+    var markAsReadScheduler = store.config.markAsReadScheduler;
+    useScrollBehavior();
+    var onScroll = function () {
+        var element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+        if (element == null) {
+            return;
+        }
+        var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
+        if (utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
+            onScrollCallback();
+        }
+        if (utils.isAboutSame(clientHeight + scrollTop, scrollHeight, consts.SCROLL_BUFFER) && hasMoreNext) {
+            onScrollDownCallback(function (_a) {
+                var messages = _a[0];
+                if (messages) {
+                    try {
+                        setTimeout(function () { return utils.scrollIntoLast(0, scrollRef); }, 
+                        /**
+                         * Rendering MFM takes long time so we need this.
+                         * But later we should find better solution.
+                         */
+                        1000);
+                        // element.scrollTop = scrollHeight - clientHeight;
+                        // scrollRef.current.scrollTop = scrollHeight - clientHeight;
+                    }
+                    catch (error) {
+                        //
+                    }
+                }
+            });
+        }
+        if (!disableMarkAsRead
+            && utils.isAboutSame(clientHeight + scrollTop, scrollHeight, consts.SCROLL_BUFFER)
+            && !!currentGroupChannel) {
+            messagesDispatcher({
+                type: messageActionTypes.MARK_AS_READ,
+                payload: { channel: currentGroupChannel },
+            });
+            markAsReadScheduler.push(currentGroupChannel);
+        }
+    };
+    var onClickScrollBot = function () {
+        var _a, _b, _c, _d, _e;
+        setInitialTimeStamp === null || setInitialTimeStamp === void 0 ? void 0 : setInitialTimeStamp(null);
+        setAnimatedMessageId === null || setAnimatedMessageId === void 0 ? void 0 : setAnimatedMessageId(null);
+        setHighLightedMessageId === null || setHighLightedMessageId === void 0 ? void 0 : setHighLightedMessageId(null);
+        if (((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) > -1) {
+            scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
+        }
+    };
+    /**
+     * 1. Move the messsage list scroll
+     *    when each message's height is changed by `reactions` OR `showEdit`
+     * 2. Keep the scrollBottom value after fetching new message list
+     */
+    var moveScroll = function (isBottomMessageAffected) {
+        if (isBottomMessageAffected === void 0) { isBottomMessageAffected = false; }
+        var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+        if (current) {
+            var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+            if (scrollBottom < bottom
+                && (!isBottomMessageAffected || scrollBottom < consts.SCROLL_BUFFER)) {
+                // Move the scroll as much as the height of the message has changed
+                current.scrollTop += bottom - scrollBottom;
+            }
+        }
+    };
+    var handleOnScroll = index.useHandleOnScrollCallback({
+        hasMore: hasMorePrev,
+        hasNext: hasMoreNext,
+        onScroll: onScroll,
+        scrollRef: scrollRef,
+    });
+    var _d = useSetScrollToBottom({ loading: loading }), scrollToBottomHandler = _d.scrollToBottomHandler, scrollBottom = _d.scrollBottom;
+    if (loading) {
+        return (typeof renderPlaceholderLoader === 'function')
+            ? renderPlaceholderLoader()
+            : React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
+    }
+    if (allMessagesFiltered.length < 1) {
+        if (renderPlaceholderEmpty && typeof renderPlaceholderEmpty === 'function') {
+            return renderPlaceholderEmpty();
+        }
+        return React.createElement(ui_PlaceHolder.default, { className: "sendbird-conversation__no-messages", type: ui_PlaceHolder.PlaceHolderTypes.NO_MESSAGES });
+    }
+    return (React.createElement(React.Fragment, null,
+        !isScrolled && React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING }),
+        React.createElement("div", { className: "sendbird-conversation__messages ".concat(className) },
+            React.createElement("div", { className: "sendbird-conversation__scroll-container" },
+                React.createElement("div", { className: "sendbird-conversation__padding" }),
+                React.createElement("div", { className: "sendbird-conversation__messages-padding", ref: scrollRef, onScroll: function (e) {
+                        handleOnScroll();
+                        scrollToBottomHandler(e);
+                    } },
+                    allMessagesFiltered.map(function (m, idx) {
+                        var _a, _b;
+                        var _c = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
+                            allMessages: allMessagesFiltered,
+                            replyType: replyType,
+                            isMessageGroupingEnabled: isMessageGroupingEnabled,
+                            currentIndex: idx,
+                            currentMessage: m,
+                            currentChannel: currentGroupChannel,
+                        }), chainTop = _c.chainTop, chainBottom = _c.chainBottom, hasSeparator = _c.hasSeparator;
+                        var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
+                        return (React.createElement(Message_context.MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
+                            React.createElement(Channel_components_Message, { handleScroll: moveScroll, renderMessage: renderMessage, message: m, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                    }),
+                    localMessages.map(function (m, idx) {
+                        var _a, _b;
+                        var _c = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
+                            allMessages: allMessagesFiltered,
+                            replyType: replyType,
+                            isMessageGroupingEnabled: isMessageGroupingEnabled,
+                            currentIndex: idx,
+                            currentMessage: m,
+                            currentChannel: currentGroupChannel,
+                        }), chainTop = _c.chainTop, chainBottom = _c.chainBottom;
+                        var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
+                        return (React.createElement(Message_context.MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
+                            React.createElement(Channel_components_Message, { handleScroll: moveScroll, renderMessage: renderMessage, message: m, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                    }))),
+            (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && (React.createElement(Channel_components_FrozenNotification, { className: "sendbird-conversation__messages__notification" })),
+            (unreadSince || unreadSinceDate) && (React.createElement(Channel_components_UnreadCount, { className: "sendbird-conversation__messages__notification", count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount, time: unreadSince, lastReadAt: unreadSinceDate, onClick: function () {
+                    var _a, _b, _c, _d, _e;
+                    if ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) {
+                        scrollRef.current.scrollTop = ((_c = (_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0) - ((_e = (_d = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) !== null && _e !== void 0 ? _e : 0);
+                    }
+                    if (!disableMarkAsRead && !!currentGroupChannel) {
+                        markAsReadScheduler.push(currentGroupChannel);
+                        messagesDispatcher({
+                            type: messageActionTypes.MARK_AS_READ,
+                            payload: { channel: currentGroupChannel },
+                        });
+                    }
+                    setInitialTimeStamp(null);
+                    setAnimatedMessageId(null);
+                    setHighLightedMessageId(null);
+                } })),
+            // This flag is an unmatched variable
+            scrollBottom > SCROLL_BOTTOM_PADDING && (React.createElement("div", { className: "sendbird-conversation__scroll-bottom-button", onClick: onClickScrollBot, onKeyDown: onClickScrollBot, tabIndex: 0, role: "button" },
+                React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.CHEVRON_DOWN, fillColor: ui_Icon.IconColors.PRIMARY }))))));
 };
 
 module.exports = MessageList;