Skip to content

Suggestion

Prompts the user can send with one tap. The row scrolls sideways rather than wrapping.

Sourcecomponents/suggestion.tsx

Nothing sent yet

Usage

Suggestion usage
import { Suggestion, Suggestions } from "@/components/suggestion";
export function SuggestionUsage({ send }: { send: (text: string) => void }) {  const prompts = ["Summarize this thread", "Draft a reply", "List the open questions"];  return (    <Suggestions aria-label="Suggested prompts">      {prompts.map((prompt) => (        <Suggestion key={prompt} suggestion={prompt} onClick={send} />      ))}    </Suggestions>  );}

When to use

Use when

Prompts the user can send with one tap, before the first message or under the latest answer. Name the row with aria-label; onClick gets the text

Don’t use when

Quick replies that belong to one message in the thread, such as a bot's "Yes" / "No" (use a Bubble rendered as a button)