function MainComponent() { const [message, setMessage] = React.useState(""); const [chatResponse, setChatResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [username, setUsername] = React.useState(""); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [wordList, setWordList] = React.useState([]); const [gender, setGender] = React.useState(""); const [languageLevel, setLanguageLevel] = React.useState(""); const [studyRecord, setStudyRecord] = React.useState("No records yet"); const handleSendMessage = async ()=>{ setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: message } ] }) }); const data = await response.json(); const chatMessage = data.choices[0].message.content; setChatResponse(chatMessage); setLoading(false); }; const handleLogin = async ()=>{ setUsername("User1"); setIsLoggedIn(true); await fetch("/api/db/users-99", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `users` (username) VALUES (?)", values: [ "User1" ] }) }); }; const wordClickHandler = async (word)=>{ await fetch("/api/db/words", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `words` (word) VALUES (?)", values: [ word ] }) }); setWordList([ ...wordList, word ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-full max-w-[400px]", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center font-roboto mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "English Conversation App"), !isLoggedIn && /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded-full font-roboto w-full", onClick: handleLogin, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Login with Google"), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 p-4 rounded-lg shadow-sm mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Chat with GPT"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded-md", placeholder: "Type your message here...", rows: "3", name: "chatMessage", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded-full mt-2 w-full font-roboto", onClick: handleSendMessage, disabled: loading, __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, loading ? "Sending..." : "Send"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, chatResponse.split(" ").map((word, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "cursor-pointer", onClick: ()=>wordClickHandler(word), __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, word, " ")))), isLoggedIn && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 p-4 rounded-lg shadow-sm mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "Word List"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", name: "wordList", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, wordList.map((word, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, word)))), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-100 p-4 rounded-lg shadow-sm mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, "Daily Study Record"), /*#__PURE__*/ React.createElement("div", { name: "studyRecord", __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, studyRecord)), /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 p-4 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "User Info"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, "Gender:"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md", name: "gender", value: gender, onChange: (e)=>setGender(e.target.value), __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 132, columnNumber: 21 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, "Female"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 134, columnNumber: 21 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "Language Level:"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded-md", name: "languageLevel", value: languageLevel, onChange: (e)=>setLanguageLevel(e.target.value), __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("option", { value: "NGSL", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this }, "NGSL"), /*#__PURE__*/ React.createElement("option", { value: "NAWL", __source: { fileName: "", lineNumber: 147, columnNumber: 21 }, __self: this }, "NAWL"), /*#__PURE__*/ React.createElement("option", { value: "TSL", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, "TSL"), /*#__PURE__*/ React.createElement("option", { value: "BSL", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, "BSL")))))))); }