Improve ingest playground UX to prevent stale tags and clarify remote path ignore

This commit is contained in:
Paco POR-CORREO 2026-04-06 23:09:42 +02:00
parent e3770b69ed
commit c730160a93
3 changed files with 29 additions and 4 deletions

View file

@ -49,3 +49,4 @@ Dar continuidad al RAG en `RAG/` a partir del estado actual documentado.
- Documento de seguimiento `RAG/docs/TASK_LIMPIEZA.md` y documentacion API `RAG/docs/API_RAG.md` actualizados.
- Implementacion de ingesta directa de carpetas locales desde el playground: el navegador empaqueta la carpeta en un `.zip` en memoria (filtrando `node_modules`, `dist`, `.git`, etc. con logica nativa) y el backend usa `adm-zip` para extraerla de forma segura en un directorio temporal antes de la ingesta.
- Correccion de error `ReferenceError: ignore is not defined` eliminando dependencia externa en el frontend.
- Ajustes de UX en el playground (pestaña Ingesta) para evitar arrastre de Tags al seleccionar cargas locales y dar claridad visual de que la ruta remota se ignorara a favor de la local, añadiendo boton para cancelar seleccion.

View file

@ -34,6 +34,7 @@ const ingestUploadFile = document.getElementById("ingestUploadFile");
const ingestUploadFolder = document.getElementById("ingestUploadFolder");
const btnUploadFile = document.getElementById("btnUploadFile");
const btnUploadFolder = document.getElementById("btnUploadFolder");
const btnClearUpload = document.getElementById("btnClearUpload");
const uploadStatusText = document.getElementById("uploadStatusText");
const ingestMode = document.getElementById("ingestMode");
const ingestTags = document.getElementById("ingestTags");
@ -82,6 +83,8 @@ function buildScopeLabel(scope) {
return `${scope.sourceRef} [${modes}]`;
}
let previousSourceRef = ""; // Para guardar el valor original de SourceRef
function updateIngestUiState() {
const hasFile = Boolean(ingestUploadFile.files && ingestUploadFile.files.length > 0);
const hasFolder = Boolean(ingestUploadFolder.files && ingestUploadFolder.files.length > 0);
@ -91,22 +94,33 @@ function updateIngestUiState() {
ingestSourceType.disabled = hasUpload;
ingestSourceRef.disabled = hasUpload;
ingestSourceIdWrapper.style.display = ingestScopeMode.value === "custom" ? "block" : "none";
btnClearUpload.style.display = hasUpload ? "block" : "none";
if (hasUpload && !previousSourceRef) {
previousSourceRef = ingestSourceRef.value;
}
if (hasFile) {
uploadStatusText.textContent = `Archivo seleccionado: ${ingestUploadFile.files[0].name}`;
ingestModeHint.textContent = `Upload directo activo: se ingerira el archivo local "${ingestUploadFile.files[0].name}" y se ignorara la ruta remota.`;
const fileName = ingestUploadFile.files[0].name;
uploadStatusText.textContent = `Archivo seleccionado: ${fileName}`;
ingestSourceRef.value = `[Ignorado: se usara nombre local "${fileName}"]`;
ingestModeHint.textContent = `Upload directo activo: se ingerira el archivo local "${fileName}" y se ignorara la ruta remota.`;
ingestModeHint.classList.add("strong");
} else if (hasFolder) {
// Al seleccionar carpeta mostramos el nombre del primer archivo padre y cuantos ficheros hay
const firstPath = ingestUploadFolder.files[0].webkitRelativePath || "";
const folderName = firstPath.split('/')[0] || "Carpeta";
uploadStatusText.textContent = `Carpeta seleccionada: ${folderName} (${ingestUploadFolder.files.length} archivos totales, se filtraran ignorados)`;
ingestSourceRef.value = `[Ignorado: se usara nombre local "${folderName}"]`;
ingestModeHint.textContent = `Upload directo activo: se comprimira y subira la carpeta local "${folderName}" y se ignorara la ruta remota.`;
ingestModeHint.classList.add("strong");
} else {
uploadStatusText.textContent = "Ningun elemento seleccionado";
ingestModeHint.textContent = "Si seleccionas un archivo o carpeta local, el playground lo subira directamente y podras aislarlo con un `sourceId` propio.";
ingestModeHint.classList.remove("strong");
if (previousSourceRef) {
ingestSourceRef.value = previousSourceRef;
previousSourceRef = "";
}
}
}
@ -306,15 +320,24 @@ cleanupScopeSelect.addEventListener("change", () => {
btnUploadFile.addEventListener("click", () => {
ingestUploadFolder.value = "";
currentUploadType = 'file';
ingestTags.value = ""; // Limpiamos tags para evitar arrastrar basura
ingestUploadFile.click();
});
btnUploadFolder.addEventListener("click", () => {
ingestUploadFile.value = "";
currentUploadType = 'folder';
ingestTags.value = ""; // Limpiamos tags para evitar arrastrar basura
ingestUploadFolder.click();
});
btnClearUpload.addEventListener("click", () => {
ingestUploadFile.value = "";
ingestUploadFolder.value = "";
currentUploadType = null;
updateIngestUiState();
});
ingestUploadFile.addEventListener("change", updateIngestUiState);
ingestUploadFolder.addEventListener("change", updateIngestUiState);
ingestScopeMode.addEventListener("change", updateIngestUiState);

View file

@ -57,9 +57,10 @@
<input id="ingestSourceRef" value="/home/pancho/Documentos/Empresa/Desarrollo/IA/docs" />
</label>
<label>Subida directa (sobreescribe la ruta de la fuente)
<div style="display: flex; gap: 8px; margin-top: 4px;">
<div style="display: flex; gap: 8px; margin-top: 4px; align-items: center;">
<button id="btnUploadFile" class="secondary" style="flex: 1;">Archivo suelto</button>
<button id="btnUploadFolder" class="secondary" style="flex: 1;">Carpeta local</button>
<button id="btnClearUpload" style="background: transparent; color: var(--danger); border: 1px solid var(--danger); display: none;" title="Cancelar subida local"></button>
</div>
<input id="ingestUploadFile" type="file" accept=".pdf,.md,.txt,.ts,.tsx,.js,.jsx,.mjs,.cjs,.py,.json,.yml,.yaml" style="display: none;" />
<input id="ingestUploadFolder" type="file" webkitdirectory directory multiple style="display: none;" />