Suggestions
Atalhos de prompt: o que perguntar ou pedir à IA, num clique.
Playground
Layout
<Suggestions>
<Suggestion suggestion="Resumir o que salvei hoje" ai onSelect={enviar} />
<Suggestion suggestion="Montar uma trilha de estudo" onSelect={enviar} />
</Suggestions>Quando usar
- ✓Estado vazio de um chat (como começar)
- ✓Próximos passos depois de uma resposta
- ✓Comandos rápidos acima ou abaixo do PromptInput
Evite quando
- Filtros ou escolha entre opções fixas→ ToggleGroup
- Rótulo ou status sem ação→ Badge
Variantes e props
layoutpadrão: wrapwrapscroll
scroll mantém uma linha e rola na horizontal.
aitruefalse
Em Suggestion: ação feita pela IA, rótulo na assinatura de IA com ícone.
Estados
padrãohoverfocodesabilitado
Acessibilidade
- Papel
- group de botões
- Teclado
- Tab entre as sugestões, Enter ou Espaço escolhe
- Dê um aria-label ao grupo quando houver mais de um na tela
Código
Partes: Suggestions, Suggestion
import
import { Suggestions, Suggestion } from "@/components/ui/suggestions";Fonte: src/components/ui/suggestions.tsx · coisas.space (comandos rápidos do chat)
Relacionados: PromptInput