Chat Input

1.0.0

O padrão Chat Input permite ao usuário escrever, enviar e visualizar mensagens dentro de um fluxo de conversação. Seu design combina um campo de entrada expansível com ações contextuais como envio, anexo ou acessos rápidos. É pensado para maximizar a fluidez e naturalidade em interfaces conversacionais.

Chat input

import React, { useState } from "react";
import { Box, IconButton } from "@nimbus-ds/components";
import { ChatInput } from "@nimbus-ds/patterns";
import {
  PlusCircleIcon,
  PlusIcon,
  MicrophoneIcon,
  ArrowupIcon,
} from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const [message, setMessage] = useState<string>("");

  return (
    <Box p="4" width="100%">
      <ChatInput>
        <ChatInput.Field
          id="ai-generative"
          placeholder="Placeholder"
          lines={1}
          value={message}
          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
            setMessage(e.target.value)
          }
        />
        <ChatInput.Actions>
          <Box display="flex" gap="2" alignItems="center">
            <ChatInput.Popover
              content={
                <>
                  <ChatInput.PopoverButton
                    icon={<PlusCircleIcon />}
                    text="Upload file"
                    onClick={() => console.log("Upload file clicked")}
                  />
                  <ChatInput.PopoverButton
                    icon={<PlusCircleIcon />}
                    text="Upload photo"
                    onClick={() => console.log("Upload photo clicked")}
                  />
                </>
              }
            >
              <IconButton
                color="neutral-textLow"
                source={<PlusIcon />}
                size="2rem"
                borderColor="transparent"
                backgroundColor="transparent"
              />
            </ChatInput.Popover>
          </Box>
          <Box display="flex" gap="2" alignItems="center">
            <IconButton
              color="neutral-textLow"
              source={<MicrophoneIcon />}
              size="2rem"
              borderColor="transparent"
              backgroundColor="transparent"
            />
            <IconButton
              color="neutral-textLow"
              source={<ArrowupIcon />}
              appearance="ai-generative"
              disabled
              size="2rem"
            />
          </Box>
        </ChatInput.Actions>
      </ChatInput>
    </Box>
  );
};

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/chat-input

Chat Input

Definição

O padrão Chat Input permite ao usuário escrever, enviar e visualizar mensagens dentro de um fluxo de conversação. Seu design combina um campo de entrada expansível com ações contextuais como envio, anexo ou acessos rápidos. É pensado para maximizar a fluidez e naturalidade em interfaces conversacionais.

Quando usar

Em fluxos onde o usuário interage através de mensagens ou comandos de texto.
Em assistentes virtuais ou bots que guiam o usuário por meio de conversação.
Em formulários progressivos ou experiências que simulam diálogo humano-produto.

Quando não usar

Quando se requer uma entrada extensa ou multiseção (usar um textarea padrão).
Se a interação não é conversacional nem requer input contínuo.
Para conteúdo estruturado que não simula diálogo (usar formulários tradicionais).

Critérios de usabilidade e produtividade

Início rápido: o input deve estar focado automaticamente ao abrir o chat, permitindo começar a escrever sem cliques adicionais.
Navegação fluida com teclado: suporte completo de Tab e Enter para enviar mensagens sem dependência do mouse.
Visibilidade do estado do sistema: indicar visualmente seu estado (ativo, desabilitado, pensando resposta) de maneira clara e consistente.
Adaptabilidade ao conteúdo: o campo deve expandir automaticamente ao escrever múltiplas linhas (máximo 8 no desktop e 6 no mobile), sem interromper o ritmo do usuário.
Compatibilidade com tarefas paralelas e facilidade para retomar: permitir que o usuário interaja com outras partes da UI enquanto escreve, conservar a mensagem escrita (se não foi enviada) e posicionar o cursor onde o usuário o deixou.

Boas práticas de acessibilidade

Suporte completo para navegação por teclado: o input e os botões devem ser acessíveis com Tab e ativáveis com Enter ou Space.
Leitura de estados com screen reader: usar aria-live para anunciar mensagens enviadas ou erros.
Gerenciamento de foco inteligente: ao fechar e reabrir o chat, manter o foco no input se apropriado.

Anatomia

O padrão Chat Input pode incluir:

Text area expansível
Placeholder contextual
Submit icon button
Scroll bar
Icon buttons opcionais (comando voz, mais opções)
Pop over opcional (anexar arquivos ou fotos)

Dependências

Este padrão pode usar:

#input
#icon-button
#popover
#icon

Variantes

Input solo

Versão minimalista com apenas o campo de texto e botão de envio.

Com ações adicionais

Mostra ícones adicionais como "ativar comando por voz" ou "mais opções" que abre um pop over com funções como "anexar arquivo" ou "anexar fotos".

Multilinha expandido

Quando o texto supera o espaço inicial, o campo cresce dinamicamente em altura.

Estados

O Chat Input pode ter múltiplos estados visuais e funcionais. Entre eles:

1. Rest: input vazio, com ícones disponíveis.
2. Focused: campo ativo com borda destacada.
3. Filled: input com conteúdo pronto para enviar.
4. Disabled: input inativo por estado de sistema, é mostrado quando não se pode enviar mensagem ou enquanto carrega o envio recente.
5. Thinking: mostra ícone de stop enquanto se processa a resposta à mensagem.
6. Recording: mostra o estado ativo da gravação de voz com um indicador de áudio e o botão de envio se transforma em stop.
7. Transcribing: se ativa imediatamente após deter a gravação, mostrando um Spinner e o texto "Transcrevendo..." enquanto o áudio se converte a texto no campo de entrada, prévio ao seu envio.

Do and Don'ts

✅ Do

Utilizá-lo em fluxos de conversação imediata ou resposta rápida.
Permitir adaptar a largura do componente ao seu container.
Prover ações secundárias relevantes ao fluxo.
Incluir diferentes estados e casuísticas possíveis específicas se existirem (comprimento de texto, popover com ações secundárias, etc.)

❌ Don't

Utilizá-lo em fluxos com resposta diferida ou formulários alheios à ação imediata.
Adicionar mais ações visíveis que as que o componente permite (envio, comando voz, ver mais).
Mostrar mais de cinco ações secundárias simultaneamente dentro do popover.

Props

As propriedades adicionais são passadas ao elemento <ChatInput>. Consulte a documentação para ver a lista de atributos aceitos pelo elemento <ChatInput>.

ChatInput

Name	Type	Default	Description
children*	React.ReactNode		Content to be rendered inside ChatInput, usually `ChatInput.Actions` and `ChatInput.Field`.
aiFocused	boolean		Whether the ChatInput is focused for AI states.

ChatInput.Actions

Name	Type	Default	Description
children*	React.ReactNode		Content to be rendered at both sides of the actions bar.

ChatInput.Field

Name	Type	Default	Description
id*	string		ID of the textarea
resize	boolean	'true'	Enable/disable textarea resize functionality
maxLines	number		Caps the textarea visual height to the given number of lines. When used together with autoGrow=true, the textarea will grow with content up to this limit and then scroll.
aiGenerated	boolean		Highlights the field to indicate its value was generated by AI. Applies AI gradient border, white background and an AI focus ring.
lines	number	'2'	Number of lines to be rendered for the user to input text
autoGrow	boolean	'false'	Controls intrinsic sizing behavior of the field. When true, the textarea will grow with content up to the maxLines limit (if provided) and then scroll.
minLines	number		Sets the minimum height of the textarea to the given number of lines. The textarea will never shrink below this height, even when empty.
appearance	'ai-generative' 'danger' 'none' 'success' 'warning'		Predefined appearance values for AI states. When `"ai-generative"` is passed, the field displays the Nimbus AI generative border and focus ring.

ChatInput.Popover

Name	Type	Description
content*	React.ReactNode	Content to be rendered inside the popover, usually ChatInput.PopoverButton components.
contentProperties	object
children*	React.ReactNode	The trigger element that opens the popover, usually an IconButton.

ChatInput.PopoverButton

Name	Type	Description
icon	React.ReactNode	Icon element to be displayed before the text.
text	React.ReactNode	The text content of the button.
onClick	object	Click handler for the button.