markdown-streaming-demo

1"use client";
2 
3import { useEffect, useState } from "react";
4import { Button } from "@/components/ui/button";
5import { MarkdownContent } from "../ui/markdown-content";
6 
7export default function MarkdownStreamingDemo() {
8	const [content, setContent] = useState("");
9	const [isStreaming, setIsStreaming] = useState(false);
10	const fullContent = `# The Lost Key
11## A Tale of Mystery
12 
13* Sarah woke up to find her favorite golden key missing from its usual spot
14* She remembered using it last night to lock her diary
15* The search began:
16  * Under the bed - nothing but dust
17  * In her coat pockets - empty
18  * On her desk - just scattered papers
19 
20> "Sometimes what we're looking for is right where we least expect it"
21 
22* As she made her bed, something shiny caught her eye
23* The key had slipped between the pages of her book
24* With a smile, she realized she'd been using it as a bookmark
25 
26*The End*`;
27 
28	useEffect(() => {
29		// Typically you'd use a streaming API to get the content, this is just a demo
30		if (!isStreaming) {
31			return;
32		}
33 
34		let currentIndex = 0;
35		const words = fullContent.split(" ");
36 
37		const streamInterval = setInterval(() => {
38			if (currentIndex >= words.length) {
39				clearInterval(streamInterval);
40				setIsStreaming(false);
41				return;
42			}
43 
44			const nextChunk = words.slice(0, currentIndex + 3).join(" ");
45			setContent(nextChunk);
46			currentIndex += 3;
47		}, 70);
48 
49		return () => clearInterval(streamInterval);
50	}, [isStreaming]);
51 
52	const handleStart = () => {
53		setContent("");
54		setIsStreaming(true);
55	};
56 
57	return (
58		<div className="space-y-4 w-full max-h-[400px] overflow-y-auto">
59			<div className="flex gap-2">
60				<Button onClick={handleStart} disabled={isStreaming}>
61					{content ? "Restart" : "Start"} Streaming
62				</Button>
63			</div>
64			<div className="p-4 w-full min-h-[200px] border rounded-md overflow-y-auto">
65				<MarkdownContent content={content} />
66			</div>
67		</div>
68	);
69}