50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1d91,"use client"; import { Conversation, ConversationContent } from "@/components/ai-elements/conversation"; import { Message, MessageContent } from "@/components/ai-elements/message"; import type { PromptInputMessage } from "@/components/ai-elements/prompt-input"; import { PromptInput, PromptInputSubmit, PromptInputTextarea, } from "@/components/ai-elements/prompt-input"; import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion"; import { WebPreview, WebPreviewBody, WebPreviewNavigation, WebPreviewUrl, } from "@/components/ai-elements/web-preview"; import { Spinner } from "@/registry/default/ui/spinner"; import { nanoid } from "nanoid"; import { memo, useCallback, useState } from "react"; interface Chat { id: string; demo: string; } const mockChatHistory = [ { content: "Build me an agent skills website with a modern dark theme", id: "1", type: "user" as const, }, { content: "I'll create a sleek agent skills website with a dark theme. The design will feature a clean layout showcasing various AI agent capabilities with smooth animations.", id: "2", type: "assistant" as const, }, { content: "Add a hero section with a catchy tagline about AI skills", id: "3", type: "user" as const, }, { content: "Done! I've added a hero section with the tagline 'Supercharge your AI agents with powerful skills'. The section includes a gradient background and animated elements.", id: "4", type: "assistant" as const, }, { content: "Can you add a grid of skill cards showing different capabilities?", id: "5", type: "user" as const, }, { content: "I've added a skills grid featuring cards for Web Search, Code Execution, File Management, API Integration, and more. Each card has an icon and description. Check the preview!", id: "6", type: "assistant" as const, }, ]; const mockChat: Chat = { demo: "https://skills.sh/", id: "mock-chat-1", }; interface SuggestionItemProps { text: string; onSuggestionClick: (text: string) => void; } const SuggestionItem = memo( ({ text, onSuggestionClick }: SuggestionItemProps) => { const handleClick = useCallback( () => onSuggestionClick(text), [onSuggestionClick, text] ); return ; } ); SuggestionItem.displayName = "SuggestionItem"; export default function Home() { const [message, setMessage] = useState(""); const [currentChat, setCurrentChat] = useState(mockChat); const [isLoading, setIsLoading] = useState(false); const [chatHistory, setChatHistory] = useState< { id: string; type: "user" | "assistant"; content: string; }[] >(mockChatHistory); const handleSendMessage = useCallback( async (promptMessage: PromptInputMessage) => { const hasText = Boolean(promptMessage.text); const hasAttachments = Boolean(promptMessage.files?.length); if (!(hasText || hasAttachments) || isLoading) { return; } const userMessage = promptMessage.text?.trim() || "Sent with attachments"; setMessage(""); setIsLoading(true); setChatHistory((prev) => [ ...prev, { content: userMessage, id: nanoid(), type: "user" }, ]); try { const response = await fetch("/api/v0", { body: JSON.stringify({ chatId: currentChat?.id, message: userMessage, }), headers: { "Content-Type": "application/json", }, method: "POST", }); if (!response.ok) { throw new Error("Failed to create chat"); } const chat: Chat = await response.json(); setCurrentChat(chat); setChatHistory((prev) => [ ...prev, { content: "Generated new app preview. Check the preview panel!", id: nanoid(), type: "assistant", }, ]); } catch (error) { console.error("Error:", error); setChatHistory((prev) => [ ...prev, { content: "Sorry, there was an error creating your app. Please try again.", id: nanoid(), type: "assistant", }, ]); } finally { setIsLoading(false); } }, [currentChat?.id, isLoading] ); const handleSuggestionClick = useCallback((suggestion: string) => { setMessage(suggestion); }, []); const handleTextChange = useCallback( (e: React.ChangeEvent) => setMessage(e.target.value), [] ); return (

{/* Chat Panel */}

{chatHistory.length === 0 ? (

What can we build together?

) : ( <> {chatHistory.map((msg) => ( {msg.content} ))} {isLoading && (

Creating your app...

)} )}

{/* Input */}

{!currentChat && ( )}

{/* Preview Panel */}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","nanoid",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nanoid","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"nanoid"}]]}]}]]}],["$","$L50",null,{"namespace":"@ai-elements","registryDependencies":["https://elements.ai-sdk.dev/conversation.json","https://elements.ai-sdk.dev/message.json","https://elements.ai-sdk.dev/prompt-input.json","https://elements.ai-sdk.dev/suggestion.json","https://elements.ai-sdk.dev/web-preview.json","spinner"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/examples/v0-clone.tsx","content":"$52","type":"registry:block","target":"components/ai-elements/example-v0-clone.tsx"}],"className":"h-[70svh] min-h-80"}]]}]