ResponseStream

Multi-paragraph streaming text display with blinking cursor for in-progress AI responses.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

ResponseStreamMulti-paragraph streaming text display with blinking cursor for in-progress AI responses.

"use client";
import { useState, useEffect } from "react";

type ResponseStreamProps = {
  text: string;
  isStreaming?: boolean;
  speed?: number;
};

export function ResponseStream({ text, isStreaming = false, speed = 28 }: ResponseStreamProps) {
  const [displayed, setDisplayed] = useState("");
  const [done, setDone] = useState(false);

  useEffect(() => {
    setDisplayed("");
    setDone(false);
    let i = 0;
    const id = setInterval(() => {
      if (i < text.length) {
        setDisplayed(text.slice(0, i + 1));
        i++;
      } else {
        setDone(true);
        clearInterval(id);
      }
    }, speed);
    return () => clearInterval(id);
  }, [text, speed]);

  const showCursor = isStreaming || !done;

  return (
    <div className="pk-response-stream">
      {displayed}
      {showCursor && (
        <span className="pk-stream-cursor" aria-hidden="true">▋</span>
      )}
    </div>
  );
}

Props

Prop	Type	Default	Description
`text`*	`string`	—	Full text to stream
`isStreaming`	`boolean`	`false`	Keep cursor visible after streaming ends
`speed`	`number`	`28`	Milliseconds between characters