function MainComponent() { const [messages, setMessages] = React.useState([ { role: 'assistant', content: 'こんにちは！画像のプロンプトを教えてください。' } ]); const [userInput, setUserInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const sendMessage = (content, role = 'user')=>{ if (content.trim() === '') return; setMessages((prevMessages)=>[ ...prevMessages, { role, content } ]); if (role === 'user') { setUserInput(''); setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content } ], system_prompt: 'Generate image based on this prompt' }) }).then((response)=>response.json()).then((data)=>{ const assistantMessage = data.choices[0].message.content; setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: assistantMessage } ]); return fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(assistantMessage)}`, { method: 'GET' }); }).then((response)=>response.json()).then((data)=>{ const imageUrl = data.data[0]; setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: '', image: imageUrl } ]); }).catch((error)=>{ console.error('Error:', error); setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: 'エラーが発生しました。もう一度試してください。' } ]); }).finally(()=>setIsLoading(false)); } }; const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleFormSubmit = (event)=>{ event.preventDefault(); sendMessage(userInput); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row items-center p-4 bg-green-500", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-white text-xl", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-4 font-semibold text-white", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "完全無料の画像生成チャット")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, messages.map((message, index)=>{ if (message.image) { return /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 p-3 rounded-lg max-w-xs self-start", key: index, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "max-w-xs", src: message.image, alt: "Generated content", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this })); } return /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-lg max-w-xs ${message.role === 'assistant' ? 'bg-blue-500 self-start' : 'bg-gray-200 self-end'}`, key: index, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `font-roboto ${message.role === 'assistant' ? 'text-white' : ''}`, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, message.content)); }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 p-3 rounded-lg max-w-xs self-start", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "読み込み中..."))), /*#__PURE__*/ React.createElement("form", { className: "flex flex-row items-center p-4 bg-gray-100", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border rounded-lg", placeholder: "メッセージを入力...", value: userInput, onChange: handleInputChange, name: "message", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg", type: "submit", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "送信"))); }