@sendbird/uikit-react 3.8.0 → 3.8.1

package/cjs/chunks/{bundle-JggdKsJa.js → bundle-t70SIG3R.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var _tslib = require('./bundle-hK4x7nmG.js');
+var _tslib = require('./bundle-mc8PQfi_.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('./bundle-QmSa90PC.js');
+var LocalizationContext = require('./bundle-80bw1Z-w.js');
 require('../hooks/useModal.js');
-var index = require('./bundle-FHx0K-3z.js');
-var utils = require('./bundle-1yOirqug.js');
-var ui_Avatar = require('../ui/Avatar.js');
-var ui_Label = require('./bundle-6ziaqiUd.js');
+var index = require('./bundle-BUF_nc4Q.js');
+var utils = require('./bundle-viTxhrPr.js');
+var ui_Avatar = require('./bundle-lj7KorhP.js');
+var ui_Label = require('./bundle-fTDV9UxX.js');
 var ui_Icon = require('../ui/Icon.js');
-var consts = require('./bundle-L9ushBZQ.js');
-var ui_Modal = require('./bundle-UooP2IDU.js');
+var consts = require('./bundle-4iro9CUN.js');
+var ui_Modal = require('./bundle-o66lc7qg.js');
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
 var SUPPORTED_MIMES = {
@@ -132,7 +132,7 @@ var FileViewerComponent = function (props) {
         React.createElement("div", { className: "sendbird-fileviewer__header" },
             React.createElement("div", { className: "sendbird-fileviewer__header__left" },
                 React.createElement("div", { className: "sendbird-fileviewer__header__left__avatar" },
-                    React.createElement(ui_Avatar.default, { height: "32px", width: "32px", src: profileUrl })),
+                    React.createElement(ui_Avatar.Avatar, { height: "32px", width: "32px", src: profileUrl })),
                 React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__filename", type: ui_Label.LabelTypography.H_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, name),
                 React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__sender-name", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, nickname)),
             React.createElement("div", { className: "sendbird-fileviewer__header__right" },
@@ -178,4 +178,4 @@ exports.FileViewer = FileViewer;
 exports.FileViewerComponent = FileViewerComponent;
 exports.isImage = isImage;
 exports.isVideo = isVideo;
-//# sourceMappingURL=bundle-JggdKsJa.js.map
+//# sourceMappingURL=bundle-t70SIG3R.js.map

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

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

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

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var pubSub_topics = require('../pubSub/topics.js');
+var pubSub_topics = require('./bundle-6fWeHUzf.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var _tslib = require('./bundle-hK4x7nmG.js');
+var _tslib = require('./bundle-mc8PQfi_.js');
 
 exports.OpenChannelListFetchingStatus = void 0;
 (function (OpenChannelListFetchingStatus) {
@@ -299,7 +299,7 @@ var OpenChannelListProvider = function (_a) {
     // Events & PubSub
     React.useEffect(function () {
         var subscriber = (pubSub === null || pubSub === void 0 ? void 0 : pubSub.subscribe) ? new Map() : null;
-        subscriber === null || subscriber === void 0 ? void 0 : subscriber.set(pubSub_topics.PUBSUB_TOPICS.UPDATE_OPEN_CHANNEL, pubSub === null || pubSub === void 0 ? void 0 : pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.UPDATE_OPEN_CHANNEL, function (channel) {
+        subscriber === null || subscriber === void 0 ? void 0 : subscriber.set(pubSub_topics.pubSubTopics.UPDATE_OPEN_CHANNEL, pubSub === null || pubSub === void 0 ? void 0 : pubSub.subscribe(pubSub_topics.pubSubTopics.UPDATE_OPEN_CHANNEL, function (channel) {
             openChannelListDispatcher({
                 type: OpenChannelListActionTypes$1.UPDATE_OPEN_CHANNEL,
                 payload: channel,
@@ -357,4 +357,4 @@ exports.OpenChannelListActionTypes = OpenChannelListActionTypes$1;
 exports.OpenChannelListProvider = OpenChannelListProvider;
 exports.OpenChannelListProvider$1 = OpenChannelListProvider$1;
 exports.useOpenChannelListContext = useOpenChannelListContext;
-//# sourceMappingURL=bundle-kBUglm2K.js.map
+//# sourceMappingURL=bundle-tooLK5gn.js.map

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

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

package/cjs/chunks/{bundle-YNHu-c84.js → bundle-u4ZfKyD_.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var utils = require('./bundle-1yOirqug.js');
+var utils = require('./bundle-viTxhrPr.js');
 
 var Context = React.createContext({
     opened: '',
@@ -12,4 +12,4 @@ var Provider = Context.Provider;
 
 exports.Consumer = Consumer;
 exports.Provider = Provider;
-//# sourceMappingURL=bundle-YNHu-c84.js.map
+//# sourceMappingURL=bundle-u4ZfKyD_.js.map

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

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

package/cjs/chunks/{bundle-4rFcKXQa.js → bundle-uE1K1eGs.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./bundle-28p7K0N-.js');
+var index = require('./bundle-pLajF9mf.js');
 
 /**
  * @name startOfDay
@@ -65,4 +65,4 @@ function isSameDay(dirtyDateLeft, dirtyDateRight) {
 }
 
 exports.isSameDay = isSameDay;
-//# sourceMappingURL=bundle-4rFcKXQa.js.map
+//# sourceMappingURL=bundle-uE1K1eGs.js.map

package/cjs/chunks/{bundle-4rFcKXQa.js.map → bundle-uE1K1eGs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-4rFcKXQa.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":["requiredArgs","toDate"],"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,EAAEA,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAGC,YAAM,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,EAAED,kBAAY,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-uE1K1eGs.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":["requiredArgs","toDate"],"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,EAAEA,kBAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAGC,YAAM,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,EAAED,kBAAY,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/cjs/chunks/bundle-vWOLHFBL.js

@@ -0,0 +1,356 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-80bw1Z-w.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var VoiceRecorder_useVoiceRecorder = require('../VoiceRecorder/useVoiceRecorder.js');
+var utils = require('./bundle-8lUFYwiz.js');
+var ui_VoiceMessgeInput = require('./bundle-OfmF0BBb.js');
+var ui_Modal = require('./bundle-o66lc7qg.js');
+var ui_Button = require('../ui/Button.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var consts = require('./bundle-4iro9CUN.js');
+var VoicePlayer_context = require('./bundle-oiMScSG6.js');
+var uuid = require('./bundle-Z8uBiYyS.js');
+var _tslib = require('./bundle-mc8PQfi_.js');
+var index = require('./bundle-BUF_nc4Q.js');
+var hooks_useModal = require('../hooks/useModal.js');
+require('./bundle-fTDV9UxX.js');
+var ui_Avatar = require('./bundle-lj7KorhP.js');
+
+var VoiceMessageInputWrapper = function (_a) {
+    var _b;
+    var channel = _a.channel, onCancelClick = _a.onCancelClick, onSubmitClick = _a.onSubmitClick;
+    var uuid$1 = React.useRef(uuid.uuidv4()).current;
+    var _c = React.useState(null), audioFile = _c[0], setAudioFile = _c[1];
+    var _d = React.useState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD), voiceInputState = _d[0], setVoiceInputState = _d[1];
+    var _e = React.useState(false), isSubmitted = _e[0], setSubmit = _e[1];
+    var _f = React.useState(false), isDisabled = _f[0], setDisabled = _f[1];
+    var _g = React.useState(false), showModal = _g[0], setShowModal = _g[1];
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var config = useSendbirdStateContext.useSendbirdStateContext().config;
+    var minRecordingTime = ((_b = config === null || config === void 0 ? void 0 : config.voiceRecord) === null || _b === void 0 ? void 0 : _b.minRecordingTime) || consts.VOICE_RECORDER_DEFAULT_MIN;
+    var _h = VoiceRecorder_useVoiceRecorder.useVoiceRecorder({
+        onRecordingStarted: function () {
+            setVoiceInputState(ui_VoiceMessgeInput.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 = VoicePlayer_useVoicePlayer.useVoicePlayer({
+        channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
+        key: uuid$1,
+        audioFile: audioFile,
+    });
+    var play = voicePlayer.play, pause = voicePlayer.pause, playbackTime = voicePlayer.playbackTime, playingStatus = voicePlayer.playingStatus;
+    var stopVoicePlayer = voicePlayer.stop;
+    // disabled state: muted & frozen
+    React.useEffect(function () {
+        if (utils.isDisabledBecauseFrozen(channel) || utils.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
+    React.useEffect(function () {
+        if (isSubmitted && audioFile) {
+            onSubmitClick(audioFile, recordingTime);
+            setSubmit(false);
+            setAudioFile(null);
+        }
+    }, [isSubmitted, audioFile, recordingTime]);
+    // operate which control button should be displayed
+    React.useEffect(function () {
+        if (audioFile) {
+            if (recordingTime < minRecordingTime) {
+                setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                setAudioFile(null);
+            }
+            else if (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING) {
+                setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.PLAYING);
+            }
+            else {
+                setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_PLAY);
+            }
+        }
+    }, [audioFile, recordingTime, playingStatus]);
+    return (React.createElement("div", { className: "sendbird-voice-message-input-wrapper" },
+        React.createElement(ui_VoiceMessgeInput.VoiceMessageInput, { currentValue: recordingStatus === VoiceRecorder_useVoiceRecorder.VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime, maximumValue: recordingStatus === VoiceRecorder_useVoiceRecorder.VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit, currentType: voiceInputState, onCancelClick: function () {
+                onCancelClick();
+                cancel();
+                stopVoicePlayer();
+            }, onSubmitClick: function () {
+                if (isDisabled) {
+                    setShowModal(true);
+                    setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                }
+                else {
+                    stop();
+                    pause();
+                    setSubmit(true);
+                }
+            }, onControlClick: function (type) {
+                switch (type) {
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD: {
+                        stopVoicePlayer();
+                        start();
+                        break;
+                    }
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.RECORDING: {
+                        if (recordingTime >= minRecordingTime && !isDisabled) {
+                            stop();
+                        }
+                        else if (isDisabled) {
+                            cancel();
+                            setShowModal(true);
+                            setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        else {
+                            cancel();
+                            setVoiceInputState(ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_RECORD);
+                        }
+                        break;
+                    }
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.READY_TO_PLAY: {
+                        play();
+                        break;
+                    }
+                    case ui_VoiceMessgeInput.VoiceMessageInputStatus.PLAYING: {
+                        pause();
+                        break;
+                    }
+                }
+            } }),
+        showModal && (React.createElement(ui_Modal.Modal, { className: "sendbird-voice-message-input-wrapper-alert", titleText: utils.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.createElement("div", { className: "sendbird-voice-message-input-wrapper-alert__body" },
+                React.createElement(ui_Button.default, { className: "sendbird-voice-message-input-wrapper-alert__body__ok-button", type: ui_Button.ButtonTypes.PRIMARY, size: ui_Button.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 _tslib.__awaiter(void 0, void 0, void 0, function () {
+        var compressionRate, resizingWidth, resizingHeight, result;
+        return _tslib.__generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    compressionRate = imageCompression.compressionRate;
+                    resizingWidth = ui_Avatar.pxToNumber(imageCompression.resizingWidth);
+                    resizingHeight = ui_Avatar.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 _tslib.__awaiter(void 0, void 0, void 0, function () {
+                            var compressedImage, err_1;
+                            return _tslib.__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 = LocalizationContext.useLocalization().stringSet;
+    var config = useSendbirdStateContext.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 = hooks_useModal.useGlobalModalContext().openModal;
+    var handleUploadFiles = 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:
+                    // 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.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: "The maximum size per file is ".concat(Math.floor(uikitUploadSizeLimit / ONE_MiB), " MB."),
+                                hideFooter: true,
+                            },
+                            childElement: function (_a) {
+                                var closeModal = _a.closeModal;
+                                return (React.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({
+                            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 (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(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;
+};
+
+exports.VoiceMessageInputWrapper = VoiceMessageInputWrapper;
+exports.useHandleUploadFiles = useHandleUploadFiles;
+//# sourceMappingURL=bundle-vWOLHFBL.js.map

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

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

package/cjs/chunks/{bundle-1yOirqug.js → bundle-viTxhrPr.js}

@@ -5,4 +5,4 @@ var isAboutSame = function (a, b, px) { return Math.abs(a - b) <= px; };
 
 exports.isAboutSame = isAboutSame;
 exports.noop = noop;
-//# sourceMappingURL=bundle-1yOirqug.js.map
+//# sourceMappingURL=bundle-viTxhrPr.js.map

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

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

package/cjs/chunks/{bundle-g_OXBrgT.js → bundle-wPu8WyIh.js}

@@ -29,4 +29,4 @@ function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
 
 exports.getCaseResolvedReplyType = getCaseResolvedReplyType;
 exports.getCaseResolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType;
-//# sourceMappingURL=bundle-g_OXBrgT.js.map
+//# sourceMappingURL=bundle-wPu8WyIh.js.map

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

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

package/cjs/chunks/{bundle-P0kNl8GH.js → bundle-xy995kna.js}

@@ -1,25 +1,25 @@
 'use strict';
 
-var _tslib = require('./bundle-hK4x7nmG.js');
+var _tslib = require('./bundle-mc8PQfi_.js');
 var React = require('react');
 var ui_Button = require('../ui/Button.js');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_IconButton = require('../ui/IconButton.js');
-var ui_Label = require('./bundle-6ziaqiUd.js');
-var LocalizationContext = require('./bundle-QmSa90PC.js');
-var UserProfileContext = require('./bundle-4bb_98h6.js');
-require('./bundle-YNHu-c84.js');
-var ui_Avatar = require('../ui/Avatar.js');
+var ui_Label = require('./bundle-fTDV9UxX.js');
+var LocalizationContext = require('./bundle-80bw1Z-w.js');
+var UserProfileContext = require('./bundle-ACXel153.js');
+require('./bundle-u4ZfKyD_.js');
+var ui_Avatar = require('./bundle-lj7KorhP.js');
 require('react-dom');
-require('./bundle-Y9TkHVI5.js');
+require('./bundle-kkxTVcGD.js');
 var ui_MutedAvatarOverlay = require('../ui/MutedAvatarOverlay.js');
 var ui_UserProfile = require('../ui/UserProfile.js');
 var OpenChannelSettings_context = require('../OpenChannelSettings/context.js');
 require('../withSendbird.js');
-var ui_Modal = require('./bundle-UooP2IDU.js');
+var ui_Modal = require('./bundle-o66lc7qg.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-1yOirqug.js');
+var utils = require('./bundle-viTxhrPr.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
 function ParticipantsModal(_a) {
@@ -109,7 +109,7 @@ var UserListItem = function (_a) {
     return (React.createElement("div", { className: "sendbird-participants-accordion__member" },
         React.createElement("div", { className: "sendbird-participants-accordion__member-avatar" },
             React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(React.Fragment, null,
-                    React.createElement(ui_Avatar.default, { className: "sendbird-participants-accordion__member-avatar__avatar", onClick: function () {
+                    React.createElement(ui_Avatar.Avatar, { className: "sendbird-participants-accordion__member-avatar__avatar", onClick: function () {
                             if (!disableUserProfile) {
                                 toggleDropdown();
                             }
@@ -233,4 +233,4 @@ function ParticipantList(_a) {
 
 exports.ParticipantList = ParticipantList;
 exports.UserListItem = UserListItem;
-//# sourceMappingURL=bundle-P0kNl8GH.js.map
+//# sourceMappingURL=bundle-xy995kna.js.map

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

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

package/cjs/hooks/useModal.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-hK4x7nmG.js');
+var _tslib = require('../chunks/bundle-mc8PQfi_.js');
 var React = require('react');
-var index_module = require('../chunks/bundle-I_9_5a8a.js');
-var utils = require('../chunks/bundle-1yOirqug.js');
-var ui_Modal = require('../chunks/bundle-UooP2IDU.js');
+var index_module = require('../chunks/bundle-RG3ZDmvE.js');
+var utils = require('../chunks/bundle-viTxhrPr.js');
+var ui_Modal = require('../chunks/bundle-o66lc7qg.js');
 require('react-dom');
-require('../chunks/bundle-QmSa90PC.js');
-require('../chunks/bundle-z-Bvsn0B.js');
-require('../chunks/bundle-n1yh-qDb.js');
-require('../chunks/bundle-Y9TkHVI5.js');
+require('../chunks/bundle-80bw1Z-w.js');
+require('../chunks/bundle-5l7POen0.js');
+require('../chunks/bundle-EVv3xRW8.js');
+require('../chunks/bundle-kkxTVcGD.js');
 require('../ui/IconButton.js');
 require('../ui/Button.js');
-require('../chunks/bundle-6ziaqiUd.js');
+require('../chunks/bundle-fTDV9UxX.js');
 require('../ui/Icon.js');
 
 var GlobalModalContext = React.createContext({