@sendbird/uikit-react 3.14.3 → 3.14.5

package/cjs/Thread/components/ThreadUI.js

@@ -2,8 +2,8 @@
 
 var React = require('react');
 var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
-var LocalizationContext = require('../../chunks/bundle-E9H8fQL4.js');
-var utils = require('../../chunks/bundle-CBmExSEr.js');
+var LocalizationContext = require('../../chunks/bundle-B7wJ4Hqk.js');
+var utils = require('../../chunks/bundle-B2h5VMZ6.js');
 var Thread_context = require('../context.js');
 var Thread_components_ParentMessageInfo = require('./ParentMessageInfo.js');
 var Thread_components_ThreadHeader = require('./ThreadHeader.js');
@@ -11,269 +11,269 @@ var Thread_components_ThreadList = require('./ThreadList.js');
 var Thread_components_ThreadMessageInput = require('./ThreadMessageInput.js');
 var Thread_context_types = require('../context/types.js');
 var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
-var ui_Label = require('../../chunks/bundle-BuYf2Pa8.js');
-var useSendMultipleFilesMessage = require('../../chunks/bundle-DbS-u43Y.js');
+var ui_Label = require('../../chunks/bundle-Deao1Upp.js');
+var useSendMultipleFilesMessage = require('../../chunks/bundle-Cc89qdjT.js');
 var Message_context = require('../../Message/context.js');
 require('../../withSendbird.js');
-require('../../chunks/bundle-CY1bUkfG.js');
-require('../../chunks/bundle-DvWHV-PM.js');
-require('../../chunks/bundle-BwvM-P29.js');
-require('../../chunks/bundle-C7_tieEZ.js');
+require('../../chunks/bundle-C-r9vRgc.js');
+require('../../chunks/bundle-DWBc-Yv7.js');
+require('../../chunks/bundle-CDJXrIVC.js');
+require('../../chunks/bundle-D7v4i_Ae.js');
 require('@sendbird/chat');
-require('../../chunks/bundle-0W_w8lRK.js');
-require('../../chunks/bundle-C-noHeKZ.js');
+require('../../chunks/bundle-DpK1fr1j.js');
+require('../../chunks/bundle-IE4yQ0qq.js');
 require('@sendbird/chat/groupChannel');
-require('../../chunks/bundle-BRjBigtB.js');
-require('../../chunks/bundle-DbykvtHO.js');
+require('../../chunks/bundle-Ub33KGva.js');
+require('../../chunks/bundle-CcmMvK6l.js');
 require('@sendbird/chat/message');
-require('../../chunks/bundle-DnXNmdmw.js');
-require('../../chunks/bundle-BmEl3iIW.js');
-require('../../chunks/bundle-CVSpiKNJ.js');
-require('../../chunks/bundle-fG1bRzYE.js');
+require('../../chunks/bundle-Ca7xeBTO.js');
+require('../../chunks/bundle-CjYhSLRD.js');
+require('../../chunks/bundle-Bc92JuA7.js');
+require('../../chunks/bundle-DJ9gapN2.js');
+require('../../chunks/bundle-Cw7xe6J1.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-CLte647H.js');
 require('react-dom');
-require('../../chunks/bundle-BDbnsPGF.js');
-require('../../chunks/bundle-BwEcnJDm.js');
+require('../../chunks/bundle-CLNUkVC8.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
 require('../../ui/Icon.js');
-require('../../chunks/bundle-q2tBQOdq.js');
-require('../../chunks/bundle-D3Gxy8S0.js');
-require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-Bka-H9ks.js');
+require('@sendbird/uikit-tools');
+require('css-vars-ponyfill');
+require('@sendbird/chat/openChannel');
+require('../../chunks/bundle-BAqFIbKr.js');
+require('../../chunks/bundle-Bpy7IQta.js');
+require('../../chunks/bundle-Bw_LvbLk.js');
 require('./ParentMessageInfoItem.js');
 require('../../ui/ImageRenderer.js');
 require('../../ui/TextButton.js');
-require('../../chunks/bundle-DI-qrtXL.js');
+require('../../chunks/bundle-DWGp201o.js');
 require('../../ui/EmojiReactions.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/ReactionButton.js');
-require('../../chunks/bundle-D4pqJjg-.js');
+require('../../chunks/bundle-Pfx0MBr4.js');
 require('../../ui/ContextMenu.js');
-require('@sendbird/chat/openChannel');
 require('../../ui/SortByRow.js');
 require('../../ui/BottomSheet.js');
-require('../../hooks/useModal.js');
 require('../../ui/UserListItem.js');
-require('../../chunks/bundle-oUs61pbv.js');
-require('../../chunks/bundle-C-zGGOpz.js');
+require('../../chunks/bundle-C0ZNrrcl.js');
+require('../../chunks/bundle-CxNGVWIy.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('../../chunks/bundle-C-gA8UhR.js');
+require('../../chunks/bundle-30fh5iPx.js');
 require('../../ui/VoiceMessageItemBody.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../chunks/bundle-DlPLp6fm.js');
-require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
 require('../../ui/Loader.js');
-require('../../chunks/bundle-Df0cAbH6.js');
-require('../../chunks/bundle-SdH24Cv9.js');
+require('../../chunks/bundle-BCt-Rzil.js');
+require('../../chunks/bundle-DFVUnSWq.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
-require('../../chunks/bundle-ChIhNCh1.js');
-require('../../chunks/bundle-D9hSjP4_.js');
-require('../../chunks/bundle-CEueJUxG.js');
-require('@sendbird/uikit-tools');
-require('../../chunks/bundle-u8pJrzSP.js');
-require('../../chunks/bundle-DLdV8LNR.js');
-require('../../chunks/bundle-D3tBia0F.js');
-require('../../chunks/bundle-B6uiunjG.js');
-require('../../chunks/bundle-BoCS4RH3.js');
+require('../../chunks/bundle-B1uXZFKP.js');
+require('../../chunks/bundle-IZLtKe6R.js');
+require('../../chunks/bundle-D9UFa9yx.js');
+require('../../chunks/bundle-D1X4MKLh.js');
+require('../../chunks/bundle-DOUm656A.js');
+require('../../chunks/bundle-dr9zoU1D.js');
+require('../../chunks/bundle-B2KKkvdj.js');
+require('../../chunks/bundle-C4UzGGy_.js');
 require('../../ui/MessageItemMenu.js');
-require('../../chunks/bundle-DdSNUhSn.js');
+require('../../chunks/bundle-Ci6F_UQc.js');
 require('../../ui/MessageItemReactionMenu.js');
 require('../../ui/MessageInput.js');
-require('../../chunks/bundle-C0LFi1ur.js');
+require('../../chunks/bundle-BOrMDMdN.js');
 require('dompurify');
-require('../../chunks/bundle-DPoAoYEl.js');
-require('../../chunks/bundle-DessEmBr.js');
-require('../../chunks/bundle-DIxulCCm.js');
-require('../../chunks/bundle-66eVSkB5.js');
+require('../../chunks/bundle-ClBBhzU-.js');
+require('../../chunks/bundle-SfusZfMJ.js');
+require('../../chunks/bundle-D4e0UT-6.js');
+require('../../chunks/bundle-BvhC4El1.js');
 require('../../Message/hooks/useDirtyGetMentions.js');
+require('../../chunks/bundle-BG8qs_3y.js');
+require('../../ui/Header.js');
 require('./ThreadListItem.js');
 require('../../ui/DateSeparator.js');
-require('../../chunks/bundle-DHuWzY0s.js');
-require('../../chunks/bundle-juHuQ6-V.js');
-require('../../chunks/bundle--yYCgVRq.js');
+require('../../chunks/bundle-DsrfvJYA.js');
+require('../../chunks/bundle-CgOafeY_.js');
+require('../../chunks/bundle-CL-vjR4o.js');
 require('../../ui/TextMessageItemBody.js');
 require('../../ui/OGMessageItemBody.js');
 require('../../ui/FileMessageItemBody.js');
 require('../../ui/ThumbnailMessageItemBody.js');
-require('../../chunks/bundle-DDmTdnuT.js');
+require('../../chunks/bundle-DmVeFWB4.js');
 require('../../ui/UnknownMessageItemBody.js');
 require('../../Channel/utils/compareMessagesForGrouping.js');
 require('date-fns');
-require('../../chunks/bundle-DR-T3oW9.js');
-require('../../chunks/bundle-BzR58JaC.js');
+require('../../chunks/bundle-BiTKgXrx.js');
+require('../../chunks/bundle-DvpCzVKY.js');
 require('../../GroupChannel/components/SuggestedMentionList.js');
 require('../../ui/QuoteMessageInput.js');
 require('../../VoiceRecorder/useVoiceRecorder.js');
-require('../../chunks/bundle-BRUrQgUE.js');
-require('../../chunks/bundle-ti18J4ii.js');
+require('../../chunks/bundle-DGJX80zy.js');
+require('../../chunks/bundle-cl2q8NwQ.js');
 require('../../GroupChannel/context.js');
-require('../../chunks/bundle-CZObcUAk.js');
-require('../../chunks/bundle-D8-ob9Ia.js');
-require('../../chunks/bundle-Dn17aH6v.js');
-require('../../chunks/bundle-DsKL-Ede.js');
-require('../../chunks/bundle-XEpryGfs.js');
+require('../../chunks/bundle-xADAFEo0.js');
+require('../../chunks/bundle-hXD0NDZt.js');
+require('../../chunks/bundle-BMN1aDia.js');
+require('../../chunks/bundle-BCQxFX-W.js');
 require('../../Channel/hooks/useHandleUploadFiles.js');
 
-var useMemorizedHeader = function (_a) {
-    var renderHeader = _a.renderHeader;
-    return React.useMemo(function () {
-        if (typeof renderHeader === 'function') {
-            return renderHeader();
-        }
-        return null;
-    }, [renderHeader]);
+var useMemorizedHeader = function (_a) {
+    var renderHeader = _a.renderHeader;
+    return React.useMemo(function () {
+        if (typeof renderHeader === 'function') {
+            return renderHeader();
+        }
+        return null;
+    }, [renderHeader]);
 };
 
-var useMemorizedParentMessageInfo = function (_a) {
-    var parentMessage = _a.parentMessage, parentMessageState = _a.parentMessageState, renderParentMessageInfo = _a.renderParentMessageInfo, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder;
-    return React.useMemo(function () {
-        if (parentMessageState === Thread_context_types.ParentMessageStateTypes.NIL
-            || parentMessageState === Thread_context_types.ParentMessageStateTypes.LOADING
-            || parentMessageState === Thread_context_types.ParentMessageStateTypes.INVALID) {
-            if (typeof renderParentMessageInfoPlaceholder === 'function') {
-                return renderParentMessageInfoPlaceholder(parentMessageState);
-            }
-            switch (parentMessageState) {
-                case Thread_context_types.ParentMessageStateTypes.NIL: {
-                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-nil", type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS, iconSize: "64px" }));
-                }
-                case Thread_context_types.ParentMessageStateTypes.LOADING: {
-                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
-                }
-                case Thread_context_types.ParentMessageStateTypes.INVALID: {
-                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
-                }
-                default: {
-                    return null;
-                }
-            }
-        }
-        else if (parentMessageState === Thread_context_types.ParentMessageStateTypes.INITIALIZED) {
-            if (typeof renderParentMessageInfo === 'function') {
-                return renderParentMessageInfo();
-            }
-        }
-        return null;
-    }, [
-        parentMessage,
-        parentMessageState,
-        renderParentMessageInfo,
-        renderParentMessageInfoPlaceholder,
-    ]);
+var useMemorizedParentMessageInfo = function (_a) {
+    var parentMessage = _a.parentMessage, parentMessageState = _a.parentMessageState, renderParentMessageInfo = _a.renderParentMessageInfo, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder;
+    return React.useMemo(function () {
+        if (parentMessageState === Thread_context_types.ParentMessageStateTypes.NIL
+            || parentMessageState === Thread_context_types.ParentMessageStateTypes.LOADING
+            || parentMessageState === Thread_context_types.ParentMessageStateTypes.INVALID) {
+            if (typeof renderParentMessageInfoPlaceholder === 'function') {
+                return renderParentMessageInfoPlaceholder(parentMessageState);
+            }
+            switch (parentMessageState) {
+                case Thread_context_types.ParentMessageStateTypes.NIL: {
+                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-nil", type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS, iconSize: "64px" }));
+                }
+                case Thread_context_types.ParentMessageStateTypes.LOADING: {
+                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
+                }
+                case Thread_context_types.ParentMessageStateTypes.INVALID: {
+                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
+                }
+                default: {
+                    return null;
+                }
+            }
+        }
+        else if (parentMessageState === Thread_context_types.ParentMessageStateTypes.INITIALIZED) {
+            if (typeof renderParentMessageInfo === 'function') {
+                return renderParentMessageInfo();
+            }
+        }
+        return null;
+    }, [
+        parentMessage,
+        parentMessageState,
+        renderParentMessageInfo,
+        renderParentMessageInfoPlaceholder,
+    ]);
 };
 
-var useMemorizedThreadList = function (_a) {
-    var threadListState = _a.threadListState, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
-    return React.useMemo(function () {
-        if (threadListState === Thread_context_types.ThreadListStateTypes.NIL
-            || threadListState === Thread_context_types.ThreadListStateTypes.LOADING
-            || threadListState === Thread_context_types.ThreadListStateTypes.INVALID) {
-            if (typeof renderThreadListPlaceHolder === 'function') {
-                return renderThreadListPlaceHolder(threadListState);
-            }
-            switch (threadListState) {
-                case Thread_context_types.ThreadListStateTypes.LOADING: {
-                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
-                }
-                case Thread_context_types.ThreadListStateTypes.INVALID: {
-                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
-                }
-                case Thread_context_types.ThreadListStateTypes.NIL: {
-                    return React.createElement(React.Fragment, null);
-                }
-                default: {
-                    return null;
-                }
-            }
-        }
-        return null;
-    }, [
-        threadListState,
-        renderThreadListPlaceHolder,
-    ]);
+var useMemorizedThreadList = function (_a) {
+    var threadListState = _a.threadListState, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
+    return React.useMemo(function () {
+        if (threadListState === Thread_context_types.ThreadListStateTypes.NIL
+            || threadListState === Thread_context_types.ThreadListStateTypes.LOADING
+            || threadListState === Thread_context_types.ThreadListStateTypes.INVALID) {
+            if (typeof renderThreadListPlaceHolder === 'function') {
+                return renderThreadListPlaceHolder(threadListState);
+            }
+            switch (threadListState) {
+                case Thread_context_types.ThreadListStateTypes.LOADING: {
+                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
+                }
+                case Thread_context_types.ThreadListStateTypes.INVALID: {
+                    return (React.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
+                }
+                case Thread_context_types.ThreadListStateTypes.NIL: {
+                    return React.createElement(React.Fragment, null);
+                }
+                default: {
+                    return null;
+                }
+            }
+        }
+        return null;
+    }, [
+        threadListState,
+        renderThreadListPlaceHolder,
+    ]);
 };
 
-var ThreadUI = function (_a) {
-    var _b, _c, _d, _e;
-    var renderHeader = _a.renderHeader, renderParentMessageInfo = _a.renderParentMessageInfo, renderMessage = _a.renderMessage, renderMessageInput = _a.renderMessageInput, renderCustomSeparator = _a.renderCustomSeparator, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder, renderFileUploadIcon = _a.renderFileUploadIcon, renderVoiceMessageIcon = _a.renderVoiceMessageIcon, renderSendMessageIcon = _a.renderSendMessageIcon;
-    var stores = useSendbirdStateContext.useSendbirdStateContext().stores;
-    var currentUserId = (_d = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk) === null || _c === void 0 ? void 0 : _c.currentUser) === null || _d === void 0 ? void 0 : _d.userId;
-    var stringSet = LocalizationContext.useLocalization().stringSet;
-    var _f = Thread_context.useThreadContext(), currentChannel = _f.currentChannel, allThreadMessages = _f.allThreadMessages, parentMessage = _f.parentMessage, parentMessageState = _f.parentMessageState, threadListState = _f.threadListState, hasMorePrev = _f.hasMorePrev, hasMoreNext = _f.hasMoreNext, fetchPrevThreads = _f.fetchPrevThreads, fetchNextThreads = _f.fetchNextThreads, onHeaderActionClick = _f.onHeaderActionClick, onMoveToParentMessage = _f.onMoveToParentMessage;
-    var replyCount = allThreadMessages.length;
-    var isByMe = currentUserId === ((_e = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _e === void 0 ? void 0 : _e.userId);
-    // Memoized custom components
-    var MemorizedHeader = useMemorizedHeader({ renderHeader: renderHeader });
-    var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
-        parentMessage: parentMessage,
-        parentMessageState: parentMessageState,
-        renderParentMessageInfo: renderParentMessageInfo,
-        renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder,
-    });
-    var MemorizedThreadList = useMemorizedThreadList({
-        threadListState: threadListState,
-        renderThreadListPlaceHolder: renderThreadListPlaceHolder,
-    });
-    // scroll
-    var _g = React.useState(0), scrollBottom = _g[0], setScrollBottom = _g[1];
-    var scrollRef = React.useRef(null);
-    var onScroll = function (e) {
-        var _a;
-        var element = e.target;
-        var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
-        var threadItemNodes = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sendbird-thread-list-item');
-        var firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
-        if (useSendMultipleFilesMessage.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
-            fetchPrevThreads(function (messages) {
-                var _a;
-                if (messages) {
-                    try {
-                        (_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, { block: 'start', inline: 'nearest' });
-                    }
-                    catch (error) {
-                        //
-                    }
-                }
-            });
-        }
-        if (useSendMultipleFilesMessage.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
-            var scrollTop_1 = scrollTop;
-            fetchNextThreads(function (messages) {
-                if (messages) {
-                    try {
-                        element.scrollTop = scrollTop_1;
-                        scrollRef.current.scrollTop = scrollTop_1;
-                    }
-                    catch (error) {
-                        //
-                    }
-                }
-            });
-        }
-        // save the lastest scroll bottom value
-        if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
-            var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
-            setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight);
-        }
-    };
-    return (React.createElement("div", { className: 'sendbird-thread-ui' },
-        MemorizedHeader || (React.createElement(Thread_components_ThreadHeader, { className: "sendbird-thread-ui__header", channelName: utils.getChannelTitle(currentChannel, currentUserId, stringSet), onActionIconClick: onHeaderActionClick, onChannelNameClick: function () {
-                onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
-            } })),
-        React.createElement("div", { className: "sendbird-thread-ui--scroll", ref: scrollRef, onScroll: onScroll },
-            React.createElement(Message_context.MessageProvider, { message: parentMessage, isByMe: isByMe }, MemorizedParentMessageInfo || (React.createElement(Thread_components_ParentMessageInfo, { className: "sendbird-thread-ui__parent-message-info" }))),
-            replyCount > 0 && (React.createElement("div", { className: "sendbird-thread-ui__reply-counts" },
-                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_3 }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY)))),
-            MemorizedThreadList || (React.createElement(Thread_components_ThreadList, { className: "sendbird-thread-ui__thread-list", renderMessage: renderMessage, renderCustomSeparator: renderCustomSeparator, scrollRef: scrollRef, scrollBottom: scrollBottom }))),
-        (renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || (React.createElement(Thread_components_ThreadMessageInput, { className: "sendbird-thread-ui__message-input", renderFileUploadIcon: renderFileUploadIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, renderSendMessageIcon: renderSendMessageIcon }))));
+var ThreadUI = function (_a) {
+    var _b, _c, _d, _e;
+    var renderHeader = _a.renderHeader, renderParentMessageInfo = _a.renderParentMessageInfo, renderMessage = _a.renderMessage, renderMessageInput = _a.renderMessageInput, renderCustomSeparator = _a.renderCustomSeparator, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder, renderFileUploadIcon = _a.renderFileUploadIcon, renderVoiceMessageIcon = _a.renderVoiceMessageIcon, renderSendMessageIcon = _a.renderSendMessageIcon;
+    var stores = useSendbirdStateContext.useSendbirdStateContext().stores;
+    var currentUserId = (_d = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk) === null || _c === void 0 ? void 0 : _c.currentUser) === null || _d === void 0 ? void 0 : _d.userId;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _f = Thread_context.useThreadContext(), currentChannel = _f.currentChannel, allThreadMessages = _f.allThreadMessages, parentMessage = _f.parentMessage, parentMessageState = _f.parentMessageState, threadListState = _f.threadListState, hasMorePrev = _f.hasMorePrev, hasMoreNext = _f.hasMoreNext, fetchPrevThreads = _f.fetchPrevThreads, fetchNextThreads = _f.fetchNextThreads, onHeaderActionClick = _f.onHeaderActionClick, onMoveToParentMessage = _f.onMoveToParentMessage;
+    var replyCount = allThreadMessages.length;
+    var isByMe = currentUserId === ((_e = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _e === void 0 ? void 0 : _e.userId);
+    // Memoized custom components
+    var MemorizedHeader = useMemorizedHeader({ renderHeader: renderHeader });
+    var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
+        parentMessage: parentMessage,
+        parentMessageState: parentMessageState,
+        renderParentMessageInfo: renderParentMessageInfo,
+        renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder,
+    });
+    var MemorizedThreadList = useMemorizedThreadList({
+        threadListState: threadListState,
+        renderThreadListPlaceHolder: renderThreadListPlaceHolder,
+    });
+    // scroll
+    var _g = React.useState(0), scrollBottom = _g[0], setScrollBottom = _g[1];
+    var scrollRef = React.useRef(null);
+    var onScroll = function (e) {
+        var _a;
+        var element = e.target;
+        var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
+        var threadItemNodes = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sendbird-thread-list-item');
+        var firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
+        if (useSendMultipleFilesMessage.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
+            fetchPrevThreads(function (messages) {
+                var _a;
+                if (messages) {
+                    try {
+                        (_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, { block: 'start', inline: 'nearest' });
+                    }
+                    catch (error) {
+                        //
+                    }
+                }
+            });
+        }
+        if (useSendMultipleFilesMessage.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
+            var scrollTop_1 = scrollTop;
+            fetchNextThreads(function (messages) {
+                if (messages) {
+                    try {
+                        element.scrollTop = scrollTop_1;
+                        scrollRef.current.scrollTop = scrollTop_1;
+                    }
+                    catch (error) {
+                        //
+                    }
+                }
+            });
+        }
+        // save the lastest scroll bottom value
+        if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
+            var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+            setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight);
+        }
+    };
+    return (React.createElement("div", { className: 'sendbird-thread-ui' },
+        MemorizedHeader || (React.createElement(Thread_components_ThreadHeader, { className: "sendbird-thread-ui__header", channelName: utils.getChannelTitle(currentChannel, currentUserId, stringSet), onActionIconClick: onHeaderActionClick, onChannelNameClick: function () {
+                onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
+            } })),
+        React.createElement("div", { className: "sendbird-thread-ui--scroll", ref: scrollRef, onScroll: onScroll },
+            React.createElement(Message_context.MessageProvider, { message: parentMessage, isByMe: isByMe }, MemorizedParentMessageInfo || (React.createElement(Thread_components_ParentMessageInfo, { className: "sendbird-thread-ui__parent-message-info" }))),
+            replyCount > 0 && (React.createElement("div", { className: "sendbird-thread-ui__reply-counts" },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_3 }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY)))),
+            MemorizedThreadList || (React.createElement(Thread_components_ThreadList, { className: "sendbird-thread-ui__thread-list", renderMessage: renderMessage, renderCustomSeparator: renderCustomSeparator, scrollRef: scrollRef, scrollBottom: scrollBottom }))),
+        (renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || (React.createElement(Thread_components_ThreadMessageInput, { className: "sendbird-thread-ui__message-input", renderFileUploadIcon: renderFileUploadIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, renderSendMessageIcon: renderSendMessageIcon }))));
 };
 
 module.exports = ThreadUI;

package/cjs/Thread/context/types.js

@@ -1,25 +1,25 @@
 'use strict';
 
-// Initializing status
-exports.ChannelStateTypes = void 0;
-(function (ChannelStateTypes) {
-    ChannelStateTypes["NIL"] = "NIL";
-    ChannelStateTypes["LOADING"] = "LOADING";
-    ChannelStateTypes["INVALID"] = "INVALID";
-    ChannelStateTypes["INITIALIZED"] = "INITIALIZED";
-})(exports.ChannelStateTypes || (exports.ChannelStateTypes = {}));
-exports.ParentMessageStateTypes = void 0;
-(function (ParentMessageStateTypes) {
-    ParentMessageStateTypes["NIL"] = "NIL";
-    ParentMessageStateTypes["LOADING"] = "LOADING";
-    ParentMessageStateTypes["INVALID"] = "INVALID";
-    ParentMessageStateTypes["INITIALIZED"] = "INITIALIZED";
-})(exports.ParentMessageStateTypes || (exports.ParentMessageStateTypes = {}));
-exports.ThreadListStateTypes = void 0;
-(function (ThreadListStateTypes) {
-    ThreadListStateTypes["NIL"] = "NIL";
-    ThreadListStateTypes["LOADING"] = "LOADING";
-    ThreadListStateTypes["INVALID"] = "INVALID";
-    ThreadListStateTypes["INITIALIZED"] = "INITIALIZED";
+// Initializing status
+exports.ChannelStateTypes = void 0;
+(function (ChannelStateTypes) {
+    ChannelStateTypes["NIL"] = "NIL";
+    ChannelStateTypes["LOADING"] = "LOADING";
+    ChannelStateTypes["INVALID"] = "INVALID";
+    ChannelStateTypes["INITIALIZED"] = "INITIALIZED";
+})(exports.ChannelStateTypes || (exports.ChannelStateTypes = {}));
+exports.ParentMessageStateTypes = void 0;
+(function (ParentMessageStateTypes) {
+    ParentMessageStateTypes["NIL"] = "NIL";
+    ParentMessageStateTypes["LOADING"] = "LOADING";
+    ParentMessageStateTypes["INVALID"] = "INVALID";
+    ParentMessageStateTypes["INITIALIZED"] = "INITIALIZED";
+})(exports.ParentMessageStateTypes || (exports.ParentMessageStateTypes = {}));
+exports.ThreadListStateTypes = void 0;
+(function (ThreadListStateTypes) {
+    ThreadListStateTypes["NIL"] = "NIL";
+    ThreadListStateTypes["LOADING"] = "LOADING";
+    ThreadListStateTypes["INVALID"] = "INVALID";
+    ThreadListStateTypes["INITIALIZED"] = "INITIALIZED";
 })(exports.ThreadListStateTypes || (exports.ThreadListStateTypes = {}));
 //# sourceMappingURL=types.js.map