function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const [prompt, setPrompt] = React.useState(""); const [imageUrls, setImageUrls] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleMessageSubmit = async (e)=>{ e.preventDefault(); if (!inputMessage.trim()) return; const currentMessage = { role: "user", content: inputMessage }; setMessages([ ...messages, currentMessage ]); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, currentMessage ], system_prompt: inputMessage }) }); const data = await response.json(); if (data.choices && data.choices.length > 0) { const reply = { role: "assistant", content: data.choices[0].message.content }; setMessages((prevMessages)=>[ ...prevMessages, reply ]); } setInputMessage(""); setLoading(false); }; const handleImageGeneration = async (e)=>{ e.preventDefault(); if (!prompt.trim()) return; setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); if (data.data && data.data.length > 0) { setImageUrls(data.data); } setPrompt(""); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F3F4F6] p-4", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white shadow-lg rounded-lg p-6 mb-8", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Chat with GPT-4"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[500px] overflow-auto mb-6 border-b border-[#E2E8F0]", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${message.role === 'user' ? 'text-right' : ''}`, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleMessageSubmit, className: "flex items-end", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "Type your message here...", className: "border border-[#D1D5DB] rounded-md w-full p-2 mr-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-[#4F46E5] text-white rounded-md px-4 py-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, loading ? 'Sending...' : 'Send'))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Generate an Image"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleImageGeneration, className: "flex", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Describe the image you want...", className: "border border-[#D1D5DB] rounded-md w-full p-2 mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "bg-[#10B981] text-white rounded-md px-4 py-2", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, loading ? 'Generating...' : 'Generate')), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, imageUrls.map((url, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "my-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: url, alt: `Generated image ${index + 1}`, className: "w-full max-w-xs h-auto", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: url, download: `generated_image_${index + 1}.jpg`, className: "text-[#10B981] hover:text-[#064E3B] transition-colors duration-300", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Download")))))); }