function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [chatResponse, setChatResponse] = React.useState(''); const handleSendMessage = async (e)=>{ e.preventDefault(); 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: inputMessage } ], system_prompt: 'Connect with fellow Christians' }) }); const data = await response.json(); if (data.status) { setChatResponse(data.result); setMessages([ ...messages, { role: 'user', content: inputMessage }, { role: 'assistant', content: data.result } ]); setInputMessage(''); } } catch (error) { console.error('Fetching ChatGPT response failed', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-screen bg-[#ff0000] bg-opacity-40", style: { backgroundImage: "url('/jesus-christ-background.jpg')", backgroundSize: 'cover', backgroundPosition: 'center' }, __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#ffffff] font-bold text-4xl sm:text-5xl md:text-6xl font-roboto mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Christian Connection Network"), /*#__PURE__*/ React.createElement("p", { className: "text-[#0000ff] font-light text-lg sm:text-xl md:text-2xl font-roboto mb-6 animated-text", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Connect with Christians worldwide"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 bg-white bg-opacity-90 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[400px] w-full mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `w-full p-2 rounded-md ${message.role === 'user' ? 'bg-[#ececec]' : 'bg-[#d1e7ff]'}`, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, message.content)))), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Type your message here", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), className: "w-full p-2 mb-2 border rounded-md font-roboto resize-none h-24", disabled: isLoading, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-[#0000ff] text-[#ffffff] rounded-md font-roboto", disabled: isLoading, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, isLoading ? 'Sending...' : 'Send Message'))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .animated-text { animation: fadeIn 2s ease forwards; } `)); }