Scrolling behavior on first message

[mattlindsey]

Weird scrolling behavior reported, especially the first conversation of a chat which always pulls the mouse "down", so user cannot select anything, scroll up, etc. Not only while the LLM streams the tokens, but also after it finishes.

• Report:
  Seems to be a time-based issue, because it won't be a problem after a few (10 ?) seconds into the chat.
  So in my case (I am on Firefox) the first LLM answer to a question in a conversation always pulls the scrolling area down. The second answer does it as well. The difference is that for the first answer this behaviour even is the case for a limited time after the bot has finished the answer.
  At the same time for the first answer, the whole conversation window flickers like wild, so the text disappears and appears again, then disappears, and appears again. This is not the case for any further answers

• Developer comment
  I remember running into this issue too. The scroll behavior was quite tricky to implement and I never got it quite right. ChatGPT recently changed theirs to be simpler where it simply scrolls to the top once for each new message and long messages can go below the fold. It might be worth us switching to that

I'd suggest looking at how ChatGPT does scrolling, how HostedGPT does it, then make HostedGPT match. There might be a bunch of code that can be removed (e.g. stimulus controller).

[mattlindsey]

From 'marc' on discord:

Here's an AI summary of ChatGPT's approach:

ChatGPT-style Scrolling Implementation

  Problem: Traditional chat UIs auto-scroll to bottom when new messages arrive, causing jarring jumps when assistant responses come in.

  Solution: Implement ChatGPT's elegant approach:

  1. On user message submission: Scroll to position the user's message at the top of viewport (not bottom)
  2. On assistant response: No scrolling - response naturally appears below in the already-visible space
  3. Dynamic padding: Add min-height: calc(100vh - 250px) to assistant messages

  This creates "virtual padding" that:
  - Ensures enough space to scroll user messages to top
  - Only appears for short responses
  - Disappears automatically for long responses
  - Prevents unnecessary whitespace

  Key implementation points:
  - Remove auto-scroll on new message arrival
  - Only scroll when user sends a message
  - Use scrollToElement() to position user message at viewport top with small offset
  - Apply min-height to assistant messages (adjust 250px based on your header/input heights)

  Result: Smooth, predictable scrolling where users see their message → assistant response flows naturally into view without jumps.

Also noted:
Set the scroll once on page load to the last "read message" and never touch it again via code.

[mattlindsey]

Note: The current scrolling seems to have broken in other ways recently. The user is now required to scroll down manually to see the assistant reply. I'm not sure why. This might be the same as Issue 219.

P.S. I should have said 'maybe broken.' I think it is only broken under certain conditions. (Image generation?)
BTW On Render after an Image has been created, an error page comes up and the browser needs to be refreshed.