Respuesta en curso.

<div class="ui-sample ui-ai" data-streaming-status="true" role="status" aria-live="polite"><span aria-hidden="true">…</span><strong>Redactando respuesta</strong><button class="btn btn--secondary" type="button">Detener</button></div>

<div class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950" data-streaming-status="true" role="status" aria-live="polite"><span aria-hidden="true">…</span><strong>Redactando respuesta</strong><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">Detener</button></div>

import type { MouseEventHandler } from "react";

/** Estado de una respuesta que se genera por partes: llegando (`streaming`) o detenida con opción de seguir (`paused`). */
export type StreamingStatusState = "streaming" | "paused";

export interface StreamingStatusProps {
  /** Define el icono y los textos por defecto: «…», «Redactando respuesta» y «Detener», o «Ⅱ», «Respuesta pausada» y «Continuar». */
  status?: StreamingStatusState;
  /** Qué pasa con la respuesta; por defecto, el texto del estado. Vacío lo oculta. */
  title?: string;
  /** Texto del botón; por defecto, «Detener» o «Continuar» según el estado. Vacío lo oculta. */
  actionLabel?: string;
  /** Se llama al detener o continuar la respuesta. */
  onAction?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const STREAMING_STATUS_TEXTOS: Record<StreamingStatusState, { icon: string; title: string; actionLabel: string }> = {
  streaming: { icon: "…", title: "Redactando respuesta", actionLabel: "Detener" },
  paused: { icon: "Ⅱ", title: "Respuesta pausada", actionLabel: "Continuar" },
};

/**
 * Aviso de que un asistente de IA está escribiendo una respuesta o la dejó en pausa, con el botón para detenerla o continuarla.
 *
 * Tiene `role="status"` y `aria-live="polite"`: los lectores de pantalla anuncian el cambio de estado sin interrumpir. El icono es decorativo.
 *
 * @example <StreamingStatus onAction={detener} />
 * @example <StreamingStatus status="paused" onAction={continuar} />
 */
export function StreamingStatus({ status = "streaming", title, actionLabel, onAction, className }: StreamingStatusProps) {
  const textos = STREAMING_STATUS_TEXTOS[status];
  const titulo = title ?? textos.title;
  const accion = actionLabel ?? textos.actionLabel;
  return (
    <div className={["ui-ai", className].filter(Boolean).join(" ")} data-streaming-status role="status" aria-live="polite">
      <span aria-hidden="true">{textos.icon}</span>
      {titulo ? <strong>{titulo}</strong> : null}
      {accion ? <button className="btn btn--secondary" type="button" onClick={onAction}>{accion}</button> : null}
    </div>
  );
}