Prompt Input

Um componente de entrada de texto otimizado para prompts de IA com suporte a auto-resize, estados de carregamento e controles de ação.

Componente básico com auto-resize

Utilização

index.tsx
import { PromptInput } from "@convertcompany/ui/ai";

Exemplos

Configuração Básica

O PromptInput é um componente de entrada de texto especializado para interações com IA, com design moderno e funcionalidades avançadas.

Componente básico com auto-resize

Com Estado de Carregamento

Configure o estado de carregamento para fornecer feedback visual durante operações de IA.

Com estado de carregamento e cancelamento

Com Conteúdo Adicional

Adicione elementos personalizados dentro do componente para funcionalidades específicas.

Com botões adicionais (anexo e emoji)

Desabilitado

Configure o componente para estados desabilitados, útil para formulários ou quando operações estão em andamento.

Estado desabilitado controlado por botão

Props

PromptInput Props

PropriedadeTipo
valueValor controlado do campo de entrada.
string
onChangeFunção chamada quando o valor do campo muda.
(e: ChangeEvent<HTMLTextAreaElement>) => void
onSubmitFunção chamada quando o usuário submete o prompt.
() => void
onCancelFunção chamada quando o usuário cancela a operação (durante carregamento).
() => void
placeholderTexto de placeholder para o campo de entrada.
string
loadingControla o estado de carregamento do componente.
boolean
disabledDesabilita todo o componente.
boolean
textareaDisabledDesabilita apenas o campo de texto, mantendo os controles ativos.
boolean
containerClassNameClasse CSS adicional para o container do componente.
string
childrenElementos adicionais renderizados antes dos controles de ação.
ReactNode
...propsTodas as demais props nativas de Textarea.
TextareaProps