function MainComponent() { const [loading, setLoading] = React.useState(false); const fetchChatGPTResponse = async (userMessage)=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ] }) }); const data = await response.json(); const assistantMessage = data.choices[0].message.content; document.getElementById("chatResponse").innerText = assistantMessage; setLoading(false); }; const handleSubmit = (event)=>{ event.preventDefault(); const userMessage = event.target.elements.message.value; fetchChatGPTResponse(userMessage); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full min-h-screen p-4 bg-cover bg-center", style: { backgroundImage: `url('/path-to-your-image/fitre-background.jpg')` }, __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333333] font-crimson-text my-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "フィットレ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333333] font-semibold mb-2", htmlFor: "username", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "ユーザー名"), /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", className: "p-2 w-full border border-[#cccccc] rounded-md", placeholder: "ユーザー名を入力してください", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#333333] font-semibold mb-2", htmlFor: "password", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "パスワード"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", className: "p-2 w-full border border-[#cccccc] rounded-md", placeholder: "パスワードを入力してください", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("textarea", { name: "message", rows: "4", className: "p-2 w-full border border-[#cccccc] rounded-md", placeholder: "質問を入力してください...", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full mt-2 p-2 bg-[#d62027] text-white font-semibold rounded-md", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "送信")), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-full max-w-md mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#d62027] text-xl", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "chatResponse", className: "w-full max-w-md mt-4 p-4 bg-white border border-[#cccccc] rounded-md", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this })); }