@sendbird/uikit-react 3.6.11-beta.2 → 3.7.0-rc.0

package/cjs/ChannelProvider-7fa98120.js

@@ -0,0 +1,2088 @@
+'use strict';
+
+var React = require('react');
+var UserProfileContext = require('./UserProfileContext-922a43ec.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var _const = require('./const-9def5c09.js');
+var utils = require('./utils-55fc6797.js');
+var tslib_es6 = require('./tslib.es6-2f2b0bca.js');
+var index$2 = require('./index-b6d51e74.js');
+var message = require('@sendbird/chat/message');
+var index = require('./index-609b07a2.js');
+var useSendMultipleFilesMessage = require('./useSendMultipleFilesMessage-87e0ffa3.js');
+var compareIds = require('./compareIds-de541666.js');
+var index$1 = require('./index-b995f638.js');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var uuid = require('./uuid-c74bbbb6.js');
+var pubSub_topics = require('./pubSub/topics.js');
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-94c18dc1.js');
+var consts = require('./consts-95462b21.js');
+var resolvedReplyType = require('./resolvedReplyType-c20ef661.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * This function helps consider the every condition
+ * related to enabling emoji reaction feature.
+ */
+function getIsReactionEnabled(_a) {
+  var _b = _a.isBroadcast,
+    isBroadcast = _b === void 0 ? false : _b,
+    _c = _a.isSuper,
+    isSuper = _c === void 0 ? false : _c,
+    _d = _a.globalLevel,
+    globalLevel = _d === void 0 ? true : _d,
+    moduleLevel = _a.moduleLevel;
+  return !(isBroadcast || isSuper) && (moduleLevel !== null && moduleLevel !== void 0 ? moduleLevel : globalLevel);
+}
+
+var initialState = {
+  initialized: false,
+  loading: true,
+  allMessages: [],
+  /**
+   * localMessages: pending & failed messages
+   */
+  localMessages: [],
+  currentGroupChannel: null,
+  // for scrollup
+  hasMorePrev: false,
+  oldestMessageTimeStamp: 0,
+  // for scroll down
+  // onScrollDownCallback is added for navigation to different timestamps on messageSearch
+  // hasMorePrev, onScrollCallback -> scroll up(default behavior)
+  // hasMoreNext, onScrollDownCallback -> scroll down
+  hasMoreNext: false,
+  latestMessageTimeStamp: 0,
+  emojiContainer: {
+    emojiCategories: [],
+    emojiHash: ''
+  },
+  unreadSince: null,
+  /**
+   * unreadSince is a formatted date information string
+   * It's used only for the {unreadSince && <UnreadCount time={unreadSince} />}
+   */
+  isInvalid: false,
+  readStatus: null,
+  messageListParams: null
+};
+
+var getOldestMessageTimeStamp = function (messages) {
+  if (messages === void 0) {
+    messages = [];
+  }
+  var oldestMessage = messages[0];
+  return oldestMessage && oldestMessage.createdAt || null;
+};
+var getLatestMessageTimeStamp = function (messages) {
+  if (messages === void 0) {
+    messages = [];
+  }
+  var latestMessage = messages[messages.length - 1];
+  return latestMessage && latestMessage.createdAt || null;
+};
+function hasReqId(message) {
+  return 'reqId' in message;
+}
+function channelReducer(state, action) {
+  return index.K(action).with({
+    type: useSendMultipleFilesMessage.RESET_MESSAGES
+  }, function () {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      // when user switches channel, if the previous channel `hasMorePrev`
+      // the onScroll gets called twice, setting hasMorePrev false prevents this
+      hasMorePrev: false,
+      hasMoreNext: false,
+      allMessages: []
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_START
+  }, function () {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      loading: true,
+      allMessages: state.allMessages.filter(function (m) {
+        return index$1.isSendableMessage(m) ? m.sendingStatus !== message.SendingStatus.SUCCEEDED : true;
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_SUCCESS
+  }, function (action) {
+    var _a;
+    var _b = action.payload,
+      currentGroupChannel = _b.currentGroupChannel,
+      messages = _b.messages;
+    if (!((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) === ((_a = state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url))) {
+      return state;
+    }
+    var oldestMessageTimeStamp = getOldestMessageTimeStamp(messages);
+    var latestMessageTimeStamp = getLatestMessageTimeStamp(messages);
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      loading: false,
+      initialized: true,
+      hasMorePrev: true,
+      hasMoreNext: true,
+      oldestMessageTimeStamp: oldestMessageTimeStamp,
+      latestMessageTimeStamp: latestMessageTimeStamp,
+      allMessages: tslib_es6.__spreadArray([], messages, true)
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.FETCH_PREV_MESSAGES_SUCCESS
+  }, function (action) {
+    var _a, _b, _c, _d;
+    var _e = action.payload,
+      currentGroupChannel = _e.currentGroupChannel,
+      messages = _e.messages;
+    if (!((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) === ((_a = state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url))) {
+      return state;
+    }
+    var hasMorePrev = ((_b = messages === null || messages === void 0 ? void 0 : messages.length) !== null && _b !== void 0 ? _b : 0) >= ((_d = (_c = state === null || state === void 0 ? void 0 : state.messageListParams) === null || _c === void 0 ? void 0 : _c.prevResultSize) !== null && _d !== void 0 ? _d : _const.PREV_RESULT_SIZE) + 1;
+    var oldestMessageTimeStamp = getOldestMessageTimeStamp(messages);
+    // Remove duplicated messages
+    var duplicatedMessageIds = [];
+    var updatedOldMessages = state.allMessages.map(function (msg) {
+      var duplicatedMessage = messages.find(function (_a) {
+        var messageId = _a.messageId;
+        return compareIds.compareIds(messageId, msg.messageId);
+      });
+      if (!duplicatedMessage) {
+        return msg;
+      }
+      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;
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      hasMorePrev: hasMorePrev,
+      oldestMessageTimeStamp: oldestMessageTimeStamp,
+      allMessages: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], filteredNewMessages, true), updatedOldMessages, true)
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.FETCH_NEXT_MESSAGES_SUCCESS
+  }, function (action) {
+    var _a, _b, _c, _d;
+    var _e = action.payload,
+      currentGroupChannel = _e.currentGroupChannel,
+      messages = _e.messages;
+    if (!((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) === ((_a = state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url))) {
+      return state;
+    }
+    var hasMoreNext = ((_b = messages === null || messages === void 0 ? void 0 : messages.length) !== null && _b !== void 0 ? _b : 0) === ((_d = (_c = state === null || state === void 0 ? void 0 : state.messageListParams) === null || _c === void 0 ? void 0 : _c.nextResultSize) !== null && _d !== void 0 ? _d : _const.NEXT_RESULT_SIZE) + 1;
+    var latestMessageTimeStamp = getLatestMessageTimeStamp(messages);
+    // sort ~
+    var sortedMessages = utils.mergeAndSortMessages(state.allMessages, messages);
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      hasMoreNext: hasMoreNext,
+      latestMessageTimeStamp: latestMessageTimeStamp,
+      allMessages: sortedMessages
+    });
+  }).with({
+    type: index.S.union(useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_FAILURE, useSendMultipleFilesMessage.FETCH_PREV_MESSAGES_FAILURE, useSendMultipleFilesMessage.FETCH_NEXT_MESSAGES_FAILURE)
+  }, function (action) {
+    var _a;
+    var currentGroupChannel = action.payload.currentGroupChannel;
+    if ((currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) !== ((_a = state === null || state === void 0 ? void 0 : state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url)) {
+      return state;
+    }
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      loading: false,
+      initialized: false,
+      allMessages: [],
+      hasMorePrev: false,
+      hasMoreNext: false,
+      oldestMessageTimeStamp: null,
+      latestMessageTimeStamp: null
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.SEND_MESSAGE_START
+  }, function (action) {
+    // Message should not be spread here
+    // it will loose some methods like `isUserMessage`
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      localMessages: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], state.localMessages, true), [action.payload], false)
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS
+  }, function (action) {
+    var message = action.payload;
+    var filteredMessages = state.allMessages.filter(function (m) {
+      return hasReqId(m) && (m === null || m === void 0 ? void 0 : m.reqId) !== (message === null || message === void 0 ? void 0 : message.reqId);
+    });
+    // [Policy] Pending messages and failed messages
+    // must always be at the end of the message list
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      allMessages: tslib_es6.__spreadArray(tslib_es6.__spreadArray([], filteredMessages, true), [message], false),
+      localMessages: state.localMessages.filter(function (m) {
+        return hasReqId(m) && (m === null || m === void 0 ? void 0 : m.reqId) !== (message === null || message === void 0 ? void 0 : message.reqId);
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE
+  }, function (action) {
+    // @ts-ignore
+    action.payload.failed = true;
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      localMessages: state.localMessages.map(function (m) {
+        return compareIds.compareIds(hasReqId(m) && m.reqId, action.payload.reqId) ? action.payload : m;
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      currentGroupChannel: action.payload,
+      isInvalid: false
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.SET_CHANNEL_INVALID
+  }, function () {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      currentGroupChannel: null,
+      isInvalid: true
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_MESSAGE_RECEIVED
+  }, function (action) {
+    var _a = action.payload,
+      channel = _a.channel,
+      message = _a.message;
+    var members = channel.members;
+    var sender = message.sender;
+    var currentGroupChannel = state.currentGroupChannel,
+      unreadSince = state.unreadSince;
+    var 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;
+    })) {
+      return state;
+    }
+    // Filter by userFilledQuery
+    if (state.messageListParams && !index$1.filterMessageListParams(state.messageListParams, message)) {
+      return state;
+    }
+    if (message.isAdminMessage && message.isAdminMessage()) {
+      return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+        allMessages: utils.passUnsuccessfullMessages(state.allMessages, message)
+      });
+    }
+    // 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);
+    });
+    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)) {
+      // @ts-ignore
+      channel.members = members.map(function (member) {
+        if (member.userId === sender.userId) {
+          return sender;
+        }
+        return member;
+      });
+    }
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      currentGroupChannel: channel,
+      unreadSince: (state === null || state === void 0 ? void 0 : state.unreadSince) ? unreadSince : index$2.format(new Date(), 'p MMM dd'),
+      allMessages: utils.passUnsuccessfullMessages(state.allMessages, message)
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_MESSAGE_UPDATED
+  }, function (action) {
+    var _a;
+    var _b = action.payload,
+      channel = _b.channel,
+      message = _b.message;
+    var currentGroupChannelUrl = ((_a = state === null || state === void 0 ? void 0 : state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url) || '';
+    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$1.filterMessageListParams(state.messageListParams, message)) {
+      // Delete the message if it doesn't match to the params anymore
+      return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+        allMessages: state.allMessages.filter(function (m) {
+          return !compareIds.compareIds(m.messageId, message === null || message === void 0 ? void 0 : message.messageId);
+        })
+      });
+    }
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      allMessages: state.allMessages.map(function (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
+        }
+
+        return m;
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_MESSAGE_THREAD_INFO_UPDATED
+  }, function (action) {
+    var _a;
+    var _b = action.payload,
+      channel = _b.channel,
+      event = _b.event;
+    var channelUrl = event.channelUrl,
+      threadInfo = event.threadInfo,
+      targetMessageId = event.targetMessageId;
+    var currentGroupChannelUrl = ((_a = state === null || state === void 0 ? void 0 : state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.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 tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      allMessages: state.allMessages.map(function (m) {
+        if (compareIds.compareIds(m.messageId, targetMessageId)) {
+          // eslint-disable-next-line no-param-reassign
+          m.threadInfo = threadInfo; // Upsert threadInfo to the target message
+        }
+
+        return m;
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.RESEND_MESSAGE_START
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      allMessages: state.allMessages.map(function (m) {
+        return compareIds.compareIds(hasReqId(m) && m.reqId, action.payload.reqId) ? action.payload : m;
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.MARK_AS_READ
+  }, function (action) {
+    var _a, _b, _c;
+    if (((_a = state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url) !== ((_c = (_b = action.payload) === null || _b === void 0 ? void 0 : _b.channel) === null || _c === void 0 ? void 0 : _c.url)) {
+      return state;
+    }
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      unreadSince: null
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_MESSAGE_DELETED
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      allMessages: state.allMessages.filter(function (m) {
+        return !compareIds.compareIds(m.messageId, action.payload);
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_MESSAGE_DELETED_BY_REQ_ID
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      localMessages: state.localMessages.filter(function (m) {
+        return !compareIds.compareIds(hasReqId(m) && m.reqId, action.payload);
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.SET_EMOJI_CONTAINER
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      emojiContainer: action.payload
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_REACTION_UPDATED
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      allMessages: state.allMessages.map(function (m) {
+        if (compareIds.compareIds(m.messageId, action.payload.messageId)) {
+          if (m.applyReactionEvent && typeof m.applyReactionEvent === 'function') {
+            m.applyReactionEvent(action.payload);
+          }
+          return m;
+        }
+        return m;
+      })
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.MESSAGE_LIST_PARAMS_CHANGED
+  }, function (action) {
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      messageListParams: action.payload
+    });
+  }).with({
+    type: useSendMultipleFilesMessage.ON_FILE_INFO_UPLOADED
+  }, function (action) {
+    var _a, _b;
+    var _c = action.payload,
+      channelUrl = _c.channelUrl,
+      requestId = _c.requestId,
+      index = _c.index,
+      uploadableFileInfo = _c.uploadableFileInfo,
+      error = _c.error;
+    if (!compareIds.compareIds(channelUrl, (_a = state === null || state === void 0 ? void 0 : state.currentGroupChannel) === null || _a === void 0 ? void 0 : _a.url)) {
+      return state;
+    }
+    /**
+     * We don't have to do anything here because
+     * onFailed() will be called so handle error there instead.
+     */
+    if (error) return state;
+    var localMessages = state.localMessages;
+    var messageToUpdate = localMessages.find(function (message) {
+      return compareIds.compareIds(hasReqId(message) && message.reqId, requestId);
+    });
+    var fileInfoList = (_b = messageToUpdate.messageParams) === null || _b === void 0 ? void 0 : _b.fileInfoList;
+    if (Array.isArray(fileInfoList)) {
+      fileInfoList[index] = uploadableFileInfo;
+    }
+    return tslib_es6.__assign(tslib_es6.__assign({}, state), {
+      localMessages: localMessages
+    });
+  }).otherwise(function () {
+    return state;
+  });
+}
+
+var DELIVERY_RECIPT = 'delivery_receipt';
+function useHandleChannelEvents(_a, _b) {
+  var _c, _d, _e;
+  var sdkInit = _a.sdkInit,
+    currentUserId = _a.currentUserId,
+    currentGroupChannel = _a.currentGroupChannel,
+    disableMarkAsRead = _a.disableMarkAsRead;
+  var sdk = _b.sdk,
+    logger = _b.logger,
+    scrollRef = _b.scrollRef,
+    setQuoteMessage = _b.setQuoteMessage,
+    messagesDispatcher = _b.messagesDispatcher;
+  var store = useSendbirdStateContext.useSendbirdStateContext();
+  var _f = store.config,
+    markAsReadScheduler = _f.markAsReadScheduler,
+    markAsDeliveredScheduler = _f.markAsDeliveredScheduler,
+    disableMarkAsDelivered = _f.disableMarkAsDelivered;
+  var canSetMarkAsDelivered = (_e = (_d = (_c = store.stores.sdkStore.sdk) === null || _c === void 0 ? void 0 : _c.appInfo) === null || _d === void 0 ? void 0 : _d.premiumFeatureList) === null || _e === void 0 ? void 0 : _e.find(function (feature) {
+    return feature === DELIVERY_RECIPT;
+  });
+  React.useEffect(function () {
+    var _a;
+    var channelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
+    var channelHandlerId = uuid.uuidv4();
+    if (channelUrl && sdkInit) {
+      var channelHandler = {
+        onMessageReceived: function (channel, message) {
+          var _a, _b;
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            var scrollToEnd = false;
+            try {
+              var current = scrollRef.current;
+              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              // 10 is a buffer
+            } catch (error) {
+              //
+            }
+            logger.info('Channel | useHandleChannelEvents: onMessageReceived', message);
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.ON_MESSAGE_RECEIVED,
+              payload: {
+                channel: channel,
+                message: message
+              }
+            });
+            if (scrollToEnd && ((_a = document.getElementById('sendbird-dropdown-portal')) === null || _a === void 0 ? void 0 : _a.childElementCount) === 0 && ((_b = document.getElementById('sendbird-emoji-list-portal')) === null || _b === void 0 ? void 0 : _b.childElementCount) === 0) {
+              // and !openContextMenu
+              try {
+                setTimeout(function () {
+                  utils.scrollIntoLast(0, scrollRef);
+                });
+                if (!disableMarkAsRead) {
+                  markAsReadScheduler.push(currentGroupChannel);
+                }
+                if (canSetMarkAsDelivered && !disableMarkAsDelivered) {
+                  markAsDeliveredScheduler.push(currentGroupChannel);
+                }
+              } catch (error) {
+                logger.warning('Channel | onMessageReceived | scroll to end failed');
+              }
+            }
+          }
+        },
+        onUnreadMemberStatusUpdated: function (channel) {
+          logger.info('Channel | useHandleChannelEvents: onUnreadMemberStatusUpdated', channel);
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        // before(onDeliveryReceiptUpdated)
+        onUndeliveredMemberStatusUpdated: function (channel) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onDeliveryReceiptUpdated', channel);
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        onMessageUpdated: function (channel, message) {
+          logger.info('Channel | useHandleChannelEvents: onMessageUpdated', message);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.ON_MESSAGE_UPDATED,
+            payload: {
+              channel: channel,
+              message: message
+            }
+          });
+        },
+        onThreadInfoUpdated: function (channel, threadInfoUpdateEvent) {
+          logger.info('Channel | useHandleChannelEvents: onThreadInfoUpdated', {
+            channel: channel,
+            threadInfoUpdateEvent: threadInfoUpdateEvent
+          });
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.ON_MESSAGE_THREAD_INFO_UPDATED,
+            payload: {
+              channel: channel,
+              event: threadInfoUpdateEvent
+            }
+          });
+        },
+        onMessageDeleted: function (channel, messageId) {
+          logger.info('Channel | useHandleChannelEvents: onMessageDeleted', {
+            channel: channel,
+            messageId: messageId
+          });
+          setQuoteMessage(null);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.ON_MESSAGE_DELETED,
+            payload: messageId
+          });
+        },
+        onReactionUpdated: function (channel, reactionEvent) {
+          logger.info('Channel | useHandleChannelEvents: onReactionUpdated', {
+            channel: channel,
+            reactionEvent: reactionEvent
+          });
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.ON_REACTION_UPDATED,
+            payload: reactionEvent
+          });
+        },
+        onChannelChanged: function (channel) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onChannelChanged', channel);
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        onChannelFrozen: function (channel) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onChannelFrozen', channel);
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        onChannelUnfrozen: function (channel) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onChannelUnFrozen', channel);
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        onUserMuted: function (channel, user) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onUserMuted', {
+              channel: channel,
+              user: user
+            });
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        onUserUnmuted: function (channel, user) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onUserUnmuted', {
+              channel: channel,
+              user: user
+            });
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        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)) {
+            logger.info('Channel | useHandleChannelEvents: onUserBanned', {
+              channel: channel,
+              user: user
+            });
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: null
+            });
+          }
+        },
+        onOperatorUpdated: function (channel, users) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onOperatorUpdated', {
+              channel: channel,
+              users: users
+            });
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+              payload: channel
+            });
+          }
+        },
+        onUserLeft: function (channel, user) {
+          if (compareIds.compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            logger.info('Channel | useHandleChannelEvents: onUserLeft', {
+              channel: channel,
+              user: user
+            });
+            if ((user === null || user === void 0 ? void 0 : user.userId) === currentUserId) {
+              messagesDispatcher({
+                type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+                payload: null
+              });
+            }
+          }
+        }
+      };
+      logger.info('Channel | useHandleChannelEvents: Setup event handler', {
+        channelHandlerId: channelHandlerId,
+        channelHandler: channelHandler
+      });
+      // Add this group channel handler to the Sendbird chat instance
+      (_a = sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.addGroupChannelHandler(channelHandlerId, new groupChannel.GroupChannelHandler(channelHandler));
+    }
+    return function () {
+      var _a;
+      if ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _a === void 0 ? void 0 : _a.removeGroupChannelHandler) {
+        logger.info('Channel | useHandleChannelEvents: Removing message reciver handler', channelHandlerId);
+        sdk.groupChannel.removeGroupChannelHandler(channelHandlerId);
+      } else if (sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) {
+        logger.error('Channel | useHandleChannelEvents: Not found the removeGroupChannelHandler');
+      }
+    };
+  }, [currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url, sdkInit]);
+}
+
+function useSetChannel(_ref, _ref2) {
+  let {
+    channelUrl,
+    sdkInit,
+    disableMarkAsRead
+  } = _ref;
+  let {
+    messagesDispatcher,
+    sdk,
+    logger,
+    markAsReadScheduler
+  } = _ref2;
+  React.useEffect(() => {
+    if (channelUrl && sdkInit && sdk && sdk.groupChannel) {
+      logger.info('Channel | useSetChannel fetching channel', channelUrl);
+      sdk.groupChannel.getChannel(channelUrl).then(groupChannel => {
+        logger.info('Channel | useSetChannel fetched channel', groupChannel);
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.SET_CURRENT_CHANNEL,
+          payload: groupChannel
+        });
+        logger.info('Channel: Mark as read', groupChannel);
+        if (!disableMarkAsRead) {
+          markAsReadScheduler.push(groupChannel);
+        }
+      }).catch(e => {
+        logger.warning('Channel | useSetChannel fetch channel failed', {
+          channelUrl,
+          e
+        });
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.SET_CHANNEL_INVALID
+        });
+      });
+      sdk.getAllEmoji().then(emojiContainer_ => {
+        logger.info('Channel: Getting emojis success', emojiContainer_);
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.SET_EMOJI_CONTAINER,
+          payload: emojiContainer_
+        });
+      }).catch(err => {
+        logger.error('Channel: Getting emojis failed', err);
+      });
+    }
+  }, [channelUrl, sdkInit]);
+}
+
+function useInitialMessagesFetch(_a, _b) {
+  var currentGroupChannel = _a.currentGroupChannel,
+    initialTimeStamp = _a.initialTimeStamp,
+    userFilledMessageListQuery = _a.userFilledMessageListQuery,
+    replyType = _a.replyType,
+    setIsScrolled = _a.setIsScrolled;
+  var logger = _b.logger,
+    scrollRef = _b.scrollRef,
+    messagesDispatcher = _b.messagesDispatcher;
+  var channelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
+  React.useEffect(function () {
+    logger.info('Channel useInitialMessagesFetch: Setup started', currentGroupChannel);
+    setIsScrolled(false);
+    messagesDispatcher({
+      type: useSendMultipleFilesMessage.RESET_MESSAGES,
+      payload: null
+    });
+    if (currentGroupChannel && (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.getMessagesByTimestamp)) {
+      var messageListParams_1 = {
+        prevResultSize: _const.PREV_RESULT_SIZE,
+        isInclusive: true,
+        includeReactions: true,
+        includeMetaArray: true
+      };
+      if (initialTimeStamp) {
+        messageListParams_1.nextResultSize = _const.NEXT_RESULT_SIZE;
+      }
+      if (replyType === 'QUOTE_REPLY' || replyType === 'THREAD') {
+        messageListParams_1.includeThreadInfo = true;
+        messageListParams_1.includeParentMessageInfo = true;
+        messageListParams_1.replyType = message.ReplyType.ONLY_REPLY_TO_CHANNEL;
+      }
+      if (userFilledMessageListQuery) {
+        Object.keys(userFilledMessageListQuery).forEach(function (key) {
+          messageListParams_1[key] = userFilledMessageListQuery[key];
+        });
+      }
+      if (replyType && (replyType === 'QUOTE_REPLY' || replyType === 'THREAD') || userFilledMessageListQuery) {
+        logger.info('Channel useInitialMessagesFetch: Setup messageListParams', messageListParams_1);
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.MESSAGE_LIST_PARAMS_CHANGED,
+          payload: messageListParams_1
+        });
+      }
+      logger.info('Channel: Fetching messages', {
+        currentGroupChannel: currentGroupChannel,
+        userFilledMessageListQuery: userFilledMessageListQuery
+      });
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_START,
+        payload: null
+      });
+      var multipleFilesMessageCount_1 = 0;
+      currentGroupChannel.getMessagesByTimestamp(initialTimeStamp || new Date().getTime(), messageListParams_1).then(function (messages) {
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_SUCCESS,
+          payload: {
+            currentGroupChannel: currentGroupChannel,
+            messages: messages
+          }
+        });
+        multipleFilesMessageCount_1 = messages.filter(function (message) {
+          return index$1.isMultipleFilesMessage(message);
+        }).length;
+      }).catch(function (error) {
+        logger.error('Channel: Fetching messages failed', error);
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_FAILURE,
+          payload: {
+            currentGroupChannel: currentGroupChannel
+          }
+        });
+      }).finally(function () {
+        if (!initialTimeStamp) {
+          setTimeout(function () {
+            return utils.scrollIntoLast(0, scrollRef, setIsScrolled);
+          },
+          /**
+           * Rendering MFM takes long time so we need this.
+           * But later we should find better solution.
+           */
+          Math.min(multipleFilesMessageCount_1 * 100, 1000));
+        } else {
+          setTimeout(function () {
+            utils.scrollToRenderedMessage(scrollRef, initialTimeStamp, setIsScrolled);
+          }, 500);
+        }
+      });
+    }
+  }, [channelUrl, userFilledMessageListQuery, initialTimeStamp]);
+  /**
+   * Note - useEffect(() => {}, [currentGroupChannel])
+   * was buggy, that is why we did
+   * const channelUrl = currentGroupChannel && currentGroupChannel.url;
+   * useEffect(() => {}, [channelUrl])
+   * Again, this hook is supposed to execute when currentGroupChannel changes
+   * The 'channelUrl' here is not the same memory reference from Conversation.props
+   */
+}
+
+function useReconnectOnIdle(isOnline, currentGroupChannel, reconnectOnIdle) {
+  if (reconnectOnIdle === void 0) {
+    reconnectOnIdle = true;
+  }
+  var _a = React.useState(false),
+    isTabHidden = _a[0],
+    setIsTabHidden = _a[1];
+  var wasOffline = !isOnline;
+  React.useEffect(function () {
+    var handleVisibilityChange = function () {
+      if (reconnectOnIdle) {
+        setIsTabHidden(document.hidden);
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return function () {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [reconnectOnIdle, document.hidden]);
+  var shouldReconnect = wasOffline && (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url) != null && !isTabHidden;
+  return {
+    shouldReconnect: shouldReconnect
+  };
+}
+
+function useHandleReconnect(_a, _b) {
+  var isOnline = _a.isOnline,
+    replyType = _a.replyType,
+    disableMarkAsRead = _a.disableMarkAsRead,
+    reconnectOnIdle = _a.reconnectOnIdle;
+  var logger = _b.logger,
+    sdk = _b.sdk,
+    scrollRef = _b.scrollRef,
+    currentGroupChannel = _b.currentGroupChannel,
+    messagesDispatcher = _b.messagesDispatcher,
+    markAsReadScheduler = _b.markAsReadScheduler,
+    userFilledMessageListQuery = _b.userFilledMessageListQuery;
+  var shouldReconnect = useReconnectOnIdle(isOnline, currentGroupChannel, reconnectOnIdle).shouldReconnect;
+  React.useEffect(function () {
+    return function () {
+      var _a, _b;
+      // state changed from offline to online AND tab is visible
+      if (shouldReconnect) {
+        logger.info('Refreshing conversation state');
+        var isReactionEnabled = ((_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.useReaction) || false;
+        var messageListParams_1 = {
+          prevResultSize: _const.PREV_RESULT_SIZE,
+          isInclusive: true,
+          includeReactions: isReactionEnabled,
+          nextResultSize: _const.NEXT_RESULT_SIZE
+        };
+        if (replyType && replyType === 'QUOTE_REPLY') {
+          messageListParams_1.includeThreadInfo = true;
+          messageListParams_1.includeParentMessageInfo = true;
+          messageListParams_1.replyType = message.ReplyType.ONLY_REPLY_TO_CHANNEL;
+        }
+        if (userFilledMessageListQuery) {
+          Object.keys(userFilledMessageListQuery).forEach(function (key) {
+            messageListParams_1[key] = userFilledMessageListQuery[key];
+          });
+        }
+        logger.info('Channel: Fetching messages', {
+          currentGroupChannel: currentGroupChannel,
+          userFilledMessageListQuery: userFilledMessageListQuery
+        });
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_START,
+          payload: null
+        });
+        (_b = sdk === null || sdk === void 0 ? void 0 : sdk.groupChannel) === null || _b === void 0 ? void 0 : _b.getChannel(currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url).then(function (groupChannel) {
+          var lastMessageTime = new Date().getTime();
+          groupChannel.getMessagesByTimestamp(lastMessageTime, messageListParams_1).then(function (messages) {
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_SUCCESS,
+              payload: {
+                currentGroupChannel: currentGroupChannel,
+                messages: messages
+              }
+            });
+            setTimeout(function () {
+              return utils.scrollIntoLast(0, scrollRef);
+            });
+          }).catch(function (error) {
+            logger.error('Channel: Fetching messages failed', error);
+            messagesDispatcher({
+              type: useSendMultipleFilesMessage.FETCH_INITIAL_MESSAGES_FAILURE,
+              payload: {
+                currentGroupChannel: currentGroupChannel
+              }
+            });
+          });
+          if (!disableMarkAsRead) {
+            markAsReadScheduler.push(currentGroupChannel);
+          }
+        });
+      }
+    };
+  }, [shouldReconnect, replyType]);
+}
+
+function useScrollCallback(_a, _b) {
+  var currentGroupChannel = _a.currentGroupChannel,
+    oldestMessageTimeStamp = _a.oldestMessageTimeStamp,
+    userFilledMessageListQuery = _a.userFilledMessageListQuery,
+    replyType = _a.replyType;
+  var hasMorePrev = _b.hasMorePrev,
+    logger = _b.logger,
+    messagesDispatcher = _b.messagesDispatcher,
+    sdk = _b.sdk;
+  return React.useCallback(function () {
+    var _a, _b;
+    if (!hasMorePrev) {
+      return;
+    }
+    var messageListParams = {
+      prevResultSize: _const.PREV_RESULT_SIZE,
+      isInclusive: true,
+      includeMetaArray: true,
+      includeReactions: (_b = (_a = sdk === null || sdk === void 0 ? void 0 : sdk.appInfo) === null || _a === void 0 ? void 0 : _a.useReaction) !== null && _b !== void 0 ? _b : false
+    };
+    if (replyType === 'QUOTE_REPLY' || replyType === 'THREAD') {
+      messageListParams.includeThreadInfo = true;
+      messageListParams.includeParentMessageInfo = true;
+      messageListParams.replyType = message.ReplyType.ONLY_REPLY_TO_CHANNEL;
+    }
+    if (userFilledMessageListQuery) {
+      Object.keys(userFilledMessageListQuery).forEach(function (key) {
+        messageListParams[key] = userFilledMessageListQuery[key];
+      });
+    }
+    logger.info('Channel: Fetching messages', {
+      currentGroupChannel: currentGroupChannel,
+      userFilledMessageListQuery: userFilledMessageListQuery
+    });
+    currentGroupChannel.getMessagesByTimestamp(oldestMessageTimeStamp || new Date().getTime(), messageListParams).then(function (messages) {
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.FETCH_PREV_MESSAGES_SUCCESS,
+        payload: {
+          currentGroupChannel: currentGroupChannel,
+          messages: messages
+        }
+      });
+    }).catch(function () {
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.FETCH_PREV_MESSAGES_FAILURE,
+        payload: {
+          currentGroupChannel: currentGroupChannel
+        }
+      });
+    });
+  }, [currentGroupChannel, oldestMessageTimeStamp, replyType]);
+}
+
+function useScrollDownCallback(_ref, _ref2) {
+  let {
+    currentGroupChannel,
+    latestMessageTimeStamp,
+    userFilledMessageListQuery,
+    hasMoreNext,
+    replyType
+  } = _ref;
+  let {
+    logger,
+    messagesDispatcher,
+    sdk
+  } = _ref2;
+  return React.useCallback(cb => {
+    if (!hasMoreNext) {
+      return;
+    }
+    const {
+      appInfo = {}
+    } = sdk;
+    const isReactionEnabled = appInfo.useReaction || false;
+    const messageListParams = {
+      nextResultSize: _const.NEXT_RESULT_SIZE,
+      isInclusive: true,
+      includeReactions: isReactionEnabled
+    };
+    messageListParams.includeMetaArray = true;
+    if (replyType && (replyType === 'QUOTE_REPLY' || replyType === 'THREAD')) {
+      messageListParams.includeThreadInfo = true;
+      messageListParams.includeParentMessageInfo = true;
+      messageListParams.replyType = message.ReplyType.ONLY_REPLY_TO_CHANNEL;
+    }
+    if (userFilledMessageListQuery) {
+      Object.keys(userFilledMessageListQuery).forEach(key => {
+        messageListParams[key] = userFilledMessageListQuery[key];
+      });
+    }
+    logger.info('Channel: Fetching later messages', {
+      currentGroupChannel,
+      userFilledMessageListQuery
+    });
+    currentGroupChannel.getMessagesByTimestamp(latestMessageTimeStamp || new Date().getTime(), messageListParams).then(messages => {
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.FETCH_NEXT_MESSAGES_SUCCESS,
+        payload: {
+          currentGroupChannel,
+          messages
+        }
+      });
+      cb([messages, null]);
+    }).catch(error => {
+      logger.error('Channel: Fetching later messages failed', error);
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.FETCH_NEXT_MESSAGES_FAILURE,
+        payload: {
+          currentGroupChannel
+        }
+      });
+      cb([null, error]);
+    });
+  }, [currentGroupChannel, latestMessageTimeStamp, hasMoreNext, replyType]);
+}
+
+function useDeleteMessageCallback(_ref, _ref2) {
+  let {
+    currentGroupChannel,
+    messagesDispatcher
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return React.useCallback(message => {
+    logger.info('Channel | useDeleteMessageCallback: Deleting message', message);
+    const {
+      sendingStatus
+    } = message;
+    return new Promise((resolve, reject) => {
+      logger.info('Channel | useDeleteMessageCallback: Deleting message requestState:', sendingStatus);
+      // Message is only on local
+      if (sendingStatus === 'failed' || sendingStatus === 'pending') {
+        logger.info('Channel | useDeleteMessageCallback: Deleted message from local:', message);
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.ON_MESSAGE_DELETED_BY_REQ_ID,
+          payload: message.reqId
+        });
+        resolve(message);
+      } else {
+        logger.info('Channel | useDeleteMessageCallback: Deleting message from remote:', sendingStatus);
+        currentGroupChannel.deleteMessage(message).then(() => {
+          logger.info('Channel | useDeleteMessageCallback: Deleting message success!', message);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.ON_MESSAGE_DELETED,
+            payload: message.messageId
+          });
+          resolve(message);
+        }).catch(err => {
+          logger.warning('Channel | useDeleteMessageCallback: Deleting message failed!', err);
+          reject(err);
+        });
+      }
+    });
+  }, [currentGroupChannel, messagesDispatcher]);
+}
+
+function useUpdateMessageCallback(_ref, _ref2) {
+  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) {
+        params.mentionedUsers = mentionedUsers;
+      }
+      if (isMentionEnabled && mentionTemplate) {
+        params.mentionedMessageTemplate = mentionTemplate;
+      } else {
+        params.mentionedMessageTemplate = message;
+      }
+      return params;
+    };
+    const createCustomPrams = onBeforeUpdateUserMessage && typeof onBeforeUpdateUserMessage === 'function';
+    if (createCustomPrams) {
+      logger.info('Channel: creating params using onBeforeUpdateUserMessage', onBeforeUpdateUserMessage);
+    }
+    const params = onBeforeUpdateUserMessage ? onBeforeUpdateUserMessage(message) : createParamsDefault();
+    logger.info('Channel: Updating message!', params);
+    currentGroupChannel.updateUserMessage(messageId, params).then((msg, err) => {
+      if (callback) {
+        callback(err, msg);
+      }
+      logger.info('Channel: Updating message success!', msg);
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.ON_MESSAGE_UPDATED,
+        payload: {
+          channel: currentGroupChannel,
+          message: msg
+        }
+      });
+      pubSub.publish(pubSub_topics.PUBSUB_TOPICS.UPDATE_USER_MESSAGE, {
+        message: msg,
+        channel: currentGroupChannel,
+        publishingModules: [useSendMultipleFilesMessage.PublishingModuleType.CHANNEL]
+      });
+    });
+  }, [currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url, messagesDispatcher, onBeforeUpdateUserMessage]);
+}
+
+function useResendMessageCallback(_ref, _ref2) {
+  let {
+    currentGroupChannel,
+    messagesDispatcher
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return React.useCallback(failedMessage => {
+    logger.info('Channel: Resending message has started', failedMessage);
+    const {
+      messageType,
+      file
+    } = failedMessage;
+    if (failedMessage !== null && failedMessage !== void 0 && failedMessage.isResendable) {
+      // Move the logic setting sendingStatus to pending into the reducer
+      // eslint-disable-next-line no-param-reassign
+      failedMessage.requestState = 'pending';
+      // eslint-disable-next-line no-param-reassign
+      failedMessage.sendingStatus = 'pending';
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.RESEND_MESSAGE_START,
+        payload: failedMessage
+      });
+
+      // userMessage
+      if (messageType === 'user') {
+        currentGroupChannel.resendUserMessage(failedMessage).then(message => {
+          logger.info('Channel: Resending message success!', message);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+            payload: message
+          });
+        }).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
+          failedMessage.sendingStatus = 'failed';
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+            payload: failedMessage
+          });
+        });
+
+        // eslint-disable-next-line no-param-reassign
+        failedMessage.requestState = 'pending';
+        // eslint-disable-next-line no-param-reassign
+        failedMessage.sendingStatus = 'pending';
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.RESEND_MESSAGE_START,
+          payload: failedMessage
+        });
+        return;
+      }
+      if (messageType === 'file') {
+        currentGroupChannel.resendFileMessage(failedMessage, file).then(message => {
+          logger.info('Channel: Resending file message success!', message);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+            payload: message
+          });
+        }).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
+          failedMessage.sendingStatus = 'failed';
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+            payload: failedMessage
+          });
+        });
+
+        // eslint-disable-next-line no-param-reassign
+        failedMessage.requestState = 'pending';
+        // eslint-disable-next-line no-param-reassign
+        failedMessage.sendingStatus = 'pending';
+        messagesDispatcher({
+          type: useSendMultipleFilesMessage.RESEND_MESSAGE_START,
+          payload: failedMessage
+        });
+      }
+      if (index$1.isMultipleFilesMessage(failedMessage)) {
+        currentGroupChannel.resendMessage(failedMessage).onPending(message => {
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.RESEND_MESSAGE_START,
+            payload: message
+          });
+        })
+        // TODO: Handle on file info upload event.
+        .onSucceeded(message => {
+          logger.info('Channel: Resending multiple files message success!', message);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+            payload: message
+          });
+        }).onFailed((e, message) => {
+          logger.warning('Channel: Resending multiple files message failed!', e);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+            payload: message
+          });
+        });
+      }
+    } else {
+      // to alert user on console
+      // eslint-disable-next-line no-console
+      console.error('Message is not resendable');
+      logger.warning('Message is not resendable', failedMessage);
+    }
+  }, [currentGroupChannel, messagesDispatcher]);
+}
+
+function useSendMessageCallback(_ref, _ref2) {
+  let {
+    isMentionEnabled,
+    currentGroupChannel,
+    onBeforeSendUserMessage
+  } = _ref;
+  let {
+    logger,
+    pubSub,
+    scrollRef,
+    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;
+      // if (isMentionEnabled && mentionedUserIds?.length > 0) {
+      if (isMentionEnabled && (mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) > 0) {
+        // params.mentionedUserIds = mentionedUserIds;
+        params.mentionedUsers = mentionedUsers;
+      }
+      // if (isMentionEnabled && mentionTemplate && mentionedUserIds?.length > 0) {
+      if (isMentionEnabled && mentionTemplate && (mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) > 0) {
+        params.mentionedMessageTemplate = mentionTemplate;
+      }
+      if (quoteMessage) {
+        params.isReplyToChannel = true;
+        params.parentMessageId = quoteMessage.messageId;
+      }
+      return params;
+    };
+    const createCustomPrams = onBeforeSendUserMessage && typeof onBeforeSendUserMessage === 'function';
+    if (createCustomPrams) {
+      logger.info('Channel: creating params using onBeforeSendUserMessage', onBeforeSendUserMessage);
+    }
+    const params = onBeforeSendUserMessage ? onBeforeSendUserMessage(message, quoteMessage) : createParamsDefault();
+    logger.info('Channel: Sending message has started', params);
+    currentGroupChannel.sendUserMessage(params).onPending(pendingMsg => {
+      pubSub.publish(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_START, {
+        /* pubSub is used instead of messagesDispatcher
+          to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+        message: pendingMsg,
+        channel: currentGroupChannel,
+        publishingModules: [useSendMultipleFilesMessage.PublishingModuleType.CHANNEL]
+      });
+      setTimeout(() => utils.scrollIntoLast(0, scrollRef));
+    }).onFailed((err, msg) => {
+      logger.warning('Channel: Sending message failed!', {
+        message: msg,
+        error: err
+      });
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+        payload: msg
+      });
+    }).onSucceeded(msg => {
+      logger.info('Channel: Sending message success!', msg);
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+        payload: msg
+      });
+    });
+  }, [currentGroupChannel, onBeforeSendUserMessage]);
+  return [messageInputRef, sendMessage];
+}
+
+function useSendFileMessageCallback(_ref, _ref2) {
+  let {
+    currentGroupChannel,
+    onBeforeSendFileMessage,
+    imageCompression = {}
+  } = _ref;
+  let {
+    logger,
+    pubSub,
+    scrollRef,
+    messagesDispatcher
+  } = _ref2;
+  const sendMessage = React.useCallback(function (file) {
+    let quoteMessage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return new Promise((resolve, reject) => {
+      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 = utils.pxToNumber(resizingWidth) || utils.pxToNumber(resizingHeight);
+      const canCompressImage = compressibleFileType && (compressibleRatio || compressibleDiamensions);
+      const createParamsDefault = file_ => {
+        const params = {};
+        params.file = file_;
+        if (quoteMessage) {
+          params.isReplyToChannel = true;
+          params.parentMessageId = quoteMessage.messageId;
+        }
+        return params;
+      };
+      if (canCompressImage) {
+        // Using image compression
+        try {
+          const image = document.createElement('img');
+          image.src = URL.createObjectURL(file);
+          image.onload = () => {
+            URL.revokeObjectURL(image.src);
+            const canvas = document.createElement('canvas');
+            const imageWdith = image.naturalWidth || image.width;
+            const imageHeight = image.naturalHeight || image.height;
+            let targetWidth = utils.pxToNumber(resizingWidth) || imageWdith;
+            let targetHeight = utils.pxToNumber(resizingHeight) || imageHeight;
+
+            // In canvas.toBlob(callback, mimeType, qualityArgument)
+            // qualityArgument doesnt work
+            // so in case compressibleDiamensions are not present, we use ratio
+            if (file.type === 'image/png' && !compressibleDiamensions) {
+              targetWidth *= compressionRate;
+              targetHeight *= compressionRate;
+            }
+            canvas.width = targetWidth;
+            canvas.height = targetHeight;
+            const context = canvas.getContext('2d');
+            context.drawImage(image, 0, 0, targetWidth, targetHeight);
+            context.canvas.toBlob(newImageBlob => {
+              const compressedFile = new File([newImageBlob], file.name, {
+                type: file.type
+              });
+              if (createCustomParams) {
+                logger.info('Channel: Creating params using onBeforeSendFileMessage', onBeforeSendFileMessage);
+              }
+              const params = createCustomParams ? onBeforeSendFileMessage(compressedFile, quoteMessage) : createParamsDefault(compressedFile);
+              logger.info('Channel: Uploading file message start!', params);
+              currentGroupChannel.sendFileMessage(params).onPending(pendingMessage => {
+                pubSub.publish(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_START, {
+                  /* pubSub is used instead of messagesDispatcher
+                      to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+                  message: _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, pendingMessage), {}, {
+                    url: URL.createObjectURL(compressedFile),
+                    // pending thumbnail message seems to be failed
+                    requestState: 'pending'
+                  }),
+                  channel: currentGroupChannel,
+                  publishingModules: [useSendMultipleFilesMessage.PublishingModuleType.CHANNEL]
+                });
+                setTimeout(() => utils.scrollIntoLast(0, scrollRef), 1000);
+              }).onFailed((err, failedMessage) => {
+                logger.error('Channel: Sending file message failed!', {
+                  failedMessage,
+                  err
+                });
+                // eslint-disable-next-line no-param-reassign
+                failedMessage.localUrl = URL.createObjectURL(compressedFile);
+                // eslint-disable-next-line no-param-reassign
+                failedMessage.file = compressedFile;
+                messagesDispatcher({
+                  type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+                  payload: failedMessage
+                });
+                reject(err);
+              }).onSucceeded(succeededMessage => {
+                logger.info('Channel: Sending file message success!', succeededMessage);
+                messagesDispatcher({
+                  type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+                  payload: succeededMessage
+                });
+                resolve(succeededMessage);
+              });
+            }, file.type, compressionRate);
+          };
+        } catch (error) {
+          logger.error('Channel: Sending file message failed!', error);
+          reject(error);
+        }
+      } else {
+        // Not using image compression
+        if (createCustomParams) {
+          logger.info('Channel: creating params using onBeforeSendFileMessage', onBeforeSendFileMessage);
+        }
+        const params = onBeforeSendFileMessage ? onBeforeSendFileMessage(file, quoteMessage) : createParamsDefault(file);
+        logger.info('Channel: Uploading file message start!', params);
+        currentGroupChannel.sendFileMessage(params).onPending(pendingMsg => {
+          pubSub.publish(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_START, {
+            /* pubSub is used instead of messagesDispatcher
+                to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+            message: _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, pendingMsg), {}, {
+              url: URL.createObjectURL(file),
+              // pending thumbnail message seems to be failed
+              requestState: 'pending'
+            }),
+            channel: currentGroupChannel,
+            publishingModules: [useSendMultipleFilesMessage.PublishingModuleType.CHANNEL]
+          });
+          setTimeout(() => utils.scrollIntoLast(0, scrollRef), 1000);
+        }).onFailed((error, message) => {
+          logger.error('Channel: Sending file message failed!', {
+            message,
+            error
+          });
+          // eslint-disable-next-line no-param-reassign
+          message.localUrl = URL.createObjectURL(file);
+          // eslint-disable-next-line no-param-reassign
+          message.file = file;
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+            payload: message
+          });
+          reject(error);
+        }).onSucceeded(message => {
+          logger.info('Channel: Sending message success!', message);
+          messagesDispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+            payload: message
+          });
+          resolve(message);
+        });
+      }
+    });
+  }, [currentGroupChannel, onBeforeSendFileMessage, imageCompression]);
+  return [sendMessage];
+}
+
+function useToggleReactionCallback(_ref, _ref2) {
+  let {
+    currentGroupChannel
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return React.useCallback((message, key, isReacted) => {
+    if (isReacted) {
+      currentGroupChannel.deleteReaction(message, key).then(res => {
+        logger.info('Delete reaction success', res);
+      }).catch(err => {
+        logger.warning('Delete reaction failed', err);
+      });
+      return;
+    }
+    currentGroupChannel.addReaction(message, key).then(res => {
+      logger.info('Add reaction success', res);
+    }).catch(err => {
+      logger.warning('Add reaction failed', err);
+    });
+  }, [currentGroupChannel]);
+}
+
+// To prevent multiple clicks on the message in the channel while scrolling
+function deactivateClick(scrollRef) {
+  var element = scrollRef.current;
+  var parentNode = element === null || element === void 0 ? void 0 : element.parentNode;
+  if (element && parentNode) {
+    element.style.pointerEvents = 'none';
+    parentNode.style.cursor = 'wait';
+  }
+}
+function activateClick(scrollRef) {
+  var element = scrollRef.current;
+  var parentNode = element === null || element === void 0 ? void 0 : element.parentNode;
+  if (element && parentNode) {
+    element.style.pointerEvents = 'auto';
+    parentNode.style.cursor = 'auto';
+  }
+}
+function useScrollToMessage(_a, _b) {
+  var setInitialTimeStamp = _a.setInitialTimeStamp,
+    setAnimatedMessageId = _a.setAnimatedMessageId,
+    allMessages = _a.allMessages,
+    scrollRef = _a.scrollRef;
+  var logger = _b.logger;
+  return React.useCallback(function (createdAt, messageId) {
+    var isPresent = allMessages.find(function (m) {
+      return m.messageId === messageId;
+    });
+    setAnimatedMessageId(null);
+    setTimeout(function () {
+      try {
+        logger.info('Channel: scroll to message - disabling mouse events');
+        deactivateClick(scrollRef);
+        if (isPresent) {
+          logger.info('Channel: scroll to message - message is present');
+          setAnimatedMessageId(messageId);
+          utils.scrollToRenderedMessage(scrollRef, createdAt);
+        } else {
+          logger.info('Channel: scroll to message - fetching older messages');
+          setInitialTimeStamp(null);
+          setInitialTimeStamp(createdAt);
+          setAnimatedMessageId(messageId);
+        }
+      } finally {
+        logger.info('Channel: scroll to message - enabled mouse events');
+        activateClick(scrollRef);
+      }
+    });
+  }, [setInitialTimeStamp, setAnimatedMessageId, allMessages]);
+}
+
+var useSendVoiceMessageCallback = function (_a, _b) {
+  var currentGroupChannel = _a.currentGroupChannel,
+    onBeforeSendVoiceMessage = _a.onBeforeSendVoiceMessage;
+  var logger = _b.logger,
+    pubSub = _b.pubSub,
+    scrollRef = _b.scrollRef,
+    messagesDispatcher = _b.messagesDispatcher;
+  var sendMessage = React.useCallback(function (file, duration, quoteMessage) {
+    if (!currentGroupChannel) {
+      return;
+    }
+    var messageParams = onBeforeSendVoiceMessage && typeof onBeforeSendVoiceMessage === 'function' ? onBeforeSendVoiceMessage(file, quoteMessage) : {
+      file: file,
+      fileName: consts.VOICE_MESSAGE_FILE_NAME,
+      mimeType: consts.VOICE_MESSAGE_MIME_TYPE,
+      metaArrays: [new message.MessageMetaArray({
+        key: consts.META_ARRAY_VOICE_DURATION_KEY,
+        value: ["".concat(duration)]
+      }), new message.MessageMetaArray({
+        key: consts.META_ARRAY_MESSAGE_TYPE_KEY,
+        value: [consts.META_ARRAY_MESSAGE_TYPE_VALUE__VOICE]
+      })]
+    };
+    if (quoteMessage) {
+      messageParams.isReplyToChannel = true;
+      messageParams.parentMessageId = quoteMessage.messageId;
+    }
+    logger.info('Channel: Start sending voice message', messageParams);
+    currentGroupChannel.sendFileMessage(messageParams).onPending(function (pendingMessage) {
+      pubSub.publish(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_START, {
+        /* pubSub is used instead of messagesDispatcher
+          to avoid redundantly calling `messageActionTypes.SEND_MESSAGE_START` */
+        message: pendingMessage,
+        channel: currentGroupChannel,
+        publishingModules: [useSendMultipleFilesMessage.PublishingModuleType.CHANNEL]
+      });
+      setTimeout(function () {
+        return utils.scrollIntoLast(0, scrollRef);
+      }, 1000);
+    }).onFailed(function (err, failedMessage) {
+      logger.error('Channel: Sending voice message failed!', {
+        failedMessage: failedMessage,
+        err: err
+      });
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+        payload: failedMessage
+      });
+    }).onSucceeded(function (succeededMessage) {
+      logger.info('Channel: Sending voice message success!', succeededMessage);
+      messagesDispatcher({
+        type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+        payload: succeededMessage
+      });
+    });
+  }, [currentGroupChannel, onBeforeSendVoiceMessage]);
+  return [sendMessage];
+};
+
+var useHandleChannelPubsubEvents = function (_a) {
+  var channelUrl = _a.channelUrl,
+    sdkInit = _a.sdkInit,
+    pubSub = _a.pubSub,
+    dispatcher = _a.dispatcher,
+    scrollRef = _a.scrollRef;
+  React.useEffect(function () {
+    var subscriber = new Map();
+    if (pubSub === null || pubSub === void 0 ? void 0 : pubSub.subscribe) {
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.SEND_USER_MESSAGE, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.SEND_USER_MESSAGE, function (props) {
+        var channel = props.channel,
+          message = props.message;
+        utils.scrollIntoLast(0, scrollRef);
+        if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+            payload: message
+          });
+        }
+      }));
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_START, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_START, function (props) {
+        var _a = props,
+          channel = _a.channel,
+          message = _a.message,
+          publishingModules = _a.publishingModules;
+        if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url) && publishingModules.includes(useSendMultipleFilesMessage.PublishingModuleType.CHANNEL)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_START,
+            payload: message
+          });
+        }
+      }));
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.ON_FILE_INFO_UPLOADED, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.ON_FILE_INFO_UPLOADED, function (props) {
+        var _a = props,
+          response = _a.response,
+          publishingModules = _a.publishingModules;
+        if (channelUrl === response.channelUrl && publishingModules.includes(useSendMultipleFilesMessage.PublishingModuleType.CHANNEL)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.ON_FILE_INFO_UPLOADED,
+            payload: response
+          });
+        }
+      }));
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_FAILED, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.SEND_MESSAGE_FAILED, function (props) {
+        var _a = props,
+          channel = _a.channel,
+          message = _a.message,
+          publishingModules = _a.publishingModules;
+        if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url) && publishingModules.includes(useSendMultipleFilesMessage.PublishingModuleType.CHANNEL)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_FAILURE,
+            payload: message
+          });
+        }
+      }));
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.SEND_FILE_MESSAGE, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.SEND_FILE_MESSAGE, function (props) {
+        var channel = props.channel,
+          message = props.message;
+        utils.scrollIntoLast(0, scrollRef);
+        if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.SEND_MESSAGE_SUCCESS,
+            payload: message
+          });
+        }
+      }));
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.UPDATE_USER_MESSAGE, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.UPDATE_USER_MESSAGE, function (props) {
+        var channel = props.channel,
+          message = props.message,
+          fromSelector = props.fromSelector;
+        if (fromSelector && channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.ON_MESSAGE_UPDATED,
+            payload: {
+              channel: channel,
+              message: message
+            }
+          });
+        }
+      }));
+      subscriber.set(pubSub_topics.PUBSUB_TOPICS.DELETE_MESSAGE, pubSub.subscribe(pubSub_topics.PUBSUB_TOPICS.DELETE_MESSAGE, function (props) {
+        var channel = props.channel,
+          messageId = props.messageId;
+        if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
+          dispatcher({
+            type: useSendMultipleFilesMessage.ON_MESSAGE_DELETED,
+            payload: messageId
+          });
+        }
+      }));
+    }
+    return function () {
+      subscriber.forEach(function (s) {
+        try {
+          s.remove();
+        } catch (_a) {
+          //
+        }
+      });
+    };
+  }, [channelUrl, sdkInit]);
+};
+
+var ChannelContext = /*#__PURE__*/React__default["default"].createContext(undefined);
+var ChannelProvider = function (props) {
+  var _a, _b, _c, _d, _e, _f;
+  var channelUrl = props.channelUrl,
+    children = props.children,
+    isReactionEnabled = props.isReactionEnabled,
+    _g = props.isMessageGroupingEnabled,
+    isMessageGroupingEnabled = _g === void 0 ? true : _g,
+    _h = props.isMultipleFilesMessageEnabled,
+    isMultipleFilesMessageEnabled = _h === void 0 ? false : _h,
+    showSearchIcon = props.showSearchIcon,
+    animatedMessage = props.animatedMessage,
+    highlightedMessage = props.highlightedMessage,
+    startingPoint = props.startingPoint,
+    onBeforeSendUserMessage = props.onBeforeSendUserMessage,
+    onBeforeSendFileMessage = props.onBeforeSendFileMessage,
+    onBeforeUpdateUserMessage = props.onBeforeUpdateUserMessage,
+    onBeforeSendVoiceMessage = props.onBeforeSendVoiceMessage,
+    onBeforeSendMultipleFilesMessage = props.onBeforeSendMultipleFilesMessage,
+    onChatHeaderActionClick = props.onChatHeaderActionClick,
+    onSearchClick = props.onSearchClick,
+    onBackClick = props.onBackClick,
+    channelReplyType = props.replyType,
+    threadReplySelectType = props.threadReplySelectType,
+    queries = props.queries,
+    filterMessageList = props.filterMessageList,
+    _j = props.disableMarkAsRead,
+    disableMarkAsRead = _j === void 0 ? false : _j,
+    onReplyInThread = props.onReplyInThread,
+    onQuoteMessageClick = props.onQuoteMessageClick,
+    onMessageAnimated = props.onMessageAnimated,
+    onMessageHighlighted = props.onMessageHighlighted,
+    _k = props.scrollBehavior,
+    scrollBehavior = _k === void 0 ? 'auto' : _k,
+    _l = props.reconnectOnIdle,
+    reconnectOnIdle = _l === void 0 ? true : _l;
+  var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+  var config = globalStore.config;
+  var replyType = channelReplyType !== null && channelReplyType !== void 0 ? channelReplyType : config.replyType;
+  var pubSub = config.pubSub,
+    logger = config.logger,
+    userId = config.userId,
+    isOnline = config.isOnline,
+    imageCompression = config.imageCompression,
+    isMentionEnabled = config.isMentionEnabled,
+    isVoiceMessageEnabled = config.isVoiceMessageEnabled,
+    onUserProfileMessage = config.onUserProfileMessage,
+    markAsReadScheduler = config.markAsReadScheduler,
+    groupChannel = config.groupChannel;
+  var sdk = (_b = (_a = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
+  var sdkInit = (_d = (_c = globalStore === null || globalStore === void 0 ? void 0 : globalStore.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.initialized;
+  var globalConfigs = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config;
+  var _m = React.useState(startingPoint),
+    initialTimeStamp = _m[0],
+    setInitialTimeStamp = _m[1];
+  React.useEffect(function () {
+    setInitialTimeStamp(startingPoint);
+  }, [startingPoint, channelUrl]);
+  var _o = React.useState(0),
+    animatedMessageId = _o[0],
+    setAnimatedMessageId = _o[1];
+  var _p = React.useState(highlightedMessage),
+    highLightedMessageId = _p[0],
+    setHighLightedMessageId = _p[1];
+  React.useEffect(function () {
+    setHighLightedMessageId(highlightedMessage);
+  }, [highlightedMessage]);
+  var userFilledMessageListQuery = queries === null || queries === void 0 ? void 0 : queries.messageListParams;
+  var _q = React.useState(null),
+    quoteMessage = _q[0],
+    setQuoteMessage = _q[1];
+  var _r = React.useState(false),
+    isScrolled = _r[0],
+    setIsScrolled = _r[1];
+  var _s = React.useReducer(channelReducer, initialState),
+    messagesStore = _s[0],
+    messagesDispatcher = _s[1];
+  var scrollRef = React.useRef(null);
+  var allMessages = messagesStore.allMessages,
+    localMessages = messagesStore.localMessages,
+    loading = messagesStore.loading,
+    initialized = messagesStore.initialized,
+    unreadSince = messagesStore.unreadSince,
+    isInvalid = messagesStore.isInvalid,
+    currentGroupChannel = messagesStore.currentGroupChannel,
+    hasMorePrev = messagesStore.hasMorePrev,
+    oldestMessageTimeStamp = messagesStore.oldestMessageTimeStamp,
+    hasMoreNext = messagesStore.hasMoreNext,
+    latestMessageTimeStamp = messagesStore.latestMessageTimeStamp,
+    emojiContainer = messagesStore.emojiContainer,
+    readStatus = messagesStore.readStatus;
+  var isSuper = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isSuper) || false;
+  var isBroadcast = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isBroadcast) || false;
+  var usingReaction = getIsReactionEnabled({
+    isBroadcast: isBroadcast,
+    isSuper: isSuper,
+    globalLevel: config === null || config === void 0 ? void 0 : config.isReactionEnabled,
+    moduleLevel: isReactionEnabled
+  });
+  var emojiAllMap = React.useMemo(function () {
+    return usingReaction ? utils.getAllEmojisMapFromEmojiContainer(emojiContainer) : new Map();
+  }, [emojiContainer]);
+  var nicknamesMap = React.useMemo(function () {
+    return usingReaction && currentGroupChannel ? utils.getNicknamesMapFromMembers(currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) : new Map();
+  }, [currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members]);
+  // Animate message
+  React.useEffect(function () {
+    if (animatedMessage) {
+      setAnimatedMessageId(animatedMessage);
+    }
+  }, [animatedMessage]);
+  // Scrollup is default scroll for channel
+  var onScrollCallback = useScrollCallback({
+    currentGroupChannel: currentGroupChannel,
+    oldestMessageTimeStamp: oldestMessageTimeStamp,
+    userFilledMessageListQuery: userFilledMessageListQuery,
+    replyType: replyType
+  }, {
+    hasMorePrev: hasMorePrev,
+    logger: logger,
+    messagesDispatcher: messagesDispatcher,
+    sdk: sdk
+  });
+  var scrollToMessage = useScrollToMessage({
+    setInitialTimeStamp: setInitialTimeStamp,
+    setAnimatedMessageId: setAnimatedMessageId,
+    allMessages: allMessages,
+    scrollRef: scrollRef
+  }, {
+    logger: logger
+  });
+  // onScrollDownCallback is added for navigation to different timestamps on messageSearch
+  // hasMorePrev, onScrollCallback -> scroll up(default behavior)
+  // hasMoreNext, onScrollDownCallback -> scroll down
+  var onScrollDownCallback = useScrollDownCallback({
+    currentGroupChannel: currentGroupChannel,
+    latestMessageTimeStamp: latestMessageTimeStamp,
+    userFilledMessageListQuery: userFilledMessageListQuery,
+    hasMoreNext: hasMoreNext,
+    replyType: replyType,
+    isVoiceMessageEnabled: isVoiceMessageEnabled
+  }, {
+    logger: logger,
+    messagesDispatcher: messagesDispatcher,
+    sdk: sdk
+  });
+  var toggleReaction = useToggleReactionCallback({
+    currentGroupChannel: currentGroupChannel
+  }, {
+    logger: logger
+  });
+  // to create message-datasource
+  // this hook sets currentGroupChannel asynchronously
+  useSetChannel({
+    channelUrl: channelUrl,
+    sdkInit: sdkInit,
+    disableMarkAsRead: disableMarkAsRead
+  }, {
+    messagesDispatcher: messagesDispatcher,
+    sdk: sdk,
+    logger: logger,
+    markAsReadScheduler: markAsReadScheduler
+  });
+  // to set quote message as null
+  React.useEffect(function () {
+    setQuoteMessage(null);
+  }, [channelUrl]);
+  // Hook to handle ChannelEvents and send values to useReducer using messagesDispatcher
+  useHandleChannelEvents({
+    currentGroupChannel: currentGroupChannel,
+    sdkInit: sdkInit,
+    currentUserId: userId,
+    disableMarkAsRead: disableMarkAsRead
+  }, {
+    messagesDispatcher: messagesDispatcher,
+    sdk: sdk,
+    logger: logger,
+    scrollRef: scrollRef,
+    setQuoteMessage: setQuoteMessage
+  });
+  // hook that fetches messages when channel changes
+  // to be clear here useGetChannel sets currentGroupChannel
+  // and useInitialMessagesFetch executes when currentGroupChannel changes
+  // p.s This one executes on initialTimeStamp change too
+  useInitialMessagesFetch({
+    currentGroupChannel: currentGroupChannel,
+    userFilledMessageListQuery: userFilledMessageListQuery,
+    initialTimeStamp: initialTimeStamp,
+    replyType: replyType,
+    setIsScrolled: setIsScrolled
+  }, {
+    logger: logger,
+    scrollRef: scrollRef,
+    messagesDispatcher: messagesDispatcher
+  });
+  // handles API calls from withSendbird
+  useHandleChannelPubsubEvents({
+    channelUrl: channelUrl,
+    sdkInit: sdkInit,
+    pubSub: pubSub,
+    dispatcher: messagesDispatcher,
+    scrollRef: scrollRef
+  });
+  // handling connection breaks
+  useHandleReconnect({
+    isOnline: isOnline,
+    replyType: replyType,
+    disableMarkAsRead: disableMarkAsRead,
+    reconnectOnIdle: reconnectOnIdle
+  }, {
+    logger: logger,
+    sdk: sdk,
+    scrollRef: scrollRef,
+    currentGroupChannel: currentGroupChannel,
+    messagesDispatcher: messagesDispatcher,
+    userFilledMessageListQuery: userFilledMessageListQuery,
+    markAsReadScheduler: markAsReadScheduler
+  });
+  // callbacks for Message CURD actions
+  var deleteMessage = useDeleteMessageCallback({
+    currentGroupChannel: currentGroupChannel,
+    messagesDispatcher: messagesDispatcher
+  }, {
+    logger: logger
+  });
+  var updateMessage = useUpdateMessageCallback({
+    currentGroupChannel: currentGroupChannel,
+    messagesDispatcher: messagesDispatcher,
+    onBeforeUpdateUserMessage: onBeforeUpdateUserMessage,
+    isMentionEnabled: isMentionEnabled
+  }, {
+    logger: logger,
+    pubSub: pubSub
+  });
+  var resendMessage = useResendMessageCallback({
+    currentGroupChannel: currentGroupChannel,
+    messagesDispatcher: messagesDispatcher
+  }, {
+    logger: logger
+  });
+  var _t = useSendMessageCallback({
+      currentGroupChannel: currentGroupChannel,
+      isMentionEnabled: isMentionEnabled,
+      onBeforeSendUserMessage: onBeforeSendUserMessage
+    }, {
+      logger: logger,
+      pubSub: pubSub,
+      scrollRef: scrollRef,
+      messagesDispatcher: messagesDispatcher
+    }),
+    messageInputRef = _t[0],
+    sendMessage = _t[1];
+  var sendFileMessage = useSendFileMessageCallback({
+    currentGroupChannel: currentGroupChannel,
+    imageCompression: imageCompression,
+    onBeforeSendFileMessage: onBeforeSendFileMessage
+  }, {
+    logger: logger,
+    pubSub: pubSub,
+    scrollRef: scrollRef,
+    messagesDispatcher: messagesDispatcher
+  })[0];
+  var sendVoiceMessage = useSendVoiceMessageCallback({
+    currentGroupChannel: currentGroupChannel,
+    onBeforeSendVoiceMessage: onBeforeSendVoiceMessage
+  }, {
+    logger: logger,
+    pubSub: pubSub,
+    scrollRef: scrollRef,
+    messagesDispatcher: messagesDispatcher
+  })[0];
+  var sendMultipleFilesMessage = useSendMultipleFilesMessage.useSendMultipleFilesMessage({
+    currentChannel: currentGroupChannel,
+    onBeforeSendMultipleFilesMessage: onBeforeSendMultipleFilesMessage,
+    publishingModules: [useSendMultipleFilesMessage.PublishingModuleType.CHANNEL]
+  }, {
+    logger: logger,
+    pubSub: pubSub,
+    scrollRef: scrollRef
+  })[0];
+  return /*#__PURE__*/React__default["default"].createElement(ChannelContext.Provider, {
+    value: {
+      // props
+      channelUrl: channelUrl,
+      isReactionEnabled: usingReaction,
+      isMessageGroupingEnabled: isMessageGroupingEnabled,
+      isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled,
+      showSearchIcon: showSearchIcon !== null && showSearchIcon !== void 0 ? showSearchIcon : globalConfigs.showSearchIcon,
+      highlightedMessage: highlightedMessage,
+      startingPoint: startingPoint,
+      onBeforeSendUserMessage: onBeforeSendUserMessage,
+      onBeforeSendFileMessage: onBeforeSendFileMessage,
+      onBeforeUpdateUserMessage: onBeforeUpdateUserMessage,
+      onChatHeaderActionClick: onChatHeaderActionClick,
+      onSearchClick: onSearchClick,
+      onBackClick: onBackClick,
+      replyType: replyType,
+      threadReplySelectType: (_e = threadReplySelectType !== null && threadReplySelectType !== void 0 ? threadReplySelectType : resolvedReplyType.getCaseResolvedThreadReplySelectType(groupChannel.threadReplySelectType).upperCase) !== null && _e !== void 0 ? _e : _const.ThreadReplySelectType.THREAD,
+      queries: queries,
+      filterMessageList: filterMessageList,
+      disableMarkAsRead: disableMarkAsRead,
+      onReplyInThread: onReplyInThread,
+      onQuoteMessageClick: onQuoteMessageClick,
+      onMessageAnimated: onMessageAnimated,
+      onMessageHighlighted: onMessageHighlighted,
+      // messagesStore
+      allMessages: allMessages,
+      localMessages: localMessages,
+      loading: loading,
+      initialized: initialized,
+      unreadSince: unreadSince,
+      isInvalid: isInvalid,
+      currentGroupChannel: currentGroupChannel,
+      hasMorePrev: hasMorePrev,
+      hasMoreNext: hasMoreNext,
+      oldestMessageTimeStamp: oldestMessageTimeStamp,
+      latestMessageTimeStamp: latestMessageTimeStamp,
+      emojiContainer: emojiContainer,
+      readStatus: readStatus,
+      // utils
+      scrollToMessage: scrollToMessage,
+      quoteMessage: quoteMessage,
+      setQuoteMessage: setQuoteMessage,
+      deleteMessage: deleteMessage,
+      updateMessage: updateMessage,
+      resendMessage: resendMessage,
+      messageInputRef: messageInputRef,
+      sendMessage: sendMessage,
+      sendFileMessage: sendFileMessage,
+      sendVoiceMessage: sendVoiceMessage,
+      sendMultipleFilesMessage: sendMultipleFilesMessage,
+      initialTimeStamp: initialTimeStamp,
+      messageActionTypes: useSendMultipleFilesMessage.channelActions,
+      messagesDispatcher: messagesDispatcher,
+      setInitialTimeStamp: setInitialTimeStamp,
+      setAnimatedMessageId: setAnimatedMessageId,
+      setHighLightedMessageId: setHighLightedMessageId,
+      animatedMessageId: animatedMessageId,
+      highLightedMessageId: highLightedMessageId,
+      nicknamesMap: nicknamesMap,
+      emojiAllMap: emojiAllMap,
+      onScrollCallback: onScrollCallback,
+      onScrollDownCallback: onScrollDownCallback,
+      scrollRef: scrollRef,
+      scrollBehavior: scrollBehavior,
+      toggleReaction: toggleReaction,
+      isScrolled: isScrolled,
+      setIsScrolled: setIsScrolled
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(UserProfileContext.UserProfileProvider, {
+    disableUserProfile: (_f = props === null || props === void 0 ? void 0 : props.disableUserProfile) !== null && _f !== void 0 ? _f : config === null || config === void 0 ? void 0 : config.disableUserProfile,
+    renderUserProfile: props === null || props === void 0 ? void 0 : props.renderUserProfile,
+    onUserProfileMessage: onUserProfileMessage
+  }, children));
+};
+var useChannelContext = function () {
+  return React__default["default"].useContext(ChannelContext);
+};
+
+exports.ChannelProvider = ChannelProvider;
+exports.getIsReactionEnabled = getIsReactionEnabled;
+exports.useChannelContext = useChannelContext;
+//# sourceMappingURL=ChannelProvider-7fa98120.js.map