PromptSuggestions

Example prompts before a thread starts: up to three quiet lines that take a fill on hover and go once a prompt is sent.

function Basic() {
  const [draft, setDraft] = useState("");
  return (
    <div className="flex w-full max-w-640 flex-col gap-12">
      {draft === "" && <PromptSuggestions suggestions={suggestions} onSelect={setDraft} />}
      <Composer value={draft} onValueChange={setDraft} aria-label="Message all models" placeholder="Message 3 models" />
    </div>
  );
}

import { PromptSuggestions } from "@logicplanes/kaeso-ui/playground";

Props

align
"start" | "center" = start
Aligns the suggestions at the start or in the center.
aria-label
string
The list's accessible name. Defaults to "Example prompts" in the provider's language.
onSelect
(prompt: string) => void
Puts the prompt in the composer (or sends it).
suggestions
string[]
Up to three short prompts; more are left out.