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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGroupChannelMessagesReducer = void 0;
+exports.useChannelMessagesReducer = void 0;
 var _react = require("react");
 var _uikitUtils = require("@sendbird/uikit-utils");
 const defaultReducer = (_ref, action) => {
@@ -22,29 +22,40 @@ const defaultReducer = (_ref, action) => {
         return draft;
       }
     case 'update_messages':
-    case 'update_next_messages':
       {
-        const key = action.type === 'update_messages' ? 'messageMap' : 'nextMessageMap';
-        const receivedMessagesAsMap = (0, _uikitUtils.arrayToMapWithGetter)(action.value.messages, _uikitUtils.getMessageUniqId);
         if (action.value.clearBeforeAction) {
-          draft[key] = receivedMessagesAsMap;
+          draft['messageMap'] = (0, _uikitUtils.arrayToMapWithGetter)(action.value.messages, _uikitUtils.getMessageUniqId);
         } else {
-          draft[key] = {
-            ...draft[key],
-            ...receivedMessagesAsMap
+          // Remove existing messages before update for prevent duplicate display
+          const messageKeys = action.value.messages.map(it => (0, _uikitUtils.isSendableMessage)(it) ? [it.messageId, it.reqId] : [it.messageId]).flat();
+          messageKeys.forEach(key => delete draft['messageMap'][key]);
+          draft['messageMap'] = {
+            ...draft['messageMap'],
+            ...(0, _uikitUtils.arrayToMapWithGetter)(action.value.messages, _uikitUtils.getMessageUniqId)
+          };
+        }
+        return draft;
+      }
+    case 'update_new_messages':
+      {
+        const newMessages = action.value.messages.filter(it => (0, _uikitUtils.isNewMessage)(it, action.value.currentUserId));
+        if (action.value.clearBeforeAction) {
+          draft['newMessageMap'] = (0, _uikitUtils.arrayToMapWithGetter)(newMessages, _uikitUtils.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'],
+            ...(0, _uikitUtils.arrayToMapWithGetter)(newMessages, _uikitUtils.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' && (0, _uikitUtils.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]
         };
@@ -54,17 +65,17 @@ const defaultReducer = (_ref, action) => {
       }
   }
 };
-const useGroupChannelMessagesReducer = (userId, sortComparator) => {
+const useChannelMessagesReducer = sortComparator => {
   const [{
     loading,
     refreshing,
     messageMap,
-    nextMessageMap
+    newMessageMap
   }, dispatch] = (0, _react.useReducer)(defaultReducer, {
     loading: true,
     refreshing: false,
     messageMap: {},
-    nextMessageMap: {}
+    newMessageMap: {}
   });
   const updateMessages = (messages, clearBeforeAction, currentUserId) => {
     dispatch({
@@ -85,9 +96,9 @@ 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,
@@ -95,9 +106,9 @@ const useGroupChannelMessagesReducer = (userId, sortComparator) => {
       }
     });
   };
-  const deleteNextMessages = (messageIds, reqIds) => {
+  const deleteNewMessages = (messageIds, reqIds) => {
     dispatch({
-      type: 'delete_next_messages',
+      type: 'delete_new_messages',
       value: {
         messageIds,
         reqIds
@@ -124,21 +135,19 @@ 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 => (0, _uikitUtils.isNewMessage)(msg, userId));
+  const newMessages = Object.values(newMessageMap);
   return {
     updateLoading,
     updateRefreshing,
     updateMessages,
-    updateNextMessages,
     deleteMessages,
-    deleteNextMessages,
     loading,
     refreshing,
     messages,
-    nextMessages,
-    newMessagesFromMembers
+    newMessages,
+    updateNewMessages,
+    deleteNewMessages
   };
 };
-exports.useGroupChannelMessagesReducer = useGroupChannelMessagesReducer;
-//# sourceMappingURL=reducer.js.map
+exports.useChannelMessagesReducer = useChannelMessagesReducer;
+//# sourceMappingURL=useChannelMessagesReducer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_uikitUtils","defaultReducer","_ref","action","draft","type","value","status","clearBeforeAction","arrayToMapWithGetter","messages","getMessageUniqId","messageKeys","map","it","isSendableMessage","messageId","reqId","flat","forEach","key","newMessages","filter","isNewMessage","currentUserId","messageIds","msgId","reqIds","useChannelMessagesReducer","sortComparator","loading","refreshing","messageMap","newMessageMap","dispatch","useReducer","updateMessages","deleteMessages","updateNewMessages","deleteNewMessages","updateLoading","updateRefreshing","useIIFE","Object","values","sort","exports"],"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/commonjs/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.js

@@ -8,32 +8,45 @@ var _react = require("react");
 var _groupChannel = require("@sendbird/chat/groupChannel");
 var _uikitUtils = require("@sendbird/uikit-utils");
 var _useChannelHandler = require("../../handler/useChannelHandler");
-var _reducer = require("./reducer");
-const createMessageCollection = (channel, creator) => {
-  if (creator) return creator();
+var _useChannelMessagesReducer = require("../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 _groupChannel.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;
+}
 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 = (0, _uikitUtils.useForceUpdate)();
   const collectionRef = (0, _react.useRef)();
+  const collectionInitializedRef = (0, _react.useRef)(false);
   const handlerId = (0, _uikitUtils.useUniqHandlerId)('useGroupChannelMessagesWithCollection');
   const {
     loading,
     refreshing,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
+    newMessages,
     updateMessages,
-    updateNextMessages,
-    deleteNextMessages,
+    updateNewMessages,
+    deleteNewMessages,
     deleteMessages,
     updateLoading,
     updateRefreshing
-  } = (0, _reducer.useGroupChannelMessagesReducer)(userId, options === null || options === void 0 ? void 0 : options.sortComparator);
+  } = (0, _useChannelMessagesReducer.useChannelMessagesReducer)(options === null || options === void 0 ? void 0 : options.sortComparator);
   const channelMarkAsRead = async source => {
     try {
       switch (source) {
@@ -48,74 +61,109 @@ const useGroupChannelMessagesWithCollection = (sdk, channel, userId, options) =>
       _uikitUtils.Logger.warn('[useGroupChannelMessagesWithCollection/channelMarkAsRead]', e);
     }
   };
-  const init = (0, _uikitUtils.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 = (0, _uikitUtils.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 === _groupChannel.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 _groupChannel.MessageEventSource.EVENT_MESSAGE_SENT_PENDING:
+            case _groupChannel.MessageEventSource.EVENT_MESSAGE_SENT_SUCCESS:
+            case _groupChannel.MessageEventSource.EVENT_MESSAGE_SENT_FAILED:
+              return !(0, _uikitUtils.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 !== _groupChannel.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() && !(0, _uikitUtils.isDifferentChannel)(eventChannel, channel)) {
-            forceUpdate();
+          switch (_.source) {
+            case _groupChannel.MessageEventSource.EVENT_MESSAGE_RECEIVED:
+            case _groupChannel.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(_groupChannel.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API).onCacheResult((err, messages) => {
-        if (err) sdk.isCacheEnabled && _uikitUtils.Logger.error('[useGroupChannelMessagesWithCollection/onCacheResult]', err);else {
-          var _collectionRef$curren3, _collectionRef$curren4;
-          _uikitUtils.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) _uikitUtils.Logger.warn('[useGroupChannelMessagesWithCollection/onApiResult]', err);else {
-          _uikitUtils.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 _groupChannel.MessageEventSource.EVENT_MESSAGE_UPDATED:
+              return !(0, _uikitUtils.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 === _groupChannel.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() && !(0, _uikitUtils.isDifferentChannel)(eventChannel, channel)) {
+          forceUpdate();
+        }
+      },
+      onHugeGapDetected: () => {
+        init(Number.MAX_SAFE_INTEGER, MESSAGE_LIMIT.DEFAULT);
+      }
+    });
+    collectionRef.current.initialize(_groupChannel.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API).onCacheResult((err, messages) => {
+      if (err) sdk.isCacheEnabled && _uikitUtils.Logger.error('[useGroupChannelMessagesWithCollection/onCacheResult]', err);else {
+        _uikitUtils.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) _uikitUtils.Logger.warn('[useGroupChannelMessagesWithCollection/onApiResult]', err);else {
+        var _options$onMessagesRe2;
+        _uikitUtils.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();
+    });
   });
   (0, _useChannelHandler.useChannelHandler)(sdk, handlerId, {
     onUserBanned(channel, bannedUser) {
@@ -133,45 +181,51 @@ const useGroupChannelMessagesWithCollection = (sdk, channel, userId, options) =>
     // 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]);
   (0, _react.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 = (0, _uikitUtils.useFreshCallback)(async () => {
     updateRefreshing(true);
-    init(userId, () => updateRefreshing(false));
+    init(Number.MAX_SAFE_INTEGER, MESSAGE_LIMIT.DEFAULT, () => updateRefreshing(false));
   });
   const prev = (0, _uikitUtils.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 = (0, _uikitUtils.useFreshCallback)(() => {
+    if (collectionInitializedRef.current && collectionRef.current) {
+      return collectionRef.current.hasPrevious;
+    } else {
+      return false;
+    }
+  });
   const next = (0, _uikitUtils.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 = (0, _uikitUtils.useFreshCallback)(() => {
+    if (collectionInitializedRef.current && collectionRef.current) {
+      return collectionRef.current.hasNext;
+    } else {
+      return false;
     }
   });
   const sendUserMessage = (0, _uikitUtils.useFreshCallback)((params, onPending) => {
@@ -186,8 +240,8 @@ const useGroupChannelMessagesWithCollection = (sdk, channel, userId, options) =>
           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);
       });
     });
@@ -204,8 +258,8 @@ const useGroupChannelMessagesWithCollection = (sdk, channel, userId, options) =>
           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);
       });
     });
@@ -234,28 +288,44 @@ const useGroupChannelMessagesWithCollection = (sdk, channel, userId, options) =>
       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 = (0, _uikitUtils.useFreshCallback)(() => {
+    updateNewMessages([], true, sdk.currentUser.userId);
+  });
+  const resetWithStartingPoint = (0, _uikitUtils.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
   };
 };
 exports.useGroupChannelMessagesWithCollection = useGroupChannelMessagesWithCollection;