[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 84% 4.9%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 94.1%; --radius: 0.75rem; } } @layer utilities { .animate-spin-slow { animation: spin 30s linear infinite; } .animate-gradient { background-size: 200% 200%; animation: gradient 5s ease infinite; } .animate-fade-in { animation: fadeIn 0.5s ease-out; } .bg-gradient-radial { background: radial-gradient(circle, var(--tw-gradient-stops)); } .scrollbar-thin { scrollbar-width: thin; } .scrollbar-thumb-purple-500\/50 { scrollbar-color: rgb(168 85 247 / 0.5) transparent; } .scrollbar-track-transparent { scrollbar-track-color: transparent; } } @keyframes gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Custom scrollbar for webkit browsers */ .scrollbar-thin::-webkit-scrollbar { width: 8px; } .scrollbar-thin::-webkit-scrollbar-track { background: transparent; } .scrollbar-thin::-webkit-scrollbar-thumb { background: rgb(168 85 247 / 0.5); border-radius: 4px; } .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgb(168 85 247 / 0.7); } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, animation: { "spin-slow": "spin 30s linear infinite", gradient: "gradient 5s ease infinite", "fade-in": "fadeIn 0.5s ease-out", }, keyframes: { gradient: { "0%, 100%": { "background-position": "0% 50%" }, "50%": { "background-position": "100% 50%" }, }, fadeIn: { from: { opacity: "0", transform: "translateY(20px) scale(0.95)" }, to: { opacity: "1", transform: "translateY(0) scale(1)" }, }, }, backgroundImage: { "gradient-radial": "radial-gradient(circle, var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]png:file="public/images/openai-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/OpenAI-white-monoblossom-XjmMTXe6KnybFImXiFRMp3v4NuGYAI.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "GPT-4o Chat - AI-Powered Conversations", description: "Experience advanced AI conversations with GPT-4o, OpenAI's most sophisticated multimodal model.", keywords: ["AI", "Chat", "GPT-4o", "OpenAI", "Conversation", "Assistant"], authors: [{ name: "GPT-4o Chat Team" }], viewport: "width=device-width, initial-scale=1", icons: { icon: "/images/openai-logo.png", shortcut: "/images/openai-logo.png", apple: "/images/openai-logo.png", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useEffect } from "react" import { Send } from "lucide-react" import Image from "next/image" declare global { interface Window { puter: any } } export default function ChatPage() { useEffect(() => { // Load Puter.js script const script = document.createElement("script") script.src = "https://js.puter.com/v2/" script.async = true document.head.appendChild(script) script.onload = () => { // Initialize the original chat functionality once Puter.js is loaded initializeChat() } return () => { document.head.removeChild(script) } }, []) const initializeChat = () => { const messagesContainer = document.getElementById("chatMessages") const input = document.getElementById("userInput") as HTMLInputElement const sendButton = document.getElementById("sendButton") const imageInput = document.getElementById("imageInput") as HTMLInputElement const imageButton = document.getElementById("imageButton") const imagePreview = document.getElementById("imagePreview") const removeImageButton = document.getElementById("removeImage") const conversation: Array<{ role: string; content: string }> = [] let selectedImageDataURL: string | null = null let selectedImageFile: File | null = null setTimeout(() => { appendMessage("Hello! I'm GPT-4o, an advanced AI assistant. How can I help you today?", false) }, 500) function handleImageSelect(event: Event) { const target = event.target as HTMLInputElement const file = target.files?.[0] if (file && file.type.startsWith("image/")) { selectedImageFile = file // Convert file to data URL for Puter.js const reader = new FileReader() reader.onload = (e) => { selectedImageDataURL = e.target?.result as string if (imagePreview) { const img = imagePreview.querySelector("img") as HTMLImageElement img.src = selectedImageDataURL imagePreview.classList.remove("hidden") } } reader.readAsDataURL(file) } } function removeImage() { selectedImageDataURL = null selectedImageFile = null if (imagePreview) { imagePreview.classList.add("hidden") } if (imageInput) { imageInput.value = "" } } function appendMessage(content: string, isUser = false, className = "", imageUrl?: string) { if (!messagesContainer) return // Create message wrapper const messageWrapper = document.createElement("div") messageWrapper.classList.add("message-wrapper") messageWrapper.classList.add(isUser ? "justify-end" : "justify-start") // Add AI logo for bot messages if (!isUser) { const logoDiv = document.createElement("div") logoDiv.classList.add("ai-logo") const logoImg = document.createElement("img") logoImg.src = "/images/openai-logo.png" logoImg.alt = "AI Logo" logoImg.width = 36 logoImg.height = 36 logoImg.classList.add("ai-logo-img") logoDiv.appendChild(logoImg) messageWrapper.appendChild(logoDiv) } // Create message bubble const msg = document.createElement("div") msg.classList.add("message") msg.classList.add(isUser ? "user" : "bot") if (className) msg.classList.add(className) // Add image if provided if (imageUrl) { const imageContainer = document.createElement("div") imageContainer.classList.add("message-image") const img = document.createElement("img") img.src = imageUrl img.alt = "Uploaded image" img.classList.add("message-image-content") imageContainer.appendChild(img) msg.appendChild(imageContainer) } // Add text content if provided if (content) { const textContent = document.createElement("div") textContent.innerHTML = content .replace(/\*\*(.*?)\*\*/g, "$1") .replace(/\*(.*?)\*/g, "$1") .replace(/`(.*?)`/g, '$1') .replace(/\n/g, "
") msg.appendChild(textContent) } messageWrapper.appendChild(msg) messagesContainer.appendChild(messageWrapper) messagesContainer.scrollTop = messagesContainer.scrollHeight return msg } function showTypingIndicator() { if (!messagesContainer) return // Create wrapper for typing indicator const typingWrapper = document.createElement("div") typingWrapper.classList.add("message-wrapper", "justify-start") // Add AI logo const logoDiv = document.createElement("div") logoDiv.classList.add("ai-logo") const logoImg = document.createElement("img") logoImg.src = "/images/openai-logo.png" logoImg.alt = "AI Logo" logoImg.width = 36 logoImg.height = 36 logoImg.classList.add("ai-logo-img") logoDiv.appendChild(logoImg) typingWrapper.appendChild(logoDiv) // Create typing indicator const typing = document.createElement("div") typing.classList.add("typing") typing.id = "typingIndicator" for (let i = 0; i < 3; i++) { const dot = document.createElement("div") dot.classList.add("typing-dot") typing.appendChild(dot) } typingWrapper.appendChild(typing) messagesContainer.appendChild(typingWrapper) messagesContainer.scrollTop = messagesContainer.scrollHeight } function removeTypingIndicator() { const typing = document.getElementById("typingIndicator") if (typing) { const wrapper = typing.closest(".message-wrapper") if (wrapper) { wrapper.remove() } else { typing.remove() } } } async function sendMessage() { if (!input) return const prompt = input.value.trim() if (!prompt && !selectedImageDataURL) return // Display user message with image if present if (selectedImageDataURL) { appendMessage(prompt || "What's in this image?", true, "", selectedImageDataURL) } else { appendMessage(prompt, true) } // Add user message to conversation history conversation.push({ role: "user", content: prompt || "What's in this image?", }) input.value = "" showTypingIndicator() try { let response if (selectedImageDataURL) { // For images, we need to use the direct format but we lose conversation context // This is a limitation of how Puter.js handles images vs conversation arrays console.log("Sending image with data URL") response = await window.puter.ai.chat(prompt || "What's in this image?", selectedImageDataURL, { model: "gpt-4o", stream: true, }) } else { // For text-only, use conversation array to maintain context response = await window.puter.ai.chat(conversation, false, { model: "gpt-4o", stream: true, }) } removeTypingIndicator() const botMessage = appendMessage("", false) let responseText = "" for await (const part of response) { const chunk = part?.text || "" responseText += chunk if (botMessage) { botMessage.innerHTML += chunk.replace(/\n/g, "
") } if (messagesContainer) { messagesContainer.scrollTop = messagesContainer.scrollHeight } } // Add assistant response to conversation history conversation.push({ role: "assistant", content: responseText }) // Clear image after sending if (selectedImageDataURL) { removeImage() } } catch (err: any) { removeTypingIndicator() console.error("Error details:", err) appendMessage("⚠️ Error: " + (err.message || "Something went wrong."), false) // Clear image on error too if (selectedImageDataURL) { removeImage() } } } if (imageButton) { imageButton.addEventListener("click", () => { imageInput?.click() }) } if (imageInput) { imageInput.addEventListener("change", handleImageSelect) } if (removeImageButton) { removeImageButton.addEventListener("click", removeImage) } if (sendButton) { sendButton.addEventListener("click", sendMessage) } if (input) { input.addEventListener("keypress", (e) => { if (e.key === "Enter") sendMessage() }) input.focus() } } return (

{/* Animated background */}

{/* Header */}

GPT-4o Chat

{/* Main Content */}

Experience AI-powered conversations

GPT-4o is OpenAI's most advanced multimodal model, capable of understanding and generating text with remarkable human-like quality.

{/* Chat Container */}

{/* Chat Header */}

GPT-4o Assistant

{/* Messages Container */}

{/* Input Container */}

{/* Image Preview */}

{/* Hidden file input */} {/* Image upload button */}

{/* Footer */} {/* Custom Styles for Messages */}

) }