Fix menu extraction progress: show each completed menu as persistent line

Previously each extraction step cleared the conversation and only showed
the latest result. Now completed menus accumulate as checkmarked lines
while the spinner updates in place for the current extraction.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
John Mizerek 2026-03-14 23:10:13 -07:00
parent 35f1f57f92
commit 5f2c9f4df9

View file

@ -1624,6 +1624,14 @@
document.getElementById('conversation').innerHTML = ''; document.getElementById('conversation').innerHTML = '';
// Progress container: completed results stay, spinner updates in place
const progressDiv = document.createElement('div');
progressDiv.id = 'extractionProgress';
const spinnerDiv = document.createElement('div');
spinnerDiv.id = 'extractionSpinner';
document.getElementById('conversation').appendChild(progressDiv);
document.getElementById('conversation').appendChild(spinnerDiv);
// Combined results — start with business info from discovery phase // Combined results — start with business info from discovery phase
const allItems = []; const allItems = [];
const allCategories = []; const allCategories = [];
@ -1632,12 +1640,14 @@
let totalProcessed = 0; let totalProcessed = 0;
for (const page of pages) { for (const page of pages) {
addMessage('ai', ` spinnerDiv.innerHTML = `
<div style="display:flex;align-items:center;gap:12px;"> <div class="message ai-message" style="margin-top:8px;">
<div class="loading-spinner"></div> <div style="display:flex;align-items:center;gap:12px;">
<span>Extracting <strong>${page.name}</strong> menu... (${totalProcessed + 1} of ${pages.length})</span> <div class="loading-spinner"></div>
<span>Extracting <strong>${page.name}</strong> menu... (${totalProcessed + 1} of ${pages.length})</span>
</div>
</div> </div>
`); `;
try { try {
const resp = await fetch(`${config.apiBaseUrl}/setup/analyzeMenuUrl.php`, { const resp = await fetch(`${config.apiBaseUrl}/setup/analyzeMenuUrl.php`, {
@ -1670,24 +1680,28 @@
allMenus.push(menuEntry); allMenus.push(menuEntry);
totalProcessed++; totalProcessed++;
// Update with progress
const scheduleNote = result.menuSchedule ? ` (${result.menuSchedule})` : ''; const scheduleNote = result.menuSchedule ? ` (${result.menuSchedule})` : '';
document.getElementById('conversation').innerHTML = ''; const line = document.createElement('div');
addMessage('ai', ` line.className = 'message ai-message';
<p>Extracted <strong>${page.name}</strong>${scheduleNote}: ${data.items?.length || 0} items in ${data.categories?.length || 0} categories</p> line.innerHTML = `<p style="margin:4px 0;">Extracted <strong>${page.name}</strong>${scheduleNote}: ${data.items?.length || 0} items in ${data.categories?.length || 0} categories</p>`;
`); progressDiv.appendChild(line);
} else { } else {
document.getElementById('conversation').innerHTML = ''; const line = document.createElement('div');
addMessage('ai', `<p style="color:var(--warning);">Could not extract items from ${page.name} page.</p>`); line.className = 'message ai-message';
line.innerHTML = `<p style="margin:4px 0;color:var(--warning);">✗ Could not extract items from ${page.name} page.</p>`;
progressDiv.appendChild(line);
totalProcessed++; totalProcessed++;
} }
} catch (err) { } catch (err) {
console.error(`Error extracting ${page.name}:`, err); console.error(`Error extracting ${page.name}:`, err);
document.getElementById('conversation').innerHTML = ''; const line = document.createElement('div');
addMessage('ai', `<p style="color:var(--danger);">Error extracting ${page.name}: ${err.message}</p>`); line.className = 'message ai-message';
line.innerHTML = `<p style="margin:4px 0;color:var(--danger);">✗ Error extracting ${page.name}: ${err.message}</p>`;
progressDiv.appendChild(line);
totalProcessed++; totalProcessed++;
} }
} }
spinnerDiv.remove();
// Compute max business hours from all menu schedules // Compute max business hours from all menu schedules
if (allMenus.some(m => m.schedule) && !businessInfo.hours) { if (allMenus.some(m => m.schedule) && !businessInfo.hours) {