Prompt Composer

A focused prompt surface with growing input, composable actions, and submission state.

Ready to send

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add prompt-composer

Usage

Bind the prompt value and handle submission on the root. The component awaits async handlers and shows its submitting state automatically.

import * as PromptComposer from '@sivir-ui/svelte/components/prompt-composer';

let value = $state('');

async function sendPrompt(prompt: string) {
  await saveMessage(prompt);
  value = '';
}

<PromptComposer.Root bind:value onSubmit={sendPrompt}>
  <PromptComposer.Input placeholder="Ask anything..." />
  <PromptComposer.Toolbar>
    <PromptComposer.Actions>
      <!-- Add attachment, model, or permission controls here. -->
    </PromptComposer.Actions>
    <PromptComposer.Submit />
  </PromptComposer.Toolbar>
</PromptComposer.Root>

By default, Enter submits and Shift + Enter inserts a new line. Set submitOnEnter=false on Input when Enter should always create a new line.

Examples

Use explicit states when submission is managed outside the component.

Idle

Submitting

Error

Anatomy

PromptComposer.Root - Manages prompt submission.

PromptComposer.Input - Accepts the prompt text.

PromptComposer.Toolbar - Groups composer controls.

PromptComposer.Actions - Groups composer actions.

PromptComposer.Submit - Submits or stops the prompt.