🔃 refactor: Streamline Navigation, Message Loading UX (#7118)

* chore: fix logging for illegal target endpoints in getEndpointFromSetup

* fix: prevent querying agent by ID for ephemeral agents

* refactor: reorder variable declarations in MessagesView for clarity

* fix: localize 'nothing found' message in MessagesView

* refactor: streamline navigation logic and enhance loading spinner component in ChatView

* refactor: simplify loading spinner logic in ChatView component

* fix: ensure message queries are invalidated after new conversation creation in HeaderNewChat, MobileNav, and NewChat components

* 🐛 First run dev mode will have error occur.

🐛 First run dev mode will have error occur.

* fix font-size localstorage presist bug

* Don't ping meilisearch if the search is disabled via env var

* simplify logic in search/enable endpoint

* refactor: simplify enable endpoint condition check

* feat: add useIdChangeEffect hook and integrate it into ChatRoute

---------

Co-authored-by: Ne0 <20765145+zeeklog@users.noreply.github.com>
Co-authored-by: TinyTin <garychangcn@hotmail.com>
Co-authored-by: Denis Palnitsky <denis.palnitsky@zendesk.com>

client/src/components/Chat/ChatView.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { memo, useMemo, useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
@@ -19,6 +19,16 @@ import Header from './Header';
 import Footer from './Footer';
 import store from '~/store';
 
+function LoadingSpinner() {
+  return (
+    <div className="relative flex-1 overflow-hidden overflow-y-auto">
+      <div className="relative flex h-full items-center justify-center">
+        <Spinner className="text-text-primary" />
+      </div>
+    </div>
+  );
+}
+
 function ChatView({ index = 0 }: { index?: number }) {
   const { conversationId } = useParams();
   const rootSubmission = useRecoilValue(store.submissionByIndex(index));
@@ -52,15 +62,12 @@ function ChatView({ index = 0 }: { index?: number }) {
   const isLandingPage =
     (!messagesTree || messagesTree.length === 0) &&
     (conversationId === Constants.NEW_CONVO || !conversationId);
+  const isNavigating = (!messagesTree || messagesTree.length === 0) && conversationId != null;
 
   if (isLoading && conversationId !== Constants.NEW_CONVO) {
-    content = (
-      <div className="relative flex-1 overflow-hidden overflow-y-auto">
-        <div className="relative flex h-full items-center justify-center">
-          <Spinner className="text-text-primary" />
-        </div>
-      </div>
-    );
+    content = <LoadingSpinner />;
+  } else if ((isLoading || isNavigating) && !isLandingPage) {
+    content = <LoadingSpinner />;
   } else if (!isLandingPage) {
     content = <MessagesView messagesTree={messagesTree} />;
   } else {

client/src/components/Chat/Menus/HeaderNewChat.tsx

@@ -20,6 +20,7 @@ export default function HeaderNewChat() {
       [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
       [],
     );
+    queryClient.invalidateQueries([QueryKeys.messages]);
     newConversation();
   };
 

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

@@ -14,10 +14,9 @@ export default function MessagesView({
   messagesTree?: TMessage[] | null;
 }) {
   const localize = useLocalize();
-  const scrollButtonPreference = useRecoilValue(store.showScrollButton);
-  const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
   const fontSize = useRecoilValue(store.fontSize);
   const { screenshotTargetRef } = useScreenshot();
+  const scrollButtonPreference = useRecoilValue(store.showScrollButton);
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
 
   const {

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

@@ -13,7 +13,7 @@ export default function SearchButtons({ message }: { message: TMessage }) {
   const localize = useLocalize();
   const queryClient = useQueryClient();
   const search = useRecoilValue(store.search);
-  const { navigateWithLastTools } = useNavigateToConvo();
+  const { navigateToConvo } = useNavigateToConvo();
   const conversationId = message.conversationId ?? '';
 
   const clickHandler = async (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -39,14 +39,13 @@ export default function SearchButtons({ message }: { message: TMessage }) {
     }
 
     document.title = title;
-    navigateWithLastTools(
+    navigateToConvo(
       cachedConvo ??
         ({
           conversationId,
           title,
         } as TConversation),
-      true,
-      true,
+      { resetLatestMessage: true },
     );
   };
 

client/src/components/Conversations/Convo.tsx

@@ -31,11 +31,11 @@ export default function Conversation({
   const params = useParams();
   const localize = useLocalize();
   const { showToast } = useToastContext();
+  const { navigateToConvo } = useNavigateToConvo();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
   const currentConvoId = useMemo(() => params.conversationId, [params.conversationId]);
   const updateConvoMutation = useUpdateConversationMutation(currentConvoId ?? '');
   const activeConvos = useRecoilValue(store.allConversationsSelector);
-  const { data: endpointsConfig } = useGetEndpointsQuery();
-  const { navigateWithLastTools } = useNavigateToConvo();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const { conversationId, title = '' } = conversation;
 
@@ -118,10 +118,10 @@ export default function Conversation({
       document.title = title;
     }
 
-    navigateWithLastTools(
-      conversation,
-      !(conversationId ?? '') || conversationId === Constants.NEW_CONVO,
-    );
+    navigateToConvo(conversation, {
+      currentConvoId,
+      resetLatestMessage: !(conversationId ?? '') || conversationId === Constants.NEW_CONVO,
+    });
   };
 
   const convoOptionsProps = {

client/src/components/Nav/MobileNav.tsx

@@ -61,6 +61,7 @@ export default function MobileNav({
             [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
             [],
           );
+          queryClient.invalidateQueries([QueryKeys.messages]);
           newConversation();
         }}
       >

client/src/components/Nav/NewChat.tsx

@@ -40,6 +40,7 @@ export default function NewChat({
         [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
         [],
       );
+      queryClient.invalidateQueries([QueryKeys.messages]);
       newConvo();
       navigate('/c/new', { state: { focusChat: true } });
       if (isSmallScreen) {

client/src/components/Share/MessagesView.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { TMessage } from 'librechat-data-provider';
 import MultiMessage from './MultiMessage';
+import { useLocalize } from '~/hooks';
 
 export default function MessagesView({
   messagesTree: _messagesTree,
@@ -9,6 +10,7 @@ export default function MessagesView({
   messagesTree?: TMessage[] | null;
   conversationId: string;
 }) {
+  const localize = useLocalize();
   const [currentEditId, setCurrentEditId] = useState<number | string | null>(-1);
   return (
     <div className="flex-1 pb-[50px]">
@@ -23,7 +25,7 @@ export default function MessagesView({
           <div className="flex flex-col pb-9 text-sm dark:bg-transparent">
             {(_messagesTree && _messagesTree.length == 0) || _messagesTree === null ? (
               <div className="flex w-full items-center justify-center gap-1 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-800/50 dark:bg-gray-800 dark:text-gray-300">
-                Nothing found
+                {localize('com_ui_nothing_found')}
               </div>
             ) : (
               <>

client/src/components/SidePanel/Agents/AgentPanel.tsx

@@ -4,6 +4,7 @@ import { useWatch, useForm, FormProvider } from 'react-hook-form';
 import { useGetModelsQuery } from 'librechat-data-provider/react-query';
 import {
   Tools,
+  Constants,
   SystemRoles,
   EModelEndpoint,
   isAssistantsEndpoint,
@@ -45,7 +46,7 @@ export default function AgentPanel({
 
   const modelsQuery = useGetModelsQuery();
   const agentQuery = useGetAgentByIdQuery(current_agent_id ?? '', {
-    enabled: !!(current_agent_id ?? ''),
+    enabled: !!(current_agent_id ?? '') && current_agent_id !== Constants.EPHEMERAL_AGENT_ID,
   });
 
   const models = useMemo(() => modelsQuery.data ?? {}, [modelsQuery.data]);