diff --git a/client/src/hooks/Messages/useMessageHelpers.ts b/client/src/hooks/Messages/useMessageHelpers.ts index 1ca2b74d96..eaefdb9c17 100644 --- a/client/src/hooks/Messages/useMessageHelpers.ts +++ b/client/src/hooks/Messages/useMessageHelpers.ts @@ -1,5 +1,5 @@ import copy from 'copy-to-clipboard'; -import { useEffect, useRef } from 'react'; +import { useEffect, useRef, useCallback } from 'react'; import { useGetEndpointsQuery } from 'librechat-data-provider/react-query'; import type { TMessage } from 'librechat-data-provider'; import type { TMessageProps } from '~/common'; @@ -43,13 +43,13 @@ export default function useMessageHelpers(props: TMessageProps) { const enterEdit = (cancel?: boolean) => setCurrentEditId && setCurrentEditId(cancel ? -1 : messageId); - const handleScroll = () => { + const handleScroll = useCallback(() => { if (isSubmitting) { setAbortScroll(true); } else { setAbortScroll(false); } - }; + }, [isSubmitting, setAbortScroll]); const icon = Icon({ ...conversation, diff --git a/client/src/hooks/Messages/useMessageScrolling.ts b/client/src/hooks/Messages/useMessageScrolling.ts index a523e0b17e..c2f730fb20 100644 --- a/client/src/hooks/Messages/useMessageScrolling.ts +++ b/client/src/hooks/Messages/useMessageScrolling.ts @@ -63,6 +63,12 @@ export default function useMessageScrolling(messagesTree?: TMessage[] | null) { if (isSubmitting && scrollToBottom && !abortScroll) { scrollToBottom(); } + + return () => { + if (abortScroll) { + scrollToBottom && scrollToBottom?.cancel(); + } + }; }, [isSubmitting, messagesTree, scrollToBottom, abortScroll]); useEffect(() => { diff --git a/client/src/hooks/useScrollToRef.ts b/client/src/hooks/useScrollToRef.ts index 941fa5aac7..fdc2444fb6 100644 --- a/client/src/hooks/useScrollToRef.ts +++ b/client/src/hooks/useScrollToRef.ts @@ -17,7 +17,7 @@ export default function useScrollToRef({ targetRef, callback, smoothCallback }: // eslint-disable-next-line react-hooks/exhaustive-deps const scrollToRef = useCallback( - throttle(() => logAndScroll('instant', callback), 450, { leading: true }), + throttle(() => logAndScroll('instant', callback), 250, { leading: true }), [targetRef], );