function MainComponent() { const [messages, setMessages] = React.useState([ { text: "こんにちは！どのようなネットワーク概要図を作成しますか？", sender: "bot" } ]); const [inputMessage, setInputMessage] = React.useState(""); const [loading, setLoading] = React.useState(false); const sendMessageToChatGPT = async (message)=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: message } ], system_prompt: 'How can we assist with the network diagram?' }) }); const { choices } = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { text: choices[0].message.content, sender: "bot" } ]); setLoading(false); }; const generateImageWithStableDiffusion = async (prompt)=>{ setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { text: data.data[0], sender: "bot", isImage: true } ]); setLoading(false); }; const handleSendMessage = (e)=>{ e.preventDefault(); if (!inputMessage.trim()) return; setMessages((prevMessages)=>[ ...prevMessages, { text: inputMessage, sender: "user" } ]); sendMessageToChatGPT(inputMessage); setInputMessage(""); }; const handleImageRequest = async ()=>{ const lastMessage = messages[messages.length - 1].text; await generateImageWithStableDiffusion(lastMessage); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center min-h-screen bg-green-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full max-w-md bg-white shadow-xl rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-green-500", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-white", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "完全無料のネットワーク概要図作成AIサイト")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow h-[400px] overflow-auto p-4 space-y-2", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-end ${message.sender === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, message.isImage ? /*#__PURE__*/ React.createElement("img", { src: message.text, alt: "Generated Network Diagram", className: "max-w-xs lg:max-w-md rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${message.sender === "user" ? "bg-green-500 text-white" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, message.text))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "p-4 bg-gray-50", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), className: "flex-grow px-4 py-2 rounded-lg border-2 border-green-500 focus:outline-none focus:border-green-700", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-700 focus:outline-none", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "送信"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleImageRequest, className: "px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 focus:outline-none", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "画像生成"))))); }