[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]png:file="public/images/card-reference.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-AY3pfscxFsLvVQVgQ6bBKUqsFzaN53.png" isMerged="true" [V0_FILE]png:file="public/images/header-reference.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-8KX0NUpTjYxuLfuzEpSKBQuICFs6MU.png" isMerged="true" [V0_FILE]png:file="public/images/orcampus-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-bV0rLVSCho9WpALHzo3gSCjtCkjEBU.png" isMerged="true" [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", 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: "#31A38B", // Updated to match screenshot foreground: "#ffffff", }, 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: "#E6F7F4", // Light teal foreground: "#1A5F56", // Dark teal }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-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")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/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: 168 52% 42%; /* #31A38B */ --primary-foreground: 0 0% 100%; --secondary: 210 40% 98%; --secondary-foreground: 222.2 84% 4.9%; --muted: 210 40% 98%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 168 52% 92%; /* Light teal */ --accent-foreground: 168 52% 25%; /* Dark teal */ --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: 168 52% 42%; /* #31A38B */ --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: 168 52% 42%; /* #31A38B */ --primary-foreground: 0 0% 100%; --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: 168 52% 92%; /* Light teal */ --accent-foreground: 168 52% 25%; /* Dark teal */ --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: 168 52% 42%; /* #31A38B */ } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom teal theme utilities */ .text-primary-teal { color: #31a38b; } .bg-primary-teal { background-color: #31a38b; } .border-primary-teal { border-color: #31a38b; } .hover\:bg-primary-teal-dark:hover { background-color: #2a8f7e; } /* Custom animations for the logo */ .logo-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Send, User, Calendar, Users, BookOpen, Settings, Clock, MapPin, FileText, UserCheck, GraduationCap, ThumbsUp, ThumbsDown, Heart, Star, MessageSquare, } from "lucide-react" import { Upload, type File, X, CheckCircle, AlertCircle, FileTextIcon, FileSpreadsheet, ImageIcon } from "lucide-react" import { Progress } from "@/components/ui/progress" import Image from "next/image" const ORCampusLogo = () => (

) type UserRole = "admin" | "faculty" | "student" | null interface FileMessage { id: string content: string sender: "user" | "bot" timestamp: Date intent?: string files?: UploadedFile[] feedback?: MessageFeedback } interface MessageFeedback { type: "thumbs_up" | "thumbs_down" | "heart" | "star" | "note" value?: string timestamp: Date } interface Intent { id: string label: string icon: React.ReactNode category: string } interface UploadedFile { id: string name: string size: number type: string url: string uploadProgress: number status: "uploading" | "completed" | "error" } const roleIntents: Record, Intent[]> = { admin: [ { id: "create-scenario", label: "Create New Scenario", icon: , category: "Management", }, { id: "edit-scenario", label: "Edit Existing Scenario", icon: , category: "Management", }, { id: "manage-unpublished", label: "Manage Unpublished Timetable", icon: , category: "Timetable", }, { id: "manage-published", label: "Manage Published Timetable", icon: , category: "Timetable", }, { id: "assign-faculty", label: "Assign Faculty", icon: , category: "Faculty" }, { id: "room-booking", label: "Room Booking Status", icon: , category: "Resources" }, { id: "load-analysis", label: "Load Analysis", icon: , category: "Analytics" }, { id: "upload-data", label: "Upload New Data", icon: , category: "Data" }, ], faculty: [ { id: "my-schedule", label: "My Class Schedule", icon: , category: "Schedule" }, { id: "submit-availability", label: "Submit Availability", icon: , category: "Availability", }, { id: "request-swap", label: "Request Class Swap", icon: , category: "Requests" }, { id: "request-cancellation", label: "Request Class Cancellation", icon: , category: "Requests", }, { id: "request-move", label: "Request Class Move", icon: , category: "Requests" }, ], student: [ { id: "my-schedule", label: "Retrieve My Schedule", icon: , category: "Schedule" }, { id: "exam-schedule", label: "Exam Schedule", icon: , category: "Exams" }, { id: "elective-choices", label: "Fill Elective Choices", icon: , category: "Academics", }, { id: "class-location", label: "Class Location Info", icon: , category: "Location" }, ], } // Enhanced role-specific smart responses const roleSpecificResponses: Record, Record> = { admin: { "create scenario": "I'll help you create a new academic scenario. Please provide: 1) Scenario name, 2) Academic year/semester, 3) Duration, 4) Departments involved, 5) Special constraints. Would you like to start with a template or create from scratch?", "faculty assignment": "I can assist with faculty assignments. Current available faculty: Dr. Smith (CS), Prof. Johnson (Math), Dr. Williams (Physics). Which department and time slots need coverage?", "room booking": "Room availability status: Lecture Hall A (Available 9-11 AM), Lab 1 (Booked until 3 PM), Conference Room (Available). Which specific room and time do you need?", "timetable management": "I can help manage both published and unpublished timetables. Current status: Fall 2024 (Published), Spring 2025 (Draft). What changes do you need to make?", "load analysis": "Generating load analysis report... Current faculty workload: Average 18 hrs/week, Peak: Dr. Smith (24 hrs), Minimum: Prof. Davis (12 hrs). Would you like detailed breakdown by department?", }, faculty: { "my schedule": "Your teaching schedule for this week:\n• Monday: Data Structures (10-11 AM, Room 301)\n• Wednesday: Algorithms (2-3 PM, Room 205)\n• Friday: Database Systems (9-10 AM, Lab 2)\n\nOffice hours: Tue/Thu 3-5 PM. Any conflicts to report?", availability: "Please submit your availability for next semester. Current preferences on file: Morning slots preferred, No Friday afternoons. Update your preferences or confirm current settings?", "class swap": "I can help you request a class swap. Available options: Prof. Johnson (Math, Mon 2-3 PM), Dr. Williams (Physics, Wed 10-11 AM). Which class do you want to swap and with whom?", "class cancellation": "To request class cancellation, I need: 1) Class details, 2) Date/time, 3) Reason, 4) Makeup session preference. Is this for a single session or recurring?", "room change": "Room change request form ready. Current assignment and preferred new room? I'll check availability and conflict resolution options.", }, student: { "my schedule": "Your class schedule for today:\n• 9:00 AM - Mathematics (Room 201, Prof. Anderson)\n• 11:00 AM - Data Structures (Room 301, Dr. Smith)\n• 2:00 PM - Physics Lab (Lab 1, Dr. Williams)\n\nNext class: Mathematics in 45 minutes. Need directions?", "exam schedule": "Your upcoming exams:\n• Mathematics: March 15th, 9:00 AM (Room 101)\n• Data Structures: March 18th, 2:00 PM (Room 205)\n• Physics: March 22nd, 10:00 AM (Lab 1)\n\nStudy materials available in library. Need exam preparation tips?", "elective choices": "Elective selection for next semester is open. Available options based on your major:\n• Advanced Programming (Dr. Smith)\n• Database Design (Prof. Johnson)\n• Web Development (Dr. Davis)\nDeadline: March 30th. Need course descriptions?", "class location": "Room locations:\n• Room 301: 3rd floor, CS Building (near elevator)\n• Lab 1: Ground floor, Engineering Building\n• Room 201: 2nd floor, Math Building\nNeed campus map or walking directions?", }, } export default function ChatbotScreen() { const [userRole, setUserRole] = useState(null) const [messages, setMessages] = useState([ { id: "1", content: "Hello! I'm your ORCampus AI Assistant. Please select your role to get started with personalized support.", sender: "bot", timestamp: new Date(), }, ]) const [inputMessage, setInputMessage] = useState("") const [isTyping, setIsTyping] = useState(false) const messagesEndRef = useRef(null) const [uploadingFiles, setUploadingFiles] = useState([]) const [dragActive, setDragActive] = useState(false) const fileInputRef = useRef(null) const [showFeedback, setShowFeedback] = useState(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const handleRoleSelect = (role: UserRole) => { setUserRole(role) const roleMessages: Record, string> = { admin: "Welcome, Administrator! I'm here to help you manage academic scenarios, timetables, faculty assignments, and system analytics. I can assist with data uploads, load analysis, and comprehensive administrative tasks. What would you like to accomplish today?", faculty: "Welcome, Faculty Member! I can help you manage your teaching schedule, submit availability preferences, request class changes, and handle administrative tasks. I'm equipped with your current schedule and can provide personalized assistance. How can I support you today?", student: "Welcome, Student! I'm here to help you navigate your academic journey. I can provide your personalized schedule, exam information, class locations, elective guidance, and answer academic queries. What information do you need?", } if (role) { addBotMessage(roleMessages[role]) } } const addBotMessage = (content: string, intent?: string) => { const newMessage: FileMessage = { id: Date.now().toString(), content, sender: "bot", timestamp: new Date(), intent, } setMessages((prev) => [...prev, newMessage]) } const addUserMessage = (content: string) => { const newMessage: FileMessage = { id: Date.now().toString(), content, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, newMessage]) } const processMessage = (message: string) => { const lowerMessage = message.toLowerCase() if (!userRole) return "Please select your role first to get personalized assistance." // Check for role-specific responses const roleResponses = roleSpecificResponses[userRole] for (const [key, response] of Object.entries(roleResponses)) { if (lowerMessage.includes(key.toLowerCase())) { return response } } // Enhanced general responses based on role if (userRole === "admin") { if (lowerMessage.includes("help") || lowerMessage.includes("what can you do")) { return "As an Administrator, I can help you with:\n• Creating and managing academic scenarios\n• Faculty assignment and workload analysis\n• Timetable management (published/unpublished)\n• Room booking and resource allocation\n• Data uploads and system analytics\n• Generating reports and insights\n\nWhat specific task would you like to work on?" } return "I can assist you with administrative tasks including scenario management, faculty assignments, timetable coordination, and system analytics. Please specify what you'd like to work on, or select from the quick actions above." } else if (userRole === "faculty") { if (lowerMessage.includes("help") || lowerMessage.includes("what can you do")) { return "As a Faculty Member, I can help you with:\n• Viewing and managing your class schedule\n• Submitting availability preferences\n• Requesting class swaps or changes\n• Room change requests\n• Class cancellation procedures\n• Academic calendar information\n\nWhat would you like assistance with?" } return "I can help you manage your teaching responsibilities, schedule preferences, and administrative requests. Feel free to ask about your classes, submit requests, or get information about academic procedures." } else if (userRole === "student") { if (lowerMessage.includes("help") || lowerMessage.includes("what can you do")) { return "As a Student, I can help you with:\n• Your personalized class schedule\n• Exam dates and locations\n• Class room locations and directions\n• Elective course selection\n• Academic calendar events\n• Campus navigation assistance\n\nWhat information do you need?" } return "I'm here to support your academic success! I can provide schedule information, exam details, course guidance, and help you navigate campus resources. What would you like to know?" } return "I'm here to help! Please let me know what specific information or assistance you need." } const handleFeedback = (messageId: string, feedbackType: MessageFeedback["type"], value?: string) => { setMessages((prev) => prev.map((msg) => msg.id === messageId ? { ...msg, feedback: { type: feedbackType, value, timestamp: new Date() } } : msg, ), ) setShowFeedback(null) // You could send this feedback to your analytics service here console.log(`Feedback for message ${messageId}: ${feedbackType}`, value) } const getFileIcon = (fileType: string) => { if (fileType.includes("image")) return if (fileType.includes("spreadsheet") || fileType.includes("excel") || fileType.includes("csv")) return return } const formatFileSize = (bytes: number) => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } const validateFile = (file: File): string | null => { const maxSize = 10 * 1024 * 1024 // 10MB const allowedTypes = [ "application/pdf", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/csv", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "image/jpeg", "image/png", "image/gif", "text/plain", ] if (file.size > maxSize) { return "File size must be less than 10MB" } if (!allowedTypes.includes(file.type)) { return "File type not supported. Please upload PDF, Excel, CSV, Word, or image files." } return null } const simulateFileUpload = (file: File): Promise => { return new Promise((resolve) => { setTimeout( () => { resolve(URL.createObjectURL(file)) }, 2000 + Math.random() * 3000, ) }) } const handleFileUpload = async (files: FileList) => { const fileArray = Array.from(files) const validFiles: File[] = [] const errors: string[] = [] fileArray.forEach((file) => { const error = validateFile(file) if (error) { errors.push(`${file.name}: ${error}`) } else { validFiles.push(file) } }) if (errors.length > 0) { addBotMessage(`Upload errors: ${errors.join(", ")}`) return } const newUploadingFiles: UploadedFile[] = validFiles.map((file) => ({ id: Date.now().toString() + Math.random().toString(), name: file.name, size: file.size, type: file.type, url: "", uploadProgress: 0, status: "uploading", })) setUploadingFiles((prev) => [...prev, ...newUploadingFiles]) for (let i = 0; i < validFiles.length; i++) { const file = validFiles[i] const uploadingFile = newUploadingFiles[i] try { const progressInterval = setInterval(() => { setUploadingFiles((prev) => prev.map((f) => f.id === uploadingFile.id ? { ...f, uploadProgress: Math.min(f.uploadProgress + 10, 90) } : f, ), ) }, 200) const url = await simulateFileUpload(file) clearInterval(progressInterval) setUploadingFiles((prev) => prev.map((f) => (f.id === uploadingFile.id ? { ...f, url, uploadProgress: 100, status: "completed" } : f)), ) setTimeout(() => { processUploadedFile(file, uploadingFile.id) }, 500) } catch (error) { setUploadingFiles((prev) => prev.map((f) => (f.id === uploadingFile.id ? { ...f, status: "error" } : f))) } } } const processUploadedFile = (file: File, fileId: string) => { let response = "" if (userRole === "admin") { if (file.type.includes("csv") || file.type.includes("excel")) { response = `Data file "${file.name}" uploaded successfully! I can help you:\n• Validate data format and structure\n• Import into the academic management system\n• Generate data quality reports\n• Schedule bulk operations\n\nWould you like me to proceed with data validation?` } else if (file.type.includes("pdf") || file.type.includes("word")) { response = `Document "${file.name}" uploaded successfully! I can help you:\n• Process for scenario creation\n• Extract policy information\n• Generate document summaries\n• Archive in the system\n\nHow would you like to process this document?` } } else if (userRole === "faculty") { if (file.type.includes("csv") || file.type.includes("excel")) { response = `Schedule file "${file.name}" uploaded successfully! I can help you:\n• Submit availability preferences\n• Request schedule modifications\n• Compare with current assignments\n• Generate conflict reports\n\nWhat would you like me to do with this schedule data?` } else { response = `Document "${file.name}" uploaded successfully! I can help you:\n• Process class-related documentation\n• Submit administrative requests\n• Archive course materials\n• Generate required reports\n\nHow can I assist with this document?` } } else if (userRole === "student") { response = `File "${file.name}" uploaded successfully! I can help you:\n• Process elective choice submissions\n• Handle academic documentation\n• Submit assignment materials\n• Generate academic reports\n\nWhat would you like me to do with this file?` } if (!response) { response = `File "${file.name}" uploaded successfully! How would you like me to help you process this file?` } addBotMessage(response) } const handleDrag = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true) } else if (e.type === "dragleave") { setDragActive(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setDragActive(false) if (e.dataTransfer.files && e.dataTransfer.files[0]) { handleFileUpload(e.dataTransfer.files) } } const removeUploadingFile = (fileId: string) => { setUploadingFiles((prev) => prev.filter((f) => f.id !== fileId)) } const handleSendMessage = () => { if (!inputMessage.trim() && uploadingFiles.length === 0) return const completedFiles = uploadingFiles.filter((f) => f.status === "completed") if (inputMessage.trim()) { const newMessage: FileMessage = { id: Date.now().toString(), content: inputMessage, sender: "user", timestamp: new Date(), files: completedFiles.length > 0 ? completedFiles : undefined, } setMessages((prev) => [...prev, newMessage]) } if (completedFiles.length > 0 && !inputMessage.trim()) { const fileNames = completedFiles.map((f) => f.name).join(", ") const newMessage: FileMessage = { id: Date.now().toString(), content: `Uploaded files: ${fileNames}`, sender: "user", timestamp: new Date(), files: completedFiles, } setMessages((prev) => [...prev, newMessage]) } setIsTyping(true) setUploadingFiles([]) setTimeout(() => { let response = inputMessage.trim() ? processMessage(inputMessage) : "" if (completedFiles.length > 0 && !response) { response = "I've received your files. How can I help you process them?" } addBotMessage(response || "I'm here to help! What would you like to do next?") setIsTyping(false) }, 1000) setInputMessage("") } const handleIntentClick = (intent: Intent) => { addUserMessage(intent.label) setIsTyping(true) setTimeout(() => { let response = "" const roleResponses = roleSpecificResponses[userRole!] // Check for specific intent responses for (const [key, res] of Object.entries(roleResponses)) { if (intent.label.toLowerCase().includes(key.toLowerCase())) { response = res break } } if (!response) { switch (intent.id) { case "create-scenario": response = roleResponses["create scenario"] || "I can help you create a new scenario. Please provide the scenario details." break case "my-schedule": response = roleResponses["my schedule"] || "Let me retrieve your current schedule information." break case "exam-schedule": response = roleResponses["exam schedule"] || "Here's your upcoming exam information." break case "room-booking": response = roleResponses["room booking"] || "I can help you check room availability and make bookings." break default: response = `I can help you with "${intent.label}". Please provide more details about what you need.` } } addBotMessage(response, intent.id) setIsTyping(false) }, 1000) } const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

{/* Header with ORCampus logo and window controls */}

ORCampus AI assistant

{userRole ? `${userRole.charAt(0).toUpperCase() + userRole.slice(1)} Support` : "Ready to help"}

{/* Window Controls */}

{/* Quick Actions Section */}

{!userRole ? (

Select Your Role to Get Started

) : (

Quick Actions

{userRole && roleIntents[userRole].map((intent) => ( handleIntentClick(intent)} >

{intent.icon}

{intent.label}

))}

)}

{/* Messages */}

{messages.map((message) => (

{message.sender === "user" ? : }

{message.content}

{message.files && message.files.length > 0 && (

{message.files.map((file) => (

{getFileIcon(file.type)}

{file.name}

{formatFileSize(file.size)}

))}

)}

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

{/* Feedback Section for Bot Messages */} {message.sender === "bot" && (

{message.feedback ? (

{message.feedback.type === "thumbs_up" && } {message.feedback.type === "thumbs_down" && } {message.feedback.type === "heart" && } {message.feedback.type === "star" && } Feedback received

) : (

)} {showFeedback === message.id && (

{ if (e.key === "Enter") { handleFeedback(message.id, "note", (e.target as HTMLInputElement).value) } }} />

)}

))} {isTyping && (

)}

{/* Input Area */}

{uploadingFiles.length > 0 && (

{uploadingFiles.map((file) => (

{getFileIcon(file.type)}

{file.name}

{formatFileSize(file.size)}

{file.status === "uploading" && (

Uploading... {file.uploadProgress}%

)} {file.status === "completed" && (

Upload completed

)} {file.status === "error" && (

Upload failed

)}

))}

)}

{dragActive && (

Drop files here to upload

)}

setInputMessage(e.target.value)} onKeyPress={handleKeyPress} placeholder={userRole ? "Ask me anything or upload files..." : "Please select your role first..."} disabled={!userRole} className="flex-1" /> e.target.files && handleFileUpload(e.target.files)} className="hidden" />

{userRole && (

)}

) }