"use client"; import React, { useState, useEffect } from "react"; import { Thought, ThoughtContent, ThoughtTrigger, } from "@/components/chatcn/ai/thought"; import ShinyText from "@/components/ShinyText"; interface StreamingTextProps { text: string; disabled?: boolean; speed?: number; className?: string; isStreamingComplete: boolean; setIsStreamingComplete: React.Dispatch>; } const StreamingText: React.FC = ({ text, disabled = false, speed = 0.05, className = "", isStreamingComplete, setIsStreamingComplete, }) => { const [displayedText, setDisplayedText] = useState(""); const [currentIndex, setCurrentIndex] = useState(0); // Streaming effect useEffect(() => { if (disabled || currentIndex >= text.length) { if (currentIndex >= text.length && !isStreamingComplete) { setIsStreamingComplete(true); } return; } const interval = setInterval(() => { setDisplayedText((prev) => prev + text[currentIndex]); setCurrentIndex((prev) => prev + 1); }, speed * 1000); return () => clearInterval(interval); }, [ currentIndex, text, speed, disabled, isStreamingComplete, setIsStreamingComplete, ]); return isStreamingComplete ? ( {displayedText} ) : ( ); }; export default function ThoughtStreaming() { const [isStreamingComplete, setIsStreamingComplete] = useState(false); return (

{isStreamingComplete ? ( Thought for 10s ) : ( )}

); }

Thought

Examples

Installation

Thought with Streaming