Suggestion

Overview

Suggestion são chips clicáveis com prompts pré-feitos. Sintetiza o "o que eu pergunto?" do empty state. Suggestions é o wrapper horizontal scrollável (ScrollArea por baixo).

Use no empty state da Conversation, ou abaixo do PromptInput pra "follow-ups" sugeridos pelo modelo.

Anatomy

<Suggestions>
  └─ <Suggestion suggestion="..." onClick={(v) => ...} />
</Suggestions>

Usage

<Suggestions>
  <Suggestion suggestion="Como configuro multi-tema?" onClick={send} />
  <Suggestion suggestion="Quais tokens chart estão disponíveis?" onClick={send} />
  <Suggestion suggestion="Como integro Form com zod?" onClick={send} />
</Suggestions>

Props

Suggestions (wrapper)

Aceita ComponentProps<typeof ScrollArea>. Adiciona scroll horizontal oculto + flex layout.

Suggestion

Herda de Button — variant, size, etc. Default é variant="outline" size="sm".

Subcomponents

• Suggestions — wrapper horizontal (ScrollArea). Em telas estreitas, rolam sem quebrar pra próxima linha.
• Suggestion — chip individual. Recebe a string como prop suggestion (não como children) pra o onClick poder repassar.

When to use

• Empty state da primeira conversa.
• Follow-up suggestions geradas pelo modelo após uma resposta.
• "Quick actions" em painéis de IA (resumir, traduzir, formalizar).

When not to use

• Mais de ~5 sugestões — vira sopa visual; troque por categorias.
• Acompanhamento longo de uma resposta complexa — use Plan ou Task.

Best practices

• Limite a 3-5. Mais que isso o user não lê.
• Diversifique. Não 5 variações da mesma pergunta.
• Estilo conversacional. "Como X?" > "X" — soa mais natural.

Accessibility

Related

• Conversation — onde Suggestions aparecem (empty state).
• PromptInput — campo onde o suggestion vai parar.