Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-23 11:50:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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>
This commit is contained in:
Danny Avila 2025-04-28 18:18:13 -04:00 • committed by GitHub
parent fc30482f65
commit 0e8041bcac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 80 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

23
client/src/components/Chat/ChatView.tsx
View file

@ -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 {

1
client/src/components/Chat/Menus/HeaderNewChat.tsx
View file

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

3
client/src/components/Chat/Messages/MessagesView.tsx
View file

@ -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 {

7
client/src/components/Chat/Messages/SearchButtons.tsx
View file

@ -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 },
);
};