An empty state with guidance is shown before the first message

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.

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.

{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>
)}

• ID: ai-chat-visibility.input-and-history.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:

  {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>
  )}