🧵 fix: Prevent Unnecessary Re-renders when Loading Chats (#5189)

* chore: typing

* chore: typing

* fix: enhance message scrolling logic to handle empty messages tree and ref checks

* fix: optimize message selection logic with useCallback for better performance

* chore: typing

* refactor: optimize icon rendering

* refactor: further optimize chat props

* fix: remove unnecessary console log in useQueryParams cleanup

* refactor: add queryClient to reset message data on new conversation initiation

* refactor: update data-testid attributes for consistency and improve code readability

* refactor: integrate queryClient to reset message data on new conversation initiation
This commit is contained in:
Danny Avila 2025-01-06 10:32:44 -05:00 committed by GitHub
parent 7987e04a2c
commit b01c744eb8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 184 additions and 88 deletions

View file

@ -1,5 +1,8 @@
import React from 'react';
import { useRecoilValue } from 'recoil';
import { useQueryClient } from '@tanstack/react-query';
import { QueryKeys, Constants } from 'librechat-data-provider';
import type { TMessage } from 'librechat-data-provider';
import type { Dispatch, SetStateAction } from 'react';
import { useLocalize, useNewConvo } from '~/hooks';
import store from '~/store';
@ -10,6 +13,7 @@ export default function MobileNav({
setNavVisible: Dispatch<SetStateAction<boolean>>;
}) {
const localize = useLocalize();
const queryClient = useQueryClient();
const { newConversation } = useNewConvo(0);
const conversation = useRecoilValue(store.conversationByIndex(0));
const { title = 'New Chat' } = conversation || {};
@ -46,13 +50,19 @@ export default function MobileNav({
</svg>
</button>
<h1 className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm font-normal">
{title || localize('com_ui_new_chat')}
{title ?? localize('com_ui_new_chat')}
</h1>
<button
type="button"
aria-label={localize('com_ui_new_chat')}
className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
onClick={() => newConversation()}
onClick={() => {
queryClient.setQueryData<TMessage[]>(
[QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
[],
);
newConversation();
}}
>
<svg
width="24"