useScrollToBottom (user-message-anchor) undershoots on thread load — lands several messages before the last user message

Aperta
  • Qualcosa non va?
#412 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@abhithesys ci sta già lavorando.

Dal 28/3/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

bug

Bug Report: useScrollToBottom with user-message-anchor doesn't reach the last user message on thread load

Package versions
  • @openuidev/react-ui: 0.9.20
  • @openuidev/react-headless: 0.7.11
  • React: 19.2.4
Describe the bug

When loading a thread with many messages (via loadThread), the scroll
position lands several messages before the last user message instead of
placing it at the top of the viewport. The user must manually scroll down
to reach the end of the conversation.
The desired behavior — last user message pinned to the top of the
viewport — is correct; it's just not being achieved.

AI Analysis

The user-message-anchor branch in useScrollToBottom (lines 76-89)
does the right thing in principle:

const lastUserMessageDiv = Array.from(
  element.querySelectorAll(userMessageSelector)
).pop();
const scrollPosition =
  lastUserMessageDiv.getBoundingClientRect().top -
  element.getBoundingClientRect().top +
  element.scrollTop;
element.scrollTo({ top: scrollPosition, behavior: "smooth" });

The scroll fires in the useEffect on line 93-103 the moment isLoadingMessages flips to false. The issue is that at that point the message components haven't finished laying out — complex content like OpenUI components, Markdown blocks, tool-call accordions, and images are still mounting and expanding. As a result:

getBoundingClientRect() returns stale geometry — the positions are based on partially-rendered content, so the calculated scrollPosition is too low (too far up in the chat).

behavior: "smooth" locks in the stale target — the animated scroll commits to the position computed at call time. As content continues to expand below the measurement point the target becomes increasingly wrong, but smooth scroll doesn't re-evaluate.

Together these cause the scroll to land several messages short of the actual last user message.

Steps to reproduce

  • Use Shell.ScrollArea with the default scrollVariant ("user-message-anchor").
  • Have a thread with ~20+ messages, ideally containing assistant responses with rich content (OpenUI Renderer output, Markdown with code blocks, tool calls).
  • Load the thread (click it in the sidebar → loadThread).
    Observe: the viewport lands a few messages above the last user message. Scrolling down manually reveals the remaining messages.

Expected behavior

The last user message should be positioned at the top of the viewport after the thread finishes loading.

Lingua principale
TypeScript
Stelle
10k
Fork
698
Merge medio
1g 6h
PR unite (30g)
148

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di thesysdev/openui

Tutte le issue di thesysdev/openui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.