Composer

Installation

pnpm dlx @mielui/svelte add composer

npx @mielui/svelte add composer

yarn dlx @mielui/svelte add composer

bunx @mielui/svelte add composer

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Single is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Bind the prompt value on Root and handle submission with onSubmit. Composer waits for async handlers and shows the submitting state until they finish. Submit names its icon Send, Queue message, or Stop response to match the current action.

If submission rejects, Composer preserves the prompt and shows labels.error. Use onError to report the failure, then retry with the same submit button. If you set status="error" yourself, your application must clear it.

<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';

    let value = $state('');

    async function send(prompt: string) {
        const response = await fetch('/api/messages', {
            method: 'POST',
            body: prompt
        });

        if (!response.ok) {
            throw new Error(response.statusText);
        }

        value = '';
    }
</script>

<Composer.Root bind:value onSubmit={send}>
    <Composer.Header>
        <!-- Optional context above the input -->
    </Composer.Header>
    <Composer.Input placeholder="Ask anything..." />
    <Composer.Toolbar>
        <Composer.Actions>
            <!-- Attachment, model or permission controls -->
        </Composer.Actions>
        <Composer.Submit />
    </Composer.Toolbar>
    <Composer.Footer>
        <!-- Optional strip under the writing surface -->
    </Composer.Footer>
</Composer.Root>

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

Glass surface

Composer follows the theme's surface setting. Glass frosts the frame and keeps the writing surface on a more opaque fill. Set surface="glass" or surface="solid" on Root to force one regardless of the theme.

Submission and cancellation

Return a promise from onSubmit to keep the submit control pending until your request settles. Reject it to preserve the prompt and display labels.error. Use controlled status="submitting" or generating for a stoppable response. onStop must cancel your request or timer; it does not cancel application work automatically. The examples below include a real stop action and a failure you can retry.

Empty messages and the disabled state

Submit is disabled while the input is empty. Set allowEmpty on Root when a message can be only attachments, so it can be sent with no text. disabled on Root turns off the input and the button together.

Submit changes job as the conversation moves. While a response is generating and the input is empty it stops the response, and with text typed it queues the next message. labels.stop and labels.queue on Root are its accessible names in those two states, and labels.sending names it while onSubmit is pending. Its onclick runs first, and calling preventDefault() there cancels the stop.

Parts

Input and Submit accept element to bind the textarea and the button.

Root, Header, Toolbar, Actions, Submit and Footer render their children and accept class and style like any element.

Labels

Built-in text is English by default. Pass a labels object of type ComposerLabels to Composer.Root to translate the input placeholder and accessible name, the toolbar name, the four names of Submit, and the message shown when submitting fails. Every key is optional; omitted keys keep their default. A placeholder or aria-label set directly on Input or Toolbar wins over labels.

<script lang="ts">
    import * as Composer from '@mielui/svelte/components/composer';
    import type { ComposerLabels } from '@mielui/svelte/components/composer';

    let value = $state('');

    const labels: ComposerLabels = {
        placeholder: 'Écrivez à l’agent…',
        input: 'Message',
        toolbar: 'Actions du message',
        send: 'Envoyer',
        queue: 'Mettre en file',
        stop: 'Arrêter la réponse',
        sending: 'Envoi',
        error: "Le message n'a pas pu être envoyé."
    };

    function send() {
        value = '';
    }
</script>

<Composer.Root bind:value {labels} onSubmit={send}>
    <Composer.Input />
    <Composer.Toolbar>
        <Composer.Submit />
    </Composer.Toolbar>
</Composer.Root>