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