function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [question, setQuestion] = React.useState(''); const [urlList, setUrlList] = React.useState([]); const [resultList, setResultList] = React.useState([]); const handleQuestionChange = (event)=>{ setQuestion(event.target.value); }; const handleFileChange = async (event)=>{ const text = event.target.value; const urls = text.split('\n').filter((url)=>url.trim()); setUrlList(urls); }; const handleSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); const results = urlList.map((url)=>({ url, progress: 'waiting for scraping', answer: '' })); setResultList(results); for (const [index, url] of urlList.entries()){ updateResultList(index, { progress: 'scraping started' }); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url, return_text: true }), headers: { 'Content-Type': 'application/json' } }); const textResult = await response.text(); updateResultList(index, { progress: 'scraping done' }); updateResultList(index, { progress: 'asking AI' }); const aiResponse = await fetch('/integrations/groq/', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": question }, { "role": "system", "content": textResult } ] }), headers: { 'Content-Type': 'application/json' } }); const jsonResponse = await aiResponse.json(); updateResultList(index, { progress: 'final answer', answer: jsonResponse.choices[0].message.content }); } catch (error) { updateResultList(index, { progress: 'scraping error', answer: '' }); } } setIsLoading(false); }; const updateResultList = (index, updates)=>{ setResultList((prevResults)=>prevResults.map((result, idx)=>idx === index ? { ...result, ...updates } : result)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen p-6 bg-white space-y-8", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-[#1A202C]", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Batch Website Summarization Tool"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[50%] bg-white p-8 rounded-lg shadow-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 mb-4 border border-gray-300 rounded", placeholder: "Enter your question here", onChange: handleQuestionChange, value: question, name: "question", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 mb-4 border border-gray-300 rounded", placeholder: "Enter URLs, one per line", onChange: handleFileChange, name: "urlList", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-[#3B82F6] text-white rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Summarize Websites")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl overflow-x-auto", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full table-auto border-collapse border border-gray-400", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", style: { minWidth: '250px' }, __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "URL"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", style: { minWidth: '200px' }, __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Progress"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", style: { minWidth: '300px' }, __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Answer"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, resultList.map((result, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, result.url), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2 text-center", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, result.progress, result.progress === 'scraping done' && '✅', result.progress === 'scraping error' && '❌', result.progress === 'asking AI' && '⌛'), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, result.answer)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, ` th, td { resize: horizontal; overflow: auto; } `)); }