Prompt

'use client';

import {
  BookTextIcon,
  BrainIcon,
  CalendarIcon,
  FolderIcon,
  GlobeIcon,
  PlusIcon,
  PlugIcon,
  ScrollTextIcon,
  SparklesIcon,
  TicketIcon,
  TriangleAlertIcon,
  ZapIcon,
} from 'lucide-react';
import { Menu } from '@/components/panelui/menu';
import { Prompt, type PromptMessage, type PromptModelItem, type PromptState } from '@/components/panelui/prompt';
import { useEffect, useRef, useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

const SKILLS = ['Weekly report', 'Release notes', 'Meeting brief', 'Code review'];

export default function PromptAsk() {
  const [status, setStatus] = useState<PromptState>('idle');
  const [search, setSearch] = useState(true);
  const [calendar, setCalendar] = useState(true);
  const [drive, setDrive] = useState(false);
  const [skill, setSkill] = useState<string | null>(null);
  const [listening, setListening] = useState(false);
  const [sent, setSent] = useState<string | null>(null);
  const timers = useRef<number[]>([]);

  const clear = () => {
    timers.current.forEach(window.clearTimeout);
    timers.current = [];
  };
  useEffect(() => clear, []);

  // Stands in for a model: a moment to read the question, then a few seconds writing.
  const send = ({ text, files }: PromptMessage) => {
    clear();
    setListening(false);
    setSent(text || `${files.length} file${files.length === 1 ? '' : 's'}`);
    setStatus('submitted');
    timers.current.push(window.setTimeout(() => setStatus('streaming'), 1200));
    timers.current.push(window.setTimeout(() => setStatus('idle'), 4200));
  };

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Prompt
        onSubmit={send}
        status={status}
        onStop={() => {
          clear();
          setStatus('idle');
        }}
      >
        <Prompt.Field>
          <Prompt.Attachments />
          <Prompt.Textarea placeholder="Ask about your notes, or attach a file" />
          <Prompt.Footer>
            <Prompt.Tools>
              <Prompt.Menu>
                <Prompt.AttachItem />
                <Menu.Separator />
                <Menu.Sub>
                  <Menu.SubTrigger>
                    <BookTextIcon />
                    Skills
                  </Menu.SubTrigger>
                  <Menu.SubContent>
                    {SKILLS.map((name) => (
                      <Menu.Item key={name} onClick={() => setSkill(name)}>
                        <ScrollTextIcon />
                        {name}
                      </Menu.Item>
                    ))}
                    <Menu.Separator />
                    <Menu.Item>
                      <PlusIcon />
                      Browse skills
                    </Menu.Item>
                  </Menu.SubContent>
                </Menu.Sub>
                <Menu.Sub>
                  <Menu.SubTrigger
                    end={
                      drive ? null : (
                        <Menu.Badge>
                          <TriangleAlertIcon />1
                        </Menu.Badge>
                      )
                    }
                  >
                    <PlugIcon />
                    Connections
                  </Menu.SubTrigger>
                  <Menu.SubContent>
                    <Menu.CheckboxItem checked={calendar} onCheckedChange={setCalendar}>
                      <CalendarIcon />
                      Calendar
                    </Menu.CheckboxItem>
                    <Menu.CheckboxItem checked={drive} onCheckedChange={setDrive}>
                      <FolderIcon />
                      Shared drive
                    </Menu.CheckboxItem>
                    <Menu.Item disabled>
                      <TicketIcon />
                      Issue tracker
                    </Menu.Item>
                  </Menu.SubContent>
                </Menu.Sub>
              </Prompt.Menu>
              {/* A mode that stays in the footer and turns blue while it is on. */}
              <Prompt.Tool label="Search" showLabel pressed={search} onPressedChange={setSearch}>
                <GlobeIcon />
              </Prompt.Tool>
              {/* A skill chosen in the menu, pressed again to put it away. */}
              {skill ? (
                <Prompt.Tool label={skill} showLabel pressed onPressedChange={() => setSkill(null)} title={`Remove ${skill}`}>
                  <ScrollTextIcon />
                </Prompt.Tool>
              ) : null}
              <Prompt.Model items={MODELS} variant="ghost" />
            </Prompt.Tools>
            <Prompt.Submit onVoice={() => setListening((on) => !on)} listening={listening} />
          </Prompt.Footer>
        </Prompt.Field>
        <Prompt.Status icon={<SparklesIcon />}>
          {status === 'submitted' ? 'Reading your question' : 'Writing the answer'}
        </Prompt.Status>
      </Prompt>
      <p className="px-4 text-xs text-muted-foreground" aria-live="polite">
        {listening ? 'Listening…' : sent ? `Sent: ${sent}` : 'Nothing sent yet.'}
      </p>
    </div>
  );
}

'use client';

import { BrainIcon, CalendarIcon, CheckIcon, GlobeIcon, LightbulbIcon, SparklesIcon, ZapIcon } from 'lucide-react';
import { Menu } from '@/components/panelui/menu';
import { Prompt, type PromptModelItem } from '@/components/panelui/prompt';
import { useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

export default function PromptBanner() {
  const [connected, setConnected] = useState(false);
  const [connecting, setConnecting] = useState(false);
  const [search, setSearch] = useState(true);
  const [think, setThink] = useState(false);

  const connect = () => {
    setConnecting(true);
    window.setTimeout(() => {
      setConnecting(false);
      setConnected(true);
    }, 1100);
  };

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Prompt defaultValue="Move Thursday's design review to Friday at ten, and let everyone on it know">
        <Prompt.Banner open={!connected}>
          <CalendarIcon />
          <span className="truncate">Connect your calendar to book and move meetings</span>
          <Prompt.BannerAction loading={connecting} onClick={connect}>
            Connect
          </Prompt.BannerAction>
        </Prompt.Banner>
        <Prompt.Field>
          <Prompt.Textarea placeholder="Ask anything" />
          <Prompt.Footer>
            <Prompt.Tools>
              <Prompt.Menu>
                <Prompt.AttachItem />
                <Menu.Separator />
                <Menu.CheckboxItem checked={search} onCheckedChange={setSearch}>
                  <GlobeIcon />
                  Search the web
                </Menu.CheckboxItem>
                <Menu.CheckboxItem checked={think} onCheckedChange={setThink}>
                  <LightbulbIcon />
                  Think longer
                </Menu.CheckboxItem>
              </Prompt.Menu>
              {search ? (
                <Prompt.Tool label="Search" showLabel pressed onPressedChange={setSearch}>
                  <GlobeIcon />
                </Prompt.Tool>
              ) : null}
              {think ? (
                <Prompt.Tool label="Think" showLabel pressed onPressedChange={setThink}>
                  <LightbulbIcon />
                </Prompt.Tool>
              ) : null}
              <Prompt.Model items={MODELS} variant="ghost" />
            </Prompt.Tools>
            <Prompt.Submit />
          </Prompt.Footer>
        </Prompt.Field>
        <Prompt.Hint />
      </Prompt>
      <p className="px-4 text-xs text-muted-foreground" aria-live="polite">
        {connected ? (
          <span className="inline-flex items-center gap-1.5">
            <CheckIcon className="size-3.5" /> Calendar connected.
          </span>
        ) : (
          'Press Connect to see the banner fold away.'
        )}
      </p>
    </div>
  );
}

'use client';

import { BrainIcon, SparklesIcon, ZapIcon } from 'lucide-react';
import { Prompt, type PromptModelItem, type PromptTaskStatus } from '@/components/panelui/prompt';
import { useEffect, useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

const TASKS = [
  'Read the open pull requests',
  'Group the changes by area',
  'Draft the release notes',
  'Check every link in the notes',
  'Bump the version to 2.4.0',
  'Run the test suite',
  'Tag the release and open a draft',
];

export default function PromptAgent() {
  // How many tasks are done; the next one is in progress.
  const [done, setDone] = useState(2);
  const [running, setRunning] = useState(true);

  useEffect(() => {
    if (!running || done >= TASKS.length) return;
    const timer = window.setTimeout(() => setDone((count) => count + 1), 1800);
    return () => window.clearTimeout(timer);
  }, [done, running]);

  const finished = done >= TASKS.length;
  const statusOf = (index: number): PromptTaskStatus =>
    index < done ? 'done' : index === done && running ? 'active' : 'pending';

  return (
    <div className="w-full max-w-xl">
      <Prompt
        status={running && !finished ? 'streaming' : 'idle'}
        onStop={() => setRunning(false)}
        onSubmit={() => {
          if (finished) setDone(0);
          setRunning(true);
        }}
      >
        <Prompt.Tasks
          defaultExpanded
          title={finished ? 'Release 2.4.0 is ready for review' : running ? 'Preparing release 2.4.0' : 'Paused'}
        >
          {TASKS.map((task, index) => (
            <Prompt.Task key={task} status={statusOf(index)}>
              {task}
            </Prompt.Task>
          ))}
        </Prompt.Tasks>
        <Prompt.Field>
          <Prompt.Textarea placeholder={running && !finished ? 'Steer the agent while it works' : 'Send anything to carry on'} />
          <Prompt.Footer>
            <Prompt.Tools>
              <Prompt.Menu>
                <Prompt.AttachItem />
              </Prompt.Menu>
              <Prompt.Model items={MODELS} defaultValue="lumen-deep" variant="ghost" />
            </Prompt.Tools>
            <Prompt.Submit />
          </Prompt.Footer>
        </Prompt.Field>
      </Prompt>
    </div>
  );
}

'use client';

import { BrainIcon, SparklesIcon, ZapIcon } from 'lucide-react';
import { Prompt, type PromptState, type PromptModelItem } from '@/components/panelui/prompt';
import { useEffect, useRef, useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

export default function PromptThinking() {
  // Busy from the start, so the page opens on the state this example is about.
  const [status, setStatus] = useState<PromptState>('streaming');
  const timer = useRef<number | undefined>(undefined);

  const run = () => {
    window.clearTimeout(timer.current);
    setStatus('submitted');
    timer.current = window.setTimeout(() => setStatus('streaming'), 1000);
  };
  useEffect(() => () => window.clearTimeout(timer.current), []);

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Prompt status={status} onStop={() => setStatus('idle')} onSubmit={run}>
        <Prompt.Field>
          <Prompt.Textarea placeholder="Hang on, the answer is still being written" />
          <Prompt.Footer>
            <Prompt.Tools>
              <Prompt.Attach />
              <Prompt.Model items={MODELS} defaultValue="lumen-deep" />
            </Prompt.Tools>
            <Prompt.Submit />
          </Prompt.Footer>
        </Prompt.Field>
        <Prompt.Status icon={<SparklesIcon />}>
          {status === 'submitted' ? 'Reading the question' : 'Thinking about the trade-offs'}
        </Prompt.Status>
      </Prompt>
      <p className="px-4 text-xs text-muted-foreground" aria-live="polite">
        {status === 'idle' ? 'Stopped. Send anything to start again.' : 'Press the stop button to end the answer.'}
      </p>
    </div>
  );
}

'use client';

import { AtSignIcon, BrainIcon, GitBranchIcon, GitPullRequestIcon, LaptopIcon, SparklesIcon, TerminalIcon, ZapIcon } from 'lucide-react';
import { Menu } from '@/components/panelui/menu';
import { Prompt, type PromptModelItem } from '@/components/panelui/prompt';
import { Select } from '@/components/panelui/select';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

const BRANCHES = [
  { value: 'feat/prompt', label: 'feat/prompt-footer-tools' },
  { value: 'fix/planet', label: 'fix/planet-stacking' },
  { value: 'main', label: 'main' },
];

export default function PromptWorkspace() {
  return (
    <div className="w-full max-w-xl">
      <Prompt>
        <Prompt.Field>
          <Prompt.Textarea placeholder="Ask for a change, follow up, or attach a screenshot" />
          <Prompt.Footer>
            <Prompt.Tools>
              <Prompt.Menu>
                <Prompt.AttachItem>Add a screenshot</Prompt.AttachItem>
                <Menu.Item>
                  <AtSignIcon />
                  Mention a file
                  <Menu.Shortcut>@</Menu.Shortcut>
                </Menu.Item>
                <Menu.Item>
                  <TerminalIcon />
                  Add terminal output
                </Menu.Item>
              </Prompt.Menu>
              <Prompt.Model items={MODELS} variant="ghost" />
            </Prompt.Tools>
            <Prompt.Tools>
              <Prompt.Submit />
            </Prompt.Tools>
          </Prompt.Footer>
        </Prompt.Field>
        <Prompt.Context>
          <Prompt.ContextItem>
            <LaptopIcon />
            This machine
          </Prompt.ContextItem>
          <Prompt.ContextItem>
            <GitPullRequestIcon />
            #482
          </Prompt.ContextItem>
          <Select items={BRANCHES} defaultValue="feat/prompt">
            <Select.Trigger variant="ghost" size="sm" aria-label="Branch" className="-my-1 ms-auto h-7 max-w-52 text-xs">
              <GitBranchIcon className="size-3.5" />
              <Select.Value />
            </Select.Trigger>
            <Select.Content>
              {BRANCHES.map((branch) => (
                <Select.Item key={branch.value} value={branch.value}>
                  {branch.label}
                </Select.Item>
              ))}
            </Select.Content>
          </Select>
        </Prompt.Context>
      </Prompt>
    </div>
  );
}

'use client';

import {
  BookImageIcon,
  GlobeIcon,
  ImagePlusIcon,
  LightbulbIcon,
  MicIcon,
  PenToolIcon,
  TelescopeIcon,
} from 'lucide-react';
import { Menu } from '@/components/panelui/menu';
import { Prompt } from '@/components/panelui/prompt';
import { useState } from 'react';

export default function PromptInline() {
  const [think, setThink] = useState(false);
  const [search, setSearch] = useState(false);

  return (
    <div className="w-full max-w-2xl">
      <Prompt>
        <Prompt.Field layout="inline">
          <Prompt.Attachments />
          <Prompt.Menu width="field" side="bottom">
            <Prompt.AttachItem shortcut={null}>
              Add files
              <Menu.Description>From this computer</Menu.Description>
            </Prompt.AttachItem>
            <Menu.Item>
              <BookImageIcon />
              Pick from library
              <Menu.Description>Files you have shared before</Menu.Description>
            </Menu.Item>
            <Menu.Item>
              <ImagePlusIcon />
              Make an image
              <Menu.Description>Describe it and get a picture</Menu.Description>
            </Menu.Item>
            <Menu.Separator />
            <Menu.CheckboxItem checked={search} onCheckedChange={setSearch}>
              <GlobeIcon />
              Search the web
              <Menu.Description>Fresh results, with sources</Menu.Description>
            </Menu.CheckboxItem>
            <Menu.Item>
              <TelescopeIcon />
              Research
              <Menu.Description>A long report with citations</Menu.Description>
            </Menu.Item>
            <Menu.Item>
              <PenToolIcon />
              Sketch
              <Menu.Description>Draw something and attach it</Menu.Description>
            </Menu.Item>
          </Prompt.Menu>
          <Prompt.Textarea minRows={1} maxRows={8} placeholder="Message Lumen" />
          <Prompt.Tool label="Think" showLabel variant="ghost" pressed={think} onPressedChange={setThink}>
            <LightbulbIcon />
          </Prompt.Tool>
          <Prompt.Tool label="Dictate" variant="ghost">
            <MicIcon />
          </Prompt.Tool>
          <Prompt.Submit onVoice={() => {}} />
        </Prompt.Field>
      </Prompt>
    </div>
  );
}

'use client';

import {
  ALargeSmallIcon,
  BrainIcon,
  LanguagesIcon,
  ListTreeIcon,
  SparklesIcon,
  TableIcon,
  TextQuoteIcon,
  WandSparklesIcon,
  ZapIcon,
} from 'lucide-react';
import { Prompt, type PromptCommandItem, type PromptModelItem } from '@/components/panelui/prompt';
import { useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

const COMMANDS: PromptCommandItem[] = [
  { value: 'summarise', icon: <TextQuoteIcon />, description: 'Cut it down to the points that matter' },
  { value: 'translate', icon: <LanguagesIcon />, description: 'Into any language, keeping the tone' },
  { value: 'rewrite', icon: <WandSparklesIcon />, description: 'Same meaning, clearer words' },
  { value: 'outline', icon: <ListTreeIcon />, description: 'Headings and bullets to start from' },
  { value: 'table', icon: <TableIcon />, description: 'Turn a list into rows and columns' },
  { value: 'shorter', icon: <ALargeSmallIcon />, description: 'Half the length, nothing lost' },
];

export default function PromptCommands() {
  const [command, setCommand] = useState<PromptCommandItem | null>(null);

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      {/* Opens on the trigger, so the list is showing before anything is typed. */}
      <Prompt defaultValue="/">
        <Prompt.Commands items={COMMANDS} onSelect={setCommand} />
        <Prompt.Field>
          <Prompt.Textarea placeholder="Type / for commands" />
          <Prompt.Footer>
            <Prompt.Tools>
              <Prompt.Menu>
                <Prompt.AttachItem />
              </Prompt.Menu>
              {command ? (
                <Prompt.Tool label={`/${command.value}`} showLabel pressed onPressedChange={() => setCommand(null)}>
                  {command.icon}
                </Prompt.Tool>
              ) : null}
              <Prompt.Model items={MODELS} variant="ghost" />
            </Prompt.Tools>
            <Prompt.Submit />
          </Prompt.Footer>
        </Prompt.Field>
      </Prompt>
      <p className="px-4 text-xs text-muted-foreground">Arrow keys to move, Enter or Tab to choose, Escape to close.</p>
    </div>
  );
}

'use client';

import { BrainIcon, SparklesIcon, ZapIcon } from 'lucide-react';
import { Prompt, type PromptModelItem } from '@/components/panelui/prompt';
import { useEffect, useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

/** What is "heard". A real app would get these words from speech to text as they arrive. */
const WORDS = 'Find a table for four near the office on Friday, somewhere quiet enough to talk'.split(' ');

export default function PromptVoice() {
  const [recording, setRecording] = useState(true);
  const [heard, setHeard] = useState(0);
  const [text, setText] = useState('');

  // The words arrive one at a time while recording, after a moment of silence.
  useEffect(() => {
    if (!recording || heard >= WORDS.length) return;
    const timer = window.setTimeout(() => setHeard((count) => count + 1), heard === 0 ? 1400 : 320);
    return () => window.clearTimeout(timer);
  }, [recording, heard]);

  const start = () => {
    setHeard(0);
    setRecording(true);
  };

  return (
    <div className="w-full max-w-xl">
      <Prompt value={text} onValueChange={setText}>
        <Prompt.Field>
          {recording ? (
            <Prompt.Recorder
              transcript={WORDS.slice(0, heard).join(' ')}
              onCancel={() => setRecording(false)}
              onDone={() => {
                setRecording(false);
                setText(WORDS.slice(0, Math.max(heard, 1)).join(' '));
              }}
            />
          ) : (
            <>
              <Prompt.Textarea placeholder="Ask anything, or press the wave to talk" />
              <Prompt.Footer>
                <Prompt.Tools>
                  <Prompt.Menu>
                    <Prompt.AttachItem />
                  </Prompt.Menu>
                  <Prompt.Model items={MODELS} variant="ghost" />
                </Prompt.Tools>
                <Prompt.Submit onVoice={start} />
              </Prompt.Footer>
            </>
          )}
        </Prompt.Field>
      </Prompt>
    </div>
  );
}

'use client';

import { BrainIcon, SparklesIcon, ZapIcon } from 'lucide-react';
import { Prompt, type PromptRejectReason, type PromptModelItem } from '@/components/panelui/prompt';
import { useEffect, useState } from 'react';

const MODELS: PromptModelItem[] = [
  { value: 'lumen', label: 'Lumen 4', icon: <SparklesIcon />, description: 'Balanced, for most questions' },
  { value: 'lumen-mini', label: 'Lumen 4 Mini', icon: <ZapIcon />, description: 'Quick answers to small asks' },
  { value: 'lumen-deep', label: 'Lumen 4 Deep', icon: <BrainIcon />, description: 'Slower, for hard problems' },
];

/** A small picture to attach, drawn here so the example needs no image file. */
async function drawSwatch(): Promise<File> {
  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = 160;
  const context = canvas.getContext('2d')!;
  const style = getComputedStyle(document.documentElement);
  const colour = (token: string, fallback: string) => style.getPropertyValue(token).trim() || fallback;
  context.fillStyle = colour('--chart-2', '#6b8afd');
  context.fillRect(0, 0, 160, 160);
  context.fillStyle = colour('--chart-4', '#f5b84b');
  context.beginPath();
  context.arc(108, 56, 30, 0, Math.PI * 2);
  context.fill();
  context.fillStyle = colour('--chart-1', '#2f4fd6');
  context.beginPath();
  context.moveTo(0, 160);
  context.lineTo(62, 84);
  context.lineTo(118, 160);
  context.fill();
  const blob = await new Promise<Blob>((resolve) => canvas.toBlob((b) => resolve(b!), 'image/png'));
  return new File([blob], 'homepage-hero.png', { type: 'image/png' });
}

const REASONS: Record<PromptRejectReason, string> = {
  accept: 'is not an image, a PDF or a spreadsheet',
  'max-files': 'is past the limit of four files',
};

export default function PromptAttachments() {
  const [files, setFiles] = useState<File[] | null>(null);
  const [rejected, setRejected] = useState<string | null>(null);

  // Made after mount: a canvas, and the files' object URLs, exist only in the browser.
  useEffect(() => {
    let live = true;
    drawSwatch().then((image) => {
      const sheet = new File(['month,visits\nAugust,1840\nSeptember,2215\n'], 'visits-by-month.csv', { type: 'text/csv' });
      if (live) setFiles([image, sheet]);
    });
    return () => {
      live = false;
    };
  }, []);

  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      {files ? (
        <Prompt
          defaultFiles={files}
          defaultValue="Does the hero image match the September numbers?"
          accept="image/*,.pdf,.csv"
          maxFiles={4}
          onReject={(refused, reason) => setRejected(`${refused[0]?.name} ${REASONS[reason]}.`)}
        >
          <Prompt.Field>
            <Prompt.Attachments />
            <Prompt.Textarea placeholder="Drop files here, paste an image, or press the clip" />
            <Prompt.Footer>
              <Prompt.Tools>
                <Prompt.Attach />
                <Prompt.Model items={MODELS} />
              </Prompt.Tools>
              <Prompt.Submit />
            </Prompt.Footer>
          </Prompt.Field>
        </Prompt>
      ) : (
        <div className="h-[11.5rem]" />
      )}
      <p className="px-4 text-xs text-muted-foreground" aria-live="polite">
        {rejected ?? 'Images, PDFs and spreadsheets, up to four at a time.'}
      </p>
    </div>
  );
}