Streaming text

'use client';

import * as React from 'react';
import { type StreamingContent, StreamingText, type StreamingTextStatus } from './streaming-text';

type Step = { at: number; add: StreamingContent[number] } | { at: number; status: StreamingTextStatus };

const BUILD: Step[] = [
  { at: 300, add: 'The new build is ' },
  { at: 520, add: 'ready to test. ' },
  { at: 760, add: { type: 'citation', label: 'build-log', href: 'https://example.com/builds/218' } },
  { at: 900, add: ' The first screen now loads in 1.2 seconds,' },
  { at: 1180, add: ' about 30 percent faster' },
  { at: 2500, add: ' than last week, and the main bundle is 18 KB smaller.' },
  { at: 2900, add: '\n\nTo try it, open the preview link on your phone' },
  { at: 3150, add: ' and sign in with your test account.' },
  { at: 3500, status: 'done' },
];

const CUT: Step[] = [
  { at: 400, add: 'The new build is ready to test. ' },
  { at: 700, add: { type: 'citation', label: 'build-log' } },
  { at: 860, add: ' The first screen now loads' },
  { at: 1100, add: ' in 1.2 seconds, about 30 percent faster' },
  { at: 1900, status: 'error' },
];

const finalContent = (steps: Step[]) => steps.flatMap((s) => ('add' in s ? [s.add] : []));
const finalStatus = (steps: Step[]) =>
  steps.reduce<StreamingTextStatus>((last, s) => ('status' in s ? s.status : last), 'streaming');

function useStream(steps: Step[]) {
  const [content, setContent] = React.useState<StreamingContent>(() => finalContent(steps));
  const [status, setStatus] = React.useState<StreamingTextStatus>(() => finalStatus(steps));
  const timers = React.useRef<number[]>([]);
  const play = React.useCallback(() => {
    for (const id of timers.current) window.clearTimeout(id);
    setContent([]);
    setStatus('streaming');
    timers.current = steps.map((step) =>
      window.setTimeout(() => {
        if ('add' in step) setContent((list) => [...list, step.add]);
        else setStatus(step.status);
      }, step.at),
    );
  }, [steps]);
  React.useEffect(
    () => () => {
      for (const id of timers.current) window.clearTimeout(id);
    },
    [],
  );
  return { content, status, play };
}

export default function StreamingTextDemo({ replay = 0 }: { replay?: number }) {
  const build = useStream(BUILD);
  const cut = useStream(CUT);
  const plays = React.useRef({ build: build.play, cut: cut.play });
  plays.current = { build: build.play, cut: cut.play };

  React.useEffect(() => {
    if (replay === 0) return;
    plays.current.build();
    plays.current.cut();
  }, [replay]);

  return (
    <div className="flex w-full max-w-[480px] flex-col gap-10">
      <StreamingText content={build.content} status={build.status} />
      <StreamingText content={cut.content} status={cut.status} onRetry={cut.play} />
    </div>
  );
}