[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "@/components/ui/toaster" import { AuthProvider } from "@/components/auth-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "LexiBot - Your AI Legal Guide", description: "Interactive AI assistant for legal document analysis and advice", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .gradient-text { @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600; } .feature-card { @apply p-6 rounded-xl border border-border bg-card transition-all duration-300 hover:shadow-md; } .upload-area { @apply border-2 border-dashed rounded-lg p-10 text-center cursor-pointer transition-all hover:bg-muted/50; } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { BookOpen, MessageSquare, Mic, BarChart, FileText, ArrowRight, CheckCircle } from "lucide-react" import Navbar from "@/components/navbar" import Footer from "@/components/footer" export default function Home() { return (

{/* Hero Section */}

LexiBot – Your AI Legal Guide

Transform complex legal documents into clear, actionable insights with our AI-powered legal assistant.

{/* Features Section */}

Features That Stand Out

More than just a document summarizer—LexiBot is your interactive legal assistant.

Explain Laws Like a Human Lawyer

Uses Conversational AI to make legal language sound natural and easy to understand.

Interactive Q&A Mode

Ask specific questions about your legal documents and get precise answers.

Voice-Enabled Assistant

Talk to the AI instead of just reading text. Get audio responses in real-time.

AI-Generated Legal Infographics

Convert text into visual summaries like flowcharts, diagrams, and step-by-step guides.

Personalized Legal Reports

Get tailored legal guides based on your specific needs and situation.

"Explain Like I'm 5" Mode

Converts laws into fun story-based explanations using analogies anyone can understand.

{/* How It Works Section */}

How It Works

LexiBot makes legal document analysis simple and interactive in just a few steps.

Upload Document

Upload PDF, Word, or even an image with text.

AI Analysis

Our AI reads and understands the document.

Ask Questions

Ask any legal question about your document.

Get Visual Summary

Receive infographics and flowcharts to explain laws visually.

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Github, Twitter, Linkedin } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="lib/auth.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { initializeApp } from "firebase/app" import { getAuth, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut as firebaseSignOut, type User, GoogleAuthProvider, signInWithPopup, } from "firebase/auth" // Firebase configuration const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", } // Initialize Firebase const app = initializeApp(firebaseConfig) const auth = getAuth(app) const googleProvider = new GoogleAuthProvider() type AuthContextType = { user: User | null loading: boolean signIn: (email: string, password: string) => Promise signUp: (email: string, password: string) => Promise signOut: () => Promise signInWithGoogle: () => Promise } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { setUser(user) setLoading(false) }) return () => unsubscribe() }, []) const signIn = async (email: string, password: string) => { await signInWithEmailAndPassword(auth, email, password) } const signUp = async (email: string, password: string) => { await createUserWithEmailAndPassword(auth, email, password) } const signOut = async () => { await firebaseSignOut(auth) } const signInWithGoogle = async () => { await signInWithPopup(auth, googleProvider) } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/auth-provider.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" import { useRouter, usePathname } from "next/navigation" // Mock authentication for demo purposes // In a real app, this would be replaced with Firebase Auth type User = { id: string email: string name: string } type AuthContextType = { user: User | null loading: boolean signIn: (email: string, password: string) => Promise signUp: (email: string, password: string) => Promise signOut: () => void signInWithGoogle: () => Promise } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const router = useRouter() const pathname = usePathname() // Check if user is logged in on initial load useEffect(() => { const storedUser = localStorage.getItem("lexibot-user") if (storedUser) { setUser(JSON.parse(storedUser)) } setLoading(false) }, []) // Redirect to login if accessing protected routes without authentication useEffect(() => { if (!loading && !user && pathname?.startsWith("/dashboard")) { router.push("/login") } }, [loading, user, pathname, router]) const signIn = async (email: string, password: string) => { // Mock authentication - in a real app, this would call Firebase return new Promise((resolve) => { setTimeout(() => { const mockUser = { id: "user123", email, name: email.split("@")[0], } setUser(mockUser) localStorage.setItem("lexibot-user", JSON.stringify(mockUser)) resolve() }, 1000) }) } const signUp = async (email: string, password: string) => { // Mock registration - in a real app, this would call Firebase return new Promise((resolve) => { setTimeout(() => { const mockUser = { id: "user123", email, name: email.split("@")[0], } setUser(mockUser) localStorage.setItem("lexibot-user", JSON.stringify(mockUser)) resolve() }, 1000) }) } const signOut = () => { setUser(null) localStorage.removeItem("lexibot-user") if (pathname?.startsWith("/dashboard")) { router.push("/login") } } const signInWithGoogle = async () => { // Mock Google authentication - in a real app, this would call Firebase return new Promise((resolve) => { setTimeout(() => { const mockUser = { id: "google123", email: "user@gmail.com", name: "Google User", } setUser(mockUser) localStorage.setItem("lexibot-user", JSON.stringify(mockUser)) resolve() }, 1000) }) } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]typescriptreact:file="components/document-uploader.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { useToast } from "@/components/ui/use-toast" import { Upload, File, FileText, Image, X } from "lucide-react" interface DocumentUploaderProps { onUpload: (file: File) => void } export default function DocumentUploader({ onUpload }: DocumentUploaderProps) { const [isDragging, setIsDragging] = useState(false) const [selectedFile, setSelectedFile] = useState(null) const [uploadProgress, setUploadProgress] = useState(0) const [isUploading, setIsUploading] = useState(false) const fileInputRef = useRef(null) const { toast } = useToast() const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { const file = e.dataTransfer.files[0] validateAndSetFile(file) } } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { const file = e.target.files[0] validateAndSetFile(file) } } const validateAndSetFile = (file: File) => { const validTypes = [ "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "image/jpeg", "image/png", ] if (!validTypes.includes(file.type)) { toast({ title: "Invalid file type", description: "Please upload a PDF, Word document, or image file.", variant: "destructive", }) return } if (file.size > 10 * 1024 * 1024) { // 10MB limit toast({ title: "File too large", description: "Please upload a file smaller than 10MB.", variant: "destructive", }) return } setSelectedFile(file) } const handleUpload = () => { if (!selectedFile) return setIsUploading(true) // Simulate upload progress let progress = 0 const interval = setInterval(() => { progress += 5 setUploadProgress(progress) if (progress >= 100) { clearInterval(interval) setIsUploading(false) onUpload(selectedFile) } }, 100) } const getFileIcon = () => { if (!selectedFile) return const fileType = selectedFile.type if (fileType.includes("pdf")) { return } else if (fileType.includes("word") || fileType.includes("document")) { return } else if (fileType.includes("image")) { return } return } const removeFile = () => { setSelectedFile(null) setUploadProgress(0) if (fileInputRef.current) { fileInputRef.current.value = "" } } return (

!selectedFile && fileInputRef.current?.click()} >

{getFileIcon()} {selectedFile ? (

{selectedFile.name}

{(selectedFile.size / 1024 / 1024).toFixed(2)} MB

) : ( <>

Drag and drop your file here

Supports PDF, Word documents, and images

)}

{selectedFile && (

{isUploading && (

Uploading... {uploadProgress}%

)}

) } [V0_FILE]typescriptreact:file="components/chat-interface.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Mic, MicOff, Send, Volume2, VolumeX } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { generateText } from "ai" import { openai } from "@ai-sdk/openai" interface ChatInterfaceProps { documentId: string | null } interface Message { id: string role: "user" | "assistant" content: string timestamp: Date } export default function ChatInterface({ documentId }: ChatInterfaceProps) { const [messages, setMessages] = useState([ { id: "welcome", role: "assistant", content: "Hello! I'm LexiBot, your AI legal assistant. Ask me anything about your legal document, and I'll help you understand it better.", timestamp: new Date(), }, ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const [isListening, setIsListening] = useState(false) const [isSpeaking, setIsSpeaking] = useState(false) const messagesEndRef = useRef(null) const { toast } = useToast() // Mock document data const documentData = { doc1: "This is a rental agreement between landlord and tenant...", doc2: "This employment contract outlines the terms of employment...", doc3: "These terms of service govern the use of our platform...", "new-doc": "This is the content of your newly uploaded document...", } useEffect(() => { scrollToBottom() }, [messages]) //Corrected dependency const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } const handleSendMessage = async () => { if (!input.trim()) return const userMessage: Message = { id: Date.now().toString(), role: "user", content: input, timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { // Get the document content based on documentId const docContent = documentId ? (documentData as any)[documentId] || "" : "" // Use AI SDK to generate response const { text } = await generateText({ model: openai("gpt-4o"), prompt: input, system: `You are LexiBot, an AI legal assistant. You help users understand legal documents in simple terms. Here is the document content to reference: ${docContent} Provide clear, concise explanations. If asked to simplify, use analogies and everyday language.`, }) const botMessage: Message = { id: Date.now().toString(), role: "assistant", content: text, timestamp: new Date(), } setMessages((prev) => [...prev, botMessage]) } catch (error) { toast({ title: "Error", description: "Failed to generate response. Please try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const toggleListening = () => { if (!isListening) { // Check if browser supports speech recognition if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition const recognition = new SpeechRecognition() recognition.continuous = false recognition.interimResults = false recognition.onstart = () => { setIsListening(true) toast({ title: "Listening...", description: "Speak now to ask your question.", }) } recognition.onresult = (event) => { const transcript = event.results[0][0].transcript setInput(transcript) } recognition.onerror = (event) => { console.error("Speech recognition error", event.error) setIsListening(false) toast({ title: "Error", description: "Failed to recognize speech. Please try again.", variant: "destructive", }) } recognition.onend = () => { setIsListening(false) } recognition.start() } else { toast({ title: "Not supported", description: "Speech recognition is not supported in your browser.", variant: "destructive", }) } } else { // Stop listening setIsListening(false) window.speechSynthesis?.cancel() } } const speakMessage = (text: string) => { if ("speechSynthesis" in window) { // Cancel any ongoing speech window.speechSynthesis.cancel() const utterance = new SpeechSynthesisUtterance(text) // Set properties for the speech utterance.rate = 1.0 utterance.pitch = 1.0 utterance.volume = 1.0 // Get available voices and set a natural sounding one if available const voices = window.speechSynthesis.getVoices() const preferredVoice = voices.find( (voice) => voice.name.includes("Google") || voice.name.includes("Natural") || voice.name.includes("Female"), ) if (preferredVoice) { utterance.voice = preferredVoice } utterance.onstart = () => { setIsSpeaking(true) } utterance.onend = () => { setIsSpeaking(false) } utterance.onerror = () => { setIsSpeaking(false) toast({ title: "Error", description: "Failed to speak the message.", variant: "destructive", }) } window.speechSynthesis.speak(utterance) } else { toast({ title: "Not supported", description: "Text-to-speech is not supported in your browser.", variant: "destructive", }) } } const stopSpeaking = () => { if ("speechSynthesis" in window) { window.speechSynthesis.cancel() setIsSpeaking(false) } } return (

{messages.map((message) => (

{message.role === "assistant" ? ( <> LB ) : ( <> U )}

{message.content}

{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })} {message.role === "assistant" && ( )}

))} {isLoading && (

)}

) } [V0_FILE]typescriptreact:file="components/visual-summary.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent } from "@/components/ui/card" import { Download, RefreshCw } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "@/components/ui/chart" interface VisualSummaryProps { documentId: string | null } export default function VisualSummary({ documentId }: VisualSummaryProps) { const [isLoading, setIsLoading] = useState(true) const [activeTab, setActiveTab] = useState("flowchart") const { toast } = useToast() useEffect(() => { // Simulate loading visual summaries const timer = setTimeout(() => { setIsLoading(false) }, 2000) return () => clearTimeout(timer) }, []) // Removed unnecessary dependency: documentId const handleDownload = (type: string) => { toast({ title: "Download started", description: `Downloading ${type} as PDF.`, }) } const handleRefresh = () => { setIsLoading(true) setTimeout(() => { setIsLoading(false) toast({ title: "Visuals refreshed", description: "Visual summaries have been regenerated.", }) }, 2000) } // Mock data for charts const barChartData = [ { name: "Section 1", wordCount: 250, complexity: 65, }, { name: "Section 2", wordCount: 180, complexity: 45, }, { name: "Section 3", wordCount: 300, complexity: 80, }, { name: "Section 4", wordCount: 220, complexity: 60, }, { name: "Section 5", wordCount: 150, complexity: 40, }, ] return (

Flowchart Infographic Chart

{isLoading ? (

Generating visual summary...

) : (

)}

Document Complexity Analysis

Key Insights:

Section 3 has the highest complexity score (80) and word count (300).
Section 5 is the simplest section with a complexity score of 40.
The average complexity score across all sections is 58.
Sections with higher word counts tend to have higher complexity scores.

) } [V0_FILE]typescriptreact:file="components/recent-documents.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { File, FileText, Image } from "lucide-react" interface Document { id: string name: string date: string } interface RecentDocumentsProps { documents: Document[] onSelect: (id: string) => void activeDocument: string | null } export default function RecentDocuments({ documents, onSelect, activeDocument }: RecentDocumentsProps) { const getFileIcon = (fileName: string) => { if (fileName.endsWith(".pdf")) { return } else if (fileName.endsWith(".doc") || fileName.endsWith(".docx")) { return } else if (fileName.endsWith(".jpg") || fileName.endsWith(".jpeg") || fileName.endsWith(".png")) { return } return } return (

{documents.map((doc) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isMerged="true" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" isMerged="true" // This is a placeholder for the missing chart component. A real implementation would require a charting library like Recharts or Chart.js. export const BarChart = () =>

BarChart Placeholder

export const Bar = () =>

Bar Placeholder

export const XAxis = () =>

XAxis Placeholder

export const YAxis = () =>

YAxis Placeholder

export const CartesianGrid = () =>

CartesianGrid Placeholder

export const Tooltip = () =>

Tooltip Placeholder

export const Legend = () =>

Legend Placeholder

export const ResponsiveContainer = () =>

ResponsiveContainer Placeholder

[V0_FILE]typescriptreact:file="components/navbar.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Moon, Sun, Menu, X } from "lucide-react" import { useAuth } from "@/components/auth-provider" export default function Navbar() { const [isScrolled, setIsScrolled] = useState(false) const [isDarkMode, setIsDarkMode] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const { user, signOut } = useAuth() useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10) } const checkDarkMode = () => { if (typeof window !== "undefined") { setIsDarkMode(document.documentElement.classList.contains("dark")) } } window.addEventListener("scroll", handleScroll) checkDarkMode() return () => { window.removeEventListener("scroll", handleScroll) } }, []) const toggleDarkMode = () => { if (typeof window !== "undefined") { document.documentElement.classList.toggle("dark") setIsDarkMode(!isDarkMode) } } return (

LexiBot

{/* Desktop Navigation */}

Home Features Pricing {user ? ( <> Dashboard ) : ( <> )}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isMobileMenuOpen && (

setIsMobileMenuOpen(false)} > Home setIsMobileMenuOpen(false)} > Features setIsMobileMenuOpen(false)} > Pricing {user ? ( <> setIsMobileMenuOpen(false)} > Dashboard ) : ( <> setIsMobileMenuOpen(false)}> setIsMobileMenuOpen(false)}> )}

)}

) } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isEdit="true" isQuickEdit="true" "use client" import Link from "next/link" import { useState } from "react" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { useAuth } from "@/components/auth-provider" import { Moon, Sun, Menu, X, Settings, LogOut, User } from "lucide-react" export default function DashboardHeader() { const { user, signOut } = useAuth() const [isDarkMode, setIsDarkMode] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const toggleDarkMode = () => { if (typeof window !== "undefined") { document.documentElement.classList.toggle("dark") setIsDarkMode(!isDarkMode) } } return (

LexiBot {/* Desktop Navigation */}

{user?.name}

{user?.email}

Profile Settings signOut()}> Log out {/* Mobile Menu Button */}

{/* Mobile Menu */} {isMobileMenuOpen && (

setIsMobileMenuOpen(false)} > Dashboard setIsMobileMenuOpen(false)} > Documents setIsMobileMenuOpen(false)} > History setIsMobileMenuOpen(false)} > Settings

Dark Mode

)}

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" 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, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/components/ui/use-toast" import { useAuth } from "@/components/auth-provider" import { Github } from "lucide-react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { signIn, signInWithGoogle } = useAuth() const { toast } = useToast() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await signIn(email, password) toast({ title: "Login successful", description: "Welcome back to LexiBot!", }) router.push("/dashboard") } catch (error) { toast({ title: "Login failed", description: "Please check your credentials and try again.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleGoogleSignIn = async () => { setIsLoading(true) try { await signInWithGoogle() toast({ title: "Login successful", description: "Welcome back to LexiBot!", }) router.push("/dashboard") } catch (error) { toast({ title: "Google login failed", description: "An error occurred during Google sign-in.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Or continue with

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" 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, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/components/ui/use-toast" import { useAuth } from "@/components/auth-provider" import { Github } from "lucide-react" export default function RegisterPage() { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { signUp, signInWithGoogle } = useAuth() const { toast } = useToast() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await signUp(email, password) toast({ title: "Registration successful", description: "Welcome to LexiBot!", }) router.push("/dashboard") } catch (error) { toast({ title: "Registration failed", description: "An error occurred during registration.", variant: "destructive", }) } finally { setIsLoading(false) } } const handleGoogleSignIn = async () => { setIsLoading(true) try { await signInWithGoogle() toast({ title: "Registration successful", description: "Welcome to LexiBot!", }) router.push("/dashboard") } catch (error) { toast({ title: "Google registration failed", description: "An error occurred during Google sign-in.", variant: "destructive", }) } finally { setIsLoading(false) } } return (

Create an account Enter your information to create a LexiBot account

Or continue with

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { useToast } from "@/components/ui/use-toast" import { useAuth } from "@/components/auth-provider" import DashboardHeader from "@/components/dashboard-header" import DocumentUploader from "@/components/document-uploader" import ChatInterface from "@/components/chat-interface" import VisualSummary from "@/components/visual-summary" import RecentDocuments from "@/components/recent-documents" export default function DashboardPage() { const { user } = useAuth() const { toast } = useToast() const [activeDocument, setActiveDocument] = useState(null) const [activeTab, setActiveTab] = useState("upload") // Mock documents for demo const mockDocuments = [ { id: "doc1", name: "Rental Agreement.pdf", date: "2023-05-15" }, { id: "doc2", name: "Employment Contract.docx", date: "2023-06-22" }, { id: "doc3", name: "Terms of Service.pdf", date: "2023-07-10" }, ] const handleDocumentSelect = (docId: string) => { setActiveDocument(docId) setActiveTab("chat") toast({ title: "Document loaded", description: "You can now chat about this document.", }) } const handleDocumentUpload = (file: File) => { // In a real app, this would upload the file to Firebase Storage toast({ title: "Document uploaded", description: `${file.name} has been uploaded successfully.`, }) // Simulate document processing setTimeout(() => { setActiveDocument("new-doc") setActiveTab("chat") }, 2000) } return (

Welcome, {user?.name || "User"}!

Upload a legal document or select an existing one to get started.

Upload Chat Visual Summary Upload Legal Document Upload a PDF, Word document, or image containing legal text. Chat with LexiBot Ask questions about your legal document and get clear answers. Visual Summary View visual representations of your legal document.

Recent Documents Select a document to analyze

) }