Composer

Composer é o input bar oficial. É um compound component — você sempre começa com Composer.Root e compõe as ferramentas como children. O estado (texto, anexos, modo, gravação) vive no contexto e é exposto via useComposer() se precisar customizar algum slot.

'use client';

import { Composer } from '@uranus-workspace/ai';
import { useState } from 'react';

export default function ComposerDefault() {
  const [last, setLast] = useState<string | null>(null);
  return (
    <div className="mx-auto flex w-full max-w-2xl flex-col gap-3">
      <Composer.Root status="idle" onSubmit={(payload) => setLast(payload.text)}>
        <Composer.Textarea placeholder="Pergunte algo ao Uranus…" />
        <Composer.Toolbar>
          <Composer.AttachButton />
          <Composer.RecordButton attachOnStop />
          <Composer.ModeToggle />
          <span className="flex-1" />
          <Composer.SubmitButton />
        </Composer.Toolbar>
        <Composer.Hints />
      </Composer.Root>
      {last ? (
        <p className="text-xs text-muted-foreground">
          Última submissão: <span className="font-medium">{last}</span>
        </p>
      ) : null}
    </div>
  );
}

Uso

import { Composer } from '@uranus-workspace/ai';

<Composer.Root status={status} onSubmit={handleSend}>
  <Composer.Attachments />
  <Composer.Textarea placeholder="Pergunte qualquer coisa…" />
  <Composer.Toolbar>
    <Composer.AttachButton />
    <Composer.RecordButton attachOnStop />
    <Composer.ModeToggle />
    <span className="flex-1" />
    <Composer.SubmitButton />
  </Composer.Toolbar>
  <Composer.Hints />
</Composer.Root>

Subcomponentes

• Composer.Root — provider + <form>. Recebe status, onSubmit, onStop, mode, accept, maxAttachments.
• Composer.Textarea — auto-grow, submit on Enter (Shift+Enter quebra linha).
• Composer.AttachButton — abre file picker; aceita o mesmo accept do root.
• Composer.Attachments — strip de chips com preview de imagem e botão de remover.
• Composer.RecordButton — gravação via MediaRecorder. Pode anexar o blob (attachOnStop) ou rodar transcribe(blob) => string.
• Composer.ModeToggle — pills chat | plan | research controladas/uncontrolled.
• Composer.SubmitButton — vira "Parar" enquanto o status é busy.
• Composer.Hints — dica de teclado (Enter para enviar, Shift+Enter para nova linha).
• Composer.Toolbar — wrapper opcional com layout horizontal padrão.

Drag & drop

Composer.Root aceita arquivos arrastados — eles entram em attachments automaticamente respeitando accept e maxAttachments.

Atalhos

• Enter envia.
• Shift + Enter insere nova linha.
• Esc durante gravação cancela.

Hook companheiro

import { useComposer } from '@uranus-workspace/ai';

function CustomToolbar() {
  const { mode, setMode, attachments, busy } = useComposer();
  return /* … */;
}