🔍 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/components/Nav/Nav.tsx

@@ -1,7 +1,6 @@
 import { useParams } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { useCallback, useEffect, useState, useMemo, memo } from 'react';
-import type { ConversationListResponse } from 'librechat-data-provider';
 import {
   useMediaQuery,
   useAuthContext,
@@ -10,9 +9,10 @@ import {
   useNavScrolling,
   useConversations,
 } from '~/hooks';
-import { useSearchInfiniteQuery, useConversationsInfiniteQuery } from '~/data-provider';
+import { useConversationsInfiniteQuery } from '~/data-provider';
 import { TooltipProvider, Tooltip } from '~/components/ui';
 import { Conversations } from '~/components/Conversations';
+import { useSearchContext } from '~/Providers';
 import { Spinner } from '~/components/svg';
 import SearchBar from './SearchBar';
 import NavToggle from './NavToggle';
@@ -47,26 +47,18 @@ const Nav = ({ navVisible, setNavVisible }) => {
     }
   }, [isSmallScreen]);
 
-  const [pageNumber, setPageNumber] = useState(1);
+  const { newConversation } = useConversation();
   const [showLoading, setShowLoading] = useState(false);
-
-  const searchQuery = useRecoilValue(store.searchQuery);
   const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
-  const { newConversation, searchPlaceholderConversation } = useConversation();
 
   const { refreshConversations } = useConversations();
-  const setSearchResultMessages = useSetRecoilState(store.searchResultMessages);
+  const { pageNumber, searchQuery, setPageNumber, searchQueryRes } = useSearchContext();
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useConversationsInfiniteQuery(
     { pageNumber: pageNumber.toString(), isArchived: false },
     { enabled: isAuthenticated },
   );
 
-  const searchQueryRes = useSearchInfiniteQuery(
-    { pageNumber: pageNumber.toString(), searchQuery: searchQuery, isArchived: false },
-    { enabled: isAuthenticated && !!searchQuery.length },
-  );
-
   const { containerRef, moveToTop } = useNavScrolling({
     setShowLoading,
     hasNextPage: searchQuery ? searchQueryRes.hasNextPage : hasNextPage,
@@ -81,21 +73,6 @@ const Nav = ({ navVisible, setNavVisible }) => {
     [data, searchQuery, searchQueryRes?.data],
   );
 
-  const onSearchSuccess = useCallback(({ data }: { data: ConversationListResponse }) => {
-    const res = data;
-    searchPlaceholderConversation();
-    setSearchResultMessages(res.messages);
-    /* disabled due recoil methods not recognized as state setters */
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Empty dependency array
-
-  useEffect(() => {
-    //we use isInitialLoading here instead of isLoading because query is disabled by default
-    if (searchQueryRes.data) {
-      onSearchSuccess({ data: searchQueryRes.data.pages[0] });
-    }
-  }, [searchQueryRes.data, searchQueryRes.isInitialLoading, onSearchSuccess]);
-
   const clearSearch = () => {
     setPageNumber(1);
     refreshConversations();

client/src/components/Nav/NewChat.tsx

@@ -1,3 +1,5 @@
+import { Search } from 'lucide-react';
+import { useRecoilValue } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
@@ -7,6 +9,50 @@ import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
 import { useLocalize, useNewConvo } from '~/hooks';
 import { NewChatIcon } from '~/components/svg';
 import store from '~/store';
+import type { TConversation } from 'librechat-data-provider';
+
+const NewChatButtonIcon = ({ conversation }: { conversation: TConversation | null }) => {
+  const searchQuery = useRecoilValue(store.searchQuery);
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+
+  if (searchQuery) {
+    return (
+      <div className="shadow-stroke relative flex h-7 w-7 items-center justify-center rounded-full bg-white text-black dark:bg-white">
+        <Search className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  let { endpoint = '' } = conversation ?? {};
+  const iconURL = conversation?.iconURL ?? '';
+  endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
+
+  const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
+  const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
+  const iconKey = getIconKey({ endpoint, endpointsConfig, endpointType, endpointIconURL });
+  const Icon = icons[iconKey];
+
+  return (
+    <div className="h-7 w-7 flex-shrink-0">
+      {iconURL && iconURL.includes('http') ? (
+        <ConvoIconURL preset={conversation} endpointIconURL={iconURL} context="nav" />
+      ) : (
+        <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white">
+          {endpoint &&
+            Icon &&
+            Icon({
+              size: 41,
+              context: 'nav',
+              className: 'h-2/3 w-2/3',
+              endpoint,
+              endpointType,
+              iconURL: endpointIconURL,
+            })}
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default function NewChat({
   index = 0,
@@ -22,16 +68,7 @@ export default function NewChat({
   const navigate = useNavigate();
   const localize = useLocalize();
 
-  const { data: endpointsConfig } = useGetEndpointsQuery();
   const { conversation } = store.useCreateConversationAtom(index);
-  let { endpoint = '' } = conversation ?? {};
-  const iconURL = conversation?.iconURL ?? '';
-  endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
-
-  const endpointType = getEndpointField(endpointsConfig, endpoint, 'type');
-  const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
-  const iconKey = getIconKey({ endpoint, endpointsConfig, endpointType, endpointIconURL });
-  const Icon = icons[iconKey];
 
   const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
     if (event.button === 0 && !event.ctrlKey) {
@@ -53,24 +90,7 @@ export default function NewChat({
               onClick={clickHandler}
               className="group flex h-10 items-center gap-2 rounded-lg px-2 font-medium hover:bg-gray-200 dark:hover:bg-gray-700"
             >
-              <div className="h-7 w-7 flex-shrink-0">
-                {iconURL && iconURL.includes('http') ? (
-                  <ConvoIconURL preset={conversation} endpointIconURL={iconURL} context="nav" />
-                ) : (
-                  <div className="shadow-stroke relative flex h-full items-center justify-center rounded-full bg-white text-black dark:bg-white">
-                    {endpoint &&
-                      Icon &&
-                      Icon({
-                        size: 41,
-                        context: 'nav',
-                        className: 'h-2/3 w-2/3',
-                        endpoint,
-                        endpointType,
-                        iconURL: endpointIconURL,
-                      })}
-                  </div>
-                )}
-              </div>
+              <NewChatButtonIcon conversation={conversation} />
               <div className="text-token-text-primary grow overflow-hidden text-ellipsis whitespace-nowrap text-sm">
                 {localize('com_ui_new_chat')}
               </div>

client/src/components/Nav/SearchBar.tsx

@@ -1,7 +1,9 @@
-import { forwardRef, useState, useCallback, useMemo, Ref } from 'react';
+import debounce from 'lodash/debounce';
 import { Search, X } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
-import debounce from 'lodash/debounce';
+import { QueryKeys } from 'librechat-data-provider';
+import { useQueryClient } from '@tanstack/react-query';
+import { forwardRef, useState, useCallback, useMemo, Ref } from 'react';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
@@ -12,6 +14,8 @@ type SearchBarProps = {
 
 const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) => {
   const { clearSearch } = props;
+  const queryClient = useQueryClient();
+  const clearConvoState = store.useClearConvoState();
   const setSearchQuery = useSetRecoilState(store.searchQuery);
   const [showClearIcon, setShowClearIcon] = useState(false);
   const [text, setText] = useState('');
@@ -31,7 +35,17 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) =
     }
   };
 
-  const sendRequest = useCallback((value: string) => setSearchQuery(value), [setSearchQuery]);
+  const sendRequest = useCallback(
+    (value: string) => {
+      setSearchQuery(value);
+      if (!value) {
+        return;
+      }
+      queryClient.invalidateQueries([QueryKeys.messages]);
+      clearConvoState();
+    },
+    [queryClient, clearConvoState, setSearchQuery],
+  );
   const debouncedSendRequest = useMemo(() => debounce(sendRequest, 350), [sendRequest]);
 
   const onChange = (e: React.FormEvent<HTMLInputElement>) => {