function MainComponent() { const [messages, setMessages] = React.useState([ { text: 'こんにちは！今日はどうなさいましたか？', sender: 'bot' }, { text: '今日は元気です！', sender: 'user' } ]); const [input, setInput] = React.useState(''); const [image, setImage] = React.useState(null); const [isModalOpen, setIsModalOpen] = React.useState(false); const [modalImage, setModalImage] = React.useState(null); const handleSubmit = (e)=>{ e.preventDefault(); if (input.trim() !== '' || image) { setMessages([ ...messages, { text: input.trim(), sender: 'user', image } ]); setInput(''); setImage(null); } }; const handleChange = (e)=>{ setInput(e.target.value); }; const handleImageUpload = (e)=>{ const file = e.target.files[0]; if (file) { setImage(URL.createObjectURL(file)); } }; const handleRemoveImage = ()=>{ setImage(null); }; const toggleModal = (imageSrc = null)=>{ setModalImage(imageSrc); setIsModalOpen(!isModalOpen); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#f5f5dc]", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ff69b4] text-white p-4 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "ChatGPTのようなページ")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 overflow-auto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg max-w-[70%] ${message.sender === 'user' ? 'bg-[#ff69b4] text-white self-end rounded-br-none' : 'bg-white text-black self-start rounded-bl-none'}`, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, message.text), message.image && /*#__PURE__*/ React.createElement("img", { src: message.image, alt: "ユーザーのアップロード画像", className: "w-[100px] h-[100px] mt-2 cursor-pointer", onClick: ()=>toggleModal(message.image), __source: { fileName: "", lineNumber: 53, columnNumber: 33 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-200 p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex space-x-2 items-center", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, image && /*#__PURE__*/ React.createElement("div", { className: "relative mb-2", onClick: ()=>toggleModal(image), __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "プレビュー画像", className: "w-[50px] h-[50px] rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleRemoveImage, className: "absolute top-0 right-0 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: input, onChange: handleChange, className: "flex-1 p-2 border-2 border-gray-300 rounded-full", placeholder: "メッセージを入力してください...", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image-upload", onChange: handleImageUpload, className: "hidden", id: "image-upload", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", className: "bg-[#ff69b4] text-white p-3 rounded-full cursor-pointer", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#ff69b4] text-white p-3 rounded-full", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })))), isModalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: modalImage, alt: "拡大画像", className: "max-w-[90vw] max-h-[80vh]", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleModal(), className: "mt-4 bg-[#ff69b4] text-white py-2 px-4 rounded-full", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "閉じる")))); }