@sendbird/uikit-chat-hooks 2.4.2 → 2.5.0-rc.0

package/lib/module/channel/{useGroupChannelMessages/reducer.js → useChannelMessagesReducer.js}

@@ -1,5 +1,5 @@
 import { useReducer } from 'react';
-import { arrayToMapWithGetter, getMessageUniqId, isMyMessage, isNewMessage, useIIFE } from '@sendbird/uikit-utils';
+import { arrayToMapWithGetter, getMessageUniqId, isNewMessage, isSendableMessage, useIIFE } from '@sendbird/uikit-utils';
 const defaultReducer = (_ref, action) => {
   let {
     ...draft
@@ -16,29 +16,40 @@ const defaultReducer = (_ref, action) => {
         return draft;
       }
     case 'update_messages':
-    case 'update_next_messages':
       {
-        const key = action.type === 'update_messages' ? 'messageMap' : 'nextMessageMap';
-        const receivedMessagesAsMap = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
         if (action.value.clearBeforeAction) {
-          draft[key] = receivedMessagesAsMap;
+          draft['messageMap'] = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
         } else {
-          draft[key] = {
-            ...draft[key],
-            ...receivedMessagesAsMap
+          // Remove existing messages before update for prevent duplicate display
+          const messageKeys = action.value.messages.map(it => isSendableMessage(it) ? [it.messageId, it.reqId] : [it.messageId]).flat();
+          messageKeys.forEach(key => delete draft['messageMap'][key]);
+          draft['messageMap'] = {
+            ...draft['messageMap'],
+            ...arrayToMapWithGetter(action.value.messages, getMessageUniqId)
+          };
+        }
+        return draft;
+      }
+    case 'update_new_messages':
+      {
+        const newMessages = action.value.messages.filter(it => isNewMessage(it, action.value.currentUserId));
+        if (action.value.clearBeforeAction) {
+          draft['newMessageMap'] = arrayToMapWithGetter(newMessages, getMessageUniqId);
+        } else {
+          // Remove existing messages before update for prevent duplicate display
+          const messageKeys = newMessages.map(it => it.messageId);
+          messageKeys.forEach(key => delete draft['newMessageMap'][key]);
+          draft['newMessageMap'] = {
+            ...draft['newMessageMap'],
+            ...arrayToMapWithGetter(newMessages, getMessageUniqId)
           };
-
-          // NOTE: Replace pending message to succeeded message
-          action.value.messages.filter(m => {
-            return (m.isFileMessage() || m.isUserMessage()) && Boolean(draft[key][m.reqId]) && m.sendingStatus === 'succeeded' && isMyMessage(m, action.value.currentUserId);
-          }).forEach(m => delete draft[key][m.reqId]);
         }
         return draft;
       }
     case 'delete_messages':
-    case 'delete_next_messages':
+    case 'delete_new_messages':
       {
-        const key = action.type === 'delete_messages' ? 'messageMap' : 'nextMessageMap';
+        const key = action.type === 'delete_messages' ? 'messageMap' : 'newMessageMap';
         draft[key] = {
           ...draft[key]
         };
@@ -48,17 +59,17 @@ const defaultReducer = (_ref, action) => {
       }
   }
 };
-export const useGroupChannelMessagesReducer = (userId, sortComparator) => {
+export const useChannelMessagesReducer = sortComparator => {
   const [{
     loading,
     refreshing,
     messageMap,
-    nextMessageMap
+    newMessageMap
   }, dispatch] = useReducer(defaultReducer, {
     loading: true,
     refreshing: false,
     messageMap: {},
-    nextMessageMap: {}
+    newMessageMap: {}
   });
   const updateMessages = (messages, clearBeforeAction, currentUserId) => {
     dispatch({
@@ -79,9 +90,9 @@ export const useGroupChannelMessagesReducer = (userId, sortComparator) => {
       }
     });
   };
-  const updateNextMessages = (messages, clearBeforeAction, currentUserId) => {
+  const updateNewMessages = (messages, clearBeforeAction, currentUserId) => {
     dispatch({
-      type: 'update_next_messages',
+      type: 'update_new_messages',
       value: {
         messages,
         clearBeforeAction,
@@ -89,9 +100,9 @@ export const useGroupChannelMessagesReducer = (userId, sortComparator) => {
       }
     });
   };
-  const deleteNextMessages = (messageIds, reqIds) => {
+  const deleteNewMessages = (messageIds, reqIds) => {
     dispatch({
-      type: 'delete_next_messages',
+      type: 'delete_new_messages',
       value: {
         messageIds,
         reqIds
@@ -118,20 +129,18 @@ export const useGroupChannelMessagesReducer = (userId, sortComparator) => {
     if (sortComparator) return Object.values(messageMap).sort(sortComparator);
     return Object.values(messageMap);
   });
-  const nextMessages = Object.values(nextMessageMap);
-  const newMessagesFromMembers = nextMessages.filter(msg => isNewMessage(msg, userId));
+  const newMessages = Object.values(newMessageMap);
   return {
     updateLoading,
     updateRefreshing,
     updateMessages,
-    updateNextMessages,
     deleteMessages,
-    deleteNextMessages,
     loading,
     refreshing,
     messages,
-    nextMessages,
-    newMessagesFromMembers
+    newMessages,
+    updateNewMessages,
+    deleteNewMessages
   };
 };
-//# sourceMappingURL=reducer.js.map
+//# sourceMappingURL=useChannelMessagesReducer.js.map

package/lib/module/channel/useChannelMessagesReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useReducer","arrayToMapWithGetter","getMessageUniqId","isNewMessage","isSendableMessage","useIIFE","defaultReducer","_ref","action","draft","type","value","status","clearBeforeAction","messages","messageKeys","map","it","messageId","reqId","flat","forEach","key","newMessages","filter","currentUserId","messageIds","msgId","reqIds","useChannelMessagesReducer","sortComparator","loading","refreshing","messageMap","newMessageMap","dispatch","updateMessages","deleteMessages","updateNewMessages","deleteNewMessages","updateLoading","updateRefreshing","Object","values","sort"],"sources":["useChannelMessagesReducer.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nimport type { SendbirdBaseMessage } from '@sendbird/uikit-utils';\nimport {\n  SendbirdMessage,\n  arrayToMapWithGetter,\n  getMessageUniqId,\n  isNewMessage,\n  isSendableMessage,\n  useIIFE,\n} from '@sendbird/uikit-utils';\n\ntype Options = {\n  sortComparator?: (a: SendbirdMessage, b: SendbirdMessage) => number;\n};\n\ntype Action =\n  | {\n      type: 'update_loading' | 'update_refreshing';\n      value: { status: boolean };\n    }\n  | {\n      type: 'update_messages' | 'update_new_messages';\n      value: { messages: SendbirdBaseMessage[]; clearBeforeAction: boolean; currentUserId?: string };\n    }\n  | {\n      type: 'delete_messages' | 'delete_new_messages';\n      value: { messageIds: number[]; reqIds: string[] };\n    };\n\ntype State = {\n  loading: boolean;\n  refreshing: boolean;\n  messageMap: Record<string, SendbirdBaseMessage>;\n  newMessageMap: Record<string, SendbirdBaseMessage>;\n};\n\nconst defaultReducer = ({ ...draft }: State, action: Action) => {\n  switch (action.type) {\n    case 'update_refreshing': {\n      draft['refreshing'] = action.value.status;\n      return draft;\n    }\n    case 'update_loading': {\n      draft['loading'] = action.value.status;\n      return draft;\n    }\n    case 'update_messages': {\n      if (action.value.clearBeforeAction) {\n        draft['messageMap'] = arrayToMapWithGetter(action.value.messages, getMessageUniqId);\n      } else {\n        // Remove existing messages before update for prevent duplicate display\n        const messageKeys = action.value.messages\n          .map((it) => (isSendableMessage(it) ? [it.messageId, it.reqId] : [it.messageId]))\n          .flat();\n        messageKeys.forEach((key) => delete draft['messageMap'][key]);\n\n        draft['messageMap'] = {\n          ...draft['messageMap'],\n          ...arrayToMapWithGetter(action.value.messages, getMessageUniqId),\n        };\n      }\n\n      return draft;\n    }\n    case 'update_new_messages': {\n      const newMessages = action.value.messages.filter((it) => isNewMessage(it, action.value.currentUserId));\n\n      if (action.value.clearBeforeAction) {\n        draft['newMessageMap'] = arrayToMapWithGetter(newMessages, getMessageUniqId);\n      } else {\n        // Remove existing messages before update for prevent duplicate display\n        const messageKeys = newMessages.map((it) => it.messageId);\n        messageKeys.forEach((key) => delete draft['newMessageMap'][key]);\n\n        draft['newMessageMap'] = {\n          ...draft['newMessageMap'],\n          ...arrayToMapWithGetter(newMessages, getMessageUniqId),\n        };\n      }\n\n      return draft;\n    }\n    case 'delete_messages':\n    case 'delete_new_messages': {\n      const key = action.type === 'delete_messages' ? 'messageMap' : 'newMessageMap';\n      draft[key] = { ...draft[key] };\n      action.value.messageIds.forEach((msgId) => delete draft[key][msgId]);\n      action.value.reqIds.forEach((reqId) => delete draft[key][reqId]);\n\n      return draft;\n    }\n  }\n};\n\nexport const useChannelMessagesReducer = (sortComparator?: Options['sortComparator']) => {\n  const [{ loading, refreshing, messageMap, newMessageMap }, dispatch] = useReducer(defaultReducer, {\n    loading: true,\n    refreshing: false,\n    messageMap: {},\n    newMessageMap: {},\n  });\n\n  const updateMessages = (messages: SendbirdBaseMessage[], clearBeforeAction: boolean, currentUserId?: string) => {\n    dispatch({ type: 'update_messages', value: { messages, clearBeforeAction, currentUserId } });\n  };\n  const deleteMessages = (messageIds: number[], reqIds: string[]) => {\n    dispatch({ type: 'delete_messages', value: { messageIds, reqIds } });\n  };\n  const updateNewMessages = (messages: SendbirdBaseMessage[], clearBeforeAction: boolean, currentUserId?: string) => {\n    dispatch({ type: 'update_new_messages', value: { messages, clearBeforeAction, currentUserId } });\n  };\n  const deleteNewMessages = (messageIds: number[], reqIds: string[]) => {\n    dispatch({ type: 'delete_new_messages', value: { messageIds, reqIds } });\n  };\n  const updateLoading = (status: boolean) => {\n    dispatch({ type: 'update_loading', value: { status } });\n  };\n  const updateRefreshing = (status: boolean) => {\n    dispatch({ type: 'update_refreshing', value: { status } });\n  };\n\n  const messages = useIIFE(() => {\n    if (sortComparator) return Object.values(messageMap).sort(sortComparator);\n    return Object.values(messageMap);\n  });\n  const newMessages = Object.values(newMessageMap);\n\n  return {\n    updateLoading,\n    updateRefreshing,\n    updateMessages,\n    deleteMessages,\n\n    loading,\n    refreshing,\n    messages,\n\n    newMessages,\n    updateNewMessages,\n    deleteNewMessages,\n  };\n};\n"],"mappings":"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"}

package/lib/module/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.js

@@ -1,33 +1,46 @@
 import { useEffect, useRef } from 'react';
 import { MessageCollectionInitPolicy, MessageEventSource, MessageFilter } from '@sendbird/chat/groupChannel';
-import { Logger, confirmAndMarkAsRead, isDifferentChannel, useForceUpdate, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { Logger, confirmAndMarkAsRead, isDifferentChannel, isMyMessage, useForceUpdate, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 import { useChannelHandler } from '../../handler/useChannelHandler';
-import { useGroupChannelMessagesReducer } from './reducer';
-const createMessageCollection = (channel, creator) => {
-  if (creator) return creator();
+import { useChannelMessagesReducer } from '../useChannelMessagesReducer';
+const MESSAGE_LIMIT = {
+  DEFAULT: 50,
+  SEARCH: 20
+};
+const createMessageCollection = (channel, limit, options) => {
+  if (options !== null && options !== void 0 && options.collectionCreator) return options === null || options === void 0 ? void 0 : options.collectionCreator({
+    startingPoint: options === null || options === void 0 ? void 0 : options.startingPoint
+  });
   const filter = new MessageFilter();
   return channel.createMessageCollection({
     filter,
-    limit: 100
+    limit,
+    startingPoint: options === null || options === void 0 ? void 0 : options.startingPoint
   });
 };
+function isNotEmpty(arr) {
+  if (!arr) return false;
+  return arr.length !== 0;
+}
 export const useGroupChannelMessagesWithCollection = (sdk, channel, userId, options) => {
+  const initialStartingPoint = (options === null || options === void 0 ? void 0 : options.startingPoint) ?? Number.MAX_SAFE_INTEGER;
+  const initialLimit = typeof (options === null || options === void 0 ? void 0 : options.startingPoint) === 'number' ? MESSAGE_LIMIT.SEARCH : MESSAGE_LIMIT.DEFAULT;
   const forceUpdate = useForceUpdate();
   const collectionRef = useRef();
+  const collectionInitializedRef = useRef(false);
   const handlerId = useUniqHandlerId('useGroupChannelMessagesWithCollection');
   const {
     loading,
     refreshing,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
+    newMessages,
     updateMessages,
-    updateNextMessages,
-    deleteNextMessages,
+    updateNewMessages,
+    deleteNewMessages,
     deleteMessages,
     updateLoading,
     updateRefreshing
-  } = useGroupChannelMessagesReducer(userId, options === null || options === void 0 ? void 0 : options.sortComparator);
+  } = useChannelMessagesReducer(options === null || options === void 0 ? void 0 : options.sortComparator);
   const channelMarkAsRead = async source => {
     try {
       switch (source) {
@@ -42,74 +55,109 @@ export const useGroupChannelMessagesWithCollection = (sdk, channel, userId, opti
       Logger.warn('[useGroupChannelMessagesWithCollection/channelMarkAsRead]', e);
     }
   };
-  const init = useFreshCallback(async (uid, callback) => {
-    var _collectionRef$curren;
+  const updateUnsendMessages = () => {
+    const {
+      pendingMessages,
+      failedMessages
+    } = collectionRef.current ?? {};
+    if (isNotEmpty(pendingMessages)) updateMessages(pendingMessages, false, sdk.currentUser.userId);
+    if (isNotEmpty(failedMessages)) updateMessages(failedMessages, false, sdk.currentUser.userId);
+  };
+  const init = useFreshCallback(async (startingPoint, limit, callback) => {
+    var _collectionRef$curren, _collectionRef$curren2;
     if (collectionRef.current) (_collectionRef$curren = collectionRef.current) === null || _collectionRef$curren === void 0 ? void 0 : _collectionRef$curren.dispose();
-    if (uid) {
-      var _collectionRef$curren2;
-      collectionRef.current = createMessageCollection(channel, options === null || options === void 0 ? void 0 : options.collectionCreator);
-      updateNextMessages([], true, sdk.currentUser.userId);
-      channelMarkAsRead();
-      (_collectionRef$curren2 = collectionRef.current) === null || _collectionRef$curren2 === void 0 ? void 0 : _collectionRef$curren2.setMessageCollectionHandler({
-        onMessagesAdded: (_, __, messages) => {
-          channelMarkAsRead(_.source);
-          updateNextMessages(messages, false, sdk.currentUser.userId);
-        },
-        onMessagesUpdated: (_, __, messages) => {
-          channelMarkAsRead(_.source);
-
-          // NOTE: admin message is not added via onMessagesAdded handler, not checked yet is this a bug.
-          if (_.source === MessageEventSource.EVENT_MESSAGE_RECEIVED) {
-            const nextMessageIds = nextMessages.map(it => it.messageId);
-            const nonAddedMessagesFromReceivedEvent = messages.filter(it => nextMessageIds.indexOf(it.messageId) === -1);
-            updateNextMessages(nonAddedMessagesFromReceivedEvent, false, sdk.currentUser.userId);
+    channelMarkAsRead();
+    updateNewMessages([], true, sdk.currentUser.userId);
+    collectionInitializedRef.current = false;
+    collectionRef.current = createMessageCollection(channel, limit, {
+      collectionCreator: options === null || options === void 0 ? void 0 : options.collectionCreator,
+      startingPoint
+    });
+    (_collectionRef$curren2 = collectionRef.current) === null || _collectionRef$curren2 === void 0 ? void 0 : _collectionRef$curren2.setMessageCollectionHandler({
+      onMessagesAdded: (_, __, messages) => {
+        channelMarkAsRead(_.source);
+        const incomingMessages = messages.filter(it => {
+          switch (_.source) {
+            case MessageEventSource.EVENT_MESSAGE_SENT_PENDING:
+            case MessageEventSource.EVENT_MESSAGE_SENT_SUCCESS:
+            case MessageEventSource.EVENT_MESSAGE_SENT_FAILED:
+              return !isMyMessage(it, sdk.currentUser.userId);
+            default:
+              return true;
           }
-
-          // NOTE: v4 MESSAGE_RECEIVED is called twice from onMessagesAdded and onMessagesUpdated when receiving new message.
-          //  This is not intended behavior but not bugs.
-          if (_.source !== MessageEventSource.EVENT_MESSAGE_RECEIVED) {
-            updateMessages(messages, false, sdk.currentUser.userId);
+        });
+        if (incomingMessages.length > 0) {
+          var _options$shouldCountN;
+          updateMessages(incomingMessages, false, sdk.currentUser.userId);
+          if (options !== null && options !== void 0 && (_options$shouldCountN = options.shouldCountNewMessages) !== null && _options$shouldCountN !== void 0 && _options$shouldCountN.call(options)) {
+            updateNewMessages(incomingMessages, false, sdk.currentUser.userId);
           }
-        },
-        onMessagesDeleted: (_, __, messageIds) => {
-          deleteMessages(messageIds, []);
-          deleteNextMessages(messageIds, []);
-        },
-        onChannelDeleted: () => {
-          var _options$onChannelDel;
-          options === null || options === void 0 ? void 0 : (_options$onChannelDel = options.onChannelDeleted) === null || _options$onChannelDel === void 0 ? void 0 : _options$onChannelDel.call(options);
-        },
-        onChannelUpdated: (_, eventChannel) => {
-          if (eventChannel.isGroupChannel() && !isDifferentChannel(eventChannel, channel)) {
-            forceUpdate();
+          switch (_.source) {
+            case MessageEventSource.EVENT_MESSAGE_RECEIVED:
+            case MessageEventSource.SYNC_MESSAGE_FILL:
+              {
+                var _options$onMessagesRe;
+                options === null || options === void 0 ? void 0 : (_options$onMessagesRe = options.onMessagesReceived) === null || _options$onMessagesRe === void 0 ? void 0 : _options$onMessagesRe.call(options, incomingMessages);
+              }
           }
-        },
-        onHugeGapDetected: () => {
-          init(uid);
-        }
-      });
-      collectionRef.current.initialize(MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API).onCacheResult((err, messages) => {
-        if (err) sdk.isCacheEnabled && Logger.error('[useGroupChannelMessagesWithCollection/onCacheResult]', err);else {
-          var _collectionRef$curren3, _collectionRef$curren4;
-          Logger.debug('[useGroupChannelMessagesWithCollection/onCacheResult]', 'message length:', messages.length);
-          updateMessages(messages, true, sdk.currentUser.userId);
-          updateMessages(((_collectionRef$curren3 = collectionRef.current) === null || _collectionRef$curren3 === void 0 ? void 0 : _collectionRef$curren3.pendingMessages) ?? [], false, sdk.currentUser.userId);
-          updateMessages(((_collectionRef$curren4 = collectionRef.current) === null || _collectionRef$curren4 === void 0 ? void 0 : _collectionRef$curren4.failedMessages) ?? [], false, sdk.currentUser.userId);
         }
-        callback === null || callback === void 0 ? void 0 : callback();
-      }).onApiResult((err, messages) => {
-        if (err) Logger.warn('[useGroupChannelMessagesWithCollection/onApiResult]', err);else {
-          Logger.debug('[useGroupChannelMessagesWithCollection/onApiResult]', 'message length:', messages.length);
-          updateMessages(messages, true, sdk.currentUser.userId);
-          if (sdk.isCacheEnabled) {
-            var _collectionRef$curren5, _collectionRef$curren6;
-            updateMessages(((_collectionRef$curren5 = collectionRef.current) === null || _collectionRef$curren5 === void 0 ? void 0 : _collectionRef$curren5.pendingMessages) ?? [], false, sdk.currentUser.userId);
-            updateMessages(((_collectionRef$curren6 = collectionRef.current) === null || _collectionRef$curren6 === void 0 ? void 0 : _collectionRef$curren6.failedMessages) ?? [], false, sdk.currentUser.userId);
+      },
+      onMessagesUpdated: (_, __, messages) => {
+        channelMarkAsRead(_.source);
+        const incomingMessages = messages.filter(it => {
+          switch (_.source) {
+            case MessageEventSource.EVENT_MESSAGE_UPDATED:
+              return !isMyMessage(it, sdk.currentUser.userId);
+            default:
+              return true;
+          }
+        });
+        if (incomingMessages.length > 0) {
+          var _options$shouldCountN2;
+          // NOTE: admin message is not added via onMessagesAdded handler, not checked yet is this a bug.
+          updateMessages(messages, false, sdk.currentUser.userId);
+          if (options !== null && options !== void 0 && (_options$shouldCountN2 = options.shouldCountNewMessages) !== null && _options$shouldCountN2 !== void 0 && _options$shouldCountN2.call(options)) {
+            if (_.source === MessageEventSource.EVENT_MESSAGE_RECEIVED) {
+              updateNewMessages(messages, false, sdk.currentUser.userId);
+            }
           }
         }
-        callback === null || callback === void 0 ? void 0 : callback();
-      });
-    }
+      },
+      onMessagesDeleted: (_, __, messageIds) => {
+        deleteMessages(messageIds, []);
+        deleteNewMessages(messageIds, []);
+      },
+      onChannelDeleted: () => {
+        var _options$onChannelDel;
+        options === null || options === void 0 ? void 0 : (_options$onChannelDel = options.onChannelDeleted) === null || _options$onChannelDel === void 0 ? void 0 : _options$onChannelDel.call(options);
+      },
+      onChannelUpdated: (_, eventChannel) => {
+        if (eventChannel.isGroupChannel() && !isDifferentChannel(eventChannel, channel)) {
+          forceUpdate();
+        }
+      },
+      onHugeGapDetected: () => {
+        init(Number.MAX_SAFE_INTEGER, MESSAGE_LIMIT.DEFAULT);
+      }
+    });
+    collectionRef.current.initialize(MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API).onCacheResult((err, messages) => {
+      if (err) sdk.isCacheEnabled && Logger.error('[useGroupChannelMessagesWithCollection/onCacheResult]', err);else {
+        Logger.debug('[useGroupChannelMessagesWithCollection/onCacheResult]', 'message length:', messages.length);
+        updateMessages(messages, true, sdk.currentUser.userId);
+        updateUnsendMessages();
+      }
+      callback === null || callback === void 0 ? void 0 : callback();
+    }).onApiResult((err, messages) => {
+      if (err) Logger.warn('[useGroupChannelMessagesWithCollection/onApiResult]', err);else {
+        var _options$onMessagesRe2;
+        Logger.debug('[useGroupChannelMessagesWithCollection/onApiResult]', 'message length:', messages.length);
+        updateMessages(messages, true, sdk.currentUser.userId);
+        if (!(options !== null && options !== void 0 && options.startingPoint)) options === null || options === void 0 ? void 0 : (_options$onMessagesRe2 = options.onMessagesReceived) === null || _options$onMessagesRe2 === void 0 ? void 0 : _options$onMessagesRe2.call(options, messages);
+        if (sdk.isCacheEnabled) updateUnsendMessages();
+      }
+      collectionInitializedRef.current = true;
+      callback === null || callback === void 0 ? void 0 : callback();
+    });
   });
   useChannelHandler(sdk, handlerId, {
     onUserBanned(channel, bannedUser) {
@@ -127,45 +175,51 @@ export const useGroupChannelMessagesWithCollection = (sdk, channel, userId, opti
     // NOTE: Cache read is heavy task, and it prevents smooth ui transition
     setTimeout(async () => {
       updateLoading(true);
-      init(userId, () => updateLoading(false));
+      init(initialStartingPoint, initialLimit, () => updateLoading(false));
     }, 0);
   }, [channel.url, userId]);
   useEffect(() => {
     return () => {
-      var _collectionRef$curren7;
-      if (collectionRef.current) (_collectionRef$curren7 = collectionRef.current) === null || _collectionRef$curren7 === void 0 ? void 0 : _collectionRef$curren7.dispose();
+      var _collectionRef$curren3;
+      if (collectionRef.current) (_collectionRef$curren3 = collectionRef.current) === null || _collectionRef$curren3 === void 0 ? void 0 : _collectionRef$curren3.dispose();
     };
   }, []);
   const refresh = useFreshCallback(async () => {
     updateRefreshing(true);
-    init(userId, () => updateRefreshing(false));
+    init(Number.MAX_SAFE_INTEGER, MESSAGE_LIMIT.DEFAULT, () => updateRefreshing(false));
   });
   const prev = useFreshCallback(async () => {
-    var _collectionRef$curren8;
-    if (collectionRef.current && (_collectionRef$curren8 = collectionRef.current) !== null && _collectionRef$curren8 !== void 0 && _collectionRef$curren8.hasPrevious) {
+    var _collectionRef$curren4;
+    if (collectionRef.current && (_collectionRef$curren4 = collectionRef.current) !== null && _collectionRef$curren4 !== void 0 && _collectionRef$curren4.hasPrevious) {
       try {
-        var _collectionRef$curren9;
-        const list = await ((_collectionRef$curren9 = collectionRef.current) === null || _collectionRef$curren9 === void 0 ? void 0 : _collectionRef$curren9.loadPrevious());
+        var _collectionRef$curren5;
+        const list = await ((_collectionRef$curren5 = collectionRef.current) === null || _collectionRef$curren5 === void 0 ? void 0 : _collectionRef$curren5.loadPrevious());
         updateMessages(list, false, sdk.currentUser.userId);
       } catch {}
     }
   });
+  const hasPrev = useFreshCallback(() => {
+    if (collectionInitializedRef.current && collectionRef.current) {
+      return collectionRef.current.hasPrevious;
+    } else {
+      return false;
+    }
+  });
   const next = useFreshCallback(async () => {
-    var _collectionRef$curren10;
-    const messageCandidates = [];
-    if (collectionRef.current && (_collectionRef$curren10 = collectionRef.current) !== null && _collectionRef$curren10 !== void 0 && _collectionRef$curren10.hasNext) {
+    var _collectionRef$curren6;
+    if (collectionRef.current && (_collectionRef$curren6 = collectionRef.current) !== null && _collectionRef$curren6 !== void 0 && _collectionRef$curren6.hasNext) {
       try {
-        var _collectionRef$curren11;
-        const fetchedList = await ((_collectionRef$curren11 = collectionRef.current) === null || _collectionRef$curren11 === void 0 ? void 0 : _collectionRef$curren11.loadNext());
-        messageCandidates.push(...fetchedList);
+        var _collectionRef$curren7;
+        const fetchedList = await ((_collectionRef$curren7 = collectionRef.current) === null || _collectionRef$curren7 === void 0 ? void 0 : _collectionRef$curren7.loadNext());
+        updateMessages(fetchedList, false, sdk.currentUser.userId);
       } catch {}
     }
-    if (nextMessages.length > 0) {
-      messageCandidates.push(...nextMessages);
-    }
-    if (messageCandidates.length > 0) {
-      updateMessages(messageCandidates, false, sdk.currentUser.userId);
-      updateNextMessages([], true, sdk.currentUser.userId);
+  });
+  const hasNext = useFreshCallback(() => {
+    if (collectionInitializedRef.current && collectionRef.current) {
+      return collectionRef.current.hasNext;
+    } else {
+      return false;
     }
   });
   const sendUserMessage = useFreshCallback((params, onPending) => {
@@ -180,8 +234,8 @@ export const useGroupChannelMessagesWithCollection = (sdk, channel, userId, opti
           updateMessages([sentMessage], false, sdk.currentUser.userId);
           resolve(sentMessage);
         }
-      }).onFailed((err, _failedMessage) => {
-        // updateMessages([failedMessage], false, sdk.currentUser.userId);
+      }).onFailed((err, failedMessage) => {
+        updateMessages([failedMessage], false, sdk.currentUser.userId);
         reject(err);
       });
     });
@@ -198,8 +252,8 @@ export const useGroupChannelMessagesWithCollection = (sdk, channel, userId, opti
           updateMessages([sentMessage], false, sdk.currentUser.userId);
           resolve(sentMessage);
         }
-      }).onFailed((err, _failedMessage) => {
-        // updateMessages([failedMessage], false, sdk.currentUser.userId);
+      }).onFailed((err, failedMessage) => {
+        updateMessages([failedMessage], false, sdk.currentUser.userId);
         reject(err);
       });
     });
@@ -228,28 +282,44 @@ export const useGroupChannelMessagesWithCollection = (sdk, channel, userId, opti
       if (message.isFileMessage()) await channel.deleteMessage(message);
     } else {
       try {
-        var _collectionRef$curren12;
-        await ((_collectionRef$curren12 = collectionRef.current) === null || _collectionRef$curren12 === void 0 ? void 0 : _collectionRef$curren12.removeFailedMessage(message.reqId));
+        var _collectionRef$curren8;
+        await ((_collectionRef$curren8 = collectionRef.current) === null || _collectionRef$curren8 === void 0 ? void 0 : _collectionRef$curren8.removeFailedMessage(message.reqId));
       } finally {
         deleteMessages([message.messageId], [message.reqId]);
       }
     }
   });
+  const resetNewMessages = useFreshCallback(() => {
+    updateNewMessages([], true, sdk.currentUser.userId);
+  });
+  const resetWithStartingPoint = useFreshCallback((startingPoint, callback) => {
+    updateLoading(true);
+    updateMessages([], true, sdk.currentUser.userId);
+    init(startingPoint, MESSAGE_LIMIT.DEFAULT, () => {
+      updateLoading(false);
+      callback === null || callback === void 0 ? void 0 : callback();
+    });
+  });
   return {
     loading,
     refreshing,
     refresh,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
     next,
+    hasNext,
     prev,
+    hasPrev,
+    newMessages,
+    resetNewMessages,
     sendUserMessage,
     sendFileMessage,
     updateUserMessage,
     updateFileMessage,
     resendMessage,
-    deleteMessage
+    deleteMessage,
+    resetWithStartingPoint,
+    nextMessages: newMessages,
+    newMessagesFromMembers: newMessages
   };
 };
 //# sourceMappingURL=useGroupChannelMessagesWithCollection.js.map