@sendbird/uikit-react 3.14.5 → 3.14.7-rc-1

package/cjs/GroupChannel/components/MessageInputWrapper.js

@@ -2,69 +2,66 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var MessageInputWrapperView = require('../../chunks/bundle-BiTKgXrx.js');
+var MessageInputWrapperView = require('../../chunks/bundle-B1c1ZdU0.js');
 var GroupChannel_context = require('../context.js');
 var uikitTools = require('@sendbird/uikit-tools');
-var index = require('../../chunks/bundle-Cw7xe6J1.js');
+var index = require('../../chunks/bundle-CRjV-DLM.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-require('../../chunks/bundle-DvpCzVKY.js');
-require('../../chunks/bundle-B7wJ4Hqk.js');
-require('../../chunks/bundle-DWBc-Yv7.js');
-require('../../chunks/bundle-CDJXrIVC.js');
+require('../../chunks/bundle-DOQVOQQY.js');
+require('../../chunks/bundle-u9XWE6Rm.js');
+require('../../chunks/bundle-5FP1wNLB.js');
+require('../../chunks/bundle-dokTsajJ.js');
 require('./SuggestedMentionList.js');
-require('../../chunks/bundle-dr9zoU1D.js');
-require('../../chunks/bundle-Deao1Upp.js');
+require('../../chunks/bundle-0QB2GZ_W.js');
+require('../../chunks/bundle-DgWaY7S0.js');
 require('../../ui/Icon.js');
-require('../../chunks/bundle-CLte647H.js');
-require('../../chunks/bundle-C0ZNrrcl.js');
+require('../../chunks/bundle-FcnFNV4V.js');
+require('../../chunks/bundle-BpJxkKab.js');
 require('../../ui/ImageRenderer.js');
-require('../../chunks/bundle-CxNGVWIy.js');
-require('../../chunks/bundle-Ub33KGva.js');
-require('../../chunks/bundle-B2KKkvdj.js');
-require('../../chunks/bundle-C4UzGGy_.js');
+require('../../chunks/bundle-Ca2fr0Kb.js');
+require('../../chunks/bundle-nJ_H0gk1.js');
+require('../../chunks/bundle-Bz2MU4JV.js');
+require('../../chunks/bundle-WrRM6A2K.js');
 require('../../withSendbird.js');
 require('../../Message/hooks/useDirtyGetMentions.js');
 require('../../ui/QuoteMessageInput.js');
-require('../../chunks/bundle-DmVeFWB4.js');
+require('../../chunks/bundle-DTtY3_Ni.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../chunks/bundle-BAqFIbKr.js');
-require('../../chunks/bundle-Ca7xeBTO.js');
-require('../../chunks/bundle-DJ9gapN2.js');
+require('../../chunks/bundle-DzkRFA4-.js');
+require('../../chunks/bundle-B9KKI197.js');
+require('../../chunks/bundle-CkSDsWpR.js');
 require('react-dom');
-require('../../chunks/bundle-CLNUkVC8.js');
+require('../../chunks/bundle-Bsd8mnLE.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
 require('css-vars-ponyfill');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('@sendbird/chat/groupChannel');
-require('../../chunks/bundle-Bpy7IQta.js');
+require('../../chunks/bundle-K2UuTY_r.js');
 require('../../VoiceRecorder/useVoiceRecorder.js');
-require('../../chunks/bundle-DGJX80zy.js');
+require('../../chunks/bundle-3m9OAKfW.js');
 require('../../ui/PlaybackTime.js');
 require('../../ui/ProgressBar.js');
 require('../../ui/TextButton.js');
-require('../../chunks/bundle-DWGp201o.js');
+require('../../chunks/bundle-D91GTav0.js');
 require('../../ui/MessageInput.js');
-require('../../chunks/bundle-BOrMDMdN.js');
+require('../../chunks/bundle-DLgT0MKO.js');
 require('dompurify');
-require('../../chunks/bundle-ClBBhzU-.js');
-require('../../chunks/bundle-SfusZfMJ.js');
-require('../../chunks/bundle-D4e0UT-6.js');
-require('../../chunks/bundle-DFVUnSWq.js');
-require('../../chunks/bundle-cl2q8NwQ.js');
+require('../../chunks/bundle-BZf2YVCr.js');
+require('../../chunks/bundle-Co2OfFRh.js');
+require('../../chunks/bundle-B8SH2f7F.js');
+require('../../chunks/bundle-VNK4cKfS.js');
+require('../../chunks/bundle-JqwDNyBE.js');
 require('@sendbird/chat/message');
-require('../../chunks/bundle-D7v4i_Ae.js');
-require('../../chunks/bundle-xADAFEo0.js');
-require('../../chunks/bundle-BG8qs_3y.js');
-require('../../chunks/bundle-hXD0NDZt.js');
-require('../../chunks/bundle-D1X4MKLh.js');
-require('../../chunks/bundle-BMN1aDia.js');
-require('../../chunks/bundle-BCQxFX-W.js');
-require('../../chunks/bundle-DpK1fr1j.js');
-require('../../chunks/bundle-30fh5iPx.js');
+require('../../chunks/bundle-Ch54AIEU.js');
+require('../../chunks/bundle-unWzPBv1.js');
+require('../../chunks/bundle-BarChVO6.js');
+require('../../chunks/bundle-ClUKx_l3.js');
+require('../../chunks/bundle-C9goSwm_.js');
+require('../../chunks/bundle-CXyVP3ik.js');
 require('../../utils/message/getOutgoingMessageState.js');
 
 var MessageInputWrapper = function (props) {
@@ -77,7 +74,7 @@ var MessageInputWrapper = function (props) {
         var _a;
         if (!((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies))
             return false;
-        if (index.getSuggestedReplies(lastMessage).length === 0)
+        if (index.getSuggestedReplies(lastMessage !== null && lastMessage !== void 0 ? lastMessage : undefined).length === 0)
             return false;
         var lastMessageInContext = messages[messages.length - 1];
         if (index.isSendableMessage(lastMessageInContext) && lastMessageInContext.sendingStatus !== 'succeeded')
@@ -85,7 +82,7 @@ var MessageInputWrapper = function (props) {
         return true;
     });
     var disableMessageInput = props.disabled
-        || isLastMessageSuggestedRepliesEnabled && !!((_a = lastMessage.extendedMessagePayload) === null || _a === void 0 ? void 0 : _a['disable_chat_input']);
+        || isLastMessageSuggestedRepliesEnabled && !!((_a = lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.extendedMessagePayload) === null || _a === void 0 ? void 0 : _a['disable_chat_input']);
     return (React.createElement(MessageInputWrapperView.MessageInputWrapperView, _tslib.__assign({}, props, context, { disabled: disableMessageInput })));
 };
 

package/cjs/GroupChannel/components/MessageInputWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInputWrapper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageInputWrapper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/GroupChannel/components/MessageList.js

@@ -2,99 +2,100 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
 var uikitTools = require('@sendbird/uikit-tools');
-var index = require('../../chunks/bundle-Cw7xe6J1.js');
+var index = require('../../chunks/bundle-CRjV-DLM.js');
 var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
 var ui_Icon = require('../../ui/Icon.js');
 var GroupChannel_components_Message = require('./Message.js');
-var Channel_utils_getMessagePartsInfo = require('../../Channel/utils/getMessagePartsInfo.js');
 var GroupChannel_components_UnreadCount = require('./UnreadCount.js');
 var GroupChannel_components_FrozenNotification = require('./FrozenNotification.js');
-var consts = require('../../chunks/bundle-Ca7xeBTO.js');
+var consts = require('../../chunks/bundle-B9KKI197.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var Message_context = require('../../Message/context.js');
 var ui_TypingIndicatorBubble = require('../../ui/TypingIndicatorBubble.js');
 var GroupChannel_context = require('../context.js');
-var utils$1 = require('../../chunks/bundle-DvpCzVKY.js');
-var utils = require('../../chunks/bundle-CLte647H.js');
+var utils$1 = require('../../chunks/bundle-FcnFNV4V.js');
+var Channel_utils_getMessagePartsInfo = require('../../Channel/utils/getMessagePartsInfo.js');
+var Message_context = require('../../Message/context.js');
+var utils$2 = require('../../chunks/bundle-DOQVOQQY.js');
+var utils = require('../../chunks/bundle-BYarXD6U.js');
 require('@sendbird/chat/groupChannel');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-B7wJ4Hqk.js');
-require('../../chunks/bundle-DWBc-Yv7.js');
-require('../../chunks/bundle-CDJXrIVC.js');
-require('../../chunks/bundle-Deao1Upp.js');
+require('../../chunks/bundle-u9XWE6Rm.js');
+require('../../chunks/bundle-5FP1wNLB.js');
+require('../../chunks/bundle-dokTsajJ.js');
+require('../../chunks/bundle-DgWaY7S0.js');
 require('../../ui/Loader.js');
-require('../../chunks/bundle-Cvu5DOpl.js');
-require('../../chunks/bundle-CjYhSLRD.js');
-require('../../chunks/bundle-B2KKkvdj.js');
+require('../../chunks/bundle-DwaO4lk0.js');
+require('../../chunks/bundle-D95F7WKf.js');
+require('../../chunks/bundle-Bz2MU4JV.js');
 require('../../Message/hooks/useDirtyGetMentions.js');
 require('../../ui/DateSeparator.js');
-require('../../chunks/bundle-DWGp201o.js');
+require('../../chunks/bundle-D91GTav0.js');
 require('../../ui/MessageInput.js');
-require('../../chunks/bundle-C4UzGGy_.js');
+require('../../chunks/bundle-WrRM6A2K.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../chunks/bundle-BOrMDMdN.js');
+require('../../chunks/bundle-DLgT0MKO.js');
 require('dompurify');
-require('../../chunks/bundle-ClBBhzU-.js');
-require('../../chunks/bundle-SfusZfMJ.js');
-require('../../chunks/bundle-D4e0UT-6.js');
-require('../../chunks/bundle-DFVUnSWq.js');
+require('../../chunks/bundle-BZf2YVCr.js');
+require('../../chunks/bundle-Co2OfFRh.js');
+require('../../chunks/bundle-B8SH2f7F.js');
+require('../../chunks/bundle-VNK4cKfS.js');
+require('../../withSendbird.js');
 require('../../ui/MessageContent.js');
-require('../../chunks/bundle-DsrfvJYA.js');
-require('../../chunks/bundle-CgOafeY_.js');
-require('../../chunks/bundle-CL-vjR4o.js');
+require('../../chunks/bundle-Dur9d2k7.js');
+require('../../chunks/bundle-Dq1gBmDY.js');
+require('../../chunks/bundle-Bs4qGnBO.js');
 require('../../ui/MessageItemMenu.js');
 require('../../ui/ContextMenu.js');
-require('../../chunks/bundle-Bpy7IQta.js');
+require('../../chunks/bundle-K2UuTY_r.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('../../ui/SortByRow.js');
-require('../../chunks/bundle-Ub33KGva.js');
-require('../../chunks/bundle-Ci6F_UQc.js');
+require('../../chunks/bundle-nJ_H0gk1.js');
+require('../../chunks/bundle-B40JIKoL.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/ImageRenderer.js');
 require('../../ui/ReactionButton.js');
-require('../../chunks/bundle-Pfx0MBr4.js');
-require('../../chunks/bundle-CLNUkVC8.js');
+require('../../chunks/bundle-DmfO6_lp.js');
+require('../../chunks/bundle-Bsd8mnLE.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/BottomSheet.js');
-require('../../chunks/bundle-DJ9gapN2.js');
-require('../../withSendbird.js');
+require('../../chunks/bundle-CkSDsWpR.js');
 require('css-vars-ponyfill');
-require('../../chunks/bundle-BAqFIbKr.js');
+require('../../chunks/bundle-DzkRFA4-.js');
 require('../../ui/UserListItem.js');
-require('../../chunks/bundle-D7v4i_Ae.js');
-require('../../chunks/bundle-C0ZNrrcl.js');
-require('../../chunks/bundle-CxNGVWIy.js');
+require('../../chunks/bundle-Ch54AIEU.js');
+require('../../chunks/bundle-BpJxkKab.js');
+require('../../chunks/bundle-Ca2fr0Kb.js');
 require('../../ui/MutedAvatarOverlay.js');
 require('../../ui/Checkbox.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../chunks/bundle-DpK1fr1j.js');
+require('../../chunks/bundle-C9goSwm_.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
-require('../../chunks/bundle-30fh5iPx.js');
+require('../../chunks/bundle-CXyVP3ik.js');
 require('../../ui/AdminMessage.js');
 require('../../ui/QuoteMessage.js');
-require('../../chunks/bundle-DmVeFWB4.js');
+require('../../chunks/bundle-DTtY3_Ni.js');
 require('@sendbird/chat/message');
-require('../../chunks/bundle-BvhC4El1.js');
+require('../../chunks/bundle-CMNar_06.js');
 require('../../ui/ThreadReplies.js');
 require('../../ui/OGMessageItemBody.js');
-require('../../chunks/bundle-BCt-Rzil.js');
+require('../../chunks/bundle-WLDzr4U5.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
 require('../../ui/TextMessageItemBody.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/TextButton.js');
-require('../../chunks/bundle-B1uXZFKP.js');
-require('../../chunks/bundle-IZLtKe6R.js');
-require('../../chunks/bundle-D9UFa9yx.js');
+require('../../chunks/bundle-DxUpLiXa.js');
+require('../../chunks/bundle-CvkPNwGA.js');
+require('../../chunks/bundle-Cf4_cCe9.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
@@ -102,7 +103,7 @@ require('../../ui/PlaybackTime.js');
 require('../../ui/ThumbnailMessageItemBody.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('../../ui/TemplateMessageItemBody.js');
-require('../../chunks/bundle-jLW3AG2G.js');
+require('../../chunks/bundle-Co7peqju.js');
 require('../../ui/FallbackTemplateMessageItemBody.tsx.js');
 require('../../ui/LoadingTemplateMessageItemBody.tsx.js');
 require('../../ui/FeedbackIconButton.js');
@@ -111,25 +112,94 @@ require('../../ui/MessageFeedbackModal.js');
 require('../../ui/Input.js');
 require('../../ui/MessageFeedbackFailedModal.js');
 require('./SuggestedReplies.js');
-require('../../chunks/bundle-dr9zoU1D.js');
+require('../../chunks/bundle-0QB2GZ_W.js');
 require('./FileViewer.js');
-require('../../chunks/bundle-DZMn5ScB.js');
+require('../../chunks/bundle-Btk78hMe.js');
+require('../../chunks/bundle-unWzPBv1.js');
+require('../../chunks/bundle-BarChVO6.js');
+require('../../chunks/bundle-ClUKx_l3.js');
 require('./RemoveMessageModal.js');
-require('../../chunks/bundle-WETElB-o.js');
-require('../../chunks/bundle-Bw_LvbLk.js');
+require('../../chunks/bundle-C5bS3zdm.js');
+require('../../chunks/bundle-CLMFxMug.js');
 require('../../Channel/utils/compareMessagesForGrouping.js');
-require('../../chunks/bundle-xADAFEo0.js');
-require('../../chunks/bundle-BG8qs_3y.js');
-require('../../chunks/bundle-hXD0NDZt.js');
-require('../../chunks/bundle-D1X4MKLh.js');
-require('../../chunks/bundle-BMN1aDia.js');
-require('../../chunks/bundle-BCQxFX-W.js');
+
+var InfiniteList = React.forwardRef(function (props, listRef) {
+    var messages = props.messages, renderMessage = props.renderMessage, scrollPositionRef = props.scrollPositionRef, scrollDistanceFromBottomRef = props.scrollDistanceFromBottomRef, onLoadPrevious = props.onLoadPrevious, onLoadNext = props.onLoadNext, _a = props.loadThreshold, loadThreshold = _a === void 0 ? 0.05 : _a, typingIndicator = props.typingIndicator, _b = props.onScrollPosition, onScrollPosition = _b === void 0 ? utils$1.noop : _b;
+    var isFetching = React.useRef(false);
+    var direction = React.useRef();
+    var oldScrollTop = React.useRef(0);
+    // SideEffect: keep scroll position
+    React.useLayoutEffect(function () {
+        if (listRef.current) {
+            if (direction.current === 'top') {
+                listRef.current.scrollTop = listRef.current.scrollHeight - scrollPositionRef.current;
+            }
+            if (direction.current === 'bottom') {
+                listRef.current.scrollTop = oldScrollTop.current;
+            }
+            direction.current = undefined;
+        }
+    }, [listRef.current, messages.length]);
+    var handleScroll = function () { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+        var list, threshold;
+        return _tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!listRef.current)
+                        return [2 /*return*/];
+                    list = listRef.current;
+                    onScrollPosition(getReachedStatus(list));
+                    scrollPositionRef.current = list.scrollHeight - list.scrollTop;
+                    scrollDistanceFromBottomRef.current = scrollPositionRef.current - list.clientHeight;
+                    oldScrollTop.current = list.scrollTop;
+                    if (isFetching.current)
+                        return [2 /*return*/];
+                    threshold = list.clientHeight * Math.min(Math.max(0, loadThreshold), 1);
+                    if (!(list.scrollTop <= threshold)) return [3 /*break*/, 2];
+                    isFetching.current = true;
+                    direction.current = 'top';
+                    return [4 /*yield*/, onLoadPrevious()];
+                case 1:
+                    _a.sent();
+                    isFetching.current = false;
+                    return [3 /*break*/, 5];
+                case 2:
+                    if (!(list.scrollHeight - list.scrollTop - list.clientHeight <= threshold)) return [3 /*break*/, 4];
+                    isFetching.current = true;
+                    direction.current = 'bottom';
+                    return [4 /*yield*/, onLoadNext()];
+                case 3:
+                    _a.sent();
+                    isFetching.current = false;
+                    return [3 /*break*/, 5];
+                case 4:
+                    direction.current = undefined;
+                    _a.label = 5;
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React.createElement("div", { className: "sendbird-conversation__scroll-container" },
+        React.createElement("div", { className: "sendbird-conversation__padding" }),
+        React.createElement("div", { ref: listRef, className: "sendbird-conversation__messages-padding", "data-testid": "sendbird-message-list-container", onScroll: handleScroll },
+            messages.map(function (message, index) { return renderMessage({ message: message, index: index }); }),
+            typingIndicator)));
+});
+function getReachedStatus(element) {
+    if (utils.isAboutSame(element.scrollTop, 0, consts.SCROLL_BUFFER)) {
+        return 'top';
+    }
+    if (utils.isAboutSame(element.scrollHeight, element.clientHeight + element.scrollTop, consts.SCROLL_BUFFER)) {
+        return 'bottom';
+    }
+    return 'middle';
+}
 
 var MessageList = function (props) {
     var _a, _b, _c, _d, _e;
     var _f = props.className, className = _f === void 0 ? '' : _f;
-    var _g = utils.deleteNullish(props), _h = _g.renderMessage, renderMessage = _h === void 0 ? function (props) { return React.createElement(GroupChannel_components_Message.Message, _tslib.__assign({}, props)); } : _h, renderMessageContent = _g.renderMessageContent, renderSuggestedReplies = _g.renderSuggestedReplies, renderCustomSeparator = _g.renderCustomSeparator, _j = _g.renderPlaceholderLoader, renderPlaceholderLoader = _j === void 0 ? function () { return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING }); } : _j, _k = _g.renderPlaceholderEmpty, renderPlaceholderEmpty = _k === void 0 ? function () { return React.createElement(ui_PlaceHolder.default, { className: "sendbird-conversation__no-messages", type: ui_PlaceHolder.PlaceHolderTypes.NO_MESSAGES }); } : _k, _l = _g.renderFrozenNotification, renderFrozenNotification = _l === void 0 ? function () { return React.createElement(GroupChannel_components_FrozenNotification.FrozenNotification, { className: "sendbird-conversation__messages__notification" }); } : _l;
-    var _m = GroupChannel_context.useGroupChannelContext(), channelUrl = _m.channelUrl, hasNext = _m.hasNext, loading = _m.loading, messages = _m.messages, newMessages = _m.newMessages, scrollToBottom = _m.scrollToBottom, isScrollBottomReached = _m.isScrollBottomReached, isMessageGroupingEnabled = _m.isMessageGroupingEnabled, scrollRef = _m.scrollRef, scrollDistanceFromBottomRef = _m.scrollDistanceFromBottomRef, currentChannel = _m.currentChannel, replyType = _m.replyType, scrollPubSub = _m.scrollPubSub;
+    var _g = utils$1.deleteNullish(props), _h = _g.renderMessage, renderMessage = _h === void 0 ? function (props) { return React.createElement(GroupChannel_components_Message.Message, _tslib.__assign({}, props)); } : _h, renderMessageContent = _g.renderMessageContent, renderSuggestedReplies = _g.renderSuggestedReplies, renderCustomSeparator = _g.renderCustomSeparator, _j = _g.renderPlaceholderLoader, renderPlaceholderLoader = _j === void 0 ? function () { return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING }); } : _j, _k = _g.renderPlaceholderEmpty, renderPlaceholderEmpty = _k === void 0 ? function () { return React.createElement(ui_PlaceHolder.default, { className: "sendbird-conversation__no-messages", type: ui_PlaceHolder.PlaceHolderTypes.NO_MESSAGES }); } : _k, _l = _g.renderFrozenNotification, renderFrozenNotification = _l === void 0 ? function () { return React.createElement(GroupChannel_components_FrozenNotification.FrozenNotification, { className: "sendbird-conversation__messages__notification" }); } : _l;
+    var _m = GroupChannel_context.useGroupChannelContext(), channelUrl = _m.channelUrl, hasNext = _m.hasNext, loading = _m.loading, messages = _m.messages, newMessages = _m.newMessages, scrollToBottom = _m.scrollToBottom, isScrollBottomReached = _m.isScrollBottomReached, isMessageGroupingEnabled = _m.isMessageGroupingEnabled, scrollRef = _m.scrollRef, scrollDistanceFromBottomRef = _m.scrollDistanceFromBottomRef, scrollPositionRef = _m.scrollPositionRef, currentChannel = _m.currentChannel, replyType = _m.replyType, scrollPubSub = _m.scrollPubSub, loadNext = _m.loadNext, loadPrevious = _m.loadPrevious, setIsScrollBottomReached = _m.setIsScrollBottomReached;
     var store = useSendbirdStateContext.useSendbirdStateContext();
     var _o = React.useState(), unreadSinceDate = _o[0], setUnreadSinceDate = _o[1];
     React.useEffect(function () {
@@ -184,33 +254,30 @@ var MessageList = function (props) {
     }
     return (React.createElement(React.Fragment, null,
         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", { ref: scrollRef, className: "sendbird-conversation__messages-padding" },
-                    messages.map(function (message, idx) {
-                        var _a = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
-                            allMessages: messages,
-                            replyType: replyType,
-                            isMessageGroupingEnabled: isMessageGroupingEnabled,
-                            currentIndex: idx,
-                            currentMessage: message,
-                            currentChannel: currentChannel,
-                        }), chainTop = _a.chainTop, chainBottom = _a.chainBottom, hasSeparator = _a.hasSeparator;
-                        var isOutgoingMessage = index.isSendableMessage(message) && message.sender.userId === store.config.userId;
-                        return (React.createElement(Message_context.MessageProvider, { message: message, key: utils$1.getComponentKeyFromMessage(message), isByMe: isOutgoingMessage }, renderMessage({
-                            handleScroll: onMessageContentSizeChanged,
-                            message: message,
-                            hasSeparator: hasSeparator,
-                            chainTop: chainTop,
-                            chainBottom: chainBottom,
-                            renderMessageContent: renderMessageContent,
-                            renderSuggestedReplies: renderSuggestedReplies,
-                            renderCustomSeparator: renderCustomSeparator,
-                        })));
-                    }),
-                    !hasNext()
-                        && ((_b = (_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.groupChannel) === null || _b === void 0 ? void 0 : _b.enableTypingIndicator)
-                        && ((_e = (_d = (_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.groupChannel) === null || _d === void 0 ? void 0 : _d.typingIndicatorTypes) === null || _e === void 0 ? void 0 : _e.has(index.TypingIndicatorType.Bubble)) && (React.createElement(TypingIndicatorBubbleWrapper, { channelUrl: channelUrl, handleScroll: onMessageContentSizeChanged })))),
+            React.createElement(InfiniteList, { ref: scrollRef, scrollPositionRef: scrollPositionRef, scrollDistanceFromBottomRef: scrollDistanceFromBottomRef, onLoadNext: loadNext, onLoadPrevious: loadPrevious, onScrollPosition: function (it) { return setIsScrollBottomReached(it === 'bottom'); }, messages: messages, renderMessage: function (_a) {
+                    var message = _a.message, index$1 = _a.index;
+                    var _b = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
+                        allMessages: messages,
+                        replyType: replyType !== null && replyType !== void 0 ? replyType : 'NONE',
+                        isMessageGroupingEnabled: isMessageGroupingEnabled !== null && isMessageGroupingEnabled !== void 0 ? isMessageGroupingEnabled : false,
+                        currentIndex: index$1,
+                        currentMessage: message,
+                        currentChannel: currentChannel,
+                    }), chainTop = _b.chainTop, chainBottom = _b.chainBottom, hasSeparator = _b.hasSeparator;
+                    var isOutgoingMessage = index.isSendableMessage(message) && message.sender.userId === store.config.userId;
+                    return (React.createElement(Message_context.MessageProvider, { message: message, key: utils$2.getComponentKeyFromMessage(message), isByMe: isOutgoingMessage }, renderMessage({
+                        handleScroll: onMessageContentSizeChanged,
+                        message: message,
+                        hasSeparator: hasSeparator,
+                        chainTop: chainTop,
+                        chainBottom: chainBottom,
+                        renderMessageContent: renderMessageContent,
+                        renderSuggestedReplies: renderSuggestedReplies,
+                        renderCustomSeparator: renderCustomSeparator,
+                    })));
+                }, typingIndicator: !hasNext()
+                    && ((_b = (_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.groupChannel) === null || _b === void 0 ? void 0 : _b.enableTypingIndicator)
+                    && ((_e = (_d = (_c = store === null || store === void 0 ? void 0 : store.config) === null || _c === void 0 ? void 0 : _c.groupChannel) === null || _d === void 0 ? void 0 : _d.typingIndicatorTypes) === null || _e === void 0 ? void 0 : _e.has(index.TypingIndicatorType.Bubble)) && (React.createElement(TypingIndicatorBubbleWrapper, { channelUrl: channelUrl, handleScroll: onMessageContentSizeChanged })) }),
             React.createElement(React.Fragment, null, renderer.frozenNotification()),
             React.createElement(React.Fragment, null, renderer.unreadMessagesNotification()),
             React.createElement(React.Fragment, null, renderer.scrollToBottomButton()))));

package/cjs/GroupChannel/components/MessageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageList.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/GroupChannel/components/RemoveMessageModal.js

@@ -2,46 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
 var GroupChannel_context = require('../context.js');
-var RemoveMessageModalView = require('../../chunks/bundle-WETElB-o.js');
+var RemoveMessageModalView = require('../../chunks/bundle-C5bS3zdm.js');
 require('@sendbird/chat/message');
 require('@sendbird/chat/groupChannel');
 require('@sendbird/uikit-tools');
-require('../../chunks/bundle-D7v4i_Ae.js');
+require('../../chunks/bundle-Ch54AIEU.js');
 require('../../useSendbirdStateContext.js');
 require('../../withSendbird.js');
-require('../../chunks/bundle-xADAFEo0.js');
-require('../../chunks/bundle-BG8qs_3y.js');
-require('../../chunks/bundle-DvpCzVKY.js');
-require('../../chunks/bundle-hXD0NDZt.js');
-require('../../chunks/bundle-Ca7xeBTO.js');
-require('../../chunks/bundle-D1X4MKLh.js');
-require('../../chunks/bundle-BMN1aDia.js');
-require('../../chunks/bundle-BCQxFX-W.js');
-require('../../chunks/bundle-DpK1fr1j.js');
-require('../../chunks/bundle-30fh5iPx.js');
-require('../../chunks/bundle-DJ9gapN2.js');
-require('../../chunks/bundle-Cw7xe6J1.js');
+require('../../chunks/bundle-unWzPBv1.js');
+require('../../chunks/bundle-BarChVO6.js');
+require('../../chunks/bundle-DOQVOQQY.js');
+require('../../chunks/bundle-ClUKx_l3.js');
+require('../../chunks/bundle-C9goSwm_.js');
+require('../../chunks/bundle-B9KKI197.js');
+require('../../chunks/bundle-CXyVP3ik.js');
+require('../../chunks/bundle-CkSDsWpR.js');
+require('../../chunks/bundle-CRjV-DLM.js');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-CLte647H.js');
+require('../../chunks/bundle-FcnFNV4V.js');
 require('react-dom');
-require('../../chunks/bundle-B7wJ4Hqk.js');
-require('../../chunks/bundle-DWBc-Yv7.js');
-require('../../chunks/bundle-CDJXrIVC.js');
-require('../../chunks/bundle-CLNUkVC8.js');
+require('../../chunks/bundle-u9XWE6Rm.js');
+require('../../chunks/bundle-5FP1wNLB.js');
+require('../../chunks/bundle-dokTsajJ.js');
+require('../../chunks/bundle-Bsd8mnLE.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
-require('../../chunks/bundle-Deao1Upp.js');
+require('../../chunks/bundle-DgWaY7S0.js');
 require('../../ui/Icon.js');
 require('css-vars-ponyfill');
 require('@sendbird/chat');
-require('../../chunks/bundle-Ub33KGva.js');
+require('../../chunks/bundle-nJ_H0gk1.js');
 require('@sendbird/chat/openChannel');
-require('../../chunks/bundle-BAqFIbKr.js');
-require('../../chunks/bundle-Bpy7IQta.js');
-require('../../chunks/bundle-Bw_LvbLk.js');
+require('../../chunks/bundle-DzkRFA4-.js');
+require('../../chunks/bundle-K2UuTY_r.js');
+require('../../chunks/bundle-CLMFxMug.js');
 
 var RemoveMessageModal = function (props) {
     var deleteMessage = GroupChannel_context.useGroupChannelContext().deleteMessage;

package/cjs/GroupChannel/components/RemoveMessageModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RemoveMessageModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RemoveMessageModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/GroupChannel/components/SuggestedMentionList.js

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var SuggestedMentionListView = require('../../chunks/bundle-dr9zoU1D.js');
-require('../../chunks/bundle-Deao1Upp.js');
-require('../../chunks/bundle-DWBc-Yv7.js');
+var SuggestedMentionListView = require('../../chunks/bundle-0QB2GZ_W.js');
+require('../../chunks/bundle-DgWaY7S0.js');
+require('../../chunks/bundle-5FP1wNLB.js');
 require('../../ui/Icon.js');
-require('../../chunks/bundle-CLte647H.js');
-require('../../chunks/bundle-C0ZNrrcl.js');
+require('../../chunks/bundle-FcnFNV4V.js');
+require('../../chunks/bundle-BpJxkKab.js');
 require('../../ui/ImageRenderer.js');
-require('../../chunks/bundle-CxNGVWIy.js');
-require('../../chunks/bundle-B7wJ4Hqk.js');
-require('../../chunks/bundle-CDJXrIVC.js');
-require('../../chunks/bundle-Ub33KGva.js');
+require('../../chunks/bundle-Ca2fr0Kb.js');
+require('../../chunks/bundle-u9XWE6Rm.js');
+require('../../chunks/bundle-dokTsajJ.js');
+require('../../chunks/bundle-nJ_H0gk1.js');
 require('../../useSendbirdStateContext.js');
 require('../../withSendbird.js');
-require('../../chunks/bundle-B2KKkvdj.js');
-require('../../chunks/bundle-C4UzGGy_.js');
+require('../../chunks/bundle-Bz2MU4JV.js');
+require('../../chunks/bundle-WrRM6A2K.js');
 
 var SuggestedMentionList = function (props) {
     return (React.createElement(SuggestedMentionListView.SuggestedMentionListView, _tslib.__assign({}, props)));

package/cjs/GroupChannel/components/TypingIndicator.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var ui_Label = require('../../chunks/bundle-Deao1Upp.js');
-var LocalizationContext = require('../../chunks/bundle-B7wJ4Hqk.js');
+var ui_Label = require('../../chunks/bundle-DgWaY7S0.js');
+var LocalizationContext = require('../../chunks/bundle-u9XWE6Rm.js');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var uuid = require('../../chunks/bundle-Ub33KGva.js');
-require('../../chunks/bundle-C-r9vRgc.js');
-require('../../chunks/bundle-DWBc-Yv7.js');
-require('../../chunks/bundle-CDJXrIVC.js');
+var uuid = require('../../chunks/bundle-nJ_H0gk1.js');
+require('../../chunks/bundle-BGmEoqIq.js');
+require('../../chunks/bundle-5FP1wNLB.js');
+require('../../chunks/bundle-dokTsajJ.js');
 require('../../withSendbird.js');
 
 var TypingIndicatorText = function (_a) {