function MainComponent() { const [text, setText] = React.useState(''); const [wordCount, setWordCount] = React.useState(0); const [analysis, setAnalysis] = React.useState(''); const [error, setError] = React.useState(''); const [submissionCount, setSubmissionCount] = React.useState(0); const [remainingSubmissions, setRemainingSubmissions] = React.useState(3); const [isLoading, setIsLoading] = React.useState(false); const handleTextChange = (e)=>{ const inputText = e.target.value; setText(inputText); setWordCount(inputText.trim().split(/\s+/).filter(Boolean).length); }; const handleSubmit = async ()=>{ setError(''); setAnalysis(''); if (submissionCount >= 3) { setError('You have reached the maximum number of submissions.'); return; } if (wordCount > 250) { setError('Your text exceeds 250 words. Please shorten it.'); return; } if (wordCount === 0) { setError('Please enter some text before submitting.'); return; } setSubmissionCount((prevCount)=>prevCount + 1); setRemainingSubmissions((prevRemaining)=>prevRemaining - 1); setIsLoading(true); const prompt = `Please score the text based on the TOEFL Integrated Writing section rubric using a 5-point scale. Include words of encouragement. Format: Rating: (score). (Overall) (List five areas for improvement with specific explanations. Do not use bold text.)`; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: prompt }, { role: "user", content: text } ] }) }); if (!response.ok) { throw new Error('Failed to get analysis'); } const data = await response.json(); setAnalysis(data.choices[0].message.content.replace(/\*\*/g, '')); } catch (error) { setError('An error occurred while analyzing your text. Please try again.'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Integrated Writing Section Evaluation Tool"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-2 border border-gray-300 rounded mb-4", value: text, onChange: handleTextChange, placeholder: "Enter your text here...", name: "toefl-text", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "Word Count: ", wordCount), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded mb-4 disabled:opacity-50", onClick: handleSubmit, disabled: isLoading || submissionCount >= 3, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, isLoading ? 'Analyzing...' : 'Submit')), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, error), remainingSubmissions < 3 && /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Remaining submissions: ", remainingSubmissions), analysis && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Analysis:"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, analysis.split('\n').map((line, index)=>line.startsWith('Rating:') ? /*#__PURE__*/ React.createElement("span", { key: index, className: "text-2xl font-bold block mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, line) : /*#__PURE__*/ React.createElement("span", { key: index, __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, line, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 98, columnNumber: 41 }, __self: this })))))); }