function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "こんにちは！画像の生成をお手伝いします。" }, { role: "user", content: "ありがとうございます！どのような画像を生成したいですか？" } ]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSend = async ()=>{ if (input.trim() === "") return; const newMessage = { role: "user", content: input }; const updatedMessages = [ ...messages, newMessage ]; setMessages(updatedMessages); setInput(""); setLoading(true); 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 ]); const imageResponse = await fetch(`/integrations/stable-diffusion-v-3/?prompt=${encodeURIComponent(assistantMessage.content)}`, { method: 'GET' }); const imageData = await imageResponse.json(); setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: imageData.data[0] } ]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-[#00B900] text-white", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "画像生成AIチャット")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-grow p-4 overflow-y-auto space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : ""}`, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${message.role === "user" ? "bg-[#00B900] text-white" : "bg-white"} p-4 rounded-lg shadow-md max-w-xs`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, message.content.startsWith("data:image/") ? /*#__PURE__*/ React.createElement("img", { src: message.content, alt: "生成された画像", className: "max-w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, message.content)))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "読み込み中..."))), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 border rounded-lg focus:outline-none", placeholder: "メッセージを書く...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-[#00B900] text-white p-2 rounded-lg", onClick: handleSend, disabled: loading, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this })))); }