# An empty state with guidance is shown before the first message

- **Pattern:** `ab-000153` (`ai-chat-visibility.input-and-history.empty-state-guidance`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000153
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000153)

## Why it matters

Without an empty state, a first-time user lands on a blank canvas with a single input box and no signal about what the AI can do, how to phrase a prompt, or what kinds of answers to expect. First-session activation — the user typing a first successful prompt — is the single most important conversion metric for any AI chat product, and a cold empty state is the largest drag on that metric. Example prompts also help set quality expectations and steer new users away from low-quality first attempts.

## Severity rationale

Low because returning users are unaffected, but first-session activation is disproportionately hurt by a cold empty canvas.

## Remediation

In `src/components/chat/ChatWindow.tsx`, render a conditional empty state when `messages.length === 0` that includes a welcome line and at least two clickable example prompts that pre-fill the input. Keep the copy specific to the AI's actual capabilities.

```tsx
{messages.length === 0 && (
  <div className="flex flex-col items-center gap-4 py-12">
    <h2>How can I help?</h2>
    {['Explain this concept', 'Help me debug'].map(prompt => (
      <Button key={prompt} variant="outline" onClick={() => setInput(prompt)}>{prompt}</Button>
    ))}
  </div>
)}
```

## Detection

- **ID:** `empty-state-guidance`
- **Severity:** `low`
- **What to look for:** Check what the chat interface shows when no messages exist (on first load or after clearing history). Look for conditional rendering when `messages.length === 0` — an empty state, welcome message, or example prompts. Count the number of example prompts offered if any. Without this, new users see a blank area and may not know what the AI can do or how to start.
- **Pass criteria:** When the message list is empty, a helpful empty state is rendered — a welcome message, a description of the AI's capabilities, or at least 2 example prompt suggestions users can click to start a conversation.
- **Fail criteria:** When messages are empty, only the input box and a blank area are shown with no guidance or context for new users.
- **Skip (N/A) when:** The chat is pre-loaded with a system or onboarding message from the AI (the AI itself provides the guidance), making a separate empty state redundant.
- **Detail on fail:** `"No empty state found — messages.length === 0 renders a blank area; new users receive no guidance on what to type"`
- **Remediation:** In `src/components/chat/ChatWindow.tsx`, add an empty state:

  ```tsx
  {messages.length === 0 && (
    <div className="flex flex-col items-center gap-4 py-12">
      <h2>How can I help?</h2>
      {['Explain this concept', 'Help me debug'].map(prompt => (
        <Button key={prompt} variant="outline" onClick={() => setInput(prompt)}>{prompt}</Button>
      ))}
    </div>
  )}
  ```

Taxons: user-experience

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