Composer Attachments

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="composer-attachments"/>;}

Upload queue

Attachments with progress: 0 enter the sequential local queue. Each tile appears, draws its progress ring and settles before the next file starts. An attachment without a progress value appears complete. Adjust uploadDuration and uploadGap, observe onUploadComplete or onAllUploaded, and append more files while the queue is running. The demonstration does not upload files to a server.

Mainhelios-uiAgent57%

0%

W0%

X0%

P0%

</>0%

Message

Bypass allGPT-5.6 Mini

Enter sends; Shift+Enter adds a line. Model, permission and workspace choices are local preferences. Attachment progress is a simulated local preparation queue.

Interactive local fixture. No external authentication, inference, upload or search service is connected.

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

export default function Example(){return <SourceAgentPreview id="composer-attachments" example="queue"/>;}

Tile kinds

The six tile kinds cover images, documents, spreadsheets, presentations, code and video. An image uses its src; the remaining kinds use recognizable file glyphs. Filenames sit below the icon and truncate within the tile. Use the attachment strip or individual attachment tile exports in other surfaces as needed.

W

X

P

</>

▶

Interactive local fixture. No external authentication, inference, upload or search service is connected.

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

export default function Example(){return <SourceAgentPreview id="composer-attachments" example="kinds"/>;}

Bring your own uploader

For a real upload, supply your own attachments and update each file’s progress as its transfer advances. The ring follows the numeric value. Clear progress once the file has landed; the component does not choose an upload endpoint or send the file itself.

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

export default function Example(){const [message,setMessage]=useState('');return <><Composer showPanel onSubmit={setMessage}/><p role="status">{message}</p></>;}