Implement "Scroll to Bottom" Button for New Chat Messages #3
Description
📝 Objective
Improve the user experience by adding a "Scroll to Bottom" button in the chat. This button will appear whenever a new message is received, and when clicked, it will scroll the chat window to the bottom to display the latest messages.
🎯 Tasks
- Add a "Scroll to Bottom" button that appears when the user is scrolled up and new messages are received.
📃 Requirements
- The button should only be visible when there are new messages that the user has not seen (i.e., when the user has scrolled up and is not currently at the bottom of the chat).
- The button should be hidden when the user is already at the bottom of the chat (i.e., the latest message is already visible).
- If possible, implement a smooth scroll animation to give the user a better experience when the button is clicked.
📋 Skills Required
- Javascript
- ReactJs or NextJs
- TailwindCss
📂 Files to Update
- app/components/ChatBox.js
- app/components/MessageList.js
✅ Acceptance Criteria
- The button should work both in mobile and computers alike.
- In smaller screens (eg: mobiles), the button should be small enough to not restrict the user's view of the chat messages.
🔥Bonus (optional)
- Implement a small animation or indicator on the button (e.g., a bouncing arrow or a pulse animation) to indicate that new messages have arrived.