Spaces:

aki-008
/

prepAI

Sleeping

App Files Files Community

aki-008 commited on Dec 6, 2025

Commit

6c6eb30

1 Parent(s): 6e961ea

feat: updated frontend for ai interview

Browse files

Files changed (5) hide show

Backend/app/api/v1/endpoints/interview.py +6 -17
Frontend/index.html +2 -2
Frontend/src/components/dashboard/Sidebar.tsx +44 -20
Frontend/src/pages/AiInterview.tsx +187 -203
Frontend/tailwind.config.cjs +36 -8

Backend/app/api/v1/endpoints/interview.py CHANGED Viewed

@@ -26,22 +26,13 @@ except Exception as e:
     print(f"Vapi SDK Initialization Error: {e}")
     print("Ensure VAPI_PRIVATE_KEY is set in .env")
-# --- CORS SETUP ---
-# app.add_middleware(
-#     CORSMiddleware,
-#     # Allow communication from the frontend running on localhost:5173
-#     # and also allow the ngrok base URL for safety.
-#     allow_origins=["http://localhost:5173", "http://127.0.0.1:5173", SERVER_URL],
-#     allow_credentials=True,
-#     allow_methods=["*"],
-#     allow_headers=["*"],
-# )
 # --- SCHEMAS ---
 class ConfigRequest(BaseModel):
     name: str
     job_role: str
     experience: str
 # --- ENDPOINTS ---
@@ -58,19 +49,17 @@ async def get_vapi_config(data: ConfigRequest):
     try:
         print(f"\n--- New Interview Request ---")
-        print(f"👤 User: {data.name}, Role: {data.job_role}, Exp: {data.experience}")
-        # 1. Construct the Dynamic System Prompt
         system_prompt = (
             f"You are a strict technical interviewer. You are interviewing {data.name} for a {data.job_role} role. "
             f"They have {data.experience} years of experience. "
             f"Ask short, concise questions. Wait for their answer. Do not lecture. "
-            f"Start by asking them to introduce themselves and briefly describe their experience."
         )
-        # 2. Dynamic Webhook URL (for this call only)
-        # Vapi will send webhooks to the public URL defined in SERVER_URL,
-        # specifically hitting this backend's /api/webhook route.
         webhook_url = f"{SERVER_URL}/api/webhook"
         # 3. Construct the Overrides Payload

     print(f"Vapi SDK Initialization Error: {e}")
     print("Ensure VAPI_PRIVATE_KEY is set in .env")
 # --- SCHEMAS ---
 class ConfigRequest(BaseModel):
     name: str
     job_role: str
     experience: str
+    level: str = "Medium"
 # --- ENDPOINTS ---
     try:
         print(f"\n--- New Interview Request ---")
+        print(f"👤 User: {data.name}, Role: {data.job_role}, Exp: {data.experience}, Level: {data.level}")
         system_prompt = (
             f"You are a strict technical interviewer. You are interviewing {data.name} for a {data.job_role} role. "
             f"They have {data.experience} years of experience. "
+            f"The interview difficulty level is {data.level}. "
+            f"If the level is 'Hard', ask complex, multi-layered questions. "
+            f"If 'Medium', focus on standard industry concepts. "
             f"Ask short, concise questions. Wait for their answer. Do not lecture. "
+            f"Start by asking them to introduce themselves."
         )
         webhook_url = f"{SERVER_URL}/api/webhook"
         # 3. Construct the Overrides Payload

Frontend/index.html CHANGED Viewed

@@ -8,8 +8,8 @@
   <title>Prep-AI</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
 </head>
 <body>

   <title>Prep-AI</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
 </head>
 <body>

Frontend/src/components/dashboard/Sidebar.tsx CHANGED Viewed

@@ -1,6 +1,16 @@
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
-import { Home, FileText, Brain, BookOpen, Settings, User, LogOut, ChevronLeft, ChevronRight } from "lucide-react";
 import { useAuth } from "../context/AuthContext";
 const Sidebar: React.FC = () => {
@@ -9,31 +19,45 @@ const Sidebar: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
   const navItems = [
-    { path: "/dashboard", label: "Dashboard", icon: <Home size={18} /> },
-    { path: "/notes", label: "Notes", icon: <BookOpen size={18} /> },
-    { path: "/AIInterview", label: "AI Interview", icon: <Brain size={18} /> },
-    { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
   ];
   return (
     <aside
-      className={`flex flex-col justify-between h-screen bg-linear-to-r from-blue-700 to-gray-900/50 text-white transition-all duration-300 ${collapsed ? "w-20" : "w-64"}`}
     >
       {/* Top Section */}
       <div>
-        <div className="flex items-center justify-between text-2xl font-bold py-6 px-4 border-b border-gray-700">
-          {!collapsed && <span>InterviewAI</span>}
-          <button onClick={() => setCollapsed(!collapsed)} className="p-1">
-            {collapsed ? <ChevronRight size={18} /> : <ChevronLeft size={18} />}
           </button>
         </div>
-        <nav className="p-4 space-y-3">
           {navItems.map((item) => (
             <Link
               key={item.path}
               to={item.path}
-              className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${location.pathname === item.path ? "bg-gray-800" : ""}`}
             >
               {item.icon}
               {!collapsed && <span>{item.label}</span>}
@@ -43,22 +67,22 @@ const Sidebar: React.FC = () => {
       </div>
       {/* Bottom Section */}
-      <div className="p-4 border-t border-gray-700 space-y-4">
-        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left text-gray-300">
-          <Settings size={18} />
           {!collapsed && <span>Settings</span>}
         </button>
-        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left text-gray-300">
-          <User size={18} />
           {!collapsed && <span>{username}</span>}
         </button>
         <button
           onClick={logout}
-          className="flex items-center space-x-3 p-3 rounded-lg bg-red-500 hover:bg-red-600 text-black hover:text-white transition w-full text-left font-medium"
         >
-          <LogOut size={18} />
           {!collapsed && <span>Logout</span>}
         </button>
       </div>
@@ -66,4 +90,4 @@ const Sidebar: React.FC = () => {
   );
 };
-export default Sidebar;

 import React, { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
+import {
+  Home,
+  FileText,
+  Brain,
+  BookOpen,
+  Settings,
+  User,
+  LogOut,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 import { useAuth } from "../context/AuthContext";
 const Sidebar: React.FC = () => {
   const [collapsed, setCollapsed] = useState(false);
   const navItems = [
+    { path: "/dashboard", label: "Dashboard", icon: <Home size={20} /> },
+    { path: "/notes", label: "Notes", icon: <BookOpen size={20} /> },
+    { path: "/AIInterview", label: "AI Interview", icon: <Brain size={20} /> },
+    { path: "/quize", label: "Resume Quiz", icon: <FileText size={20} /> },
   ];
   return (
     <aside
+      className={`flex flex-col justify-between h-screen bg-maya-dark text-white transition-all duration-300 shadow-xl border-r border-indigo-400/30 ${
+        collapsed ? "w-20" : "w-64"
+      }`}
     >
       {/* Top Section */}
       <div>
+        <div className="flex items-center justify-between font-bold py-6 px-6 border-b border-indigo-400/30">
+          {!collapsed && (
+            <span className="text-xl tracking-wide font-handwriting">
+              Maya AI
+            </span>
+          )}
+          <button
+            onClick={() => setCollapsed(!collapsed)}
+            className="p-1 hover:bg-white/10 rounded-full transition"
+          >
+            {collapsed ? <ChevronRight size={20} /> : <ChevronLeft size={20} />}
           </button>
         </div>
+        <nav className="p-4 space-y-2">
           {navItems.map((item) => (
             <Link
               key={item.path}
               to={item.path}
+              className={`flex items-center space-x-3 p-3 rounded-xl transition-all duration-200
+                ${
+                  location.pathname === item.path
+                    ? "bg-white text-maya-dark shadow-md font-semibold translate-x-1"
+                    : "hover:bg-white/10 text-indigo-50"
+                }`}
             >
               {item.icon}
               {!collapsed && <span>{item.label}</span>}
       </div>
       {/* Bottom Section */}
+      <div className="p-4 border-t border-indigo-400/30 space-y-2">
+        <button className="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/10 transition w-full text-left text-indigo-100">
+          <Settings size={20} />
           {!collapsed && <span>Settings</span>}
         </button>
+        <button className="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/10 transition w-full text-left text-indigo-100">
+          <User size={20} />
           {!collapsed && <span>{username}</span>}
         </button>
         <button
           onClick={logout}
+          className="flex items-center space-x-3 p-3 rounded-xl bg-red-400/20 hover:bg-red-400/40 text-red-100 hover:text-white transition w-full text-left"
         >
+          <LogOut size={20} />
           {!collapsed && <span>Logout</span>}
         </button>
       </div>
   );
 };
+export default Sidebar;

Frontend/src/pages/AiInterview.tsx CHANGED Viewed

@@ -1,97 +1,85 @@
 import React, { useEffect, useState } from "react";
 import Vapi from "@vapi-ai/web";
-import { Mic, PhoneOff, Volume2, Loader2, Activity } from "lucide-react";
 // --- CONFIG ---
-// 1. Put your Vapi Public Key here
-const VAPI_PUBLIC_KEY = "6e393730-74a2-4690-8cb7-845ed3880488";
-// 2. Point this to your FastAPI backend
 const BACKEND_URL = "http://localhost:8000";
 const vapi = new Vapi(VAPI_PUBLIC_KEY);
-function App() {
   const [isSessionActive, setIsSessionActive] = useState(false);
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [status, setStatus] = useState("Idle");
   // Form State
-  const [name, setName] = useState("Jane Doe");
-  const [role, setRole] = useState("Senior Frontend Engineer");
-  const [exp, setExp] = useState("7");
   useEffect(() => {
     // Vapi Event Listeners
     vapi.on("call-start", () => {
-      setStatus("Connected (AI is listening)");
       setIsSessionActive(true);
     });
     vapi.on("call-end", () => {
       setStatus("Call Ended");
       setIsSessionActive(false);
       setIsSpeaking(false);
     });
-    vapi.on("speech-start", () => {
-      setStatus("AI is speaking...");
-      setIsSpeaking(true);
-    });
-    vapi.on("speech-end", () => {
-      if (isSessionActive) {
-        setStatus("Connected (Listening)");
-        setIsSpeaking(false);
-      }
-    });
     vapi.on("error", (e) => {
       console.error("Vapi Error:", e);
-      setStatus(`Error: ${e.message}`);
       setIsSessionActive(false);
     });
     return () => {
-      // Cleanup
       vapi.stop();
       vapi.removeAllListeners();
     };
   }, []);
   const startInterview = async () => {
-    if (VAPI_PUBLIC_KEY === "YOUR_PUBLIC_KEY_HERE") {
-      alert("Please update VAPI_PUBLIC_KEY in src/App.tsx");
-      return;
-    }
     setStatus("Configuring...");
     try {
-      // 1. Call your backend to get the dynamic config
       const response = await fetch(
         `${BACKEND_URL}/api/v1/interview/api/get-vapi-config`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ name, job_role: role, experience: exp }),
         }
       );
       const data = await response.json();
-      if (!data.assistantId || !data.overrides) {
-        throw new Error("Invalid config from backend");
-      }
       setStatus("Connecting...");
-      // 2. Start Vapi with the config from backend
       vapi.start(data.assistantId, data.overrides);
     } catch (err: any) {
-      console.error("Start Call API Error:", err);
-      setStatus(
-        `Failed: ${err.message || "Check FastAPI terminal for details."}`
-      );
     }
   };
@@ -99,177 +87,173 @@ function App() {
     vapi.stop();
   };
   return (
-    <div
-      style={{
-        backgroundColor: "#1f2937" /* Slate 800 */,
-        padding: "2.5rem",
-        borderRadius: "1rem",
-        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.5)",
-        maxWidth: "450px",
-        width: "100%",
-        textAlign: "center",
-        color: "#f9fafb" /* Gray 50 */,
-      }}
-    >
-      <h1
-        style={{
-          fontSize: "2rem",
-          fontWeight: "bold",
-          marginBottom: "1.5rem",
-          color: "#60a5fa",
-        }}
-      >
-        Vapi Interview Tester
-      </h1>
-      {/* --- FORM --- */}
-      {!isSessionActive && (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-            marginBottom: "1.5rem",
-          }}
-        >
-          <input
-            type="text"
-            placeholder="Your Name"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            style={inputStyle}
-          />
-          <input
-            type="text"
-            placeholder="Target Role"
-            value={role}
-            onChange={(e) => setRole(e.target.value)}
-            style={inputStyle}
-          />
-          <input
-            type="number"
-            placeholder="Experience (Years)"
-            value={exp}
-            onChange={(e) => setExp(e.target.value)}
-            style={inputStyle}
-          />
-        </div>
-      )}
-      {/* --- VISUALIZER --- */}
-      <div
-        style={{ margin: "2rem 0", display: "flex", justifyContent: "center" }}
-      >
-        <div
-          style={{
-            width: "120px",
-            height: "120px",
-            borderRadius: "50%",
-            backgroundColor: isSpeaking
-              ? "#a855f7"
-              : isSessionActive
-              ? "#2563eb"
-              : "#4b5563",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            color: "white",
-            transition: "all 0.3s ease",
-            transform: isSpeaking ? "scale(1.1)" : "scale(1)",
-            boxShadow: isSpeaking
-              ? "0 0 30px rgba(168, 85, 247, 0.8)"
-              : "0 0 20px rgba(37, 99, 235, 0.4)",
-          }}
-        >
-          {!isSessionActive ? (
-            <Mic size={48} />
-          ) : isSpeaking ? (
-            <Volume2 size={48} />
-          ) : (
-            <Activity size={48} />
-          )}
-        </div>
-      </div>
-      {/* --- CONTROLS --- */}
-      <div style={{ display: "flex", justifyContent: "center", gap: "1rem" }}>
-        {!isSessionActive ? (
-          <button
-            onClick={startInterview}
-            style={btnPrimary}
-            disabled={status === "Connecting..." || status === "Configuring..."}
-          >
-            {status === "Connecting..." || status === "Configuring..." ? (
-              <Loader2 className="animate-spin" />
-            ) : (
-              <Mic />
-            )}
-            {status === "Connecting..." || status === "Configuring..."
-              ? "Starting..."
-              : "Start Interview"}
-          </button>
-        ) : (
-          <button onClick={stopInterview} style={btnDestructive}>
-            <PhoneOff /> End Call
-          </button>
         )}
-      </div>
-      <p
-        style={{ marginTop: "1.5rem", color: "#9ca3af", fontSize: "0.875rem" }}
-      >
-        Status:{" "}
-        <strong
-          style={{ color: status.includes("Error") ? "#f87171" : "#e5e7eb" }}
-        >
-          {status}
-        </strong>
-      </p>
     </div>
   );
 }
-// Simple inline styles for standalone testing
-const inputStyle = {
-  padding: "0.75rem",
-  borderRadius: "0.5rem",
-  border: "1px solid #475569" /* Slate 600 */,
-  fontSize: "1rem",
-  backgroundColor: "#0f172a" /* Slate 900 */,
-  color: "#f9fafb" /* Gray 50 */,
-};
-const btnPrimary = {
-  display: "flex",
-  alignItems: "center",
-  gap: "0.5rem",
-  backgroundColor: "#2563eb" /* Blue 600 */,
-  color: "white",
-  padding: "0.75rem 1.5rem",
-  borderRadius: "0.5rem",
-  border: "none",
-  cursor: "pointer",
-  fontSize: "1rem",
-  fontWeight: "bold",
-  transition: "background-color 0.2s",
-  outline: "none",
-};
-const btnDestructive = {
-  display: "flex",
-  alignItems: "center",
-  gap: "0.5rem",
-  backgroundColor: "#dc2626" /* Red 600 */,
-  color: "white",
-  padding: "0.75rem 1.5rem",
-  borderRadius: "0.5rem",
-  border: "none",
-  cursor: "pointer",
-  fontSize: "1rem",
-  fontWeight: "bold",
-  transition: "background-color 0.2s",
-  outline: "none",
-};
-export default App;

 import React, { useEffect, useState } from "react";
 import Vapi from "@vapi-ai/web";
+import { Mic, PhoneOff, Send, Loader2, Volume2 } from "lucide-react";
 // --- CONFIG ---
+const VAPI_PUBLIC_KEY = "6e393730-74a2-4690-8cb7-845ed3880488"; // Replace with yours
 const BACKEND_URL = "http://localhost:8000";
 const vapi = new Vapi(VAPI_PUBLIC_KEY);
+function AIInterview() {
+  // View State
+  const [viewState, setViewState] = useState<"config" | "interview">("config");
+  // Vapi State
   const [isSessionActive, setIsSessionActive] = useState(false);
   const [isSpeaking, setIsSpeaking] = useState(false);
   const [status, setStatus] = useState("Idle");
   // Form State
+  const [name, setName] = useState("Prakhar"); // Default from screenshot
+  const [role, setRole] = useState("Senior Frontend Developer");
+  const [exp, setExp] = useState("5");
+  const [difficulty, setDifficulty] = useState("Medium (Intermediate)");
   useEffect(() => {
     // Vapi Event Listeners
     vapi.on("call-start", () => {
+      setStatus("Connected");
       setIsSessionActive(true);
+      setViewState("interview"); // Switch to bubble view
     });
     vapi.on("call-end", () => {
       setStatus("Call Ended");
       setIsSessionActive(false);
       setIsSpeaking(false);
+      setViewState("config"); // Go back to config
     });
+    vapi.on("speech-start", () => setIsSpeaking(true));
+    vapi.on("speech-end", () => setIsSpeaking(false));
     vapi.on("error", (e) => {
       console.error("Vapi Error:", e);
+      setStatus("Error connecting");
       setIsSessionActive(false);
+      setViewState("config");
     });
     return () => {
       vapi.stop();
       vapi.removeAllListeners();
     };
   }, []);
   const startInterview = async () => {
     setStatus("Configuring...");
     try {
       const response = await fetch(
         `${BACKEND_URL}/api/v1/interview/api/get-vapi-config`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            name,
+            job_role: role,
+            experience: exp,
+            level: difficulty,
+          }),
         }
       );
       const data = await response.json();
+      if (!data.assistantId || !data.overrides)
+        throw new Error("Invalid config");
       setStatus("Connecting...");
       vapi.start(data.assistantId, data.overrides);
     } catch (err: any) {
+      console.error("Error:", err);
+      setStatus("Failed to start");
     }
   };
     vapi.stop();
   };
+  // --- RENDER ---
   return (
+    <div className="min-h-screen w-full font-sans text-gray-800 relative bg-white">
+      {/* 1. SKETCHY GRID BACKGROUND */}
+      <div className="absolute inset-0 z-0 bg-sketchy-grid bg-sketchy opacity-40 pointer-events-none"></div>
+      {/* 2. COLOR BLOBS (Palette: #F5D3C4, #F2AEBB) */}
+      <div className="absolute top-[-10%] right-[-5%] w-96 h-96 bg-maya-pink rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
+      <div className="absolute bottom-[-10%] left-[-10%] w-96 h-96 bg-maya-beige rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
+      {/* MAIN CONTENT AREA */}
+      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen p-6">
+        {/* --- VIEW 1: CONFIG CARD (The "Maya" UI) --- */}
+        {viewState === "config" && (
+          <div className="w-full max-w-2xl bg-white rounded-xl shadow-2xl border border-gray-200 p-8 md:p-12 transition-all transform hover:scale-[1.005]">
+            <div className="mb-8 text-center">
+              <h1 className="text-4xl font-bold text-gray-800 mb-2 font-handwriting">
+                Maya
+              </h1>
+              <div className="flex items-center justify-center gap-2 text-maya-dark">
+                <BrainIcon />
+                <span className="font-semibold">Configure Your Interview</span>
+              </div>
+            </div>
+            <div className="space-y-6">
+              {/* Input 1: Role */}
+              <div>
+                <label className="block text-sm font-semibold text-gray-600 mb-2">
+                  1. Job Role/Position
+                </label>
+                <input
+                  type="text"
+                  value={role}
+                  onChange={(e) => setRole(e.target.value)}
+                  className="w-full p-4 rounded-lg border-2 border-gray-200 focus:border-maya-light focus:ring-0 outline-none transition bg-gray-50 text-gray-700 font-medium placeholder-gray-400"
+                  placeholder="e.g. Senior Frontend Developer"
+                />
+              </div>
+              {/* Input 2: Experience */}
+              <div>
+                <label className="block text-sm font-semibold text-gray-600 mb-2">
+                  2. Years of Professional Experience
+                </label>
+                <input
+                  type="text" // using text to match wireframe style, backend handles parsing
+                  value={exp}
+                  onChange={(e) => setExp(e.target.value)}
+                  className="w-full p-4 rounded-lg border-2 border-gray-200 focus:border-maya-light focus:ring-0 outline-none transition bg-gray-50 text-gray-700 font-medium placeholder-gray-400"
+                  placeholder="e.g. 5"
+                />
+              </div>
+              {/* Input 3: Difficulty */}
+              <div>
+                <label className="block text-sm font-semibold text-gray-600 mb-2">
+                  3. Difficulty Level
+                </label>
+                <input
+                  type="text"
+                  value={difficulty}
+                  onChange={(e) => setDifficulty(e.target.value)}
+                  className="w-full p-4 rounded-lg border-2 border-gray-200 focus:border-maya-light focus:ring-0 outline-none transition bg-gray-50 text-gray-700 font-medium placeholder-gray-400"
+                  placeholder="Medium (Intermediate)"
+                />
+              </div>
+              {/* Action Button */}
+              <button
+                onClick={startInterview}
+                disabled={
+                  status === "Configuring..." || status === "Connecting..."
+                }
+                className="mt-4 px-8 py-4 bg-white border-2 border-gray-800 text-gray-800 font-bold rounded-lg shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] transition-all flex items-center gap-3 active:bg-gray-50"
+              >
+                {status === "Configuring..." || status === "Connecting..." ? (
+                  <Loader2 className="animate-spin w-5 h-5" />
+                ) : (
+                  <Send className="w-5 h-5" />
+                )}
+                <span>Start Interview</span>
+              </button>
+            </div>
+            {/* Decorative Color Codes (from wireframe) */}
+            <div className="absolute bottom-4 right-6 flex flex-col items-end text-xs text-gray-400 font-mono">
+              <span>#A7AAE1</span>
+              <span>#F5D3C4</span>
+            </div>
+          </div>
         )}
+        {/* --- VIEW 2: INTERVIEW BUBBLE UI (Active Call) --- */}
+        {viewState === "interview" && (
+          <div className="flex flex-col items-center justify-center w-full h-full animate-fade-in-up">
+            {/* The Visualizer Orb */}
+            <div className="relative mb-12">
+              {/* Orb Style: Light Blue/White Swirling
+                 We use CSS gradients + shadowing + pulsing animation
+               */}
+              <div
+                className={`
+                    w-48 h-48 rounded-full
+                    bg-gradient-radial from-white via-blue-100 to-blue-300
+                    shadow-[0_0_60px_rgba(167,170,225,0.6)]
+                    transition-all duration-300 ease-in-out
+                    flex items-center justify-center
+                    border border-white/50
+                    ${
+                      isSpeaking
+                        ? "scale-110 animate-pulse shadow-[0_0_80px_rgba(105,111,199,0.8)]"
+                        : "scale-100 animate-orb-float"
+                    }
+                 `}
+              >
+                {/* Inner shine for "liquid" look */}
+                <div className="absolute top-4 left-6 w-12 h-6 bg-white opacity-60 rounded-full blur-md transform -rotate-45"></div>
+                {isSpeaking ? (
+                  <Volume2 className="text-maya-dark w-12 h-12 opacity-50" />
+                ) : (
+                  <div className="w-3 h-3 bg-maya-dark rounded-full opacity-30"></div>
+                )}
+              </div>
+            </div>
+            {/* Status Text */}
+            <h2 className="text-2xl font-bold text-gray-700 mb-8 font-handwriting">
+              {isSpeaking ? "Maya is speaking..." : "Listening to you..."}
+            </h2>
+            {/* Controls */}
+            <div className="flex gap-6">
+              <button className="flex items-center gap-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full transition font-medium shadow-sm">
+                <Mic size={18} /> Mute
+              </button>
+              <button
+                onClick={stopInterview}
+                className="flex items-center gap-2 px-6 py-3 bg-red-100 hover:bg-red-200 text-red-600 rounded-full transition font-medium shadow-sm"
+              >
+                <PhoneOff size={18} /> End call
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
+// Simple Icon Component
+const BrainIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
+    <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
+  </svg>
+);
+export default AIInterview;

Frontend/tailwind.config.cjs CHANGED Viewed

@@ -5,20 +5,48 @@ module.exports = {
   ],
   theme: {
     extend: {
       animation: {
         spotlight: "spotlight 2s ease .75s 1 forwards",
       },
       keyframes: {
         spotlight: {
-          "0%": {
-            opacity: 0,
-            transform: "translate(-72%, -62%) scale(0.5)",
-          },
-          "100%": {
-            opacity: 1,
-            transform: "translate(-50%,-40%) scale(1)",
-          },
         },
       },
     },
   },

   ],
   theme: {
     extend: {
+      colors: {
+        maya: {
+          dark: "#696FC7",    // Sidebar purple
+          light: "#A7AAE1",   // Light purple buttons/accents
+          beige: "#F5D3C4",   // Background accent
+          pink: "#F2AEBB",    // Background accent
+          grid: "#cfd1e6",    // Grid line color
+        }
+      },
+      backgroundImage: {
+        // Creates the "Graph Paper" sketchy look
+        'sketchy-grid': `
+          linear-gradient(to right, #cfd1e6 1px, transparent 1px),
+          linear-gradient(to bottom, #cfd1e6 1px, transparent 1px)
+        `,
+      },
+      backgroundSize: {
+        'sketchy': '24px 24px',
+      },
+      // Added Font Family for the Sketchy Look
+      fontFamily: {
+        handwriting: ['"Patrick Hand"', 'cursive'],
+        sans: ['"Open Sans"', 'sans-serif'],
+      },
       animation: {
         spotlight: "spotlight 2s ease .75s 1 forwards",
+        'orb-float': "float 6s ease-in-out infinite",
+        'orb-breathe': "breathe 4s ease-in-out infinite",
       },
       keyframes: {
         spotlight: {
+          "0%": { opacity: 0, transform: "translate(-72%, -62%) scale(0.5)" },
+          "100%": { opacity: 1, transform: "translate(-50%,-40%) scale(1)" },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0px)" },
+          "50%": { transform: "translateY(-10px)" },
         },
+        breathe: {
+          "0%, 100%": { transform: "scale(1)" },
+          "50%": { transform: "scale(1.05)" },
+        }
       },
     },
   },