Compositor de prompt.

<form class="ui-sample ui-ai" data-prompt-composer="true"><label class="sr-only" for="prompt-0">Mensaje para el asistente</label><textarea class="input" id="prompt-0" rows="3" placeholder="Escribe una instrucción"></textarea><div><button class="btn btn--secondary" type="button">Adjuntar</button><span>Sin adjuntos</span><button class="btn btn--primary" type="submit">Enviar</button></div></form>

<form class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-prompt-composer="true"><label class="sr-only" for="prompt-0">Mensaje para el asistente</label><textarea class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="prompt-0" rows="3" placeholder="Escribe una instrucción"></textarea><div><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Adjuntar</button><span>Sin adjuntos</span><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Enviar</button></div></form>

import type { ChangeEventHandler, FormEventHandler, MouseEventHandler } from "react";

export interface PromptComposerProps {
  /** Etiqueta del campo; sólo la leen los lectores de pantalla. */
  label?: string;
  /** Id del campo de texto. Usa uno distinto por compositor en la página. */
  id?: string;
  /** Nombre del parámetro enviado con la instrucción; sin él, el formulario nativo no envía el texto. */
  name?: string;
  /** Alto visible del campo, en líneas. */
  rows?: number;
  placeholder?: string;
  /** Texto inicial de un campo no controlado. */
  defaultValue?: string;
  /** Texto de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
  /** Texto del botón para adjuntar archivos; vacío oculta el botón. */
  attachLabel?: string;
  onAttach?: MouseEventHandler<HTMLButtonElement>;
  /** Estado de los adjuntos junto a los botones («Sin adjuntos», «1 archivo · 2,4 MB»); vacío lo oculta. */
  status?: string;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** URL que recibe el formulario nativo (atributo `action`). */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Formulario para escribir una instrucción a un asistente de IA, adjuntar archivos y enviarla; se usa al pie de una conversación.
 *
 * Es un `<form>` nativo con la etiqueta del campo oculta a la vista: para enviarlo sin JavaScript, pasa `action`, `method` y `name`. El campo es controlado sólo si llegan `value` y `onChange`. Enviar es la acción principal (`btn--primary`) y Adjuntar, la secundaria.
 *
 * @example <PromptComposer id="prompt" name="prompt" action="/conversaciones/184" method="post" />
 * @example <PromptComposer id="prompt" value={texto} onChange={cambiarTexto} status="1 archivo · 2,4 MB" onAttach={adjuntar} onSubmit={enviar} />
 */
export function PromptComposer({
  label = "Mensaje para el asistente",
  id = "prompt-0",
  name,
  rows = 3,
  placeholder = "Escribe una instrucción",
  defaultValue = "",
  value,
  onChange,
  attachLabel = "Adjuntar",
  onAttach,
  status = "Sin adjuntos",
  submitLabel = "Enviar",
  action,
  method,
  onSubmit,
  className,
}: PromptComposerProps) {
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form className={["ui-ai", className].filter(Boolean).join(" ")} data-prompt-composer action={action} method={method} onSubmit={onSubmit}>
      <label className="sr-only" htmlFor={id}>{label}</label>
      <textarea
        className="input"
        id={id}
        name={name}
        rows={rows}
        placeholder={placeholder}
        {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })}
      />
      <div>
        {attachLabel ? <button className="btn btn--secondary" type="button" onClick={onAttach}>{attachLabel}</button> : null}
        {status ? <span>{status}</span> : null}
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
      </div>
    </form>
  );
}