@sendbird/uikit-react 3.10.2-alpha.0 → 3.11.1

package/cjs/App.js

@@ -2,97 +2,122 @@
 
 var React = require('react');
 var SendbirdProvider = require('./SendbirdProvider.js');
-var MediaQueryContext = require('./chunks/bundle-6zBNmPOP.js');
-var _tslib = require('./chunks/bundle-DhtZdKsr.js');
-var GroupChannelProvider = require('./chunks/bundle--1R8Yp9p.js');
-var Channel_components_ChannelUI = require('./chunks/bundle-Cbklvbls.js');
-var ChannelList_components_ChannelPreview = require('./chunks/bundle-Y86Tvf8p.js');
-var ChannelList_components_ChannelListUI = require('./chunks/bundle-jYLCAuUn.js');
-var LocalizationContext = require('./chunks/bundle-6SzyBwQ5.js');
-var ui_ContextMenu = require('./ui/ContextMenu.js');
-var ui_IconButton = require('./ui/IconButton.js');
+var MediaQueryContext = require('./chunks/bundle-lHnGN-3L.js');
+var _tslib = require('./chunks/bundle-H3iUL9jU.js');
+var Thread_components_ThreadMessageInput = require('./chunks/bundle-xbwLn6pV.js');
+var Channel_components_ChannelUI = require('./chunks/bundle-3MlXHMIm.js');
+var Channel_components_ChannelHeader = require('./chunks/bundle-5E4_BBHS.js');
+var uikitTools = require('@sendbird/uikit-tools');
+var Channel_components_MessageList = require('./chunks/bundle-qLmNEs3L.js');
+var ui_PlaceHolder = require('./ui/PlaceHolder.js');
 var ui_Icon = require('./ui/Icon.js');
-var ChannelList_components_ChannelPreviewAction = require('./chunks/bundle-1tu4OFP8.js');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var ui_MessageStatus = require('./chunks/bundle-Pzvqu5yR.js');
-var ChannelList_components_AddChannel = require('./chunks/bundle-rcw3KtAu.js');
+var index = require('./chunks/bundle-eG-yFfLY.js');
+var utils = require('./chunks/bundle-hlZ6VwkW.js');
+var Channel_components_Message = require('./chunks/bundle-FHJHaFw9.js');
+var Channel_components_FileViewer = require('./chunks/bundle-BrOubGHT.js');
+var Channel_components_RemoveMessageModal = require('./chunks/bundle-OlL6NpZd.js');
+var Channel_utils_getMessagePartsInfo = require('./Channel/utils/getMessagePartsInfo.js');
+var index$2 = require('./chunks/bundle-UmkcFSLj.js');
+var index$1 = require('./chunks/bundle-Y4f3TKLP.js');
+var consts = require('./chunks/bundle--yF0PJ6E.js');
+var Message_context = require('./Message/context.js');
+var ui_TypingIndicatorBubble = require('./ui/TypingIndicatorBubble.js');
+var MessageInputWrapperView = require('./chunks/bundle-o2O3PYyl.js');
+var LocalizationContext = require('./chunks/bundle-om7V4Kmd.js');
+var VoicePlayer_context = require('./chunks/bundle-X6IgWOv5.js');
+require('./VoiceRecorder/context.js');
+require('./chunks/bundle-WWYVAaVT.js');
+require('./chunks/bundle-YxnuYJcD.js');
+require('react-dom');
+var ui_IconButton = require('./ui/IconButton.js');
+require('./ui/Button.js');
+var ChannelList_components_ChannelPreview = require('./chunks/bundle-MF7Mgc0Z.js');
+var ChannelList_components_ChannelListUI = require('./chunks/bundle-Rs2C3Gv0.js');
+var ui_ContextMenu = require('./ui/ContextMenu.js');
+var ChannelList_components_ChannelPreviewAction = require('./chunks/bundle-dSLJZu7j.js');
+var ui_MessageStatus = require('./chunks/bundle-4QpLkquA.js');
+var ChannelList_components_AddChannel = require('./chunks/bundle-Dy4KUUCa.js');
 var Channel = require('./Channel.js');
 var ChannelList = require('./ChannelList.js');
 var ChannelSettings = require('./ChannelSettings.js');
 var MessageSearch = require('./MessageSearch.js');
 var Thread = require('./Thread.js');
 var groupChannel = require('@sendbird/chat/groupChannel');
-var uuid = require('./chunks/bundle-TB_UEIPg.js');
-var VoicePlayer_context = require('./chunks/bundle-zAQuo6rI.js');
-require('@sendbird/uikit-tools');
+var uuid = require('./chunks/bundle-jP-1bn23.js');
 require('./withSendbird.js');
 require('css-vars-ponyfill');
-require('./chunks/bundle-xM2DAzE6.js');
-require('./chunks/bundle-UuftRMuc.js');
-require('./chunks/bundle-fzSiKesI.js');
+require('./chunks/bundle-eg9jnWPm.js');
+require('./chunks/bundle-mvH436V0.js');
+require('./chunks/bundle-KloNxGOC.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
-require('./chunks/bundle-nox41MG6.js');
-require('./utils/message/getOutgoingMessageState.js');
-require('./chunks/bundle-Y-_KhZFq.js');
-require('./chunks/bundle-CZTvTAu-.js');
-require('./VoiceRecorder/context.js');
-require('./chunks/bundle-6L4HCLmb.js');
-require('react-dom');
-require('./ui/Button.js');
-require('./chunks/bundle-VxcYXhwp.js');
-require('./chunks/bundle-H9rcn1PJ.js');
-require('./chunks/bundle-UAspU0bH.js');
-require('./chunks/bundle-AN4eZ2xs.js');
-require('./chunks/bundle-YjNFrYVt.js');
+require('./chunks/bundle-Kwa0c8dM.js');
+require('./chunks/bundle-Z6FnnPza.js');
+require('./chunks/bundle-08DJamJs.js');
+require('./chunks/bundle--zfwoPVm.js');
 require('./hooks/useModal.js');
+require('./chunks/bundle--t70CDfb.js');
+require('./chunks/bundle-ubmIpm9y.js');
+require('./utils/message/getOutgoingMessageState.js');
+require('./ui/MessageInput.js');
+require('./chunks/bundle-Ok99sReN.js');
+require('./chunks/bundle-_vyDAzUb.js');
+require('./chunks/bundle-a3DGXthf.js');
+require('dompurify');
+require('./chunks/bundle-dwD6gaHJ.js');
+require('./chunks/bundle-0LtiaxJx.js');
+require('./chunks/bundle-8XvxyLQN.js');
+require('./chunks/bundle-ZpJLlgNE.js');
+require('./chunks/bundle-kLhcU0Bg.js');
+require('./chunks/bundle-jUxjf8aL.js');
+require('./chunks/bundle-mNGciuzV.js');
+require('./ui/ImageRenderer.js');
+require('./chunks/bundle-DgcTM2HW.js');
+require('./Thread/context.js');
+require('./chunks/bundle-hzGTyicd.js');
+require('./chunks/bundle-BMB3xh2i.js');
+require('./chunks/bundle-E1H3DQtB.js');
 require('@sendbird/chat/message');
-require('./chunks/bundle-TPy0gj60.js');
-require('./chunks/bundle-3eaFVTUX.js');
-require('./chunks/bundle-jcgWT1ad.js');
-require('./chunks/bundle-zHDXCFIb.js');
-require('./chunks/bundle-CrbMqpah.js');
-require('./chunks/bundle-Njt4gDEW.js');
-require('./chunks/bundle-77qvrXp8.js');
+require('./chunks/bundle-uubJJzRW.js');
+require('./Thread/context/types.js');
+require('./chunks/bundle-m_0K8NXX.js');
+require('./chunks/bundle-EsJltkVm.js');
+require('./chunks/bundle-qjc3EF_B.js');
+require('./chunks/bundle-QU7zbepl.js');
+require('./chunks/bundle-kYfqAttM.js');
+require('./chunks/bundle-y7MhfXfx.js');
+require('./Message/hooks/useDirtyGetMentions.js');
+require('./Channel/hooks/useHandleUploadFiles.js');
+require('./chunks/bundle-49TaYIAY.js');
 require('./Channel/context.js');
-require('./chunks/bundle-MNUU2JEo.js');
-require('./chunks/bundle-Msh8rb3L.js');
-require('./chunks/bundle-tntEm-Mv.js');
-require('./chunks/bundle-O6Mos2Xn.js');
-require('./chunks/bundle-NZvAE9FS.js');
+require('./chunks/bundle-V4Gdewny.js');
+require('./chunks/bundle-0TRHdH1v.js');
 require('./Channel/hooks/useInitialMessagesFetch.js');
-require('./chunks/bundle-JBbKwE7L.js');
-require('./chunks/bundle-eCBAJmJN.js');
-require('./chunks/bundle-zRJE2NjU.js');
+require('./chunks/bundle-1CojrMYd.js');
+require('./chunks/bundle-jI1VVAdg.js');
+require('./ui/ConnectionStatus.js');
+require('./Channel/components/MessageInput.js');
+require('./ui/QuoteMessageInput.js');
+require('./chunks/bundle-r9E_mzs-.js');
+require('./VoicePlayer/useVoicePlayer.js');
+require('./VoiceRecorder/useVoiceRecorder.js');
+require('./chunks/bundle-p1TqI4uJ.js');
+require('./ui/PlaybackTime.js');
+require('./ui/ProgressBar.js');
+require('./ui/TextButton.js');
 require('./ui/ChannelAvatar.js');
-require('./chunks/bundle-w0ATt2gt.js');
-require('./ui/ImageRenderer.js');
-require('./chunks/bundle-HQAiUNev.js');
-require('./chunks/bundle-iY19D_aw.js');
-require('./chunks/bundle-s--ExKtj.js');
-require('./chunks/bundle-fTMJH5JE.js');
-require('./ui/PlaceHolder.js');
+require('./chunks/bundle-xv7LjcKq.js');
+require('./chunks/bundle-zuVbTz4t.js');
+require('./chunks/bundle-1WCZv5Jt.js');
 require('./ui/Loader.js');
-require('./chunks/bundle-Eqd9bAds.js');
-require('./chunks/bundle--QPuGnli.js');
-require('./chunks/bundle--tki3Ejh.js');
-require('./Message/hooks/useDirtyGetMentions.js');
 require('./ui/DateSeparator.js');
-require('./chunks/bundle-vMF9NM5u.js');
-require('./ui/MessageInput.js');
-require('./chunks/bundle-t2GWOYzL.js');
-require('dompurify');
-require('./chunks/bundle-nYBtJl9e.js');
-require('./chunks/bundle-RUqSDidW.js');
-require('./chunks/bundle-0zagc7hR.js');
-require('./chunks/bundle-haAptps1.js');
 require('./ui/MessageContent.js');
 require('./ui/MessageItemMenu.js');
-require('./chunks/bundle-Oq2rnNn_.js');
 require('./ui/SortByRow.js');
 require('./ui/MessageItemReactionMenu.js');
 require('./ui/ReactionButton.js');
-require('./chunks/bundle-2hJhRu5W.js');
+require('./chunks/bundle-mk0LQISG.js');
 require('./ui/EmojiReactions.js');
 require('./ui/ReactionBadge.js');
 require('./ui/BottomSheet.js');
@@ -103,61 +128,40 @@ require('./ui/UserProfile.js');
 require('./sendbirdSelectors.js');
 require('./ui/Tooltip.js');
 require('./ui/TooltipWrapper.js');
-require('./Message/context.js');
 require('./ui/AdminMessage.js');
 require('./ui/QuoteMessage.js');
-require('./chunks/bundle-KWR-0b7P.js');
-require('./chunks/bundle-KBZdi1sN.js');
+require('./chunks/bundle-hCR6GZHZ.js');
 require('./ui/ThreadReplies.js');
 require('./ui/OGMessageItemBody.js');
-require('./chunks/bundle-3_XFLnnt.js');
+require('./chunks/bundle-YvcRCGBd.js');
 require('./ui/MentionLabel.js');
 require('./ui/LinkLabel.js');
 require('./ui/TextMessageItemBody.js');
 require('./ui/FileMessageItemBody.js');
-require('./ui/TextButton.js');
-require('./chunks/bundle-qRiLsSwC.js');
-require('./chunks/bundle-NPzNlnHJ.js');
-require('./chunks/bundle-zDh-X-Q4.js');
+require('./chunks/bundle-Pcl0nMWb.js');
+require('./chunks/bundle-oLo1K2bf.js');
+require('./chunks/bundle-LFW-mAQF.js');
 require('./ui/VoiceMessageItemBody.js');
-require('./ui/ProgressBar.js');
-require('./VoicePlayer/useVoicePlayer.js');
-require('./ui/PlaybackTime.js');
 require('./ui/ThumbnailMessageItemBody.js');
 require('./ui/UnknownMessageItemBody.js');
 require('./ui/FeedbackIconButton.js');
 require('./ui/MobileFeedbackMenu.js');
 require('./Channel/components/MessageFeedbackModal.js');
 require('./ui/Input.js');
-require('./chunks/bundle-PhGdgkei.js');
-require('./chunks/bundle-RquYsY0d.js');
-require('./chunks/bundle-LsJ9u7uN.js');
-require('./chunks/bundle--t85OO-4.js');
-require('./chunks/bundle-wZDX1pVR.js');
-require('./Channel/utils/getMessagePartsInfo.js');
+require('./chunks/bundle-3-zCFAsZ.js');
+require('./chunks/bundle-8oh3Iidd.js');
+require('./chunks/bundle-qXInmu7W.js');
 require('./Channel/utils/compareMessagesForGrouping.js');
-require('./chunks/bundle-DfMlIvtm.js');
-require('./chunks/bundle-u7wWilEW.js');
-require('./chunks/bundle-OdZXNc-g.js');
-require('./ui/TypingIndicatorBubble.js');
-require('./chunks/bundle-5UyAossc.js');
-require('./ui/ConnectionStatus.js');
-require('./chunks/bundle-ZvLEz_GA.js');
-require('./ui/QuoteMessageInput.js');
-require('./VoiceRecorder/useVoiceRecorder.js');
-require('./chunks/bundle-zLoe4MOM.js');
-require('./chunks/bundle-PSEoX-EH.js');
-require('./Channel/components/MessageInput.js');
-require('./chunks/bundle-zGSEOOdl.js');
+require('./chunks/bundle-Eq5GnDnz.js');
 require('./ui/Badge.js');
 require('./ui/MentionUserLabel.js');
-require('./chunks/bundle-fUWIw3RI.js');
+require('./chunks/bundle-W789Mnl2.js');
 require('./EditUserProfile.js');
 require('./EditUserProfile/context.js');
 require('./EditUserProfile/components/EditUserProfileUI.js');
 require('./CreateChannel.js');
 require('./CreateChannel/components/CreateChannelUI.js');
-require('./chunks/bundle-gW6qz9z9.js');
+require('./chunks/bundle-A7TvCVbX.js');
 require('./CreateChannel/components/InviteUsers.js');
 require('./CreateChannel/components/SelectChannelType.js');
 require('./ChannelSettings/components/ChannelSettingsUI.js');
@@ -167,38 +171,205 @@ require('./ChannelSettings/components/EditDetailsModal.js');
 require('./ChannelSettings/components/ModerationPanel.js');
 require('./ui/Accordion.js');
 require('./ui/AccordionGroup.js');
-require('./chunks/bundle-v5-SR4v4.js');
+require('./chunks/bundle-Ne8lK39C.js');
 require('./ui/Toggle.js');
 require('./ChannelSettings/components/UserListItem.js');
-require('./chunks/bundle-bDQKUQ5r.js');
+require('./chunks/bundle-4ndIl1vM.js');
 require('./ChannelSettings/components/LeaveChannel.js');
 require('./ChannelSettings/components/UserPanel.js');
 require('./MessageSearch/components/MessageSearchUI.js');
 require('./MessageSearch/context.js');
 require('./ui/MessageSearchItem.js');
 require('./ui/MessageSearchFileItem.js');
-require('./Thread/context.js');
-require('./Thread/context/types.js');
 require('./Thread/components/ThreadUI.js');
 require('./Thread/components/ParentMessageInfo.js');
-require('./chunks/bundle-VP5r38Gj.js');
+require('./chunks/bundle-aQOJcXCO.js');
 require('./Thread/components/ParentMessageInfoItem.js');
-require('./chunks/bundle-CDUgp575.js');
 require('./Thread/components/ThreadHeader.js');
 require('./Thread/components/ThreadList.js');
 require('./Thread/components/ThreadListItem.js');
 require('date-fns');
-require('./Thread/components/ThreadMessageInput.js');
-require('./Channel/hooks/useHandleUploadFiles.js');
+
+var GroupChannelHeader = function (_a) {
+    var className = _a.className;
+    var context = Thread_components_ThreadMessageInput.useGroupChannelContext();
+    return (React.createElement(Channel_components_ChannelHeader.GroupChannelHeaderView, _tslib.__assign({}, context, { className: className, currentChannel: context.currentChannel })));
+};
+
+var FileViewer = function (props) {
+    var deleteMessage = Thread_components_ThreadMessageInput.useGroupChannelContext().deleteMessage;
+    return React.createElement(Channel_components_FileViewer.FileViewerView, _tslib.__assign({}, props, { deleteMessage: deleteMessage }));
+};
+
+var RemoveMessageModal = function (props) {
+    var deleteMessage = Thread_components_ThreadMessageInput.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 = Thread_components_ThreadMessageInput.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 = Thread_components_ThreadMessageInput.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 = Thread_components_ThreadMessageInput.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 = Thread_components_ThreadMessageInput.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 GroupChannelUI = function (props) {
-    var context = GroupChannelProvider.useGroupChannelContext();
+    var context = Thread_components_ThreadMessageInput.useGroupChannelContext();
     var currentChannel = context.currentChannel, channelUrl = context.channelUrl, loading = context.loading;
-    return (React.createElement(Channel_components_ChannelUI.GroupChannelUIView, _tslib.__assign({}, props, context, { requestedChannelUrl: channelUrl, loading: loading, isInvalid: channelUrl && !currentChannel })));
+    // Inject components to presentation layer
+    var _a = props.renderChannelHeader, renderChannelHeader = _a === void 0 ? function (props) { return React.createElement(GroupChannelHeader, _tslib.__assign({}, props)); } : _a, _b = props.renderMessageList, renderMessageList = _b === void 0 ? function (props) { return React.createElement(MessageList, _tslib.__assign({}, props, { className: "sendbird-conversation__message-list" })); } : _b, _c = props.renderMessageInput, renderMessageInput = _c === void 0 ? function () { return React.createElement(MessageInputWrapper, _tslib.__assign({}, props)); } : _c;
+    return (React.createElement(Channel_components_ChannelUI.GroupChannelUIView, _tslib.__assign({}, props, context, { loading: loading, isInvalid: channelUrl && !currentChannel, channelUrl: channelUrl, renderChannelHeader: renderChannelHeader, renderMessageList: renderMessageList, renderMessageInput: renderMessageInput })));
 };
 
 var GroupChannel = function (props) {
-    return (React.createElement(GroupChannelProvider.GroupChannelProvider, _tslib.__assign({}, props),
+    return (React.createElement(Thread_components_ThreadMessageInput.GroupChannelProvider, _tslib.__assign({}, props),
         React.createElement(GroupChannelUI, _tslib.__assign({}, props))));
 };
 

package/cjs/App.js.map

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

package/cjs/Channel/components/ChannelHeader.js

@@ -2,46 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../chunks/bundle-DhtZdKsr.js');
+require('../../chunks/bundle-H3iUL9jU.js');
 require('react');
-var Channel_components_ChannelHeader = require('../../chunks/bundle-zRJE2NjU.js');
+var Channel_components_ChannelHeader = require('../../chunks/bundle-5E4_BBHS.js');
 require('../context.js');
 require('../../ui/IconButton.js');
 require('../../ui/Icon.js');
-require('../../chunks/bundle-Y-_KhZFq.js');
-require('../../chunks/bundle-VxcYXhwp.js');
-require('../../chunks/bundle-H9rcn1PJ.js');
+require('../../chunks/bundle-Kwa0c8dM.js');
+require('../../chunks/bundle-WWYVAaVT.js');
+require('../../chunks/bundle-08DJamJs.js');
 require('../../ui/ChannelAvatar.js');
-require('../../chunks/bundle-w0ATt2gt.js');
+require('../../chunks/bundle-mNGciuzV.js');
 require('../../ui/ImageRenderer.js');
-require('../../chunks/bundle-HQAiUNev.js');
-require('../../chunks/bundle-iY19D_aw.js');
-require('../../chunks/bundle-s--ExKtj.js');
-require('../../chunks/bundle-6zBNmPOP.js');
+require('../../chunks/bundle-DgcTM2HW.js');
+require('../../chunks/bundle-xv7LjcKq.js');
+require('../../chunks/bundle-zuVbTz4t.js');
+require('../../chunks/bundle-lHnGN-3L.js');
 require('../../useSendbirdStateContext.js');
 require('../../withSendbird.js');
-require('../../chunks/bundle-6SzyBwQ5.js');
-require('../../chunks/bundle-AN4eZ2xs.js');
-require('../../chunks/bundle-TPy0gj60.js');
-require('../../chunks/bundle-MNUU2JEo.js');
-require('../../chunks/bundle-CrbMqpah.js');
+require('../../chunks/bundle-om7V4Kmd.js');
+require('../../chunks/bundle-ubmIpm9y.js');
+require('../../chunks/bundle-uubJJzRW.js');
+require('../../chunks/bundle-_vyDAzUb.js');
+require('../../chunks/bundle-E1H3DQtB.js');
 require('@sendbird/chat/message');
-require('../../chunks/bundle-Msh8rb3L.js');
-require('../../chunks/bundle-tntEm-Mv.js');
-require('../../chunks/bundle-xM2DAzE6.js');
-require('../../chunks/bundle-O6Mos2Xn.js');
-require('../../chunks/bundle-NZvAE9FS.js');
-require('../../chunks/bundle-nox41MG6.js');
+require('../../chunks/bundle-V4Gdewny.js');
+require('../../chunks/bundle-0TRHdH1v.js');
+require('../../chunks/bundle-eg9jnWPm.js');
+require('../../chunks/bundle-m_0K8NXX.js');
+require('../../chunks/bundle-EsJltkVm.js');
+require('../../chunks/bundle-eG-yFfLY.js');
 require('@sendbird/chat/groupChannel');
 require('../../utils/message/getOutgoingMessageState.js');
-require('../../chunks/bundle-TB_UEIPg.js');
+require('../../chunks/bundle-jP-1bn23.js');
 require('../hooks/useInitialMessagesFetch.js');
-require('../../chunks/bundle-JBbKwE7L.js');
-require('../../chunks/bundle-77qvrXp8.js');
-require('../../chunks/bundle-3eaFVTUX.js');
-require('../../chunks/bundle-UAspU0bH.js');
-require('../../chunks/bundle-YjNFrYVt.js');
-require('../../chunks/bundle-eCBAJmJN.js');
+require('../../chunks/bundle-1CojrMYd.js');
+require('../../chunks/bundle-BMB3xh2i.js');
+require('../../chunks/bundle-qjc3EF_B.js');
+require('../../chunks/bundle--yF0PJ6E.js');
+require('../../chunks/bundle--zfwoPVm.js');
+require('../../chunks/bundle-hzGTyicd.js');