Respuesta del asistente.

<article class="ui-sample ui-ai" data-message-role="assistant"><header><strong>usaia</strong><time dateTime="2026-08-25T18:21:00-04:00">18:21</time></header><p>La desocupación subió 0,3 puntos en Valparaíso.</p><footer><a href="#evidencia">3 fuentes</a><button class="btn btn--secondary btn--sm" type="button">Copiar</button></footer></article>

<article class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-message-role="assistant"><header class="flex flex-wrap items-center justify-between gap-3"><strong>usaia</strong><time dateTime="2026-08-25T18:21:00-04:00">18:21</time></header><p>La desocupación subió 0,3 puntos en Valparaíso.</p><footer class="flex flex-wrap items-center justify-between gap-3"><a class="underline underline-offset-4" href="#evidencia">3 fuentes</a><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">Copiar</button></footer></article>

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

export interface ChatMessageAssistantProps {
  /** Nombre visible del asistente («usaia»). */
  author?: string;
  /** Hora visible del mensaje («18:21»); 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;
  /** Respuesta del asistente; un texto se envuelve en un párrafo y uno vacío no se muestra. */
  children?: ReactNode;
  /** Texto del enlace a las fuentes de la respuesta («3 fuentes»); vacío oculta el enlace. */
  sourcesLabel?: string;
  /** Destino del enlace a las fuentes; vacío oculta el enlace. */
  sourcesHref?: string;
  /** Texto del botón para copiar la respuesta; vacío oculta el botón. */
  copyLabel?: string;
  onCopy?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Respuesta de un asistente de IA con su autor, su hora, el enlace a las fuentes que la respaldan y un botón para copiarla; se usa cuando la respuesta necesita esa acción, que `ChatThread` no ofrece.
 *
 * Si la respuesta deja fuera un dato que no se pudo verificar, dilo en el texto y ajusta `sourcesLabel`. Sin enlace ni botón, el pie no se muestra.
 *
 * @example <ChatMessageAssistant sourcesLabel="3 fuentes" sourcesHref="#evidencia" onCopy={copiar}>La desocupación subió 0,3 puntos en Valparaíso.</ChatMessageAssistant>
 * @example <ChatMessageAssistant sourcesLabel="2 fuentes">No pude verificar una cifra; la dejé fuera del resumen.</ChatMessageAssistant>
 */
export function ChatMessageAssistant({
  author = "usaia",
  time = "18:21",
  dateTime = "2026-08-25T18:21:00-04:00",
  children = "La desocupación subió 0,3 puntos en Valparaíso.",
  sourcesLabel = "3 fuentes",
  sourcesHref = "#evidencia",
  copyLabel = "Copiar",
  onCopy,
  className,
}: ChatMessageAssistantProps) {
  const enlace = sourcesLabel && sourcesHref ? <a href={sourcesHref}>{sourcesLabel}</a> : null;
  const copiar = copyLabel ? <button className="btn btn--secondary btn--sm" type="button" onClick={onCopy}>{copyLabel}</button> : null;
  return (
    <article className={["ui-ai", className].filter(Boolean).join(" ")} data-message-role="assistant">
      <header>
        <strong>{author}</strong>
        {time ? <time dateTime={dateTime || undefined}>{time}</time> : null}
      </header>
      {typeof children === "string" ? (children ? <p>{children}</p> : null) : children}
      {enlace || copiar ? (
        <footer>
          {enlace}
          {copiar}
        </footer>
      ) : null}
    </article>
  );
}