function MainComponent() { const [chatMessages, setChatMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [imageURL, setImageURL] = React.useState(''); const fetchChatGPTResponse = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: chatMessages.map((msg)=>({ role: msg.role, content: msg.content })), system_prompt: inputMessage, max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setChatMessages([ ...chatMessages, { role: 'assistant', content: data.result } ]); fetchImage(inputMessage); } } catch (error) { console.error('Error fetching response:', error); } setIsLoading(false); }; const fetchImage = async (prompt)=>{ try { const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent('a portrait of ' + prompt)}&batch_size=1`, { method: 'GET' }); const imageData = await imageResponse.json(); setImageURL(imageData.data[0]); } catch (error) { console.error('Error fetching image:', error); } }; const handleSubmit = (e)=>{ e.preventDefault(); if (inputMessage.trim()) { setChatMessages([ ...chatMessages, { role: 'user', content: inputMessage } ]); fetchChatGPTResponse(); setInputMessage(''); } }; const handleInputChange = (e)=>{ setInputMessage(e.target.value); }; const messageDisplay = chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === 'assistant' ? 'justify-start' : 'justify-end'} my-2`, __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `px-4 py-2 rounded-lg ${msg.role === 'assistant' ? 'bg-[#c0dffd]' : 'bg-[#D2F6C5]'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, msg.content))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FFEDCC] font-roboto p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-xl mx-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 text-[#1E3A8A]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Facts About Greek Mythology"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffeedd] shadow rounded-lg p-4 mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, messageDisplay), imageURL && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: `Illustration of ${inputMessage}`, className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex mt-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 rounded-l-lg p-2 border-2 border-r-0 border-[#0F172A]", placeholder: "Ask a question...", value: inputMessage, onChange: handleInputChange, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#1E40AF] text-white rounded-r-lg px-6 py-2", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Send")), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 23 }, __self: this }, "Loading..."))); }