@sendbird/uikit-react 3.14.3-rc.1 → 3.14.4

package/cjs/Thread/components/ParentMessageInfoItem.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var _tslib = require('../../chunks/bundle-BwzMNAFs.js');
+var _tslib = require('../../chunks/bundle-HGbi-rCv.js');
 var React = require('react');
-var LocalizationContext = require('../../chunks/bundle-Cg6exdly.js');
-var index = require('../../chunks/bundle-BTEk9dhT.js');
-var ui_Label = require('../../chunks/bundle-Cm_quRwQ.js');
+var LocalizationContext = require('../../chunks/bundle-oeWNUdCB.js');
+var index = require('../../chunks/bundle-wl1uuzU7.js');
+var ui_Label = require('../../chunks/bundle-5_kPn4wU.js');
 var ui_ImageRenderer = require('../../ui/ImageRenderer.js');
 var ui_Icon = require('../../ui/Icon.js');
 var ui_TextButton = require('../../ui/TextButton.js');
@@ -12,180 +12,180 @@ 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-Dfqk1zRa.js');
-var tokenize = require('../../chunks/bundle-DF9nQRmT.js');
-var useFileInfoListWithUploaded = require('../../chunks/bundle-waMogQH7.js');
-var MediaQueryContext = require('../../chunks/bundle-xpQ8gY1k.js');
-var color = require('../../chunks/bundle-Bu7SLdLc.js');
-var utils = require('../../chunks/bundle-_VH8bxGE.js');
-require('../../chunks/bundle-DXrpp6AJ.js');
-require('../../chunks/bundle-XPPVGabQ.js');
+var index$1 = require('../../chunks/bundle-C3DKUT4Q.js');
+var tokenize = require('../../chunks/bundle-CLOaQmX9.js');
+var useFileInfoListWithUploaded = require('../../chunks/bundle-DTCz0BH1.js');
+var MediaQueryContext = require('../../chunks/bundle-BwQ4BJif.js');
+var color = require('../../chunks/bundle-DAxedY0T.js');
+var utils = require('../../chunks/bundle-BoLhr7Ko.js');
+require('../../chunks/bundle-gtkPlUrw.js');
+require('../../chunks/bundle-BWGOXLHb.js');
 require('@sendbird/chat/groupChannel');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-CN-HA7zS.js');
 require('../../withSendbird.js');
 require('../../ui/ReactionBadge.js');
 require('../../ui/ReactionButton.js');
-require('../../chunks/bundle-C0Gtok_c.js');
+require('../../chunks/bundle-miB6ue8g.js');
 require('../../ui/ContextMenu.js');
+require('../../chunks/bundle-BTU876jx.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('../../ui/SortByRow.js');
-require('../../chunks/bundle-B0Cl8cKp.js');
+require('../../chunks/bundle-1XtsxT8L.js');
 require('../../ui/BottomSheet.js');
-require('../../hooks/useModal.js');
-require('../../chunks/bundle-BhbVr0qd.js');
+require('../../chunks/bundle-CZfcXYaX.js');
 require('../../ui/IconButton.js');
 require('../../ui/Button.js');
+require('@sendbird/uikit-tools');
+require('css-vars-ponyfill');
+require('../../chunks/bundle-L3FEqZsK.js');
+require('../../chunks/bundle-DfcEln0Z.js');
 require('../../ui/UserListItem.js');
-require('../../chunks/bundle-CT33owD4.js');
-require('../../chunks/bundle-BjHWj0YM.js');
-require('../../chunks/bundle-D1gE5kRR.js');
+require('../../chunks/bundle-CAUMYdVU.js');
+require('../../chunks/bundle-DxSB9NRz.js');
+require('../../chunks/bundle-C93-onMF.js');
 require('../../ui/MutedAvatarOverlay.js');
 require('../../ui/Checkbox.js');
 require('../../ui/UserProfile.js');
 require('../../sendbirdSelectors.js');
-require('../../chunks/bundle-CqfYJ2-A.js');
+require('../../chunks/bundle-Dehhi1FZ.js');
 require('../../ui/Tooltip.js');
 require('../../ui/TooltipWrapper.js');
 require('../../Message/context.js');
-require('../../chunks/bundle-DU2DrCMu.js');
-require('../../chunks/bundle-BVXtMOiP.js');
-require('../../chunks/bundle-oEFvi6H_.js');
+require('../../chunks/bundle-Dww6fCVQ.js');
+require('../../chunks/bundle-BXEGf4g2.js');
+require('../../chunks/bundle-CE6bFQmu.js');
 require('@sendbird/chat/message');
-require('../../chunks/bundle-BgJJI84U.js');
 require('../context/types.js');
-require('../../chunks/bundle-CkBOTPET.js');
-require('../../chunks/bundle-C-sGYQWV.js');
+require('../../chunks/bundle-T4lp5F85.js');
+require('../../chunks/bundle-DRy7eNJ0.js');
 require('../../ui/ProgressBar.js');
 require('../../VoicePlayer/useVoicePlayer.js');
-require('../../chunks/bundle-CZ-C_W9P.js');
-require('../../VoiceRecorder/context.js');
 require('../../ui/PlaybackTime.js');
 require('../../ui/Loader.js');
 require('../../ui/MentionLabel.js');
 require('../../ui/LinkLabel.js');
-require('../../chunks/bundle-DYdwn7HI.js');
-require('../../chunks/bundle-B1UxSAT6.js');
-require('@sendbird/uikit-tools');
+require('../../chunks/bundle-C6a-umLQ.js');
+require('../../chunks/bundle-bqRlVm3u.js');
 
-function ParentMessageInfoItem(_a) {
-    var _this = this;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var className = _a.className, message = _a.message, showFileViewer = _a.showFileViewer, _l = _a.onBeforeDownloadFileMessage, onBeforeDownloadFileMessage = _l === void 0 ? null : _l;
-    var _m = (useSendbirdStateContext.useSendbirdStateContext === null || useSendbirdStateContext.useSendbirdStateContext === void 0 ? void 0 : useSendbirdStateContext.useSendbirdStateContext()) || {}, stores = _m.stores, config = _m.config, eventHandlers = _m.eventHandlers;
-    var logger = config.logger;
-    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 _o = Thread_context.useThreadContext(), currentChannel = _o.currentChannel, emojiContainer = _o.emojiContainer, nicknamesMap = _o.nicknamesMap, toggleReaction = _o.toggleReaction;
-    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-    var threadMessageKindKey = useFileInfoListWithUploaded.useThreadMessageKindKeySelector({
-        threadMessageKind: useFileInfoListWithUploaded.ThreadMessageKind.PARENT,
-        isMobile: isMobile,
-    });
-    // For MultipleFilesMessage only.
-    var statefulFileInfoList = useFileInfoListWithUploaded.useFileInfoListWithUploaded(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'
-        && ((_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, message === null || message === void 0 ? void 0 : message.message]);
-    // Only for the FileMessageItemBody
-    var downloadFileWithUrl = function () {
-        if (index.isFileMessage(message))
-            utils.openURL(message.url);
-    };
-    var handleOnClickTextButton = onBeforeDownloadFileMessage
-        ? function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
-            var allowDownload, err_1;
-            var _a, _b;
-            return _tslib.__generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!(message.messageType === 'file')) return [3 /*break*/, 4];
-                        _c.label = 1;
-                    case 1:
-                        _c.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message })];
-                    case 2:
-                        allowDownload = _c.sent();
-                        if (allowDownload) {
-                            downloadFileWithUrl();
-                        }
-                        else {
-                            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'ParentMessageInfoItem: Not allowed to download.');
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        err_1 = _c.sent();
-                        (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'ParentMessageInfoItem: Error occurred while determining download continuation:', err_1);
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); }
-        : downloadFileWithUrl;
-    // Thumbnail mesage
-    var _p = React.useState(false), isImageRendered = _p[0], setImageRendered = _p[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, " "))))),
-        // Instead of the FileMessageItemBody component
-        (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: handleOnClickTextButton, 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(useFileInfoListWithUploaded.MultipleFilesMessageItemBody, { className: "sendbird-parent-message-info-item__multiple-files-message-wrapper", message: message, isByMe: false, isReactionEnabled: isReactionEnabled, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })),
-        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 (_a) {
-                    var style = _a.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 })))));
+function ParentMessageInfoItem(_a) {
+    var _this = this;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var className = _a.className, message = _a.message, showFileViewer = _a.showFileViewer, _l = _a.onBeforeDownloadFileMessage, onBeforeDownloadFileMessage = _l === void 0 ? null : _l;
+    var _m = useSendbirdStateContext.useSendbirdStateContext(), stores = _m.stores, config = _m.config, eventHandlers = _m.eventHandlers;
+    var logger = config.logger;
+    var onPressUserProfileHandler = (_b = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.reaction) === null || _b === void 0 ? void 0 : _b.onPressUserProfile;
+    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 _o = Thread_context.useThreadContext(), currentChannel = _o.currentChannel, emojiContainer = _o.emojiContainer, nicknamesMap = _o.nicknamesMap, toggleReaction = _o.toggleReaction;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var isReactionEnabled = config.groupChannel.enableReactions;
+    var isMentionEnabled = config.groupChannel.enableMention;
+    var threadMessageKindKey = useFileInfoListWithUploaded.useThreadMessageKindKeySelector({
+        threadMessageKind: useFileInfoListWithUploaded.ThreadMessageKind.PARENT,
+        isMobile: isMobile,
+    });
+    // For MultipleFilesMessage only.
+    var statefulFileInfoList = useFileInfoListWithUploaded.useFileInfoListWithUploaded(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
+        && config.groupChannel.replyType === 'thread'
+        && ((_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, message === null || message === void 0 ? void 0 : message.message]);
+    // Only for the FileMessageItemBody
+    var downloadFileWithUrl = function () {
+        if (index.isFileMessage(message))
+            utils.openURL(message.url);
+    };
+    var handleOnClickTextButton = onBeforeDownloadFileMessage
+        ? function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+            var allowDownload, err_1;
+            var _a, _b;
+            return _tslib.__generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!(message.messageType === 'file')) return [3 /*break*/, 4];
+                        _c.label = 1;
+                    case 1:
+                        _c.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, onBeforeDownloadFileMessage({ message: message })];
+                    case 2:
+                        allowDownload = _c.sent();
+                        if (allowDownload) {
+                            downloadFileWithUrl();
+                        }
+                        else {
+                            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'ParentMessageInfoItem: Not allowed to download.');
+                        }
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_1 = _c.sent();
+                        (_b = logger === null || logger === void 0 ? void 0 : logger.error) === null || _b === void 0 ? void 0 : _b.call(logger, 'ParentMessageInfoItem: Error occurred while determining download continuation:', err_1);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); }
+        : downloadFileWithUrl;
+    // Thumbnail mesage
+    var _p = React.useState(false), isImageRendered = _p[0], setImageRendered = _p[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, " "))))),
+        // Instead of the FileMessageItemBody component
+        (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: handleOnClickTextButton, 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(useFileInfoListWithUploaded.MultipleFilesMessageItemBody, { className: "sendbird-parent-message-info-item__multiple-files-message-wrapper", message: message, isByMe: false, isReactionEnabled: isReactionEnabled, threadMessageKindKey: threadMessageKindKey, statefulFileInfoList: statefulFileInfoList, onBeforeDownloadFileMessage: onBeforeDownloadFileMessage })),
+        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 (_a) {
+                    var style = _a.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;

package/cjs/Thread/components/ThreadHeader.js

@@ -1,33 +1,30 @@
 '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-Cm_quRwQ.js');
-var ui_TextButton = require('../../ui/TextButton.js');
-var LocalizationContext = require('../../chunks/bundle-Cg6exdly.js');
-require('../../chunks/bundle-BwzMNAFs.js');
-require('../../chunks/bundle-_VH8bxGE.js');
-require('../../chunks/bundle-DXrpp6AJ.js');
-require('../../chunks/bundle-Bu7SLdLc.js');
-require('../../chunks/bundle-XPPVGabQ.js');
+var LocalizationContext = require('../../chunks/bundle-oeWNUdCB.js');
+var ui_Header = require('../../ui/Header.js');
+require('../../chunks/bundle-HGbi-rCv.js');
+require('../../chunks/bundle-BoLhr7Ko.js');
+require('../../chunks/bundle-gtkPlUrw.js');
+require('../../chunks/bundle-BWGOXLHb.js');
+require('../../chunks/bundle-5_kPn4wU.js');
+require('../../chunks/bundle-BwQ4BJif.js');
+require('../../ui/TextButton.js');
+require('../../chunks/bundle-DAxedY0T.js');
+require('../../ui/IconButton.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" }))))));
+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(ui_Header.default, { className: "sendbird-thread-header ".concat(className), renderMiddle: function () { return (React.createElement(ui_Header.default.Title, { title: stringSet.THREAD__HEADER_TITLE, subtitle: channelName, onClickSubtitle: onChannelNameClick })); }, renderRight: function () { return (MemoizedActionIcon || (React.createElement("div", { className: "sendbird-thread-header__action" },
+            React.createElement(ui_Header.default.IconButton, { onClick: function (e) { return onActionIconClick(e); }, type: ui_Icon.IconTypes.CLOSE, color: ui_Icon.IconColors.ON_BACKGROUND_1 })))); } }));
 }
 
 module.exports = ThreadHeader;

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

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