GIE-307: enable back to top while streaming

[kdoberst]

Description

While testing the scrolling behavior while message streaming, it was discovered that the "back to top" button was not working correctly. This PR attempts to fix this bug.

Our wanted behavior appears to be not exactly what PatternFly implemented. In order to get what we want working - it means working around some internal PatternFly behavior. There is often a race condition that happens between turning autoscroll off and "back to top" behavior. That is why you will a check for timing in the code. Because we are working on a race condition, finding a solution was not easy. Cursor wrote a lot of the code in the PR.

Here is what should happen when messages are streaming:

• If the user doesn't scroll or interact with either "back to" button, the app will autoscroll so the last message part is visible.
• If the user manually scrolls up so the last message part is no longer visible, the auto scrolling will stop
• If the user clicks on the "back to top" button, the app will scroll to so the very first message in the conversation is visible and addition autoscrolling stops
• If the user manually scrolls back down to the bottom of the conversations, autoscrolling will continue (so the last message part is always visible)
• If the user clicks on the "back to bottom" button, the app scrolls so the last message part is visible and starts autoscrolling.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Code refactoring (no functional changes)
• ⚡ Performance improvement
• 🧪 Test updates

Related Issues

Fixes # GIE-307

Changes Made

See description

Testing Done

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed
• Tested on different browsers/devices (if applicable)

Test Details:

Screenshots/Videos

Click to expand

Definition of Done (DOD)

Code Quality

• Code follows project style guidelines and conventions
• Code has been self-reviewed for logic, readability, and best practices
• No debugging code (console.logs, commented code, etc.) left behind
• No linter errors or warnings introduced
• Code is properly commented where necessary

Testing

• Unit tests added/updated and passing
• Integration tests added/updated (if applicable)
• Manual testing completed successfully
• Edge cases and error scenarios tested
• No existing tests broken by changes

Documentation

• Code documentation updated (JSDoc, inline comments)
• README updated (if applicable)
• User-facing documentation updated (if applicable)
• CHANGELOG updated (if maintained)

Review & Quality

• PR description is clear and complete
• All related issues are linked
• Breaking changes are clearly documented
• Security implications considered and addressed
• Performance impact assessed
• Accessibility requirements met (if UI changes)

Pre-Merge

• All CI/CD checks passing
• At least one approval from code owner/reviewer
• All review comments addressed or resolved
• Branch is up to date with target branch
• No merge conflicts

Additional Notes

Reviewer Guidance

---

[openshift-ci-robot]

@kdoberst: This pull request references GIE-307 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Description

While testing the scrolling behavior while message streaming, it was discovered that the "back to top" button was not working correctly. This PR attempts to fix this bug.

Our wanted behavior appears to be not exactly what PatternFly implemented. In order to get what we want working - it means working around some internal PatternFly behavior. There is often a race condition that happens between turning autoscroll off and "back to top" behavior. That is why you will a check for timing in the code. Because we are working on a race condition, finding a solution was not easy. Cursor wrote a lot of the code in the PR.

Here is what should happen when messages are streaming:

• If the user doesn't scroll or interact with either "back to" button, the app will autoscroll so the last message part is visible.
• If the user manually scrolls up so the last message part is no longer visible, the auto scrolling will stop
• If the user clicks on the "back to top" button, the app will scroll to so the very first message in the conversation is visible and addition autoscrolling stops
• If the user manually scrolls back down to the bottom of the conversations, autoscrolling will continue (so the last message part is always visible)
• If the user clicks on the "back to bottom" button, the app scrolls so the last message part is visible and starts autoscrolling.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Code refactoring (no functional changes)
• ⚡ Performance improvement
• 🧪 Test updates

Related Issues

Fixes # GIE-307

Changes Made

See description

Testing Done

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed
• Tested on different browsers/devices (if applicable)

Test Details:

Screenshots/Videos

Click to expand

Definition of Done (DOD)

Code Quality

• Code follows project style guidelines and conventions
• Code has been self-reviewed for logic, readability, and best practices
• No debugging code (console.logs, commented code, etc.) left behind
• No linter errors or warnings introduced
• Code is properly commented where necessary

Testing

• Unit tests added/updated and passing
• Integration tests added/updated (if applicable)
• Manual testing completed successfully
• Edge cases and error scenarios tested
• No existing tests broken by changes

Documentation

• Code documentation updated (JSDoc, inline comments)
• README updated (if applicable)
• User-facing documentation updated (if applicable)
• CHANGELOG updated (if maintained)

Review & Quality

• PR description is clear and complete
• All related issues are linked
• Breaking changes are clearly documented
• Security implications considered and addressed
• Performance impact assessed
• Accessibility requirements met (if UI changes)

Pre-Merge

• All CI/CD checks passing
• At least one approval from code owner/reviewer
• All review comments addressed or resolved
• Branch is up to date with target branch
• No merge conflicts

Additional Notes

Reviewer Guidance

---

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[kdoberst]

/retest

[kdoberst]

/retest

[vishsanghishetty]

@kdoberst
Looks good overall 👏🏽 , this fixes the core issue with back-to-top during streaming, and the new tests cover the key race behavior well. I’m approving.
One follow-up I’d still like is if we can we replace the fixed 300ms grace window with intent/state-based suppression (stay suppressed after back-to-top until the user scrolls/clicks back to bottom)? The hardcoded timeout works, but this would be more robust across slower devices and long conversations.

How I QE'ed manually

1. Started streaming and did not scroll; confirmed it stayed pinned to the latest streamed content.
2. Scrolled up manually during streaming; confirmed autoscroll stopped.
3. Clicked the back-to-top button while streaming; confirmed it moved to the top and stayed there (no immediate snap back).
4. Clicked back-to-bottom button while streaming; confirmed it jumped to latest content and autoscroll resumed.
5. Scrolled up, then manually returned to bottom; confirmed streaming stayed pinned again.
6. Repeated top/bottom interactions quickly during streaming; confirmed no jitter/lockup and expected behavior.
7. Switched conversations after top-click during streaming; confirmed scroll behavior initialized correctly in the new conversation.

How I QE'ed (automated):
yarn test src/components/chat/MessageList.test.tsx --watch=false
yarn test src/components/chat/Chat.test.tsx --watch=false

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: kdoberst, vishsanghishetty

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [kdoberst,vishsanghishetty]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci]

@kdoberst: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/lint-aws-genie-web-client	dc75745	link	unknown	/test lint-aws-genie-web-client

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

[kdoberst]

@kdoberst Looks good overall 👏🏽 , this fixes the core issue with back-to-top during streaming, and the new tests cover the key race behavior well. I’m approving. One follow-up I’d still like is if we can we replace the fixed 300ms grace window with intent/state-based suppression (stay suppressed after back-to-top until the user scrolls/clicks back to bottom)? The hardcoded timeout works, but this would be more robust across slower devices and long conversations.

Yep - hate it too. It is to get around what is happening inside of PatternFly. It tried numerous ways more elegant approaches but this was the only way I could get around what ever PF is doing.