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

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useRef } from 'react';
 
 import type {
   SendbirdBaseChannel,
@@ -6,17 +6,20 @@ import type {
   SendbirdPreviousMessageListQuery,
 } from '@sendbird/uikit-utils';
 import {
+  ASYNC_NOOP,
   Logger,
   confirmAndMarkAsRead,
   isDifferentChannel,
+  isMyMessage,
   useAsyncEffect,
   useForceUpdate,
+  useFreshCallback,
   useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
-import { useGroupChannelMessagesReducer } from './reducer';
+import { useChannelMessagesReducer } from '../useChannelMessagesReducer';
 
 const createMessageQuery = (
   channel: SendbirdGroupChannel,
@@ -39,15 +42,14 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     loading,
     refreshing,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
+    newMessages,
     updateMessages,
-    updateNextMessages,
-    deleteNextMessages,
     deleteMessages,
+    updateNewMessages,
+    deleteNewMessages,
     updateLoading,
     updateRefreshing,
-  } = useGroupChannelMessagesReducer(userId, options?.sortComparator);
+  } = useChannelMessagesReducer(options?.sortComparator);
 
   const channelMarkAsRead = async () => {
     try {
@@ -57,20 +59,18 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     }
   };
 
-  const init = useCallback(
-    async (uid?: string) => {
-      if (uid) {
-        queryRef.current = createMessageQuery(channel, options?.queryCreator);
-        channelMarkAsRead();
-        if (queryRef.current?.hasNext) {
-          const list = await queryRef.current?.load();
-          updateMessages(list, true, sdk.currentUser.userId);
-        }
-        updateNextMessages([], true, sdk.currentUser.userId);
+  const init = useFreshCallback(async (uid?: string) => {
+    if (uid) {
+      channelMarkAsRead();
+      updateNewMessages([], true, sdk.currentUser.userId);
+
+      queryRef.current = createMessageQuery(channel, options?.queryCreator);
+      if (queryRef.current?.hasNext) {
+        const list = await queryRef.current?.load();
+        updateMessages(list, true, sdk.currentUser.userId);
       }
-    },
-    [sdk, channel.url, options?.queryCreator],
-  );
+    }
+  });
 
   const channelUpdater = (channel: SendbirdBaseChannel) => {
     if (channel.isGroupChannel() && !isDifferentChannel(channel, channel)) {
@@ -82,17 +82,42 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     // Messages
     onMessageReceived(eventChannel, message) {
       if (isDifferentChannel(channel, eventChannel)) return;
+      if (isMyMessage(message, sdk.currentUser.userId)) return;
+
       channelMarkAsRead();
-      updateNextMessages([message], false, sdk.currentUser.userId);
+
+      updateMessages([message], false, sdk.currentUser.userId);
+      if (options?.shouldCountNewMessages?.()) {
+        updateNewMessages([message], false, sdk.currentUser.userId);
+      }
+      if (options?.onMessagesReceived) {
+        options.onMessagesReceived([message]);
+      }
     },
     onMessageUpdated(eventChannel, message) {
       if (isDifferentChannel(channel, eventChannel)) return;
+      if (isMyMessage(message, sdk.currentUser.userId)) return;
+
       updateMessages([message], false, sdk.currentUser.userId);
     },
     onMessageDeleted(eventChannel, messageId) {
       if (isDifferentChannel(channel, eventChannel)) return;
       deleteMessages([messageId], []);
-      deleteNextMessages([messageId], []);
+      deleteNewMessages([messageId], []);
+    },
+    async onReactionUpdated(eventChannel, reactionEvent) {
+      if (isDifferentChannel(channel, eventChannel)) return;
+
+      const message = await sdk.message.getMessage({
+        messageId: reactionEvent.messageId,
+        includeReactions: true,
+        includeParentMessageInfo: true,
+        includeThreadInfo: true,
+        includeMetaArray: true,
+        channelUrl: channel.url,
+        channelType: channel.channelType,
+      });
+      updateMessages([message], false, sdk.currentUser.userId);
     },
     // Channels
     onChannelChanged: channelUpdater,
@@ -130,95 +155,90 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     updateLoading(true);
     await init(userId);
     updateLoading(false);
-  }, [init, userId]);
+  }, [channel.url, userId]);
 
-  const refresh: ReturnType<UseGroupChannelMessages>['refresh'] = useCallback(async () => {
+  const refresh: ReturnType<UseGroupChannelMessages>['refresh'] = useFreshCallback(async () => {
     updateRefreshing(true);
     await init(userId);
     updateRefreshing(false);
-  }, [init, userId]);
+  });
 
-  const prev: ReturnType<UseGroupChannelMessages>['prev'] = useCallback(async () => {
+  const prev: ReturnType<UseGroupChannelMessages>['prev'] = useFreshCallback(async () => {
     if (queryRef.current && queryRef.current?.hasNext) {
       const list = await queryRef.current?.load();
       updateMessages(list, false, sdk.currentUser.userId);
     }
-  }, []);
+  });
+  const hasPrev: ReturnType<UseGroupChannelMessages>['hasPrev'] = useFreshCallback(
+    () => queryRef.current?.hasNext ?? false,
+  );
 
-  const next: ReturnType<UseGroupChannelMessages>['next'] = useCallback(async () => {
-    if (nextMessages.length > 0) {
-      updateMessages(nextMessages, false, sdk.currentUser.userId);
-      updateNextMessages([], true, sdk.currentUser.userId);
-    }
-  }, [nextMessages.length]);
+  const next: ReturnType<UseGroupChannelMessages>['next'] = useFreshCallback(ASYNC_NOOP);
+  const hasNext: ReturnType<UseGroupChannelMessages>['hasNext'] = useFreshCallback(() => false);
 
-  const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
+  const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useFreshCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
         channel
           .sendUserMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isUserMessage()) {
-              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              updateMessages([pendingMessage], false, sdk.currentUser.userId);
               onPending?.(pendingMessage);
             }
           })
           .onSucceeded((sentMessage) => {
             if (sentMessage.isUserMessage()) {
-              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              updateMessages([sentMessage], false, sdk.currentUser.userId);
               resolve(sentMessage);
             }
           })
           .onFailed((err, sentMessage) => {
-            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            updateMessages([sentMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
     },
-    [channel],
   );
-  const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
+  const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useFreshCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
         channel
           .sendFileMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isFileMessage()) {
-              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              updateMessages([pendingMessage], false, sdk.currentUser.userId);
               onPending?.(pendingMessage);
             }
           })
           .onSucceeded((sentMessage) => {
             if (sentMessage.isFileMessage()) {
-              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              updateMessages([sentMessage], false, sdk.currentUser.userId);
               resolve(sentMessage);
             }
           })
           .onFailed((err, sentMessage) => {
-            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            updateMessages([sentMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
     },
-    [channel],
   );
-  const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useCallback(
+  const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useFreshCallback(
     async (messageId, params) => {
       const updatedMessage = await channel.updateUserMessage(messageId, params);
       updateMessages([updatedMessage], false, sdk.currentUser.userId);
       return updatedMessage;
     },
-    [channel],
   );
-  const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useCallback(
+  const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useFreshCallback(
     async (messageId, params) => {
       const updatedMessage = await channel.updateFileMessage(messageId, params);
       updateMessages([updatedMessage], false, sdk.currentUser.userId);
       return updatedMessage;
     },
-    [channel],
   );
-  const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useCallback(
+  const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useFreshCallback(
     async (failedMessage) => {
       const message = await (() => {
         if (failedMessage.isUserMessage()) return channel.resendUserMessage(failedMessage);
@@ -226,36 +246,43 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
         return null;
       })();
 
-      if (message) updateNextMessages([message], false, sdk.currentUser.userId);
+      if (message) updateMessages([message], false, sdk.currentUser.userId);
     },
-    [channel],
-  );
-  const deleteMessage: ReturnType<UseGroupChannelMessages>['deleteMessage'] = useCallback(
-    async (message) => {
-      if (message.sendingStatus === 'succeeded') {
-        if (message.isUserMessage()) await channel.deleteMessage(message);
-        if (message.isFileMessage()) await channel.deleteMessage(message);
-      } else {
-        deleteMessages([message.messageId], [message.reqId]);
-      }
-    },
-    [channel],
   );
+  const deleteMessage: ReturnType<UseGroupChannelMessages>['deleteMessage'] = useFreshCallback(async (message) => {
+    if (message.sendingStatus === 'succeeded') {
+      if (message.isUserMessage()) await channel.deleteMessage(message);
+      if (message.isFileMessage()) await channel.deleteMessage(message);
+    } else {
+      deleteMessages([message.messageId], [message.reqId]);
+    }
+  });
+  const resetNewMessages: ReturnType<UseGroupChannelMessages>['resetNewMessages'] = useFreshCallback(() => {
+    updateNewMessages([], true, sdk.currentUser.userId);
+  });
 
   return {
     loading,
     refreshing,
     refresh,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
+    newMessages,
+    resetNewMessages,
     next,
+    hasNext,
     prev,
+    hasPrev,
     sendUserMessage,
     sendFileMessage,
     updateUserMessage,
     updateFileMessage,
     resendMessage,
     deleteMessage,
+    resetWithStartingPoint() {
+      Logger.warn('resetWithStartingPoint is not supported in Query, please use Collection instead.');
+    },
+
+    nextMessages: newMessages,
+    newMessagesFromMembers: newMessages,
   };
 };

package/src/channel/useOpenChannelList/useOpenChannelListWithQuery.ts

@@ -53,10 +53,6 @@ export const useOpenChannelListWithQuery: UseOpenChannelList = (sdk, userId, opt
       onChannelFrozen: updateChannel,
       onChannelUnfrozen: updateChannel,
       onChannelDeleted: (url) => deleteChannels([url]),
-      onUserBanned(channel, user) {
-        const isMe = user.userId === userId;
-        if (isMe && channel.isOpenChannel()) deleteChannels([channel.url]);
-      },
       onUserEntered: (channel, user) => {
         const isMe = user.userId === userId;
         if (isMe && channel.isOpenChannel() && !openChannels.find((it) => it.url === channel.url)) {
@@ -79,7 +75,7 @@ export const useOpenChannelListWithQuery: UseOpenChannelList = (sdk, userId, opt
     } finally {
       updateLoading(false);
     }
-  }, [init, userId]);
+  }, [userId]);
 
   const refresh = useFreshCallback(async () => {
     updateRefreshing(true);

package/src/channel/useOpenChannelMessages/useOpenChannelMessagesWithQuery.ts

@@ -1,9 +1,16 @@
 import { useRef } from 'react';
 
-import type { SendbirdBaseChannel, SendbirdOpenChannel, SendbirdPreviousMessageListQuery } from '@sendbird/uikit-utils';
+import type {
+  SendbirdBaseChannel,
+  SendbirdBaseMessage,
+  SendbirdOpenChannel,
+  SendbirdPreviousMessageListQuery,
+} from '@sendbird/uikit-utils';
 import {
+  ASYNC_NOOP,
   NOOP,
   isDifferentChannel,
+  isMyMessage,
   useAsyncEffect,
   useForceUpdate,
   useFreshCallback,
@@ -11,8 +18,9 @@ import {
 } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../../handler/useChannelHandler';
+import { useConnectionHandler } from '../../handler/useConnectionHandler';
 import type { UseOpenChannelMessages, UseOpenChannelMessagesOptions } from '../../types';
-import { useOpenChannelMessagesReducer } from './reducer';
+import { useChannelMessagesReducer } from '../useChannelMessagesReducer';
 
 const createMessageQuery = (channel: SendbirdOpenChannel, creator?: UseOpenChannelMessagesOptions['queryCreator']) => {
   if (creator) return creator();
@@ -31,15 +39,14 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
     loading,
     refreshing,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
+    newMessages,
     updateMessages,
-    updateNextMessages,
-    deleteNextMessages,
+    updateNewMessages,
+    deleteNewMessages,
     deleteMessages,
     updateLoading,
     updateRefreshing,
-  } = useOpenChannelMessagesReducer(userId, options?.sortComparator);
+  } = useChannelMessagesReducer(options?.sortComparator);
 
   const init = useFreshCallback(async (uid?: string) => {
     if (uid) {
@@ -49,7 +56,7 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
 
         updateMessages(list, true, sdk.currentUser.userId);
       }
-      updateNextMessages([], true, sdk.currentUser.userId);
+      updateNewMessages([], true, sdk.currentUser.userId);
     }
   });
 
@@ -59,6 +66,99 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
     }
   };
 
+  useConnectionHandler(sdk, handlerId, {
+    async onReconnectSucceeded() {
+      const lastMessage = messages[0];
+      if (!lastMessage) return;
+
+      const messageContext = {
+        updatedMessages: [] as SendbirdBaseMessage[],
+        addedMessages: [] as SendbirdBaseMessage[],
+        deletedMessageIds: [] as number[],
+      };
+      const changeLogsContext = {
+        hasMore: false,
+        token: '',
+      };
+      const messageQueryContext = {
+        hasMore: false,
+        timestamp: lastMessage.createdAt,
+      };
+
+      // Updated & Deleted messages
+      const changelogsParams = {
+        replyType: queryRef.current?.replyType,
+        includeMetaArray: queryRef.current?.includeMetaArray,
+        includeReactions: queryRef.current?.includeReactions,
+        includeThreadInfo: queryRef.current?.includeThreadInfo,
+        includeParentMessageInfo: queryRef.current?.includeParentMessageInfo,
+      };
+
+      const changeLogsByTS = await channel.getMessageChangeLogsSinceTimestamp(lastMessage.createdAt);
+      changeLogsContext.token = changeLogsByTS.token;
+      changeLogsContext.hasMore = changeLogsByTS.hasMore;
+      messageContext.updatedMessages.push(...changeLogsByTS.updatedMessages);
+      messageContext.deletedMessageIds.push(...changeLogsByTS.deletedMessageIds);
+
+      while (changeLogsContext.hasMore) {
+        const changeLogsByToken = await channel.getMessageChangeLogsSinceToken(changeLogsByTS.token, changelogsParams);
+        changeLogsContext.token = changeLogsByToken.token;
+        changeLogsContext.hasMore = changeLogsByToken.hasMore;
+        messageContext.updatedMessages.push(...changeLogsByToken.updatedMessages);
+        messageContext.deletedMessageIds.push(...changeLogsByToken.deletedMessageIds);
+      }
+
+      // Added messages
+      const messageQueryParams = {
+        prevResultSize: 0,
+        nextResultSize: queryRef.current?.limit ?? 100,
+        reverse: queryRef.current?.reverse,
+        includeParentMessageInfo: queryRef.current?.includeParentMessageInfo,
+        includeThreadInfo: queryRef.current?.includeThreadInfo,
+        includeReactions: queryRef.current?.includeReactions,
+        includeMetaArray: queryRef.current?.includeMetaArray,
+        replyType: queryRef.current?.replyType,
+        customTypesFilter: queryRef.current?.customTypesFilter,
+        messageTypeFilter: queryRef.current?.messageTypeFilter,
+        senderUserIdsFilter: queryRef.current?.senderUserIdsFilter,
+        showSubchannelMessagesOnly: queryRef.current?.showSubchannelMessagesOnly,
+      };
+
+      const queriedMessages = await channel.getMessagesByTimestamp(lastMessage.createdAt, messageQueryParams);
+      messageQueryContext.hasMore = queriedMessages.length > 0;
+      if (messageQueryContext.hasMore) {
+        messageQueryContext.timestamp = queriedMessages[0].createdAt;
+        messageContext.addedMessages.unshift(...queriedMessages);
+      }
+
+      while (messageQueryContext.hasMore) {
+        const queriedMessages = await channel.getMessagesByTimestamp(messageQueryContext.timestamp, messageQueryParams);
+        messageQueryContext.hasMore = queriedMessages.length > 0;
+        if (messageQueryContext.hasMore) {
+          messageQueryContext.timestamp = queriedMessages[0].createdAt;
+          messageContext.addedMessages.unshift(...queriedMessages);
+        }
+      }
+
+      // Update to View
+      updateMessages(
+        [...messageContext.addedMessages, ...messageContext.updatedMessages],
+        false,
+        sdk.currentUser.userId,
+      );
+      deleteMessages(messageContext.deletedMessageIds, []);
+
+      if (messageContext.addedMessages.length > 0) {
+        if (options?.shouldCountNewMessages?.()) {
+          updateNewMessages(messageContext.addedMessages, false, sdk.currentUser.userId);
+        }
+        if (options?.onMessagesReceived) {
+          options.onMessagesReceived(messageContext.addedMessages);
+        }
+      }
+    },
+  });
+
   useChannelHandler(
     sdk,
     handlerId,
@@ -66,16 +166,26 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
       // Messages
       onMessageReceived(eventChannel, message) {
         if (isDifferentChannel(channel, eventChannel)) return;
-        updateNextMessages([message], false, sdk.currentUser.userId);
+        if (isMyMessage(message, sdk.currentUser.userId)) return;
+
+        updateMessages([message], false, sdk.currentUser.userId);
+        if (options?.shouldCountNewMessages?.()) {
+          updateNewMessages([message], false, sdk.currentUser.userId);
+        }
+        if (options?.onMessagesReceived) {
+          options.onMessagesReceived([message]);
+        }
       },
       onMessageUpdated(eventChannel, message) {
         if (isDifferentChannel(channel, eventChannel)) return;
+        if (isMyMessage(message, sdk.currentUser.userId)) return;
+
         updateMessages([message], false, sdk.currentUser.userId);
       },
       onMessageDeleted(eventChannel, messageId) {
         if (isDifferentChannel(channel, eventChannel)) return;
         deleteMessages([messageId], []);
-        deleteNextMessages([messageId], []);
+        deleteNewMessages([messageId], []);
       },
       // Channels
       onChannelChanged: channelUpdater,
@@ -124,7 +234,7 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
     return () => {
       channel.exit().catch(NOOP);
     };
-  }, [init, userId]);
+  }, [channel.url, userId]);
 
   const refresh: ReturnType<UseOpenChannelMessages>['refresh'] = useFreshCallback(async () => {
     updateRefreshing(true);
@@ -138,13 +248,12 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
       updateMessages(list, false, sdk.currentUser.userId);
     }
   });
+  const hasPrev: ReturnType<UseOpenChannelMessages>['hasPrev'] = useFreshCallback(
+    () => queryRef.current?.hasNext ?? false,
+  );
 
-  const next: ReturnType<UseOpenChannelMessages>['next'] = useFreshCallback(async () => {
-    if (nextMessages.length > 0) {
-      updateMessages(nextMessages, false, sdk.currentUser.userId);
-      updateNextMessages([], true, sdk.currentUser.userId);
-    }
-  });
+  const next: ReturnType<UseOpenChannelMessages>['next'] = useFreshCallback(ASYNC_NOOP);
+  const hasNext: ReturnType<UseOpenChannelMessages>['hasNext'] = useFreshCallback(() => false);
 
   const sendUserMessage: ReturnType<UseOpenChannelMessages>['sendUserMessage'] = useFreshCallback(
     (params, onPending) => {
@@ -153,18 +262,18 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
           .sendUserMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isUserMessage()) {
-              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              updateMessages([pendingMessage], false, sdk.currentUser.userId);
               onPending?.(pendingMessage);
             }
           })
           .onSucceeded((sentMessage) => {
             if (sentMessage.isUserMessage()) {
-              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              updateMessages([sentMessage], false, sdk.currentUser.userId);
               resolve(sentMessage);
             }
           })
           .onFailed((err, sentMessage) => {
-            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            updateMessages([sentMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
@@ -178,18 +287,18 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
           .sendFileMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isFileMessage()) {
-              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              updateMessages([pendingMessage], false, sdk.currentUser.userId);
               onPending?.(pendingMessage);
             }
           })
           .onSucceeded((sentMessage) => {
             if (sentMessage.isFileMessage()) {
-              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              updateMessages([sentMessage], false, sdk.currentUser.userId);
               resolve(sentMessage);
             }
           })
           .onFailed((err, sentMessage) => {
-            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            updateMessages([sentMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
@@ -217,7 +326,7 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
       return null;
     })();
 
-    if (message) updateNextMessages([message], false, sdk.currentUser.userId);
+    if (message) updateMessages([message], false, sdk.currentUser.userId);
   });
   const deleteMessage: ReturnType<UseOpenChannelMessages>['deleteMessage'] = useFreshCallback(async (message) => {
     if (message.sendingStatus === 'succeeded') {
@@ -227,21 +336,29 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
       deleteMessages([message.messageId], [message.reqId]);
     }
   });
+  const resetNewMessages: ReturnType<UseOpenChannelMessages>['resetNewMessages'] = useFreshCallback(() => {
+    updateNewMessages([], true, sdk.currentUser.userId);
+  });
 
   return {
     loading,
     refreshing,
     refresh,
     messages,
-    nextMessages,
-    newMessagesFromMembers,
+    newMessages,
     next,
+    hasNext,
     prev,
+    hasPrev,
     sendUserMessage,
     sendFileMessage,
     updateUserMessage,
     updateFileMessage,
     resendMessage,
     deleteMessage,
+    resetNewMessages,
+
+    nextMessages: newMessages,
+    newMessagesFromMembers: newMessages,
   };
 };

package/src/common/useUserList.ts

@@ -36,7 +36,7 @@ const createUserQuery = <User extends UserStruct>(
  * ```
  * */
 export const useUserList = <
-  Options extends UseUserListOptions<QueriedUser>,
+  Options extends UseUserListOptions<UserStruct>,
   QueriedUser extends UserStruct = Options['queryCreator'] extends Optional<
     () => CustomQueryInterface<infer User extends UserStruct>
   >
@@ -44,7 +44,7 @@ export const useUserList = <
     : SendbirdUser,
 >(
   sdk: SendbirdChatSDK,
-  options?: Options,
+  options?: UseUserListOptions<QueriedUser>,
 ): UseUserListReturn<QueriedUser> => {
   const query = useRef<CustomQueryInterface<QueriedUser>>();
 
@@ -85,7 +85,7 @@ export const useUserList = <
     if (query.current?.hasNext) {
       const users = await query.current?.next().catch((e) => {
         Logger.error(e);
-        if (e.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
+        if (e.code === SBErrorCode.UNAUTHORIZED_REQUEST) Logger.warn(SBErrorMessage.ACL);
         throw e;
       });
       updateUsers(users, true);
@@ -122,7 +122,7 @@ export const useUserList = <
     if (query.current && query.current?.hasNext) {
       const nextUsers = await query.current.next().catch((e) => {
         Logger.error(e);
-        if (e.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
+        if (e.code === SBErrorCode.UNAUTHORIZED_REQUEST) Logger.warn(SBErrorMessage.ACL);
         throw e;
       });
       updateUsers(nextUsers, false);