Prompt List

Usage

import { PromptList, type PromptListItem } from "@tulipfarm/sprout/prompt-list";
import { CalendarSearch } from "reicon-react/icons/CalendarSearch";
import { Checklist } from "reicon-react/icons/Checklist";

const items: PromptListItem[] = [
  {
    id: "meetings",
    label: "Prepare me for tomorrow's meetings",
    icon: <CalendarSearch />,
    brands: [{ brand: "google-calendar", name: "Google Calendar" }],
  },
  { id: "follow-ups", label: "Plan customer follow-ups", icon: <Checklist /> },
];

<PromptList
  title="Start with a task"
  items={items}
  disabled={sending}
  onSelect={(id) => send(promptFor(id))}
/>

• title: names the list. It shows as a small heading unlessshowTitle is false; then it is only the list's accessible name.
• items: { id, label, icon, brands? }[].icon is drawn at 16px. brands is a list of{ brand, name } shown as aBrand Stack.
• onSelect(id): called when a row is chosen.
• disabled: locks every row, for example while a message sends.

Prompt List has one look and one size: 32px rows, 44px on touch screens. It fills the width it gets.

Starting tasks

The example above is the chat start screen. Three tasks show first; the rest sit in a second list with a hidden title inside aCollapsible. Setup steps follow in their own list. Load messages and errors use plain text, anAlert, and a reloadButton. Change the controls to see each state.

<PromptList title="Start with a task" disabled={sending} onSelect={choose} items={rows(primary)} />
<Collapsible open={moreOpen} onOpenChange={setMoreOpen}>
  <CollapsibleContent>
    <PromptList title="More tasks" showTitle={false} disabled={sending} onSelect={choose} items={rows(more)} />
  </CollapsibleContent>
  <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
    {moreOpen ? "Fewer tasks" : `More tasks (${more.length})`}
  </CollapsibleTrigger>
</Collapsible>

Title shown or hidden

Hide the title when the list continues one above it, such as “More tasks”. Screen readers still hear the title.

Apps a prompt uses

A row can show no apps, one, or several. Tiles overlap, and hovering one shows the app name.

Disabled

Disabled rows fade to half opacity and ignore hover and clicks.

Long labels

Labels stay on one line and end with an ellipsis. Hover shows the full label.

Starter prompts

A short list with a status line that reports the choice.

Accessibility

The list is a section named by its title, which is anh3, with a list of rows. Each row's label is a realbutton, so Tab moves between rows and Enter or Space chooses one. The whole row is the click target. A focused row gets the hover fill and a 2px focus ring. Icons and arrows are hidden from screen readers; the app tiles read as one image named by the app names.

Rows rise in one after another, and hovering one lifts its icon and nudges its arrow over 120–180ms. With reduced motion nothing moves. In forced colors mode the focus ring uses the system highlight.

Theme tokens

Hover and focus fills use --sprout-hover, the focus ring--sprout-focus, and the title and arrow--sprout-muted. App tile rings follow the row fill. Prompt List has no brand color of its own, so it looks the same in the neutral and TulipFarm themes apart from the focus ring.