[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { ChatContainer } from "@/components/chat-container" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import type * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import { Analytics } from "@vercel/analytics/next" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" import { Suspense } from "react" export const metadata: Metadata = { title: "Chat App", description: "Aplicación de chat minimalista con soporte para imágenes", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "jspdf": "3.0.3", "@supabase/ssr": "0.7.0", "tesseract.js": "6.0.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.95 0.005 280); /* Changed background from white to gray */ --foreground: oklch(0.25 0.01 280); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.01 280); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.01 280); --primary: oklch(0.65 0.15 280); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.96 0.01 280); --secondary-foreground: oklch(0.25 0.01 280); --muted: oklch(0.96 0.01 280); --muted-foreground: oklch(0.55 0.01 280); --accent: oklch(0.96 0.01 280); --accent-foreground: oklch(0.25 0.01 280); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.92 0.01 280); --input: oklch(0.92 0.01 280); --ring: oklch(0.65 0.15 280); --radius: 0.75rem; --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.15 0.01 280); --foreground: oklch(0.98 0.005 280); --card: oklch(0.18 0.01 280); --card-foreground: oklch(0.98 0.005 280); --popover: oklch(0.18 0.01 280); --popover-foreground: oklch(0.98 0.005 280); --primary: oklch(0.7 0.15 280); --primary-foreground: oklch(0.15 0.01 280); --secondary: oklch(0.25 0.01 280); --secondary-foreground: oklch(0.98 0.005 280); --muted: oklch(0.25 0.01 280); --muted-foreground: oklch(0.65 0.01 280); --accent: oklch(0.25 0.01 280); --accent-foreground: oklch(0.98 0.005 280); --destructive: oklch(0.5 0.2 27.325); --destructive-foreground: oklch(0.98 0.005 280); --border: oklch(0.25 0.01 280); --input: oklch(0.25 0.01 280); --ring: oklch(0.7 0.15 280); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true" export interface Message { id: string userId: string content: string image?: string timestamp: string } export interface User { id: string lastActive: string } [V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- Create messages table CREATE TABLE IF NOT EXISTS messages ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id TEXT NOT NULL, content TEXT, image_url TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Create active_users table CREATE TABLE IF NOT EXISTS active_users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id TEXT UNIQUE NOT NULL, last_active TIMESTAMPTZ DEFAULT NOW() ); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_messages_created_at ON messages(created_at DESC); CREATE INDEX IF NOT EXISTS idx_active_users_last_active ON active_users(last_active DESC); -- Enable Row Level Security ALTER TABLE messages ENABLE ROW LEVEL SECURITY; ALTER TABLE active_users ENABLE ROW LEVEL SECURITY; -- Create policies to allow all operations (since we don't have auth) CREATE POLICY "Allow all operations on messages" ON messages FOR ALL USING (true) WITH CHECK (true); CREATE POLICY "Allow all operations on active_users" ON active_users FOR ALL USING (true) WITH CHECK (true); [V0_FILE]typescriptreact:file="components/users-list.tsx" isEdit="true" isMerged="true" "use client" import { Users, X } from "lucide-react" import { Button } from "@/components/ui/button" import type { User } from "@/lib/types" import { cn } from "@/lib/utils" interface UsersListProps { users: User[] currentUserId: string isVisible: boolean onToggle: () => void } export function UsersList({ users, currentUserId, isVisible, onToggle }: UsersListProps) { return ( <> {/* Toggle button for mobile/when hidden */} {!isVisible && ( )} {/* Users sidebar */}

Usuarios

{users.length}

{users.map((user) => { const userNumber = user.id.replace("G", "") const avatarText = `G${userNumber}` return (

{avatarText}

{user.id} {user.id === currentUserId && (tú)}

) })}

{/* Overlay for mobile */} {isVisible &&

} ) } [V0_FILE]typescriptreact:file="components/chat-header.tsx" isEdit="true" isMerged="true" "use client" import { Moon, Sun, Trash2, Download } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { useEffect, useState } from "react" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" interface ChatHeaderProps { userId: string onClearChat: () => void onExportPDF: () => void } export function ChatHeader({ userId, onClearChat, onExportPDF }: ChatHeaderProps) { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) const userNumber = userId.replace("G", "") const avatarText = `G${userNumber}` if (!mounted) { return (

{avatarText}

Chat

{userId}

) } return (

{avatarText}

Chat

{userId}

¿Limpiar todo el chat? Esta acción eliminará todos los mensajes del chat. Esta acción no se puede deshacer. Cancelar Limpiar

) } [V0_FILE]typescript:file="lib/supabase.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" let supabaseInstance: ReturnType | null = null export function createClient() { if (typeof window === "undefined") { throw new Error("Supabase client can only be created in browser environment") } if (!supabaseInstance) { // Get env vars from window object if available (injected during build) const url = typeof window !== "undefined" && (window as any).__NEXT_PUBLIC_SUPABASE_URL ? (window as any).__NEXT_PUBLIC_SUPABASE_URL : process.env.NEXT_PUBLIC_SUPABASE_URL const key = typeof window !== "undefined" && (window as any).__NEXT_PUBLIC_SUPABASE_ANON_KEY ? (window as any).__NEXT_PUBLIC_SUPABASE_ANON_KEY : process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY if (!url || !key) { console.error("[v0] Error: Variables de entorno de Supabase no configuradas", { url: url ? "✓" : "✗ NEXT_PUBLIC_SUPABASE_URL", key: key ? "✓" : "✗ NEXT_PUBLIC_SUPABASE_ANON_KEY", windowUrl: (window as any).__NEXT_PUBLIC_SUPABASE_URL ? "✓" : "✗", windowKey: (window as any).__NEXT_PUBLIC_SUPABASE_ANON_KEY ? "✓" : "✗", }) throw new Error( "Supabase environment variables not configured. Please check your Vercel environment variables.", ) } try { supabaseInstance = createBrowserClient(url, key, { global: { headers: { "x-client-info": "chat-app", }, }, auth: { persistSession: true, autoRefreshToken: true, detectSessionInUrl: false, }, realtime: { params: { eventsPerSecond: 10, }, }, }) } catch (error) { console.error("[v0] Error al crear cliente Supabase:", error) throw error } } return supabaseInstance } [V0_FILE]sql:file="scripts/002_enable_realtime.sql" isMerged="true" -- Habilitar Realtime para las tablas ALTER PUBLICATION supabase_realtime ADD TABLE messages; ALTER PUBLICATION supabase_realtime ADD TABLE active_users; -- Verificar que las tablas estén en la publicación SELECT schemaname, tablename FROM pg_publication_tables WHERE pubname = 'supabase_realtime'; [V0_FILE]typescriptreact:file="components/chat-messages.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import type { Message } from "@/lib/types" import Image from "next/image" import { Button } from "@/components/ui/button" import { FileText, Loader2, Copy, Check } from "lucide-react" import { ImageModal } from "./image-modal" import Tesseract from "tesseract.js" interface ChatMessagesProps { messages: Message[] currentUserId: string messagesEndRef: React.RefObject } function getUserColor(userId: string): string { const colors = [ "bg-blue-500", "bg-green-500", "bg-purple-500", "bg-orange-500", "bg-pink-500", "bg-teal-500", "bg-indigo-500", "bg-red-500", "bg-yellow-500", "bg-cyan-500", ] const match = userId.match(/^G(\d+)$/) const userNumber = match ? Number.parseInt(match[1]) : 1 return colors[(userNumber - 1) % colors.length] } export function ChatMessages({ messages, currentUserId, messagesEndRef }: ChatMessagesProps) { const [selectedImage, setSelectedImage] = useState(null) const [extractingText, setExtractingText] = useState(null) const [extractedTexts, setExtractedTexts] = useState>({}) const [copiedMessageId, setCopiedMessageId] = useState(null) const handleExtractText = async (messageId: string, imageUrl: string) => { setExtractingText(messageId) try { const result = await Tesseract.recognize(imageUrl, "spa+eng", { logger: (m) => console.log("[v0] OCR progress:", m), }) setExtractedTexts((prev) => ({ ...prev, [messageId]: result.data.text })) } catch (error) { console.error("[v0] Error al extraer texto:", error) setExtractedTexts((prev) => ({ ...prev, [messageId]: "Error al extraer texto de la imagen" })) } finally { setExtractingText(null) } } const handleCopyText = async (messageId: string, text: string) => { try { await navigator.clipboard.writeText(text) setCopiedMessageId(messageId) setTimeout(() => setCopiedMessageId(null), 2000) } catch (error) { console.error("[v0] Error al copiar texto:", error) } } if (messages.length === 0) { return (

No hay mensajes aún. ¡Envía el primero!

) } return ( <>

{messages.map((message) => { const date = new Date(message.timestamp) const tokyoTime = new Date(date.getTime() + 9 * 60 * 60 * 1000) const time = tokyoTime.toLocaleTimeString("es-ES", { hour: "2-digit", minute: "2-digit", timeZone: "UTC", }) let displayUserId = message.userId let avatarText = message.userId if (message.userId.startsWith("guest")) { const userNumber = message.userId.replace("guest", "") displayUserId = `G${userNumber}` avatarText = `G${userNumber}` } else if (message.userId.startsWith("G")) { const userNumber = message.userId.replace("G", "") avatarText = `G${userNumber}` displayUserId = message.userId } const userColor = getUserColor(displayUserId) return (

{avatarText}

{displayUserId} {time}

{message.image && (

setSelectedImage(message.image!)} > Imagen compartida

{extractedTexts[message.id] && (

Texto extraído:

{extractedTexts[message.id]}

)}

)} {message.content &&

{message.content}

}

) })}

{selectedImage && ( setSelectedImage(null)} imageUrl={selectedImage} /> )} ) } [V0_FILE]typescriptreact:file="components/chat-input.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, type ClipboardEvent } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Send, ImageIcon, X } from "lucide-react" import Image from "next/image" interface ChatInputProps { onSendMessage: (content: string, image?: string) => void isLoading?: boolean } export function ChatInput({ onSendMessage, isLoading }: ChatInputProps) { const [message, setMessage] = useState("") const [imagePreview, setImagePreview] = useState(null) const fileInputRef = useRef(null) const handleSend = () => { if (!message.trim() && !imagePreview) return if (isLoading) return onSendMessage(message, imagePreview || undefined) setMessage("") setImagePreview(null) } const handlePaste = (e: ClipboardEvent) => { const items = e.clipboardData?.items if (!items) return for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf("image") !== -1) { e.preventDefault() const blob = items[i].getAsFile() if (blob) { const reader = new FileReader() reader.onload = (event) => { const result = event.target?.result as string setImagePreview(result) } reader.readAsDataURL(blob) } break } } } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (event) => { setImagePreview(event.target?.result as string) } reader.readAsDataURL(file) } } const removeImage = () => { setImagePreview(null) if (fileInputRef.current) { fileInputRef.current.value = "" } } return (

{imagePreview && (

)}

setMessage(e.target.value)}
          onPaste={handlePaste}
          placeholder="Escribe un mensaje..."
          className="min-h-[44px] resize-none bg-background"
          rows={1}
          disabled={isLoading}
        />
        <Button onClick={handleSend} disabled={(!message.trim() && !imagePreview) || isLoading} className="shrink-0">
          <Send className="h-4 w-4" />
          <span className="sr-only">Enviar mensaje</span>
        </Button>
      </div>
      <p className="mt-2 text-xs text-muted-foreground">Pega imágenes directamente o usa el botón para cargarlas</p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/image-modal.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { Dialog, DialogContent } from "@/components/ui/dialog"
import Image from "next/image"
import { X, ZoomIn, ZoomOut, RotateCcw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState, useRef, useEffect } from "react"

interface ImageModalProps {
  isOpen: boolean
  onClose: () => void
  imageUrl: string
}

export function ImageModal({ isOpen, onClose, imageUrl }: ImageModalProps) {
  const [scale, setScale] = useState(1)
  const [position, setPosition] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const imageRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (isOpen) {
      setScale(1)
      setPosition({ x: 0, y: 0 })
    }
  }, [isOpen])

const handleWheel = (e: React.WheelEvent) => {
    e.preventDefault()
    const delta = e.deltaY > 0 ? -0.1 : 0.1
    setScale((prev) => Math.max(0.5, Math.min(5, prev + delta)))
  }

const handleDoubleClick = () => {
    if (scale === 1) {
      setScale(2)
    } else {
      setScale(1)
      setPosition({ x: 0, y: 0 })
    }
  }

const handleMouseDown = (e: React.MouseEvent) => {
    if (scale > 1) {
      setIsDragging(true)
      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y })
    }
  }

const handleMouseMove = (e: React.MouseEvent) => {
    if (isDragging && scale > 1) {
      setPosition({
        x: e.clientX - dragStart.x,
        y: e.clientY - dragStart.y,
      })
    }
  }

const handleMouseUp = () => {
    setIsDragging(false)
  }

const handleTouchStart = (e: React.TouchEvent) => {
    if (e.touches.length === 2) {
      const touch1 = e.touches[0]
      const touch2 = e.touches[1]
      const distance = Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY)
      ;(imageRef.current as any).initialPinchDistance = distance
      ;(imageRef.current as any).initialScale = scale
    }
  }

const handleTouchMove = (e: React.TouchEvent) => {
    if (e.touches.length === 2 && (imageRef.current as any).initialPinchDistance) {
      const touch1 = e.touches[0]
      const touch2 = e.touches[1]
      const distance = Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY)
      const scaleChange = distance / (imageRef.current as any).initialPinchDistance
      const newScale = (imageRef.current as any).initialScale * scaleChange
      setScale(Math.max(0.5, Math.min(5, newScale)))
    }
  }

const handleZoomIn = () => {
    setScale((prev) => Math.min(5, prev + 0.25))
  }

const handleZoomOut = () => {
    setScale((prev) => Math.max(0.5, prev - 0.25))
  }

const handleReset = () => {
    setScale(1)
    setPosition({ x: 0, y: 0 })
  }

return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-[95vw] max-h-[95vh] p-0 overflow-hidden border-0">
        <div className="relative w-full h-[95vh] flex items-center justify-center bg-black/95">
          <Button
            variant="ghost"
            size="icon"
            className="absolute top-4 right-4 z-20 text-white hover:bg-white/20"
            onClick={onClose}
          >
            <X className="h-6 w-6" />
          </Button>

<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2 bg-black/60 rounded-lg p-2">
            <Button
              variant="ghost"
              size="icon"
              className="text-white hover:bg-white/20"
              onClick={handleZoomOut}
              disabled={scale <= 0.5}
            >
              <ZoomOut className="h-5 w-5" />
            </Button>
            <div className="flex items-center justify-center min-w-[60px] text-white text-sm font-medium">
              {Math.round(scale * 100)}%
            </div>
            <Button
              variant="ghost"
              size="icon"
              className="text-white hover:bg-white/20"
              onClick={handleZoomIn}
              disabled={scale >= 5}
            >
              <ZoomIn className="h-5 w-5" />
            </Button>
            <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={handleReset}>
              <RotateCcw className="h-5 w-5" />
            </Button>
          </div>

<div className="absolute top-4 left-4 z-20 text-white text-xs bg-black/60 rounded-lg p-2 max-w-[200px]">
            <p>• Doble clic: Zoom 2x</p>
            <p>• Scroll: Zoom in/out</p>
            <p>• Arrastrar: Mover imagen</p>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/chat-container.tsx"
"use client"

import { useState, useEffect, useRef } from "react"
import { ChatHeader } from "./chat-header"
import { ChatMessages } from "./chat-messages"
import { ChatInput } from "./chat-input"
import { UsersList } from "./users-list"
import type { Message, User } from "@/lib/types"
import { createClient } from "@/lib/supabase"

export function ChatContainer() {
  const [messages, setMessages] = useState<Message[]>([])
  const [userId, setUserId] = useState<string>("")
  const [users, setUsers] = useState<User[]>([])
  const [showUsers, setShowUsers] = useState(true)
  const [isLoading, setIsLoading] = useState(false)
  const [supabaseReady, setSupabaseReady] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const supabaseRef = useRef<ReturnType<typeof createClient> | null>(null)

// Initialize Supabase client safely
  useEffect(() => {
    try {
      supabaseRef.current = createClient()
      setSupabaseReady(true)
    } catch (error) {
      console.error("[v0] Error al inicializar Supabase:", error)
      // Retry after 2 seconds
      const timeout = setTimeout(() => {
        try {
          supabaseRef.current = createClient()
          setSupabaseReady(true)
        } catch (retryError) {
          console.error("[v0] Reintento fallido:", retryError)
        }
      }, 2000)
      return () => clearTimeout(timeout)
    }
  }, [])

useEffect(() => {
    if (!supabaseReady || !supabaseRef.current) return

const initializeUser = async () => {
      try {
        let storedUserId = localStorage.getItem("chat-user-id")

if (storedUserId && storedUserId.startsWith("guest")) {
          localStorage.removeItem("chat-user-id")
          storedUserId = null
        }

if (!storedUserId) {
          try {
            const { data: existingUsers, error } = await supabaseRef.current
              .from("active_users")
              .select("user_id")
              .order("user_id", { ascending: true })

if (error) throw error

const userNumbers = (existingUsers || [])
              .map((u) => {
                const match = u.user_id.match(/^G(\d+)$/)
                return match ? Number.parseInt(match[1]) : 0
              })
              .filter((n) => n > 0)
              .sort((a, b) => a - b)

let newNumber = 1
            for (const num of userNumbers) {
              if (num === newNumber) {
                newNumber++
              } else {
                break
              }
            }

storedUserId = `G${newNumber}`
            localStorage.setItem("chat-user-id", storedUserId)
          } catch (error) {
            console.error("[v0] Error al obtener usuarios, generando ID temporal:", error)
            // Generate a temporary user ID if database is unreachable
            storedUserId = `G${Math.floor(Math.random() * 10000)}`
          }
        } else {
          setUserId(storedUserId)
        }

if (!userId) {
          setUserId(storedUserId)
        }

try {
          const { error: upsertError } = await supabaseRef.current.from("active_users").upsert(
            {
              user_id: storedUserId,
              last_active: new Date().toISOString(),
            },
            {
              onConflict: "user_id",
            },
          )

if (upsertError) {
            console.error("[v0] Error al registrar usuario:", upsertError)
          }
        } catch (error) {
          console.error("[v0] Error al registrar usuario en Supabase:", error)
        }
      } catch (error) {
        console.error("[v0] Error en inicialización de usuario:", error)
      }
    }

initializeUser()
  }, [supabaseReady])

useEffect(() => {
    if (!userId || !supabaseRef.current) return

const supabase = supabaseRef.current
    const loadInitialData = async () => {
      try {
        const { data: messagesData, error: messagesError } = await supabase
          .from("messages")
          .select("*")
          .order("created_at", { ascending: true })

if (messagesError) {
          console.error("[v0] Error al cargar mensajes:", messagesError)
          return
        }

if (messagesData) {
          setMessages(
            messagesData.map((msg) => ({
              id: msg.id,
              userId: msg.user_id,
              content: msg.content || "",
              image: msg.image_url || undefined,
              timestamp: msg.created_at,
            })),
          )
        }

await loadActiveUsers()
      } catch (error) {
        console.error("[v0] Error en carga inicial:", error)
      }
    }

loadInitialData()

let messagesChannel: ReturnType<typeof supabase.channel> | null = null
    let usersChannel: ReturnType<typeof supabase.channel> | null = null

const setupChannels = async () => {
      try {
        messagesChannel = supabase
          .channel("public:messages", {
            config: {
              broadcast: { self: true },
            },
          })
          .on(
            "postgres_changes",
            {
              event: "INSERT",
              schema: "public",
              table: "messages",
            },
            (payload) => {
              const newMessage: Message = {
                id: payload.new.id,
                userId: payload.new.user_id,
                content: payload.new.content || "",
                image: payload.new.image_url || undefined,
                timestamp: payload.new.created_at,
              }
              setMessages((prev) => {
                if (prev.some((m) => m.id === newMessage.id)) {
                  return prev
                }
                return [...prev, newMessage]
              })
            },
          )
          .subscribe()

usersChannel = supabase
          .channel("public:active_users")
          .on(
            "postgres_changes",
            {
              event: "*",
              schema: "public",
              table: "active_users",
            },
            () => {
              loadActiveUsers()
            },
          )
          .subscribe()
      } catch (error) {
        console.error("[v0] Error al configurar canales:", error)
      }
    }

setupChannels()

const activityInterval = setInterval(async () => {
      try {
        await supabase.from("active_users").upsert(
          {
            user_id: userId,
            last_active: new Date().toISOString(),
          },
          {
            onConflict: "user_id",
          },
        )
      } catch (error) {
        console.error("[v0] Error al actualizar actividad:", error)
      }
    }, 30000)

const handleBeforeUnload = async () => {
      try {
        await supabase.from("active_users").delete().eq("user_id", userId)
        localStorage.removeItem("chat-user-id")
      } catch (error) {
        console.error("[v0] Error en desconexión:", error)
      }
    }

window.addEventListener("beforeunload", handleBeforeUnload)

return () => {
      if (messagesChannel) {
        supabaseRef.current?.removeChannel(messagesChannel)
      }
      if (usersChannel) {
        supabaseRef.current?.removeChannel(usersChannel)
      }
      clearInterval(activityInterval)
      window.removeEventListener("beforeunload", handleBeforeUnload)
      supabaseRef.current?.from("active_users").delete().eq("user_id", userId)
    }
  }, [userId])

const loadActiveUsers = async () => {
    try {
      const { data, error } = await supabaseRef.current?.from("active_users").select("*").order("user_id", { ascending: true })

if (error) {
        console.error("[v0] Error al cargar usuarios activos:", error)
        return
      }

if (data) {
        setUsers(
          data.map((u) => ({
            id: u.user_id,
            lastActive: u.last_active,
          })),
        )
      }
    } catch (error) {
      console.error("[v0] Error en carga de usuarios:", error)
    }
  }

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleSendMessage = async (content: string, image?: string) => {
    setIsLoading(true)

const { error } = await supabaseRef.current?.from("messages").insert({
      user_id: userId,
      content: content || null,
      image_url: image || null,
      created_at: new Date().toISOString(),
    })

if (error) {
      console.error("[v0] Error al enviar mensaje:", error)
    }

setIsLoading(false)
  }

const handleClearChat = async () => {
    const { error } = await supabaseRef.current?.from("messages").delete().neq("id", "00000000-0000-0000-0000-000000000000")

if (error) {
      console.error("[v0] Error al limpiar chat:", error)
    } else {
      setMessages([])
    }
  }

const handleExportPDF = async () => {
    const { jsPDF } = await import("jspdf")
    const doc = new jsPDF()

doc.setFontSize(18)
    doc.text("Historial de Chat", 20, 20)

doc.setFontSize(10)
    let yPosition = 35
    const pageHeight = doc.internal.pageSize.height
    const pageWidth = doc.internal.pageSize.width
    const margin = 20
    const maxWidth = pageWidth - 2 * margin

for (const message of messages) {
      const date = new Date(message.timestamp)
      const tokyoTime = new Date(date.getTime() + 9 * 60 * 60 * 1000)
      const timeString = tokyoTime.toLocaleTimeString("es-ES", {
        hour: "2-digit",
        minute: "2-digit",
        timeZone: "UTC",
      })

const dateString = tokyoTime.toLocaleDateString("es-ES", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
        timeZone: "UTC",
      })

if (yPosition > pageHeight - margin) {
        doc.addPage()
        yPosition = 20
      }

doc.setFont("helvetica", "bold")
      doc.text(`${message.userId} - ${dateString} ${timeString}`, 20, yPosition)
      yPosition += 6

doc.setFont("helvetica", "normal")
      if (message.content) {
        const lines = doc.splitTextToSize(message.content, maxWidth)
        doc.text(lines, 20, yPosition)
        yPosition += lines.length * 5
      }

if (message.image) {
        try {
          const imgHeight = 60
          if (yPosition + imgHeight > pageHeight - margin) {
            doc.addPage()
            yPosition = 20
          }

doc.addImage(message.image, "JPEG", 20, yPosition, 80, imgHeight, undefined, "FAST")
          yPosition += imgHeight + 5
        } catch (error) {
          console.error("[v0] Error al agregar imagen al PDF:", error)
          doc.setFontSize(8)
          doc.text("[Error al cargar imagen]", 20, yPosition)
          yPosition += 5
          doc.setFontSize(10)
        }
      }

yPosition += 5
    }

doc.save("chat-historial.pdf")
  }

return (
    <div className="flex h-full flex-col bg-background md:flex-row">
      <UsersList users={users} currentUserId={userId} isVisible={showUsers} onToggle={() => setShowUsers(!showUsers)} />