@sendbird/uikit-react 3.14.1 → 3.14.3-rc.0

package/ui/MessageItemMenu.js

@@ -1,23 +1,23 @@
-import { _ as __assign } from '../chunks/bundle-DRWNB6So.js';
+import { _ as __assign } from '../chunks/bundle-2ysMK4u0.js';
 import React__default, { useContext, useRef } from 'react';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
-import { l as isUserMessage, q as isSentMessage, u as isFailedMessage, v as isPendingMessage, w as getClassName, x as copyToClipboard } from '../chunks/bundle-CRJQQ2Pt.js';
-import { L as LocalizationContext } from '../chunks/bundle-ByOL8d1Y.js';
-import { R as Role } from '../chunks/bundle-DChW5Z3e.js';
-import { d as deleteNullish } from '../chunks/bundle-B-rlaXWu.js';
+import { l as isUserMessage, q as isSentMessage, u as isFailedMessage, v as isPendingMessage, w as getClassName, x as copyToClipboard } from '../chunks/bundle-C3N6ggDW.js';
+import { L as LocalizationContext } from '../chunks/bundle-ZmAc2r6V.js';
+import { R as Role } from '../chunks/bundle-BVPkUIWi.js';
+import { d as deleteNullish } from '../chunks/bundle-b8mvgRfz.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-oKdCuyHB.js';
-import '../chunks/bundle-C9k4XREr.js';
-import '../chunks/bundle-CqjZHu2X.js';
+import '../chunks/bundle-QOBMwao7.js';
+import '../chunks/bundle-mF80lIck.js';
+import '../chunks/bundle-weaMzraH.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-BSOtUr3s.js';
-import '../chunks/bundle-Ca-c848e.js';
+import '../chunks/bundle-D07G53aZ.js';
+import '../chunks/bundle-IATscxmb.js';
 
 function MessageMenu(props) {
     var _a;

package/ui/MessageItemReactionMenu.js

@@ -4,21 +4,21 @@ import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import ReactionButton from './ReactionButton.js';
-import { v as isPendingMessage, u as isFailedMessage, w as getClassName, y as getEmojiListAll } from '../chunks/bundle-CRJQQ2Pt.js';
-import '../chunks/bundle-DRWNB6So.js';
+import { v as isPendingMessage, u as isFailedMessage, w as getClassName, y as getEmojiListAll } from '../chunks/bundle-C3N6ggDW.js';
+import '../chunks/bundle-2ysMK4u0.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-oKdCuyHB.js';
-import '../chunks/bundle-C9k4XREr.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-BL67-UYY.js';
-import '../chunks/bundle-CfCfA_eS.js';
+import '../chunks/bundle-QOBMwao7.js';
+import '../chunks/bundle-mF80lIck.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-1XU_ugIO.js';
+import '../chunks/bundle-r0O-sQY6.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-BSOtUr3s.js';
+import '../chunks/bundle-D07G53aZ.js';
 
 function MessageEmojiMenu(_a) {
     var className = _a.className, message = _a.message, userId = _a.userId, _b = _a.spaceFromTrigger, spaceFromTrigger = _b === void 0 ? { x: 0, y: 0 } : _b, emojiContainer = _a.emojiContainer, toggleReaction = _a.toggleReaction, setSupposedHover = _a.setSupposedHover;

package/ui/MessageSearchFileItem.js

@@ -1,22 +1,22 @@
-import { c as __spreadArray } from '../chunks/bundle-DRWNB6So.js';
+import { c as __spreadArray } from '../chunks/bundle-2ysMK4u0.js';
 import React__default from 'react';
-import { A as Avatar } from '../chunks/bundle-DiKCx9T0.js';
+import { A as Avatar } from '../chunks/bundle-BpMydStw.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
-import { u as useLocalization } from '../chunks/bundle-ByOL8d1Y.js';
-import { f as format } from '../chunks/bundle-BCNLSTzO.js';
-import { i as isToday, a as isYesterday, b as isThisYear } from '../chunks/bundle-BGjW7OlD.js';
-import { i as isVoiceMessage } from '../chunks/bundle-CRJQQ2Pt.js';
-import { g as getMessageFirstFileUrl, b as getMessageFirstFileName } from '../chunks/bundle-DmHVnPIK.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
+import { u as useLocalization } from '../chunks/bundle-ZmAc2r6V.js';
+import { f as format } from '../chunks/bundle-DZvdXQzG.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from '../chunks/bundle-CirDigHO.js';
+import { i as isVoiceMessage } from '../chunks/bundle-C3N6ggDW.js';
+import { g as getMessageFirstFileUrl, b as getMessageFirstFileName } from '../chunks/bundle-C7GmL-Q9.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-D3BcbbU5.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-Ca-c848e.js';
-import '../chunks/bundle-DLC9d0SK.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-Bhy8Oaov.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-IATscxmb.js';
+import '../chunks/bundle-DapGn_dJ.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-BSOtUr3s.js';
+import '../chunks/bundle-D07G53aZ.js';
 
 function getCreatedAt(_a) {
     var createdAt = _a.createdAt, locale = _a.locale, stringSet = _a.stringSet;

package/ui/MessageSearchItem.js

@@ -1,17 +1,17 @@
-import { c as __spreadArray } from '../chunks/bundle-DRWNB6So.js';
+import { c as __spreadArray } from '../chunks/bundle-2ysMK4u0.js';
 import React__default from 'react';
-import { f as format } from '../chunks/bundle-BCNLSTzO.js';
-import { i as isToday, a as isYesterday, b as isThisYear } from '../chunks/bundle-BGjW7OlD.js';
-import { A as Avatar } from '../chunks/bundle-DiKCx9T0.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
-import { u as useLocalization } from '../chunks/bundle-ByOL8d1Y.js';
-import '../chunks/bundle-Ca-c848e.js';
-import '../chunks/bundle-DLC9d0SK.js';
+import { f as format } from '../chunks/bundle-DZvdXQzG.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from '../chunks/bundle-CirDigHO.js';
+import { A as Avatar } from '../chunks/bundle-BpMydStw.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
+import { u as useLocalization } from '../chunks/bundle-ZmAc2r6V.js';
+import '../chunks/bundle-IATscxmb.js';
+import '../chunks/bundle-DapGn_dJ.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-D3BcbbU5.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-Bhy8Oaov.js';
 import './Icon.js';
-import '../chunks/bundle-CqjZHu2X.js';
+import '../chunks/bundle-weaMzraH.js';
 
 // getCreatedAt
 function getCreatedAt (_a) {

package/ui/MessageStatus.js

@@ -1,18 +1,18 @@
-import '../chunks/bundle-DRWNB6So.js';
+import '../chunks/bundle-2ysMK4u0.js';
 import 'react';
-import '../chunks/bundle-BCNLSTzO.js';
+import '../chunks/bundle-DZvdXQzG.js';
 import './Icon.js';
-import '../chunks/bundle-C9k4XREr.js';
+import '../chunks/bundle-mF80lIck.js';
 import './Loader.js';
-import '../chunks/bundle-CRJQQ2Pt.js';
+import '../chunks/bundle-C3N6ggDW.js';
 import '../utils/message/getOutgoingMessageState.js';
-export { e as MessageStatusTypes, M as default } from '../chunks/bundle--6zoMlSy.js';
-import '../chunks/bundle-ByOL8d1Y.js';
-import '../chunks/bundle-Ca-c848e.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-CqjZHu2X.js';
+export { e as MessageStatusTypes, M as default } from '../chunks/bundle-BVfjThUa.js';
+import '../chunks/bundle-ZmAc2r6V.js';
+import '../chunks/bundle-IATscxmb.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-weaMzraH.js';
 import '@sendbird/chat/groupChannel';
-import '../chunks/bundle-BSOtUr3s.js';
-import '../chunks/bundle-BGjW7OlD.js';
-import '../chunks/bundle-DLC9d0SK.js';
+import '../chunks/bundle-D07G53aZ.js';
+import '../chunks/bundle-CirDigHO.js';
+import '../chunks/bundle-DapGn_dJ.js';
 //# sourceMappingURL=MessageStatus.js.map

package/ui/MessageTemplate.js

@@ -1,4 +1,4 @@
 import 'react';
-export { a as MessageTemplate, a as default } from '../chunks/bundle-vcCWiyPL.js';
-import '../chunks/bundle-DRWNB6So.js';
+export { a as MessageTemplate, a as default } from '../chunks/bundle-vrwHv1WD.js';
+import '../chunks/bundle-2ysMK4u0.js';
 //# sourceMappingURL=MessageTemplate.js.map

package/ui/MobileFeedbackMenu.js

@@ -1,19 +1,19 @@
 import React__default from 'react';
 import BottomSheet from './BottomSheet.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
-import { u as useLocalization } from '../chunks/bundle-ByOL8d1Y.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
+import { u as useLocalization } from '../chunks/bundle-ZmAc2r6V.js';
 import 'react-dom';
 import '../hooks/useModal.js';
-import '../chunks/bundle-DRWNB6So.js';
-import '../chunks/bundle-BSOtUr3s.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-DURANzV-.js';
-import '../chunks/bundle-CfCfA_eS.js';
+import '../chunks/bundle-2ysMK4u0.js';
+import '../chunks/bundle-D07G53aZ.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-D7n3TjuA.js';
+import '../chunks/bundle-r0O-sQY6.js';
 import './IconButton.js';
 import './Button.js';
 import './Icon.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-Ca-c848e.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-IATscxmb.js';
 
 function MobileFeedbackMenu(props) {
     var hideMenu = props.hideMenu, onEditFeedback = props.onEditFeedback, onRemoveFeedback = props.onRemoveFeedback;

package/ui/Modal.js

@@ -1,14 +1,14 @@
-import '../chunks/bundle-DRWNB6So.js';
+import '../chunks/bundle-2ysMK4u0.js';
 import 'react';
 import 'react-dom';
-import '../chunks/bundle-B-rlaXWu.js';
-export { M as Modal, e as ModalBody, c as ModalFooter, d as ModalHeader, M as default } from '../chunks/bundle-DURANzV-.js';
-import '../chunks/bundle-ByOL8d1Y.js';
-import '../chunks/bundle-CfCfA_eS.js';
+import '../chunks/bundle-b8mvgRfz.js';
+export { M as Modal, e as ModalBody, c as ModalFooter, d as ModalHeader, M as default } from '../chunks/bundle-D7n3TjuA.js';
+import '../chunks/bundle-ZmAc2r6V.js';
+import '../chunks/bundle-r0O-sQY6.js';
 import './IconButton.js';
 import './Button.js';
 import './Icon.js';
-import '../chunks/bundle-C9k4XREr.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-Ca-c848e.js';
+import '../chunks/bundle-mF80lIck.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-IATscxmb.js';
 //# sourceMappingURL=Modal.js.map

package/ui/MutedAvatarOverlay.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import '../chunks/bundle-DRWNB6So.js';
-import '../chunks/bundle-B-rlaXWu.js';
+import '../chunks/bundle-2ysMK4u0.js';
+import '../chunks/bundle-b8mvgRfz.js';
 
 function MutedAvatarOverlay(props) {
     var _a = props.height, height = _a === void 0 ? 24 : _a, _b = props.width, width = _b === void 0 ? 24 : _b;

package/ui/OGMessageItemBody.js

@@ -1,20 +1,20 @@
-import React__default, { useRef, useContext, useMemo } from 'react';
+import React__default, { useContext, useMemo, useRef, useEffect } from 'react';
 import ImageRenderer from './ImageRenderer.js';
 import Icon, { IconTypes } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
-import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-CRJQQ2Pt.js';
-import { L as LocalizationContext } from '../chunks/bundle-ByOL8d1Y.js';
-import { T as TextFragment } from '../chunks/bundle-CVBV25Ez.js';
-import { t as tokenizeMessage } from '../chunks/bundle-tVxHr2lN.js';
-import { O as OG_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-DR0N9Re_.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-CfCfA_eS.js';
-import '../chunks/bundle-DRWNB6So.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-CqjZHu2X.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
+import { w as getClassName, d as isEditedMessage } from '../chunks/bundle-C3N6ggDW.js';
+import { L as LocalizationContext } from '../chunks/bundle-ZmAc2r6V.js';
+import { T as TextFragment } from '../chunks/bundle-DdjPMfxv.js';
+import { t as tokenizeMessage } from '../chunks/bundle-BZfBbdtJ.js';
+import { O as OG_MESSAGE_BODY_CLASSNAME } from '../chunks/bundle-BntTpsl4.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-r0O-sQY6.js';
+import { o as openURL } from '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-2ysMK4u0.js';
+import '../chunks/bundle-weaMzraH.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-BSOtUr3s.js';
-import '../chunks/bundle-Ca-c848e.js';
+import '../chunks/bundle-D07G53aZ.js';
+import '../chunks/bundle-IATscxmb.js';
 import '../Message/context.js';
 import './MentionLabel.js';
 import './ContextMenu.js';
@@ -22,34 +22,24 @@ import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-oKdCuyHB.js';
+import '../chunks/bundle-QOBMwao7.js';
 import './UserProfile.js';
-import '../chunks/bundle-Cr5JfXnd.js';
+import '../chunks/bundle-DM5lYKwu.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-BmJsj1DE.js';
-import '../chunks/bundle-DiKCx9T0.js';
-import '../chunks/bundle-D3BcbbU5.js';
+import '../chunks/bundle-nMRi7WDZ.js';
+import '../chunks/bundle-BpMydStw.js';
+import '../chunks/bundle-Bhy8Oaov.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
 import './LinkLabel.js';
 
 function OGMessageItemBody(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var className = _a.className, message = _a.message, _p = _a.isByMe, isByMe = _p === void 0 ? false : _p, _q = _a.mouseHover, mouseHover = _q === void 0 ? false : _q, _r = _a.isMentionEnabled, isMentionEnabled = _r === void 0 ? false : _r, _s = _a.isReactionEnabled, isReactionEnabled = _s === void 0 ? false : _s, _t = _a.onMessageHeightChange, onMessageHeightChange = _t === void 0 ? function () { } : _t;
-    var imageRef = useRef(null);
+    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 = useContext(LocalizationContext).stringSet;
-    var isMobile = useMediaQueryContext().isMobile;
-    var openOGUrl = function () {
-        var _a;
-        var url = (_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url;
-        if (url) {
-            if (!url.startsWith('http://') && !url.startsWith('https://')) {
-                url = 'https://' + url;
-            }
-            window.open(url);
-        }
-    };
     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) {
@@ -62,34 +52,48 @@ function OGMessageItemBody(_a) {
             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 openURL((_a = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _a === void 0 ? void 0 : _a.url); };
     return (React__default.createElement("div", { className: 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' : '',
+            isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0 ? 'reactions' : '',
         ]) },
         React__default.createElement(Label, { type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1 },
             React__default.createElement("div", { className: OG_MESSAGE_BODY_CLASSNAME },
                 React__default.createElement(TextFragment, { tokens: tokens }),
                 isEditedMessage(message) && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__text-bubble__message", type: LabelTypography.BODY_1, color: isByMe ? LabelColors.ONCONTENT_2 : LabelColors.ONBACKGROUND_2 }, " ".concat(stringSet.MESSAGE_EDITED, " "))))),
-        React__default.createElement("div", { ref: imageRef, className: "sendbird-og-message-item-body__og-thumbnail\n          ".concat(((_f = (_e = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _e === void 0 ? void 0 : _e.defaultImage) === null || _f === void 0 ? void 0 : _f.url) ? '' : 'sendbird-og-message-item-body__og-thumbnail__empty', "\n        "), onClick: openOGUrl },
-            React__default.createElement(ImageRenderer, { className: "sendbird-og-message-item-body__og-thumbnail__image", url: ((_h = (_g = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _g === void 0 ? void 0 : _g.defaultImage) === null || _h === void 0 ? void 0 : _h.url) || '', alt: (_k = (_j = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _j === void 0 ? void 0 : _j.defaultImage) === null || _k === void 0 ? void 0 : _k.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__default.createElement("div", { className: "sendbird-og-message-item-body__og-thumbnail__place-holder" },
-                    React__default.createElement(Icon, { className: "sendbird-og-message-item-body__og-thumbnail__place-holder__icon", type: IconTypes.THUMBNAIL_NONE, width: "56px", height: "56px" }))) })),
-        React__default.createElement("div", { className: "sendbird-og-message-item-body__description", onClick: openOGUrl },
-            ((_l = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _l === void 0 ? void 0 : _l.title) && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__description__title", type: LabelTypography.SUBTITLE_2, color: LabelColors.ONBACKGROUND_1 }, message.ogMetaData.title)),
-            ((_m = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _m === void 0 ? void 0 : _m.description) && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__description__description", type: LabelTypography.BODY_2, color: LabelColors.ONBACKGROUND_1 }, message.ogMetaData.description)),
-            ((_o = message === null || message === void 0 ? void 0 : message.ogMetaData) === null || _o === void 0 ? void 0 : _o.url) && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__description__url", type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_2 }, message.ogMetaData.url))),
+        ((_e = message.ogMetaData) === null || _e === void 0 ? void 0 : _e.defaultImage) && (React__default.createElement(OGImageSection, { onClick: openOpenGraphURL, ogImage: message.ogMetaData.defaultImage, onMessageHeightChange: onMessageHeightChange })),
+        message.ogMetaData && (React__default.createElement(OGDescriptionSection, { onClick: openOpenGraphURL, ogMetaData: message.ogMetaData, onMessageHeightChange: onMessageHeightChange })),
         React__default.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 = useRef(null);
+    var isMobile = useMediaQueryContext().isMobile;
+    return (React__default.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__default.createElement(ImageRenderer, { 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__default.createElement("div", { className: "sendbird-og-message-item-body__og-thumbnail__place-holder" },
+                React__default.createElement(Icon, { className: "sendbird-og-message-item-body__og-thumbnail__place-holder__icon", type: IconTypes.THUMBNAIL_NONE, width: "56px", height: "56px" })) })));
+};
+var OGDescriptionSection = function (props) {
+    var onClick = props.onClick, ogMetaData = props.ogMetaData, onMessageHeightChange = props.onMessageHeightChange;
+    useEffect(function () {
+        onMessageHeightChange();
+    }, [ogMetaData.title, ogMetaData.description, ogMetaData.url]);
+    return (React__default.createElement("div", { className: "sendbird-og-message-item-body__description", onClick: function () { return onClick(); } },
+        ogMetaData.title && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__description__title", type: LabelTypography.SUBTITLE_2, color: LabelColors.ONBACKGROUND_1 }, ogMetaData.title)),
+        ogMetaData.description && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__description__description", type: LabelTypography.BODY_2, color: LabelColors.ONBACKGROUND_1 }, ogMetaData.description)),
+        ogMetaData.url && (React__default.createElement(Label, { className: "sendbird-og-message-item-body__description__url", type: LabelTypography.CAPTION_3, color: LabelColors.ONBACKGROUND_2 }, ogMetaData.url))));
+};
 
 export { OGMessageItemBody as default };
 //# sourceMappingURL=OGMessageItemBody.js.map

package/ui/OGMessageItemBody.js.map

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

package/ui/OpenChannelAdminMessage.js

@@ -1,7 +1,7 @@
-import { c as __spreadArray } from '../chunks/bundle-DRWNB6So.js';
+import { c as __spreadArray } from '../chunks/bundle-2ysMK4u0.js';
 import React__default from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
-import '../chunks/bundle-CqjZHu2X.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
+import '../chunks/bundle-weaMzraH.js';
 
 function OpenChannelAdminMessage(_a) {
     var className = _a.className, message = _a.message;

package/ui/OpenChannelAvatar.js

@@ -1,14 +1,14 @@
 import React__default, { useContext, useMemo } from 'react';
-import { A as Avatar } from '../chunks/bundle-DiKCx9T0.js';
-import { L as LocalizationContext } from '../chunks/bundle-ByOL8d1Y.js';
-import { b as getOpenChannelAvatar } from '../chunks/bundle-DluCUNJH.js';
-import '../chunks/bundle-DRWNB6So.js';
+import { A as Avatar } from '../chunks/bundle-BpMydStw.js';
+import { L as LocalizationContext } from '../chunks/bundle-ZmAc2r6V.js';
+import { b as getOpenChannelAvatar } from '../chunks/bundle-DAO-scyQ.js';
+import '../chunks/bundle-2ysMK4u0.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-D3BcbbU5.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-Bhy8Oaov.js';
 import './Icon.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-Ca-c848e.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-IATscxmb.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;

package/ui/OpenchannelConversationHeader.js

@@ -1,15 +1,15 @@
 import React__default, { useContext } from 'react';
-import { A as Avatar } from '../chunks/bundle-DiKCx9T0.js';
+import { A as Avatar } from '../chunks/bundle-BpMydStw.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
-import { L as LocalizationContext } from '../chunks/bundle-ByOL8d1Y.js';
-import '../chunks/bundle-DRWNB6So.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
+import { L as LocalizationContext } from '../chunks/bundle-ZmAc2r6V.js';
+import '../chunks/bundle-2ysMK4u0.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-D3BcbbU5.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-Ca-c848e.js';
+import '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-Bhy8Oaov.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-IATscxmb.js';
 
 function OpenchannelConversationHeader(_a) {
     var coverImage = _a.coverImage, title = _a.title, subTitle = _a.subTitle, amIOperator = _a.amIOperator, onActionClick = _a.onActionClick;

package/ui/OpenchannelFileMessage.js

@@ -1,36 +1,36 @@
-import { c as __spreadArray, _ as __assign } from '../chunks/bundle-DRWNB6So.js';
+import { c as __spreadArray, _ as __assign } from '../chunks/bundle-2ysMK4u0.js';
 import React__default, { useRef, useContext, useState } from 'react';
-import { f as format } from '../chunks/bundle-BCNLSTzO.js';
-import { A as Avatar } from '../chunks/bundle-DiKCx9T0.js';
+import { f as format } from '../chunks/bundle-DZvdXQzG.js';
+import { A as Avatar } from '../chunks/bundle-BpMydStw.js';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-C9k4XREr.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-mF80lIck.js';
 import Loader from './Loader.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
 import TextButton from './TextButton.js';
 import UserProfile from './UserProfile.js';
-import { a as UserProfileContext } from '../chunks/bundle-Cr5JfXnd.js';
-import { u as useLocalization } from '../chunks/bundle-ByOL8d1Y.js';
-import { g as getSenderFromMessage, b as isFineResend, s as showMenuTrigger, c as isFineDelete, O as OpenChannelMobileMenu, d as checkIsPending, e as checkIsFailed } from '../chunks/bundle-BR7FU00z.js';
-import { u as useMediaQueryContext } from '../chunks/bundle-CfCfA_eS.js';
-import { u as useLongPress } from '../chunks/bundle-BL67-UYY.js';
-import '../chunks/bundle-Ca-c848e.js';
+import { a as UserProfileContext } from '../chunks/bundle-DM5lYKwu.js';
+import { u as useLocalization } from '../chunks/bundle-ZmAc2r6V.js';
+import { g as getSenderFromMessage, b as isFineResend, s as showMenuTrigger, c as isFineDelete, O as OpenChannelMobileMenu, d as checkIsPending, e as checkIsFailed } from '../chunks/bundle-CYPIxZFa.js';
+import { u as useMediaQueryContext } from '../chunks/bundle-r0O-sQY6.js';
+import { u as useLongPress } from '../chunks/bundle-1XU_ugIO.js';
+import { o as openURL } from '../chunks/bundle-b8mvgRfz.js';
+import '../chunks/bundle-IATscxmb.js';
 import './ImageRenderer.js';
-import '../chunks/bundle-B-rlaXWu.js';
-import '../chunks/bundle-D3BcbbU5.js';
+import '../chunks/bundle-Bhy8Oaov.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-oKdCuyHB.js';
-import '../chunks/bundle-CRJQQ2Pt.js';
+import '../chunks/bundle-QOBMwao7.js';
+import '../chunks/bundle-C3N6ggDW.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-BSOtUr3s.js';
-import '../chunks/bundle-CqjZHu2X.js';
-import '../chunks/bundle-B1531-Xt.js';
+import '../chunks/bundle-D07G53aZ.js';
+import '../chunks/bundle-weaMzraH.js';
+import '../chunks/bundle-As4ZCY4f.js';
 import '../sendbirdSelectors.js';
-import '../chunks/bundle-BmJsj1DE.js';
+import '../chunks/bundle-nMRi7WDZ.js';
 import './Button.js';
 import '../useSendbirdStateContext.js';
 import '../withSendbird.js';
@@ -59,7 +59,7 @@ var truncate = function (fullStr, strLen) {
     return fullStr.substr(0, frontChars) + separator + fullStr.substr(fullStr.length - backChars);
 };
 
-function OpenchannelFileMessage(_a) {
+function OpenChannelFileMessage(_a) {
     var className = _a.className, message = _a.message, isOperator = _a.isOperator, _b = _a.isEphemeral, isEphemeral = _b === void 0 ? false : _b, userId = _a.userId, disabled = _a.disabled, chainTop = _a.chainTop, showRemove = _a.showRemove, resendMessage = _a.resendMessage;
     var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
     var _c = useLocalization(), dateLocale = _c.dateLocale, stringSet = _c.stringSet;
@@ -68,7 +68,7 @@ function OpenchannelFileMessage(_a) {
     var avatarRef = useRef(null);
     var _d = useContext(UserProfileContext), disableUserProfile = _d.disableUserProfile, renderUserProfile = _d.renderUserProfile;
     var isMobile = useMediaQueryContext().isMobile;
-    var openFileUrl = function () { window.open(message.url); };
+    var openFileUrl = function () { return openURL(message.url); };
     var isPending = checkIsPending(status);
     var isFailed = checkIsFailed(status);
     var sender = getSenderFromMessage(message);
@@ -138,5 +138,5 @@ function OpenchannelFileMessage(_a) {
             } }))));
 }
 
-export { OpenchannelFileMessage as default };
+export { OpenChannelFileMessage as default };
 //# sourceMappingURL=OpenchannelFileMessage.js.map