Mensaje del usuario.

<article class="ui-sample ui-ai" data-message-role="user"><header><strong>Tú</strong><time dateTime="2026-08-25T18:20:00-04:00">18:20</time></header><p>Resume los cambios de empleo y conserva las fuentes.</p><button class="btn btn--secondary btn--sm" type="button">Editar mensaje</button></article>

<article class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-message-role="user"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Tú</strong><time dateTime="2026-08-25T18:20:00-04:00">18:20</time></header><p>Resume los cambios de empleo y conserva las fuentes.</p><button class="btn btn--secondary btn--sm border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Editar mensaje</button></article>

import type { MouseEventHandler, ReactNode } from "react";

export interface ChatMessageUserProps {
  /** Nombre visible de quien escribe («Tú»). */
  author?: string;
  /** Hora visible del mensaje («18:20»); vacía no muestra la hora. */
  time?: string;
  /** Fecha y hora en ISO 8601 para el atributo `dateTime` de `<time>`; vacía omite el atributo. Cámbiala junto con `time`. */
  dateTime?: string;
  /** Texto del mensaje; un texto se envuelve en un párrafo y uno vacío no se muestra. */
  children?: ReactNode;
  /** Texto del botón para editar el mensaje; vacío oculta el botón. */
  editLabel?: string;
  onEdit?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Mensaje que una persona envía a un asistente de IA, con su autor, su hora y un botón para editarlo; se usa cuando el mensaje necesita esa acción, que `ChatThread` no ofrece.
 *
 * Con `editLabel=""` el mensaje se muestra sin botón, por ejemplo cuando la conversación ya no admite cambios.
 *
 * @example <ChatMessageUser time="18:20" dateTime="2026-08-25T18:20:00-04:00" onEdit={editar}>Resume los cambios de empleo y conserva las fuentes.</ChatMessageUser>
 * @example <ChatMessageUser time="18:24" dateTime="2026-08-25T18:24:00-04:00" editLabel="">Compara ambas versiones del informe y marca las diferencias en las cifras.</ChatMessageUser>
 */
export function ChatMessageUser({
  author = "Tú",
  time = "18:20",
  dateTime = "2026-08-25T18:20:00-04:00",
  children = "Resume los cambios de empleo y conserva las fuentes.",
  editLabel = "Editar mensaje",
  onEdit,
  className,
}: ChatMessageUserProps) {
  return (
    <article className={["ui-ai", className].filter(Boolean).join(" ")} data-message-role="user">
      <header>
        <strong>{author}</strong>
        {time ? <time dateTime={dateTime || undefined}>{time}</time> : null}
      </header>
      {typeof children === "string" ? (children ? <p>{children}</p> : null) : children}
      {editLabel ? <button className="btn btn--secondary btn--sm" type="button" onClick={onEdit}>{editLabel}</button> : null}
    </article>
  );
}