@sendbird/uikit-react 3.17.12 → 3.18.1

package/cjs/chunks/{bundle-DegQ40NZ.js → bundle-BvtN3hf7.js}

@@ -1,27 +1,28 @@
 'use strict';
 
-var _tslib = require('./bundle-C5mxhXoI.js');
+var _tslib = require('./bundle-BX9JpkVP.js');
 var React = require('react');
-var utils = require('./bundle-DGCxxnjy.js');
-var LocalizationContext = require('./bundle-BiH38g8Z.js');
+var useTypingLifecycle = require('./bundle-CF9MwXWw.js');
+var utils = require('./bundle-BFC8OQzW.js');
+var LocalizationContext = require('./bundle-JZ1A5dHC.js');
+var hooks_useModal = require('../hooks/useModal.js');
 var GroupChannel_components_SuggestedMentionList = require('../GroupChannel/components/SuggestedMentionList.js');
 var Message_hooks_useDirtyGetMentions = require('../Message/hooks/useDirtyGetMentions.js');
 var ui_QuoteMessageInput = require('../ui/QuoteMessageInput.js');
 var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
 var VoiceRecorder_useVoiceRecorder = require('../VoiceRecorder/useVoiceRecorder.js');
-var ui_VoiceMessageInput = require('./bundle-DToZ2Far.js');
-var ui_Modal = require('./bundle-DDaeFQnz.js');
+var ui_VoiceMessageInput = require('./bundle-B4xSRCqX.js');
+var ui_Modal = require('./bundle-D6cLWEiK.js');
 var ui_Button = require('../ui/Button.js');
-var VoicePlayer_context = require('./bundle-SZKEK91B.js');
-var uuid = require('./bundle-DMroWEST.js');
-var useSendbird = require('./bundle-D18FtXyq.js');
-var ui_MessageInput = require('../ui/MessageInput.js');
-var MediaQueryContext = require('./bundle-Bk2QOCY1.js');
-var _const = require('./bundle-C6htG4_3.js');
-var index = require('./bundle-DbmnzR7q.js');
-var hooks_useModal = require('../hooks/useModal.js');
-require('./bundle-BbAqlLCc.js');
-var compressImages = require('./bundle-Q3QnKudh.js');
+var VoicePlayer_context = require('./bundle-BQGy4D0g.js');
+var uuid = require('./bundle-Qchcdxzl.js');
+var useSendbird = require('./bundle-CBb6rgl-.js');
+var ui_MessageInput = require('./bundle-B5T66O9D.js');
+var useDragAndDrop = require('./bundle-CD8Dp71m.js');
+var ui_MessageInput_hooks_usePaste = require('./bundle-Bzxy-3oT.js');
+var MediaQueryContext = require('./bundle-DLPt543m.js');
+var _const = require('./bundle-MaS7JhxM.js');
+var compressImages = require('./bundle-DM0hUlx4.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -145,112 +146,6 @@ var VoiceMessageInputWrapper = function (_a) {
                     } }, stringSet.BUTTON__OK))))));
 };
 
-var useHandleUploadFiles = function (_a, _b) {
-    var sendFileMessage = _a.sendFileMessage, sendMultipleFilesMessage = _a.sendMultipleFilesMessage, quoteMessage = _a.quoteMessage;
-    var logger = _b.logger;
-    var stringSet = LocalizationContext.useLocalization().stringSet;
-    var state = useSendbird.useSendbird().state;
-    var config = state.config;
-    var imageCompression = config.imageCompression;
-    var uikitUploadSizeLimit = config === null || config === void 0 ? void 0 : config.uikitUploadSizeLimit;
-    var uikitMultipleFilesMessageLimit = config === null || config === void 0 ? void 0 : config.uikitMultipleFilesMessageLimit;
-    var openModal = hooks_useModal.useGlobalModalContext().openModal;
-    return React.useCallback(function (files) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
-        var ONE_MiB, compressedFiles, sendingFiles, file, imageFiles_1, otherFiles_1;
-        return _tslib.__generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (files.length === 0) {
-                        logger.warning('Channel|useHandleUploadFiles: given file list is empty.', { files: files });
-                        return [2 /*return*/];
-                    }
-                    if (files.length > uikitMultipleFilesMessageLimit) {
-                        logger.info("Channel|useHandleUploadFiles: Cannot upload files more than ".concat(uikitMultipleFilesMessageLimit));
-                        openModal({
-                            modalProps: {
-                                titleText: stringSet.FILE_UPLOAD_NOTIFICATION__COUNT_LIMIT.replace('%d', "".concat(uikitUploadSizeLimit)),
-                                hideFooter: true,
-                            },
-                            childElement: function (_a) {
-                                var closeModal = _a.closeModal;
-                                return (React__default.default.createElement(ui_Modal.ModalFooter, { type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
-                            },
-                        });
-                        return [2 /*return*/];
-                    }
-                    // Validate file sizes
-                    if (files.some(function (file) { return file.size > uikitUploadSizeLimit; })) {
-                        // The default value of uikitUploadSizeLimit is 26MB
-                        logger.info("Channel|useHandleUploadFiles: Cannot upload file size exceeding ".concat(uikitUploadSizeLimit));
-                        ONE_MiB = 1024 * 1024;
-                        openModal({
-                            modalProps: {
-                                titleText: stringSet.FILE_UPLOAD_NOTIFICATION__SIZE_LIMIT.replace('%d', "".concat(Math.floor(uikitUploadSizeLimit / ONE_MiB))),
-                                hideFooter: true,
-                            },
-                            childElement: function (_a) {
-                                var closeModal = _a.closeModal;
-                                return (React__default.default.createElement(ui_Modal.ModalFooter, { type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
-                            },
-                        });
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, compressImages.compressImages({
-                            files: files,
-                            imageCompression: imageCompression,
-                            logger: logger,
-                        })];
-                case 1:
-                    compressedFiles = (_a.sent()).compressedFiles;
-                    sendingFiles = compressedFiles;
-                    // Send File Message
-                    if (sendingFiles.length === 1) {
-                        logger.info('Channel|useHandleUploadFiles: sending one file.');
-                        file = sendingFiles[0];
-                        return [2 /*return*/, sendFileMessage({ file: file, parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId })];
-                    }
-                    else if (sendingFiles.length > 1) {
-                        logger.info('Channel|useHandleUploadFiles: sending multiple files.');
-                        imageFiles_1 = [];
-                        otherFiles_1 = [];
-                        sendingFiles.forEach(function (file) {
-                            if (index.isImage(file.type)) {
-                                imageFiles_1.push(file);
-                            }
-                            else {
-                                otherFiles_1.push(file);
-                            }
-                        });
-                        return [2 /*return*/, otherFiles_1.reduce(function (previousPromise, item) {
-                                return previousPromise.then(function () {
-                                    return sendFileMessage({ file: item, parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId });
-                                });
-                            }, (function () {
-                                if (imageFiles_1.length === 0) {
-                                    return Promise.resolve();
-                                }
-                                else if (imageFiles_1.length === 1) {
-                                    return sendFileMessage({ file: imageFiles_1[0] });
-                                }
-                                else {
-                                    return sendMultipleFilesMessage({
-                                        fileInfoList: imageFiles_1.map(function (file) { return ({
-                                            file: file,
-                                            fileName: file.name,
-                                            fileSize: file.size,
-                                            mimeType: file.type,
-                                        }); }),
-                                        parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId,
-                                    });
-                                }
-                            })())];
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); }, [sendFileMessage, sendMultipleFilesMessage, quoteMessage]);
-};
-
 var MessageInputWrapperView = React__default.default.forwardRef(function (props, ref) {
     var _a;
     // Props
@@ -259,11 +154,13 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
     renderUserMentionItem = props.renderUserMentionItem, renderFileUploadIcon = props.renderFileUploadIcon, renderVoiceMessageIcon = props.renderVoiceMessageIcon, renderSendMessageIcon = props.renderSendMessageIcon, acceptableMimeTypes = props.acceptableMimeTypes, disabled = props.disabled;
     var stringSet = LocalizationContext.useLocalization().stringSet;
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    var openModal = hooks_useModal.useGlobalModalContext().openModal;
     var state = useSendbird.useSendbird().state;
     var stores = state.stores, config = state.config;
-    var isOnline = config.isOnline, userMention = config.userMention, logger = config.logger, groupChannel = config.groupChannel;
+    var isOnline = config.isOnline, userMention = config.userMention, logger = config.logger, groupChannel = config.groupChannel, imageCompression = config.imageCompression;
     var sdk = stores.sdkStore.sdk;
     var maxMentionCount = userMention.maxMentionCount, maxSuggestionCount = userMention.maxSuggestionCount;
+    var uikitUploadSizeLimit = config.uikitUploadSizeLimit, uikitMultipleFilesMessageLimit = config.uikitMultipleFilesMessageLimit;
     var isBroadcast = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.isBroadcast;
     var isOperator = (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.myRole) === 'operator';
     var isMultipleFilesMessageEnabled = (_a = props.isMultipleFilesMessageEnabled) !== null && _a !== void 0 ? _a : config.isMultipleFilesMessageEnabled;
@@ -292,6 +189,62 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
         && !isBroadcast;
     var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: (ref || messageInputRef) }, { logger: logger });
     var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxMentionCount;
+    // Composer staging — file picker, drag-drop, and clipboard paste all feed
+    // into pendingFiles. The submit handler drains them along with any text body.
+    var allowMultipleFiles = Boolean(isMultipleFilesMessageEnabled)
+        && Boolean(currentChannel)
+        && ui_MessageInput_hooks_usePaste.isChannelTypeSupportsMultipleFilesMessage(currentChannel);
+    var effectiveMultiLimit = allowMultipleFiles ? uikitMultipleFilesMessageLimit : 1;
+    var _j = useDragAndDrop.usePendingFiles({
+        uikitUploadSizeLimit: uikitUploadSizeLimit,
+        uikitMultipleFilesMessageLimit: effectiveMultiLimit,
+        acceptableMimeTypes: acceptableMimeTypes,
+        openModal: openModal,
+        stringSet: stringSet,
+        logger: logger,
+    }), pendingFiles = _j.pendingFiles, addFiles = _j.addFiles, removeFile = _j.removeFile, clearPendingFiles = _j.clear;
+    // Window-level drop target — files dropped anywhere in the viewport route
+    // into this channel's composer EXCEPT when the drop lands inside an open
+    // thread panel, which has its own composer. Disabled on mobile and when
+    // the input itself is not accepting new files (voice recording, channel
+    // disabled).
+    var isFileUploadEnabled = ui_MessageInput.checkIfFileUploadEnabled({ channel: currentChannel !== null && currentChannel !== void 0 ? currentChannel : undefined, config: config });
+    useDragAndDrop.useDragAndDrop({
+        onAddFiles: addFiles,
+        disabled: isMobile || isMessageInputDisabled || showVoiceMessageInput || !isFileUploadEnabled,
+        shouldAccept: function (event) {
+            var target = event.target;
+            if (!(target instanceof Element))
+                return true;
+            return !target.closest('.sendbird-thread-ui');
+        },
+    });
+    var stashedMentionedUsersRef = React.useRef(null);
+    var stashedQuoteMessageRef = React.useRef(null);
+    var prevHasPendingFilesRef = React.useRef(false);
+    var hasPendingFilesInWrapper = pendingFiles.length > 0;
+    React.useEffect(function () {
+        if (hasPendingFilesInWrapper && !prevHasPendingFilesRef.current) {
+            if (mentionedUsers.length > 0) {
+                stashedMentionedUsersRef.current = mentionedUsers;
+            }
+            if (quoteMessage) {
+                stashedQuoteMessageRef.current = quoteMessage;
+            }
+            setMentionNickname('');
+        }
+        else if (!hasPendingFilesInWrapper && prevHasPendingFilesRef.current) {
+            if (stashedMentionedUsersRef.current) {
+                setMentionedUsers(stashedMentionedUsersRef.current);
+                stashedMentionedUsersRef.current = null;
+            }
+            if (stashedQuoteMessageRef.current) {
+                setQuoteMessage(stashedQuoteMessageRef.current);
+                stashedQuoteMessageRef.current = null;
+            }
+        }
+        prevHasPendingFilesRef.current = hasPendingFilesInWrapper;
+    }, [hasPendingFilesInWrapper]);
     // Operate states
     React.useEffect(function () {
         setMentionNickname('');
@@ -301,7 +254,11 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
         setMentionSuggestedUsers([]);
         setMessageInputEvent(null);
         setShowVoiceMessageInput(false);
+        clearPendingFiles();
+        stashedMentionedUsersRef.current = null;
+        stashedQuoteMessageRef.current = null;
     }, [currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url]);
+    var _k = useTypingLifecycle.useTypingLifecycle(currentChannel), startTyping = _k.startTyping, stopTyping = _k.stopTyping;
     React.useEffect(function () {
         setMentionedUsers(mentionedUsers.filter(function (_a) {
             var userId = _a.userId;
@@ -315,12 +272,145 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
             }
         }));
     }, [mentionedUserIds]);
-    // Callbacks
-    var handleUploadFiles = useHandleUploadFiles({
-        sendFileMessage: sendFileMessage,
-        sendMultipleFilesMessage: sendMultipleFilesMessage,
-        quoteMessage: quoteMessage !== null && quoteMessage !== void 0 ? quoteMessage : undefined,
-    }, { logger: logger });
+    var isSubmittingFilesRef = React.useRef(false);
+    // Submit handler: drains pendingFiles XOR text body. Files and body do not
+    // coexist in a single send anymore — when files are present, text from the
+    // composer is suppressed at the UI level (textarea locked) and again here
+    // for defense in depth. The caption read path remains in MessageBody to
+    // render historical file messages that still carry a body.
+    var handleSubmit = React.useCallback(function (_a) { return _tslib.__awaiter(void 0, [_a], void 0, function (_b) {
+        var trimmed, parentMessageId, rawImageFiles, otherFiles, compressedImageFiles_1, tasks_1, useMFMBatch, file_1;
+        var message = _b.message, mentionTemplate = _b.mentionTemplate, files = _b.files;
+        return _tslib.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    trimmed = message.trim();
+                    parentMessageId = quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId;
+                    if (files.length === 0) {
+                        if (trimmed.length === 0)
+                            return [2 /*return*/];
+                        sendUserMessage({
+                            message: message,
+                            mentionedUsers: mentionedUsers,
+                            mentionedMessageTemplate: mentionTemplate,
+                            parentMessageId: parentMessageId,
+                        });
+                        setMentionNickname('');
+                        setMentionedUsers([]);
+                        setQuoteMessage(null);
+                        stopTyping();
+                        return [2 /*return*/];
+                    }
+                    if (isSubmittingFilesRef.current)
+                        return [2 /*return*/];
+                    isSubmittingFilesRef.current = true;
+                    // Clear pending state and other composer state immediately so a rapid
+                    // second send (within the compression window) finds an empty queue and
+                    // bails out at MessageInput's sendMessage gate.
+                    setMentionNickname('');
+                    setMentionedUsers([]);
+                    setQuoteMessage(null);
+                    stashedQuoteMessageRef.current = null;
+                    stopTyping();
+                    clearPendingFiles();
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, , 3, 4]);
+                    rawImageFiles = files.filter(function (entry) { return entry.isImage; }).map(function (entry) { return entry.file; });
+                    otherFiles = files.filter(function (entry) { return !entry.isImage; }).map(function (entry) { return entry.file; });
+                    return [4 /*yield*/, compressImages.compressImages({
+                            files: rawImageFiles,
+                            imageCompression: imageCompression,
+                            logger: logger,
+                        })];
+                case 2:
+                    compressedImageFiles_1 = (_c.sent()).compressedFiles;
+                    tasks_1 = [];
+                    useMFMBatch = isMultipleFilesMessageEnabled && compressedImageFiles_1.length > 1;
+                    if (useMFMBatch) {
+                        tasks_1.push(function () { return sendMultipleFilesMessage({
+                            fileInfoList: compressedImageFiles_1.map(function (file) { return ({
+                                file: file,
+                                fileName: file.name,
+                                fileSize: file.size,
+                                mimeType: file.type,
+                            }); }),
+                            parentMessageId: parentMessageId,
+                        }); });
+                    }
+                    else if (compressedImageFiles_1.length === 1) {
+                        file_1 = compressedImageFiles_1[0];
+                        tasks_1.push(function () { return sendFileMessage({
+                            file: file_1,
+                            parentMessageId: parentMessageId,
+                        }); });
+                    }
+                    else if (compressedImageFiles_1.length > 1) {
+                        compressedImageFiles_1.forEach(function (file) {
+                            tasks_1.push(function () { return sendFileMessage({
+                                file: file,
+                                parentMessageId: parentMessageId,
+                            }); });
+                        });
+                    }
+                    otherFiles.forEach(function (file) {
+                        tasks_1.push(function () { return sendFileMessage({
+                            file: file,
+                            parentMessageId: parentMessageId,
+                        }); });
+                    });
+                    // Sequential dispatch with per-task error isolation: one failure must not
+                    // break the rest of the batch. Fire-and-forget so UI cleanup runs now.
+                    (function () { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+                        var _i, tasks_2, task, error_1;
+                        var _a;
+                        return _tslib.__generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    _i = 0, tasks_2 = tasks_1;
+                                    _b.label = 1;
+                                case 1:
+                                    if (!(_i < tasks_2.length)) return [3 /*break*/, 6];
+                                    task = tasks_2[_i];
+                                    _b.label = 2;
+                                case 2:
+                                    _b.trys.push([2, 4, , 5]);
+                                    return [4 /*yield*/, task()];
+                                case 3:
+                                    _b.sent();
+                                    return [3 /*break*/, 5];
+                                case 4:
+                                    error_1 = _b.sent();
+                                    (_a = logger.warning) === null || _a === void 0 ? void 0 : _a.call(logger, 'GroupChannel|composer: file send failed', error_1);
+                                    return [3 /*break*/, 5];
+                                case 5:
+                                    _i++;
+                                    return [3 /*break*/, 1];
+                                case 6: return [2 /*return*/];
+                            }
+                        });
+                    }); })();
+                    return [3 /*break*/, 4];
+                case 3:
+                    isSubmittingFilesRef.current = false;
+                    return [7 /*endfinally*/];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [
+        sendUserMessage,
+        sendFileMessage,
+        sendMultipleFilesMessage,
+        mentionedUsers,
+        quoteMessage,
+        setQuoteMessage,
+        currentChannel,
+        stopTyping,
+        clearPendingFiles,
+        isMultipleFilesMessageEnabled,
+        imageCompression,
+        logger,
+    ]);
     if (isBroadcast && !isOperator) {
         /* Only `Operator` can send messages in the Broadcast channel */
         return null;
@@ -342,6 +432,7 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
         quoteMessage && (React__default.default.createElement("div", { className: "sendbird-message-input-wrapper__quote-message-input" },
             React__default.default.createElement(ui_QuoteMessageInput, { replyingMessage: quoteMessage, onClose: function () {
                     setQuoteMessage(null);
+                    stashedQuoteMessageRef.current = null;
                 } }))),
         showVoiceMessageInput ? (React__default.default.createElement(VoiceMessageInputWrapper, { channel: currentChannel !== null && currentChannel !== void 0 ? currentChannel : undefined, onSubmitClick: function (recordedFile, duration) {
                 sendVoiceMessage({ file: recordedFile, parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId }, duration);
@@ -349,7 +440,7 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
                 setShowVoiceMessageInput(false);
             }, onCancelClick: function () {
                 setShowVoiceMessageInput(false);
-            } })) : (React__default.default.createElement(ui_MessageInput, { className: "sendbird-message-input-wrapper__message-input", channel: currentChannel, channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, isMobile: isMobile, acceptableMimeTypes: acceptableMimeTypes, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled, isSelectingMultipleFilesEnabled: isMultipleFilesMessageEnabled, onVoiceMessageIconClick: function () {
+            } })) : (React__default.default.createElement(ui_MessageInput.MessageInput, { className: "sendbird-message-input-wrapper__message-input", channel: currentChannel, channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url, isMobile: isMobile, acceptableMimeTypes: acceptableMimeTypes, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled, isSelectingMultipleFilesEnabled: isMultipleFilesMessageEnabled, onVoiceMessageIconClick: function () {
                 setShowVoiceMessageInput(true);
             }, setMentionedUsers: setMentionedUsers, placeholder: (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)
                 || (utils.isDisabledBecauseFrozen(currentChannel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__FROZEN)
@@ -362,25 +453,7 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
                 || (utils.isDisabledBecauseMessageForm(messages, config.groupChannel.enableFormTypeMessage)
                     && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MESSAGE_FORM)
                 || (disabled && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
-                || undefined, ref: (ref || messageInputRef), disabled: isMessageInputDisabled, renderFileUploadIcon: renderFileUploadIcon, renderSendMessageIcon: renderSendMessageIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, onStartTyping: function () {
-                currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.startTyping();
-            }, onSendMessage: function (_a) {
-                var _b;
-                var message = _a.message, mentionTemplate = _a.mentionTemplate;
-                sendUserMessage({
-                    message: message,
-                    mentionedUsers: mentionedUsers,
-                    mentionedMessageTemplate: mentionTemplate,
-                    parentMessageId: quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.messageId,
-                });
-                setMentionNickname('');
-                setMentionedUsers([]);
-                setQuoteMessage(null);
-                (_b = currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.endTyping) === null || _b === void 0 ? void 0 : _b.call(currentChannel);
-            }, onFileUpload: function (fileList) {
-                handleUploadFiles(fileList);
-                setQuoteMessage(null);
-            }, onUserMentioned: function (user) {
+                || undefined, ref: (ref || messageInputRef), disabled: isMessageInputDisabled, renderFileUploadIcon: renderFileUploadIcon, renderSendMessageIcon: renderSendMessageIcon, renderVoiceMessageIcon: renderVoiceMessageIcon, onStartTyping: startTyping, onStopTyping: stopTyping, pendingFiles: pendingFiles, onAddFiles: addFiles, onRemoveFile: removeFile, onSubmit: handleSubmit, 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('');
@@ -404,4 +477,4 @@ var MessageInputWrapperView = React__default.default.forwardRef(function (props,
 
 exports.MessageInputWrapperView = MessageInputWrapperView;
 exports.VoiceMessageInputWrapper = VoiceMessageInputWrapper;
-//# sourceMappingURL=bundle-DegQ40NZ.js.map
+//# sourceMappingURL=bundle-BvtN3hf7.js.map

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

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

package/cjs/chunks/{bundle-Bfgn3ngi.js → bundle-Bz064A5D.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var _tslib = require('./bundle-C5mxhXoI.js');
+var _tslib = require('./bundle-BX9JpkVP.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var utils = require('./bundle-DVTKYwk8.js');
+var utils = require('./bundle-DoUok50d.js');
 var SendbirdChat = require('@sendbird/chat');
 var openChannel = require('@sendbird/chat/openChannel');
 var ui_SortByRow = require('../ui/SortByRow.js');
-var ui_Label = require('./bundle-BbAqlLCc.js');
+var ui_Label = require('./bundle-CSUhrMB1.js');
 require('../ui/IconButton.js');
-require('./bundle-DbmnzR7q.js');
-require('./bundle-BiH38g8Z.js');
-require('./bundle-Ct1kTyi8.js');
+require('./bundle-BasmAwwJ.js');
+require('./bundle-JZ1A5dHC.js');
+require('./bundle-DG9KyMWt.js');
 require('@sendbird/chat/groupChannel');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -239,9 +239,7 @@ var EmojiListItems$1 = function (_a) {
         var portalRect = ((_a = portalElement === null || portalElement === void 0 ? void 0 : portalElement.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(portalElement)) || {
             top: 0,
             left: 0,
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
+            width: window.innerWidth};
         var parentRect = (_c = (_b = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : defaultParentRect;
         var x = ((parentRect === null || parentRect === void 0 ? void 0 : parentRect.x) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.left) || 0) - portalRect.left;
         var y = ((parentRect === null || parentRect === void 0 ? void 0 : parentRect.y) || (parentRect === null || parentRect === void 0 ? void 0 : parentRect.top) || 0) - portalRect.top;
@@ -362,4 +360,4 @@ exports.MuteMenuItem = MuteMenuItem;
 exports.OperatorMenuItem = OperatorMenuItem;
 exports.getObservingId = getObservingId;
 exports.useMessageMenuContext = useMessageMenuContext;
-//# sourceMappingURL=bundle-Bfgn3ngi.js.map
+//# sourceMappingURL=bundle-Bz064A5D.js.map

package/cjs/chunks/{bundle-Bfgn3ngi.js.map → bundle-Bz064A5D.js.map}

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

package/cjs/chunks/{bundle-0TJHf4Tc.js → bundle-Bzxy-3oT.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var DOMPurify = require('dompurify');
-var _const = require('./bundle-C6htG4_3.js');
-var _const$1 = require('./bundle-Zv_4ZO0n.js');
-var _tslib = require('./bundle-C5mxhXoI.js');
-var consts = require('./bundle-BZ9pC_BG.js');
-var consts$2 = require('./bundle-DQMqz2XT.js');
-var consts$1 = require('./bundle-CPKCY1PR.js');
+var _const = require('./bundle-MaS7JhxM.js');
+var _const$1 = require('./bundle-CN82E46K.js');
+var _tslib = require('./bundle-BX9JpkVP.js');
+var consts = require('./bundle-CuQNzWcL.js');
+var consts$2 = require('./bundle-DSt8v0lq.js');
+var consts$1 = require('./bundle-Cnkvqs6V.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -63,13 +63,16 @@ function extractTextAndMentions(childNodes) {
     var messageText = '';
     var mentionTemplate = '';
     var isMentionedMessage = false;
+    var mentionedUserIds = [];
     childNodes.forEach(function (node) {
         var _a, _b;
         if (isHTMLElement(node) && node.nodeName === _const.NodeNames.Span) {
             var innerText = node.innerText, _c = node.dataset, dataset = _c === void 0 ? {} : _c;
             var _d = dataset.userid, userid = _d === void 0 ? '' : _d;
-            if (userid)
+            if (userid) {
                 isMentionedMessage = true;
+                mentionedUserIds.push(userid);
+            }
             messageText += stripZeroWidthSpace(innerText);
             mentionTemplate += "".concat(_const$1.USER_MENTION_TEMP_CHAR, "{").concat(userid, "}");
         }
@@ -88,7 +91,7 @@ function extractTextAndMentions(childNodes) {
             mentionTemplate += textContent;
         }
     });
-    return { messageText: messageText, mentionTemplate: mentionTemplate, isMentionedMessage: isMentionedMessage };
+    return { messageText: messageText, mentionTemplate: mentionTemplate, isMentionedMessage: isMentionedMessage, mentionedUserIds: mentionedUserIds };
 }
 
 function insertTemplateToDOM(templateList) {
@@ -207,8 +210,17 @@ function createPasteNodeWithContent(html) {
 }
 // usePaste Hook
 function usePaste(_a) {
-    var ref = _a.ref, setIsInput = _a.setIsInput, channel = _a.channel, setMentionedUsers = _a.setMentionedUsers;
+    var ref = _a.ref, setIsInput = _a.setIsInput, channel = _a.channel, setMentionedUsers = _a.setMentionedUsers, onAddFiles = _a.onAddFiles;
     return React.useCallback(function (e) {
+        // 0. File paste (e.g. screenshot copy): route to composer and skip text branch.
+        if (onAddFiles) {
+            var clipboardFiles = extractClipboardFiles(e);
+            if (clipboardFiles.length > 0) {
+                e.preventDefault();
+                onAddFiles(clipboardFiles);
+                return;
+            }
+        }
         e.preventDefault();
         var html = e.clipboardData.getData('text/html');
         var text = e.clipboardData.getData('text') || getURIListText(e);
@@ -237,7 +249,32 @@ function usePaste(_a) {
         insertTemplateToDOM(words); // Insert mentions and content into the DOM
         pasteNode.remove();
         setIsInput(true);
-    }, [ref, setIsInput, channel, setMentionedUsers]);
+    }, [ref, setIsInput, channel, setMentionedUsers, onAddFiles]);
+}
+/**
+ * Pull File entries out of a clipboard event, robust across browsers.
+ * Safari can leave clipboardData.files empty while populating items.
+ */
+function extractClipboardFiles(e) {
+    var _a, _b;
+    var files = [];
+    var items = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items;
+    if (items) {
+        for (var i = 0; i < items.length; i += 1) {
+            var item = items[i];
+            if (item.kind === 'file') {
+                var file = item.getAsFile();
+                if (file)
+                    files.push(file);
+            }
+        }
+    }
+    if (files.length === 0 && ((_b = e.clipboardData) === null || _b === void 0 ? void 0 : _b.files)) {
+        for (var i = 0; i < e.clipboardData.files.length; i += 1) {
+            files.push(e.clipboardData.files[i]);
+        }
+    }
+    return files;
 }
 // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#dragging_links
 function getURIListText(e) {
@@ -262,4 +299,4 @@ exports.renderToString = renderToString;
 exports.sanitizeString = sanitizeString;
 exports.stripZeroWidthSpace = stripZeroWidthSpace;
 exports.usePaste = usePaste;
-//# sourceMappingURL=bundle-0TJHf4Tc.js.map
+//# sourceMappingURL=bundle-Bzxy-3oT.js.map

package/cjs/chunks/bundle-Bzxy-3oT.js.map

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

package/cjs/chunks/{bundle-DGqQ89Av.js → bundle-C0B4eQSh.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-CtVNyiwe.js');
+var index = require('./bundle-Dmbgwti3.js');
 
 var EmojiManager = /** @class */ (function () {
     function EmojiManager(props) {
@@ -149,4 +149,4 @@ var mapColorKeys = function (colorSet) {
 
 exports.EmojiManager = EmojiManager;
 exports.mapColorKeys = mapColorKeys;
-//# sourceMappingURL=bundle-DGqQ89Av.js.map
+//# sourceMappingURL=bundle-C0B4eQSh.js.map

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

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

package/cjs/chunks/{bundle-sjZXn5rb.js → bundle-C8FqXV_7.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./bundle-BnRVJSVA.js');
-var index$1 = require('./bundle-DmDbvIgG.js');
+var index = require('./bundle-BtfCkBUa.js');
+var index$1 = require('./bundle-CILoXVWP.js');
 
 /**
  * @name isDate
@@ -372,8 +372,6 @@ var formatters$1 = {
 };
 
 var dayPeriodEnum = {
-  am: 'am',
-  pm: 'pm',
   midnight: 'midnight',
   noon: 'noon',
   morning: 'morning',
@@ -1647,4 +1645,4 @@ function cleanEscapedString(input) {
 
 exports.format = format;
 exports.toInteger = toInteger;
-//# sourceMappingURL=bundle-sjZXn5rb.js.map
+//# sourceMappingURL=bundle-C8FqXV_7.js.map