feat(messagesList): auto scroll on new message

[mamadoudicko]

Description

Screen.Recording.2023-08-25.at.11.58.03.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 25, 2023 10:01am
quivrapp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 25, 2023 10:01am

[github-actions]

Risk Level 2 - /home/runner/work/quivr/quivr/frontend/app/chat/[chatId]/components/ChatMessages/hooks/useChatMessages.ts

The code seems to be well written, but there are a few points that could be improved for better performance and readability:

1. The scrollToBottom function is being debounced, but it's not clear why this is necessary. If the function is being called too often, it might be better to throttle it instead of debouncing it. Debouncing might cause the scroll to lag behind, especially if there are many messages being added in quick succession.

2. The useEffect hook that calls scrollToBottom is dependent on history and scrollToBottom. This means that it will be called every time history or scrollToBottom changes. If history changes often, this could lead to performance issues. Consider optimizing this.

3. The computeCardHeight function is directly manipulating the DOM, which is generally not recommended in React. Consider using state to store the card height and updating it using setState.

Here's an example of how you might implement these changes:

const [cardHeight, setCardHeight] = useState(0);

const computeCardHeight = () => {
  if (chatListRef.current) {
    const cardTop = chatListRef.current.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;
    const newCardHeight = windowHeight - cardTop - chatInputHeightEstimation;
    setCardHeight(newCardHeight);
  }
};

useEffect(() => {
  computeCardHeight();
  window.addEventListener(\"resize\", computeCardHeight);

  return () => {
    window.removeEventListener(\"resize\", computeCardHeight);
  };
}, []);

chatListRef.current.style.height = `${cardHeight}px`;

---

🔄🚀📏

---

Powered by Code Review GPT