@sendbird/uikit-react 3.10.1 → 3.11.0

package/cjs/chunks/{bundle-3K153hLM.js → bundle-iRjY_BU4.js}

@@ -1,10 +1,9 @@
 'use strict';
 
 var React = require('react');
-var pubSub_topics = require('./bundle-135pRm7i.js');
-var utils = require('./bundle-XaLiuh0L.js');
-var index = require('./bundle-6ZegaDWX.js');
-var utils_message_getOutgoingMessageState = require('../utils/message/getOutgoingMessageState.js');
+var pubSub_topics = require('./bundle-K8ngPNTR.js');
+var utils = require('./bundle-a1nOrOrG.js');
+require('../utils/message/getOutgoingMessageState.js');
 
 var getNicknamesMapFromMembers = function (members) {
     if (members === void 0) { members = []; }
@@ -50,40 +49,6 @@ function compareIds(a, b) {
     var bString = b.toString();
     return aString === bString;
 }
-var getMessageCreatedAt = function (message) { return index.format(message.createdAt, 'p'); };
-var isReadMessage = function (channel, message) { return (utils_message_getOutgoingMessageState.getOutgoingMessageState(channel, message) === utils_message_getOutgoingMessageState.OutgoingMessageStates.READ); };
-var isSameGroup = function (message, comparingMessage, currentChannel) {
-    var _a, _b, _c, _d;
-    if (!(message
-        && comparingMessage
-        && message.messageType
-        && message.messageType !== 'admin'
-        && comparingMessage.messageType
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType) !== 'admin'
-        && (message === null || message === void 0 ? void 0 : message.sender)
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender)
-        && (message === null || message === void 0 ? void 0 : message.createdAt)
-        && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.createdAt)
-        && ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId)
-        && ((_b = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _b === void 0 ? void 0 : _b.userId))) {
-        return false;
-    }
-    return ((message === null || message === void 0 ? void 0 : message.sendingStatus) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sendingStatus)
-        && ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.userId) === ((_d = comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sender) === null || _d === void 0 ? void 0 : _d.userId)
-        && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
-        && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage));
-};
-var compareMessagesForGrouping = function (prevMessage, currMessage, nextMessage, currentChannel, replyType) {
-    if (replyType === 'THREAD' && (currMessage === null || currMessage === void 0 ? void 0 : currMessage.threadInfo)) {
-        return [false, false];
-    }
-    var sendingStatus = (currMessage === null || currMessage === void 0 ? void 0 : currMessage.sendingStatus) || '';
-    var isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
-    return [
-        isSameGroup(prevMessage, currMessage, currentChannel) && isAcceptable,
-        isSameGroup(currMessage, nextMessage, currentChannel) && isAcceptable,
-    ];
-};
 var scrollIntoLast = function (intialTry) {
     if (intialTry === void 0) { intialTry = 0; }
     var MAX_TRIES = 10;
@@ -215,10 +180,9 @@ var useSendMultipleFilesMessage = function (_a, _b) {
 };
 
 exports.compareIds = compareIds;
-exports.compareMessagesForGrouping = compareMessagesForGrouping;
 exports.getNicknamesMapFromMembers = getNicknamesMapFromMembers;
 exports.getParentMessageFrom = getParentMessageFrom;
 exports.isAboutSame = isAboutSame;
 exports.scrollIntoLast = scrollIntoLast;
 exports.useSendMultipleFilesMessage = useSendMultipleFilesMessage;
-//# sourceMappingURL=bundle-3K153hLM.js.map
+//# sourceMappingURL=bundle-iRjY_BU4.js.map

package/cjs/chunks/bundle-iRjY_BU4.js.map

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

package/cjs/chunks/{bundle-VogwjxgI.js → bundle-iamCM7iG.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var pubSub_topics = require('./bundle-135pRm7i.js');
+var pubSub_topics = require('./bundle-K8ngPNTR.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-RVs527mS.js');
 
 exports.OpenChannelListFetchingStatus = void 0;
 (function (OpenChannelListFetchingStatus) {
@@ -357,4 +357,4 @@ exports.OpenChannelListActionTypes = OpenChannelListActionTypes$1;
 exports.OpenChannelListProvider = OpenChannelListProvider;
 exports.OpenChannelListProvider$1 = OpenChannelListProvider$1;
 exports.useOpenChannelListContext = useOpenChannelListContext;
-//# sourceMappingURL=bundle-VogwjxgI.js.map
+//# sourceMappingURL=bundle-iamCM7iG.js.map

package/cjs/chunks/{bundle-VogwjxgI.js.map → bundle-iamCM7iG.js.map}

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

package/cjs/chunks/{bundle-vphYV1gz.js → bundle-lXjDRYAu.js}

@@ -32,4 +32,4 @@ var generateDefaultAvatar = function (channel) {
 exports.generateDefaultAvatar = generateDefaultAvatar;
 exports.getChannelAvatarSource = getChannelAvatarSource;
 exports.getOpenChannelAvatar = getOpenChannelAvatar;
-//# sourceMappingURL=bundle-vphYV1gz.js.map
+//# sourceMappingURL=bundle-lXjDRYAu.js.map

package/cjs/chunks/bundle-lXjDRYAu.js.map

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

package/cjs/chunks/{bundle-AbGazomk.js → bundle-le086Dbq.js}

@@ -1,20 +1,21 @@
 'use strict';
 
 var React = require('react');
-var Channel_context = require('./bundle-Ue5GkT2H.js');
+var Channel_context = require('../Channel/context.js');
 var ui_PlaceHolder = require('../ui/PlaceHolder.js');
 var ui_Icon = require('../ui/Icon.js');
-var Channel_components_Message = require('../Channel/components/Message.js');
-var utils = require('./bundle-XaLiuh0L.js');
+var Channel_components_Message = require('./bundle-JwSYMgZa.js');
+var utils = require('./bundle-a1nOrOrG.js');
 var Channel_utils_getMessagePartsInfo = require('../Channel/utils/getMessagePartsInfo.js');
-var Channel_components_UnreadCount = require('../Channel/components/UnreadCount.js');
-var Channel_components_FrozenNotification = require('../Channel/components/FrozenNotification.js');
-var consts = require('./bundle-JbxviE94.js');
+var index$3 = require('./bundle-fvz26Ije.js');
+var index$2 = require('./bundle-GRS8tlu-.js');
+var consts = require('./bundle-SggLEV_z.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-var index = require('./bundle-tad4_cNF.js');
+var index = require('./bundle-Oti8UWhr.js');
+var useThrottleCallback = require('./bundle-guyZxs5x.js');
 var ui_TypingIndicatorBubble = require('../ui/TypingIndicatorBubble.js');
-var uikitTools = require('@sendbird/uikit-tools');
+var index$1 = require('./bundle-_TBSquwd.js');
 
 exports.TypingIndicatorType = void 0;
 (function (TypingIndicatorType) {
@@ -42,7 +43,7 @@ function useSetScrollToBottom(_a) {
     };
     return {
         scrollBottom: scrollBottom,
-        scrollToBottomHandler: index.useThrottleCallback(scrollCb, DELAY, { trailing: true }),
+        scrollToBottomHandler: useThrottleCallback.useThrottleCallback(scrollCb, DELAY, { trailing: true }),
     };
 }
 
@@ -56,26 +57,7 @@ function useScrollBehavior() {
     return null;
 }
 
-var BUFFER_DELAY = 100;
-function useOnScrollPositionChangeDetector(props) {
-    var onReachedTop = props.onReachedTop, onReachedBottom = props.onReachedBottom, onInBetween = props.onInBetween;
-    var cb = uikitTools.usePreservedCallback(function (event) {
-        if (event === null || event === void 0 ? void 0 : event.target) {
-            var _a = event.target, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            if (utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
-                onReachedTop();
-            }
-            else if (utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
-                onReachedBottom();
-            }
-            else {
-                onInBetween();
-            }
-        }
-    });
-    return index.useThrottleCallback(cb, BUFFER_DELAY, { trailing: true });
-}
-
+/* We operate the CSS files for Channel&GroupChannel modules in the GroupChannel */
 var SCROLL_BOTTOM_PADDING = 50;
 var MessageList = function (_a) {
     var _b, _c, _d, _e, _f;
@@ -145,7 +127,7 @@ var MessageList = function (_a) {
         onScroll: onScroll,
         scrollRef: scrollRef,
     });
-    var onScrollReachedEndDetector = useOnScrollPositionChangeDetector({
+    var onScrollReachedEndDetector = index$1.useOnScrollPositionChangeDetector({
         onReachedBottom: function () {
             /**
              * Note that this event is already being called in onScroll() above. However, it is only being called when
@@ -201,7 +183,7 @@ var MessageList = function (_a) {
                         }), chainTop = _c.chainTop, chainBottom = _c.chainBottom, hasSeparator = _c.hasSeparator;
                         var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
                         return (React.createElement(Message_context.MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
-                            React.createElement(Channel_components_Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                            React.createElement(Channel_components_Message.Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
                     }),
                     localMessages.map(function (m, idx) {
                         var _a, _b;
@@ -215,7 +197,7 @@ var MessageList = function (_a) {
                         }), chainTop = _c.chainTop, chainBottom = _c.chainBottom;
                         var isByMe = ((_a = m === null || m === void 0 ? void 0 : m.sender) === null || _a === void 0 ? void 0 : _a.userId) === ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.userId);
                         return (React.createElement(Message_context.MessageProvider, { message: m, key: m === null || m === void 0 ? void 0 : m.messageId, isByMe: isByMe },
-                            React.createElement(Channel_components_Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                            React.createElement(Channel_components_Message.Message, { handleScroll: moveScroll, renderMessage: renderMessage, renderMessageContent: renderMessageContent, message: m, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
                     }),
                     !hasMoreNext
                         && ((_c = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.groupChannel) === null || _c === void 0 ? void 0 : _c.enableTypingIndicator)
@@ -223,11 +205,11 @@ var MessageList = function (_a) {
                         && React.createElement(ui_TypingIndicatorBubble, { typingMembers: typingMembers, handleScroll: moveScroll }))),
             (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isFrozen) && (renderFrozenNotification
                 ? renderFrozenNotification()
-                : React.createElement(Channel_components_FrozenNotification, { className: "sendbird-conversation__messages__notification" })),
+                : React.createElement(index$2.FrozenNotification, { className: "sendbird-conversation__messages__notification" })),
             /**
              * Show unread count IFF scroll is not bottom or is bottom but hasNext is true.
              */
-            (!isScrollBottom || hasMoreNext) && (unreadSince || unreadSinceDate) && (React.createElement(Channel_components_UnreadCount, { className: "sendbird-conversation__messages__notification", count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount, time: unreadSince, lastReadAt: unreadSinceDate, onClick: function () {
+            (!isScrollBottom || hasMoreNext) && (unreadSince || unreadSinceDate) && (React.createElement(index$3.UnreadCount, { className: "sendbird-conversation__messages__notification", count: currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.unreadMessageCount, time: unreadSince, lastReadAt: unreadSinceDate, onClick: function () {
                     if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)
                         scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                     if (!disableMarkAsRead && !!currentGroupChannel) {
@@ -247,4 +229,4 @@ var MessageList = function (_a) {
 };
 
 exports.MessageList = MessageList;
-//# sourceMappingURL=bundle-AbGazomk.js.map
+//# sourceMappingURL=bundle-le086Dbq.js.map

package/cjs/chunks/bundle-le086Dbq.js.map

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

package/cjs/chunks/{bundle-Oc2T5_VP.js → bundle-lnLwvZ7H.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var _tslib = require('./bundle-bXLZZTmP.js');
+var _tslib = require('./bundle-RVs527mS.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var utils = require('./bundle-LRCFL23q.js');
-var LocalizationContext = require('./bundle-qtXdbPNE.js');
-var MediaQueryContext = require('./bundle-WzrocC57.js');
+var utils = require('./bundle-nQDclaWr.js');
+var LocalizationContext = require('./bundle-WLD9KKbn.js');
+var MediaQueryContext = require('./bundle-2ToiwW-_.js');
 var ui_IconButton = require('../ui/IconButton.js');
 var ui_Button = require('../ui/Button.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-7J3nX_hP.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
 
 // simple component to be used as modal root
 var MODAL_ROOT = 'sendbird-modal-root';
@@ -69,4 +69,4 @@ exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.ModalRoot = ModalRoot;
-//# sourceMappingURL=bundle-Oc2T5_VP.js.map
+//# sourceMappingURL=bundle-lnLwvZ7H.js.map

package/cjs/chunks/bundle-lnLwvZ7H.js.map

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

package/cjs/chunks/{bundle-LRCFL23q.js → bundle-nQDclaWr.js}

@@ -1,7 +1,6 @@
 'use strict';
 
 var noop = function () { };
-var isAboutSame = function (a, b, px) { return Math.abs(a - b) <= px; };
 var isMobileIOS = function (userAgent) {
     var isIOS = /iPhone|iPad|iPod/i.test(userAgent);
     var isWebkit = /WebKit/i.test(userAgent);
@@ -9,7 +8,6 @@ var isMobileIOS = function (userAgent) {
     return isIOS && (isWebkit || isSafari);
 };
 
-exports.isAboutSame = isAboutSame;
 exports.isMobileIOS = isMobileIOS;
 exports.noop = noop;
-//# sourceMappingURL=bundle-LRCFL23q.js.map
+//# sourceMappingURL=bundle-nQDclaWr.js.map

package/cjs/chunks/bundle-nQDclaWr.js.map

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

package/cjs/chunks/bundle-nTv23k8q.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var _tslib = require('./bundle-RVs527mS.js');
+var React = require('react');
+var reactDom = require('react-dom');
+var ui_Avatar = require('./bundle-rUpy0DGt.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-JaD2Ao-u.js');
+var index = require('./bundle-fnv2bNo-.js');
+require('../hooks/useModal.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var ui_Modal = require('./bundle-lnLwvZ7H.js');
+var Channel_context = require('../Channel/context.js');
+
+var FileViewerView = function (_a) {
+    var message = _a.message, onCancel = _a.onCancel, deleteMessage = _a.deleteMessage;
+    var sender = message.sender, type = message.type, url = message.url, _b = message.name, name = _b === void 0 ? '' : _b, threadInfo = message.threadInfo;
+    var profileUrl = sender.profileUrl, nickname = sender.nickname, userId = sender.userId;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    return reactDom.createPortal(React.createElement(FileViewerComponent, { profileUrl: profileUrl, nickname: nickname, type: type, url: url, name: name, onCancel: onCancel, onDelete: function () { return deleteMessage(message).then(function () { return onCancel(); }); }, isByMe: config.userId === userId, disableDelete: (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0 }), document.getElementById(ui_Modal.MODAL_ROOT));
+};
+var FileViewerComponent = function (_a) {
+    var 
+    // sender
+    profileUrl = _a.profileUrl, nickname = _a.nickname, 
+    // file
+    name = _a.name, type = _a.type, url = _a.url, 
+    // others
+    isByMe = _a.isByMe, onCancel = _a.onCancel, onDelete = _a.onDelete, disableDelete = _a.disableDelete;
+    return (React.createElement("div", { className: "sendbird-fileviewer" },
+        React.createElement("div", { className: "sendbird-fileviewer__header" },
+            React.createElement("div", { className: "sendbird-fileviewer__header__left" },
+                React.createElement("div", { className: "sendbird-fileviewer__header__left__avatar" },
+                    React.createElement(ui_Avatar.Avatar, { height: "32px", width: "32px", src: profileUrl })),
+                React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__filename", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, name),
+                React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__sender-name", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, nickname)),
+            React.createElement("div", { className: "sendbird-fileviewer__header__right" },
+                index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions" },
+                    React.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank" },
+                        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DOWNLOAD, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px" })),
+                    onDelete && isByMe && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete" },
+                        React.createElement(ui_Icon.default, { className: disableDelete ? 'disabled' : '', type: ui_Icon.IconTypes.DELETE, fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function () {
+                                if (!disableDelete) {
+                                    onDelete();
+                                }
+                            } }))))),
+                React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__close" },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: onCancel })))),
+        React.createElement("div", { className: "sendbird-fileviewer__content" },
+            index.isVideo(type) && (React.createElement("video", { controls: true, className: "sendbird-fileviewer__content__video" },
+                React.createElement("source", { src: url, type: type }))),
+            index.isImage(type) && React.createElement("img", { src: url, alt: name, className: "sendbird-fileviewer__content__img" }),
+            !index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__content__unsupported" },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, "Unsupoprted message"))))));
+};
+
+var FileViewer = function (props) {
+    var deleteMessage = Channel_context.useChannelContext().deleteMessage;
+    return React.createElement(FileViewerView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+exports.FileViewer = FileViewer;
+exports.FileViewerView = FileViewerView;
+//# sourceMappingURL=bundle-nTv23k8q.js.map

package/cjs/chunks/bundle-nTv23k8q.js.map

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

package/cjs/chunks/bundle-oTDe-k6e.js

@@ -0,0 +1,255 @@
+'use strict';
+
+var _tslib = require('./bundle-RVs527mS.js');
+var React = require('react');
+var Channel_context = require('../Channel/context.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var Channel_components_ChannelHeader = require('./bundle-LmzJA_0-.js');
+var GroupChannelProvider = require('./bundle-85DGianx.js');
+var uikitTools = require('@sendbird/uikit-tools');
+var Channel_components_MessageList = require('./bundle-le086Dbq.js');
+var ui_PlaceHolder = require('../ui/PlaceHolder.js');
+var ui_Icon = require('../ui/Icon.js');
+var index = require('./bundle-fnv2bNo-.js');
+var utils = require('./bundle-C42WLw1z.js');
+var Channel_components_Message = require('./bundle-JwSYMgZa.js');
+var Channel_components_FileViewer = require('./bundle-nTv23k8q.js');
+var Channel_components_RemoveMessageModal = require('./bundle-p7twnCCD.js');
+var Channel_utils_getMessagePartsInfo = require('../Channel/utils/getMessagePartsInfo.js');
+var index$2 = require('./bundle-fvz26Ije.js');
+var index$1 = require('./bundle-GRS8tlu-.js');
+var consts = require('./bundle-SggLEV_z.js');
+var Message_context = require('../Message/context.js');
+var ui_TypingIndicatorBubble = require('../ui/TypingIndicatorBubble.js');
+var TypingIndicator = require('./bundle-ziLsN5lV.js');
+var ui_ConnectionStatus = require('../ui/ConnectionStatus.js');
+var MessageInputWrapperView = require('./bundle-W1vXanLo.js');
+require('./bundle-WLD9KKbn.js');
+require('./bundle-_apVcG-_.js');
+require('../VoiceRecorder/context.js');
+require('./bundle-JaD2Ao-u.js');
+require('./bundle-Og0K_sLb.js');
+require('react-dom');
+require('./bundle-2ToiwW-_.js');
+require('../ui/IconButton.js');
+require('../ui/Button.js');
+var Channel_components_MessageInput = require('../Channel/components/MessageInput.js');
+
+var GroupChannelHeader = function (_a) {
+    var className = _a.className;
+    var context = GroupChannelProvider.useGroupChannelContext();
+    return (React.createElement(Channel_components_ChannelHeader.GroupChannelHeaderView, _tslib.__assign({}, context, { className: className, currentChannel: context.currentChannel })));
+};
+
+var FileViewer = function (props) {
+    var deleteMessage = GroupChannelProvider.useGroupChannelContext().deleteMessage;
+    return React.createElement(Channel_components_FileViewer.FileViewerView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var RemoveMessageModal = function (props) {
+    var deleteMessage = GroupChannelProvider.useGroupChannelContext().deleteMessage;
+    return React.createElement(Channel_components_RemoveMessageModal.RemoveMessageModalView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var Message = function (props) {
+    var _a = useSendbirdStateContext.useSendbirdStateContext(), config = _a.config, emojiManager = _a.emojiManager;
+    var _b = GroupChannelProvider.useGroupChannelContext(), loading = _b.loading, currentChannel = _b.currentChannel, animatedMessageId = _b.animatedMessageId, setAnimatedMessageId = _b.setAnimatedMessageId, scrollToMessage = _b.scrollToMessage, replyType = _b.replyType, threadReplySelectType = _b.threadReplySelectType, isReactionEnabled = _b.isReactionEnabled, toggleReaction = _b.toggleReaction, nicknamesMap = _b.nicknamesMap, setQuoteMessage = _b.setQuoteMessage, renderUserMentionItem = _b.renderUserMentionItem, onQuoteMessageClick = _b.onQuoteMessageClick, onReplyInThreadClick = _b.onReplyInThreadClick, onMessageAnimated = _b.onMessageAnimated, messages = _b.messages, updateUserMessage = _b.updateUserMessage, sendUserMessage = _b.sendUserMessage, resendMessage = _b.resendMessage, deleteMessage = _b.deleteMessage;
+    var message = props.message;
+    var initialized = !loading && Boolean(currentChannel);
+    var shouldRenderSuggestedReplies = uikitTools.useIIFE(function () {
+        var _a, _b;
+        if (!((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies))
+            return false;
+        if (message.messageId !== ((_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.lastMessage) === null || _b === void 0 ? void 0 : _b.messageId))
+            return false;
+        if (index.getSuggestedReplies(message).length === 0)
+            return false;
+        var lastMessage = messages[messages.length - 1];
+        if (lastMessage && index.isSendableMessage(lastMessage) && lastMessage.sendingStatus !== 'succeeded')
+            return false;
+        return true;
+    });
+    return (React.createElement(Channel_components_Message.MessageView, _tslib.__assign({}, props, { channel: currentChannel, emojiContainer: emojiManager.emojiContainer, editInputDisabled: !initialized || utils.isDisabledBecauseFrozen(currentChannel) || utils.isDisabledBecauseMuted(currentChannel) || !config.isOnline, shouldRenderSuggestedReplies: shouldRenderSuggestedReplies, isReactionEnabled: isReactionEnabled, replyType: replyType, threadReplySelectType: threadReplySelectType, nicknamesMap: nicknamesMap, renderUserMentionItem: renderUserMentionItem, scrollToMessage: scrollToMessage, toggleReaction: toggleReaction, setQuoteMessage: setQuoteMessage, onQuoteMessageClick: onQuoteMessageClick, onReplyInThreadClick: onReplyInThreadClick, sendUserMessage: sendUserMessage, updateUserMessage: updateUserMessage, resendMessage: resendMessage, deleteMessage: deleteMessage, animatedMessageId: animatedMessageId, setAnimatedMessageId: setAnimatedMessageId, onMessageAnimated: onMessageAnimated, renderFileViewer: function (props) { return React.createElement(FileViewer, _tslib.__assign({}, props)); }, renderRemoveMessageModal: function (props) { return React.createElement(RemoveMessageModal, _tslib.__assign({}, props)); } })));
+};
+
+function useScrollBehavior() {
+    var _a = GroupChannelProvider.useGroupChannelContext(), scrollRef = _a.scrollRef, _b = _a.scrollBehavior, scrollBehavior = _b === void 0 ? 'auto' : _b;
+    React.useEffect(function () {
+        if (scrollRef.current) {
+            scrollRef.current.style.scrollBehavior = scrollBehavior;
+        }
+    }, [scrollRef.current]);
+    return null;
+}
+
+var MessageList = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var _g = _a.className, className = _g === void 0 ? '' : _g, renderMessage = _a.renderMessage, renderPlaceholderEmpty = _a.renderPlaceholderEmpty, renderCustomSeparator = _a.renderCustomSeparator, renderPlaceholderLoader = _a.renderPlaceholderLoader, renderFrozenNotification = _a.renderFrozenNotification;
+    var _h = GroupChannelProvider.useGroupChannelContext(), channelUrl = _h.channelUrl, hasNext = _h.hasNext, loading = _h.loading, messages = _h.messages, newMessages = _h.newMessages, scrollToBottom = _h.scrollToBottom, isScrollBottomReached = _h.isScrollBottomReached, isMessageGroupingEnabled = _h.isMessageGroupingEnabled, scrollRef = _h.scrollRef, scrollDistanceFromBottomRef = _h.scrollDistanceFromBottomRef, currentChannel = _h.currentChannel, replyType = _h.replyType, scrollPubSub = _h.scrollPubSub;
+    var store = useSendbirdStateContext.useSendbirdStateContext();
+    var _j = React.useState(), unreadSinceDate = _j[0], setUnreadSinceDate = _j[1];
+    useScrollBehavior();
+    React.useEffect(function () {
+        if (isScrollBottomReached) {
+            setUnreadSinceDate(undefined);
+        }
+        else {
+            setUnreadSinceDate(new Date());
+        }
+    }, [isScrollBottomReached]);
+    /**
+     * 1. Move the message list scroll
+     *    when each message's height is changed by `reactions` OR `showEdit`
+     * 2. Keep the scrollBottom value after fetching new message list
+     */
+    var onMessageContentSizeChanged = function (isBottomMessageAffected) {
+        if (isBottomMessageAffected === void 0) { isBottomMessageAffected = false; }
+        var elem = scrollRef.current;
+        if (elem) {
+            var latestDistance = scrollDistanceFromBottomRef.current;
+            var currentDistance = elem.scrollHeight - elem.scrollTop - elem.offsetHeight;
+            if (latestDistance < currentDistance && (!isBottomMessageAffected || latestDistance < consts.SCROLL_BUFFER)) {
+                var diff = currentDistance - latestDistance;
+                // Move the scroll as much as the height of the message has changed
+                scrollPubSub.publish('scroll', { top: elem.scrollTop + diff, lazy: false });
+            }
+        }
+    };
+    var renderer = {
+        frozenNotification: function () {
+            if (!currentChannel || !currentChannel.isFrozen)
+                return null;
+            if (renderFrozenNotification)
+                return renderFrozenNotification();
+            return React.createElement(index$1.FrozenNotification, { className: "sendbird-conversation__messages__notification" });
+        },
+        unreadMessagesNotification: function () {
+            if (isScrollBottomReached || !unreadSinceDate)
+                return null;
+            return (React.createElement(index$2.UnreadCount, { className: "sendbird-conversation__messages__notification", count: newMessages.length, lastReadAt: unreadSinceDate, onClick: scrollToBottom }));
+        },
+        scrollToBottomButton: function () {
+            if (!hasNext() && isScrollBottomReached)
+                return null;
+            return (React.createElement("div", { className: "sendbird-conversation__scroll-bottom-button", onClick: scrollToBottom, onKeyDown: scrollToBottom, tabIndex: 0, role: "button" },
+                React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.CHEVRON_DOWN, fillColor: ui_Icon.IconColors.PRIMARY })));
+        },
+    };
+    if (loading) {
+        if (renderPlaceholderLoader)
+            return renderPlaceholderLoader();
+        return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
+    }
+    if (messages.length === 0) {
+        if (renderPlaceholderEmpty)
+            return renderPlaceholderEmpty();
+        return React.createElement(ui_PlaceHolder.default, { className: "sendbird-conversation__no-messages", type: ui_PlaceHolder.PlaceHolderTypes.NO_MESSAGES });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "sendbird-conversation__messages ".concat(className) },
+            React.createElement("div", { className: "sendbird-conversation__scroll-container" },
+                React.createElement("div", { className: "sendbird-conversation__padding" }),
+                React.createElement("div", { className: "sendbird-conversation__messages-padding", ref: scrollRef },
+                    messages.map(function (message, idx) {
+                        var _a = Channel_utils_getMessagePartsInfo.getMessagePartsInfo({
+                            allMessages: messages,
+                            replyType: replyType,
+                            isMessageGroupingEnabled: isMessageGroupingEnabled,
+                            currentIndex: idx,
+                            currentMessage: message,
+                            currentChannel: currentChannel,
+                        }), chainTop = _a.chainTop, chainBottom = _a.chainBottom, hasSeparator = _a.hasSeparator;
+                        var isOutgoingMessage = message.isUserMessage() && message.sender.userId === store.config.userId;
+                        return (React.createElement(Message_context.MessageProvider, { message: message, key: utils.getComponentKeyFromMessage(message), isByMe: isOutgoingMessage },
+                            React.createElement(Message, { handleScroll: onMessageContentSizeChanged, renderMessage: renderMessage, message: message, hasSeparator: hasSeparator, chainTop: chainTop, chainBottom: chainBottom, renderCustomSeparator: renderCustomSeparator })));
+                    }),
+                    !hasNext()
+                        && ((_c = (_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.groupChannel) === null || _c === void 0 ? void 0 : _c.enableTypingIndicator)
+                        && ((_f = (_e = (_d = store === null || store === void 0 ? void 0 : store.config) === null || _d === void 0 ? void 0 : _d.groupChannel) === null || _e === void 0 ? void 0 : _e.typingIndicatorTypes) === null || _f === void 0 ? void 0 : _f.has(Channel_components_MessageList.TypingIndicatorType.Bubble)) && (React.createElement(TypingIndicatorBubbleWrapper, { channelUrl: channelUrl, handleScroll: onMessageContentSizeChanged })))),
+            React.createElement(React.Fragment, null, renderer.frozenNotification()),
+            React.createElement(React.Fragment, null, renderer.unreadMessagesNotification()),
+            React.createElement(React.Fragment, null, renderer.scrollToBottomButton()))));
+};
+var TypingIndicatorBubbleWrapper = function (props) {
+    var stores = useSendbirdStateContext.useSendbirdStateContext().stores;
+    var _a = React.useState([]), typingMembers = _a[0], setTypingMembers = _a[1];
+    uikitTools.useGroupChannelHandler(stores.sdkStore.sdk, {
+        onTypingStatusUpdated: function (channel) {
+            if (channel.url === props.channelUrl) {
+                setTypingMembers(channel.getTypingUsers());
+            }
+        },
+    });
+    return React.createElement(ui_TypingIndicatorBubble, { typingMembers: typingMembers, handleScroll: props.handleScroll });
+};
+
+var MessageInputWrapper = function (props) {
+    var _a;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var context = GroupChannelProvider.useGroupChannelContext();
+    var messages = context.messages, currentChannel = context.currentChannel;
+    var lastMessage = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.lastMessage;
+    var isLastMessageSuggestedRepliesEnabled = uikitTools.useIIFE(function () {
+        var _a;
+        if (!((_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableSuggestedReplies))
+            return false;
+        if (index.getSuggestedReplies(lastMessage).length === 0)
+            return false;
+        var lastMessageInContext = messages[messages.length - 1];
+        if (index.isSendableMessage(lastMessageInContext) && lastMessageInContext.sendingStatus !== 'succeeded')
+            return false;
+        return true;
+    });
+    var disableMessageInput = props.disabled
+        || isLastMessageSuggestedRepliesEnabled && !!((_a = lastMessage.extendedMessagePayload) === null || _a === void 0 ? void 0 : _a['disable_chat_input']);
+    return (React.createElement(MessageInputWrapperView.MessageInputWrapperView, _tslib.__assign({}, props, { disabled: disableMessageInput }, context)));
+};
+
+var GroupChannelUIView = function (props) {
+    var _a, _b, _c, _d;
+    var requestedChannelUrl = props.requestedChannelUrl, loading = props.loading, isInvalid = props.isInvalid, _e = props.renderChannelHeader, renderChannelHeader = _e === void 0 ? function (props) { return (React.createElement(GroupChannelHeader, _tslib.__assign({}, props))); } : _e, _f = props.renderMessageList, renderMessageList = _f === void 0 ? function (props) { return (React.createElement(MessageList, _tslib.__assign({}, props, { className: "sendbird-conversation__message-list" }))); } : _f, _g = props.renderMessageInput, renderMessageInput = _g === void 0 ? function () { return React.createElement(MessageInputWrapper, null); } : _g, renderTypingIndicator = props.renderTypingIndicator, renderPlaceholderLoader = props.renderPlaceholderLoader, renderPlaceholderInvalid = props.renderPlaceholderInvalid;
+    var _h = useSendbirdStateContext.useSendbirdStateContext(), stores = _h.stores, config = _h.config;
+    var sdkError = (_a = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _a === void 0 ? void 0 : _a.error;
+    var logger = config.logger, isOnline = config.isOnline;
+    if (loading) {
+        return React.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderLoader === null || renderPlaceholderLoader === void 0 ? void 0 : renderPlaceholderLoader()) || React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING }));
+    }
+    if (!requestedChannelUrl) {
+        return (React.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS })));
+    }
+    if (isInvalid) {
+        return React.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG }));
+    }
+    if (sdkError) {
+        return (React.createElement("div", { className: "sendbird-conversation" }, (renderPlaceholderInvalid === null || renderPlaceholderInvalid === void 0 ? void 0 : renderPlaceholderInvalid()) || (React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG, retryToConnect: function () {
+                logger.info('Channel: reconnecting');
+                // reconnect();
+            } }))));
+    }
+    return (React.createElement("div", { className: 'sendbird-conversation' }, renderChannelHeader === null || renderChannelHeader === void 0 ? void 0 :
+        renderChannelHeader({ className: 'sendbird-conversation__channel-header' }), renderMessageList === null || renderMessageList === void 0 ? void 0 :
+        renderMessageList(props),
+        React.createElement("div", { className: "sendbird-conversation__footer" }, renderMessageInput === null || renderMessageInput === void 0 ? void 0 :
+            renderMessageInput(),
+            React.createElement("div", { className: "sendbird-conversation__footer__typing-indicator" },
+                (renderTypingIndicator === null || renderTypingIndicator === void 0 ? void 0 : renderTypingIndicator())
+                    || (((_b = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _b === void 0 ? void 0 : _b.enableTypingIndicator)
+                        && ((_d = (_c = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _c === void 0 ? void 0 : _c.typingIndicatorTypes) === null || _d === void 0 ? void 0 : _d.has(Channel_components_MessageList.TypingIndicatorType.Text))
+                        && (React.createElement(TypingIndicator.TypingIndicator, { channelUrl: requestedChannelUrl }))),
+                !isOnline && React.createElement(ui_ConnectionStatus, null)))));
+};
+
+var ChannelUI = function (props) {
+    var _a;
+    var context = Channel_context.useChannelContext();
+    var channelUrl = context.channelUrl, isInvalid = context.isInvalid, loading = context.loading;
+    return (React.createElement(GroupChannelUIView, _tslib.__assign({}, props, context, { requestedChannelUrl: channelUrl, loading: (_a = props === null || props === void 0 ? void 0 : props.isLoading) !== null && _a !== void 0 ? _a : loading, isInvalid: isInvalid, renderChannelHeader: function (props) { return (React.createElement(Channel_components_ChannelHeader.ChannelHeader, _tslib.__assign({}, props))); }, renderMessageList: function (props) { return (React.createElement(Channel_components_MessageList.MessageList, _tslib.__assign({}, props))); }, renderMessageInput: function () {
+            var _a, _b;
+            return ((_b = (_a = props.renderMessageInput) === null || _a === void 0 ? void 0 : _a.call(props)) !== null && _b !== void 0 ? _b : React.createElement(Channel_components_MessageInput.MessageInputWrapper, _tslib.__assign({}, props)));
+        } })));
+};
+
+exports.ChannelUI = ChannelUI;
+exports.GroupChannelUIView = GroupChannelUIView;
+exports.MessageInputWrapper = MessageInputWrapper;
+//# sourceMappingURL=bundle-oTDe-k6e.js.map

package/cjs/chunks/bundle-oTDe-k6e.js.map

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