#7522: fix(webchat): auto-scroll when message queue changes
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
#15110: fix: enable auto-scroll during assistant response streaming
by jwchmodx · 2026-02-13
86.8%
#20347: fix(webchat): resolve streaming scroll race condition
by ndaemy · 2026-02-18
83.4%
#14966: fix(webchat): preserve user message visibility after chat.send
by BenediktSchackenberg · 2026-02-12
81.3%
#3721: fix(ui): webchat not displaying chat responses
by maxmaxrouge-rgb · 2026-01-29
80.0%
#9122: fix(webchat): constrain .chat-new-messages to button size
by ridermw · 2026-02-04
79.6%
#22798: feat(webchat): ChatGPT-style multi-chat threads with generated titles
by opnsec · 2026-02-21
78.5%
#14309: fix(ui): resolve chat event session key mismatch
by justonlyforyou · 2026-02-11
77.9%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
77.5%
#19754: feat(webchat): add cursor-based pagination to chat.history
by aleiby · 2026-02-18
76.8%
#19343: Refactor chat state management: reset chat messages and queue on se...
by saurav470 · 2026-02-17
76.8%