Composer Panel

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

Permissions

The permission trigger gains a surface on hover, press or while its menu is open. Four modes include short explanations, alongside a Learn more action controlled by learnMoreHref or onLearnMore. The initial value is Auto; change it with defaultPermission, or use permission and onPermissionChange for controlled state. The picker is also available independently from the full panel.

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

export default function Example(){const[value,setValue]=useState('Auto');return <ComposerPermissionPicker value={value} onChange={setValue}/>;}

Model picker

The model panel pairs a scrollable provider rail with radio rows for that provider’s models. Only the chosen model displays its effort control. Its popover offers six positions from faster responses to more deliberation. Quick Search, including the / shortcut, searches across provider catalogs and identifies the provider on each result. Selecting a match opens the relevant lineup. Supply providers to replace the bundled examples with your own available models; selecting a model here does not activate a remote provider.

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

export default function Example(){const[value,setValue]=useState('openai/gpt-5.6-mini');return <ComposerModelPicker value={value} onChange={setValue}/>;}

Status tab

The compact status strip sits above the card with rounded top corners. It contains the branch, project and a context-usage ring. Render your own status values, replace the status slot with another node, or pass null to keep only the input card.

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

export default function Example(){const[branch,setBranch]=useState('Main'),[project,setProject]=useState('project-sea'),[mode,setMode]=useState('Agent'),[context,setContext]=useState(57);return <ComposerStatusBar branch={branch} project={project} mode={mode} context={context} onBranchChange={setBranch} onProjectChange={setProject} onModeChange={setMode} onContextChange={setContext}/>;}

Wiring it up

The prompt grows with its content. Enter submits the message and Shift+Enter inserts a line break. Receive text through onSubmit, or use the richer message callback. An uncontrolled draft clears after submission. Use disabled while required, and pass inputRef to focus the field from your application.

'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></>;}

Attachments

A row of file tiles can sit above the prompt inside the same card. Progress rings remain attached to the files as they appear. The separate Attachments page covers the tile kinds, removable strip and sequential local queue.

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

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