function MainComponent() { const [level, setLevel] = React.useState("5級"); const [question, setQuestion] = React.useState(null); const [answer, setAnswer] = React.useState(""); const [feedback, setFeedback] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleStart = ()=>{ setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Create a kanji reading question for level ${level}` } ] }) }).then((response)=>response.json()).then((data)=>{ setQuestion(data.choices[0].message.content); setLoading(false); }); }; const handleSubmit = (e)=>{ if (e.key === "Enter") { fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Is the answer "${answer}" correct for the question "${question}"?` } ] }) }).then((response)=>response.json()).then((data)=>{ setFeedback(data.choices[0].message.content); }); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full space-y-6 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "漢字検定アプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, [ "5級", "6級", "7級", "8級" ].map((lv)=>/*#__PURE__*/ React.createElement("button", { key: lv, className: `px-4 py-2 ${level === lv ? "bg-blue-500 text-white" : "bg-gray-200"}`, onClick: ()=>setLevel(lv), __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, lv))), /*#__PURE__*/ React.createElement("button", { onClick: handleStart, className: "px-6 py-3 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "スタート"), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, "読み込み中..."), question && /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, question), /*#__PURE__*/ React.createElement("input", { name: "answer", value: answer, onChange: (e)=>setAnswer(e.target.value), onKeyDown: handleSubmit, className: "px-4 py-2 border border-gray-300 rounded w-full", placeholder: "答えを入力してください", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), feedback && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 24 }, __self: this }, feedback))); }