PromptInput

Campo de mensagem para conversar com a IA: texto que cresce, Enter envia, e o botão vira "parar" enquanto a resposta chega.

Playground

Enter envia · Shift+Enter quebra linha

Status

Variante

Desabilitado

Com sugestões

<PromptInput
  onSubmit={enviar}
>
  <PromptInputTextarea placeholder="Pergunte qualquer coisa…" />
  <PromptInputFooter>
    <PromptInputSubmit />
  </PromptInputFooter>
</PromptInput>

Quando usar

✓Chat ou qualquer pedido em linguagem natural para a IA
✓Barra de comando que manda texto livre para um agente

Evite quando

Campo de formulário com valor curto e estruturado (nome, e-mail)→ Input
Texto longo que não vai para a IA (comentário, descrição)→ Textarea

Variantes e props

statuspadrão: idle

idlesubmittingstreamingerror

streaming gira a borda com a assinatura de IA e troca o envio por parar (se houver onStop).

variantpadrão: default

defaultglass

glass para flutuar sobre conteúdo (vidro).

onSubmit

Recebe o texto sem espaços nas pontas. Não controlado: o campo limpa depois de enviar.

onStop

Para a resposta. Sem ele, o botão fica desabilitado durante o streaming.

Estados

vazio (envio desabilitado)digitandoenviando (submitting)resposta chegando (streaming, borda de IA girando, botão parar)erro (borda vermelha, aria-invalid)desabilitado

Acessibilidade

Papel: form com textarea e botão de envio
Teclado: Enter envia, Shift+Enter quebra linha; Tab chega ao botão

O botão troca o aria-label entre Enviar e Parar resposta
aria-busy no form enquanto envia ou recebe
A borda girando respeita prefers-reduced-motion

Código

Partes: PromptInput, PromptInputTextarea, PromptInputFooter, PromptInputSubmit

import

import { PromptInput, PromptInputTextarea, PromptInputFooter, PromptInputSubmit } from "@/components/ui/prompt-input";

Fonte: src/components/ui/prompt-input.tsx · coisas.space (barra de prompt)

Relacionados: Suggestions, Reasoning, ThinkingText