fix: playground does not scroll down to the latest user message upon sending (Regression)

[deon-sanchez]

This pull request improves the chat scrolling behavior in the FlowPageSlidingContainerContent component by ensuring the chat view automatically scrolls to the bottom whenever a new message is sent, even if the user has previously scrolled up. The implementation uses the useStickToBottom hook for better scroll management and refactors how the StickToBottom component is configured.

Chat scrolling improvements:

• Introduced the useStickToBottom hook and its instance to manage scroll behavior, replacing direct prop usage on the StickToBottom component.
• Added logic to detect when a new message is sent and automatically scroll the chat to the bottom smoothly, even if the user is not already at the bottom.
• Updated the StickToBottom component to use the created stickyInstance instead of passing resize and initial props directly, centralizing scroll control.

Summary by CodeRabbit

• Bug Fixes
  • Enhanced automatic scroll-to-bottom functionality when new messages appear in the chat, providing smoother scrolling behavior.

[coderabbitai]

Walkthrough

The change refactors the stick-to-bottom scrolling mechanism in the sliding container component by introducing a managed instance via the useStickToBottom hook. An effect automatically scrolls to the bottom when chat messages are added, and the StickToBottom component receives the instance through props instead of inline configuration attributes.

Changes

Cohort / File(s)	Summary
Stick-to-Bottom Instance Management src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx	Added useStickToBottom hook and useRef to create a managed stickyInstance. Introduced effect to auto-scroll on chatHistory changes using stickyInstance.scrollToBottom("smooth"). Updated StickToBottom component to receive instance prop instead of inline resize/initial props. Updated effect dependencies to track stickyInstance.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 4

❌ Failed checks (1 error, 3 warnings)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	The PR modifies a React component that fixes a regression bug in chat scrolling behavior, but no tests were added for the modified component despite the repository having comprehensive test infrastructure with 170+ test files.	Create a test file at src/frontend/src/components/core/playgroundComponent/sliding-container/components/tests/flow-page-sliding-container.test.tsx with regression tests for scroll-to-bottom behavior, smooth scroll animation, stickyInstance management, and existing functionality.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Test Quality And Coverage	⚠️ Warning	Pull request implements significant behavioral changes to auto-scroll-to-bottom functionality but provides no test coverage for the new useStickToBottom hook, scroll effect logic, or refactored component usage.	Create test file with comprehensive coverage for useStickToBottom initialization, scroll-to-bottom effect triggering on new messages, smooth scrolling parameters, instance prop passing, and edge cases.
Test File Naming And Structure	⚠️ Warning	PR introduces significant functional changes to chat scrolling behavior in flow-page-sliding-container.tsx without corresponding test coverage in the established Jest tests pattern.	Create test file at src/frontend/src/components/core/playgroundComponent/sliding-container/components/tests/flow-page-sliding-container.test.tsx with comprehensive Jest tests covering useStickToBottom hook, scroll effects, smooth scroll behavior, dependencies, and edge cases.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Excessive Mock Usage Warning	✅ Passed	PR modifies frontend component only with no test files present, so excessive mock usage check is not applicable.
Title check	✅ Passed	The title accurately summarizes the main change: fixing a regression where the playground does not scroll to the latest user message upon sending.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch le-460

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	22.86% (7981/34903)	15.44% (4224/27342)	15.6% (1147/7350)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
2611	0 💤	0 ❌	0 🔥	43.626s ⏱️

[codecov]

Codecov Report

❌ Patch coverage is 0% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 37.33%. Comparing base (5a18aaa) to head (a9363cf).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...ntainer/components/flow-page-sliding-container.tsx	0.00%	11 Missing ⚠️
...ontend/src/components/common/safari-scroll-fix.tsx	0.00%	5 Missing ⚠️

❌ Your patch check has failed because the patch coverage (0.00%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage.
❌ Your project check has failed because the head coverage (42.29%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #12006   +/-   ##
=======================================
  Coverage   37.32%   37.33%           
=======================================
  Files        1592     1592           
  Lines       78279    78294   +15     
  Branches    11824    11826    +2     
=======================================
+ Hits        29216    29228   +12     
- Misses      47442    47446    +4     
+ Partials     1621     1620    -1     

Flag	Coverage Δ
frontend	20.48% <0.00%> (-0.01%)	⬇️
lfx	42.29% <ø> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ontend/src/components/common/safari-scroll-fix.tsx	0.00% <0.00%> (ø)
...ntainer/components/flow-page-sliding-container.tsx	0.00% <0.00%> (ø)

... and 12 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Adam-Aghili]

In safari it does scroll down to the latest message but doesn't show the AI generated text.

Screen.Recording.2026-03-03.at.1.39.22.PM.mov

[Adam-Aghili]

LGTM!