[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" 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))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, blue: { 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", }, purple: { 400: "#c084fc", 500: "#a855f7", 600: "#9333ea", 700: "#7e22ce", }, gray: { 700: "#374151", 800: "#1f2937", 900: "#111827", }, }, 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="globals.css" isEdit="true" isQuickEdit="true" 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; } } @layer utilities { .glass-effect { @apply bg-white/10 backdrop-blur-md border border-white/20; } .glass-card { @apply bg-gray-900/50 backdrop-blur-md border border-gray-800 rounded-xl; } .text-gradient { @apply bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent; } } [V0_FILE]typescriptreact:file="page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Send, Car, FileText, Maximize2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" export default function VehicleManualAssistant() { const [selectedVehicle, setSelectedVehicle] = useState("") const [query, setQuery] = useState("") const [messages, setMessages] = useState< Array<{ type: string; content: string; citations?: Array<{ page: number; manual: string; thumbnail: string }> }> >([ { type: "system", content: "Welcome to the Vehicle Manual Assistant. Select a vehicle and ask any question about parts, repairs, or troubleshooting.", }, ]) const [isLoading, setIsLoading] = useState(false) const [showManuals, setShowManuals] = useState(false) const scrollAreaRef = useRef(null) useEffect(() => { if (scrollAreaRef.current) { scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight } }, [messages]) // Mock function to simulate AI response const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!query.trim() || !selectedVehicle) return // Add user message setMessages((prev) => [ ...prev, { type: "user", content: query, }, ]) setIsLoading(true) // Simulate API delay setTimeout(() => { // Mock response based on query content const responseMessage = { type: "assistant", content: "", citations: [], } if (query.toLowerCase().includes("brake")) { responseMessage.content = "The brake system in your vehicle consists of disc brakes in the front and drum brakes in the rear. To replace the brake pads, you'll need to remove the caliper and then the old pads. Make sure to compress the caliper piston before installing new pads." responseMessage.citations = [ { page: 42, manual: "Service Manual", thumbnail: "/placeholder.svg?height=300&width=230", }, { page: 43, manual: "Service Manual", thumbnail: "/placeholder.svg?height=300&width=230", }, ] } else if (query.toLowerCase().includes("oil")) { responseMessage.content = "For an oil change, use the recommended 5W-30 synthetic oil for your vehicle. The oil capacity is 4.5 quarts. Make sure to replace the oil filter during each oil change. The drain plug is located at the bottom of the oil pan and requires a 14mm socket." responseMessage.citations = [ { page: 18, manual: "Maintenance Manual", thumbnail: "/placeholder.svg?height=300&width=230", }, ] } else { responseMessage.content = "I found information related to your query in the vehicle manual. Please refer to the attached pages for detailed instructions and diagrams." responseMessage.citations = [ { page: 24, manual: "Parts Manual", thumbnail: "/placeholder.svg", }, ] } setMessages((prev) => [...prev, responseMessage]) setIsLoading(false) setQuery("") }, 1500) } useEffect(() => { if (scrollAreaRef.current) { scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight } }, [messages]) return (

{/* Header */}

Vehicle Manual Assistant

{/* Main Content */}

{showManuals ? (

{["Service Manual", "Parts Manual", "Owner Manual", "Wiring Diagrams", "Maintenance Schedule"].map( (manual, index) => (

{manual}

{selectedVehicle ? selectedVehicle .split("-") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" ") : "Select a vehicle"}

), )}

) : (

{/* Messages Area */}

{messages.map((message, index) => (

{message.content}

{/* Citations and Thumbnails */} {message.citations && message.citations.length > 0 && (

{message.citations.map((citation, citIndex) => ( ))}

)}

))} {isLoading && (

)}

{/* Input Area */} {!selectedVehicle && (

Please select a vehicle to start asking questions

)}

) }