Logo v0

93:I[903690,["/chat-static/_next/static/immutable/chunks/1ute-309vfysb.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/02p_gimenxqg6.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/2xcwq527vfo_s.js","/chat-static/_next/static/immutable/chunks/3w5mstj4y6jmt.js","/chat-static/_next/static/immutable/chunks/44bzs6j8eepa8.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/3gdi4pfmm4dpp.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/0nkjq070py0o2.js","/chat-static/_next/static/immutable/chunks/0vc-wig_ads9a.js","/chat-static/_next/static/immutable/chunks/0lwi6g2baipnp.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/2lhijsntj02nh.js","/chat-static/_next/static/immutable/chunks/39xww5dkqchkn.js","/chat-static/_next/static/immutable/chunks/2rs5y36t1i2xl.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1ute-309vfysb.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/02p_gimenxqg6.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/2xcwq527vfo_s.js","/chat-static/_next/static/immutable/chunks/3w5mstj4y6jmt.js","/chat-static/_next/static/immutable/chunks/44bzs6j8eepa8.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/3gdi4pfmm4dpp.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/0nkjq070py0o2.js","/chat-static/_next/static/immutable/chunks/0vc-wig_ads9a.js","/chat-static/_next/static/immutable/chunks/0lwi6g2baipnp.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/2lhijsntj02nh.js","/chat-static/_next/static/immutable/chunks/39xww5dkqchkn.js","/chat-static/_next/static/immutable/chunks/2rs5y36t1i2xl.js"],"SWRDataProvider"] 95:Tf151,[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { "primary-background": "#0a0a0a", surface: "#1a1a1a", "surface-elevated": "#2a2a2a", "surface-secondary": "#181818", "text-primary": "#ffffff", "text-secondary": "#a0a0a0", "text-muted": "#666666", "text-accent": "#00ff88", "interactive-primary": "#ffffff", "interactive-secondary": "#666666", "interactive-hover": "#333333", "interactive-active": "#444444", "interactive-border": "#333333", "status-success": "#00ff88", "status-warning": "#ffaa00", "status-error": "#ff4444", "status-info": "#0088ff", border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", "Inter", "sans-serif"], mono: ["var(--font-mono)", "JetBrains Mono", "monospace"], }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/v0-logo.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" export function VercelLogo(props: React.SVGProps) { return ( ) } [V0_FILE]typescriptreact:file="lib/v0-sdk.ts" isMerged="true" import { v0 } from 'v0-sdk' /** * Wrapper */ export class V0Client { static async createChat(options: { message: string system?: string modelId?: string imageGenerations?: boolean }): Promise<{ success: boolean chatUrl?: string previewUrl?: string chatId?: string error?: string }> { try { const request = { message: options.message, system: options.system || 'You are an expert React developer', modelConfiguration: { modelId: (options.modelId || 'v0-1.5-md') as 'v0-1.5-md' | 'v0-1.5-sm' | 'v0-1.5-lg', imageGenerations: options.imageGenerations || false, }, } const response: any = await v0.chats.create(request) return { success: true, chatUrl: response.url, previewUrl: response.demo, // iframe URL chatId: response.id, } } catch (error: any) { console.error('Error creating v0 chat:', error) if (error.status === 403) { return { success: false, error: 'Env error, verify your V0_API_KEY' } } else if (error.status === 429) { return { success: false, error: 'Limit rate reached' } } else if (error.status === 400) { return { success: false, error: 'Invalid input' } } return { success: false, error: error.message || 'Unknown error' } } } static async addMessage(options: { chatId: string message: string }): Promise<{ success: boolean previewUrl?: string error?: string }> { try { const request = { chatId: options.chatId, message: options.message, } const response: any = await v0.chats.createMessage(request) return { success: true, previewUrl: response.demo, } } catch (error: any) { console.error('Error adding message to v0 chat:', error) if (error.status === 403) { return { success: false, error: 'Auth error' } } else if (error.status === 404) { return { success: false, error: 'Chat not found' } } else if (error.status === 429) { return { success: false, error: 'Limit rate reached' } } return { success: false, error: error.message || 'Invalid input' } } } static async getChat(chatId: string): Promise<{ success: boolean chat?: any error?: string }> { try { const chat = await v0.chats.getById({ chatId }) return { success: true, chat: chat, } } catch (error: any) { console.error('Error getting v0 chat:', error) return { success: false, error: error.message || 'Error fetching chat' } } } static async getChatHistory(): Promise<{ success: boolean chats?: any[] error?: string }> { try { const chats: any = await v0.chats.find() return { success: true, chats: chats, } } catch (error: any) { console.error('Error getting v0 chat history:', error) return { success: false, error: error.message || 'Error fetching history' } } } } export { v0 } [V0_FILE]typescript:file="actions/generate-ui.ts" isMerged="true" 'use server' import { revalidatePath } from 'next/cache' import { z } from 'zod' import { V0Client } from '@/lib/v0-sdk' // Validation schemas const messageSchema = z.object({ message: z.string().min(1, 'Message is required').max(2000, 'Message too long'), }) const generateComponentSchema = z.object({ message: z.string().min(1, 'Message is required').max(2000, 'Message too long'), model: z.string().optional(), system: z.string().optional(), }) const addMessageSchema = z.object({ chatId: z.string().min(1, 'Chat ID is required'), message: z.string().min(1, 'Message is required').max(2000, 'Message too long'), }) // v0 server actions export async function generateComponentAction(formData: FormData) { try { const rawData = Object.fromEntries(formData.entries()) const validatedData = generateComponentSchema.parse(rawData) const result = await V0Client.createChat({ message: validatedData.message, system: validatedData.system, modelId: validatedData.model as 'v0-1.5-md' | 'v0-1.5-sm' | 'v0-1.5-lg', }) // Revalidate the path to update the UI revalidatePath('/') return result } catch (error) { console.error('Error in generateComponentAction:', error) if (error instanceof z.ZodError) { return { success: false, error: error.errors.map(e => e.message).join(', '), } } return { success: false, error: 'An unexpected error occurred', } } } export async function addMessageAction(formData: FormData) { try { const rawData = Object.fromEntries(formData.entries()) const validatedData = addMessageSchema.parse(rawData) const result = await V0Client.addMessage({ chatId: validatedData.chatId, message: validatedData.message, }) // Revalidate the path to update the UI revalidatePath('/') return result } catch (error) { console.error('Error in addMessageAction:', error) if (error instanceof z.ZodError) { return { success: false, error: error.errors.map(e => e.message).join(', '), } } return { success: false, error: 'An unexpected error occurred', } } } export async function getChatHistoryAction() { try { const result = await V0Client.getChatHistory() return result } catch (error) { console.error('Error in getChatHistoryAction:', error) return { success: false, error: 'An unexpected error occurred', } } } export async function getChatAction(chatId: string) { try { const result = await V0Client.getChat(chatId) return result } catch (error) { console.error('Error in getChatAction:', error) return { success: false, error: 'An unexpected error occurred', } } } export async function sendMessageAction(formData: FormData) { try { const rawData = Object.fromEntries(formData.entries()) const validatedData = messageSchema.parse(rawData) // Process the message (this would typically save to a database) console.log('Message received:', validatedData.message) // Revalidate the path to update the UI revalidatePath('/') return { success: true, message: 'Message sent successfully', } } catch (error) { console.error('Error in sendMessageAction:', error) if (error instanceof z.ZodError) { return { success: false, error: error.errors.map(e => e.message).join(', '), } } return { success: false, error: 'An unexpected error occurred', } } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata, Viewport } from 'next' import { Inter, JetBrains_Mono } from 'next/font/google' import { Providers } from '@/providers' import './globals.css' // Font configurations const inter = Inter({ subsets: ['latin'], variable: '--font-sans', display: 'swap', }) const jetbrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono', display: 'swap', }) // Metadata configuration export const metadata: Metadata = { title: { default: 'v0 by Vercel', template: '%s | v0 by Vercel', }, description: 'v0.dev', keywords: ['React', 'Next.js', 'TypeScript', 'AI', 'Component Generator', 'v0'], authors: [{ name: 'v0 by Vercel Team' }], creator: 'v0 by Vercel', metadataBase: new URL('https://v0.dev'), openGraph: { type: 'website', locale: 'en_US', title: 'v0 by Vercel', description: 'v0.dev', siteName: 'v0 by Vercel', }, twitter: { card: 'summary_large_image', title: 'v0 by Vercel', description: 'v0.dev', }, robots: { index: true, follow: true, }, } // Viewport configuration export const viewport: Viewport = { width: 'device-width', initialScale: 1, maximumScale: 1, userScalable: false, themeColor: [ { media: '(prefers-color-scheme: light)', color: 'white' }, { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' }, ], } // Root layout component export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/layout/header.tsx" isMoved="true" isMerged="true" import { Avatar, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { VercelLogo } from "@/components/ui/v0-logo" import { ChevronsUpDown, ChevronDown, GitFork, Github, Settings } from "lucide-react" const RadixLockIcon = ({ className }: { className?: string }) => ( ) interface HeaderProps { className?: string } export function Header({ className }: HeaderProps) { return (

/ / /

Publish to Vercel Export Code

) } [V0_FILE]typescriptreact:file="components/layout/resizable-layout.tsx" isMerged="true" 'use client' import { useState, useRef, useCallback, useEffect } from 'react' import { cn } from '@/lib/utils' import { useApp } from '@/providers' import { SIDEBAR_CONFIG } from '@/config/constants' import type { ResizableLayoutProps } from '@/types' interface ResizableLayoutComponentProps extends ResizableLayoutProps { sidebarContent: React.ReactNode mainContent: React.ReactNode className?: string } export function ResizableLayout({ sidebarContent, mainContent, defaultSidebarWidth = SIDEBAR_CONFIG.DEFAULT_WIDTH, minSidebarWidth = SIDEBAR_CONFIG.MIN_WIDTH, maxSidebarWidth = SIDEBAR_CONFIG.MAX_WIDTH, className }: ResizableLayoutComponentProps) { const { sidebarWidth, setSidebarWidth } = useApp() const [isResizing, setIsResizing] = useState(false) const sidebarRef = useRef(null) const resizeTimeoutRef = useRef(null) // Initialize sidebar width on mount useEffect(() => { if (sidebarWidth === 0) { setSidebarWidth(defaultSidebarWidth) } }, [sidebarWidth, setSidebarWidth, defaultSidebarWidth]) // Debounced resize function to prevent excessive updates const debouncedSetSidebarWidth = useCallback((width: number) => { if (resizeTimeoutRef.current) { clearTimeout(resizeTimeoutRef.current) } resizeTimeoutRef.current = setTimeout(() => { setSidebarWidth(width) }, 0) }, [setSidebarWidth]) const handleMouseDown = useCallback((e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setIsResizing(true) document.body.style.cursor = 'col-resize' document.body.style.userSelect = 'none' }, []) const handleMouseMove = useCallback((e: MouseEvent) => { if (!sidebarRef.current || !isResizing) return const containerLeft = sidebarRef.current.parentElement!.getBoundingClientRect().left const newWidth = e.clientX - containerLeft const clampedWidth = Math.max(minSidebarWidth, Math.min(newWidth, maxSidebarWidth)) // Update width immediately for smooth visual feedback if (sidebarRef.current) { sidebarRef.current.style.width = `${clampedWidth}px` } // Debounce the context update to prevent excessive re-renders debouncedSetSidebarWidth(clampedWidth) }, [isResizing, minSidebarWidth, maxSidebarWidth, debouncedSetSidebarWidth]) const handleMouseUp = useCallback(() => { setIsResizing(false) document.body.style.cursor = '' document.body.style.userSelect = '' }, []) // Event listeners for mouse events useEffect(() => { if (isResizing) { const handleMouseMoveGlobal = (e: MouseEvent) => handleMouseMove(e) const handleMouseUpGlobal = () => handleMouseUp() window.addEventListener('mousemove', handleMouseMoveGlobal) window.addEventListener('mouseup', handleMouseUpGlobal) return () => { window.removeEventListener('mousemove', handleMouseMoveGlobal) window.removeEventListener('mouseup', handleMouseUpGlobal) } } }, [isResizing, handleMouseMove, handleMouseUp]) // Cleanup timeout on unmount useEffect(() => { return () => { if (resizeTimeoutRef.current) { clearTimeout(resizeTimeoutRef.current) } } }, []) const currentWidth = sidebarWidth || defaultSidebarWidth return (

{sidebarContent}

{mainContent}

) } [V0_FILE]typescriptreact:file="components/features/chat/chat-input.tsx" isMerged="true" import { type FormEvent, type KeyboardEvent } from 'react' import { Button } from '@/components/ui/button' import { Textarea } from '@/components/ui/textarea' import { ArrowUp, Paperclip, Sparkles } from 'lucide-react' import { cn } from '@/lib/utils' import { UI_CONFIG } from '@/config/constants' interface ChatInputProps { value: string onChange: (value: string) => void onSubmit: (e: FormEvent) => void isLoading?: boolean placeholder?: string className?: string } export function ChatInput({ value, onChange, onSubmit, isLoading = false, placeholder = 'Ask a follow-up...', className }: ChatInputProps) { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() onSubmit(e as any) } } return (

onChange(e.target.value)}
        placeholder={placeholder}
        className="resize-none border-interactive-border bg-surface pr-24"
        style={{ minHeight: `${UI_CONFIG.TEXTAREA_MIN_HEIGHT}px` }}
        onKeyDown={handleKeyDown}
        disabled={isLoading}
      />
      <div className="absolute bottom-2 right-2 flex items-center gap-2">
        <Button 
          type="button"
          variant="ghost" 
          size="icon" 
          className="h-7 w-7 text-text-secondary hover:bg-interactive-hover"
          disabled={isLoading}
        >
          <Sparkles className="h-4 w-4" />
        </Button>
        <Button 
          type="button"
          variant="ghost" 
          size="icon" 
          className="h-7 w-7 text-text-secondary hover:bg-interactive-hover"
          disabled={isLoading}
        >
          <Paperclip className="h-4 w-4" />
        </Button>
        <Button
          type="submit"
          disabled={isLoading || !value.trim()}
          size="icon"
          className="h-7 w-7 bg-interactive-hover text-text-primary hover:bg-interactive-active"
        >
          <ArrowUp className="h-4 w-4" />
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="components/features/chat/chat-message.tsx" isMerged="true"
import { Bot } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { Message } from '@/types'

interface ChatMessageProps {
  message: Message
  className?: string
}

export function ChatMessage({ message, className }: ChatMessageProps) {
  const isUser = message.role === 'user'
  const isAssistant = message.role === 'assistant'

return (
    <div className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start', className)}>
      {isAssistant && <Bot className="h-5 w-5 shrink-0 text-text-primary" />}
      <div
        className={cn(
          'max-w-[85%] rounded-lg p-3',
          isUser 
            ? 'bg-interactive-active text-text-primary' 
            : 'bg-surface text-text-primary'
        )}
      >
        <p className="whitespace-pre-wrap">{message.content}</p>
        {message.timestamp && (
          <time className="mt-1 block text-xs text-text-muted">
            {new Date(message.timestamp).toLocaleTimeString()}
          </time>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/features/chat/model-selector.tsx" isMerged="true"
import { Button } from '@/components/ui/button'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuSeparator, 
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu'
import { BarChart, ChevronDown, Check } from 'lucide-react'
import { useApp } from '@/providers'
import { cn } from '@/lib/utils'

interface ModelSelectorProps {
  className?: string
}

export function ModelSelector({ className }: ModelSelectorProps) {
  const { selectedModel, setSelectedModel, getAvailableModels, features, toggleFeature } = useApp()
  const models = getAvailableModels()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className={cn(
            'flex items-center gap-1 text-sm text-text-secondary hover:bg-white/5',
            className
          )}
        >
          <BarChart className="h-4 w-4 text-status-success" />
          {selectedModel}
          <ChevronDown className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        className="w-[--radix-dropdown-menu-trigger-width] bg-[rgba(20,20,21,1)]"
      >
        {models.map((model) => (
          <DropdownMenuItem key={model.id} onSelect={() => setSelectedModel(model.id)}>
            <div className="flex items-center justify-between w-full">
              <div className="flex flex-col">
                <span>{model.name}</span>
                {model.description && (
                  <span className="text-xs text-text-muted">{model.description}</span>
                )}
              </div>
              {selectedModel === model.id && <Check className="h-4 w-4" />}
            </div>
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          <div className="flex w-full items-center justify-between">
            <Label htmlFor="generate-images" className="font-normal">
              Generate Images
            </Label>
            <Switch 
              id="generate-images"
              checked={features.imageGeneration}
              onCheckedChange={() => toggleFeature('imageGeneration')}
            />
          </div>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/features/files/file-explorer.tsx" isMerged="true"
import { CheckCircle, ChevronDown } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { GeneratedFile } from '@/types'
import { FILE_STATUS } from '@/config/constants'

interface FileExplorerProps {
  files?: GeneratedFile[]
  className?: string
}

const defaultFiles: GeneratedFile[] = [
  { name: 'components/chat-form.tsx', content: '', status: 'generated', type: 'component' },
  { name: 'components/autoresize-textarea.tsx', content: '', status: 'generated', type: 'component' },
  { name: 'app/page.tsx', content: '', status: 'generated', type: 'page' },
  { name: 'app/layout.tsx', content: '', status: 'generated', type: 'page' },
  { name: 'app/api/chat/route.ts', content: '', status: 'generated', type: 'api' },
]

export function FileExplorer({ files = defaultFiles, className }: FileExplorerProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case FILE_STATUS.GENERATED:
        return 'text-status-success'
      case FILE_STATUS.MODIFIED:
        return 'text-status-warning'
      case FILE_STATUS.UNCHANGED:
        return 'text-text-muted'
      default:
        return 'text-text-muted'
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case FILE_STATUS.GENERATED:
        return 'Generated'
      case FILE_STATUS.MODIFIED:
        return 'Modified'
      case FILE_STATUS.UNCHANGED:
        return 'Unchanged'
      default:
        return 'Unknown'
    }
  }

return (
    <div className={cn('rounded-md border border-interactive-border bg-surface p-2 font-mono text-sm', className)}>
      <div className="flex items-center justify-between px-2 py-1">
        <div className="flex items-center gap-2">
          <ChevronDown className="h-4 w-4" />
          <span className="text-text-primary">Version 1</span>
        </div>
        <div className="flex items-center gap-2">
          <span className="rounded bg-interactive-hover px-1.5 py-0.5 text-xs text-text-secondary">
            Latest
          </span>
          <span className="rounded bg-interactive-active px-1.5 py-0.5 text-xs text-text-primary">
            Viewing
          </span>
        </div>
      </div>
      <ul className="mt-2 space-y-1 pl-4">
        {files.map((file) => (
          <li key={file.name} className="flex items-center justify-between gap-4">
            <div className="flex min-w-0 items-center gap-2 text-text-secondary">
              <CheckCircle className={cn('h-4 w-4 shrink-0', getStatusColor(file.status))} />
              <span className="whitespace-nowrap truncate" title={file.name}>
                {file.name}
              </span>
            </div>
            <span className="text-text-muted shrink-0">
              {getStatusText(file.status)}
            </span>
          </li>
        ))}
      </ul>
    </div>
  )
}
[V0_FILE]typescript:file="config/constants.ts" isMerged="true"
import type { V0Model, AppConfig } from '@/types'

// Layout constants
export const SIDEBAR_CONFIG = {
    MIN_WIDTH: 240,
    MAX_WIDTH: 500,
    DEFAULT_WIDTH: 320,
} as const

// Available models
export const AVAILABLE_MODELS: V0Model[] = [
    {
        id: 'v0-1.5-sm',
        name: 'v0-1.5-sm',
        description: 'Small model - Fast generation',
        isAvailable: true,
    },
    {
        id: 'v0-1.5-md',
        name: 'v0-1.5-md',
        description: 'Medium model - Balanced performance',
        isAvailable: true,
    },
    {
        id: 'v0-1.5-lg',
        name: 'v0-1.5-lg',
        description: 'Large model - High quality',
        isAvailable: true,
    },
]

// App configuration
export const APP_CONFIG: AppConfig = {
    models: AVAILABLE_MODELS,
    defaultModel: 'v0-1.5-md',
    features: {
        imageGeneration: true,
        codeExport: true,
        realTimePreview: true,
    },
}

// UI Constants
export const UI_CONFIG = {
    HEADER_HEIGHT: 48, // 12 * 4 = 48px
    ANIMATION_DURATION: 200,
    TEXTAREA_MIN_HEIGHT: 96, // 24 * 4 = 96px
} as const

// Status types for file explorer
export const FILE_STATUS = {
    GENERATED: 'generated',
    MODIFIED: 'modified',
    UNCHANGED: 'unchanged',
} as const
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

// Main utility function for combining classes
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/utils/format.ts" isMerged="true"
/**
 * Format utilities for the application
 */

export function formatDate(date: Date): string {
    return new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    }).format(date)
}

export function formatRelativeTime(date: Date): string {
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const seconds = Math.floor(diff / 1000)
    const minutes = Math.floor(seconds / 60)
    const hours = Math.floor(minutes / 60)
    const days = Math.floor(hours / 24)

if (seconds < 60) {
        return 'just now'
    } else if (minutes < 60) {
        return `${minutes}m ago`
    } else if (hours < 24) {
        return `${hours}h ago`
    } else if (days < 7) {
        return `${days}d ago`
    } else {
        return formatDate(date)
    }
}

export function formatFileSize(bytes: number): string {
    const sizes = ['B', 'KB', 'MB', 'GB']
    if (bytes === 0) return '0 B'

const i = Math.floor(Math.log(bytes) / Math.log(1024))
    const size = bytes / Math.pow(1024, i)

return `${size.toFixed(1)} ${sizes[i]}`
}

export function truncateText(text: string, maxLength: number): string {
    if (text.length <= maxLength) return text
    return `${text.substring(0, maxLength)}...`
}

export function slugify(text: string): string {
    return text
        .toLowerCase()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '')
}

export function generateId(): string {
    return Math.random().toString(36).substring(2) + Date.now().toString(36)
}
[V0_FILE]typescript:file="lib/utils/validation.ts" isMerged="true"
/**
 * Validation utilities for the application
 */

export function isValidEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
}

export function isValidUrl(url: string): boolean {
    try {
        new URL(url)
        return true
    } catch {
        return false
    }
}

export function isValidPrompt(prompt: string): boolean {
    return prompt.trim().length > 0 && prompt.trim().length <= 1000
}

export function sanitizeInput(input: string): string {
    return input.trim().replace(/[<>]/g, '')
}

export function isValidFileSize(size: number, maxSize: number = 10 * 1024 * 1024): boolean {
    return size > 0 && size <= maxSize
}

export function isValidImageType(type: string): boolean {
    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
    return validTypes.includes(type)
}

export function validateRequired(value: string, fieldName: string): string | null {
    if (!value || value.trim().length === 0) {
        return `${fieldName} is required`
    }
    return null
}

export function validateLength(
    value: string,
    min: number,
    max: number,
    fieldName: string
): string | null {
    if (value.length < min) {
        return `${fieldName} must be at least ${min} characters`
    }
    if (value.length > max) {
        return `${fieldName} must be no more than ${max} characters`
    }
    return null
}
[V0_FILE]typescriptreact:file="providers/app-provider.tsx" isMerged="true"
'use client'

import { createContext, useContext, useState, type ReactNode } from 'react'
import type { V0Model } from '@/types'
import { APP_CONFIG } from '@/config/constants'

// App Context Types
interface AppState {
  selectedModel: string
  previewUrl: string | null
  isGenerating: boolean
  sidebarWidth: number
  features: {
    imageGeneration: boolean
    codeExport: boolean
    realTimePreview: boolean
  }
}

interface AppContextType extends AppState {
  setSelectedModel: (model: string) => void
  setPreviewUrl: (url: string | null) => void
  setIsGenerating: (generating: boolean) => void
  setSidebarWidth: (width: number) => void
  toggleFeature: (feature: keyof AppState['features']) => void
  getAvailableModels: () => V0Model[]
}

// Initial state
const initialState: AppState = {
  selectedModel: APP_CONFIG.defaultModel,
  previewUrl: null,
  isGenerating: false,
  sidebarWidth: 320,
  features: { ...APP_CONFIG.features },
}

// Context
const AppContext = createContext<AppContextType | undefined>(undefined)

// Provider
interface AppProviderProps {
  children: ReactNode
}

export function AppProvider({ children }: AppProviderProps) {
  const [selectedModel, setSelectedModel] = useState(initialState.selectedModel)
  const [previewUrl, setPreviewUrl] = useState<string | null>(initialState.previewUrl)
  const [isGenerating, setIsGenerating] = useState(initialState.isGenerating)
  const [sidebarWidth, setSidebarWidth] = useState(initialState.sidebarWidth)
  const [features, setFeatures] = useState(initialState.features)

const toggleFeature = (feature: keyof AppState['features']) => {
    setFeatures(prev => ({
      ...prev,
      [feature]: !prev[feature],
    }))
  }

const getAvailableModels = () => {
    return APP_CONFIG.models.filter(model => model.isAvailable)
  }

const contextValue: AppContextType = {
    selectedModel,
    previewUrl,
    isGenerating,
    sidebarWidth,
    features,
    setSelectedModel,
    setPreviewUrl,
    setIsGenerating,
    setSidebarWidth,
    toggleFeature,
    getAvailableModels,
  }

return <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>
}

// Hook to use the app context
export function useApp() {
  const context = useContext(AppContext)
  if (context === undefined) {
    throw new Error('useApp must be used within an AppProvider')
  }
  return context
}
[V0_FILE]typescriptreact:file="providers/chat-provider.tsx" isMerged="true"
'use client'

import { createContext, useContext, useReducer, type ReactNode } from 'react'
import type { Message, ChatSession } from '@/types'

// Chat Context Types
interface ChatState {
  currentSession: ChatSession | null
  messages: Message[]
  isLoading: boolean
  error: string | null
}

interface ChatContextType extends ChatState {
  sendMessage: (content: string) => Promise<void>
  clearMessages: () => void
  setLoading: (loading: boolean) => void
  setError: (error: string | null) => void
}

// Actions
type ChatAction =
  | { type: 'SET_MESSAGES'; payload: Message[] }
  | { type: 'ADD_MESSAGE'; payload: Message }
  | { type: 'SET_LOADING'; payload: boolean }
  | { type: 'SET_ERROR'; payload: string | null }
  | { type: 'CLEAR_MESSAGES' }
  | { type: 'SET_SESSION'; payload: ChatSession }

// Initial state
const initialState: ChatState = {
  currentSession: null,
  messages: [],
  isLoading: false,
  error: null,
}

// Reducer
function chatReducer(state: ChatState, action: ChatAction): ChatState {
  switch (action.type) {
    case 'SET_MESSAGES':
      return { ...state, messages: action.payload }
    case 'ADD_MESSAGE':
      return { ...state, messages: [...state.messages, action.payload] }
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload }
    case 'SET_ERROR':
      return { ...state, error: action.payload }
    case 'CLEAR_MESSAGES':
      return { ...state, messages: [], error: null }
    case 'SET_SESSION':
      return { ...state, currentSession: action.payload, messages: action.payload.messages }
    default:
      return state
  }
}

// Context
const ChatContext = createContext<ChatContextType | undefined>(undefined)

// Provider
interface ChatProviderProps {
  children: ReactNode
}

export function ChatProvider({ children }: ChatProviderProps) {
  const [state, dispatch] = useReducer(chatReducer, initialState)

const sendMessage = async (content: string): Promise<void> => {
    if (!content.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content,
      timestamp: new Date(),
    }

dispatch({ type: 'ADD_MESSAGE', payload: userMessage })
    dispatch({ type: 'SET_LOADING', payload: true })
    dispatch({ type: 'SET_ERROR', payload: null })

try {
      // This will be implemented in the component that uses this context
      // For now, we just add the message
    } catch (error) {
      dispatch({ type: 'SET_ERROR', payload: 'Failed to send message' })
    } finally {
      dispatch({ type: 'SET_LOADING', payload: false })
    }
  }

const clearMessages = () => {
    dispatch({ type: 'CLEAR_MESSAGES' })
  }

const setLoading = (loading: boolean) => {
    dispatch({ type: 'SET_LOADING', payload: loading })
  }

const setError = (error: string | null) => {
    dispatch({ type: 'SET_ERROR', payload: error })
  }

const contextValue: ChatContextType = {
    ...state,
    sendMessage,
    clearMessages,
    setLoading,
    setError,
  }

return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>
}

// Hook to use the chat context
export function useChat() {
  const context = useContext(ChatContext)
  if (context === undefined) {
    throw new Error('useChat must be used within a ChatProvider')
  }
  return context
}
[V0_FILE]typescript:file="types/types.ts" isMerged="true"
// Chat and Message types
export interface Message {
    id: string
    role: 'user' | 'assistant' | 'system'
    content: string
    timestamp?: Date
}

export interface ChatSession {
    id: string
    messages: Message[]
    createdAt: Date
    updatedAt: Date
}

// Component generation types
export interface ComponentGenerationRequest {
    message: string
    system?: string
    model?: string
}

export interface ComponentGenerationResponse {
    success: boolean
    demoUrl?: string
    aiMessage?: string
    error?: string
    generatedFiles?: GeneratedFile[]
}

export interface GeneratedFile {
    name: string
    content: string
    status: 'generated' | 'modified' | 'unchanged'
    type: 'component' | 'page' | 'api' | 'config'
}

// UI Component types
export interface ResizableLayoutProps {
    defaultSidebarWidth?: number
    minSidebarWidth?: number
    maxSidebarWidth?: number
}

export interface PreviewPanelProps {
    previewUrl: string | null
    isLoading?: boolean
}

export interface SidebarProps {
    setPreviewUrl: (url: string | null) => void
    className?: string
}

// Model and Configuration types
export interface V0Model {
    id: string
    name: string
    description?: string
    isAvailable: boolean
}

export interface AppConfig {
    models: V0Model[]
    defaultModel: string
    features: {
        imageGeneration: boolean
        codeExport: boolean
        realTimePreview: boolean
    }
}

// V0 API types (oficial - compatibles con OpenAI)
export interface V0ApiMessage {
    role: 'user' | 'assistant' | 'system'
    content: string
}

export interface V0ApiRequest {
    model: string
    messages: V0ApiMessage[]
    stream?: boolean
    tools?: any[]
    tool_choice?: string | object
}

export interface V0ApiResponse {
    id: string
    object: string
    created: number
    choices: Array<{
        index: number
        message: {
            role: string
            content: string
        }
        finish_reason: string
    }>
}

export interface V0StreamResponse {
    id: string
    object: string
    choices: Array<{
        delta: {
            role?: string
            content?: string
        }
        index: number
        finish_reason: string | null
    }>
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
    // Add security headers
    const response = NextResponse.next()

// Security headers
    response.headers.set('X-Frame-Options', 'DENY')
    response.headers.set('X-Content-Type-Options', 'nosniff')
    response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
    response.headers.set('X-XSS-Protection', '1; mode=block')

// CSP for development - adjust for production
    if (process.env.NODE_ENV === 'development') {
        response.headers.set(
            'Content-Security-Policy',
            "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; frame-src 'self' https://*.vusercontent.net https://*.v0.dev https://v0.dev;"
        )
    } else {
        // Production CSP - more restrictive but allows v0 iframes
        response.headers.set(
            'Content-Security-Policy',
            "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; frame-src 'self' https://*.vusercontent.net https://*.v0.dev https://v0.dev; connect-src 'self' https://api.v0.dev;"
        )
    }

return response
}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - api (API routes)
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * - public folder
         */
        '/((?!api|_next/static|_next/image|favicon.ico|public/).*)',
    ],
}
[V0_FILE]typescriptreact:file="providers/index.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { ThemeProvider } from "next-themes"
import { AppProvider, useApp } from "./app-provider"
import { ChatProvider, useChat } from "./chat-provider"

interface ProvidersProps {
  children: ReactNode
}

export function Providers({ children }: ProvidersProps) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
      <AppProvider>
        <ChatProvider>{children}</ChatProvider>
      </AppProvider>
    </ThemeProvider>
  )
}

export { useApp, useChat };
[V0_FILE]typescriptreact:file="components/features/chat/chat-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, type FormEvent } from "react"
import { Button } from "@/components/ui/button"
import { FileExplorer } from "@/components/features/files/file-explorer"
import { ChatMessage } from "./chat-message"
import { ChatInput } from "./chat-input"
import { ModelSelector } from "./model-selector"
import { Bot } from "lucide-react"
import { cn } from "@/lib/utils"
import { useChat, useApp } from "@/providers"
import { generateComponentAction } from "@/actions/generate-ui"

export function ChatSidebar({ className }: { className?: string }) {
  const { messages, isLoading, sendMessage, setError } = useChat()
  const { setIsGenerating, setPreviewUrl: setAppPreviewUrl } = useApp()
  const [input, setInput] = useState("")

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    if (!input.trim() || isLoading) return

try {
      setIsGenerating(true)
      await sendMessage(input)

// Generate component using server action
      const formData = new FormData()
      formData.append("message", input)
      formData.append("system", "You are an expert React developer")
      formData.append("model", "v0-1.5-md")

const result = await generateComponentAction(formData)

if (result.success && result.previewUrl) {
        setAppPreviewUrl(result.previewUrl)
      } else {
        setError(result.error || "Failed to generate component")
      }
    } catch (error) {
      setError("An unexpected error occurred")
    } finally {
      setIsGenerating(false)
      setInput("")
    }
  }

return (
    <aside className={cn("flex h-full flex-col overflow-hidden rounded-lg bg-[rgba(15,15,15,1)]", className)}>
      {/* Header */}
      <div className="flex h-12 items-center justify-between border-b border-interactive-border px-3">
        <div className="flex items-center gap-2">
          <Button variant="ghost" className="h-auto p-1 text-text-primary hover:bg-interactive-hover">
            Chat
          </Button>
          <Button variant="ghost" className="h-auto p-1 text-text-secondary hover:bg-interactive-hover">
            Design
          </Button>
        </div>
      </div>

{/* Messages */}
      <div className="flex-1 space-y-4 overflow-y-auto p-4 text-sm">
        {messages.length === 0 && (
          <div className="flex items-start gap-3">
            
            <div className="flex-1">
              
            </div>
          </div>
        )}

{messages.map((message) => (
          <ChatMessage key={message.id} message={message} />
        ))}

{messages.length > 0 && (
          <div className="mt-4">
            <FileExplorer />
          </div>
        )}
      </div>

{/* Input */}
      <div className="border-t border-interactive-border p-4">
        <ChatInput
          value={input}
          onChange={setInput}
          onSubmit={handleSubmit}
          isLoading={isLoading}
          placeholder="Ask a follow-up..."
        />
        <div className="mt-2 flex items-center justify-between">
          <ModelSelector />
        </div>
      </div>
    </aside>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/layout/header"
import { ResizableLayout } from "@/components/layout/resizable-layout"
import { ChatSidebar } from "@/components/features/chat/chat-sidebar"
import { PreviewPanel } from "@/components/features/preview/preview-panel"

export default function V0ClonePage() {
  return (
    <div className="flex h-screen w-full flex-col bg-primary-background font-sans text-text-primary">
      <Header />
      <div className="flex-1 overflow-hidden px-2 pt-2">
        <ResizableLayout
          sidebarContent={<ChatSidebar />}
          mainContent={<PreviewPanel className="rounded-lg overflow-hidden" />}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/features/preview/preview-panel.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, ChevronRight, RefreshCw, ExternalLink, Maximize2 } from "lucide-react"
import { cn } from "@/lib/utils"
import { useApp, useChat } from "@/providers"
import { VercelLogo } from "@/components/ui/v0-logo"
import LoadingState from "./loading-state"

interface PreviewPanelProps {
  className?: string
}

const DefaultContent = () => (
  <div className="flex h-full items-center justify-center p-8 text-center bg-[rgba(10,10,10,1)]">
    <div className="flex flex-col items-center gap-4">
      <VercelLogo className="h-10 w-10 text-gray-300" />
      <h2 className="text-xl font-medium text-gray-500">Preview</h2>
    </div>
  </div>
)

const ErrorContent = ({ error }: { error: string }) => (
  <div className="flex h-full items-center justify-center p-8">
    <div className="flex flex-col items-center gap-4 text-center">
      <div className="rounded-full bg-red-100 p-4">
        <svg className="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      </div>
      <h2 className="text-xl font-semibold text-gray-900">Error Generating Component</h2>
      <p className="text-gray-600 max-w-md">{error}</p>
      <Button variant="outline" onClick={() => window.location.reload()} className="mt-4">
        Retry
      </Button>
    </div>
  </div>
)

export function PreviewPanel({ className }: { className?: string }) {
  const { previewUrl, isGenerating: isLoading } = useApp()
  const { error } = useChat()

const isError = !!error
  const errorMessage = error

return (
    <div className={cn("flex h-full flex-col", className)}>
      <div className="flex h-12 items-center gap-4 border-b border-gray-800 px-4 shadow-sm bg-[rgba(15,15,15,1)]">
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400" disabled={!previewUrl}>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400" disabled={!previewUrl}>
            <ChevronRight className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400" disabled={!previewUrl}>
            <RefreshCw className="h-4 w-4" />
          </Button>
        </div>

<div className="flex items-center gap-2">
          {previewUrl && (
            <>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-gray-600 hover:text-gray-900"
                onClick={() => window.open(previewUrl, "_blank")}
                title="Open in new tab"
              >
                <ExternalLink className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 text-gray-600 hover:text-gray-900"
                title="Fullscreen"
              >
                <Maximize2 className="h-4 w-4" />
              </Button>
            </>
          )}
        </div>
      </div>

<div className="flex-1 bg-white overflow-hidden">
        {isLoading ? (
          <LoadingState />
        ) : isError ? (
          <ErrorContent error={errorMessage || "Unknown error"} />
        ) : previewUrl ? (
          <iframe
            src={previewUrl}
            className="h-full w-full border-0"
            title="v0 Component Preview"
            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
            loading="lazy"
          />
        ) : (
          <DefaultContent />
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/features/preview/loading-state.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect, useState, useRef } from "react"
import { Loader2 } from "lucide-react"

// Define our code sequences
const CODE_SEQUENCES = [
  {
    status: "Adding the button",
    lines: [
      "function Button({ children, onClick, variant = 'primary' }) {",
      "  return (",
      "    <button",
      "      onClick={onClick}",
      "      className={`btn btn-${variant} rounded-md px-4 py-2`}>",
      "      {children}",
      "    </button>",
      "  );",
      "}",
    ],
  },
  {
    status: "Configuring styles",
    lines: [
      "const buttonStyles = {",
      "  primary: 'bg-blue-600 text-white hover:bg-blue-700',",
      "  secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',",
      "  danger: 'bg-red-600 text-white hover:bg-red-700',",
      "  success: 'bg-green-600 text-white hover:bg-green-700',",
      "  outline: 'bg-transparent border border-current hover:bg-gray-100'",
      "}",
    ],
  },
  {
    status: "Setting up event handlers",
    lines: [
      "const handleClick = (event) => {",
      "  if (isLoading) return;",
      "  setIsLoading(true);",
      "  onClick?.(event);",
      "  setTimeout(() => setIsLoading(false), 1000);",
      "  analytics.track('button_clicked', { buttonId });",
      "}",
    ],
  },
]

const SyntaxHighlighter = ({ code }: { code: string }) => {
  const highlighted = code
    .replace(/"(.*?)"/g, '<span class="text-green-300">"$1"</span>')
    .replace(/'(.*?)'/g, "<span class=\"text-green-300\">'$1'</span>")
    .replace(
      /\b(function|return|const|let|var|if|else|export|default|import|from|new|async|await|=>)\b/g,
      '<span class="text-fuchsia-400">$1</span>',
    )
    .replace(/\b([A-Z][a-zA-Z0-9_]+)\b/g, '<span class="text-cyan-300">$1</span>')
    .replace(/({|})/g, '<span class="text-yellow-300">$1</span>')
    .replace(/($$|$$)/g, '<span class="text-purple-300">$1</span>')
    .replace(/(\[|\])/g, '<span class="text-orange-300">$1</span>')
    .replace(/(\w+)=/g, '<span class="text-sky-300">$1</span>=')
    .replace(/\b(\d+)\b/g, '<span class="text-amber-300">$1</span>')
    .replace(/(\/\/.*)/g, '<span class="text-gray-500">$1</span>')

return <pre className="text-text-primary flex-1" dangerouslySetInnerHTML={{ __html: highlighted }} />
}

export default function LoadingState() {
  const [sequenceIndex, setSequenceIndex] = useState(0)
  const [visibleLines, setVisibleLines] = useState<Array<{ text: string; number: number }>>([])
  const [scrollPosition, setScrollPosition] = useState(0)
  const codeContainerRef = useRef<HTMLDivElement>(null)
  const lineHeight = 24 // Approximate line height in pixels

const currentSequence = CODE_SEQUENCES[sequenceIndex]
  const totalLines = currentSequence.lines.length

// Initialize visible lines
  useEffect(() => {
    const initialLines = []
    for (let i = 0; i < Math.min(5, totalLines); i++) {
      initialLines.push({
        text: currentSequence.lines[i],
        number: i + 1,
      })
    }
    setVisibleLines(initialLines)
    setScrollPosition(0)
  }, [sequenceIndex, currentSequence.lines, totalLines])

// Handle line advancement
  useEffect(() => {
    const advanceTimer = setInterval(() => {
      // Get the current first visible line index
      const firstVisibleLineIndex = Math.floor(scrollPosition / lineHeight)
      const nextLineIndex = (firstVisibleLineIndex + 3) % totalLines

// If we're about to wrap around, move to next sequence
      if (nextLineIndex < firstVisibleLineIndex && nextLineIndex !== 0) {
        setSequenceIndex((prevIndex) => (prevIndex + 1) % CODE_SEQUENCES.length)
        return
      }

// Add the next line if needed
      if (nextLineIndex >= visibleLines.length && nextLineIndex < totalLines) {
        setVisibleLines((prevLines) => [
          ...prevLines,
          {
            text: currentSequence.lines[nextLineIndex],
            number: nextLineIndex + 1,
          },
        ])
      }

// Scroll to the next line
      setScrollPosition((prevPosition) => prevPosition + lineHeight)
    }, 1500)

return () => clearInterval(advanceTimer)
  }, [scrollPosition, visibleLines, totalLines, sequenceIndex, currentSequence.lines, lineHeight])

// Apply scroll position
  useEffect(() => {
    if (codeContainerRef.current) {
      codeContainerRef.current.scrollTop = scrollPosition
    }
  }, [scrollPosition])

return (
    <div className="flex h-full w-full items-center justify-center bg-primary-background">
      <div className="w-full max-w-xl space-y-4 p-4">
        {/* Status line with spinner */}
        <div className="flex items-center space-x-3 font-medium text-text-secondary">
          <Loader2 className="h-5 w-5 animate-spin" />
          <span>{currentSequence.status}...</span>
        </div>

{/* Code display with line numbers */}
        <div className="relative">
          <div
            ref={codeContainerRef}
            className="relative h-[72px] w-full overflow-hidden font-mono text-sm"
            style={{ scrollBehavior: "smooth" }}
          >
            <div>
              {visibleLines.map((line, index) => (
                <div key={index} className="flex h-[24px]">
                  {/* Line number */}
                  <div className="w-8 select-none pr-4 text-right text-text-muted">{line.number}</div>

{/* Code content */}
                  <SyntaxHighlighter code={line.text} />
                </div>
              ))}
            </div>
          </div>

{/* Linear gradient overlay */}
          <div
            className="pointer-events-none absolute inset-0"
            style={{
              background:
                "linear-gradient(to bottom, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 30%, rgba(10, 10, 10, 0) 100%)",
              zIndex: 10,
            }}
          />
        </div>
      </div>
    </div>
  )
}89:["$","$L93",null,{"chatId":"FtTVVXe4wxp","children":["$","$L94",null,{"data":{"@\"active-block\",\"FtTVVXe4wxp\",":{"id":"b_5I9EB1dM16D","messageId":"TxbuPliyTLfoypOofWzSVVOfHmqkpPvL","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"v0-clone-interface","type":"code-project","project":"v0-clone-interface"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"FtTVVXe4wxp\",":false},"children":"$L96"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from emmartinzok

More Templates Like This