Upload 3 files

index.html

@@ -22,7 +22,7 @@
                         <img src="icons/x.svg" alt="X" class="h-6 w-6" />
                     </a>
                 </div>
-                <div id="delete-button-container" class="flex justify-end hidden">
+                <div id="delete-button-container" class="flex justify-end">
                     <button id="delete-data-button" class="bg-red-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500">Delete Cached Data</button>
                 </div>
             </div>

main.js

@@ -10,10 +10,12 @@ const deleteButtonContainer = document.getElementById('delete-button-container')
 
 const worker = new Worker('worker.js', { type: 'module' });
 
+deleteButtonContainer.classList.add('hidden');
 // Initial state
 // searchInput.disabled = true; // Removed to enable during initialization
 // searchButton.disabled = true; // Removed to enable during initialization
-deleteButtonContainer.classList.add('hidden');
+// Ensure delete button is always visible (UI-level control). Worker will decide if data exists.
+deleteButtonContainer.classList.remove('hidden');
 
 // Helper to format bytes to MB
 function formatBytesToMB(bytes) {
@@ -36,7 +38,7 @@ worker.onmessage = (event) => {
         progressContainer.classList.add('hidden');
         searchInput.disabled = false;
         searchButton.disabled = false;
-        deleteButtonContainer.classList.remove('hidden'); // Ensure button is shown when index is ready
+        // Delete button remains visible at all times per UI requirement
     } else if (type === 'results') {
         // statusDiv.textContent = 'Search complete.'; // Removed as results themselves convey completion
         progressContainer.classList.add('hidden'); // Hide progress bar
@@ -44,9 +46,8 @@ worker.onmessage = (event) => {
         statusDiv.textContent = ''; // Clear status after search is complete
         deleteButtonContainer.classList.remove('hidden'); // Ensure delete button is visible
     } else if (type === 'indexSize') {
-        if (payload.indexCached || payload.modelCached) {
-            deleteButtonContainer.classList.remove('hidden'); // Ensure button is shown if index or model is cached
-        }
+        // Keep delete button visible always. Worker tells us whether data is cached.
+        // Visual enable/disable could be added later if desired.
 
         if (payload.indexCached) {
             dataInfoDiv.textContent = ''; // Clear data info if cached
@@ -59,7 +60,7 @@ worker.onmessage = (event) => {
             }
         } else {
             dataInfoDiv.textContent = ''; // Clear data info if not cached
-            deleteButtonContainer.classList.add('hidden'); // Hide delete button if not cached
+            // Keep delete button visible even if no cached data
             searchInput.disabled = false; // Ensure input is enabled
             searchButton.disabled = false; // Ensure button is enabled
             // Render message with an inline info icon that has an accessible tooltip
@@ -75,14 +76,20 @@ worker.onmessage = (event) => {
                 </span>`;
         }
     } else if (type === 'dataDeleted') {
+        // Show confirmation message briefly and then reload the page so the UI and worker state fully reset
         statusDiv.textContent = payload;
         dataInfoDiv.textContent = ''; // Clear data info
-        deleteButtonContainer.classList.add('hidden');
-        // searchInput.disabled = true; // Removed: state will be set by getIndexSize
-        // searchButton.disabled = true; // Removed: state will be set by getIndexSize
         progressContainer.classList.add('hidden'); // Hide progress bar
-        // Re-request size info after deletion
-        worker.postMessage({ type: 'getIndexSize' });
+        // Give the user a moment to see the confirmation, then reload to clear caches and restart the worker
+        setTimeout(() => {
+            // A hard reload ensures service worker/worker gets a clean start in some environments
+            try {
+                location.reload();
+            } catch (e) {
+                // If reload fails for any reason, fall back to re-requesting index size
+                worker.postMessage({ type: 'getIndexSize' });
+            }
+        }, 700);
     } else if (type === 'error') {
         statusDiv.textContent = `Error: ${payload}`;
         progressContainer.classList.add('hidden');
@@ -116,10 +123,13 @@ searchInput.addEventListener('keydown', (e) => {
     }
 });
 
+// Make confirm non-blocking so the click handler returns quickly (avoids long task warnings)
 deleteDataButton.addEventListener('click', () => {
-    if (confirm('Are you sure you want to delete the cached data?')) {
-        worker.postMessage({ type: 'deleteData' });
-    }
+    setTimeout(() => {
+        if (confirm('Are you sure you want to delete the cached data?')) {
+            worker.postMessage({ type: 'deleteData' });
+        }
+    }, 0);
 });
 
 function renderResults(results) {

worker.js

@@ -228,21 +228,84 @@ self.onmessage = async (event) => {
         self.postMessage({ type: 'results', payload: results });
     } else if (type === 'deleteData') {
         self.postMessage({ type: 'loading', payload: 'Deleting cached data...' });
-        try {
-            await deleteFromDB('quoteIndexData');
+        // Run cleanup with a timeout so UI doesn't get stuck if some API call blocks or takes too long
+        const cleanup = async () => {
+            // 1) Delete the specific object from the DB if present
+            try {
+                await deleteFromDB('quoteIndexData');
+            } catch (e) {
+                // ignore individual delete error and proceed to full DB deletion
+            }
 
-            // Attempt to clear transformers.js model cache
-            const cacheNames = await caches.keys();
-            for (const cacheName of cacheNames) {
-                if (cacheName.startsWith('transformers-cache') || cacheName.includes(MODEL_NAME.replace(/\//g, '-'))) {
-                    await caches.delete(cacheName);
+            // 2) Delete the entire IndexedDB database to ensure all stored artifacts are removed
+            await new Promise((resolve, reject) => {
+                const deleteRequest = indexedDB.deleteDatabase(DB_NAME);
+                deleteRequest.onsuccess = () => resolve();
+                deleteRequest.onerror = () => reject(deleteRequest.error || new Error('Failed to delete IndexedDB'));
+                deleteRequest.onblocked = () => {
+                    // If deletion is blocked, still try to continue with cache cleanup
+                    resolve();
+                };
+            });
+
+            // 3) Clear Cache Storage entries that may contain model or transformers resources
+            try {
+                if (typeof caches !== 'undefined' && caches.keys) {
+                    const cacheNames = await caches.keys();
+                    for (const cacheName of cacheNames) {
+                        // Delete transformers related caches and any caches that contain the model name
+                        if (cacheName.startsWith('transformers-cache') || cacheName.includes(MODEL_NAME.replace(/\//g, '-')) || cacheName.includes('nomic')) {
+                            await caches.delete(cacheName);
+                        }
+                    }
                 }
+            } catch (e) {
+                // Non-fatal
+                console.warn('Cache cleanup error', e);
             }
-            indexData = null; // Clear in-memory data
-            isReady = false; // Mark as not ready until reloaded
+
+            // 4) Clear localStorage keys commonly used by transformers.js or model caches (best-effort)
+            try {
+                if (typeof localStorage !== 'undefined') {
+                    const keysToClear = [];
+                    for (let i = 0; i < localStorage.length; i++) {
+                        const key = localStorage.key(i);
+                        if (!key) continue;
+                        if (key.startsWith('transformers') || key.includes('transformers') || key.includes('nomic') || key.includes('hf_')) {
+                            keysToClear.push(key);
+                        }
+                    }
+                    for (const k of keysToClear) localStorage.removeItem(k);
+                }
+            } catch (e) {
+                // localStorage may not be available in worker-like contexts; ignore
+            }
+
+            // 5) Clear in-memory references
+            indexData = null;
+            model = null;
+            isReady = false;
+        };
+
+        // Timeout in ms
+        const TIMEOUT_MS = 8000;
+
+        try {
+            await Promise.race([
+                cleanup(),
+                new Promise((_, reject) => setTimeout(() => reject(new Error('cleanup-timeout')), TIMEOUT_MS))
+            ]);
+            // If cleanup completed within timeout
             self.postMessage({ type: 'dataDeleted', payload: 'Cached data deleted successfully.' });
         } catch (error) {
-            self.postMessage({ type: 'error', payload: 'Failed to delete cached data.' });
+            if (error && error.message === 'cleanup-timeout') {
+                console.warn('deleteData: cleanup timed out');
+                // Post a success-like message so UI doesn't stay stuck; note that some cleanup may still be pending
+                self.postMessage({ type: 'dataDeleted', payload: 'Cached data deletion attempted (timed out). Some cleanup may remain.' });
+            } else {
+                console.error('deleteData error:', error);
+                self.postMessage({ type: 'error', payload: 'Failed to delete cached data: ' + (error && error.message ? error.message : String(error)) });
+            }
         }
     } else if (type === 'getIndexSize') {
         try {