function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(null); const [isTimerRunning, setIsTimerRunning] = React.useState(false); const [secondsRemaining, setSecondsRemaining] = React.useState(0); const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleSendMessage = async ()=>{ setIsLoading(true); setError(null); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, { role: 'user', content: inputValue } ], system_prompt: 'Please provide a comprehensive explanation on the following topic:', max_tokens: 2000 }) }); const data = await response.json(); if (response.status === 200 && data.status) { setMessages(messages.concat({ role: 'assistant', content: data.result })); setInputValue(''); } else { throw new Error('Failed to fetch the response'); } } catch (e) { setError('An error occurred while sending the message.'); } setIsLoading(false); }; const startTimer = (duration)=>{ setSecondsRemaining(duration * 60); setIsTimerRunning(true); }; React.useEffect(()=>{ let interval; if (isTimerRunning && secondsRemaining > 0) { interval = setInterval(()=>{ setSecondsRemaining(secondsRemaining - 1); }, 1000); } else if (secondsRemaining === 0) { setIsTimerRunning(false); } return ()=>clearInterval(interval); }, [ isTimerRunning, secondsRemaining ]); const formatTime = (totalSeconds)=>{ const minutes = Math.floor(totalSeconds / 60); const seconds = totalSeconds % 60; return `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`; }; const handleStartTimer = ()=>{ const duration = parseInt(inputValue, 10); if (!isNaN(duration) && duration > 0) { startTimer(duration); setInputValue(''); handleSendMessage(); } else { setError('Please enter a valid number of minutes.'); } }; const handleStopTimer = ()=>{ setIsTimerRunning(false); setSecondsRemaining(0); }; const messageElements = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 my-2 rounded-lg ${message.role === 'user' ? 'bg-[#dae0e6]' : 'bg-[#f7f7f7]'}`, __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, message.content)); const isButtonDisabled = isLoading || isTimerRunning || inputValue.trim() === ''; const timerClass = secondsRemaining > 0 ? 'bg-[#ffeb3b] countdown-animation' : 'bg-[#f7f7f7]'; const timerDisplay = formatTime(secondsRemaining); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, messageElements, isTimerRunning && /*#__PURE__*/ React.createElement("div", { className: `${timerClass} text-center text-[#121212] py-2`, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, timerDisplay)), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 text-red-700 p-2 font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex p-4 bg-white", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "messageInput", value: inputValue, onChange: handleInputChange, placeholder: isTimerRunning ? "Timer is running..." : "Set study timer (in minutes) or ask a question...", className: "flex-1 p-2 border border-gray-300 rounded outline-none font-roboto", disabled: isTimerRunning, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleStartTimer, className: `p-2 ml-2 bg-blue-500 text-white rounded font-semibold disabled:bg-gray-300`, disabled: isButtonDisabled, __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, isTimerRunning ? 'Studying' : 'Start Study Timer'), isTimerRunning && /*#__PURE__*/ React.createElement("button", { onClick: handleStopTimer, className: "p-2 ml-2 bg-red-500 text-white rounded font-semibold", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Stop Studying")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, ` .countdown-animation { animation: countdown 1s linear infinite; } @keyframes countdown { 0% { background-color: #ffeb3b; } 50% { background-color: #fffc58; } 100% { background-color: #ffeb3b; } } `)); }