feat: add general purpose search components (#2588)

Author: MartinCupela

eslint.config.mjs

@@ -48,7 +48,10 @@ export default tseslint.config(
       'no-console': 'off',
       'no-mixed-spaces-and-tabs': 'warn',
       'no-self-compare': 'error',
-      'no-underscore-dangle': ['error', { allowAfterThis: true }],
+      'no-underscore-dangle': [
+        'error',
+        { allow: ['_internalState'], allowAfterThis: true },
+      ],
       'no-use-before-define': 'off',
       'no-useless-concat': 'error',
       'no-var': 'error',

examples/vite/src/App.tsx

@@ -6,18 +6,19 @@ import {
   ChannelHeader,
   ChannelList,
   Chat,
+  ChatView,
   MessageInput,
-  VirtualizedMessageList as MessageList,
+  StreamMessage,
   Thread,
-  Window,
-  useCreateChatClient,
   ThreadList,
-  ChatView,
+  useCreateChatClient,
+  VirtualizedMessageList as MessageList,
+  Window,
 } from 'stream-chat-react';
 
-const params = (new Proxy(new URLSearchParams(window.location.search), {
+const params = new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
-}) as unknown) as Record<string, string | null>;
+}) as unknown as Record<string, string | null>;
 
 const parseUserIdFromToken = (token: string) => {
   const [, payload] = token.split('.');
@@ -63,6 +64,9 @@ type StreamChatGenerics = {
   userType: LocalUserType;
 };
 
+const isMessageAIGenerated = (message: StreamMessage<StreamChatGenerics>) =>
+  !!message?.ai_generated;
+
 const App = () => {
   const chatClient = useCreateChatClient<StreamChatGenerics>({
     apiKey,
@@ -73,7 +77,7 @@ const App = () => {
   if (!chatClient) return <>Loading...</>;
 
   return (
-    <Chat client={chatClient} isMessageAIGenerated={(message) => !!message?.ai_generated}>
+    <Chat client={chatClient} isMessageAIGenerated={isMessageAIGenerated}>
       <ChatView>
         <ChatView.Selector />
         <ChatView.Channels>

package.json

@@ -145,7 +145,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.8.0",
-    "stream-chat": "^8.50.0"
+    "stream-chat": "^8.55.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -187,7 +187,6 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
     "@stream-io/stream-chat-css": "^5.7.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -242,7 +241,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.50.0",
+    "stream-chat": "^8.55.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0"

src/components/Channel/Channel.tsx

@@ -13,23 +13,6 @@ import React, {
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
 import throttle from 'lodash.throttle';
-import {
-  APIErrorResponse,
-  ChannelAPIResponse,
-  ChannelMemberResponse,
-  ChannelQueryOptions,
-  ChannelState,
-  ErrorFromResponse,
-  Event,
-  EventAPIResponse,
-  Message,
-  MessageResponse,
-  SendMessageAPIResponse,
-  Channel as StreamChannel,
-  StreamChat,
-  UpdatedMessage,
-  UserResponse,
-} from 'stream-chat';
 import { nanoid } from 'nanoid';
 import clsx from 'clsx';
 
@@ -62,6 +45,7 @@ import {
   WithComponents,
 } from '../../context';
 
+import { CHANNEL_CONTAINER_ID } from './constants';
 import {
   DEFAULT_HIGHLIGHT_DURATION,
   DEFAULT_INITIAL_CHANNEL_PAGE_SIZE,
@@ -77,10 +61,27 @@ import {
   useImageFlagEmojisOnWindowsClass,
 } from './hooks/useChannelContainerClasses';
 import { findInMsgSetByDate, findInMsgSetById, makeAddNotifications } from './utils';
+import { useThreadContext } from '../Threads';
 import { getChannel } from '../../utils';
 
+import type {
+  APIErrorResponse,
+  ChannelAPIResponse,
+  ChannelMemberResponse,
+  ChannelQueryOptions,
+  ChannelState,
+  ErrorFromResponse,
+  Event,
+  EventAPIResponse,
+  Message,
+  MessageResponse,
+  SendMessageAPIResponse,
+  Channel as StreamChannel,
+  StreamChat,
+  UpdatedMessage,
+  UserResponse,
+} from 'stream-chat';
 import type { MessageInputProps } from '../MessageInput';
-
 import type {
   ChannelUnreadUiState,
   CustomTrigger,
@@ -96,8 +97,7 @@ import {
   getVideoAttachmentConfiguration,
 } from '../Attachment/attachment-sizing';
 import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
-import { useThreadContext } from '../Threads';
-import { CHANNEL_CONTAINER_ID } from './constants';
+import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
 
 type ChannelPropsForwardedToComponentContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -360,7 +360,7 @@ const ChannelInner = <
     [propChannelQueryOptions],
   );
 
-  const { client, customClasses, latestMessageDatesByChannels, mutes } =
+  const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } =
     useChatContext<StreamChatGenerics>('Channel');
   const { t } = useTranslationContext('Channel');
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
@@ -387,13 +387,17 @@ const ChannelInner = <
       loading: !channel.initialized,
     },
   );
-
+  const jumpToMessageFromSearch = useSearchFocusedMessage();
   const isMounted = useIsMounted();
 
   const originalTitle = useRef('');
   const lastRead = useRef<Date | undefined>(undefined);
   const online = useRef(true);
 
+  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
   const channelCapabilitiesArray = channel.data?.own_capabilities as string[];
 
   const throttledCopyStateFromChannel = throttle(
@@ -647,6 +651,38 @@ const ChannelInner = <
     if (message) dispatch({ message, type: 'setThread' });
   }, [state.messages, state.thread]);
 
+  const handleHighlightedMessageChange = useCallback(
+    ({
+      highlightDuration,
+      highlightedMessageId,
+    }: {
+      highlightedMessageId: string;
+      highlightDuration?: number;
+    }) => {
+      dispatch({
+        channel,
+        highlightedMessageId,
+        type: 'jumpToMessageFinished',
+      });
+      if (clearHighlightedMessageTimeoutId.current) {
+        clearTimeout(clearHighlightedMessageTimeoutId.current);
+      }
+      clearHighlightedMessageTimeoutId.current = setTimeout(() => {
+        if (searchController._internalState.getLatestValue().focusedMessage) {
+          searchController._internalState.partialNext({ focusedMessage: undefined });
+        }
+        clearHighlightedMessageTimeoutId.current = null;
+        dispatch({ type: 'clearHighlightedMessage' });
+      }, highlightDuration ?? DEFAULT_HIGHLIGHT_DURATION);
+    },
+    [channel, searchController],
+  );
+
+  useEffect(() => {
+    if (!jumpToMessageFromSearch?.id) return;
+    handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
+  }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
+
   /** MESSAGE */
 
   // Adds a temporary notification to message list, will be removed after 5 seconds
@@ -745,10 +781,6 @@ const ChannelInner = <
     return queryResponse.messages.length;
   };
 
-  const clearHighlightedMessageTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-
   const jumpToMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToMessage'] =
     useCallback(
       async (
@@ -760,22 +792,12 @@ const ChannelInner = <
         await channel.state.loadMessageIntoState(messageId, undefined, messageLimit);
 
         loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-        dispatch({
-          hasMoreNewer: channel.state.messagePagination.hasNext,
+        handleHighlightedMessageChange({
+          highlightDuration,
           highlightedMessageId: messageId,
-          type: 'jumpToMessageFinished',
         });
-
-        if (clearHighlightedMessageTimeoutId.current) {
-          clearTimeout(clearHighlightedMessageTimeoutId.current);
-        }
-
-        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-          clearHighlightedMessageTimeoutId.current = null;
-          dispatch({ type: 'clearHighlightedMessage' });
-        }, highlightDuration);
       },
-      [channel, loadMoreFinished],
+      [channel, handleHighlightedMessageChange, loadMoreFinished],
     );
 
   const jumpToLatestMessage: ChannelActionContextValue<StreamChatGenerics>['jumpToLatestMessage'] =
@@ -916,23 +938,19 @@ const ChannelInner = <
             first_unread_message_id: firstUnreadMessageId,
             last_read_message_id: lastReadMessageId,
           });
-
-        dispatch({
-          hasMoreNewer: channel.state.messagePagination.hasNext,
+        handleHighlightedMessageChange({
+          highlightDuration,
           highlightedMessageId: firstUnreadMessageId,
-          type: 'jumpToMessageFinished',
         });
-
-        if (clearHighlightedMessageTimeoutId.current) {
-          clearTimeout(clearHighlightedMessageTimeoutId.current);
-        }
-
-        clearHighlightedMessageTimeoutId.current = setTimeout(() => {
-          clearHighlightedMessageTimeoutId.current = null;
-          dispatch({ type: 'clearHighlightedMessage' });
-        }, highlightDuration);
       },
-      [addNotification, channel, loadMoreFinished, t, channelUnreadUiState],
+      [
+        addNotification,
+        channel,
+        handleHighlightedMessageChange,
+        loadMoreFinished,
+        t,
+        channelUnreadUiState,
+      ],
     );
 
   const deleteMessage = useCallback(

src/components/Channel/__tests__/Channel.test.js

@@ -1,5 +1,6 @@
 import { nanoid } from 'nanoid';
 import React, { useEffect } from 'react';
+import { SearchController } from 'stream-chat';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
@@ -181,6 +182,7 @@ describe('Channel', () => {
             setQueryInProgress: jest.fn(),
           },
           client: chatClient,
+          searchController: new SearchController(),
         }}
       >
         <Channel channel={channel}>{childrenContent}</Channel>

src/components/Channel/channelState.ts

@@ -27,7 +27,7 @@ export type ChannelStateReducerAction<
       type: 'copyStateFromChannelOnEvent';
     }
   | {
-      hasMoreNewer: boolean;
+      channel: Channel<StreamChatGenerics>;
       highlightedMessageId: string;
       type: 'jumpToMessageFinished';
     }
@@ -161,8 +161,9 @@ export const makeChannelReducer =
       case 'jumpToMessageFinished': {
         return {
           ...state,
-          hasMoreNewer: action.hasMoreNewer,
+          hasMoreNewer: action.channel.state.messagePagination.hasNext,
           highlightedMessageId: action.highlightedMessageId,
+          messages: action.channel.state.messages,
         };
       }