function MainComponent() { const [loading, setLoading] = React.useState(false); const [summary, setSummary] = React.useState(''); const [followUpQuestions, setFollowUpQuestions] = React.useState([]); const [urlError, setUrlError] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const formData = new FormData(event.target); const websiteUrl = formData.get('websiteUrl'); const request = formData.get('request'); if (!websiteUrl.trim()) { setUrlError('Please enter a valid URL'); setLoading(false); return; } else { setUrlError(''); } const response = await fetch('/api/scrape', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ websiteUrl, request }) }); const data = await response.json(); setLoading(false); setSummary(data.summary); }; const handleFollowUpSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const formData = new FormData(event.target); const followUpQuestion = formData.get('followUpQuestion'); const response = await fetch('/api/follow-up', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ question: followUpQuestion, previousSummary: summary }) }); const data = await response.json(); setLoading(false); setFollowUpQuestions([ ...followUpQuestions, { question: followUpQuestion, answer: data.answer } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#f0f8ff]", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px] mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-crimson-text text-center mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "GroqWeb Scraper"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "websiteUrl", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Website URL:"), /*#__PURE__*/ React.createElement("input", { id: "websiteUrl", name: "websiteUrl", type: "text", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), urlError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-xs italic", __source: { fileName: "", lineNumber: 67, columnNumber: 26 }, __self: this }, urlError)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "request", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Request:"), /*#__PURE__*/ React.createElement("textarea", { id: "request", name: "request", maxLength: "30", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline h-[100px]", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-full", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this })) : 'Submit'))), summary && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-crimson-text mb-4", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Summary"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, summary), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFollowUpSubmit, __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2", htmlFor: "followUpQuestion", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Follow-up Question:"), /*#__PURE__*/ React.createElement("input", { id: "followUpQuestion", name: "followUpQuestion", type: "text", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full w-full", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this })) : 'Ask'))), followUpQuestions.map((followUp, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded-lg shadow-lg w-[400px] mt-4", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "Q: ", followUp.question), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, "A: ", followUp.answer)))); }