function MainComponent() { const [messages, setMessages] = React.useState([ { text: "こんにちは！どのような画像を生成しましょうかニャン？🎨", sender: "ai" } ]); const [inputText, setInputText] = React.useState(""); const sendMessage = (e)=>{ e.preventDefault(); if (!inputText.trim()) return; setMessages([ ...messages, { text: inputText.trim() + "ニャン", sender: "user" } ]); setInputText(""); setTimeout(()=>{ setMessages((prevMessages)=>[ ...prevMessages, { text: "少々お待ちくださいニャン、画像を生成していますニャン... 🖼", sender: "ai" } ]); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#00B900] min-h-screen p-4 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-md shadow-lg max-w-[400px] m-auto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-full bg-[#00B900] p-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-chevron-left text-white", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#333]", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "完全無料の画像生成AI　サイト"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-[#666]", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "ChatGPTとStableDiffusion")))), /*#__PURE__*/ React.createElement("div", { className: "p-4 h-[500px] overflow-y-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `text-sm m-2 ${message.sender === "ai" ? "text-[#333]" : "text-right"}`, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block ${message.sender === "ai" ? "bg-[#efefef]" : "bg-[#def]"} rounded-lg p-2`, __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#333]", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, message.text))))), /*#__PURE__*/ React.createElement("form", { className: "border-t p-4", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "プロンプトを入力してくださいニャン", className: "border rounded-full w-full py-2 px-4 text-sm focus:outline-none", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "rounded-full bg-[#00B900] p-2 text-white", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })))))); }