Streaming TextProv1.0.0

"use client";

import * as React from "react";
import { StreamingText } from "@/components/ui/lumen/controls/streaming-text";

// The text grows as your stream arrives (useChat, a reducer, a fetch reader).
export function Answer({ text, streaming }: { text: string; streaming: boolean }) {
  return <StreamingText text={text} streaming={streaming} className="text-sm leading-6" />;
}

// Or hand it the stream itself: an async iterable of chunks.
export async function* chunks(res: Response) {
  const reader = res.body!.pipeThrough(new TextDecoderStream()).getReader();
  try {
    for (;;) {
      const { value, done } = await reader.read();
      if (done) return;
      yield value;
    }
  } finally {
    // Stopping early (unmount, a new question) releases the response.
    void reader.cancel().catch(() => {});
  }
}

export function StreamedAnswer({ res }: { res: Response }) {
  // A response body can be read once: make the iterable once per response, not on every render.
  const source = React.useMemo(() => chunks(res), [res]);
  return (
    <StreamingText
      source={source}
      onDone={(t) => console.log("complete", t.length)}
      onStreamError={(error, partial) => console.error("stream failed after", partial.length, "characters", error)}
    />
  );
}