function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, sender: "ai", text: "こんにちは！画像のプロンプトについて、何か質問はありますか？" } ]); const [input, setInput] = React.useState(""); const handleInputChange = (event)=>{ setInput(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); const newMessage = { id: messages.length + 1, sender: "user", text: input }; setMessages([ ...messages, newMessage ]); setInput(""); const aiResponse = { id: messages.length + 2, sender: "ai", text: "了解しました。少々お待ちください..." }; setTimeout(()=>{ setMessages((prevMessages)=>[ ...prevMessages, aiResponse, { id: messages.length + 3, sender: "ai", text: "こちらがStable Diffusionで生成した画像です！皆さんの思い描くものはこんな感じでしょうか？", imageUrl: "path/to/generated/image.png" } ]); }, 3000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#00B900] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white shadow-xl overflow-hidden rounded-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#008C00] p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto text-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "無料画像生成AIチャット"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white text-2xl", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "py-4 px-4 flex flex-col space-y-4 overflow-y-auto", style: { maxHeight: '500px' }, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex items-end ${message.sender === 'ai' ? 'justify-start' : 'justify-end'}`, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xl ${message.sender === 'ai' ? 'bg-[#DFFFD4]' : 'bg-[#B2E4FF]'} p-2 rounded-lg`, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, message.text), message.imageUrl && /*#__PURE__*/ React.createElement("img", { src: message.imageUrl, alt: "AIによって生成された画像", className: "mt-2 w-full max-w-xs h-auto rounded-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 38 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "bg-green-200 p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-1 p-3 bg-white rounded-lg shadow-inner border border-green-300 focus:outline-none focus:ring-2 focus:ring-green-500", placeholder: "メッセージを入力...", name: "message", value: input, onChange: handleInputChange, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#008C00] text-white rounded-lg ml-2 px-4 flex justify-center items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this })))))); }