function MainComponent() { const [chatInput, setChatInput] = React.useState(''); const [messages, setMessages] = React.useState([]); const [imageUrl, setImageUrl] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (chatInput.trim() === '') return; const newMessage = { role: "user", content: chatInput }; setMessages([ ...messages, newMessage ]); setChatInput(''); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ newMessage ], system_prompt: chatInput }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); const replyMessage = { role: "assistant", content: data.choices[0].message.content }; setMessages([ ...messages, newMessage, replyMessage ]); const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(data.choices[0].message.content)}`, { method: 'GET' }); const imageData = await imageResponse.json(); if (imageData.data && imageData.data.length > 0) { setImageUrl(imageData.data[0]); setMessages((prevMessages)=>[ ...prevMessages, { role: "assistant", content: "画像を生成中..." } ]); } } catch (error) { console.error("Fetch error: ", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-pink-500 to-yellow-500 flex justify-center items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl p-8 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-900 mb-4 text-center", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "画像生成AIチャット"), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[500px] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mx-2 my-4 p-4 ${message.role === 'user' ? 'bg-gray-50 rounded-tl-3xl rounded-tr-lg rounded-br-3xl rounded-bl-lg' : 'bg-blue-100 rounded-tl-lg rounded-tr-3xl rounded-br-lg rounded-bl-3xl self-end'} shadow`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `${message.role === 'user' ? 'text-gray-800' : 'text-blue-900'}`, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "mx-2 my-4 p-4 bg-blue-100 rounded-lg shadow self-end", __source: { fileName: "", lineNumber: 57, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-blue-900", __source: { fileName: "", lineNumber: 57, columnNumber: 93 }, __self: this }, "読み込み中...")), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "mx-2 my-4 p-2 flex justify-center", __source: { fileName: "", lineNumber: 58, columnNumber: 24 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "AI生成画像", className: "rounded-lg shadow-lg max-h-[400px]", __source: { fileName: "", lineNumber: 58, columnNumber: 75 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: (e)=>setChatInput(e.target.value), className: "w-full px-4 py-2 border border-gray-300 rounded-lg text-gray-800 focus:outline-none", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "送信"))))); }