Campo de entrada de IA evoluiu além da caixa de texto com botão enviar

O que mudou

Quando o ChatGPT foi lançado em novembro de 2022, o campo de entrada era uma caixa de texto com botão de enviar. Três anos depois, o input de produtos de IA faz muito mais. Um desenvolvedor que constrói inputs de IA e mantém o componente prompt-input na biblioteca prompt-kit, para aplicações de IA, detalha esse componente camada por camada.

Campo, contexto e gatilhos

O campo começa simples: o usuário digita, ele cresce para várias linhas e para em altura máxima definida, sem empurrar o layout nem saltar a rolagem. Shift+Enter cria linha; Enter envia, configurável. Placeholder orienta quando há contexto ou comandos. No mobile, fonte de ao menos 16px evita o zoom do Safari, ou se usa meta tag de viewport. A digitação deve ser estável: sem linhas se deslocando, capitalização automática no mobile ou saltos de cursor.

A barra de contexto altera a resposta: seletor de modelo, modo (código, busca, ferramentas), memória, contexto. Não deve existir só por existir. Fica abaixo do campo e mais discreta que ele. Só o que se usa com frequência permanece; o resto vai para menu ou ajustes. Tudo deve ser acessível por teclado, com atalhos.

Se a barra fica cheia, entram gatilhos de ferramentas, dentro dela ou do input, como menu suspenso ou comando de barra. Devem ser keyboard-first e rápidos; comandos de barra, instantâneos. Evitar saltos de layout ao abrir.

Anexos, assistência e controles

A zona de anexos adiciona arquivos, imagens, vídeos e áudio. É frágil. Cobre enviando, enviado, falha e remoção, com limites de tamanho, tipo e quantidade. Arrastar e soltar precisa de destaque, prévia acima do input ou no chat, empilhamento de arquivos e nenhum salto. Erros aparecem perto do input, não em toast. Atualizações otimistas mostram o arquivo na hora e sincronizam depois.

A assistência pode ser texto fantasma, sugestões inline enquanto se digita (como o Cursor com caminhos de arquivo) ou presets acima/abaixo do input. Deve ajudar sem tomar conta: rápida, não intrusiva, fácil de ignorar e utilizável por teclado. É fácil de esquecer, mas melhora o produto quando bem feita. Não se deve sugerir em excesso.

Nos controles, a orientação é não desabilitá-los: mesmo sem várias mensagens, o usuário pode digitar, corrigir ou parar. Com voz, pode-se mostrar o botão de voz e trocar para enviar quando a digitação começa, ou manter ambos. Ao enviar, o botão vira parar. Tudo acessível por teclado.

Estados, casos limite e conclusão

Os estados são ocioso, carregando, streaming, erro e sucesso. Em carregamento ou streaming, não se deve travar o input: o usuário continua digitando ou parando. No erro, o campo fica neutro e utilizável. Erros pertencem à geração, não à digitação, então ficam fora do input, no contêiner do chat ou ferramenta. Evitar toast e oferecer retry. A regra é manter o input utilizável em quase todo estado; como respostas podem ser longas, o usuário deve poder usar o produto enquanto espera.

Casos limite variam, mas as regras são parecidas: previsibilidade e teclado primeiro. A digitação deve ser instantânea, sem atraso, saltos ou deslocamentos quando o campo cresce ou encolhe. O input deve seguir utilizável se o modelo, a rede ou o produto estiverem lentos. Nunca deve ficar somente leitura durante o streaming. Não se deve roubar o foco quando a resposta começa ou termina, e no mobile é preciso lidar com o teclado cobrindo o campo. Atualizações otimistas e animações sem exagero; limpar o campo após enviar e trocar para parar sem demora.

A conclusão é que um bom input de IA parece simples, mas esconde muitos detalhes, e cada camada importa. Conforme o produto cresce, deve-se resistir a sobrecarregá-lo: o que pode viver em outro lugar deve ser movido; o que dá para agrupar atrás de um gatilho deve ser agrupado. Há equilíbrio entre mostrar demais e de menos, e o objetivo é guiar sem oprimir. O input também permite explorar experiência e detalhes, como shader no onboarding e animação na primeira mensagem. Em um mercado de IA cheio, boas experiências podem fazer diferença.