diff --git a/src/planai/templates/index.html b/src/planai/templates/index.html index 84786ad..50e6d92 100644 --- a/src/planai/templates/index.html +++ b/src/planai/templates/index.html @@ -380,35 +380,59 @@
Instruction: ${request.instruction}
-Drag a file here to upload or
- - `; + const taskId = request.task_id.toString(); + if (!existingTilesMap[taskId]) { + // Create new tile + const requestTile = document.createElement('div'); + requestTile.className = 'user-request-tile'; + requestTile.setAttribute('data-task-id', taskId); + requestTile.setAttribute('data-accepted-mime-types', request.accepted_mime_types.join(',')); + + requestTile.innerHTML = ` +Instruction: ${request.instruction}
+Drag a file here to upload or
+ + `; + + requestTile.addEventListener('dragover', function (event) { + event.preventDefault(); + requestTile.classList.add('drag-over'); + }); - requestTile.addEventListener('dragover', function (event) { - event.preventDefault(); - requestTile.classList.add('drag-over'); - }); + requestTile.addEventListener('dragleave', function () { + requestTile.classList.remove('drag-over'); + }); - requestTile.addEventListener('dragleave', function () { - requestTile.classList.remove('drag-over'); - }); + requestTile.addEventListener('drop', handleFileDrop); - requestTile.addEventListener('drop', handleFileDrop); + const abortButton = requestTile.querySelector('.abort-button'); + abortButton.addEventListener('click', () => abortRequest(request.task_id)); - const abortButton = requestTile.querySelector('.abort-button'); - abortButton.addEventListener('click', () => abortRequest(request.task_id)); + requestsContainer.appendChild(requestTile); + } + // Existing requests are immutable; no updates needed + }); - requestsContainer.appendChild(requestTile); + // Remove tiles that are no longer in userRequests + Array.from(existingTiles).forEach(tile => { + const taskId = tile.getAttribute('data-task-id'); + if (!userRequestIds.has(taskId)) { + requestsContainer.removeChild(tile); + } }); }