@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
199 lines (194 loc) • 13.3 kB
JavaScript
import React__default, { useContext, useState, useRef } from 'react';
import { f as format } from '../../chunks/bundle-DQG1nDod.js';
import OpenchannelUserMessage from '../../ui/OpenchannelUserMessage.js';
import OpenChannelAdminMessage from '../../ui/OpenChannelAdminMessage.js';
import OpenChannelOGMessage from '../../ui/OpenchannelOGMessage.js';
import OpenchannelThumbnailMessage from '../../ui/OpenchannelThumbnailMessage.js';
import OpenChannelFileMessage from '../../ui/OpenchannelFileMessage.js';
import DateSeparator from '../../ui/DateSeparator.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../../chunks/bundle-FZ_FdxZT.js';
import MessageInput from '../../ui/MessageInput.js';
import FileViewer from '../../ui/FileViewer.js';
import { M as Modal } from '../../chunks/bundle-BDItDVZl.js';
import { L as LocalizationContext, u as useLocalization } from '../../chunks/bundle-DxLnjDoJ.js';
import { g as getModalDeleteMessageTitle } from '../../chunks/bundle-s0NWd4qh.js';
import { l as isImage, k as isVideo } from '../../chunks/bundle-C5Cl3Igw.js';
import { u as useOpenChannelContext } from '../../chunks/bundle-BQA9qYkO.js';
import { u as useSendbird } from '../../chunks/bundle-BnaoVUUl.js';
import '../../chunks/bundle-0bJlK18Z.js';
import '../../chunks/bundle-D89Qj0P4.js';
import '../../chunks/bundle-DlZj_j5B.js';
import '../../chunks/bundle-Dgt7lb2O.js';
import '../../ui/ImageRenderer.js';
import '../../chunks/bundle-CaW4IP0_.js';
import '../../chunks/bundle-h43SVTxb.js';
import '../../ui/Icon.js';
import '../../chunks/bundle-BRB1saAI.js';
import 'react-dom';
import '@sendbird/chat';
import '@sendbird/chat/openChannel';
import '../../ui/SortByRow.js';
import '../../chunks/bundle-CSjCAZib.js';
import '../../ui/IconButton.js';
import '../../chunks/bundle-C1jTnXNH.js';
import '../../chunks/bundle-C8kxBudB.js';
import '@sendbird/chat/groupChannel';
import '../../ui/Loader.js';
import '../../ui/UserProfile.js';
import '../../chunks/bundle-tDk7wyaM.js';
import '../../sendbirdSelectors.js';
import '../../chunks/bundle-D9lZlE3H.js';
import '../../ui/Button.js';
import '../../chunks/bundle-Dhutxl0X.js';
import '../../chunks/bundle-CjekBWOL.js';
import '../../chunks/bundle-8XssNFcq.js';
import '../../chunks/bundle-DWJPyrDa.js';
import '../../chunks/bundle-B1FaeCoO.js';
import '../../utils/message/getOutgoingMessageState.js';
import '../../chunks/bundle-OJHU7Q3U.js';
import '../../chunks/bundle-DZaN4z9l.js';
import '../../ui/LinkLabel.js';
import '../../chunks/bundle-CR2Uxj3o.js';
import '../../chunks/bundle-l40KXk4C.js';
import '../../Message/context.js';
import '../../ui/MentionLabel.js';
import '../../ui/TextButton.js';
import '../../chunks/bundle-Bv6iXkjg.js';
import '../../chunks/bundle-LDv-FNzw.js';
import '../../chunks/bundle-CVos_O7L.js';
import '../../chunks/bundle-ZgaJ1zMw.js';
import 'dompurify';
import '../../chunks/bundle-BtgjnqNn.js';
import '../../chunks/bundle-Bmy70Etb.js';
import '../../chunks/bundle-Cii8q6Vf.js';
import '../../hooks/useModal.js';
import '../../chunks/bundle-86aNeIDh.js';
import '@sendbird/uikit-tools';
import '../../chunks/bundle-CQBvCw9O.js';
import '../../chunks/bundle-WQ_CLl_f.js';
function RemoveMessageModal(_a) {
var message = _a.message, onCloseModal = _a.onCloseModal, onDeleteMessage = _a.onDeleteMessage;
var stringSet = useContext(LocalizationContext).stringSet;
return (React__default.createElement(Modal, { onCancel: onCloseModal, onSubmit: onDeleteMessage, submitText: stringSet.MESSAGE_MENU__DELETE, titleText: getModalDeleteMessageTitle(stringSet, message) }));
}
var MessageTypes = {
ADMIN: 'ADMIN',
USER: 'USER',
FILE: 'FILE',
THUMBNAIL: 'THUMBNAIL',
OG: 'OG',
UNKNOWN: 'UNKNOWN',
};
var SendingMessageStatus = {
NONE: 'none',
SUCCEEDED: 'succeeded',
FAILED: 'failed',
PENDING: 'pending',
};
var getMessageType = function (message, options) {
var _a, _b;
var isOgMessageEnabledInOpenChannel = options === null || options === void 0 ? void 0 : options.isOgMessageEnabledInOpenChannel;
if (((_a = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _a === void 0 ? void 0 : _a.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
return ((message === null || message === void 0 ? void 0 : message.ogMetaData) && isOgMessageEnabledInOpenChannel)
? MessageTypes.OG
: MessageTypes.USER;
}
if ((_b = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _b === void 0 ? void 0 : _b.call(message)) {
return MessageTypes.ADMIN;
}
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
return (isImage(message.type) || isVideo(message.type))
? MessageTypes.THUMBNAIL
: MessageTypes.FILE;
}
return MessageTypes.UNKNOWN;
};
function OpenChannelMessage(props) {
var _a;
var _b;
var message = props.message, chainTop = props.chainTop, chainBottom = props.chainBottom, hasSeparator = props.hasSeparator, renderMessage = props.renderMessage;
var _c = useOpenChannelContext(), currentOpenChannel = _c.currentOpenChannel, deleteMessage = _c.deleteMessage, updateMessage = _c.updateMessage, resendMessage = _c.resendMessage;
var _d = useLocalization(), dateLocale = _d.dateLocale, stringSet = _d.stringSet;
var editDisabled = currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isFrozen;
var state = useSendbird().state;
var currentUserId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
var isOgMessageEnabledInOpenChannel = state.config.openChannel.enableOgtag;
var sender;
if ((message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
sender = message === null || message === void 0 ? void 0 : message.sender;
}
var _e = useState(false), showEdit = _e[0], setShowEdit = _e[1];
var _f = useState(false), showRemove = _f[0], setShowRemove = _f[1];
var _g = useState(false), showFileViewer = _g[0], setShowFileViewer = _g[1];
var editMessageInputRef = useRef(null);
var isByMe = false;
if (sender && (message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
// pending and failed messages are by me
isByMe = currentUserId === sender.userId
|| (message === null || message === void 0 ? void 0 : message.sendingStatus)
=== SendingMessageStatus.PENDING
|| (message === null || message === void 0 ? void 0 : message.sendingStatus)
=== SendingMessageStatus.FAILED;
}
if (renderMessage) {
return (React__default.createElement("div", { className: "sendbird-open-channel-msg-hoc sendbird-msg--scroll-ref", "data-testid": "sendbird-message-hoc" }, renderMessage({ message: message, chainTop: chainTop, chainBottom: chainBottom })));
}
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user' && showEdit) {
return (React__default.createElement(MessageInput, { isEdit: true, channel: currentOpenChannel, disabled: editDisabled, ref: editMessageInputRef, message: message, onUpdateMessage: function (_a) {
var messageId = _a.messageId, message = _a.message;
updateMessage(messageId, message);
setShowEdit(false);
}, onCancelEdit: function () {
setShowEdit(false);
} }));
}
return (React__default.createElement("div", { className: "sendbird-open-channel-msg-hoc sendbird-msg--scroll-ref", "data-testid": "sendbird-message-hoc" },
React__default.createElement(React__default.Fragment, null,
hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && (React__default.createElement(DateSeparator, null,
React__default.createElement(Label, { type: LabelTypography.CAPTION_2, color: LabelColors.ONBACKGROUND_2 }, format(message === null || message === void 0 ? void 0 : message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, { locale: dateLocale })))),
(_a = {},
_a[MessageTypes.ADMIN] = (function () {
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
return (React__default.createElement(OpenChannelAdminMessage, { message: message }));
}
})(),
_a[MessageTypes.FILE] = (function () {
var _a;
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
return (React__default.createElement(OpenChannelFileMessage, { message: message, isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId), isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral, disabled: editDisabled, userId: currentUserId, showRemove: setShowRemove, resendMessage: resendMessage, chainTop: chainTop, chainBottom: chainBottom }));
}
})(),
_a[MessageTypes.OG] = (function () {
var _a;
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user'
&& isOgMessageEnabledInOpenChannel) {
return (React__default.createElement(OpenChannelOGMessage, { message: message, isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId), isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral, userId: currentUserId, showEdit: setShowEdit, disabled: editDisabled, showRemove: setShowRemove, resendMessage: resendMessage, chainTop: chainTop, chainBottom: chainBottom }));
}
})(),
_a[MessageTypes.THUMBNAIL] = (function () {
var _a;
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
return (React__default.createElement(OpenchannelThumbnailMessage, { message: message, isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId), isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral, disabled: editDisabled, userId: currentUserId, showRemove: setShowRemove, resendMessage: resendMessage, onClick: setShowFileViewer, chainTop: chainTop, chainBottom: chainBottom }));
}
})(),
_a[MessageTypes.USER] = (function () {
var _a;
if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
return (React__default.createElement(OpenchannelUserMessage, { message: message, isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId), isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral, userId: currentUserId, disabled: editDisabled, showEdit: setShowEdit, showRemove: setShowRemove, resendMessage: resendMessage, chainTop: chainTop, chainBottom: chainBottom }));
}
})(),
_a[MessageTypes.UNKNOWN] = (function () {
// return (
// <OpenChannelUnknownMessage message={message} />
// );
})(),
_a)[getMessageType(message, { isOgMessageEnabledInOpenChannel: isOgMessageEnabledInOpenChannel })],
showRemove && (React__default.createElement(RemoveMessageModal, { message: message, onCloseModal: function () { return setShowRemove(false); }, onDeleteMessage: function () {
if ((message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
deleteMessage(message);
}
} })),
showFileViewer && (message === null || message === void 0 ? void 0 : message.messageType) === 'file' && (React__default.createElement(FileViewer, { onClose: function () { return setShowFileViewer(false); }, message: message, onDelete: function () { return deleteMessage(message); }, isByMe: isByMe })))));
}
export { OpenChannelMessage as default };
//# sourceMappingURL=OpenChannelMessage.js.map