@sendbird/uikit-react 3.8.0 → 3.8.1

package/chunks/{bundle-3mdR5HDw.js → bundle-ZZuBYhV1.js}

@@ -1,4 +1,4 @@
-import { r as requiredArgs, t as toDate } from './bundle-h3JIYRTG.js';
+import { r as requiredArgs, t as toDate } from './bundle-LPkaaUo4.js';
 
 /**
  * @name startOfDay
@@ -63,4 +63,4 @@ function isSameDay(dirtyDateLeft, dirtyDateRight) {
 }
 
 export { isSameDay as i };
-//# sourceMappingURL=bundle-3mdR5HDw.js.map
+//# sourceMappingURL=bundle-ZZuBYhV1.js.map

package/chunks/{bundle-3mdR5HDw.js.map → bundle-ZZuBYhV1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-3mdR5HDw.js","sources":["../../node_modules/date-fns/esm/startOfDay/index.js","../../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\n\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\n\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":[],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;","x_google_ignoreList":[0,1]}
+{"version":3,"file":"bundle-ZZuBYhV1.js","sources":["../../node_modules/date-fns/esm/startOfDay/index.js","../../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\n\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\n\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":[],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;","x_google_ignoreList":[0,1]}

package/chunks/bundle-_2iSz8ke.js

@@ -0,0 +1,353 @@
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { u as useLocalization } from './bundle-GqUhOzeC.js';
+import { useVoicePlayer } from '../VoicePlayer/useVoicePlayer.js';
+import { useVoiceRecorder, VoiceRecorderStatus } from '../VoiceRecorder/useVoiceRecorder.js';
+import { i as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from './bundle-fQ2M7pMu.js';
+import { V as VoiceMessageInputStatus, a as VoiceMessageInput } from './bundle-J7RD0FpU.js';
+import { M as Modal, c as ModalFooter } from './bundle-gYyMZyCn.js';
+import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
+import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
+import { e as VOICE_RECORDER_DEFAULT_MIN } from './bundle-UjngV2Kp.js';
+import { V as VOICE_PLAYER_STATUS } from './bundle-kBtT3HBi.js';
+import { u as uuidv4 } from './bundle-iPDlyZXo.js';
+import { c as __awaiter, d as __generator } from './bundle-AVOWwEQ4.js';
+import { f as isImage } from './bundle-OoXqnc0l.js';
+import { useGlobalModalContext } from '../hooks/useModal.js';
+import './bundle-lDOyfwhb.js';
+import { p as pxToNumber } from './bundle-x3udz03j.js';
+
+var VoiceMessageInputWrapper = function (_a) {
+    var _b;
+    var channel = _a.channel, onCancelClick = _a.onCancelClick, onSubmitClick = _a.onSubmitClick;
+    var uuid = useRef(uuidv4()).current;
+    var _c = useState(null), audioFile = _c[0], setAudioFile = _c[1];
+    var _d = useState(VoiceMessageInputStatus.READY_TO_RECORD), voiceInputState = _d[0], setVoiceInputState = _d[1];
+    var _e = useState(false), isSubmitted = _e[0], setSubmit = _e[1];
+    var _f = useState(false), isDisabled = _f[0], setDisabled = _f[1];
+    var _g = useState(false), showModal = _g[0], setShowModal = _g[1];
+    var stringSet = useLocalization().stringSet;
+    var config = useSendbirdStateContext().config;
+    var minRecordingTime = ((_b = config === null || config === void 0 ? void 0 : config.voiceRecord) === null || _b === void 0 ? void 0 : _b.minRecordingTime) || VOICE_RECORDER_DEFAULT_MIN;
+    var _h = useVoiceRecorder({
+        onRecordingStarted: function () {
+            setVoiceInputState(VoiceMessageInputStatus.RECORDING);
+        },
+        onRecordingEnded: function (audioFile) {
+            setAudioFile(audioFile);
+        },
+    }), start = _h.start, stop = _h.stop, cancel = _h.cancel, recordingTime = _h.recordingTime, recordingStatus = _h.recordingStatus, recordingLimit = _h.recordingLimit;
+    var voicePlayer = useVoicePlayer({
+        channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
+        key: uuid,
+        audioFile: audioFile,
+    });
+    var play = voicePlayer.play, pause = voicePlayer.pause, playbackTime = voicePlayer.playbackTime, playingStatus = voicePlayer.playingStatus;
+    var stopVoicePlayer = voicePlayer.stop;
+    // disabled state: muted & frozen
+    useEffect(function () {
+        if (isDisabledBecauseFrozen(channel) || isDisabledBecauseMuted(channel)) {
+            setDisabled(true);
+        }
+        else {
+            setDisabled(false);
+        }
+    }, [channel === null || channel === void 0 ? void 0 : channel.myRole, channel === null || channel === void 0 ? void 0 : channel.isFrozen, channel === null || channel === void 0 ? void 0 : channel.myMutedState]);
+    // call onSubmitClick when submit button is clicked and recorded audio file is created
+    useEffect(function () {
+        if (isSubmitted && audioFile) {
+            onSubmitClick(audioFile, recordingTime);
+            setSubmit(false);
+            setAudioFile(null);
+        }
+    }, [isSubmitted, audioFile, recordingTime]);
+    // operate which control button should be displayed
+    useEffect(function () {
+        if (audioFile) {
+            if (recordingTime < minRecordingTime) {
+                setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                setAudioFile(null);
+            }
+            else if (playingStatus === VOICE_PLAYER_STATUS.PLAYING) {
+                setVoiceInputState(VoiceMessageInputStatus.PLAYING);
+            }
+            else {
+                setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY);
+            }
+        }
+    }, [audioFile, recordingTime, playingStatus]);
+    return (React__default.createElement("div", { className: "sendbird-voice-message-input-wrapper" },
+        React__default.createElement(VoiceMessageInput, { currentValue: recordingStatus === VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime, maximumValue: recordingStatus === VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit, currentType: voiceInputState, onCancelClick: function () {
+                onCancelClick();
+                cancel();
+                stopVoicePlayer();
+            }, onSubmitClick: function () {
+                if (isDisabled) {
+                    setShowModal(true);
+                    setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                }
+                else {
+                    stop();
+                    pause();
+                    setSubmit(true);
+                }
+            }, onControlClick: function (type) {
+                switch (type) {
+                    case VoiceMessageInputStatus.READY_TO_RECORD: {
+                        stopVoicePlayer();
+                        start();
+                        break;
+                    }
+                    case VoiceMessageInputStatus.RECORDING: {
+                        if (recordingTime >= minRecordingTime && !isDisabled) {
+                            stop();
+                        }
+                        else if (isDisabled) {
+                            cancel();
+                            setShowModal(true);
+                            setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        else {
+                            cancel();
+                            setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        break;
+                    }
+                    case VoiceMessageInputStatus.READY_TO_PLAY: {
+                        play();
+                        break;
+                    }
+                    case VoiceMessageInputStatus.PLAYING: {
+                        pause();
+                        break;
+                    }
+                }
+            } }),
+        showModal && (React__default.createElement(Modal, { className: "sendbird-voice-message-input-wrapper-alert", titleText: isDisabledBecauseMuted(channel)
+                ? stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED
+                : stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN, hideFooter: true, isCloseOnClickOutside: true, onCancel: function () {
+                setShowModal(false);
+                onCancelClick();
+            } },
+            React__default.createElement("div", { className: "sendbird-voice-message-input-wrapper-alert__body" },
+                React__default.createElement(Button, { className: "sendbird-voice-message-input-wrapper-alert__body__ok-button", type: ButtonTypes.PRIMARY, size: ButtonSizes.BIG, onClick: function () {
+                        setShowModal(false);
+                        onCancelClick();
+                    } }, stringSet.BUTTON__OK))))));
+};
+
+var compressImage = function (_a) {
+    var imageFile = _a.imageFile, compressionRate = _a.compressionRate, resizingWidth = _a.resizingWidth, resizingHeight = _a.resizingHeight;
+    var image = document.createElement('img');
+    return new Promise(function (resolve, reject) {
+        image.src = URL.createObjectURL(imageFile);
+        image.onerror = reject;
+        image.onload = function () {
+            URL.revokeObjectURL(image.src);
+            var canvas = document.createElement('canvas');
+            var originWidth = image.width;
+            var originHeight = image.height;
+            var widthRatio = originWidth / (resizingWidth || originWidth);
+            var heightRatio = originHeight / (resizingHeight || originHeight);
+            var targetResizingWidth = resizingWidth || originWidth;
+            var targetResizingHeight = resizingHeight || originHeight;
+            // Use the more impactful value, so the original images' ratio won't be broken
+            if (widthRatio > heightRatio) {
+                targetResizingHeight = originHeight / (resizingWidth ? widthRatio : 1);
+            }
+            else if (heightRatio > widthRatio) {
+                targetResizingWidth = originWidth / (resizingHeight ? heightRatio : 1);
+            }
+            canvas.width = targetResizingWidth;
+            canvas.height = targetResizingHeight;
+            var ctx = canvas.getContext('2d');
+            if (!ctx) {
+                reject(new Error('Failed to get canvas 2d context'));
+                return;
+            }
+            ctx.drawImage(image, 0, 0, targetResizingWidth, targetResizingHeight);
+            ctx.canvas.toBlob(function (blob) {
+                if (blob) {
+                    var file = new File([blob], imageFile.name, { type: imageFile.type });
+                    resolve(file);
+                }
+                else {
+                    reject(new Error('Failed to compress image'));
+                }
+            }, imageFile.type, compressionRate);
+        };
+    });
+};
+var compressImages = function (_a) {
+    var files = _a.files, logger = _a.logger, imageCompression = _a.imageCompression;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var compressionRate, resizingWidth, resizingHeight, result;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    compressionRate = imageCompression.compressionRate;
+                    resizingWidth = pxToNumber(imageCompression.resizingWidth);
+                    resizingHeight = pxToNumber(imageCompression.resizingHeight);
+                    result = {
+                        failedIndexes: [],
+                        compressedFiles: [],
+                    };
+                    if (!(Array.isArray(files) && files.length > 0)) {
+                        logger.warning('utils - compressImages: There are no files.', files);
+                        return [2 /*return*/, result];
+                    }
+                    if (compressionRate < 0 || 1 < compressionRate) {
+                        logger.warning('utils - compressImages: The compressionRate is not acceptable.', compressionRate);
+                        return [2 /*return*/, result];
+                    }
+                    return [4 /*yield*/, Promise.all(files
+                            .map(function (file, index) { return __awaiter(void 0, void 0, void 0, function () {
+                            var compressedImage, err_1;
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!(file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg')) {
+                                            logger.warning('utils - compressImages: The fileType is not compressible.', { file: file, index: index });
+                                            result.failedIndexes.push(index);
+                                            result.compressedFiles.push(file);
+                                            return [2 /*return*/];
+                                        }
+                                        _a.label = 1;
+                                    case 1:
+                                        _a.trys.push([1, 3, , 4]);
+                                        return [4 /*yield*/, compressImage({
+                                                imageFile: file,
+                                                compressionRate: compressionRate,
+                                                resizingWidth: resizingWidth,
+                                                resizingHeight: resizingHeight,
+                                            })];
+                                    case 2:
+                                        compressedImage = _a.sent();
+                                        result.compressedFiles.push(compressedImage);
+                                        return [3 /*break*/, 4];
+                                    case 3:
+                                        err_1 = _a.sent();
+                                        result.failedIndexes.push(index);
+                                        logger.warning('utils - compressImages: Failed to compress image file', { err: err_1 });
+                                        return [3 /*break*/, 4];
+                                    case 4: return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 1:
+                    _b.sent();
+                    logger.info('utils - compressImages: Finished compressing images', result);
+                    return [2 /*return*/, result];
+            }
+        });
+    });
+};
+
+var useHandleUploadFiles = function (_a, _b) {
+    var sendFileMessage = _a.sendFileMessage, sendMultipleFilesMessage = _a.sendMultipleFilesMessage, quoteMessage = _a.quoteMessage;
+    var logger = _b.logger;
+    var stringSet = useLocalization().stringSet;
+    var config = useSendbirdStateContext().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 = useGlobalModalContext().openModal;
+    var handleUploadFiles = useCallback(function (files) { return __awaiter(void 0, void 0, void 0, function () {
+        var ONE_MiB, compressedFiles, sendingFiles, file, imageFiles_1, otherFiles_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // Validate Parameters
+                    if (!sendFileMessage || !sendMultipleFilesMessage) {
+                        logger.warning('Channel|useHandleUploadFiles: required functions are undefined', { sendFileMessage: sendFileMessage, sendMultipleFilesMessage: sendMultipleFilesMessage });
+                        return [2 /*return*/];
+                    }
+                    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: "Up to ".concat(uikitMultipleFilesMessageLimit, " files can be attached."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React__default.createElement(ModalFooter, { type: 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: "The maximum size per file is ".concat(Math.floor(uikitUploadSizeLimit / ONE_MiB), " MB."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React__default.createElement(ModalFooter, { type: ButtonTypes.PRIMARY, submitText: stringSet.BUTTON__OK, hideCancelButton: true, onCancel: closeModal, onSubmit: closeModal }));
+                            },
+                        });
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, 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];
+                        sendFileMessage(file, quoteMessage);
+                    }
+                    else if (sendingFiles.length > 1) {
+                        logger.info('Channel|useHandleUploadFiles: sending multiple files.');
+                        imageFiles_1 = [];
+                        otherFiles_1 = [];
+                        sendingFiles.forEach(function (file) {
+                            if (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(item, quoteMessage);
+                                });
+                            }, (function () {
+                                if (imageFiles_1.length === 0) {
+                                    return Promise.resolve();
+                                }
+                                else if (imageFiles_1.length === 1) {
+                                    return sendFileMessage(imageFiles_1[0], quoteMessage);
+                                }
+                                else {
+                                    return sendMultipleFilesMessage(imageFiles_1, quoteMessage);
+                                }
+                            })())];
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [
+        sendFileMessage,
+        sendMultipleFilesMessage,
+        quoteMessage,
+    ]);
+    return handleUploadFiles;
+};
+
+export { VoiceMessageInputWrapper as V, useHandleUploadFiles as u };
+//# sourceMappingURL=bundle-_2iSz8ke.js.map

package/{cjs/chunks/bundle-kBUglm2K.js.map → chunks/bundle-_2iSz8ke.js.map}

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

package/chunks/{bundle-khKXutc3.js → bundle-_nlJSeuz.js}

@@ -1,4 +1,4 @@
 var OG_MESSAGE_BODY_CLASSNAME = 'sendbird-og-message-item-body__text-bubble';
 
 export { OG_MESSAGE_BODY_CLASSNAME as O };
-//# sourceMappingURL=bundle-khKXutc3.js.map
+//# sourceMappingURL=bundle-_nlJSeuz.js.map

package/chunks/bundle-_nlJSeuz.js.map

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

package/chunks/{bundle-ZmvX8uZ5.js → bundle-fQ2M7pMu.js}

@@ -1,6 +1,6 @@
-import { a as __spreadArray } from './bundle-hKtwSqbO.js';
-import { f as format } from './bundle-h3JIYRTG.js';
-import { a as isReadMessage } from './bundle-EHReigfD.js';
+import { a as __spreadArray } from './bundle-AVOWwEQ4.js';
+import { f as format } from './bundle-LPkaaUo4.js';
+import { a as isReadMessage } from './bundle-OoXqnc0l.js';
 import { SendingStatus } from '@sendbird/chat/message';
 
 var scrollToRenderedMessage = function (scrollRef, initialTimeStamp, setIsScrolled) {
@@ -143,21 +143,9 @@ var passUnsuccessfullMessages = function (allMessages, newMessage) {
     }
     return __spreadArray(__spreadArray([], allMessages, true), [newMessage], false);
 };
-var pxToNumber = function (px) {
-    if (typeof px === 'number') {
-        return px;
-    }
-    if (typeof px === 'string') {
-        var parsed = Number.parseFloat(px);
-        if (!Number.isNaN(parsed)) {
-            return parsed;
-        }
-    }
-    return null;
-};
 var isAboutSame = function (a, b, px) {
     return Math.abs(a - b) <= px;
 };
 
-export { scrollToRenderedMessage as a, isDisabledBecauseMuted as b, isOperator as c, isSameGroup as d, isAboutSame as e, pxToNumber as f, getAllEmojisMapFromEmojiContainer as g, getNicknamesMapFromMembers as h, isDisabledBecauseFrozen as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
-//# sourceMappingURL=bundle-ZmvX8uZ5.js.map
+export { scrollToRenderedMessage as a, isDisabledBecauseMuted as b, isOperator as c, isSameGroup as d, isAboutSame as e, getNicknamesMapFromMembers as f, getAllEmojisMapFromEmojiContainer as g, isDisabledBecauseFrozen as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
+//# sourceMappingURL=bundle-fQ2M7pMu.js.map

package/chunks/bundle-fQ2M7pMu.js.map

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

package/chunks/{bundle-ANPmLOz8.js → bundle-fbmUkwMs.js}

@@ -2,9 +2,9 @@ import React__default, { useState, useMemo, useEffect } from 'react';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
 import { SendingStatus } from '@sendbird/chat/message';
 import ImageRenderer, { getBorderRadiusForMultipleImageRenderer } from '../ui/ImageRenderer.js';
-import { d as getClassName, B as isGif, b as isMultipleFilesMessage } from './bundle-EHReigfD.js';
-import { F as FileViewer } from './bundle-w9T6A0ez.js';
-import { K } from './bundle-9KsbryQI.js';
+import { n as getClassName, s as isGif, b as isMultipleFilesMessage } from './bundle-OoXqnc0l.js';
+import { F as FileViewer } from './bundle-KaSW5xxP.js';
+import { K } from './bundle-0BwB1B7t.js';
 
 function ImageGrid(_a) {
     var _b;
@@ -170,4 +170,4 @@ var useStatefulFileInfoList = function (message) {
 };
 
 export { MultipleFilesMessageItemBody as M, ThreadMessageKind as T, useStatefulFileInfoList as a, useThreadMessageKindKeySelector as u };
-//# sourceMappingURL=bundle-ANPmLOz8.js.map
+//# sourceMappingURL=bundle-fbmUkwMs.js.map

package/chunks/{bundle-ANPmLOz8.js.map → bundle-fbmUkwMs.js.map}

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

package/chunks/{bundle-rLxuFUa1.js → bundle-gYyMZyCn.js}

@@ -1,12 +1,12 @@
 import React__default, { useContext } from 'react';
 import { createPortal } from 'react-dom';
-import { n as noop } from './bundle-v9a1_z0P.js';
-import { L as LocalizationContext } from './bundle-v0OWADVv.js';
-import { u as useMediaQueryContext } from './bundle-x-4ukZm_.js';
+import { n as noop } from './bundle-FQAabli1.js';
+import { L as LocalizationContext } from './bundle-GqUhOzeC.js';
+import { u as useMediaQueryContext } from './bundle-QKq7b-WA.js';
 import IconButton from '../ui/IconButton.js';
 import Button, { ButtonTypes } from '../ui/Button.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-wMgBBDf9.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-lDOyfwhb.js';
 
 // simple component to be used as modal root
 var MODAL_ROOT = 'sendbird-modal-root';
@@ -59,4 +59,4 @@ function Modal(props) {
 }
 
 export { Modal as M, MODAL_ROOT as a, ModalRoot as b, ModalFooter as c, ModalHeader as d, ModalBody as e };
-//# sourceMappingURL=bundle-rLxuFUa1.js.map
+//# sourceMappingURL=bundle-gYyMZyCn.js.map

package/chunks/bundle-gYyMZyCn.js.map

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

package/chunks/{bundle-bofQNMJb.js → bundle-iPDlyZXo.js}

@@ -10,4 +10,4 @@ var uuidv4 = function () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace
 }); };
 
 export { uuidv4 as u };
-//# sourceMappingURL=bundle-bofQNMJb.js.map
+//# sourceMappingURL=bundle-iPDlyZXo.js.map

package/chunks/bundle-iPDlyZXo.js.map

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

package/chunks/{bundle-Zl1hrCWc.js → bundle-jUubN32Z.js}

@@ -1,10 +1,10 @@
 import React__default from 'react';
-import { K } from './bundle-9KsbryQI.js';
-import { T as TOKEN_TYPES, U as USER_MENTION_PREFIX, g as getWhiteSpacePreservedText } from './bundle-cviP1IM2.js';
+import { K } from './bundle-0BwB1B7t.js';
+import { T as TOKEN_TYPES, U as USER_MENTION_PREFIX, g as getWhiteSpacePreservedText } from './bundle-kPOY92Qs.js';
 import { useMessageContext } from '../Message/context.js';
 import MentionLabel from '../ui/MentionLabel.js';
 import LinkLabel from '../ui/LinkLabel.js';
-import { a as LabelTypography } from './bundle-wMgBBDf9.js';
+import { a as LabelTypography } from './bundle-lDOyfwhb.js';
 
 // this function is used to generate a unique key for token in message
 // it changes with updated time and index
@@ -33,4 +33,4 @@ function TextFragment(_a) {
 }
 
 export { TextFragment as T };
-//# sourceMappingURL=bundle-Zl1hrCWc.js.map
+//# sourceMappingURL=bundle-jUubN32Z.js.map

package/chunks/bundle-jUubN32Z.js.map

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

package/chunks/{bundle-53PRRrlp.js → bundle-kBtT3HBi.js}

@@ -1,6 +1,6 @@
 import React__default, { createContext, useReducer, useContext } from 'react';
-import { _ as __assign } from './bundle-hKtwSqbO.js';
-import { g as VOICE_PLAYER_ROOT_ID, e as VOICE_PLAYER_AUDIO_ID, a as VOICE_MESSAGE_FILE_NAME, b as VOICE_MESSAGE_MIME_TYPE } from './bundle-WCTKBopn.js';
+import { _ as __assign } from './bundle-AVOWwEQ4.js';
+import { g as VOICE_PLAYER_ROOT_ID, d as VOICE_PLAYER_AUDIO_ID, a as VOICE_MESSAGE_FILE_NAME, b as VOICE_MESSAGE_MIME_TYPE } from './bundle-UjngV2Kp.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 
 var INITIALIZE_AUDIO_UNIT = 'INITIALIZE_AUDIO_UNIT';
@@ -227,4 +227,4 @@ var VoicePlayerProvider = function (_a) {
 var useVoicePlayerContext = function () { return useContext(Context); };
 
 export { AudioUnitDefaultValue as A, VOICE_PLAYER_STATUS as V, ALL as a, VoicePlayerProvider as b, useVoicePlayerContext as u };
-//# sourceMappingURL=bundle-53PRRrlp.js.map
+//# sourceMappingURL=bundle-kBtT3HBi.js.map

package/chunks/{bundle-53PRRrlp.js.map → bundle-kBtT3HBi.js.map}

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

package/chunks/{bundle-cviP1IM2.js → bundle-kPOY92Qs.js}

@@ -1,5 +1,5 @@
-import { a as __spreadArray } from './bundle-hKtwSqbO.js';
-import { M as isUrl } from './bundle-EHReigfD.js';
+import { a as __spreadArray } from './bundle-AVOWwEQ4.js';
+import { L as isUrl } from './bundle-OoXqnc0l.js';
 
 var USER_MENTION_PREFIX = '@';
 
@@ -129,4 +129,4 @@ function getWhiteSpacePreservedText(text) {
 }
 
 export { TOKEN_TYPES as T, USER_MENTION_PREFIX as U, getWhiteSpacePreservedText as g, tokenizeMessage as t };
-//# sourceMappingURL=bundle-cviP1IM2.js.map
+//# sourceMappingURL=bundle-kPOY92Qs.js.map

package/chunks/{bundle-cviP1IM2.js.map → bundle-kPOY92Qs.js.map}

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

package/chunks/{bundle-kp1MMNMf.js → bundle-kaJaYGwQ.js}

@@ -1,4 +1,4 @@
 var TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';
 
 export { TEXT_MESSAGE_BODY_CLASSNAME as T };
-//# sourceMappingURL=bundle-kp1MMNMf.js.map
+//# sourceMappingURL=bundle-kaJaYGwQ.js.map

package/chunks/bundle-kaJaYGwQ.js.map

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

package/chunks/{bundle-wMgBBDf9.js → bundle-lDOyfwhb.js}

@@ -1,6 +1,6 @@
-import { a as __spreadArray } from './bundle-hKtwSqbO.js';
+import { a as __spreadArray } from './bundle-AVOWwEQ4.js';
 import React__default from 'react';
-import { g as getStringSet } from './bundle-5yKxJk_M.js';
+import { g as getStringSet } from './bundle-4zdVdGkr.js';
 
 var Typography = {
     H_1: 'H_1',
@@ -75,4 +75,4 @@ var LabelColors = Colors;
 var LabelStringSet = getStringSet('en');
 
 export { Label as L, LabelTypography as a, LabelColors as b, LabelStringSet as c, changeColorToClassName as d };
-//# sourceMappingURL=bundle-wMgBBDf9.js.map
+//# sourceMappingURL=bundle-lDOyfwhb.js.map

package/chunks/bundle-lDOyfwhb.js.map

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

package/chunks/{bundle-FTgSGiKe.js → bundle-ltzZCtkR.js}

@@ -505,4 +505,4 @@ var locale = {
 var defaultLocale = locale;
 
 export { defaultLocale as d };
-//# sourceMappingURL=bundle-FTgSGiKe.js.map
+//# sourceMappingURL=bundle-ltzZCtkR.js.map