@sendbird/uikit-react 3.9.0 → 3.9.1-rc-2

package/dist/cjs/Thread/components/ParentMessageInfo.js

@@ -0,0 +1,254 @@
+'use strict';
+
+var _tslib = require('../../chunks/bundle-0pCHXNhB.js');
+var React = require('react');
+var index$1 = require('../../chunks/bundle-3CEbSubz.js');
+var RemoveMessageModal = require('../../chunks/bundle-60azKP5A.js');
+var Thread_components_ParentMessageInfoItem = require('./ParentMessageInfoItem.js');
+var index = require('../../chunks/bundle-5ApFd_AY.js');
+var Channel_context = require('../../chunks/bundle-zaeeh2h7.js');
+var LocalizationContext = require('../../chunks/bundle--gwwLhzk.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var Thread_context = require('../context.js');
+var UserProfileContext = require('../../chunks/bundle-Xwc-PXin.js');
+var Channel_components_SuggestedMentionList = require('../../Channel/components/SuggestedMentionList.js');
+var ui_Avatar = require('../../chunks/bundle-9-nr_N-b.js');
+var ui_Label = require('../../chunks/bundle-4RnnhACR.js');
+var ui_FileViewer = require('../../chunks/bundle-NkP5dRWo.js');
+var ui_MessageItemMenu = require('../../ui/MessageItemMenu.js');
+var ui_MessageItemReactionMenu = require('../../ui/MessageItemReactionMenu.js');
+var ui_ContextMenu = require('../../ui/ContextMenu.js');
+var ui_UserProfile = require('../../ui/UserProfile.js');
+var ui_MessageInput = require('../../ui/MessageInput.js');
+var _const = require('../../chunks/bundle-alfVNg30.js');
+var types = require('../../chunks/bundle-Nz8Lrwe4.js');
+var MediaQueryContext = require('../../chunks/bundle-oXJwwgxy.js');
+var useLongPress = require('../../chunks/bundle-2k4v26zP.js');
+var index$2 = require('../../chunks/bundle-1m_ISTBo.js');
+var Message_hooks_useDirtyGetMentions = require('../../Message/hooks/useDirtyGetMentions.js');
+require('../../chunks/bundle-oTWBtf3l.js');
+require('../../chunks/bundle-2Gla4s_W.js');
+require('react-dom');
+require('../../chunks/bundle-V1HT7uWN.js');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../ui/Icon.js');
+require('../../chunks/bundle-p9s6eIWW.js');
+require('../../chunks/bundle-tWIm10AV.js');
+require('../../ui/ImageRenderer.js');
+require('../../ui/TextButton.js');
+require('../../chunks/bundle-NE9TILWI.js');
+require('../../ui/EmojiReactions.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/ReactionButton.js');
+require('../../ui/BottomSheet.js');
+require('../../hooks/useModal.js');
+require('../../chunks/bundle-4c_n4Hqm.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../chunks/bundle-f_lSJlZS.js');
+require('../../chunks/bundle-NrEnVvdl.js');
+require('../../sendbirdSelectors.js');
+require('../../chunks/bundle-ga2lvSm8.js');
+require('../../withSendbird.js');
+require('../../ui/SortByRow.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../Message/context.js');
+require('../../ui/VoiceMessageItemBody.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../chunks/bundle-0fVnLVNe.js');
+require('../../chunks/bundle-Ptyw-8Gc.js');
+require('../../VoiceRecorder/context.js');
+require('../../ui/PlaybackTime.js');
+require('../../ui/Loader.js');
+require('../../chunks/bundle-eSkHuU0e.js');
+require('../../chunks/bundle-c8PEMQg3.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
+require('../../chunks/bundle--A7guNuh.js');
+require('@sendbird/chat/message');
+require('../../chunks/bundle-YEhDTta6.js');
+require('../../chunks/bundle-xeTDYh-o.js');
+require('../../chunks/bundle-66bD8OVx.js');
+require('../../chunks/bundle-_fpgAJFT.js');
+require('@sendbird/chat/groupChannel');
+require('../../Channel/hooks/useInitialMessagesFetch.js');
+require('../../chunks/bundle-Z30xKPjr.js');
+require('../../chunks/bundle-ttM5NXg0.js');
+require('../context/types.js');
+require('@sendbird/chat');
+require('../../chunks/bundle-BuqbuTrW.js');
+require('dompurify');
+require('../../chunks/bundle-J8UlQsgX.js');
+require('../../chunks/bundle-bQ1hwrcE.js');
+require('../../chunks/bundle-SOsWW37c.js');
+
+function ParentMessageInfo(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var className = _a.className;
+    var _h = useSendbirdStateContext.useSendbirdStateContext(), stores = _h.stores, config = _h.config;
+    var isMentionEnabled = config.isMentionEnabled, isReactionEnabled = config.isReactionEnabled, replyType = config.replyType, isOnline = config.isOnline, userMention = config.userMention, logger = config.logger;
+    var userId = (_c = (_b = stores.userStore.user) === null || _b === void 0 ? void 0 : _b.userId) !== null && _c !== void 0 ? _c : '';
+    var dateLocale = LocalizationContext.useLocalization().dateLocale;
+    var _j = Thread_context.useThreadContext(), currentChannel = _j.currentChannel, parentMessage = _j.parentMessage, allThreadMessages = _j.allThreadMessages, emojiContainer = _j.emojiContainer, toggleReaction = _j.toggleReaction, updateMessage = _j.updateMessage, deleteMessage = _j.deleteMessage, onMoveToParentMessage = _j.onMoveToParentMessage, onHeaderActionClick = _j.onHeaderActionClick, isMuted = _j.isMuted, isChannelFrozen = _j.isChannelFrozen;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var _k = React.useState(false), showRemove = _k[0], setShowRemove = _k[1];
+    var _l = React.useState(false), supposedHover = _l[0], setSupposedHover = _l[1];
+    var _m = React.useState(false), showFileViewer = _m[0], setShowFileViewer = _m[1];
+    var usingReaction = Channel_context.getIsReactionEnabled({
+        globalLevel: isReactionEnabled,
+        isSuper: currentChannel.isSuper,
+        isBroadcast: currentChannel.isBroadcast,
+    });
+    var isByMe = userId === parentMessage.sender.userId;
+    // Mobile
+    var mobileMenuRef = React.useRef(null);
+    var _o = React.useState(false), showMobileMenu = _o[0], setShowMobileMenu = _o[1];
+    var longPress = useLongPress.useLongPress({
+        onLongPress: function () {
+            if (isMobile) {
+                setShowMobileMenu(true);
+            }
+        },
+    }, {
+        shouldPreventDefault: false,
+    });
+    // Edit message
+    var _p = React.useState(false), showEditInput = _p[0], setShowEditInput = _p[1];
+    var disabled = !isOnline || isMuted || isChannelFrozen && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR);
+    // Mention
+    var editMessageInputRef = React.useRef(null);
+    var _q = React.useState(''), mentionNickname = _q[0], setMentionNickname = _q[1];
+    var _r = React.useState([]), mentionedUsers = _r[0], setMentionedUsers = _r[1];
+    var _s = React.useState([]), mentionedUserIds = _s[0], setMentionedUserIds = _s[1];
+    var _t = React.useState(null), messageInputEvent = _t[0], setMessageInputEvent = _t[1];
+    var _u = React.useState(null), selectedUser = _u[0], setSelectedUser = _u[1];
+    var _v = React.useState([]), mentionSuggestedUsers = _v[0], setMentionSuggestedUsers = _v[1];
+    var displaySuggestedMentionList = isOnline
+        && isMentionEnabled
+        && mentionNickname.length > 0
+        && !isMuted
+        && !(isChannelFrozen && !(currentChannel.myRole === types.Role.OPERATOR));
+    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
+    React.useEffect(function () {
+        setMentionedUsers(mentionedUsers.filter(function (_a) {
+            var userId = _a.userId;
+            var i = mentionedUserIds.indexOf(userId);
+            if (i < 0) {
+                return false;
+            }
+            else {
+                mentionedUserIds.splice(i, 1);
+                return true;
+            }
+        }));
+    }, [mentionedUserIds]);
+    // User Profile
+    var avatarRef = React.useRef(null);
+    var _w = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _w.disableUserProfile, renderUserProfile = _w.renderUserProfile;
+    if (showEditInput && ((_d = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.isUserMessage) === null || _d === void 0 ? void 0 : _d.call(parentMessage))) {
+        return (React.createElement(React.Fragment, null,
+            displaySuggestedMentionList && (React.createElement(Channel_components_SuggestedMentionList, { className: "parent-message-info--suggested-mention-list", targetNickname: mentionNickname, inputEvent: messageInputEvent, 
+                // renderUserMentionItem={renderUserMentionItem}
+                onUserItemClick: function (user) {
+                    if (user) {
+                        setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
+                    }
+                    setMentionNickname('');
+                    setSelectedUser(user);
+                    setMessageInputEvent(null);
+                }, onFocusItemChange: function () {
+                    setMessageInputEvent(null);
+                }, onFetchUsers: function (users) {
+                    setMentionSuggestedUsers(users);
+                }, ableAddMention: ableMention, maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount, maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount })),
+            React.createElement(ui_MessageInput, { channel: currentChannel, isEdit: true, disabled: disabled, ref: editMessageInputRef, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, message: parentMessage, onStartTyping: function () {
+                    var _a;
+                    (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+                }, onUpdateMessage: function (_a) {
+                    var _b;
+                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
+                    updateMessage({
+                        messageId: messageId,
+                        message: message,
+                        mentionedUsers: mentionedUsers,
+                        mentionTemplate: mentionTemplate,
+                    });
+                    setShowEditInput(false);
+                    (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
+                }, onCancelEdit: function () {
+                    var _a;
+                    setMentionNickname('');
+                    setMentionedUsers([]);
+                    setMentionedUserIds([]);
+                    setMentionSuggestedUsers([]);
+                    setShowEditInput(false);
+                    (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
+                }, onUserMentioned: function (user) {
+                    if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+                        setSelectedUser(null);
+                        setMentionNickname('');
+                    }
+                }, onMentionStringChange: function (mentionText) {
+                    setMentionNickname(mentionText);
+                }, onMentionedUserIdsUpdated: function (userIds) {
+                    setMentionedUserIds(userIds);
+                }, onKeyDown: function (e) {
+                    if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
+                        && ((e.key === _const.MessageInputKeys.Enter && ableMention) || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
+                        setMessageInputEvent(e);
+                        return true;
+                    }
+                    return false;
+                } })));
+    }
+    return (React.createElement("div", _tslib.__assign({ className: "sendbird-parent-message-info ".concat(className) }, (isMobile) ? _tslib.__assign({}, longPress) : {}, { ref: mobileMenuRef }),
+        React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) {
+                var _a, _b, _c;
+                return (React.createElement(ui_Avatar.Avatar, { className: "sendbird-parent-message-info__sender", ref: avatarRef, src: ((_b = (_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _a === void 0 ? void 0 : _a.find(function (m) { var _a; return (m === null || m === void 0 ? void 0 : m.userId) === ((_a = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _a === void 0 ? void 0 : _a.userId); })) === null || _b === void 0 ? void 0 : _b.profileUrl)
+                        || ((_c = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _c === void 0 ? void 0 : _c.profileUrl), alt: "thread message sender", width: "40px", height: "40px", onClick: function () {
+                        if (!disableUserProfile) {
+                            toggleDropdown();
+                        }
+                    } }));
+            }, menuItems: function (closeDropdown) { return (renderUserProfile
+                ? renderUserProfile({
+                    user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender,
+                    close: closeDropdown,
+                    currentUserId: userId,
+                    avatarRef: avatarRef,
+                })
+                : (React.createElement(ui_ContextMenu.MenuItems, { parentRef: avatarRef, parentContainRef: avatarRef, closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
+                    React.createElement(ui_UserProfile, { user: parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender, currentUserId: userId, onSuccess: closeDropdown })))); } }),
+        React.createElement("div", { className: "sendbird-parent-message-info__content" },
+            React.createElement("div", { className: "sendbird-parent-message-info__content__info" },
+                React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info__content__info__sender-name".concat(usingReaction ? '--use-reaction' : ''), type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ((_f = (_e = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.members) === null || _e === void 0 ? void 0 : _e.find(function (member) { var _a; return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _a === void 0 ? void 0 : _a.userId); })) === null || _f === void 0 ? void 0 : _f.nickname) || (index.getSenderName === null || index.getSenderName === void 0 ? void 0 : index.getSenderName(parentMessage))),
+                React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info__content__info__sent-at", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format((parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.createdAt) || 0, 'p', { locale: dateLocale }))),
+            React.createElement(Thread_components_ParentMessageInfoItem, { message: parentMessage, showFileViewer: setShowFileViewer })),
+        !isMobile && (React.createElement(ui_MessageItemMenu.MessageMenu, { className: "sendbird-parent-message-info__context-menu ".concat(usingReaction ? 'use-reaction' : '', " ").concat(supposedHover ? 'sendbird-mouse-hover' : ''), channel: currentChannel, message: parentMessage, isByMe: userId === ((_g = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _g === void 0 ? void 0 : _g.userId), disableDeleteMessage: allThreadMessages.length > 0, replyType: replyType, showEdit: setShowEditInput, showRemove: setShowRemove, setSupposedHover: setSupposedHover, onMoveToParentMessage: function () {
+                onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
+            } })),
+        (usingReaction && !isMobile) && (React.createElement(ui_MessageItemReactionMenu.MessageEmojiMenu, { className: "sendbird-parent-message-info__reaction-menu ".concat(supposedHover ? 'sendbird-mouse-hover' : ''), message: parentMessage, userId: userId, emojiContainer: emojiContainer, toggleReaction: toggleReaction, setSupposedHover: setSupposedHover })),
+        showRemove && (React.createElement(RemoveMessageModal.RemoveMessage, { onCancel: function () { return setShowRemove(false); }, onSubmit: function () {
+                onHeaderActionClick === null || onHeaderActionClick === void 0 ? void 0 : onHeaderActionClick();
+            }, message: parentMessage })),
+        showFileViewer && (React.createElement(ui_FileViewer.FileViewer, { message: parentMessage, onClose: function () { return setShowFileViewer(false); }, onDelete: function () {
+                deleteMessage(parentMessage)
+                    .then(function () {
+                    setShowFileViewer(false);
+                });
+            } })),
+        showMobileMenu && (React.createElement(index$2.MobileMenu, { parentRef: mobileMenuRef, channel: currentChannel, message: parentMessage, userId: userId, replyType: replyType, hideMenu: function () {
+                setShowMobileMenu(false);
+            }, deleteMessage: deleteMessage, deleteMenuState: (allThreadMessages === null || allThreadMessages === void 0 ? void 0 : allThreadMessages.length) === 0
+                ? 'ACTIVE'
+                : 'HIDE', isReactionEnabled: usingReaction, isByMe: isByMe, emojiContainer: emojiContainer, showEdit: setShowEditInput, showRemove: setShowRemove, toggleReaction: toggleReaction, isOpenedFromThread: true }))));
+}
+
+module.exports = ParentMessageInfo;
+//# sourceMappingURL=ParentMessageInfo.js.map

package/dist/cjs/Thread/components/ParentMessageInfo.js.map

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

package/dist/cjs/Thread/components/ParentMessageInfoItem.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('../../chunks/bundle--gwwLhzk.js');
+var index = require('../../chunks/bundle-5ApFd_AY.js');
+var ui_Label = require('../../chunks/bundle-4RnnhACR.js');
+var ui_ImageRenderer = require('../../ui/ImageRenderer.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_TextButton = require('../../ui/TextButton.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var ui_EmojiReactions = require('../../ui/EmojiReactions.js');
+var Thread_context = require('../context.js');
+var ui_VoiceMessageItemBody = require('../../ui/VoiceMessageItemBody.js');
+var index$1 = require('../../chunks/bundle-eSkHuU0e.js');
+var tokenize = require('../../chunks/bundle-c8PEMQg3.js');
+var useStatefulFileInfoList = require('../../chunks/bundle--A7guNuh.js');
+var MediaQueryContext = require('../../chunks/bundle-oXJwwgxy.js');
+var color = require('../../chunks/bundle-NE9TILWI.js');
+require('../../chunks/bundle-4c_n4Hqm.js');
+require('../../chunks/bundle-oTWBtf3l.js');
+require('../../chunks/bundle-0pCHXNhB.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-tWIm10AV.js');
+require('../../chunks/bundle-V1HT7uWN.js');
+require('../../withSendbird.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/ReactionButton.js');
+require('../../chunks/bundle-2k4v26zP.js');
+require('../../ui/ContextMenu.js');
+require('react-dom');
+require('../../ui/SortByRow.js');
+require('../../chunks/bundle-f_lSJlZS.js');
+require('../../ui/BottomSheet.js');
+require('../../hooks/useModal.js');
+require('../../chunks/bundle-2Gla4s_W.js');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../ui/UserListItem.js');
+require('../../chunks/bundle-Xwc-PXin.js');
+require('../../chunks/bundle-9-nr_N-b.js');
+require('../../chunks/bundle-NrEnVvdl.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
+require('../../chunks/bundle-ga2lvSm8.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../Message/context.js');
+require('../../chunks/bundle-ttM5NXg0.js');
+require('../../chunks/bundle-xeTDYh-o.js');
+require('../../chunks/bundle-3CEbSubz.js');
+require('@sendbird/chat/message');
+require('../context/types.js');
+require('@sendbird/chat');
+require('../../chunks/bundle-66bD8OVx.js');
+require('@sendbird/chat/groupChannel');
+require('../../chunks/bundle-_fpgAJFT.js');
+require('../../chunks/bundle-Ptyw-8Gc.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../chunks/bundle-0fVnLVNe.js');
+require('../../VoiceRecorder/context.js');
+require('../../ui/PlaybackTime.js');
+require('../../ui/Loader.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
+require('../../chunks/bundle-NkP5dRWo.js');
+
+function ParentMessageInfoItem(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var className = _a.className, message = _a.message, showFileViewer = _a.showFileViewer;
+    var _l = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, stores = _l.stores, config = _l.config, eventHandlers = _l.eventHandlers;
+    var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
+    var replyType = config.replyType, isMentionEnabled = config.isMentionEnabled, isReactionEnabled = config.isReactionEnabled;
+    var currentUserId = (_d = (_c = stores === null || stores === void 0 ? void 0 : stores.userStore) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.userId;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var _m = Thread_context.useThreadContext(), currentChannel = _m.currentChannel, emojiContainer = _m.emojiContainer, nicknamesMap = _m.nicknamesMap, toggleReaction = _m.toggleReaction;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var threadMessageKindKey = useStatefulFileInfoList.useThreadMessageKindKeySelector({
+        threadMessageKind: useStatefulFileInfoList.ThreadMessageKind.PARENT,
+        isMobile: isMobile,
+    });
+    // For MultipleFilesMessage only.
+    var statefulFileInfoList = useStatefulFileInfoList.useStatefulFileInfoList(message);
+    var isMentionedMessage = isMentionEnabled
+        && ((_e = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _e === void 0 ? void 0 : _e.length) > 0
+        && ((_f = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _f === void 0 ? void 0 : _f.length) > 0;
+    // Emoji reactions
+    var isReactionActivated = isReactionEnabled
+        && replyType === 'THREAD'
+        && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isSuper)
+        && !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast)
+        && ((_g = message === null || message === void 0 ? void 0 : message.reactions) === null || _g === void 0 ? void 0 : _g.length) > 0;
+    var tokens = React.useMemo(function () {
+        if (isMentionedMessage) {
+            return tokenize.tokenizeMessage({
+                mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
+                messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
+            });
+        }
+        return tokenize.tokenizeMessage({
+            messageText: message === null || message === void 0 ? void 0 : message.message,
+        });
+    }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
+    // Thumbnail mesage
+    var _o = React.useState(false), isImageRendered = _o[0], setImageRendered = _o[1];
+    var thumbnailUrl = ((_h = message === null || message === void 0 ? void 0 : message.thumbnails) === null || _h === void 0 ? void 0 : _h.length) > 0
+        ? (_j = message === null || message === void 0 ? void 0 : message.thumbnails[0]) === null || _j === void 0 ? void 0 : _j.url : '';
+    return (React.createElement("div", { className: "sendbird-parent-message-info-item ".concat(className) },
+        index.isUserMessage(message) && (React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info-item__text-message", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 },
+            React.createElement(index$1.TextFragment, { tokens: tokens }),
+            index.isEditedMessage(message) && (React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info-item__text-message edited", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, " ".concat(stringSet.MESSAGE_EDITED, " "))))),
+        (index.getUIKitMessageType(message) === index.getUIKitMessageTypes().FILE) && (React.createElement("div", { className: "sendbird-parent-message-info-item__file-message" },
+            React.createElement("div", { className: "sendbird-parent-message-info-item__file-message__file-icon" },
+                React.createElement(ui_Icon.default, { className: "sendbird-parent-message-info-item__file-message__file-icon__icon", type: {
+                        IMAGE: ui_Icon.IconTypes.PHOTO,
+                        VIDEO: ui_Icon.IconTypes.PLAY,
+                        AUDIO: ui_Icon.IconTypes.FILE_AUDIO,
+                        GIF: ui_Icon.IconTypes.GIF,
+                        OTHERS: ui_Icon.IconTypes.FILE_DOCUMENT,
+                    }[index.getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)], fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" })),
+            React.createElement(ui_TextButton, { className: "sendbird-parent-message-info-item__file-message__file-name", onClick: function () { window.open(message === null || message === void 0 ? void 0 : message.url); }, color: color.Colors.ONBACKGROUND_1 },
+                React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info-item__file-message__file-name__text", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), 30))))),
+        index.isMultipleFilesMessage(message) && (React.createElement(useStatefulFileInfoList.MultipleFilesMessageItemBody, { className: "sendbird-parent-message-info-item__multiple-files-message-wrapper", message: message, isByMe: false, isReactionEnabled: isReactionEnabled, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList })),
+        index.isVoiceMessage(message) && (React.createElement("div", { className: "sendbird-parent-message-info-item__voice-message" },
+            React.createElement(ui_VoiceMessageItemBody.VoiceMessageItemBody, { className: "sendbird-parent-message-info-item__voice-message__item", message: message, channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, isByMe: false, isReactionEnabled: isReactionEnabled }))),
+        index.isThumbnailMessage(message) && (React.createElement("div", { className: "sendbird-parent-message-info-item__thumbnail-message", onClick: function () {
+                if (index.isSentMessage(message)) {
+                    showFileViewer(true);
+                }
+            } },
+            React.createElement(ui_ImageRenderer.default, { className: "sendbird-parent-message-info-item__thumbnail-message__thumbnail", url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url) || (message === null || message === void 0 ? void 0 : message.plainUrl), alt: message === null || message === void 0 ? void 0 : message.type, width: "200px", height: "148px", onLoad: function () { setImageRendered(true); }, placeHolder: function (style_) { return (React.createElement("div", { className: "sendbird-parent-message-info-item__thumbnail-message__placeholder", style: style_ },
+                    React.createElement("div", { className: "sendbird-parent-message-info-item__thumbnail-message__placeholder__icon" },
+                        React.createElement(ui_Icon.default, { type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "34px", height: "34px" })))); } }),
+            (index.isVideoMessage(message) && !thumbnailUrl) && !isImageRendered && (React.createElement("video", { className: "sendbird-parent-message-info-item__thumbnail-message__video" },
+                React.createElement("source", { src: (message === null || message === void 0 ? void 0 : message.url) || (message === null || message === void 0 ? void 0 : message.plainUrl), type: message === null || message === void 0 ? void 0 : message.type }))),
+            React.createElement("div", { className: "sendbird-parent-message-info-item__thumbnail-message__image-cover" }),
+            (index.isVideoMessage(message) || index.isGifMessage(message)) && (React.createElement("div", { className: "sendbird-parent-message-info-item__thumbnail-message__icon-wrapper" },
+                React.createElement("div", { className: "sendbird-parent-message-info-item__thumbnail-message__icon-wrapper__icon" },
+                    React.createElement(ui_Icon.default, { type: index.isVideoMessage(message) ? ui_Icon.IconTypes.PLAY : ui_Icon.IconTypes.GIF, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "34px", height: "34px" })))))),
+        index.getUIKitMessageType(message) === ((_k = index.getUIKitMessageTypes === null || index.getUIKitMessageTypes === void 0 ? void 0 : index.getUIKitMessageTypes()) === null || _k === void 0 ? void 0 : _k.UNKNOWN) && (React.createElement("div", { className: "sendbird-parent-message-info-item__unknown-message" },
+            React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info-item__unknown-message__header", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE),
+            React.createElement(ui_Label.Label, { className: "sendbird-parent-message-info-item__unknown-message__description", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE))),
+        isReactionActivated && (React.createElement("div", { className: "sendbird-parent-message-info__reactions" },
+            React.createElement(ui_EmojiReactions, { userId: currentUserId, message: message, channel: currentChannel, isByMe: false, emojiContainer: emojiContainer, memberNicknamesMap: nicknamesMap, toggleReaction: toggleReaction, onPressUserProfile: onPressUserProfileHandler })))));
+}
+
+module.exports = ParentMessageInfoItem;
+//# sourceMappingURL=ParentMessageInfoItem.js.map

package/dist/cjs/Thread/components/ThreadHeader.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var ui_IconButton = require('../../ui/IconButton.js');
+var ui_Icon = require('../../ui/Icon.js');
+var ui_Label = require('../../chunks/bundle-4RnnhACR.js');
+var ui_TextButton = require('../../ui/TextButton.js');
+var LocalizationContext = require('../../chunks/bundle--gwwLhzk.js');
+require('../../chunks/bundle-0pCHXNhB.js');
+require('../../chunks/bundle-V1HT7uWN.js');
+require('../../chunks/bundle-4c_n4Hqm.js');
+require('../../chunks/bundle-NE9TILWI.js');
+require('../../chunks/bundle-oTWBtf3l.js');
+
+function ThreadHeader(_a) {
+    var className = _a.className, channelName = _a.channelName, renderActionIcon = _a.renderActionIcon, onActionIconClick = _a.onActionIconClick, onChannelNameClick = _a.onChannelNameClick;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var MemoizedActionIcon = React.useMemo(function () {
+        if (typeof renderActionIcon === 'function') {
+            return renderActionIcon({ onActionIconClick: onActionIconClick });
+        }
+        return null;
+    }, [renderActionIcon]);
+    return (React.createElement("div", { className: "sendbird-thread-header ".concat(className) },
+        React.createElement(ui_Label.Label, { className: "sendbird-thread-header__title", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.THREAD__HEADER_TITLE),
+        React.createElement(ui_TextButton, { onClick: function (e) { return onChannelNameClick === null || onChannelNameClick === void 0 ? void 0 : onChannelNameClick(e); }, disableUnderline: true },
+            React.createElement(ui_Label.Label, { className: "sendbird-thread-header__channel-name", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, channelName)),
+        MemoizedActionIcon || (React.createElement("div", { className: "sendbird-thread-header__action" },
+            React.createElement(ui_IconButton, { width: "32px", height: "32px", onClick: function (e) { return onActionIconClick(e); } },
+                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, width: "22px", height: "22px" }))))));
+}
+
+module.exports = ThreadHeader;
+//# sourceMappingURL=ThreadHeader.js.map

package/dist/cjs/Thread/components/ThreadList.js

@@ -0,0 +1,172 @@
+'use strict';
+
+var React = require('react');
+var Thread_components_ThreadListItem = require('./ThreadListItem.js');
+var Thread_context = require('../context.js');
+var useSendMultipleFilesMessage = require('../../chunks/bundle-ttM5NXg0.js');
+var useSendbirdStateContext = require('../../useSendbirdStateContext.js');
+var dateFns = require('date-fns');
+var Message_context = require('../../Message/context.js');
+require('../../chunks/bundle-0pCHXNhB.js');
+require('../../chunks/bundle-3CEbSubz.js');
+require('../../chunks/bundle-oTWBtf3l.js');
+require('../../chunks/bundle--gwwLhzk.js');
+require('../../chunks/bundle-4c_n4Hqm.js');
+require('../../ui/DateSeparator.js');
+require('../../chunks/bundle-NE9TILWI.js');
+require('../../chunks/bundle-4RnnhACR.js');
+require('../../chunks/bundle-60azKP5A.js');
+require('../../chunks/bundle-2Gla4s_W.js');
+require('react-dom');
+require('../../chunks/bundle-V1HT7uWN.js');
+require('../../chunks/bundle-oXJwwgxy.js');
+require('../../ui/IconButton.js');
+require('../../ui/Button.js');
+require('../../ui/Icon.js');
+require('../../chunks/bundle-p9s6eIWW.js');
+require('../../chunks/bundle-5ApFd_AY.js');
+require('../../utils/message/getOutgoingMessageState.js');
+require('../../chunks/bundle-tWIm10AV.js');
+require('../../chunks/bundle-NkP5dRWo.js');
+require('../../hooks/useModal.js');
+require('../../chunks/bundle-9-nr_N-b.js');
+require('../../ui/ImageRenderer.js');
+require('../../chunks/bundle-f_lSJlZS.js');
+require('../../chunks/bundle-NrEnVvdl.js');
+require('../../chunks/bundle-Ptyw-8Gc.js');
+require('../../Channel/components/SuggestedMentionList.js');
+require('../../chunks/bundle-zaeeh2h7.js');
+require('../../chunks/bundle-Xwc-PXin.js');
+require('../../chunks/bundle-YEhDTta6.js');
+require('../../chunks/bundle-xeTDYh-o.js');
+require('@sendbird/chat/message');
+require('../../chunks/bundle-66bD8OVx.js');
+require('../../chunks/bundle-_fpgAJFT.js');
+require('@sendbird/chat/groupChannel');
+require('../../Channel/hooks/useInitialMessagesFetch.js');
+require('../../chunks/bundle-ga2lvSm8.js');
+require('../../chunks/bundle-Z30xKPjr.js');
+require('../../chunks/bundle-alfVNg30.js');
+require('../../ui/MessageInput.js');
+require('../../chunks/bundle-BuqbuTrW.js');
+require('dompurify');
+require('../../chunks/bundle-J8UlQsgX.js');
+require('../../chunks/bundle-bQ1hwrcE.js');
+require('../../chunks/bundle-SOsWW37c.js');
+require('../../chunks/bundle-c8PEMQg3.js');
+require('../context/types.js');
+require('../../ui/ContextMenu.js');
+require('../../ui/SortByRow.js');
+require('../../ui/UserProfile.js');
+require('../../sendbirdSelectors.js');
+require('../../withSendbird.js');
+require('../../ui/MessageItemMenu.js');
+require('../../chunks/bundle-Nz8Lrwe4.js');
+require('../../ui/MessageItemReactionMenu.js');
+require('../../ui/ReactionButton.js');
+require('../../chunks/bundle-2k4v26zP.js');
+require('../../chunks/bundle-wiCMJG39.js');
+require('../../ui/Loader.js');
+require('../../chunks/bundle-9pKlhVIU.js');
+require('../../chunks/bundle-aKKIV6sp.js');
+require('../../ui/EmojiReactions.js');
+require('../../ui/ReactionBadge.js');
+require('../../ui/BottomSheet.js');
+require('../../ui/UserListItem.js');
+require('../../ui/MutedAvatarOverlay.js');
+require('../../ui/Checkbox.js');
+require('../../ui/Tooltip.js');
+require('../../ui/TooltipWrapper.js');
+require('../../ui/TextMessageItemBody.js');
+require('../../chunks/bundle-eSkHuU0e.js');
+require('../../ui/MentionLabel.js');
+require('../../ui/LinkLabel.js');
+require('../../ui/OGMessageItemBody.js');
+require('../../ui/FileMessageItemBody.js');
+require('../../ui/TextButton.js');
+require('../../ui/ThumbnailMessageItemBody.js');
+require('../../chunks/bundle-Et2Mrxtk.js');
+require('../../ui/UnknownMessageItemBody.js');
+require('../../ui/VoiceMessageItemBody.js');
+require('../../ui/ProgressBar.js');
+require('../../VoicePlayer/useVoicePlayer.js');
+require('../../chunks/bundle-0fVnLVNe.js');
+require('../../VoiceRecorder/context.js');
+require('../../ui/PlaybackTime.js');
+require('../../chunks/bundle-1m_ISTBo.js');
+require('../../chunks/bundle--A7guNuh.js');
+require('../../Message/hooks/useDirtyGetMentions.js');
+require('@sendbird/chat');
+
+function ThreadList(_a) {
+    var className = _a.className, renderMessage = _a.renderMessage, renderCustomSeparator = _a.renderCustomSeparator, scrollRef = _a.scrollRef, scrollBottom = _a.scrollBottom;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var replyType = config.replyType, userId = config.userId;
+    var _b = Thread_context.useThreadContext(), currentChannel = _b.currentChannel, allThreadMessages = _b.allThreadMessages, localThreadMessages = _b.localThreadMessages;
+    var MemorizedMessage = React.useMemo(function () { return function (_a) {
+        var message = _a.message, chainTop = _a.chainTop, chainBottom = _a.chainBottom, hasSeparator = _a.hasSeparator;
+        if (typeof renderMessage === 'function') {
+            return renderMessage({
+                message: message,
+                chainTop: chainTop,
+                chainBottom: chainBottom,
+                hasSeparator: hasSeparator,
+            });
+        }
+        return null;
+    }; }, [renderMessage]);
+    return (React.createElement("div", { className: "sendbird-thread-list ".concat(className) },
+        allThreadMessages.map(function (message, idx) {
+            var _a;
+            var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+            var prevMessage = allThreadMessages[idx - 1];
+            var nextMessage = allThreadMessages[idx + 1];
+            // eslint-disable-next-line no-constant-condition
+            var _b = useSendMultipleFilesMessage.compareMessagesForGrouping(prevMessage, message, nextMessage, currentChannel, replyType)
+                , chainTop = _b[0], chainBottom = _b[1];
+            var hasSeparator = !((prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt) > 0 && (dateFns.isSameDay(message === null || message === void 0 ? void 0 : message.createdAt, prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt)));
+            var handleScroll = function () {
+                var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+                if (current) {
+                    var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+                    if (scrollBottom < bottom) {
+                        current.scrollTop += bottom - scrollBottom;
+                    }
+                }
+            };
+            return (React.createElement(Message_context.MessageProvider, { message: message, isByMe: isByMe, key: message === null || message === void 0 ? void 0 : message.messageId }, MemorizedMessage({
+                message: message,
+                chainTop: chainTop,
+                chainBottom: chainBottom,
+                hasSeparator: hasSeparator,
+            }) || (React.createElement(Thread_components_ThreadListItem, { message: message, chainTop: chainTop, chainBottom: chainBottom, hasSeparator: hasSeparator, renderCustomSeparator: renderCustomSeparator, handleScroll: handleScroll }))));
+        }),
+        localThreadMessages.map(function (message, idx) {
+            var _a;
+            var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+            var prevMessage = localThreadMessages[idx - 1];
+            var nextMessage = localThreadMessages[idx + 1];
+            // eslint-disable-next-line no-constant-condition
+            var _b = useSendMultipleFilesMessage.compareMessagesForGrouping(prevMessage, message, nextMessage, currentChannel, replyType)
+                , chainTop = _b[0], chainBottom = _b[1];
+            var hasSeparator = !((prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt) > 0 && (dateFns.isSameDay(message === null || message === void 0 ? void 0 : message.createdAt, prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt)));
+            var handleScroll = function () {
+                var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+                if (current) {
+                    var bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+                    if (scrollBottom < bottom) {
+                        current.scrollTop += bottom - scrollBottom;
+                    }
+                }
+            };
+            return (React.createElement(Message_context.MessageProvider, { message: message, isByMe: isByMe, key: message === null || message === void 0 ? void 0 : message.messageId }, MemorizedMessage({
+                message: message,
+                chainTop: chainTop,
+                chainBottom: chainBottom,
+                hasSeparator: hasSeparator,
+            }) || (React.createElement(Thread_components_ThreadListItem, { message: message, hasSeparator: false, renderCustomSeparator: renderCustomSeparator, handleScroll: handleScroll }))));
+        })));
+}
+
+module.exports = ThreadList;
+//# sourceMappingURL=ThreadList.js.map