function MainComponent() { const [fileContent, setFileContent] = React.useState([]); const [loading, setLoading] = React.useState(false); const [mapData, setMapData] = React.useState([]); const processFile = async (event)=>{ event.preventDefault(); const file = event.target.file.files[0]; if (!file) return; setLoading(true); const formData = new FormData(); formData.append("file", file); try { const response = await fetch('/api/process-file', { method: 'POST', body: formData }); const result = await response.json(); if (result.status) { const processedData = result.data.reduce((acc, row)=>{ const label = row[0] || 'N/A'; const latitude = !isNaN(row[8]) ? row[8] : 'N/A'; const longitude = !isNaN(row[9]) ? row[9] : 'N/A'; if (label !== 'N/A' && latitude !== 'N/A' && longitude !== 'N/A') { acc.push({ label, latitude, longitude }); } return acc; }, []); setFileContent(processedData); } } catch (error) { console.error("Error processing file:", error); } finally{ setLoading(false); } }; const plotOnMap = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: fileContent.map(({ label, latitude, longitude })=>({ role: 'user', content: `Plot ${label} at latitude: ${latitude}, longitude: ${longitude}` })), system_prompt: 'Generate map with these coordinates' }) }); const result = await response.json(); if (result.status) { setMapData(result.result); // Assuming result contains data necessary for plotting on the map } } catch (error) { console.error("Error plotting on map:", error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-gray-900 mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Upload de Arquivo"), /*#__PURE__*/ React.createElement("form", { onSubmit: processFile, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "file", className: "block w-full text-sm text-gray-900 border rounded-lg cursor-pointer", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Ler Arquivo"))), loading && /*#__PURE__*/ React.createElement("p", { className: "text-blue-600", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, "Carregando..."), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-gray-900 mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Dados do Arquivo"), /*#__PURE__*/ React.createElement("table", { className: "table-auto border-collapse border border-gray-400 w-full max-w-md", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 bg-gray-200 px-4 py-2 text-left", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Label"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 bg-gray-200 px-4 py-2 text-left", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Latitude"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 bg-gray-200 px-4 py-2 text-left", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Longitude"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, fileContent.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, row.label), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, row.latitude), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 px-4 py-2", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, row.longitude)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: plotOnMap, className: "px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "Plotar no Mapa"))); }