@sendbird/uikit-react 3.14.3 → 3.14.5

package/cjs/ui/MessageSearchItem.js

@@ -1,61 +1,61 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-CY1bUkfG.js');
+var _tslib = require('../chunks/bundle-C-r9vRgc.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-BmEl3iIW.js');
-var index = require('../chunks/bundle-juHuQ6-V.js');
-var ui_Avatar = require('../chunks/bundle-oUs61pbv.js');
-var ui_Label = require('../chunks/bundle-BuYf2Pa8.js');
-var LocalizationContext = require('../chunks/bundle-E9H8fQL4.js');
-require('../chunks/bundle-BwvM-P29.js');
-require('../chunks/bundle--yYCgVRq.js');
+var index$1 = require('../chunks/bundle-CjYhSLRD.js');
+var index = require('../chunks/bundle-CgOafeY_.js');
+var ui_Avatar = require('../chunks/bundle-C0ZNrrcl.js');
+var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
+require('../chunks/bundle-CDJXrIVC.js');
+require('../chunks/bundle-CL-vjR4o.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-BDbnsPGF.js');
-require('../chunks/bundle-C-zGGOpz.js');
+require('../chunks/bundle-CLte647H.js');
+require('../chunks/bundle-CxNGVWIy.js');
 require('./Icon.js');
-require('../chunks/bundle-DvWHV-PM.js');
+require('../chunks/bundle-DWBc-Yv7.js');
 
-// getCreatedAt
-function getCreatedAt (_a) {
-    var createdAt = _a.createdAt, locale = _a.locale, stringSet = _a.stringSet;
-    var optionalParam = locale ? { locale: locale } : null;
-    if (!createdAt) {
-        return '';
-    }
-    if (index.isToday(createdAt)) {
-        return index$1.format(createdAt, 'p', optionalParam);
-    }
-    if (index.isYesterday(createdAt)) {
-        return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
-    }
-    if (index.isThisYear(createdAt)) {
-        return index$1.format(createdAt, 'MMM d', optionalParam);
-    }
-    return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
+// getCreatedAt
+function getCreatedAt (_a) {
+    var createdAt = _a.createdAt, locale = _a.locale, stringSet = _a.stringSet;
+    var optionalParam = locale ? { locale: locale } : null;
+    if (!createdAt) {
+        return '';
+    }
+    if (index.isToday(createdAt)) {
+        return index$1.format(createdAt, 'p', optionalParam);
+    }
+    if (index.isYesterday(createdAt)) {
+        return (stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_STATUS__YESTERDAY) || 'Yesterday';
+    }
+    if (index.isThisYear(createdAt)) {
+        return index$1.format(createdAt, 'MMM d', optionalParam);
+    }
+    return index$1.format(createdAt, 'yyyy/M/d', optionalParam);
 }
 
-function MessageSearchItem(_a) {
-    var className = _a.className, message = _a.message, selected = _a.selected, onClick = _a.onClick;
-    var createdAt = message.createdAt;
-    var messageText = message.message;
-    // @ts-ignore
-    var sender = message.sender || message._sender;
-    var profileUrl = sender.profileUrl, nickname = sender.nickname;
-    var _b = LocalizationContext.useLocalization(), stringSet = _b.stringSet, dateLocale = _b.dateLocale;
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-message-search-item',
-            selected ? 'sendbird-message-search-item--selected' : '',
-        ], false).join(' '), onClick: function (e) {
-            e.stopPropagation();
-            onClick(message);
-        } },
-        React.createElement("div", { className: "sendbird-message-search-item__left" },
-            React.createElement(ui_Avatar.Avatar, { className: "sendbird-message-search-item__left__sender-avatar", src: profileUrl, alt: "profile image", width: "56px", height: "56px" })),
-        React.createElement("div", { className: "sendbird-message-search-item__right" },
-            React.createElement(ui_Label.Label, { className: "sendbird-message-search-item__right__sender-name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, nickname || stringSet.NO_NAME),
-            React.createElement(ui_Label.Label, { className: "sendbird-message-search-item__right__message-text", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, messageText),
-            React.createElement(ui_Label.Label, { className: "sendbird-message-search-item__right__message-created-at", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, getCreatedAt({ createdAt: createdAt, locale: dateLocale, stringSet: stringSet }))),
-        React.createElement("div", { className: "sendbird-message-search-item__right-footer" })));
+function MessageSearchItem(_a) {
+    var className = _a.className, message = _a.message, selected = _a.selected, onClick = _a.onClick;
+    var createdAt = message.createdAt;
+    var messageText = message.message;
+    // @ts-ignore
+    var sender = message.sender || message._sender;
+    var profileUrl = sender.profileUrl, nickname = sender.nickname;
+    var _b = LocalizationContext.useLocalization(), stringSet = _b.stringSet, dateLocale = _b.dateLocale;
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-message-search-item',
+            selected ? 'sendbird-message-search-item--selected' : '',
+        ], false).join(' '), onClick: function (e) {
+            e.stopPropagation();
+            onClick(message);
+        } },
+        React.createElement("div", { className: "sendbird-message-search-item__left" },
+            React.createElement(ui_Avatar.Avatar, { className: "sendbird-message-search-item__left__sender-avatar", src: profileUrl, alt: "profile image", width: "56px", height: "56px" })),
+        React.createElement("div", { className: "sendbird-message-search-item__right" },
+            React.createElement(ui_Label.Label, { className: "sendbird-message-search-item__right__sender-name", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, nickname || stringSet.NO_NAME),
+            React.createElement(ui_Label.Label, { className: "sendbird-message-search-item__right__message-text", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, messageText),
+            React.createElement(ui_Label.Label, { className: "sendbird-message-search-item__right__message-created-at", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, getCreatedAt({ createdAt: createdAt, locale: dateLocale, stringSet: stringSet }))),
+        React.createElement("div", { className: "sendbird-message-search-item__right-footer" })));
 }
 
 module.exports = MessageSearchItem;

package/cjs/ui/MessageStatus.js

@@ -2,23 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-CY1bUkfG.js');
+require('../chunks/bundle-C-r9vRgc.js');
 require('react');
-require('../chunks/bundle-BmEl3iIW.js');
+require('../chunks/bundle-CjYhSLRD.js');
 require('./Icon.js');
-require('../chunks/bundle-BuYf2Pa8.js');
+require('../chunks/bundle-Deao1Upp.js');
 require('./Loader.js');
-require('../chunks/bundle-D3Gxy8S0.js');
+require('../chunks/bundle-Cw7xe6J1.js');
 require('../utils/message/getOutgoingMessageState.js');
-var ui_MessageStatus = require('../chunks/bundle-DHuWzY0s.js');
-require('../chunks/bundle-E9H8fQL4.js');
-require('../chunks/bundle-BwvM-P29.js');
-require('../chunks/bundle-BDbnsPGF.js');
-require('../chunks/bundle-DvWHV-PM.js');
+var ui_MessageStatus = require('../chunks/bundle-DsrfvJYA.js');
+require('../chunks/bundle-B7wJ4Hqk.js');
+require('../chunks/bundle-CDJXrIVC.js');
+require('../chunks/bundle-CLte647H.js');
+require('../chunks/bundle-DWBc-Yv7.js');
 require('@sendbird/chat/groupChannel');
-require('../chunks/bundle-Bka-H9ks.js');
-require('../chunks/bundle-juHuQ6-V.js');
-require('../chunks/bundle--yYCgVRq.js');
+require('../chunks/bundle-CgOafeY_.js');
+require('../chunks/bundle-CL-vjR4o.js');
 
 
 

package/cjs/ui/MessageStatus.js.map

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

package/cjs/ui/MessageTemplate.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
-var ui_MessageTemplate = require('../chunks/bundle-Djp6Qheo.js');
-require('../chunks/bundle-CY1bUkfG.js');
+var ui_MessageTemplate = require('../chunks/bundle-jLW3AG2G.js');
 
 
 

package/cjs/ui/MessageTemplate.js.map

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

package/cjs/ui/MobileFeedbackMenu.js

@@ -2,36 +2,47 @@
 
 var React = require('react');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-BuYf2Pa8.js');
-var LocalizationContext = require('../chunks/bundle-E9H8fQL4.js');
+var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
 require('react-dom');
-require('../hooks/useModal.js');
-require('../chunks/bundle-CY1bUkfG.js');
-require('../chunks/bundle-Bka-H9ks.js');
-require('../chunks/bundle-BDbnsPGF.js');
-require('../chunks/bundle-fG1bRzYE.js');
-require('../chunks/bundle-BwEcnJDm.js');
+require('../chunks/bundle-DJ9gapN2.js');
+require('../chunks/bundle-C-r9vRgc.js');
+require('../chunks/bundle-Cw7xe6J1.js');
+require('@sendbird/chat/groupChannel');
+require('../utils/message/getOutgoingMessageState.js');
+require('../chunks/bundle-CLte647H.js');
+require('../chunks/bundle-CLNUkVC8.js');
 require('./IconButton.js');
 require('./Button.js');
 require('./Icon.js');
-require('../chunks/bundle-DvWHV-PM.js');
-require('../chunks/bundle-BwvM-P29.js');
+require('@sendbird/uikit-tools');
+require('../withSendbird.js');
+require('css-vars-ponyfill');
+require('@sendbird/chat');
+require('../chunks/bundle-Ub33KGva.js');
+require('@sendbird/chat/openChannel');
+require('../chunks/bundle-BAqFIbKr.js');
+require('../chunks/bundle-Ca7xeBTO.js');
+require('../useSendbirdStateContext.js');
+require('../chunks/bundle-Bpy7IQta.js');
+require('../chunks/bundle-DWBc-Yv7.js');
+require('../chunks/bundle-CDJXrIVC.js');
 
-function MobileFeedbackMenu(props) {
-    var hideMenu = props.hideMenu, onEditFeedback = props.onEditFeedback, onRemoveFeedback = props.onRemoveFeedback;
-    var stringSet = LocalizationContext.useLocalization().stringSet;
-    return (React.createElement(ui_BottomSheet, { onBackdropClick: hideMenu },
-        React.createElement("div", { className: 'sendbird-message__bottomsheet--feedback-options-menu' },
-            React.createElement("div", { className: 'sendbird-message__bottomsheet--feedback-option', onClick: function () {
-                    hideMenu();
-                    onEditFeedback();
-                } },
-                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.EDIT_COMMENT)),
-            React.createElement("div", { className: 'sendbird-message__bottomsheet--feedback-option', onClick: function () {
-                    hideMenu();
-                    onRemoveFeedback();
-                } },
-                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ERROR }, stringSet.REMOVE_FEEDBACK)))));
+function MobileFeedbackMenu(props) {
+    var hideMenu = props.hideMenu, onEditFeedback = props.onEditFeedback, onRemoveFeedback = props.onRemoveFeedback;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    return (React.createElement(ui_BottomSheet, { onBackdropClick: hideMenu },
+        React.createElement("div", { className: 'sendbird-message__bottomsheet--feedback-options-menu' },
+            React.createElement("div", { className: 'sendbird-message__bottomsheet--feedback-option', onClick: function () {
+                    hideMenu();
+                    onEditFeedback();
+                } },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.EDIT_COMMENT)),
+            React.createElement("div", { className: 'sendbird-message__bottomsheet--feedback-option', onClick: function () {
+                    hideMenu();
+                    onRemoveFeedback();
+                } },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ERROR }, stringSet.REMOVE_FEEDBACK)))));
 }
 
 module.exports = MobileFeedbackMenu;

package/cjs/ui/MobileFeedbackMenu.js.map

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

package/cjs/ui/Modal.js

@@ -2,19 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-CY1bUkfG.js');
+require('../chunks/bundle-C-r9vRgc.js');
 require('react');
 require('react-dom');
-require('../chunks/bundle-BDbnsPGF.js');
-var ui_Modal = require('../chunks/bundle-fG1bRzYE.js');
-require('../chunks/bundle-E9H8fQL4.js');
-require('../chunks/bundle-BwEcnJDm.js');
+require('../chunks/bundle-CLte647H.js');
+var ui_Modal = require('../chunks/bundle-DJ9gapN2.js');
+require('../chunks/bundle-B7wJ4Hqk.js');
+require('../chunks/bundle-CLNUkVC8.js');
 require('./IconButton.js');
 require('./Button.js');
 require('./Icon.js');
-require('../chunks/bundle-BuYf2Pa8.js');
-require('../chunks/bundle-DvWHV-PM.js');
-require('../chunks/bundle-BwvM-P29.js');
+require('../chunks/bundle-Deao1Upp.js');
+require('@sendbird/uikit-tools');
+require('../withSendbird.js');
+require('css-vars-ponyfill');
+require('../chunks/bundle-Cw7xe6J1.js');
+require('@sendbird/chat');
+require('../chunks/bundle-Ub33KGva.js');
+require('@sendbird/chat/openChannel');
+require('@sendbird/chat/groupChannel');
+require('../chunks/bundle-BAqFIbKr.js');
+require('../chunks/bundle-Bpy7IQta.js');
+require('../useSendbirdStateContext.js');
+require('../chunks/bundle-Ca7xeBTO.js');
+require('../chunks/bundle-DWBc-Yv7.js');
+require('../chunks/bundle-CDJXrIVC.js');
+require('../utils/message/getOutgoingMessageState.js');
 
 
 

package/cjs/ui/Modal.js.map

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

package/cjs/ui/MutedAvatarOverlay.js

@@ -2,21 +2,21 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-require('../chunks/bundle-CY1bUkfG.js');
-require('../chunks/bundle-BDbnsPGF.js');
+require('../chunks/bundle-C-r9vRgc.js');
+require('../chunks/bundle-CLte647H.js');
 
-function MutedAvatarOverlay(props) {
-    var _a = props.height, height = _a === void 0 ? 24 : _a, _b = props.width, width = _b === void 0 ? 24 : _b;
-    return (React.createElement("div", { className: "sendbird-muted-avatar", style: {
-            height: "".concat(height, "px"),
-            width: "".concat(width, "px"),
-        } },
-        React.createElement("div", { className: "sendbird-muted-avatar__icon" },
-            React.createElement("div", { className: "sendbird-muted-avatar__bg", style: {
-                    height: "".concat(height, "px"),
-                    width: "".concat(width, "px"),
-                } }),
-            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.MUTE, fillColor: ui_Icon.IconColors.WHITE, width: "".concat(height - 8, "px"), height: "".concat(width - 8, "px") }))));
+function MutedAvatarOverlay(props) {
+    var _a = props.height, height = _a === void 0 ? 24 : _a, _b = props.width, width = _b === void 0 ? 24 : _b;
+    return (React.createElement("div", { className: "sendbird-muted-avatar", style: {
+            height: "".concat(height, "px"),
+            width: "".concat(width, "px"),
+        } },
+        React.createElement("div", { className: "sendbird-muted-avatar__icon" },
+            React.createElement("div", { className: "sendbird-muted-avatar__bg", style: {
+                    height: "".concat(height, "px"),
+                    width: "".concat(width, "px"),
+                } }),
+            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.MUTE, fillColor: ui_Icon.IconColors.WHITE, width: "".concat(height - 8, "px"), height: "".concat(width - 8, "px") }))));
 }
 
 module.exports = MutedAvatarOverlay;

package/cjs/ui/OGMessageItemBody.js

@@ -3,98 +3,98 @@
 var React = require('react');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-BuYf2Pa8.js');
-var index = require('../chunks/bundle-D3Gxy8S0.js');
-var LocalizationContext = require('../chunks/bundle-E9H8fQL4.js');
-var index$1 = require('../chunks/bundle-Df0cAbH6.js');
-var tokenize = require('../chunks/bundle-SdH24Cv9.js');
-var consts = require('../chunks/bundle-DIxulCCm.js');
-var MediaQueryContext = require('../chunks/bundle-BwEcnJDm.js');
-var utils = require('../chunks/bundle-BDbnsPGF.js');
-require('../chunks/bundle-CY1bUkfG.js');
-require('../chunks/bundle-DvWHV-PM.js');
+var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var index = require('../chunks/bundle-Cw7xe6J1.js');
+var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
+var index$1 = require('../chunks/bundle-BCt-Rzil.js');
+var tokenize = require('../chunks/bundle-DFVUnSWq.js');
+var consts = require('../chunks/bundle-D4e0UT-6.js');
+var MediaQueryContext = require('../chunks/bundle-CLNUkVC8.js');
+var utils = require('../chunks/bundle-CLte647H.js');
+require('../chunks/bundle-C-r9vRgc.js');
+require('../chunks/bundle-DWBc-Yv7.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Bka-H9ks.js');
-require('../chunks/bundle-BwvM-P29.js');
+require('../chunks/bundle-CDJXrIVC.js');
 require('../Message/context.js');
 require('./MentionLabel.js');
 require('./ContextMenu.js');
+require('../chunks/bundle-Bpy7IQta.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-BRjBigtB.js');
+require('../chunks/bundle-Ub33KGva.js');
 require('./UserProfile.js');
-require('../chunks/bundle-C7_tieEZ.js');
+require('../chunks/bundle-D7v4i_Ae.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-0W_w8lRK.js');
-require('../chunks/bundle-oUs61pbv.js');
-require('../chunks/bundle-C-zGGOpz.js');
+require('../chunks/bundle-DpK1fr1j.js');
+require('../chunks/bundle-C0ZNrrcl.js');
+require('../chunks/bundle-CxNGVWIy.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
 require('./LinkLabel.js');
 
-function OGMessageItemBody(_a) {
-    var _b, _c, _d, _e;
-    var className = _a.className, 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, _k = _a.onMessageHeightChange, onMessageHeightChange = _k === void 0 ? function () {
-        /* noop */
-    } : _k;
-    var stringSet = React.useContext(LocalizationContext.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 = React.useMemo(function () {
-        if (isMessageMentioned) {
-            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]);
-    var openOpenGraphURL = function () { var _a; return utils.openURL((_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url); };
-    return (React.createElement("div", { className: index.getClassName([
-            className,
-            'sendbird-og-message-item-body',
-            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.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 },
-            React.createElement("div", { className: consts.OG_MESSAGE_BODY_CLASSNAME },
-                React.createElement(index$1.TextFragment, { tokens: tokens }),
-                index.isEditedMessage(message) && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__text-bubble__message", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2 }, " ".concat(stringSet.MESSAGE_EDITED, " "))))),
-        ((_e = message.ogMetaData) === null || _e === void 0 ? void 0 : _e.defaultImage) && (React.createElement(OGImageSection, { onClick: openOpenGraphURL, ogImage: message.ogMetaData.defaultImage, onMessageHeightChange: onMessageHeightChange })),
-        message.ogMetaData && (React.createElement(OGDescriptionSection, { onClick: openOpenGraphURL, ogMetaData: message.ogMetaData, onMessageHeightChange: onMessageHeightChange })),
-        React.createElement("div", { className: "sendbird-og-message-item-body__cover" })));
-}
-var OGImageSection = function (props) {
-    var onClick = props.onClick, ogImage = props.ogImage, onMessageHeightChange = props.onMessageHeightChange;
-    var imageRef = React.useRef(null);
-    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-    return (React.createElement("div", { ref: imageRef, className: "sendbird-og-message-item-body__og-thumbnail ".concat(ogImage.url ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty'), onClick: function () { return onClick(); } },
-        React.createElement(ui_ImageRenderer.default, { className: "sendbird-og-message-item-body__og-thumbnail__image", url: ogImage.url || '', alt: ogImage.alt, width: "100%", height: isMobile ? '136px' : '240px', onLoad: onMessageHeightChange, onError: function () {
-                var _a, _b;
-                try {
-                    (_b = (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('sendbird-og-message-item-body__og-thumbnail__empty');
-                }
-                catch (error) {
-                    // do nothing
-                }
-            }, defaultComponent: React.createElement("div", { className: "sendbird-og-message-item-body__og-thumbnail__place-holder" },
-                React.createElement(ui_Icon.default, { className: "sendbird-og-message-item-body__og-thumbnail__place-holder__icon", type: ui_Icon.IconTypes.THUMBNAIL_NONE, width: "56px", height: "56px" })) })));
-};
-var OGDescriptionSection = function (props) {
-    var onClick = props.onClick, ogMetaData = props.ogMetaData, onMessageHeightChange = props.onMessageHeightChange;
-    React.useEffect(function () {
-        onMessageHeightChange();
-    }, [ogMetaData.title, ogMetaData.description, ogMetaData.url]);
-    return (React.createElement("div", { className: "sendbird-og-message-item-body__description", onClick: function () { return onClick(); } },
-        ogMetaData.title && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__description__title", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ogMetaData.title)),
-        ogMetaData.description && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__description__description", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ogMetaData.description)),
-        ogMetaData.url && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__description__url", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ogMetaData.url))));
+function OGMessageItemBody(_a) {
+    var _b, _c, _d, _e;
+    var className = _a.className, 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, _k = _a.onMessageHeightChange, onMessageHeightChange = _k === void 0 ? function () {
+        /* noop */
+    } : _k;
+    var stringSet = React.useContext(LocalizationContext.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 = React.useMemo(function () {
+        if (isMessageMentioned) {
+            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]);
+    var openOpenGraphURL = function () { var _a; return utils.openURL((_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url); };
+    return (React.createElement("div", { className: index.getClassName([
+            className,
+            'sendbird-og-message-item-body',
+            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.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 },
+            React.createElement("div", { className: consts.OG_MESSAGE_BODY_CLASSNAME },
+                React.createElement(index$1.TextFragment, { tokens: tokens }),
+                index.isEditedMessage(message) && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__text-bubble__message", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_2 : ui_Label.LabelColors.ONBACKGROUND_2 }, " ".concat(stringSet.MESSAGE_EDITED, " "))))),
+        ((_e = message.ogMetaData) === null || _e === void 0 ? void 0 : _e.defaultImage) && (React.createElement(OGImageSection, { onClick: openOpenGraphURL, ogImage: message.ogMetaData.defaultImage, onMessageHeightChange: onMessageHeightChange })),
+        message.ogMetaData && (React.createElement(OGDescriptionSection, { onClick: openOpenGraphURL, ogMetaData: message.ogMetaData, onMessageHeightChange: onMessageHeightChange })),
+        React.createElement("div", { className: "sendbird-og-message-item-body__cover" })));
+}
+var OGImageSection = function (props) {
+    var onClick = props.onClick, ogImage = props.ogImage, onMessageHeightChange = props.onMessageHeightChange;
+    var imageRef = React.useRef(null);
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    return (React.createElement("div", { ref: imageRef, className: "sendbird-og-message-item-body__og-thumbnail ".concat(ogImage.url ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty'), onClick: function () { return onClick(); } },
+        React.createElement(ui_ImageRenderer.default, { className: "sendbird-og-message-item-body__og-thumbnail__image", url: ogImage.url || '', alt: ogImage.alt, width: "100%", height: isMobile ? '136px' : '240px', onLoad: onMessageHeightChange, onError: function () {
+                var _a, _b;
+                try {
+                    (_b = (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('sendbird-og-message-item-body__og-thumbnail__empty');
+                }
+                catch (error) {
+                    // do nothing
+                }
+            }, defaultComponent: React.createElement("div", { className: "sendbird-og-message-item-body__og-thumbnail__place-holder" },
+                React.createElement(ui_Icon.default, { className: "sendbird-og-message-item-body__og-thumbnail__place-holder__icon", type: ui_Icon.IconTypes.THUMBNAIL_NONE, width: "56px", height: "56px" })) })));
+};
+var OGDescriptionSection = function (props) {
+    var onClick = props.onClick, ogMetaData = props.ogMetaData, onMessageHeightChange = props.onMessageHeightChange;
+    React.useEffect(function () {
+        onMessageHeightChange();
+    }, [ogMetaData.title, ogMetaData.description, ogMetaData.url]);
+    return (React.createElement("div", { className: "sendbird-og-message-item-body__description", onClick: function () { return onClick(); } },
+        ogMetaData.title && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__description__title", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ogMetaData.title)),
+        ogMetaData.description && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__description__description", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ogMetaData.description)),
+        ogMetaData.url && (React.createElement(ui_Label.Label, { className: "sendbird-og-message-item-body__description__url", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ogMetaData.url))));
 };
 
 module.exports = OGMessageItemBody;

package/cjs/ui/OpenChannelAdminMessage.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-CY1bUkfG.js');
+var _tslib = require('../chunks/bundle-C-r9vRgc.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-BuYf2Pa8.js');
-require('../chunks/bundle-DvWHV-PM.js');
+var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+require('../chunks/bundle-DWBc-Yv7.js');
 
-function OpenChannelAdminMessage(_a) {
-    var className = _a.className, message = _a.message;
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
-            'sendbird-openchannel-admin-message',
-        ], false).join(' ') },
-        React.createElement(ui_Label.Label, { className: "sendbird-openchannel-admin-message__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, message.message || '')));
+function OpenChannelAdminMessage(_a) {
+    var className = _a.className, message = _a.message;
+    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+            'sendbird-openchannel-admin-message',
+        ], false).join(' ') },
+        React.createElement(ui_Label.Label, { className: "sendbird-openchannel-admin-message__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, message.message || '')));
 }
 
 module.exports = OpenChannelAdminMessage;

package/cjs/ui/OpenChannelAvatar.js

@@ -1,24 +1,24 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-oUs61pbv.js');
-var LocalizationContext = require('../chunks/bundle-E9H8fQL4.js');
-var utils = require('../chunks/bundle-BJBClQcM.js');
-require('../chunks/bundle-CY1bUkfG.js');
+var ui_Avatar = require('../chunks/bundle-C0ZNrrcl.js');
+var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
+var utils = require('../chunks/bundle-B4EdciCR.js');
+require('../chunks/bundle-C-r9vRgc.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-BDbnsPGF.js');
-require('../chunks/bundle-C-zGGOpz.js');
+require('../chunks/bundle-CLte647H.js');
+require('../chunks/bundle-CxNGVWIy.js');
 require('./Icon.js');
-require('../chunks/bundle-DvWHV-PM.js');
-require('../chunks/bundle-BwvM-P29.js');
+require('../chunks/bundle-DWBc-Yv7.js');
+require('../chunks/bundle-CDJXrIVC.js');
 
-function ChannelAvatar(_a) {
-    var channel = _a.channel, theme = _a.theme, _b = _a.height, height = _b === void 0 ? 56 : _b, _c = _a.width, width = _c === void 0 ? 56 : _c;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    var memoizedAvatar = React.useMemo(function () {
-        return (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header__avatar--open-channel", src: utils.getOpenChannelAvatar(channel), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: (channel === null || channel === void 0 ? void 0 : channel.name) || stringSet.OPEN_CHANNEL_SETTINGS__NO_TITLE }));
-    }, [channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
-    return (React.createElement(React.Fragment, null, memoizedAvatar));
+function ChannelAvatar(_a) {
+    var channel = _a.channel, theme = _a.theme, _b = _a.height, height = _b === void 0 ? 56 : _b, _c = _a.width, width = _c === void 0 ? 56 : _c;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var memoizedAvatar = React.useMemo(function () {
+        return (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header__avatar--open-channel", src: utils.getOpenChannelAvatar(channel), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: (channel === null || channel === void 0 ? void 0 : channel.name) || stringSet.OPEN_CHANNEL_SETTINGS__NO_TITLE }));
+    }, [channel === null || channel === void 0 ? void 0 : channel.coverUrl, theme]);
+    return (React.createElement(React.Fragment, null, memoizedAvatar));
 }
 
 module.exports = ChannelAvatar;