@sendbird/uikit-react-native 2.4.2 → 2.5.0-rc.0

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,20 +1,38 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing } from 'react-native';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, SendbirdGroupChannel, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+import {
+  NOOP,
+  PASS,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdUserMessage,
+  messageComparator,
+  useFreshCallback,
+  useRefTracker,
+} from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
 import ScrollToBottomButton from '../components/ScrollToBottomButton';
 import StatusComposition from '../components/StatusComposition';
+import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../constants';
 import createGroupChannelModule from '../domain/groupChannel/module/createGroupChannelModule';
-import type { GroupChannelFragment, GroupChannelModule, GroupChannelProps } from '../domain/groupChannel/types';
+import type {
+  GroupChannelFragment,
+  GroupChannelModule,
+  GroupChannelProps,
+  GroupChannelPubSubContextPayload,
+} from '../domain/groupChannel/types';
 import { useSendbirdChat } from '../hooks/useContext';
+import pubsub from '../utils/pubsub';
 
 const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {
   const GroupChannelModule = createGroupChannelModule(initModule);
 
   return ({
+    searchItem,
     renderNewMessagesButton = (props) => <NewMessagesButton {...props} />,
     renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,
     renderMessage,
@@ -38,30 +56,48 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
   }) => {
     const { sdk, currentUser } = useSendbirdChat();
 
+    const [internalSearchItem, setInternalSearchItem] = useState(searchItem);
+    const navigateFromMessageSearch = useCallback(() => Boolean(searchItem), []);
+
+    const [groupChannelPubSub] = useState(() => pubsub<GroupChannelPubSubContextPayload>());
+    const [scrolledAwayFromBottom, setScrolledAwayFromBottom] = useState(false);
+    const scrolledAwayFromBottomRef = useRefTracker(scrolledAwayFromBottom);
+
     const {
+      loading,
       messages,
-      nextMessages,
-      newMessagesFromMembers,
+      newMessages,
+      resetNewMessages,
       next,
       prev,
+      hasNext,
       sendFileMessage,
       sendUserMessage,
       updateFileMessage,
       updateUserMessage,
       resendMessage,
       deleteMessage,
-      loading,
+      resetWithStartingPoint,
     } = useGroupChannelMessages(sdk, channel, currentUser?.userId, {
       collectionCreator,
       queryCreator,
       sortComparator,
       onChannelDeleted,
       enableCollectionWithoutLocalCache: !queryCreator,
+      shouldCountNewMessages: () => scrolledAwayFromBottomRef.current,
+      onMessagesReceived(messages) {
+        groupChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });
+      },
+      startingPoint: internalSearchItem?.startingPoint,
     });
 
+    const MessageComponent: GroupChannelProps['MessageList']['renderMessage'] = useCallback(
+      withFocusingAnimation(renderMessage ? (props) => <>{renderMessage(props)}</> : MessageRenderer),
+      [renderMessage],
+    );
+
     const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
-      if (renderMessage) return renderMessage(props);
-      return <MessageRenderer {...props} />;
+      return <MessageComponent {...props} />;
     });
 
     const memoizedFlatListProps = useMemo(
@@ -70,19 +106,34 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         contentContainerStyle: { flexGrow: 1 },
         ...flatListProps,
       }),
-      [loading, flatListProps],
+      [flatListProps],
     );
 
+    const onResetMessageList = useCallback((callback?: () => void) => {
+      resetWithStartingPoint(Number.MAX_SAFE_INTEGER, callback);
+      setInternalSearchItem(undefined);
+    }, []);
+
+    const onPending = (message: SendbirdFileMessage | SendbirdUserMessage) => {
+      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_PENDING', data: { message } });
+    };
+
+    const onSent = (message: SendbirdFileMessage | SendbirdUserMessage) => {
+      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_SUCCESS', data: { message } });
+    };
+
     const onPressSendUserMessage: GroupChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendUserMessage(params);
-        await sendUserMessage(processedParams);
+        const message = await sendUserMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendFileMessage(params);
-        await sendFileMessage(processedParams);
+        const message = await sendFileMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     const onPressUpdateUserMessage: GroupChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(
@@ -97,11 +148,16 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
         await updateFileMessage(message.messageId, processedParams);
       },
     );
+    const onScrolledAwayFromBottom = useFreshCallback((value: boolean) => {
+      if (!value) resetNewMessages();
+      setScrolledAwayFromBottom(value);
+    });
 
     /** @deprecated **/
     const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useFreshCallback(async (file) => {
       const processedParams = await onBeforeSendFileMessage({ file });
-      await sendFileMessage(processedParams);
+      const message = await sendFileMessage(processedParams, onPending);
+      onSent(message);
     });
     /** @deprecated **/
     const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(
@@ -112,7 +168,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
           mentionedMessageTemplate: mention?.messageTemplate,
           mentionType: mention?.type,
         });
-        await sendUserMessage(processedParams);
+        const message = await sendUserMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     /** @deprecated **/
@@ -138,28 +195,39 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     return (
       <GroupChannelModule.Provider
         channel={channel}
+        groupChannelPubSub={groupChannelPubSub}
         enableTypingIndicator={enableTypingIndicator}
         keyboardAvoidOffset={keyboardAvoidOffset}
       >
-        <GroupChannelModule.Header onPressHeaderLeft={onPressHeaderLeft} onPressHeaderRight={onPressHeaderRight} />
+        <GroupChannelModule.Header
+          shouldHideRight={navigateFromMessageSearch}
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={onPressHeaderRight}
+        />
         <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>
           <GroupChannelModule.MessageList
             channel={channel}
+            searchItem={internalSearchItem}
+            onResetMessageList={onResetMessageList}
             enableMessageGrouping={enableMessageGrouping}
             currentUserId={currentUser?.userId}
             renderMessage={_renderMessage}
             messages={messages}
-            nextMessages={nextMessages}
-            newMessagesFromMembers={newMessagesFromMembers}
+            newMessages={newMessages}
             onTopReached={prev}
             onBottomReached={next}
+            hasNext={hasNext}
+            scrolledAwayFromBottom={scrolledAwayFromBottom}
+            onScrolledAwayFromBottom={onScrolledAwayFromBottom}
             renderNewMessagesButton={renderNewMessagesButton}
             renderScrollToBottomButton={renderScrollToBottomButton}
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
-            onPressImageMessage={onPressImageMessage}
             onPressMediaMessage={onPressMediaMessage}
             flatListProps={memoizedFlatListProps}
+            nextMessages={newMessages}
+            newMessagesFromMembers={newMessages}
+            onPressImageMessage={onPressImageMessage}
           />
           <GroupChannelModule.Input
             SuggestedMentionList={GroupChannelModule.SuggestedMentionList}
@@ -187,4 +255,33 @@ function shouldRenderInput(channel: SendbirdGroupChannel) {
   return true;
 }
 
+function withFocusingAnimation<P extends unknown & { focused: boolean }>(Component: React.ComponentType<P>) {
+  return React.memo<P>((props) => {
+    const translateY = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+      if (props.focused) {
+        setTimeout(() => {
+          Animated.sequence(
+            [
+              { toValue: -10, duration: 500 },
+              { toValue: 0, duration: 100 },
+              { toValue: -10, duration: 200 },
+              { toValue: 0, duration: 100 },
+            ].map((value) =>
+              Animated.timing(translateY, { ...value, useNativeDriver: true, easing: Easing.inOut(Easing.ease) }),
+            ),
+          ).start();
+        }, MESSAGE_SEARCH_SAFE_SCROLL_DELAY + MESSAGE_FOCUS_ANIMATION_DELAY);
+      }
+    }, [props.focused]);
+
+    return (
+      <Animated.View style={{ transform: [{ translateY }] }}>
+        <Component {...props} />
+      </Animated.View>
+    );
+  });
+}
+
 export default createGroupChannelFragment;

package/src/fragments/createGroupChannelSettingsFragment.tsx

@@ -18,6 +18,7 @@ const createGroupChannelSettingsFragment = (
     channel,
     onPressMenuModeration,
     onPressMenuMembers,
+    onPressMenuSearchInChannel,
     onPressMenuLeaveChannel,
     onPressMenuNotification,
     menuItemsCreator,
@@ -40,6 +41,7 @@ const createGroupChannelSettingsFragment = (
             menuItemsCreator={menuItemsCreator}
             onPressMenuModeration={onPressMenuModeration}
             onPressMenuMembers={onPressMenuMembers}
+            onPressMenuSearchInChannel={onPressMenuSearchInChannel}
             onPressMenuLeaveChannel={onPressMenuLeaveChannel}
             onPressMenuNotification={onPressMenuNotification}
           />

package/src/fragments/createMessageSearchFragment.tsx

@@ -0,0 +1,159 @@
+import React, { useRef, useState } from 'react';
+
+import { MessageSearchOrder } from '@sendbird/chat/message';
+import {
+  Logger,
+  NOOP,
+  SendbirdBaseMessage,
+  SendbirdChatSDK,
+  SendbirdGroupChannel,
+  SendbirdMessageSearchQuery,
+  useFreshCallback,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
+
+import { MessageSearchResultItem } from '../components/MessageSearchResultItem';
+import StatusComposition from '../components/StatusComposition';
+import { createMessageSearchModule } from '../domain/messageSearch';
+import type { MessageSearchFragment, MessageSearchModule, MessageSearchProps } from '../domain/messageSearch/types';
+import { useSendbirdChat } from '../hooks/useContext';
+
+type DefaultMessageSearchQueryParams = {
+  keyword: string;
+  channelUrl: string;
+  messageTimestampFrom: number;
+  order: MessageSearchOrder;
+};
+
+type SearchQueryOptions = DefaultMessageSearchQueryParams & {
+  queryCreator?: (params: DefaultMessageSearchQueryParams) => SendbirdMessageSearchQuery;
+};
+
+function getMessageSearchQuery(sdk: SendbirdChatSDK, options: SearchQueryOptions) {
+  if (options.queryCreator) return options.queryCreator(options);
+  return sdk.createMessageSearchQuery(options);
+}
+
+const createMessageSearchFragment = (initModule?: Partial<MessageSearchModule>): MessageSearchFragment => {
+  const MessageSearchModule = createMessageSearchModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, queryCreator, renderSearchResultItem, onPressSearchResultItem }) => {
+    const padding = useSafeAreaPadding(['left', 'right', 'bottom']);
+
+    const { sdk } = useSendbirdChat();
+    const { keyword, setKeyword, search, searchResults, loading, next, error, query } = useMessageSearch(sdk, {
+      channel,
+      queryCreator,
+    });
+
+    const renderItem: MessageSearchProps['List']['renderSearchResultItem'] = useFreshCallback((props) => {
+      if (renderSearchResultItem) return renderSearchResultItem(props);
+      return <MessageSearchResultItem {...props} />;
+    });
+
+    return (
+      <MessageSearchModule.Provider>
+        <MessageSearchModule.Header
+          keyword={keyword}
+          onChangeKeyword={setKeyword}
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={search}
+        />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<MessageSearchModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<MessageSearchModule.StatusError onPressRetry={search} />}
+        >
+          {query && (
+            <MessageSearchModule.List
+              channel={channel}
+              onPressSearchResultItem={onPressSearchResultItem}
+              messages={searchResults}
+              renderSearchResultItem={renderItem}
+              flatListProps={{
+                keyboardDismissMode: 'on-drag',
+                keyboardShouldPersistTaps: 'handled',
+                onEndReached: next,
+                ListEmptyComponent: MessageSearchModule.StatusEmpty,
+                contentContainerStyle: { flexGrow: 1, ...padding },
+              }}
+            />
+          )}
+        </StatusComposition>
+      </MessageSearchModule.Provider>
+    );
+  };
+};
+
+const useMessageSearch = (
+  sdk: SendbirdChatSDK,
+  { channel, queryCreator }: { channel: SendbirdGroupChannel; queryCreator: SearchQueryOptions['queryCreator'] },
+) => {
+  const [query, setQuery] = useState<SendbirdMessageSearchQuery>();
+  const [keyword, setKeyword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const [searchResults, setSearchResults] = useState<SendbirdBaseMessage[]>([]);
+  const queryInProgress = useRef(false);
+
+  const search = useFreshCallback(async () => {
+    if (keyword.length <= 0) return;
+    if (queryInProgress.current) return;
+
+    const query = getMessageSearchQuery(sdk, {
+      keyword,
+      channelUrl: channel.url,
+      messageTimestampFrom: Math.max(channel.joinedAt, channel.invitedAt),
+      order: MessageSearchOrder.TIMESTAMP,
+      queryCreator,
+    });
+
+    setQuery(query);
+    setLoading(true);
+    setError(null);
+
+    try {
+      queryInProgress.current = true;
+      const result = await query.next();
+      setSearchResults(result);
+    } catch (err) {
+      Logger.warn('[MessageSearchFragment] search failure', err);
+      setError(err);
+    } finally {
+      queryInProgress.current = false;
+      setLoading(false);
+    }
+  });
+
+  const next = useFreshCallback(async () => {
+    if (!query?.hasNext) return;
+    if (queryInProgress.current) return;
+
+    try {
+      queryInProgress.current = true;
+      const result = await query.next();
+      setSearchResults((prev) => [...prev, ...result]);
+    } catch (err) {
+      Logger.warn('[MessageSearchFragment] next failure', err);
+      setError(err);
+    } finally {
+      queryInProgress.current = false;
+    }
+  });
+
+  return {
+    keyword,
+    setKeyword,
+
+    query,
+    loading,
+    error,
+    searchResults,
+
+    search,
+    next,
+  };
+};
+
+export default createMessageSearchFragment;

package/src/fragments/createOpenChannelFragment.tsx

@@ -1,17 +1,31 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { SendbirdError } from '@sendbird/chat';
 import { useOpenChannelMessages } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, PASS, SBErrorCode, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+import {
+  NOOP,
+  PASS,
+  SBErrorCode,
+  SendbirdFileMessage,
+  SendbirdUserMessage,
+  messageComparator,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
 
 import OpenChannelMessageRenderer from '../components/OpenChannelMessageRenderer';
 import ScrollToBottomButton from '../components/ScrollToBottomButton';
 import StatusComposition from '../components/StatusComposition';
 import { UNKNOWN_USER_ID } from '../constants';
 import { createOpenChannelModule } from '../domain/openChannel';
-import type { OpenChannelFragment, OpenChannelModule, OpenChannelProps } from '../domain/openChannel/types';
+import type {
+  OpenChannelFragment,
+  OpenChannelModule,
+  OpenChannelProps,
+  OpenChannelPubSubContextPayload,
+} from '../domain/openChannel/types';
 import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
+import pubsub from '../utils/pubsub';
 
 const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): OpenChannelFragment => {
   const OpenChannelModule = createOpenChannelModule(initModule);
@@ -40,16 +54,19 @@ const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): Ope
     sortComparator = messageComparator,
   }) => {
     const { sdk, currentUser } = useSendbirdChat();
+
     const { STRINGS } = useLocalization();
     const { show: showToast } = useToast();
     const { show: showUserProfile } = useUserProfile();
 
+    const [openChannelPubSub] = useState(() => pubsub<OpenChannelPubSubContextPayload>());
+
     const {
       messages,
-      nextMessages,
-      newMessagesFromMembers,
+      newMessages,
       next,
       prev,
+      hasNext,
       sendFileMessage,
       sendUserMessage,
       updateFileMessage,
@@ -64,8 +81,9 @@ const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): Ope
       onError(error) {
         if (error instanceof SendbirdError) {
           switch (error.code) {
-            case SBErrorCode.CHANNEL_NOT_FOUND_SDK:
-            case SBErrorCode.CHANNEL_NOT_FOUND_SERVER: {
+            case SBErrorCode.RESOURCE_NOT_FOUND:
+            case SBErrorCode.CHANNEL_NOT_FOUND:
+            case SBErrorCode.BANNED_USER_SEND_MESSAGE_NOT_ALLOWED: {
               return showToast(STRINGS.TOAST.GET_CHANNEL_ERROR, 'error');
             }
           }
@@ -73,6 +91,9 @@ const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): Ope
 
         showToast(STRINGS.TOAST.UNKNOWN_ERROR, 'error');
       },
+      onMessagesReceived(messages) {
+        openChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });
+      },
     });
 
     const isOperator = channel.isOperator(currentUser?.userId ?? UNKNOWN_USER_ID);
@@ -91,16 +112,25 @@ const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): Ope
       [loading, flatListProps],
     );
 
+    const onPending = (message: SendbirdFileMessage | SendbirdUserMessage) => {
+      openChannelPubSub.publish({ type: 'MESSAGE_SENT_PENDING', data: { message } });
+    };
+    const onSent = (message: SendbirdFileMessage | SendbirdUserMessage) => {
+      openChannelPubSub.publish({ type: 'MESSAGE_SENT_SUCCESS', data: { message } });
+    };
+
     const onPressSendUserMessage: OpenChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendUserMessage(params);
-        await sendUserMessage(processedParams);
+        const message = await sendUserMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     const onPressSendFileMessage: OpenChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
       async (params) => {
         const processedParams = await onBeforeSendFileMessage(params);
-        await sendFileMessage(processedParams);
+        const message = await sendFileMessage(processedParams, onPending);
+        onSent(message);
       },
     );
     const onPressUpdateUserMessage: OpenChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(
@@ -117,7 +147,11 @@ const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): Ope
     );
 
     return (
-      <OpenChannelModule.Provider channel={channel} keyboardAvoidOffset={keyboardAvoidOffset}>
+      <OpenChannelModule.Provider
+        openChannelPubSub={openChannelPubSub}
+        channel={channel}
+        keyboardAvoidOffset={keyboardAvoidOffset}
+      >
         <OpenChannelModule.Header
           onPressHeaderLeft={onPressHeaderLeft}
           rightIconName={isOperator ? 'info' : 'members'}
@@ -126,14 +160,16 @@ const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): Ope
         <StatusComposition loading={loading} LoadingComponent={<OpenChannelModule.StatusLoading />}>
           <OpenChannelModule.MessageList
             channel={channel}
+            hasNext={hasNext}
             enableMessageGrouping={enableMessageGrouping}
             currentUserId={currentUser?.userId}
             renderMessage={_renderMessage}
             messages={messages}
-            nextMessages={nextMessages}
-            newMessagesFromMembers={newMessagesFromMembers}
+            newMessages={newMessages}
             onTopReached={prev}
             onBottomReached={next}
+            scrolledAwayFromBottom={false}
+            onScrolledAwayFromBottom={NOOP}
             renderNewMessagesButton={renderNewMessagesButton}
             renderScrollToBottomButton={renderScrollToBottomButton}
             onResendFailedMessage={resendMessage}

package/src/hooks/useMentionSuggestion.ts

@@ -1,7 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 
-import type { SendbirdGroupChannel, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
-import { useAsyncEffect, useDebounceEffect } from '@sendbird/uikit-utils';
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useAsyncEffect, useDebounceEffect, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../hooks/useContext';
 import type { Range } from '../types';
@@ -9,8 +10,9 @@ import type { Range } from '../types';
 const useMentionSuggestion = (params: {
   text: string;
   selection: Range;
-  channel: SendbirdGroupChannel;
   mentionedUsers: { user: SendbirdUser; range: Range }[];
+  sdk: SendbirdChatSDK;
+  channel: SendbirdGroupChannel;
 }) => {
   const { text, selection, channel, mentionedUsers } = params;
 
@@ -20,6 +22,24 @@ const useMentionSuggestion = (params: {
     setFreshChannel(await channel.refresh());
   }, [channel.url]);
 
+  const id = useUniqHandlerId('useMentionSuggestion');
+
+  useChannelHandler(params.sdk, id, {
+    onUserJoined(eventChannel) {
+      if (isDifferentChannel(eventChannel, channel)) return;
+      setFreshChannel(eventChannel);
+    },
+    onUserLeft(eventChannel) {
+      if (isDifferentChannel(eventChannel, channel)) return;
+      setFreshChannel(eventChannel);
+    },
+    onUserBanned(eventChannel) {
+      if (isDifferentChannel(eventChannel, channel)) return;
+      if (!eventChannel.isGroupChannel()) return;
+      setFreshChannel(eventChannel);
+    },
+  });
+
   const { mentionManager, currentUser } = useSendbirdChat();
   const [members, setMembers] = useState<SendbirdMember[]>([]);
 

package/src/index.ts

@@ -32,6 +32,7 @@ export { default as createGroupChannelRegisterOperatorFragment } from './fragmen
 export { default as createGroupChannelMutedMembersFragment } from './fragments/createGroupChannelMutedMembersFragment';
 export { default as createGroupChannelBannedUsersFragment } from './fragments/createGroupChannelBannedUsersFragment';
 export { default as createGroupChannelNotificationsFragment } from './fragments/createGroupChannelNotificationsFragment';
+export { default as createMessageSearchFragment } from './fragments/createMessageSearchFragment';
 
 /** Fragments - open channels **/
 export { default as createOpenChannelFragment } from './fragments/createOpenChannelFragment';
@@ -91,6 +92,8 @@ export * from './domain/groupChannelNotifications/types';
 
 export * from './domain/groupChannelUserList/types';
 
+export * from './domain/messageSearch/types';
+
 /** Feature - open channels **/
 export * from './domain/openChannel';
 export * from './domain/openChannel/types';