function MainComponent() { const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [inputMessage, setInputMessage] = React.useState(""); const [menuOpen, setMenuOpen] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const newMessage = { role: "user", content: inputMessage }; const updatedMessages = [ ...messages, newMessage ]; setMessages(updatedMessages); setInputMessage(""); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages }) }); const data = await response.json(); const assistantMessage = data.choices[0].message; setMessages((prevMessages)=>[ ...prevMessages, assistantMessage ]); } catch (error) { console.error("Error:", error); } finally{ setLoading(false); } }; const openCamera = ()=>{ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-[#f6f6f6] min-h-screen", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-5 bg-[#ff6b6b] text-white", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "イベントの告知サイト"), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", onClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }))), menuOpen && /*#__PURE__*/ React.createElement("nav", { className: "p-5 bg-[#333] text-white", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "イベントについて"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "日時"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "場所"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "チケット"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "グッズ"))), /*#__PURE__*/ React.createElement("main", { className: "p-5", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-3 bg-blue-500 text-white rounded mb-5", onClick: openCamera, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "カメラを起動"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 mb-5", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, [ ...Array.from({ length: 8 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-[100px] h-[100px] border border-gray-300 flex items-center justify-center text-xl bg-white shadow-md transition duration-500 transform hover:scale-105", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, i + 1, "番スタンプ"))), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "p-3 border border-gray-300 rounded w-full h-[200px]", placeholder: "メッセージを入力してください...", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-3 bg-[#ff6b6b] text-white rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("div", { className: "mt-5 space-y-4", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, messages.map((msg, idx)=>{ const messageClass = msg.role === "user" ? "bg-blue-100 text-left" : "bg-gray-100 text-right"; return /*#__PURE__*/ React.createElement("div", { key: idx, className: `p-3 border border-gray-300 rounded ${messageClass}`, __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, msg.content); }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, ` header, button, textarea, div { animation: fadeIn 1s ease-in-out; } .fade-in { animation: fadeInUp 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } `)); }