Task List

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="task-list"/>;}

In a chat

Sending the prepared message begins a local run beneath the user’s turn. Progress streams into the thread and the demonstration answer appears after onComplete. A new turn creates a separately keyed task list, so every message starts its own sequence.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="task-list" example="in-a-chat"/>;}

Resource chips

Use a step’s chips to identify the files or resources involved. Chips sit beside the step label and can include a file glyph. Long resource names truncate within the row so the log stays compact.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="task-list" example="resources"/>;}

Timing and collapse

Set startDelay to pause before the first entry and stepInterval to pace subsequent entries. With collapseOnComplete, an individual task folds after its own steps finish. Set the value to "all" to keep every task open until the complete run finishes, then fold the group before showing an answer. Completed task headers remain available so readers can reopen the details.

'use client';
import {useState} from 'react';
import {TaskList} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[status,setStatus]=useState('');return <><TaskList items={[{id:'read',label:'Read files',done:false},{id:'build',label:'Build interface',done:false}]} startDelay={600} stepInterval={1200} collapseOnComplete="all" onComplete={()=>setStatus('Local steps completed')}/><p role="status">{status}</p></>;}

Driving it from real events

Replace the demonstration interval with real application events by controlling revealed. Advance it as work completes or tool calls resolve. Controlled reveal disables the internal timer while retaining the same entry and completion behavior.

'use client';
import {useState} from 'react';
import {TaskList} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[revealed,setRevealed]=useState(0);return <><TaskList tasks={[{id:'read',label:'Read files',done:false},{id:'build',label:'Build interface',done:false}]} revealed={revealed}/><button type="button" onClick={()=>setRevealed(value=>Math.min(2,value+1))}>Advance local event</button></>;}