Fix/chat window scroll

[Madhavi1108]

Description

This PR fixes an issue where the chat window would automatically scroll to the bottom whenever the messages array changed, even if the modification only affected an existing message (such as edits or reactions). The updated implementation introduces context-aware auto-scroll logic that only scrolls when appropriate, preserving the user's current reading position during edits while maintaining the expected behavior for new messages and session changes.

The solution leverages state tracking with React refs, conditional scroll detection, and comprehensive regression tests to provide a smoother and more predictable chat experience.

Closes #248

Type of Change

• Bug fix
• New feature
• Refactoring
• Documentation update

Checklist

• Code follows project conventions
• Existing functionality preserved
• Auto-scroll logic corrected
• Regression tests added
• Ready for testing

---

What Was Implemented

Auto-Scroll Logic Fix

Refactored the chat window's automatic scrolling behavior to avoid unnecessary viewport jumps.

Updated Component

• ChatWindow.jsx

Previously, scrolling was triggered unconditionally whenever the messages array changed, causing the viewport to jump to the bottom even when editing older messages.

The new implementation performs context-aware checks before scrolling.

---

Previous State Tracking

Introduced useRef-based tracking to compare the previous and current chat state.

The implementation maintains references for:

• Previous message count
• Previous session identifier

This enables the component to distinguish between legitimate append operations and in-place updates.

---

New Message Detection

Automatic scrolling now occurs when a new message is appended to the conversation.

If the current message count exceeds the previously recorded count:

• The viewport scrolls to the latest message
• Existing expected chat behavior is preserved

This maintains the natural experience during active conversations.

---

Session Change Handling

Added detection for active chat session changes.

When users switch between conversations:

• The viewport automatically scrolls to the appropriate position
• Newly loaded conversations render correctly

This preserves expected navigation behavior.

---

Initial Load Support

Retained automatic scrolling during the first render of a conversation.

On initial message loading:

• The viewport scrolls appropriately
• Users immediately see the most recent content

This behavior remains unchanged from the intended user experience.

---

Streaming Message Support

Continued support for streaming responses.

If the final message is actively streaming:

• Automatic scrolling remains enabled
• Users continue to see newly generated content in real time

This preserves the usability of incremental response rendering.

---

Stable Position During Message Edits

Modified the scrolling behavior for updates affecting existing messages.

When operations such as:

• Message edits
• Reaction updates
• Other in-place modifications

occur without increasing the message count, the current scroll position is preserved.

This prevents disruptive jumps while reviewing historical conversations.

---

Regression Test Suite

Added automated tests covering the updated scrolling behavior.

New Test

• ChatWindow.test.jsx

The test suite validates:

• Automatic scrolling for newly appended messages
• Correct behavior during session changes
• Initial conversation loading
• Streaming message updates
• Stable viewport position during edits to existing messages

These tests protect against future regressions.

---

Test Validation

Executed the frontend test suite to verify the implementation.

Verification

• npx vitest run

The updated scrolling logic and regression tests execute successfully within the project's testing framework.

---

Benefits

• Eliminates unwanted auto-scroll during message edits
• Preserves reading position while reviewing history
• Maintains automatic scrolling for new messages
• Supports session switching behavior
• Preserves streaming response experience
• Improves overall chat usability
• Reduces disruptive viewport jumps
• Context-aware scrolling logic
• Regression-tested implementation
• Scalable foundation for future chat enhancements

---

Acceptance Criteria

• Auto-scroll no longer triggers on message edits
• Auto-scroll preserved for newly appended messages
• Auto-scroll preserved on initial conversation load
• Auto-scroll preserved during session changes
• Auto-scroll preserved for streaming responses
• Previous message count tracked correctly
• Previous session identifier tracked correctly
• Existing scroll behavior remains unaffected where appropriate
• Regression tests added
• Test suite executed successfully
• Existing functionality preserved

---

Technical Notes

• The scrolling implementation now uses useRef to maintain previous message counts and session identifiers, allowing the component to differentiate between appended messages and in-place updates.
• Automatic scrolling is conditionally triggered only during initial loads, session transitions, message appends, or active streaming scenarios, preventing unnecessary viewport movement during edits or reactions.
• Existing messages that are modified without increasing the overall array length no longer cause scrollIntoView() to execute, preserving the user's current reading position.
• A dedicated ChatWindow.test.jsx regression suite validates all supported scrolling scenarios and protects the behavior from future changes.
• The solution maintains backward compatibility with existing chat workflows while significantly improving the user experience for editing and interacting with historical messages.

[vercel]

@Madhavi1108 is attempting to deploy a commit to the Darshan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[imDarshanGK]

@Madhavi1108 add video demo

[imDarshanGK]

@Madhavi1108

[Madhavi1108]

Hi @imDarshanGK ,
Just wanted to know if there is any specific reason why the backend and frontend tests are failing so that I can work on it

WhatsApp.Video.2026-06-25.at.12.38.43.mp4