function MainComponent() { const [responses, setResponses] = useState([]); const [currentQuestion, setCurrentQuestion] = useState(0); const [userResponse, setUserResponse] = useState(""); const [analysis, setAnalysis] = useState(""); const [isAnalyzing, setIsAnalyzing] = useState(false); const [streamingResponse, setStreamingResponse] = useState(""); const [selectedRole, setSelectedRole] = useState(""); const [customRole, setCustomRole] = useState(""); const [showCustomRole, setShowCustomRole] = useState(false); const [timer, setTimer] = useState(0); const [experienceLevel, setExperienceLevel] = useState(""); const [industry, setIndustry] = useState(""); const [overallScore, setOverallScore] = useState(0); const [customTimer, setCustomTimer] = useState(180); const [showCustomTimer, setShowCustomTimer] = useState(false); const [notes, setNotes] = useState(""); const [keywords, setKeywords] = useState([]); const timerRef = useRef(null); const jobRoles = [ "Software Engineer", "Product Manager", "Data Scientist", "UX Designer", "Marketing Manager", "Business Analyst", "Sales Representative", "Human Resources Manager", "Financial Analyst", "Project Manager", "Operations Manager", "Customer Success Manager", "Account Executive", "Content Writer", "Graphic Designer", "Other" ]; const experienceLevels = [ "Entry Level (0-2 years)", "Mid Level (3-5 years)", "Senior Level (6-10 years)", "Expert Level (10+ years)" ]; const industries = [ "Technology", "Healthcare", "Finance", "Education", "Retail", "Manufacturing", "Entertainment", "Other" ]; const interviewQuestions = [ "Tell me about yourself.", "What are your greatest strengths?", "Where do you see yourself in 5 years?", "Why should we hire you?", "What's your biggest professional achievement?" ]; const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingResponse, onFinish: (message)=>{ setAnalysis(message); setStreamingResponse(""); setIsAnalyzing(false); const newResponse = { question: interviewQuestions[currentQuestion], response: userResponse, analysis: message, role: showCustomRole ? customRole : selectedRole, experienceLevel, industry, timestamp: new Date().toISOString(), notes, keywords }; setResponses([ ...responses, newResponse ]); setUserResponse(""); setNotes(""); setKeywords([]); if (currentQuestion < interviewQuestions.length - 1) { setCurrentQuestion((prev)=>prev + 1); calculateOverallScore([ ...responses, newResponse ]); } } }); const handleRoleChange = (role)=>{ if (role === "Other") { setShowCustomRole(true); setSelectedRole(role); } else { setShowCustomRole(false); setSelectedRole(role); setCustomRole(""); } setCurrentQuestion(0); setResponses([]); setOverallScore(0); }; const startTimer = ()=>{ setTimer(showCustomTimer ? customTimer : 180); timerRef.current = setInterval(()=>{ setTimer((prev)=>{ if (prev <= 1) { clearInterval(timerRef.current); return 0; } return prev - 1; }); }, 1000); }; const calculateOverallScore = (allResponses)=>{ if (allResponses.length === 0) return; const totalScore = allResponses.reduce((acc, response)=>{ const analysis = response.analysis.toLowerCase(); let score = 0; if (analysis.includes("excellent") || analysis.includes("outstanding")) score += 5; else if (analysis.includes("good") || analysis.includes("strong")) score += 4; else if (analysis.includes("adequate") || analysis.includes("fair")) score += 3; else if (analysis.includes("needs improvement")) score += 2; else score += 1; return acc + score; }, 0); setOverallScore(Math.round(totalScore / allResponses.length * 20)); }; const addKeyword = (keyword)=>{ if (keyword.trim() && !keywords.includes(keyword.trim())) { setKeywords([ ...keywords, keyword.trim() ]); } }; const removeKeyword = (keywordToRemove)=>{ setKeywords(keywords.filter((k)=>k !== keywordToRemove)); }; const canSubmit = userResponse.trim() && (showCustomRole ? customRole.trim() : selectedRole) && experienceLevel && industry; const handleSubmitResponse = async ()=>{ setIsAnalyzing(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are an expert interview coach specializing in ${showCustomRole ? customRole : selectedRole} positions. Consider that this candidate has ${experienceLevel} of experience and is applying in the ${industry} industry. Analyze the candidate's response and provide constructive feedback. Include: 1) Overall impression 2) Strengths 3) Areas for improvement 4) Industry-specific suggestions 5) Experience-level appropriate recommendations. Keep the analysis concise but actionable.` }, { role: "user", content: `Question: ${interviewQuestions[currentQuestion]}\n\nCandidate's Response: ${userResponse}\n\nPlease analyze this interview response for a ${showCustomRole ? customRole : selectedRole} position, considering ${experienceLevel} experience level in the ${industry} industry.` } ], stream: true }) }); handleStreamResponse(response); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#1a237e] to-[#0d47a1] p-4", __source: { fileName: "", lineNumber: 171, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-8", __source: { fileName: "", lineNumber: 173, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white font-roboto flex items-center gap-3", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-white/10 p-3 rounded-lg backdrop-blur-sm", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, "🎯"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, "AI Interview Prep")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.print(), className: "bg-white/10 text-white px-6 py-3 rounded-lg hover:bg-white/20 transition-all duration-300 backdrop-blur-sm flex items-center gap-2 font-medium", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }), "Export")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 backdrop-blur-sm rounded-xl shadow-2xl p-8 mb-8 border border-white/20", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a237e] font-bold mb-3 text-lg", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, "Select Job Role"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: selectedRole, onChange: (e)=>handleRoleChange(e.target.value), className: "w-full p-3 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50 text-[#1a237e]", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 200, columnNumber: 17 }, __self: this }, "Choose a role..."), jobRoles.map((role)=>/*#__PURE__*/ React.createElement("option", { key: role, value: role, __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, role))), showCustomRole && /*#__PURE__*/ React.createElement("input", { type: "text", value: customRole, onChange: (e)=>setCustomRole(e.target.value), placeholder: "Enter your job role", className: "w-full p-3 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a237e] font-bold mb-3 text-lg", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, "Experience Level"), /*#__PURE__*/ React.createElement("select", { value: experienceLevel, onChange: (e)=>setExperienceLevel(e.target.value), className: "w-full p-3 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50 text-[#1a237e]", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 228, columnNumber: 15 }, __self: this }, "Select experience level..."), experienceLevels.map((level)=>/*#__PURE__*/ React.createElement("option", { key: level, value: level, __source: { fileName: "", lineNumber: 230, columnNumber: 17 }, __self: this }, level)))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a237e] font-bold mb-3 text-lg", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, "Industry"), /*#__PURE__*/ React.createElement("select", { value: industry, onChange: (e)=>setIndustry(e.target.value), className: "w-full p-3 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50 text-[#1a237e]", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, "Select industry..."), industries.map((ind)=>/*#__PURE__*/ React.createElement("option", { key: ind, value: ind, __source: { fileName: "", lineNumber: 248, columnNumber: 17 }, __self: this }, ind)))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 255, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#1a237e]", __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this }, "Question ", currentQuestion + 1, /*#__PURE__*/ React.createElement("span", { className: "text-[#1a237e]/60 text-lg", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, "/", interviewQuestions.length)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-6", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 264, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCustomTimer(!showCustomTimer), className: "text-[#1a237e] hover:text-[#0d47a1] mr-2 transition-colors", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog", __source: { fileName: "", lineNumber: 269, columnNumber: 21 }, __self: this })), timer > 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-[#f44336] bg-[#ffebee] px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 272, columnNumber: 21 }, __self: this }, Math.floor(timer / 60), ":", (timer % 60).toString().padStart(2, "0")) : showCustomTimer ? /*#__PURE__*/ React.createElement("input", { type: "number", value: customTimer, onChange: (e)=>setCustomTimer(Math.max(0, parseInt(e.target.value))), className: "w-20 p-2 border-2 border-[#1a237e]/20 rounded-lg text-center", placeholder: "Sec", __source: { fileName: "", lineNumber: 277, columnNumber: 21 }, __self: this }) : null), overallScore > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold px-4 py-2 rounded-lg bg-[#e8f5e9] text-[#2e7d32]", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }, overallScore, "%"))), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-6 text-[#1a237e]/80 bg-[#e8eaf6] p-4 rounded-lg border-l-4 border-[#1a237e]", __source: { fileName: "", lineNumber: 295, columnNumber: 13 }, __self: this }, interviewQuestions[currentQuestion])), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 300, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: userResponse, onChange: (e)=>setUserResponse(e.target.value), className: "w-full h-40 p-4 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50 resize-none text-lg", placeholder: "Type your response here...", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 309, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a237e] font-bold mb-3 text-lg", __source: { fileName: "", lineNumber: 310, columnNumber: 13 }, __self: this }, "Personal Notes"), /*#__PURE__*/ React.createElement("textarea", { value: notes, onChange: (e)=>setNotes(e.target.value), className: "w-full h-24 p-4 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50 resize-none", placeholder: "Add any personal notes or reminders...", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#1a237e] font-bold mb-3 text-lg", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this }, "Keywords"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-3", __source: { fileName: "", lineNumber: 325, columnNumber: 13 }, __self: this }, keywords.map((keyword, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-[#e8eaf6] text-[#1a237e] px-4 py-2 rounded-full text-sm flex items-center font-medium", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, keyword, /*#__PURE__*/ React.createElement("button", { onClick: ()=>removeKeyword(keyword), className: "ml-2 hover:text-[#f44336] transition-colors", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, "×")))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Add keywords", className: "flex-1 p-3 border-2 border-[#1a237e]/20 rounded-lg focus:border-[#1a237e] transition-colors bg-white/50", onKeyPress: (e)=>{ if (e.key === "Enter") { addKeyword(e.target.value); e.target.value = ""; } }, __source: { fileName: "", lineNumber: 342, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ const input = document.querySelector('input[type="text"]'); addKeyword(input.value); input.value = ""; }, className: "bg-[#1a237e] text-white px-6 py-2 rounded-lg hover:bg-[#0d47a1] transition-colors font-medium", __source: { fileName: "", lineNumber: 353, columnNumber: 15 }, __self: this }, "Add"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 366, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSubmitResponse, disabled: !canSubmit || isAnalyzing, className: "bg-[#1a237e] text-white px-8 py-3 rounded-lg hover:bg-[#0d47a1] disabled:bg-gray-400 transition-colors font-medium text-lg flex-1 mr-4", __source: { fileName: "", lineNumber: 367, columnNumber: 13 }, __self: this }, isAnalyzing ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 374, columnNumber: 19 }, __self: this }), " Analyzing") : "Submit Response"), !timer && /*#__PURE__*/ React.createElement("button", { onClick: startTimer, className: "bg-[#e8eaf6] text-[#1a237e] px-6 py-3 rounded-lg hover:bg-[#c5cae9] transition-colors font-medium", __source: { fileName: "", lineNumber: 381, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }), " Start Timer"))), responses.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white/95 backdrop-blur-sm rounded-xl shadow-2xl p-8 border border-white/20", __source: { fileName: "", lineNumber: 392, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 393, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#1a237e]", __source: { fileName: "", lineNumber: 394, columnNumber: 15 }, __self: this }, "Previous Responses"), overallScore > 0 && /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold px-6 py-3 rounded-lg bg-[#1a237e] text-white", __source: { fileName: "", lineNumber: 398, columnNumber: 17 }, __self: this }, "Overall Score: ", overallScore, "%")), responses.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-8 border-b border-[#1a237e]/10 pb-6 last:border-b-0", __source: { fileName: "", lineNumber: 404, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-[#1a237e] text-lg", __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }, "Q: ", item.question), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#1a237e]/60 bg-[#e8eaf6] px-3 py-1 rounded-full", __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }, new Date(item.timestamp).toLocaleString())), /*#__PURE__*/ React.createElement("p", { className: "text-[#1a237e]/80 mb-4 text-lg", __source: { fileName: "", lineNumber: 416, columnNumber: 17 }, __self: this }, "A: ", item.response), /*#__PURE__*/ React.createElement("div", { className: "bg-[#e8eaf6] p-6 rounded-xl", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-[#1a237e]", __source: { fileName: "", lineNumber: 421, columnNumber: 21 }, __self: this }, "AI Analysis:"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 text-sm", __source: { fileName: "", lineNumber: 422, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-white/50 px-3 py-1 rounded-full text-[#1a237e]", __source: { fileName: "", lineNumber: 423, columnNumber: 23 }, __self: this }, item.role), /*#__PURE__*/ React.createElement("span", { className: "bg-white/50 px-3 py-1 rounded-full text-[#1a237e]", __source: { fileName: "", lineNumber: 426, columnNumber: 23 }, __self: this }, item.experienceLevel), /*#__PURE__*/ React.createElement("span", { className: "bg-white/50 px-3 py-1 rounded-full text-[#1a237e]", __source: { fileName: "", lineNumber: 429, columnNumber: 23 }, __self: this }, item.industry))), /*#__PURE__*/ React.createElement("p", { className: "text-[#1a237e]/80 whitespace-pre-line", __source: { fileName: "", lineNumber: 434, columnNumber: 19 }, __self: this }, item.analysis)))), isAnalyzing && streamingResponse && /*#__PURE__*/ React.createElement("div", { className: "mb-8 pb-6", __source: { fileName: "", lineNumber: 441, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-[#1a237e] mb-3 text-lg", __source: { fileName: "", lineNumber: 442, columnNumber: 17 }, __self: this }, "Q: ", interviewQuestions[currentQuestion]), /*#__PURE__*/ React.createElement("p", { className: "text-[#1a237e]/80 mb-4 text-lg", __source: { fileName: "", lineNumber: 445, columnNumber: 17 }, __self: this }, "A: ", userResponse), /*#__PURE__*/ React.createElement("div", { className: "bg-[#e8eaf6] p-6 rounded-xl", __source: { fileName: "", lineNumber: 448, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold text-[#1a237e] mb-3", __source: { fileName: "", lineNumber: 449, columnNumber: 19 }, __self: this }, "AI Analysis:"), /*#__PURE__*/ React.createElement("p", { className: "text-[#1a237e]/80 whitespace-pre-line", __source: { fileName: "", lineNumber: 450, columnNumber: 19 }, __self: this }, streamingResponse)))))); }

🎯AI Interview Prep

Question 1/5