function MainComponent() { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(null); const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const name = formData.get("name"); const date = formData.get("date"); const startTime = formData.get("startTime"); const endTime = formData.get("endTime"); const messages = [ { "role": "user", "content": `名前: ${name}, 日付: ${date}, 開始時間: ${startTime}, 終了時間: ${endTime}` } ]; const system_prompt = "生徒の自習室使用時間を管理するための予約サイトを作成して."; setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt }) }); const result = await response.json(); const chatContent = result.choices[0].message.content; setResponse(chatContent); } catch (error) { console.error("Error fetching data:", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-[20px]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "自習室予約サイト"), /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded-lg shadow-md w-[300px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "name", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 px-3 py-2 border border-gray-300 rounded", type: "text", id: "name", name: "name", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "date", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 px-3 py-2 border border-gray-300 rounded", type: "date", id: "date", name: "date", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "startTime", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "開始時間"), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 px-3 py-2 border border-gray-300 rounded", type: "time", id: "startTime", name: "startTime", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", htmlFor: "endTime", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "終了時間"), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 px-3 py-2 border border-gray-300 rounded", type: "time", id: "endTime", name: "endTime", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `bg-blue-500 text-white px-4 py-2 rounded font-roboto w-full ${loading ? "opacity-50 cursor-not-allowed" : ""}`, type: "submit", disabled: loading, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, loading ? "処理中..." : "予約する")), response && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 61, columnNumber: 20 }, __self: this }, response)); }