@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-1

package/{ChannelProvider-554e7116.js → ChannelProvider-b41fde4c.js}

@@ -1,20 +1,16 @@
-import React__default, { useEffect, useCallback, useRef, useMemo, useState, useReducer } from 'react';
-import { U as UserProfileProvider } from './UserProfileContext-c58a7b86.js';
+import React__default, { useEffect, useCallback, useRef, useState, useReducer, useMemo } from 'react';
+import { U as UserProfileProvider } from './UserProfileContext-29074346.js';
 import useSendbirdStateContext from './useSendbirdStateContext.js';
-import { f as format } from './index-3f26a31c.js';
-import { a as SEND_USER_MESSAGE, S as SEND_MESSAGE_START, b as SEND_FILE_MESSAGE, U as UPDATE_USER_MESSAGE, D as DELETE_MESSAGE } from './topics-351ea731.js';
-import { a as getSendingMessageStatus, b as isReadMessage, c as filterMessageListParams } from './index-5f08f486.js';
-import './utils/message/getOutgoingMessageState.js';
-import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-498add61.js';
-import { c as compareIds } from './compareIds-9430f9d8.js';
-import { N as NEXT_RESULT_SIZE, P as PREV_RESULT_SIZE } from './const-9d11f204.js';
+import { f as format } from './index-f1701c11.js';
+import { P as PUBSUB_TOPICS } from './topics-5ff88d6f.js';
+import { a as getSendingMessageStatus, b as isReadMessage, c as filterMessageListParams } from './index-e2601165.js';
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-0bc76382.js';
+import { c as compareIds } from './compareIds-bc881fe7.js';
+import { N as NEXT_RESULT_SIZE, P as PREV_RESULT_SIZE } from './const-e51dda0c.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
-import { u as uuidv4 } from './uuid-286ed926.js';
-import { ReplyType } from '@sendbird/chat/message';
-import { EmojiListItems } from './ui/ContextMenu.js';
-import ReactionButton from './ui/ReactionButton.js';
-import ImageRenderer from './ui/ImageRenderer.js';
-import Icon, { IconTypes } from './ui/Icon.js';
+import { u as uuidv4 } from './uuid-1f1bbd9c.js';
+import { ReplyType, MessageMetaArray } from '@sendbird/chat/message';
+import { b as VOICE_MESSAGE_FILE_NAME, c as VOICE_MESSAGE_MIME_TYPE, M as META_ARRAY_VOICE_DURATION_KEY, d as META_ARRAY_MESSAGE_TYPE_KEY, e as META_ARRAY_MESSAGE_TYPE_VALUE__VOICE } from './consts-3c0ff1ed.js';
 
 const RESET_MESSAGES = 'RESET_MESSAGES';
 const FETCH_INITIAL_MESSAGES_START = 'FETCH_INITIAL_MESSAGES_START';
@@ -73,19 +69,37 @@ const {
   FAILED,
   PENDING
 } = getSendingMessageStatus();
+const scrollToRenderedMessage = (scrollRef, initialTimeStamp) => {
+  try {
+    var _container$querySelec;
+    const container = scrollRef.current;
+    // scroll into the message with initialTimeStamp
+    const element = (_container$querySelec = container.querySelectorAll(`[data-sb-created-at="${initialTimeStamp}"]`)) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec[0];
+    if (element) {
+      // Calculate the offset of the element from the top of the container
+      const containerHeight = container.offsetHeight;
+      const elementHeight = element.offsetHeight;
+      const elementOffset = (containerHeight - elementHeight) / 2;
+      // Set the scroll position of the container to bring the element to the middle
+      container.scrollTop = element.offsetTop - elementOffset;
+    }
+  } catch (_unused) {
+    // do nothing
+  }
+};
+
+/* eslint-disable default-param-last */
 const scrollIntoLast = function () {
   let initialTry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   let scrollRef = arguments.length > 1 ? arguments[1] : undefined;
   const MAX_TRIES = 10;
   const currentTry = initialTry;
-
   if (currentTry > MAX_TRIES) {
     return;
   }
-
   try {
-    const scrollDOM = (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) || document.querySelector('.sendbird-conversation__messages-padding'); // eslint-disable-next-line no-multi-assign
-
+    const scrollDOM = (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) || document.querySelector('.sendbird-conversation__messages-padding');
+    // eslint-disable-next-line no-multi-assign
     scrollDOM.scrollTop = scrollDOM.scrollHeight;
   } catch (error) {
     setTimeout(() => {
@@ -97,7 +111,8 @@ const pubSubHandleRemover = subscriber => {
   subscriber.forEach(s => {
     try {
       s.remove();
-    } catch (_unused) {//
+    } catch (_unused2) {
+      //
     }
   });
 };
@@ -110,13 +125,12 @@ const pubSubHandler = _ref => {
   } = _ref;
   const subscriber = new Map();
   if (!pubSub || !pubSub.subscribe) return subscriber;
-  subscriber.set(SEND_USER_MESSAGE, pubSub.subscribe(SEND_USER_MESSAGE, msg => {
+  subscriber.set(PUBSUB_TOPICS.SEND_USER_MESSAGE, pubSub.subscribe(PUBSUB_TOPICS.SEND_USER_MESSAGE, msg => {
     const {
       channel,
       message
     } = msg;
     scrollIntoLast(0, scrollRef);
-
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
         type: SEND_MESSAGEGE_SUCESS,
@@ -124,12 +138,11 @@ const pubSubHandler = _ref => {
       });
     }
   }));
-  subscriber.set(SEND_MESSAGE_START, pubSub.subscribe(SEND_MESSAGE_START, msg => {
+  subscriber.set(PUBSUB_TOPICS.SEND_MESSAGE_START, pubSub.subscribe(PUBSUB_TOPICS.SEND_MESSAGE_START, msg => {
     const {
       channel,
       message
     } = msg;
-
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
         type: SEND_MESSAGEGE_START,
@@ -137,13 +150,12 @@ const pubSubHandler = _ref => {
       });
     }
   }));
-  subscriber.set(SEND_FILE_MESSAGE, pubSub.subscribe(SEND_FILE_MESSAGE, msg => {
+  subscriber.set(PUBSUB_TOPICS.SEND_FILE_MESSAGE, pubSub.subscribe(PUBSUB_TOPICS.SEND_FILE_MESSAGE, msg => {
     const {
       channel,
       message
     } = msg;
     scrollIntoLast(0, scrollRef);
-
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
         type: SEND_MESSAGEGE_SUCESS,
@@ -151,13 +163,12 @@ const pubSubHandler = _ref => {
       });
     }
   }));
-  subscriber.set(UPDATE_USER_MESSAGE, pubSub.subscribe(UPDATE_USER_MESSAGE, msg => {
+  subscriber.set(PUBSUB_TOPICS.UPDATE_USER_MESSAGE, pubSub.subscribe(PUBSUB_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,
@@ -168,12 +179,11 @@ const pubSubHandler = _ref => {
       });
     }
   }));
-  subscriber.set(DELETE_MESSAGE, pubSub.subscribe(DELETE_MESSAGE, msg => {
+  subscriber.set(PUBSUB_TOPICS.DELETE_MESSAGE, pubSub.subscribe(PUBSUB_TOPICS.DELETE_MESSAGE, msg => {
     const {
       channel,
       messageId
     } = msg;
-
     if (channelUrl === (channel === null || channel === void 0 ? void 0 : channel.url)) {
       dispatcher({
         type: ON_MESSAGE_DELETED,
@@ -198,37 +208,16 @@ const isDisabledBecauseMuted = function () {
   const myMutedState = groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.myMutedState;
   return myMutedState === 'muted';
 };
-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;
-};
 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,
@@ -237,13 +226,11 @@ const getAllEmojisMapFromEmojiContainer = function () {
       allEmojisMap.set(key, url);
     }
   }
-
   return allEmojisMap;
 };
 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,
@@ -251,24 +238,39 @@ const getNicknamesMapFromMembers = function () {
     } = members[memberIndex];
     nicknamesMap.set(userId, nickname);
   }
-
   return nicknamesMap;
 };
+const getUniqueListBy = (arr, key) => [...new Map(arr.map(item => [item[key], item])).values()];
+const getUniqueListByMessageId = arr => getUniqueListBy(arr, 'messageId');
+const sortByCreatedAt = messages => messages.sort((a, b) => a.createdAt - b.createdAt);
+const mergeAndSortMessages = (oldMessages, newMessages) => {
+  const lastOldMessage = oldMessages[oldMessages.length - 1];
+  const firstNewMessage = newMessages[0];
+  // If the last message of oldMessages is older than the first message of newMessages,
+  // then we can safely append newMessages to oldMessages.
+  if ((lastOldMessage === null || lastOldMessage === void 0 ? void 0 : lastOldMessage.createdAt) < (firstNewMessage === null || firstNewMessage === void 0 ? void 0 : firstNewMessage.createdAt)) {
+    return [...oldMessages, ...newMessages];
+  }
+
+  // todo: optimize this
+  // If the last message of oldMessages is newer than the first message of newMessages,
+  // then we need to merge the two arrays and sort them by createdAt.
+  const mergedMessages = [...oldMessages, ...newMessages];
+  const unique = getUniqueListByMessageId(mergedMessages);
+  return sortByCreatedAt(unique);
+};
 const getMessageCreatedAt = message => 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)) {
     return false;
   }
-
   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) && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage);
 };
 const compareMessagesForGrouping = (prevMessage, currMessage, nextMessage, currentChannel, replyType) => {
   if (replyType === 'THREAD' && currMessage !== null && currMessage !== void 0 && currMessage.threadInfo) {
     return [false, false];
   }
-
   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];
@@ -277,36 +279,45 @@ const passUnsuccessfullMessages = (allMessages, newMessage) => {
   const {
     sendingStatus = UNDEFINED
   } = newMessage;
-
   if (sendingStatus === SUCCEEDED$1 || sendingStatus === PENDING) {
     const lastIndexOfSucceededMessage = allMessages.map(message => message.sendingStatus || (message.isAdminMessage && message.isAdminMessage() ? SUCCEEDED$1 : UNDEFINED)).lastIndexOf(SUCCEEDED$1);
-
     if (lastIndexOfSucceededMessage + 1 < allMessages.length) {
       const messages = [...allMessages];
       messages.splice(lastIndexOfSucceededMessage + 1, 0, newMessage);
       return messages;
     }
   }
-
   return [...allMessages, newMessage];
 };
 const pxToNumber = px => {
   if (typeof px === 'number') {
     return px;
   }
-
   if (typeof px === 'string') {
     const parsed = Number.parseFloat(px);
-
     if (!Number.isNaN(parsed)) {
       return parsed;
     }
   }
-
   return null;
 };
 const isAboutSame = (a, b, px) => Math.abs(a - b) <= px;
 
+/**
+ * This function helps consider the every condition
+ * related to enabling emoji reaction feature.
+ */
+
+function getIsReactionEnabled(_ref) {
+  let {
+    isBroadcast = false,
+    isSuper = false,
+    globalLevel = true,
+    moduleLevel
+  } = _ref;
+  return !(isBroadcast || isSuper) && (moduleLevel !== null && moduleLevel !== void 0 ? moduleLevel : globalLevel);
+}
+
 var messagesInitialState = {
   initialized: false,
   loading: true,
@@ -332,22 +343,18 @@ var messagesInitialState = {
 const {
   SUCCEEDED
 } = getSendingMessageStatus();
-
 const getOldestMessageTimeStamp = function () {
   let messages = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   const oldestMessage = messages[0];
   return oldestMessage && oldestMessage.createdAt || null;
 };
-
 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$currentGroupCh7, _action$payload, _action$payload$chann;
-
   switch (action.type) {
     case RESET_MESSAGES:
       return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -357,7 +364,6 @@ function reducer(state, action) {
         hasMoreNext: false,
         allMessages: []
       });
-
     case FETCH_INITIAL_MESSAGES_START:
       {
         return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -365,20 +371,16 @@ function reducer(state, action) {
           allMessages: [...state.allMessages.filter(m => m.sendingStatus !== SUCCEEDED)]
         });
       }
-
     case FETCH_INITIAL_MESSAGES_SUCCESS:
       {
         var _state$currentGroupCh;
-
         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;
         }
-
         const oldestMessageTimeStamp = getOldestMessageTimeStamp(messages);
         const latestMessageTimeStamp = getLatestMessageTimeStamp(messages);
         return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -391,23 +393,20 @@ function reducer(state, action) {
           allMessages: [...messages]
         });
       }
-
     case FETCH_PREV_MESSAGES_SUCCESS:
       {
         var _state$currentGroupCh2;
-
         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))) {
           return state;
         }
-
         const hasMorePrev = messages && messages.length === PREV_RESULT_SIZE + 1;
-        const oldestMessageTimeStamp = getOldestMessageTimeStamp(messages); // Remove duplicated messages
+        const oldestMessageTimeStamp = getOldestMessageTimeStamp(messages);
 
+        // Remove duplicated messages
         const duplicatedMessageIds = [];
         const updatedOldMessages = state.allMessages.map(msg => {
           const duplicatedMessage = messages.find(_ref => {
@@ -416,11 +415,9 @@ function reducer(state, action) {
             } = _ref;
             return compareIds(messageId, msg.messageId);
           });
-
           if (!duplicatedMessage) {
             return msg;
           }
-
           duplicatedMessageIds.push(duplicatedMessage.messageId);
           return duplicatedMessage.updatedAt > msg.updatedAt ? duplicatedMessage : msg;
         });
@@ -431,61 +428,38 @@ function reducer(state, action) {
           allMessages: [...filteredNewMessages, ...updatedOldMessages]
         });
       }
-
     case FETCH_NEXT_MESSAGES_SUCCESS:
       {
         var _state$currentGroupCh3;
-
         const {
           currentGroupChannel,
           messages
         } = action.payload;
-
         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;
         }
-
         const hasMoreNext = messages && messages.length === NEXT_RESULT_SIZE + 1;
-        const latestMessageTimeStamp = getLatestMessageTimeStamp(messages); // Remove duplicated messages
-
-        const duplicatedMessageIds = [];
-        const updatedOldMessages = state.allMessages.map(msg => {
-          const duplicatedMessage = messages.find(_ref2 => {
-            let {
-              messageId
-            } = _ref2;
-            return compareIds(messageId, msg.messageId);
-          });
-
-          if (!duplicatedMessage) {
-            return msg;
-          }
+        const latestMessageTimeStamp = getLatestMessageTimeStamp(messages);
 
-          duplicatedMessageIds.push(duplicatedMessage.messageId);
-          return duplicatedMessage.updatedAt > msg.updatedAt ? duplicatedMessage : msg;
-        });
-        const filteredNewMessages = duplicatedMessageIds.length > 0 ? messages.filter(msg => !duplicatedMessageIds.find(messageId => compareIds(messageId, msg.messageId))) : messages;
+        // sort ~
+        const sortedMessages = mergeAndSortMessages(state.allMessages, messages);
         return _objectSpread2(_objectSpread2({}, state), {}, {
           hasMoreNext,
           latestMessageTimeStamp,
-          allMessages: [...updatedOldMessages, ...filteredNewMessages]
+          allMessages: sortedMessages
         });
       }
-
     case FETCH_INITIAL_MESSAGES_FAILURE:
     case FETCH_PREV_MESSAGES_FAILURE:
     case FETCH_NEXT_MESSAGES_FAILURE:
       {
         var _state$currentGroupCh4;
-
         const {
           currentGroupChannel
         } = action.payload;
-
         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;
         }
-
         return _objectSpread2(_objectSpread2({}, state), {}, {
           loading: false,
           initialized: false,
@@ -496,12 +470,10 @@ function reducer(state, action) {
           latestMessageTimeStamp: null
         });
       }
-
     case SEND_MESSAGEGE_START:
       return _objectSpread2(_objectSpread2({}, state), {}, {
         allMessages: [...state.allMessages, _objectSpread2({}, action.payload)]
       });
-
     case SEND_MESSAGEGE_SUCESS:
       {
         const message = action.payload;
@@ -511,7 +483,6 @@ function reducer(state, action) {
           allMessages: pendingIndex > -1 ? [...filteredMessages.slice(0, pendingIndex), message, ...filteredMessages.slice(pendingIndex)] : [...filteredMessages, message]
         });
       }
-
     case SEND_MESSAGEGE_FAILURE:
       {
         // eslint-disable-next-line no-param-reassign
@@ -520,7 +491,6 @@ function reducer(state, action) {
           allMessages: state.allMessages.map(m => compareIds(m.reqId, action.payload.reqId) ? action.payload : m)
         });
       }
-
     case SET_CURRENT_CHANNEL:
       {
         return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -528,7 +498,6 @@ function reducer(state, action) {
           isInvalid: false
         });
       }
-
     case SET_CHANNEL_INVALID:
       {
         return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -536,7 +505,6 @@ function reducer(state, action) {
           isInvalid: true
         });
       }
-
     case ON_MESSAGE_RECEIVED:
       {
         const {
@@ -554,57 +522,47 @@ function reducer(state, action) {
           unreadSince
         } = state;
         const currentGroupChannelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
-
         if (!compareIds(channel === null || channel === void 0 ? void 0 : channel.url, currentGroupChannelUrl)) {
           return state;
-        } // Excluded overlapping messages
-
-
+        }
+        // Excluded overlapping messages
         if (state.allMessages.some(msg => msg.messageId === message.messageId)) {
           return state;
-        } // Filter by userFilledQuery
-
-
+        }
+        // Filter by userFilledQuery
         if (state.messageListParams && !filterMessageListParams(state.messageListParams, message)) {
           return state;
         }
-
         if (message.isAdminMessage && message.isAdminMessage()) {
           return _objectSpread2(_objectSpread2({}, state), {}, {
             allMessages: passUnsuccessfullMessages(state.allMessages, message)
           });
-        } // Update members when sender profileUrl, nickname, friendName has been changed
-
+        }
 
+        // Update members when sender profileUrl, nickname, friendName has been changed
         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(member => {
             if (member.userId === sender.userId) {
               return sender;
             }
-
             return member;
           });
         }
-
         return _objectSpread2(_objectSpread2({}, state), {}, {
           currentGroupChannel: channel,
           unreadSince: state !== null && state !== void 0 && state.unreadSince ? unreadSince : format(new Date(), 'p MMM dd'),
           allMessages: passUnsuccessfullMessages(state.allMessages, message)
         });
       }
-
     case ON_MESSAGE_UPDATED:
       {
         var _state$currentGroupCh5;
-
         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(channel === null || channel === void 0 ? void 0 : channel.url, currentGroupChannelUrl)) {
           return state; // Ignore event when it is not for the current channel
         }
@@ -615,13 +573,11 @@ function reducer(state, action) {
             allMessages: state.allMessages.filter(m => !compareIds(m.messageId, message === null || message === void 0 ? void 0 : message.messageId))
           });
         }
-
         return _objectSpread2(_objectSpread2({}, state), {}, {
           allMessages: state.allMessages.map(m => {
             if (compareIds(m.messageId, message.messageId)) {
               return message;
             }
-
             if (compareIds(m.parentMessageId, message.messageId)) {
               m.parentMessage = message; // eslint-disable-line no-param-reassign
             }
@@ -630,11 +586,9 @@ function reducer(state, action) {
           })
         });
       }
-
     case ON_MESSAGE_THREAD_INFO_UPDATED:
       {
         var _state$currentGroupCh6;
-
         const {
           channel,
           event
@@ -645,7 +599,6 @@ function reducer(state, action) {
           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(channel === null || channel === void 0 ? void 0 : channel.url, currentGroupChannelUrl) || !compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
           return state; // Ignore event when it is not for the current channel
         }
@@ -661,38 +614,31 @@ function reducer(state, action) {
           })
         });
       }
-
     case RESEND_MESSAGEGE_START:
       return _objectSpread2(_objectSpread2({}, state), {}, {
         allMessages: state.allMessages.map(m => compareIds(m.reqId, action.payload.reqId) ? action.payload : m)
       });
-
     case MARK_AS_READ:
       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;
       }
-
       return _objectSpread2(_objectSpread2({}, state), {}, {
         unreadSince: null
       });
-
     case ON_MESSAGE_DELETED:
       return _objectSpread2(_objectSpread2({}, state), {}, {
         allMessages: state.allMessages.filter(m => !compareIds(m.messageId, action.payload))
       });
-
     case ON_MESSAGE_DELETED_BY_REQ_ID:
       return _objectSpread2(_objectSpread2({}, state), {}, {
         allMessages: state.allMessages.filter(m => !compareIds(m.reqId, action.payload))
       });
-
     case SET_EMOJI_CONTAINER:
       {
         return _objectSpread2(_objectSpread2({}, state), {}, {
           emojiContainer: action.payload
         });
       }
-
     case ON_REACTION_UPDATED:
       {
         return _objectSpread2(_objectSpread2({}, state), {}, {
@@ -701,86 +647,102 @@ function reducer(state, action) {
               if (m.applyReactionEvent && typeof m.applyReactionEvent === 'function') {
                 m.applyReactionEvent(action.payload);
               }
-
               return m;
             }
-
             return m;
           })
         });
       }
-
     case MESSAGE_LIST_PARAMS_CHANGED:
       {
         return _objectSpread2(_objectSpread2({}, state), {}, {
           messageListParams: action.payload
         });
       }
-
     default:
       return state;
   }
 }
 
-function useHandleChannelEvents(_a, _b) {
-  var sdkInit = _a.sdkInit,
-      hasMoreNext = _a.hasMoreNext,
-      currentUserId = _a.currentUserId,
-      disableMarkAsRead = _a.disableMarkAsRead,
-      currentGroupChannel = _a.currentGroupChannel;
-  var sdk = _b.sdk,
-      logger = _b.logger,
-      scrollRef = _b.scrollRef,
-      setQuoteMessage = _b.setQuoteMessage,
-      messagesDispatcher = _b.messagesDispatcher;
-  useEffect(function () {
-    var _a;
-
-    var channelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
-    var channelHandlerId = uuidv4();
-
+/**
+ * Handles ChannelEvents and send values to dispatcher using messagesDispatcher
+ * messagesDispatcher: Dispatcher
+ * sdk: sdkInstance
+ * logger: loggerInstance
+ * channelUrl: string
+ * sdkInit: bool
+ */
+
+const DELIVERY_RECIPT = 'delivery_receipt';
+function useHandleChannelEvents(_ref, _ref2) {
+  var _store$stores$sdkStor, _store$stores$sdkStor2, _store$stores$sdkStor3;
+  let {
+    sdkInit,
+    currentUserId,
+    currentGroupChannel,
+    disableMarkAsRead
+  } = _ref;
+  let {
+    sdk,
+    logger,
+    scrollRef,
+    setQuoteMessage,
+    messagesDispatcher
+  } = _ref2;
+  const store = useSendbirdStateContext();
+  const {
+    markAsReadScheduler,
+    markAsDeliveredScheduler,
+    disableMarkAsDelivered
+  } = store.config;
+  const canSetMarkAsDelivered = (_store$stores$sdkStor = store.stores.sdkStore.sdk) === null || _store$stores$sdkStor === void 0 ? void 0 : (_store$stores$sdkStor2 = _store$stores$sdkStor.appInfo) === null || _store$stores$sdkStor2 === void 0 ? void 0 : (_store$stores$sdkStor3 = _store$stores$sdkStor2.premiumFeatureList) === null || _store$stores$sdkStor3 === void 0 ? void 0 : _store$stores$sdkStor3.find(feature => feature === DELIVERY_RECIPT);
+  useEffect(() => {
+    const channelUrl = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url;
+    const channelHandlerId = uuidv4();
     if (channelUrl && sdkInit) {
-      var channelHandler = {
-        onMessageReceived: function (channel, message) {
-          // Do not update when hasMoreNext
-          if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl) && !hasMoreNext) {
-            var scrollToEnd = false;
-
+      var _sdk$groupChannel;
+      const channelHandler = {
+        onMessageReceived: (channel, message) => {
+          if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
+            var _document$getElementB, _document$getElementB2;
+            let scrollToEnd = false;
             try {
-              var current = scrollRef.current;
-              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10; // 10 is a buffer
-            } catch (error) {//
+              const {
+                current
+              } = scrollRef;
+              scrollToEnd = current.offsetHeight + current.scrollTop >= current.scrollHeight - 10;
+              // 10 is a buffer
+            } catch (error) {
+              //
             }
-
             logger.info('Channel | useHandleChannelEvents: onMessageReceived', message);
             messagesDispatcher({
               type: ON_MESSAGE_RECEIVED,
               payload: {
-                channel: channel,
-                message: message
+                channel,
+                message
               }
             });
-
-            if (scrollToEnd) {
+            if (scrollToEnd && ((_document$getElementB = document.getElementById('sendbird-dropdown-portal')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.childElementCount) === 0 && ((_document$getElementB2 = document.getElementById('sendbird-emoji-list-portal')) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.childElementCount) === 0) {
+              // and !openContextMenu
               try {
-                setTimeout(function () {
-                  var _a;
-
-                  if (!disableMarkAsRead) {
-                    (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.markAsRead) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
-                  }
-
+                setTimeout(() => {
                   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) {
+        onUnreadMemberStatusUpdated: channel => {
           logger.info('Channel | useHandleChannelEvents: onUnreadMemberStatusUpdated', channel);
-
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             messagesDispatcher({
               type: SET_CURRENT_CHANNEL,
@@ -789,7 +751,7 @@ function useHandleChannelEvents(_a, _b) {
           }
         },
         // before(onDeliveryReceiptUpdated)
-        onUndeliveredMemberStatusUpdated: function (channel) {
+        onUndeliveredMemberStatusUpdated: channel => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onDeliveryReceiptUpdated', channel);
             messagesDispatcher({
@@ -798,33 +760,33 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onMessageUpdated: function (channel, message) {
+        onMessageUpdated: (channel, message) => {
           logger.info('Channel | useHandleChannelEvents: onMessageUpdated', message);
           messagesDispatcher({
             type: ON_MESSAGE_UPDATED,
             payload: {
-              channel: channel,
-              message: message
+              channel,
+              message
             }
           });
         },
-        onThreadInfoUpdated: function (channel, threadInfoUpdateEvent) {
+        onThreadInfoUpdated: (channel, threadInfoUpdateEvent) => {
           logger.info('Channel | useHandleChannelEvents: onThreadInfoUpdated', {
-            channel: channel,
-            threadInfoUpdateEvent: threadInfoUpdateEvent
+            channel,
+            threadInfoUpdateEvent
           });
           messagesDispatcher({
             type: ON_MESSAGE_THREAD_INFO_UPDATED,
             payload: {
-              channel: channel,
+              channel,
               event: threadInfoUpdateEvent
             }
           });
         },
-        onMessageDeleted: function (channel, messageId) {
+        onMessageDeleted: (channel, messageId) => {
           logger.info('Channel | useHandleChannelEvents: onMessageDeleted', {
-            channel: channel,
-            messageId: messageId
+            channel,
+            messageId
           });
           setQuoteMessage(null);
           messagesDispatcher({
@@ -832,17 +794,17 @@ function useHandleChannelEvents(_a, _b) {
             payload: messageId
           });
         },
-        onReactionUpdated: function (channel, reactionEvent) {
+        onReactionUpdated: (channel, reactionEvent) => {
           logger.info('Channel | useHandleChannelEvents: onReactionUpdated', {
-            channel: channel,
-            reactionEvent: reactionEvent
+            channel,
+            reactionEvent
           });
           messagesDispatcher({
             type: ON_REACTION_UPDATED,
             payload: reactionEvent
           });
         },
-        onChannelChanged: function (channel) {
+        onChannelChanged: channel => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onChannelChanged', channel);
             messagesDispatcher({
@@ -851,7 +813,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onChannelFrozen: function (channel) {
+        onChannelFrozen: channel => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onChannelFrozen', channel);
             messagesDispatcher({
@@ -860,7 +822,7 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onChannelUnfrozen: function (channel) {
+        onChannelUnfrozen: channel => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onChannelUnFrozen', channel);
             messagesDispatcher({
@@ -869,11 +831,11 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserMuted: function (channel, user) {
+        onUserMuted: (channel, user) => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onUserMuted', {
-              channel: channel,
-              user: user
+              channel,
+              user
             });
             messagesDispatcher({
               type: SET_CURRENT_CHANNEL,
@@ -881,11 +843,11 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserUnmuted: function (channel, user) {
+        onUserUnmuted: (channel, user) => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onUserUnmuted', {
-              channel: channel,
-              user: user
+              channel,
+              user
             });
             messagesDispatcher({
               type: SET_CURRENT_CHANNEL,
@@ -893,13 +855,12 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserBanned: function (channel, user) {
-          var _a;
-
-          if (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)) {
+        onUserBanned: (channel, user) => {
+          var _sdk$currentUser;
+          if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl) && (user === null || user === void 0 ? void 0 : user.userId) === (sdk === null || sdk === void 0 ? void 0 : (_sdk$currentUser = sdk.currentUser) === null || _sdk$currentUser === void 0 ? void 0 : _sdk$currentUser.userId)) {
             logger.info('Channel | useHandleChannelEvents: onUserBanned', {
-              channel: channel,
-              user: user
+              channel,
+              user
             });
             messagesDispatcher({
               type: SET_CURRENT_CHANNEL,
@@ -907,11 +868,11 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onOperatorUpdated: function (channel, users) {
+        onOperatorUpdated: (channel, users) => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onOperatorUpdated', {
-              channel: channel,
-              users: users
+              channel,
+              users
             });
             messagesDispatcher({
               type: SET_CURRENT_CHANNEL,
@@ -919,13 +880,12 @@ function useHandleChannelEvents(_a, _b) {
             });
           }
         },
-        onUserLeft: function (channel, user) {
+        onUserLeft: (channel, user) => {
           if (compareIds(channel === null || channel === void 0 ? void 0 : channel.url, channelUrl)) {
             logger.info('Channel | useHandleChannelEvents: onUserLeft', {
-              channel: channel,
-              user: user
+              channel,
+              user
             });
-
             if ((user === null || user === void 0 ? void 0 : user.userId) === currentUserId) {
               messagesDispatcher({
                 type: SET_CURRENT_CHANNEL,
@@ -936,20 +896,18 @@ function useHandleChannelEvents(_a, _b) {
         }
       };
       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 GroupChannelHandler(channelHandler));
+        channelHandlerId,
+        channelHandler
+      });
+      // Add this group channel handler to the Sendbird chat instance
+      (_sdk$groupChannel = sdk.groupChannel) === null || _sdk$groupChannel === void 0 ? void 0 : _sdk$groupChannel.addGroupChannelHandler(channelHandlerId, new 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) {
+    return () => {
+      var _sdk$groupChannel2;
+      if (sdk !== null && sdk !== void 0 && (_sdk$groupChannel2 = sdk.groupChannel) !== null && _sdk$groupChannel2 !== void 0 && _sdk$groupChannel2.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) {
+      } else if (sdk !== null && sdk !== void 0 && sdk.groupChannel) {
         logger.error('Channel | useHandleChannelEvents: Not found the removeGroupChannelHandler');
       }
     };
@@ -965,7 +923,8 @@ function useSetChannel(_ref, _ref2) {
   let {
     messagesDispatcher,
     sdk,
-    logger
+    logger,
+    markAsReadScheduler
   } = _ref2;
   useEffect(() => {
     if (channelUrl && sdkInit && sdk && sdk.groupChannel) {
@@ -977,13 +936,8 @@ function useSetChannel(_ref, _ref2) {
           payload: groupChannel
         });
         logger.info('Channel: Mark as read', groupChannel);
-
         if (!disableMarkAsRead) {
-          // this order is important - this mark as read should update the event handler up above
-          try {
-            groupChannel.markAsRead();
-          } catch (_unused) {//
-          }
+          markAsReadScheduler.push(groupChannel);
         }
       }).catch(e => {
         logger.warning('Channel | useSetChannel fetch channel failed', {
@@ -1027,30 +981,25 @@ function useInitialMessagesFetch(_ref, _ref2) {
       type: RESET_MESSAGES,
       payload: null
     });
-
     if (currentGroupChannel && currentGroupChannel !== null && currentGroupChannel !== void 0 && currentGroupChannel.getMessagesByTimestamp) {
       const messageListParams = {};
       messageListParams.prevResultSize = PREV_RESULT_SIZE;
-
       if (initialTimeStamp) {
         messageListParams.nextResultSize = NEXT_RESULT_SIZE;
       }
-
       messageListParams.isInclusive = true;
       messageListParams.includeReactions = true;
-
+      messageListParams.includeMetaArray = true;
       if (replyType && (replyType === 'QUOTE_REPLY' || replyType === 'THREAD')) {
         messageListParams.includeThreadInfo = true;
         messageListParams.includeParentMessageInfo = true;
         messageListParams.replyType = ReplyType.ONLY_REPLY_TO_CHANNEL;
       }
-
       if (userFilledMessageListQuery) {
         Object.keys(userFilledMessageListQuery).forEach(key => {
           messageListParams[key] = userFilledMessageListQuery[key];
         });
       }
-
       if (replyType && (replyType === 'QUOTE_REPLY' || replyType === 'THREAD') || userFilledMessageListQuery) {
         logger.info('Channel useInitialMessagesFetch: Setup messageListParams', messageListParams);
         messagesDispatcher({
@@ -1058,7 +1007,6 @@ function useInitialMessagesFetch(_ref, _ref2) {
           payload: messageListParams
         });
       }
-
       logger.info('Channel: Fetching messages', {
         currentGroupChannel,
         userFilledMessageListQuery
@@ -1086,6 +1034,10 @@ function useInitialMessagesFetch(_ref, _ref2) {
       }).finally(() => {
         if (!initialTimeStamp) {
           setTimeout(() => scrollIntoLast(0, scrollRef));
+        } else {
+          setTimeout(() => {
+            scrollToRenderedMessage(scrollRef, initialTimeStamp);
+          }, 500);
         }
       });
     }
@@ -1100,82 +1052,75 @@ function useInitialMessagesFetch(_ref, _ref2) {
    */
 }
 
-function useHandleReconnect(_a, _b) {
-  var isOnline = _a.isOnline,
-      replyType = _a.replyType,
-      disableMarkAsRead = _a.disableMarkAsRead;
-  var logger = _b.logger,
-      sdk = _b.sdk,
-      scrollRef = _b.scrollRef,
-      currentGroupChannel = _b.currentGroupChannel,
-      messagesDispatcher = _b.messagesDispatcher,
-      userFilledMessageListQuery = _b.userFilledMessageListQuery;
-  useEffect(function () {
-    var wasOffline = !isOnline;
-    return function () {
-      var _a, _b; // state changed from offline to online
-
-
-      if (wasOffline && (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url)) {
+function useHandleReconnect(_ref, _ref2) {
+  let {
+    isOnline,
+    replyType,
+    disableMarkAsRead
+  } = _ref;
+  let {
+    logger,
+    sdk,
+    scrollRef,
+    currentGroupChannel,
+    messagesDispatcher,
+    markAsReadScheduler,
+    userFilledMessageListQuery
+  } = _ref2;
+  useEffect(() => {
+    const wasOffline = !isOnline;
+    return () => {
+      // state changed from offline to online
+      if (wasOffline && currentGroupChannel !== null && currentGroupChannel !== void 0 && currentGroupChannel.url) {
+        var _sdk$appInfo, _sdk$groupChannel;
         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 = {
+        const isReactionEnabled = (sdk === null || sdk === void 0 ? void 0 : (_sdk$appInfo = sdk.appInfo) === null || _sdk$appInfo === void 0 ? void 0 : _sdk$appInfo.useReaction) || false;
+        const messageListParams = {
           prevResultSize: PREV_RESULT_SIZE,
           isInclusive: true,
           includeReactions: isReactionEnabled,
           nextResultSize: NEXT_RESULT_SIZE
         };
-
         if (replyType && replyType === 'QUOTE_REPLY') {
-          messageListParams_1.includeThreadInfo = true;
-          messageListParams_1.includeParentMessageInfo = true;
-          messageListParams_1.replyType = ReplyType.ONLY_REPLY_TO_CHANNEL;
+          messageListParams.includeThreadInfo = true;
+          messageListParams.includeParentMessageInfo = true;
+          messageListParams.replyType = ReplyType.ONLY_REPLY_TO_CHANNEL;
         }
-
         if (userFilledMessageListQuery) {
-          Object.keys(userFilledMessageListQuery).forEach(function (key) {
-            messageListParams_1[key] = userFilledMessageListQuery[key];
+          Object.keys(userFilledMessageListQuery).forEach(key => {
+            messageListParams[key] = userFilledMessageListQuery[key];
           });
         }
-
         logger.info('Channel: Fetching messages', {
-          currentGroupChannel: currentGroupChannel,
-          userFilledMessageListQuery: userFilledMessageListQuery
+          currentGroupChannel,
+          userFilledMessageListQuery
         });
         messagesDispatcher({
           type: 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 _a;
-
-          var lastMessageTime = new Date().getTime();
-          groupChannel.getMessagesByTimestamp(lastMessageTime, messageListParams_1).then(function (messages) {
+        sdk === null || sdk === void 0 ? void 0 : (_sdk$groupChannel = sdk.groupChannel) === null || _sdk$groupChannel === void 0 ? void 0 : _sdk$groupChannel.getChannel(currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.url).then(groupChannel => {
+          const lastMessageTime = new Date().getTime();
+          groupChannel.getMessagesByTimestamp(lastMessageTime, messageListParams).then(messages => {
             messagesDispatcher({
               type: FETCH_INITIAL_MESSAGES_SUCCESS,
               payload: {
-                currentGroupChannel: currentGroupChannel,
-                messages: messages
+                currentGroupChannel,
+                messages
               }
             });
-            setTimeout(function () {
-              return scrollIntoLast(0, scrollRef);
-            });
-          }).catch(function (error) {
+            setTimeout(() => scrollIntoLast(0, scrollRef));
+          }).catch(error => {
             logger.error('Channel: Fetching messages failed', error);
             messagesDispatcher({
               type: FETCH_INITIAL_MESSAGES_FAILURE,
               payload: {
-                currentGroupChannel: currentGroupChannel
+                currentGroupChannel
               }
             });
           });
-
           if (!disableMarkAsRead) {
-            try {
-              (_a = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.markAsRead) === null || _a === void 0 ? void 0 : _a.call(currentGroupChannel);
-            } catch (_b) {//
-            }
+            markAsReadScheduler.push(currentGroupChannel);
           }
         });
       }
@@ -1200,7 +1145,6 @@ function useScrollCallback(_ref, _ref2) {
     if (!hasMorePrev) {
       return;
     }
-
     const {
       appInfo = {}
     } = sdk;
@@ -1210,19 +1154,17 @@ function useScrollCallback(_ref, _ref2) {
       isInclusive: true,
       includeReactions: isReactionEnabled
     };
-
+    messageListParams.includeMetaArray = true;
     if (replyType === 'QUOTE_REPLY' || replyType === 'THREAD') {
       messageListParams.includeThreadInfo = true;
       messageListParams.includeParentMessageInfo = true;
       messageListParams.replyType = ReplyType.ONLY_REPLY_TO_CHANNEL;
     }
-
     if (userFilledMessageListQuery) {
       Object.keys(userFilledMessageListQuery).forEach(key => {
         messageListParams[key] = userFilledMessageListQuery[key];
       });
     }
-
     logger.info('Channel: Fetching messages', {
       currentGroupChannel,
       userFilledMessageListQuery
@@ -1266,7 +1208,6 @@ function useScrollDownCallback(_ref, _ref2) {
     if (!hasMoreNext) {
       return;
     }
-
     const {
       appInfo = {}
     } = sdk;
@@ -1276,19 +1217,17 @@ function useScrollDownCallback(_ref, _ref2) {
       isInclusive: true,
       includeReactions: isReactionEnabled
     };
-
+    messageListParams.includeMetaArray = true;
     if (replyType && (replyType === 'QUOTE_REPLY' || replyType === 'THREAD')) {
       messageListParams.includeThreadInfo = true;
       messageListParams.includeParentMessageInfo = true;
       messageListParams.replyType = ReplyType.ONLY_REPLY_TO_CHANNEL;
     }
-
     if (userFilledMessageListQuery) {
       Object.keys(userFilledMessageListQuery).forEach(key => {
         messageListParams[key] = userFilledMessageListQuery[key];
       });
     }
-
     logger.info('Channel: Fetching later messages', {
       currentGroupChannel,
       userFilledMessageListQuery
@@ -1329,8 +1268,8 @@ function useDeleteMessageCallback(_ref, _ref2) {
       requestState
     } = message;
     return new Promise((resolve, reject) => {
-      logger.info('Channel | useDeleteMessageCallback: Deleting message requestState:', requestState); // Message is only on local
-
+      logger.info('Channel | useDeleteMessageCallback: Deleting message requestState:', requestState);
+      // Message is only on local
       if (requestState === 'failed' || requestState === 'pending') {
         logger.info('Channel | useDeleteMessageCallback: Deleted message from local:', message);
         messagesDispatcher({
@@ -1339,7 +1278,6 @@ function useDeleteMessageCallback(_ref, _ref2) {
         });
         resolve(message);
       }
-
       logger.info('Channel | useDeleteMessageCallback: Deleting message from remote:', requestState);
       currentGroupChannel.deleteMessage(message).then(() => {
         logger.info('Channel | useDeleteMessageCallback: Deleting message success!', message);
@@ -1374,37 +1312,29 @@ function useUpdateMessageCallback(_ref, _ref2) {
       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: ON_MESSAGE_UPDATED,
@@ -1413,7 +1343,7 @@ function useUpdateMessageCallback(_ref, _ref2) {
           message: msg
         }
       });
-      pubSub.publish(UPDATE_USER_MESSAGE, {
+      pubSub.publish(PUBSUB_TOPICS.UPDATE_USER_MESSAGE, {
         message: msg,
         channel: currentGroupChannel
       });
@@ -1435,18 +1365,18 @@ function useResendMessageCallback(_ref, _ref2) {
       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.requestState = 'pending';
+      // eslint-disable-next-line no-param-reassign
       failedMessage.sendingStatus = 'pending';
       messagesDispatcher({
         type: RESEND_MESSAGEGE_START,
         payload: failedMessage
-      }); // userMessage
+      });
 
+      // userMessage
       if (messageType === 'user') {
         currentGroupChannel.resendUserMessage(failedMessage).then(message => {
           logger.info('Channel: Resending message success!', message);
@@ -1455,19 +1385,20 @@ function useResendMessageCallback(_ref, _ref2) {
             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
-
+          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: SEND_MESSAGEGE_FAILURE,
             payload: failedMessage
           });
-        }); // eslint-disable-next-line no-param-reassign
-
-        failedMessage.requestState = 'pending'; // eslint-disable-next-line no-param-reassign
+        });
 
+        // eslint-disable-next-line no-param-reassign
+        failedMessage.requestState = 'pending';
+        // eslint-disable-next-line no-param-reassign
         failedMessage.sendingStatus = 'pending';
         messagesDispatcher({
           type: RESEND_MESSAGEGE_START,
@@ -1475,7 +1406,6 @@ function useResendMessageCallback(_ref, _ref2) {
         });
         return;
       }
-
       if (messageType === 'file') {
         currentGroupChannel.resendFileMessage(failedMessage, file).then(message => {
           logger.info('Channel: Resending file message success!', message);
@@ -1484,19 +1414,20 @@ function useResendMessageCallback(_ref, _ref2) {
             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
-
+          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: SEND_MESSAGEGE_FAILURE,
             payload: failedMessage
           });
-        }); // eslint-disable-next-line no-param-reassign
-
-        failedMessage.requestState = 'pending'; // eslint-disable-next-line no-param-reassign
+        });
 
+        // eslint-disable-next-line no-param-reassign
+        failedMessage.requestState = 'pending';
+        // eslint-disable-next-line no-param-reassign
         failedMessage.sendingStatus = 'pending';
         messagesDispatcher({
           type: RESEND_MESSAGEGE_START,
@@ -1533,39 +1464,32 @@ function useSendMessageCallback(_ref, _ref2) {
       // mentionedUserIds,
       mentionedUsers
     } = props;
-
     const createParamsDefault = () => {
       const params = {};
-      params.message = (message === null || message === void 0 ? void 0 : message.trim()) || message; // if (isMentionEnabled && mentionedUserIds?.length > 0) {
-
+      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 && mentionedUserIds?.length > 0) {
       if (isMentionEnabled && mentionTemplate && (mentionedUsers === null || mentionedUsers === void 0 ? void 0 : mentionedUsers.length) > 0) {
-        params.mentionedMessageTemplate = (mentionTemplate === null || mentionTemplate === void 0 ? void 0 : mentionTemplate.trim()) || mentionTemplate;
+        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(SEND_MESSAGE_START, {
+      pubSub.publish(PUBSUB_TOPICS.SEND_MESSAGE_START, {
         /* pubSub is used instead of messagesDispatcher
           to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
         message: pendingMsg,
@@ -1613,44 +1537,39 @@ function useSendFileMessageCallback(_ref, _ref2) {
     } = 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 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) {
         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 = pxToNumber(resizingWidth) || imageWdith;
-          let targetHeight = pxToNumber(resizingHeight) || imageHeight; // In canvas.toBlob(callback, mimeType, qualityArgument)
+          let targetHeight = 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');
@@ -1659,15 +1578,13 @@ function useSendFileMessageCallback(_ref, _ref2) {
             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(SEND_MESSAGE_START, {
+              pubSub.publish(PUBSUB_TOPICS.SEND_MESSAGE_START, {
                 /* pubSub is used instead of messagesDispatcher
                   to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
                 message: _objectSpread2(_objectSpread2({}, pendingMessage), {}, {
@@ -1682,10 +1599,10 @@ function useSendFileMessageCallback(_ref, _ref2) {
               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
-
+              });
+              // eslint-disable-next-line no-param-reassign
+              failedMessage.localUrl = URL.createObjectURL(compressedFile);
+              // eslint-disable-next-line no-param-reassign
               failedMessage.file = compressedFile;
               messagesDispatcher({
                 type: SEND_MESSAGEGE_FAILURE,
@@ -1708,11 +1625,10 @@ function useSendFileMessageCallback(_ref, _ref2) {
       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(SEND_MESSAGE_START, {
+        pubSub.publish(PUBSUB_TOPICS.SEND_MESSAGE_START, {
           /* pubSub is used instead of messagesDispatcher
             to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
           message: _objectSpread2(_objectSpread2({}, pendingMsg), {}, {
@@ -1727,10 +1643,10 @@ function useSendFileMessageCallback(_ref, _ref2) {
         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
-
+        });
+        // eslint-disable-next-line no-param-reassign
+        message.localUrl = URL.createObjectURL(file);
+        // eslint-disable-next-line no-param-reassign
         message.file = file;
         messagesDispatcher({
           type: SEND_MESSAGEGE_FAILURE,
@@ -1748,64 +1664,6 @@ function useSendFileMessageCallback(_ref, _ref2) {
   return [sendMessage];
 }
 
-function useMemoizedEmojiListItems(_ref, _ref2) {
-  let {
-    emojiContainer,
-    toggleReaction
-  } = _ref;
-  let {
-    isReactionEnabled,
-    logger,
-    userId,
-    emojiAllList
-  } = _ref2;
-
-  /* eslint-disable react/prop-types */
-  return 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.createElement(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.createElement(ReactionButton, {
-        key: emoji.key,
-        width: "36px",
-        height: "36px",
-        selected: isReacted,
-        onClick: () => {
-          closeDropdown();
-          toggleReaction(message, emoji.key, isReacted);
-        }
-      }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
-        url: emoji.url,
-        width: "28px",
-        height: "28px",
-        defaultComponent: /*#__PURE__*/React__default.createElement(Icon, {
-          width: "28px",
-          height: "28px",
-          type: IconTypes.QUESTION
-        })
-      }));
-    }));
-  }, [emojiContainer, toggleReaction]);
-}
-
 function useToggleReactionCallback(_ref, _ref2) {
   let {
     currentGroupChannel
@@ -1822,7 +1680,6 @@ function useToggleReactionCallback(_ref, _ref2) {
       });
       return;
     }
-
     currentGroupChannel.addReaction(message, key).then(res => {
       logger.info('Add reaction success', res);
     }).catch(err => {
@@ -1831,20 +1688,24 @@ function useToggleReactionCallback(_ref, _ref2) {
   }, [currentGroupChannel]);
 }
 
-function useScrollToMessage(_a, _b) {
-  var setInitialTimeStamp = _a.setInitialTimeStamp,
-      setAnimatedMessageId = _a.setAnimatedMessageId,
-      allMessages = _a.allMessages;
-  var logger = _b.logger;
-  return useCallback(function (createdAt, messageId) {
-    var isPresent = allMessages.find(function (m) {
-      return m.messageId === messageId;
-    });
+function useScrollToMessage(_ref, _ref2) {
+  let {
+    setInitialTimeStamp,
+    setAnimatedMessageId,
+    allMessages,
+    scrollRef
+  } = _ref;
+  let {
+    logger
+  } = _ref2;
+  return useCallback((createdAt, messageId) => {
+    const isPresent = allMessages.find(m => m.messageId === messageId);
     setAnimatedMessageId(null);
-    setTimeout(function () {
+    setTimeout(() => {
       if (isPresent) {
         logger.info('Channel: scroll to message - message is present');
         setAnimatedMessageId(messageId);
+        scrollToRenderedMessage(scrollRef, createdAt);
       } else {
         logger.info('Channel: scroll to message - fetching older messages');
         setInitialTimeStamp(null);
@@ -1855,339 +1716,392 @@ function useScrollToMessage(_a, _b) {
   }, [setInitialTimeStamp, setAnimatedMessageId, allMessages]);
 }
 
-var ThreadReplySelectType;
+const useSendVoiceMessageCallback = (_ref, _ref2) => {
+  let {
+    currentGroupChannel,
+    onBeforeSendVoiceMessage
+  } = _ref;
+  let {
+    logger,
+    pubSub,
+    scrollRef,
+    messagesDispatcher
+  } = _ref2;
+  const sendMessage = useCallback((file, duration, quoteMessage) => {
+    const messageParams = onBeforeSendVoiceMessage && typeof onBeforeSendVoiceMessage === 'function' ? onBeforeSendVoiceMessage(file, quoteMessage) : {
+      file,
+      fileName: VOICE_MESSAGE_FILE_NAME,
+      mimeType: VOICE_MESSAGE_MIME_TYPE,
+      metaArrays: [new MessageMetaArray({
+        key: META_ARRAY_VOICE_DURATION_KEY,
+        value: [`${duration}`]
+      }), new MessageMetaArray({
+        key: META_ARRAY_MESSAGE_TYPE_KEY,
+        value: [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(pendingMessage => {
+      pubSub.publish(PUBSUB_TOPICS.SEND_MESSAGE_START, {
+        /* pubSub is used instead of messagesDispatcher
+          to avoid redundantly calling `messageActionTypes.SEND_MESSAGEGE_START` */
+        message: pendingMessage,
+        channel: currentGroupChannel
+      });
+      setTimeout(() => scrollIntoLast(0, scrollRef), 1000);
+    }).onFailed((err, failedMessage) => {
+      logger.error('Channel: Sending voice message failed!', {
+        failedMessage,
+        err
+      });
+      messagesDispatcher({
+        type: SEND_MESSAGEGE_FAILURE,
+        payload: failedMessage
+      });
+    }).onSucceeded(succeededMessage => {
+      logger.info('Channel: Sending voice message success!', succeededMessage);
+      messagesDispatcher({
+        type: SEND_MESSAGEGE_SUCESS,
+        payload: succeededMessage
+      });
+    });
+  }, [currentGroupChannel, onBeforeSendVoiceMessage]);
+  return [sendMessage];
+};
 
-(function (ThreadReplySelectType) {
+let ThreadReplySelectType = /*#__PURE__*/function (ThreadReplySelectType) {
   ThreadReplySelectType["PARENT"] = "PARENT";
   ThreadReplySelectType["THREAD"] = "THREAD";
-})(ThreadReplySelectType || (ThreadReplySelectType = {}));
-
-var ChannelContext = /*#__PURE__*/React__default.createContext(undefined);
-
-var ChannelProvider = function (props) {
-  var _a, _b, _c, _d;
-
-  var channelUrl = props.channelUrl,
-      children = props.children,
-      isReactionEnabled = props.isReactionEnabled,
-      _e = props.isMessageGroupingEnabled,
-      isMessageGroupingEnabled = _e === void 0 ? true : _e,
-      showSearchIcon = props.showSearchIcon,
-      animatedMessage = props.animatedMessage,
-      highlightedMessage = props.highlightedMessage,
-      startingPoint = props.startingPoint,
-      onBeforeSendUserMessage = props.onBeforeSendUserMessage,
-      onBeforeSendFileMessage = props.onBeforeSendFileMessage,
-      onBeforeUpdateUserMessage = props.onBeforeUpdateUserMessage,
-      onChatHeaderActionClick = props.onChatHeaderActionClick,
-      onSearchClick = props.onSearchClick,
-      onBackClick = props.onBackClick,
-      replyType = props.replyType,
-      _f = props.threadReplySelectType,
-      threadReplySelectType = _f === void 0 ? ThreadReplySelectType.THREAD : _f,
-      queries = props.queries,
-      _g = props.disableMarkAsRead,
-      disableMarkAsRead = _g === void 0 ? false : _g,
-      onReplyInThread = props.onReplyInThread,
-      onQuoteMessageClick = props.onQuoteMessageClick,
-      onMessageAnimated = props.onMessageAnimated,
-      onMessageHighlighted = props.onMessageHighlighted;
-  var globalStore = useSendbirdStateContext();
-  var config = globalStore.config;
-  var pubSub = config.pubSub,
-      logger = config.logger,
-      userId = config.userId,
-      isOnline = config.isOnline,
-      imageCompression = config.imageCompression,
-      isMentionEnabled = config.isMentionEnabled,
-      onUserProfileMessage = config.onUserProfileMessage;
-  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 _h = useState(startingPoint),
-      initialTimeStamp = _h[0],
-      setInitialTimeStamp = _h[1];
-
-  useEffect(function () {
+  return ThreadReplySelectType;
+}({});
+const ChannelContext = /*#__PURE__*/React__default.createContext(undefined);
+const ChannelProvider = props => {
+  var _globalStore$stores, _globalStore$stores$s, _globalStore$stores2, _globalStore$stores2$;
+  const {
+    channelUrl,
+    children,
+    isReactionEnabled,
+    isMessageGroupingEnabled = true,
+    showSearchIcon,
+    animatedMessage,
+    highlightedMessage,
+    startingPoint,
+    onBeforeSendUserMessage,
+    onBeforeSendFileMessage,
+    onBeforeUpdateUserMessage,
+    onBeforeSendVoiceMessage,
+    onChatHeaderActionClick,
+    onSearchClick,
+    onBackClick,
+    replyType,
+    threadReplySelectType = ThreadReplySelectType.THREAD,
+    queries,
+    filterMessageList,
+    disableMarkAsRead = false,
+    onReplyInThread,
+    onQuoteMessageClick,
+    onMessageAnimated,
+    onMessageHighlighted
+  } = props;
+  const globalStore = useSendbirdStateContext();
+  const {
+    config
+  } = globalStore;
+  const {
+    pubSub,
+    logger,
+    userId,
+    isOnline,
+    imageCompression,
+    isMentionEnabled,
+    isVoiceMessageEnabled,
+    onUserProfileMessage,
+    markAsReadScheduler
+  } = config;
+  const sdk = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$stores = globalStore.stores) === null || _globalStore$stores === void 0 ? void 0 : (_globalStore$stores$s = _globalStore$stores.sdkStore) === null || _globalStore$stores$s === void 0 ? void 0 : _globalStore$stores$s.sdk;
+  const sdkInit = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$stores2 = globalStore.stores) === null || _globalStore$stores2 === void 0 ? void 0 : (_globalStore$stores2$ = _globalStore$stores2.sdkStore) === null || _globalStore$stores2$ === void 0 ? void 0 : _globalStore$stores2$.initialized;
+  const [initialTimeStamp, setInitialTimeStamp] = useState(startingPoint);
+  useEffect(() => {
     setInitialTimeStamp(startingPoint);
   }, [startingPoint, channelUrl]);
-
-  var _j = useState(0),
-      animatedMessageId = _j[0],
-      setAnimatedMessageId = _j[1];
-
-  var _k = useState(highlightedMessage),
-      highLightedMessageId = _k[0],
-      setHighLightedMessageId = _k[1];
-
-  useEffect(function () {
+  const [animatedMessageId, setAnimatedMessageId] = useState(0);
+  const [highLightedMessageId, setHighLightedMessageId] = useState(highlightedMessage);
+  useEffect(() => {
     setHighLightedMessageId(highlightedMessage);
   }, [highlightedMessage]);
-  var userFilledMessageListQuery = queries === null || queries === void 0 ? void 0 : queries.messageListParams;
-
-  var _l = useState(null),
-      quoteMessage = _l[0],
-      setQuoteMessage = _l[1];
-
-  var _m = useReducer(reducer, messagesInitialState),
-      messagesStore = _m[0],
-      messagesDispatcher = _m[1];
-
-  var scrollRef = useRef(null);
-  var allMessages = messagesStore.allMessages,
-      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 appInfo = sdk.appInfo;
-  var usingReaction = (appInfo === null || appInfo === void 0 ? void 0 : appInfo.useReaction) && !isBroadcast && !isSuper && ((config === null || config === void 0 ? void 0 : config.isReactionEnabled) || isReactionEnabled);
-  var emojiAllMap = useMemo(function () {
-    return usingReaction ? getAllEmojisMapFromEmojiContainer(emojiContainer) : new Map();
-  }, [emojiContainer]);
-  var emojiAllList = useMemo(function () {
-    return usingReaction ? getAllEmojisFromEmojiContainer(emojiContainer) : [];
-  }, [emojiContainer]);
-  var nicknamesMap = useMemo(function () {
-    return usingReaction && currentGroupChannel ? getNicknamesMapFromMembers(currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) : new Map();
-  }, [currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members]); // Animate message
+  const userFilledMessageListQuery = queries === null || queries === void 0 ? void 0 : queries.messageListParams;
+  const [quoteMessage, setQuoteMessage] = useState(null);
+  const [messagesStore, messagesDispatcher] = useReducer(reducer, messagesInitialState);
+  const scrollRef = useRef(null);
+  const {
+    allMessages,
+    loading,
+    initialized,
+    unreadSince,
+    isInvalid,
+    currentGroupChannel,
+    hasMorePrev,
+    oldestMessageTimeStamp,
+    hasMoreNext,
+    latestMessageTimeStamp,
+    emojiContainer,
+    readStatus
+  } = messagesStore;
+  const isSuper = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isSuper) || false;
+  const isBroadcast = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.isBroadcast) || false;
+  const usingReaction = getIsReactionEnabled({
+    isBroadcast,
+    isSuper,
+    globalLevel: config === null || config === void 0 ? void 0 : config.isReactionEnabled,
+    moduleLevel: isReactionEnabled
+  });
+  const emojiAllMap = useMemo(() => usingReaction ? getAllEmojisMapFromEmojiContainer(emojiContainer) : new Map(), [emojiContainer]);
+  const nicknamesMap = useMemo(() => usingReaction && currentGroupChannel ? getNicknamesMapFromMembers(currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) : new Map(), [currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members]);
 
-  useEffect(function () {
+  // Animate message
+  useEffect(() => {
     if (animatedMessage) {
       setAnimatedMessageId(animatedMessage);
     }
-  }, [animatedMessage]); // Scrollup is default scroll for channel
+  }, [animatedMessage]);
 
-  var onScrollCallback = useScrollCallback({
-    currentGroupChannel: currentGroupChannel,
-    oldestMessageTimeStamp: oldestMessageTimeStamp,
-    userFilledMessageListQuery: userFilledMessageListQuery,
-    replyType: replyType
+  // Scrollup is default scroll for channel
+  const onScrollCallback = useScrollCallback({
+    currentGroupChannel,
+    oldestMessageTimeStamp,
+    userFilledMessageListQuery,
+    replyType,
+    isVoiceMessageEnabled
   }, {
-    hasMorePrev: hasMorePrev,
-    logger: logger,
-    messagesDispatcher: messagesDispatcher,
-    sdk: sdk
+    hasMorePrev,
+    logger,
+    messagesDispatcher,
+    sdk
   });
-  var scrollToMessage = useScrollToMessage({
-    setInitialTimeStamp: setInitialTimeStamp,
-    setAnimatedMessageId: setAnimatedMessageId,
-    allMessages: allMessages
+  const scrollToMessage = useScrollToMessage({
+    setInitialTimeStamp,
+    setAnimatedMessageId,
+    allMessages,
+    scrollRef
   }, {
-    logger: logger
-  }); // onScrollDownCallback is added for navigation to different timestamps on messageSearch
+    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
+  const onScrollDownCallback = useScrollDownCallback({
+    currentGroupChannel,
+    latestMessageTimeStamp,
+    userFilledMessageListQuery,
+    hasMoreNext,
+    replyType,
+    isVoiceMessageEnabled
   }, {
-    logger: logger,
-    messagesDispatcher: messagesDispatcher,
-    sdk: sdk
+    logger,
+    messagesDispatcher,
+    sdk
   });
-  var toggleReaction = useToggleReactionCallback({
-    currentGroupChannel: currentGroupChannel
+  const toggleReaction = useToggleReactionCallback({
+    currentGroupChannel
   }, {
-    logger: logger
+    logger
   });
-  var memoizedEmojiListItems = useMemoizedEmojiListItems({
-    emojiContainer: emojiContainer,
-    toggleReaction: toggleReaction
-  }, {
-    isReactionEnabled: usingReaction,
-    logger: logger,
-    userId: userId,
-    emojiAllList: emojiAllList
-  }); // to create message-datasource
-  // this hook sets currentGroupChannel asynchronously
 
+  // to create message-datasource
+  // this hook sets currentGroupChannel asynchronously
   useSetChannel({
-    channelUrl: channelUrl,
-    sdkInit: sdkInit,
-    disableMarkAsRead: disableMarkAsRead
+    channelUrl,
+    sdkInit,
+    disableMarkAsRead
   }, {
-    messagesDispatcher: messagesDispatcher,
-    sdk: sdk,
-    logger: logger
-  }); // to set quote message as null
+    messagesDispatcher,
+    sdk,
+    logger,
+    markAsReadScheduler
+  });
 
-  useEffect(function () {
+  // to set quote message as null
+  useEffect(() => {
     setQuoteMessage(null);
-  }, [channelUrl]); // Hook to handle ChannelEvents and send values to useReducer using messagesDispatcher
+  }, [channelUrl]);
 
+  // Hook to handle ChannelEvents and send values to useReducer using messagesDispatcher
   useHandleChannelEvents({
-    currentGroupChannel: currentGroupChannel,
-    sdkInit: sdkInit,
+    currentGroupChannel,
+    sdkInit,
     currentUserId: userId,
-    hasMoreNext: hasMoreNext,
-    disableMarkAsRead: disableMarkAsRead
+    disableMarkAsRead
   }, {
-    messagesDispatcher: messagesDispatcher,
-    sdk: sdk,
-    logger: logger,
-    scrollRef: scrollRef,
-    setQuoteMessage: setQuoteMessage
-  }); // hook that fetches messages when channel changes
+    messagesDispatcher,
+    sdk,
+    logger,
+    scrollRef,
+    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,
-    latestMessageTimeStamp: latestMessageTimeStamp,
-    replyType: replyType
+    currentGroupChannel,
+    userFilledMessageListQuery,
+    initialTimeStamp,
+    latestMessageTimeStamp,
+    replyType,
+    isVoiceMessageEnabled
   }, {
-    logger: logger,
-    scrollRef: scrollRef,
-    messagesDispatcher: messagesDispatcher
-  }); // handles API calls from withSendbird
+    logger,
+    scrollRef,
+    messagesDispatcher
+  });
 
-  useEffect(function () {
-    var subscriber = pubSubHandler({
-      channelUrl: channelUrl,
-      pubSub: pubSub,
+  // handles API calls from withSendbird
+  useEffect(() => {
+    const subscriber = pubSubHandler({
+      channelUrl,
+      pubSub,
       dispatcher: messagesDispatcher,
-      scrollRef: scrollRef
+      scrollRef
     });
-    return function () {
+    return () => {
       pubSubHandleRemover(subscriber);
     };
-  }, [channelUrl, sdkInit]); // handling connection breaks
+  }, [channelUrl, sdkInit]);
 
+  // handling connection breaks
   useHandleReconnect({
-    isOnline: isOnline,
-    replyType: replyType,
-    disableMarkAsRead: disableMarkAsRead
+    isOnline,
+    replyType,
+    disableMarkAsRead
   }, {
-    logger: logger,
-    sdk: sdk,
-    scrollRef: scrollRef,
-    currentGroupChannel: currentGroupChannel,
-    messagesDispatcher: messagesDispatcher,
-    userFilledMessageListQuery: userFilledMessageListQuery
-  }); // callbacks for Message CURD actions
+    logger,
+    sdk,
+    scrollRef,
+    currentGroupChannel,
+    messagesDispatcher,
+    userFilledMessageListQuery,
+    markAsReadScheduler
+  });
 
-  var deleteMessage = useDeleteMessageCallback({
-    currentGroupChannel: currentGroupChannel,
-    messagesDispatcher: messagesDispatcher
+  // callbacks for Message CURD actions
+  const deleteMessage = useDeleteMessageCallback({
+    currentGroupChannel,
+    messagesDispatcher
   }, {
-    logger: logger
+    logger
   });
-  var updateMessage = useUpdateMessageCallback({
-    currentGroupChannel: currentGroupChannel,
-    messagesDispatcher: messagesDispatcher,
-    onBeforeUpdateUserMessage: onBeforeUpdateUserMessage,
-    isMentionEnabled: isMentionEnabled
+  const updateMessage = useUpdateMessageCallback({
+    currentGroupChannel,
+    messagesDispatcher,
+    onBeforeUpdateUserMessage,
+    isMentionEnabled
   }, {
-    logger: logger,
-    pubSub: pubSub
+    logger,
+    pubSub
   });
-  var resendMessage = useResendMessageCallback({
-    currentGroupChannel: currentGroupChannel,
-    messagesDispatcher: messagesDispatcher
+  const resendMessage = useResendMessageCallback({
+    currentGroupChannel,
+    messagesDispatcher
   }, {
-    logger: logger
+    logger
   });
-
-  var _o = useSendMessageCallback({
-    currentGroupChannel: currentGroupChannel,
-    onBeforeSendUserMessage: onBeforeSendUserMessage,
-    isMentionEnabled: isMentionEnabled
+  const [messageInputRef, sendMessage] = useSendMessageCallback({
+    currentGroupChannel,
+    onBeforeSendUserMessage,
+    isMentionEnabled
   }, {
-    logger: logger,
-    pubSub: pubSub,
-    scrollRef: scrollRef,
-    messagesDispatcher: messagesDispatcher
-  }),
-      messageInputRef = _o[0],
-      sendMessage = _o[1];
-
-  var sendFileMessage = useSendFileMessageCallback({
-    currentGroupChannel: currentGroupChannel,
-    onBeforeSendFileMessage: onBeforeSendFileMessage,
-    imageCompression: imageCompression
+    logger,
+    pubSub,
+    scrollRef,
+    messagesDispatcher
+  });
+  const [sendFileMessage] = useSendFileMessageCallback({
+    currentGroupChannel,
+    onBeforeSendFileMessage,
+    imageCompression
   }, {
-    logger: logger,
-    pubSub: pubSub,
-    scrollRef: scrollRef,
-    messagesDispatcher: messagesDispatcher
-  })[0];
+    logger,
+    pubSub,
+    scrollRef,
+    messagesDispatcher
+  });
+  const [sendVoiceMessage] = useSendVoiceMessageCallback({
+    currentGroupChannel,
+    onBeforeSendVoiceMessage
+  }, {
+    logger,
+    pubSub,
+    scrollRef,
+    messagesDispatcher
+  });
   return /*#__PURE__*/React__default.createElement(ChannelContext.Provider, {
     value: {
       // props
-      channelUrl: channelUrl,
+      channelUrl,
       isReactionEnabled: usingReaction,
-      isMessageGroupingEnabled: isMessageGroupingEnabled,
-      showSearchIcon: showSearchIcon,
-      highlightedMessage: highlightedMessage,
-      startingPoint: startingPoint,
-      onBeforeSendUserMessage: onBeforeSendUserMessage,
-      onBeforeSendFileMessage: onBeforeSendFileMessage,
-      onBeforeUpdateUserMessage: onBeforeUpdateUserMessage,
-      onChatHeaderActionClick: onChatHeaderActionClick,
-      onSearchClick: onSearchClick,
-      onBackClick: onBackClick,
-      replyType: replyType,
-      threadReplySelectType: threadReplySelectType,
-      queries: queries,
-      disableMarkAsRead: disableMarkAsRead,
-      onReplyInThread: onReplyInThread,
-      onQuoteMessageClick: onQuoteMessageClick,
-      onMessageAnimated: onMessageAnimated,
-      onMessageHighlighted: onMessageHighlighted,
+      isMessageGroupingEnabled,
+      showSearchIcon,
+      highlightedMessage,
+      startingPoint,
+      onBeforeSendUserMessage,
+      onBeforeSendFileMessage,
+      onBeforeUpdateUserMessage,
+      onChatHeaderActionClick,
+      onSearchClick,
+      onBackClick,
+      replyType,
+      threadReplySelectType,
+      queries,
+      filterMessageList,
+      disableMarkAsRead,
+      onReplyInThread,
+      onQuoteMessageClick,
+      onMessageAnimated,
+      onMessageHighlighted,
       // messagesStore
-      allMessages: allMessages,
-      loading: loading,
-      initialized: initialized,
-      unreadSince: unreadSince,
-      isInvalid: isInvalid,
-      currentGroupChannel: currentGroupChannel,
-      hasMorePrev: hasMorePrev,
-      hasMoreNext: hasMoreNext,
-      oldestMessageTimeStamp: oldestMessageTimeStamp,
-      latestMessageTimeStamp: latestMessageTimeStamp,
-      emojiContainer: emojiContainer,
-      readStatus: readStatus,
+      allMessages,
+      loading,
+      initialized,
+      unreadSince,
+      isInvalid,
+      currentGroupChannel,
+      hasMorePrev,
+      hasMoreNext,
+      oldestMessageTimeStamp,
+      latestMessageTimeStamp,
+      emojiContainer,
+      readStatus,
       // utils
-      scrollToMessage: scrollToMessage,
-      quoteMessage: quoteMessage,
-      setQuoteMessage: setQuoteMessage,
-      deleteMessage: deleteMessage,
-      updateMessage: updateMessage,
-      resendMessage: resendMessage,
-      messageInputRef: messageInputRef,
-      sendMessage: sendMessage,
-      sendFileMessage: sendFileMessage,
-      initialTimeStamp: initialTimeStamp,
-      messageActionTypes: messageActionTypes,
-      messagesDispatcher: messagesDispatcher,
-      setInitialTimeStamp: setInitialTimeStamp,
-      setAnimatedMessageId: setAnimatedMessageId,
-      setHighLightedMessageId: setHighLightedMessageId,
-      animatedMessageId: animatedMessageId,
-      highLightedMessageId: highLightedMessageId,
-      nicknamesMap: nicknamesMap,
-      emojiAllMap: emojiAllMap,
-      onScrollCallback: onScrollCallback,
-      onScrollDownCallback: onScrollDownCallback,
-      memoizedEmojiListItems: memoizedEmojiListItems,
-      scrollRef: scrollRef,
-      toggleReaction: toggleReaction
+      scrollToMessage,
+      quoteMessage,
+      setQuoteMessage,
+      deleteMessage,
+      updateMessage,
+      resendMessage,
+      messageInputRef,
+      sendMessage,
+      sendFileMessage,
+      sendVoiceMessage,
+      initialTimeStamp,
+      messageActionTypes,
+      messagesDispatcher,
+      setInitialTimeStamp,
+      setAnimatedMessageId,
+      setHighLightedMessageId,
+      animatedMessageId,
+      highLightedMessageId,
+      nicknamesMap,
+      emojiAllMap,
+      onScrollCallback,
+      onScrollDownCallback,
+      scrollRef,
+      toggleReaction
     }
   }, /*#__PURE__*/React__default.createElement(UserProfileProvider, {
     disableUserProfile: props === null || props === void 0 ? void 0 : props.disableUserProfile,
@@ -2195,10 +2109,7 @@ var ChannelProvider = function (props) {
     onUserProfileMessage: onUserProfileMessage
   }, children));
 };
+const useChannelContext = () => React__default.useContext(ChannelContext);
 
-var useChannelContext = function () {
-  return React__default.useContext(ChannelContext);
-};
-
-export { ChannelProvider as C, MARK_AS_READ as M, ThreadReplySelectType as T, isDisabledBecauseFrozen as a, isDisabledBecauseMuted as b, compareMessagesForGrouping as c, isOperator as d, isAboutSame as i, useChannelContext as u };
-//# sourceMappingURL=ChannelProvider-554e7116.js.map
+export { ChannelProvider as C, ThreadReplySelectType as T, isDisabledBecauseFrozen as a, isDisabledBecauseMuted as b, compareMessagesForGrouping as c, isOperator as d, getIsReactionEnabled as g, isAboutSame as i, useChannelContext as u };
+//# sourceMappingURL=ChannelProvider-b41fde4c.js.map