Scroll to bottom affordance is present for long conversations

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.

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.

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

• ID: ai-chat-visibility.response-display.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:

  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.