function MainComponent() { const [sheetUrl, setSheetUrl] = React.useState(''); const [csvFile, setCsvFile] = React.useState(null); const [data, setData] = React.useState([]); const [categorizedData, setCategorizedData] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleSheetUrlChange = (e)=>{ setSheetUrl(e.target.value); }; const handleCsvFileChange = (e)=>{ setCsvFile(e.target.files[0]); }; const fetchData = async ()=>{ setLoading(true); try { let response; if (sheetUrl) { response = await fetch(`/api/fetchGoogleSheet?url=${encodeURIComponent(sheetUrl)}`); } else if (csvFile) { const formData = new FormData(); formData.append('file', csvFile); response = await fetch('/api/uploadCsv', { method: 'POST', body: formData }); } if (response.ok) { const result = await response.json(); setData(result); categorizeApps(result); } else { throw new Error('Failed to fetch data'); } } catch (error) { console.error('Error fetching data:', error); } finally{ setLoading(false); } }; const categorizeApps = async (apps)=>{ setLoading(true); const categorizedApps = []; for (const app of apps){ try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'system', content: 'You are an AI assistant that categorizes apps based on their description.' }, { role: 'user', content: `Categorize this app: ${app.name} - ${app.description}` } ] }) }); if (response.ok) { const result = await response.json(); const category = result.choices[0].message.content; categorizedApps.push({ ...app, category }); } } catch (error) { console.error('Error categorizing app:', error); categorizedApps.push({ ...app, category: 'Uncategorized' }); } } setCategorizedData(categorizedApps); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "App Data Extractor and Categorizer"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter Google Sheet URL", value: sheetUrl, onChange: handleSheetUrlChange, className: "border p-2 mr-2 w-full md:w-auto", name: "sheetUrl", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 mr-2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "OR"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".csv", onChange: handleCsvFileChange, className: "border p-2 mr-2", name: "csvFile", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: fetchData, className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", disabled: loading, __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, loading ? 'Processing...' : 'Extract and Categorize')), loading && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "Loading data and categorizing apps..."), categorizedData.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-300", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, "Category"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, categorizedData.map((app, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: index % 2 === 0 ? 'bg-gray-50' : 'bg-white', __source: { fileName: "", lineNumber: 116, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 117, columnNumber: 19 }, __self: this }, app.name), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, app.description), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, app.category))))))); }