function MainComponent({ isLoading, chatMessages, generatedImageUrl, onSendMessage }) { const [userInput, setUserInput] = React.useState(''); const handleMessageSubmit = async (e)=>{ e.preventDefault(); onSendMessage(userInput); setUserInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#00B900] w-full min-h-screen p-4 font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-4 max-w-[500px] w-full mx-auto my-8", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[400px] mb-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, chatMessages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-3 rounded-lg m-2 ${message.role === 'user' ? 'bg-[#D9FDD3] self-end' : 'bg-[#F0F0F0]'}`, __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, message.content))), generatedImageUrl && /*#__PURE__*/ React.createElement("img", { src: generatedImageUrl, alt: "Generated based on user prompt: a friendly and engaging AI-generated image", className: "w-full h-auto mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 23, columnNumber: 23 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("form", { onSubmit: handleMessageSubmit, className: "flex items-center justify-between w-full", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-grow p-2 border rounded-l-lg", placeholder: "Type your message here...", value: userInput, onChange: (e)=>setUserInput(e.target.value), name: "userInput", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#00B900] text-white rounded-r-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Send")))); } function StoryComponent() { const [chatMessages, setChatMessages] = React.useState([ { role: 'user', content: 'Let’s create an image of a futuristic city at night.' }, { role: 'assistant', content: 'How about adding flying cars and neon lights to enhance the futuristic feel?' }, { role: 'user', content: 'Great idea! Let’s do that.' } ]); const [isLoading, setIsLoading] = React.useState(false); const [generatedImageUrl, setGeneratedImageUrl] = React.useState(''); const handleSendMessage = async (content)=>{ 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 } ], system_prompt: 'Please generate an image description.' }) }); const data = await response.json(); const imageDescription = data.choices[0].message.content; const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(imageDescription)}`, { method: 'GET' }); const imageData = await imageResponse.json(); setGeneratedImageUrl(imageData.data[0]); setChatMessages((prev)=>[ ...prev, { role: 'user', content }, { role: 'assistant', content: imageDescription } ]); } catch (error) { console.error('Error:', error); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { isLoading: isLoading, chatMessages: chatMessages, generatedImageUrl: generatedImageUrl, onSendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); }