function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [favoriteCourse, setFavoriteCourse] = React.useState(''); const [courses, setCourses] = React.useState([]); const [result, setResult] = React.useState(''); const fetchGPTResponse = (course)=>{ setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: `Teach English specializing in ${course}` }, { role: 'user', content: 'I would like to learn more about this course.' } ], system_prompt: `Please give details about the course specializing in ${course}.`, max_tokens: 200 }) }).then((response)=>response.json()).then((data)=>{ setResult(data.result); setIsLoading(false); }); }; const handleCourseSelection = (event)=>{ const selectedCourse = event.target.value; setFavoriteCourse(selectedCourse); fetchGPTResponse(selectedCourse); }; React.useEffect(()=>{ // Mock fetching courses const fetchedCourses = [ 'Business English', 'Conversational English', 'Grammar and Writing', 'IELTS Preparation' ]; setCourses(fetchedCourses); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-6 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-center text-[#121212] font-roboto mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "English Learning Portal"), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-circle-o-notch fa-spin text-4xl text-[#555]", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "course-select", className: "block text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Pick your favorite English course:"), /*#__PURE__*/ React.createElement("select", { id: "course-select", name: "course", value: favoriteCourse, onChange: handleCourseSelection, className: "w-full p-2 text-sm border rounded-md font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Select a course"), courses.map((course, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: course, __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, course))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#666] font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, result || 'Details about the selected course will appear here.')))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fa-spin { animation: spin 1s infinite linear; } `)); }