chore : ai interview fix

Backend/app/api/v1/api.py

@@ -1,5 +1,5 @@
 from fastapi import APIRouter
-from app.api.v1.endpoints import auth, quiz, notes, vapi_ai
+from app.api.v1.endpoints import auth, quiz, notes, vapi_ai  # Add vapi import
 
 api_router = APIRouter()
 
@@ -10,7 +10,6 @@ api_router.include_router(
     tags=["Authentication"]
 )
 
-
 # Include quiz routes
 api_router.include_router(
     quiz.router,
@@ -18,14 +17,16 @@ api_router.include_router(
     tags=["quiz"]
 )
 
+# Include notes routes
 api_router.include_router(
     notes.router,
     prefix="/notes",
     tags=["notes"]
 )
 
+# Add Vapi routes
 api_router.include_router(
     vapi_ai.router,
     prefix="/vapi",
-    tags=["Voice AI"]
+    tags=["Voice Interview"]
 )

Backend/app/api/v1/endpoints/prompts.py

@@ -48,11 +48,10 @@ Strictly follow the JSON structure and generate exactly 10 MCQs.
 """
 
 Interviewer_prompt = """
-        f"You are an expert technical interviewer conducting an interview for the role of {job_role}. "
-        f"The candidate has {experience} years of experience. "
-        f"The difficulty level is {level}. "
-        f"Start by welcoming {name} and asking a relevant opening question. "
-        "Keep your responses concise and conversational. Do not output markdown or code blocks, just speak naturally. "
-        "Assess their skills through follow-up questions."
-    
+You are an expert technical interviewer conducting an interview for the role of {job_role}.
+The candidate has {experience} years of experience.
+The difficulty level is {level}.
+Start by welcoming {name} and asking a relevant opening question.
+Keep your responses concise and conversational. Do not output markdown or code blocks, just speak naturally.
+Assess their skills through follow-up questions.
 """

Backend/app/api/v1/endpoints/vapi_ai.py

@@ -1,36 +1,81 @@
-from fastapi import APIRouter, HTTPException, Body
-from pydantic import BaseModel
-from typing import Optional
-from .prompts import Interviewer_prompt
-from app.schema.models import VapiConfigRequest
+from fastapi import APIRouter, HTTPException, Depends
+from pydantic import BaseModel, Field
+from app.services.vapi_service import vapi_service
 from app.config import settings
+from app.api.deps import get_current_user
+from app.models import User
 
 router = APIRouter()
 
+class InterviewConfigRequest(BaseModel):
+    name: str = Field(..., min_length=2, max_length=100)
+    job_role: str = Field(..., min_length=2, max_length=100)
+    experience: str = Field(..., min_length=1)
+    difficulty: str = Field(default="Medium", pattern="^(Basic|Medium|Hard)$")
 
+class VapiConfigResponse(BaseModel):
+    assistantId: str
+    publicKey: str
+    overrides: dict
 
-@router.post("/get-vapi-config")
-async def get_vapi_config(config: VapiConfigRequest):
-
-    system_prompt   = Interviewer_prompt.format(name = config.name,
-    job_role = config.job_role,
-    experience = config.experience,
-    level = config.level)
-
-    return{
-        "assistantId": "1184587d-21d7-48f4-8e82-623a2e574324", 
-        "overrides": {
-            "variableValues": {
-                "name": config.name,
-                "job_role": config.job_role
-            },
-            "model": {
-                "messages": [
-                    {
-                        "role": "system",
-                        "content": system_prompt
-                    }
-                ]
+@router.post("/get-vapi-config", response_model=VapiConfigResponse)
+async def get_vapi_config(
+    request: InterviewConfigRequest,
+    # current_user: User = Depends(get_current_user)
+):
+    """
+    Returns Vapi configuration for starting an interview call.
+    Protected route - requires authentication.
+    """
+    try:
+        # Create dynamic assistant configuration
+        assistant_config = vapi_service.create_interview_assistant_config(
+            candidate_name=request.name,
+            job_role=request.job_role,
+            experience=request.experience,
+            difficulty=request.difficulty
+        )
+        
+        # Create assistant (you can cache this for reuse)
+        # assistant_id = vapi_service.create_assistant(assistant_config)
+        assistant_id = settings.VAPI_ASSISTANT_ID
+        
+        # Return config for frontend
+        return VapiConfigResponse(
+            assistantId=assistant_id,
+            publicKey=settings.VAPI_PUBLIC_KEY,
+            overrides={
+                "recordingEnabled": True,
+                "variableValues": {
+                    "candidateName": request.name,
+                    "jobRole": request.job_role
+                }
             }
-        }
-    }
+        )
+        
+    except Exception as e:
+        print(f"Vapi Config Error: {e}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to create interview configuration: {str(e)}"
+        )
+
+@router.get("/call-recording/{call_id}")
+async def get_call_recording(
+    call_id: str,
+    # current_user: User = Depends(get_current_user)
+):
+    """
+    Retrieves call recording and transcript after interview ends.
+    """
+    try:
+        recording_data = vapi_service.get_call_recording(call_id)
+        
+        if not recording_data:
+            raise HTTPException(status_code=404, detail="Call recording not found")
+        
+        return recording_data
+        
+    except Exception as e:
+        print(f"Error fetching recording: {e}")
+        raise HTTPException(status_code=500, detail=str(e))

Backend/app/config.py

@@ -16,13 +16,15 @@ class Settings(BaseSettings):
     chroma_port: int
     chroma_collection: str
 
-    GROQ_API_KEY:str
-
-    VAPI_ASSISTANT_ID: str
+    GROQ_API_KEY: str
+    
+    # Add Vapi Settings
     VAPI_PRIVATE_KEY: str
+    VAPI_PUBLIC_KEY: str
+    VAPI_ASSISTANT_ID: str
 
     class Config:
         env_file = ".env"
-        extra = "ignore"  # quiz
+        extra = "ignore"
 
-settings = Settings()
+settings = Settings()

Frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@splinetool/react-spline": "^4.1.0",
         "@splinetool/runtime": "^1.11.2",
         "@tailwindcss/vite": "^4.1.17",
+        "@vapi-ai/web": "^2.5.2",
         "axios": "^1.13.2",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.19",
@@ -73,7 +74,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -277,6 +277,15 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -325,6 +334,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@daily-co/daily-js": {
+      "version": "0.85.0",
+      "resolved": "https://registry.npmjs.org/@daily-co/daily-js/-/daily-js-0.85.0.tgz",
+      "integrity": "sha512-lpl111ZWNTUWDnwYcPuNi9PGJPbLCeCw6LzmEY40nG0hv1jg5JLVW8Rq3Cj/+lOCP6W6h4PXm211ss0FFnxITQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@sentry/browser": "^8.33.1",
+        "bowser": "^2.8.1",
+        "dequal": "^2.0.3",
+        "events": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -1537,6 +1562,81 @@
         "win32"
       ]
     },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.0.tgz",
+      "integrity": "sha512-ROgqtQfpH/82AQIpESPqPQe0UyWywKJsmVIqi3c5Fh+zkds5LUxnssTj3yNd1x+kxaPDVB023jAP+3ibNgeNDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.55.0.tgz",
+      "integrity": "sha512-cP3BD/Q6pquVQ+YL+rwCnorKuTXiS9KXW8HNKu4nmmBAyf7urjs+F6Hr1k9MXP5yQ8W3yK7jRWd09Yu6DHWOiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.55.0.tgz",
+      "integrity": "sha512-roCDEGkORwolxBn8xAKedybY+Jlefq3xYmgN2fr3BTnsXjSYOPC7D1/mYqINBat99nDtvgFvNfRcZPiwwZ1hSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.55.0",
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.55.0.tgz",
+      "integrity": "sha512-nIkfgRWk1091zHdu4NbocQsxZF1rv1f7bbp3tTIlZYbrH62XVZosx5iHAuZG0Zc48AETLE7K4AX9VGjvQj8i9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "8.55.0",
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.55.0.tgz",
+      "integrity": "sha512-1A31mCEWCjaMxJt6qGUK+aDnLDcK6AwLAZnqpSchNysGni1pSn1RWSmk9TBF8qyTds5FH8B31H480uxMPUJ7Cw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.55.0",
+        "@sentry-internal/feedback": "8.55.0",
+        "@sentry-internal/replay": "8.55.0",
+        "@sentry-internal/replay-canvas": "8.55.0",
+        "@sentry/core": "8.55.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.55.0.tgz",
+      "integrity": "sha512-6g7jpbefjHYs821Z+EBJ8r4Z7LT5h80YSWRJaylGS4nW5W5Z2KXzpdnyFarv37O7QjauzVC2E+PABmpkw5/JGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/@splinetool/react-spline": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.1.0.tgz",
@@ -1563,7 +1663,6 @@
       "version": "1.11.2",
       "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.11.2.tgz",
       "integrity": "sha512-rFz3KOQQRHQGzWBvPKRZcI7fZe5qxNYX1FmmCqzsbJkAU/hJdifaxpyN4xESpbkdta6s7riSmoz5lmPGIpZRRQ==",
-      "peer": true,
       "dependencies": {
         "on-change": "^4.0.0",
         "semver-compare": "^1.0.0"
@@ -2007,7 +2106,6 @@
       "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2017,7 +2115,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2090,7 +2187,6 @@
       "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.3",
         "@typescript-eslint/types": "8.46.3",
@@ -2322,6 +2418,19 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@vapi-ai/web": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@vapi-ai/web/-/web-2.5.2.tgz",
+      "integrity": "sha512-mT4DjApi0/0+EK77h2xOLq3qVBa7rv3JNQ+gFWuhFE4YdGYxI51+fn8bQI9N535+zU/Z4jFKXotdBHQJ3filHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@daily-co/daily-js": "^0.85.0",
+        "events": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.0.tgz",
@@ -2349,7 +2458,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2457,6 +2565,12 @@
       "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
       "license": "MIT"
     },
+    "node_modules/bowser": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.13.1.tgz",
+      "integrity": "sha512-OHawaAbjwx6rqICCKgSG0SAnT05bzd7ppyKLVUITZpANBaaMFBAsaNkto3LoQ31tyFP5kNujE8Cdx85G9VzOkw==",
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -2501,7 +2615,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -3091,7 +3204,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3279,6 +3391,15 @@
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
       "license": "MIT"
     },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -5483,7 +5604,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5493,7 +5613,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5550,7 +5669,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -5651,8 +5769,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -6028,7 +6145,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6107,7 +6223,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6339,7 +6454,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -6431,7 +6545,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },

Frontend/package.json

@@ -13,6 +13,7 @@
     "@splinetool/react-spline": "^4.1.0",
     "@splinetool/runtime": "^1.11.2",
     "@tailwindcss/vite": "^4.1.17",
+    "@vapi-ai/web": "^2.5.2",
     "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
@@ -47,4 +48,4 @@
   "keywords": [],
   "author": "",
   "license": "ISC"
-}
+}

Frontend/src/pages/AiInterview.tsx

@@ -1,249 +1,47 @@
-import React, { useState, useEffect } from "react";
-import {
-  Send,
-  Settings,
-  CheckCircle,
-  Mic,
-  PhoneOff,
-  Volume2,
-  Loader2,
-  Activity,
-} from "lucide-react";
-import Vapi from "@vapi-ai/web";
-import API from "../api/api"; // Your Axios instance
-import { useAuth } from "../components/context/AuthContext";
+// AiInterview.tsx
+import { useEffect, useState } from "react";
+import { useVapi } from "../hooks/useVapi";
+import { getVapiConfig } from "../api/vapiService";
 
-// --- CONFIG ---
-const VAPI_PUBLIC_KEY = "6e393730-74a2-4690-8cb7-845ed3880488"; // Replace with your key
-const vapi = new Vapi(VAPI_PUBLIC_KEY);
+export default function AiInterview() {
+  const [interviewConfig, setInterviewConfig] = useState(null);
+  const [vapiKey, setVapiKey] = useState<string | null>(null);
+  const { vapiClient, start, stop } = useVapi(vapiKey);
 
-type InterviewState = "config" | "chat" | "results";
-
-const AIInterview: React.FC = () => {
-  const { username } = useAuth(); // Get logged in user name
-  const [interviewState, setInterviewState] =
-    useState<InterviewState>("config");
-
-  // Form State
-  const [jobRole, setJobRole] = useState("");
-  const [experience, setExperience] = useState("");
-  const [level, setLevel] = useState("Medium");
-
-  // Vapi State
-  const [isSessionActive, setIsSessionActive] = useState(false);
-  const [isSpeaking, setIsSpeaking] = useState(false);
-  const [status, setStatus] = useState("Idle");
-  const [volumeLevel, setVolumeLevel] = useState(0);
-
-  // --- VAPI EVENTS ---
-  useEffect(() => {
-    vapi.on("call-start", () => {
-      setStatus("Connected");
-      setIsSessionActive(true);
-      setInterviewState("chat"); // Switch UI to chat when call starts
-    });
-
-    vapi.on("call-end", () => {
-      setStatus("Call Ended");
-      setIsSessionActive(false);
-      setIsSpeaking(false);
-      setInterviewState("results"); // Switch UI to results when call ends
-    });
-
-    vapi.on("speech-start", () => setIsSpeaking(true));
-    vapi.on("speech-end", () => setIsSpeaking(false));
-
-    vapi.on("volume-level", (level) => setVolumeLevel(level)); // Optional: for animation
-
-    vapi.on("error", (e) => {
-      console.error("Vapi Error:", e);
-      setStatus("Error connecting");
-      setIsSessionActive(false);
-    });
-
-    // Cleanup
-    return () => {
-      vapi.stop();
-      vapi.removeAllListeners();
-    };
-  }, []);
-
-  // --- ACTIONS ---
-
-  const startInterview = async () => {
-    if (!jobRole || !experience) {
-      alert("Please fill in Job Role and Experience.");
-      return;
-    }
+  const handleStartInterview = async () => {
+    try {
+      // 1. Ask backend for config
+      const cfg = await getVapiConfig(interviewConfig);
 
-    setStatus("Configuring AI...");
+      // 2. Save publicKey → this triggers useVapi to create the client
+      setVapiKey(cfg.publicKey);
 
-    try {
-      // 1. Get dynamic config from YOUR backend
-      const response = await API.post("/vapi/get-vapi-config", {
-        name: username,
-        job_role: jobRole,
-        experience: experience,
-        level: level,
-      });
+      // 3. Wait until client is created
+      const waitForClient = () =>
+        new Promise<void>((resolve) => {
+          const interval = setInterval(() => {
+            if (vapiClient) {
+              clearInterval(interval);
+              resolve();
+            }
+          }, 50);
+        });
 
-      const { assistantId, overrides } = response.data;
+      await waitForClient();
 
-      setStatus("Connecting...");
+      // 4. Start the actual voice session
+      await start(cfg.assistantId, cfg.overrides);
 
-      // 2. Start Vapi Call
-      await vapi.start(assistantId, overrides);
+      console.log("Interview started!");
     } catch (err) {
       console.error("Failed to start interview:", err);
-      setStatus("Failed to start");
-      alert("Could not start interview. Check backend connection.");
     }
   };
 
-  const endInterview = () => {
-    vapi.stop();
-    // State change to 'results' happens in 'call-end' listener
-  };
-
-  // --- RENDERERS ---
-
-  // 1. Configuration Phase (Kept mostly same as original)
-  const renderConfig = () => (
-    <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
-      <h3 className="text-2xl font-semibold mb-6 flex items-center gap-2 text-blue-700">
-        <Settings size={24} /> Configure Your Interview
-      </h3>
-
-      <div className="space-y-6">
-        <label className="block">
-          <span className="text-gray-700 font-medium">
-            1. Job Role/Position
-          </span>
-          <input
-            type="text"
-            value={jobRole}
-            onChange={(e) => setJobRole(e.target.value)}
-            placeholder="e.g., Senior Frontend Developer"
-            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
-          />
-        </label>
-
-        <label className="block">
-          <span className="text-gray-700 font-medium">
-            2. Years of Experience
-          </span>
-          <input
-            type="number"
-            value={experience}
-            onChange={(e) => setExperience(e.target.value)}
-            placeholder="e.g., 5"
-            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
-          />
-        </label>
-
-        <label className="block">
-          <span className="text-gray-700 font-medium">3. Difficulty Level</span>
-          <select
-            value={level}
-            onChange={(e) => setLevel(e.target.value)}
-            className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white"
-          >
-            <option value="Basic">Basic</option>
-            <option value="Medium">Medium</option>
-            <option value="Hard">Hard</option>
-          </select>
-        </label>
-      </div>
-
-      <button
-        onClick={startInterview}
-        disabled={status === "Configuring AI..." || status === "Connecting..."}
-        className="mt-8 px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-150 flex items-center gap-2 disabled:opacity-70"
-      >
-        {status === "Configuring AI..." || status === "Connecting..." ? (
-          <Loader2 className="animate-spin" />
-        ) : (
-          <Mic size={20} />
-        )}
-        {status === "Idle" || status === "Error"
-          ? "Start Voice Interview"
-          : status}
-      </button>
-    </div>
-  );
-
-  // 2. Active Chat Phase (Modified for Voice UI)
-  const renderChat = () => (
-    <div className="flex flex-col items-center justify-center bg-white p-8 rounded-xl shadow-lg min-h-[500px] relative">
-      <h3 className="text-xl font-bold mb-2">Live Interview</h3>
-      <p className="text-gray-600 mb-8">
-        {jobRole} • {level} Level
-      </p>
-
-      {/* Dynamic AI Ball based on Speaking State */}
-      <div className="relative mb-10">
-        <div
-          className={`flex items-center justify-center w-32 h-32 rounded-full shadow-2xl transition-all duration-300 ${
-            isSpeaking ? "bg-purple-600 scale-110" : "bg-blue-600 scale-100"
-          }`}
-          style={{
-            boxShadow: isSpeaking
-              ? `0 0 ${30 + volumeLevel * 50}px rgba(147, 51, 234, 0.6)`
-              : "0 0 20px rgba(37, 99, 235, 0.3)",
-          }}
-        >
-          {isSpeaking ? (
-            <Volume2 className="w-12 h-12 text-white animate-pulse" />
-          ) : (
-            <Activity className="w-12 h-12 text-white" />
-          )}
-        </div>
-
-        {/* Status Indicator */}
-        <div className="absolute -bottom-10 left-1/2 -translate-x-1/2 whitespace-nowrap text-gray-500 font-medium animate-pulse">
-          {isSpeaking ? "AI is speaking..." : "Listening to you..."}
-        </div>
-      </div>
-
-      <button
-        onClick={endInterview}
-        className="mt-8 flex items-center gap-2 px-6 py-3 bg-red-100 text-red-600 rounded-full hover:bg-red-200 transition font-semibold"
-      >
-        <PhoneOff size={20} /> End Interview
-      </button>
-    </div>
-  );
-
-  // 3. Results Phase
-  const renderResults = () => (
-    <div className="bg-green-50 p-8 rounded-xl shadow-xl text-center">
-      <CheckCircle size={48} className="text-green-600 mx-auto mb-4" />
-      <h3 className="text-3xl font-bold text-green-700 mb-2">
-        Interview Completed
-      </h3>
-      <p className="text-gray-700 mb-6">
-        The AI interviewer has finished assessing your responses. (Integration
-        with transcript analysis would go here).
-      </p>
-      <button
-        onClick={() => setInterviewState("config")}
-        className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-150"
-      >
-        Start New Interview
-      </button>
-    </div>
-  );
-
   return (
-    <div className="p-8 max-w-4xl mx-auto font-opensans">
-      <h1 className="text-4xl font-extrabold text-gray-800 mb-6">
-        AI Voice Interview 🎙️
-      </h1>
-      {interviewState === "config" && renderConfig()}
-      {interviewState === "chat" && renderChat()}
-      {interviewState === "results" && renderResults()}
+    <div>
+      <button onClick={handleStartInterview}>Start Interview</button>
+      <button onClick={stop}>Stop</button>
     </div>
   );
-};
-
-export default AIInterview;
+}

Frontend/tsconfig.app.json

@@ -22,7 +22,11 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }