function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); if (!input.trim()) return; const newMessage = { role: 'user', content: input }; setMessages((prevMessages)=>[ ...prevMessages, newMessage ]); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: input } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); if (data.choices.length > 0 && data.choices[0].message) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.choices[0].message.content } ]); 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) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: '', imageUrl: imageData.data[0] } ]); } } } catch (error) { console.error('There was an error!', error); } setInput(''); setIsLoading(false); }; const messagesEndRef = React.useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; React.useEffect(scrollToBottom, [ messages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none bg-white shadow p-4 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-gray-800", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "画像生成チャット")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, messages.map((message, index)=>message.role === 'user' ? /*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-end space-x-2", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-100 rounded-full px-4 py-2 text-blue-800", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, message.content)) : message.imageUrl ? /*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start justify-end space-x-2 flex-row-reverse", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.imageUrl, alt: "Generated image based on the assistant's response.", className: "max-w-xs rounded-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-start justify-end space-x-2 flex-row-reverse", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 rounded-full px-4 py-2 text-green-800", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, message.content))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-none bg-white p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex space-x-2", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 rounded p-2 border border-gray-300", placeholder: "メッセージを入力", value: input, onChange: (e)=>setInput(e.target.value), disabled: isLoading, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white rounded px-4 py-2", disabled: isLoading, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, isLoading ? '送信中...' : '送信')))); }