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