ResponseView

function Stream() {
  const [state, setState] = useState<{ status: ResponseStatus; text: string; reasoning: string; took?: number; started?: number; total?: number }>({
    status: "done",
    text: gpt.text,
    reasoning: gpt.reasoning!,
    took: 3800,
    total: 6120,
  });
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);
  const play = () => {
    clearTimeout(timer.current);
    const started = Date.now();
    let r = 0;
    let t = 0;
    let took: number | undefined;
    setState({ status: "pending", text: "", reasoning: "", started });
    const tick = () => {
      if (r < gpt.reasoning!.length) r += 8;
      else {
        took ??= Date.now() - started;
        t += 6;
      }
      const done = t >= gpt.text.length;
      setState({
        status: done ? "done" : "streaming",
        reasoning: gpt.reasoning!.slice(0, r),
        text: gpt.text.slice(0, t),
        started,
        ...(took !== undefined ? { took } : {}),
        ...(done ? { total: Date.now() - started } : {}),
      });
      if (!done) timer.current = setTimeout(tick, 24);
    };
    timer.current = setTimeout(tick, 700);
  };
  return (
    <div className="flex w-full max-w-560 flex-col gap-16">
      <div>
        <Button size="sm" onClick={play} disabled={state.status === "pending" || state.status === "streaming"}>
          Stream it again
        </Button>
      </div>
      <ResponseView
        aria-label="GPT-5 response"
        status={state.status}
        text={state.text}
        reasoning={state.reasoning}
        {...(state.took !== undefined ? { reasoningDuration: state.took } : {})}
        footer={
          <ResponseMetrics
            reasoning
            live={state.status === "pending" || state.status === "streaming"}
            startedAt={state.started}
            duration={state.total}
            timeToFirstToken={state.status === "pending" ? undefined : 1180}
          />
        }
      />
    </div>
  );
}