/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { MoonIcon, SunIcon, XCircleIcon, } from "https://esm.sh/@heroicons/react/24/solid?deps=react@18.2.0&react-dom@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; interface InterviewItem { interviewerQuestion: string; intervieweeResponse: string; timestamp: number; } function App() { const [intervieweeResponse, setIntervieweeResponse] = useState(""); const [response, setResponse] = useState(""); const [interviews, setInterviews] = useState([]); const [isLoading, setIsLoading] = useState(false); const [copyStatus, setCopyStatus] = useState(""); const [interviewPosition, setInterviewPosition] = useState(""); const interviewEndRef = useRef(null); const inputRef = useRef(null); const [isDarkMode, setIsDarkMode] = useState(() => { const savedTheme = localStorage.getItem("theme"); if (savedTheme) return savedTheme === "dark"; return window.matchMedia("(prefers-color-scheme: dark)").matches; }); useEffect(() => { const savedTheme = localStorage.getItem("theme"); if (savedTheme === "dark") { setIsDarkMode(true); document.documentElement.classList.add("dark"); } else { setIsDarkMode(false); document.documentElement.classList.remove("dark"); } }, []); useEffect(() => { // Scroll to bottom when interviews change interviewEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [interviews]); const toggleTheme = () => { const newMode = !isDarkMode; setIsDarkMode(newMode); if (newMode) { document.documentElement.classList.add("dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.classList.remove("dark"); localStorage.setItem("theme", "light"); } }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text).then(() => { setCopyStatus("Copied!"); setTimeout(() => setCopyStatus(""), 2000); }).catch(err => { setCopyStatus("Failed to copy"); console.error("Copy failed", err); setTimeout(() => setCopyStatus(""), 2000); }); }; const clearIntervieweeResponse = () => { setIntervieweeResponse(""); setResponse(""); inputRef.current?.focus(); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); // Prevent submission of empty response if (!intervieweeResponse.trim()) return; // If no interview position is set, use the first response as the position if (!interviewPosition && interviews.length === 0) { setInterviewPosition(intervieweeResponse); } setIsLoading(true); setCopyStatus(""); try { const response = await fetch("/ask", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ intervieweeResponse, interviewPosition: interviewPosition || intervieweeResponse, }), }); const data = await response.json(); // Create a new interview item and add to interviews array const newInterview: InterviewItem = { interviewerQuestion: data.interviewerQuestion, intervieweeResponse: intervieweeResponse, timestamp: Date.now(), }; setInterviews(prev => [...prev, newInterview]); // Reset interviewee response and response states setIntervieweeResponse(""); setResponse(data.response); } catch (error) { const errorResponse = `Error: ${error instanceof Error ? error.message : "Unknown error"}`; // Create a new interview item with error const newInterview: InterviewItem = { interviewerQuestion: "Error occurred", intervieweeResponse: intervieweeResponse, timestamp: Date.now(), }; setInterviews(prev => [...prev, newInterview]); setResponse(errorResponse); } finally { setIsLoading(false); } }; return (

{interviewPosition ? `Interview for ${interviewPosition}` : "AI Interview Assistant"}

{/* Interview Thread */}

{interviews.map((interview, index) => (

{interview.interviewerQuestion}

                    {interview.intervieweeResponse}

))}

{/* Anchor for scrolling */}

setIntervieweeResponse(e.target.value)} placeholder={interviews.length === 0 ? "Enter name of the position to interview for" : "Enter your response to the interviewer's question..."} className="w-full p-2 pr-10 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" required /> {intervieweeResponse && ( )}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/ask") { try { const { intervieweeResponse, interviewPosition } = await request.json(); const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: `I want you to act as an interviewer for a ${interviewPosition} position. I will be the candidate interviewing for this role. You will ask me professional, relevant interview questions specific to this position. Ask me questions one by one like a real interviewer would. Wait for my responses and provide follow-up questions based on my answers. Maintain a professional and structured interview approach.`, }, { role: "user", content: intervieweeResponse, }, ], model: "gpt-4o-mini", max_tokens: 1000, }); return new Response( JSON.stringify({ interviewerQuestion: completion.choices[0].message.content || "No response", response: completion.choices[0].message.content || "No response", }), { headers: { "Content-Type": "application/json" }, }, ); } catch (error) { return new Response( JSON.stringify({ interviewerQuestion: "Error occurred", response: `Error: ${error instanceof Error ? error.message : "Unknown error"}`, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ); } } return new Response( ` AI Interview Assistant

`, { headers: { "content-type": "text/html" }, }, ); }

interview_practice