function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleSendMessage = async ()=>{ if (!input.trim()) return; const newMessages = [ ...messages, { role: 'user', content: input } ]; setMessages(newMessages); setInput(''); setLoading(true); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages, system_prompt: 'Provide a prompt for an image.' }) }); const chatData = await chatResponse.json(); const assistantMessage = chatData.choices[0].message.content; const updatedMessages = [ ...newMessages, { role: 'assistant', content: assistantMessage } ]; setMessages(updatedMessages); const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(assistantMessage)}`, { method: 'GET' }); const imageData = await imageResponse.json(); const imageUrl = imageData.data[0]; setMessages([ ...updatedMessages, { role: 'assistant', content: /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated AI content", className: "w-[300px] h-[300px] rounded-md", __source: { fileName: "", lineNumber: 39, columnNumber: 70 }, __self: this }) } ]); } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center h-screen bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] flex flex-col flex-grow bg-white shadow-lg my-4 rounded-md overflow-hidden", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#00c300] text-white text-center py-2 font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "AI 画像生成チャット"), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, messages.map((message, index)=>{ const isUser = message.role === 'user'; const alignmentClass = isUser ? 'justify-end' : 'justify-start'; const bgColorClass = isUser ? 'bg-[#daf7a6]' : 'bg-[#f2f2f2]'; const textColorClass = isUser ? 'text-black' : 'text-gray-800'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${alignmentClass} my-1`, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-lg p-2 ${bgColorClass} ${textColorClass} max-w-[80%]`, __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, message.content)); }), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500", __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-300 p-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chat_input", className: "w-full p-2 border border-gray-300 rounded-md", placeholder: "メッセージを入力...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "ml-2 py-2 px-4 bg-[#00c300] text-white rounded-md", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "送信")))); }