@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
294 lines (285 loc) • 17 kB
JavaScript
'use strict';
var React = require('react');
var LocalizationContext = require('../../chunks/bundle-DPDyqKIJ.js');
var utils = require('../../chunks/bundle-D36T0dOY.js');
var Thread_components_ParentMessageInfo = require('./ParentMessageInfo.js');
var Thread_components_ThreadHeader = require('./ThreadHeader.js');
var Thread_components_ThreadList = require('./ThreadList.js');
var Thread_components_ThreadMessageInput = require('./ThreadMessageInput.js');
var Thread_context_types = require('../context/types.js');
var ui_PlaceHolder = require('../../ui/PlaceHolder.js');
var ui_Label = require('../../chunks/bundle-zgmRG2KL.js');
var useSendMultipleFilesMessage = require('../../chunks/bundle-BLLzQxHS.js');
var Message_context = require('../../Message/context.js');
var index = require('../../chunks/bundle-fYxs1lss.js');
var utils$1 = require('../../chunks/bundle-CkQrhwR6.js');
var ThreadProvider = require('../../chunks/bundle-DXySM280.js');
var useSendbird = require('../../chunks/bundle-Bq15P9qk.js');
require('../../chunks/bundle-Conb-pOy.js');
require('../../chunks/bundle-BbrBawlX.js');
require('../../chunks/bundle-Cyl6_qLo.js');
require('../../chunks/bundle-CHAKEXIJ.js');
require('../../chunks/bundle-CVJwHwWn.js');
require('../../chunks/bundle-Dj4TnPsk.js');
require('../../chunks/bundle-DZlJeh0V.js');
require('react-dom');
require('../../chunks/bundle-Fv6PNPGZ.js');
require('../../ui/IconButton.js');
require('../../ui/Button.js');
require('../../ui/Icon.js');
require('../../chunks/bundle-t8BQsgL5.js');
require('../../chunks/bundle-B2b-r84m.js');
require('../../chunks/bundle-Dobj18FB.js');
require('./ParentMessageInfoItem.js');
require('../../ui/ImageRenderer.js');
require('../../ui/TextButton.js');
require('../../chunks/bundle-DurllD3r.js');
require('../../ui/EmojiReactions.js');
require('../../ui/ReactionBadge.js');
require('../../ui/ReactionButton.js');
require('../../chunks/bundle-C5p82xwC.js');
require('../../chunks/bundle-DGV1BX0m.js');
require('@sendbird/chat');
require('@sendbird/chat/openChannel');
require('../../ui/SortByRow.js');
require('../../chunks/bundle-B19RHFpR.js');
require('../../chunks/bundle-Cfh78Xnm.js');
require('@sendbird/chat/groupChannel');
require('../../ui/BottomSheet.js');
require('../../hooks/useModal.js');
require('../../ui/UserListItem.js');
require('../../chunks/bundle-Bnb8seJF.js');
require('../../chunks/bundle-B7KG10z2.js');
require('../../chunks/bundle-C99t7tzf.js');
require('../../ui/MutedAvatarOverlay.js');
require('../../ui/Checkbox.js');
require('../../ui/UserProfile.js');
require('../../sendbirdSelectors.js');
require('../../chunks/bundle-dUH189qO.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../chunks/bundle-DAdgL6r8.js');
require('../../ui/Tooltip.js');
require('../../ui/TooltipWrapper.js');
require('../../chunks/bundle-CXbYckbN.js');
require('../../ui/VoiceMessageItemBody.js');
require('../../ui/ProgressBar.js');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../chunks/bundle-BHp3N9Mz.js');
require('../../VoiceRecorder/context.js');
require('../../ui/PlaybackTime.js');
require('../../ui/Loader.js');
require('../../chunks/bundle-CX7K4z2J.js');
require('../../chunks/bundle-CzkEKbFB.js');
require('../../ui/MentionLabel.js');
require('../../ui/LinkLabel.js');
require('../../chunks/bundle-KzwW_H6y.js');
require('@sendbird/chat/message');
require('../../ui/FileViewer.js');
require('../../chunks/bundle-Yq_R9TAN.js');
require('@sendbird/uikit-tools');
require('../../chunks/bundle-B78tdF27.js');
require('../../chunks/bundle-CZ38Etcw.js');
require('../../chunks/bundle-CxArG0ag.js');
require('../../chunks/bundle-CNwwuHHA.js');
require('../../chunks/bundle-B7tlFbQZ.js');
require('../../chunks/bundle-BLz2EOZ5.js');
require('../../chunks/bundle-Bomzwcdt.js');
require('../../ui/MessageItemReactionMenu.js');
require('../../ui/MessageInput.js');
require('../../chunks/bundle-VKi81862.js');
require('dompurify');
require('../../chunks/bundle-DHuNGmIj.js');
require('../../chunks/bundle-2PCdBxVA.js');
require('../../chunks/bundle-BkgFGPs_.js');
require('../../chunks/bundle-D8HbGJZJ.js');
require('../../ui/MobileMenu.js');
require('../../Message/hooks/useDirtyGetMentions.js');
require('../../chunks/bundle-BPUhuptz.js');
require('../../chunks/bundle-Y-wq3CF0.js');
require('../../chunks/bundle-BwwNS3QS.js');
require('../../ui/Header.js');
require('./ThreadListItem.js');
require('../../ui/DateSeparator.js');
require('../../chunks/bundle-DO5FgbkI.js');
require('../../chunks/bundle-ptQgj0WJ.js');
require('../../chunks/bundle-DQaXgp8o.js');
require('../../chunks/bundle-DYon6O60.js');
require('../../ui/OGMessageItemBody.js');
require('../../ui/TextMessageItemBody.js');
require('../../ui/FileMessageItemBody.js');
require('../../ui/ThumbnailMessageItemBody.js');
require('../../chunks/bundle-D9d0Qum8.js');
require('../../ui/UnknownMessageItemBody.js');
require('../../ui/TemplateMessageItemBody.js');
require('../../chunks/bundle-Bt1qvip8.js');
require('../../ui/FallbackTemplateMessageItemBody.tsx.js');
require('../../ui/LoadingTemplateMessageItemBody.tsx.js');
require('../../ui/MessageFeedbackFailedModal.js');
require('../../chunks/bundle-PVDrKOjZ.js');
require('../../Channel/utils/compareMessagesForGrouping.js');
require('date-fns');
require('../../chunks/bundle-BC4SHck9.js');
require('../../GroupChannel/components/SuggestedMentionList.js');
require('../../ui/QuoteMessageInput.js');
require('../../VoiceRecorder/useVoiceRecorder.js');
require('../../chunks/bundle-loh9z8L6.js');
require('../../chunks/bundle-CPW__Nwr.js');
require('../../chunks/bundle-C0RMVFg8.js');
require('../../chunks/bundle-19BZVS4G.js');
require('../../Channel/hooks/useHandleUploadFiles.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
var useMemorizedHeader = function (_a) {
var renderHeader = _a.renderHeader;
return React.useMemo(function () {
if (typeof renderHeader === 'function') {
return renderHeader();
}
return null;
}, [renderHeader]);
};
var useMemorizedParentMessageInfo = function (_a) {
var parentMessage = _a.parentMessage, parentMessageState = _a.parentMessageState, renderParentMessageInfo = _a.renderParentMessageInfo, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder;
return React.useMemo(function () {
if (parentMessageState === Thread_context_types.ParentMessageStateTypes.NIL
|| parentMessageState === Thread_context_types.ParentMessageStateTypes.LOADING
|| parentMessageState === Thread_context_types.ParentMessageStateTypes.INVALID) {
if (typeof renderParentMessageInfoPlaceholder === 'function') {
return renderParentMessageInfoPlaceholder(parentMessageState);
}
switch (parentMessageState) {
case Thread_context_types.ParentMessageStateTypes.NIL: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-nil", type: ui_PlaceHolder.PlaceHolderTypes.NO_RESULTS, iconSize: "64px" }));
}
case Thread_context_types.ParentMessageStateTypes.LOADING: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
}
case Thread_context_types.ParentMessageStateTypes.INVALID: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__parent-message-info placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
}
default: {
return null;
}
}
}
else if (parentMessageState === Thread_context_types.ParentMessageStateTypes.INITIALIZED) {
if (typeof renderParentMessageInfo === 'function') {
return renderParentMessageInfo();
}
}
return null;
}, [
parentMessage,
parentMessageState,
renderParentMessageInfo,
renderParentMessageInfoPlaceholder,
]);
};
var useMemorizedThreadList = function (_a) {
var threadListState = _a.threadListState, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder;
return React.useMemo(function () {
if (threadListState === Thread_context_types.ThreadListStateTypes.NIL
|| threadListState === Thread_context_types.ThreadListStateTypes.LOADING
|| threadListState === Thread_context_types.ThreadListStateTypes.INVALID) {
if (typeof renderThreadListPlaceHolder === 'function') {
return renderThreadListPlaceHolder(threadListState);
}
switch (threadListState) {
case Thread_context_types.ThreadListStateTypes.LOADING: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-loading", type: ui_PlaceHolder.PlaceHolderTypes.LOADING, iconSize: "64px" }));
}
case Thread_context_types.ThreadListStateTypes.INVALID: {
return (React__default.default.createElement(ui_PlaceHolder.default, { className: "sendbird-thread-ui__thread-list placeholder-invalid", type: ui_PlaceHolder.PlaceHolderTypes.WRONG, iconSize: "64px" }));
}
case Thread_context_types.ThreadListStateTypes.NIL: {
return React__default.default.createElement(React__default.default.Fragment, null);
}
default: {
return null;
}
}
}
return null;
}, [
threadListState,
renderThreadListPlaceHolder,
]);
};
var ThreadUI = function (_a) {
var _b, _c, _d, _e;
var renderHeader = _a.renderHeader, _f = _a.renderParentMessageInfo, renderParentMessageInfo = _f === void 0 ? function () { return React__default.default.createElement(Thread_components_ParentMessageInfo, { className: "sendbird-thread-ui__parent-message-info" }); } : _f, renderMessage = _a.renderMessage, renderMessageInput = _a.renderMessageInput, renderCustomSeparator = _a.renderCustomSeparator, renderParentMessageInfoPlaceholder = _a.renderParentMessageInfoPlaceholder, renderThreadListPlaceHolder = _a.renderThreadListPlaceHolder, renderFileUploadIcon = _a.renderFileUploadIcon, renderVoiceMessageIcon = _a.renderVoiceMessageIcon, renderSendMessageIcon = _a.renderSendMessageIcon;
var _g = useSendbird.useSendbird().state, stores = _g.stores, config = _g.config;
var currentUserId = (_d = (_c = (_b = stores === null || stores === void 0 ? void 0 : stores.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk) === null || _c === void 0 ? void 0 : _c.currentUser) === null || _d === void 0 ? void 0 : _d.userId;
var stringSet = LocalizationContext.useLocalization().stringSet;
var _h = ThreadProvider.useThread(), _j = _h.state, currentChannel = _j.currentChannel, allThreadMessages = _j.allThreadMessages, parentMessage = _j.parentMessage, parentMessageState = _j.parentMessageState, threadListState = _j.threadListState, hasMorePrev = _j.hasMorePrev, hasMoreNext = _j.hasMoreNext, onHeaderActionClick = _j.onHeaderActionClick, onMoveToParentMessage = _j.onMoveToParentMessage, _k = _h.actions, fetchPrevThreads = _k.fetchPrevThreads, fetchNextThreads = _k.fetchNextThreads;
var replyCount = allThreadMessages.length;
var isByMe = currentUserId === ((_e = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.sender) === null || _e === void 0 ? void 0 : _e.userId);
// Memoized custom components
var MemorizedHeader = useMemorizedHeader({ renderHeader: renderHeader });
var MemorizedParentMessageInfo = useMemorizedParentMessageInfo({
parentMessage: parentMessage,
parentMessageState: parentMessageState,
renderParentMessageInfo: renderParentMessageInfo,
renderParentMessageInfoPlaceholder: renderParentMessageInfoPlaceholder,
});
var MemorizedThreadList = useMemorizedThreadList({
threadListState: threadListState,
renderThreadListPlaceHolder: renderThreadListPlaceHolder,
});
// scroll
var _l = React.useState(0), scrollBottom = _l[0], setScrollBottom = _l[1];
var scrollRef = React.useRef(null);
var onScroll = function (e) {
var _a;
var element = e.target;
var scrollTop = element.scrollTop, clientHeight = element.clientHeight, scrollHeight = element.scrollHeight;
var threadItemNodes = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sendbird-thread-list-item');
var firstNode = threadItemNodes === null || threadItemNodes === void 0 ? void 0 : threadItemNodes[0];
if (useSendMultipleFilesMessage.isAboutSame(scrollTop, 0, 10) && hasMorePrev) {
fetchPrevThreads(function (messages) {
var _a;
if (messages) {
try {
(_a = firstNode === null || firstNode === void 0 ? void 0 : firstNode.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(firstNode, { block: 'start', inline: 'nearest' });
}
catch (error) {
//
}
}
});
}
if (useSendMultipleFilesMessage.isAboutSame(clientHeight + scrollTop, scrollHeight, 10) && hasMoreNext) {
var scrollTop_1 = scrollTop;
fetchNextThreads(function (messages) {
if (messages) {
try {
element.scrollTop = scrollTop_1;
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollTop_1;
}
}
catch (error) {
//
}
}
});
}
// save the lastest scroll bottom value
if (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) {
var current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight);
}
};
return (React__default.default.createElement("div", { className: 'sendbird-thread-ui' },
MemorizedHeader || (React__default.default.createElement(Thread_components_ThreadHeader, { className: "sendbird-thread-ui__header", channelName: utils.getChannelTitle(currentChannel, currentUserId !== null && currentUserId !== void 0 ? currentUserId : '', stringSet), onActionIconClick: onHeaderActionClick, onChannelNameClick: function () {
onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage({ message: parentMessage, channel: currentChannel });
} })),
React__default.default.createElement("div", { className: utils$1.classnames('sendbird-thread-ui--scroll', 'sendbird-conversation__messages'), ref: scrollRef, onScroll: onScroll, dir: index.getHTMLTextDirection(config === null || config === void 0 ? void 0 : config.htmlTextDirection, config === null || config === void 0 ? void 0 : config.forceLeftToRightMessageLayout) },
React__default.default.createElement(Message_context.MessageProvider, { message: parentMessage, isByMe: isByMe }, MemorizedParentMessageInfo),
replyCount > 0 && (React__default.default.createElement("div", { className: "sendbird-thread-ui__reply-counts" },
React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_3 }, "".concat(replyCount, " ").concat(replyCount > 1 ? stringSet.THREAD__THREAD_REPLIES : stringSet.THREAD__THREAD_REPLY)))),
MemorizedThreadList || (React__default.default.createElement(Thread_components_ThreadList, { className: "sendbird-thread-ui__thread-list", renderMessage: renderMessage, renderCustomSeparator: renderCustomSeparator, scrollRef: scrollRef, scrollBottom: scrollBottom }))),
(renderMessageInput === null || renderMessageInput === void 0 ? void 0 : renderMessageInput()) || (React__default.default.createElement(Thread_components_ThreadMessageInput, { className: "sendbird-thread-ui__message-input", renderFileUploadIcon: renderFileUploadIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, renderSendMessageIcon: renderSendMessageIcon }))));
};
module.exports = ThreadUI;
//# sourceMappingURL=ThreadUI.js.map