Streaming Response

AI response displayed incrementally.

html

<div class="sr sr--normal" role="status" aria-live="polite" style="--accent:#D9C8F0;">
  <p class="sr__text">Here&#39;s a summary of the changes in this release, focused on what shipped and what to watch for.<span class="sr__cursor" aria-hidden="true"></span></p>
  <span class="sr__srtext">Response is streaming</span>
</div>
<style>
.sr { font: 15px/1.6 system-ui, sans-serif; max-width: 480px; color: #241430; background: #FAF7F2; }
.sr__text { margin: 0; }
.sr__cursor { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom;
  background: var(--accent); }
@keyframes sr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sr__cursor { animation: sr-blink 1s step-end infinite; }
  .sr--slow .sr__cursor { animation-duration: 1.4s; }
  .sr--normal .sr__cursor { animation-duration: 1s; }
  .sr--fast .sr__cursor { animation-duration: .6s; }
}
.sr__srtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

tailwind

<div role="status" aria-live="polite" class="sr-tw sr-tw--normal max-w-md font-sans text-[15px] leading-relaxed text-[#241430] bg-[#FAF7F2]" style="--accent:#D9C8F0;">
  <p class="m-0">Here&#39;s a summary of the changes in this release, focused on what shipped and what to watch for.<span aria-hidden="true" class="sr-tw__cursor inline-block w-0.5 h-[1em] ml-0.5 align-text-bottom" style="background:#D9C8F0"></span></p>
  <span class="sr-only">Response is streaming</span>
</div>
<style>
@keyframes sr-tw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .sr-tw__cursor { animation: sr-tw-blink 1s step-end infinite; }
  .sr-tw--slow .sr-tw__cursor { animation-duration: 1.4s; }
  .sr-tw--normal .sr-tw__cursor { animation-duration: 1s; }
  .sr-tw--fast .sr-tw__cursor { animation-duration: .6s; }
}
</style>

react

export function StreamingResponse({
  text = "Here's a summary of the changes in this release, focused on what shipped and what to watch for.",
  streaming = true,
  accent = "#D9C8F0",
  speed = "normal",
}) {
  const duration = { slow: "1.4s", normal: "1s", fast: "0.6s" }[speed] ?? "1s";
  return (
    <div role="status" aria-live="polite" style={{ maxWidth: 480, fontFamily: "system-ui, sans-serif",
      fontSize: 15, lineHeight: 1.6, color: "#241430", background: "#FAF7F2" }}>
      <p style={{ margin: 0 }}>
        {text}
        {streaming && (
          <span aria-hidden="true" className="sr-cursor" style={{ display: "inline-block", width: 2, height: "1em", marginLeft: 2,
            verticalAlign: "text-bottom", background: accent }} />
        )}
      </p>
      {streaming && (
        <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>
          Response is streaming
        </span>
      )}
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .sr-cursor { animation: sr-react-blink ${duration} step-end infinite; }
          @keyframes sr-react-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
        }
      `}</style>
    </div>
  );
}