[V0_FILE]plaintext:file="MULTI" isQuickEdit="true" isMerged="true" /\`\`\` // app/api/ai/generate/route.ts export const dynamic = 'force-dynamic' import { generateText } from 'ai' import { openai } from '@ai-sdk/openai' import { NextRequest, NextResponse } from 'next/server' export async function POST(request: NextRequest) { try { const { prompt } = await request.json() if (!process.env.OPENAI_API_KEY) { return NextResponse.json( { error: 'missing_api_key', message: 'OPENAI_API_KEY is not set. Add it in your project environment variables.', }, { status: 400 } ) } const { text } = await generateText({ model: openai('gpt-4o', { apiKey: process.env.OPENAI_API_KEY }), prompt: `You are a helpful writing assistant. Generate content based on this prompt: ${prompt}. Keep the response concise and well-formatted.`, }) return NextResponse.json({ text }) } catch (err: any) { const message = typeof err?.message === 'string' ? err.message : 'Unknown error' // OpenAI returns 401 for invalid keys; AI SDK surfaces it as an error with message content. const isInvalidKey = /incorrect api key|invalid api key|401/i.test(message) return NextResponse.json( { error: isInvalidKey ? 'invalid_api_key' : 'generation_failed', message: isInvalidKey ? 'Invalid OpenAI API key. Double-check OPENAI_API_KEY in your environment.' : `Failed to generate content: ${message}`, }, { status: isInvalidKey ? 401 : 500 } ) } } // app/api/ai/improve/route.ts export const dynamic = 'force-dynamic' import { generateText } from 'ai' import { openai } from '@ai-sdk/openai' import { NextRequest, NextResponse } from 'next/server' export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!process.env.OPENAI_API_KEY) { return NextResponse.json( { error: 'missing_api_key', message: 'OPENAI_API_KEY is not set. Add it in your project environment variables.' }, { status: 400 } ) } const { text: suggestions } = await generateText({ model: openai('gpt-4o', { apiKey: process.env.OPENAI_API_KEY }), prompt: `Improve the following text by making it clearer, more engaging, and better structured. Provide 3 different improved versions: Original text: "${text}" Please provide 3 improved versions, each on a new line.`, }) const suggestionsList = suggestions.split('\n').filter((s) => s.trim()).slice(0, 3) return NextResponse.json({ suggestions: suggestionsList }) } catch (err: any) { const message = typeof err?.message === 'string' ? err.message : 'Unknown error' const isInvalidKey = /incorrect api key|invalid api key|401/i.test(message) return NextResponse.json( { error: isInvalidKey ? 'invalid_api_key' : 'improve_failed', message: isInvalidKey ? 'Invalid OpenAI API key. Double-check OPENAI_API_KEY in your environment.' : `Failed to improve text: ${message}`, }, { status: isInvalidKey ? 401 : 500 } ) } } // app/api/ai/grammar/route.ts export const dynamic = 'force-dynamic' import { generateText } from 'ai' import { openai } from '@ai-sdk/openai' import { NextRequest, NextResponse } from 'next/server' export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!process.env.OPENAI_API_KEY) { return NextResponse.json( { error: 'missing_api_key', message: 'OPENAI_API_KEY is not set. Add it in your project environment variables.' }, { status: 400 } ) } const { text: corrections } = await generateText({ model: openai('gpt-4o', { apiKey: process.env.OPENAI_API_KEY }), prompt: `Check the following text for grammar, spelling, and style issues. Provide specific corrections and suggestions: Text to check: "${text}" Please provide: 1. Corrected version of the text 2. List of specific issues found 3. Style suggestions for improvement Format your response clearly with each correction on a new line.`, }) const correctionsList = corrections.split('\n').filter((s) => s.trim()).slice(0, 5) return NextResponse.json({ corrections: correctionsList }) } catch (err: any) { const message = typeof err?.message === 'string' ? err.message : 'Unknown error' const isInvalidKey = /incorrect api key|invalid api key|401/i.test(message) return NextResponse.json( { error: isInvalidKey ? 'invalid_api_key' : 'grammar_failed', message: isInvalidKey ? 'Invalid OpenAI API key. Double-check OPENAI_API_KEY in your environment.' : `Failed to check grammar: ${message}`, }, { status: isInvalidKey ? 401 : 500 } ) } } // app/api/ai/summarize/route.ts export const dynamic = 'force-dynamic' import { generateText } from 'ai' import { openai } from '@ai-sdk/openai' import { NextRequest, NextResponse } from 'next/server' export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!process.env.OPENAI_API_KEY) { return NextResponse.json( { error: 'missing_api_key', message: 'OPENAI_API_KEY is not set. Add it in your project environment variables.' }, { status: 400 } ) } const { text: summary } = await generateText({ model: openai('gpt-4o', { apiKey: process.env.OPENAI_API_KEY }), prompt: `Summarize the following document in a clear and concise manner. Capture the main points and key information: Document: "${text}" Provide a well-structured summary that highlights the most important points.`, }) return NextResponse.json({ summary }) } catch (err: any) { const message = typeof err?.message === 'string' ? err.message : 'Unknown error' const isInvalidKey = /incorrect api key|invalid api key|401/i.test(message) return NextResponse.json( { error: isInvalidKey ? 'invalid_api_key' : 'summarize_failed', message: isInvalidKey ? 'Invalid OpenAI API key. Double-check OPENAI_API_KEY in your environment.' : `Failed to summarize: ${message}`, }, { status: isInvalidKey ? 401 : 500 } ) } } // app/api/ai/translate/route.ts export const dynamic = 'force-dynamic' import { generateText } from 'ai' import { openai } from '@ai-sdk/openai' import { NextRequest, NextResponse } from 'next/server' export async function POST(request: NextRequest) { try { const { text, targetLanguage } = await request.json() if (!process.env.OPENAI_API_KEY) { return NextResponse.json( { error: 'missing_api_key', message: 'OPENAI_API_KEY is not set. Add it in your project environment variables.' }, { status: 400 } ) } const { text: translation } = await generateText({ model: openai('gpt-4o', { apiKey: process.env.OPENAI_API_KEY }), prompt: `Translate the following text to ${targetLanguage}. Maintain the original formatting and tone: Text to translate: "${text}" Provide only the translation without any additional commentary.`, }) return NextResponse.json({ translation }) } catch (err: any) { const message = typeof err?.message === 'string' ? err.message : 'Unknown error' const isInvalidKey = /incorrect api key|invalid api key|401/i.test(message) return NextResponse.json( { error: isInvalidKey ? 'invalid_api_key' : 'translate_failed', message: isInvalidKey ? 'Invalid OpenAI API key. Double-check OPENAI_API_KEY in your environment.' : `Failed to translate: ${message}`, }, { status: isInvalidKey ? 401 : 500 } ) } } // app/page.tsx import { useToast } from '@/hooks/use-toast' // ... other imports and component setup ... // Inside your component: // const { toast } = useToast() // Initialize in component // Replace the generateAIContent, improveText, checkGrammar, summarizeDocument, translateText functions with: const generateAIContent = async (prompt: string) => { setIsGeneratingAI(true) try { const res = await fetch('/api/ai/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }), }) const data = await res.json() if (!res.ok) { toast({ title: 'AI unavailable', description: data?.message || 'Configure OPENAI_API_KEY in your environment to enable AI.', variant: 'destructive', }) return } if (data.text) document.execCommand('insertHTML', false, data.text) } catch (e: any) { toast({ title: 'AI error', description: e?.message || 'Something went wrong.', variant: 'destructive', }) } finally { setIsGeneratingAI(false) } } const improveText = async () => { if (!selectedText) return setIsGeneratingAI(true) try { const res = await fetch('/api/ai/improve', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: selectedText }), }) const data = await res.json() if (!res.ok) { toast({ title: 'AI unavailable', description: data?.message || 'Configure OPENAI_API_KEY in your environment to enable AI.', variant: 'destructive', }) return } if (data.suggestions) { setAiSuggestions(data.suggestions) setShowAiPanel(true) } } catch (e: any) { toast({ title: 'AI error', description: e?.message || 'Something went wrong.', variant: 'destructive', }) } finally { setIsGeneratingAI(false) } } const checkGrammar = async () => { const text = pagesRootRef.current?.innerText ?? '' if (!text) return setIsGeneratingAI(true) try { const res = await fetch('/api/ai/grammar', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }), }) const data = await res.json() if (!res.ok) { toast({ title: 'AI unavailable', description: data?.message || 'Configure OPENAI_API_KEY in your environment to enable AI.', variant: 'destructive', }) return } if (data.corrections) { setAiSuggestions(data.corrections) setShowAiPanel(true) } } catch (e: any) { toast({ title: 'AI error', description: e?.message || 'Something went wrong.', variant: 'destructive', }) } finally { setIsGeneratingAI(false) } } const summarizeDocument = async () => { const text = pagesRootRef.current?.innerText ?? '' if (!text) return setIsGeneratingAI(true) try { const res = await fetch('/api/ai/summarize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text }), }) const data = await res.json() if (!res.ok) { toast({ title: 'AI unavailable', description: data?.message || 'Configure OPENAI_API_KEY in your environment to enable AI.', variant: 'destructive', }) return } if (data.summary) { setAiSuggestions([data.summary]) setShowAiPanel(true) } } catch (e: any) { toast({ title: 'AI error', description: e?.message || 'Something went wrong.', variant: 'destructive', }) } finally { setIsGeneratingAI(false) } } const translateText = async (text: string, targetLanguage: string) => { setIsGeneratingAI(true) try { const res = await fetch('/api/ai/translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, targetLanguage }), }) const data = await res.json() if (!res.ok) { toast({ title: 'AI unavailable', description: data?.message || 'Configure OPENAI_API_KEY in your environment to enable AI.', variant: 'destructive', }) return } if (data.translation) { setAiSuggestions([data.translation]) setShowAiPanel(true) } } catch (e: any) { toast({ title: 'AI error', description: e?.message || 'Something went wrong.', variant: 'destructive', }) } finally { setIsGeneratingAI(false) } } // Delete the file .env.local if present. \`\`\` [V0_FILE]plaintext:file="requirements.txt" url="https://blobs.vusercontent.net/blob/pasted-text-WNPB9LbgPrK2lae5rYe86E0v5P4EB6.txt" isMerged="true" [V0_FILE]typescriptreact:file="components/image-resizer.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Settings, Lock, Unlock } from "lucide-react" type ImageResizerProps = { imageElement: HTMLImageElement onResize: (width: number, height: number) => void } export function ImageResizer({ imageElement, onResize }: ImageResizerProps) { const [width, setWidth] = useState(imageElement.width || 300) const [height, setHeight] = useState(imageElement.height || 200) const [aspectRatioLocked, setAspectRatioLocked] = useState(true) const [originalAspectRatio, setOriginalAspectRatio] = useState(1) useEffect(() => { if (imageElement.naturalWidth && imageElement.naturalHeight) { const ratio = imageElement.naturalWidth / imageElement.naturalHeight setOriginalAspectRatio(ratio) setWidth(imageElement.width || imageElement.naturalWidth) setHeight(imageElement.height || imageElement.naturalHeight) } }, [imageElement]) const handleWidthChange = (newWidth: number) => { setWidth(newWidth) if (aspectRatioLocked) { setHeight(Math.round(newWidth / originalAspectRatio)) } } const handleHeightChange = (newHeight: number) => { setHeight(newHeight) if (aspectRatioLocked) { setWidth(Math.round(newHeight * originalAspectRatio)) } } const applyResize = () => { onResize(width, height) } const resetToOriginal = () => { if (imageElement.naturalWidth && imageElement.naturalHeight) { setWidth(imageElement.naturalWidth) setHeight(imageElement.naturalHeight) onResize(imageElement.naturalWidth, imageElement.naturalHeight) } } return (

Resize Image

Width (px) handleWidthChange(Number(e.target.value))} min="10" max="2000" />

Height (px) handleHeightChange(Number(e.target.value))} min="10" max="2000" />

) } [V0_FILE]typescriptreact:file="components/draggable-image.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { ImageResizer } from "./image-resizer" import { Button } from "@/components/ui/button" import { Edit, Trash2, Copy } from "lucide-react" type DraggableImageProps = { src: string alt: string initialWidth?: number initialHeight?: number onEdit: () => void onDelete: () => void onDuplicate: () => void } export function DraggableImage({ src, alt, initialWidth = 300, initialHeight = 200, onEdit, onDelete, onDuplicate, }: DraggableImageProps) { const [isDragging, setIsDragging] = useState(false) const [isSelected, setIsSelected] = useState(false) const [position, setPosition] = useState({ x: 0, y: 0 }) const [size, setSize] = useState({ width: initialWidth, height: initialHeight }) const [isResizing, setIsResizing] = useState(false) const imageRef = useRef(null) const containerRef = useRef(null) const handleMouseDown = (e: React.MouseEvent) => { if (e.target === imageRef.current) { setIsDragging(true) setIsSelected(true) const rect = containerRef.current?.getBoundingClientRect() if (rect) { setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } } } const handleMouseMove = (e: React.MouseEvent) => { if (isDragging && !isResizing) { const rect = containerRef.current?.getBoundingClientRect() if (rect) { setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } } } const handleMouseUp = () => { setIsDragging(false) } const handleResize = (width: number, height: number) => { setSize({ width, height }) if (imageRef.current) { imageRef.current.style.width = `${width}px` imageRef.current.style.height = `${height}px` } } const handleClickOutside = (e: MouseEvent) => { if (containerRef.current && !containerRef.current.contains(e.target as Node)) { setIsSelected(false) } } useEffect(() => { document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, []) return (

{isSelected && ( <> {/* Resize handles */}

{/* Action buttons */}

)}

) } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescriptreact:file="components/interactive-image.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Edit, Trash2, Copy, Move } from "lucide-react" import { useToast } from "@/hooks/use-toast" type InteractiveImageProps = { src: string alt: string initialWidth?: number initialHeight?: number imageId: string onEdit: (imageId: string, src: string) => void onDelete: (imageId: string) => void onDuplicate: (imageId: string, src: string) => void } export function InteractiveImage({ src, alt, initialWidth = 300, initialHeight = 200, imageId, onEdit, onDelete, onDuplicate, }: InteractiveImageProps) { const { toast } = useToast() const [isSelected, setIsSelected] = useState(false) const [isDragging, setIsDragging] = useState(false) const [isResizing, setIsResizing] = useState(false) const [resizeHandle, setResizeHandle] = useState(null) const [dimensions, setDimensions] = useState({ width: initialWidth, height: initialHeight }) const [position, setPosition] = useState({ x: 0, y: 0 }) const [dragStart, setDragStart] = useState({ x: 0, y: 0, imageX: 0, imageY: 0 }) const [aspectRatio, setAspectRatio] = useState(initialWidth / initialHeight) const imageRef = useRef(null) const containerRef = useRef(null) useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (containerRef.current && !containerRef.current.contains(e.target as Node)) { setIsSelected(false) } } const handleKeyDown = (e: KeyboardEvent) => { if (isSelected && e.key === "Delete") { onDelete(imageId) } } document.addEventListener("mousedown", handleClickOutside) document.addEventListener("keydown", handleKeyDown) return () => { document.removeEventListener("mousedown", handleClickOutside) document.removeEventListener("keydown", handleKeyDown) } }, [isSelected, imageId, onDelete]) const handleImageClick = (e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setIsSelected(true) } const handleMouseDown = (e: React.MouseEvent, handle?: string) => { e.preventDefault() e.stopPropagation() if (handle) { // Resizing setIsResizing(true) setResizeHandle(handle) } else { // Dragging setIsDragging(true) setDragStart({ x: e.clientX, y: e.clientY, imageX: position.x, imageY: position.y, }) } } const handleMouseMove = (e: React.MouseEvent) => { if (isDragging) { const deltaX = e.clientX - dragStart.x const deltaY = e.clientY - dragStart.y setPosition({ x: dragStart.imageX + deltaX, y: dragStart.imageY + deltaY, }) } else if (isResizing && resizeHandle) { const rect = containerRef.current?.getBoundingClientRect() if (!rect) return const mouseX = e.clientX - rect.left const mouseY = e.clientY - rect.top let newWidth = dimensions.width let newHeight = dimensions.height switch (resizeHandle) { case "se": // Southeast newWidth = Math.max(50, mouseX) newHeight = Math.max(50, mouseY) break case "sw": // Southwest newWidth = Math.max(50, dimensions.width - mouseX) newHeight = Math.max(50, mouseY) break case "ne": // Northeast newWidth = Math.max(50, mouseX) newHeight = Math.max(50, dimensions.height - mouseY) break case "nw": // Northwest newWidth = Math.max(50, dimensions.width - mouseX) newHeight = Math.max(50, dimensions.height - mouseY) break } // Maintain aspect ratio if (e.shiftKey) { if (resizeHandle === "se" || resizeHandle === "nw") { newHeight = newWidth / aspectRatio } else { newWidth = newHeight * aspectRatio } } setDimensions({ width: newWidth, height: newHeight }) } } const handleMouseUp = () => { setIsDragging(false) setIsResizing(false) setResizeHandle(null) } const handleDoubleClick = () => { onEdit(imageId, src) } return (

handleMouseDown(e)} onDoubleClick={handleDoubleClick} draggable={false} /> {isSelected && ( <> {/* Resize handles */}

handleMouseDown(e, "nw")} />

handleMouseDown(e, "ne")} />

handleMouseDown(e, "sw")} />

handleMouseDown(e, "se")} /> {/* Action toolbar */}

{/* Dimension indicator */}

{Math.round(dimensions.width)} × {Math.round(dimensions.height)}

{/* Move indicator */} {isDragging && (

)} )}

) } [V0_FILE]png:file="public/dopadly-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/docpadly.jpg-ukQIlR4s28AhS3D6PXfSvpxIbTjGMW.jpeg" isMerged="true" [V0_FILE]png:file="public/docpadly-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/docpadly-gi2QA7zDKzkmhrIqWvtFCyw282mjfM.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Docpadly - AI-Powered Document Editor", description: "Create, edit, and collaborate on documents with AI assistance. Professional document editing with real-time collaboration and smart writing tools.", keywords: ["document editor", "google docs", "AI writing", "collaboration", "word processor"], authors: [{ name: "Docpadly Team" }], creator: "Docpadly", publisher: "Docpadly", formatDetection: { email: false, address: false, telephone: false, }, metadataBase: new URL("https://docpadly.vercel.app"), openGraph: { title: "Docpadly - AI-Powered Document Editor", description: "Create, edit, and collaborate on documents with AI assistance. Professional document editing with real-time collaboration and smart writing tools.", url: "https://docpadly.vercel.app", siteName: "Docpadly", images: [ { url: "/og-image.png", width: 1200, height: 630, alt: "Docpadly - AI-Powered Document Editor", }, ], locale: "en_US", type: "website", }, twitter: { card: "summary_large_image", title: "Docpadly - AI-Powered Document Editor", description: "Create, edit, and collaborate on documents with AI assistance. Professional document editing with real-time collaboration and smart writing tools.", images: ["/og-image.png"], creator: "@docpadly", }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, verification: { google: "your-google-verification-code", }, } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/image-editor.tsx" isEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { RotateCw, RotateCcw, Download, X } from "lucide-react" interface ImageEditorProps { isOpen: boolean onClose: () => void onSave: (editedImageUrl: string) => void imageUrl: string imageName: string } export function ImageEditor({ isOpen, onClose, onSave, imageUrl, imageName }: ImageEditorProps) { const canvasRef = useRef(null) const [brightness, setBrightness] = useState([100]) const [contrast, setContrast] = useState([100]) const [saturation, setSaturation] = useState([100]) const [rotation, setRotation] = useState(0) const [filter, setFilter] = useState("none") const [originalImage, setOriginalImage] = useState(null) useEffect(() => { if (isOpen && imageUrl) { const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { setOriginalImage(img) drawImage(img) } img.src = imageUrl } }, [isOpen, imageUrl]) useEffect(() => { if (originalImage) { drawImage(originalImage) } }, [brightness, contrast, saturation, rotation, filter, originalImage]) const drawImage = (img: HTMLImageElement) => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas size canvas.width = img.width canvas.height = img.height // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height) // Save context state ctx.save() // Apply rotation if (rotation !== 0) { ctx.translate(canvas.width / 2, canvas.height / 2) ctx.rotate((rotation * Math.PI) / 180) ctx.translate(-canvas.width / 2, -canvas.height / 2) } // Apply filters const filterString = ` brightness(${brightness[0]}%) contrast(${contrast[0]}%) saturate(${saturation[0]}%) ${getFilterString()} `.trim() ctx.filter = filterString // Draw image ctx.drawImage(img, 0, 0) // Restore context state ctx.restore() } const getFilterString = () => { switch (filter) { case "grayscale": return "grayscale(100%)" case "sepia": return "sepia(100%)" case "blur": return "blur(2px)" case "invert": return "invert(100%)" default: return "" } } const handleRotate = (degrees: number) => { setRotation((prev) => (prev + degrees) % 360) } const handleSave = () => { const canvas = canvasRef.current if (!canvas) return canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) onSave(url) handleClose() } }, "image/png") } const handleClose = () => { // Reset all values setBrightness([100]) setContrast([100]) setSaturation([100]) setRotation(0) setFilter("none") setOriginalImage(null) onClose() } const handleDownload = () => { const canvas = canvasRef.current if (!canvas) return const link = document.createElement("a") link.download = `edited-${imageName}` link.href = canvas.toDataURL() link.click() } return ( ) } [V0_FILE]sql:file="scripts/create-documents-table.sql" isEdit="true" isMerged="true" -- Create documents table for Docpadly CREATE TABLE IF NOT EXISTS public.documents ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, title TEXT NOT NULL DEFAULT 'Untitled Document', content TEXT DEFAULT '', created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL, updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL, user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL, is_public BOOLEAN DEFAULT false, word_count INTEGER DEFAULT 0, character_count INTEGER DEFAULT 0 ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS documents_user_id_idx ON public.documents(user_id); CREATE INDEX IF NOT EXISTS documents_created_at_idx ON public.documents(created_at); CREATE INDEX IF NOT EXISTS documents_updated_at_idx ON public.documents(updated_at); -- Enable Row Level Security (RLS) ALTER TABLE public.documents ENABLE ROW LEVEL SECURITY; -- Create policies for RLS CREATE POLICY "Users can view their own documents" ON public.documents FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own documents" ON public.documents FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own documents" ON public.documents FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own documents" ON public.documents FOR DELETE USING (auth.uid() = user_id); -- Create policy for public documents (if needed) CREATE POLICY "Anyone can view public documents" ON public.documents FOR SELECT USING (is_public = true); -- Create function to automatically update updated_at timestamp CREATE OR REPLACE FUNCTION public.handle_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = timezone('utc'::text, now()); RETURN NEW; END; $$ LANGUAGE plpgsql; -- Create trigger to automatically update updated_at CREATE TRIGGER handle_documents_updated_at BEFORE UPDATE ON public.documents FOR EACH ROW EXECUTE FUNCTION public.handle_updated_at(); -- Grant necessary permissions GRANT ALL ON public.documents TO authenticated; GRANT ALL ON public.documents TO service_role; [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --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.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Enhanced typography system */ .app-font-system { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif; } .document-font { font-family: "Georgia", "Times New Roman", "Times", serif; } .ui-font { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; } } @layer components { /* Document editor styles with improved typography and proper page dimensions */ .document-editor { font-family: "Georgia", "Times New Roman", "Times", serif; line-height: 1.6; font-size: 12pt; color: #1a1a1a; cursor: text; outline: none; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } .document-editor:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .document-editor p { font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 12pt; line-height: 1.6; margin: 0 0 12pt 0; color: #1a1a1a; word-wrap: break-word; overflow-wrap: break-word; } .document-editor h1 { font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 18pt; font-weight: 700; line-height: 1.3; margin: 24pt 0 12pt 0; color: #1a1a1a; word-wrap: break-word; overflow-wrap: break-word; } .document-editor h2 { font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 16pt; font-weight: 600; line-height: 1.3; margin: 18pt 0 6pt 0; color: #1a1a1a; word-wrap: break-word; overflow-wrap: break-word; } .document-editor h3 { font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 14pt; font-weight: 600; line-height: 1.3; margin: 12pt 0 6pt 0; color: #1a1a1a; word-wrap: break-word; overflow-wrap: break-word; } .document-editor ul, .document-editor ol { font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 12pt; line-height: 1.6; margin: 6pt 0; padding-left: 24pt; } .document-editor li { margin: 3pt 0; word-wrap: break-word; overflow-wrap: break-word; } .document-editor blockquote { font-family: "Georgia", "Times New Roman", "Times", serif; font-size: 12pt; line-height: 1.6; border-left: 4px solid #e5e7eb; padding-left: 16pt; margin: 12pt 0; font-style: italic; color: #4a5568; word-wrap: break-word; overflow-wrap: break-word; } /* Image containers with proper constraints */ .document-editor .image-container { max-width: 100%; margin: 10px 0; text-align: center; } .document-editor .image-container img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* UI elements with consistent typography */ .toolbar-font { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; font-size: 14px; font-weight: 500; } .header-font { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; font-weight: 600; } .sidebar-font { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; font-size: 14px; line-height: 1.5; } /* Page-specific styles with professional dimensions and responsive design */ .page-content { position: relative; background: white; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); page-break-inside: avoid; box-sizing: border-box; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; } /* Responsive page sizing */ .page-letter { width: 100%; max-width: 8.5in; min-height: 11in; padding: 1in; margin: 0 auto 24px auto; } .page-a4 { width: 100%; max-width: 8.27in; min-height: 11.69in; padding: 1in; margin: 0 auto 24px auto; } /* Editor container with proper scrolling and constraints */ .editor-container { background: #f5f5f5; min-height: calc(100vh - 200px); padding: 24px; overflow-y: auto; overflow-x: hidden; } .editor-page-wrapper { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; width: 100%; } /* Ensure proper text cursor throughout the document */ .document-editor, .document-editor p, .document-editor div, .document-editor span { cursor: text; } /* Make sure contentEditable elements are properly styled */ [contenteditable="true"] { outline: none; cursor: text; word-wrap: break-word; overflow-wrap: break-word; } [contenteditable="true"]:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } /* Responsive layout adjustments */ .editor-layout { display: flex; min-height: calc(100vh - 120px); overflow: hidden; } .editor-main { flex: 1; overflow-y: auto; overflow-x: hidden; background: #f5f5f5; } .editor-sidebar { width: 256px; min-width: 256px; border-left: 1px solid #e5e7eb; background: white; overflow-y: auto; overflow-x: hidden; } } @layer utilities { /* On-screen page spacing */ #pages-root .page + .page { margin-top: 24px; } /* Responsive adjustments for different screen sizes */ @media (max-width: 1280px) { .page-content { max-width: 95vw; padding: 0.75in; } .editor-container { padding: 16px; } } @media (max-width: 1024px) { .page-content { max-width: 90vw; padding: 0.5in; transform: scale(0.9); transform-origin: top center; } .editor-container { padding: 12px; } .editor-sidebar { width: 200px; min-width: 200px; } } @media (max-width: 768px) { .page-content { max-width: 95vw; padding: 0.4in; transform: scale(0.8); transform-origin: top center; margin-bottom: 16px; } .editor-container { padding: 8px; } .editor-layout { flex-direction: column; } .editor-sidebar { width: 100%; min-width: auto; max-height: 200px; border-left: none; border-top: 1px solid #e5e7eb; order: 2; } .editor-main { order: 1; } /* Hide sidebar on mobile for better space utilization */ .editor-sidebar { display: none; } } @media (max-width: 640px) { .page-content { max-width: 98vw; padding: 0.3in; transform: scale(0.75); transform-origin: top center; margin-bottom: 12px; } .editor-container { padding: 4px; } } /* Page dimensions for different paper sizes with responsive constraints */ .page-letter { width: 100%; max-width: min(8.5in, 95vw); min-height: 11in; } .page-a4 { width: 100%; max-width: min(8.27in, 95vw); min-height: 11.69in; } /* Zoom controls with responsive considerations */ .zoom-50 { transform: scale(0.5); transform-origin: top center; } .zoom-75 { transform: scale(0.75); transform-origin: top center; } .zoom-100 { transform: scale(1); transform-origin: top center; } .zoom-125 { transform: scale(1.25); transform-origin: top center; } .zoom-150 { transform: scale(1.5); transform-origin: top center; } /* Improved focus states */ .focus-ring:focus { outline: 2px solid #3b82f6; outline-offset: 2px; } /* Consistent spacing */ .space-y-consistent > * + * { margin-top: 1rem; } .space-x-consistent > * + * { margin-left: 1rem; } /* Text overflow prevention */ .text-overflow-safe { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; } /* Scrollbar styling */ .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; } } /* Print styles for proper page breaks */ @media print { .page-content { box-shadow: none !important; page-break-after: always; margin: 0 !important; transform: none !important; max-width: none !important; width: 8.5in !important; padding: 1in !important; } .page-content:last-child { page-break-after: auto; } body > *:not(.page-content) { display: none !important; } .editor-sidebar { display: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .document-editor { color: #000000; background: #ffffff; } .page-content { border: 2px solid #000000; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .page-content { transform: none !important; } .zoom-50, .zoom-75, .zoom-100, .zoom-125, .zoom-150 { transform: none !important; } } [V0_FILE]typescriptreact:file="components/auth/auth-modal.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Loader2Icon, MailIcon, LockIcon } from "lucide-react" import { supabase } from "@/lib/supabase" import { useToast } from "@/hooks/use-toast" interface AuthModalProps { isOpen: boolean onClose: () => void onSuccess: () => void title?: string } export function AuthModal({ isOpen, onClose, onSuccess, title = "Welcome to Docpadly" }: AuthModalProps) { const [isLoading, setIsLoading] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const { toast } = useToast() const handleSignIn = async (e: React.FormEvent) => { e.preventDefault() if (!email || !password) { toast({ title: "Missing Information", description: "Please enter both email and password.", variant: "destructive", }) return } setIsLoading(true) try { const { error } = await supabase.auth.signInWithPassword({ email, password, }) if (error) { toast({ title: "Sign In Failed", description: error.message, variant: "destructive", }) } else { toast({ title: "Welcome back!", description: "You have successfully signed in.", }) onSuccess() onClose() setEmail("") setPassword("") } } catch (error) { toast({ title: "Sign In Error", description: "An unexpected error occurred.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() if (!email || !password || !confirmPassword) { toast({ title: "Missing Information", description: "Please fill in all fields.", variant: "destructive", }) return } if (password !== confirmPassword) { toast({ title: "Password Mismatch", description: "Passwords do not match.", variant: "destructive", }) return } if (password.length < 6) { toast({ title: "Password Too Short", description: "Password must be at least 6 characters long.", variant: "destructive", }) return } setIsLoading(true) try { const { error } = await supabase.auth.signUp({ email, password, }) if (error) { toast({ title: "Sign Up Failed", description: error.message, variant: "destructive", }) } else { toast({ title: "Account Created!", description: "Please check your email to verify your account.", }) onSuccess() onClose() setEmail("") setPassword("") setConfirmPassword("") } } catch (error) { toast({ title: "Sign Up Error", description: "An unexpected error occurred.", variant: "destructive", }) } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/language-selector.tsx" isEdit="true" isMerged="true" "use client" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface LanguageSelectorProps { value: string onChange: (value: string) => void } const languages = [ { code: "es", name: "Spanish" }, { code: "fr", name: "French" }, { code: "de", name: "German" }, { code: "it", name: "Italian" }, { code: "pt", name: "Portuguese" }, { code: "ru", name: "Russian" }, { code: "ja", name: "Japanese" }, { code: "ko", name: "Korean" }, { code: "zh", name: "Chinese" }, { code: "ar", name: "Arabic" }, { code: "hi", name: "Hindi" }, { code: "nl", name: "Dutch" }, { code: "sv", name: "Swedish" }, { code: "no", name: "Norwegian" }, { code: "da", name: "Danish" }, { code: "fi", name: "Finnish" }, { code: "pl", name: "Polish" }, { code: "tr", name: "Turkish" }, { code: "he", name: "Hebrew" }, { code: "th", name: "Thai" }, ] export function LanguageSelector({ value, onChange }: LanguageSelectorProps) { return (

Target Language

) } [V0_FILE]typescriptreact:file="app/api/ai/improve/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!text) { return NextResponse.json({ error: "Text is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a helpful writing assistant. Improve the given text by making it clearer, more engaging, and better structured while maintaining the original meaning and tone. Return only the improved text without any explanations or additional commentary.", }, { role: "user", content: text, }, ], max_tokens: 2000, temperature: 0.7, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const improvedText = data.choices?.[0]?.message?.content if (!improvedText) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: improvedText }) } catch (error) { console.error("Error in improve API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/grammar/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!text) { return NextResponse.json({ error: "Text is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a grammar and spelling checker. Fix all grammar, spelling, and punctuation errors in the given text while maintaining the original meaning and style. Return only the corrected text without any explanations or additional commentary.", }, { role: "user", content: text, }, ], max_tokens: 2000, temperature: 0.3, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const correctedText = data.choices?.[0]?.message?.content if (!correctedText) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: correctedText }) } catch (error) { console.error("Error in grammar API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/summarize/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!text) { return NextResponse.json({ error: "Text is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a summarization assistant. Create a concise and comprehensive summary of the given text, capturing the main points and key information. Return only the summary without any explanations or additional commentary.", }, { role: "user", content: text, }, ], max_tokens: 1000, temperature: 0.5, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const summary = data.choices?.[0]?.message?.content if (!summary) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: summary }) } catch (error) { console.error("Error in summarize API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/translate/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text, targetLanguage } = await request.json() if (!text) { return NextResponse.json({ error: "Text is required" }, { status: 400 }) } if (!targetLanguage) { return NextResponse.json({ error: "Target language is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: `You are a professional translator. Translate the given text to ${targetLanguage} while maintaining the original meaning, tone, and style. Return only the translated text without any explanations or additional commentary.`, }, { role: "user", content: text, }, ], max_tokens: 2000, temperature: 0.3, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const translatedText = data.choices?.[0]?.message?.content if (!translatedText) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: translatedText }) } catch (error) { console.error("Error in translate API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/continue/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!text) { return NextResponse.json({ error: "Text is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a writing assistant. Continue the given text in a natural and coherent way, maintaining the same style, tone, and context. Write 2-3 additional sentences that logically follow from the existing content. Return only the continuation text without any explanations or additional commentary.", }, { role: "user", content: text, }, ], max_tokens: 500, temperature: 0.7, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const continuation = data.choices?.[0]?.message?.content if (!continuation) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: continuation }) } catch (error) { console.error("Error in continue API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/grade/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text } = await request.json() if (!text) { return NextResponse.json({ error: "Text is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are an experienced teacher and essay grader. Evaluate the given text and provide a comprehensive grade and feedback. Include: 1) Overall grade (A-F), 2) Strengths of the writing, 3) Areas for improvement, 4) Specific suggestions for enhancement. Be constructive and helpful in your feedback.", }, { role: "user", content: text, }, ], max_tokens: 1500, temperature: 0.5, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const grade = data.choices?.[0]?.message?.content if (!grade) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: grade }) } catch (error) { console.error("Error in grade API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/generate/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { prompt } = await request.json() if (!prompt) { return NextResponse.json({ error: "Prompt is required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a helpful writing assistant. Generate content based on the user's request. Be creative, informative, and provide well-structured content that matches the user's needs.", }, { role: "user", content: prompt, }, ], max_tokens: 2000, temperature: 0.7, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const generatedContent = data.choices?.[0]?.message?.content if (!generatedContent) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: generatedContent }) } catch (error) { console.error("Error in generate API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/feedback/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text, feedback } = await request.json() if (!text || !feedback) { return NextResponse.json({ error: "Both text and feedback are required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a writing assistant. The user will provide you with text and specific feedback or instructions. Apply the feedback to improve the text accordingly. Return only the revised text without any explanations or additional commentary.", }, { role: "user", content: `Original text: ${text}\n\nFeedback to apply: ${feedback}\n\nPlease revise the text based on this feedback.`, }, ], max_tokens: 2000, temperature: 0.7, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const revisedText = data.choices?.[0]?.message?.content if (!revisedText) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: revisedText }) } catch (error) { console.error("Error in feedback API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="app/api/ai/improve-with-feedback/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { text, feedback } = await request.json() if (!text || !feedback) { return NextResponse.json({ error: "Both text and feedback are required" }, { status: 400 }) } const apiKey = process.env.OPENAI_API_KEY if (!apiKey) { return NextResponse.json( { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." }, { status: 500 }, ) } const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a writing improvement assistant. The user will provide text and specific feedback. Improve the text by incorporating the feedback while also making general improvements to clarity, flow, and engagement. Return only the improved text without explanations.", }, { role: "user", content: `Text to improve: ${text}\n\nSpecific feedback to incorporate: ${feedback}\n\nPlease improve this text by incorporating the feedback and making general enhancements.`, }, ], max_tokens: 2000, temperature: 0.7, }), }) if (!response.ok) { const errorData = await response.json().catch(() => ({})) if (response.status === 401) { return NextResponse.json( { error: "Invalid OpenAI API key. Please check your API key configuration." }, { status: 401 }, ) } else if (response.status === 429) { return NextResponse.json( { error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 }, ) } else { return NextResponse.json( { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` }, { status: response.status }, ) } } const data = await response.json() const improvedText = data.choices?.[0]?.message?.content if (!improvedText) { return NextResponse.json({ error: "No response generated from OpenAI" }, { status: 500 }) } return NextResponse.json({ result: improvedText }) } catch (error) { console.error("Error in improve-with-feedback API:", error) return NextResponse.json( { error: "Internal server error occurred while processing your request." }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="package.json" isEdit="true" isQuickEdit="true" isMerged="true" { "name": "google-docs-clone", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@supabase/supabase-js": "^2.39.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "jspdf": "^2.5.1", "html2canvas": "^1.4.1", "lucide-react": "^0.344.0", "next": "14.1.0", "openai": "^4.28.0", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.2.1", "tailwindcss-animate": "^1.0.7", "@vercel/analytics": "1.5.0", "next-themes": "0.4.6", "@radix-ui/react-scroll-area": "1.2.10", "@tinymce/tinymce-react": "6.3.0" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.1.0", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="lib/supabase.ts" isEdit="true" isMerged="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL! const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! export const supabase = createClient(supabaseUrl, supabaseAnonKey) [V0_FILE]typescriptreact:file="components/page-manager.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { PlusIcon, TrashIcon, FileTextIcon } from "lucide-react" interface PageManagerProps { currentPage: number totalPages: number onPageChange: (page: number) => void onAddPage: () => void onDeletePage: (page: number) => void } export default function PageManager({ currentPage, totalPages, onPageChange, onAddPage, onDeletePage, }: PageManagerProps) { return (

Pages

{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (

onPageChange(pageNum)} >

Page {pageNum}

{totalPages > 1 && ( )}

))}

{totalPages} page{totalPages !== 1 ? "s" : ""} total

) } [V0_FILE]typescriptreact:file="components/ai-assistant-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Progress } from "@/components/ui/progress" import { X, Sparkles, CheckCircle, Globe, PenTool, Zap, BookOpen, Target, Languages, FileText, Copy, Check, AlertCircle, Loader2, Wand2, GraduationCap, MessageSquare, TrendingUp, } from "lucide-react" interface AIAssistantSidebarProps { isOpen: boolean onClose: () => void selectedText: string onApplyResult: (result: string) => void documentContent: string } interface AIResult { content: string action: string timestamp: Date } const LANGUAGES = [ { code: "es", name: "Spanish", flag: "🇪🇸" }, { code: "fr", name: "French", flag: "🇫🇷" }, { code: "de", name: "German", flag: "🇩🇪" }, { code: "it", name: "Italian", flag: "🇮🇹" }, { code: "pt", name: "Portuguese", flag: "🇵🇹" }, { code: "ru", name: "Russian", flag: "🇷🇺" }, { code: "ja", name: "Japanese", flag: "🇯🇵" }, { code: "ko", name: "Korean", flag: "🇰🇷" }, { code: "zh", name: "Chinese", flag: "🇨🇳" }, { code: "ar", name: "Arabic", flag: "🇸🇦" }, { code: "hi", name: "Hindi", flag: "🇮🇳" }, { code: "nl", name: "Dutch", flag: "🇳🇱" }, ] export default function AIAssistantSidebar({ isOpen, onClose, selectedText, onApplyResult, documentContent, }: AIAssistantSidebarProps) { const [isProcessing, setIsProcessing] = useState(false) const [result, setResult] = useState(null) const [error, setError] = useState(null) const [customPrompt, setCustomPrompt] = useState("") const [targetLanguage, setTargetLanguage] = useState("es") const [processingProgress, setProcessingProgress] = useState(0) const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>({}) const [gradeResult, setGradeResult] = useState<{ grade: string; feedback: string } | null>(null) // Document statistics const documentStats = { words: documentContent .trim() .split(/\s+/) .filter((word) => word.length > 0).length, characters: documentContent.length, charactersNoSpaces: documentContent.replace(/\s/g, "").length, paragraphs: documentContent.split(/\n\s*\n/).filter((p) => p.trim().length > 0).length, } const selectedStats = { words: selectedText .trim() .split(/\s+/) .filter((word) => word.length > 0).length, characters: selectedText.length, } useEffect(() => { let interval: NodeJS.Timeout if (isProcessing) { setProcessingProgress(0) interval = setInterval(() => { setProcessingProgress((prev) => { if (prev >= 90) return prev return prev + Math.random() * 15 }) }, 200) } return () => { if (interval) clearInterval(interval) } }, [isProcessing]) const handleAIAction = async (action: string, customText?: string) => { const textToProcess = customText || selectedText || documentContent if (!textToProcess.trim()) { setError("Please select some text or ensure your document has content.") return } setIsProcessing(true) setError(null) setResult(null) setProcessingProgress(0) setGradeResult(null) try { const endpoint = action === "custom" ? "/api/ai/generate" : `/api/ai/${action}` const body = action === "custom" ? { prompt: customPrompt, context: textToProcess } : action === "translate" ? { text: textToProcess, targetLanguage } : { text: textToProcess } const response = await fetch(endpoint, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }) setProcessingProgress(100) if (!response.ok) { const errorData = await response.json().catch(() => ({ error: "Unknown error occurred" })) throw new Error(errorData.error || `HTTP ${response.status}: ${response.statusText}`) } const data = await response.json() if (data.error) { throw new Error(data.error) } if (action === "grade") { // Parse grade from response const gradeMatch = data.result.match(/(?:Grade|Overall grade|Score):\s*([A-F][+-]?)/i) const extractedGrade = gradeMatch ? gradeMatch[1] : "N/A" setGradeResult({ grade: extractedGrade, feedback: data.result, }) } else { setResult({ content: data.result || data.translation || data.response, action: action === "custom" ? "Custom Request" : action.charAt(0).toUpperCase() + action.slice(1), timestamp: new Date(), }) } if (action === "custom") { setCustomPrompt("") } } catch (error) { console.error("AI Action Error:", error) setError(error instanceof Error ? error.message : "An unexpected error occurred") } finally { setIsProcessing(false) setProcessingProgress(0) } } const handleCopy = async (text: string, key: string) => { try { await navigator.clipboard.writeText(text) setCopiedStates((prev) => ({ ...prev, [key]: true })) setTimeout(() => { setCopiedStates((prev) => ({ ...prev, [key]: false })) }, 2000) } catch (error) { console.error("Failed to copy:", error) } } const handleApply = () => { if (result) { onApplyResult(result.content) setResult(null) } } const handleDismiss = () => { setResult(null) setError(null) setGradeResult(null) } if (!isOpen) return null return (

{/* Header */}

AI Assistant

Enhance your writing with AI

Close AI Assistant

{/* Document Overview */} Document Overview

{documentStats.words}

Words

{documentStats.characters}

Characters

{documentStats.paragraphs}

Paragraphs

{Math.ceil(documentStats.words / 200)}

Min Read

{/* Selected Text Info */} {selectedText && ( Selected Text {selectedStats.words} words

{selectedText.length > 100 ? `${selectedText.substring(0, 100)}...` : selectedText}

)} {/* Quick Actions */} Quick Actions

Enhance writing quality and clarity Fix grammar and spelling errors Continue writing from where you left off Create a concise summary

{/* Transform & Analyze */} Transform & Analyze {/* Translation */}

Translate

{selectedText ? "Translate selected text" : "Translate entire document"}

{/* Essay Grading */} Essay Grading

Get detailed feedback and grading {gradeResult && (

{gradeResult.grade}

)}

{gradeResult && (

Grade: {gradeResult.grade}

{gradeResult.feedback}

)} {/* Generate Content */} Generate Content

setCustomPrompt(e.target.value)}
                className="min-h-[80px] text-xs bg-white/50 resize-none"
              />
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handleAIAction("custom")}
                    disabled={isProcessing || !customPrompt.trim()}
                    className="w-full h-8 text-xs bg-white/50 hover:bg-white/80"
                  >
                    <Sparkles className="h-3 w-3 mr-1" />
                    Generate Content
                  </Button>
                </TooltipTrigger>
                <TooltipContent>Generate custom content based on your prompt</TooltipContent>
              </Tooltip>
            </CardContent>
          </Card>

{/* Processing State */}
          {isProcessing && (
            <Card className="mx-4 mb-4 border-0 bg-gradient-to-r from-blue-50 to-purple-50">
              <CardContent className="p-4">
                <div className="flex items-center space-x-3">
                  <Loader2 className="h-5 w-5 animate-spin text-blue-600" />
                  <div className="flex-1">
                    <div className="text-sm font-medium text-gray-900 mb-1">Processing...</div>
                    <Progress value={processingProgress} className="h-2" />
                  </div>
                </div>
                <p className="text-xs text-gray-600 mt-2">AI is analyzing your content and generating results</p>
              </CardContent>
            </Card>
          )}

{/* Error State */}
          {error && (
            <Card className="mx-4 mb-4 border-0 bg-gradient-to-r from-red-50 to-pink-50">
              <CardContent className="p-4">
                <div className="flex items-start space-x-3">
                  <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
                  <div className="flex-1">
                    <div className="text-sm font-medium text-red-900 mb-1">Error</div>
                    <p className="text-xs text-red-700">{error}</p>
                  </div>
                  <Button variant="ghost" size="sm" onClick={handleDismiss} className="h-6 w-6 p-0 text-red-600">
                    <X className="h-3 w-3" />
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

{/* Results */}
          {result && (
            <Card className="mx-4 mb-4 border-0 bg-gradient-to-r from-green-50 to-emerald-50">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-sm font-medium flex items-center space-x-2">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <span>{result.action} Result</span>
                  </CardTitle>
                  <Badge variant="secondary" className="text-xs">
                    {new Date(result.timestamp).toLocaleTimeString()}
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="pt-0 space-y-3">
                <div className="bg-white/50 p-3 rounded-lg text-xs max-h-40 overflow-y-auto">{result.content}</div>
                <div className="flex space-x-2">
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="default"
                        size="sm"
                        onClick={handleApply}
                        className="flex-1 h-8 text-xs bg-green-600 hover:bg-green-700"
                      >
                        <Check className="h-3 w-3 mr-1" />
                        Apply
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Apply this result to your document</TooltipContent>
                  </Tooltip>

<Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleCopy(result.content, "result")}
                        className="h-8 text-xs bg-white/50"
                      >
                        {copiedStates.result ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Copy to clipboard</TooltipContent>
                  </Tooltip>

<Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="sm" onClick={handleDismiss} className="h-8 text-xs">
                        <X className="h-3 w-3" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>Dismiss result</TooltipContent>
                  </Tooltip>
                </div>
              </CardContent>
            </Card>
          )}
        </div>

{/* Footer */}
      </div>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="components/voice-notes-recorder.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  Mic,
  Play,
  Pause,
  Square,
  FileText,
  Download,
  Upload,
  Loader2,
  CheckCircle,
  Edit3,
  Save,
  X,
  Volume2,
  Clock,
  Sparkles,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface VoiceNote {
  id: string
  title: string
  audioBlob: Blob
  audioUrl: string
  transcription: string
  structuredNotes: string
  duration: number
  createdAt: Date
  status: "recording" | "processing" | "transcribed" | "structured" | "ready"
}

interface VoiceNotesRecorderProps {
  isOpen: boolean
  onClose: () => void
  onImportNotes: (notes: string) => void
}

export default function VoiceNotesRecorder({ isOpen, onClose, onImportNotes }: VoiceNotesRecorderProps) {
  const { toast } = useToast()
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioChunksRef = useRef<Blob[]>([])
  const audioRef = useRef<HTMLAudioElement>(null)
  const streamRef = useRef<MediaStream | null>(null)
  const recordingStartTimeRef = useRef<number>(0)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

// Recording state
  const [isRecording, setIsRecording] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  const [recordingTime, setRecordingTime] = useState(0)
  const [audioLevel, setAudioLevel] = useState(0)

// Processing state
  const [isProcessing, setIsProcessing] = useState(false)
  const [processingStep, setProcessingStep] = useState<"transcribing" | "structuring" | null>(null)
  const [processingProgress, setProcessingProgress] = useState(0)

// Notes state
  const [currentNote, setCurrentNote] = useState<VoiceNote | null>(null)
  const [savedNotes, setSavedNotes] = useState<VoiceNote[]>([])
  const [isEditing, setIsEditing] = useState(false)
  const [editedNotes, setEditedNotes] = useState("")

// Audio playback state
  const [isPlaying, setIsPlaying] = useState(false)
  const [playbackTime, setPlaybackTime] = useState(0)

// Initialize audio context for level monitoring
  const audioContextRef = useRef<AudioContext | null>(null)
  const analyserRef = useRef<AnalyserNode | null>(null)
  const animationFrameRef = useRef<number | null>(null)

// Cleanup on unmount
  useEffect(() => {
    return () => {
      stopRecording()
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
      }
      if (audioContextRef.current) {
        audioContextRef.current.close()
      }
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }
  }, [])

// Audio level monitoring
  const monitorAudioLevel = () => {
    if (!analyserRef.current) return

const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount)
    analyserRef.current.getByteFrequencyData(dataArray)

const average = dataArray.reduce((sum, value) => sum + value, 0) / dataArray.length
    setAudioLevel(Math.min(100, (average / 255) * 100))

if (isRecording && !isPaused) {
      animationFrameRef.current = requestAnimationFrame(monitorAudioLevel)
    }
  }

// Start recording
  const startRecording = async () => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          echoCancellation: true,
          noiseSuppression: true,
          sampleRate: 44100,
        },
      })

streamRef.current = stream

// Setup audio context for level monitoring
      audioContextRef.current = new AudioContext()
      const source = audioContextRef.current.createMediaStreamSource(stream)
      analyserRef.current = audioContextRef.current.createAnalyser()
      analyserRef.current.fftSize = 256
      source.connect(analyserRef.current)

// Setup media recorder
      const mediaRecorder = new MediaRecorder(stream, {
        mimeType: "audio/webm;codecs=opus",
      })

mediaRecorderRef.current = mediaRecorder
      audioChunksRef.current = []

mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          audioChunksRef.current.push(event.data)
        }
      }

mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" })
        const audioUrl = URL.createObjectURL(audioBlob)

const newNote: VoiceNote = {
          id: Date.now().toString(),
          title: `Voice Note ${new Date().toLocaleString()}`,
          audioBlob,
          audioUrl,
          transcription: "",
          structuredNotes: "",
          duration: recordingTime,
          createdAt: new Date(),
          status: "processing",
        }

setCurrentNote(newNote)
        processAudioNote(newNote)
      }

mediaRecorder.start(1000) // Collect data every second
      setIsRecording(true)
      setIsPaused(false)
      recordingStartTimeRef.current = Date.now()

// Start timer
      intervalRef.current = setInterval(() => {
        setRecordingTime(Math.floor((Date.now() - recordingStartTimeRef.current) / 1000))
      }, 1000)

// Start audio level monitoring
      monitorAudioLevel()

toast({
        title: "Recording Started",
        description: "Speak clearly for best transcription results.",
      })
    } catch (error) {
      console.error("Error starting recording:", error)
      toast({
        title: "Recording Error",
        description: "Could not access microphone. Please check permissions.",
        variant: "destructive",
      })
    }
  }

// Pause/Resume recording
  const togglePauseRecording = () => {
    if (!mediaRecorderRef.current) return

if (isPaused) {
      mediaRecorderRef.current.resume()
      recordingStartTimeRef.current = Date.now() - recordingTime * 1000
      intervalRef.current = setInterval(() => {
        setRecordingTime(Math.floor((Date.now() - recordingStartTimeRef.current) / 1000))
      }, 1000)
      monitorAudioLevel()
      setIsPaused(false)
    } else {
      mediaRecorderRef.current.pause()
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
      setIsPaused(true)
    }
  }

// Stop recording
  const stopRecording = () => {
    if (mediaRecorderRef.current && isRecording) {
      mediaRecorderRef.current.stop()
      setIsRecording(false)
      setIsPaused(false)
      setAudioLevel(0)

if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current)
      }
    }

if (streamRef.current) {
      streamRef.current.getTracks().forEach((track) => track.stop())
      streamRef.current = null
    }

if (audioContextRef.current) {
      audioContextRef.current.close()
      audioContextRef.current = null
    }
  }

// Process audio note (transcribe and structure)
  const processAudioNote = async (note: VoiceNote) => {
    setIsProcessing(true)
    setProcessingStep("transcribing")
    setProcessingProgress(0)

try {
      // Step 1: Transcribe audio
      const formData = new FormData()
      formData.append("audio", note.audioBlob, "recording.webm")

const transcribeResponse = await fetch("/api/voice-notes/transcribe", {
        method: "POST",
        body: formData,
      })

if (!transcribeResponse.ok) {
        throw new Error("Transcription failed")
      }

const transcribeData = await transcribeResponse.json()
      const transcription = transcribeData.transcription

setProcessingProgress(50)
      setProcessingStep("structuring")

// Step 2: Structure notes
      const structureResponse = await fetch("/api/voice-notes/structure", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ transcription }),
      })

if (!structureResponse.ok) {
        throw new Error("Note structuring failed")
      }

const structureData = await structureResponse.json()
      const structuredNotes = structureData.structuredNotes

setProcessingProgress(100)

// Update note with results
      const updatedNote: VoiceNote = {
        ...note,
        transcription,
        structuredNotes,
        status: "ready",
      }

setCurrentNote(updatedNote)
      setSavedNotes((prev) => [updatedNote, ...prev])

toast({
        title: "Notes Ready!",
        description: "Your voice note has been transcribed and structured.",
      })
    } catch (error) {
      console.error("Error processing audio:", error)
      toast({
        title: "Processing Error",
        description: "Failed to process voice note. Please try again.",
        variant: "destructive",
      })

setCurrentNote((prev) => (prev ? { ...prev, status: "ready" } : null))
    } finally {
      setIsProcessing(false)
      setProcessingStep(null)
      setProcessingProgress(0)
    }
  }

// Audio playback controls
  const togglePlayback = () => {
    if (!audioRef.current || !currentNote) return

if (isPlaying) {
      audioRef.current.pause()
      setIsPlaying(false)
    } else {
      audioRef.current.play()
      setIsPlaying(true)
    }
  }

// Format time display
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

// Edit notes
  const startEditing = () => {
    if (currentNote) {
      setEditedNotes(currentNote.structuredNotes)
      setIsEditing(true)
    }
  }

const saveEdits = () => {
    if (currentNote) {
      const updatedNote = { ...currentNote, structuredNotes: editedNotes }
      setCurrentNote(updatedNote)
      setSavedNotes((prev) => prev.map((note) => (note.id === updatedNote.id ? updatedNote : note)))
      setIsEditing(false)
      toast({
        title: "Notes Updated",
        description: "Your edits have been saved.",
      })
    }
  }

const cancelEditing = () => {
    setIsEditing(false)
    setEditedNotes("")
  }

// Import notes to document
  const handleImportNotes = () => {
    if (currentNote && currentNote.structuredNotes) {
      onImportNotes(currentNote.structuredNotes)
      toast({
        title: "Notes Imported",
        description: "Your structured notes have been added to the document.",
      })
      onClose()
    }
  }

// Reset for new recording
  const startNewRecording = () => {
    setCurrentNote(null)
    setRecordingTime(0)
    setPlaybackTime(0)
    setIsPlaying(false)
  }

if (!isOpen) return null

return (
    <TooltipProvider>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center space-x-2">
              <div className="p-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg">
                <Mic className="h-5 w-5 text-white" />
              </div>
              <span>Voice Notes</span>
              <Badge variant="secondary" className="ml-auto">
                AI-Powered
              </Badge>
            </DialogTitle>
          </DialogHeader>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Recording Panel */}
            <Card className="border-0 bg-gradient-to-br from-blue-50 to-indigo-50">
              <CardHeader>
                <CardTitle className="text-lg flex items-center space-x-2">
                  <Volume2 className="h-5 w-5 text-blue-600" />
                  <span>Audio Recording</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Recording Controls */}
                <div className="flex items-center justify-center space-x-4">
                  {!isRecording ? (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          onClick={startRecording}
                          size="lg"
                          className="h-16 w-16 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-lg"
                        >
                          <Mic className="h-6 w-6" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Start Recording</TooltipContent>
                    </Tooltip>
                  ) : (
                    <div className="flex items-center space-x-3">
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            onClick={togglePauseRecording}
                            size="lg"
                            variant="outline"
                            className="h-12 w-12 rounded-full bg-transparent"
                          >
                            {isPaused ? <Play className="h-5 w-5" /> : <Pause className="h-5 w-5" />}
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>{isPaused ? "Resume" : "Pause"}</TooltipContent>
                      </Tooltip>

<Tooltip>
                        <TooltipTrigger asChild>
                          <Button
                            onClick={stopRecording}
                            size="lg"
                            className="h-16 w-16 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-lg animate-pulse"
                          >
                            <Square className="h-6 w-6" />
                          </Button>
                        </TooltipTrigger>
                        <TooltipContent>Stop Recording</TooltipContent>
                      </Tooltip>
                    </div>
                  )}
                </div>

{/* Recording Status */}
                {isRecording && (
                  <div className="text-center space-y-3">
                    <div className="flex items-center justify-center space-x-2">
                      <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                      <span className="text-lg font-mono">{formatTime(recordingTime)}</span>
                      {isPaused && <Badge variant="secondary">Paused</Badge>}
                    </div>

{/* Audio Level Indicator */}
                    <div className="space-y-2">
                      <div className="text-sm text-gray-600">Audio Level</div>
                      <div className="w-full bg-gray-200 rounded-full h-2">
                        <div
                          className="bg-gradient-to-r from-green-400 to-blue-500 h-2 rounded-full transition-all duration-100"
                          style={{ width: `${audioLevel}%` }}
                        ></div>
                      </div>
                    </div>
                  </div>
                )}

{/* Playback Controls */}
                {currentNote && (
                  <div className="space-y-3">
                    <Separator />
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Button
                          onClick={togglePlayback}
                          size="sm"
                          variant="outline"
                          className="h-10 w-10 rounded-full bg-transparent"
                        >
                          {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                        </Button>
                        <div className="text-sm text-gray-600">
                          <Clock className="h-4 w-4 inline mr-1" />
                          {formatTime(currentNote.duration)}
                        </div>
                      </div>
                      <Button onClick={startNewRecording} size="sm" variant="outline">
                        New Recording
                      </Button>
                    </div>

<audio
                      ref={audioRef}
                      src={currentNote.audioUrl}
                      onEnded={() => setIsPlaying(false)}
                      onTimeUpdate={(e) => setPlaybackTime(Math.floor(e.currentTarget.currentTime))}
                    />
                  </div>
                )}
              </CardContent>
            </Card>

{/* Processing & Notes Panel */}
            <Card className="border-0 bg-gradient-to-br from-green-50 to-emerald-50">
              <CardHeader>
                <CardTitle className="text-lg flex items-center space-x-2">
                  <FileText className="h-5 w-5 text-green-600" />
                  <span>Structured Notes</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Processing State */}
                {isProcessing && (
                  <div className="space-y-4">
                    <div className="flex items-center space-x-3">
                      <Loader2 className="h-5 w-5 animate-spin text-blue-600" />
                      <div className="flex-1">
                        <div className="text-sm font-medium">
                          {processingStep === "transcribing" ? "Transcribing audio..." : "Structuring notes..."}
                        </div>
                        <Progress value={processingProgress} className="h-2 mt-1" />
                      </div>
                    </div>
                    <div className="text-xs text-gray-600 text-center">
                      {processingStep === "transcribing"
                        ? "Converting speech to text using AI..."
                        : "Organizing content into clear, structured notes..."}
                    </div>
                  </div>
                )}

{/* Notes Display/Edit */}
                {currentNote && currentNote.status === "ready" && (
                  <div className="space-y-4">
                    {/* Status Badge */}
                    <div className="flex items-center justify-between">
                      <Badge variant="default" className="bg-green-100 text-green-800">
                        <CheckCircle className="h-3 w-3 mr-1" />
                        Ready
                      </Badge>
                      <div className="flex items-center space-x-2">
                        {!isEditing && (
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Button onClick={startEditing} size="sm" variant="outline">
                                <Edit3 className="h-4 w-4" />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent>Edit Notes</TooltipContent>
                          </Tooltip>
                        )}
                      </div>
                    </div>

{/* Notes Content */}
                    {isEditing ? (
                      <div className="space-y-3">
                        <Textarea
                          value={editedNotes}
                          onChange={(e) => setEditedNotes(e.target.value)}
                          className="min-h-[200px] bg-white"
                          placeholder="Edit your structured notes..."
                        />
                        <div className="flex items-center space-x-2">
                          <Button onClick={saveEdits} size="sm" className="bg-green-600 hover:bg-green-700">
                            <Save className="h-4 w-4 mr-1" />
                            Save
                          </Button>
                          <Button onClick={cancelEditing} size="sm" variant="outline">
                            <X className="h-4 w-4 mr-1" />
                            Cancel
                          </Button>
                        </div>
                      </div>
                    ) : (
                      <div className="bg-white p-4 rounded-lg border max-h-[300px] overflow-y-auto">
                        <div className="whitespace-pre-wrap text-sm leading-relaxed">
                          {currentNote.structuredNotes || "No structured notes available."}
                        </div>
                      </div>
                    )}

{/* Action Buttons */}
                    {!isEditing && (
                      <div className="flex items-center space-x-2">
                        <Button
                          onClick={handleImportNotes}
                          className="flex-1 bg-blue-600 hover:bg-blue-700"
                          disabled={!currentNote.structuredNotes}
                        >
                          <Upload className="h-4 w-4 mr-2" />
                          Import to Document
                        </Button>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              onClick={() => {
                                const blob = new Blob([currentNote.structuredNotes], { type: "text/plain" })
                                const url = URL.createObjectURL(blob)
                                const a = document.createElement("a")
                                a.href = url
                                a.download = `${currentNote.title}.txt`
                                a.click()
                                URL.revokeObjectURL(url)
                              }}
                              size="sm"
                              variant="outline"
                            >
                              <Download className="h-4 w-4" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>Download Notes</TooltipContent>
                        </Tooltip>
                      </div>
                    )}
                  </div>
                )}

{/* Empty State */}
                {!currentNote && !isProcessing && (
                  <div className="text-center py-8 text-gray-500">
                    <Sparkles className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                    <p className="text-lg font-medium mb-2">Ready to take voice notes!</p>
                    <p className="text-sm">
                      Record your thoughts and let AI transform them into structured, organized notes.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>

{/* Recent Notes */}
          {savedNotes.length > 0 && (
            <Card className="mt-6">
              <CardHeader>
                <CardTitle className="text-lg">Recent Voice Notes</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2 max-h-32 overflow-y-auto">
                  {savedNotes.slice(0, 5).map((note) => (
                    <div
                      key={note.id}
                      className="flex items-center justify-between p-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"
                      onClick={() => setCurrentNote(note)}
                    >
                      <div className="flex items-center space-x-3">
                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                        <div>
                          <div className="text-sm font-medium">{note.title}</div>
                          <div className="text-xs text-gray-500">{formatTime(note.duration)}</div>
                        </div>
                      </div>
                      <div className="text-xs text-gray-400">{note.createdAt.toLocaleDateString()}</div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          )}
        </DialogContent>
      </Dialog>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/api/voice-notes/structure/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const { transcription } = await request.json()

if (!transcription) {
      return NextResponse.json({ error: "Transcription is required" }, { status: 400 })
    }

const apiKey = process.env.OPENAI_API_KEY
    if (!apiKey) {
      return NextResponse.json(
        { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." },
        { status: 500 },
      )
    }

const response = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${apiKey}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4o",
        messages: [
          {
            role: "system",
            content: `You are an expert note-taking assistant. Transform the provided transcription into clear, well-structured notes. Follow these guidelines:

1. **Structure**: Organize content with clear headings and bullet points
2. **Clarity**: Remove filler words, repetitions, and verbal pauses
3. **Conciseness**: Distill key points while preserving important details
4. **Formatting**: Use markdown formatting for better readability
5. **Logic**: Group related ideas together and maintain logical flow

Format the output as structured notes with:
- Clear section headings (use ## for main topics)
- Bullet points for key information
- Sub-bullets for supporting details
- Action items or next steps if mentioned
- Key quotes or important statements

Make the notes professional, actionable, and easy to scan.`,
          },
          {
            role: "user",
            content: `Please structure these voice notes from the following transcription:

${transcription}`,
          },
        ],
        max_tokens: 2000,
        temperature: 0.3,
      }),
    })

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

if (response.status === 401) {
        return NextResponse.json(
          { error: "Invalid OpenAI API key. Please check your API key configuration." },
          { status: 401 },
        )
      } else if (response.status === 429) {
        return NextResponse.json(
          { error: "OpenAI API quota exceeded. Please check your usage limits." },
          { status: 429 },
        )
      } else {
        return NextResponse.json(
          { error: `OpenAI API error: ${errorData.error?.message || "Unknown error"}` },
          { status: response.status },
        )
      }
    }

const data = await response.json()
    const structuredNotes = data.choices?.[0]?.message?.content

if (!structuredNotes) {
      return NextResponse.json({ error: "No structured notes generated" }, { status: 500 })
    }

return NextResponse.json({ structuredNotes })
  } catch (error) {
    console.error("Error in structure API:", error)
    return NextResponse.json({ error: "Internal server error occurred while structuring notes." }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/voice-notes/stream/route.ts" isMerged="true"
import type { NextRequest } from "next/server"

export async function GET(request: NextRequest) {
  // This would typically set up a WebSocket connection
  // For now, we'll return a response indicating WebSocket support
  return new Response("WebSocket endpoint - use WebSocket client to connect", {
    status: 200,
    headers: {
      "Content-Type": "text/plain",
    },
  })
}

// Note: In a real implementation, you would need to set up a WebSocket server
// This could be done using a separate WebSocket server or by upgrading the HTTP connection
// For the demo, we'll simulate real-time transcription in the frontend
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="app/api/voice-notes/transcribe/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { OpenAI } from "openai"

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

export async function POST(request: NextRequest) {
  try {
    if (!process.env.OPENAI_API_KEY) {
      return NextResponse.json(
        { error: "OpenAI API key not configured. Please add OPENAI_API_KEY to your environment variables." },
        { status: 500 },
      )
    }

const formData = await request.formData()
    const audioFile = formData.get("audio") as File

if (!audioFile) {
      return NextResponse.json({ error: "No audio file provided" }, { status: 400 })
    }

// Check file size (OpenAI has a 25MB limit)
    if (audioFile.size > 25 * 1024 * 1024) {
      return NextResponse.json({ error: "Audio file too large. Maximum size is 25MB." }, { status: 400 })
    }

console.log("Transcribing audio file:", audioFile.name, "Size:", audioFile.size)

// Convert File to Buffer for OpenAI API
    const arrayBuffer = await audioFile.arrayBuffer()
    const buffer = Buffer.from(arrayBuffer)

// Create a new File object with the buffer
    const file = new File([buffer], audioFile.name, { type: audioFile.type })

const transcription = await openai.audio.transcriptions.create({
      file: file,
      model: "whisper-1",
      response_format: "verbose_json",
      timestamp_granularities: ["segment"],
    })

console.log("Transcription successful:", transcription.text.substring(0, 100) + "...")

// Format the response with segments and timestamps
    const segments =
      transcription.segments?.map((segment: any) => ({
        id: segment.id,
        text: segment.text,
        start: segment.start,
        end: segment.end,
        confidence: segment.avg_logprob ? Math.exp(segment.avg_logprob) : 0.8,
      })) || []

return NextResponse.json({
      text: transcription.text,
      segments: segments,
      language: transcription.language,
      duration: transcription.duration,
    })
  } catch (error: any) {
    console.error("Transcription error:", error)

// Handle specific OpenAI API errors
    if (error?.error?.type === "invalid_request_error") {
      return NextResponse.json({ error: `OpenAI API Error: ${error.error.message}` }, { status: 400 })
    }

if (error?.status === 401) {
      return NextResponse.json(
        { error: "Invalid OpenAI API key. Please check your API key configuration." },
        { status: 401 },
      )
    }

if (error?.status === 429) {
      return NextResponse.json({ error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 })
    }

return NextResponse.json(
      { error: error?.message || "Failed to transcribe audio. Please try again." },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/voice-notes/generate-notes/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { OpenAI } from "openai"

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

const { transcript } = await request.json()

if (!transcript) {
      return NextResponse.json({ error: "No transcript provided" }, { status: 400 })
    }

console.log("Generating notes from transcript:", transcript.substring(0, 100) + "...")

const completion = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        {
          role: "system",
          content: `You are a professional note-taking assistant. Convert the provided transcript into well-structured, easy-to-learn notes.

Your response must be a valid JSON object with this exact structure:
{
  "title": "Short descriptive title (5-8 words)",
  "summary": "Two-sentence summary of the main content",
  "notes": [
    "Concise bullet point 1",
    "Actionable bullet point 2",
    "Key insight 3",
    "Important detail 4",
    "Practical takeaway 5"
  ],
  "actionItems": [
    "Specific action to take",
    "Follow-up task"
  ],
  "highlights": [
    {
      "text": "Important quote or insight",
      "timestamp": "approximate time in transcript"
    }
  ]
}

Guidelines:
- Make notes concise and actionable
- Use simple, clear language
- Focus on key insights and practical takeaways
- Include 5-12 bullet points maximum
- Extract specific action items if mentioned
- Highlight the most important quotes or insights
- Ensure all content is study-friendly and easy to review`,
        },
        {
          role: "user",
          content: `Please convert this transcript into structured notes:\n\n${transcript}`,
        },
      ],
      temperature: 0.3,
      max_tokens: 1500,
    })

const responseText = completion.choices[0]?.message?.content

if (!responseText) {
      throw new Error("No response from OpenAI")
    }

console.log("Raw OpenAI response:", responseText)

// Try to parse the JSON response
    let structuredNotes
    try {
      structuredNotes = JSON.parse(responseText)
    } catch (parseError) {
      console.error("JSON parsing failed:", parseError)

// Fallback: create structured notes from the raw response
      structuredNotes = {
        title: "Voice Notes Summary",
        summary: "Generated notes from voice recording. The AI response could not be parsed as structured data.",
        notes: [
          responseText.substring(0, 200) + "...",
          "Please review and edit these notes as needed",
          "The original transcript has been processed but may need manual formatting",
        ],
        actionItems: ["Review and format notes manually"],
        highlights: [],
      }
    }

// Validate the structure and provide defaults
    const validatedNotes = {
      title: structuredNotes.title || "Voice Notes",
      summary: structuredNotes.summary || "Summary of voice recording content.",
      notes: Array.isArray(structuredNotes.notes)
        ? structuredNotes.notes
        : ["Key points from the voice recording", "Please review and edit as needed"],
      actionItems: Array.isArray(structuredNotes.actionItems) ? structuredNotes.actionItems : [],
      highlights: Array.isArray(structuredNotes.highlights) ? structuredNotes.highlights : [],
    }

console.log("Generated structured notes:", validatedNotes.title)

return NextResponse.json(validatedNotes)
  } catch (error: any) {
    console.error("Note generation error:", error)

// Handle specific OpenAI API errors
    if (error?.status === 401) {
      return NextResponse.json(
        { error: "Invalid OpenAI API key. Please check your API key configuration." },
        { status: 401 },
      )
    }

if (error?.status === 429) {
      return NextResponse.json({ error: "OpenAI API quota exceeded. Please check your usage limits." }, { status: 429 })
    }

return NextResponse.json(
      { error: error?.message || "Failed to generate notes. Please try again." },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/enhanced-voice-notes.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import {
  Mic,
  Square,
  Play,
  Pause,
  FileText,
  Clock,
  Loader2,
  AlertCircle,
  CheckCircle,
  Edit3,
  Import,
} from "lucide-react"

interface TranscriptSegment {
  id: number
  text: string
  start: number
  end: number
  confidence: number
}

interface StructuredNotes {
  title: string
  summary: string
  notes: string[]
  actionItems: string[]
  highlights: Array<{
    text: string
    timestamp: string
  }>
}

interface Recording {
  id: string
  name: string
  blob: Blob
  duration: number
  timestamp: Date
  size: number
  transcript?: {
    text: string
    segments: TranscriptSegment[]
    language?: string
    duration?: number
  }
  structuredNotes?: StructuredNotes
}

interface EnhancedVoiceNotesProps {
  onImportNotes: (content: string) => void
}

export default function EnhancedVoiceNotes({ onImportNotes }: EnhancedVoiceNotesProps) {
  // Recording state
  const [isRecording, setIsRecording] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  const [recordingTime, setRecordingTime] = useState(0)
  const [audioLevel, setAudioLevel] = useState(0)

// Playback state
  const [isPlaying, setIsPlaying] = useState(false)
  const [playbackTime, setPlaybackTime] = useState(0)
  const [currentRecording, setCurrentRecording] = useState<Recording | null>(null)

// Processing state
  const [isTranscribing, setIsTranscribing] = useState(false)
  const [isGeneratingNotes, setIsGeneratingNotes] = useState(false)
  const [transcriptionError, setTranscriptionError] = useState<string | null>(null)
  const [notesError, setNotesError] = useState<string | null>(null)

// Data state
  const [recordings, setRecordings] = useState<Recording[]>([])
  const [editingNotes, setEditingNotes] = useState<StructuredNotes | null>(null)

// Refs
  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
  const audioContextRef = useRef<AudioContext | null>(null)
  const analyserRef = useRef<AnalyserNode | null>(null)
  const audioChunksRef = useRef<Blob[]>([])
  const recordingTimerRef = useRef<NodeJS.Timeout | null>(null)
  const audioRef = useRef<HTMLAudioElement | null>(null)
  const playbackTimerRef = useRef<NodeJS.Timeout | null>(null)

// Initialize audio context and analyzer for waveform
  const initializeAudioContext = async (stream: MediaStream) => {
    try {
      audioContextRef.current = new AudioContext()
      analyserRef.current = audioContextRef.current.createAnalyser()
      const source = audioContextRef.current.createMediaStreamSource(stream)
      source.connect(analyserRef.current)

analyserRef.current.fftSize = 256
      const bufferLength = analyserRef.current.frequencyBinCount
      const dataArray = new Uint8Array(bufferLength)

const updateAudioLevel = () => {
        if (analyserRef.current && isRecording && !isPaused) {
          analyserRef.current.getByteFrequencyData(dataArray)
          const average = dataArray.reduce((a, b) => a + b) / bufferLength
          setAudioLevel(average / 255)
          requestAnimationFrame(updateAudioLevel)
        }
      }
      updateAudioLevel()
    } catch (error) {
      console.error("Error initializing audio context:", error)
    }
  }

await initializeAudioContext(stream)

mediaRecorderRef.current = new MediaRecorder(stream, {
        mimeType: "audio/webm;codecs=opus",
      })

audioChunksRef.current = []

mediaRecorderRef.current.ondataavailable = (event) => {
        if (event.data.size > 0) {
          audioChunksRef.current.push(event.data)
        }
      }

mediaRecorderRef.current.onstop = () => {
        const audioBlob = new Blob(audioChunksRef.current, { type: "audio/webm" })
        const recording: Recording = {
          id: Date.now().toString(),
          name: `Recording ${new Date().toLocaleTimeString()}`,
          blob: audioBlob,
          duration: recordingTime,
          timestamp: new Date(),
          size: audioBlob.size,
        }

setRecordings((prev) => [recording, ...prev])
        setCurrentRecording(recording)

// Clean up
        stream.getTracks().forEach((track) => track.stop())
        if (audioContextRef.current) {
          audioContextRef.current.close()
        }
      }

mediaRecorderRef.current.start(100) // Collect data every 100ms
      setIsRecording(true)
      setRecordingTime(0)

// Start timer
      recordingTimerRef.current = setInterval(() => {
        setRecordingTime((prev) => prev + 1)
      }, 1000)
    } catch (error) {
      console.error("Error starting recording:", error)
      alert("Could not access microphone. Please check permissions.")
    }
  }

// Pause/Resume recording
  const togglePauseRecording = () => {
    if (mediaRecorderRef.current) {
      if (isPaused) {
        mediaRecorderRef.current.resume()
        recordingTimerRef.current = setInterval(() => {
          setRecordingTime((prev) => prev + 1)
        }, 1000)
      } else {
        mediaRecorderRef.current.pause()
        if (recordingTimerRef.current) {
          clearInterval(recordingTimerRef.current)
        }
      }
      setIsPaused(!isPaused)
    }
  }

if (recordingTimerRef.current) {
        clearInterval(recordingTimerRef.current)
      }
    }
  }

// Play/Pause audio
  const togglePlayback = (recording: Recording) => {
    if (!audioRef.current) {
      audioRef.current = new Audio()
    }

if (currentRecording?.id !== recording.id) {
      audioRef.current.src = URL.createObjectURL(recording.blob)
      setCurrentRecording(recording)
      setPlaybackTime(0)
    }

if (isPlaying) {
      audioRef.current.pause()
      if (playbackTimerRef.current) {
        clearInterval(playbackTimerRef.current)
      }
    } else {
      audioRef.current.play()
      playbackTimerRef.current = setInterval(() => {
        if (audioRef.current) {
          setPlaybackTime(audioRef.current.currentTime)
        }
      }, 100)
    }

setIsPlaying(!isPlaying)
  }

// Jump to transcript segment
  const jumpToSegment = (startTime: number) => {
    if (audioRef.current && currentRecording) {
      audioRef.current.currentTime = startTime
      setPlaybackTime(startTime)
    }
  }

// Transcribe audio
  const transcribeAudio = async (recording: Recording) => {
    setIsTranscribing(true)
    setTranscriptionError(null)

try {
      const formData = new FormData()
      formData.append("audio", recording.blob, `${recording.name}.webm`)

const response = await fetch("/api/voice-notes/transcribe", {
        method: "POST",
        body: formData,
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Transcription failed")
      }

const transcriptData = await response.json()

// Update recording with transcript
      setRecordings((prev) => prev.map((r) => (r.id === recording.id ? { ...r, transcript: transcriptData } : r)))

// Update current recording if it's the same
      if (currentRecording?.id === recording.id) {
        setCurrentRecording((prev) => (prev ? { ...prev, transcript: transcriptData } : null))
      }
    } catch (error: any) {
      console.error("Error transcribing audio:", error)
      setTranscriptionError(error.message)
    } finally {
      setIsTranscribing(false)
    }
  }

// Generate structured notes
  const generateNotes = async (recording: Recording) => {
    if (!recording.transcript) return

setIsGeneratingNotes(true)
    setNotesError(null)

try {
      const response = await fetch("/api/voice-notes/generate-notes", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          transcript: recording.transcript.text,
        }),
      })

if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || "Note generation failed")
      }

const structuredNotes = await response.json()

// Update recording with structured notes
      setRecordings((prev) => prev.map((r) => (r.id === recording.id ? { ...r, structuredNotes } : r)))

// Update current recording if it's the same
      if (currentRecording?.id === recording.id) {
        setCurrentRecording((prev) => (prev ? { ...prev, structuredNotes } : null))
      }
    } catch (error: any) {
      console.error("Error generating notes:", error)
      setNotesError(error.message)
    } finally {
      setIsGeneratingNotes(false)
    }
  }

// Edit notes
  const startEditingNotes = (notes: StructuredNotes) => {
    setEditingNotes({ ...notes })
  }

const saveEditedNotes = () => {
    if (!editingNotes || !currentRecording) return

const updatedRecording = {
      ...currentRecording,
      structuredNotes: editingNotes,
    }

setRecordings((prev) => prev.map((r) => (r.id === currentRecording.id ? updatedRecording : r)))
    setCurrentRecording(updatedRecording)
    setEditingNotes(null)
  }

// Import notes to document
  const importNotesToDocument = (notes: StructuredNotes) => {
    const markdownContent = `# ${notes.title}

## Summary
${notes.summary}

## Key Notes
${notes.notes.map((note) => `- ${note}`).join("\n")}

${
  notes.actionItems.length > 0
    ? `## Action Items
${notes.actionItems.map((item) => `- [ ] ${item}`).join("\n")}`
    : ""
}

${
  notes.highlights.length > 0
    ? `## Highlights
${notes.highlights.map((highlight) => `> "${highlight.text}" (${highlight.timestamp})`).join("\n\n")}`
    : ""
}
`

onImportNotes(markdownContent)
  }

// Format time
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs.toString().padStart(2, "0")}`
  }

// Format file size
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

// Cleanup on unmount
  useEffect(() => {
    return () => {
      if (recordingTimerRef.current) {
        clearInterval(recordingTimerRef.current)
      }
      if (playbackTimerRef.current) {
        clearInterval(playbackTimerRef.current)
      }
      if (audioContextRef.current) {
        audioContextRef.current.close()
      }
    }
  }, [])

return (
    <div className="w-full max-w-6xl mx-auto p-6 space-y-6">
      {/* Recording Controls */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Mic className="h-5 w-5" />
            Voice Recording Studio
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Waveform Visualization */}
          <div className="h-16 bg-gray-100 rounded-lg flex items-center justify-center relative overflow-hidden">
            {isRecording && (
              <div
                className="bg-blue-500 transition-all duration-100 rounded"
                style={{
                  height: `${Math.max(4, audioLevel * 60)}px`,
                  width: "4px",
                }}
              />
            )}
            {!isRecording && (
              <div className="text-gray-500 text-sm">Audio waveform will appear here during recording</div>
            )}
          </div>

{/* Recording Info */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Badge variant={isRecording ? "destructive" : "secondary"}>
                {isRecording ? (isPaused ? "Paused" : "Recording") : "Ready"}
              </Badge>
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4" />
                <span className="font-mono">{formatTime(recordingTime)}</span>
              </div>
            </div>
          </div>

{/* Recording Controls */}
          <div className="flex items-center gap-2">
            {!isRecording ? (
              <Button onClick={startRecording} className="flex items-center gap-2">
                <Mic className="h-4 w-4" />
                Start Recording
              </Button>
            ) : (
              <>
                <Button
                  onClick={togglePauseRecording}
                  variant="outline"
                  className="flex items-center gap-2 bg-transparent"
                >
                  {isPaused ? <Play className="h-4 w-4" /> : <Pause className="h-4 w-4" />}
                  {isPaused ? "Resume" : "Pause"}
                </Button>
                <Button onClick={stopRecording} variant="destructive" className="flex items-center gap-2">
                  <Square className="h-4 w-4" />
                  Stop
                </Button>
              </>
            )}
          </div>
        </CardContent>
      </Card>

{/* Recent Recordings */}
      <Card>
        <CardHeader>
          <CardTitle>Recent Recordings</CardTitle>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-64">
            <div className="space-y-3">
              {recordings.map((recording) => (
                <div key={recording.id} className="border rounded-lg p-4 space-y-3">
                  <div className="flex items-center justify-between">
                    <div>
                      <h4 className="font-medium">{recording.name}</h4>
                      <div className="text-sm text-gray-500 flex items-center gap-4">
                        <span>{formatTime(recording.duration)}</span>
                        <span>{formatFileSize(recording.size)}</span>
                        <span>{recording.timestamp.toLocaleString()}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2">
                      {recording.transcript && (
                        <Badge variant="outline" className="text-green-600">
                          <CheckCircle className="h-3 w-3 mr-1" />
                          Transcribed
                        </Badge>
                      )}
                      {recording.structuredNotes && (
                        <Badge variant="outline" className="text-blue-600">
                          <FileText className="h-3 w-3 mr-1" />
                          Notes Ready
                        </Badge>
                      )}
                    </div>
                  </div>

<div className="flex items-center gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => togglePlayback(recording)}
                      className="flex items-center gap-1"
                    >
                      {isPlaying && currentRecording?.id === recording.id ? (
                        <Pause className="h-3 w-3" />
                      ) : (
                        <Play className="h-3 w-3" />
                      )}
                      {isPlaying && currentRecording?.id === recording.id ? "Pause" : "Play"}
                    </Button>

{!recording.transcript ? (
                      <Button
                        size="sm"
                        onClick={() => transcribeAudio(recording)}
                        disabled={isTranscribing}
                        className="flex items-center gap-1"
                      >
                        {isTranscribing ? (
                          <Loader2 className="h-3 w-3 animate-spin" />
                        ) : (
                          <FileText className="h-3 w-3" />
                        )}
                        {isTranscribing ? "Transcribing..." : "Transcribe"}
                      </Button>
                    ) : (
                      <>
                        {!recording.structuredNotes ? (
                          <Button
                            size="sm"
                            onClick={() => generateNotes(recording)}
                            disabled={isGeneratingNotes}
                            className="flex items-center gap-1"
                          >
                            {isGeneratingNotes ? (
                              <Loader2 className="h-3 w-3 animate-spin" />
                            ) : (
                              <FileText className="h-3 w-3" />
                            )}
                            {isGeneratingNotes ? "Generating..." : "Generate Notes"}
                          </Button>
                        ) : (
                          <Button
                            size="sm"
                            onClick={() => importNotesToDocument(recording.structuredNotes!)}
                            className="flex items-center gap-1"
                          >
                            <Import className="h-3 w-3" />
                            Import Notes
                          </Button>
                        )}
                      </>
                    )}

<Button size="sm" variant="outline" onClick={() => setCurrentRecording(recording)}>
                      View Details
                    </Button>
                  </div>
                </div>
              ))}

{recordings.length === 0 && (
                <div className="text-center text-gray-500 py-8">
                  No recordings yet. Start by recording your first voice note above.
                </div>
              )}
            </div>
          </ScrollArea>
        </CardContent>
      </Card>

{/* Error Messages */}
      {transcriptionError && (
        <Card className="border-red-200 bg-red-50">
          <CardContent className="pt-6">
            <div className="flex items-center gap-2 text-red-600">
              <AlertCircle className="h-4 w-4" />
              <span className="font-medium">Transcription Error:</span>
            </div>
            <p className="text-red-600 mt-1">{transcriptionError}</p>
            <Button size="sm" variant="outline" onClick={() => setTranscriptionError(null)} className="mt-2">
              Dismiss
            </Button>
          </CardContent>
        </Card>
      )}

{notesError && (
        <Card className="border-red-200 bg-red-50">
          <CardContent className="pt-6">
            <div className="flex items-center gap-2 text-red-600">
              <AlertCircle className="h-4 w-4" />
              <span className="font-medium">Note Generation Error:</span>
            </div>
            <p className="text-red-600 mt-1">{notesError}</p>
            <Button size="sm" variant="outline" onClick={() => setNotesError(null)} className="mt-2">
              Dismiss
            </Button>
          </CardContent>
        </Card>
      )}

{/* Current Recording Details */}
      {currentRecording && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Transcript Panel */}
          {currentRecording.transcript && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <FileText className="h-5 w-5" />
                  Transcript
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ScrollArea className="h-64">
                  <div className="space-y-2">
                    {currentRecording.transcript.segments?.map((segment) => (
                      <div
                        key={segment.id}
                        className="p-2 rounded cursor-pointer hover:bg-gray-100 transition-colors"
                        onClick={() => jumpToSegment(segment.start)}
                      >
                        <div className="flex items-center justify-between text-xs text-gray-500 mb-1">
                          <span>
                            {formatTime(segment.start)} - {formatTime(segment.end)}
                          </span>
                          <Badge variant="outline" className="text-xs">
                            {Math.round(segment.confidence * 100)}%
                          </Badge>
                        </div>
                        <p className="text-sm">{segment.text}</p>
                      </div>
                    )) || <p className="text-sm">{currentRecording.transcript.text}</p>}
                  </div>
                </ScrollArea>
              </CardContent>
            </Card>
          )}

{/* Structured Notes Panel */}
          {currentRecording.structuredNotes && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <FileText className="h-5 w-5" />
                    Professional Notes
                  </div>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => startEditingNotes(currentRecording.structuredNotes!)}
                  >
                    <Edit3 className="h-3 w-3 mr-1" />
                    Edit
                  </Button>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <ScrollArea className="h-64">
                  <div className="space-y-4">
                    <div>
                      <h3 className="font-semibold text-lg">{currentRecording.structuredNotes.title}</h3>
                      <p className="text-sm text-gray-600 mt-1">{currentRecording.structuredNotes.summary}</p>
                    </div>

<div>
                      <h4 className="font-medium mb-2">Key Notes</h4>
                      <ul className="space-y-1">
                        {currentRecording.structuredNotes.notes.map((note, index) => (
                          <li key={index} className="text-sm flex items-start gap-2">
                            <span className="text-blue-500 mt-1">•</span>
                            <span>{note}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

{currentRecording.structuredNotes.actionItems.length > 0 && (
                      <>
                        <Separator />
                        <div>
                          <h4 className="font-medium mb-2">Action Items</h4>
                          <ul className="space-y-1">
                            {currentRecording.structuredNotes.actionItems.map((item, index) => (
                              <li key={index} className="text-sm flex items-start gap-2">
                                <span className="text-green-500 mt-1">□</span>
                                <span>{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </>
                    )}

{currentRecording.structuredNotes.highlights.length > 0 && (
                      <>
                        <Separator />
                        <div>
                          <h4 className="font-medium mb-2">Highlights</h4>
                          <div className="space-y-2">
                            {currentRecording.structuredNotes.highlights.map((highlight, index) => (
                              <blockquote key={index} className="border-l-4 border-blue-200 pl-3 text-sm italic">
                                "{highlight.text}"
                                <footer className="text-xs text-gray-500 mt-1">— {highlight.timestamp}</footer>
                              </blockquote>
                            ))}
                          </div>
                        </div>
                      </>
                    )}
                  </div>
                </ScrollArea>

<div className="mt-4 pt-4 border-t">
                  <Button
                    onClick={() => importNotesToDocument(currentRecording.structuredNotes!)}
                    className="w-full flex items-center gap-2"
                  >
                    <Import className="h-4 w-4" />
                    Import Notes to Document
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}
        </div>
      )}

{/* Notes Editor Modal */}
      {editingNotes && (
        <Card className="fixed inset-4 z-50 bg-white shadow-2xl">
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <span>Edit Notes</span>
              <div className="flex items-center gap-2">
                <Button size="sm" onClick={saveEditedNotes}>
                  Save Changes
                </Button>
                <Button size="sm" variant="outline" onClick={() => setEditingNotes(null)}>
                  Cancel
                </Button>
              </div>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-96">
              <div className="space-y-4">
                <div>
                  <label className="text-sm font-medium">Title</label>
                  <Input
                    value={editingNotes.title}
                    onChange={(e) => setEditingNotes((prev) => (prev ? { ...prev, title: e.target.value } : null))}
                    className="mt-1"
                  />
                </div>

<div>
                  <label className="text-sm font-medium">Summary</label>
                  <Textarea
                    value={editingNotes.summary}
                    onChange={(e) => setEditingNotes((prev) => (prev ? { ...prev, summary: e.target.value } : null))}
                    className="mt-1"
                    rows={3}
                  />
                </div>

<div>
                  <label className="text-sm font-medium">Notes (one per line)</label>
                  <Textarea
                    value={editingNotes.notes.join("\n")}
                    onChange={(e) =>
                      setEditingNotes((prev) =>
                        prev
                          ? {
                              ...prev,
                              notes: e.target.value.split("\n").filter((line) => line.trim()),
                            }
                          : null,
                      )
                    }
                    className="mt-1"
                    rows={8}
                  />
                </div>

<div>
                  <label className="text-sm font-medium">Action Items (one per line)</label>
                  <Textarea
                    value={editingNotes.actionItems.join("\n")}
                    onChange={(e) =>
                      setEditingNotes((prev) =>
                        prev
                          ? {
                              ...prev,
                              actionItems: e.target.value.split("\n").filter((line) => line.trim()),
                            }
                          : null,
                      )
                    }
                    className="mt-1"
                    rows={4}
                  />
                </div>
              </div>
            </ScrollArea>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/blog/blog-post-form.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { RichTextEditor } from "./rich-text-editor"
import { calculateReadingTime, extractExcerpt } from "@/lib/blog-utils"
import { supabase } from "@/lib/supabase"
import { useToast } from "@/hooks/use-toast"
import { Save, Eye, Send, Upload, X, Clock, FileText, Loader2 } from "lucide-react"

interface BlogPost {
  id?: string
  title: string
  content: string
  excerpt?: string
  featured_image_url?: string
  is_published: boolean
  reading_time_minutes: number
  word_count: number
}

interface BlogPostFormProps {
  initialData?: BlogPost
  isEditing?: boolean
}

export function BlogPostForm({ initialData, isEditing = false }: BlogPostFormProps) {
  const router = useRouter()
  const { toast } = useToast()

const [title, setTitle] = useState(initialData?.title || "")
  const [content, setContent] = useState(initialData?.content || "")
  const [featuredImage, setFeaturedImage] = useState<File | null>(null)
  const [featuredImageUrl, setFeaturedImageUrl] = useState(initialData?.featured_image_url || "")
  const [isPublished, setIsPublished] = useState(initialData?.is_published || false)
  const [isSaving, setIsSaving] = useState(false)
  const [isPublishing, setIsPublishing] = useState(false)
  const [isPreview, setIsPreview] = useState(false)
  const [user, setUser] = useState<any>(null)

// Get current user
  useEffect(() => {
    const getUser = async () => {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      setUser(user)
    }
    getUser()
  }, [])

// Calculate reading time and word count
  const readingTime = calculateReadingTime(content)
  const wordCount = content
    .replace(/<[^>]*>/g, "")
    .split(/\s+/)
    .filter((word) => word.length > 0).length
  const excerpt = extractExcerpt(content)

const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      // Check file size (max 10MB)
      if (file.size > 10 * 1024 * 1024) {
        toast({
          title: "File Too Large",
          description: "Please select an image smaller than 10MB.",
          variant: "destructive",
        })
        return
      }

setFeaturedImage(file)
      // Create preview URL
      const previewUrl = URL.createObjectURL(file)
      setFeaturedImageUrl(previewUrl)
    }
  }

const createBucketIfNotExists = async () => {
    try {
      // Check if bucket exists
      const { data: buckets } = await supabase.storage.listBuckets()
      const bucketExists = buckets?.some((bucket) => bucket.name === "blog-images")

if (!bucketExists) {
        // Create bucket
        const { error } = await supabase.storage.createBucket("blog-images", {
          public: true,
          allowedMimeTypes: ["image/*"],
          fileSizeLimit: 10485760, // 10MB
        })

if (error) {
          console.error("Error creating bucket:", error)
          return false
        }
      }
      return true
    } catch (error) {
      console.error("Error checking/creating bucket:", error)
      return false
    }
  }

const uploadFeaturedImage = async (): Promise<string | null> => {
    if (!featuredImage || !user) return null

try {
      // Ensure bucket exists
      const bucketReady = await createBucketIfNotExists()
      if (!bucketReady) {
        toast({
          title: "Storage Error",
          description: "Unable to set up image storage. Please try again.",
          variant: "destructive",
        })
        return null
      }

const fileExt = featuredImage.name.split(".").pop()
      const fileName = `${user.id}/${Date.now()}.${fileExt}`

const { data, error } = await supabase.storage.from("blog-images").upload(fileName, featuredImage, {
        cacheControl: "3600",
        upsert: false,
      })

if (error) {
        console.error("Error uploading image:", error)
        toast({
          title: "Upload Failed",
          description: "Failed to upload image. Please try again.",
          variant: "destructive",
        })
        return null
      }

const {
        data: { publicUrl },
      } = supabase.storage.from("blog-images").getPublicUrl(fileName)

return publicUrl
    } catch (error) {
      console.error("Error uploading image:", error)
      toast({
        title: "Upload Error",
        description: "An error occurred while uploading the image.",
        variant: "destructive",
      })
      return null
    }
  }

const saveDraft = async () => {
    if (!user || !title.trim() || !content.trim()) {
      toast({
        title: "Missing Information",
        description: "Please provide a title and content for your blog post.",
        variant: "destructive",
      })
      return
    }

setIsSaving(true)
    try {
      let imageUrl = featuredImageUrl

// Upload new image if selected
      if (featuredImage && !featuredImageUrl.startsWith("blob:")) {
        const uploadedUrl = await uploadFeaturedImage()
        if (uploadedUrl) {
          imageUrl = uploadedUrl
        }
      }

const postData = {
        title: title.trim(),
        content,
        excerpt,
        author_id: user.id,
        author_name: user.user_metadata?.full_name || user.email?.split("@")[0] || "Anonymous",
        author_email: user.email,
        featured_image_url: imageUrl || null,
        reading_time_minutes: readingTime,
        word_count: wordCount,
        is_published: false,
      }

let result
      if (isEditing && initialData?.id) {
        result = await supabase.from("blog_posts").update(postData).eq("id", initialData.id).select().single()
      } else {
        result = await supabase.from("blog_posts").insert(postData).select().single()
      }

if (result.error) {
        throw result.error
      }

toast({
        title: "Draft Saved",
        description: "Your blog post draft has been saved successfully.",
      })

if (!isEditing) {
        router.push(`/blog/edit/${result.data.id}`)
      }
    } catch (error: any) {
      console.error("Error saving draft:", error)
      toast({
        title: "Error Saving Draft",
        description: error.message || "Failed to save draft. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

const publishPost = async () => {
    if (!user || !title.trim() || !content.trim()) {
      toast({
        title: "Missing Information",
        description: "Please provide a title and content before publishing.",
        variant: "destructive",
      })
      return
    }

setIsPublishing(true)
    try {
      let imageUrl = featuredImageUrl

// Upload new image if selected
      if (featuredImage && !featuredImageUrl.startsWith("http")) {
        const uploadedUrl = await uploadFeaturedImage()
        if (uploadedUrl) {
          imageUrl = uploadedUrl
        }
      }

if (result.error) {
        throw result.error
      }

toast({
        title: "Blog Post Published!",
        description: "Your blog post is now live and visible to the community.",
      })

router.push(`/blog/${result.data.id}`)
    } catch (error: any) {
      console.error("Error publishing post:", error)
      toast({
        title: "Error Publishing Post",
        description: error.message || "Failed to publish post. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsPublishing(false)
    }
  }

const removeFeaturedImage = () => {
    setFeaturedImage(null)
    setFeaturedImageUrl("")
  }

if (!user) {
    return (
      <div className="max-w-4xl mx-auto p-6">
        <Card>
          <CardContent className="pt-6 text-center">
            <p className="text-gray-600">Please sign in to create blog posts.</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">{isEditing ? "Edit Blog Post" : "Create New Blog Post"}</h1>
          <p className="text-gray-600 mt-1">Share your thoughts with the community</p>
        </div>

<div className="flex items-center gap-2">
          <Button
            variant="outline"
            onClick={() => setIsPreview(!isPreview)}
            className="flex items-center gap-2 bg-transparent"
          >
            <Eye className="h-4 w-4" />
            {isPreview ? "Edit" : "Preview"}
          </Button>

<Button
            variant="outline"
            onClick={saveDraft}
            disabled={isSaving || isPublishing}
            className="flex items-center gap-2 bg-transparent"
          >
            {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
            Save Draft
          </Button>

<Button
            onClick={publishPost}
            disabled={isSaving || isPublishing}
            className="flex items-center gap-2 bg-green-600 hover:bg-green-700"
          >
            {isPublishing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
            Publish
          </Button>
        </div>
      </div>

{isPreview ? (
        <Card>
          <CardContent className="p-6">
            {featuredImageUrl && (
              <img
                src={featuredImageUrl || "/placeholder.svg?height=256&width=800"}
                alt={title}
                className="w-full h-64 object-cover rounded-lg mb-6"
              />
            )}

<div className="mb-4">
              <h1 className="text-3xl font-bold mb-2">{title || "Untitled Post"}</h1>
              <div className="flex items-center gap-4 text-sm text-gray-600">
                <span>By {user.user_metadata?.full_name || user.email?.split("@")[0] || "You"}</span>
                <span>•</span>
                <div className="flex items-center gap-1">
                  <Clock className="h-4 w-4" />
                  <span>{readingTime} min read</span>
                </div>
                <span>•</span>
                <div className="flex items-center gap-1">
                  <FileText className="h-4 w-4" />
                  <span>{wordCount} words</span>
                </div>
              </div>
            </div>

<div
              className="prose max-w-none"
              dangerouslySetInnerHTML={{ __html: content || "<p>Start writing your blog post...</p>" }}
            />
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-6">
          {/* Post Stats */}
          <Card>
            <CardContent className="pt-4">
              <div className="flex items-center gap-6 text-sm">
                <div className="flex items-center gap-1">
                  <Clock className="h-4 w-4 text-blue-600" />
                  <span>{readingTime} min read</span>
                </div>
                <div className="flex items-center gap-1">
                  <FileText className="h-4 w-4 text-green-600" />
                  <span>{wordCount} words</span>
                </div>
                <Badge variant={isPublished ? "default" : "secondary"}>{isPublished ? "Published" : "Draft"}</Badge>
              </div>
            </CardContent>
          </Card>

{/* Title */}
          <Card>
            <CardHeader>
              <CardTitle>Post Title</CardTitle>
            </CardHeader>
            <CardContent>
              <Input
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Enter your blog post title..."
                className="text-lg"
              />
            </CardContent>
          </Card>

{/* Featured Image */}
          <Card>
            <CardHeader>
              <CardTitle>Featured Image (Optional)</CardTitle>
            </CardHeader>
            <CardContent>
              {featuredImageUrl ? (
                <div className="space-y-4">
                  <div className="relative">
                    <img
                      src={featuredImageUrl || "/placeholder.svg?height=192&width=800"}
                      alt="Featured image preview"
                      className="w-full h-48 object-cover rounded-lg"
                    />
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={removeFeaturedImage}
                      className="absolute top-2 right-2"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                  <Label className="block">
                    <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
                    <Button variant="outline" className="bg-transparent" asChild>
                      <span className="cursor-pointer flex items-center gap-2">
                        <Upload className="h-4 w-4" />
                        Change Image
                      </span>
                    </Button>
                  </Label>
                </div>
              ) : (
                <Label className="block">
                  <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-gray-400 transition-colors">
                    <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
                    <p className="text-gray-600">Click to upload featured image</p>
                    <p className="text-sm text-gray-400">PNG, JPG up to 10MB</p>
                  </div>
                </Label>
              )}
            </CardContent>
          </Card>

{/* Content Editor */}
          <Card>
            <CardHeader>
              <CardTitle>Content</CardTitle>
            </CardHeader>
            <CardContent>
              <RichTextEditor value={content} onChange={setContent} placeholder="Start writing your blog post..." />
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/editor/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect } from "react"
import { useRouter } from "next/router"
import { Editor } from "@tinymce/tinymce-react"

const EditorPage = () => {
  const router = useRouter()
  const { id } = router.query

const handleSave = () => {
    // Save logic here
  }

useEffect(() => {
    // Existing useEffect hook logic here
  }, [])

// Add keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.ctrlKey || e.metaKey) {
        switch (e.key.toLowerCase()) {
          case "b":
            e.preventDefault()
            document.execCommand("bold")
            break
          case "i":
            e.preventDefault()
            document.execCommand("italic")
            break
          case "u":
            e.preventDefault()
            document.execCommand("underline")
            break
          case "s":
            e.preventDefault()
            handleSave()
            break
          case "z":
            if (e.shiftKey) {
              e.preventDefault()
              document.execCommand("redo")
            } else {
              e.preventDefault()
              document.execCommand("undo")
            }
            break
          case "y":
            e.preventDefault()
            document.execCommand("redo")
            break
        }
      }
    }

document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [])

return (
    <div>
      <Editor
        initialValue="<p>This is the initial content of the editor</p>"
        init={{
          height: 500,
          menubar: false,
          plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table paste code help wordcount",
          ],
          toolbar:
            "undo redo | formatselect | " +
            "bold italic backcolor | alignleft aligncenter " +
            "alignright alignjustify | bullist numlist outdent indent | " +
            "removeformat | help",
        }}
      />
    </div>
  )
}

export default EditorPage
[V0_FILE]sql:file="scripts/create-blog-tables.sql" isEdit="true" isMerged="true"
-- Drop existing table if it exists to recreate with correct schema
DROP TABLE IF EXISTS public.blog_post_images CASCADE;
DROP TABLE IF EXISTS public.blog_posts CASCADE;

-- Create blog posts table with all required columns
CREATE TABLE public.blog_posts (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    title TEXT NOT NULL,
    content TEXT NOT NULL,
    excerpt TEXT,
    author_id UUID REFERENCES auth.users(id) ON DELETE CASCADE NOT NULL,
    author_name TEXT NOT NULL,
    author_email TEXT NOT NULL,
    featured_image_url TEXT,
    reading_time_minutes INTEGER DEFAULT 0,
    word_count INTEGER DEFAULT 0,
    is_published BOOLEAN DEFAULT false NOT NULL,
    published_at TIMESTAMP WITH TIME ZONE,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- Create blog post images table for multiple images
CREATE TABLE public.blog_post_images (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    blog_post_id UUID REFERENCES public.blog_posts(id) ON DELETE CASCADE NOT NULL,
    image_url TEXT NOT NULL,
    alt_text TEXT,
    caption TEXT,
    display_order INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- Create indexes for better performance
CREATE INDEX blog_posts_author_id_idx ON public.blog_posts(author_id);
CREATE INDEX blog_posts_published_at_idx ON public.blog_posts(published_at);
CREATE INDEX blog_posts_is_published_idx ON public.blog_posts(is_published);
CREATE INDEX blog_post_images_blog_post_id_idx ON public.blog_post_images(blog_post_id);

-- Create function to handle updated_at timestamp
CREATE OR REPLACE FUNCTION public.handle_updated_at()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = timezone('utc'::text, now());
    RETURN NEW;
END;
$$ language 'plpgsql';

-- Create trigger to update updated_at timestamp
CREATE TRIGGER handle_blog_posts_updated_at
    BEFORE UPDATE ON public.blog_posts
    FOR EACH ROW
    EXECUTE FUNCTION public.handle_updated_at();

-- Enable Row Level Security (RLS)
ALTER TABLE public.blog_posts ENABLE ROW LEVEL SECURITY;
ALTER TABLE public.blog_post_images ENABLE ROW LEVEL SECURITY;

-- Drop existing policies if they exist
DROP POLICY IF EXISTS "Anyone can view published blog posts" ON public.blog_posts;
DROP POLICY IF EXISTS "Users can view their own blog posts" ON public.blog_posts;
DROP POLICY IF EXISTS "Users can insert their own blog posts" ON public.blog_posts;
DROP POLICY IF EXISTS "Users can update their own blog posts" ON public.blog_posts;
DROP POLICY IF EXISTS "Users can delete their own blog posts" ON public.blog_posts;

-- Create policies for blog posts
CREATE POLICY "Anyone can view published blog posts" ON public.blog_posts
    FOR SELECT USING (is_published = true);

CREATE POLICY "Users can view their own blog posts" ON public.blog_posts
    FOR SELECT USING (auth.uid() = author_id);

CREATE POLICY "Users can insert their own blog posts" ON public.blog_posts
    FOR INSERT WITH CHECK (auth.uid() = author_id);

CREATE POLICY "Users can update their own blog posts" ON public.blog_posts
    FOR UPDATE USING (auth.uid() = author_id);

CREATE POLICY "Users can delete their own blog posts" ON public.blog_posts
    FOR DELETE USING (auth.uid() = author_id);

-- Drop existing policies for images if they exist
DROP POLICY IF EXISTS "Anyone can view images of published blog posts" ON public.blog_post_images;
DROP POLICY IF EXISTS "Users can view images of their own blog posts" ON public.blog_post_images;
DROP POLICY IF EXISTS "Users can insert images for their own blog posts" ON public.blog_post_images;
DROP POLICY IF EXISTS "Users can update images of their own blog posts" ON public.blog_post_images;
DROP POLICY IF EXISTS "Users can delete images of their own blog posts" ON public.blog_post_images;

-- Create policies for blog post images
CREATE POLICY "Anyone can view images of published blog posts" ON public.blog_post_images
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM public.blog_posts 
            WHERE blog_posts.id = blog_post_images.blog_post_id 
            AND blog_posts.is_published = true
        )
    );

CREATE POLICY "Users can view images of their own blog posts" ON public.blog_post_images
    FOR SELECT USING (
        EXISTS (
            SELECT 1 FROM public.blog_posts 
            WHERE blog_posts.id = blog_post_images.blog_post_id 
            AND blog_posts.author_id = auth.uid()
        )
    );

CREATE POLICY "Users can insert images for their own blog posts" ON public.blog_post_images
    FOR INSERT WITH CHECK (
        EXISTS (
            SELECT 1 FROM public.blog_posts 
            WHERE blog_posts.id = blog_post_images.blog_post_id 
            AND blog_posts.author_id = auth.uid()
        )
    );

CREATE POLICY "Users can update images of their own blog posts" ON public.blog_post_images
    FOR UPDATE USING (
        EXISTS (
            SELECT 1 FROM public.blog_posts 
            WHERE blog_posts.id = blog_post_images.blog_post_id 
            AND blog_posts.author_id = auth.uid()
        )
    );

CREATE POLICY "Users can delete images of their own blog posts" ON public.blog_post_images
    FOR DELETE USING (
        EXISTS (
            SELECT 1 FROM public.blog_posts 
            WHERE blog_posts.id = blog_post_images.blog_post_id 
            AND blog_posts.author_id = auth.uid()
        )
    );

-- Grant necessary permissions
GRANT ALL ON public.blog_posts TO authenticated;
GRANT ALL ON public.blog_post_images TO authenticated;
GRANT ALL ON public.blog_posts TO service_role;
GRANT ALL ON public.blog_post_images TO service_role;

-- Insert sample data for testing
INSERT INTO public.blog_posts (
    title,
    content,
    excerpt,
    author_id,
    author_name,
    author_email,
    reading_time_minutes,
    word_count,
    is_published,
    published_at
) VALUES (
    'Welcome to Docpadly Blog',
    '<h2>Getting Started with Docpadly</h2><p>Welcome to the Docpadly community blog! This is where we share insights, tutorials, and stories about document creation, collaboration, and productivity.</p><p>Whether you''re a writer, student, or professional, you''ll find valuable content here to help you make the most of your writing experience.</p>',
    'Welcome to the Docpadly community blog! This is where we share insights, tutorials, and stories about document creation and productivity.',
    '00000000-0000-0000-0000-000000000000',
    'Docpadly Team',
    'team@docpadly.com',
    2,
    85,
    true,
    timezone('utc'::text, now())
) ON CONFLICT DO NOTHING;
[V0_FILE]typescriptreact:file="app/blog/create/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { RichTextEditor } from "@/components/blog/rich-text-editor"
import { ArrowLeft, Save, Eye, Upload, Clock, FileText, AlertCircle } from "lucide-react"
import Link from "next/link"
import { supabase } from "@/lib/supabase"
import { calculateReadingTime, countWords, generateExcerpt, validateBlogPost } from "@/lib/blog-utils"

export default function CreateBlogPage() {
  const router = useRouter()
  const [user, setUser] = useState<any>(null)
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [excerpt, setExcerpt] = useState("")
  const [featuredImage, setFeaturedImage] = useState("")
  const [isPublished, setIsPublished] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [errors, setErrors] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(true)

// Auto-generated stats
  const readingTime = calculateReadingTime(content)
  const wordCount = countWords(content)
  const autoExcerpt = generateExcerpt(content)

useEffect(() => {
    checkUser()
  }, [])

const checkUser = async () => {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) {
        router.push("/auth")
        return
      }
      setUser(user)
    } catch (error) {
      console.error("Error checking user:", error)
      router.push("/auth")
    } finally {
      setIsLoading(false)
    }
  }

const handleSave = async (publish = false) => {
    if (!user) return

const validation = validateBlogPost(title, content)
    if (!validation.isValid) {
      setErrors(validation.errors)
      return
    }

setIsSaving(true)
    setErrors([])

try {
      const finalExcerpt = excerpt.trim() || autoExcerpt

const blogPost = {
        title: title.trim(),
        content,
        excerpt: finalExcerpt,
        author_id: user.id,
        author_name: user.user_metadata?.full_name || user.email?.split("@")[0] || "Anonymous",
        author_email: user.email,
        featured_image_url: featuredImage.trim() || null,
        reading_time_minutes: readingTime,
        word_count: wordCount,
        is_published: publish,
        published_at: publish ? new Date().toISOString() : null,
      }

const { data, error } = await supabase.from("blog_posts").insert([blogPost]).select().single()

if (error) {
        console.error("Error saving blog post:", error)
        setErrors(["Failed to save blog post. Please try again."])
        return
      }

if (publish) {
        router.push(`/blog/${data.id}`)
      } else {
        router.push("/blog")
      }
    } catch (error) {
      console.error("Error saving blog post:", error)
      setErrors(["An unexpected error occurred. Please try again."])
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading editor...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-4">
            <Link href="/blog">
              <Button variant="ghost" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Blog
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900">Create New Post</h1>
          </div>

<div className="flex items-center gap-2">
            <Button variant="outline" onClick={() => handleSave(false)} disabled={isSaving} className="bg-white">
              <Save className="h-4 w-4 mr-2" />
              {isSaving ? "Saving..." : "Save Draft"}
            </Button>
            <Button onClick={() => handleSave(true)} disabled={isSaving} className="bg-blue-600 hover:bg-blue-700">
              <Eye className="h-4 w-4 mr-2" />
              {isSaving ? "Publishing..." : "Publish"}
            </Button>
          </div>
        </div>

{/* Error Messages */}
        {errors.length > 0 && (
          <Card className="mb-6 border-red-200 bg-red-50">
            <CardContent className="p-4">
              <div className="flex items-start gap-2">
                <AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
                <div>
                  <h3 className="font-medium text-red-800 mb-1">Please fix the following errors:</h3>
                  <ul className="text-sm text-red-700 space-y-1">
                    {errors.map((error, index) => (
                      <li key={index}>• {error}</li>
                    ))}
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-3 space-y-6">
            {/* Title */}
            <Card>
              <CardContent className="p-6">
                <Label htmlFor="title" className="text-base font-medium mb-2 block">
                  Post Title
                </Label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="Enter your post title..."
                  className="text-lg font-medium"
                />
              </CardContent>
            </Card>

{/* Content Editor */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Content</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <RichTextEditor
                  content={content}
                  onChange={setContent}
                  placeholder="Start writing your blog post..."
                  className="border-0 rounded-none"
                />
              </CardContent>
            </Card>
          </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Post Stats */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center gap-2">
                  <FileText className="h-5 w-5" />
                  Post Statistics
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Word Count</span>
                  <Badge variant="secondary">{wordCount}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Reading Time</span>
                  <div className="flex items-center gap-1">
                    <Clock className="h-4 w-4 text-gray-500" />
                    <Badge variant="secondary">{readingTime} min</Badge>
                  </div>
                </div>
                <Separator />
                <div className="text-xs text-gray-500">Stats update automatically as you write</div>
              </CardContent>
            </Card>

{/* Featured Image */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center gap-2">
                  <Upload className="h-5 w-5" />
                  Featured Image
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="featured-image" className="text-sm font-medium mb-2 block">
                    Image URL
                  </Label>
                  <Input
                    id="featured-image"
                    value={featuredImage}
                    onChange={(e) => setFeaturedImage(e.target.value)}
                    placeholder="https://example.com/image.jpg"
                  />
                </div>
                {featuredImage && (
                  <div className="aspect-video w-full overflow-hidden rounded-lg border">
                    <img
                      src={featuredImage || "/placeholder.svg"}
                      alt="Featured image preview"
                      className="w-full h-full object-cover"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement
                        target.src = "/placeholder.svg"
                      }}
                    />
                  </div>
                )}
              </CardContent>
            </Card>

{/* Custom Excerpt */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Excerpt</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="excerpt" className="text-sm font-medium mb-2 block">
                    Custom Excerpt (Optional)
                  </Label>
                  <textarea
                    id="excerpt"
                    value={excerpt}
                    onChange={(e) => setExcerpt(e.target.value)}
                    placeholder="Leave blank to auto-generate from content..."
                    className="w-full h-24 px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    maxLength={300}
                  />
                  <div className="text-xs text-gray-500 mt-1">{excerpt.length}/300 characters</div>
                </div>
                {!excerpt && autoExcerpt && (
                  <div>
                    <div className="text-sm font-medium text-gray-700 mb-2">Auto-generated preview:</div>
                    <div className="text-sm text-gray-600 bg-gray-50 p-3 rounded border italic">{autoExcerpt}</div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/[id]/page.tsx" isEdit="true" isMerged="true"
import { notFound } from "next/navigation"
import { supabase } from "@/lib/supabase"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Clock, FileText, Edit, ArrowLeft, User, Calendar, Share2 } from "lucide-react"
import Link from "next/link"
import { formatDate } from "@/lib/blog-utils"

interface BlogPost {
  id: string
  title: string
  content: string
  excerpt: string
  author_name: string
  author_id: string
  author_email: string
  featured_image_url?: string
  reading_time_minutes: number
  word_count: number
  published_at: string
  created_at: string
}

async function getBlogPost(id: string): Promise<BlogPost | null> {
  try {
    // First, let's check if the table exists and has the required columns
    const { data, error } = await supabase
      .from("blog_posts")
      .select(`
        id,
        title,
        content,
        excerpt,
        author_name,
        author_id,
        author_email,
        featured_image_url,
        reading_time_minutes,
        word_count,
        published_at,
        created_at,
        is_published
      `)
      .eq("id", id)
      .eq("is_published", true)
      .single()

if (error) {
      console.error("Error fetching blog post:", error)
      return null
    }

return data
  } catch (error) {
    console.error("Error fetching blog post:", error)
    return null
  }
}

export default async function BlogPostPage({ params }: { params: { id: string } }) {
  const post = await getBlogPost(params.id)

if (!post) {
    notFound()
  }

return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <div className="border-b border-gray-200">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <Link href="/blog">
              <Button variant="ghost" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Blog
              </Button>
            </Link>

<Button variant="outline" size="sm" className="flex items-center gap-2 bg-transparent">
                <Share2 className="h-4 w-4" />
                Share
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Article */}
      <article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header */}
        <header className="mb-8">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight">{post.title}</h1>

{/* Meta Information */}
          <div className="flex flex-wrap items-center gap-6 text-gray-600 mb-6">
            <div className="flex items-center gap-2">
              <User className="h-5 w-5" />
              <Link
                href={`/blog/author/${post.author_id}`}
                className="hover:text-blue-600 transition-colors font-medium"
              >
                {post.author_name}
              </Link>
            </div>

<div className="flex items-center gap-2">
              <Calendar className="h-5 w-5" />
              <span>{formatDate(post.published_at)}</span>
            </div>

<div className="flex items-center gap-2">
              <Clock className="h-5 w-5" />
              <span>{post.reading_time_minutes} min read</span>
            </div>

<div className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              <Badge variant="secondary">{post.word_count} words</Badge>
            </div>
          </div>

{/* Featured Image */}
          {post.featured_image_url && (
            <div className="mb-8">
              <img
                src={post.featured_image_url || "/placeholder.svg"}
                alt={post.title}
                className="w-full h-64 md:h-96 object-cover rounded-lg shadow-lg"
              />
            </div>
          )}
        </header>

{/* Content */}
        <div
          className="prose prose-lg max-w-none mb-12"
          style={{
            lineHeight: "1.7",
            fontSize: "18px",
          }}
          dangerouslySetInnerHTML={{ __html: post.content }}
        />

{/* Author Info */}
        <div className="bg-gray-50 rounded-lg p-6">
          <div className="flex items-center gap-4">
            <div className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-xl font-bold">
              {post.author_name.charAt(0).toUpperCase()}
            </div>
            <div className="flex-1">
              <h3 className="text-lg font-semibold text-gray-900 mb-1">{post.author_name}</h3>
              <p className="text-gray-600 mb-3">Writer and contributor to the Docpadly community blog.</p>
              <Link href={`/blog/author/${post.author_id}`}>
                <Button variant="outline" size="sm">
                  View all posts by {post.author_name} →
                </Button>
              </Link>
            </div>
          </div>
        </div>

{/* Actions */}
        <div className="flex items-center justify-center gap-4 mt-12">
          <Link href="/blog">
            <Button className="bg-blue-600 hover:bg-blue-700">Read More Posts</Button>
          </Link>

<Link href="/blog/create">
            <Button variant="outline" className="bg-transparent">
              <FileText className="h-4 w-4 mr-2" />
              Write Your Own Post
            </Button>
          </Link>
        </div>
      </article>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/edit/[id]/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { RichTextEditor } from "@/components/blog/rich-text-editor"
import { ArrowLeft, Save, Eye, Upload, Clock, FileText, AlertCircle, Trash2 } from "lucide-react"
import Link from "next/link"
import { supabase } from "@/lib/supabase"
import { calculateReadingTime, countWords, generateExcerpt, validateBlogPost } from "@/lib/blog-utils"

interface BlogPost {
  id: string
  title: string
  content: string
  excerpt: string
  author_id: string
  author_name: string
  author_email: string
  featured_image_url?: string
  reading_time_minutes: number
  word_count: number
  is_published: boolean
  published_at: string
  created_at: string
}

export default function EditBlogPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [user, setUser] = useState<any>(null)
  const [post, setPost] = useState<any | null>(null)
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")
  const [excerpt, setExcerpt] = useState("")
  const [featuredImage, setFeaturedImage] = useState("")
  const [isPublished, setIsPublished] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [errors, setErrors] = useState<string[]>([])
  const [isLoading, setIsLoading] = useState(true)

// Auto-generated stats
  const readingTime = calculateReadingTime(content)
  const wordCount = countWords(content)
  const autoExcerpt = generateExcerpt(content)

useEffect(() => {
    checkUserAndLoadPost()
  }, [params.id])

const checkUserAndLoadPost = async () => {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      if (!user) {
        router.push("/auth")
        return
      }
      setUser(user)

// Load the blog post
      const { data: postData, error } = await supabase.from("blog_posts").select("*").eq("id", params.id).single()

if (error || !postData) {
        console.error("Error loading blog post:", error)
        router.push("/blog")
        return
      }

// Check if user owns this post
      if (postData.author_id !== user.id) {
        router.push("/blog")
        return
      }

setPost(postData)
      setTitle(postData.title)
      setContent(postData.content)
      setExcerpt(postData.excerpt || "")
      setFeaturedImage(postData.featured_image_url || "")
      setIsPublished(postData.is_published)
    } catch (error) {
      console.error("Error checking user or loading post:", error)
      router.push("/auth")
    } finally {
      setIsLoading(false)
    }
  }

const handleSave = async (publish: boolean = isPublished) => {
    if (!user || !post) return

const validation = validateBlogPost(title, content)
    if (!validation.isValid) {
      setErrors(validation.errors)
      return
    }

setIsSaving(true)
    setErrors([])

try {
      const finalExcerpt = excerpt.trim() || autoExcerpt

const updates = {
        title: title.trim(),
        content,
        excerpt: finalExcerpt,
        featured_image_url: featuredImage.trim() || null,
        reading_time_minutes: readingTime,
        word_count: wordCount,
        is_published: publish,
        published_at: publish && !post.published_at ? new Date().toISOString() : post.published_at,
        updated_at: new Date().toISOString(),
      }

const { error } = await supabase.from("blog_posts").update(updates).eq("id", post.id)

if (error) {
        console.error("Error updating blog post:", error)
        setErrors(["Failed to update blog post. Please try again."])
        return
      }

if (publish) {
        router.push(`/blog/${post.id}`)
      } else {
        router.push("/blog")
      }
    } catch (error) {
      console.error("Error updating blog post:", error)
      setErrors(["An unexpected error occurred. Please try again."])
    } finally {
      setIsSaving(false)
    }
  }

const handleDelete = async () => {
    if (!user || !post) return

if (!confirm("Are you sure you want to delete this blog post? This action cannot be undone.")) {
      return
    }

setIsDeleting(true)

try {
      const { error } = await supabase.from("blog_posts").delete().eq("id", post.id)

if (error) {
        console.error("Error deleting blog post:", error)
        setErrors(["Failed to delete blog post. Please try again."])
        return
      }

router.push("/blog")
    } catch (error) {
      console.error("Error deleting blog post:", error)
      setErrors(["An unexpected error occurred. Please try again."])
    } finally {
      setIsDeleting(false)
    }
  }

if (!post) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Post not found</h2>
          <p className="text-gray-600 mb-4">
            The blog post you're looking for doesn't exist or you don't have permission to edit it.
          </p>
          <Link href="/blog">
            <Button>Back to Blog</Button>
          </Link>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-4">
            <Link href={`/blog/${post.id}`}>
              <Button variant="ghost" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Post
              </Button>
            </Link>
            <h1 className="text-2xl font-bold text-gray-900">Edit Post</h1>
          </div>

<div className="flex items-center gap-2">
            <Button
              variant="outline"
              onClick={handleDelete}
              disabled={isDeleting}
              className="bg-white text-red-600 hover:text-red-700 hover:bg-red-50"
            >
              <Trash2 className="h-4 w-4 mr-2" />
              {isDeleting ? "Deleting..." : "Delete"}
            </Button>
            <Button variant="outline" onClick={() => handleSave(false)} disabled={isSaving} className="bg-white">
              <Save className="h-4 w-4 mr-2" />
              {isSaving ? "Saving..." : "Save Draft"}
            </Button>
            <Button onClick={() => handleSave(true)} disabled={isSaving} className="bg-blue-600 hover:bg-blue-700">
              <Eye className="h-4 w-4 mr-2" />
              {isSaving ? "Publishing..." : isPublished ? "Update" : "Publish"}
            </Button>
          </div>
        </div>

{/* Sidebar */}
          <div className="space-y-6">
            {/* Post Status */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Post Status</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Status</span>
                  <Badge variant={isPublished ? "default" : "secondary"}>{isPublished ? "Published" : "Draft"}</Badge>
                </div>
                {post.published_at && (
                  <div className="text-xs text-gray-500">
                    Published: {new Date(post.published_at).toLocaleDateString()}
                  </div>
                )}
                <div className="text-xs text-gray-500">
                  Last updated: {new Date(post.updated_at || post.created_at).toLocaleDateString()}
                </div>
              </CardContent>
            </Card>

{/* Post Stats */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg flex items-center gap-2">
                  <FileText className="h-5 w-5" />
                  Post Statistics
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Word Count</span>
                  <Badge variant="secondary">{wordCount}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600">Reading Time</span>
                  <div className="flex items-center gap-1">
                    <Clock className="h-4 w-4 text-gray-500" />
                    <Badge variant="secondary">{readingTime} min</Badge>
                  </div>
                </div>
                <Separator />
                <div className="text-xs text-gray-500">Stats update automatically as you write</div>
              </CardContent>
            </Card>

{/* Custom Excerpt */}
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">Excerpt</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label htmlFor="excerpt" className="text-sm font-medium mb-2 block">
                    Custom Excerpt (Optional)
                  </Label>
                  <textarea
                    id="excerpt"
                    value={excerpt}
                    onChange={(e) => setExcerpt(e.target.value)}
                    placeholder="Leave blank to auto-generate from content..."
                    className="w-full h-24 px-3 py-2 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    maxLength={300}
                  />
                  <div className="text-xs text-gray-500 mt-1">{excerpt.length}/300 characters</div>
                </div>
                {!excerpt && autoExcerpt && (
                  <div>
                    <div className="text-sm font-medium text-gray-700 mb-2">Auto-generated preview:</div>
                    <div className="text-sm text-gray-600 bg-gray-50 p-3 rounded border italic">{autoExcerpt}</div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/author/[id]/page.tsx" isEdit="true" isMerged="true"
import { notFound } from "next/navigation"
import { supabase } from "@/lib/supabase"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Clock, FileText, ArrowLeft, Calendar } from "lucide-react"
import Link from "next/link"
import { getTimeAgo } from "@/lib/blog-utils"

interface BlogPost {
  id: string
  title: string
  excerpt: string
  featured_image_url?: string
  reading_time_minutes: number
  word_count: number
  published_at: string
  created_at: string
}

interface AuthorData {
  id: string
  name: string
  email: string
  posts: BlogPost[]
  totalPosts: number
  totalWords: number
  totalReadingTime: number
}

async function getAuthorData(authorId: string): Promise<AuthorData | null> {
  try {
    const { data: posts, error } = await supabase
      .from("blog_posts")
      .select("*")
      .eq("author_id", authorId)
      .eq("is_published", true)
      .order("published_at", { ascending: false })

if (error) {
      console.error("Error fetching author posts:", error)
      return null
    }

if (!posts || posts.length === 0) {
      return null
    }

const firstPost = posts[0]
    const totalWords = posts.reduce((acc, post) => acc + post.word_count, 0)
    const totalReadingTime = posts.reduce((acc, post) => acc + post.reading_time_minutes, 0)

return {
      id: authorId,
      name: firstPost.author_name,
      email: firstPost.author_email,
      posts,
      totalPosts: posts.length,
      totalWords,
      totalReadingTime,
    }
  } catch (error) {
    console.error("Error fetching author data:", error)
    return null
  }
}

function AuthorPostCard({ post }: { post: BlogPost }) {
  return (
    <Card className="h-full hover:shadow-lg transition-shadow duration-200">
      <CardHeader className="p-0">
        {post.featured_image_url && (
          <div className="aspect-video w-full overflow-hidden rounded-t-lg">
            <img
              src={post.featured_image_url || "/placeholder.svg"}
              alt={post.title}
              className="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
            />
          </div>
        )}
      </CardHeader>
      <CardContent className="p-6">
        <div className="space-y-3">
          <div className="flex items-center gap-2 text-sm text-gray-600">
            <Calendar className="h-4 w-4" />
            <span>{getTimeAgo(post.published_at)}</span>
          </div>

<h3 className="text-lg font-bold leading-tight hover:text-blue-600 transition-colors">
            <Link href={`/blog/${post.id}`}>{post.title}</Link>
          </h3>

<p className="text-gray-600 line-clamp-3">{post.excerpt}</p>

<div className="flex items-center justify-between pt-4 border-t border-gray-100">
            <div className="flex items-center gap-4 text-sm text-gray-500">
              <div className="flex items-center gap-1">
                <Clock className="h-4 w-4" />
                <span>{post.reading_time_minutes} min</span>
              </div>
              <div className="flex items-center gap-1">
                <FileText className="h-4 w-4" />
                <Badge variant="secondary" className="text-xs">
                  {post.word_count} words
                </Badge>
              </div>
            </div>

<Link href={`/blog/${post.id}`}>
              <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700">
                Read more →
              </Button>
            </Link>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export default async function AuthorPage({ params }: { params: { id: string } }) {
  const authorData = await getAuthorData(params.id)

if (!authorData) {
    notFound()
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Back button */}
        <div className="mb-8">
          <Link href="/blog">
            <Button variant="ghost" className="flex items-center gap-2">
              <ArrowLeft className="h-4 w-4" />
              Back to Blog
            </Button>
          </Link>
        </div>

{/* Author Header */}
        <div className="bg-white rounded-lg p-8 mb-8 shadow-sm">
          <div className="flex items-center gap-6">
            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-3xl font-bold">
              {authorData.name.charAt(0).toUpperCase()}
            </div>
            <div className="flex-1">
              <h1 className="text-3xl font-bold text-gray-900 mb-2">{authorData.name}</h1>
              <p className="text-gray-600 mb-4">Writer and contributor to the Docpadly community blog.</p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center md:text-left">
                  <div className="text-2xl font-bold text-blue-600">{authorData.totalPosts}</div>
                  <div className="text-sm text-gray-600">Published Posts</div>
                </div>
                <div className="text-center md:text-left">
                  <div className="text-2xl font-bold text-green-600">{authorData.totalWords.toLocaleString()}</div>
                  <div className="text-sm text-gray-600">Total Words</div>
                </div>
                <div className="text-center md:text-left">
                  <div className="text-2xl font-bold text-purple-600">{authorData.totalReadingTime}</div>
                  <div className="text-sm text-gray-600">Minutes of Reading</div>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Posts Section */}
        <div className="mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-6">
            All Posts by {authorData.name} ({authorData.totalPosts})
          </h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {authorData.posts.map((post) => (
              <AuthorPostCard key={post.id} post={post} />
            ))}
          </div>
        </div>

{/* Call to Action */}
        <div className="text-center py-12 bg-white rounded-lg">
          <h3 className="text-xl font-bold text-gray-900 mb-4">Inspired by {authorData.name}'s writing?</h3>
          <p className="text-gray-600 mb-6 max-w-md mx-auto">
            Join our community and share your own insights and experiences.
          </p>
          <Link href="/blog/create">
            <Button className="bg-blue-600 hover:bg-blue-700">
              <FileText className="h-4 w-4 mr-2" />
              Start Writing
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/loading.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function BlogLoading() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Header Skeleton */}
        <div className="text-center mb-12">
          <div className="w-96 h-10 bg-gray-200 animate-pulse rounded mx-auto mb-4" />
          <div className="w-full max-w-2xl h-6 bg-gray-200 animate-pulse rounded mx-auto mb-8" />

{/* Stats Skeleton */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          {Array.from({ length: 3 }).map((_, i) => (
            <Card key={i}>
              <CardContent className="p-6 text-center">
                <div className="w-16 h-8 bg-gray-200 animate-pulse rounded mx-auto mb-2" />
                <div className="w-24 h-4 bg-gray-200 animate-pulse rounded mx-auto" />
              </CardContent>
            </Card>
          ))}
        </div>

{/* Blog Posts Grid Skeleton */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 6 }).map((_, i) => (
            <Card key={i} className="h-full">
              <CardHeader className="p-0">
                <div className="aspect-video w-full bg-gray-200 animate-pulse rounded-t-lg" />
              </CardHeader>
              <CardContent className="p-6">
                <div className="space-y-3">
                  {/* Author and date */}
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 bg-gray-200 animate-pulse rounded" />
                    <div className="w-24 h-4 bg-gray-200 animate-pulse rounded" />
                    <div className="w-2 h-4 bg-gray-200 animate-pulse rounded" />
                    <div className="w-16 h-4 bg-gray-200 animate-pulse rounded" />
                  </div>

{/* Title */}
                  <div className="space-y-2">
                    <div className="w-full h-6 bg-gray-200 animate-pulse rounded" />
                    <div className="w-3/4 h-6 bg-gray-200 animate-pulse rounded" />
                  </div>

{/* Excerpt */}
                  <div className="space-y-2">
                    <div className="w-full h-4 bg-gray-200 animate-pulse rounded" />
                    <div className="w-full h-4 bg-gray-200 animate-pulse rounded" />
                    <div className="w-2/3 h-4 bg-gray-200 animate-pulse rounded" />
                  </div>

{/* Footer */}
                  <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                    <div className="flex items-center gap-4">
                      <div className="w-16 h-4 bg-gray-200 animate-pulse rounded" />
                      <div className="w-20 h-4 bg-gray-200 animate-pulse rounded" />
                    </div>
                    <div className="w-20 h-8 bg-gray-200 animate-pulse rounded" />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Call to Action Skeleton */}
        <div className="text-center mt-16 py-12 bg-white rounded-lg">
          <div className="w-64 h-8 bg-gray-200 animate-pulse rounded mx-auto mb-4" />
          <div className="w-80 h-4 bg-gray-200 animate-pulse rounded mx-auto mb-6" />
          <div className="w-40 h-10 bg-gray-200 animate-pulse rounded mx-auto" />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

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

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]sql:file="scripts/create-blog-storage.sql" isEdit="true" isMerged="true"
-- Create storage bucket for blog images
INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
VALUES (
  'blog-images',
  'blog-images',
  true,
  10485760, -- 10MB limit
  ARRAY['image/jpeg', 'image/png', 'image/webp', 'image/gif']
) ON CONFLICT (id) DO NOTHING;

-- Create storage policies for blog images
CREATE POLICY "Anyone can view blog images" ON storage.objects
  FOR SELECT USING (bucket_id = 'blog-images');

CREATE POLICY "Authenticated users can upload blog images" ON storage.objects
  FOR INSERT WITH CHECK (
    bucket_id = 'blog-images' 
    AND auth.role() = 'authenticated'
  );

CREATE POLICY "Users can update their own blog images" ON storage.objects
  FOR UPDATE USING (
    bucket_id = 'blog-images' 
    AND auth.uid()::text = (storage.foldername(name))[1]
  );

CREATE POLICY "Users can delete their own blog images" ON storage.objects
  FOR DELETE USING (
    bucket_id = 'blog-images' 
    AND auth.uid()::text = (storage.foldername(name))[1]
  );
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { UserMenu } from "@/components/auth/user-menu"
import { supabase } from "@/lib/supabase"
import {
  FileText,
  Brain,
  Wand2,
  PenTool,
  MessageSquare,
  Plus,
  Sparkles,
  BookOpen,
  CheckCircle,
  Mic,
  Languages,
  GraduationCap,
} from "lucide-react"

export default function HomePage() {
  const [user, setUser] = useState<any>(null)
  const [recentDocuments, setRecentDocuments] = useState<any[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    checkUser()
  }, [])

const checkUser = async () => {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()
      setUser(user)

if (user) {
        // Load recent documents
        const { data: documents } = await supabase
          .from("documents")
          .select("*")
          .eq("user_id", user.id)
          .order("updated_at", { ascending: false })
          .limit(3)

setRecentDocuments(documents || [])
      }
    } catch (error) {
      console.error("Error checking user:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleSignOut = () => {
    setUser(null)
    setRecentDocuments([])
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <div className="flex items-center space-x-2">
              <img src="/docpadly-logo.png" alt="Docpadly" className="h-8 w-auto" />
              <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                Docpadly
              </span>
            </div>

<nav className="hidden md:flex items-center space-x-8">
              <Link href="/documents" className="text-gray-600 hover:text-blue-600 transition-colors">
                My Documents
              </Link>
              <Link href="/blog" className="text-gray-600 hover:text-blue-600 transition-colors">
                Updates & Tips
              </Link>
              <Link href="#features" className="text-gray-600 hover:text-blue-600 transition-colors">
                Features
              </Link>
            </nav>

<div className="flex items-center space-x-4">
              {user ? (
                <UserMenu user={user} onSignOut={handleSignOut} />
              ) : (
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" className="text-gray-600 hover:text-blue-600">
                    Sign In
                  </Button>
                  <Link href="/editor/new">
                    <Button className="bg-blue-600 hover:bg-blue-700 text-white">Try Editor</Button>
                  </Link>
                </div>
              )}
            </div>
          </div>
        </div>
      </header>

{user ? (
        /* Dashboard for logged-in users */
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="mb-12">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">
              Welcome back, {user.user_metadata?.full_name || user.email?.split("@")[0] || "there"}!
            </h1>
            <p className="text-xl text-gray-600">Continue writing with AI-powered assistance</p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Quick Actions */}
            <div className="lg:col-span-2">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-bold text-gray-900">Your Documents</h2>
                <Link href="/editor/new">
                  <Button className="bg-blue-600 hover:bg-blue-700">
                    <Plus className="h-4 w-4 mr-2" />
                    New Document
                  </Button>
                </Link>
              </div>

{recentDocuments.length > 0 ? (
                <div className="space-y-4">
                  {recentDocuments.map((doc) => (
                    <Card key={doc.id} className="hover:shadow-lg transition-shadow cursor-pointer">
                      <CardContent className="p-6">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-4">
                            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                              <FileText className="h-6 w-6 text-blue-600" />
                            </div>
                            <div>
                              <h3 className="font-semibold text-gray-900">{doc.title || "Untitled Document"}</h3>
                              <p className="text-sm text-gray-600">
                                Last edited {new Date(doc.updated_at).toLocaleDateString()}
                              </p>
                            </div>
                          </div>
                          <Link href={`/editor/${doc.id}`}>
                            <Button variant="ghost" size="sm">
                              Open →
                            </Button>
                          </Link>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                  <Link href="/documents">
                    <Button variant="outline" className="w-full bg-white">
                      View All Documents
                    </Button>
                  </Link>
                </div>
              ) : (
                <Card className="text-center py-12">
                  <CardContent>
                    <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">No documents yet</h3>
                    <p className="text-gray-600 mb-6">Create your first AI-powered document to get started</p>
                    <Link href="/editor/new">
                      <Button className="bg-blue-600 hover:bg-blue-700">
                        <Plus className="h-4 w-4 mr-2" />
                        Create First Document
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              )}
            </div>

{/* AI Features Sidebar */}
            <div className="space-y-6">
              <Card className="bg-gradient-to-br from-purple-50 to-blue-50 border-purple-200">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Sparkles className="h-5 w-5 text-purple-600" />
                    AI Writing Assistant
                  </CardTitle>
                  <CardDescription>Enhance your writing with intelligent suggestions</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="flex items-center gap-2 text-sm">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <span>Grammar & Style Corrections</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <span>Content Improvement</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <span>Translation & Summarization</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm">
                    <CheckCircle className="h-4 w-4 text-green-600" />
                    <span>Voice Notes & Transcription</span>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <BookOpen className="h-5 w-5 text-blue-600" />
                    Latest Updates
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <div className="text-sm">
                      <div className="font-medium text-gray-900">New AI Voice Notes Feature</div>
                      <div className="text-gray-600">Record, transcribe, and structure your thoughts</div>
                    </div>
                    <div className="text-sm">
                      <div className="font-medium text-gray-900">Enhanced Grammar Checking</div>
                      <div className="text-gray-600">More accurate AI-powered corrections</div>
                    </div>
                    <Link href="/blog">
                      <Button variant="ghost" size="sm" className="w-full mt-3">
                        View All Updates →
                      </Button>
                    </Link>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      ) : (
        /* Landing page for non-logged-in users */
        <>
          {/* Hero Section */}
          <section className="py-20 px-4 sm:px-6 lg:px-8">
            <div className="max-w-7xl mx-auto text-center">
              <Badge variant="secondary" className="mb-4 bg-blue-100 text-blue-800">
                ✨ AI-Powered Word Processing
              </Badge>

<h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
                Write Smarter with
                <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  {" "}
                  AI Assistance
                </span>
              </h1>

<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
                Experience the future of writing with intelligent suggestions, real-time grammar checking, voice
                transcription, and powerful AI tools that help you create better content faster.
              </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
                <Link href="/editor/new">
                  <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3">
                    <PenTool className="mr-2 h-5 w-5" />
                    Start Writing Now
                  </Button>
                </Link>

<Link href="#features">
                  <Button variant="outline" size="lg" className="px-8 py-3 bg-white/80">
                    <Brain className="mr-2 h-5 w-5" />
                    Explore AI Features
                  </Button>
                </Link>
              </div>

{/* Hero Demo */}
              <div className="relative max-w-5xl mx-auto">
                <div className="bg-white rounded-lg shadow-2xl border overflow-hidden">
                  <div className="bg-gray-50 px-4 py-3 border-b flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <div className="w-3 h-3 bg-red-400 rounded-full"></div>
                      <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
                      <div className="w-3 h-3 bg-green-400 rounded-full"></div>
                    </div>
                    <div className="text-sm text-gray-600">AI Writing Assistant Active</div>
                    <div className="flex items-center space-x-2">
                      <Sparkles className="h-4 w-4 text-purple-600" />
                      <span className="text-sm text-purple-600">AI</span>
                    </div>
                  </div>
                  <div className="p-8 text-left">
                    <h3 className="text-2xl font-bold mb-4">The Future of Content Creation</h3>
                    <div className="space-y-3 text-gray-600">
                      <p>
                        Docpadly combines traditional word processing with cutting-edge AI technology to revolutionize
                        how you write, edit, and create content.
                      </p>
                      <div className="bg-blue-50 border-l-4 border-blue-400 p-3 rounded">
                        <div className="flex items-center gap-2 text-blue-800 text-sm">
                          <Wand2 className="h-4 w-4" />
                          <span className="font-medium">AI Suggestion:</span>
                          <span>Consider adding specific examples to strengthen this paragraph.</span>
                        </div>
                      </div>
                      <p>✨ Real-time grammar and style suggestions</p>
                      <p>🎤 Voice-to-text with intelligent transcription</p>
                      <p>🌍 Instant translation to 50+ languages</p>
                      <p>📝 Smart content generation and improvement</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

{/* AI Features Section */}
          <section id="features" className="py-20 bg-white">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="text-center mb-16">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                  Powerful AI Features for Better Writing
                </h2>
                <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                  Discover how artificial intelligence can transform your writing process and help you create
                  exceptional content.
                </p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-blue-50 to-blue-100">
                  <CardHeader>
                    <div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
                      <Wand2 className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle>Smart Writing Assistant</CardTitle>
                    <CardDescription>
                      Get intelligent suggestions for improving clarity, tone, and style as you write.
                    </CardDescription>
                  </CardHeader>
                </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-green-50 to-green-100">
                  <CardHeader>
                    <div className="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
                      <CheckCircle className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle>Advanced Grammar Check</CardTitle>
                    <CardDescription>
                      AI-powered grammar and spell checking that understands context and nuance.
                    </CardDescription>
                  </CardHeader>
                </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-purple-50 to-purple-100">
                  <CardHeader>
                    <div className="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
                      <Mic className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle>Voice Notes & Transcription</CardTitle>
                    <CardDescription>
                      Record your thoughts and let AI transcribe and structure them into organized notes.
                    </CardDescription>
                  </CardHeader>
                </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-orange-50 to-orange-100">
                  <CardHeader>
                    <div className="w-12 h-12 bg-orange-600 rounded-lg flex items-center justify-center mb-4">
                      <Languages className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle>Instant Translation</CardTitle>
                    <CardDescription>
                      Translate your content to over 50 languages with AI-powered accuracy and context awareness.
                    </CardDescription>
                  </CardHeader>
                </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-red-50 to-red-100">
                  <CardHeader>
                    <div className="w-12 h-12 bg-red-600 rounded-lg flex items-center justify-center mb-4">
                      <MessageSquare className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle>Content Generation</CardTitle>
                    <CardDescription>
                      Generate ideas, outlines, and content based on your prompts and writing style.
                    </CardDescription>
                  </CardHeader>
                </Card>

<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-indigo-50 to-indigo-100">
                  <CardHeader>
                    <div className="w-12 h-12 bg-indigo-600 rounded-lg flex items-center justify-center mb-4">
                      <GraduationCap className="h-6 w-6 text-white" />
                    </div>
                    <CardTitle>Essay Grading & Feedback</CardTitle>
                    <CardDescription>
                      Get detailed feedback and grades on your essays with AI-powered analysis and suggestions.
                    </CardDescription>
                  </CardHeader>
                </Card>
              </div>
            </div>
          </section>

{/* How It Works Section */}
          <section className="py-20 bg-gray-50">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="text-center mb-16">
                <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">How AI Enhances Your Writing</h2>
                <p className="text-xl text-gray-600 max-w-2xl mx-auto">
                  See how our AI-powered features work seamlessly with your writing process.
                </p>
              </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="text-center">
                  <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl font-bold text-white">1</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">Write Naturally</h3>
                  <p className="text-gray-600">
                    Start writing as you normally would. Our AI observes your style and content in real-time.
                  </p>
                </div>

<div className="text-center">
                  <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl font-bold text-white">2</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">Get Smart Suggestions</h3>
                  <p className="text-gray-600">
                    Receive intelligent suggestions for improvements, corrections, and enhancements as you type.
                  </p>
                </div>

<div className="text-center">
                  <div className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl font-bold text-white">3</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">Create Better Content</h3>
                  <p className="text-gray-600">
                    Apply AI suggestions to improve clarity, fix errors, and enhance your writing quality instantly.
                  </p>
                </div>
              </div>
            </div>
          </section>

{/* CTA Section */}
          <section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600">
            <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
              <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
                Ready to Experience AI-Powered Writing?
              </h2>
              <p className="text-xl text-blue-100 mb-8">
                Join thousands of writers who have already discovered the power of AI-assisted content creation.
              </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link href="/editor/new">
                  <Button size="lg" variant="secondary" className="px-8 py-3">
                    <PenTool className="mr-2 h-5 w-5" />
                    Start Writing Free
                  </Button>
                </Link>

<Link href="/blog">
                  <Button
                    size="lg"
                    variant="outline"
                    className="px-8 py-3 border-white text-white hover:bg-white/10 bg-transparent"
                  >
                    <BookOpen className="mr-2 h-5 w-5" />
                    Learn More
                  </Button>
                </Link>
              </div>
            </div>
          </section>
        </>
      )}

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <img src="/docpadly-logo.png" alt="Docpadly" className="h-8 w-auto" />
                <span className="text-xl font-bold">Docpadly</span>
              </div>
              <p className="text-gray-400">AI-powered word processing for the modern writer.</p>
            </div>

<div>
              <h3 className="font-semibold mb-4">Product</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <Link href="/editor/new" className="hover:text-white transition-colors">
                    Word Processor
                  </Link>
                </li>
                <li>
                  <Link href="#features" className="hover:text-white transition-colors">
                    AI Features
                  </Link>
                </li>
                <li>
                  <Link href="/documents" className="hover:text-white transition-colors">
                    My Documents
                  </Link>
                </li>
              </ul>
            </div>

<div>
              <h3 className="font-semibold mb-4">Resources</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <Link href="/blog" className="hover:text-white transition-colors">
                    Updates & Tips
                  </Link>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Help Center
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Tutorials
                  </a>
                </li>
              </ul>
            </div>

<div>
              <h3 className="font-semibold mb-4">Company</h3>
              <ul className="space-y-2 text-gray-400">
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    About Us
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Privacy Policy
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-white transition-colors">
                    Terms of Service
                  </a>
                </li>
              </ul>
            </div>
          </div>

<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>© 2025 Docpadly. All rights reserved. Powered by AI.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/blog/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { ArrowLeft, Search, Calendar, Clock, Sparkles, Brain, Mic, Languages, Wand2, BookOpen } from "lucide-react"

const blogPosts = [
  {
    id: 1,
    title: "Introducing AI Voice Notes: Transform Speech into Structured Content",
    excerpt:
      "Our new AI Voice Notes feature lets you record your thoughts and automatically transcribe them into well-organized, structured notes. Perfect for brainstorming, meeting notes, and capturing ideas on the go.",
    date: "2025-01-15",
    readTime: "4 min read",
    category: "New Feature",
    icon: Mic,
    color: "bg-purple-100 text-purple-800",
  },
  {
    id: 2,
    title: "Enhanced AI Grammar Checking: Context-Aware Corrections",
    excerpt:
      "We've upgraded our grammar checking system with advanced AI that understands context, tone, and writing style. Get more accurate suggestions that preserve your unique voice while improving clarity.",
    date: "2025-01-10",
    readTime: "3 min read",
    category: "Improvement",
    icon: Wand2,
    color: "bg-green-100 text-green-800",
  },
  {
    id: 3,
    title: "Writing Tips: How to Use AI Suggestions Effectively",
    excerpt:
      "Learn how to make the most of Docpadly's AI writing assistant. Discover best practices for incorporating AI suggestions while maintaining your personal writing style and voice.",
    date: "2025-01-05",
    readTime: "6 min read",
    category: "Tips & Tricks",
    icon: Brain,
    color: "bg-blue-100 text-blue-800",
  },
  {
    id: 4,
    title: "Multi-Language Support: Write and Translate in 50+ Languages",
    excerpt:
      "Docpadly now supports real-time translation and writing assistance in over 50 languages. Create content in your native language and instantly translate it for global audiences.",
    date: "2024-12-28",
    readTime: "5 min read",
    category: "New Feature",
    icon: Languages,
    color: "bg-orange-100 text-orange-800",
  },
  {
    id: 5,
    title: "Productivity Boost: Keyboard Shortcuts for Power Users",
    excerpt:
      "Master Docpadly's keyboard shortcuts to write faster and more efficiently. From basic formatting to advanced AI features, these shortcuts will transform your writing workflow.",
    date: "2024-12-20",
    readTime: "4 min read",
    category: "Tips & Tricks",
    icon: BookOpen,
    color: "bg-indigo-100 text-indigo-800",
  },
  {
    id: 6,
    title: "AI Content Generation: From Ideas to Full Articles",
    excerpt:
      "Discover how to use Docpadly's AI content generation features to overcome writer's block, create outlines, and develop full articles from simple prompts and ideas.",
    date: "2024-12-15",
    readTime: "7 min read",
    category: "Tutorial",
    icon: Sparkles,
    color: "bg-pink-100 text-pink-800",
  },
]

export default function BlogPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("All")

const categories = ["All", "New Feature", "Improvement", "Tips & Tricks", "Tutorial"]

const filteredPosts = blogPosts.filter((post) => {
    const matchesSearch =
      post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      post.excerpt.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesCategory = selectedCategory === "All" || post.category === selectedCategory
    return matchesSearch && matchesCategory
  })

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center justify-between mb-6">
            <Link href="/">
              <Button variant="ghost" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Home
              </Button>
            </Link>
          </div>

<div className="text-center">
            <h1 className="text-4xl font-bold text-gray-900 mb-4">Updates & Writing Tips</h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
              Stay updated with the latest AI-powered features, improvements, and expert tips to enhance your writing
              experience with Docpadly.
            </p>

{/* Search and Filter */}
            <div className="flex flex-col sm:flex-row gap-4 items-center justify-center">
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search posts..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 bg-white"
                />
              </div>

<div className="flex gap-2 flex-wrap">
                {categories.map((category) => (
                  <Button
                    key={category}
                    variant={selectedCategory === category ? "default" : "outline"}
                    size="sm"
                    onClick={() => setSelectedCategory(category)}
                    className={selectedCategory === category ? "bg-blue-600 hover:bg-blue-700" : "bg-white"}
                  >
                    {category}
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Blog Posts */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {filteredPosts.length > 0 ? (
          <div className="space-y-8">
            {filteredPosts.map((post) => {
              const IconComponent = post.icon
              return (
                <Card key={post.id} className="hover:shadow-lg transition-shadow bg-white">
                  <CardHeader>
                    <div className="flex items-start justify-between">
                      <div className="flex items-center gap-4">
                        <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                          <IconComponent className="h-6 w-6 text-white" />
                        </div>
                        <div>
                          <Badge className={post.color}>{post.category}</Badge>
                          <CardTitle className="text-2xl font-bold text-gray-900 mt-2 mb-2">{post.title}</CardTitle>
                          <div className="flex items-center gap-4 text-sm text-gray-600">
                            <div className="flex items-center gap-1">
                              <Calendar className="h-4 w-4" />
                              <span>{new Date(post.date).toLocaleDateString()}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Clock className="h-4 w-4" />
                              <span>{post.readTime}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <p className="text-gray-600 text-lg leading-relaxed mb-4">{post.excerpt}</p>
                    <Button variant="ghost" className="text-blue-600 hover:text-blue-700 p-0">
                      Read more →
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        ) : (
          <div className="text-center py-12">
            <Search className="h-12 w-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">No posts found</h3>
            <p className="text-gray-600">Try adjusting your search terms or category filter.</p>
          </div>
        )}

{/* Newsletter Signup */}
        <Card className="mt-16 bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
          <CardContent className="p-8 text-center">
            <h3 className="text-2xl font-bold text-gray-900 mb-4">Stay Updated</h3>
            <p className="text-gray-600 mb-6 max-w-md mx-auto">
              Get notified about new AI features, writing tips, and product updates delivered to your inbox.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
              <Input placeholder="Enter your email" className="bg-white" />
              <Button className="bg-blue-600 hover:bg-blue-700 whitespace-nowrap">Subscribe</Button>
            </div>
          </CardContent>
        </Card>

{/* Quick Links */}
        <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card className="bg-white">
            <CardContent className="p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">Need Help?</h3>
              <p className="text-gray-600 mb-4">
                Check out our help center for detailed guides and troubleshooting tips.
              </p>
              <Button variant="outline" className="bg-transparent">
                Visit Help Center
              </Button>
            </CardContent>
          </Card>

<Card className="bg-white">
            <CardContent className="p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">Try AI Features</h3>
              <p className="text-gray-600 mb-4">
                Experience the power of AI-assisted writing with our advanced word processor.
              </p>
              <Link href="/editor/new">
                <Button className="bg-blue-600 hover:bg-blue-700">Start Writing</Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/documents/page.tsx"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { supabase } from "@/lib/supabase"
import {
  FileText,
  Plus,
  Search,
  MoreVertical,
  Edit,
  Trash2,
  Copy,
  Download,
  Clock,
  ArrowLeft,
  Grid,
  List,
  Filter,
} from "lucide-react"

interface Document {
  id: string
  title: string
  content: string
  created_at: string
  updated_at: string
  user_id: string
}

export default function DocumentsPage() {
  const [documents, setDocuments] = useState<Document[]>([])
  const [filteredDocuments, setFilteredDocuments] = useState<Document[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [sortBy, setSortBy] = useState<"updated" | "created" | "title">("updated")
  const [isLoading, setIsLoading] = useState(true)
  const [user, setUser] = useState<any>(null)

useEffect(() => {
    checkUserAndLoadDocuments()
  }, [])

useEffect(() => {
    filterAndSortDocuments()
  }, [documents, searchTerm, sortBy])

const checkUserAndLoadDocuments = async () => {
    try {
      const {
        data: { user },
      } = await supabase.auth.getUser()

if (!user) {
        window.location.href = "/"
        return
      }

setUser(user)

const { data, error } = await supabase
        .from("documents")
        .select("*")
        .eq("user_id", user.id)
        .order("updated_at", { ascending: false })

if (error) {
        console.error("Error loading documents:", error)
      } else {
        setDocuments(data || [])
      }
    } catch (error) {
      console.error("Error:", error)
    } finally {
      setIsLoading(false)
    }
  }

const filterAndSortDocuments = () => {
    const filtered = documents.filter(
      (doc) =>
        doc.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        doc.content.toLowerCase().includes(searchTerm.toLowerCase()),
    )

filtered.sort((a, b) => {
      switch (sortBy) {
        case "title":
          return a.title.localeCompare(b.title)
        case "created":
          return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
        case "updated":
        default:
          return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
      }
    })

setFilteredDocuments(filtered)
  }

const handleDeleteDocument = async (docId: string) => {
    if (!confirm("Are you sure you want to delete this document?")) return

try {
      const { error } = await supabase.from("documents").delete().eq("id", docId)

if (error) {
        console.error("Error deleting document:", error)
      } else {
        setDocuments(documents.filter((doc) => doc.id !== docId))
      }
    } catch (error) {
      console.error("Error deleting document:", error)
    }
  }

const handleDuplicateDocument = async (doc: Document) => {
    try {
      const { data, error } = await supabase
        .from("documents")
        .insert([
          {
            title: `${doc.title} (Copy)`,
            content: doc.content,
            user_id: user.id,
          },
        ])
        .select()
        .single()

if (error) {
        console.error("Error duplicating document:", error)
      } else {
        setDocuments([data, ...documents])
      }
    } catch (error) {
      console.error("Error duplicating document:", error)
    }
  }

const getWordCount = (content: string) => {
    return content
      .replace(/<[^>]*>/g, " ")
      .trim()
      .split(/\s+/)
      .filter((word) => word.length > 0).length
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60)

if (diffInHours < 24) {
      return `${Math.floor(diffInHours)} hours ago`
    } else if (diffInHours < 168) {
      return `${Math.floor(diffInHours / 24)} days ago`
    } else {
      return date.toLocaleDateString()
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading your documents...</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center gap-4">
            <Link href="/">
              <Button variant="ghost" className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Home
              </Button>
            </Link>
            <div>
              <h1 className="text-3xl font-bold text-gray-900">My Documents</h1>
              <p className="text-gray-600">{documents.length} documents</p>
            </div>
          </div>

<Link href="/editor/new">
            <Button className="bg-blue-600 hover:bg-blue-700">
              <Plus className="h-4 w-4 mr-2" />
              New Document
            </Button>
          </Link>
        </div>

{/* Search and Controls */}
        <div className="flex flex-col sm:flex-row gap-4 mb-8">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search documents..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 bg-white"
            />
          </div>

<div className="flex items-center gap-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" className="bg-white">
                  <Filter className="h-4 w-4 mr-2" />
                  Sort by {sortBy === "updated" ? "Updated" : sortBy === "created" ? "Created" : "Title"}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="bg-white">
                <DropdownMenuItem onClick={() => setSortBy("updated")}>Last Updated</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setSortBy("created")}>Date Created</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setSortBy("title")}>Title</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

<div className="flex border rounded-lg bg-white">
              <Button
                variant={viewMode === "grid" ? "default" : "ghost"}
                size="sm"
                onClick={() => setViewMode("grid")}
                className={viewMode === "grid" ? "bg-blue-600 hover:bg-blue-700" : ""}
              >
                <Grid className="h-4 w-4" />
              </Button>
              <Button
                variant={viewMode === "list" ? "default" : "ghost"}
                size="sm"
                onClick={() => setViewMode("list")}
                className={viewMode === "list" ? "bg-blue-600 hover:bg-blue-700" : ""}
              >
                <List className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>

{/* Documents */}
        {filteredDocuments.length > 0 ? (
          <div className={viewMode === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" : "space-y-4"}>
            {filteredDocuments.map((doc) => (
              <Card
                key={doc.id}
                className={`hover:shadow-lg transition-shadow bg-white ${
                  viewMode === "list" ? "flex items-center" : ""
                }`}
              >
                <CardContent className={`${viewMode === "list" ? "flex items-center w-full p-4" : "p-6"}`}>
                  {viewMode === "grid" ? (
                    <div>
                      <div className="flex items-start justify-between mb-4">
                        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                          <FileText className="h-6 w-6 text-blue-600" />
                        </div>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent className="bg-white" align="end">
                            <DropdownMenuItem asChild>
                              <Link href={`/editor/${doc.id}`} className="flex items-center">
                                <Edit className="h-4 w-4 mr-2" />
                                Edit
                              </Link>
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleDuplicateDocument(doc)}>
                              <Copy className="h-4 w-4 mr-2" />
                              Duplicate
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Download className="h-4 w-4 mr-2" />
                              Download
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleDeleteDocument(doc.id)} className="text-red-600">
                              <Trash2 className="h-4 w-4 mr-2" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>

<h3 className="font-semibold text-gray-900 mb-2 line-clamp-2">
                        {doc.title || "Untitled Document"}
                      </h3>

<p className="text-sm text-gray-600 mb-4 line-clamp-3">
                        {doc.content.replace(/<[^>]*>/g, "").substring(0, 150)}...
                      </p>

<div className="flex items-center justify-between text-xs text-gray-500">
                        <div className="flex items-center gap-1">
                          <Clock className="h-3 w-3" />
                          <span>{formatDate(doc.updated_at)}</span>
                        </div>
                        <Badge variant="secondary">{getWordCount(doc.content)} words</Badge>
                      </div>

<Link href={`/editor/${doc.id}`}>
                        <Button className="w-full mt-4 bg-blue-600 hover:bg-blue-700">Open Document</Button>
                      </Link>
                    </div>
                  ) : (
                    <div className="flex items-center justify-between w-full">
                      <div className="flex items-center gap-4">
                        <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                          <FileText className="h-5 w-5 text-blue-600" />
                        </div>
                        <div>
                          <h3 className="font-semibold text-gray-900">{doc.title || "Untitled Document"}</h3>
                          <div className="flex items-center gap-4 text-sm text-gray-600">
                            <span>{formatDate(doc.updated_at)}</span>
                            <Badge variant="secondary">{getWordCount(doc.content)} words</Badge>
                          </div>
                        </div>
                      </div>

<div className="flex items-center gap-2">
                        <Link href={`/editor/${doc.id}`}>
                          <Button size="sm" className="bg-blue-600 hover:bg-blue-700">
                            Open
                          </Button>
                        </Link>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                              <MoreVertical className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent className="bg-white" align="end">
                            <DropdownMenuItem onClick={() => handleDuplicateDocument(doc)}>
                              <Copy className="h-4 w-4 mr-2" />
                              Duplicate
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Download className="h-4 w-4 mr-2" />
                              Download
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleDeleteDocument(doc.id)} className="text-red-600">
                              <Trash2 className="h-4 w-4 mr-2" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            ))}
          </div>
        ) : (
          <div className="text-center py-16">
            {searchTerm ? (
              <>
                <Search className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No documents found</h3>
                <p className="text-gray-600 mb-6">Try adjusting your search terms.</p>
                <Button variant="outline" onClick={() => setSearchTerm("")} className="bg-white">
                  Clear Search
                </Button>
              </>
            ) : (
              <>
                <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No documents yet</h3>
                <p className="text-gray-600 mb-6">Create your first AI-powered document to get started.</p>
                <Link href="/editor/new">
                  <Button className="bg-blue-600 hover:bg-blue-700">
                    <Plus className="h-4 w-4 mr-2" />
                    Create First Document
                  </Button>
                </Link>
              </>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/documents/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/auth/user-menu.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { UserIcon, LogOutIcon, SettingsIcon, FileTextIcon, PlusIcon } from "lucide-react"
import { supabase } from "@/lib/supabase"
import Link from "next/link"

interface UserMenuProps {
  user: any
  onSignOut: () => void
}

export function UserMenu({ user, onSignOut }: UserMenuProps) {
  const [isSigningOut, setIsSigningOut] = useState(false)

const handleSignOut = async () => {
    setIsSigningOut(true)
    try {
      await supabase.auth.signOut()
      onSignOut()
    } catch (error) {
      console.error("Error signing out:", error)
    } finally {
      setIsSigningOut(false)
    }
  }

const getInitials = (email: string) => {
    if (!email) return "U"
    return email.substring(0, 2).toUpperCase()
  }

const getUserEmail = () => {
    return user?.email || user?.user_metadata?.email || "Unknown User"
  }

const getUserDisplayName = () => {
    return user?.user_metadata?.full_name || user?.email?.split("@")[0] || "User"
  }

// Safety check for user object
  if (!user) {
    return (
      <div className="flex items-center space-x-2">
        <Button variant="ghost" className="text-gray-600 hover:text-blue-600">
          Sign In
        </Button>
        <Link href="/editor/new">
          <Button className="bg-blue-600 hover:bg-blue-700 text-white">Try Editor</Button>
        </Link>
      </div>
    )
  }

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
          <Avatar className="h-8 w-8">
            <AvatarFallback className="bg-blue-600 text-white text-xs">{getInitials(getUserEmail())}</AvatarFallback>
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56 bg-white border border-gray-200 shadow-lg" align="end" forceMount>
        <div className="flex items-center justify-start gap-2 p-2">
          <div className="flex flex-col space-y-1 leading-none">
            <p className="font-medium text-sm">{getUserDisplayName()}</p>
            <p className="text-xs text-gray-600">{getUserEmail()}</p>
            <p className="text-xs text-gray-500">Free Plan</p>
          </div>
        </div>
        <DropdownMenuSeparator className="bg-gray-200" />
        <DropdownMenuItem asChild className="hover:bg-gray-50 focus:bg-gray-50">
          <Link href="/editor/new" className="flex items-center">
            <PlusIcon className="mr-2 h-4 w-4" />
            <span>New Document</span>
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild className="hover:bg-gray-50 focus:bg-gray-50">
          <Link href="/documents" className="flex items-center">
            <FileTextIcon className="mr-2 h-4 w-4" />
            <span>My Documents</span>
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem className="hover:bg-gray-50 focus:bg-gray-50">
          <UserIcon className="mr-2 h-4 w-4" />
          <span>Profile</span>
        </DropdownMenuItem>
        <DropdownMenuItem className="hover:bg-gray-50 focus:bg-gray-50">
          <SettingsIcon className="mr-2 h-4 w-4" />
          <span>Settings</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator className="bg-gray-200" />
        <DropdownMenuItem
          className="hover:bg-gray-50 focus:bg-gray-50 text-red-600"
          onClick={handleSignOut}
          disabled={isSigningOut}
        >
          <LogOutIcon className="mr-2 h-4 w-4" />
          <span>{isSigningOut ? "Signing out..." : "Sign out"}</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
[V0_FILE]typescriptreact:file="components/blog/rich-text-editor.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import {
  Bold,
  Italic,
  Underline,
  AlignLeft,
  AlignCenter,
  AlignRight,
  List,
  ListOrdered,
  Quote,
  Link,
  ImageIcon,
  Undo,
  Redo,
} from "lucide-react"

interface RichTextEditorProps {
  content: string
  onChange: (content: string) => void
  placeholder?: string
  className?: string
}

export function RichTextEditor({
  content,
  onChange,
  placeholder = "Start writing...",
  className = "",
}: RichTextEditorProps) {
  const editorRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    if (editorRef.current && editorRef.current.innerHTML !== content) {
      editorRef.current.innerHTML = content
    }
  }, [content])

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.ctrlKey || e.metaKey) {
        switch (e.key.toLowerCase()) {
          case "b":
            e.preventDefault()
            execCommand("bold")
            break
          case "i":
            e.preventDefault()
            execCommand("italic")
            break
          case "u":
            e.preventDefault()
            execCommand("underline")
            break
          case "z":
            if (e.shiftKey) {
              e.preventDefault()
              execCommand("redo")
            } else {
              e.preventDefault()
              execCommand("undo")
            }
            break
          case "y":
            e.preventDefault()
            execCommand("redo")
            break
        }
      }
    }

document.addEventListener("keydown", handleKeyDown)
    return () => document.removeEventListener("keydown", handleKeyDown)
  }, [])

const execCommand = (command: string, value?: string) => {
    document.execCommand(command, false, value)
    if (editorRef.current) {
      onChange(editorRef.current.innerHTML)
    }
  }

const handleInput = () => {
    if (editorRef.current) {
      onChange(editorRef.current.innerHTML)
    }
  }

const insertLink = () => {
    const url = prompt("Enter URL:")
    if (url) {
      execCommand("createLink", url)
    }
  }

const insertImage = () => {
    const url = prompt("Enter image URL:")
    if (url) {
      execCommand("insertImage", url)
    }
  }

return (
    <div className={`border border-gray-300 rounded-lg bg-white ${className}`}>
      {/* Toolbar */}
      <div className="border-b border-gray-200 p-2 flex flex-wrap gap-1">
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("bold")}
          className="h-8 w-8 p-0"
          title="Bold (Ctrl+B)"
        >
          <Bold className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("italic")}
          className="h-8 w-8 p-0"
          title="Italic (Ctrl+I)"
        >
          <Italic className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("underline")}
          className="h-8 w-8 p-0"
          title="Underline (Ctrl+U)"
        >
          <Underline className="h-4 w-4" />
        </Button>

<Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("justifyLeft")}
          className="h-8 w-8 p-0"
          title="Align Left"
        >
          <AlignLeft className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("justifyCenter")}
          className="h-8 w-8 p-0"
          title="Align Center"
        >
          <AlignCenter className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("justifyRight")}
          className="h-8 w-8 p-0"
          title="Align Right"
        >
          <AlignRight className="h-4 w-4" />
        </Button>

<Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("insertUnorderedList")}
          className="h-8 w-8 p-0"
          title="Bullet List"
        >
          <List className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("insertOrderedList")}
          className="h-8 w-8 p-0"
          title="Numbered List"
        >
          <ListOrdered className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("formatBlock", "blockquote")}
          className="h-8 w-8 p-0"
          title="Quote"
        >
          <Quote className="h-4 w-4" />
        </Button>

<Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("undo")}
          className="h-8 w-8 p-0"
          title="Undo (Ctrl+Z)"
        >
          <Undo className="h-4 w-4" />
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => execCommand("redo")}
          className="h-8 w-8 p-0"
          title="Redo (Ctrl+Y)"
        >
          <Redo className="h-4 w-4" />
        </Button>
      </div>

{/* Editor */}
      <div
        ref={editorRef}
        contentEditable
        onInput={handleInput}
        className="min-h-[300px] p-4 focus:outline-none prose max-w-none"
        style={{ wordWrap: "break-word" }}
        data-placeholder={placeholder}
        suppressContentEditableWarning={true}
      />

export function countWords(content: string): number {
  // Remove HTML tags and count words
  const textContent = content.replace(/<[^>]*>/g, " ")
  const words = textContent
    .trim()
    .split(/\s+/)
    .filter((word) => word.length > 0)
  return words.length
}

export function generateExcerpt(content: string, maxLength = 160): string {
  // Remove HTML tags
  const textContent = content.replace(/<[^>]*>/g, " ")
  // Clean up extra whitespace
  const cleanText = textContent.replace(/\s+/g, " ").trim()

if (cleanText.length <= maxLength) {
    return cleanText
  }

// Find the last complete word within the limit
  const truncated = cleanText.substring(0, maxLength)
  const lastSpaceIndex = truncated.lastIndexOf(" ")

if (lastSpaceIndex > 0) {
    return truncated.substring(0, lastSpaceIndex) + "..."
  }

return truncated + "..."
}

export function extractExcerpt(content: string, maxLength = 160): string {
  return generateExcerpt(content, maxLength)
}

export function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  })
}

export function formatDateShort(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  })
}

export function formatRelativeTime(dateString: string): string {
  return getTimeAgo(dateString)
}

export function formatPublishDate(dateString: string): string {
  return getTimeAgo(dateString)
}

export function validateBlogPost(title: string, content: string): { isValid: boolean; errors: string[] } {
  const errors: string[] = []

if (!title.trim()) {
    errors.push("Title is required")
  } else if (title.trim().length < 5) {
    errors.push("Title must be at least 5 characters long")
  } else if (title.trim().length > 200) {
    errors.push("Title must be less than 200 characters")
  }

if (!content.trim()) {
    errors.push("Content is required")
  } else if (content.trim().length < 50) {
    errors.push("Content must be at least 50 characters long")
  }

return {
    isValid: errors.length === 0,
    errors,
  }
}

export function slugify(text: string): string {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, "") // Remove special characters
    .replace(/[\s_-]+/g, "-") // Replace spaces and underscores with hyphens
    .replace(/^-+|-+$/g, "") // Remove leading/trailing hyphens
}

export function getTimeAgo(dateString: string): string {
  const date = new Date(dateString)
  const now = new Date()
  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)

if (diffInSeconds < 60) {
    return "Just now"
  }

const diffInMinutes = Math.floor(diffInSeconds / 60)
  if (diffInMinutes < 60) {
    return `${diffInMinutes} minute${diffInMinutes === 1 ? "" : "s"} ago`
  }

const diffInHours = Math.floor(diffInMinutes / 60)
  if (diffInHours < 24) {
    return `${diffInHours} hour${diffInHours === 1 ? "" : "s"} ago`
  }

const diffInDays = Math.floor(diffInHours / 24)
  if (diffInDays < 7) {
    return `${diffInDays} day${diffInDays === 1 ? "" : "s"} ago`
  }

const diffInWeeks = Math.floor(diffInDays / 7)
  if (diffInWeeks < 4) {
    return `${diffInWeeks} week${diffInWeeks === 1 ? "" : "s"} ago`
  }

return formatDate(dateString)
}

export function getWordCount(content: string): number {
  return countWords(content)
}</article></body></html>