@sendbird/uikit-react
Version:
Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.
206 lines (200 loc) • 13.4 kB
JavaScript
;
var _tslib = require('../../chunks/bundle-DdEJUQ3V.js');
var React = require('react');
var groupChannel = require('@sendbird/chat/groupChannel');
var MediaQueryContext = require('../../chunks/bundle-BmtTyZzB.js');
var LocalizationContext = require('../../chunks/bundle-REYf6P50.js');
var ui_MessageInput = require('../../ui/MessageInput.js');
var _const = require('../../chunks/bundle-Dc6k4jof.js');
var SuggestedMentionList = require('../../chunks/bundle-D0cv-92J.js');
var MessageInputWrapperView = require('../../chunks/bundle-Buhp9vb2.js');
require('../../chunks/bundle-HERYYUXZ.js');
require('../../chunks/bundle-JR9-1BeM.js');
var useSendbird = require('../../chunks/bundle-D6mmpicY.js');
require('../../chunks/bundle-DowCzqdD.js');
require('../../chunks/bundle-CEY5QNl7.js');
require('@sendbird/chat/message');
require('../../chunks/bundle-CyJimqL9.js');
var types = require('../../chunks/bundle-C73YyNPC.js');
var Message_hooks_useDirtyGetMentions = require('../../Message/hooks/useDirtyGetMentions.js');
var Channel_hooks_useHandleUploadFiles = require('../../Channel/hooks/useHandleUploadFiles.js');
var utils = require('../../chunks/bundle-C9bb3iWF.js');
var utils$1 = require('../../chunks/bundle-kfqOElgK.js');
var ThreadProvider = require('../../chunks/bundle-BL6JVo1H.js');
require('../../chunks/bundle-BE-eUbjS.js');
require('../../chunks/bundle-C7WnFc5I.js');
require('../../ui/IconButton.js');
require('../../ui/Button.js');
require('../../chunks/bundle-D66YmzI6.js');
require('../../chunks/bundle-CTz3qwYY.js');
require('dompurify');
require('../../chunks/bundle-fVfMBori.js');
require('../../chunks/bundle-n_eAVYbo.js');
require('../../chunks/bundle-L5zC6xWM.js');
require('../../ui/Icon.js');
require('../../chunks/bundle-BUPw_lsA.js');
require('../../utils/message/getOutgoingMessageState.js');
require('../../chunks/bundle-DFNM8KjC.js');
require('../../chunks/bundle-BAy4Z2n_.js');
require('../../chunks/bundle-DWBI0JnU.js');
require('../../chunks/bundle-WPa3lxwD.js');
require('../../chunks/bundle-rpradL3a.js');
require('../../chunks/bundle-B4Oz6Uwy.js');
require('../../ui/ImageRenderer.js');
require('../../chunks/bundle-CHvo3SHq.js');
require('../../chunks/bundle-BeuUz2c0.js');
require('../../chunks/bundle-Dlhvq6qJ.js');
require('../../GroupChannel/components/SuggestedMentionList.js');
require('@sendbird/chat');
require('@sendbird/chat/openChannel');
require('../../ui/QuoteMessageInput.js');
require('../../chunks/bundle-Ca4uPUG4.js');
require('../../VoicePlayer/useVoicePlayer.js');
require('../../chunks/bundle-CWVSskOQ.js');
require('../../VoiceRecorder/context.js');
require('../../chunks/bundle-OV9QvRP8.js');
require('react-dom');
require('../../VoiceRecorder/useVoiceRecorder.js');
require('../../chunks/bundle-Cch-IjCG.js');
require('../../ui/PlaybackTime.js');
require('../../ui/ProgressBar.js');
require('../../ui/TextButton.js');
require('../../chunks/bundle-qNUnRJ-F.js');
require('../../hooks/useModal.js');
require('../../chunks/bundle-o7bJmsVG.js');
require('@sendbird/uikit-tools');
require('../../chunks/bundle-H44hyvFN.js');
require('../../chunks/bundle-u5TfAXpt.js');
require('../../chunks/bundle-DFpSNLcN.js');
require('../../chunks/bundle-kYn7Bizj.js');
require('../../chunks/bundle-DwuvGkzI.js');
require('../../chunks/bundle-BH5CILPf.js');
require('../../chunks/bundle-HkyQ0DjT.js');
require('../context/types.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
var ThreadMessageInput = function (props, ref) {
var _a;
var className = props.className, renderFileUploadIcon = props.renderFileUploadIcon, renderVoiceMessageIcon = props.renderVoiceMessageIcon, renderSendMessageIcon = props.renderSendMessageIcon, acceptableMimeTypes = props.acceptableMimeTypes;
var config = useSendbird.useSendbird().state.config;
var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
var stringSet = LocalizationContext.useLocalization().stringSet;
var isOnline = config.isOnline, userMention = config.userMention, logger = config.logger, groupChannel$1 = config.groupChannel;
var threadContext = ThreadProvider.useThread();
var _b = threadContext.state, currentChannel = _b.currentChannel, parentMessage = _b.parentMessage, isMuted = _b.isMuted, isChannelFrozen = _b.isChannelFrozen, allThreadMessages = _b.allThreadMessages, _c = threadContext.actions, sendMessage = _c.sendMessage, sendFileMessage = _c.sendFileMessage, sendVoiceMessage = _c.sendVoiceMessage, sendMultipleFilesMessage = _c.sendMultipleFilesMessage;
var messageInputRef = React.useRef();
var isMentionEnabled = groupChannel$1.enableMention;
var isVoiceMessageEnabled = groupChannel$1.enableVoiceMessage;
var isMultipleFilesMessageEnabled = (_a = threadContext.state.isMultipleFilesMessageEnabled) !== null && _a !== void 0 ? _a : config.isMultipleFilesMessageEnabled;
var threadInputDisabled = props.disabled
|| !isOnline
|| isMuted
|| (!((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR) && isChannelFrozen) || parentMessage === null;
// MFM
var handleUploadFiles = Channel_hooks_useHandleUploadFiles.useHandleUploadFiles({
sendFileMessage: sendFileMessage,
sendMultipleFilesMessage: sendMultipleFilesMessage,
quoteMessage: parentMessage,
}, {
logger: logger,
});
// mention
var _d = React.useState(''), mentionNickname = _d[0], setMentionNickname = _d[1];
var _e = React.useState([]), mentionedUsers = _e[0], setMentionedUsers = _e[1];
var _f = React.useState([]), mentionedUserIds = _f[0], setMentionedUserIds = _f[1];
var _g = React.useState(null), selectedUser = _g[0], setSelectedUser = _g[1];
var _h = React.useState([]), mentionSuggestedUsers = _h[0], setMentionSuggestedUsers = _h[1];
var _j = React.useState(null), messageInputEvent = _j[0], setMessageInputEvent = _j[1];
var _k = React.useState(false), showVoiceMessageInput = _k[0], setShowVoiceMessageInput = _k[1];
var displaySuggestedMentionList = isOnline
&& isMentionEnabled
&& mentionNickname.length > 0
&& !utils.isDisabledBecauseFrozen(currentChannel)
&& !utils.isDisabledBecauseMuted(currentChannel)
&& !(currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast);
// Reset when changing channel
React.useEffect(function () {
setShowVoiceMessageInput(false);
}, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: ref || messageInputRef }, { logger: logger });
var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount);
React.useEffect(function () {
setMentionedUsers(mentionedUsers.filter(function (_a) {
var userId = _a.userId;
var i = mentionedUserIds.indexOf(userId);
if (i < 0) {
return false;
}
else {
mentionedUserIds.splice(i, 1);
return true;
}
}));
}, [mentionedUserIds]);
if ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast) && (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) !== types.Role.OPERATOR) {
return React__default.default.createElement(React__default.default.Fragment, null);
}
return (React__default.default.createElement("div", { className: utils$1.classnames(showVoiceMessageInput ? 'sendbird-thread-message-input--voice-message' : 'sendbird-thread-message-input', className) },
displaySuggestedMentionList && (React__default.default.createElement(SuggestedMentionList.SuggestedMentionList, { targetNickname: mentionNickname, inputEvent: messageInputEvent !== null && messageInputEvent !== void 0 ? messageInputEvent : undefined,
// renderUserMentionItem={renderUserMentionItem}
onUserItemClick: function (user) {
if (user) {
setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
}
setMentionNickname('');
setSelectedUser(user);
setMessageInputEvent(null);
}, onFocusItemChange: function () {
setMessageInputEvent(null);
}, onFetchUsers: function (users) {
setMentionSuggestedUsers(users);
}, ableAddMention: ableMention, maxMentionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount, maxSuggestionCount: userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount })),
showVoiceMessageInput
? (React__default.default.createElement(MessageInputWrapperView.VoiceMessageInputWrapper, { channel: currentChannel, onSubmitClick: function (recordedFile, duration) {
sendVoiceMessage(recordedFile, duration, parentMessage);
setShowVoiceMessageInput(false);
}, onCancelClick: function () {
setShowVoiceMessageInput(false);
} }))
: (React__default.default.createElement(ui_MessageInput, { className: "sendbird-thread-message-input__message-input", messageFieldId: "sendbird-message-input-text-field--thread", channel: currentChannel, channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, isMobile: isMobile, disabled: threadInputDisabled, acceptableMimeTypes: acceptableMimeTypes, setMentionedUsers: setMentionedUsers, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled, isSelectingMultipleFilesEnabled: isMultipleFilesMessageEnabled, onVoiceMessageIconClick: function () {
setShowVoiceMessageInput(true);
}, renderFileUploadIcon: renderFileUploadIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, renderSendMessageIcon: renderSendMessageIcon, ref: ref || messageInputRef, placeholder: ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isFrozen) && !((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === types.Role.OPERATOR) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
|| ((currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myMutedState) === groupChannel.MutedState.MUTED && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT)
|| (allThreadMessages.length > 0
? stringSet.THREAD__INPUT__REPLY_TO_THREAD
: stringSet.THREAD__INPUT__REPLY_IN_THREAD), onStartTyping: function () {
var _a;
(_a = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping) === null || _a === void 0 ? void 0 : _a.call(currentChannel);
}, onSendMessage: function (_a) {
var _b;
var message = _a.message, mentionTemplate = _a.mentionTemplate;
sendMessage({
message: message,
mentionedUsers: mentionedUsers,
mentionTemplate: mentionTemplate,
quoteMessage: parentMessage,
});
setMentionNickname('');
setMentionedUsers([]);
(_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
}, onFileUpload: handleUploadFiles, onUserMentioned: function (user) {
if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
setSelectedUser(null);
setMentionNickname('');
}
}, onMentionStringChange: function (mentionText) {
setMentionNickname(mentionText);
}, onMentionedUserIdsUpdated: function (userIds) {
setMentionedUserIds(userIds);
}, onKeyDown: function (e) {
if (displaySuggestedMentionList && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
&& ((e.key === _const.MessageInputKeys.Enter && ableMention) || e.key === _const.MessageInputKeys.ArrowUp || e.key === _const.MessageInputKeys.ArrowDown)) {
setMessageInputEvent(e);
return true;
}
return false;
} }))));
};
var ThreadMessageInput$1 = React__default.default.forwardRef(ThreadMessageInput);
module.exports = ThreadMessageInput$1;
//# sourceMappingURL=ThreadMessageInput.js.map