@sendbird/uikit-react 3.7.0 → 3.8.1

package/cjs/Channel/components/MessageList.js

@@ -1,387 +1,323 @@
 'use strict';
 
 var React = require('react');
-var Channel_context = require('../../ChannelProvider-fc111e5f.js');
+var Channel_context = require('../../chunks/bundle-_yIYQoui.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-9193a195.js');
+var utils = require('../../chunks/bundle-8lUFYwiz.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-f54b15c2.js');
+var consts = require('../../chunks/bundle-4iro9CUN.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
 var Message_context = require('../../Message/context.js');
-var index = require('../../index-692ea6aa.js');
-require('../../UserProfileContext-c6d7abb7.js');
-require('../../const-c9e7a340.js');
-require('../../tslib.es6-c74b513f.js');
-require('../../index-3448df64.js');
-require('../../index-e8928da6.js');
+var index = require('../../chunks/bundle-TCdgqawd.js');
+var LocalizationContext = require('../../chunks/bundle-80bw1Z-w.js');
+var ui_Avatar = require('../../chunks/bundle-lj7KorhP.js');
+var ui_Label = require('../../chunks/bundle-fTDV9UxX.js');
+require('../../chunks/bundle-ACXel153.js');
+require('../../chunks/bundle-VHUezYnn.js');
+require('../../chunks/bundle-mc8PQfi_.js');
+require('../../chunks/bundle-pLajF9mf.js');
+require('../../chunks/bundle-EVv3xRW8.js');
 require('@sendbird/chat/message');
-require('../../index-54279ec2.js');
-require('../../useSendMultipleFilesMessage-d6a3d5cf.js');
-require('../../pubSub/topics.js');
+require('../../chunks/bundle-RG3ZDmvE.js');
+require('../../chunks/bundle-bQffWPr0.js');
+require('../../chunks/bundle-a_NGo240.js');
+require('../../chunks/bundle-BUF_nc4Q.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../compareIds-28c6af62.js');
-require('../../index-dbe8dd84.js');
 require('@sendbird/chat/groupChannel');
-require('../../uuid-9a117e16.js');
-require('../../_rollupPluginBabelHelpers-f5b0dfb9.js');
-require('../../resolvedReplyType-c4564ebe.js');
-require('../../LocalizationContext-58b6ed7c.js');
-require('../../stringSet-1539ac47.js');
-require('../../index-b5a9b4b7.js');
-require('prop-types');
+require('../../chunks/bundle-Z8uBiYyS.js');
+require('../hooks/useInitialMessagesFetch.js');
+require('../../chunks/bundle-6fWeHUzf.js');
+require('../../chunks/bundle-wPu8WyIh.js');
+require('../../chunks/bundle-leALuaxJ.js');
 require('../../ui/Loader.js');
+require('../../chunks/bundle-viTxhrPr.js');
+require('../../chunks/bundle-5l7POen0.js');
 require('./SuggestedMentionList.js');
-require('../../ui/Avatar.js');
-require('../../ui/ImageRenderer.js');
-require('../../const-876980e8.js');
+require('../../chunks/bundle-YRW87MiX.js');
 require('../../Thread/context.js');
 require('../../Thread/context/types.js');
 require('@sendbird/chat');
+require('../../ui/ImageRenderer.js');
+require('../../withSendbird.js');
 require('../../ui/DateSeparator.js');
-require('../../color-5bf5a8f5.js');
+require('../../chunks/bundle-oISd80pA.js');
 require('../../ui/MessageInput.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../types-d0d770c3.js');
-require('../../index-cc2e05a4.js');
+require('../../chunks/bundle-LoNtsKOJ.js');
 require('dompurify');
-require('../../consts-b3c4f548.js');
-require('../../consts-61d83828.js');
-require('../../consts-b711321c.js');
-require('../../tokenize-d5286fa8.js');
+require('../../chunks/bundle-PoR4V_kd.js');
+require('../../chunks/bundle-MB8QdyyQ.js');
+require('../../chunks/bundle-DRPbz-J2.js');
+require('../../chunks/bundle-Bekm94S6.js');
 require('../../ui/MessageContent.js');
-require('../../ui/UserProfile.js');
-require('../../sendbirdSelectors.js');
-require('../../utils-eb6d90e0.js');
-require('../../index-520e12b8.js');
-require('../../index-7627b546.js');
-require('../../index-134e9852.js');
+require('../../chunks/bundle-Y0ibVW_O.js');
+require('../../chunks/bundle-cKt6NzI1.js');
+require('../../chunks/bundle-uE1K1eGs.js');
 require('../../ui/MessageItemMenu.js');
 require('../../ui/ContextMenu.js');
 require('react-dom');
 require('../../ui/SortByRow.js');
-require('../../types-feda9656.js');
+require('../../chunks/bundle-M6v8bdc6.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/ReactionButton.js');
-require('../../useLongPress-18b7af79.js');
-require('../../MediaQueryContext-6141d955.js');
+require('../../chunks/bundle-FCrfVx0P.js');
+require('../../chunks/bundle-kkxTVcGD.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/BottomSheet.js');
-require('../../index-b8ba4548.js');
+require('../../hooks/useModal.js');
+require('../../chunks/bundle-o66lc7qg.js');
 require('../../ui/UserListItem.js');
 require('../../ui/MutedAvatarOverlay.js');
 require('../../ui/Checkbox.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
 require('../../ui/AdminMessage.js');
-require('../../ui/TextMessageItemBody.js');
-require('../../index-ce07a2a3.js');
+require('../../ui/QuoteMessage.js');
+require('../../chunks/bundle-lkluBCYi.js');
+require('../../chunks/bundle-h48X_8mu.js');
+require('../../ui/ThreadReplies.js');
+require('../../ui/OGMessageItemBody.js');
+require('../../chunks/bundle-3qeMVUne.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
+require('../../ui/TextMessageItemBody.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
-require('../../ui/ThumbnailMessageItemBody.js');
-require('../../utils-93ca9d57.js');
-require('../../ui/OGMessageItemBody.js');
-require('../../ui/UnknownMessageItemBody.js');
-require('../../ui/QuoteMessage.js');
-require('../../index-e5e6d9b0.js');
-require('../../ui/ThreadReplies.js');
+require('../../chunks/bundle-Co06yFqb.js');
+require('../../chunks/bundle-t70SIG3R.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../index-a95c4ab4.js');
+require('../../chunks/bundle-oiMScSG6.js');
 require('../../VoiceRecorder/context.js');
-require('../../ui/Modal.js');
-require('../../withSendbird.js');
 require('../../ui/PlaybackTime.js');
-require('../../useStatefulFileInfoList-c510792f.js');
-require('../../index-bc6623d7.js');
+require('../../ui/ThumbnailMessageItemBody.js');
+require('../../ui/UnknownMessageItemBody.js');
 require('./FileViewer.js');
 require('./RemoveMessageModal.js');
-require('../../stringFormatterUtils-92dbef3c.js');
+require('../../chunks/bundle-A9-xoiFy.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 TypingDots = function () {
+    return (React.createElement("div", { className: 'typing-dots-container' },
+        React.createElement("span", null),
+        React.createElement("span", null),
+        React.createElement("span", null)));
+};
+
+function TypingIndicatorMessage(_a) {
+    var typingMember = _a.typingMember;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: 'sendbird-message-content incoming', style: { marginBottom: '2px' } },
+        React.createElement("div", { className: 'sendbird-message-content__left incoming' },
+            React.createElement(ui_Avatar.Avatar, { className: 'sendbird-message-content__left__avatar', src: typingMember.profileUrl || '', 
+                // TODO: Divide getting profileUrl logic to utils
+                width: "28px", height: "28px" })),
+        React.createElement("div", { className: 'sendbird-message-content__middle' },
+            React.createElement(ui_Label.Label, { className: "sendbird-message-content__middle__sender-name", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, "".concat(typingMember.nickname, " ").concat(stringSet.TYPING_INDICATOR__IS_TYPING)),
+            React.createElement(TypingDots, 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, typingMembers = _c.typingMembers;
+    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 })));
+                    }),
+                    typingMembers.map(function (typingMember) {
+                        var _a;
+                        var isMe = typingMember.userId === ((_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.userId);
+                        return isMe
+                            ? null
+                            : React.createElement(TypingIndicatorMessage, { typingMember: typingMember });
+                    }))),
+            (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;