@sendbird/uikit-react 3.7.0 → 3.8.0

package/cjs/chunks/bundle-b4fiCQuI.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var React = require('react');
+var DOMPurify = require('dompurify');
+var _tslib = require('./bundle-hK4x7nmG.js');
+var consts = require('./bundle-gS0bojlA.js');
+var consts$2 = require('./bundle-g0lpRY8_.js');
+var consts$1 = require('./bundle-RaQV-Bpr.js');
+
+function renderToString(_a) {
+    var userId = _a.userId, nickname = _a.nickname;
+    // donot change this template, it wont work
+    var el = "<span data-userid=\"".concat(userId, "\" data-sb-mention=\"true\" class=\"").concat(consts.MENTION_USER_LABEL_CLASSNAME, "\">").concat(nickname, "</span>");
+    var purifier = DOMPurify(window);
+    var sanitized_ = purifier.sanitize(el);
+    var token = sanitized_.split(' ');
+    var spanTag = token[0], rest = token.slice(1);
+    // we do this because DOMPurify removes the contenteditable attribute
+    var sanitized = _tslib.__spreadArray([spanTag, 'contenteditable="false"'], rest, true).join(' ');
+    return sanitized;
+}
+
+var sanitizeString = function (str) {
+    return str === null || str === void 0 ? void 0 : str.replace(/[\u00A0-\u9999<>]/gim, function (i) { return ''.concat('&#', String(i.charCodeAt(0)), ';'); });
+};
+/**
+ * NodeList cannot be used with Array methods
+ * @param {NodeListOf<ChildNode>} childNodes
+ * @returns Array of child nodes
+ */
+var nodeListToArray = function (childNodes) {
+    try {
+        return Array.from(childNodes);
+    }
+    catch (error) {
+        return [];
+    }
+};
+function isChannelTypeSupportsMultipleFilesMessage(channel) {
+    var _a;
+    return channel && ((_a = channel.isGroupChannel) === null || _a === void 0 ? void 0 : _a.call(channel)) && !channel.isBroadcast && !channel.isSuper;
+}
+
+function inserTemplateToDOM(templateList) {
+    var nodes = templateList.map(function (template) {
+        var text = template.text, userId = template.userId;
+        if (userId) {
+            return renderToString({ userId: userId, nickname: text });
+        }
+        return sanitizeString(text);
+    })
+        .join(' ')
+        // add a space at the end of the mention, else cursor/caret wont work
+        .concat(' ');
+    document.execCommand('insertHTML', false, nodes);
+}
+
+var PASTE_NODE = 'sendbird-uikit__paste-node';
+var TEXT_MESSAGE_CLASS = 'sendbird-word';
+var MENTION_CLASS = 'sendbird-word__mention';
+var MENTION_CLASS_IN_INPUT = 'sendbird-mention-user-label';
+var MENTION_CLASS_COMBINED_QUERY = ".".concat(MENTION_CLASS, ", .").concat(MENTION_CLASS_IN_INPUT);
+
+function querySelectorIncludingSelf(master, selector) {
+    var result = _tslib.__spreadArray([
+        master
+    ], Array.from(master.querySelectorAll(selector)), true).find(function (el) { return el.matches(selector); });
+    return result;
+}
+// Pasted dom node can be OG_MESSAGE or partial message or full message
+// full messsage would have TEXT_MESSAGE_BODY_CLASSNAME and have childNodes
+// partial message would not have TEXT_MESSAGE_BODY_CLASSNAME
+function getLeafNodes(master) {
+    // og message
+    var ogMessage = querySelectorIncludingSelf(master, ".".concat(consts$1.OG_MESSAGE_BODY_CLASSNAME));
+    if (ogMessage) {
+        return nodeListToArray(ogMessage.childNodes);
+    }
+    var textMessageBody = querySelectorIncludingSelf(master, ".".concat(consts$2.TEXT_MESSAGE_BODY_CLASSNAME));
+    if (textMessageBody) {
+        return nodeListToArray(textMessageBody.childNodes);
+    }
+    return nodeListToArray(master.childNodes);
+}
+function createPasteNode() {
+    var pasteNode = document.body.querySelector("#".concat(PASTE_NODE));
+    // remove existing paste node
+    if (pasteNode) {
+        pasteNode === null || pasteNode === void 0 ? void 0 : pasteNode.remove();
+    }
+    // create new paste node and return
+    var node = document.createElement('div');
+    node.id = PASTE_NODE;
+    node.style.display = 'none';
+    return node;
+}
+function hasMention(parent) {
+    return (parent === null || parent === void 0 ? void 0 : parent.querySelector(MENTION_CLASS_COMBINED_QUERY)) ? true : false;
+}
+var extractTextFromNodes = function (nodes) {
+    var text = '';
+    nodes.forEach(function (node) {
+        // to preserve space between words
+        var textNodes = node.querySelectorAll(".".concat(TEXT_MESSAGE_CLASS));
+        if (textNodes.length > 0) {
+            text += ((extractTextFromNodes(Array.from(textNodes))) + ' ');
+        }
+        text += (node.innerText + ' ');
+    });
+    return text;
+};
+function domToMessageTemplate(nodeArray) {
+    var templates = nodeArray === null || nodeArray === void 0 ? void 0 : nodeArray.reduce(function (accumulator, currentValue) {
+        var _a;
+        // currentValue can be node(from messageBody or messageInput) or text
+        var mentionNode;
+        // this looks awkward, but it is a fallback to set default text
+        var text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+        // if text node, set text
+        if (currentValue instanceof Text) {
+            mentionNode = false;
+            text = currentValue.textContent;
+        }
+        if (currentValue instanceof HTMLElement) {
+            mentionNode = (currentValue.classList.contains(MENTION_CLASS) || currentValue.classList.contains(MENTION_CLASS_IN_INPUT))
+                ? currentValue
+                : currentValue.querySelector(MENTION_CLASS_COMBINED_QUERY);
+        }
+        // if mentionNode is not null, it is a mention
+        if (mentionNode) {
+            var text_1 = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+            var userId = (_a = mentionNode.dataset) === null || _a === void 0 ? void 0 : _a.userid;
+            return _tslib.__spreadArray(_tslib.__spreadArray([], accumulator, true), [
+                {
+                    text: text_1,
+                    userId: userId,
+                },
+            ], false);
+        }
+        return _tslib.__spreadArray(_tslib.__spreadArray([], accumulator, true), [
+            {
+                text: text,
+            },
+        ], false);
+    }, []);
+    return templates;
+}
+function getUsersFromWords(templates, channel) {
+    var userMap = {};
+    var users = channel.members;
+    templates.forEach(function (template) {
+        if (template.userId) {
+            var mentionedMember = users.find(function (user) { return user.userId === template.userId; });
+            // Object.values would return array-> [undefined] if the user is not in the channel
+            if (mentionedMember) {
+                userMap[template.userId] = mentionedMember;
+            }
+        }
+    });
+    return Object.values(userMap);
+}
+
+// exported, should be backward compatible
+// conditions to test:
+// 1. paste simple text
+// 2. paste text with mention
+// 3. paste text with mention and text
+// 4. paste text with mention and text and paste again before and after
+// 5. copy message with mention(only one mention, no other text) and paste
+// 6. copy message with mention from input and paste(before and after)
+function usePaste(_a) {
+    var ref = _a.ref, setIsInput = _a.setIsInput, setHeight = _a.setHeight, channel = _a.channel, setMentionedUsers = _a.setMentionedUsers;
+    return React.useCallback(function (e) {
+        e.preventDefault();
+        var html = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text/html');
+        // simple text, continue as normal
+        if (!html) {
+            var text = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text');
+            document.execCommand('insertHTML', false, sanitizeString(text));
+            setIsInput(true);
+            setHeight();
+            return;
+        }
+        // has html, check if there are mentions, sanitize and insert
+        var purifier = DOMPurify(window);
+        var clean = purifier.sanitize(html);
+        var pasteNode = createPasteNode();
+        pasteNode.innerHTML = clean;
+        // does not have mention, continue as normal
+        if (!hasMention(pasteNode)) {
+            // to preserve space between words
+            var text = extractTextFromNodes(Array.from(pasteNode.children));
+            document.execCommand('insertHTML', false, sanitizeString(text));
+            pasteNode.remove();
+            setIsInput(true);
+            setHeight();
+            return;
+        }
+        // has mention, collect leaf nodes and parse words
+        var leafNodes = getLeafNodes(pasteNode);
+        var words = domToMessageTemplate(leafNodes);
+        var mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
+        // side effects
+        setMentionedUsers(mentionedUsers);
+        inserTemplateToDOM(words);
+        pasteNode.remove();
+        setIsInput(true);
+        setHeight();
+    }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
+}
+
+exports.isChannelTypeSupportsMultipleFilesMessage = isChannelTypeSupportsMultipleFilesMessage;
+exports.nodeListToArray = nodeListToArray;
+exports.renderToString = renderToString;
+exports.sanitizeString = sanitizeString;
+exports.usePaste = usePaste;
+//# sourceMappingURL=bundle-b4fiCQuI.js.map

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

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

package/cjs/chunks/bundle-c6O8NjZI.js

@@ -0,0 +1,81 @@
+'use strict';
+
+var RESET_MESSAGES = 'RESET_MESSAGES';
+var FETCH_INITIAL_MESSAGES_START = 'FETCH_INITIAL_MESSAGES_START';
+var FETCH_INITIAL_MESSAGES_SUCCESS = 'FETCH_INITIAL_MESSAGES_SUCCESS';
+var FETCH_INITIAL_MESSAGES_FAILURE = 'FETCH_INITIAL_MESSAGES_FAILURE';
+var FETCH_PREV_MESSAGES_SUCCESS = 'FETCH_PREV_MESSAGES_SUCCESS';
+var FETCH_PREV_MESSAGES_FAILURE = 'FETCH_PREV_MESSAGES_FAILURE';
+var FETCH_NEXT_MESSAGES_SUCCESS = 'FETCH_NEXT_MESSAGES_SUCCESS';
+var FETCH_NEXT_MESSAGES_FAILURE = 'FETCH_NEXT_MESSAGES_FAILURE';
+var SEND_MESSAGE_START = 'SEND_MESSAGE_START';
+var SEND_MESSAGE_SUCCESS = 'SEND_MESSAGE_SUCCESS';
+var SEND_MESSAGE_FAILURE = 'SEND_MESSAGE_FAILURE';
+var RESEND_MESSAGE_START = 'RESEND_MESSAGE_START';
+var ON_MESSAGE_RECEIVED = 'ON_MESSAGE_RECEIVED';
+var ON_MESSAGE_UPDATED = 'ON_MESSAGE_UPDATED';
+var ON_MESSAGE_THREAD_INFO_UPDATED = 'ON_MESSAGE_THREAD_INFO_UPDATED';
+var ON_MESSAGE_DELETED = 'ON_MESSAGE_DELETED';
+var ON_MESSAGE_DELETED_BY_REQ_ID = 'ON_MESSAGE_DELETED_BY_REQ_ID';
+var SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';
+var SET_CHANNEL_INVALID = 'SET_CHANNEL_INVALID';
+var MARK_AS_READ = 'MARK_AS_READ';
+var ON_REACTION_UPDATED = 'ON_REACTION_UPDATED';
+var SET_EMOJI_CONTAINER = 'SET_EMOJI_CONTAINER';
+var MESSAGE_LIST_PARAMS_CHANGED = 'MESSAGE_LIST_PARAMS_CHANGED';
+var ON_FILE_INFO_UPLOADED = 'ON_FILE_INFO_UPLOADED';
+
+var channelActions = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  FETCH_INITIAL_MESSAGES_FAILURE: FETCH_INITIAL_MESSAGES_FAILURE,
+  FETCH_INITIAL_MESSAGES_START: FETCH_INITIAL_MESSAGES_START,
+  FETCH_INITIAL_MESSAGES_SUCCESS: FETCH_INITIAL_MESSAGES_SUCCESS,
+  FETCH_NEXT_MESSAGES_FAILURE: FETCH_NEXT_MESSAGES_FAILURE,
+  FETCH_NEXT_MESSAGES_SUCCESS: FETCH_NEXT_MESSAGES_SUCCESS,
+  FETCH_PREV_MESSAGES_FAILURE: FETCH_PREV_MESSAGES_FAILURE,
+  FETCH_PREV_MESSAGES_SUCCESS: FETCH_PREV_MESSAGES_SUCCESS,
+  MARK_AS_READ: MARK_AS_READ,
+  MESSAGE_LIST_PARAMS_CHANGED: MESSAGE_LIST_PARAMS_CHANGED,
+  ON_FILE_INFO_UPLOADED: ON_FILE_INFO_UPLOADED,
+  ON_MESSAGE_DELETED: ON_MESSAGE_DELETED,
+  ON_MESSAGE_DELETED_BY_REQ_ID: ON_MESSAGE_DELETED_BY_REQ_ID,
+  ON_MESSAGE_RECEIVED: ON_MESSAGE_RECEIVED,
+  ON_MESSAGE_THREAD_INFO_UPDATED: ON_MESSAGE_THREAD_INFO_UPDATED,
+  ON_MESSAGE_UPDATED: ON_MESSAGE_UPDATED,
+  ON_REACTION_UPDATED: ON_REACTION_UPDATED,
+  RESEND_MESSAGE_START: RESEND_MESSAGE_START,
+  RESET_MESSAGES: RESET_MESSAGES,
+  SEND_MESSAGE_FAILURE: SEND_MESSAGE_FAILURE,
+  SEND_MESSAGE_START: SEND_MESSAGE_START,
+  SEND_MESSAGE_SUCCESS: SEND_MESSAGE_SUCCESS,
+  SET_CHANNEL_INVALID: SET_CHANNEL_INVALID,
+  SET_CURRENT_CHANNEL: SET_CURRENT_CHANNEL,
+  SET_EMOJI_CONTAINER: SET_EMOJI_CONTAINER
+});
+
+exports.FETCH_INITIAL_MESSAGES_FAILURE = FETCH_INITIAL_MESSAGES_FAILURE;
+exports.FETCH_INITIAL_MESSAGES_START = FETCH_INITIAL_MESSAGES_START;
+exports.FETCH_INITIAL_MESSAGES_SUCCESS = FETCH_INITIAL_MESSAGES_SUCCESS;
+exports.FETCH_NEXT_MESSAGES_FAILURE = FETCH_NEXT_MESSAGES_FAILURE;
+exports.FETCH_NEXT_MESSAGES_SUCCESS = FETCH_NEXT_MESSAGES_SUCCESS;
+exports.FETCH_PREV_MESSAGES_FAILURE = FETCH_PREV_MESSAGES_FAILURE;
+exports.FETCH_PREV_MESSAGES_SUCCESS = FETCH_PREV_MESSAGES_SUCCESS;
+exports.MARK_AS_READ = MARK_AS_READ;
+exports.MESSAGE_LIST_PARAMS_CHANGED = MESSAGE_LIST_PARAMS_CHANGED;
+exports.ON_FILE_INFO_UPLOADED = ON_FILE_INFO_UPLOADED;
+exports.ON_MESSAGE_DELETED = ON_MESSAGE_DELETED;
+exports.ON_MESSAGE_DELETED_BY_REQ_ID = ON_MESSAGE_DELETED_BY_REQ_ID;
+exports.ON_MESSAGE_RECEIVED = ON_MESSAGE_RECEIVED;
+exports.ON_MESSAGE_THREAD_INFO_UPDATED = ON_MESSAGE_THREAD_INFO_UPDATED;
+exports.ON_MESSAGE_UPDATED = ON_MESSAGE_UPDATED;
+exports.ON_REACTION_UPDATED = ON_REACTION_UPDATED;
+exports.RESEND_MESSAGE_START = RESEND_MESSAGE_START;
+exports.RESET_MESSAGES = RESET_MESSAGES;
+exports.SEND_MESSAGE_FAILURE = SEND_MESSAGE_FAILURE;
+exports.SEND_MESSAGE_START = SEND_MESSAGE_START;
+exports.SEND_MESSAGE_SUCCESS = SEND_MESSAGE_SUCCESS;
+exports.SET_CHANNEL_INVALID = SET_CHANNEL_INVALID;
+exports.SET_CURRENT_CHANNEL = SET_CURRENT_CHANNEL;
+exports.SET_EMOJI_CONTAINER = SET_EMOJI_CONTAINER;
+exports.channelActions = channelActions;
+//# sourceMappingURL=bundle-c6O8NjZI.js.map

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

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

package/cjs/chunks/bundle-cttYM0DR.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var copyToClipboard = function (text) {
+    // @ts-ignore: Unreachable code error
+    if (window.clipboardData && window.clipboardData.setData) {
+        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
+        // @ts-ignore: Unreachable code error
+        return window.clipboardData.setData('Text', text);
+    }
+    if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+        var textarea = document.createElement('textarea');
+        textarea.textContent = text;
+        textarea.style.position = 'fixed'; // Prevent scrolling to bottom of page in Microsoft Edge.
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+            return document.execCommand('copy'); // Security exception may be thrown by some browsers.
+        }
+        catch (ex) {
+            return false;
+        }
+        finally {
+            document.body.removeChild(textarea);
+        }
+    }
+    return false;
+};
+
+exports.copyToClipboard = copyToClipboard;
+//# sourceMappingURL=bundle-cttYM0DR.js.map

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

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

package/cjs/chunks/bundle-dXhGOQQM.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var MessageInputKeys = {
+    Enter: 'Enter',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    Backspace: 'Backspace',
+};
+var NodeTypes = {
+    ElementNode: 1,
+    TextNode: 3,
+};
+var NodeNames = {
+    Span: 'SPAN',
+    Br: 'BR',
+    Div: 'DIV',
+};
+
+exports.MessageInputKeys = MessageInputKeys;
+exports.NodeNames = NodeNames;
+exports.NodeTypes = NodeTypes;
+//# sourceMappingURL=bundle-dXhGOQQM.js.map

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

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

package/cjs/chunks/bundle-e-fvbugV.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var DEFAULT_URL_PREFIX = 'https://static.sendbird.com/sample/cover/cover_';
+var getOpenChannelAvatar = function (channel) {
+    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
+        return channel.coverUrl;
+    }
+};
+var getChannelAvatarSource = function (channel, currentUserId) {
+    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
+        if (!(new RegExp("^".concat(DEFAULT_URL_PREFIX)).test(channel.coverUrl))) {
+            return channel.coverUrl;
+        }
+    }
+    return ((channel === null || channel === void 0 ? void 0 : channel.members) || [])
+        .filter(function (member) { return member.userId !== currentUserId; })
+        .map(function (_a) {
+        var profileUrl = _a.profileUrl;
+        return profileUrl;
+    });
+};
+var generateDefaultAvatar = function (channel) {
+    if (channel === null || channel === void 0 ? void 0 : channel.coverUrl) {
+        if (new RegExp("^".concat(DEFAULT_URL_PREFIX)).test(channel.coverUrl)) {
+            return true;
+        }
+        return false;
+    }
+    return true;
+};
+
+exports.generateDefaultAvatar = generateDefaultAvatar;
+exports.getChannelAvatarSource = getChannelAvatarSource;
+exports.getOpenChannelAvatar = getOpenChannelAvatar;
+//# sourceMappingURL=bundle-e-fvbugV.js.map

package/cjs/chunks/bundle-e-fvbugV.js.map

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

package/cjs/chunks/bundle-e0il9C3T.js

@@ -0,0 +1,230 @@
+'use strict';
+
+var React = require('react');
+var LocalizationContext = require('./bundle-QmSa90PC.js');
+var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
+var VoiceRecorder_useVoiceRecorder = require('../VoiceRecorder/useVoiceRecorder.js');
+var utils = require('./bundle-4q81wd8X.js');
+var ui_VoiceMessgeInput = require('./bundle-tRBVL0r6.js');
+var ui_Modal = require('./bundle-UooP2IDU.js');
+var ui_Button = require('../ui/Button.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var consts = require('./bundle-L9ushBZQ.js');
+var VoicePlayer_context = require('./bundle-BJe68nS0.js');
+var uuid = require('./bundle-gMxOq93o.js');
+var index = require('./bundle-FHx0K-3z.js');
+var hooks_useModal = require('../hooks/useModal.js');
+require('./bundle-hK4x7nmG.js');
+require('./bundle-6ziaqiUd.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 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 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) {
+        // Validate Paremeters
+        if (!sendFileMessage || !sendMultipleFilesMessage) {
+            logger.warning('Channel|useHandleUploadFiles: required functions are undefined', { sendFileMessage: sendFileMessage, sendMultipleFilesMessage: sendMultipleFilesMessage });
+            return;
+        }
+        if (files.length === 0) {
+            logger.warning('Channel|useHandleUploadFiles: given file list is empty.', { files: files });
+            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;
+        }
+        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));
+            var 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;
+        }
+        if (files.length === 1) {
+            logger.info('Channel|useHandleUploadFiles: sending one file.');
+            var file = files[0];
+            sendFileMessage(file, quoteMessage);
+        }
+        else if (files.length > 1) {
+            logger.info('Channel|useHandleUploadFiles: sending multiple files.');
+            var imageFiles_1 = [];
+            var otherFiles_1 = [];
+            files.forEach(function (file) {
+                if (index.isImage(file.type)) {
+                    imageFiles_1.push(file);
+                }
+                else {
+                    otherFiles_1.push(file);
+                }
+            });
+            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);
+                }
+            })());
+        }
+    }, [
+        sendFileMessage,
+        sendMultipleFilesMessage,
+        quoteMessage,
+    ]);
+    return [handleUploadFiles];
+};
+
+exports.VoiceMessageInputWrapper = VoiceMessageInputWrapper;
+exports.useHandleUploadFiles = useHandleUploadFiles;
+//# sourceMappingURL=bundle-e0il9C3T.js.map

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

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

package/cjs/{consts-61d83828.js → chunks/bundle-g0lpRY8_.js}

@@ -3,4 +3,4 @@
 var TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';
 
 exports.TEXT_MESSAGE_BODY_CLASSNAME = TEXT_MESSAGE_BODY_CLASSNAME;
-//# sourceMappingURL=consts-61d83828.js.map
+//# sourceMappingURL=bundle-g0lpRY8_.js.map

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

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