function MainComponent() { const [messages, setMessages] = React.useState([]); const [message, setMessage] = React.useState(""); const [gptResponse, setGptResponse] = React.useState(""); const [menuOpen, setMenuOpen] = React.useState(false); const sendMessage = ()=>{ if (message.trim()) { setMessages([ ...messages, { sender: "user", text: message } ]); setMessage(""); getGptResponse(); } }; const getGptResponse = ()=>{ const response = "GPTの返信"; setGptResponse(response); setMessages((prevMessages)=>[ ...prevMessages, { sender: "gpt", text: response } ]); }; const handlePresetMessage = (preset)=>{ setMessages([ ...messages, { sender: "user", text: preset } ]); getGptResponse(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen font-sans bg-white", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 bg-[#f4f4f5] shadow-md", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#d1d5db] text-2xl rounded p-2", onClick: ()=>setMenuOpen(!menuOpen), __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center ml-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg font-sans mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "スンジュンAI"), /*#__PURE__*/ React.createElement("img", { src: "./logo.png", alt: "AIのロゴ", className: "w-8 h-8", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-black bg-opacity-50 z-50 transition-transform transform ${menuOpen ? "translate-x-0" : "-translate-x-full"}`, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] bg-white h-full shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center justify-center flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./avatar.png", alt: "AIのアバター", className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#fafafa]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#d1d5db] text-black text-left rounded px-4 py-2 flex-1", onClick: ()=>handlePresetMessage("メンタルヘルスデーを計画"), __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "メンタルヘルスデーを計画 ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 49, columnNumber: 28 }, __self: this }), " リラックスできるようお手伝いします"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#d1d5db] text-black text-left rounded px-4 py-2 flex-1", onClick: ()=>handlePresetMessage("楽しいアクティビティ"), __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "楽しいアクティビティ ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 52, columnNumber: 24 }, __self: this }), " 引っ越し先で")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-2 border rounded-l-md", placeholder: "メッセージ", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#d1d5db] text-black p-2 rounded-r-md", onClick: sendMessage, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` .translate-x-0 { transform: translateX(0); } .-translate-x-full { transform: translateX(-100%); } .transition-transform { transition: transform 0.3s ease; } `)); }