function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(null); const sendMessage = async ()=>{ if (!input.trim()) return; const newMessage = { role: "user", content: input }; setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ], system_prompt: 'Assist with the query from Tongusboriou Primary School' }) }); const data = await response.json(); if (data.status) { setMessages([ ...messages, newMessage, { role: "assistant", content: data.result } ]); } else { setError('Failed to fetch response.'); } } catch (err) { setError('An error occurred while sending the message.'); } setInput(''); setIsLoading(false); }; const handleInputChange = (event)=>{ setInput(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F7F7F7] flex flex-col items-center pt-10 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "Tongusboriou Primary School"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-xl h-[500px] overflow-auto", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${msg.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${msg.role === 'user' ? 'bg-[#D9F8C4]' : 'bg-[#F0F0F0]'} inline-block py-2 px-4 rounded-lg`, __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, msg.content)))), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-600 mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex w-full max-w-xl mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "messageInput", value: input, onChange: handleInputChange, className: "flex-1 border-2 border-[#D1D5DB] p-2 rounded-l-lg focus:outline-none focus:border-[#6B7280]", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: `px-6 py-2 border-2 border-[#D1D5DB] rounded-r-lg bg-[#10B981] text-white font-semibold ${isLoading ? 'cursor-wait' : ''}`, disabled: isLoading, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, isLoading ? 'Sending...' : 'Send')), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: fadeIn 1s ease-in-out; } `)); }