Message composer

Preview

In action

When to use

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Button, MessageComposer, useMessageComposer, type ComposedMessage } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/message-composer.

2. Vendor the source

npx @noorddev/vlak-cli add message-composer

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/message-composer.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

"use client";
import { Button, MessageComposer, useMessageComposer, type ComposedMessage } from "@noorddev/vlak-react";

function ClearDraft() {
  const draft = useMessageComposer();
  return <Button variant="subtle" size="sm" disabled={draft.disabled || !draft.value}
    onClick={() => { draft.setValue(""); draft.focus(); }}>Clear draft</Button>;
}

export function ProjectComposer({ onSend, generating = false, onStop }: {
  onSend: (message: ComposedMessage) => void | Promise<void>;
  generating?: boolean;
  onStop?: () => void;
}) {
  return <MessageComposer compact maxRows={6} sendOnEnter onSend={onSend}
    generating={generating} onStop={onStop} tools={<ClearDraft />}
    textareaProps={{ "aria-label": "Ask about the project", autoComplete: "off" }}
    allowAttachments accept="image/*,.pdf" maxFiles={4}
    maxFileSize={10 * 1024 * 1024} allowScreenshot />;
}

Props

MessageComposer

A message draft with attachments, IME-safe shortcuts, and retained text after send failures.

Also accepts Omit<FormHTMLAttributes<HTMLFormElement>, "defaultValue" | "onSubmit">.

useMessageComposer (hook)

Reads the nearest composer's draft and validated commands from a custom child or tool.

Keyboard

Accessibility

• The textarea has a visible label by default. Compact mode uses the same accessible name and a visually hidden shortcut description.
• Sending prevents duplicate submission; results are announced.
• Only a successful send clears the draft and attachments; failures retain both.
• generating replaces Send with Stop response but keeps the next draft editable. onStop requests application cancellation; it does not cancel network activity itself.
• Compact icon actions retain readable names, titles, and 44px targets. Failed sends remain visible beneath the field; other status updates are available to assistive technology.
• Rejected attachments remain visible in an alert. File previews have named remove controls and preserve object addresses until removal.
• Screenshot capture starts only from its button, uses the browser chooser, and stops display tracks after capture, cancellation, or unmount.
• If controlled text or files change during a pending send, successful completion clears only the submitted draft and files that still match.
• Custom layouts retain the form, validation, shortcuts, and feedback. Keep the provided field and action names and their natural reading order.

Markup

<form class="rs-message-composer" aria-label="Message"><label>Message<textarea class="rs-textarea" placeholder="Write a message…"></textarea></label><div class="rs-message-composer-actions"><button class="rs-btn-primary" type="submit">Send</button></div></form>

Classes

Depends on

Use elsewhere

Related components