🧵 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

@ -116,7 +116,7 @@ export default function useChatHelpers(index = 0, paramId?: string) {
const handleRegenerate = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
const parentMessageId = latestMessage?.parentMessageId;
const parentMessageId = latestMessage?.parentMessageId ?? '';
if (!parentMessageId) {
console.error('Failed to regenerate the message: parentMessageId not found.');
return;

View file

@ -207,7 +207,6 @@ export default function useQueryParams({
return () => {
clearInterval(intervalId);
console.log('Cleanup: `useQueryParams` interval cleared');
};
}, [searchParams, methods, textAreaRef, newQueryConvo, newConversation]);
}

View file

@ -72,22 +72,30 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) {
});
useEffect(() => {
if (!messagesTree) {
if (!messagesTree || messagesTree.length === 0) {
return;
}
if (isSubmitting && scrollToBottom && !abortScroll) {
if (!messagesEndRef.current || !scrollableRef.current) {
return;
}
if (isSubmitting && scrollToBottom && abortScroll !== true) {
scrollToBottom();
}
return () => {
if (abortScroll) {
if (abortScroll === true) {
scrollToBottom && scrollToBottom.cancel();
}
};
}, [isSubmitting, messagesTree, scrollToBottom, abortScroll]);
useEffect(() => {
if (!messagesEndRef.current || !scrollableRef.current) {
return;
}
if (scrollToBottom && autoScroll && conversationId !== Constants.NEW_CONVO) {
scrollToBottom();
}