Web Search

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="web-search"/>;}

In a chat

Start the local trail by sending the prepared message. Source rows appear below that turn and the answer follows onComplete. Its reveal and guide styling match Task List, allowing both progress types to share a conversation without changing the thread’s visual rhythm.

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

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

Sources

Attach sources to a step to add a branch containing an overlapping stack of site marks. The compact stack shows where the agent looked without placing a long URL list in the middle of the run. Hover reveals a source’s title and domain. A supplied href makes its mark a link, and sources beyond the first six are collected behind a count.

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

export default function Example(){return <SourceAgentPreview id="web-search" example="sources"/>;}

Site marks

Use brand for a supported site’s recognizable mark. Marks retain their brand colors, while monochrome marks follow the current text color for light and dark themes. Supply an icon for a source outside the supported brand set.

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

export default function Example(){return <SourceAgentPreview id="web-search" example="marks"/>;}

Pacing

Search steps can use different durations. Set a step’s dwell to keep it visible longer before revealing the next entry. A step containing sources reveals its main entry first, then brings in the source row after a short pause.

A working indicator follows the end of the trail while progress continues, keeping attention on the active work. It disappears on completion. Change its text with working, or set that value to false to omit it.

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

export default function Example(){const[status,setStatus]=useState('');return <><WebSearchTrail steps={[{label:'Reading bundled sources'},{label:'Comparing references'}]} startDelay={500} stepInterval={1200} onComplete={()=>setStatus('Local trail completed')}/><p role="status">{status}</p></>;}

Driving it from real events

When real queries are available, control revealed as each one resolves. This replaces the demonstration timer and preserves the reveal treatment. The count refers to visible rows: a search step with a source stack contributes two rows.

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

export default function Example(){const[revealed,setRevealed]=useState(0);return <><WebSearchTrail steps={[{label:'Reading bundled sources'},{label:'Comparing references'}]} revealed={revealed}/><button type="button" onClick={()=>setRevealed(value=>Math.min(2,value+1))}>Reveal local event</button></>;}