@sendbird/uikit-react 3.14.3 → 3.14.4

package/Thread/components/ThreadUI.js

@@ -1,7 +1,7 @@
 import React__default, { useMemo, useState, useRef } from 'react';
 import { useSendbirdStateContext } from '../../useSendbirdStateContext.js';
-import { u as useLocalization } from '../../chunks/bundle-tIPAQa1P.js';
-import { g as getChannelTitle } from '../../chunks/bundle-CXtl77MC.js';
+import { u as useLocalization } from '../../chunks/bundle-Bx5vhTbU.js';
+import { g as getChannelTitle } from '../../chunks/bundle-9MhshueU.js';
 import { useThreadContext } from '../context.js';
 import ParentMessageInfo from './ParentMessageInfo.js';
 import ThreadHeader from './ThreadHeader.js';
@@ -9,269 +9,269 @@ import ThreadList from './ThreadList.js';
 import ThreadMessageInput from './ThreadMessageInput.js';
 import { ParentMessageStateTypes, ThreadListStateTypes } from '../context/types.js';
 import PlaceHolder, { PlaceHolderTypes } from '../../ui/PlaceHolder.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-Dk211z5R.js';
-import { i as isAboutSame } from '../../chunks/bundle-CXxeDfXV.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-LYAWKk4n.js';
+import { i as isAboutSame } from '../../chunks/bundle-DaAoUDJk.js';
 import { MessageProvider } from '../../Message/context.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-DZcgZWKq.js';
-import '../../chunks/bundle-BLGMGsvT.js';
-import '../../chunks/bundle-Danvz0zD.js';
-import '../../chunks/bundle-DGnpw8up.js';
+import '../../chunks/bundle-7oF7KbGv.js';
+import '../../chunks/bundle-C8im5l9B.js';
+import '../../chunks/bundle-C1ds4cil.js';
+import '../../chunks/bundle-B7barEsR.js';
 import '@sendbird/chat';
-import '../../chunks/bundle-BX_IXLSp.js';
-import '../../chunks/bundle-Bf6VvPhp.js';
+import '../../chunks/bundle-BWuyd0AD.js';
+import '../../chunks/bundle-C_Vyt_ii.js';
 import '@sendbird/chat/groupChannel';
-import '../../chunks/bundle-BbeHRXOp.js';
-import '../../chunks/bundle-DQKxIg_X.js';
+import '../../chunks/bundle-BJ46V6XQ.js';
+import '../../chunks/bundle-BKho3Uub.js';
 import '@sendbird/chat/message';
-import '../../chunks/bundle-Dc7E6GJc.js';
-import '../../chunks/bundle-DZie-lCF.js';
-import '../../chunks/bundle-DfDCjniq.js';
-import '../../chunks/bundle-CSOdmQ75.js';
+import '../../chunks/bundle-CD9AzC6s.js';
+import '../../chunks/bundle-C040958G.js';
+import '../../chunks/bundle-BHn3F_OF.js';
+import '../../chunks/bundle-C4Z-NWqF.js';
+import '../../chunks/bundle-BWCGFXhj.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../chunks/bundle-ByvmbZD0.js';
 import 'react-dom';
-import '../../chunks/bundle-DZl__KhG.js';
-import '../../chunks/bundle-BlK-fMQm.js';
+import '../../chunks/bundle-Diqj6For.js';
 import '../../ui/IconButton.js';
 import '../../ui/Button.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-BPbwxMIx.js';
-import '../../chunks/bundle-DwApARpe.js';
-import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-Bdw6eUSG.js';
+import '@sendbird/uikit-tools';
+import 'css-vars-ponyfill';
+import '@sendbird/chat/openChannel';
+import '../../chunks/bundle-CIwVkd-E.js';
+import '../../chunks/bundle-BbWD2VuS.js';
+import '../../chunks/bundle-DzxiMlgV.js';
 import './ParentMessageInfoItem.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/TextButton.js';
-import '../../chunks/bundle-BMPm6lKq.js';
+import '../../chunks/bundle-HoQqraNc.js';
 import '../../ui/EmojiReactions.js';
 import '../../ui/ReactionBadge.js';
 import '../../ui/ReactionButton.js';
-import '../../chunks/bundle-BwJTKHEl.js';
+import '../../chunks/bundle-Gx0ryc_f.js';
 import '../../ui/ContextMenu.js';
-import '@sendbird/chat/openChannel';
 import '../../ui/SortByRow.js';
 import '../../ui/BottomSheet.js';
-import '../../hooks/useModal.js';
 import '../../ui/UserListItem.js';
-import '../../chunks/bundle-BPvfVEd8.js';
-import '../../chunks/bundle-CUd4X5O2.js';
+import '../../chunks/bundle-CNJMLyGJ.js';
+import '../../chunks/bundle-CT8ZXUi2.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../sendbirdSelectors.js';
 import '../../ui/Tooltip.js';
 import '../../ui/TooltipWrapper.js';
-import '../../chunks/bundle-DfhJ_oFZ.js';
+import '../../chunks/bundle-Jir4hfa9.js';
 import '../../ui/VoiceMessageItemBody.js';
 import '../../ui/ProgressBar.js';
 import '../../VoicePlayer/useVoicePlayer.js';
-import '../../chunks/bundle-BbusXHy3.js';
-import '../../VoiceRecorder/context.js';
 import '../../ui/PlaybackTime.js';
 import '../../ui/Loader.js';
-import '../../chunks/bundle-D4x1_hkl.js';
-import '../../chunks/bundle-DBBVxbFA.js';
+import '../../chunks/bundle-C1hw1sij.js';
+import '../../chunks/bundle-DpGWywZ5.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/LinkLabel.js';
-import '../../chunks/bundle-DiuoVXwl.js';
-import '../../chunks/bundle-BiINvVSK.js';
-import '../../chunks/bundle-BmFbOU4C.js';
-import '@sendbird/uikit-tools';
-import '../../chunks/bundle-DWW0XPV9.js';
-import '../../chunks/bundle-fxTywxQ4.js';
-import '../../chunks/bundle-CKf9oBLV.js';
-import '../../chunks/bundle-BTLVyMgj.js';
-import '../../chunks/bundle-OIgXk-TJ.js';
+import '../../chunks/bundle--nVHk3fx.js';
+import '../../chunks/bundle-B__zC9zD.js';
+import '../../chunks/bundle-D_eJq5Xk.js';
+import '../../chunks/bundle-DDkUg3Os.js';
+import '../../chunks/bundle-Clhqc2C_.js';
+import '../../chunks/bundle-DlfN5GTa.js';
+import '../../chunks/bundle-BOSnopxk.js';
+import '../../chunks/bundle-QxUVt4Ms.js';
 import '../../ui/MessageItemMenu.js';
-import '../../chunks/bundle-BPj0X5TA.js';
+import '../../chunks/bundle-DmYqVYeD.js';
 import '../../ui/MessageItemReactionMenu.js';
 import '../../ui/MessageInput.js';
-import '../../chunks/bundle-B_fxVgAX.js';
+import '../../chunks/bundle-DO1vNias.js';
 import 'dompurify';
-import '../../chunks/bundle-COLsFI7t.js';
-import '../../chunks/bundle-DpkEqNiD.js';
-import '../../chunks/bundle-D5lQwKgM.js';
-import '../../chunks/bundle-CwHpV2cp.js';
+import '../../chunks/bundle-B5N2u5f-.js';
+import '../../chunks/bundle-DSOf9RKe.js';
+import '../../chunks/bundle-DQ2q-zNM.js';
+import '../../chunks/bundle-DXCQovsu.js';
 import '../../Message/hooks/useDirtyGetMentions.js';
+import '../../chunks/bundle-BtY8jyVv.js';
+import '../../ui/Header.js';
 import './ThreadListItem.js';
 import '../../ui/DateSeparator.js';
-import '../../chunks/bundle-Otcx8Wxy.js';
-import '../../chunks/bundle-BKTUnkiE.js';
-import '../../chunks/bundle-Bkbg_RQ-.js';
+import '../../chunks/bundle-DJTSztr0.js';
+import '../../chunks/bundle-yZ1rqvSQ.js';
+import '../../chunks/bundle-CaaUNO3F.js';
 import '../../ui/TextMessageItemBody.js';
 import '../../ui/OGMessageItemBody.js';
 import '../../ui/FileMessageItemBody.js';
 import '../../ui/ThumbnailMessageItemBody.js';
-import '../../chunks/bundle-CY2Lga-4.js';
+import '../../chunks/bundle-DDhhxSv0.js';
 import '../../ui/UnknownMessageItemBody.js';
 import '../../Channel/utils/compareMessagesForGrouping.js';
 import 'date-fns';
-import '../../chunks/bundle-DL_Xts3y.js';
-import '../../chunks/bundle-C3K7W_E-.js';
+import '../../chunks/bundle-Ci146LvO.js';
+import '../../chunks/bundle-BvG71y_P.js';
 import '../../GroupChannel/components/SuggestedMentionList.js';
 import '../../ui/QuoteMessageInput.js';
 import '../../VoiceRecorder/useVoiceRecorder.js';
-import '../../chunks/bundle-DOG83iYO.js';
-import '../../chunks/bundle-CVu64-xY.js';
+import '../../chunks/bundle-BZd5IHBF.js';
+import '../../chunks/bundle-3amhHjNa.js';
 import '../../GroupChannel/context.js';
-import '../../chunks/bundle-Y3Y435SA.js';
-import '../../chunks/bundle-BhkcPTQE.js';
-import '../../chunks/bundle-CMZVPZeM.js';
-import '../../chunks/bundle-BLMDgHS-.js';
-import '../../chunks/bundle-CUPPssXo.js';
+import '../../chunks/bundle-oCSRGy9i.js';
+import '../../chunks/bundle-DaoHZIZy.js';
+import '../../chunks/bundle-uBJzoaNT.js';
+import '../../chunks/bundle-2uJIsyo2.js';
 import '../../Channel/hooks/useHandleUploadFiles.js';
 
-var useMemorizedHeader = function (_a) {
-    var renderHeader = _a.renderHeader;
-    return useMemo(function () {
-        if (typeof renderHeader === 'function') {
-            return renderHeader();
-        }
-        return null;
-    }, [renderHeader]);
+var useMemorizedHeader = function (_a) {
+    var renderHeader = _a.renderHeader;
+    return 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 useMemo(function () {
-        if (parentMessageState === ParentMessageStateTypes.NIL
-            || parentMessageState === ParentMessageStateTypes.LOADING
-            || parentMessageState === ParentMessageStateTypes.INVALID) {
-            if (typeof renderParentMessageInfoPlaceholder === 'function') {
-                return renderParentMessageInfoPlaceholder(parentMessageState);
-            }
-            switch (parentMessageState) {
-                case ParentMessageStateTypes.NIL: {
-                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__parent-message-info placeholder-nil", type: PlaceHolderTypes.NO_RESULTS, iconSize: "64px" }));
-                }
-                case ParentMessageStateTypes.LOADING: {
-                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__parent-message-info placeholder-loading", type: PlaceHolderTypes.LOADING, iconSize: "64px" }));
-                }
-                case ParentMessageStateTypes.INVALID: {
-                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__parent-message-info placeholder-invalid", type: PlaceHolderTypes.WRONG, iconSize: "64px" }));
-                }
-                default: {
-                    return null;
-                }
-            }
-        }
-        else if (parentMessageState === 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 useMemo(function () {
+        if (parentMessageState === ParentMessageStateTypes.NIL
+            || parentMessageState === ParentMessageStateTypes.LOADING
+            || parentMessageState === ParentMessageStateTypes.INVALID) {
+            if (typeof renderParentMessageInfoPlaceholder === 'function') {
+                return renderParentMessageInfoPlaceholder(parentMessageState);
+            }
+            switch (parentMessageState) {
+                case ParentMessageStateTypes.NIL: {
+                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__parent-message-info placeholder-nil", type: PlaceHolderTypes.NO_RESULTS, iconSize: "64px" }));
+                }
+                case ParentMessageStateTypes.LOADING: {
+                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__parent-message-info placeholder-loading", type: PlaceHolderTypes.LOADING, iconSize: "64px" }));
+                }
+                case ParentMessageStateTypes.INVALID: {
+                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__parent-message-info placeholder-invalid", type: PlaceHolderTypes.WRONG, iconSize: "64px" }));
+                }
+                default: {
+                    return null;
+                }
+            }
+        }
+        else if (parentMessageState === 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 useMemo(function () {
-        if (threadListState === ThreadListStateTypes.NIL
-            || threadListState === ThreadListStateTypes.LOADING
-            || threadListState === ThreadListStateTypes.INVALID) {
-            if (typeof renderThreadListPlaceHolder === 'function') {
-                return renderThreadListPlaceHolder(threadListState);
-            }
-            switch (threadListState) {
-                case ThreadListStateTypes.LOADING: {
-                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__thread-list placeholder-loading", type: PlaceHolderTypes.LOADING, iconSize: "64px" }));
-                }
-                case ThreadListStateTypes.INVALID: {
-                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__thread-list placeholder-invalid", type: PlaceHolderTypes.WRONG, iconSize: "64px" }));
-                }
-                case ThreadListStateTypes.NIL: {
-                    return React__default.createElement(React__default.Fragment, null);
-                }
-                default: {
-                    return null;
-                }
-            }
-        }
-        return null;
-    }, [
-        threadListState,
-        renderThreadListPlaceHolder,
-    ]);
+var useMemorizedThreadList = function (_a) {
+    var threadListState = _a.threadListState, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
+    return useMemo(function () {
+        if (threadListState === ThreadListStateTypes.NIL
+            || threadListState === ThreadListStateTypes.LOADING
+            || threadListState === ThreadListStateTypes.INVALID) {
+            if (typeof renderThreadListPlaceHolder === 'function') {
+                return renderThreadListPlaceHolder(threadListState);
+            }
+            switch (threadListState) {
+                case ThreadListStateTypes.LOADING: {
+                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__thread-list placeholder-loading", type: PlaceHolderTypes.LOADING, iconSize: "64px" }));
+                }
+                case ThreadListStateTypes.INVALID: {
+                    return (React__default.createElement(PlaceHolder, { className: "sendbird-thread-ui__thread-list placeholder-invalid", type: PlaceHolderTypes.WRONG, iconSize: "64px" }));
+                }
+                case ThreadListStateTypes.NIL: {
+                    return React__default.createElement(React__default.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().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 = useLocalization().stringSet;
-    var _f = 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 = useState(0), scrollBottom = _g[0], setScrollBottom = _g[1];
-    var scrollRef = 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 (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 (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__default.createElement("div", { className: 'sendbird-thread-ui' },
-        MemorizedHeader || (React__default.createElement(ThreadHeader, { className: "sendbird-thread-ui__header", channelName: getChannelTitle(currentChannel, currentUserId, stringSet), onActionIconClick: onHeaderActionClick, onChannelNameClick: function () {
-                onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
-            } })),
-        React__default.createElement("div", { className: "sendbird-thread-ui--scroll", ref: scrollRef, onScroll: onScroll },
-            React__default.createElement(MessageProvider, { message: parentMessage, isByMe: isByMe }, MemorizedParentMessageInfo || (React__default.createElement(ParentMessageInfo, { className: "sendbird-thread-ui__parent-message-info" }))),
-            replyCount > 0 && (React__default.createElement("div", { className: "sendbird-thread-ui__reply-counts" },
-                React__default.createElement(Label, { type: LabelTypography.BODY_1, color: LabelColors.ONBACKGROUND_3 }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY)))),
-            MemorizedThreadList || (React__default.createElement(ThreadList, { className: "sendbird-thread-ui__thread-list", renderMessage: renderMessage, renderCustomSeparator: renderCustomSeparator, scrollRef: scrollRef, scrollBottom: scrollBottom }))),
-        (renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || (React__default.createElement(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().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 = useLocalization().stringSet;
+    var _f = 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 = useState(0), scrollBottom = _g[0], setScrollBottom = _g[1];
+    var scrollRef = 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 (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 (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__default.createElement("div", { className: 'sendbird-thread-ui' },
+        MemorizedHeader || (React__default.createElement(ThreadHeader, { className: "sendbird-thread-ui__header", channelName: getChannelTitle(currentChannel, currentUserId, stringSet), onActionIconClick: onHeaderActionClick, onChannelNameClick: function () {
+                onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
+            } })),
+        React__default.createElement("div", { className: "sendbird-thread-ui--scroll", ref: scrollRef, onScroll: onScroll },
+            React__default.createElement(MessageProvider, { message: parentMessage, isByMe: isByMe }, MemorizedParentMessageInfo || (React__default.createElement(ParentMessageInfo, { className: "sendbird-thread-ui__parent-message-info" }))),
+            replyCount > 0 && (React__default.createElement("div", { className: "sendbird-thread-ui__reply-counts" },
+                React__default.createElement(Label, { type: LabelTypography.BODY_1, color: LabelColors.ONBACKGROUND_3 }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY)))),
+            MemorizedThreadList || (React__default.createElement(ThreadList, { className: "sendbird-thread-ui__thread-list", renderMessage: renderMessage, renderCustomSeparator: renderCustomSeparator, scrollRef: scrollRef, scrollBottom: scrollBottom }))),
+        (renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || (React__default.createElement(ThreadMessageInput, { className: "sendbird-thread-ui__message-input", renderFileUploadIcon: renderFileUploadIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, renderSendMessageIcon: renderSendMessageIcon }))));
 };
 
 export { ThreadUI as default };

package/Thread/context/types.js

@@ -1,24 +1,24 @@
-// Initializing status
-var ChannelStateTypes;
-(function (ChannelStateTypes) {
-    ChannelStateTypes["NIL"] = "NIL";
-    ChannelStateTypes["LOADING"] = "LOADING";
-    ChannelStateTypes["INVALID"] = "INVALID";
-    ChannelStateTypes["INITIALIZED"] = "INITIALIZED";
-})(ChannelStateTypes || (ChannelStateTypes = {}));
-var ParentMessageStateTypes;
-(function (ParentMessageStateTypes) {
-    ParentMessageStateTypes["NIL"] = "NIL";
-    ParentMessageStateTypes["LOADING"] = "LOADING";
-    ParentMessageStateTypes["INVALID"] = "INVALID";
-    ParentMessageStateTypes["INITIALIZED"] = "INITIALIZED";
-})(ParentMessageStateTypes || (ParentMessageStateTypes = {}));
-var ThreadListStateTypes;
-(function (ThreadListStateTypes) {
-    ThreadListStateTypes["NIL"] = "NIL";
-    ThreadListStateTypes["LOADING"] = "LOADING";
-    ThreadListStateTypes["INVALID"] = "INVALID";
-    ThreadListStateTypes["INITIALIZED"] = "INITIALIZED";
+// Initializing status
+var ChannelStateTypes;
+(function (ChannelStateTypes) {
+    ChannelStateTypes["NIL"] = "NIL";
+    ChannelStateTypes["LOADING"] = "LOADING";
+    ChannelStateTypes["INVALID"] = "INVALID";
+    ChannelStateTypes["INITIALIZED"] = "INITIALIZED";
+})(ChannelStateTypes || (ChannelStateTypes = {}));
+var ParentMessageStateTypes;
+(function (ParentMessageStateTypes) {
+    ParentMessageStateTypes["NIL"] = "NIL";
+    ParentMessageStateTypes["LOADING"] = "LOADING";
+    ParentMessageStateTypes["INVALID"] = "INVALID";
+    ParentMessageStateTypes["INITIALIZED"] = "INITIALIZED";
+})(ParentMessageStateTypes || (ParentMessageStateTypes = {}));
+var ThreadListStateTypes;
+(function (ThreadListStateTypes) {
+    ThreadListStateTypes["NIL"] = "NIL";
+    ThreadListStateTypes["LOADING"] = "LOADING";
+    ThreadListStateTypes["INVALID"] = "INVALID";
+    ThreadListStateTypes["INITIALIZED"] = "INITIALIZED";
 })(ThreadListStateTypes || (ThreadListStateTypes = {}));
 
 export { ChannelStateTypes, ParentMessageStateTypes, ThreadListStateTypes };