Agente pensando
O estado de pensamento do agente que se senta acima de um compositor de bate- papo enquanto uma resposta está sendo trabalhada. Quatro variantes curadas - uma grade de pontos atravessada por uma onda diagonal, uma grade de pontos com uma cabeça em órbita, estrelas cintilantes, e um cometa infinito - cada um emparelhando seu indicador com um rótulo cintilante e um temporizador decorrido.
Instalação
Você pode adicionar este componente de carregador usando nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add agent-thinkingUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Onda de pontos
Uma grade de 3×3 pontos atravessada por uma frente de onda diagonal - uma faixa brilhante entra na parte superior esquerda, desliza para a parte inferior direita com uma trilha desaparecendo, e re-entra depois de uma batida. A variante padrão.
<AgentThinking variant="wave" />Ponto de rotação
A mesma grade com uma cabeça brilhante em órbita no sentido horário, seguindo uma cauda de cometa - lê - se como rotação constante sem um glifo de spinner.
<AgentThinking variant="spin" />Estrelas
Cinco faíscas de quatro pontos a entrar e a sair numa cambaleante. Por padrão, o tom subtil é mais silencioso do que as grades de pontos.
<AgentThinking variant="stars" />Infinito
Uma trilha de cometas batendo uma figura-oito sobre uma pista fraca - movimento contínuo sem início ou fim, para o trabalho de agente de longo prazo.
<AgentThinking variant="infinity" />Rótulo, tom e temporizador
Cada variante compartilha as mesmas opções: label define a cópia do estado, showTimer comuta os segundos decorridos, shimmer comuta o realce de viagem, e tone substitui a cor padrão por variável. Todo o movimento volta para um estado estático sob prefers-reduced-motion.
{/* Status copy and elapsed timer */}<AgentThinking variant="spin" label="Searching the docs" /><AgentThinking variant="wave" showTimer={false} />
{/* Tone defaults per variant (stars is subtle); override with `tone` */}<AgentThinking variant="infinity" tone="accent" />
{/* Static label instead of the traveling shimmer */}<AgentThinking variant="wave" shimmer={false} />