{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "markdown-streaming-demo",
	"type": "registry:example",
	"files": [
		{
			"path": "./src/registry/examples/markdown-streaming-demo.tsx",
			"content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { MarkdownContent } from \"../ui/markdown-content\";\n\nexport default function MarkdownStreamingDemo() {\n\tconst [content, setContent] = useState(\"\");\n\tconst [isStreaming, setIsStreaming] = useState(false);\n\tconst fullContent = `# The Lost Key\n## A Tale of Mystery\n\n* Sarah woke up to find her favorite golden key missing from its usual spot\n* She remembered using it last night to lock her diary\n* The search began:\n  * Under the bed - nothing but dust\n  * In her coat pockets - empty\n  * On her desk - just scattered papers\n\n> \"Sometimes what we're looking for is right where we least expect it\"\n\n* As she made her bed, something shiny caught her eye\n* The key had slipped between the pages of her book\n* With a smile, she realized she'd been using it as a bookmark\n\n*The End*`;\n\n\tuseEffect(() => {\n\t\t// Typically you'd use a streaming API to get the content, this is just a demo\n\t\tif (!isStreaming) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet currentIndex = 0;\n\t\tconst words = fullContent.split(\" \");\n\n\t\tconst streamInterval = setInterval(() => {\n\t\t\tif (currentIndex >= words.length) {\n\t\t\t\tclearInterval(streamInterval);\n\t\t\t\tsetIsStreaming(false);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst nextChunk = words.slice(0, currentIndex + 3).join(\" \");\n\t\t\tsetContent(nextChunk);\n\t\t\tcurrentIndex += 3;\n\t\t}, 70);\n\n\t\treturn () => clearInterval(streamInterval);\n\t}, [isStreaming]);\n\n\tconst handleStart = () => {\n\t\tsetContent(\"\");\n\t\tsetIsStreaming(true);\n\t};\n\n\treturn (\n\t\t<div className=\"space-y-4 w-full max-h-[400px] overflow-y-auto\">\n\t\t\t<div className=\"flex gap-2\">\n\t\t\t\t<Button onClick={handleStart} disabled={isStreaming}>\n\t\t\t\t\t{content ? \"Restart\" : \"Start\"} Streaming\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t\t<div className=\"p-4 w-full min-h-[200px] border rounded-md overflow-y-auto\">\n\t\t\t\t<MarkdownContent content={content} />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:example"
		}
	]
}