[V0_FILE]plaintext:file="app/favicon.ico" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/app/favicon-YohKeV7boxclbgP8q9b7swdHamf2lu.ico" [V0_FILE]png:file="public/og-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/public/og-image-5zz9nLIE9JH3MqTBsc7TU5HX1iMTdT.png" [V0_FILE]png:file="screenshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/files-blob/screenshot-KdG7Z93O2hFW31NOnTg3ndoQVncvRx.png" [V0_FILE]typescript:file="app/api/chats/[chatId]/route.ts" import { NextRequest, NextResponse } from 'next/server' import { createClient } from 'v0-sdk' export async function GET( request: NextRequest, { params }: { params: Promise<{ chatId: string }> }, ) { try { const { chatId } = await params if (!chatId) { return NextResponse.json( { error: 'Chat ID is required' }, { status: 400 }, ) } const v0 = createClient({ apiKey: process.env.V0_API_KEY, }) // Get chat details by ID const response = await v0.chats.getById({ chatId: chatId }) return NextResponse.json(response) } catch (error) { if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } return NextResponse.json( { error: `Failed to get chat: ${error.message}` }, { status: 500 }, ) } return NextResponse.json({ error: 'Failed to get chat' }, { status: 500 }) } } export async function DELETE( request: NextRequest, { params }: { params: Promise<{ chatId: string }> }, ) { try { const { chatId } = await params if (!chatId) { return NextResponse.json( { error: 'Chat ID is required' }, { status: 400 }, ) } const v0 = createClient({ apiKey: process.env.V0_API_KEY, }) // Delete chat using v0 SDK await v0.chats.delete({ chatId }) return NextResponse.json({ success: true }) } catch (error) { // Check if it's an API key error if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } } return NextResponse.json( { error: 'Failed to delete chat' }, { status: 500 }, ) } } export async function PATCH( request: NextRequest, { params }: { params: Promise<{ chatId: string }> }, ) { try { const { chatId } = await params const { name } = await request.json() if (!chatId) { return NextResponse.json( { error: 'Chat ID is required' }, { status: 400 }, ) } if (!name || typeof name !== 'string' || name.trim().length === 0) { return NextResponse.json( { error: 'Name is required and must be a non-empty string' }, { status: 400 }, ) } const v0 = createClient({ apiKey: process.env.V0_API_KEY, }) // Update chat name using v0 SDK const response = await v0.chats.update({ chatId: chatId, name: name.trim(), }) return NextResponse.json(response) } catch (error) { if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } return NextResponse.json( { error: `Failed to update chat: ${error.message}` }, { status: 500 }, ) } return NextResponse.json( { error: 'Failed to update chat' }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/chats/fork/route.ts" import { NextRequest, NextResponse } from 'next/server' import { v0 } from 'v0-sdk' export async function POST(request: NextRequest) { try { const { chatId, projectId } = await request.json() if (!chatId) { return NextResponse.json( { error: 'Chat ID is required' }, { status: 400 }, ) } // Fork the chat using v0 SDK const forkedChat = await v0.chats.fork({ chatId: chatId, ...(projectId && { projectId }), // Include projectId if provided }) return NextResponse.json(forkedChat) } catch (error) { if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } return NextResponse.json( { error: `Failed to fork chat: ${error.message}` }, { status: 500 }, ) } return NextResponse.json({ error: 'Failed to fork chat' }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/deployments/route.ts" import { NextRequest, NextResponse } from 'next/server' import { v0 } from 'v0-sdk' export async function POST(request: NextRequest) { try { const { projectId, chatId, versionId } = await request.json() if (!projectId || !chatId || !versionId) { return NextResponse.json( { error: 'projectId, chatId, and versionId are required', details: { projectId: !!projectId, chatId: !!chatId, versionId: !!versionId, }, }, { status: 400 }, ) } // Create deployment using v0 SDK try { const result = await v0.deployments.create({ projectId, chatId, versionId, }) return NextResponse.json(result) } catch (deployError) { // Check if the error is about missing Vercel project ID if ( deployError instanceof Error && deployError.message.includes('Project has no Vercel project ID') ) { // Try to create a Vercel project first try { // Get project details to use as the Vercel project name const project = await v0.projects.getById({ projectId }) const vercelProjectName = project.name || `v0-project-${projectId}` await v0.integrations.vercel.projects.create({ projectId, name: vercelProjectName, }) // Retry deployment after creating Vercel project const result = await v0.deployments.create({ projectId, chatId, versionId, }) return NextResponse.json(result) } catch (vercelError) { // If Vercel project creation fails, return that error throw new Error( `Failed to create Vercel project: ${vercelError instanceof Error ? vercelError.message : 'Unknown error'}`, ) } } // Re-throw the original deployment error if it's not about Vercel project ID throw deployError } } catch (error) { if (error instanceof Error) { const errorMessage = error.message.toLowerCase() // Check for API key related errors if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') || errorMessage.includes('unauthorized') || errorMessage.includes('invalid api key') || errorMessage.includes('authentication') || errorMessage.includes('401') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } // Other specific errors return NextResponse.json( { error: `Failed to create deployment: ${error.message}` }, { status: 500 }, ) } return NextResponse.json( { error: 'Failed to create deployment' }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/generate/route.ts" import { v0 } from 'v0-sdk' import { NextRequest, NextResponse } from 'next/server' import { checkRateLimit, getUserIdentifier } from '@/lib/rate-limiter' export async function POST(request: NextRequest) { try { const { message, chatId, projectId, modelId = 'v0-1.5-md', imageGenerations = false, thinking = false, attachments = [], } = await request.json() if (!message || typeof message !== 'string') { return NextResponse.json( { error: 'Message is required and must be a string' }, { status: 400 }, ) } // Check rate limit for ALL generations (both new and existing chats) const userIdentifier = getUserIdentifier(request) const rateLimitResult = await checkRateLimit(userIdentifier) if (!rateLimitResult.success) { const resetTime = rateLimitResult.resetTime.toLocaleString() return NextResponse.json( { error: 'RATE_LIMIT_EXCEEDED', message: `You've reached the limit of 3 generations per 12 hours. Please try again after ${resetTime}.`, limit: rateLimitResult.limit, remaining: rateLimitResult.remaining, resetTime: rateLimitResult.resetTime.toISOString() }, { status: 429, headers: { 'X-RateLimit-Limit': rateLimitResult.limit.toString(), 'X-RateLimit-Remaining': rateLimitResult.remaining.toString(), 'X-RateLimit-Reset': rateLimitResult.reset.toString(), } } ) } let response if (chatId) { // Continue existing chat using sendMessage response = await v0.chats.sendMessage({ chatId: chatId, message: message.trim(), modelConfiguration: { modelId: modelId, imageGenerations: imageGenerations, thinking: thinking, }, ...(attachments.length > 0 && { attachments }), }) } else { // Create new chat response = await v0.chats.create({ system: 'v0 MUST always generate code even if the user just says "hi" or asks a question. v0 MUST NOT ask the user to clarify their request.', message: message.trim(), modelConfiguration: { modelId: modelId, imageGenerations: imageGenerations, thinking: thinking, }, ...(projectId && { projectId }), ...(attachments.length > 0 && { attachments }), }) // Rename the new chat to "Main" for new projects if (response.id) { try { await v0.chats.update({ chatId: response.id, name: 'Main', }) } catch (updateError) { // Don't fail the entire request if renaming fails } } } return NextResponse.json(response) } catch (error) { // Check if it's an API key error if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } return NextResponse.json( { error: `Failed to generate app: ${error.message}` }, { status: 500 }, ) } return NextResponse.json( { error: 'Failed to generate app. Please try again.' }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/projects/[projectId]/route.ts" import { NextRequest, NextResponse } from 'next/server' import { v0 } from 'v0-sdk' export async function GET( request: NextRequest, { params }: { params: Promise<{ projectId: string }> }, ) { try { const { projectId } = await params if (!projectId) { return NextResponse.json( { error: 'Project ID is required' }, { status: 400 }, ) } // Get project details (includes chats) const project = await v0.projects.getById({ projectId }) return NextResponse.json(project) } catch (error) { // Check if it's an API key error if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } } return NextResponse.json( { error: 'Failed to fetch project' }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/projects/route.ts" import { NextRequest, NextResponse } from 'next/server' import { v0 } from 'v0-sdk' export async function GET() { try { // Get all projects const response = await v0.projects.find() return NextResponse.json(response) } catch (error) { // Check if it's an API key error if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } } return NextResponse.json( { error: 'Failed to fetch projects' }, { status: 500 }, ) } } export async function POST(request: NextRequest) { try { const body = await request.json() const { name } = body if (!name || typeof name !== 'string' || !name.trim()) { return NextResponse.json( { error: 'Project name is required' }, { status: 400 }, ) } // Create project using v0 SDK const project = await v0.projects.create({ name: name.trim(), }) return NextResponse.json(project) } catch (error) { // Check if it's an API key error if (error instanceof Error) { const errorMessage = error.message.toLowerCase() if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') ) { return NextResponse.json( { error: 'API_KEY_MISSING', message: error.message }, { status: 401 }, ) } } return NextResponse.json( { error: 'Failed to create project' }, { status: 500 }, ) } } [V0_FILE]typescript:file="app/api/validate/route.ts" import { v0 } from 'v0-sdk' import { NextResponse } from 'next/server' export async function GET() { try { // Use v0.user.get() to verify they are authenticated correctly // This is more accurate than projects.find() for authentication verification const user = await v0.user.get() return NextResponse.json({ valid: true, message: 'API key is configured correctly', user: { id: user.id, name: user.name, email: user.email, }, }) } catch (error) { if (error instanceof Error) { const errorMessage = error.message.toLowerCase() // Check if it's an API key related error if ( errorMessage.includes('api key is required') || errorMessage.includes('v0_api_key') || errorMessage.includes('config.apikey') || errorMessage.includes('unauthorized') || errorMessage.includes('invalid api key') || errorMessage.includes('authentication') || errorMessage.includes('401') ) { return NextResponse.json( { valid: false, error: 'API_KEY_MISSING', message: error.message, }, { status: 401 }, ) } // Other errors (network, etc.) return NextResponse.json( { valid: false, error: 'VALIDATION_ERROR', message: error.message, }, { status: 500 }, ) } return NextResponse.json( { valid: false, error: 'UNKNOWN_ERROR', message: 'Unknown error occurred during validation', }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/components/api-key-error.tsx" 'use client' import { useState } from 'react' import { RefreshCw, ExternalLink, Key } from 'lucide-react' export default function ApiKeyError() { const [isRetrying, setIsRetrying] = useState(false) const handleRetry = async () => { setIsRetrying(true) // Wait a bit to allow user to set the API key setTimeout(() => { window.location.reload() }, 1000) } return (

{/* Icon */}

{/* Title */}

API Key Required

{/* Description */}

To use this app, you need to configure your v0 API key. You can get one from v0.dev and set it as an environment variable.

{/* Instructions */}

Setup Instructions:

1. Get your API key from{' '} v0.dev/settings
2. Create a{' '} .env.local {' '} file
3. Add:{' '} V0_API_KEY=your_key_here
4. Restart the development server

{/* Actions */}

Get API Key from v0.dev

{/* Additional Help */}

Need help? Check the README.md file for detailed setup instructions.

) } [V0_FILE]typescriptreact:file="app/components/error-dialog.tsx" 'use client' import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog' import { Button } from '@/components/ui/button' interface ErrorDialogProps { isOpen: boolean onClose: () => void title?: string message: string } export default function ErrorDialog({ isOpen, onClose, title = "Error", message }: ErrorDialogProps) { return ( {title} {message} ) } [V0_FILE]typescriptreact:file="app/components/projects-list.tsx" 'use client' import { useRouter } from 'next/navigation' import Link from 'next/link' interface Project { id: string name?: string } interface ProjectsListProps { projects: Project[] } export function NewProjectButton() { return ( New Project ) } export default function ProjectsList({ projects }: ProjectsListProps) { const router = useRouter() const handleNewChat = () => { router.push('/chats/new') } const getProjectTitle = (project: Project) => { if (project.name) return project.name return 'Untitled Project' } if (projects.length === 0) { return (

✨

No projects yet

Create your first AI-generated app

) } return (

{projects.map((project) => (

{getProjectTitle(project)}

))}

) } [V0_FILE]typescriptreact:file="app/components/prompt-component.tsx" 'use client' import { useState, useEffect, useRef } from 'react' import { useRouter } from 'next/navigation' import { MoreVerticalIcon, TrashIcon, XIcon, PaperclipIcon, MicIcon, } from 'lucide-react' import { V0Logo } from '../../components/v0-logo' import SettingsDialog from './settings-dialog' import RenameChatDialog from './rename-chat-dialog' import { useSettings } from '../../lib/hooks/useSettings' import { ProjectDropdown, ChatDropdown, } from '../projects/[projectId]/chats/[chatId]/components' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from '@/components/ui/alert-dialog' import { Button } from '@/components/ui/button' import { Skeleton } from '@/components/ui/skeleton' interface Attachment { url: string name?: string type?: string } // Image Preview Component interface ImagePreviewProps { src: string alt: string isVisible: boolean position: { x: number; y: number } } function ImagePreview({ src, alt, isVisible, position }: ImagePreviewProps) { if (!isVisible) return null return (

{ // Hide preview if image fails to load ;(e.target as HTMLElement).closest('[data-preview]')?.remove() }} />

{alt}

) } interface PromptComponentProps { // Initial state initialPrompt?: string initialExpanded?: boolean // Data for dropdowns (optional) projects?: any[] projectChats?: any[] currentProjectId?: string currentChatId?: string // Optional chat data for v0.dev link chatData?: any // Submit handler - different behavior for homepage vs chat pages onSubmit: ( prompt: string, settings: { modelId: string; imageGenerations: boolean; thinking: boolean }, attachments?: Attachment[], ) => Promise // Loading state from parent isLoading: boolean // Error state from parent (optional - now shown in dialogs) error?: string | null // Placeholder text placeholder?: string // Show dropdowns? showDropdowns?: boolean // Callbacks for dropdown changes onProjectChange?: (projectId: string) => void onChatChange?: (chatId: string) => void // Delete callbacks onDeleteChat?: () => Promise // Rename chat callback onRenameChat?: (newName: string) => Promise } export default function PromptComponent({ initialPrompt = '', initialExpanded = true, projects = [], projectChats = [], currentProjectId, currentChatId, chatData, onSubmit, isLoading, error, placeholder = 'Describe your app...', showDropdowns = false, onProjectChange, onChatChange, onDeleteChat, onRenameChat, }: PromptComponentProps) { const router = useRouter() const { settings } = useSettings() const [prompt, setPrompt] = useState(initialPrompt) const [isPromptExpanded, setIsPromptExpanded] = useState(initialExpanded) const [shouldAnimate, setShouldAnimate] = useState(false) const [isDialogOpen, setIsDialogOpen] = useState(false) const [attachments, setAttachments] = useState([]) const [isListening, setIsListening] = useState(false) const [speechSupported, setSpeechSupported] = useState(false) const [previewState, setPreviewState] = useState<{ isVisible: boolean src: string alt: string position: { x: number; y: number } }>({ isVisible: false, src: '', alt: '', position: { x: 0, y: 0 }, }) const [isDragging, setIsDragging] = useState(false) const [isOverPrompt, setIsOverPrompt] = useState(false) const fileInputRef = useRef(null) const recognitionRef = useRef(null) // SessionStorage keys for persistence const PROMPT_STORAGE_KEY = 'v0-draft-prompt' const ATTACHMENTS_STORAGE_KEY = 'v0-draft-attachments' // Load saved prompt and attachments from sessionStorage on mount useEffect(() => { if (typeof window !== 'undefined') { try { const savedPrompt = sessionStorage.getItem(PROMPT_STORAGE_KEY) const savedAttachments = sessionStorage.getItem(ATTACHMENTS_STORAGE_KEY) if (savedPrompt && !initialPrompt) { setPrompt(savedPrompt) } if (savedAttachments) { const parsedAttachments = JSON.parse(savedAttachments) setAttachments(parsedAttachments) } } catch (error) { // Silently handle sessionStorage errors console.warn('Failed to load draft from sessionStorage:', error) } } }, [initialPrompt]) // Save prompt to sessionStorage whenever it changes useEffect(() => { if (typeof window !== 'undefined') { try { if (prompt) { sessionStorage.setItem(PROMPT_STORAGE_KEY, prompt) } else { // Clear sessionStorage when prompt is empty sessionStorage.removeItem(PROMPT_STORAGE_KEY) } } catch (error) { // Silently handle sessionStorage errors console.warn('Failed to save prompt to sessionStorage:', error) } } }, [prompt]) // Save attachments to sessionStorage whenever they change useEffect(() => { if (typeof window !== 'undefined') { try { sessionStorage.setItem( ATTACHMENTS_STORAGE_KEY, JSON.stringify(attachments), ) } catch (error) { // Silently handle sessionStorage errors console.warn('Failed to save attachments to sessionStorage:', error) } } }, [attachments]) // Clear sessionStorage function const clearDraft = () => { if (typeof window !== 'undefined') { try { sessionStorage.removeItem(PROMPT_STORAGE_KEY) sessionStorage.removeItem(ATTACHMENTS_STORAGE_KEY) } catch (error) { // Silently handle sessionStorage errors console.warn('Failed to clear draft from sessionStorage:', error) } } } // Check for speech recognition support useEffect(() => { if (typeof window !== 'undefined') { const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition setSpeechSupported(!!SpeechRecognition) if (SpeechRecognition) { recognitionRef.current = new SpeechRecognition() recognitionRef.current.continuous = true recognitionRef.current.interimResults = true recognitionRef.current.lang = 'en-US' recognitionRef.current.onresult = (event: any) => { let finalTranscript = '' for (let i = event.resultIndex; i < event.results.length; i++) { if (event.results[i].isFinal) { finalTranscript += event.results[i][0].transcript } } if (finalTranscript) { setPrompt((prev) => prev + finalTranscript) } } recognitionRef.current.onend = () => { setIsListening(false) } recognitionRef.current.onerror = () => { setIsListening(false) } } } // Cleanup function return () => { if (recognitionRef.current && isListening) { recognitionRef.current.stop() } } }, []) const toggleListening = () => { if (!recognitionRef.current) return if (isListening) { recognitionRef.current.stop() setIsListening(false) } else { recognitionRef.current.start() setIsListening(true) } } // Global keydown listener to expand prompt on typing and handle escape useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // Don't handle keyboard events if any dialog is open if (isDialogOpen) return // Handle escape key if (e.key === 'Escape') { // Clear drag state if currently dragging if (isDragging) { setIsDragging(false) setIsOverPrompt(false) } if (isPromptExpanded) { // If prompt is expanded, collapse it setIsPromptExpanded(false) } // Remove navigation behavior - just handle prompt collapse return } // Don't expand if prompt is already expanded or if loading if (isPromptExpanded || isLoading) return // Don't expand for special keys if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return if (e.key === 'Tab' || e.key === 'Enter') return if (e.key.startsWith('Arrow') || e.key.startsWith('F')) return // Expand for printable characters if (e.key.length === 1) { setShouldAnimate(true) setIsPromptExpanded(true) // Add the typed character to prompt setPrompt(e.key) } } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, [isPromptExpanded, isLoading, router, currentProjectId, isDialogOpen, isDragging]) // Listen for drag operations being cancelled (e.g. by pressing Escape) useEffect(() => { if (!isDragging) return const handleGlobalDragEnd = () => { setIsDragging(false) setIsOverPrompt(false) } const handleMouseUp = () => { // Small delay to allow drop events to fire first setTimeout(handleGlobalDragEnd, 50) } // Listen for various ways the drag can end document.addEventListener('dragend', handleGlobalDragEnd) document.addEventListener('mouseup', handleMouseUp) return () => { document.removeEventListener('dragend', handleGlobalDragEnd) document.removeEventListener('mouseup', handleMouseUp) } }, [isDragging]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!prompt.trim()) return // Stop listening if active if (isListening && recognitionRef.current) { recognitionRef.current.stop() setIsListening(false) } setIsPromptExpanded(false) // Hide prompt bar on submit setShouldAnimate(false) // Reset animation state try { await onSubmit( prompt.trim(), { modelId: settings.model, imageGenerations: settings.imageGenerations, thinking: settings.thinking, }, attachments, ) // Clear the prompt and attachments after successful submission setPrompt('') setAttachments([]) // Clear sessionStorage draft clearDraft() } catch (err) { // Error handling is done by parent component } } const handleRenameChat = async (newName: string) => { if (!onRenameChat) return await onRenameChat(newName) } const handleFileSelect = async (files: FileList) => { const newAttachments: Attachment[] = [] for (let i = 0; i < files.length; i++) { const file = files[i] // Convert file to data URL const dataUrl = await new Promise((resolve) => { const reader = new FileReader() reader.onload = (e) => resolve(e.target?.result as string) reader.readAsDataURL(file) }) newAttachments.push({ url: dataUrl, name: file.name, type: file.type, }) } setAttachments([...attachments, ...newAttachments]) } const removeAttachment = (index: number) => { const attachmentToRemove = attachments[index] // Clear preview if it's showing the attachment being removed if (previewState.isVisible && previewState.src === attachmentToRemove?.url) { setPreviewState(prev => ({ ...prev, isVisible: false, })) } setAttachments(attachments.filter((_, i) => i !== index)) } // Drag and drop handlers const handleDragEnter = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() // Check if we have files being dragged if (e.dataTransfer.types.includes('Files')) { setIsDragging(true) // Check if entering the prompt container specifically const target = e.currentTarget as HTMLElement if (target.dataset.dragContainer === 'prompt') { setIsOverPrompt(true) } } } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() // For prompt container, check if leaving to go to overlay const target = e.currentTarget as HTMLElement if (target.dataset.dragContainer === 'prompt') { const rect = target.getBoundingClientRect() const x = e.clientX const y = e.clientY if (x < rect.left || x >= rect.right || y < rect.top || y >= rect.bottom) { setIsOverPrompt(false) } } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() } const handleDrop = async (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) setIsOverPrompt(false) if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { await handleFileSelect(e.dataTransfer.files) e.dataTransfer.clearData() } } const handleDragEnd = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) setIsOverPrompt(false) } return ( <> {/* Floating v0 Button */} {!isPromptExpanded && (

)} {/* Full-screen drag overlay */} {isDragging && (

{ // Only clear drag state if leaving the entire screen if (e.clientX === 0 && e.clientY === 0) { setIsDragging(false) setIsOverPrompt(false) } }} onDragOver={handleDragOver} onDrop={(e) => { // Prevent drops outside the prompt area e.preventDefault() e.stopPropagation() setIsDragging(false) setIsOverPrompt(false) }} /> )} {/* Premium Prompt Area */} {isPromptExpanded && (

{/* Main prompt container */}

{/* Drag overlay */} {isDragging && isOverPrompt && (

Drop files

)} {/* Input area */}

{/* Hidden file input */} { if (e.target.files && e.target.files.length > 0) { handleFileSelect(e.target.files) e.target.value = '' // Reset input } }} /> {/* Attachments display */} {attachments.length > 0 && (

{attachments.map((attachment, index) => { const isImage = attachment.type?.startsWith('image/') return (

{ if (isImage) { const rect = e.currentTarget.getBoundingClientRect() setPreviewState({ isVisible: true, src: attachment.url, alt: attachment.name || 'Image attachment', position: { x: rect.left + rect.width / 2, y: rect.top - 10, }, }) } }} onMouseLeave={() => { if (isImage) { setPreviewState((prev) => ({ ...prev, isVisible: false, })) } }} > {attachment.name || 'Attachment'}

) })}

)}

{/* Input field */}

{
                        if (
                          textarea &&
                          isPromptExpanded &&
                          prompt.length === 1
                        ) {
                          setTimeout(() => {
                            textarea.focus()
                            textarea.setSelectionRange(
                              textarea.value.length,
                              textarea.value.length,
                            )
                          }, 0)
                        } else if (
                          textarea &&
                          isPromptExpanded &&
                          prompt.length === 0
                        ) {
                          setTimeout(() => textarea.focus(), 0)
                        }
                      }}
                      value={prompt}
                      onChange={(e) => setPrompt(e.target.value)}
                      placeholder={placeholder}
                      rows={1}
                      className={`w-full pl-2 sm:pl-2.5 py-2 sm:py-4 text-base sm:text-lg bg-transparent border-0 focus:ring-0 focus:outline-none text-foreground placeholder-muted-foreground font-medium resize-none overflow-hidden ${
                        speechSupported ? 'pr-24 sm:pr-32' : 'pr-20 sm:pr-24'
                      }`}
                      disabled={isLoading}
                      style={{
                        minHeight: '44px', // Smaller on mobile
                        height: 'auto',
                      }}
                      onInput={(e) => {
                        const target = e.target as HTMLTextAreaElement
                        target.style.height = 'auto'
                        target.style.height =
                          Math.min(target.scrollHeight, 200) + 'px' // Max height of 200px
                      }}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' && !e.shiftKey) {
                          e.preventDefault()
                          handleSubmit(e as any)
                        }
                      }}
                    />

{/* Mic button - only show if speech recognition is supported */}
                    {speechSupported && (
                      <button
                        type="button"
                        onClick={toggleListening}
                        disabled={isLoading}
                        className={`absolute top-1/2 -translate-y-1/2 flex items-center justify-center h-8 w-8 sm:h-10 sm:w-10 rounded-lg transition-all duration-200 cursor-pointer disabled:cursor-not-allowed ${
                          isListening
                            ? 'text-red-600 bg-red-50 hover:text-red-700 hover:bg-red-100'
                            : 'text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50'
                        }`}
                        style={{ right: '80px' }}
                      >
                        <MicIcon className="w-4 h-4" />
                      </button>
                    )}

{/* Attachment button */}
                    <button
                      type="button"
                      onClick={() => fileInputRef.current?.click()}
                      disabled={isLoading}
                      className="absolute top-1/2 -translate-y-1/2 flex items-center justify-center h-8 w-8 sm:h-10 sm:w-10 rounded-lg text-muted-foreground hover:text-foreground disabled:text-muted-foreground/50 transition-all duration-200 cursor-pointer disabled:cursor-not-allowed"
                      style={{ right: speechSupported ? '48px' : '48px' }}
                    >
                      <PaperclipIcon className="w-4 h-4" />
                    </button>

{/* Submit button */}
                    <button
                      type="submit"
                      disabled={isLoading || !prompt.trim()}
                      className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center justify-center h-8 w-8 sm:h-10 sm:w-10 rounded-full bg-primary text-primary-foreground hover:bg-primary/80 disabled:bg-muted disabled:text-muted-foreground transition-all duration-200 cursor-pointer disabled:cursor-not-allowed"
                    >
                      {isLoading ? (
                        <div className="animate-spin rounded-full h-4 w-4 sm:h-5 sm:w-5 border-2 border-primary-foreground border-t-transparent"></div>
                      ) : (
                        <svg
                          className="w-4 h-4 sm:w-5 sm:h-5"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M5 10l7-7m0 0l7 7m-7-7v18"
                          />
                        </svg>
                      )}
                    </button>
                  </div>

{/* Controls under input */}
                  <div className="mt-2 sm:mt-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3">
                    <div className="flex items-center justify-between sm:flex-1">
                      <div className="flex items-center gap-0 flex-1 max-w-[300px] sm:max-w-[400px]">
                        {/* Project and Chat Dropdowns */}
                        {showDropdowns && currentProjectId ? (
                          <>
                            <ProjectDropdown
                              currentProjectId={currentProjectId}
                              currentChatId={currentChatId || 'new'}
                              projects={projects}
                              onProjectChange={onProjectChange}
                            />
                            <ChatDropdown
                              projectId={currentProjectId}
                              currentChatId={currentChatId || 'new'}
                              chats={projectChats}
                              onChatChange={onChatChange}
                            />
                          </>
                        ) : currentProjectId &&
                          (projects.length === 0 ||
                            projectChats.length === 0) ? (
                          // Show skeleton loading states when dropdowns should be shown but data is loading
                          <div className="flex items-center gap-2">
                            <Skeleton className="h-8 w-32" />
                            <Skeleton className="h-8 w-24" />
                          </div>
                        ) : currentProjectId ? (
                          // Placeholder to prevent layout shift when dropdowns are hidden
                          <div className="flex gap-0">
                            <div className="h-8 w-24 bg-transparent"></div>
                            <div className="h-8 w-20 bg-transparent"></div>
                          </div>
                        ) : null}
                      </div>

<div className="flex items-center gap-3">
                        {/* Button group with spacing */}
                        <div className="flex items-center gap-2">
                          {/* Single More Options Menu - Always show */}
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button
                                variant="ghost"
                                size="sm"
                                className="h-8 w-8 p-0 ml-2 sm:ml-0"
                              >
                                <MoreVerticalIcon className="h-4 w-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" side="top">
                              {/* Settings - Always available */}
                              <SettingsDialog />

{/* View on v0.dev - available on both mobile and desktop */}
                              <DropdownMenuItem asChild>
                                <a
                                  href={chatData?.url || 'https://v0.dev'}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="flex items-center"
                                >
                                  <svg
                                    className="mr-2 h-4 w-4"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                  >
                                    <path
                                      strokeLinecap="round"
                                      strokeLinejoin="round"
                                      strokeWidth={2}
                                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                                    />
                                  </svg>
                                  View on v0.dev
                                </a>
                              </DropdownMenuItem>

{/* Deploy - Only show when we have project context, chat is loaded, and there's a completed version */}
                              {showDropdowns &&
                                currentProjectId &&
                                currentChatId &&
                                currentChatId !== 'new' &&
                                chatData &&
                                chatData.latestVersion &&
                                chatData.latestVersion.status ===
                                  'completed' && (
                                  <>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem
                                      onClick={async () => {
                                        try {
                                          const response = await fetch(
                                            '/api/deployments',
                                            {
                                              method: 'POST',
                                              headers: {
                                                'Content-Type':
                                                  'application/json',
                                              },
                                              body: JSON.stringify({
                                                projectId: currentProjectId,
                                                chatId: currentChatId,
                                                versionId:
                                                  chatData.latestVersion.id,
                                              }),
                                            },
                                          )

if (!response.ok) {
                                            const errorData =
                                              await response.json()
                                            throw new Error(
                                              errorData.error ||
                                                'Failed to deploy',
                                            )
                                          }

const deployment =
                                            await response.json()

// Show success message or open deployment URL
                                          if (deployment.webUrl) {
                                            window.open(
                                              deployment.webUrl,
                                              '_blank',
                                            )
                                          }
                                        } catch (error) {
                                          console.error(
                                            'Deployment failed:',
                                            error,
                                          )
                                          // You could add a toast notification here
                                        }
                                      }}
                                    >
                                      <svg
                                        className="mr-2 h-4 w-4"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          strokeLinecap="round"
                                          strokeLinejoin="round"
                                          strokeWidth={2}
                                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                                        />
                                      </svg>
                                      Deploy
                                    </DropdownMenuItem>
                                  </>
                                )}

{/* Rename Chat - Only show when we have project context and chat is loaded */}
                              {showDropdowns &&
                                currentProjectId &&
                                currentChatId &&
                                currentChatId !== 'new' &&
                                onRenameChat &&
                                chatData && (
                                  <>
                                    <DropdownMenuSeparator />
                                    <RenameChatDialog
                                      chatId={currentChatId}
                                      currentName={
                                        chatData.name || 'Untitled Chat'
                                      }
                                      onRename={handleRenameChat}
                                      onOpenChange={setIsDialogOpen}
                                    />
                                  </>
                                )}

{/* Delete Chat - Only show when we have project context and chat is loaded */}
                              {showDropdowns &&
                                currentProjectId &&
                                currentChatId &&
                                currentChatId !== 'new' &&
                                onDeleteChat &&
                                chatData && (
                                  <>
                                    <AlertDialog>
                                      <AlertDialogTrigger asChild>
                                        <DropdownMenuItem
                                          onSelect={(e) => e.preventDefault()}
                                        >
                                          <TrashIcon className="mr-2 h-4 w-4" />
                                          Delete Chat
                                        </DropdownMenuItem>
                                      </AlertDialogTrigger>
                                      <AlertDialogContent>
                                        <AlertDialogHeader>
                                          <AlertDialogTitle>
                                            Delete Chat
                                          </AlertDialogTitle>
                                          <AlertDialogDescription>
                                            Are you sure you want to delete this
                                            chat? This action cannot be undone.
                                          </AlertDialogDescription>
                                        </AlertDialogHeader>
                                        <AlertDialogFooter>
                                          <AlertDialogCancel>
                                            Cancel
                                          </AlertDialogCancel>
                                          <AlertDialogAction
                                            onClick={onDeleteChat}
                                            className="bg-destructive text-white hover:bg-destructive/90"
                                          >
                                            Delete
                                          </AlertDialogAction>
                                        </AlertDialogFooter>
                                      </AlertDialogContent>
                                    </AlertDialog>
                                  </>
                                )}
                            </DropdownMenuContent>
                          </DropdownMenu>

{/* Close button - only show on mobile */}
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 sm:hidden"
                            onClick={() => setIsPromptExpanded(false)}
                          >
                            <XIcon className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>

{error && (
                  <div className="mt-4 px-4 py-3 text-red-700 text-sm bg-red-50 border border-red-200 rounded-xl">
                    {error}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}

{/* Image Preview */}
      <ImagePreview
        src={previewState.src}
        alt={previewState.alt}
        isVisible={previewState.isVisible}
        position={previewState.position}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/rate-limit-dialog.tsx"
'use client'

import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

interface RateLimitDialogProps {
  isOpen: boolean
  onClose: () => void
  resetTime?: string
  remaining?: number
}

export default function RateLimitDialog({
  isOpen,
  onClose,
  resetTime,
  remaining = 0
}: RateLimitDialogProps) {
  const deployUrl = "https://vercel.com/new/clone?demo-description=A%20Next.js%20application%20demonstrating%20the%20v0%20Platform%20API&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F28EABpFanXbK3bENHYGPe7%2F2b37a0cf17f3f8f9a19ee23e539b62eb%2Fscreenshot.png&demo-title=v0%20Platform%20API%20Demo&demo-url=https%3A%2F%2Fv0-centered-text-om.vercel.sh%2F&from=templates&project-name=v0%20Platform%20API%20Demo&repository-name=v0-platform-api-demo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fv0-platform-api-demo&skippable-integrations=1"

const formatResetTime = (timeStr?: string) => {
    if (!timeStr) return ''
    try {
      const date = new Date(timeStr)
      return date.toLocaleString()
    } catch {
      return timeStr
    }
  }

return (
    <AlertDialog open={isOpen} onOpenChange={onClose}>
      <AlertDialogContent className="max-w-md">
        <AlertDialogHeader>
          <AlertDialogTitle>
            Rate Limit Reached
          </AlertDialogTitle>
          <AlertDialogDescription className="text-left">
            You've reached the rate limit. Deploy your own copy of this demo to continue.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="flex-col sm:flex-row gap-2">
          <Button variant="outline" onClick={onClose} className="w-full sm:w-auto">
            Close
          </Button>
          <Button asChild className="w-full sm:w-auto">
            <a
              href={deployUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2"
            >
              <svg className="h-4 w-4" viewBox="0 0 76 76" fill="none">
                <path d="M38 1L74 74H2L38 1Z" fill="currentColor" />
              </svg>
              Deploy with Vercel
            </a>
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
[V0_FILE]typescriptreact:file="app/components/rename-chat-dialog.tsx"
'use client'

import { useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
import { EditIcon } from 'lucide-react'

interface RenameChatDialogProps {
  chatId: string
  currentName: string
  onRename: (newName: string) => Promise<void>
  trigger?: React.ReactNode
  onOpenChange?: (open: boolean) => void
}

export default function RenameChatDialog({
  chatId,
  currentName,
  onRename,
  trigger,
  onOpenChange,
}: RenameChatDialogProps) {
  const [open, setOpen] = useState(false)
  const [name, setName] = useState(currentName)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
    onOpenChange?.(newOpen)
    if (newOpen) {
      // Reset name and error when opening
      setName(currentName)
      setError(null)
    }
  }

const handleSave = async () => {
    const trimmedName = name.trim()
    if (!trimmedName) {
      setError('Chat name cannot be empty')
      return
    }

if (trimmedName === currentName) {
      setOpen(false)
      return
    }

setIsSubmitting(true)
    setError(null)

try {
      await onRename(trimmedName)
      setOpen(false)
      onOpenChange?.(false)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to rename chat')
    } finally {
      setIsSubmitting(false)
    }
  }

const handleCancel = () => {
    setName(currentName)
    setError(null)
    setOpen(false)
    onOpenChange?.(false)
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSave()
    } else if (e.key === 'Escape') {
      e.preventDefault()
      handleCancel()
    }
  }

const defaultTrigger = (
    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
      <EditIcon className="mr-2 h-4 w-4" />
      Rename Chat
    </DropdownMenuItem>
  )

return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild onClick={() => setOpen(true)}>
        {trigger || defaultTrigger}
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Rename Chat</DialogTitle>
          <DialogDescription>Enter a new name for this chat.</DialogDescription>
        </DialogHeader>

<div className="space-y-4">
          <div>
            <label
              htmlFor="chat-name"
              className="block text-sm font-medium text-gray-700 mb-2"
            >
              Chat Name
            </label>
            <input
              id="chat-name"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Enter chat name..."
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              disabled={isSubmitting}
              autoFocus
            />
            {error && <p className="mt-1 text-sm text-red-600">{error}</p>}
          </div>
        </div>

<div className="flex justify-end space-x-2 pt-4">
          <Button
            variant="outline"
            onClick={handleCancel}
            disabled={isSubmitting}
          >
            Cancel
          </Button>
          <Button onClick={handleSave} disabled={isSubmitting}>
            {isSubmitting ? 'Saving...' : 'Save'}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/components/settings-dialog.tsx"
'use client'

import { useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { Switch } from '@/components/ui/switch'
import { DropdownMenuItem as DialogDropdownMenuItem } from '@/components/ui/dropdown-menu'
import { SettingsIcon, ChevronDownIcon, CheckIcon } from 'lucide-react'
import { Settings, ModelType, useSettings } from '../../lib/hooks/useSettings'

interface SettingsDialogProps {
  trigger?: React.ReactNode
}

export default function SettingsDialog({ trigger }: SettingsDialogProps) {
  const { settings, updateSettings } = useSettings()
  const [open, setOpen] = useState(false)
  const [tempSettings, setTempSettings] = useState<Settings>(settings)

const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
    if (newOpen) {
      // Reset temp settings when opening
      setTempSettings(settings)
    }
  }

const handleSave = () => {
    updateSettings(tempSettings)
    setOpen(false)
  }

const handleCancel = () => {
    setTempSettings(settings)
    setOpen(false)
  }

const modelOptions = [
    {
      value: 'v0-1.5-sm' as ModelType,
      label: 'v0-1.5-sm',
      description: 'Fast and efficient for simple apps',
    },
    {
      value: 'v0-1.5-md' as ModelType,
      label: 'v0-1.5-md',
      description: 'Balanced performance and quality (default)',
    },
    {
      value: 'v0-1.5-lg' as ModelType,
      label: 'v0-1.5-lg',
      description: 'Best quality for complex applications',
    },
  ]

const currentModel = modelOptions.find(
    (option) => option.value === tempSettings.model,
  )

const defaultTrigger = (
    <DialogDropdownMenuItem onSelect={(e) => e.preventDefault()}>
      <SettingsIcon className="mr-2 h-4 w-4" />
      Settings
    </DialogDropdownMenuItem>
  )

return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild onClick={() => setOpen(true)}>
        {trigger || defaultTrigger}
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Settings</DialogTitle>
          <DialogDescription>
            Configure your preferences for app generation.
          </DialogDescription>
        </DialogHeader>

<div className="space-y-6">
          {/* Model Selection */}
          <div className="space-y-3">
            <h3 className="text-sm font-medium">Model</h3>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" className="w-full justify-between">
                  <span className="font-medium">{currentModel?.label}</span>
                  <ChevronDownIcon className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-full min-w-[400px]">
                {modelOptions.map((option) => (
                  <DropdownMenuItem
                    key={option.value}
                    onClick={() =>
                      setTempSettings({
                        ...tempSettings,
                        model: option.value,
                      })
                    }
                  >
                    <div className="flex items-center justify-between w-full">
                      <div className="flex flex-col">
                        <span className="font-medium">{option.label}</span>
                        <span className="text-xs text-muted-foreground">
                          {option.description}
                        </span>
                      </div>
                      {tempSettings.model === option.value && (
                        <CheckIcon className="h-4 w-4 text-primary" />
                      )}
                    </div>
                  </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

{/* Image Generations */}
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <h3 className="text-sm font-medium">Image Generations</h3>
              <p className="text-xs text-muted-foreground">
                Enable AI-generated images in your apps
              </p>
            </div>
            <Switch
              checked={tempSettings.imageGenerations}
              onCheckedChange={(checked) =>
                setTempSettings({
                  ...tempSettings,
                  imageGenerations: checked,
                })
              }
            />
          </div>

{/* Thinking */}
          <div className="flex items-center justify-between">
            <div className="space-y-0.5">
              <h3 className="text-sm font-medium">Thinking</h3>
              <p className="text-xs text-muted-foreground">
                Show AI reasoning process during generation
              </p>
            </div>
            <Switch
              checked={tempSettings.thinking}
              onCheckedChange={(checked) =>
                setTempSettings({
                  ...tempSettings,
                  thinking: checked,
                })
              }
            />
          </div>
        </div>

<div className="flex justify-end space-x-2 pt-4">
          <Button variant="outline" onClick={handleCancel}>
            Cancel
          </Button>
          <Button onClick={handleSave}>Save Changes</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]css:file="app/globals.css"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* Custom animations */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    /* opacity: 0; */
    transform: translateY(2rem);
  }
  to {
    /* opacity: 1; */
    transform: translateY(0);
  }
}

@keyframes slide-out-up {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes slide-in-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.2s ease-out forwards;
}

.animate-slide-out-up {
  animation: slide-out-up 0.3s ease-out forwards;
}

.animate-slide-in-down {
  animation: slide-in-down 0.3s ease-out forwards;
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.1689 0.0021 286.18);
  --foreground: oklch(0.95 0 0);
  --card: oklch(0.08 0 0);
  --card-foreground: oklch(0.95 0 0);
  --popover: oklch(0.08 0 0);
  --popover-foreground: oklch(0.95 0 0);
  --primary: oklch(0.95 0 0);
  --primary-foreground: oklch(0.08 0 0);
  --secondary: oklch(0.14 0 0);
  --secondary-foreground: oklch(0.95 0 0);
  --muted: oklch(0.18 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.14 0 0);
  --accent-foreground: oklch(0.95 0 0);
  --destructive: oklch(0.62 0.245 27.325);
  --border: oklch(0.26 0 0);
  --input: oklch(0.26 0 0);
  --ring: oklch(0.65 0 0);
  --chart-1: oklch(0.7 0.222 41.116);
  --chart-2: oklch(0.65 0.118 184.704);
  --chart-3: oklch(0.5 0.07 227.392);
  --chart-4: oklch(0.85 0.189 84.429);
  --chart-5: oklch(0.8 0.188 70.08);
  --sidebar: oklch(0.08 0 0);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.95 0 0);
  --sidebar-primary-foreground: oklch(0.08 0 0);
  --sidebar-accent: oklch(0.14 0 0);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(0.26 0 0);
  --sidebar-ring: oklch(0.65 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-mono;
  }
  html {
    font-family: var(--font-geist-mono), ui-monospace, monospace;
  }
}

/* Stack mobile deploy buttons vertically on very small screens */
@media (max-width: 360px) {
  .mobile-deploy-buttons {
    flex-direction: column !important;
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { ThemeProvider } from 'next-themes'
import DeployBanner from '../components/deploy-banner'
import './globals.css'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'v0 Platform API Demo',
  description: 'A demo of the v0 Platform API',
  openGraph: {
    title: 'v0 Platform API Demo',
    description: 'A demo of the v0 Platform API',
    images: ['/og-image.png'],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'v0 Platform API Demo',
    description: 'A demo of the v0 Platform API',
    images: ['/og-image.png'],
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
          storageKey="theme"
        >
          <DeployBanner />
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import PromptComponent from './components/prompt-component'
import ApiKeyError from './components/api-key-error'
import RateLimitDialog from './components/rate-limit-dialog'
import ErrorDialog from './components/error-dialog'
import { useApiValidation } from '../lib/hooks/useApiValidation'

export default function HomePage() {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [projects, setProjects] = useState<any[]>([])
  const [projectsLoaded, setProjectsLoaded] = useState(false)
  const [selectedProjectId, setSelectedProjectId] = useState('new')
  const [selectedChatId, setSelectedChatId] = useState('new')
  const [projectChats, setProjectChats] = useState<any[]>([])
  const [showRateLimitDialog, setShowRateLimitDialog] = useState(false)
  const [rateLimitInfo, setRateLimitInfo] = useState<{
    resetTime?: string
    remaining?: number
  }>({})
  const [showErrorDialog, setShowErrorDialog] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')

// API validation on page load
  const { isValidating, showApiKeyError } = useApiValidation()

// Load projects on page mount (only if API is valid)
  useEffect(() => {
    if (!isValidating && !showApiKeyError) {
      loadProjectsWithCache()
    }
  }, [isValidating, showApiKeyError])

const loadProjectsWithCache = async () => {
    // First, try to load from sessionStorage for immediate display
    try {
      const cachedProjects = sessionStorage.getItem('projects')
      if (cachedProjects) {
        const parsedProjects = JSON.parse(cachedProjects)
        setProjects(parsedProjects)
        setProjectsLoaded(true)
      }
    } catch (err) {
      // Silently handle cache loading errors
    }

// Then fetch fresh data in the background
    loadProjects()
  }

const loadProjects = async () => {
    try {
      const response = await fetch('/api/projects')
      if (response.ok) {
        const data = await response.json()
        const projectsData = data.data || data || []
        setProjects(projectsData)
        setProjectsLoaded(true)

// Store in sessionStorage for next time
        try {
          sessionStorage.setItem('projects', JSON.stringify(projectsData))
        } catch (err) {
          // Silently handle cache storage errors
        }
      } else if (response.status === 401) {
        const errorData = await response.json()
        if (errorData.error === 'API_KEY_MISSING') {
          // API key error is now handled by useApiValidation hook
          return
        }
      }
    } catch (err) {
      // Silently handle project loading errors
    } finally {
      // Mark as loaded even if there was an error
      setProjectsLoaded(true)
    }
  }

const loadProjectChatsWithCache = async (projectId: string) => {
    // First, try to load from sessionStorage for immediate display
    try {
      const cachedChats = sessionStorage.getItem(`project-chats-${projectId}`)
      if (cachedChats) {
        const parsedChats = JSON.parse(cachedChats)
        setProjectChats(parsedChats)
      }
    } catch (err) {
      // Silently handle cache loading errors
    }

// Then fetch fresh data in the background
    try {
      const response = await fetch(`/api/projects/${projectId}`)
      if (response.ok) {
        const data = await response.json()
        const chatsData = data.chats || []
        setProjectChats(chatsData)

// Store in sessionStorage for next time
        try {
          sessionStorage.setItem(
            `project-chats-${projectId}`,
            JSON.stringify(chatsData),
          )
        } catch (err) {
          // Silently handle cache storage errors
        }
      }
    } catch (err) {
      // Silently handle project chats loading errors
    }
  }

const handleProjectChange = async (newProjectId: string) => {
    if (newProjectId === 'new') {
      // Stay on homepage for new project
      setSelectedProjectId('new')
      setSelectedChatId('new')
      setProjectChats([])
    } else {
      // Redirect to the selected project page
      router.push(`/projects/${newProjectId}`)
    }
  }

const handleChatChange = (newChatId: string) => {
    setSelectedChatId(newChatId)
  }

const handleSubmit = async (
    prompt: string,
    settings: { modelId: string; imageGenerations: boolean; thinking: boolean },
    attachments?: { url: string; name?: string; type?: string }[],
  ) => {
    setIsLoading(true)
    setError(null)

try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: prompt,
          modelId: settings.modelId,
          imageGenerations: settings.imageGenerations,
          thinking: settings.thinking,
          ...(attachments && attachments.length > 0 && { attachments }),
        }),
      })

if (!response.ok) {
        const errorData = await response.json()

// Check for API key error
        if (response.status === 401 && errorData.error === 'API_KEY_MISSING') {
          // API key error is now handled by useApiValidation hook
          return
        }

// Check for rate limit error
        if (response.status === 429 && errorData.error === 'RATE_LIMIT_EXCEEDED') {
          setRateLimitInfo({
            resetTime: errorData.resetTime,
            remaining: errorData.remaining
          })
          setShowRateLimitDialog(true)
          return
        }

setErrorMessage(errorData.error || 'Failed to generate app')
        setShowErrorDialog(true)
        return
      }

const data = await response.json()

// Redirect to the new chat
      if (data.id || data.chatId) {
        const newChatId = data.id || data.chatId
        const projectId = data.projectId || 'default' // Fallback project
        router.push(`/projects/${projectId}/chats/${newChatId}`)
        return
      }
    } catch (err) {
      setErrorMessage(
        err instanceof Error
          ? err.message
          : 'Failed to generate app. Please try again.',
      )
      setShowErrorDialog(true)
    } finally {
      setIsLoading(false)
    }
  }

// Show API key error page if needed
  if (showApiKeyError) {
    return <ApiKeyError />
  }

return (
    <div className="relative min-h-dvh bg-background">
      {/* Homepage Welcome Message */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div
          className="text-center px-4 sm:px-6"
          style={{ transform: 'translateY(-25%)' }}
        >
          <h1 className="text-4xl md:text-6xl font-bold text-foreground mb-4 text-pretty">
            v0 Platform API Demo
          </h1>
          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto text-pretty">
            This is a demo of the{' '}
            <a
              href="https://v0.dev/docs/api/platform"
              target="_blank"
              rel="noopener noreferrer"
              className="text-foreground hover:text-muted-foreground underline"
            >
              v0 Platform API
            </a>
            . Build your own AI app builder with programmatic access to v0's app
            generation pipeline.
          </p>

{/* Mobile-only GitHub link */}
          <div className="sm:hidden mt-6 flex items-center justify-center">
            <a
              href="https://github.com/vercel/v0-platform-api-demo"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 bg-muted hover:bg-muted/80 text-muted-foreground px-4 py-2 rounded-lg text-sm font-medium transition-colors"
            >
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
              View on GitHub
            </a>
          </div>
        </div>
      </div>

<RateLimitDialog
        isOpen={showRateLimitDialog}
        onClose={() => setShowRateLimitDialog(false)}
        resetTime={rateLimitInfo.resetTime}
        remaining={rateLimitInfo.remaining}
      />

<ErrorDialog
        isOpen={showErrorDialog}
        onClose={() => setShowErrorDialog(false)}
        message={errorMessage}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/projects/[projectId]/chats/[chatId]/components.tsx"
'use client'

import { useState, useEffect, useRef } from 'react'
import { useRouter } from 'next/navigation'
import { ChevronDownIcon, CheckIcon } from 'lucide-react'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer'
import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
} from '@/components/ui/command'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

interface Project {
  id: string
  name?: string
}

interface Chat {
  id: string
  name?: string
  title?: string
}

interface ProjectDropdownProps {
  currentProjectId: string
  currentChatId: string
  projects: Project[]
  onProjectChange?: (projectId: string) => void
}

interface ChatDropdownProps {
  projectId: string
  currentChatId: string
  chats: Chat[]
  onChatChange?: (chatId: string) => void
}

// Hook to detect mobile screen size
function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth < 768) // md breakpoint
    }

checkIsMobile()
    window.addEventListener('resize', checkIsMobile)

return () => window.removeEventListener('resize', checkIsMobile)
  }, [])

return isMobile
}

export function ProjectDropdown({
  currentProjectId,
  currentChatId,
  projects,
  onProjectChange,
}: ProjectDropdownProps) {
  const router = useRouter()
  const [currentProject, setCurrentProject] = useState<Project | null>(null)
  const [open, setOpen] = useState(false)
  const prevProjectsLengthRef = useRef(projects.length)
  const isMobile = useIsMobile()

useEffect(() => {
    const project = projects.find((p) => p.id === currentProjectId)
    setCurrentProject(project || null)

// If projects array length changed and dropdown was open, keep it open
    if (prevProjectsLengthRef.current !== projects.length && open) {
      // Force re-render to maintain open state
      setOpen(true)
    }
    prevProjectsLengthRef.current = projects.length
  }, [projects, currentProjectId, open])

// Prevent dropdown from closing when projects array changes
  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
  }

const handleProjectSelect = (projectId: string) => {
    setOpen(false)

// Always navigate to the selected project page for consistent behavior across all pages
    if (projectId === 'new') {
      // For new project, redirect to homepage
      router.push('/')
    } else if (projectId !== currentProjectId) {
      // For existing projects, always navigate to the project page
      router.push(`/projects/${projectId}`)
    }
  }

const triggerButton = (
    <Button
      variant="ghost"
      size="sm"
      className="gap-1 justify-start max-w-[150px] sm:max-w-[200px]"
      role="combobox"
      aria-expanded={open}
    >
      <span className="text-sm text-gray-900 dark:text-white truncate">
        {currentProjectId === 'new'
          ? 'New Project'
          : currentProject?.name || 'Project'}
      </span>
      <ChevronDownIcon className="h-4 w-4 text-gray-600 dark:text-white flex-shrink-0" />
    </Button>
  )

const commandContent = (
    <Command>
      <CommandInput placeholder="Search projects..." />
      <CommandList className="max-h-[200px]">
        <CommandEmpty>No projects found.</CommandEmpty>
        <CommandGroup>
          <CommandItem
            value="new-project"
            onSelect={() => handleProjectSelect('new')}
            className="justify-between"
          >
            <span>+ New Project</span>
          </CommandItem>
          {projects.length > 0 && <CommandSeparator />}
          {projects.map((project) => (
            <CommandItem
              key={project.id}
              value={project.name || 'Untitled Project'}
              onSelect={() => handleProjectSelect(project.id)}
              className={cn(
                'justify-between',
                project.id === currentProjectId && 'bg-accent',
              )}
            >
              <span>{project.name || 'Untitled Project'}</span>
              {project.id === currentProjectId && (
                <CheckIcon className="h-4 w-4" />
              )}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )

if (isMobile) {
    return (
      <Drawer open={open} onOpenChange={handleOpenChange}>
        <DrawerTrigger asChild>{triggerButton}</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Select Project</DrawerTitle>
          </DrawerHeader>
          <div className="px-4 pb-4">{commandContent}</div>
        </DrawerContent>
      </Drawer>
    )
  }

return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>{triggerButton}</PopoverTrigger>
      <PopoverContent className="w-[200px] p-0" align="start">
        {commandContent}
      </PopoverContent>
    </Popover>
  )
}

export function ChatDropdown({
  projectId,
  currentChatId,
  chats,
  onChatChange,
}: ChatDropdownProps) {
  const router = useRouter()
  const [open, setOpen] = useState(false)
  const prevChatsLengthRef = useRef(chats.length)
  const isMobile = useIsMobile()

const currentChat = chats.find((c) => c.id === currentChatId)

useEffect(() => {
    // If chats array length changed and dropdown was open, keep it open
    if (prevChatsLengthRef.current !== chats.length && open) {
      // Force re-render to maintain open state
      setOpen(true)
    }
    prevChatsLengthRef.current = chats.length
  }, [chats, open])

// Prevent dropdown from closing when chats array changes
  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen)
  }

const handleChatSelect = async (chatId: string) => {
    setOpen(false)

if (chatId === 'new-from-scratch') {
      // Create new chat from scratch - notify parent to handle creation
      if (onChatChange) {
        onChatChange('new')
      }
      return
    } else if (chatId === 'new-from-latest') {
      // Fork the latest chat
      await handleForkLatestChat()
      return
    } else if (chatId !== currentChatId) {
      // Navigate to existing chat
      router.push(`/projects/${projectId}/chats/${chatId}`)
    }

// Notify parent of selection change for existing chats
    if (onChatChange) {
      onChatChange(chatId)
    }
  }

const handleForkLatestChat = async () => {
    try {
      // Find the latest chat (most recent updatedAt)
      const sortedChats = [...chats].sort(
        (a: any, b: any) =>
          new Date(b.updatedAt || 0).getTime() -
          new Date(a.updatedAt || 0).getTime(),
      )

if (sortedChats.length === 0) {
        return
      }

const latestChat = sortedChats[0]

// Fork the chat using v0 SDK
      const response = await fetch('/api/chats/fork', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          chatId: latestChat.id,
          projectId: projectId,
        }),
      })

if (response.ok) {
        const forkedChat = await response.json()
        // Navigate to the new forked chat
        router.push(`/projects/${projectId}/chats/${forkedChat.id}`)
      }
    } catch (error) {
      // Silently handle fork errors
    }
  }

const getChatTitle = (chat: Chat) => {
    return chat.title || chat.name || 'Untitled Chat'
  }

const triggerButton = (
    <Button
      variant="ghost"
      size="sm"
      className="gap-1 justify-start max-w-[120px] sm:max-w-[160px]"
      role="combobox"
      aria-expanded={open}
    >
      <span className="text-sm text-gray-900 dark:text-white truncate">
        {currentChat ? getChatTitle(currentChat) : 'New Chat'}
      </span>
      <ChevronDownIcon className="h-4 w-4 text-gray-600 dark:text-white flex-shrink-0" />
    </Button>
  )

const commandContent = (
    <Command>
      <CommandInput placeholder="Search chats..." />
      <CommandList className="max-h-[200px]">
        <CommandEmpty>No chats found.</CommandEmpty>
        <CommandGroup>
          <CommandItem
            value="new-from-scratch"
            onSelect={() => handleChatSelect('new-from-scratch')}
            className={cn(
              'justify-between',
              currentChatId === 'new' && 'bg-accent',
            )}
          >
            <span>+ New from Scratch</span>
            {currentChatId === 'new' && <CheckIcon className="h-4 w-4" />}
          </CommandItem>
          {chats.length > 0 && (
            <CommandItem
              value="new-from-latest"
              onSelect={() => handleChatSelect('new-from-latest')}
              className="justify-between"
            >
              <span>+ New from Latest</span>
            </CommandItem>
          )}
          {chats.length > 0 && <CommandSeparator />}
          {chats.map((chat) => (
            <CommandItem
              key={chat.id}
              value={getChatTitle(chat)}
              onSelect={() => handleChatSelect(chat.id)}
              className={cn(
                'justify-between',
                chat.id === currentChatId && 'bg-accent',
              )}
            >
              <span>{getChatTitle(chat)}</span>
              {chat.id === currentChatId && <CheckIcon className="h-4 w-4" />}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )

if (isMobile) {
    return (
      <Drawer open={open} onOpenChange={handleOpenChange}>
        <DrawerTrigger asChild>{triggerButton}</DrawerTrigger>
        <DrawerContent>
          <DrawerHeader>
            <DrawerTitle>Select Chat</DrawerTitle>
          </DrawerHeader>
          <div className="px-4 pb-4">{commandContent}</div>
        </DrawerContent>
      </Drawer>
    )
  }

import { useState, useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { ProjectDropdown, ChatDropdown } from './components'
import PromptComponent from '../../../../components/prompt-component'
import ApiKeyError from '../../../../components/api-key-error'
import RateLimitDialog from '../../../../components/rate-limit-dialog'
import ErrorDialog from '../../../../components/error-dialog'
import { useApiValidation } from '../../../../../lib/hooks/useApiValidation'

export default function ChatPage() {
  const params = useParams()
  const router = useRouter()
  const projectId = params.projectId as string
  const chatId = params.chatId as string

const [isLoading, setIsLoading] = useState(false)
  const [generatedApp, setGeneratedApp] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [chatData, setChatData] = useState<any>(null)
  const [projectChats, setProjectChats] = useState<any[]>([])
  const [projectChatsLoaded, setProjectChatsLoaded] = useState(false)
  const [projects, setProjects] = useState<any[]>([])
  const [projectsLoaded, setProjectsLoaded] = useState(false)
  const [showRateLimitDialog, setShowRateLimitDialog] = useState(false)
  const [rateLimitInfo, setRateLimitInfo] = useState<{
    resetTime?: string
    remaining?: number
  }>({})
  const [showErrorDialog, setShowErrorDialog] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')

// API validation on page load
  const { isValidating, showApiKeyError } = useApiValidation()

// Track if user has selected "new" options in dropdowns
  const [selectedProjectId, setSelectedProjectId] = useState(projectId)
  const [selectedChatId, setSelectedChatId] = useState(
    chatId === 'new-chat' ? 'new' : chatId,
  )

// Load existing chat data when component mounts (only if API is valid)
  useEffect(() => {
    if (!isValidating && !showApiKeyError) {
      if (chatId && chatId !== 'new' && chatId !== 'new-chat') {
        loadChatData()
      }
      loadProjectChatsWithCache()
      loadProjectsWithCache()
    }
  }, [chatId, projectId, isValidating, showApiKeyError])

const loadProjectChatsWithCache = async () => {
    // First, try to load from sessionStorage for immediate display
    try {
      const cachedChats = sessionStorage.getItem(`project-chats-${projectId}`)
      if (cachedChats) {
        const parsedChats = JSON.parse(cachedChats)
        setProjectChats(parsedChats)
        setProjectChatsLoaded(true)
      }
    } catch (err) {
      // Silently handle cache loading errors
    }

// Then fetch fresh data in the background
    loadProjectChats()
  }

const loadProjectChats = async () => {
    try {
      const response = await fetch(`/api/projects/${projectId}`)
      if (response.ok) {
        const data = await response.json()
        const chatsData = data.chats || []
        setProjectChats(chatsData)
        setProjectChatsLoaded(true)

// Then fetch fresh data in the background
    loadProjects()
  }

const handleProjectChange = async (newProjectId: string) => {
    // Only handle "new" project case since existing projects navigate away via router.push
    if (newProjectId === 'new') {
      setSelectedProjectId('new')
      setSelectedChatId('new')
      setProjectChats([])
    }
    // Note: Existing project selections are handled by the dropdown component's router.push
  }

const loadProjectChatsForProject = async (projectId: string) => {
    // Used when switching projects - load chats with cache for that specific project
    try {
      const cachedChats = sessionStorage.getItem(`project-chats-${projectId}`)
      if (cachedChats) {
        const parsedChats = JSON.parse(cachedChats)
        setProjectChats(parsedChats)
      }
    } catch (err) {
      // Silently handle cache loading errors
    }

const handleChatChange = (newChatId: string) => {
    if (newChatId === 'new') {
      // For new chat, navigate to a new chat URL and reset the interface
      router.push(`/projects/${projectId}/chats/new-chat`)
      setSelectedChatId('new')
      // Clear any existing chat data
      setChatData(null)
      setGeneratedApp(null)
      setError(null)
    } else {
      setSelectedChatId(newChatId)
    }
  }

const handleDeleteChat = async () => {
    try {
      const response = await fetch(`/api/chats/${chatId}`, {
        method: 'DELETE',
      })

if (response.ok) {
        // Clear cached data for this project
        try {
          sessionStorage.removeItem(`project-chats-${projectId}`)
        } catch (err) {
          // Silently handle cache clearing errors
        }

// Navigate to project page
        router.push(`/projects/${projectId}`)
      } else {
        setError('Failed to delete chat. Please try again.')
      }
    } catch (error) {
      setError('Failed to delete chat. Please try again.')
    }
  }

const handleRenameChat = async (newName: string) => {
    try {
      const response = await fetch(`/api/chats/${chatId}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: newName }),
      })

if (response.ok) {
        // Update local chat data
        setChatData((prev: any) => (prev ? { ...prev, name: newName } : prev))

// Clear cached data for this project to force refresh
        try {
          sessionStorage.removeItem(`project-chats-${projectId}`)
        } catch (err) {
          // Silently handle cache clearing errors
        }

// Reload project chats to update the dropdown
        loadProjectChats()
      } else {
        const errorData = await response.json()
        throw new Error(errorData.error || 'Failed to rename chat')
      }
    } catch (error) {
      throw error // Re-throw to let dialog handle the error display
    }
  }

const loadChatData = async () => {
    try {
      const response = await fetch(`/api/chats/${encodeURIComponent(chatId)}`, {
        method: 'GET',
      })

if (response.ok) {
        const data = await response.json()
        setChatData(data)

// Load the latest app if available
        if (data.demo) {
          setGeneratedApp(data.demo)
        } else if (data.url) {
          setGeneratedApp(data.url)
        }
      }
    } catch (err) {
      // Silently handle chat loading errors
    }
  }

try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: prompt,
          chatId: selectedChatId !== 'new' ? selectedChatId : undefined,
          projectId: projectId, // Always use the current project from URL
          modelId: settings.modelId,
          imageGenerations: settings.imageGenerations,
          thinking: settings.thinking,
          ...(attachments && attachments.length > 0 && { attachments }),
        }),
      })

if (!response.ok) {
        const errorData = await response.json()

setErrorMessage(errorData.error || 'Failed to generate app')
        setShowErrorDialog(true)
        return
      }

const data = await response.json()
      setChatData(data)

// If this was a new chat, redirect to the actual chat ID within the project
      if (
        (selectedChatId === 'new' || selectedProjectId === 'new') &&
        (data.id || data.chatId)
      ) {
        const newChatId = data.id || data.chatId
        const newProjectId = data.projectId || selectedProjectId
        router.replace(`/projects/${newProjectId}/chats/${newChatId}`)
        return
      }

// Create iframe preview using v0's demo URL or main URL
      if (data.demo) {
        setGeneratedApp(data.demo)
      } else if (data.url) {
        setGeneratedApp(data.url)
      } else {
        // Fallback: show a message with link
        const fallbackPreview = `
          <!DOCTYPE html>
          <html>
          <head>
            <script src="https://cdn.tailwindcss.com"></script>
          </head>
          <body class="p-8 bg-gray-50 flex items-center justify-center min-h-dvh">
            <div class="max-w-md mx-auto text-center">
              <div class="text-4xl mb-4">✨</div>
              <h1 class="text-xl font-semibold mb-4">App Generated Successfully!</h1>
              <p class="text-gray-600 mb-4">${data.text || 'Your app has been created.'}</p>
              ${
                data.url
                  ? `
                <a href="${data.url}" target="_blank" class="inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
                  View on v0.dev
                </a>
              `
                  : ''
              }
            </div>
          </body>
          </html>
        `
        setGeneratedApp(fallbackPreview)
      }
    } catch (err) {
      setErrorMessage(
        err instanceof Error
          ? err.message
          : 'Failed to generate app. Please try again.',
      )
      setShowErrorDialog(true)
    } finally {
      setIsLoading(false)
    }
  }

// Show API key error page if needed
  if (showApiKeyError) {
    return <ApiKeyError />
  }

return (
    <div className="relative min-h-dvh bg-background">
      {/* Preview Area */}
      <div className="absolute inset-0 overflow-hidden">
        {generatedApp ? (
          <div className="w-full h-full bg-white">
            {/* Preview container */}
            {generatedApp.startsWith('http') ? (
              <iframe
                src={generatedApp}
                className="w-full h-full border-0"
                sandbox="allow-scripts allow-same-origin allow-modals allow-forms allow-popups allow-top-navigation-by-user-activation allow-pointer-lock"
              />
            ) : (
              <iframe
                srcDoc={generatedApp}
                className="w-full h-full border-0"
                sandbox="allow-scripts allow-same-origin allow-modals allow-forms allow-pointer-lock"
              />
            )}
          </div>
        ) : null}
      </div>

import { useRouter } from 'next/navigation'

interface NewChatButtonProps {
  projectId: string
  showText?: string
}

export function NewChatButton({
  projectId,
  showText = 'New Chat',
}: NewChatButtonProps) {
  const router = useRouter()

const handleNewChat = () => {
    router.push(`/chats/new?projectId=${projectId}`)
  }

const isLargeButton = showText === 'Create Chat'

return (
    <button
      onClick={handleNewChat}
      className={`bg-black hover:bg-gray-800 text-white rounded-lg transition-colors duration-200 flex items-center space-x-2 ${
        isLargeButton ? 'px-6 py-3 mx-auto' : 'px-4 py-2'
      }`}
    >
      <svg
        className={isLargeButton ? 'w-5 h-5' : 'w-4 h-4'}
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M12 4v16m8-8H4"
        />
      </svg>
      <span>{showText}</span>
    </button>
  )
}
[V0_FILE]typescriptreact:file="app/projects/[projectId]/page.tsx"
'use client'

import { useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useApiValidation } from '../../../lib/hooks/useApiValidation'
import ApiKeyError from '../../components/api-key-error'

export default function ProjectPage() {
  const params = useParams()
  const router = useRouter()
  const projectId = params.projectId as string

// API validation on page load
  const { isValidating, showApiKeyError } = useApiValidation()

useEffect(() => {
    if (!isValidating && !showApiKeyError && projectId) {
      getLatestChatAndRedirect(projectId)
    }
  }, [isValidating, showApiKeyError, projectId])

const getLatestChatAndRedirect = async (projectId: string) => {
    try {
      // Load project with chats using the API endpoint
      const response = await fetch(`/api/projects/${projectId}`)

if (!response.ok) {
        // If project not found or other error, redirect to new chat
        router.replace(`/projects/${projectId}/chats/new`)
        return
      }

const projectData = await response.json()

// Get the latest chat from the project
      const chats = projectData.chats || []
      if (chats.length > 0) {
        // Sort by updatedAt if available, otherwise use the first chat
        const sortedChats = chats.sort((a: any, b: any) => {
          if (a.updatedAt && b.updatedAt) {
            return (
              new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
            )
          }
          return 0
        })
        const latestChatId = sortedChats[0].id

// Redirect to the latest chat
        router.replace(`/projects/${projectId}/chats/${latestChatId}`)
      } else {
        // No chats found, redirect to create new chat
        router.replace(`/projects/${projectId}/chats/new`)
      }
    } catch (error) {
      // On error, redirect to new chat
      router.replace(`/projects/${projectId}/chats/new`)
    }
  }

// Show API key error page if needed
  if (showApiKeyError) {
    return <ApiKeyError />
  }

// Show loading state while validating or redirecting
  return (
    <div className="min-h-dvh bg-gray-50 flex items-center justify-center">
      <div className="text-center">
        <div className="animate-spin rounded-full h-8 w-8 border-2 border-gray-900 border-t-transparent mx-auto mb-4"></div>
      </div>
    </div>
  )
}
[V0_FILE]json:file="components.json"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/deploy-banner.tsx"
'use client'

import { useState, useEffect } from 'react'
import { XIcon, ChevronDownIcon } from 'lucide-react'
import { Button } from '@/components/ui/button'

export default function DeployBanner() {
  const [isVisible, setIsVisible] = useState(false)
  const [isMinimized, setIsMinimized] = useState(false)
  const [isAnimating, setIsAnimating] = useState(false)
  const [isExpanding, setIsExpanding] = useState(false)

useEffect(() => {
    // Check if banner was previously minimized in this session
    const isMinimizedSession = sessionStorage.getItem('deploy-banner-minimized')
    if (isMinimizedSession === 'true') {
      setIsMinimized(true)
    }
    // Show banner after determining state
    setIsVisible(true)
  }, [])

const handleToggle = () => {
    const newMinimized = !isMinimized
    
    if (!newMinimized) {
      // Expanding - animate down
      setIsMinimized(false)
      setIsExpanding(true)
      sessionStorage.setItem('deploy-banner-minimized', 'false')
      
      // After animation completes, clear expanding state
      setTimeout(() => {
        setIsExpanding(false)
      }, 300) // Match animation duration
    } else {
      // Minimizing - animate up first
      setIsAnimating(true)
      
      // After animation completes, actually minimize
      setTimeout(() => {
        setIsMinimized(true)
        setIsAnimating(false)
        sessionStorage.setItem('deploy-banner-minimized', 'true')
      }, 300) // Match animation duration
    }
  }

if (!isVisible) return null

return (
    <>
      {isMinimized ? (
        // Minimized state - floating toggle button
        <div className="fixed top-4 right-4 z-50">
          <Button
            variant="outline"
            size="sm"
            onClick={handleToggle}
            className="h-8 w-8 p-0 bg-background border-border shadow-lg hover:bg-muted"
          >
            <ChevronDownIcon className="h-4 w-4 rotate-180" />
            <span className="sr-only">Expand banner</span>
          </Button>
        </div>
      ) : (
        // Expanded state - full banner
        <div className={`fixed top-0 left-0 right-0 z-40 bg-background/80 backdrop-blur-md border-b border-border text-foreground ${
          isAnimating ? 'animate-slide-out-up' : isExpanding ? 'animate-slide-in-down' : ''
        }`}>
          <div className="py-3 px-4">
            <div className="max-w-7xl mx-auto flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
              <div className="flex flex-col gap-1 flex-1">
                <div className="text-sm text-muted-foreground">
                  Deploy your own copy of this demo to get started building with
                  the v0 Platform API.
                </div>
              </div>

<div className="flex items-center gap-3 sm:flex-shrink-0">
                <Button variant="default" size="sm" asChild>
                  <a
                    href="https://vercel.com/new/clone?demo-description=A%20Next.js%20application%20demonstrating%20the%20v0%20Platform%20API&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F28EABpFanXbK3bENHYGPe7%2F2b37a0cf17f3f8f9a19ee23e539b62eb%2Fscreenshot.png&demo-title=v0%20Platform%20API%20Demo&demo-url=https%3A%2F%2Fv0-centered-text-om.vercel.sh%2F&from=templates&project-name=v0%20Platform%20API%20Demo&repository-name=v0-platform-api-demo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fv0-platform-api-demo&skippable-integrations=1"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-2"
                  >
                    <svg className="h-4 w-4" viewBox="0 0 76 76" fill="none">
                      <path d="M38 1L74 74H2L38 1Z" fill="currentColor" />
                    </svg>
                    <span className="hidden sm:inline">Deploy with Vercel</span>
                    <span className="sm:hidden">Deploy</span>
                  </a>
                </Button>

<Button variant="outline" size="sm" asChild>
                  <a
                    href="https://github.com/vercel/v0-platform-api-demo"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-2"
                  >
                    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
                    </svg>
                    <span className="hidden sm:inline">View Source</span>
                    <span className="sm:hidden">Source</span>
                  </a>
                </Button>

<Button
                  variant="ghost"
                  size="sm"
                  onClick={handleToggle}
                  className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground hover:bg-muted"
                >
                  <ChevronDownIcon className="h-4 w-4" />
                  <span className="sr-only">Minimize banner</span>
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx"
'use client'

import * as React from 'react'
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'

import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function AlertDialogFooter({
  className,
  ...props
}: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn('text-lg font-semibold', className)}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  )
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: 'outline' }), className)}
      {...props}
    />
  )
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default:
          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
        destructive:
          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/command.tsx"
'use client'

import * as React from 'react'
import { Command as CommandPrimitive } from 'cmdk'
import { SearchIcon } from 'lucide-react'

import { cn } from '@/lib/utils'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

function Command({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
        className,
      )}
      {...props}
    />
  )
}

function CommandDialog({
  title = 'Command Palette',
  description = 'Search for a command to run...',
  children,
  className,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof Dialog> & {
  title?: string
  description?: string
  className?: string
  showCloseButton?: boolean
}) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
        className={cn('overflow-hidden p-0', className)}
        showCloseButton={showCloseButton}
      >
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3"
    >
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        {...props}
      />
    </div>
  )
}

function CommandList({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn(
        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
        className,
      )}
      {...props}
    />
  )
}

function CommandEmpty({
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
  return (
    <CommandPrimitive.Empty
      data-slot="command-empty"
      className="py-6 text-center text-sm"
      {...props}
    />
  )
}

function CommandGroup({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
        className,
      )}
      {...props}
    />
  )
}

function CommandSeparator({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn('bg-border -mx-1 h-px', className)}
      {...props}
    />
  )
}

function CommandItem({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function CommandShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandShortcut,
  CommandSeparator,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/drawer.tsx"
'use client'

import * as React from 'react'
import { Drawer as DrawerPrimitive } from 'vaul'

import { cn } from '@/lib/utils'

function Drawer({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}

function DrawerTrigger({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
          className,
        )}
        {...props}
      >
        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}

function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-header"
      className={cn(
        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
        className,
      )}
      {...props}
    />
  )
}

function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
      {...props}
    />
  )
}

function DrawerTitle({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn('text-foreground font-semibold', className)}
      {...props}
    />
  )
}

function DrawerDescription({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx"
'use client'

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
          className,
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: 'default' | 'destructive'
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn('bg-border -mx-1 my-1 h-px', className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<'span'>) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        'text-muted-foreground ml-auto text-xs tracking-widest',
        className,
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
        className,
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
        className,
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
[V0_FILE]typescriptreact:file="components/ui/popover.tsx"
'use client'

import * as React from 'react'
import * as PopoverPrimitive from '@radix-ui/react-popover'

import { cn } from '@/lib/utils'

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = 'center',
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
          className,
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
[V0_FILE]typescriptreact:file="components/ui/skeleton.tsx"
import { cn } from '@/lib/utils'

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('bg-muted animate-pulse rounded-md', className)}
      {...props}
    />
  )
}

export { Skeleton }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
'use client'

import * as React from 'react'
import * as SwitchPrimitive from '@radix-ui/react-switch'

import { cn } from '@/lib/utils'

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
        )}
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
[V0_FILE]typescriptreact:file="components/v0-logo.tsx"
import React from 'react'
import { cn } from '@/lib/utils'

interface V0LogoProps {
  className?: string
  size?: number
}

export const V0Logo: React.FC<V0LogoProps> = ({ className, size = 24 }) => {
  return (
    <svg
      className={cn('', className)}
      width={size}
      height={(size * 339) / 678} // Maintain aspect ratio
      viewBox="0 0 678 339"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0)">
        <path
          d="M396.5,0h161.5c65.5,0,118.6,53.1,118.6,118.6v154h-66.3V118.6c0-1.6,0-3.1-.2-4.7l-161.5,158.7c.5,0,1.1,0,1.6,0h160v62.6h-160c-65.5,0-120-53.6-120-119.1V62.5h66.3v153.6c0,3,.2,5.9.7,8.7l165-162.2c-1.4-.1-2.8-.2-4.2-.2h-161.5V0Z"
          fill="currentColor"
        />
        <path
          d="M233.4,323.7L0,62.5h93.9l137,153.3V62.5h70v235.4c0,35.5-43.9,52.3-67.5,25.8Z"
          fill="currentColor"
        />
      </g>
      <defs>
        <clipPath id="clip0">
          <rect width="678" height="339" fill="white" />
        </clipPath>
      </defs>
    </svg>
  )
}

export default V0Logo
[V0_FILE]typescript:file="lib/hooks/useApiValidation.ts"
'use client'

import { useState, useEffect } from 'react'

interface ApiValidationResult {
  isValidating: boolean
  isValid: boolean | null
  showApiKeyError: boolean
  user: any | null
}

export function useApiValidation(): ApiValidationResult {
  const [isValidating, setIsValidating] = useState(true)
  const [isValid, setIsValid] = useState<boolean | null>(null)
  const [showApiKeyError, setShowApiKeyError] = useState(false)
  const [user, setUser] = useState<any | null>(null)

useEffect(() => {
    const validateApiKey = async () => {
      try {
        setIsValidating(true)

const response = await fetch('/api/validate', {
          method: 'GET',
          cache: 'no-store', // Always check fresh, don't cache API key validation
        })

if (response.ok) {
          const data = await response.json()
          if (data.valid) {
            setIsValid(true)
            setShowApiKeyError(false)
            setUser(data.user || null)
          } else {
            setIsValid(false)
            setShowApiKeyError(true)
          }
        } else if (response.status === 401) {
          // API key is missing or invalid
          setIsValid(false)
          setShowApiKeyError(true)
        } else {
          // Other errors (network, server issues, etc.)
          // Don't show API key error for these, just mark as invalid
          setIsValid(false)
          setShowApiKeyError(false)
        }
      } catch (error) {
        // Network or other errors - don't show API key error
        setIsValid(false)
        setShowApiKeyError(false)
      } finally {
        setIsValidating(false)
      }
    }

validateApiKey()
  }, [])

return {
    isValidating,
    isValid,
    showApiKeyError,
    user,
  }
}
[V0_FILE]typescript:file="lib/hooks/useSettings.ts"
import { useState, useEffect } from 'react'

export type ModelType = 'v0-1.5-sm' | 'v0-1.5-md' | 'v0-1.5-lg'

export interface Settings {
  model: ModelType
  imageGenerations: boolean
  thinking: boolean
}

const DEFAULT_SETTINGS: Settings = {
  model: 'v0-1.5-md',
  imageGenerations: false,
  thinking: false,
}

export function useSettings() {
  const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS)

// Load settings from localStorage on mount
  useEffect(() => {
    try {
      const saved = localStorage.getItem('v0-settings')
      if (saved) {
        const parsed = JSON.parse(saved)
        setSettings({ ...DEFAULT_SETTINGS, ...parsed })
      }
    } catch (error) {
      console.warn('Failed to load settings from localStorage:', error)
    }
  }, [])

// Save settings to localStorage when they change
  const updateSettings = (newSettings: Partial<Settings>) => {
    const updated = { ...settings, ...newSettings }
    setSettings(updated)

try {
      localStorage.setItem('v0-settings', JSON.stringify(updated))
    } catch (error) {
      console.warn('Failed to save settings to localStorage:', error)
    }
  }

return {
    settings,
    updateSettings,
  }
}
[V0_FILE]typescript:file="lib/rate-limiter.ts"
import { Ratelimit } from '@upstash/ratelimit'
import { Redis } from '@upstash/redis'

// Check if Upstash credentials are available
const upstashUrl = process.env.KV_REST_API_URL
const upstashToken = process.env.KV_REST_API_TOKEN
const isRateLimitingEnabled = upstashUrl && upstashToken && upstashUrl.trim() !== '' && upstashToken.trim() !== ''

// Create Redis instance and rate limiter only if credentials are available
let generationRateLimit: Ratelimit | null = null

if (isRateLimitingEnabled) {
  const redis = new Redis({
    url: upstashUrl!,
    token: upstashToken!,
  })

// Create rate limiter: 3 requests per 12 hours (43200 seconds)
  generationRateLimit = new Ratelimit({
    redis,
    limiter: Ratelimit.slidingWindow(3, '43200 s'), // 3 requests per 12 hours
    analytics: true,
    prefix: 'v0_generation_limit',
  })
}

// Function to get user identifier from request
export function getUserIdentifier(request: Request): string {
  // Try to get IP address from various headers
  const forwarded = request.headers.get('x-forwarded-for')
  const realIp = request.headers.get('x-real-ip')
  const cfConnectingIp = request.headers.get('cf-connecting-ip')
  
  // Use the first available IP, fallback to a default
  const ip = forwarded?.split(',')[0] || realIp || cfConnectingIp || 'unknown'
  
  // You can extend this to use user authentication if available
  // For now, we'll use IP-based rate limiting
  return `ip:${ip}`
}

// Check if rate limit is exceeded
export async function checkRateLimit(identifier: string) {
  // If rate limiting is not enabled, always allow the request
  if (!isRateLimitingEnabled || !generationRateLimit) {
    return {
      success: true,
      limit: 3,
      reset: Date.now() + 43200000, // 12 hours from now
      remaining: 3,
      resetTime: new Date(Date.now() + 43200000),
    }
  }

try {
    const { success, limit, reset, remaining } = await generationRateLimit.limit(identifier)
    
    return {
      success,
      limit,
      reset,
      remaining,
      resetTime: new Date(reset),
    }
  } catch (error) {
    console.error('Rate limit check failed:', error)
    // On error, allow the request (fail open)
    return {
      success: true,
      limit: 3,
      reset: Date.now() + 43200000, // 12 hours from now
      remaining: 3,
      resetTime: new Date(Date.now() + 43200000),
    }
  }
}
[V0_FILE]typescript:file="lib/utils.ts"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="postcss.config.mjs"
const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;
[V0_FILE]xml:file="public/file.svg"
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
[V0_FILE]xml:file="public/globe.svg"
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
[V0_FILE]xml:file="public/next.svg"
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
[V0_FILE]xml:file="public/vercel.svg"
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
[V0_FILE]xml:file="public/window.svg"
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
[V0_FILE]typescript:file="next.config.ts"
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  // Ignore ESLint errors during builds
  eslint: {
    ignoreDuringBuilds: true,
  },
  // Ignore TypeScript errors during builds
  typescript: {
    ignoreBuildErrors: true,
  },
  // Disable image optimization for static exports
  images: {
    unoptimized: true,
  },
}

export default nextConfig</article></body></html>