Simplify [UI/UX] [Chat] [Front End] scrollDomToBottom

[H0llyW00dzZ]

• [+] refactor(chat.tsx): improve smooth scrolling behavior in useScrollToBottom function

Issues:

• [Bug] Can not scroll up and down when the model is steaming response #4019

[vercel]

@H0llyW00dzZ is attempting to deploy a commit to the NextChat Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Your build has completed!

Preview deployment

[H0llyW00dzZ]

Note

This so smoothly unlike stupid typescript using requestAnimationFrame that complexity

[kyboi]

This works well, also allows scrolling back up while response is still streaming. However, sometimes it won't keep scrolling down even if nothing was touched and the answer is still streaming in.

[H0llyW00dzZ]

This works well, also allows scrolling back up while response is still streaming. However, sometimes it won't keep scrolling down even if nothing was touched and the answer is still streaming in.

haven't improve yet, its very complexity because of codebase too large and other, Also I am still figure out to made it better

[H0llyW00dzZ]

anyway its difficult to maintain especially for improve, because of stupid complexity that I don't fucking understand about frontend especially react,typescript unlike backend written in go

[kyboi]

If found it's the actual smooth scrolling that breaks this. If you make it immediately update the scrolling position it keeps scrolling down, unless the user scrolls back up.

See 4b3c41a for an example

[H0llyW00dzZ]

If found it's the actual smooth scrolling that breaks this. If you make it immediately update the scrolling position it keeps scrolling down, unless the user scrolls back up.

See 4b3c41a for an example

wait I think I know how to improve it

[H0llyW00dzZ]

this a better one but not smoothly, can scroll up to 999999+ messages combine with this commit 4b3c41a + using react custom hook

https://imgur.com/hmmDqkt

[H0llyW00dzZ]

the custom hook:

// Custom hook for debouncing a function
function useDebouncedEffect(effect: () => void, deps: any[], delay: number) {
  // Include `effect` in the dependency array for `useCallback`
  const callback = useCallback(effect, [effect, ...deps]);

  useEffect(() => {
    const handler = debounce(callback, delay);

    handler();

    // Cleanup function to cancel the debounced call if the component unmounts
    return () => handler.cancel();
  }, [callback, delay]); // `callback` already includes `effect` in its dependencies, so no need to add it here again.
}