@sendbird/uikit-react 3.14.3 → 3.14.4

package/ui/TemplateMessageItemBody.js.map

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

package/ui/TextButton.js

@@ -1,14 +1,14 @@
-import { c as __spreadArray } from '../chunks/bundle-DZcgZWKq.js';
+import { c as __spreadArray } from '../chunks/bundle-7oF7KbGv.js';
 import React__default from 'react';
-import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-BMPm6lKq.js';
+import { C as Colors, c as changeColorToClassName } from '../chunks/bundle-HoQqraNc.js';
 
-var TextButton = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? Colors.ONBACKGROUND_1 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableUnderline, disableUnderline = _e === void 0 ? false : _e, _f = _a.onClick, onClick = _f === void 0 ? function () { } : _f, children = _a.children;
-    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            changeColorToClassName(color),
-            disableUnderline ? 'sendbird-textbutton--not-underline' : 'sendbird-textbutton',
-            disabled ? 'sendbird-textbutton--disabled' : '',
-        ], false).join(' '), role: "button", tabIndex: 0, onClick: function (e) { return onClick(e); }, onKeyPress: function (e) { return onClick(e); } }, children));
+var TextButton = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? Colors.ONBACKGROUND_1 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.disableUnderline, disableUnderline = _e === void 0 ? false : _e, _f = _a.onClick, onClick = _f === void 0 ? function () { } : _f, children = _a.children;
+    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            changeColorToClassName(color),
+            disableUnderline ? 'sendbird-textbutton--not-underline' : 'sendbird-textbutton',
+            disabled ? 'sendbird-textbutton--disabled' : '',
+        ], false).join(' '), role: "button", tabIndex: 0, onClick: function (e) { return onClick(e); }, onKeyPress: function (e) { return onClick(e); } }, children));
 };
 
 export { TextButton as default };

package/ui/TextMessageItemBody.js

@@ -1,66 +1,66 @@
 import React__default, { useContext, useMemo } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-Dk211z5R.js';
-import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-DwApARpe.js';
-import { L as LocalizationContext } from '../chunks/bundle-tIPAQa1P.js';
-import { t as tokenizeMessage } from '../chunks/bundle-DBBVxbFA.js';
-import { T as TextFragment } from '../chunks/bundle-D4x1_hkl.js';
-import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-DpkEqNiD.js';
-import '../chunks/bundle-DZcgZWKq.js';
-import '../chunks/bundle-BLGMGsvT.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-LYAWKk4n.js';
+import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-BWCGFXhj.js';
+import { L as LocalizationContext } from '../chunks/bundle-Bx5vhTbU.js';
+import { t as tokenizeMessage } from '../chunks/bundle-DpGWywZ5.js';
+import { T as TextFragment } from '../chunks/bundle-C1hw1sij.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-DSOf9RKe.js';
+import '../chunks/bundle-7oF7KbGv.js';
+import '../chunks/bundle-C8im5l9B.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-Bdw6eUSG.js';
-import '../chunks/bundle-Danvz0zD.js';
+import '../chunks/bundle-C1ds4cil.js';
 import '../Message/context.js';
 import './MentionLabel.js';
 import './ContextMenu.js';
+import '../chunks/bundle-BbWD2VuS.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-BbeHRXOp.js';
+import '../chunks/bundle-BJ46V6XQ.js';
 import './UserProfile.js';
-import '../chunks/bundle-DGnpw8up.js';
+import '../chunks/bundle-B7barEsR.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-BX_IXLSp.js';
-import '../chunks/bundle-DZl__KhG.js';
-import '../chunks/bundle-BPvfVEd8.js';
+import '../chunks/bundle-BWuyd0AD.js';
+import '../chunks/bundle-ByvmbZD0.js';
+import '../chunks/bundle-CNJMLyGJ.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-CUd4X5O2.js';
+import '../chunks/bundle-CT8ZXUi2.js';
 import './Icon.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 import './LinkLabel.js';
 
-function TextMessageItemBody(_a) {
-    var _b, _c, _d;
-    var _e = _a.className, className = _e === void 0 ? '' : _e, message = _a.message, _f = _a.isByMe, isByMe = _f === void 0 ? false : _f, _g = _a.mouseHover, mouseHover = _g === void 0 ? false : _g, _h = _a.isMentionEnabled, isMentionEnabled = _h === void 0 ? false : _h, _j = _a.isReactionEnabled, isReactionEnabled = _j === void 0 ? false : _j;
-    var stringSet = useContext(LocalizationContext).stringSet;
-    var isMessageMentioned = isMentionEnabled
-        && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0
-        && ((_c = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _c === void 0 ? void 0 : _c.length) > 0;
-    var tokens = useMemo(function () {
-        if (isMessageMentioned) {
-            return tokenizeMessage({
-                mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
-                messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
-            });
-        }
-        return 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]);
-    return (React__default.createElement(Label, { type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1 },
-        React__default.createElement("div", { className: getClassName([
-                className,
-                TEXT_MESSAGE_BODY_CLASSNAME,
-                isByMe ? 'outgoing' : 'incoming',
-                mouseHover ? 'mouse-hover' : '',
-                (isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0) ? 'reactions' : '',
-            ]) },
-            React__default.createElement(TextFragment, { tokens: tokens }),
-            isEditedMessage(message) && (React__default.createElement(Label, { className: "sendbird-text-message-item-body__message edited", type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2 }, " ".concat(stringSet.MESSAGE_EDITED, " "))))));
+function TextMessageItemBody(_a) {
+    var _b, _c, _d;
+    var _e = _a.className, className = _e === void 0 ? '' : _e, message = _a.message, _f = _a.isByMe, isByMe = _f === void 0 ? false : _f, _g = _a.mouseHover, mouseHover = _g === void 0 ? false : _g, _h = _a.isMentionEnabled, isMentionEnabled = _h === void 0 ? false : _h, _j = _a.isReactionEnabled, isReactionEnabled = _j === void 0 ? false : _j;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var isMessageMentioned = isMentionEnabled
+        && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0
+        && ((_c = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _c === void 0 ? void 0 : _c.length) > 0;
+    var tokens = useMemo(function () {
+        if (isMessageMentioned) {
+            return tokenizeMessage({
+                mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
+                messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
+            });
+        }
+        return 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]);
+    return (React__default.createElement(Label, { type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1 },
+        React__default.createElement("div", { className: getClassName([
+                className,
+                TEXT_MESSAGE_BODY_CLASSNAME,
+                isByMe ? 'outgoing' : 'incoming',
+                mouseHover ? 'mouse-hover' : '',
+                (isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0) ? 'reactions' : '',
+            ]) },
+            React__default.createElement(TextFragment, { tokens: tokens }),
+            isEditedMessage(message) && (React__default.createElement(Label, { className: "sendbird-text-message-item-body__message edited", type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2 }, " ".concat(stringSet.MESSAGE_EDITED, " "))))));
 }
 
 export { TextMessageItemBody as default };

package/ui/ThreadReplies.js

@@ -1,41 +1,41 @@
 import React__default from 'react';
-import { A as Avatar } from '../chunks/bundle-BPvfVEd8.js';
+import { A as Avatar } from '../chunks/bundle-CNJMLyGJ.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-Dk211z5R.js';
-import { u as useLocalization } from '../chunks/bundle-tIPAQa1P.js';
-import '../chunks/bundle-DZcgZWKq.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-LYAWKk4n.js';
+import { u as useLocalization } from '../chunks/bundle-Bx5vhTbU.js';
+import '../chunks/bundle-7oF7KbGv.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-DZl__KhG.js';
-import '../chunks/bundle-CUd4X5O2.js';
-import '../chunks/bundle-BLGMGsvT.js';
-import '../chunks/bundle-Danvz0zD.js';
+import '../chunks/bundle-ByvmbZD0.js';
+import '../chunks/bundle-CT8ZXUi2.js';
+import '../chunks/bundle-C8im5l9B.js';
+import '../chunks/bundle-C1ds4cil.js';
 
-function ThreadReplies(_a, ref) {
-    var _b;
-    var className = _a.className, threadInfo = _a.threadInfo, onClick = _a.onClick;
-    var _c = threadInfo.mostRepliedUsers, mostRepliedUsers = _c === void 0 ? [] : _c, replyCount = threadInfo.replyCount;
-    var stringSet = useLocalization().stringSet;
-    return (React__default.createElement("div", { className: "sendbird-ui-thread-replies ".concat(className), role: "button", onClick: function (e) {
-            onClick(e);
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-        }, onKeyDown: function (e) {
-            onClick(e);
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-        }, ref: ref },
-        React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles" },
-            mostRepliedUsers.slice(0, 4).map(function (user) {
-                return (React__default.createElement(Avatar, { key: user.userId, className: "sendbird-ui-thread-replies__user-profiles__avatar", src: user === null || user === void 0 ? void 0 : user.profileUrl, alt: "user profile", width: "20px", height: "20px" }));
-            }),
-            (mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers.length) >= 5 && (React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles__avatar" },
-                React__default.createElement(Avatar, { className: "sendbird-ui-thread-replies__user-profiles__avatar__image", src: (_b = mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers[4]) === null || _b === void 0 ? void 0 : _b.profileUrl, alt: "user profile", width: "20px", height: "20px" }),
-                React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles__avatar__cover" }),
-                React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles__avatar__plus" },
-                    React__default.createElement(Icon, { type: IconTypes.PLUS, fillColor: IconColors.WHITE, width: "16px", height: "16px" }))))),
-        React__default.createElement(Label, { className: "sendbird-ui-thread-replies__reply-counts", type: LabelTypography.CAPTION_2, color: LabelColors.PRIMARY }, replyCount === 1
-            ? "".concat(replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLY)
-            : "".concat(replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLIES)),
-        React__default.createElement(Icon, { className: "sendbird-ui-thread-replies__icon", type: IconTypes.CHEVRON_RIGHT, fillColor: IconColors.PRIMARY, width: "16px", height: "16px" })));
-}
+function ThreadReplies(_a, ref) {
+    var _b;
+    var className = _a.className, threadInfo = _a.threadInfo, onClick = _a.onClick;
+    var _c = threadInfo.mostRepliedUsers, mostRepliedUsers = _c === void 0 ? [] : _c, replyCount = threadInfo.replyCount;
+    var stringSet = useLocalization().stringSet;
+    return (React__default.createElement("div", { className: "sendbird-ui-thread-replies ".concat(className), role: "button", onClick: function (e) {
+            onClick(e);
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        }, onKeyDown: function (e) {
+            onClick(e);
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+        }, ref: ref },
+        React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles" },
+            mostRepliedUsers.slice(0, 4).map(function (user) {
+                return (React__default.createElement(Avatar, { key: user.userId, className: "sendbird-ui-thread-replies__user-profiles__avatar", src: user === null || user === void 0 ? void 0 : user.profileUrl, alt: "user profile", width: "20px", height: "20px" }));
+            }),
+            (mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers.length) >= 5 && (React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles__avatar" },
+                React__default.createElement(Avatar, { className: "sendbird-ui-thread-replies__user-profiles__avatar__image", src: (_b = mostRepliedUsers === null || mostRepliedUsers === void 0 ? void 0 : mostRepliedUsers[4]) === null || _b === void 0 ? void 0 : _b.profileUrl, alt: "user profile", width: "20px", height: "20px" }),
+                React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles__avatar__cover" }),
+                React__default.createElement("div", { className: "sendbird-ui-thread-replies__user-profiles__avatar__plus" },
+                    React__default.createElement(Icon, { type: IconTypes.PLUS, fillColor: IconColors.WHITE, width: "16px", height: "16px" }))))),
+        React__default.createElement(Label, { className: "sendbird-ui-thread-replies__reply-counts", type: LabelTypography.CAPTION_2, color: LabelColors.PRIMARY }, replyCount === 1
+            ? "".concat(replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLY)
+            : "".concat(replyCount > 99 ? stringSet.CHANNEL__THREAD_OVER_MAX : replyCount, " ").concat(stringSet.CHANNEL__THREAD_REPLIES)),
+        React__default.createElement(Icon, { className: "sendbird-ui-thread-replies__icon", type: IconTypes.CHEVRON_RIGHT, fillColor: IconColors.PRIMARY, width: "16px", height: "16px" })));
+}
 var ThreadReplies$1 = React__default.forwardRef(ThreadReplies);
 
 export { ThreadReplies, ThreadReplies$1 as default };

package/ui/ThumbnailMessageItemBody.js

@@ -1,46 +1,45 @@
-import { _ as __assign } from '../chunks/bundle-DZcgZWKq.js';
+import { _ as __assign } from '../chunks/bundle-7oF7KbGv.js';
 import React__default, { useState } from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import ImageRenderer from './ImageRenderer.js';
-import { q as isSentMessage, w as getClassName, r as isVideoMessage, s as isGifMessage } from '../chunks/bundle-DwApARpe.js';
-import { n as noop } from '../chunks/bundle-DZl__KhG.js';
-import { u as useLongPress } from '../chunks/bundle-BwJTKHEl.js';
-import { c as getMessageFirstFileThumbnailUrl, g as getMessageFirstFileUrl, a as getMessageFirstFileType } from '../chunks/bundle-CY2Lga-4.js';
+import { q as isSentMessage, w as getClassName, r as isVideoMessage, s as isGifMessage } from '../chunks/bundle-BWCGFXhj.js';
+import { n as noop } from '../chunks/bundle-ByvmbZD0.js';
+import { u as useLongPress } from '../chunks/bundle-Gx0ryc_f.js';
+import { c as getMessageFirstFileThumbnailUrl, g as getMessageFirstFileUrl, a as getMessageFirstFileType } from '../chunks/bundle-DDhhxSv0.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-Bdw6eUSG.js';
-import '../chunks/bundle-BlK-fMQm.js';
+import '../chunks/bundle-Diqj6For.js';
 
-function ThumbnailMessageItemBody(_a) {
-    var _b, _c;
-    var _d = _a.className, className = _d === void 0 ? '' : _d, message = _a.message, _e = _a.isByMe, isByMe = _e === void 0 ? false : _e, _f = _a.mouseHover, mouseHover = _f === void 0 ? false : _f, _g = _a.isReactionEnabled, isReactionEnabled = _g === void 0 ? false : _g, _h = _a.showFileViewer, showFileViewer = _h === void 0 ? noop : _h, _j = _a.style, style = _j === void 0 ? {} : _j;
-    var thumbnailUrl = getMessageFirstFileThumbnailUrl(message);
-    var _k = useState(false), imageRendered = _k[0], setImageRendered = _k[1];
-    var onClickHandler = useLongPress({
-        onLongPress: noop,
-        onClick: function () {
-            if (isSentMessage(message)) {
-                showFileViewer === null || showFileViewer === void 0 ? void 0 : showFileViewer(true);
-            }
-        },
-    });
-    return (React__default.createElement("div", __assign({ className: getClassName([
-            className,
-            'sendbird-thumbnail-message-item-body',
-            isByMe ? 'outgoing' : 'incoming',
-            mouseHover ? 'mouse-hover' : '',
-            (isReactionEnabled && ((_c = (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0) ? 'reactions' : '',
-        ]) }, onClickHandler),
-        React__default.createElement(ImageRenderer, { className: "sendbird-thumbnail-message-item-body__thumbnail", url: thumbnailUrl || getMessageFirstFileUrl(message), alt: getMessageFirstFileType(message), width: (style === null || style === void 0 ? void 0 : style.width) || '360px', height: (style === null || style === void 0 ? void 0 : style.height) || '270px', onLoad: function () { setImageRendered(true); }, placeHolder: function (_a) {
-                var style = _a.style;
-                return (React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__placeholder", style: style }));
-            } }),
-        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (React__default.createElement("video", { className: "sendbird-thumbnail-message-item-body__video" },
-            React__default.createElement("source", { src: getMessageFirstFileUrl(message), type: getMessageFirstFileType(message) }))),
-        React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__image-cover" }),
-        (isVideoMessage(message) || isGifMessage(message)) && (React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__icon-wrapper" },
-            React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__icon-wrapper__icon" },
-                React__default.createElement(Icon, { type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF, fillColor: IconColors.THUMBNAIL_ICON, width: "34px", height: "34px" }))))));
+function ThumbnailMessageItemBody(_a) {
+    var _b, _c;
+    var _d = _a.className, className = _d === void 0 ? '' : _d, message = _a.message, _e = _a.isByMe, isByMe = _e === void 0 ? false : _e, _f = _a.mouseHover, mouseHover = _f === void 0 ? false : _f, _g = _a.isReactionEnabled, isReactionEnabled = _g === void 0 ? false : _g, _h = _a.showFileViewer, showFileViewer = _h === void 0 ? noop : _h, _j = _a.style, style = _j === void 0 ? {} : _j;
+    var thumbnailUrl = getMessageFirstFileThumbnailUrl(message);
+    var _k = useState(false), imageRendered = _k[0], setImageRendered = _k[1];
+    var onClickHandler = useLongPress({
+        onLongPress: noop,
+        onClick: function () {
+            if (isSentMessage(message)) {
+                showFileViewer === null || showFileViewer === void 0 ? void 0 : showFileViewer(true);
+            }
+        },
+    });
+    return (React__default.createElement("div", __assign({ className: getClassName([
+            className,
+            'sendbird-thumbnail-message-item-body',
+            isByMe ? 'outgoing' : 'incoming',
+            mouseHover ? 'mouse-hover' : '',
+            (isReactionEnabled && ((_c = (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0) ? 'reactions' : '',
+        ]) }, onClickHandler),
+        React__default.createElement(ImageRenderer, { className: "sendbird-thumbnail-message-item-body__thumbnail", url: thumbnailUrl || getMessageFirstFileUrl(message), alt: getMessageFirstFileType(message), width: (style === null || style === void 0 ? void 0 : style.width) || '360px', height: (style === null || style === void 0 ? void 0 : style.height) || '270px', onLoad: function () { setImageRendered(true); }, placeHolder: function (_a) {
+                var style = _a.style;
+                return (React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__placeholder", style: style }));
+            } }),
+        (isVideoMessage(message) && !thumbnailUrl) && !imageRendered && (React__default.createElement("video", { className: "sendbird-thumbnail-message-item-body__video" },
+            React__default.createElement("source", { src: getMessageFirstFileUrl(message), type: getMessageFirstFileType(message) }))),
+        React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__image-cover" }),
+        (isVideoMessage(message) || isGifMessage(message)) && (React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__icon-wrapper" },
+            React__default.createElement("div", { className: "sendbird-thumbnail-message-item-body__icon-wrapper__icon" },
+                React__default.createElement(Icon, { type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF, fillColor: IconColors.THUMBNAIL_ICON, width: "34px", height: "34px" }))))));
 }
 
 export { ThumbnailMessageItemBody as default };

package/ui/ThumbnailMessageItemBody.js.map

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

package/ui/Toggle.js

@@ -1,125 +1,125 @@
 import React__default, { useState, useCallback } from 'react';
-import { _ as __assign } from '../chunks/bundle-DZcgZWKq.js';
+import { _ as __assign } from '../chunks/bundle-7oF7KbGv.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 
-/**
- * The default value of `checked` should be null
- * to support both case of controlled and uncontrolled component
- * ref: https://github.com/aaronshaf/react-toggle#props
- */
-var noop = function () { };
-var TOGGLE_DEFAULT_VALUE = {
-    checked: null,
-    defaultChecked: false,
-    disabled: false,
-    onChange: noop,
-    onFocus: noop,
-    onBlur: noop,
-};
-var ToggleContext = React__default.createContext(TOGGLE_DEFAULT_VALUE);
-function useToggleContext() {
-    var context = React__default.useContext(ToggleContext);
-    if (context === undefined) {
-        throw new Error('@sendbird/uikit-react/ui/Toggle: useToggleContext must be used within a ToggleContainer.');
-    }
-    return context;
+/**
+ * The default value of `checked` should be null
+ * to support both case of controlled and uncontrolled component
+ * ref: https://github.com/aaronshaf/react-toggle#props
+ */
+var noop = function () { };
+var TOGGLE_DEFAULT_VALUE = {
+    checked: null,
+    defaultChecked: false,
+    disabled: false,
+    onChange: noop,
+    onFocus: noop,
+    onBlur: noop,
+};
+var ToggleContext = React__default.createContext(TOGGLE_DEFAULT_VALUE);
+function useToggleContext() {
+    var context = React__default.useContext(ToggleContext);
+    if (context === undefined) {
+        throw new Error('@sendbird/uikit-react/ui/Toggle: useToggleContext must be used within a ToggleContainer.');
+    }
+    return context;
 }
 
-// Props Explanation https://github.com/aaronshaf/react-toggle#props
-function ToggleContainer(_a) {
-    var _b = _a.checked, checked = _b === void 0 ? TOGGLE_DEFAULT_VALUE.checked : _b, // null
-    _c = _a.defaultChecked, // null
-    defaultChecked = _c === void 0 ? TOGGLE_DEFAULT_VALUE.defaultChecked : _c, _d = _a.disabled, disabled = _d === void 0 ? TOGGLE_DEFAULT_VALUE.disabled : _d, _e = _a.onChange, onChange = _e === void 0 ? TOGGLE_DEFAULT_VALUE.onChange : _e, _f = _a.onFocus, onFocus = _f === void 0 ? TOGGLE_DEFAULT_VALUE.onFocus : _f, _g = _a.onBlur, onBlur = _g === void 0 ? TOGGLE_DEFAULT_VALUE.onBlur : _g, children = _a.children;
-    var _h = useState(defaultChecked || false), isChecked = _h[0], setChecked = _h[1];
-    var handleChange = useCallback(function (e) {
-        if (disabled) {
-            return;
-        }
-        if (checked === null) {
-            setChecked(e.currentTarget.checked);
-        }
-        onChange(e);
-    }, [onChange, checked]);
-    return (React__default.createElement(ToggleContext.Provider, { value: {
-            checked: checked !== null ? checked : isChecked,
-            disabled: disabled,
-            onChange: handleChange,
-            onFocus: function (e) {
-                if (!disabled) {
-                    onFocus(e);
-                }
-            },
-            onBlur: function (e) {
-                if (!disabled) {
-                    onBlur(e);
-                }
-            },
-        } }, children));
+// Props Explanation https://github.com/aaronshaf/react-toggle#props
+function ToggleContainer(_a) {
+    var _b = _a.checked, checked = _b === void 0 ? TOGGLE_DEFAULT_VALUE.checked : _b, // null
+    _c = _a.defaultChecked, // null
+    defaultChecked = _c === void 0 ? TOGGLE_DEFAULT_VALUE.defaultChecked : _c, _d = _a.disabled, disabled = _d === void 0 ? TOGGLE_DEFAULT_VALUE.disabled : _d, _e = _a.onChange, onChange = _e === void 0 ? TOGGLE_DEFAULT_VALUE.onChange : _e, _f = _a.onFocus, onFocus = _f === void 0 ? TOGGLE_DEFAULT_VALUE.onFocus : _f, _g = _a.onBlur, onBlur = _g === void 0 ? TOGGLE_DEFAULT_VALUE.onBlur : _g, children = _a.children;
+    var _h = useState(defaultChecked || false), isChecked = _h[0], setChecked = _h[1];
+    var handleChange = useCallback(function (e) {
+        if (disabled) {
+            return;
+        }
+        if (checked === null) {
+            setChecked(e.currentTarget.checked);
+        }
+        onChange(e);
+    }, [onChange, checked]);
+    return (React__default.createElement(ToggleContext.Provider, { value: {
+            checked: checked !== null ? checked : isChecked,
+            disabled: disabled,
+            onChange: handleChange,
+            onFocus: function (e) {
+                if (!disabled) {
+                    onFocus(e);
+                }
+            },
+            onBlur: function (e) {
+                if (!disabled) {
+                    onBlur(e);
+                }
+            },
+        } }, children));
 }
 
-function filterNumber(input) {
-    if (typeof input !== 'string' && typeof input !== 'number') {
-        try {
-            var config = useSendbirdStateContext().config;
-            var logger = config.logger;
-            logger.warning('@sendbird/uikit-react/ui/Toggle: TypeError - expected string or number.', input);
-        }
-        catch (_) { /* noop */ }
-        return [];
-    }
-    if (typeof input === 'number') {
-        return [input];
-    }
-    var regex = /(-?\d+)(\.\d+)?/g;
-    var numbers = input.match(regex) || [];
-    return numbers.map(parseFloat);
+function filterNumber(input) {
+    if (typeof input !== 'string' && typeof input !== 'number') {
+        try {
+            var config = useSendbirdStateContext().config;
+            var logger = config.logger;
+            logger.warning('@sendbird/uikit-react/ui/Toggle: TypeError - expected string or number.', input);
+        }
+        catch (_) { /* noop */ }
+        return [];
+    }
+    if (typeof input === 'number') {
+        return [input];
+    }
+    var regex = /(-?\d+)(\.\d+)?/g;
+    var numbers = input.match(regex) || [];
+    return numbers.map(parseFloat);
 }
 
-function ToggleUI(props) {
-    var _a;
-    var _b = props.reversed, reversed = _b === void 0 ? false : _b, _c = props.width, width = _c === void 0 ? '40px' : _c, _d = props.animationDuration, animationDuration = _d === void 0 ? '0.5s' : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.name, name = _f === void 0 ? '' : _f, _g = props.id, id = _g === void 0 ? '' : _g, _h = props.ariaLabel, ariaLabel = _h === void 0 ? '' : _h, _j = props.ariaLabelledby, ariaLabelledby = _j === void 0 ? '' : _j;
-    var _k = useToggleContext(), checked = _k.checked, disabled = _k.disabled, onChange = _k.onChange, onFocus = _k.onFocus, onBlur = _k.onBlur;
-    // animation should not be activated in the initialization step
-    var _l = useState(''), animatedClassName = _l[0], setAnimatedClassName = _l[1];
-    var toggleWidth = (_a = filterNumber(width)) === null || _a === void 0 ? void 0 : _a[0];
-    var toggleHeight = toggleWidth / 2;
-    // The size of dot should be 60% of toggle height
-    var dotSize = toggleHeight * 0.6;
-    return (React__default.createElement("label", { className: [
-            'sendbird-input-toggle-button',
-            animatedClassName,
-            checked ? 'sendbird-input-toggle-button--checked' : 'sendbird-input-toggle-button--unchecked',
-            disabled ? 'sendbird-input-toggle-button--disabled' : [],
-            reversed ? 'sendbird-input-toggle-button--reversed' : [],
-        ].flat().join(' '), style: __assign({ width: "".concat(toggleWidth, "px"), height: "".concat(toggleHeight, "px"), borderRadius: "".concat(dotSize, "px") }, style) },
-        React__default.createElement("div", { className: [
-                'sendbird-input-toggle-button__inner-dot',
-                checked
-                    ? 'sendbird-input-toggle-button__inner-dot--activate'
-                    : 'sendbird-input-toggle-button__inner-dot--inactivate',
-            ].join(' '), style: {
-                width: "".concat(dotSize, "px"),
-                height: "".concat(dotSize, "px"),
-                animationDuration: animationDuration,
-            } }),
-        React__default.createElement("input", { type: "checkbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, name: name, id: id, checked: checked, disabled: disabled, onChange: function (e) {
-                onChange(e);
-                setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');
-            }, onFocus: onFocus, onBlur: onBlur })));
+function ToggleUI(props) {
+    var _a;
+    var _b = props.reversed, reversed = _b === void 0 ? false : _b, _c = props.width, width = _c === void 0 ? '40px' : _c, _d = props.animationDuration, animationDuration = _d === void 0 ? '0.5s' : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.name, name = _f === void 0 ? '' : _f, _g = props.id, id = _g === void 0 ? '' : _g, _h = props.ariaLabel, ariaLabel = _h === void 0 ? '' : _h, _j = props.ariaLabelledby, ariaLabelledby = _j === void 0 ? '' : _j;
+    var _k = useToggleContext(), checked = _k.checked, disabled = _k.disabled, onChange = _k.onChange, onFocus = _k.onFocus, onBlur = _k.onBlur;
+    // animation should not be activated in the initialization step
+    var _l = useState(''), animatedClassName = _l[0], setAnimatedClassName = _l[1];
+    var toggleWidth = (_a = filterNumber(width)) === null || _a === void 0 ? void 0 : _a[0];
+    var toggleHeight = toggleWidth / 2;
+    // The size of dot should be 60% of toggle height
+    var dotSize = toggleHeight * 0.6;
+    return (React__default.createElement("label", { className: [
+            'sendbird-input-toggle-button',
+            animatedClassName,
+            checked ? 'sendbird-input-toggle-button--checked' : 'sendbird-input-toggle-button--unchecked',
+            disabled ? 'sendbird-input-toggle-button--disabled' : [],
+            reversed ? 'sendbird-input-toggle-button--reversed' : [],
+        ].flat().join(' '), style: __assign({ width: "".concat(toggleWidth, "px"), height: "".concat(toggleHeight, "px"), borderRadius: "".concat(dotSize, "px") }, style) },
+        React__default.createElement("div", { className: [
+                'sendbird-input-toggle-button__inner-dot',
+                checked
+                    ? 'sendbird-input-toggle-button__inner-dot--activate'
+                    : 'sendbird-input-toggle-button__inner-dot--inactivate',
+            ].join(' '), style: {
+                width: "".concat(dotSize, "px"),
+                height: "".concat(dotSize, "px"),
+                animationDuration: animationDuration,
+            } }),
+        React__default.createElement("input", { type: "checkbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, name: name, id: id, checked: checked, disabled: disabled, onChange: function (e) {
+                onChange(e);
+                setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');
+            }, onFocus: onFocus, onBlur: onBlur })));
 }
 
-function Toggle(props) {
-    var 
-    // ToggleProvider
-    checked = props.checked, defaultChecked = props.defaultChecked, disabled = props.disabled, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, 
-    // ToggleUI
-    className = props.className, reversed = props.reversed, width = props.width, 
-    // height will be half of width
-    animationDuration = props.animationDuration, style = props.style, name = props.name, id = props.id, ariaLabel = props.ariaLabel, ariaLabelledby = props.ariaLabelledby;
-    return (React__default.createElement("div", { className: "sendbird-ui-toggle ".concat(className) },
-        React__default.createElement(ToggleContainer, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus, onBlur: onBlur },
-            React__default.createElement(ToggleUI, { reversed: reversed, width: width, animationDuration: animationDuration, style: style, name: name, id: id, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby }))));
+function Toggle(props) {
+    var 
+    // ToggleProvider
+    checked = props.checked, defaultChecked = props.defaultChecked, disabled = props.disabled, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, 
+    // ToggleUI
+    className = props.className, reversed = props.reversed, width = props.width, 
+    // height will be half of width
+    animationDuration = props.animationDuration, style = props.style, name = props.name, id = props.id, ariaLabel = props.ariaLabel, ariaLabelledby = props.ariaLabelledby;
+    return (React__default.createElement("div", { className: "sendbird-ui-toggle ".concat(className) },
+        React__default.createElement(ToggleContainer, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus, onBlur: onBlur },
+            React__default.createElement(ToggleUI, { reversed: reversed, width: width, animationDuration: animationDuration, style: style, name: name, id: id, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby }))));
 }
 
 export { Toggle, ToggleContainer, ToggleUI, useToggleContext };

package/ui/Tooltip.js

@@ -1,14 +1,14 @@
-import { c as __spreadArray } from '../chunks/bundle-DZcgZWKq.js';
+import { c as __spreadArray } from '../chunks/bundle-7oF7KbGv.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-Dk211z5R.js';
-import '../chunks/bundle-BLGMGsvT.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-LYAWKk4n.js';
+import '../chunks/bundle-C8im5l9B.js';
 
-function Tooltip(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? '' : _c;
-    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-tooltip',
-        ], false).join(' ') },
-        React__default.createElement(Label, { className: "sendbird-tooltip__text", type: LabelTypography.CAPTION_2, color: LabelColors.ONCONTENT_1 }, children)));
+function Tooltip(_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.children, children = _c === void 0 ? '' : _c;
+    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-tooltip',
+        ], false).join(' ') },
+        React__default.createElement(Label, { className: "sendbird-tooltip__text", type: LabelTypography.CAPTION_2, color: LabelColors.ONCONTENT_1 }, children)));
 }
 
 export { Tooltip as default };

package/ui/TooltipWrapper.js

@@ -1,18 +1,18 @@
-import { c as __spreadArray } from '../chunks/bundle-DZcgZWKq.js';
+import { c as __spreadArray } from '../chunks/bundle-7oF7KbGv.js';
 import React__default, { useState, useRef } from 'react';
 
-var SPACE_FROM_TRIGGER = 8;
-function TooltipWrapper(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, hoverTooltip = _a.hoverTooltip;
-    var _c = useState(false), showHoverTooltip = _c[0], setShowHoverTooltip = _c[1];
-    var childrenRef = useRef(null);
-    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-tooltip-wrapper',
-        ], false).join(' '), onMouseOver: function () { setShowHoverTooltip(true); }, onFocus: function () { setShowHoverTooltip(true); }, onMouseOut: function () { setShowHoverTooltip(false); }, onBlur: function () { setShowHoverTooltip(false); } },
-        React__default.createElement("div", { className: "sendbird-tooltip-wrapper__children", ref: childrenRef }, children),
-        showHoverTooltip && (React__default.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip", style: { bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)") } },
-            React__default.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner" },
-                React__default.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container", style: { left: childrenRef.current && "calc(".concat(childrenRef.current.offsetWidth / 2, "px - 50%)") } }, hoverTooltip))))));
+var SPACE_FROM_TRIGGER = 8;
+function TooltipWrapper(_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, hoverTooltip = _a.hoverTooltip;
+    var _c = useState(false), showHoverTooltip = _c[0], setShowHoverTooltip = _c[1];
+    var childrenRef = useRef(null);
+    return (React__default.createElement("div", { className: __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-tooltip-wrapper',
+        ], false).join(' '), onMouseOver: function () { setShowHoverTooltip(true); }, onFocus: function () { setShowHoverTooltip(true); }, onMouseOut: function () { setShowHoverTooltip(false); }, onBlur: function () { setShowHoverTooltip(false); } },
+        React__default.createElement("div", { className: "sendbird-tooltip-wrapper__children", ref: childrenRef }, children),
+        showHoverTooltip && (React__default.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip", style: { bottom: "calc(100% + ".concat(SPACE_FROM_TRIGGER, "px)") } },
+            React__default.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner" },
+                React__default.createElement("div", { className: "sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container", style: { left: childrenRef.current && "calc(".concat(childrenRef.current.offsetWidth / 2, "px - 50%)") } }, hoverTooltip))))));
 }
 
 export { TooltipWrapper as default };