Progresso do agente

Um bloco de progresso dobrável para trabalho de IA multi-step. Ele introduz etapas com um escalonamento suave, avança a tarefa ativa com progresso circular sincronizado, preserva o progresso enquanto minimizado, e expõe o tempo de conclusão para entregar a IU de volta a uma resposta do agente.

5 etapas restantes
Ler os arquivos do projeto
Update light mode tokens
Implemente os tokens do modo escuro
Register the theme toggle
Run lint and production build

Instalação

O Agente Progress faz parte da BoardUI Pro.

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

Acesso pro pro

Progresso do agente é um Pró componente.

Sua licença BoardUI Pro desbloqueia isso componente e todos os seus arquivos fonte. Ative sua licença uma vez, em seguida, instalá-lo diretamente em seu projeto com o CLI.

01

Ativar a sua licença

Use a chave do seu email de compra Lemon Squeezy. Você só precisa fazer isso uma vez por máquina.

npx boardui@latest login YOUR_LICENSE_KEY
02

Instalar o componente

O CLI copia a fonte e resolve todas as dependências do BoardUI e do npm para você.

npx boardui@latest add agent-progress

Isto componente está incluído no BoardUI Pro

Obter BoardUI Pro agora e instalá-lo termina fora.

Usando 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.

Passos personalizados

Passar por qualquer lista ordenada steps. O bloco calcula sua altura expandida, contagem regressiva, estado ativo e progresso geral a partir dessa lista.

<AgentProgress steps={[ "Analyze the request", "Generate the component", "Run accessibility checks", "Prepare the response", ]}/>

Calendário e conclusão

Definir o tempo por tarefa com stepDuration. Após o último checkmark, completionDelay controla quanto tempo o estado completo permanece antes onFinished Fogos.

<AgentProgress steps={steps} stepDuration={2400} completionDelay={1000} onFinished={() => { sendAgentResponse(); }}/>