← Back to PRs

#7522: fix(webchat): auto-scroll when message queue changes

by alsoknownasfoo open 2026-02-02 22:50 View on GitHub →
app: web-ui
# fix(webchat): auto-scroll when message queue changes ## Problem When sending messages while a run is in progress, messages get queued and a "Queued (n)" box appears over the chat thread. This box takes vertical space, reducing the visible height of the chat thread — but the scroll position doesn't adjust. **Result:** The latest messages get hidden behind the queue box, and users have to manually scroll to see them. ## Solution Call `scheduleChatScroll()` when the queue changes: - When a message is **added** to the queue → queue box appears/grows - When a message is **removed** from the queue → queue box shrinks/disappears This keeps the latest messages visible as the queue box resizes. ## Why this is safe - `scheduleChatScroll` is already used throughout `app-chat.ts` - It respects user intent: only auto-scrolls if user was already near the bottom - No state mutation — purely visual adjustment - No new dependencies ## Changes **`ui/src/ui/app-chat.ts`** ```diff // In enqueueChatMessage(), after pushing to queue: + // Re-scroll so latest messages stay visible when queue box appears/grows + scheduleChatScroll(host as unknown as Parameters<typeof scheduleChatScroll>[0]); // In removeQueuedMessage(), after filtering queue: + // Re-scroll when queue shrinks to reclaim space for messages + scheduleChatScroll(host as unknown as Parameters<typeof scheduleChatScroll>[0]); ``` ## Testing 1. Start a chat, send a message that triggers a long-running response 2. While the assistant is responding, send additional messages (they'll queue) 3. **Before fix:** Latest messages hidden behind queue box 4. **After fix:** Chat auto-scrolls to keep latest messages visible 5. Removing queued messages also adjusts scroll properly --- ## 🤖 AI-Assisted PR This fix was developed with AI assistance (Claude via OpenClaw). - **Testing level:** - ✅ Manually tested in local OpenClaw instance — fix confirmed working - ✅ `pnpm test` — 34 test files, 208 tests passed - ✅ UI build passes - **Understanding:** Yes — the change adds two calls to an existing scroll utility function that's already used elsewhere in the same file. The function respects user scroll position and only auto-scrolls when near bottom. <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts the webchat UI’s scroll behavior so that when the “Queued (n)” overlay changes size (messages added to/removed from `chatQueue`), the chat thread re-evaluates whether it should stick to the bottom. Concretely, it adds `scheduleChatScroll(...)` calls after queue mutations in `enqueueChatMessage()` and `removeQueuedMessage()`, leveraging the existing `scheduleChatScroll` logic in `ui/src/ui/app-scroll.ts` that only auto-scrolls when the user is already near the bottom (or during initial forced scroll). <h3>Confidence Score: 4/5</h3> - This PR is likely safe to merge; it makes a small, UI-only behavior change using existing scroll logic. - Change scope is minimal (two additional calls into an existing debounced scroll helper) and doesn’t alter persisted state or network behavior. Main remaining concern is maintainability around the `unknown` casts, which can mask future type drift but should not affect runtime behavior today. - ui/src/ui/app-chat.ts <!-- greptile_other_comments_section --> <sub>(2/5) Greptile learns from your feedback when you react with thumbs up/down!</sub> <!-- /greptile_comment -->

Most Similar PRs