@sendbird/uikit-react 3.1.3 → 3.2.0-rc.1

package/cjs/{ChannelProvider-b7e7f2ff.js → ChannelProvider-dd81a327.js}

@@ -1,17 +1,17 @@
 'use strict';
 
 var React = require('react');
-var UserProfileContext = require('./UserProfileContext-f7c125ca.js');
+var UserProfileContext = require('./UserProfileContext-fa684629.js');
 var useSendbirdStateContext = require('./useSendbirdStateContext.js');
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-09706ebf.js');
-var index$1 = require('./index-701d44c1.js');
-var topics = require('./topics-f3fe3bf3.js');
-var index = require('./index-c8f7702f.js');
-var compareIds = require('./compareIds-10371145.js');
-var _const = require('./const-459420a0.js');
-var groupChannel = require('./groupChannel-4934c435.js');
-var uuid = require('./uuid-1942f440.js');
-var __bundle6316ce22 = require('./__bundle-6316ce22-054c7ff6.js');
+var index$1 = require('./index-c4369117.js');
+var topics = require('./topics-ac8d2b51.js');
+var index = require('./index-907bf834.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-c7da8657.js');
+var compareIds = require('./compareIds-a7236494.js');
+var _const = require('./const-de0fa0d4.js');
+var groupChannel = require('./groupChannel-95ba4a71.js');
+var uuid = require('./uuid-c32d01d6.js');
+var __bundleC41dd401 = require('./__bundle-c41dd401-1f364afe.js');
 var ui_ContextMenu = require('./ui/ContextMenu.js');
 var ui_ReactionButton = require('./ui/ReactionButton.js');
 var ui_ImageRenderer = require('./ui/ImageRenderer.js');
@@ -21,29 +21,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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_MESSAGEGE_START = 'SEND_MESSAGEGE_START';
-var SEND_MESSAGEGE_SUCESS = 'SEND_MESSAGEGE_SUCESS';
-var SEND_MESSAGEGE_FAILURE = 'SEND_MESSAGEGE_FAILURE';
-var RESEND_MESSAGEGE_START = 'RESEND_MESSAGEGE_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';
+const RESET_MESSAGES = 'RESET_MESSAGES';
+const FETCH_INITIAL_MESSAGES_START = 'FETCH_INITIAL_MESSAGES_START';
+const FETCH_INITIAL_MESSAGES_SUCCESS = 'FETCH_INITIAL_MESSAGES_SUCCESS';
+const FETCH_INITIAL_MESSAGES_FAILURE = 'FETCH_INITIAL_MESSAGES_FAILURE';
+const FETCH_PREV_MESSAGES_SUCCESS = 'FETCH_PREV_MESSAGES_SUCCESS';
+const FETCH_PREV_MESSAGES_FAILURE = 'FETCH_PREV_MESSAGES_FAILURE';
+const FETCH_NEXT_MESSAGES_SUCCESS = 'FETCH_NEXT_MESSAGES_SUCCESS';
+const FETCH_NEXT_MESSAGES_FAILURE = 'FETCH_NEXT_MESSAGES_FAILURE';
+const SEND_MESSAGEGE_START = 'SEND_MESSAGEGE_START';
+const SEND_MESSAGEGE_SUCESS = 'SEND_MESSAGEGE_SUCESS';
+const SEND_MESSAGEGE_FAILURE = 'SEND_MESSAGEGE_FAILURE';
+const RESEND_MESSAGEGE_START = 'RESEND_MESSAGEGE_START';
+const ON_MESSAGE_RECEIVED = 'ON_MESSAGE_RECEIVED';
+const ON_MESSAGE_UPDATED = 'ON_MESSAGE_UPDATED';
+const ON_MESSAGE_THREAD_INFO_UPDATED = 'ON_MESSAGE_THREAD_INFO_UPDATED';
+const ON_MESSAGE_DELETED = 'ON_MESSAGE_DELETED';
+const ON_MESSAGE_DELETED_BY_REQ_ID = 'ON_MESSAGE_DELETED_BY_REQ_ID';
+const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';
+const SET_CHANNEL_INVALID = 'SET_CHANNEL_INVALID';
+const MARK_AS_READ = 'MARK_AS_READ';
+const ON_REACTION_UPDATED = 'ON_REACTION_UPDATED';
+const SET_EMOJI_CONTAINER = 'SET_EMOJI_CONTAINER';
+const MESSAGE_LIST_PARAMS_CHANGED = 'MESSAGE_LIST_PARAMS_CHANGED';
 
 var messageActionTypes = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -73,46 +73,47 @@ var messageActionTypes = /*#__PURE__*/Object.freeze({
 });
 
 index.getOutgoingMessageStates();
-var UNDEFINED = 'undefined';
-
-var _getSendingMessageSta$1 = index.getSendingMessageStatus(),
-    SUCCEEDED$1 = _getSendingMessageSta$1.SUCCEEDED;
-    _getSendingMessageSta$1.FAILED;
-    var PENDING$1 = _getSendingMessageSta$1.PENDING;
-
-var scrollIntoLast = function scrollIntoLast() {
-  var intialTry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var MAX_TRIES = 10;
-  var currentTry = intialTry;
+const UNDEFINED = 'undefined';
+const {
+  SUCCEEDED: SUCCEEDED$1,
+  FAILED: FAILED$1,
+  PENDING: PENDING$1
+} = index.getSendingMessageStatus();
+const scrollIntoLast = function () {
+  let intialTry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  const MAX_TRIES = 10;
+  const currentTry = intialTry;
 
   if (currentTry > MAX_TRIES) {
     return;
   }
 
   try {
-    var scrollDOM = document.querySelector('.sendbird-conversation__messages-padding'); // eslint-disable-next-line no-multi-assign
+    const scrollDOM = document.querySelector('.sendbird-conversation__messages-padding'); // eslint-disable-next-line no-multi-assign
 
     scrollDOM.scrollTop = scrollDOM.scrollHeight;
   } catch (error) {
-    setTimeout(function () {
+    setTimeout(() => {
       scrollIntoLast(currentTry + 1);
     }, 500 * currentTry);
   }
 };
-var pubSubHandleRemover = function pubSubHandleRemover(subscriber) {
-  subscriber.forEach(function (s) {
+const pubSubHandleRemover = subscriber => {
+  subscriber.forEach(s => {
     try {
       s.remove();
     } catch (_unused) {//
     }
   });
 };
-var pubSubHandler = function pubSubHandler(channelUrl, pubSub, dispatcher) {
-  var subscriber = new Map();
+const pubSubHandler = (channelUrl, pubSub, dispatcher) => {
+  const subscriber = new Map();
   if (!pubSub || !pubSub.subscribe) return subscriber;
-  subscriber.set(topics.SEND_USER_MESSAGE, pubSub.subscribe(topics.SEND_USER_MESSAGE, function (msg) {
-    var channel = msg.channel,
-        message = msg.message;
+  subscriber.set(topics.SEND_USER_MESSAGE, pubSub.subscribe(topics.SEND_USER_MESSAGE, msg => {
+    const {
+      channel,
+      message
+    } = msg;
     scrollIntoLast();
 
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
@@ -122,9 +123,11 @@ var pubSubHandler = function pubSubHandler(channelUrl, pubSub, dispatcher) {
       });
     }
   }));
-  subscriber.set(topics.SEND_MESSAGE_START, pubSub.subscribe(topics.SEND_MESSAGE_START, function (msg) {
-    var channel = msg.channel,
-        message = msg.message;
+  subscriber.set(topics.SEND_MESSAGE_START, pubSub.subscribe(topics.SEND_MESSAGE_START, msg => {
+    const {
+      channel,
+      message
+    } = msg;
 
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
@@ -133,9 +136,11 @@ var pubSubHandler = function pubSubHandler(channelUrl, pubSub, dispatcher) {
       });
     }
   }));
-  subscriber.set(topics.SEND_FILE_MESSAGE, pubSub.subscribe(topics.SEND_FILE_MESSAGE, function (msg) {
-    var channel = msg.channel,
-        message = msg.message;
+  subscriber.set(topics.SEND_FILE_MESSAGE, pubSub.subscribe(topics.SEND_FILE_MESSAGE, msg => {
+    const {
+      channel,
+      message
+    } = msg;
     scrollIntoLast();
 
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
@@ -145,24 +150,28 @@ var pubSubHandler = function pubSubHandler(channelUrl, pubSub, dispatcher) {
       });
     }
   }));
-  subscriber.set(topics.UPDATE_USER_MESSAGE, pubSub.subscribe(topics.UPDATE_USER_MESSAGE, function (msg) {
-    var channel = msg.channel,
-        message = msg.message,
-        fromSelector = msg.fromSelector;
+  subscriber.set(topics.UPDATE_USER_MESSAGE, pubSub.subscribe(topics.UPDATE_USER_MESSAGE, msg => {
+    const {
+      channel,
+      message,
+      fromSelector
+    } = msg;
 
     if (fromSelector && channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
         type: ON_MESSAGE_UPDATED,
         payload: {
-          channel: channel,
-          message: message
+          channel,
+          message
         }
       });
     }
   }));
-  subscriber.set(topics.DELETE_MESSAGE, pubSub.subscribe(topics.DELETE_MESSAGE, function (msg) {
-    var channel = msg.channel,
-        messageId = msg.messageId;
+  subscriber.set(topics.DELETE_MESSAGE, pubSub.subscribe(topics.DELETE_MESSAGE, msg => {
+    const {
+      channel,
+      messageId
+    } = msg;
 
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
@@ -173,73 +182,79 @@ var pubSubHandler = function pubSubHandler(channelUrl, pubSub, dispatcher) {
   }));
   return subscriber;
 };
-var isOperator = function isOperator() {
-  var groupChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var myRole = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myRole;
+const isOperator = function () {
+  let groupChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const myRole = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myRole;
   return myRole === 'operator';
 };
-var isDisabledBecauseFrozen = function isDisabledBecauseFrozen() {
-  var groupChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var isFrozen = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.isFrozen;
+const isDisabledBecauseFrozen = function () {
+  let groupChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const isFrozen = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.isFrozen;
   return isFrozen && !isOperator(groupChannel);
 };
-var isDisabledBecauseMuted = function isDisabledBecauseMuted() {
-  var groupChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var myMutedState = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myMutedState;
+const isDisabledBecauseMuted = function () {
+  let groupChannel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const myMutedState = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myMutedState;
   return myMutedState === 'muted';
 };
-var getAllEmojisFromEmojiContainer = function getAllEmojisFromEmojiContainer() {
-  var emojiContainer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _emojiContainer$emoji = emojiContainer.emojiCategories,
-      emojiCategories = _emojiContainer$emoji === void 0 ? [] : _emojiContainer$emoji;
-  var allEmojis = [];
-
-  for (var categoryIndex = 0; categoryIndex < emojiCategories.length; categoryIndex += 1) {
-    var emojis = emojiCategories[categoryIndex].emojis;
-
-    for (var emojiIndex = 0; emojiIndex < emojis.length; emojiIndex += 1) {
+const getAllEmojisFromEmojiContainer = function () {
+  let emojiContainer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    emojiCategories = []
+  } = emojiContainer;
+  const allEmojis = [];
+
+  for (let categoryIndex = 0; categoryIndex < emojiCategories.length; categoryIndex += 1) {
+    const {
+      emojis
+    } = emojiCategories[categoryIndex];
+
+    for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex += 1) {
       allEmojis.push(emojis[emojiIndex]);
     }
   }
 
   return allEmojis;
 };
-var getAllEmojisMapFromEmojiContainer = function getAllEmojisMapFromEmojiContainer() {
-  var emojiContainer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _emojiContainer$emoji2 = emojiContainer.emojiCategories,
-      emojiCategories = _emojiContainer$emoji2 === void 0 ? [] : _emojiContainer$emoji2;
-  var allEmojisMap = new Map();
-
-  for (var categoryIndex = 0; categoryIndex < emojiCategories.length; categoryIndex += 1) {
-    var emojis = emojiCategories[categoryIndex].emojis;
-
-    for (var emojiIndex = 0; emojiIndex < emojis.length; emojiIndex += 1) {
-      var _emojis$emojiIndex = emojis[emojiIndex],
-          key = _emojis$emojiIndex.key,
-          url = _emojis$emojiIndex.url;
+const getAllEmojisMapFromEmojiContainer = function () {
+  let emojiContainer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    emojiCategories = []
+  } = emojiContainer;
+  const allEmojisMap = new Map();
+
+  for (let categoryIndex = 0; categoryIndex < emojiCategories.length; categoryIndex += 1) {
+    const {
+      emojis
+    } = emojiCategories[categoryIndex];
+
+    for (let emojiIndex = 0; emojiIndex < emojis.length; emojiIndex += 1) {
+      const {
+        key,
+        url
+      } = emojis[emojiIndex];
       allEmojisMap.set(key, url);
     }
   }
 
   return allEmojisMap;
 };
-var getNicknamesMapFromMembers = function getNicknamesMapFromMembers() {
-  var members = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var nicknamesMap = new Map();
-
-  for (var memberIndex = 0; memberIndex < members.length; memberIndex += 1) {
-    var _members$memberIndex = members[memberIndex],
-        userId = _members$memberIndex.userId,
-        nickname = _members$memberIndex.nickname;
+const getNicknamesMapFromMembers = function () {
+  let members = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const nicknamesMap = new Map();
+
+  for (let memberIndex = 0; memberIndex < members.length; memberIndex += 1) {
+    const {
+      userId,
+      nickname
+    } = members[memberIndex];
     nicknamesMap.set(userId, nickname);
   }
 
   return nicknamesMap;
 };
-var getMessageCreatedAt = function getMessageCreatedAt(message) {
-  return index$1.format(message.createdAt, 'p');
-};
-var isSameGroup = function isSameGroup(message, comparingMessage, currentChannel) {
+const getMessageCreatedAt = message => index$1.format(message.createdAt, 'p');
+const isSameGroup = (message, comparingMessage, currentChannel) => {
   var _message$sender, _comparingMessage$sen, _message$sender2, _comparingMessage$sen2;
 
   if (!(message && comparingMessage && message.messageType && message.messageType !== 'admin' && comparingMessage.messageType && (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.messageType) !== 'admin' && message !== null && message !== void 0 && message.sender && comparingMessage !== null && comparingMessage !== void 0 && comparingMessage.sender && message !== null && message !== void 0 && message.createdAt && comparingMessage !== null && comparingMessage !== void 0 && comparingMessage.createdAt && message !== null && message !== void 0 && (_message$sender = message.sender) !== null && _message$sender !== void 0 && _message$sender.userId && comparingMessage !== null && comparingMessage !== void 0 && (_comparingMessage$sen = comparingMessage.sender) !== null && _comparingMessage$sen !== void 0 && _comparingMessage$sen.userId)) {
@@ -248,37 +263,35 @@ var isSameGroup = function isSameGroup(message, comparingMessage, currentChannel
 
   return (message === null || message === void 0 ? void 0 : message.sendingStatus) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : comparingMessage.sendingStatus) && (message === null || message === void 0 ? void 0 : (_message$sender2 = message.sender) === null || _message$sender2 === void 0 ? void 0 : _message$sender2.userId) === (comparingMessage === null || comparingMessage === void 0 ? void 0 : (_comparingMessage$sen2 = comparingMessage.sender) === null || _comparingMessage$sen2 === void 0 ? void 0 : _comparingMessage$sen2.userId) && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage) && index.isReadMessage(currentChannel, message) === index.isReadMessage(currentChannel, comparingMessage);
 };
-var compareMessagesForGrouping = function compareMessagesForGrouping(prevMessage, currMessage, nextMessage, currentChannel) {
-  var sendingStatus = (currMessage === null || currMessage === void 0 ? void 0 : currMessage.sendingStatus) || '';
-  var isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
+const compareMessagesForGrouping = (prevMessage, currMessage, nextMessage, currentChannel) => {
+  const sendingStatus = (currMessage === null || currMessage === void 0 ? void 0 : currMessage.sendingStatus) || '';
+  const isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
   return [isSameGroup(prevMessage, currMessage, currentChannel) && isAcceptable, isSameGroup(currMessage, nextMessage, currentChannel) && isAcceptable];
 };
-var passUnsuccessfullMessages = function passUnsuccessfullMessages(allMessages, newMessage) {
-  var _newMessage$sendingSt = newMessage.sendingStatus,
-      sendingStatus = _newMessage$sendingSt === void 0 ? UNDEFINED : _newMessage$sendingSt;
+const passUnsuccessfullMessages = (allMessages, newMessage) => {
+  const {
+    sendingStatus = UNDEFINED
+  } = newMessage;
 
   if (sendingStatus === SUCCEEDED$1 || sendingStatus === PENDING$1) {
-    var lastIndexOfSucceededMessage = allMessages.map(function (message) {
-      return message.sendingStatus || (message.isAdminMessage && message.isAdminMessage() ? SUCCEEDED$1 : UNDEFINED);
-    }).lastIndexOf(SUCCEEDED$1);
+    const lastIndexOfSucceededMessage = allMessages.map(message => message.sendingStatus || (message.isAdminMessage && message.isAdminMessage() ? SUCCEEDED$1 : UNDEFINED)).lastIndexOf(SUCCEEDED$1);
 
     if (lastIndexOfSucceededMessage + 1 < allMessages.length) {
-      var messages = _rollupPluginBabelHelpers._toConsumableArray(allMessages);
-
+      const messages = [...allMessages];
       messages.splice(lastIndexOfSucceededMessage + 1, 0, newMessage);
       return messages;
     }
   }
 
-  return [].concat(_rollupPluginBabelHelpers._toConsumableArray(allMessages), [newMessage]);
+  return [...allMessages, newMessage];
 };
-var pxToNumber = function pxToNumber(px) {
+const pxToNumber = px => {
   if (typeof px === 'number') {
     return px;
   }
 
   if (typeof px === 'string') {
-    var parsed = Number.parseFloat(px);
+    const parsed = Number.parseFloat(px);
 
     if (!Number.isNaN(parsed)) {
       return parsed;
@@ -287,9 +300,7 @@ var pxToNumber = function pxToNumber(px) {
 
   return null;
 };
-var isAboutSame = function isAboutSame(a, b, px) {
-  return Math.abs(a - b) <= px;
-};
+const isAboutSame = (a, b, px) => Math.abs(a - b) <= px;
 
 var messagesInitialState = {
   initialized: false,
@@ -313,25 +324,26 @@ var messagesInitialState = {
   messageListParams: null
 };
 
-var _getSendingMessageSta = index.getSendingMessageStatus(),
-    SUCCEEDED = _getSendingMessageSta.SUCCEEDED,
-    FAILED = _getSendingMessageSta.FAILED,
-    PENDING = _getSendingMessageSta.PENDING;
+const {
+  SUCCEEDED,
+  FAILED,
+  PENDING
+} = index.getSendingMessageStatus();
 
-var getOldestMessageTimeStamp = function getOldestMessageTimeStamp() {
-  var messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var oldestMessage = messages[0];
+const getOldestMessageTimeStamp = function () {
+  let messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const oldestMessage = messages[0];
   return oldestMessage && oldestMessage.createdAt || null;
 };
 
-var getLatestMessageTimeStamp = function getLatestMessageTimeStamp() {
-  var messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var latestMessage = messages[messages.length - 1];
+const getLatestMessageTimeStamp = function () {
+  let messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const latestMessage = messages[messages.length - 1];
   return latestMessage && latestMessage.createdAt || null;
 };
 
 function reducer(state, action) {
-  var _state$currentGroupCh8, _action$payload7, _action$payload7$chan;
+  var _state$currentGroupCh7, _action$payload, _action$payload$chann;
 
   switch (action.type) {
     case RESET_MESSAGES:
@@ -347,9 +359,7 @@ function reducer(state, action) {
       {
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
           loading: true,
-          allMessages: _rollupPluginBabelHelpers._toConsumableArray(state.allMessages.filter(function (m) {
-            return m.sendingStatus !== SUCCEEDED;
-          }))
+          allMessages: [...state.allMessages.filter(m => m.sendingStatus !== SUCCEEDED)]
         });
       }
 
@@ -357,24 +367,25 @@ function reducer(state, action) {
       {
         var _state$currentGroupCh;
 
-        var _action$payload = action.payload,
-            currentGroupChannel = _action$payload.currentGroupChannel,
-            messages = _action$payload.messages;
+        const {
+          currentGroupChannel,
+          messages
+        } = action.payload;
 
         if (!((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) === ((_state$currentGroupCh = state.currentGroupChannel) === null || _state$currentGroupCh === void 0 ? void 0 : _state$currentGroupCh.url))) {
           return state;
         }
 
-        var oldestMessageTimeStamp = getOldestMessageTimeStamp(messages);
-        var latestMessageTimeStamp = getLatestMessageTimeStamp(messages);
+        const oldestMessageTimeStamp = getOldestMessageTimeStamp(messages);
+        const latestMessageTimeStamp = getLatestMessageTimeStamp(messages);
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
           loading: false,
           initialized: true,
           hasMorePrev: true,
           hasMoreNext: true,
-          oldestMessageTimeStamp: oldestMessageTimeStamp,
-          latestMessageTimeStamp: latestMessageTimeStamp,
-          allMessages: _rollupPluginBabelHelpers._toConsumableArray(messages)
+          oldestMessageTimeStamp,
+          latestMessageTimeStamp,
+          allMessages: [...messages]
         });
       }
 
@@ -382,23 +393,24 @@ function reducer(state, action) {
       {
         var _state$currentGroupCh2;
 
-        var _action$payload2 = action.payload,
-            _currentGroupChannel = _action$payload2.currentGroupChannel,
-            _messages = _action$payload2.messages;
+        const {
+          currentGroupChannel,
+          messages
+        } = action.payload;
 
-        if (!((_currentGroupChannel === null || _currentGroupChannel === void 0 ? void 0 : _currentGroupChannel.url) === ((_state$currentGroupCh2 = state.currentGroupChannel) === null || _state$currentGroupCh2 === void 0 ? void 0 : _state$currentGroupCh2.url))) {
+        if (!((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) === ((_state$currentGroupCh2 = state.currentGroupChannel) === null || _state$currentGroupCh2 === void 0 ? void 0 : _state$currentGroupCh2.url))) {
           return state;
         }
 
-        var hasMorePrev = _messages && _messages.length === _const.PREV_RESULT_SIZE + 1;
-
-        var _oldestMessageTimeStamp = getOldestMessageTimeStamp(_messages); // Remove duplicated messages
+        const hasMorePrev = messages && messages.length === _const.PREV_RESULT_SIZE + 1;
+        const oldestMessageTimeStamp = getOldestMessageTimeStamp(messages); // Remove duplicated messages
 
-
-        var duplicatedMessageIds = [];
-        var updatedOldMessages = state.allMessages.map(function (msg) {
-          var duplicatedMessage = _messages.find(function (_ref) {
-            var messageId = _ref.messageId;
+        const duplicatedMessageIds = [];
+        const updatedOldMessages = state.allMessages.map(msg => {
+          const duplicatedMessage = messages.find(_ref => {
+            let {
+              messageId
+            } = _ref;
             return compareIds.compareIds(messageId, msg.messageId);
           });
 
@@ -409,15 +421,11 @@ function reducer(state, action) {
           duplicatedMessageIds.push(duplicatedMessage.messageId);
           return duplicatedMessage.updatedAt > msg.updatedAt ? duplicatedMessage : msg;
         });
-        var filteredNewMessages = duplicatedMessageIds.length > 0 ? _messages.filter(function (msg) {
-          return !duplicatedMessageIds.find(function (messageId) {
-            return compareIds.compareIds(messageId, msg.messageId);
-          });
-        }) : _messages;
+        const filteredNewMessages = duplicatedMessageIds.length > 0 ? messages.filter(msg => !duplicatedMessageIds.find(messageId => compareIds.compareIds(messageId, msg.messageId))) : messages;
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-          hasMorePrev: hasMorePrev,
-          oldestMessageTimeStamp: _oldestMessageTimeStamp,
-          allMessages: [].concat(_rollupPluginBabelHelpers._toConsumableArray(filteredNewMessages), _rollupPluginBabelHelpers._toConsumableArray(updatedOldMessages))
+          hasMorePrev,
+          oldestMessageTimeStamp,
+          allMessages: [...filteredNewMessages, ...updatedOldMessages]
         });
       }
 
@@ -425,24 +433,24 @@ function reducer(state, action) {
       {
         var _state$currentGroupCh3;
 
-        var _action$payload3 = action.payload,
-            _currentGroupChannel2 = _action$payload3.currentGroupChannel,
-            _messages2 = _action$payload3.messages;
+        const {
+          currentGroupChannel,
+          messages
+        } = action.payload;
 
-        if (!((_currentGroupChannel2 === null || _currentGroupChannel2 === void 0 ? void 0 : _currentGroupChannel2.url) === ((_state$currentGroupCh3 = state.currentGroupChannel) === null || _state$currentGroupCh3 === void 0 ? void 0 : _state$currentGroupCh3.url))) {
+        if (!((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) === ((_state$currentGroupCh3 = state.currentGroupChannel) === null || _state$currentGroupCh3 === void 0 ? void 0 : _state$currentGroupCh3.url))) {
           return state;
         }
 
-        var hasMoreNext = _messages2 && _messages2.length === _const.NEXT_RESULT_SIZE + 1;
-
-        var _latestMessageTimeStamp = getLatestMessageTimeStamp(_messages2); // Remove duplicated messages
-
+        const hasMoreNext = messages && messages.length === _const.NEXT_RESULT_SIZE + 1;
+        const latestMessageTimeStamp = getLatestMessageTimeStamp(messages); // Remove duplicated messages
 
-        var _duplicatedMessageIds = [];
-
-        var _updatedOldMessages = state.allMessages.map(function (msg) {
-          var duplicatedMessage = _messages2.find(function (_ref2) {
-            var messageId = _ref2.messageId;
+        const duplicatedMessageIds = [];
+        const updatedOldMessages = state.allMessages.map(msg => {
+          const duplicatedMessage = messages.find(_ref2 => {
+            let {
+              messageId
+            } = _ref2;
             return compareIds.compareIds(messageId, msg.messageId);
           });
 
@@ -450,21 +458,14 @@ function reducer(state, action) {
             return msg;
           }
 
-          _duplicatedMessageIds.push(duplicatedMessage.messageId);
-
+          duplicatedMessageIds.push(duplicatedMessage.messageId);
           return duplicatedMessage.updatedAt > msg.updatedAt ? duplicatedMessage : msg;
         });
-
-        var _filteredNewMessages = _duplicatedMessageIds.length > 0 ? _messages2.filter(function (msg) {
-          return !_duplicatedMessageIds.find(function (messageId) {
-            return compareIds.compareIds(messageId, msg.messageId);
-          });
-        }) : _messages2;
-
+        const filteredNewMessages = duplicatedMessageIds.length > 0 ? messages.filter(msg => !duplicatedMessageIds.find(messageId => compareIds.compareIds(messageId, msg.messageId))) : messages;
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-          hasMoreNext: hasMoreNext,
-          latestMessageTimeStamp: _latestMessageTimeStamp,
-          allMessages: [].concat(_rollupPluginBabelHelpers._toConsumableArray(_updatedOldMessages), _rollupPluginBabelHelpers._toConsumableArray(_filteredNewMessages))
+          hasMoreNext,
+          latestMessageTimeStamp,
+          allMessages: [...updatedOldMessages, ...filteredNewMessages]
         });
       }
 
@@ -474,9 +475,11 @@ function reducer(state, action) {
       {
         var _state$currentGroupCh4;
 
-        var _currentGroupChannel3 = action.payload.currentGroupChannel;
+        const {
+          currentGroupChannel
+        } = action.payload;
 
-        if ((_currentGroupChannel3 === null || _currentGroupChannel3 === void 0 ? void 0 : _currentGroupChannel3.url) !== (state === null || state === void 0 ? void 0 : (_state$currentGroupCh4 = state.currentGroupChannel) === null || _state$currentGroupCh4 === void 0 ? void 0 : _state$currentGroupCh4.url)) {
+        if ((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) !== (state === null || state === void 0 ? void 0 : (_state$currentGroupCh4 = state.currentGroupChannel) === null || _state$currentGroupCh4 === void 0 ? void 0 : _state$currentGroupCh4.url)) {
           return state;
         }
 
@@ -493,19 +496,13 @@ function reducer(state, action) {
 
     case SEND_MESSAGEGE_START:
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        allMessages: [].concat(_rollupPluginBabelHelpers._toConsumableArray(state.allMessages), [_rollupPluginBabelHelpers._objectSpread2({}, action.payload)])
+        allMessages: [...state.allMessages, _rollupPluginBabelHelpers._objectSpread2({}, action.payload)]
       });
 
     case SEND_MESSAGEGE_SUCESS:
       {
-        var newMessages = state.allMessages.map(function (m) {
-          return compareIds.compareIds(m.reqId, action.payload.reqId) ? action.payload : m;
-        });
-
-        _rollupPluginBabelHelpers._toConsumableArray(newMessages).sort(function (a, b) {
-          return a.sendingStatus && b.sendingStatus && a.sendingStatus === SUCCEEDED && (b.sendingStatus === PENDING || b.sendingStatus === FAILED) ? -1 : 1;
-        });
-
+        const newMessages = state.allMessages.map(m => compareIds.compareIds(m.reqId, action.payload.reqId) ? action.payload : m);
+        [...newMessages].sort((a, b) => a.sendingStatus && b.sendingStatus && a.sendingStatus === SUCCEEDED && (b.sendingStatus === PENDING || b.sendingStatus === FAILED) ? -1 : 1);
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
           allMessages: newMessages
         });
@@ -516,9 +513,7 @@ function reducer(state, action) {
         // eslint-disable-next-line no-param-reassign
         action.payload.failed = true;
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-          allMessages: state.allMessages.map(function (m) {
-            return compareIds.compareIds(m.reqId, action.payload.reqId) ? action.payload : m;
-          })
+          allMessages: state.allMessages.map(m => compareIds.compareIds(m.reqId, action.payload.reqId) ? action.payload : m)
         });
       }
 
@@ -539,26 +534,28 @@ function reducer(state, action) {
 
     case ON_MESSAGE_RECEIVED:
       {
-        var _action$payload4 = action.payload,
-            channel = _action$payload4.channel,
-            message = _action$payload4.message;
-        var members = channel.members;
-        var sender = message.sender;
-
-        var _state$currentGroupCh5 = state.currentGroupChannel,
-            _currentGroupChannel4 = _state$currentGroupCh5 === void 0 ? {} : _state$currentGroupCh5,
-            unreadSince = state.unreadSince;
-
-        var currentGroupChannelUrl = _currentGroupChannel4 === null || _currentGroupChannel4 === void 0 ? void 0 : _currentGroupChannel4.url;
+        const {
+          channel,
+          message
+        } = action.payload;
+        const {
+          members
+        } = channel;
+        const {
+          sender
+        } = message;
+        const {
+          currentGroupChannel = {},
+          unreadSince
+        } = state;
+        const currentGroupChannelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
 
         if (!compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, currentGroupChannelUrl)) {
           return state;
         } // Excluded overlapping messages
 
 
-        if (state.allMessages.some(function (msg) {
-          return msg.messageId === message.messageId;
-        })) {
+        if (state.allMessages.some(msg => msg.messageId === message.messageId)) {
           return state;
         } // Filter by userFilledQuery
 
@@ -574,12 +571,10 @@ function reducer(state, action) {
         } // Update members when sender profileUrl, nickname, friendName has been changed
 
 
-        var senderMember = members === null || members === void 0 ? void 0 : members.find(function (m) {
-          return (m === null || m === void 0 ? void 0 : m.userId) === (sender === null || sender === void 0 ? void 0 : sender.userId);
-        });
+        const senderMember = members === null || members === void 0 ? void 0 : members.find(m => (m === null || m === void 0 ? void 0 : m.userId) === (sender === null || sender === void 0 ? void 0 : sender.userId));
 
         if ((senderMember === null || senderMember === void 0 ? void 0 : senderMember.profileUrl) !== (sender === null || sender === void 0 ? void 0 : sender.profileUrl) || (senderMember === null || senderMember === void 0 ? void 0 : senderMember.friendName) !== (sender === null || sender === void 0 ? void 0 : sender.friendName) || (senderMember === null || senderMember === void 0 ? void 0 : senderMember.nickname) !== (sender === null || sender === void 0 ? void 0 : sender.nickname)) {
-          channel.members = members.map(function (member) {
+          channel.members = members.map(member => {
             if (member.userId === sender.userId) {
               return sender;
             }
@@ -597,35 +592,33 @@ function reducer(state, action) {
 
     case ON_MESSAGE_UPDATED:
       {
-        var _state$currentGroupCh6;
-
-        var _action$payload5 = action.payload,
-            _channel = _action$payload5.channel,
-            _message = _action$payload5.message;
+        var _state$currentGroupCh5;
 
-        var _currentGroupChannelUrl = (state === null || state === void 0 ? void 0 : (_state$currentGroupCh6 = state.currentGroupChannel) === null || _state$currentGroupCh6 === void 0 ? void 0 : _state$currentGroupCh6.url) || '';
+        const {
+          channel,
+          message
+        } = action.payload;
+        const currentGroupChannelUrl = (state === null || state === void 0 ? void 0 : (_state$currentGroupCh5 = state.currentGroupChannel) === null || _state$currentGroupCh5 === void 0 ? void 0 : _state$currentGroupCh5.url) || '';
 
-        if (!compareIds.compareIds(_channel === null || _channel === void 0 ? void 0 : _channel.url, _currentGroupChannelUrl)) {
+        if (!compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, currentGroupChannelUrl)) {
           return state; // Ignore event when it is not for the current channel
         }
 
-        if (state.messageListParams && !index.filterMessageListParams(state.messageListParams, _message)) {
+        if (state.messageListParams && !index.filterMessageListParams(state.messageListParams, message)) {
           // Delete the message if it doesn't match to the params anymore
           return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-            allMessages: state.allMessages.filter(function (m) {
-              return !compareIds.compareIds(m.messageId, _message === null || _message === void 0 ? void 0 : _message.messageId);
-            })
+            allMessages: state.allMessages.filter(m => !compareIds.compareIds(m.messageId, message === null || message === void 0 ? void 0 : message.messageId))
           });
         }
 
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-          allMessages: state.allMessages.map(function (m) {
-            if (compareIds.compareIds(m.messageId, _message.messageId)) {
-              return _message;
+          allMessages: state.allMessages.map(m => {
+            if (compareIds.compareIds(m.messageId, message.messageId)) {
+              return message;
             }
 
-            if (compareIds.compareIds(m.parentMessageId, _message.messageId)) {
-              m.parentMessage = _message; // eslint-disable-line no-param-reassign
+            if (compareIds.compareIds(m.parentMessageId, message.messageId)) {
+              m.parentMessage = message; // eslint-disable-line no-param-reassign
             }
 
             return m;
@@ -635,23 +628,25 @@ function reducer(state, action) {
 
     case ON_MESSAGE_THREAD_INFO_UPDATED:
       {
-        var _state$currentGroupCh7;
-
-        var _action$payload6 = action.payload,
-            _channel2 = _action$payload6.channel,
-            event = _action$payload6.event;
-        var channelUrl = event.channelUrl,
-            threadInfo = event.threadInfo,
-            targetMessageId = event.targetMessageId;
-
-        var _currentGroupChannelUrl2 = (state === null || state === void 0 ? void 0 : (_state$currentGroupCh7 = state.currentGroupChannel) === null || _state$currentGroupCh7 === void 0 ? void 0 : _state$currentGroupCh7.url) || '';
+        var _state$currentGroupCh6;
 
-        if (!compareIds.compareIds(_channel2 === null || _channel2 === void 0 ? void 0 : _channel2.url, _currentGroupChannelUrl2) || !compareIds.compareIds(_channel2 === null || _channel2 === void 0 ? void 0 : _channel2.url, channelUrl)) {
+        const {
+          channel,
+          event
+        } = action.payload;
+        const {
+          channelUrl,
+          threadInfo,
+          targetMessageId
+        } = event;
+        const currentGroupChannelUrl = (state === null || state === void 0 ? void 0 : (_state$currentGroupCh6 = state.currentGroupChannel) === null || _state$currentGroupCh6 === void 0 ? void 0 : _state$currentGroupCh6.url) || '';
+
+        if (!compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, currentGroupChannelUrl) || !compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
           return state; // Ignore event when it is not for the current channel
         }
 
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-          allMessages: state.allMessages.map(function (m) {
+          allMessages: state.allMessages.map(m => {
             if (compareIds.compareIds(m.messageId, targetMessageId)) {
               // eslint-disable-next-line no-param-reassign
               m.threadInfo = threadInfo; // Upsert threadInfo to the target message
@@ -664,13 +659,11 @@ function reducer(state, action) {
 
     case RESEND_MESSAGEGE_START:
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        allMessages: state.allMessages.map(function (m) {
-          return compareIds.compareIds(m.reqId, action.payload.reqId) ? action.payload : m;
-        })
+        allMessages: state.allMessages.map(m => compareIds.compareIds(m.reqId, action.payload.reqId) ? action.payload : m)
       });
 
     case MARK_AS_READ:
-      if (((_state$currentGroupCh8 = state.currentGroupChannel) === null || _state$currentGroupCh8 === void 0 ? void 0 : _state$currentGroupCh8.url) !== ((_action$payload7 = action.payload) === null || _action$payload7 === void 0 ? void 0 : (_action$payload7$chan = _action$payload7.channel) === null || _action$payload7$chan === void 0 ? void 0 : _action$payload7$chan.url)) {
+      if (((_state$currentGroupCh7 = state.currentGroupChannel) === null || _state$currentGroupCh7 === void 0 ? void 0 : _state$currentGroupCh7.url) !== ((_action$payload = action.payload) === null || _action$payload === void 0 ? void 0 : (_action$payload$chann = _action$payload.channel) === null || _action$payload$chann === void 0 ? void 0 : _action$payload$chann.url)) {
         return state;
       }
 
@@ -680,16 +673,12 @@ function reducer(state, action) {
 
     case ON_MESSAGE_DELETED:
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        allMessages: state.allMessages.filter(function (m) {
-          return !compareIds.compareIds(m.messageId, action.payload);
-        })
+        allMessages: state.allMessages.filter(m => !compareIds.compareIds(m.messageId, action.payload))
       });
 
     case ON_MESSAGE_DELETED_BY_REQ_ID:
       return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-        allMessages: state.allMessages.filter(function (m) {
-          return !compareIds.compareIds(m.reqId, action.payload);
-        })
+        allMessages: state.allMessages.filter(m => !compareIds.compareIds(m.reqId, action.payload))
       });
 
     case SET_EMOJI_CONTAINER:
@@ -702,7 +691,7 @@ function reducer(state, action) {
     case ON_REACTION_UPDATED:
       {
         return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, state), {}, {
-          allMessages: state.allMessages.map(function (m) {
+          allMessages: state.allMessages.map(m => {
             if (compareIds.compareIds(m.messageId, action.payload.messageId)) {
               if (m.applyReactionEvent && typeof m.applyReactionEvent === 'function') {
                 m.applyReactionEvent(action.payload);
@@ -745,7 +734,7 @@ function useHandleChannelEvents(_a, _b) {
 
     if (channelUrl && sdkInit) {
       var channelHandler = {
-        onMessageReceived: function onMessageReceived(channel, message) {
+        onMessageReceived: function (channel, message) {
           // Do not update when hasMoreNext
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl) && !hasMoreNext) {
             var scrollToEnd = false;
@@ -779,7 +768,7 @@ function useHandleChannelEvents(_a, _b) {
             }
           }
         },
-        onUnreadMemberStatusUpdated: function onUnreadMemberStatusUpdated(channel) {
+        onUnreadMemberStatusUpdated: function (channel) {
           logger.info('Channel | useHandleChannelEvents: onUnreadMemberStatusUpdated', channel);
 
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
@@ -790,7 +779,7 @@ function useHandleChannelEvents(_a, _b) {
           }
         },
         // before(onDeliveryReceiptUpdated)
-        onUndeliveredMemberStatusUpdated: function onUndeliveredMemberStatusUpdated(channel) {
+        onUndeliveredMemberStatusUpdated: function (channel) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onDeliveryReceiptUpdated', channel);
             messagesDispatcher({
@@ -799,7 +788,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onMessageUpdated: function onMessageUpdated(channel, message) {
+        onMessageUpdated: function (channel, message) {
           logger.info('Channel | useHandleChannelEvents: onMessageUpdated', message);
           messagesDispatcher({
             type: ON_MESSAGE_UPDATED,
@@ -809,7 +798,7 @@ function useHandleChannelEvents(_a, _b) {
             }
           });
         },
-        onThreadInfoUpdated: function onThreadInfoUpdated(channel, threadInfoUpdateEvent) {
+        onThreadInfoUpdated: function (channel, threadInfoUpdateEvent) {
           logger.info('Channel | useHandleChannelEvents: onThreadInfoUpdated', {
             channel: channel,
             threadInfoUpdateEvent: threadInfoUpdateEvent
@@ -822,7 +811,7 @@ function useHandleChannelEvents(_a, _b) {
             }
           });
         },
-        onMessageDeleted: function onMessageDeleted(channel, messageId) {
+        onMessageDeleted: function (channel, messageId) {
           logger.info('Channel | useHandleChannelEvents: onMessageDeleted', {
             channel: channel,
             messageId: messageId
@@ -833,7 +822,7 @@ function useHandleChannelEvents(_a, _b) {
             payload: messageId
           });
         },
-        onReactionUpdated: function onReactionUpdated(channel, reactionEvent) {
+        onReactionUpdated: function (channel, reactionEvent) {
           logger.info('Channel | useHandleChannelEvents: onReactionUpdated', {
             channel: channel,
             reactionEvent: reactionEvent
@@ -843,7 +832,7 @@ function useHandleChannelEvents(_a, _b) {
             payload: reactionEvent
           });
         },
-        onChannelChanged: function onChannelChanged(channel) {
+        onChannelChanged: function (channel) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onChannelChanged', channel);
             messagesDispatcher({
@@ -852,7 +841,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onChannelFrozen: function onChannelFrozen(channel) {
+        onChannelFrozen: function (channel) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onChannelFrozen', channel);
             messagesDispatcher({
@@ -861,7 +850,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onChannelUnfrozen: function onChannelUnfrozen(channel) {
+        onChannelUnfrozen: function (channel) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onChannelUnFrozen', channel);
             messagesDispatcher({
@@ -870,7 +859,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserMuted: function onUserMuted(channel, user) {
+        onUserMuted: function (channel, user) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onUserMuted', {
               channel: channel,
@@ -882,7 +871,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserUnmuted: function onUserUnmuted(channel, user) {
+        onUserUnmuted: function (channel, user) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onUserUnmuted', {
               channel: channel,
@@ -894,7 +883,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserBanned: function onUserBanned(channel, user) {
+        onUserBanned: function (channel, user) {
           var _a;
 
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl) && (user === null || user === void 0 ? void 0 : user.userId) === ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId)) {
@@ -908,7 +897,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onOperatorUpdated: function onOperatorUpdated(channel, users) {
+        onOperatorUpdated: function (channel, users) {
           if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onOperatorUpdated', {
               channel: channel,
@@ -923,7 +912,7 @@ function useHandleChannelEvents(_a, _b) {
       };
       logger.info('Channel | useHandleChannelEvents: Setup event handler', channelHandlerId); // Add this group channel handler to the Sendbird chat instance
 
-      (_a = sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler(channelHandlerId, new groupChannel.Yr(channelHandler));
+      (_a = sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler(channelHandlerId, new groupChannel.Jr(channelHandler));
     }
 
     return function () {
@@ -940,15 +929,19 @@ function useHandleChannelEvents(_a, _b) {
 }
 
 function useSetChannel(_ref, _ref2) {
-  var channelUrl = _ref.channelUrl,
-      sdkInit = _ref.sdkInit;
-  var messagesDispatcher = _ref2.messagesDispatcher,
-      sdk = _ref2.sdk,
-      logger = _ref2.logger;
-  React.useEffect(function () {
+  let {
+    channelUrl,
+    sdkInit
+  } = _ref;
+  let {
+    messagesDispatcher,
+    sdk,
+    logger
+  } = _ref2;
+  React.useEffect(() => {
     if (channelUrl && sdkInit && sdk && sdk.groupChannel) {
       logger.info('Channel | useSetChannel fetching channel', channelUrl);
-      sdk.groupChannel.getChannel(channelUrl).then(function (groupChannel) {
+      sdk.groupChannel.getChannel(channelUrl).then(groupChannel => {
         logger.info('Channel | useSetChannel fetched channel', groupChannel);
         messagesDispatcher({
           type: SET_CURRENT_CHANNEL,
@@ -960,22 +953,22 @@ function useSetChannel(_ref, _ref2) {
           groupChannel.markAsRead();
         } catch (_unused) {//
         }
-      }).catch(function (e) {
+      }).catch(e => {
         logger.warning('Channel | useSetChannel fetch channel failed', {
-          channelUrl: channelUrl,
-          e: e
+          channelUrl,
+          e
         });
         messagesDispatcher({
           type: SET_CHANNEL_INVALID
         });
       });
-      sdk.getAllEmoji().then(function (emojiContainer_) {
+      sdk.getAllEmoji().then(emojiContainer_ => {
         logger.info('Channel: Getting emojis success', emojiContainer_);
         messagesDispatcher({
           type: SET_EMOJI_CONTAINER,
           payload: emojiContainer_
         });
-      }).catch(function (err) {
+      }).catch(err => {
         logger.error('Channel: Getting emojis failed', err);
       });
       sdk.getAllEmoji();
@@ -984,14 +977,18 @@ function useSetChannel(_ref, _ref2) {
 }
 
 function useInitialMessagesFetch(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      userFilledMessageListQuery = _ref.userFilledMessageListQuery,
-      initialTimeStamp = _ref.initialTimeStamp,
-      replyType = _ref.replyType;
-  var logger = _ref2.logger,
-      messagesDispatcher = _ref2.messagesDispatcher;
-  var channelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
-  React.useEffect(function () {
+  let {
+    currentGroupChannel,
+    userFilledMessageListQuery,
+    initialTimeStamp,
+    replyType
+  } = _ref;
+  let {
+    logger,
+    messagesDispatcher
+  } = _ref2;
+  const channelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
+  React.useEffect(() => {
     logger.info('Channel useInitialMessagesFetch: Setup started', currentGroupChannel);
     messagesDispatcher({
       type: RESET_MESSAGES,
@@ -999,7 +996,7 @@ function useInitialMessagesFetch(_ref, _ref2) {
     });
 
     if (currentGroupChannel && currentGroupChannel !== null && currentGroupChannel !== void 0 && currentGroupChannel.getMessagesByTimestamp) {
-      var messageListParams = {};
+      const messageListParams = {};
       messageListParams.prevResultSize = _const.PREV_RESULT_SIZE;
 
       if (initialTimeStamp) {
@@ -1012,11 +1009,11 @@ function useInitialMessagesFetch(_ref, _ref2) {
       if (replyType && replyType === 'QUOTE_REPLY') {
         messageListParams.includeThreadInfo = true;
         messageListParams.includeParentMessageInfo = true;
-        messageListParams.replyType = __bundle6316ce22.ue.ONLY_REPLY_TO_CHANNEL;
+        messageListParams.replyType = __bundleC41dd401.ue.ONLY_REPLY_TO_CHANNEL;
       }
 
       if (userFilledMessageListQuery) {
-        Object.keys(userFilledMessageListQuery).forEach(function (key) {
+        Object.keys(userFilledMessageListQuery).forEach(key => {
           messageListParams[key] = userFilledMessageListQuery[key];
         });
       }
@@ -1030,34 +1027,32 @@ function useInitialMessagesFetch(_ref, _ref2) {
       }
 
       logger.info('Channel: Fetching messages', {
-        currentGroupChannel: currentGroupChannel,
-        userFilledMessageListQuery: userFilledMessageListQuery
+        currentGroupChannel,
+        userFilledMessageListQuery
       });
       messagesDispatcher({
         type: FETCH_INITIAL_MESSAGES_START,
         payload: null
       });
-      currentGroupChannel.getMessagesByTimestamp(initialTimeStamp || new Date().getTime(), messageListParams).then(function (messages) {
+      currentGroupChannel.getMessagesByTimestamp(initialTimeStamp || new Date().getTime(), messageListParams).then(messages => {
         messagesDispatcher({
           type: FETCH_INITIAL_MESSAGES_SUCCESS,
           payload: {
-            currentGroupChannel: currentGroupChannel,
-            messages: messages
+            currentGroupChannel,
+            messages
           }
         });
-      }).catch(function (error) {
+      }).catch(error => {
         logger.error('Channel: Fetching messages failed', error);
         messagesDispatcher({
           type: FETCH_INITIAL_MESSAGES_FAILURE,
           payload: {
-            currentGroupChannel: currentGroupChannel
+            currentGroupChannel
           }
         });
-      }).finally(function () {
+      }).finally(() => {
         if (!initialTimeStamp) {
-          setTimeout(function () {
-            return scrollIntoLast();
-          });
+          setTimeout(() => scrollIntoLast());
         }
       });
     }
@@ -1099,7 +1094,7 @@ function useHandleReconnect(_a, _b) {
         if (replyType && replyType === 'QUOTE_REPLY') {
           messageListParams_1.includeThreadInfo = true;
           messageListParams_1.includeParentMessageInfo = true;
-          messageListParams_1.replyType = __bundle6316ce22.ue.ONLY_REPLY_TO_CHANNEL;
+          messageListParams_1.replyType = __bundleC41dd401.ue.ONLY_REPLY_TO_CHANNEL;
         }
 
         if (userFilledMessageListQuery) {
@@ -1152,23 +1147,28 @@ function useHandleReconnect(_a, _b) {
 }
 
 function useScrollCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      oldestMessageTimeStamp = _ref.oldestMessageTimeStamp,
-      userFilledMessageListQuery = _ref.userFilledMessageListQuery,
-      replyType = _ref.replyType;
-  var hasMorePrev = _ref2.hasMorePrev,
-      logger = _ref2.logger,
-      messagesDispatcher = _ref2.messagesDispatcher,
-      sdk = _ref2.sdk;
-  return React.useCallback(function (cb) {
+  let {
+    currentGroupChannel,
+    oldestMessageTimeStamp,
+    userFilledMessageListQuery,
+    replyType
+  } = _ref;
+  let {
+    hasMorePrev,
+    logger,
+    messagesDispatcher,
+    sdk
+  } = _ref2;
+  return React.useCallback(cb => {
     if (!hasMorePrev) {
       return;
     }
 
-    var _sdk$appInfo = sdk.appInfo,
-        appInfo = _sdk$appInfo === void 0 ? {} : _sdk$appInfo;
-    var isReactionEnabled = appInfo.useReaction || false;
-    var messageListParams = {
+    const {
+      appInfo = {}
+    } = sdk;
+    const isReactionEnabled = appInfo.useReaction || false;
+    const messageListParams = {
       prevResultSize: _const.PREV_RESULT_SIZE,
       isInclusive: true,
       includeReactions: isReactionEnabled
@@ -1177,34 +1177,34 @@ function useScrollCallback(_ref, _ref2) {
     if (replyType && replyType === 'QUOTE_REPLY') {
       messageListParams.includeThreadInfo = true;
       messageListParams.includeParentMessageInfo = true;
-      messageListParams.replyType = __bundle6316ce22.ue.ONLY_REPLY_TO_CHANNEL;
+      messageListParams.replyType = __bundleC41dd401.ue.ONLY_REPLY_TO_CHANNEL;
     }
 
     if (userFilledMessageListQuery) {
-      Object.keys(userFilledMessageListQuery).forEach(function (key) {
+      Object.keys(userFilledMessageListQuery).forEach(key => {
         messageListParams[key] = userFilledMessageListQuery[key];
       });
     }
 
     logger.info('Channel: Fetching messages', {
-      currentGroupChannel: currentGroupChannel,
-      userFilledMessageListQuery: userFilledMessageListQuery
+      currentGroupChannel,
+      userFilledMessageListQuery
     });
-    currentGroupChannel.getMessagesByTimestamp(oldestMessageTimeStamp || new Date().getTime(), messageListParams).then(function (messages) {
+    currentGroupChannel.getMessagesByTimestamp(oldestMessageTimeStamp || new Date().getTime(), messageListParams).then(messages => {
       messagesDispatcher({
         type: FETCH_PREV_MESSAGES_SUCCESS,
         payload: {
-          currentGroupChannel: currentGroupChannel,
-          messages: messages
+          currentGroupChannel,
+          messages
         }
       });
       cb([messages, null]);
-    }).catch(function (error) {
+    }).catch(error => {
       logger.error('Channel: Fetching messages failed', error);
       messagesDispatcher({
         type: FETCH_PREV_MESSAGES_FAILURE,
         payload: {
-          currentGroupChannel: currentGroupChannel
+          currentGroupChannel
         }
       });
       cb([null, error]);
@@ -1213,23 +1213,28 @@ function useScrollCallback(_ref, _ref2) {
 }
 
 function useScrollDownCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      latestMessageTimeStamp = _ref.latestMessageTimeStamp,
-      userFilledMessageListQuery = _ref.userFilledMessageListQuery,
-      hasMoreNext = _ref.hasMoreNext,
-      replyType = _ref.replyType;
-  var logger = _ref2.logger,
-      messagesDispatcher = _ref2.messagesDispatcher,
-      sdk = _ref2.sdk;
-  return React.useCallback(function (cb) {
+  let {
+    currentGroupChannel,
+    latestMessageTimeStamp,
+    userFilledMessageListQuery,
+    hasMoreNext,
+    replyType
+  } = _ref;
+  let {
+    logger,
+    messagesDispatcher,
+    sdk
+  } = _ref2;
+  return React.useCallback(cb => {
     if (!hasMoreNext) {
       return;
     }
 
-    var _sdk$appInfo = sdk.appInfo,
-        appInfo = _sdk$appInfo === void 0 ? {} : _sdk$appInfo;
-    var isReactionEnabled = appInfo.useReaction || false;
-    var messageListParams = {
+    const {
+      appInfo = {}
+    } = sdk;
+    const isReactionEnabled = appInfo.useReaction || false;
+    const messageListParams = {
       nextResultSize: _const.NEXT_RESULT_SIZE,
       isInclusive: true,
       includeReactions: isReactionEnabled
@@ -1238,34 +1243,34 @@ function useScrollDownCallback(_ref, _ref2) {
     if (replyType && replyType === 'QUOTE_REPLY') {
       messageListParams.includeThreadInfo = true;
       messageListParams.includeParentMessageInfo = true;
-      messageListParams.replyType = __bundle6316ce22.ue.ONLY_REPLY_TO_CHANNEL;
+      messageListParams.replyType = __bundleC41dd401.ue.ONLY_REPLY_TO_CHANNEL;
     }
 
     if (userFilledMessageListQuery) {
-      Object.keys(userFilledMessageListQuery).forEach(function (key) {
+      Object.keys(userFilledMessageListQuery).forEach(key => {
         messageListParams[key] = userFilledMessageListQuery[key];
       });
     }
 
     logger.info('Channel: Fetching later messages', {
-      currentGroupChannel: currentGroupChannel,
-      userFilledMessageListQuery: userFilledMessageListQuery
+      currentGroupChannel,
+      userFilledMessageListQuery
     });
-    currentGroupChannel.getMessagesByTimestamp(latestMessageTimeStamp || new Date().getTime(), messageListParams).then(function (messages) {
+    currentGroupChannel.getMessagesByTimestamp(latestMessageTimeStamp || new Date().getTime(), messageListParams).then(messages => {
       messagesDispatcher({
         type: FETCH_NEXT_MESSAGES_SUCCESS,
         payload: {
-          currentGroupChannel: currentGroupChannel,
-          messages: messages
+          currentGroupChannel,
+          messages
         }
       });
       cb([messages, null]);
-    }).catch(function (error) {
+    }).catch(error => {
       logger.error('Channel: Fetching later messages failed', error);
       messagesDispatcher({
         type: FETCH_NEXT_MESSAGES_FAILURE,
         payload: {
-          currentGroupChannel: currentGroupChannel
+          currentGroupChannel
         }
       });
       cb([null, error]);
@@ -1274,13 +1279,19 @@ function useScrollDownCallback(_ref, _ref2) {
 }
 
 function useDeleteMessageCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      messagesDispatcher = _ref.messagesDispatcher;
-  var logger = _ref2.logger;
-  return React.useCallback(function (message) {
+  let {
+    currentGroupChannel,
+    messagesDispatcher
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return React.useCallback(message => {
     logger.info('Channel | useDeleteMessageCallback: Deleting message', message);
-    var requestState = message.requestState;
-    return new Promise(function (resolve, reject) {
+    const {
+      requestState
+    } = message;
+    return new Promise((resolve, reject) => {
       logger.info('Channel | useDeleteMessageCallback: Deleting message requestState:', requestState); // Message is only on local
 
       if (requestState === 'failed' || requestState === 'pending') {
@@ -1293,14 +1304,14 @@ function useDeleteMessageCallback(_ref, _ref2) {
       }
 
       logger.info('Channel | useDeleteMessageCallback: Deleting message from remote:', requestState);
-      currentGroupChannel.deleteMessage(message).then(function () {
+      currentGroupChannel.deleteMessage(message).then(() => {
         logger.info('Channel | useDeleteMessageCallback: Deleting message success!', message);
         messagesDispatcher({
           type: ON_MESSAGE_DELETED,
           payload: message.messageId
         });
         resolve(message);
-      }).catch(function (err) {
+      }).catch(err => {
         logger.warning('Channel | useDeleteMessageCallback: Deleting message failed!', err);
         reject(err);
       });
@@ -1309,20 +1320,26 @@ function useDeleteMessageCallback(_ref, _ref2) {
 }
 
 function useUpdateMessageCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      messagesDispatcher = _ref.messagesDispatcher,
-      onBeforeUpdateUserMessage = _ref.onBeforeUpdateUserMessage,
-      isMentionEnabled = _ref.isMentionEnabled;
-  var logger = _ref2.logger,
-      pubSub = _ref2.pubSub;
-  return React.useCallback(function (props, callback) {
-    var messageId = props.messageId,
-        message = props.message,
-        mentionedUsers = props.mentionedUsers,
-        mentionTemplate = props.mentionTemplate;
-
-    var createParamsDefault = function createParamsDefault() {
-      var params = {};
+  let {
+    currentGroupChannel,
+    messagesDispatcher,
+    onBeforeUpdateUserMessage,
+    isMentionEnabled
+  } = _ref;
+  let {
+    logger,
+    pubSub
+  } = _ref2;
+  return React.useCallback((props, callback) => {
+    const {
+      messageId,
+      message,
+      mentionedUsers,
+      mentionTemplate
+    } = props;
+
+    const createParamsDefault = () => {
+      const params = {};
       params.message = message;
 
       if (isMentionEnabled && (mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) > 0) {
@@ -1338,15 +1355,15 @@ function useUpdateMessageCallback(_ref, _ref2) {
       return params;
     };
 
-    var createCustomPrams = onBeforeUpdateUserMessage && typeof onBeforeUpdateUserMessage === 'function';
+    const createCustomPrams = onBeforeUpdateUserMessage && typeof onBeforeUpdateUserMessage === 'function';
 
     if (createCustomPrams) {
       logger.info('Channel: creating params using onBeforeUpdateUserMessage', onBeforeUpdateUserMessage);
     }
 
-    var params = onBeforeUpdateUserMessage ? onBeforeUpdateUserMessage(message) : createParamsDefault();
+    const params = onBeforeUpdateUserMessage ? onBeforeUpdateUserMessage(message) : createParamsDefault();
     logger.info('Channel: Updating message!', params);
-    currentGroupChannel.updateUserMessage(messageId, params).then(function (msg, err) {
+    currentGroupChannel.updateUserMessage(messageId, params).then((msg, err) => {
       if (callback) {
         callback(err, msg);
       }
@@ -1368,13 +1385,19 @@ function useUpdateMessageCallback(_ref, _ref2) {
 }
 
 function useResendMessageCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      messagesDispatcher = _ref.messagesDispatcher;
-  var logger = _ref2.logger;
-  return React.useCallback(function (failedMessage) {
+  let {
+    currentGroupChannel,
+    messagesDispatcher
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return React.useCallback(failedMessage => {
     logger.info('Channel: Resending message has started', failedMessage);
-    var messageType = failedMessage.messageType,
-        file = failedMessage.file;
+    const {
+      messageType,
+      file
+    } = failedMessage;
 
     if (failedMessage && typeof failedMessage.isResendable === 'function' && failedMessage.isResendable()) {
       // Move the logic setting sendingStatus to pending into the reducer
@@ -1388,13 +1411,13 @@ function useResendMessageCallback(_ref, _ref2) {
       }); // userMessage
 
       if (messageType === 'user') {
-        currentGroupChannel.resendUserMessage(failedMessage).then(function (message) {
+        currentGroupChannel.resendUserMessage(failedMessage).then(message => {
           logger.info('Channel: Resending message success!', message);
           messagesDispatcher({
             type: SEND_MESSAGEGE_SUCESS,
             payload: message
           });
-        }).catch(function (e) {
+        }).catch(e => {
           logger.warning('Channel: Resending message failed!', e); // eslint-disable-next-line no-param-reassign
 
           failedMessage.requestState = 'failed'; // eslint-disable-next-line no-param-reassign
@@ -1417,13 +1440,13 @@ function useResendMessageCallback(_ref, _ref2) {
       }
 
       if (messageType === 'file') {
-        currentGroupChannel.resendFileMessage(failedMessage, file).then(function (message) {
+        currentGroupChannel.resendFileMessage(failedMessage, file).then(message => {
           logger.info('Channel: Resending file message success!', message);
           messagesDispatcher({
             type: SEND_MESSAGEGE_SUCESS,
             payload: message
           });
-        }).catch(function (e) {
+        }).catch(e => {
           logger.warning('Channel: Resending file message failed!', e); // eslint-disable-next-line no-param-reassign
 
           failedMessage.requestState = 'failed'; // eslint-disable-next-line no-param-reassign
@@ -1453,22 +1476,28 @@ function useResendMessageCallback(_ref, _ref2) {
 }
 
 function useSendMessageCallback(_ref, _ref2) {
-  var isMentionEnabled = _ref.isMentionEnabled,
-      currentGroupChannel = _ref.currentGroupChannel,
-      onBeforeSendUserMessage = _ref.onBeforeSendUserMessage;
-  var logger = _ref2.logger,
-      pubSub = _ref2.pubSub,
-      messagesDispatcher = _ref2.messagesDispatcher;
-  var messageInputRef = React.useRef(null);
-  var sendMessage = React.useCallback(function (props) {
-    var _props$quoteMessage = props.quoteMessage,
-        quoteMessage = _props$quoteMessage === void 0 ? null : _props$quoteMessage,
-        message = props.message,
-        mentionTemplate = props.mentionTemplate,
-        mentionedUsers = props.mentionedUsers;
-
-    var createParamsDefault = function createParamsDefault() {
-      var params = {};
+  let {
+    isMentionEnabled,
+    currentGroupChannel,
+    onBeforeSendUserMessage
+  } = _ref;
+  let {
+    logger,
+    pubSub,
+    messagesDispatcher
+  } = _ref2;
+  const messageInputRef = React.useRef(null);
+  const sendMessage = React.useCallback(props => {
+    const {
+      quoteMessage = null,
+      message,
+      mentionTemplate,
+      // mentionedUserIds,
+      mentionedUsers
+    } = props;
+
+    const createParamsDefault = () => {
+      const params = {};
       params.message = (message === null || message === void 0 ? void 0 : message.trim()) || message; // if (isMentionEnabled && mentionedUserIds?.length > 0) {
 
       if (isMentionEnabled && (mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) > 0) {
@@ -1489,25 +1518,23 @@ function useSendMessageCallback(_ref, _ref2) {
       return params;
     };
 
-    var createCustomPrams = onBeforeSendUserMessage && typeof onBeforeSendUserMessage === 'function';
+    const createCustomPrams = onBeforeSendUserMessage && typeof onBeforeSendUserMessage === 'function';
 
     if (createCustomPrams) {
       logger.info('Channel: creating params using onBeforeSendUserMessage', onBeforeSendUserMessage);
     }
 
-    var params = onBeforeSendUserMessage ? onBeforeSendUserMessage(message, quoteMessage) : createParamsDefault();
+    const params = onBeforeSendUserMessage ? onBeforeSendUserMessage(message, quoteMessage) : createParamsDefault();
     logger.info('Channel: Sending message has started', params);
-    currentGroupChannel.sendUserMessage(params).onPending(function (pendingMsg) {
+    currentGroupChannel.sendUserMessage(params).onPending(pendingMsg => {
       pubSub.publish(topics.SEND_MESSAGE_START, {
         /* pubSub is used instead of messagesDispatcher
           to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
         message: pendingMsg,
         channel: currentGroupChannel
       });
-      setTimeout(function () {
-        return scrollIntoLast();
-      });
-    }).onFailed(function (err, msg) {
+      setTimeout(() => scrollIntoLast());
+    }).onFailed((err, msg) => {
       logger.warning('Channel: Sending message failed!', {
         message: msg,
         error: err
@@ -1516,7 +1543,7 @@ function useSendMessageCallback(_ref, _ref2) {
         type: SEND_MESSAGEGE_FAILURE,
         payload: msg
       });
-    }).onSucceeded(function (msg) {
+    }).onSucceeded(msg => {
       logger.info('Channel: Sending message success!', msg);
       messagesDispatcher({
         type: SEND_MESSAGEGE_SUCESS,
@@ -1528,27 +1555,32 @@ function useSendMessageCallback(_ref, _ref2) {
 }
 
 function useSendFileMessageCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel,
-      onBeforeSendFileMessage = _ref.onBeforeSendFileMessage,
-      _ref$imageCompression = _ref.imageCompression,
-      imageCompression = _ref$imageCompression === void 0 ? {} : _ref$imageCompression;
-  var logger = _ref2.logger,
-      pubSub = _ref2.pubSub,
-      messagesDispatcher = _ref2.messagesDispatcher;
-  var sendMessage = React.useCallback(function (file) {
-    var quoteMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var compressionRate = imageCompression.compressionRate,
-        resizingWidth = imageCompression.resizingWidth,
-        resizingHeight = imageCompression.resizingHeight;
-    var createCustomParams = onBeforeSendFileMessage && typeof onBeforeSendFileMessage === 'function';
-    var compressibleFileType = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
-    var compressibleRatio = compressionRate > 0 && compressionRate < 1; // pxToNumber returns null if values are invalid
-
-    var compressibleDiamensions = pxToNumber(resizingWidth) || pxToNumber(resizingHeight);
-    var canCompressImage = compressibleFileType && (compressibleRatio || compressibleDiamensions);
-
-    var createParamsDefault = function createParamsDefault(file_) {
-      var params = {};
+  let {
+    currentGroupChannel,
+    onBeforeSendFileMessage,
+    imageCompression = {}
+  } = _ref;
+  let {
+    logger,
+    pubSub,
+    messagesDispatcher
+  } = _ref2;
+  const sendMessage = React.useCallback(function (file) {
+    let quoteMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    const {
+      compressionRate,
+      resizingWidth,
+      resizingHeight
+    } = imageCompression;
+    const createCustomParams = onBeforeSendFileMessage && typeof onBeforeSendFileMessage === 'function';
+    const compressibleFileType = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
+    const compressibleRatio = compressionRate > 0 && compressionRate < 1; // pxToNumber returns null if values are invalid
+
+    const compressibleDiamensions = pxToNumber(resizingWidth) || pxToNumber(resizingHeight);
+    const canCompressImage = compressibleFileType && (compressibleRatio || compressibleDiamensions);
+
+    const createParamsDefault = file_ => {
+      const params = {};
       params.file = file_;
 
       if (quoteMessage) {
@@ -1562,16 +1594,16 @@ function useSendFileMessageCallback(_ref, _ref2) {
     if (canCompressImage) {
       // Using image compression
       try {
-        var image = document.createElement('img');
+        const image = document.createElement('img');
         image.src = URL.createObjectURL(file);
 
-        image.onload = function () {
+        image.onload = () => {
           URL.revokeObjectURL(image.src);
-          var canvas = document.createElement('canvas');
-          var imageWdith = image.naturalWidth || image.width;
-          var imageHeight = image.naturalHeight || image.height;
-          var targetWidth = pxToNumber(resizingWidth) || imageWdith;
-          var targetHeight = pxToNumber(resizingHeight) || imageHeight; // In canvas.toBlob(callback, mimeType, qualityArgument)
+          const canvas = document.createElement('canvas');
+          const imageWdith = image.naturalWidth || image.width;
+          const imageHeight = image.naturalHeight || image.height;
+          let targetWidth = pxToNumber(resizingWidth) || imageWdith;
+          let targetHeight = pxToNumber(resizingHeight) || imageHeight; // In canvas.toBlob(callback, mimeType, qualityArgument)
           // qualityArgument doesnt work
           // so in case compressibleDiamensions are not present, we use ratio
 
@@ -1582,10 +1614,10 @@ function useSendFileMessageCallback(_ref, _ref2) {
 
           canvas.width = targetWidth;
           canvas.height = targetHeight;
-          var context = canvas.getContext('2d');
+          const context = canvas.getContext('2d');
           context.drawImage(image, 0, 0, targetWidth, targetHeight);
-          context.canvas.toBlob(function (newImageBlob) {
-            var compressedFile = new File([newImageBlob], file.name, {
+          context.canvas.toBlob(newImageBlob => {
+            const compressedFile = new File([newImageBlob], file.name, {
               type: file.type
             });
 
@@ -1593,9 +1625,9 @@ function useSendFileMessageCallback(_ref, _ref2) {
               logger.info('Channel: Creating params using onBeforeSendFileMessage', onBeforeSendFileMessage);
             }
 
-            var params = createCustomParams ? onBeforeSendFileMessage(compressedFile, quoteMessage) : createParamsDefault(compressedFile);
+            const params = createCustomParams ? onBeforeSendFileMessage(compressedFile, quoteMessage) : createParamsDefault(compressedFile);
             logger.info('Channel: Uploading file message start!', params);
-            currentGroupChannel.sendFileMessage(params).onPending(function (pendingMessage) {
+            currentGroupChannel.sendFileMessage(params).onPending(pendingMessage => {
               pubSub.publish(topics.SEND_MESSAGE_START, {
                 /* pubSub is used instead of messagesDispatcher
                   to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
@@ -1606,13 +1638,11 @@ function useSendFileMessageCallback(_ref, _ref2) {
                 }),
                 channel: currentGroupChannel
               });
-              setTimeout(function () {
-                return scrollIntoLast();
-              }, 1000);
-            }).onFailed(function (err, failedMessage) {
+              setTimeout(() => scrollIntoLast(), 1000);
+            }).onFailed((err, failedMessage) => {
               logger.error('Channel: Sending file message failed!', {
-                failedMessage: failedMessage,
-                err: err
+                failedMessage,
+                err
               }); // eslint-disable-next-line no-param-reassign
 
               failedMessage.localUrl = URL.createObjectURL(compressedFile); // eslint-disable-next-line no-param-reassign
@@ -1622,7 +1652,7 @@ function useSendFileMessageCallback(_ref, _ref2) {
                 type: SEND_MESSAGEGE_FAILURE,
                 payload: failedMessage
               });
-            }).onSucceeded(function (succeededMessage) {
+            }).onSucceeded(succeededMessage => {
               logger.info('Channel: Sending file message success!', succeededMessage);
               messagesDispatcher({
                 type: SEND_MESSAGEGE_SUCESS,
@@ -1640,9 +1670,9 @@ function useSendFileMessageCallback(_ref, _ref2) {
         logger.info('Channel: creating params using onBeforeSendFileMessage', onBeforeSendFileMessage);
       }
 
-      var params = onBeforeSendFileMessage ? onBeforeSendFileMessage(file, quoteMessage) : createParamsDefault(file);
+      const params = onBeforeSendFileMessage ? onBeforeSendFileMessage(file, quoteMessage) : createParamsDefault(file);
       logger.info('Channel: Uploading file message start!', params);
-      currentGroupChannel.sendFileMessage(params).onPending(function (pendingMsg) {
+      currentGroupChannel.sendFileMessage(params).onPending(pendingMsg => {
         pubSub.publish(topics.SEND_MESSAGE_START, {
           /* pubSub is used instead of messagesDispatcher
             to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
@@ -1653,13 +1683,11 @@ function useSendFileMessageCallback(_ref, _ref2) {
           }),
           channel: currentGroupChannel
         });
-        setTimeout(function () {
-          return scrollIntoLast();
-        }, 1000);
-      }).onFailed(function (error, message) {
+        setTimeout(() => scrollIntoLast(), 1000);
+      }).onFailed((error, message) => {
         logger.error('Channel: Sending file message failed!', {
-          message: message,
-          error: error
+          message,
+          error
         }); // eslint-disable-next-line no-param-reassign
 
         message.localUrl = URL.createObjectURL(file); // eslint-disable-next-line no-param-reassign
@@ -1669,7 +1697,7 @@ function useSendFileMessageCallback(_ref, _ref2) {
           type: SEND_MESSAGEGE_FAILURE,
           payload: message
         });
-      }).onSucceeded(function (message) {
+      }).onSucceeded(message => {
         logger.info('Channel: Sending message success!', message);
         messagesDispatcher({
           type: SEND_MESSAGEGE_SUCESS,
@@ -1682,78 +1710,83 @@ function useSendFileMessageCallback(_ref, _ref2) {
 }
 
 function useMemoizedEmojiListItems(_ref, _ref2) {
-  var emojiContainer = _ref.emojiContainer,
-      toggleReaction = _ref.toggleReaction;
-  var isReactionEnabled = _ref2.isReactionEnabled,
-      logger = _ref2.logger,
-      userId = _ref2.userId,
-      emojiAllList = _ref2.emojiAllList;
+  let {
+    emojiContainer,
+    toggleReaction
+  } = _ref;
+  let {
+    isReactionEnabled,
+    logger,
+    userId,
+    emojiAllList
+  } = _ref2;
 
   /* eslint-disable react/prop-types */
-  return React.useMemo(function () {
-    return function (_ref3) {
-      var parentRef = _ref3.parentRef,
-          parentContainRef = _ref3.parentContainRef,
-          message = _ref3.message,
-          closeDropdown = _ref3.closeDropdown,
-          _ref3$spaceFromTrigge = _ref3.spaceFromTrigger,
-          spaceFromTrigger = _ref3$spaceFromTrigge === void 0 ? {} : _ref3$spaceFromTrigge;
-
-      if (!isReactionEnabled || !(parentRef || parentContainRef || message || closeDropdown)) {
-        logger.warning('Channel: Invalid Params in memoizedEmojiListItems');
-        return null;
-      }
+  return React.useMemo(() => _ref3 => {
+    let {
+      parentRef,
+      parentContainRef,
+      message,
+      closeDropdown,
+      spaceFromTrigger = {}
+    } = _ref3;
+
+    if (!isReactionEnabled || !(parentRef || parentContainRef || message || closeDropdown)) {
+      logger.warning('Channel: Invalid Params in memoizedEmojiListItems');
+      return null;
+    }
 
-      return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
-        parentRef: parentRef,
-        parentContainRef: parentContainRef,
-        closeDropdown: closeDropdown,
-        spaceFromTrigger: spaceFromTrigger
-      }, emojiAllList.map(function (emoji) {
-        var reactedReaction = message.reactions.filter(function (reaction) {
-          return reaction.key === emoji.key;
-        })[0];
-        var isReacted = reactedReaction ? !(reactedReaction.userIds.indexOf(userId) < 0) : false;
-        return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
-          key: emoji.key,
-          width: "36px",
-          height: "36px",
-          selected: isReacted,
-          onClick: function onClick() {
-            closeDropdown();
-            toggleReaction(message, emoji.key, isReacted);
-          }
-        }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
-          url: emoji.url,
+    return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.EmojiListItems, {
+      parentRef: parentRef,
+      parentContainRef: parentContainRef,
+      closeDropdown: closeDropdown,
+      spaceFromTrigger: spaceFromTrigger
+    }, emojiAllList.map(emoji => {
+      const reactedReaction = message.reactions.filter(reaction => reaction.key === emoji.key)[0];
+      const isReacted = reactedReaction ? !(reactedReaction.userIds.indexOf(userId) < 0) : false;
+      return /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
+        key: emoji.key,
+        width: "36px",
+        height: "36px",
+        selected: isReacted,
+        onClick: () => {
+          closeDropdown();
+          toggleReaction(message, emoji.key, isReacted);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer, {
+        url: emoji.url,
+        width: "28px",
+        height: "28px",
+        defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
           width: "28px",
           height: "28px",
-          defaultComponent: /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-            width: "28px",
-            height: "28px",
-            type: ui_Icon.IconTypes.QUESTION
-          })
-        }));
+          type: ui_Icon.IconTypes.QUESTION
+        })
       }));
-    };
+    }));
   }, [emojiContainer, toggleReaction]);
 }
 
 function useToggleReactionCallback(_ref, _ref2) {
-  var currentGroupChannel = _ref.currentGroupChannel;
-  var logger = _ref2.logger;
-  return React.useCallback(function (message, key, isReacted) {
+  let {
+    currentGroupChannel
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return React.useCallback((message, key, isReacted) => {
     if (isReacted) {
-      currentGroupChannel.deleteReaction(message, key).then(function (res) {
+      currentGroupChannel.deleteReaction(message, key).then(res => {
         logger.info('Delete reaction success', res);
-      }).catch(function (err) {
+      }).catch(err => {
         logger.warning('Delete reaction failed', err);
       });
       return;
     }
 
-    currentGroupChannel.addReaction(message, key).then(function (res) {
+    currentGroupChannel.addReaction(message, key).then(res => {
       logger.info('Add reaction success', res);
-    }).catch(function (err) {
+    }).catch(err => {
       logger.warning('Add reaction failed', err);
     });
   }, [currentGroupChannel]);
@@ -1785,7 +1818,7 @@ function useScrollToMessage(_a, _b) {
 
 var ChannelContext = /*#__PURE__*/React__default["default"].createContext(undefined);
 
-var ChannelProvider = function ChannelProvider(props) {
+var ChannelProvider = function (props) {
   var _a, _b, _c, _d;
 
   var channelUrl = props.channelUrl,
@@ -1958,9 +1991,9 @@ var ChannelProvider = function ChannelProvider(props) {
   }); // handles API calls from withSendbird
 
   React.useEffect(function () {
-    var subScriber = pubSubHandler(channelUrl, pubSub, messagesDispatcher);
+    var subscriber = pubSubHandler(channelUrl, pubSub, messagesDispatcher);
     return function () {
-      pubSubHandleRemover(subScriber);
+      pubSubHandleRemover(subscriber);
     };
   }, [channelUrl, sdkInit]); // handling connection breaks
 
@@ -2079,7 +2112,7 @@ var ChannelProvider = function ChannelProvider(props) {
   }, children));
 };
 
-var useChannelContext = function useChannelContext() {
+var useChannelContext = function () {
   return React__default["default"].useContext(ChannelContext);
 };
 
@@ -2091,4 +2124,4 @@ exports.isDisabledBecauseFrozen = isDisabledBecauseFrozen;
 exports.isDisabledBecauseMuted = isDisabledBecauseMuted;
 exports.isOperator = isOperator;
 exports.useChannelContext = useChannelContext;
-//# sourceMappingURL=ChannelProvider-b7e7f2ff.js.map
+//# sourceMappingURL=ChannelProvider-dd81a327.js.map