🔍 refactor: Search & Message Retrieval (#6903)

* refactor: conversation search fetch

* refactor: Message and Convo fetch with paramters and search

* refactor: update search states and cleanup old store states

* refactor: re-enable search API; fix: search conversation

* fix: message's convo fetch

* fix: redirect when searching

* chore: use logger instead of console

* fix: search message loading

* feat: small optimizations

* feat(Message): remove cache for search path

* fix: handle delete of all archivedConversation and sharedLinks

* chore: cleanup

* fix: search messages

* style: update ConvoOptions styles

* refactor(SearchButtons): streamline conversation fetching and remove unused state

* fix: ensure messages are invalidated after fetching conversation data

* fix: add iconURL to conversation query selection

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Chat/Input/ChatForm.tsx

@@ -43,7 +43,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
   const [backupBadges, setBackupBadges] = useState<Pick<BadgeItem, 'id'>[]>([]);
 
-  const isSearching = useRecoilValue(store.isSearching);
+  const search = useRecoilValue(store.search);
   const SpeechToText = useRecoilValue(store.speechToText);
   const TextToSpeech = useRecoilValue(store.textToSpeech);
   const chatDirection = useRecoilValue(store.chatDirection);
@@ -151,10 +151,10 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const textValue = useWatch({ control: methods.control, name: 'text' });
 
   useEffect(() => {
-    if (!isSearching && textAreaRef.current && !disableInputs) {
+    if (!search.isSearching && textAreaRef.current && !disableInputs) {
       textAreaRef.current.focus();
     }
-  }, [isSearching, disableInputs]);
+  }, [search.isSearching, disableInputs]);
 
   useEffect(() => {
     if (textAreaRef.current) {

client/src/components/Chat/Messages/SearchButtons.tsx

@@ -1,34 +1,63 @@
 import { Link } from 'lucide-react';
-import type { TMessage } from 'librechat-data-provider';
+import { useRecoilValue } from 'recoil';
+import { QueryKeys } from 'librechat-data-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import type { TMessage, TConversation } from 'librechat-data-provider';
+import type { InfiniteData } from '@tanstack/react-query';
+import type { ConversationCursorData } from '~/utils';
 import { useLocalize, useNavigateToConvo } from '~/hooks';
 import { findConversationInInfinite } from '~/utils';
-import { useSearchContext } from '~/Providers';
+import store from '~/store';
 
 export default function SearchButtons({ message }: { message: TMessage }) {
   const localize = useLocalize();
-  const { searchQueryRes } = useSearchContext();
+  const queryClient = useQueryClient();
+  const search = useRecoilValue(store.search);
   const { navigateWithLastTools } = useNavigateToConvo();
   const conversationId = message.conversationId ?? '';
 
+  const clickHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (!conversationId) {
+      return;
+    }
+
+    let title = message.title ?? '';
+    let cachedConvo = queryClient.getQueryData<TConversation>([
+      QueryKeys.conversation,
+      conversationId,
+    ]);
+    const convos = queryClient.getQueryData<InfiniteData<ConversationCursorData>>([
+      QueryKeys.allConversations,
+      { search: search.debouncedQuery },
+    ]);
+    if (!cachedConvo && convos) {
+      cachedConvo = findConversationInInfinite(convos, conversationId);
+    }
+    if (!title) {
+      title = cachedConvo?.title ?? '';
+    }
+
+    document.title = title;
+    navigateWithLastTools(
+      cachedConvo ??
+        ({
+          conversationId,
+          title,
+        } as TConversation),
+      true,
+      true,
+    );
+  };
+
   if (!conversationId) {
     return null;
   }
 
-  const clickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-
-    const conversation = findConversationInInfinite(searchQueryRes?.data, conversationId);
-    if (!conversation) {
-      return;
-    }
-
-    document.title = message.title ?? '';
-    navigateWithLastTools(conversation, true, true);
-  };
-
   return (
     <div className="visible mt-0 flex items-center justify-center gap-1 self-end text-text-secondary lg:justify-start">
       <button
+        type="button"
         className="ml-0 flex cursor-pointer items-center gap-1.5 rounded-md p-1 text-xs hover:text-text-primary hover:underline"
         onClick={clickHandler}
         title={localize('com_ui_go_to_conversation')}

client/src/components/Conversations/Conversations.tsx

@@ -14,13 +14,20 @@ interface ConversationsProps {
   toggleNav: () => void;
   containerRef: React.RefObject<HTMLDivElement | List>;
   loadMoreConversations: () => void;
-  isFetchingNextPage: boolean;
+  isLoading: boolean;
   isSearchLoading: boolean;
 }
 
-const LoadingSpinner = memo(() => (
-  <Spinner className="m-1 mx-auto mb-4 h-4 w-4 text-text-primary" />
-));
+const LoadingSpinner = memo(() => {
+  const localize = useLocalize();
+
+  return (
+    <div className="mx-auto mt-2 flex items-center justify-center gap-2">
+      <Spinner className="h-4 w-4 text-text-primary" />
+      <span className="animate-pulse text-text-primary">{localize('com_ui_loading')}</span>
+    </div>
+  );
+});
 
 const DateLabel: FC<{ groupName: string }> = memo(({ groupName }) => {
   const localize = useLocalize();
@@ -35,7 +42,8 @@ DateLabel.displayName = 'DateLabel';
 
 type FlattenedItem =
   | { type: 'header'; groupName: string }
-  | { type: 'convo'; convo: TConversation };
+  | { type: 'convo'; convo: TConversation }
+  | { type: 'loading' };
 
 const MemoizedConvo = memo(
   ({
@@ -74,7 +82,7 @@ const Conversations: FC<ConversationsProps> = ({
   toggleNav,
   containerRef,
   loadMoreConversations,
-  isFetchingNextPage,
+  isLoading,
   isSearchLoading,
 }) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
@@ -103,8 +111,12 @@ const Conversations: FC<ConversationsProps> = ({
       items.push({ type: 'header', groupName });
       items.push(...convos.map((convo) => ({ type: 'convo' as const, convo })));
     });
+
+    if (isLoading) {
+      items.push({ type: 'loading' } as any);
+    }
     return items;
-  }, [groupedConversations]);
+  }, [groupedConversations, isLoading]);
 
   const cache = useMemo(
     () =>
@@ -113,7 +125,16 @@ const Conversations: FC<ConversationsProps> = ({
         defaultHeight: convoHeight,
         keyMapper: (index) => {
           const item = flattenedItems[index];
-          return item.type === 'header' ? `header-${index}` : `convo-${item.convo.conversationId}`;
+          if (item.type === 'header') {
+            return `header-${index}`;
+          }
+          if (item.type === 'convo') {
+            return `convo-${item.convo.conversationId}`;
+          }
+          if (item.type === 'loading') {
+            return `loading-${index}`;
+          }
+          return `unknown-${index}`;
         },
       }),
     [flattenedItems, convoHeight],
@@ -122,20 +143,31 @@ const Conversations: FC<ConversationsProps> = ({
   const rowRenderer = useCallback(
     ({ index, key, parent, style }) => {
       const item = flattenedItems[index];
+      if (item.type === 'loading') {
+        return (
+          <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
+            {({ registerChild }) => (
+              <div ref={registerChild} style={style}>
+                <LoadingSpinner />
+              </div>
+            )}
+          </CellMeasurer>
+        );
+      }
       return (
         <CellMeasurer cache={cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
           {({ registerChild }) => (
             <div ref={registerChild} style={style}>
               {item.type === 'header' ? (
                 <DateLabel groupName={item.groupName} />
-              ) : (
+              ) : item.type === 'convo' ? (
                 <MemoizedConvo
                   conversation={item.convo}
                   retainView={moveToTop}
                   toggleNav={toggleNav}
                   isLatestConvo={item.convo.conversationId === firstTodayConvoId}
                 />
-              )}
+              ) : null}
             </div>
           )}
         </CellMeasurer>
@@ -156,7 +188,7 @@ const Conversations: FC<ConversationsProps> = ({
 
   const handleRowsRendered = useCallback(
     ({ stopIndex }: { stopIndex: number }) => {
-      if (stopIndex >= flattenedItems.length - 2) {
+      if (stopIndex >= flattenedItems.length - 8) {
         throttledLoadMore();
       }
     },
@@ -193,11 +225,6 @@ const Conversations: FC<ConversationsProps> = ({
           </AutoSizer>
         </div>
       )}
-      {isFetchingNextPage && !isSearchLoading && (
-        <div className="mt-2">
-          <LoadingSpinner />
-        </div>
-      )}
     </div>
   );
 };

client/src/components/Conversations/ConvoOptions/DeleteButton.tsx

@@ -74,6 +74,7 @@ export function DeleteConversationDialog({
     <OGDialogContent
       title={localize('com_ui_delete_confirm') + ' ' + title}
       className="w-11/12 max-w-md"
+      showCloseButton={false}
     >
       <OGDialogHeader>
         <OGDialogTitle>{localize('com_ui_delete_conversation')}</OGDialogTitle>

client/src/components/Nav/Nav.tsx

@@ -1,11 +1,7 @@
 import { useCallback, useEffect, useState, useMemo, memo, lazy, Suspense, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
-import type {
-  TConversation,
-  ConversationListResponse,
-  SearchConversationListResponse,
-} from 'librechat-data-provider';
+import type { TConversation, ConversationListResponse } from 'librechat-data-provider';
 import type { InfiniteQueryObserverResult } from '@tanstack/react-query';
 import {
   useLocalize,
@@ -17,8 +13,6 @@ import {
 } from '~/hooks';
 import { useConversationsInfiniteQuery } from '~/data-provider';
 import { Conversations } from '~/components/Conversations';
-import { useSearchContext } from '~/Providers';
-import { Spinner } from '~/components';
 import NavToggle from './NavToggle';
 import SearchBar from './SearchBar';
 import NewChat from './NewChat';
@@ -74,71 +68,48 @@ const Nav = memo(
       permission: Permissions.USE,
     });
 
-    const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
-    const isSearchTyping = useRecoilValue(store.isSearchTyping);
-    const { searchQuery, searchQueryRes } = useSearchContext();
+    const search = useRecoilValue(store.search);
 
-    const { data, fetchNextPage, isFetchingNextPage, refetch } = useConversationsInfiniteQuery(
-      {
-        isArchived: false,
-        tags: tags.length === 0 ? undefined : tags,
-      },
-      {
-        enabled: isAuthenticated,
-        staleTime: 30000,
-        cacheTime: 300000,
-      },
-    );
+    const { data, fetchNextPage, isFetchingNextPage, isLoading, isFetching, refetch } =
+      useConversationsInfiniteQuery(
+        {
+          tags: tags.length === 0 ? undefined : tags,
+          search: search.debouncedQuery || undefined,
+        },
+        {
+          enabled: isAuthenticated,
+          staleTime: 30000,
+          cacheTime: 300000,
+        },
+      );
 
     const computedHasNextPage = useMemo(() => {
-      if (searchQuery && searchQueryRes?.data) {
-        const pages = searchQueryRes.data.pages;
-        return pages[pages.length - 1]?.nextCursor !== null;
-      } else if (data?.pages && data.pages.length > 0) {
+      if (data?.pages && data.pages.length > 0) {
         const lastPage: ConversationListResponse = data.pages[data.pages.length - 1];
         return lastPage.nextCursor !== null;
       }
       return false;
-    }, [searchQuery, searchQueryRes?.data, data?.pages]);
+    }, [data?.pages]);
 
     const outerContainerRef = useRef<HTMLDivElement>(null);
     const listRef = useRef<any>(null);
 
-    const { moveToTop } = useNavScrolling<
-      ConversationListResponse | SearchConversationListResponse
-    >({
+    const { moveToTop } = useNavScrolling<ConversationListResponse>({
       setShowLoading,
       fetchNextPage: async (options?) => {
         if (computedHasNextPage) {
-          if (searchQuery && searchQueryRes) {
-            const pages = searchQueryRes.data?.pages;
-            if (pages && pages.length > 0 && pages[pages.length - 1]?.nextCursor !== null) {
-              return searchQueryRes.fetchNextPage(options);
-            }
-          } else {
-            return fetchNextPage(options);
-          }
+          return fetchNextPage(options);
         }
         return Promise.resolve(
-          {} as InfiniteQueryObserverResult<
-            SearchConversationListResponse | ConversationListResponse,
-            unknown
-          >,
+          {} as InfiniteQueryObserverResult<ConversationListResponse, unknown>,
         );
       },
-      isFetchingNext: searchQuery
-        ? (searchQueryRes?.isFetchingNextPage ?? false)
-        : isFetchingNextPage,
+      isFetchingNext: isFetchingNextPage,
     });
 
     const conversations = useMemo(() => {
-      if (searchQuery && searchQueryRes?.data) {
-        return searchQueryRes.data.pages.flatMap(
-          (page) => page.conversations ?? [],
-        ) as TConversation[];
-      }
       return data ? data.pages.flatMap((page) => page.conversations) : [];
-    }, [data, searchQuery, searchQueryRes?.data]);
+    }, [data]);
 
     const toggleNavVisible = useCallback(() => {
       setNavVisible((prev: boolean) => {
@@ -183,7 +154,7 @@ const Nav = memo(
     const subHeaders = useMemo(
       () => (
         <>
-          {isSearchEnabled === true && <SearchBar isSmallScreen={isSmallScreen} />}
+          {search.enabled === true && <SearchBar isSmallScreen={isSmallScreen} />}
           {hasAccessToBookmarks && (
             <>
               <div className="mt-1.5" />
@@ -194,14 +165,22 @@ const Nav = memo(
           )}
         </>
       ),
-      [isSearchEnabled, hasAccessToBookmarks, isSmallScreen, tags, setTags],
+      [search.enabled, hasAccessToBookmarks, isSmallScreen, tags, setTags],
     );
 
-    const isSearchLoading =
-      !!searchQuery &&
-      (isSearchTyping ||
-        (searchQueryRes?.isLoading ?? false) ||
-        (searchQueryRes?.isFetching ?? false));
+    const [isSearchLoading, setIsSearchLoading] = useState(
+      !!search.query && (search.isTyping || isLoading || isFetching),
+    );
+
+    useEffect(() => {
+      if (search.isTyping) {
+        setIsSearchLoading(true);
+      } else if (!isLoading && !isFetching) {
+        setIsSearchLoading(false);
+      } else if (!!search.query && (isLoading || isFetching)) {
+        setIsSearchLoading(true);
+      }
+    }, [search.query, search.isTyping, isLoading, isFetching]);
 
     return (
       <>
@@ -243,7 +222,7 @@ const Nav = memo(
                         toggleNav={itemToggleNav}
                         containerRef={listRef}
                         loadMoreConversations={loadMoreConversations}
-                        isFetchingNextPage={isFetchingNextPage || showLoading}
+                        isLoading={isFetchingNextPage || showLoading || isLoading}
                         isSearchLoading={isSearchLoading}
                       />
                     </div>

client/src/components/Nav/NewChat.tsx

@@ -15,8 +15,9 @@ import { cn } from '~/utils';
 import store from '~/store';
 
 const NewChatButtonIcon = React.memo(({ conversation }: { conversation: TConversation | null }) => {
-  const searchQuery = useRecoilValue(store.searchQuery);
   const { data: endpointsConfig } = useGetEndpointsQuery();
+  const search = useRecoilValue(store.search);
+  const searchQuery = search.debouncedQuery;
 
   const computedIcon = useMemo(() => {
     if (searchQuery) {

client/src/components/Nav/SearchBar.tsx

@@ -1,10 +1,10 @@
+import { forwardRef, useState, useCallback, useMemo, useEffect, Ref } from 'react';
 import debounce from 'lodash/debounce';
 import { Search, X } from 'lucide-react';
-import { useSetRecoilState } from 'recoil';
-import { useLocation } from 'react-router-dom';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
-import { forwardRef, useState, useCallback, useMemo, Ref } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useLocalize, useNewConvo } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
@@ -17,29 +17,34 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
   const localize = useLocalize();
   const location = useLocation();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   const { isSmallScreen } = props;
 
   const [text, setText] = useState('');
   const [showClearIcon, setShowClearIcon] = useState(false);
 
   const { newConversation } = useNewConvo();
-  const clearConvoState = store.useClearConvoState();
-  const setSearchQuery = useSetRecoilState(store.searchQuery);
-  const setIsSearching = useSetRecoilState(store.isSearching);
-  const setIsSearchTyping = useSetRecoilState(store.isSearchTyping);
+  const setSearchState = useSetRecoilState(store.search);
+  const search = useRecoilValue(store.search);
 
   const clearSearch = useCallback(() => {
     if (location.pathname.includes('/search')) {
       newConversation({ disableFocus: true });
+      navigate('/c/new', { replace: true });
     }
-  }, [newConversation, location.pathname]);
+  }, [newConversation, location.pathname, navigate]);
 
   const clearText = useCallback(() => {
     setShowClearIcon(false);
-    setSearchQuery('');
-    clearSearch();
     setText('');
-  }, [setSearchQuery, clearSearch]);
+    setSearchState((prev) => ({
+      ...prev,
+      query: '',
+      debouncedQuery: '',
+      isTyping: false,
+    }));
+    clearSearch();
+  }, [setSearchState, clearSearch]);
 
   const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const { value } = e.target as HTMLInputElement;
@@ -50,34 +55,48 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
 
   const sendRequest = useCallback(
     (value: string) => {
-      setSearchQuery(value);
       if (!value) {
         return;
       }
       queryClient.invalidateQueries([QueryKeys.messages]);
-      clearConvoState();
     },
-    [queryClient, clearConvoState, setSearchQuery],
+    [queryClient],
   );
 
-  const debouncedSendRequest = useMemo(
+  const debouncedSetDebouncedQuery = useMemo(
     () =>
       debounce((value: string) => {
+        setSearchState((prev) => ({ ...prev, debouncedQuery: value, isTyping: false }));
         sendRequest(value);
-      }, 350),
-    [sendRequest, setIsSearchTyping],
+      }, 500),
+    [setSearchState, sendRequest],
   );
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setShowClearIcon(value.length > 0);
     setText(value);
-    setSearchQuery(value);
-    setIsSearchTyping(true);
-    // debounce only the API call
-    debouncedSendRequest(value);
+    setSearchState((prev) => ({
+      ...prev,
+      query: value,
+      isTyping: true,
+    }));
+    debouncedSetDebouncedQuery(value);
+    if (value.length > 0 && location.pathname !== '/search') {
+      navigate('/search', { replace: true });
+    } else if (value.length === 0 && location.pathname === '/search') {
+      navigate('/c/new', { replace: true });
+    }
   };
 
+  // Automatically set isTyping to false when loading is done and debouncedQuery matches query
+  // (prevents stuck loading state if input is still focused)
+  useEffect(() => {
+    if (search.isTyping && !search.isSearching && search.debouncedQuery === search.query) {
+      setSearchState((prev) => ({ ...prev, isTyping: false }));
+    }
+  }, [search.isTyping, search.isSearching, search.debouncedQuery, search.query, setSearchState]);
+
   return (
     <div
       ref={ref}
@@ -98,8 +117,8 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
         aria-label={localize('com_nav_search_placeholder')}
         placeholder={localize('com_nav_search_placeholder')}
         onKeyUp={handleKeyUp}
-        onFocus={() => setIsSearching(true)}
-        onBlur={() => setIsSearching(true)}
+        onFocus={() => setSearchState((prev) => ({ ...prev, isSearching: true }))}
+        onBlur={() => setSearchState((prev) => ({ ...prev, isSearching: false }))}
         autoComplete="off"
         dir="auto"
       />

client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx

@@ -272,7 +272,6 @@ export default function ArchivedChatsTable({
         isFetchingNextPage={isFetchingNextPage}
         isLoading={isLoading}
         showCheckboxes={false}
-        manualSorting={true} // Ensures server-side sorting
       />
 
       <OGDialog open={isDeleteOpen} onOpenChange={onOpenChange}>

client/src/components/ui/DataTable.tsx

@@ -216,8 +216,8 @@ export default function DataTable<TData, TValue>({
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
+  const search = useRecoilValue(store.search);
   const [isDeleting, setIsDeleting] = useState(false);
-  const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const [sorting, setSorting] = useState<SortingState>(defaultSort);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -331,7 +331,6 @@ export default function DataTable<TData, TValue>({
       const itemsToDelete = table.getFilteredSelectedRowModel().rows.map((r) => r.original);
       await onDelete(itemsToDelete);
       setRowSelection({});
-      // await fetchNextPage?.({ pageParam: lastPage?.nextCursor });
     } finally {
       setIsDeleting(false);
     }
@@ -375,7 +374,7 @@ export default function DataTable<TData, TValue>({
             localize={localize}
           />
         )}
-        {filterColumn !== undefined && table.getColumn(filterColumn) && isSearchEnabled && (
+        {filterColumn !== undefined && table.getColumn(filterColumn) && search.enabled && (
           <div className="relative flex-1">
             <AnimatedSearchInput
               value={searchTerm}