# Scroll to bottom affordance is present for long conversations

- **Pattern:** `ab-000139` (`ai-chat-visibility.response-display.scroll-to-bottom-button`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000139
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000139)

## Why it matters

In any non-trivial conversation the user will scroll up to re-read earlier answers, copy code, or check context, and without a scroll-to-bottom affordance they miss new streaming responses entirely. Messages arrive silently off-screen and the user assumes the AI is still thinking or has failed. The industry convention established by ChatGPT, Claude, and Gemini is either auto-scroll on new message or a floating jump-to-latest button, and users have learned to expect it.

## Severity rationale

Low because users can manually scroll, but the friction compounds across every long conversation in the product.

## Remediation

In your chat component at `src/components/chat/ChatWindow.tsx`, add a `useRef` anchor after the last message and a `useEffect` that scrolls it into view whenever the message count changes. For a polished UX, only auto-scroll when the user is already near the bottom.

```tsx
const messagesEndRef = useRef<HTMLDivElement>(null);
useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages.length]);
```

## Detection

- **ID:** `scroll-to-bottom-button`
- **Severity:** `low`
- **What to look for:** Count all scroll-related mechanisms in the chat component: `scrollIntoView()` calls, `scrollTo()` calls, scroll event listeners, and floating scroll buttons. In long conversations, users scroll up to read history. When a new AI response arrives, check whether the UI automatically scrolls to the bottom, or provides a visible "Scroll to bottom" button. Look for `useEffect` hooks that call `scrollIntoView()` or `scrollTo()` on new messages, or a floating button that appears when the user is not at the bottom.
- **Pass criteria:** Either the UI auto-scrolls to the latest message when a new response arrives (a `useEffect` watching message count), or a visible "scroll to bottom" button appears when the user has scrolled up. At least 1 scroll management mechanism must be present.
- **Fail criteria:** Neither auto-scroll nor a scroll-to-bottom button is implemented. New messages arrive silently when the user is scrolled up.
- **Skip (N/A) when:** The chat interface only ever shows a single message exchange with no history visible.
- **Detail on fail:** `"No auto-scroll or scroll-to-bottom button found; new messages arrive silently when user is scrolled up in conversation history"`
- **Remediation:** In your chat component at `src/components/chat/ChatWindow.tsx`, add auto-scroll:

  ```tsx
  const messagesEndRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages.length]);
  // Place <div ref={messagesEndRef} /> after the last message
  ```

  For a more polished UX, only auto-scroll when the user is already near the bottom (within ~100px), and show a floating scroll button otherwise.

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-000139