Prompt starters

Four example prompts drawn from the current project rather than written generically, each filling the composer rather than sending. A twelve-item grid of the same idea reads as the full list of what the product can do.

npx shadcn@latest add button
npm i lucide-react

Tokens this needs: --card, --card-foreground, --background, --accent, --accent-foreground, --muted-foreground, --border, --input, --chart-1

────────────────────────────────────────────────────────────────────────
// PromptStarters.tsx
────────────────────────────────────────────────────────────────────────

import { RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";

type Props = {
  /** Three or four, drawn from the current project. A grid of twelve reads
   *  as a menu, and a menu is read as the full list of what the thing can do. */
  starters: string[];
  /** Fills the composer. A click lands in the box so the example stays a
   *  starting point, and nothing is sent that the viewer did not read. */
  onPick: (text: string) => void;
  /** After a handful of conversations the viewer has a model, and the examples
   *  become furniture between them and the box. Past this many, fade to one
   *  refresh control. */
  conversations?: number;
  onRefresh?: () => void;
};

const FURNITURE_AFTER = 5;

export function PromptStarters({ starters, onPick, conversations = 0, onRefresh }: Props) {
  if (conversations >= FURNITURE_AFTER && onRefresh) {
    return (
      <Button variant="ghost" size="sm" onClick={onRefresh} className="text-muted-foreground">
        <RefreshCw className="size-4" /> suggest something
      </Button>
    );
  }

  return (
    <div className="flex flex-col gap-2">
      {starters.map((s) => (
        <Button
          key={s}
          variant="outline"
          onClick={() => onPick(s)}
          className="h-auto justify-start whitespace-normal px-3 py-2 text-left font-normal"
        >
          {s}
        </Button>
      ))}
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { PromptStarters } from "./PromptStarters";
import { Textarea } from "@/components/ui/textarea";

/** Four starters from the project. Picking one fills the box below it, and nothing is sent. */
export default function Demo() {
  const [draft, setDraft] = useState("");
  return (
    <div className="rounded-lg border bg-card p-4">
      <PromptStarters
        starters={[
          "Summarise the lease, list break clauses",
          "Compare Q3 spend against the forecast",
          "Draft a reply to the landlord",
          "Find every date mentioned",
        ]}
        onPick={setDraft}
      />
      <Textarea
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        rows={2}
        placeholder="Ask a question"
        aria-label="Ask a question"
        className="mt-4 resize-none"
      />
    </div>
  );
}