Composer Loader

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-loader"/>;}

In a conversation

A conversation can use one working flag for its thinking indicator and composer light. Show the user’s turn first, keep the input treatment active while waiting, and restore the resting composer when the response arrives. The local example demonstrates these visual states without requesting an AI response.

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

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

The composer itself

The input shown here is the reusable Composer block: attachment and model menus, voice and send controls, and its optional status bar. Composer Loader can wrap an existing input too. Use the exported source composer when you want the same arrangement as this preview.

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

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

Tuning

The default light uses four color stops. Set colors for another palette, arc for the illuminated portion of the rim, and the bloom controls for its inward glow. speed specifies seconds per circuit. The band follows the rounded ends at a constant pace and stops moving when reduced motion is requested.

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

export default function Example(){return <NativeScope><NativeComposerLoader speed={4.5} arc={120} bloom={16} intensity={0.7} reverse={false}><SourceAgentPreview id="composer"/></NativeComposerLoader></NativeScope>;}