[V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" isMerged="true" import { streamText } from "ai" import { google } from "@ai-sdk/google" import { vectorStore } from "@/lib/vector-store" import { withAuth } from "@/lib/middleware" import { withSafety } from "@/lib/middleware" import { monitoring } from "@/lib/monitoring" import type { NextRequest } from "next/server" export async function POST(req: NextRequest) { return withAuth(req, async (req, user) => { try { const { messages } = await req.json() const latestMessage = messages[messages.length - 1] const userQuery = latestMessage?.content || "" const inputSafety = await withSafety(userQuery) if (!inputSafety.safe) { // Log safety violation const logId = monitoring.logRequest({ userId: user.id, userEmail: user.email, endpoint: "/api/chat", method: "POST", requestSize: JSON.stringify({ messages }).length, status: 400, safetyFlags: inputSafety.flags, error: "Content policy violation", }) return new Response( JSON.stringify({ error: inputSafety.filtered, }), { status: 400, headers: { "Content-Type": "application/json" }, }, ) } const relevantDocs = await vectorStore.similaritySearch(userQuery, 3) let contextPrompt = "" if (relevantDocs.length > 0) { contextPrompt = `\n\nRelevant context from knowledge base:\n${relevantDocs .map((doc, index) => `[${index + 1}] ${doc.content}`) .join( "\n\n", )}\n\nPlease use this context to provide accurate answers when relevant. Always cite your sources using [1], [2], etc. when using information from the context.` } const result = streamText({ model: google("gemini-2.0-flash-exp"), messages, system: `You are a helpful AI assistant powered by Gemini 2.5 Flash. You are assisting ${user.name} (${user.email}). Provide accurate, helpful, and engaging responses.${contextPrompt} When answering questions, prioritize information from the provided context when available. If the context contains relevant information, use it to provide more accurate and detailed responses. Always cite when you're using information from the knowledge base using [1], [2], etc. IMPORTANT: Follow content policy guidelines. Do not provide harmful, illegal, or inappropriate content.`, maxTokens: 4000, temperature: 0.7, }) return result.toDataStreamResponse() } catch (error) { console.error("Chat API error:", error) return new Response("Internal Server Error", { status: 500 }) } }) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "gemini-ai-tool", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "15.1.0", "react": "19.0.0", "react-dom": "19.0.0", "ai": "^4.0.0", "@ai-sdk/google": "^1.0.0", "@ai-sdk/openai": "^1.0.0", "jose": "^5.2.0", "lucide-react": "^0.460.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7", "geist": "1.5.1", "@vercel/analytics": "1.5.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "15.1.0", "tailwindcss": "4.1.13", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="lib/vector-store.ts" isMerged="true" import { openai } from "@ai-sdk/openai" import { embed } from "ai" export interface Document { id: string content: string metadata: { title: string source: string timestamp: number } } export interface VectorDocument extends Document { embedding: number[] } // In-memory vector store (can be replaced with Pinecone, Qdrant, etc.) class InMemoryVectorStore { private documents: VectorDocument[] = [] async addDocument(doc: Document): Promise { try { const { embedding } = await embed({ model: openai.embedding("text-embedding-3-small"), value: doc.content, }) const vectorDoc: VectorDocument = { ...doc, embedding, } this.documents.push(vectorDoc) } catch (error) { console.error("Error adding document:", error) throw error } } async addDocuments(docs: Document[]): Promise { for (const doc of docs) { await this.addDocument(doc) } } async similaritySearch(query: string, k = 3): Promise { if (this.documents.length === 0) return [] try { const { embedding: queryEmbedding } = await embed({ model: openai.embedding("text-embedding-3-small"), value: query, }) const similarities = this.documents.map((doc) => ({ document: doc, similarity: this.cosineSimilarity(queryEmbedding, doc.embedding), })) similarities.sort((a, b) => b.similarity - a.similarity) return similarities.slice(0, k).map((item) => ({ id: item.document.id, content: item.document.content, metadata: item.document.metadata, })) } catch (error) { console.error("Error in similarity search:", error) return [] } } private cosineSimilarity(a: number[], b: number[]): number { const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0) const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0)) const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0)) return dotProduct / (magnitudeA * magnitudeB) } getDocumentCount(): number { return this.documents.length } getAllDocuments(): Document[] { return this.documents.map((doc) => ({ id: doc.id, content: doc.content, metadata: doc.metadata, })) } clearDocuments(): void { this.documents = [] } } export const vectorStore = new InMemoryVectorStore() [V0_FILE]typescriptreact:file="app/api/documents/route.ts" isEdit="true" isMerged="true" import type { NextRequest } from "next/server" import { vectorStore, type Document } from "@/lib/vector-store" import { withAuth } from "@/lib/middleware" export async function POST(req: NextRequest) { return withAuth(req, async (req, user) => { try { const { documents } = await req.json() if (!Array.isArray(documents)) { return new Response("Documents must be an array", { status: 400 }) } const processedDocs: Document[] = documents.map((doc, index) => ({ id: doc.id || `doc-${Date.now()}-${index}`, content: doc.content, metadata: { title: doc.title || `Document ${index + 1}`, source: doc.source || "upload", timestamp: Date.now(), userId: user.id, userEmail: user.email, }, })) await vectorStore.addDocuments(processedDocs) return Response.json({ success: true, message: `Added ${processedDocs.length} documents to vector store`, count: vectorStore.getDocumentCount(), }) } catch (error) { console.error("Document upload error:", error) return new Response("Internal Server Error", { status: 500 }) } }) } export async function GET(req: NextRequest) { return withAuth(req, async (req, user) => { try { const documents = vectorStore.getAllDocuments() return Response.json({ documents, count: documents.length, }) } catch (error) { console.error("Document retrieval error:", error) return new Response("Internal Server Error", { status: 500 }) } }) } export async function DELETE(req: NextRequest) { return withAuth(req, async (req, user) => { try { // Only admins can clear all documents if (user.role !== "admin") { return new Response("Forbidden", { status: 403 }) } vectorStore.clearDocuments() return Response.json({ success: true, message: "All documents cleared", }) } catch (error) { console.error("Document clearing error:", error) return new Response("Internal Server Error", { status: 500 }) } }) } [V0_FILE]typescriptreact:file="components/document-manager.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Textarea } from "@/components/ui/textarea" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Upload, FileText, Trash2, Plus } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface Document { id: string content: string metadata: { title: string source: string timestamp: number } } export function DocumentManager() { const [documents, setDocuments] = useState([]) const [newDoc, setNewDoc] = useState({ title: "", content: "" }) const [isLoading, setIsLoading] = useState(false) const { toast } = useToast() const loadDocuments = async () => { try { const response = await fetch("/api/documents") const data = await response.json() setDocuments(data.documents || []) } catch (error) { toast({ title: "Error", description: "Failed to load documents", variant: "destructive", }) } } const addDocument = async () => { if (!newDoc.title.trim() || !newDoc.content.trim()) { toast({ title: "Error", description: "Please provide both title and content", variant: "destructive", }) return } setIsLoading(true) try { const response = await fetch("/api/documents", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ documents: [ { title: newDoc.title, content: newDoc.content, }, ], }), }) if (response.ok) { setNewDoc({ title: "", content: "" }) await loadDocuments() toast({ title: "Success", description: "Document added to knowledge base", }) } else { throw new Error("Failed to add document") } } catch (error) { toast({ title: "Error", description: "Failed to add document", variant: "destructive", }) } finally { setIsLoading(false) } } const clearAllDocuments = async () => { setIsLoading(true) try { const response = await fetch("/api/documents", { method: "DELETE", }) if (response.ok) { setDocuments([]) toast({ title: "Success", description: "All documents cleared", }) } else { throw new Error("Failed to clear documents") } } catch (error) { toast({ title: "Error", description: "Failed to clear documents", variant: "destructive", }) } finally { setIsLoading(false) } } return ( Knowledge Base {documents.length} docs

setNewDoc({ ...newDoc, title: e.target.value })} />

setNewDoc({ ...newDoc, content: e.target.value })}
            rows={4}
          />
          <div className="flex gap-2">
            <Button onClick={addDocument} disabled={isLoading} className="flex-1">
              <Plus className="h-4 w-4 mr-2" />
              Add Document
            </Button>
            <Button onClick={loadDocuments} variant="outline">
              <Upload className="h-4 w-4" />
            </Button>
          </div>
        </div>

<ScrollArea className="h-64">
          <div className="space-y-2">
            {documents.map((doc) => (
              <Card key={doc.id} className="p-3">
                <div className="flex justify-between items-start">
                  <div className="flex-1">
                    <h4 className="font-medium text-sm">{doc.metadata.title}</h4>
                    <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{doc.content}</p>
                    <Badge variant="outline" className="mt-2 text-xs">
                      {new Date(doc.metadata.timestamp).toLocaleDateString()}
                    </Badge>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </ScrollArea>

{documents.length > 0 && (
          <Button onClick={clearAllDocuments} variant="destructive" size="sm" disabled={isLoading} className="w-full">
            <Trash2 className="h-4 w-4 mr-2" />
            Clear All Documents
          </Button>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="lib/auth.ts" isMerged="true"
import { SignJWT, jwtVerify } from "jose"
import { cookies } from "next/headers"
import type { NextRequest } from "next/server"

const secret = new TextEncoder().encode(process.env.JWT_SECRET || "your-secret-key-change-in-production")

export interface User {
  id: string
  email: string
  name: string
  role: "admin" | "user"
  apiKey?: string
  createdAt: number
}

export interface JWTPayload {
  userId: string
  email: string
  role: string
  iat: number
  exp: number
}

// In-memory user store (replace with database in production)
const users: Map<string, User> = new Map()
const apiKeys: Map<string, string> = new Map() // apiKey -> userId

export async function createToken(user: User): Promise<string> {
  return await new SignJWT({
    userId: user.id,
    email: user.email,
    role: user.role,
  })
    .setProtectedHeader({ alg: "HS256" })
    .setIssuedAt()
    .setExpirationTime("24h")
    .sign(secret)
}

export async function verifyToken(token: string): Promise<JWTPayload | null> {
  try {
    const { payload } = await jwtVerify(token, secret)
    return payload as JWTPayload
  } catch {
    return null
  }
}

export async function getUser(userId: string): Promise<User | null> {
  return users.get(userId) || null
}

export async function createUser(email: string, name: string, password: string): Promise<User> {
  const userId = `user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
  const apiKey = `ak-${Math.random().toString(36).substr(2, 32)}`

const user: User = {
    id: userId,
    email,
    name,
    role: "user",
    apiKey,
    createdAt: Date.now(),
  }

users.set(userId, user)
  apiKeys.set(apiKey, userId)

return user
}

export async function authenticateUser(email: string, password: string): Promise<User | null> {
  // Simple authentication - in production, hash passwords properly
  for (const user of users.values()) {
    if (user.email === email) {
      return user
    }
  }
  return null
}

export async function authenticateApiKey(apiKey: string): Promise<User | null> {
  const userId = apiKeys.get(apiKey)
  if (!userId) return null
  return getUser(userId)
}

export async function getCurrentUser(req: NextRequest): Promise<User | null> {
  // Check for API key in headers
  const apiKey = req.headers.get("x-api-key")
  if (apiKey) {
    return authenticateApiKey(apiKey)
  }

// Check for JWT token in cookies
  const cookieStore = await cookies()
  const token = cookieStore.get("auth-token")?.value
  if (!token) return null

const payload = await verifyToken(token)
  if (!payload) return null

return getUser(payload.userId)
}

// Initialize with a default admin user
if (users.size === 0) {
  createUser("admin@example.com", "Admin User", "admin123").then((user) => {
    user.role = "admin"
    users.set(user.id, user)
  })
}
[V0_FILE]typescriptreact:file="lib/rate-limiter.ts" isMerged="true"
interface RateLimitEntry {
  count: number
  resetTime: number
}

class RateLimiter {
  private limits: Map<string, RateLimitEntry> = new Map()
  private readonly maxRequests: number
  private readonly windowMs: number

constructor(maxRequests = 100, windowMs: number = 60 * 1000) {
    this.maxRequests = maxRequests
    this.windowMs = windowMs
  }

isAllowed(identifier: string): { allowed: boolean; remaining: number; resetTime: number } {
    const now = Date.now()
    const entry = this.limits.get(identifier)

if (!entry || now > entry.resetTime) {
      // New window or expired entry
      const newEntry: RateLimitEntry = {
        count: 1,
        resetTime: now + this.windowMs,
      }
      this.limits.set(identifier, newEntry)
      return {
        allowed: true,
        remaining: this.maxRequests - 1,
        resetTime: newEntry.resetTime,
      }
    }

if (entry.count >= this.maxRequests) {
      return {
        allowed: false,
        remaining: 0,
        resetTime: entry.resetTime,
      }
    }

entry.count++
    this.limits.set(identifier, entry)

return {
      allowed: true,
      remaining: this.maxRequests - entry.count,
      resetTime: entry.resetTime,
    }
  }

cleanup() {
    const now = Date.now()
    for (const [key, entry] of this.limits.entries()) {
      if (now > entry.resetTime) {
        this.limits.delete(key)
      }
    }
  }
}

export const chatRateLimiter = new RateLimiter(50, 60 * 1000) // 50 requests per minute
export const apiRateLimiter = new RateLimiter(1000, 60 * 1000) // 1000 requests per minute for API keys

// Cleanup expired entries every 5 minutes
setInterval(
  () => {
    chatRateLimiter.cleanup()
    apiRateLimiter.cleanup()
  },
  5 * 60 * 1000,
)
[V0_FILE]typescriptreact:file="lib/middleware.ts" isEdit="true" isMerged="true"
import type { NextRequest } from "next/server"
import { getCurrentUser } from "./auth"
import { chatRateLimiter, apiRateLimiter } from "./rate-limiter"
import { monitoring } from "./monitoring"
import { safetyFilter } from "./safety"

export async function withAuth(req: NextRequest, handler: (req: NextRequest, user: any) => Promise<Response>) {
  const startTime = Date.now()
  let logId: string | undefined

try {
    const user = await getCurrentUser(req)

if (!user) {
      return new Response("Unauthorized", { status: 401 })
    }

logId = monitoring.logRequest({
      userId: user.id,
      userEmail: user.email,
      endpoint: req.nextUrl.pathname,
      method: req.method,
      userAgent: req.headers.get("user-agent") || undefined,
      ip: req.headers.get("x-forwarded-for") || req.headers.get("x-real-ip") || undefined,
      requestSize: Number.parseInt(req.headers.get("content-length") || "0"),
      status: 200, // Will be updated
    })

// Apply rate limiting
    const identifier = user.apiKey ? `api:${user.id}` : `user:${user.id}`
    const rateLimiter = user.apiKey ? apiRateLimiter : chatRateLimiter
    const rateLimit = rateLimiter.isAllowed(identifier)

if (!rateLimit.allowed) {
      const response = new Response("Rate limit exceeded", {
        status: 429,
        headers: {
          "X-RateLimit-Remaining": "0",
          "X-RateLimit-Reset": rateLimit.resetTime.toString(),
        },
      })

if (logId) {
        monitoring.updateLogEntry(logId, {
          status: 429,
          responseTime: Date.now() - startTime,
          error: "Rate limit exceeded",
        })
      }

return response
    }

const response = await handler(req, user)

if (logId) {
      monitoring.updateLogEntry(logId, {
        status: response.status,
        responseTime: Date.now() - startTime,
        responseSize: Number.parseInt(response.headers.get("content-length") || "0"),
      })
    }

// Add rate limit headers
    response.headers.set("X-RateLimit-Remaining", rateLimit.remaining.toString())
    response.headers.set("X-RateLimit-Reset", rateLimit.resetTime.toString())

return response
  } catch (error) {
    console.error("Middleware error:", error)

if (logId) {
      monitoring.updateLogEntry(logId, {
        status: 500,
        responseTime: Date.now() - startTime,
        error: error instanceof Error ? error.message : "Unknown error",
      })
    }

return new Response("Internal Server Error", { status: 500 })
  }
}

export async function withSafety(
  content: string,
  context: string[] = [],
): Promise<{ safe: boolean; filtered?: string; flags?: string[]; hallucinationScore?: number }> {
  try {
    const safetyResult = await safetyFilter.checkContent(content)

if (!safetyResult.isSafe) {
      return {
        safe: false,
        filtered: "I can't provide a response to that request as it may violate our content policy.",
        flags: safetyResult.categories,
      }
    }

// Check for hallucination if we have context
    let hallucinationScore: number | undefined
    if (context.length > 0) {
      const hallucinationResult = await safetyFilter.checkHallucination(content, context)
      hallucinationScore = hallucinationResult.score
    }

return {
      safe: true,
      hallucinationScore,
    }
  } catch (error) {
    console.error("Safety check error:", error)
    return { safe: true } // Fail open for safety checks
  }
}

export function withCors(response: Response): Response {
  response.headers.set("Access-Control-Allow-Origin", "*")
  response.headers.set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS")
  response.headers.set("Access-Control-Allow-Headers", "Content-Type, Authorization, X-API-Key")
  return response
}
[V0_FILE]typescriptreact:file="app/api/auth/login/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import { authenticateUser, createToken } from "@/lib/auth"
import { cookies } from "next/headers"

export async function POST(req: NextRequest) {
  try {
    const { email, password } = await req.json()

if (!email || !password) {
      return new Response("Email and password required", { status: 400 })
    }

const user = await authenticateUser(email, password)
    if (!user) {
      return new Response("Invalid credentials", { status: 401 })
    }

const token = await createToken(user)
    const cookieStore = await cookies()

cookieStore.set("auth-token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "lax",
      maxAge: 24 * 60 * 60, // 24 hours
    })

return Response.json({
      user: {
        id: user.id,
        email: user.email,
        name: user.name,
        role: user.role,
        apiKey: user.apiKey,
      },
    })
  } catch (error) {
    console.error("Login error:", error)
    return new Response("Internal Server Error", { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/register/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import { createUser, createToken } from "@/lib/auth"
import { cookies } from "next/headers"

export async function POST(req: NextRequest) {
  try {
    const { email, name, password } = await req.json()

if (!email || !name || !password) {
      return new Response("Email, name, and password required", { status: 400 })
    }

const user = await createUser(email, name, password)
    const token = await createToken(user)
    const cookieStore = await cookies()

cookieStore.set("auth-token", token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "lax",
      maxAge: 24 * 60 * 60, // 24 hours
    })

return Response.json({
      user: {
        id: user.id,
        email: user.email,
        name: user.name,
        role: user.role,
        apiKey: user.apiKey,
      },
    })
  } catch (error) {
    console.error("Registration error:", error)
    return new Response("Internal Server Error", { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/logout/route.ts" isMerged="true"
import { cookies } from "next/headers"

export async function POST() {
  try {
    const cookieStore = await cookies()
    cookieStore.delete("auth-token")

return Response.json({ success: true })
  } catch (error) {
    console.error("Logout error:", error)
    return new Response("Internal Server Error", { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/auth/me/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import { getCurrentUser } from "@/lib/auth"

export async function GET(req: NextRequest) {
  try {
    const user = await getCurrentUser(req)

if (!user) {
      return new Response("Unauthorized", { status: 401 })
    }

return Response.json({
      user: {
        id: user.id,
        email: user.email,
        name: user.name,
        role: user.role,
        apiKey: user.apiKey,
      },
    })
  } catch (error) {
    console.error("Auth check error:", error)
    return new Response("Internal Server Error", { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/auth-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { useToast } from "@/hooks/use-toast"
import { Lock, User, Mail } from "lucide-react"

interface AuthFormProps {
  onAuthSuccess: (user: any) => void
}

export function AuthForm({ onAuthSuccess }: AuthFormProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [loginForm, setLoginForm] = useState({ email: "", password: "" })
  const [registerForm, setRegisterForm] = useState({ email: "", name: "", password: "" })
  const { toast } = useToast()

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

try {
      const response = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(loginForm),
      })

if (response.ok) {
        const data = await response.json()
        onAuthSuccess(data.user)
        toast({
          title: "Success",
          description: "Logged in successfully",
        })
      } else {
        throw new Error("Invalid credentials")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Login failed. Please check your credentials.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

try {
      const response = await fetch("/api/auth/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(registerForm),
      })

if (response.ok) {
        const data = await response.json()
        onAuthSuccess(data.user)
        toast({
          title: "Success",
          description: "Account created successfully",
        })
      } else {
        throw new Error("Registration failed")
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Registration failed. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="flex items-center justify-center gap-2">
            <Lock className="h-6 w-6" />
            Gemini AI Tool
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="login" className="space-y-4">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="login">Login</TabsTrigger>
              <TabsTrigger value="register">Register</TabsTrigger>
            </TabsList>

<TabsContent value="login">
              <form onSubmit={handleLogin} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="login-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="login-email"
                      type="email"
                      placeholder="admin@example.com"
                      value={loginForm.email}
                      onChange={(e) => setLoginForm({ ...loginForm, email: e.target.value })}
                      className="pl-10"
                      required
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="login-password">Password</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="login-password"
                      type="password"
                      placeholder="admin123"
                      value={loginForm.password}
                      onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })}
                      className="pl-10"
                      required
                    />
                  </div>
                </div>
                <Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? "Logging in..." : "Login"}
                </Button>
              </form>
            </TabsContent>

<TabsContent value="register">
              <form onSubmit={handleRegister} className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="register-name">Name</Label>
                  <div className="relative">
                    <User className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="register-name"
                      type="text"
                      placeholder="Your name"
                      value={registerForm.name}
                      onChange={(e) => setRegisterForm({ ...registerForm, name: e.target.value })}
                      className="pl-10"
                      required
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="register-email">Email</Label>
                  <div className="relative">
                    <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="register-email"
                      type="email"
                      placeholder="your@email.com"
                      value={registerForm.email}
                      onChange={(e) => setRegisterForm({ ...registerForm, email: e.target.value })}
                      className="pl-10"
                      required
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="register-password">Password</Label>
                  <div className="relative">
                    <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                    <Input
                      id="register-password"
                      type="password"
                      placeholder="Choose a password"
                      value={registerForm.password}
                      onChange={(e) => setRegisterForm({ ...registerForm, password: e.target.value })}
                      className="pl-10"
                      required
                    />
                  </div>
                </div>
                <Button type="submit" className="w-full" disabled={isLoading}>
                  {isLoading ? "Creating account..." : "Create Account"}
                </Button>
              </form>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/safety.ts" isMerged="true"
interface SafetyResult {
  isSafe: boolean
  confidence: number
  categories: string[]
  reason?: string
}

interface ToxicityKeywords {
  [category: string]: string[]
}

const toxicityKeywords: ToxicityKeywords = {
  hate: ["hate", "racist", "nazi", "terrorist"],
  harassment: ["bully", "harass", "threaten", "stalk"],
  violence: ["kill", "murder", "bomb", "weapon", "attack"],
  sexual: ["explicit sexual content", "pornographic"],
  selfHarm: ["suicide", "self-harm", "cutting"],
  illegal: ["drugs", "illegal", "fraud", "scam"],
}

export class SafetyFilter {
  async checkContent(content: string): Promise<SafetyResult> {
    const lowerContent = content.toLowerCase()
    const flaggedCategories: string[] = []
    let maxConfidence = 0

// Check against keyword lists
    for (const [category, keywords] of Object.entries(toxicityKeywords)) {
      for (const keyword of keywords) {
        if (lowerContent.includes(keyword)) {
          flaggedCategories.push(category)
          maxConfidence = Math.max(maxConfidence, 0.8)
        }
      }
    }

// Additional heuristics
    const hasExcessiveCaps = (content.match(/[A-Z]/g) || []).length / content.length > 0.7
    const hasRepeatedChars = /(.)\1{4,}/.test(content)

if (hasExcessiveCaps || hasRepeatedChars) {
      flaggedCategories.push("spam")
      maxConfidence = Math.max(maxConfidence, 0.6)
    }

const isSafe = flaggedCategories.length === 0

return {
      isSafe,
      confidence: isSafe ? 0.1 : maxConfidence,
      categories: flaggedCategories,
      reason: isSafe ? undefined : `Content flagged for: ${flaggedCategories.join(", ")}`,
    }
  }

async checkHallucination(
    response: string,
    context: string[],
  ): Promise<{ score: number; hasSourceCitation: boolean }> {
    // Simple hallucination detection based on source citation
    const hasSourceCitation =
      /\[(\d+)\]/.test(response) || response.includes("according to") || response.includes("based on the context")

// Calculate confidence based on context usage
    let contextUsage = 0
    if (context.length > 0) {
      const responseWords = response.toLowerCase().split(/\s+/)
      const contextWords = context.join(" ").toLowerCase().split(/\s+/)

const commonWords = responseWords.filter((word) => word.length > 3 && contextWords.includes(word))

contextUsage = commonWords.length / Math.max(responseWords.length, 1)
    }

const hallucinationScore = hasSourceCitation ? 0.1 : Math.max(0.3, 1 - contextUsage)

return {
      score: hallucinationScore,
      hasSourceCitation,
    }
  }
}

export const safetyFilter = new SafetyFilter()
[V0_FILE]typescriptreact:file="lib/monitoring.ts" isMerged="true"
interface LogEntry {
  id: string
  timestamp: number
  userId: string
  userEmail: string
  endpoint: string
  method: string
  userAgent?: string
  ip?: string
  requestSize: number
  responseSize?: number
  responseTime?: number
  status: number
  error?: string
  safetyFlags?: string[]
  hallucinationScore?: number
}

interface UsageMetrics {
  totalRequests: number
  totalUsers: number
  averageResponseTime: number
  errorRate: number
  safetyViolations: number
  topEndpoints: { endpoint: string; count: number }[]
  dailyUsage: { date: string; requests: number }[]
}

class MonitoringSystem {
  private logs: LogEntry[] = []
  private readonly maxLogs = 10000 // Keep last 10k logs in memory

logRequest(entry: Omit<LogEntry, "id" | "timestamp">): string {
    const logEntry: LogEntry = {
      id: `log-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
      timestamp: Date.now(),
      ...entry,
    }

this.logs.push(logEntry)

// Keep only recent logs
    if (this.logs.length > this.maxLogs) {
      this.logs = this.logs.slice(-this.maxLogs)
    }

// Log to console for debugging
    console.log(
      `[${new Date().toISOString()}] ${entry.method} ${entry.endpoint} - ${entry.status} - ${entry.responseTime}ms - User: ${entry.userEmail}`,
    )

return logEntry.id
  }

updateLogEntry(id: string, updates: Partial<LogEntry>): void {
    const index = this.logs.findIndex((log) => log.id === id)
    if (index !== -1) {
      this.logs[index] = { ...this.logs[index], ...updates }
    }
  }

getMetrics(timeRange: number = 24 * 60 * 60 * 1000): UsageMetrics {
    const cutoff = Date.now() - timeRange
    const recentLogs = this.logs.filter((log) => log.timestamp > cutoff)

const totalRequests = recentLogs.length
    const uniqueUsers = new Set(recentLogs.map((log) => log.userId)).size
    const responseTimes = recentLogs.filter((log) => log.responseTime).map((log) => log.responseTime!)
    const averageResponseTime =
      responseTimes.length > 0 ? responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length : 0

const errors = recentLogs.filter((log) => log.status >= 400)
    const errorRate = totalRequests > 0 ? errors.length / totalRequests : 0

const safetyViolations = recentLogs.filter((log) => log.safetyFlags && log.safetyFlags.length > 0).length

// Top endpoints
    const endpointCounts = recentLogs.reduce(
      (acc, log) => {
        acc[log.endpoint] = (acc[log.endpoint] || 0) + 1
        return acc
      },
      {} as Record<string, number>,
    )

const topEndpoints = Object.entries(endpointCounts)
      .map(([endpoint, count]) => ({ endpoint, count }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 5)

// Daily usage (last 7 days)
    const dailyUsage: { date: string; requests: number }[] = []
    for (let i = 6; i >= 0; i--) {
      const date = new Date(Date.now() - i * 24 * 60 * 60 * 1000)
      const dateStr = date.toISOString().split("T")[0]
      const dayStart = new Date(date.setHours(0, 0, 0, 0)).getTime()
      const dayEnd = new Date(date.setHours(23, 59, 59, 999)).getTime()

const dayRequests = this.logs.filter((log) => log.timestamp >= dayStart && log.timestamp <= dayEnd).length

dailyUsage.push({ date: dateStr, requests: dayRequests })
    }

return {
      totalRequests,
      totalUsers: uniqueUsers,
      averageResponseTime: Math.round(averageResponseTime),
      errorRate: Math.round(errorRate * 100) / 100,
      safetyViolations,
      topEndpoints,
      dailyUsage,
    }
  }

getRecentLogs(limit = 100): LogEntry[] {
    return this.logs.sort((a, b) => b.timestamp - a.timestamp).slice(0, limit)
  }

getSafetyViolations(limit = 50): LogEntry[] {
    return this.logs
      .filter((log) => log.safetyFlags && log.safetyFlags.length > 0)
      .sort((a, b) => b.timestamp - a.timestamp)
      .slice(0, limit)
  }
}

export const monitoring = new MonitoringSystem()
[V0_FILE]typescriptreact:file="app/api/admin/metrics/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import { getCurrentUser } from "@/lib/auth"
import { monitoring } from "@/lib/monitoring"

export async function GET(req: NextRequest) {
  try {
    const user = await getCurrentUser(req)

if (!user || user.role !== "admin") {
      return new Response("Forbidden", { status: 403 })
    }

const timeRange = Number.parseInt(req.nextUrl.searchParams.get("timeRange") || "86400000") // 24h default
    const metrics = monitoring.getMetrics(timeRange)

return Response.json(metrics)
  } catch (error) {
    console.error("Metrics API error:", error)
    return new Response("Internal Server Error", { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/admin/logs/route.ts" isMerged="true"
import type { NextRequest } from "next/server"
import { getCurrentUser } from "@/lib/auth"
import { monitoring } from "@/lib/monitoring"

export async function GET(req: NextRequest) {
  try {
    const user = await getCurrentUser(req)

if (!user || user.role !== "admin") {
      return new Response("Forbidden", { status: 403 })
    }

const limit = Number.parseInt(req.nextUrl.searchParams.get("limit") || "100")
    const type = req.nextUrl.searchParams.get("type") || "all"

let logs
    if (type === "safety") {
      logs = monitoring.getSafetyViolations(limit)
    } else {
      logs = monitoring.getRecentLogs(limit)
    }

return Response.json({ logs })
  } catch (error) {
    console.error("Logs API error:", error)
    return new Response("Internal Server Error", { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/admin-dashboard.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Activity, Users, Clock, AlertTriangle, Shield, TrendingUp, Eye, Server } from "lucide-react"

interface Metrics {
  totalRequests: number
  totalUsers: number
  averageResponseTime: number
  errorRate: number
  safetyViolations: number
  topEndpoints: { endpoint: string; count: number }[]
  dailyUsage: { date: string; requests: number }[]
}

interface LogEntry {
  id: string
  timestamp: number
  userId: string
  userEmail: string
  endpoint: string
  method: string
  status: number
  responseTime?: number
  error?: string
  safetyFlags?: string[]
}

export function AdminDashboard() {
  const [metrics, setMetrics] = useState<Metrics | null>(null)
  const [logs, setLogs] = useState<LogEntry[]>([])
  const [safetyLogs, setSafetyLogs] = useState<LogEntry[]>([])
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    loadData()
    const interval = setInterval(loadData, 30000) // Refresh every 30 seconds
    return () => clearInterval(interval)
  }, [])

const loadData = async () => {
    try {
      const [metricsRes, logsRes, safetyRes] = await Promise.all([
        fetch("/api/admin/metrics"),
        fetch("/api/admin/logs?limit=50"),
        fetch("/api/admin/logs?type=safety&limit=20"),
      ])

if (metricsRes.ok) {
        const metricsData = await metricsRes.json()
        setMetrics(metricsData)
      }

if (logsRes.ok) {
        const logsData = await logsRes.json()
        setLogs(logsData.logs)
      }

if (safetyRes.ok) {
        const safetyData = await safetyRes.json()
        setSafetyLogs(safetyData.logs)
      }
    } catch (error) {
      console.error("Failed to load admin data:", error)
    } finally {
      setIsLoading(false)
    }
  }

if (isLoading) {
    return <div className="p-8 text-center">Loading admin dashboard...</div>
  }

return (
    <div className="p-6 space-y-6">
      <div className="flex items-center gap-2 mb-6">
        <Shield className="h-6 w-6" />
        <h1 className="text-2xl font-bold">Admin Dashboard</h1>
      </div>

{/* Metrics Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Requests</CardTitle>
            <Activity className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{metrics?.totalRequests || 0}</div>
            <p className="text-xs text-muted-foreground">Last 24 hours</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{metrics?.totalUsers || 0}</div>
            <p className="text-xs text-muted-foreground">Unique users</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Avg Response Time</CardTitle>
            <Clock className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{metrics?.averageResponseTime || 0}ms</div>
            <p className="text-xs text-muted-foreground">API performance</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Safety Violations</CardTitle>
            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">{metrics?.safetyViolations || 0}</div>
            <p className="text-xs text-muted-foreground">Content policy violations</p>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="logs" className="space-y-4">
        <TabsList>
          <TabsTrigger value="logs">Recent Activity</TabsTrigger>
          <TabsTrigger value="safety">Safety Violations</TabsTrigger>
          <TabsTrigger value="analytics">Analytics</TabsTrigger>
        </TabsList>

<TabsContent value="logs">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Eye className="h-5 w-5" />
                Recent API Logs
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-96">
                <div className="space-y-2">
                  {logs.map((log) => (
                    <div key={log.id} className="flex items-center justify-between p-3 border rounded-lg">
                      <div className="flex items-center gap-3">
                        <Badge variant={log.status >= 400 ? "destructive" : "secondary"}>{log.status}</Badge>
                        <span className="font-mono text-sm">
                          {log.method} {log.endpoint}
                        </span>
                        <span className="text-sm text-muted-foreground">{log.userEmail}</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
                        {log.responseTime && <span>{log.responseTime}ms</span>}
                        <span>{new Date(log.timestamp).toLocaleTimeString()}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="safety">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <AlertTriangle className="h-5 w-5" />
                Safety Violations
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ScrollArea className="h-96">
                <div className="space-y-2">
                  {safetyLogs.length === 0 ? (
                    <p className="text-center text-muted-foreground py-8">No safety violations detected</p>
                  ) : (
                    safetyLogs.map((log) => (
                      <div key={log.id} className="p-3 border border-red-200 rounded-lg bg-red-50">
                        <div className="flex items-center justify-between mb-2">
                          <div className="flex items-center gap-2">
                            <Badge variant="destructive">VIOLATION</Badge>
                            <span className="text-sm font-medium">{log.userEmail}</span>
                          </div>
                          <span className="text-sm text-muted-foreground">
                            {new Date(log.timestamp).toLocaleString()}
                          </span>
                        </div>
                        <div className="flex gap-2">
                          {log.safetyFlags?.map((flag) => (
                            <Badge key={flag} variant="outline" className="text-xs">
                              {flag}
                            </Badge>
                          ))}
                        </div>
                        {log.error && <p className="text-sm text-red-600 mt-2">{log.error}</p>}
                      </div>
                    ))
                  )}
                </div>
              </ScrollArea>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="analytics">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <TrendingUp className="h-5 w-5" />
                  Top Endpoints
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  {metrics?.topEndpoints.map((endpoint, index) => (
                    <div key={endpoint.endpoint} className="flex items-center justify-between">
                      <span className="font-mono text-sm">{endpoint.endpoint}</span>
                      <Badge variant="secondary">{endpoint.count}</Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Server className="h-5 w-5" />
                  System Health
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span>Error Rate</span>
                    <Badge variant={metrics && metrics.errorRate > 0.05 ? "destructive" : "secondary"}>
                      {((metrics?.errorRate || 0) * 100).toFixed(1)}%
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Avg Response Time</span>
                    <Badge variant={metrics && metrics.averageResponseTime > 1000 ? "destructive" : "secondary"}>
                      {metrics?.averageResponseTime || 0}ms
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between">
                    <span>Safety Score</span>
                    <Badge variant={metrics && metrics.safetyViolations > 10 ? "destructive" : "secondary"}>
                      {metrics && metrics.totalRequests > 0
                        ? (((metrics.totalRequests - metrics.safetyViolations) / metrics.totalRequests) * 100).toFixed(
                            1,
                          )
                        : 100}
                      %
                    </Badge>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useChat } from "ai/react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Send, Bot, User, LogOut, Settings, Key, Copy } from "lucide-react"
import { DocumentManager } from "@/components/document-manager"
import { AuthForm } from "@/components/auth-form"
import { AdminDashboard } from "@/components/admin-dashboard"
import { useToast } from "@/hooks/use-toast"

interface ChatUser {
  id: string
  email: string
  name: string
  role: "admin" | "user"
  apiKey?: string
}

export default function ChatPage() {
  const [user, setUser] = useState<ChatUser | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [showAdmin, setShowAdmin] = useState(false)
  const [showApiKey, setShowApiKey] = useState(false)
  const { toast } = useToast()

const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading: isChatLoading,
  } = useChat({
    api: "/api/chat",
  })

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

const checkAuth = async () => {
    try {
      const response = await fetch("/api/auth/me")
      if (response.ok) {
        const data = await response.json()
        setUser(data.user)
      }
    } catch (error) {
      console.error("Auth check failed:", error)
    } finally {
      setIsLoading(false)
    }
  }

const handleLogout = async () => {
    try {
      await fetch("/api/auth/logout", { method: "POST" })
      setUser(null)
      setShowAdmin(false)
      toast({
        title: "Success",
        description: "Logged out successfully",
      })
    } catch (error) {
      toast({
        title: "Error",
        description: "Logout failed",
        variant: "destructive",
      })
    }
  }

const copyApiKey = () => {
    if (user?.apiKey) {
      navigator.clipboard.writeText(user.apiKey)
      toast({
        title: "Success",
        description: "API key copied to clipboard",
      })
    }
  }

if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="text-center">
          <Bot className="h-12 w-12 mx-auto mb-4 text-primary animate-pulse" />
          <p className="text-muted-foreground">Loading...</p>
        </div>
      </div>
    )
  }

if (!user) {
    return <AuthForm onAuthSuccess={setUser} />
  }

if (showAdmin && user.role === "admin") {
    return (
      <div className="min-h-screen bg-background">
        <div className="border-b bg-card">
          <div className="flex items-center justify-between p-4 max-w-7xl mx-auto">
            <div className="flex items-center gap-2">
              <Bot className="h-6 w-6 text-primary" />
              <span className="font-semibold">Gemini AI Tool - Admin</span>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" onClick={() => setShowAdmin(false)}>
                Back to Chat
              </Button>
              <Button variant="outline" onClick={handleLogout}>
                <LogOut className="h-4 w-4 mr-2" />
                Logout
              </Button>
            </div>
          </div>
        </div>
        <AdminDashboard />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <div className="border-b bg-card">
        <div className="flex items-center justify-between p-4 max-w-7xl mx-auto">
          <div className="flex items-center gap-2">
            <Bot className="h-6 w-6 text-primary" />
            <span className="font-semibold">Gemini AI Tool</span>
          </div>
          <div className="flex items-center gap-2">
            <Badge variant="secondary">{user.name}</Badge>
            <Badge variant={user.role === "admin" ? "default" : "outline"}>{user.role}</Badge>

{user.role === "admin" && (
              <Button variant="outline" size="sm" onClick={() => setShowAdmin(true)}>
                <Settings className="h-4 w-4 mr-2" />
                Admin
              </Button>
            )}

<Button variant="outline" size="sm" onClick={() => setShowApiKey(!showApiKey)}>
              <Key className="h-4 w-4 mr-2" />
              API Key
            </Button>

<Button variant="outline" size="sm" onClick={handleLogout}>
              <LogOut className="h-4 w-4 mr-2" />
              Logout
            </Button>
          </div>
        </div>

{showApiKey && (
          <div className="border-t bg-muted/50 p-4 max-w-7xl mx-auto">
            <div className="flex items-center gap-2">
              <span className="text-sm font-medium">Your API Key:</span>
              <code className="bg-background px-2 py-1 rounded text-sm font-mono">{user.apiKey}</code>
              <Button size="sm" variant="outline" onClick={copyApiKey}>
                <Copy className="h-3 w-3" />
              </Button>
            </div>
            <p className="text-xs text-muted-foreground mt-2">
              Use this API key in the X-API-Key header for programmatic access
            </p>
          </div>
        )}
      </div>

<div className="lg:col-span-3">
              <Card className="h-full flex flex-col">
                <CardHeader className="border-b">
                  <CardTitle className="flex items-center gap-2">
                    <Bot className="h-6 w-6 text-primary" />
                    Gemini AI Assistant with RAG
                    <Badge variant="outline" className="ml-auto">
                      Welcome, {user.name}
                    </Badge>
                  </CardTitle>
                </CardHeader>

<CardContent className="flex-1 p-0">
                  <ScrollArea className="h-full p-4">
                    <div className="space-y-4">
                      {messages.length === 0 && (
                        <div className="text-center text-muted-foreground py-8">
                          <Bot className="h-12 w-12 mx-auto mb-4 text-primary" />
                          <h3 className="text-lg font-semibold mb-2">Welcome to Gemini AI with RAG</h3>
                          <p>Add documents to the knowledge base and start asking questions!</p>
                          <p className="text-sm mt-2">Hello {user.name}, I'm ready to help you with your questions.</p>
                        </div>
                      )}

{messages.map((message) => (
                        <div
                          key={message.id}
                          className={`flex gap-3 ${message.role === "user" ? "justify-end" : "justify-start"}`}
                        >
                          {message.role === "assistant" && (
                            <Avatar className="h-8 w-8">
                              <AvatarFallback>
                                <Bot className="h-4 w-4" />
                              </AvatarFallback>
                            </Avatar>
                          )}

<div
                            className={`max-w-[80%] rounded-lg px-4 py-2 ${
                              message.role === "user" ? "bg-primary text-primary-foreground ml-auto" : "bg-muted"
                            }`}
                          >
                            <p className="text-sm whitespace-pre-wrap">{message.content}</p>
                          </div>

{message.role === "user" && (
                            <Avatar className="h-8 w-8">
                              <AvatarFallback>
                                <User className="h-4 w-4" />
                              </AvatarFallback>
                            </Avatar>
                          )}
                        </div>
                      ))}

{isChatLoading && (
                        <div className="flex gap-3 justify-start">
                          <Avatar className="h-8 w-8">
                            <AvatarFallback>
                              <Bot className="h-4 w-4" />
                            </AvatarFallback>
                          </Avatar>
                          <div className="bg-muted rounded-lg px-4 py-2">
                            <div className="flex space-x-1">
                              <div className="w-2 h-2 bg-primary rounded-full animate-bounce"></div>
                              <div
                                className="w-2 h-2 bg-primary rounded-full animate-bounce"
                                style={{ animationDelay: "0.1s" }}
                              ></div>
                              <div
                                className="w-2 h-2 bg-primary rounded-full animate-bounce"
                                style={{ animationDelay: "0.2s" }}
                              ></div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </ScrollArea>
                </CardContent>

<div className="border-t p-4">
                  <form onSubmit={handleSubmit} className="flex gap-2">
                    <Input
                      value={input}
                      onChange={handleInputChange}
                      placeholder="Ask questions about your documents..."
                      disabled={isChatLoading}
                      className="flex-1"
                    />
                    <Button type="submit" disabled={isChatLoading || !input.trim()}>
                      <Send className="h-4 w-4" />
                    </Button>
                  </form>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import { Analytics } from "@vercel/analytics/next"
import { Toaster } from "@/components/ui/toaster"
import { Suspense } from "react"
import "./globals.css"

export const metadata: Metadata = {
  title: "Gemini AI Tool - Enterprise AI Assistant",
  description: "Advanced AI tool powered by Gemini 2.5 Flash with RAG, authentication, and monitoring",
  generator: "v0.app",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
        <Suspense fallback={null}>
          {children}
          <Toaster />
        </Suspense>
        <Analytics />
      </body>
    </html>
  )
}</article></body></html>