Conversación.

<section class="ui-sample ui-ai" data-chat-thread="true" aria-label="Conversación con usaia"><article data-message-role="user"><header><strong>Tú</strong><time>18:20</time></header><p>Resume los cambios de empleo y conserva las fuentes.</p></article><article data-message-role="assistant"><header><strong>usaia</strong><time>18:21</time></header><p>La desocupación subió 0,3 puntos en Valparaíso.</p><footer><a href="#fuentes">3 fuentes</a></footer></article></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-chat-thread="true" aria-label="Conversación con usaia"><article class="grid gap-3" data-message-role="user"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Tú</strong><time>18:20</time></header><p>Resume los cambios de empleo y conserva las fuentes.</p></article><article class="grid gap-3" data-message-role="assistant"><header class="flex flex-wrap items-center justify-between gap-3"><strong>usaia</strong><time>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="#fuentes">3 fuentes</a></footer></article></section>

export interface ChatThreadMessage {
  /** Quién escribió el mensaje: la persona (`user`) o el asistente (`assistant`). */
  role: "user" | "assistant";
  /** Nombre visible del autor («Tú», «usaia»). */
  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. */
  dateTime?: string;
  /** Texto del mensaje. */
  text: string;
  /** Texto del enlace a las fuentes («3 fuentes»); vacío oculta el pie del mensaje. */
  sourcesLabel?: string;
  /** Destino del enlace a las fuentes; sin él no se muestra el pie. */
  sourcesHref?: string;
}

export interface ChatThreadProps {
  /** Nombre accesible de la conversación. */
  label?: string;
  /** Mensajes del más antiguo al más reciente; sin mensajes no se renderiza nada. */
  messages?: ChatThreadMessage[];
  className?: string;
}

const CHAT_THREAD_MESSAGES: ChatThreadMessage[] = [
  { role: "user", author: "Tú", time: "18:20", text: "Resume los cambios de empleo y conserva las fuentes." },
  {
    role: "assistant",
    author: "usaia",
    time: "18:21",
    text: "La desocupación subió 0,3 puntos en Valparaíso.",
    sourcesLabel: "3 fuentes",
    sourcesHref: "#fuentes",
  },
];

/**
 * Conversación entre una persona y un asistente de IA, con el autor, la hora y el enlace a fuentes de cada mensaje; se usa para mostrar el historial de una consulta.
 *
 * Cada mensaje es un `<article>` con `data-message-role`; el orden del arreglo es el orden de lectura. Si los mensajes necesitan los botones de editar o copiar, arma la conversación con `ChatMessageUser` y `ChatMessageAssistant`.
 *
 * @example <ChatThread label="Conversación con usaia" messages={[{ role: "user", author: "Tú", time: "18:20", text: "Resume los cambios de empleo." }, { role: "assistant", author: "usaia", time: "18:21", text: "La desocupación subió 0,3 puntos.", sourcesLabel: "3 fuentes", sourcesHref: "#fuentes" }]} />
 */
export function ChatThread({ label = "Conversación con usaia", messages = CHAT_THREAD_MESSAGES, className }: ChatThreadProps) {
  if (!messages.length) return null;
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-chat-thread aria-label={label}>
      {messages.map((message, i) => (
        <article key={`${message.role}-${i}`} data-message-role={message.role}>
          <header>
            <strong>{message.author}</strong>
            {message.time ? <time dateTime={message.dateTime || undefined}>{message.time}</time> : null}
          </header>
          <p>{message.text}</p>
          {message.sourcesLabel && message.sourcesHref ? (
            <footer>
              <a href={message.sourcesHref}>{message.sourcesLabel}</a>
            </footer>
          ) : null}
        </article>
      ))}
    </section>
  );
}