function MainComponent() { const [conversation, setConversation] = React.useState([ { role: 'system', content: 'Welcome to the virtual interview simulation.' } ]); const [loading, setLoading] = React.useState(false); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const fetchConversation = async ()=>{ setLoading(true); const updatedConversation = conversation.concat({ role: 'user', content: 'Next interview question.' }); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedConversation, system_prompt: 'Provide the next interview question.', max_tokens: 2000 }) }); if (response.ok) { const data = await response.json(); if (data.status) { setConversation((prev)=>[ ...prev, { role: 'assistant', content: data.result } ]); } } else { setConversation((prev)=>[ ...prev, { role: 'system', content: 'Sorry, the system is currently unavailable.' } ]); } setLoading(false); }; const handleNextQuestion = ()=>{ if (!loading) { fetchConversation(); } }; const handlePreviousQuestion = ()=>{ setCurrentQuestionIndex((prevIndex)=>Math.max(prevIndex - 1, 0)); }; const currentQuestion = conversation.find((message, index)=>message.role === 'assistant' && index === currentQuestionIndex); const interviewerVideoAltText = 'Interviewer in a formal outfit'; const intervieweeVideoAltText = 'Interviewee ready for the interview'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white p-4 mb-4 border-2 border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, currentQuestion ? currentQuestion.content : 'Loading question...')), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8 mb-4 w-full max-w-[1000px]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Interviewer"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-black", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/interviewer-video-placeholder.jpg", alt: interviewerVideoAltText, className: "object-cover w-full h-[300px]", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl text-[#121212]", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Interviewee"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-black", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/interviewee-video-placeholder.jpg", alt: intervieweeVideoAltText, className: "object-cover w-full h-[300px]", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-8", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePreviousQuestion, className: "px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700 disabled:bg-blue-300", disabled: currentQuestionIndex === 0 || loading, __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { onClick: handleNextQuestion, className: "px-4 py-2 text-white bg-green-500 rounded hover:bg-green-700 disabled:bg-green-300", disabled: loading, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "Next Question"))); }