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

[H0llyW00dzZ]

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

Issues:

• ChatGPTNextWeb#4019

[vercel[bot]]

@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[bot]]

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 4b3c41a4fd4fa293bffe0b9d0399d34d801e4e61 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 4b3c41a4fd4fa293bffe0b9d0399d34d801e4e61 + 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.
}