Lista de tarefas

Um log de streaming do que um agente realmente fez. As tarefas revelam uma unidade de cada vez, cada um animando sua própria altura ao lado de um curto borrão e elevação, de modo que o thread cresce da forma que o trabalho faz em vez de saltar. Uma tarefa brilha seu título de execução até que cada passo tenha pousado, então se resolve.

Em uma conversa

A superfície para a qual foi construída. O envio da mensagem inicia a execução, os fluxos de log sob a volta do usuário, e a resposta só chega uma vez onComplete A tecla da lista no ID da curva dá a cada envio uma nova execução.

Envie a mensagem para iniciar a execução.

const [phase, setPhase] = useState("idle"); // The log is keyed on the turn, so each send starts a fresh run.{phase !== "idle" && ( <TaskList key={turnId} tasks={tasks} onComplete={() => setPhase("answered")} />)}

Instalação

A Lista de Tarefas faz parte do BoardUI Pro.

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

Acesso pro pro

Lista de tarefas é 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 task-list

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.

Chips de recursos

Um passo pode nomear os arquivos ou recursos que ele tocou. Pass chips e cada renderiza em linha após o rótulo, com um glifo opcional para o tipo de arquivo. Nomes longos truncam em vez de embrulhar a linha.

import { RiReactjsLine } from "@remixicon/react"; const steps = [ { label: "Read", chips: [ { label: "page.tsx", icon: <RiReactjsLine className="size-3.5 text-[#61dafb]" /> }, { label: "layout.tsx", icon: <RiReactjsLine className="size-3.5 text-[#61dafb]" /> }, ], },];

Tempo e colapso

startDelay mantém a primeira revelação para que o log não pouse no mesmo quadro que a volta do usuário, e stepInterval Acelera o resto. Definir collapseOnComplete quando o log é histórico em vez do evento principal, e cada tarefa dobra o momento em que seus próprios passos pousaram. "all" Em vez disso, manter todas as tarefas abertas até que a execução termine e então fechá-las como um movimento, o que se adequa a um tópico onde uma resposta segue o log. De qualquer forma, um leitor ainda pode abrir qualquer tarefa clicando em seu cabeçalho.

// Each task folds away as soon as its own steps land.<TaskList tasks={tasks} startDelay={320} stepInterval={850} collapseOnComplete/> // Every task stays open until the whole run lands, then they close together.<TaskList tasks={tasks} collapseOnComplete="all" />

Impulsioná-lo de eventos reais

Um intervalo é um stand-in. Os passos reais não tomam o mesmo tempo, de modo que uma vez que você tenha uma transmissão ao vivo, passe revealed O temporizador interno desliga e cada animação permanece o mesmo.

// Each task contributes one unit for its header plus one per step, so// `revealed` counts units rather than steps. Drive it from real events// and the internal timer stays out of the way.<TaskList tasks={tasks} revealed={unitsSeen} />