🔍 feat: Show Messages from Search Result (#2699)

* refactor(Nav): delegate Search-specific variables/hooks to SearchContext

* fix: safely determine firstTodayConvoId if convo is undefined

* chore: remove empty line

* feat: initial render of search messages

* feat: SearchButtons

* update Ko.ts

* update localizations with new key phrases

* chore: localization comparisons

* fix: clear conversation state on searchQuery navigation

* style: search messages view styling

* refactor(Convo): consolidate logic to navigateWithLastTools from useNavigateToConvo

* fix(SearchButtons): styling and correct navigation logic

* fix(SearchBar): invalidate all message queries and invoke `clearText` if onChange value is empty

* refactor(NewChat): consolidate new chat button logic to NewChatButtonIcon

* chore: localizations for Nav date groups

* chore: update comparisons

* fix: early return from sendRequest to avoid quick searchQuery reset

* style: Link Icon

* chore: bump tiktoken, use o200k_base for gpt-4o

client/src/routes/Root.tsx

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
-import { useGetSearchEnabledQuery } from 'librechat-data-provider/react-query';
+
 import type { ContextType } from '~/common';
-import { useAuthContext, useAssistantsMap, useFileMap } from '~/hooks';
-import { AssistantsMapContext, FileMapContext } from '~/Providers';
+import { useAuthContext, useAssistantsMap, useFileMap, useSearch } from '~/hooks';
+import { AssistantsMapContext, FileMapContext, SearchContext } from '~/Providers';
 import { Nav, MobileNav } from '~/components/Nav';
-import store from '~/store';
 
 export default function Root() {
   const { isAuthenticated } = useAuthContext();
@@ -15,42 +13,29 @@ export default function Root() {
     return savedNavVisible !== null ? JSON.parse(savedNavVisible) : true;
   });
 
-  const setIsSearchEnabled = useSetRecoilState(store.isSearchEnabled);
-
+  const search = useSearch({ isAuthenticated });
   const fileMap = useFileMap({ isAuthenticated });
   const assistantsMap = useAssistantsMap({ isAuthenticated });
-  const searchEnabledQuery = useGetSearchEnabledQuery({ enabled: isAuthenticated });
-
-  useEffect(() => {
-    if (searchEnabledQuery.data) {
-      setIsSearchEnabled(searchEnabledQuery.data);
-    } else if (searchEnabledQuery.isError) {
-      console.error('Failed to get search enabled', searchEnabledQuery.error);
-    }
-  }, [
-    searchEnabledQuery.data,
-    searchEnabledQuery.error,
-    searchEnabledQuery.isError,
-    setIsSearchEnabled,
-  ]);
 
   if (!isAuthenticated) {
     return null;
   }
 
   return (
-    <FileMapContext.Provider value={fileMap}>
-      <AssistantsMapContext.Provider value={assistantsMap}>
-        <div className="flex h-dvh">
-          <div className="relative z-0 flex h-full w-full overflow-hidden">
-            <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
-            <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
-              <MobileNav setNavVisible={setNavVisible} />
-              <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+    <SearchContext.Provider value={search}>
+      <FileMapContext.Provider value={fileMap}>
+        <AssistantsMapContext.Provider value={assistantsMap}>
+          <div className="flex h-dvh">
+            <div className="relative z-0 flex h-full w-full overflow-hidden">
+              <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+              <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
+                <MobileNav setNavVisible={setNavVisible} />
+                <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+              </div>
             </div>
           </div>
-        </div>
-      </AssistantsMapContext.Provider>
-    </FileMapContext.Provider>
+        </AssistantsMapContext.Provider>
+      </FileMapContext.Provider>
+    </SearchContext.Provider>
   );
 }

client/src/routes/Search.tsx

@@ -1,58 +1,42 @@
-import React, { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
-// import TextChat from '~/components/Input/TextChat';
-
-import { useConversation } from '~/hooks';
-import store from '~/store';
+import { useMemo } from 'react';
+import MinimalMessagesWrapper from '~/components/Chat/Messages/MinimalMessages';
+import SearchMessage from '~/components/Chat/Messages/SearchMessage';
+import { useSearchContext, useFileMapContext } from '~/Providers';
+import { useNavScrolling, useLocalize } from '~/hooks';
+import { buildTree } from '~/utils';
 
 export default function Search() {
-  const [searchQuery, setSearchQuery] = useRecoilState(store.searchQuery);
-  const conversation = useRecoilValue(store.conversation);
-  const { searchPlaceholderConversation } = useConversation();
-  const { query } = useParams();
-  const navigate = useNavigate();
+  const localize = useLocalize();
+  const fileMap = useFileMapContext();
+  const { searchQuery, searchQueryRes } = useSearchContext();
 
-  // when conversation changed or conversationId (in url) changed
-  useEffect(() => {
-    if (conversation === null) {
-      // no current conversation, we need to do something
-      if (query) {
-        // create new
-        searchPlaceholderConversation();
-        setSearchQuery(query);
-      } else {
-        navigate('/c/new');
-      }
-    } else if (conversation?.conversationId === 'search') {
-      // jump to search page
-      if (searchQuery !== query) {
-        navigate(`/search/${searchQuery}`);
-      }
-    } else {
-      // conversationId (in url) should always follow conversation?.conversationId, unless conversation is null
-      navigate(`/chat/${conversation?.conversationId}`);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [conversation, query, searchQuery]);
+  const { containerRef } = useNavScrolling({
+    setShowLoading: () => ({}),
+    hasNextPage: searchQueryRes?.hasNextPage,
+    fetchNextPage: searchQueryRes?.fetchNextPage,
+    isFetchingNextPage: searchQueryRes?.isFetchingNextPage,
+  });
 
-  // if not a search
-  if (conversation?.conversationId !== 'search') {
-    return null;
-  }
-  // if query not match
-  if (searchQuery !== query) {
-    return null;
-  }
-  // if query is null
-  if (!query) {
+  const messages = useMemo(() => {
+    const msgs = searchQueryRes?.data?.pages.flatMap((page) => page.messages) || [];
+    const dataTree = buildTree({ messages: msgs, fileMap });
+    return dataTree?.length === 0 ? null : dataTree ?? null;
+  }, [fileMap, searchQueryRes?.data?.pages]);
+
+  if (!searchQuery || !searchQueryRes?.data) {
     return null;
   }
 
   return (
-    <>
-      {/* <Messages isSearchView={true} /> */}
-      {/* <TextChat isSearchView={true} /> */}
-    </>
+    <MinimalMessagesWrapper ref={containerRef} className="pt-4">
+      {(messages && messages?.length == 0) || messages === null ? (
+        <div className="my-auto flex h-full w-full items-center justify-center gap-1 bg-gray-50 p-3 text-lg text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
+          {localize('com_ui_nothing_found')}
+        </div>
+      ) : (
+        messages?.map((message) => <SearchMessage key={message.messageId} message={message} />)
+      )}
+      <div className="absolute bottom-0 left-0 right-0 h-[5%] bg-gradient-to-t from-gray-800 to-transparent" />
+    </MinimalMessagesWrapper>
   );
 }

client/src/routes/index.tsx

@@ -1,7 +1,4 @@
 import { createBrowserRouter, Navigate, Outlet } from 'react-router-dom';
-import Root from './Root';
-import ChatRoute from './ChatRoute';
-// import Search from './Search';
 import {
   Login,
   Registration,
@@ -10,6 +7,9 @@ import {
   ApiErrorWatcher,
 } from '~/components/Auth';
 import { AuthContextProvider } from '~/hooks/AuthContext';
+import ChatRoute from './ChatRoute';
+import Search from './Search';
+import Root from './Root';
 
 const AuthLayout = () => (
   <AuthContextProvider>
@@ -50,10 +50,10 @@ export const router = createBrowserRouter([
             path: 'c/:conversationId?',
             element: <ChatRoute />,
           },
-          // {
-          //   path: 'search/:query?',
-          //   element: <Search />,
-          // },
+          {
+            path: 'search',
+            element: <Search />,
+          },
         ],
       },
     ],