') !== -1 || raw.indexOf(' Opgeslagen';
saveBtn.disabled = true;
} else alert('Fout: ' + (d.error || 'Kon niet opslaan'));
})
.catch(function(err) { alert('Fout: ' + err.message); });
}
});
function getChatHistoryForSave() {
var list = [], messagesEl = document.getElementById('messages');
if (!messagesEl) return list;
messagesEl.querySelectorAll('.msg.user, .msg.ai').forEach(function(el) {
var role = el.classList.contains('user') ? 'user' : 'assistant';
var content = (el.textContent || '').trim();
if (content.length > 8000) content = content.slice(0, 8000) + ' …';
list.push({ role: role, content: content });
});
return list;
}
async function saveSession() {
var sessionId = prompt('Naam voor deze sessie:', lastSessionId || ('sessie_' + Date.now()));
if (!sessionId || !sessionId.trim()) return;
try {
var r = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'save_session', session_id: sessionId.trim(), chat_history: getChatHistoryForSave(), code: files, metadata: { updated: Date.now(), company: window._companyName || '' } }) });
var d = await r.json();
if (d.success) { lastSessionId = sessionId.trim(); }
alert(d.success ? 'Sessie opgeslagen. Gebruik "Deel sessie" om de link te kopiëren.' : 'Fout: ' + (d.error || 'Kon niet opslaan'));
} catch (e) { alert('Fout: ' + e.message); }
}
function getShareableSessionUrl() {
var base = window.location.origin + (window.location.pathname || '/ai-code-editor-agent.php');
var q = base.indexOf('?') >= 0 ? '&' : '?';
return lastSessionId ? (base + q + 'session=' + encodeURIComponent(lastSessionId)) : '';
}
async function shareSession() {
if (!lastSessionId) {
var saveFirst = confirm('Eerst opslaan om een deelbare link te maken? (Kies OK om nu op te slaan.)');
if (saveFirst) {
await saveSession();
if (!lastSessionId) return;
} else return;
}
var url = getShareableSessionUrl();
if (!url) { alert('Sla eerst een sessie op (Opslaan), daarna kun je de link delen.'); return; }
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(url);
alert('Link gekopieerd! Dezelfde sessie openen: in deze Code Agent, in de Orchestrator of in Live Build. Link: ' + url.slice(0, 60) + '…');
} else {
prompt('Kopieer deze link om de sessie te delen (Orchestrator / Live Build):', url);
}
} catch (e) { prompt('Kopieer deze link:', url); }
}
async function loadSession() {
try {
var r = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'get_sessions' }) });
var d = await r.json();
if (!d.success || !d.data.sessions || d.data.sessions.length === 0) { alert('Geen opgeslagen sessies.'); return; }
var list = d.data.sessions;
var choice = prompt('Kies sessie (1-' + list.length + '):\n' + list.map(function(s, i) { return (i + 1) + '. ' + s.session_id; }).join('\n'), '1');
if (!choice) return;
var idx = parseInt(choice, 10);
if (idx < 1 || idx > list.length) return;
var loadR = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'load_session', session_id: list[idx - 1].session_id }) });
var loadD = await loadR.json();
if (!loadD.success || !loadD.data.session) { alert('Laden mislukt.'); return; }
var session = loadD.data.session;
if (session.code && typeof session.code === 'object') { files = session.code; if (editor && files[activeFile]) editor.setValue(files[activeFile]); updatePreview(); }
if (session.chat_history && session.chat_history.length) {
var messagesEl = document.getElementById('messages');
var systemHtml = [];
messagesEl.querySelectorAll('.msg.system').forEach(function(n) { systemHtml.push(n.outerHTML); });
messagesEl.innerHTML = systemHtml.join('');
session.chat_history.forEach(function(item) {
var esc = escapeHtml(item.content || '').replace(/\n/g, '' + esc + '
' : '' + esc + '
';
});
scrollChatToBottom(true);
}
lastSessionId = list[idx - 1].session_id;
if (session.metadata && session.metadata.company) { window._companyName = session.metadata.company; updateCompanyDisplay(); }
} catch (e) { alert('Fout: ' + e.message); }
}
async function loadSessionById(sessionId) {
if (!sessionId || !sessionId.trim()) return;
try {
var r = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'load_session', session_id: sessionId.trim() }) });
var d = await r.json();
if (!d.success || !d.data.session) { alert('Sessie niet gevonden of laden mislukt.'); return; }
var session = d.data.session;
if (session.code && typeof session.code === 'object') { files = session.code; if (editor && files[activeFile]) editor.setValue(files[activeFile]); updatePreview(); }
if (session.chat_history && session.chat_history.length) {
var messagesEl = document.getElementById('messages');
var systemHtml = []; messagesEl.querySelectorAll('.msg.system').forEach(function(n) { systemHtml.push(n.outerHTML); });
messagesEl.innerHTML = systemHtml.join('');
session.chat_history.forEach(function(item) {
var esc = escapeHtml(item.content || '').replace(/\n/g, '' + esc + '
' : '' + esc + '
';
});
scrollChatToBottom(true);
}
lastSessionId = sessionId.trim();
if (session.metadata && session.metadata.company) { window._companyName = session.metadata.company; updateCompanyDisplay(); }
} catch (e) { alert('Fout: ' + e.message); }
}
function updateCompanyDisplay() {
var el = document.getElementById('companyNameDisplay');
var inp = document.getElementById('companyNameInput');
if (el) el.textContent = window._companyName ? 'Klant: ' + window._companyName : '';
if (inp && !inp.value && window._companyName) inp.placeholder = window._companyName;
}
async function companyKvkSearch() {
var inp = document.getElementById('companyNameInput');
var naam = (inp && inp.value && inp.value.trim()) ? inp.value.trim() : prompt('Zoekterm (bedrijfsnaam of plaats):', '');
if (!naam) return;
try {
var url = '/admin_portal/api/kvk-lookup.php?naam=' + encodeURIComponent(naam) + '&only_search=1';
var r = await fetch(url, { method: 'GET', credentials: 'same-origin' });
var d = await r.json();
if (!d.ok) { alert(d.error || 'KVK zoeken mislukt.'); return; }
var list = d.zoekResultaten || [];
if (list.length === 0) { alert('Geen bedrijven gevonden. Probeer een andere zoekterm.'); return; }
if (list.length === 1) {
window._companyName = list[0].naam || list[0].bedrijfsnaam || naam;
updateCompanyDisplay();
return;
}
var lines = list.slice(0, 15).map(function(x, i) { return (i + 1) + '. ' + (x.naam || x.bedrijfsnaam || '') + (x.plaats ? ' – ' + x.plaats : ''); });
var choice = prompt('Kies bedrijf (nummer 1-' + lines.length + '):\n\n' + lines.join('\n'), '1');
if (!choice) return;
var idx = parseInt(choice, 10);
if (idx < 1 || idx > list.length) return;
window._companyName = list[idx - 1].naam || list[idx - 1].bedrijfsnaam || naam;
updateCompanyDisplay();
} catch (e) { alert('Fout: ' + e.message); }
}
function newSession() {
if (!confirm('Nieuw project starten? Huidige bestanden en chat worden gereset. Opgeslagen sessies blijven beschikbaar onder Laden.')) return;
try { sessionStorage.removeItem(AUTO_SAVE_KEY); } catch (e) {}
var defaultFiles = {
'index.html': '\n\n\nDemo \n\n\n\nIT Live Demo \nVraag de AI om iets te bouwen!
\n\n',
'style.css': 'body{margin:0;padding:0}',
'script.js': 'console.log("Ready");'
};
files = defaultFiles;
activeFile = 'index.html';
var messagesEl = document.getElementById('messages');
var systemHtml = [];
messagesEl.querySelectorAll('.msg.system').forEach(function(n) { systemHtml.push(n.outerHTML); });
messagesEl.innerHTML = systemHtml.join('');
if (editor) {
editor.setValue(files[activeFile]);
monaco.editor.setModelLanguage(editor.getModel(), 'html');
}
updatePreview();
updateProjectCard({ task: '—', pct: 0, status: 'Wacht op input', busy: false });
document.getElementById('projectTaskText').textContent = '—';
document.getElementById('projectProgressFill').style.width = '0%';
document.getElementById('projectProgressPct').textContent = '0%';
document.getElementById('flowChain').textContent = 'Chain: code-gen';
updateFlowDesc(['Typ een opdracht in de chat →']);
updateFlowchart(0);
setPlanContent('Plan verschijnt hier na je opdracht (stap 1).
', '');
setTasksContent('Taken verschijnen hier (stap 2).
');
setSkeletonContent('Structuur/skeleton na code-generatie.
');
setBlueprintContent('Blauwdruk / design-notities.
');
switchCenterTab('preview');
scrollChatToBottom(true);
}
document.getElementById('btnSaveSession').addEventListener('click', saveSession);
document.getElementById('btnLoadSession').addEventListener('click', loadSession);
document.getElementById('btnShareSession').addEventListener('click', shareSession);
document.getElementById('btnNewSession').addEventListener('click', newSession);
document.getElementById('btnCompanySelf').addEventListener('click', function() {
var v = (document.getElementById('companyNameInput') || {}).value.trim();
window._companyName = v;
updateCompanyDisplay();
});
document.getElementById('btnCompanyKvk').addEventListener('click', companyKvkSearch);
/** Open gedeelde sessie uit URL (?session=... of ?share=...) */
(function() {
var m = /[?&](?:session|share)=([^&]+)/.exec(window.location.search || '');
if (m && m[1]) { var id = decodeURIComponent(m[1]).trim(); if (id) loadSessionById(id); }
})();
/** Base path uit URL (?base=...) – o.a. vanuit Mijn Webspace / admin code-editor; orchestrators gebruiken dezezelfde editor. */
(function() {
var m = /[?&]base=([^&]+)/.exec(window.location.search || '');
if (m && m[1]) {
var basePath = decodeURIComponent(m[1]).trim();
if (basePath) try { sessionStorage.setItem('ai_editor_base_path', basePath); } catch (e) {}
}
})();
/** Flow interactief: klik op stap opent bijbehorend tab */
document.addEventListener('click', function(e) {
const node = e.target.closest('.flow-node');
if (!node || !node.getAttribute('data-step')) return;
var step = node.getAttribute('data-step');
var view = { input: 'plan', analyze: 'plan', plan: 'plan', code: 'code', apply: 'preview', done: 'preview' }[step] || 'flow';
if (typeof switchCenterTab === 'function') switchCenterTab(view);
});
/** Voorkom dat hele pagina/chat als opdracht wordt gebruikt of getoond */
const MAX_DESCRIPTION_API = 2000;
const MAX_OPDRACHT_DISPLAY = 400;
const MAX_USER_MSG_DISPLAY = 600;
function truncateForDisplay(s, max, suffix) {
if (!s || s.length <= max) return s || '';
return s.slice(0, max).trim() + (suffix || ' … (ingekort)');
}
function descriptionForApi(msg) {
var raw = (msg || '').trim().slice(0, MAX_DESCRIPTION_API);
if (window._companyName && window._companyName.trim()) {
raw = raw + ' Bedrijfsnaam/klant: ' + (window._companyName || '').trim().slice(0, 200);
}
const vague = /\b(maak|doe|bouw)\s+iets\b|\biets\s+(maken|bouwen)\b|iets\s+neef|maak\s+iets\s+neef/i.test(raw);
if (vague && raw.length < 80) {
return 'Bouw iets creatiefs: een aantrekkelijke sectie met heading, tekst en stijl (bijv. call-to-action of icoon) in IT Live stijl (donkerblauw/goud). Gebruiker vroeg: ' + raw;
}
return raw.slice(0, MAX_DESCRIPTION_API);
}
function getMaxTokensForBuild() {
var el = document.querySelector('input[name="maxTokensBuild"]:checked');
if (!el || !el.value) return 0;
var n = parseInt(el.value, 10);
return isNaN(n) ? 0 : n;
}
/** Bij vage korte input (maak het, goed) de laatste concrete opdracht uit de chat gebruiken voor plan/code. */
function getEffectiveDescription(msg, messagesEl) {
var m = (msg || '').trim();
var vagueShort = m.length < 40 || /^(maak het|doe het|goed|ja|doe maar|bouwen|ga door|ok|oké|yes|doe|doen)$/i.test(m);
if (!messagesEl || !vagueShort) return m || msg;
var users = messagesEl.querySelectorAll('.msg.user');
if (users.length < 2) return m || msg;
var prev = users[users.length - 2];
var prevText = (prev.textContent || '').trim();
if (prevText.length < 30) return m || msg;
return prevText + (m ? ' Verduidelijking: ' + m : '');
}
/** Of de opdracht het Strawberry-voorbeeld vraagt (API gebruikt dan vaste sectorcontent, geen Lorem). */
function isStrawberryRequest(desc) { return (desc || '').toLowerCase().indexOf('strawberry') !== -1; }
/** Restaurant/horeca: leer van SBI + Strawberry, werkende menukaart, keuken, plan verbeterd. */
function isRestaurantRequest(desc) { return /\b(restaurant|horeca|menukaart|eetgelegenheid|keuken|reserveren)\b/i.test(desc || ''); }
/** Haal brancheprofiel op (SBI, keywords, diensten, GMB) voor sector-specifieke websites. */
async function fetchBranchData(description) {
if (!description || (description || '').trim().length < 5) return null;
var q = (description || '').trim().slice(0, 150);
try {
var resolveRes = await fetch('/api/sbi-branches-api.php?action=resolve&q=' + encodeURIComponent(q));
var resolveData = await resolveRes.json().catch(function() { return {}; });
var sbiCode = resolveData.sbi_code || (resolveData.data && (resolveData.data.sbi_code || (Array.isArray(resolveData.data) && resolveData.data[0] && resolveData.data[0].sbi_code ? resolveData.data[0].sbi_code : null)));
if (!sbiCode) return null;
var branchRes = await fetch('/api/sbi-branches-api.php?action=get_branch_info&sbi_code=' + encodeURIComponent(sbiCode) + '&source=code_agent');
var branchData = await branchRes.json().catch(function() { return {}; });
if (branchData.success && branchData.data) return branchData.data;
return null;
} catch (e) { return null; }
}
function planStepLevel(step) {
if (/^\d+[\.\)]\s+/.test(step)) return 0;
if (/^\d+\.\d+\.\d+([\.\)]\s*|\s+)/.test(step) || /^[a-zA-Z]\d+[\.\)]?\s+/.test(step)) return 2;
if (/^\d+\.\d+([\.\)]\s*|\s+)/.test(step) || /^[a-zA-Z][\.\)]\s+/.test(step)) return 1;
return 0;
}
function renderPlanStepsHtml(steps) {
if (!steps || !steps.length) return '';
return steps.slice(0, 40).map(function(s) {
var level = planStepLevel(s);
return '' + escapeHtml(s) + ' ';
}).join('');
}
document.getElementById('input').addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
document.querySelectorAll('.quick-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
var prompt = this.getAttribute('data-prompt');
var input = document.getElementById('input');
var barInput = document.getElementById('chatBarInput');
if (prompt && input) {
input.value = prompt;
if (barInput) barInput.value = prompt;
sendMessage();
}
});
});
(function() {
var wrapper = document.getElementById('chat-bar-wrapper');
var bar = document.getElementById('chat-input-bar');
var barInput = document.getElementById('chatBarInput');
var input = document.getElementById('input');
var barModel = document.getElementById('chatBarModel');
var grip = document.getElementById('chatBarGrip');
var resizeHandle = document.getElementById('chatBarResize');
var quickRow = document.getElementById('chat-bar-quick-row');
var STORAGE_KEY = 'ai_code_agent_chat_bar';
/* Snelkeuzes alleen in optiepanel (⋯); quickRow niet meer vullen */
function loadBarState() {
if (!wrapper) return;
try {
var s = sessionStorage.getItem(STORAGE_KEY);
if (s) {
var o = JSON.parse(s);
if (o.pos === 'left' || o.pos === 'right' || o.pos === 'center') {
if (o.pos === 'center') {
wrapper.style.left = '50%';
wrapper.style.right = 'auto';
wrapper.style.bottom = '16px';
wrapper.style.transform = 'translateX(-50%)';
} else if (o.pos === 'left') {
wrapper.style.left = '16px';
wrapper.style.right = 'auto';
wrapper.style.bottom = '16px';
wrapper.style.transform = 'none';
} else {
wrapper.style.left = 'auto';
wrapper.style.right = '16px';
wrapper.style.bottom = '16px';
wrapper.style.transform = 'none';
}
} else if (o.left != null && o.bottom != null) {
wrapper.style.left = o.left + 'px';
wrapper.style.bottom = o.bottom + 'px';
wrapper.style.transform = 'none';
wrapper.style.right = 'auto';
}
if (o.width && o.width >= 320) {
wrapper.style.width = Math.min(o.width, 900) + 'px';
}
}
} catch (e) {}
}
function saveBarState() {
if (!wrapper) return;
try {
var width = wrapper.offsetWidth;
var isPercent = (wrapper.style.left || '').indexOf('%') >= 0;
if (isPercent) {
var s = sessionStorage.getItem(STORAGE_KEY);
var o = (s ? JSON.parse(s) : {}) || {};
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ pos: o.pos || 'center', width: width }));
} else {
var left = parseInt(wrapper.style.left, 10);
var bottom = parseInt(wrapper.style.bottom, 10);
if (!isNaN(left) && !isNaN(bottom)) {
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ left: left, bottom: bottom, width: width }));
}
}
} catch (e) {}
}
loadBarState();
if (barInput && input) {
function barInputSync() { input.value = barInput.value; }
function barInputGrow() {
barInput.style.height = 'auto';
barInput.style.height = Math.min(barInput.scrollHeight, 96) + 'px';
}
barInput.addEventListener('input', function() { barInputSync(); barInputGrow(); });
barInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
input.value = barInput.value;
sendMessage();
barInput.value = '';
input.value = '';
barInputGrow();
}
});
barInputGrow();
}
var optionsPanel = document.getElementById('chat-bar-options');
var barOptsBtn = document.getElementById('chatBarOpts');
if (optionsPanel && barOptsBtn) {
var qc = document.getElementById('quickChoices');
var qa = document.getElementById('quickActions');
var dest = document.getElementById('chatBarQuickActions');
if (dest && (qc || qa)) {
[qc, qa].forEach(function(container) {
if (!container) return;
container.querySelectorAll('.quick-btn').forEach(function(btn) {
var clone = btn.cloneNode(true);
clone.addEventListener('click', function() {
var p = this.getAttribute('data-prompt');
if (p) {
if (barInput) barInput.value = p;
if (input) input.value = p;
optionsPanel.classList.remove('visible');
if (typeof sendMessage === 'function') sendMessage();
}
});
dest.appendChild(clone);
});
});
}
var posBtns = optionsPanel.querySelectorAll('.bar-pos-btn');
function applyBarPosition(pos) {
if (!wrapper) return;
if (pos === 'center' || pos === 'reset') {
wrapper.style.left = '50%';
wrapper.style.right = 'auto';
wrapper.style.bottom = '16px';
wrapper.style.transform = 'translateX(-50%)';
} else if (pos === 'left') {
wrapper.style.left = '16px';
wrapper.style.right = 'auto';
wrapper.style.bottom = '16px';
wrapper.style.transform = 'none';
} else if (pos === 'right') {
wrapper.style.left = 'auto';
wrapper.style.right = '16px';
wrapper.style.bottom = '16px';
wrapper.style.transform = 'none';
}
try {
if (pos === 'reset') {
sessionStorage.removeItem(STORAGE_KEY);
} else {
sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ pos: pos, width: wrapper.offsetWidth }));
}
} catch (e) {}
}
posBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
var pos = this.getAttribute('data-pos');
if (pos) applyBarPosition(pos);
});
});
document.querySelectorAll('input[name="sendModeBar"]').forEach(function(r) {
r.addEventListener('change', function() {
var main = document.querySelector('input[name="sendMode"][value="' + this.value + '"]');
if (main) main.checked = true;
if (barModel) barModel.value = this.value;
});
});
barOptsBtn.addEventListener('click', function(e) {
e.stopPropagation();
optionsPanel.classList.toggle('visible');
if (optionsPanel.classList.contains('visible')) loadTokenUsage();
var checked = document.querySelector('input[name="sendMode"]:checked');
if (checked) document.querySelectorAll('input[name="sendModeBar"]').forEach(function(r) { r.checked = (r.value === checked.value); });
});
document.addEventListener('click', function() { optionsPanel.classList.remove('visible'); });
optionsPanel.addEventListener('click', function(e) { e.stopPropagation(); });
function loadTokenUsage() {
var el = document.getElementById('tokenUsageText');
if (!el) return;
el.textContent = 'Laden…';
fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'token_usage' }) })
.then(function(r) { return r.json(); })
.then(function(data) {
if (data.success && data.data) {
var t = data.data.usage_today || {};
var tot = (t.total || 0);
var gratis = data.data.gratis_tokens_today || 0;
var g7 = data.data.gratis_tokens_7d || 0;
el.textContent = 'Vandaag: ' + tot.toLocaleString('nl-NL') + ' (' + gratis.toLocaleString('nl-NL') + ' gratis)';
el.title = '7 dagen: ' + (data.data.usage_7d && data.data.usage_7d.total != null ? data.data.usage_7d.total.toLocaleString('nl-NL') : '—') + ' totaal, ' + g7.toLocaleString('nl-NL') + ' gratis';
} else {
el.textContent = '—';
}
})
.catch(function() { el.textContent = '—'; });
}
var tokenRefresh = document.getElementById('tokenUsageRefresh');
if (tokenRefresh) tokenRefresh.addEventListener('click', loadTokenUsage);
var completeSiteBtn = document.getElementById('completeSiteBtn');
var completeClient = document.getElementById('completeSiteClientName');
var completeSector = document.getElementById('completeSiteSector');
if (completeSiteBtn && completeClient && completeSector) {
completeSiteBtn.addEventListener('click', function() {
var name = (completeClient.value || '').trim();
var sector = (completeSector.value || '').trim();
if (!name) { alert('Vul minimaal een klantnaam in.'); return; }
completeSiteBtn.disabled = true;
completeSiteBtn.innerHTML = 'INSTRUCTIE voor klant ' + escapeHtml(inst) + ' ', null);
optionsPanel.classList.remove('visible');
switchToPreviewTab && switchToPreviewTab();
var toast = document.createElement('div');
toast.className = 'complete-website-toast';
toast.style.cssText = 'position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#10b981;color:#fff;padding:10px 20px;border-radius:8px;font-size:0.9rem;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.2);';
toast.textContent = 'Complete website geladen. Instructie staat in tab Plan.';
document.body.appendChild(toast);
setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 4000);
})
.catch(function(err) {
completeSiteBtn.disabled = false;
completeSiteBtn.innerHTML = '' + bodyHtml + '
';
var copyBtn = document.getElementById('offerteTabCopy');
if (copyBtn) copyBtn.addEventListener('click', function() {
if (window._lastOfferte && navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(window._lastOfferte.text).then(function() {
copyBtn.innerHTML = '
Offerte / aanbod ' + bodyHtml + '
Offerte gegenereerd. Bekijk in het midden (modal).
';
} else {
messages.innerHTML += '⚠️ ' + escapeHtml(d.error || 'Offerte kon niet worden gegenereerd.') + '
';
}
} catch (e) {
const lastMsg = messages.querySelector('.msg.ai:last-child');
if (lastMsg && lastMsg.querySelector('.ai-thinking')) lastMsg.remove();
messages.innerHTML += '❌ ' + escapeHtml(e.message) + '
';
}
scrollChatToBottom(true);
}
document.getElementById('btnMakeOffer').addEventListener('click', makeOffer);
const FLOW_STEPS = ['input', 'analyze', 'plan', 'code', 'apply', 'done'];
const FLOW_DESC_STEPS = [
'1. Analyseer vraag en context',
'2. Maak plan (HTML/CSS/JS)',
'3. Genereer code',
'4. Pas toe in editor + preview'
];
function updateFlowDesc(lines, activeIndex) {
const el = document.getElementById('flowDesc');
if (!el) return;
if (typeof lines === 'string') lines = lines.split('\n').filter(Boolean);
if (!Array.isArray(lines)) return;
activeIndex = activeIndex == null ? -1 : activeIndex;
el.innerHTML = lines.map((line, i) => {
let cls = 'step';
if (activeIndex >= 0) {
if (i < activeIndex) cls += ' done';
else if (i === activeIndex) cls += ' active';
}
return '' + escapeHtml(line) + '
';
}).join('');
const centerDesc = document.getElementById('flowDescCenter');
if (centerDesc) centerDesc.innerHTML = el.innerHTML;
}
function updateFlowchart(activeIndex, isError) {
['flowchart', 'flowchartCenter'].forEach(id => {
const container = document.getElementById(id);
if (!container) return;
const nodes = container.querySelectorAll('.flow-node');
const arrows = container.querySelectorAll('.flow-arrow');
for (let i = 0; i < nodes.length; i++) {
nodes[i].classList.remove('pending', 'active', 'done', 'error');
if (isError && i === activeIndex) nodes[i].classList.add('error');
else if (i < activeIndex) nodes[i].classList.add('done');
else if (i === activeIndex) nodes[i].classList.add('active');
else nodes[i].classList.add('pending');
}
for (let j = 0; j < arrows.length; j++) {
arrows[j].classList.remove('pending', 'active', 'done');
if (j < activeIndex) arrows[j].classList.add('done');
else if (j === activeIndex - 1) arrows[j].classList.add('active');
else arrows[j].classList.add('pending');
}
});
const descCenter = document.getElementById('flowDescCenter');
if (descCenter && document.getElementById('flowDesc')) descCenter.innerHTML = document.getElementById('flowDesc').innerHTML;
}
function updateProjectCard(opts) {
const card = document.getElementById('projectCard');
const taskEl = document.getElementById('projectTaskText');
const fillEl = document.getElementById('projectProgressFill');
const pctEl = document.getElementById('projectProgressPct');
const statusEl = document.getElementById('projectStatus');
if (!card) return;
if (opts.task !== undefined) taskEl.textContent = opts.task || '—';
if (opts.pct !== undefined) {
const pct = Math.min(100, Math.max(0, opts.pct));
fillEl.style.width = pct + '%';
pctEl.textContent = pct + '%';
}
if (opts.status !== undefined) statusEl.textContent = opts.status;
card.classList.remove('idle', 'busy', 'done');
card.classList.add(opts.busy ? 'busy' : (opts.pct >= 100 ? 'done' : 'idle'));
}
/** Alleen chatten: vraag → agent antwoordt, geen plan/code. Flow toont Chat → Antwoord. */
async function sendChatOnly(msg, messagesEl) {
const chainEl = document.getElementById('flowChain');
if (chainEl) chainEl.textContent = 'Chain: chat';
updateProjectCard({ task: msg.slice(0, 60) + (msg.length > 60 ? '…' : ''), pct: 0, status: 'Bezig…', busy: true });
updateFlowDesc(['1. Vraag ontvangen', '2. Antwoord genereren…'], 1);
const thinkingId = 'thinking-chat-' + Date.now();
messagesEl.innerHTML += ` Antwoord wordt gegenereerd…
${escapeHtml(text).replace(/\n/g, '
`;
addTtsButtonToLastAiMessage();
scrollChatToBottom(true);
speakResponse(text);
} else {
let err = data.error || data.data?.error || 'Geen antwoord ontvangen.';
const isNoApiKey = (data.data?.error === 'no_api_key') || /geen.*ai.*provider|stel.*api.*key|admin.*portal.*ai.*provider|geen antwoord|geldig antwoord/i.test(err);
updateProjectCard({ pct: 0, status: isNoApiKey ? 'Klaar' : 'Fout', busy: false });
if (isNoApiKey) {
updateFlowDesc(['AI wordt geladen… even geduld.']);
updateFlowchart(0, false);
messagesEl.innerHTML += 'AI is momenteel niet beschikbaar. Probeer het later opnieuw of neem contact op met support.
';
} else {
updateFlowDesc(['Fout: ' + (err + '').replace(/<[^>]+>/g, '').trim().substring(0, 50)]);
updateFlowchart(0, true);
messagesEl.innerHTML += '⚠️ ' + escapeHtml(err).replace(/\n/g, '
';
}
}
} catch (error) {
const thinkingDiv = document.getElementById(thinkingId);
if (thinkingDiv && thinkingDiv.parentNode) thinkingDiv.remove();
updateProjectCard({ pct: 0, status: 'Fout', busy: false });
updateFlowDesc(['Fout: ' + error.message]);
updateFlowchart(0, true);
messagesEl.innerHTML += `❌ ${escapeHtml(error.message)}
`;
}
scrollChatToBottom(true);
}
async function doGenerateWithPlan(description, planText) {
const messages = document.getElementById('messages');
const thinkingId = 'thinking-gen-' + Date.now();
messages.innerHTML += 'Code genereren met verduidelijking…
Plan (gebruikt voor code) Opdracht: ' + escapeHtml(truncateForDisplay(description, MAX_OPDRACHT_DISPLAY)) + '
' + escapeHtml(planText || '').replace(/\n/g, '
Toegepast: ' + escapeHtml(applied.join(', ')) + '
';
setPlanContent(planHtml, planText || null);
setTasksContent('Uitgevoerde stappen ✓ Verduidelijking ✓ Code generatie ✓ Toepassen (' + escapeHtml(applied.join(', ')) + ') HTML-structuur ' + escapeHtml(skeletonTags.join(', ')) + ' JavaScript ' + escapeHtml(jsSummary.summary) + '
Video / media ' + (mediaItems.length ? '' + mediaItems.map(m => '' + escapeHtml(m.label) + ' ').join('') + ' ' : 'Geen video/audio in HTML.
');
setSkeletonContent(skeletonHtml);
setBlueprintContent('Blauwdruk Frontend: HTML, CSS, JavaScript. Toegepast: ' + escapeHtml(applied.join(', ')) + '.
');
var liveEl = document.getElementById('liveLinkDisplay');
if (liveEl) liveEl.innerHTML = 'Preview in tabblad →';
const codeDisplay = escapeHtml(code.replace(/```/g, ''));
var sitemapInfo = (data.data && data.data.sitemap_used && data.data.sitemap_steps) ? ' (sitemap: ' + data.data.sitemap_steps + ' stappen)' : '';
messages.innerHTML += aiMsgWithCodeBlock('✅ Code Gegenereerd! Opdracht ' + escapeHtml(truncateForDisplay(description, MAX_OPDRACHT_DISPLAY)) + '
Geen code-blokken toegepast.
');
var errMsg = data.error || data.data?.text || 'Kon geen code genereren';
var noKey = (data.data && data.data.error === 'no_api_key') || /geen.*ai.*provider|stel.*api.*key/i.test(errMsg + '');
if (noKey) {
updateProjectCard({ pct: 0, status: 'Klaar', busy: false });
updateFlowDesc(['AI wordt geladen…']);
messages.innerHTML += 'AI is momenteel niet beschikbaar. Probeer het later opnieuw of neem contact op met support.
';
} else {
messages.innerHTML += '⚠️ ' + escapeHtml(errMsg) + '
';
}
}
} else {
var errMsg2 = data.error || data.data?.text || 'Kon geen code genereren';
var noKey2 = (data.data && data.data.error === 'no_api_key') || /geen.*ai.*provider|stel.*api.*key/i.test(errMsg2 + '');
if (noKey2) {
updateProjectCard({ pct: 0, status: 'Klaar', busy: false });
updateFlowDesc(['AI wordt geladen…']);
messages.innerHTML += 'AI is momenteel niet beschikbaar. Probeer het later opnieuw of neem contact op met support.
';
} else {
messages.innerHTML += '⚠️ ' + escapeHtml(errMsg2) + '
';
}
}
} catch (err) {
const thinkingDiv = document.getElementById(thinkingId);
if (thinkingDiv && thinkingDiv.parentNode) thinkingDiv.remove();
updateProjectCard({ pct: 0, status: 'Fout', busy: false });
messages.innerHTML += '❌ ' + escapeHtml(err.message) + '
';
}
scrollChatToBottom(true);
}
// Missing API functions - add these before sendMessage()
async function callKvkAPI(query) {
try {
const response = await fetch('/api.itlive.nl/bedrijvencheck-kvk-api.php?naam=' + encodeURIComponent(query));
const data = await response.json();
return data;
} catch (e) {
console.error('KVK API error:', e);
return null;
}
}
async function callSBIAnalyzer(sbiCode) {
try {
const response = await fetch('/api/sbi-analyzer-api.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'analyze', sbi_code: sbiCode })
});
const data = await response.json();
return data;
} catch (e) {
console.error('SBI Analyzer error:', e);
return null;
}
}
async function callAIOrchestrator(company) {
try {
const response = await fetch('/api/ai-orchestrator-api.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'start_pipeline', company: company })
});
const data = await response.json();
return data;
} catch (e) {
console.error('AI Orchestrator error:', e);
return null;
}
}
async function sendMessage() {
const input = document.getElementById('input');
const msg = input.value.trim();
if (!msg) return;
// Simple template detection for special cases
if (msg.toLowerCase().includes('kvk') && msg.toLowerCase().includes('zoek')) {
// Handle KvK search
const searchQuery = msg.replace(/zoek|vind|bedrijfs|bedrijven/gi, '').trim();
if (searchQuery) {
const apiData = await callKvkAPI(searchQuery);
if (apiData && apiData.success) {
messages.innerHTML += 'KVK resultaten gevonden: ' + JSON.stringify(apiData.data, null, 2) + '
';
scrollChatToBottom(true);
input.value = '';
return;
}
}
}
if (msg.toLowerCase().includes('sbi') && msg.toLowerCase().includes('analyseer')) {
// Handle SBI analysis
const sbiMatch = msg.match(/\b(\d{4})\b/);
if (sbiMatch) {
const apiData = await callSBIAnalyzer(sbiMatch[1]);
if (apiData && apiData.success) {
messages.innerHTML += 'SBI analyse: ' + JSON.stringify(apiData.data, null, 2) + '
';
scrollChatToBottom(true);
input.value = '';
return;
}
}
}
if (pendingClarification) {
const answer = msg;
const fullDesc = pendingClarification.description + '\n\nVerduidelijking klant: ' + answer;
const savedPlan = pendingClarification.planText;
pendingClarification = null;
const messages = document.getElementById('messages');
messages.innerHTML += '' + escapeHtml(truncateForDisplay(answer, MAX_USER_MSG_DISPLAY, ' …')) + '
';
input.value = '';
scrollChatToBottom(true);
await doGenerateWithPlan(fullDesc, savedPlan);
return;
}
let mode = (document.querySelector('input[name="sendMode"]:checked') || {}).value || 'auto';
if (mode === 'auto') {
try {
const classifyRes = await fetch('/api.itlive.nl/ai-code-editor-api.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'classify', message: msg.slice(0, 500), prompt: msg.slice(0, 500) })
});
const classifyData = await safeJsonFromResponse(classifyRes);
if (classifyData.success && classifyData.data && classifyData.data.chain) {
mode = classifyData.data.chain === 'code-gen' ? 'build' : 'chat';
window._lastClassifyReason = classifyData.data.reason || '';
} else {
window._lastClassifyReason = '';
const r = computeClarity(msg);
mode = r.suggestedMode;
}
} catch (e) {
window._lastClassifyReason = '';
const r = computeClarity(msg);
mode = r.suggestedMode;
}
}
const messages = document.getElementById('messages');
messages.innerHTML += `${escapeHtml(truncateForDisplay(msg, MAX_USER_MSG_DISPLAY, ' …'))}
`;
input.value = '';
scrollChatToBottom(true);
if (mode === 'chat') {
await sendChatOnly(msg, messages);
return;
}
var effectiveDesc = getEffectiveDescription(msg, messages);
// ——— Plan + code bouwen ———
const chainEl = document.getElementById('flowChain');
var classifyReason = window._lastClassifyReason || '';
if (chainEl) chainEl.textContent = 'Chain: code-gen' + (classifyReason && classifyReason !== 'ai' && classifyReason !== 'empty' ? ' (' + classifyReason + ')' : '');
updateProjectCard({ task: msg.slice(0, 80) + (msg.length > 80 ? '…' : ''), pct: 0, status: 'Bezig…', busy: true });
updateFlowchart(1);
updateFlowDesc(FLOW_DESC_STEPS, 0);
// Tabs: start op Plan, toon opdracht
switchCenterTab('plan');
var opdrachtDisplay = truncateForDisplay(msg, MAX_OPDRACHT_DISPLAY);
var longHint = msg.length > MAX_DESCRIPTION_API ? '(Alleen eerste ' + MAX_DESCRIPTION_API + ' tekens naar AI gestuurd.)
' : '';
setPlanContent('Opdracht ' + escapeHtml(opdrachtDisplay) + '
' + longHint + 'Plan wordt gegenereerd…
');
setTasksContent('Taken volgen na plan.
');
// Show AI thinking steps
const thinkingId = 'thinking-' + Date.now();
messages.innerHTML += `
`;
scrollChatToBottom(true);
const thinkingDiv = document.getElementById(thinkingId);
const steps = thinkingDiv.querySelectorAll('.thinking-step');
const progressBar = thinkingDiv.querySelector('.progress-fill');
let planText = '';
let planSteps = [];
let needClarification = false;
let clarifyingQuestions = [];
for (let i = 0; i < steps.length; i++) {
await new Promise(r => setTimeout(r, 400));
if (i > 0) steps[i-1].classList.add('done');
steps[i].classList.add('active');
const pct = Math.round((i + 1) / steps.length * 100);
progressBar.style.width = pct + '%';
updateProjectCard({ pct: pct, status: 'Bezig…', busy: true });
updateFlowchart(i + 2);
updateFlowDesc(FLOW_DESC_STEPS, i + 1);
if (i === 0) {
var isRestaurant = isRestaurantRequest(effectiveDesc);
setTasksContent('Taken Branche ophalen (SBI/GMB)… ' + (isRestaurant ? 'Plan met menukaart (live), keuken, reserveren ' : '') + 'Plan genereren… Code genereren Toepassen in editor + preview Plan Opdracht: ' + escapeHtml(truncateForDisplay(effectiveDesc, MAX_OPDRACHT_DISPLAY)) + '
' + escapeHtml(planText).replace(/\n/g, '
';
setPlanContent(planHtml, planText);
if (planSteps.length) setTasksContent('Taken (uit plan) ' + renderPlanStepsHtml(planSteps) + ' ');
switchCenterTab('flow');
} else {
setPlanContent('Opdracht ' + escapeHtml(truncateForDisplay(effectiveDesc, MAX_OPDRACHT_DISPLAY)) + '
Plan niet beschikbaar; code wordt direct gegenereerd.
');
}
} catch (e) {
setPlanContent('Opdracht ' + escapeHtml(truncateForDisplay(effectiveDesc, MAX_OPDRACHT_DISPLAY)) + '
Plan-fase mislukt: ' + escapeHtml(e.message) + '
');
}
}
}
if (needClarification && clarifyingQuestions.length > 0) {
thinkingDiv.remove();
updateProjectCard({ pct: 40, status: 'Wacht op verduidelijking', busy: false });
updateFlowDesc(['Plan klaar', 'Wacht op je antwoorden op de vragen hieronder']);
var planSummary = (planText || effectiveDesc || '').trim().split('\n')[0].slice(0, 140) || effectiveDesc.slice(0, 140) || 'Opdracht';
var qList = clarifyingQuestions.map(function(q, i) { return 'Vraag ' + (i + 1) + ': ' + escapeHtml(q) + '
'; }).join('');
const qHtml = 'Opdracht → Plan ✓ → Verduidelijking → Code
Plan: ' + escapeHtml(planSummary) + (planSummary.length >= 140 ? '…' : '') + '
Om beter te kunnen bouwen: ' + qList + '
Beantwoord hieronder en verstuur, of kies:
';
messages.innerHTML += '' + qHtml + '
';
pendingClarification = { planText: planText, description: effectiveDesc, planSteps: planSteps };
scrollChatToBottom(true);
document.getElementById('btnBouwTochDoor').addEventListener('click', function() {
if (!pendingClarification) return;
var desc = pendingClarification.description;
var pPlan = pendingClarification.planText;
pendingClarification = null;
var clarifyEl = document.querySelector('.msg.ai.clarify');
if (clarifyEl && clarifyEl.parentNode) clarifyEl.remove();
updateProjectCard({ pct: 50, status: 'Bezig…', busy: true });
doContinueBuild(desc, pPlan);
});
return;
}
pendingPlanContinue = { planText: planText, description: effectiveDesc, planSteps: planSteps };
thinkingDiv.remove();
updateProjectCard({ pct: 50, status: 'Plan klaar – kies actie', busy: false });
updateFlowDesc(['Plan klaar', 'Kies hieronder wat je wilt']);
var planReadyId = 'plan-ready-' + Date.now();
var sitemapHtml = '';
try {
var sitemapRes = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'sitemap', plan: planText, description: effectiveDesc }) });
var sitemapData = await sitemapRes.json().catch(function() { return {}; });
if (sitemapData.success && sitemapData.data && sitemapData.data.sitemap && sitemapData.data.sitemap.length > 0) {
var sitemapSteps = sitemapData.data.sitemap;
pendingPlanContinue.sitemap = sitemapSteps;
sitemapHtml = 'Sitemap: ' + sitemapSteps.map(function(s) { return '' + escapeHtml(s.label || s.slug || '') + ' '; }).join('') + ' Opdracht → Plan ✓ → Kies actie → Code
Plan klaar. Wat wil je? Kies om door te gaan of het plan eerst aan te passen.
' + sitemapHtml + '
✓ Stap ' + (step + 1) + '/' + total + ': ' + escapeHtml(label) + ' toegepast.
';
} else {
messages.innerHTML += '⚠️ Stap ' + (step + 1) + ': ' + escapeHtml((data.error || data.data?.text || 'Mislukt') + '') + '
';
}
} catch (err) {
var thinkingDiv = document.getElementById(thinkingId);
if (thinkingDiv && thinkingDiv.parentNode) thinkingDiv.remove();
messages.innerHTML += '❌ Stap ' + (step + 1) + ': ' + escapeHtml(err.message) + '
';
}
scrollChatToBottom(true);
}
updateProjectCard({ pct: 100, status: 'Klaar', busy: false });
updateFlowchart(6);
switchToPreviewTab();
}
async function doContinueBuild(description, planText) {
const messages = document.getElementById('messages');
const thinkingId = 'thinking-continue-' + Date.now();
messages.innerHTML += '';
scrollChatToBottom(true);
updateProjectCard({ pct: 70, status: 'Bezig…', busy: true });
updateFlowchart(4);
try {
const genPayload = { action: 'generate', description: descriptionForApi(description), language: 'html', context: files, plan: planText };
if (isStrawberryRequest(description)) genPayload.template = 'strawberry';
if (isRestaurantRequest(description)) genPayload.template = 'restaurant';
if (lastBranchData) genPayload.branch_data = lastBranchData;
var maxT2 = getMaxTokensForBuild();
if (maxT2 > 0) genPayload.max_tokens = maxT2;
if (planText && planText.length > 100) {
try {
var stepEl2 = document.querySelector('#' + thinkingId + '-step .thinking-text');
if (stepEl2) stepEl2.textContent = 'Sitemap ophalen…';
const smRes = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'sitemap', plan: planText, description: descriptionForApi(description) }) });
const smData = await safeJsonFromResponse(smRes);
if (smData.success && smData.data && Array.isArray(smData.data.sitemap) && smData.data.sitemap.length > 0) genPayload.sitemap = smData.data.sitemap;
if (stepEl2) stepEl2.textContent = 'Afbeeldingen ophalen…';
var imgUrls = [];
var qs2 = /\brestaurant|horeca|eten|menu\b/i.test(description) ? ['restaurant hero interior', 'restaurant food dish'] : (/\bwebshop|shop|winkel\b/i.test(description) ? ['online shop hero', 'product ecommerce'] : ['professional business hero']);
for (var qk = 0; qk < Math.min(2, qs2.length); qk++) {
var imgR = await fetch('/api.itlive.nl/ai-code-editor-api.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'image_for_code', q: qs2[qk], context: description.slice(0, 100) }) });
var imgD = await imgR.json().catch(function() { return {}; });
if (imgD.success && imgD.data && imgD.data.url) imgUrls.push({ url: imgD.data.url, alt: imgD.data.alt_suggestion || qs2[qk] });
}
if (imgUrls.length > 0) genPayload.image_urls = imgUrls;
if (stepEl2) stepEl2.textContent = 'Code genereren…';
} catch (e) { /* sitemap/images optioneel */ }
}
const response = await fetch('/api.itlive.nl/ai-code-editor-api.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(genPayload)
});
const data = await safeJsonFromResponse(response);
const thinkingDiv = document.getElementById(thinkingId);
if (thinkingDiv && thinkingDiv.parentNode) thinkingDiv.remove();
updateProjectCard({ pct: 100, status: 'Klaar', busy: false });
updateFlowchart(6);
if (data.success && data.data && data.data.code) {
const code = data.data.code;
const htmlMatch = code.match(/```html\n([\s\S]*?)```/);
const cssMatch = code.match(/```css\n([\s\S]*?)```/);
const jsMatch = code.match(/```javascript\n([\s\S]*?)```/);
let applied = [];
if (htmlMatch) { files['index.html'] = htmlMatch[1].trim(); applied.push('HTML'); }
if (cssMatch) { files['style.css'] = cssMatch[1].trim(); applied.push('CSS'); }
if (jsMatch) { files['script.js'] = jsMatch[1].trim(); applied.push('JavaScript'); }
if (applied.length > 0) {
if (editor && activeFile in files) editor.setValue(files[activeFile]);
updatePreview();
if (typeof saveFilesToStorage === 'function') saveFilesToStorage();
updateFlowDesc(['Klaar – toegepast: ' + applied.join(', ')]);
setPlanContent('Plan (gebruikt voor code) Opdracht: ' + escapeHtml(truncateForDisplay(description, MAX_OPDRACHT_DISPLAY)) + '
' + escapeHtml(planText || '').replace(/\n/g, '
Toegepast: ' + escapeHtml(applied.join(', ')) + '
', planText || null);
setTasksContent('Uitgevoerd ✓ Plan ✓ Code generatie ✓ Toepassen (' + escapeHtml(applied.join(', ')) + ') HTML-structuur ' + escapeHtml(skeletonTags.join(', ')) + ' JavaScript ' + escapeHtml(jsSummary.summary) + '
Video / media ' + (mediaItems.length ? '' + mediaItems.map(m => '' + escapeHtml(m.label) + ' ').join('') + ' ' : 'Geen video/audio in HTML.
');
setSkeletonContent(skeletonHtml);
setBlueprintContent('Blauwdruk Toegepast: ' + escapeHtml(applied.join(', ')) + '.
');
var liveEl = document.getElementById('liveLinkDisplay');
if (liveEl) liveEl.innerHTML = 'Preview in tabblad →';
const codeDisplay = escapeHtml(code.replace(/```/g, ''));
var sitemapInfo2 = (data.data && data.data.sitemap_used && data.data.sitemap_steps) ? ' (sitemap: ' + data.data.sitemap_steps + ' stappen)' : '';
messages.innerHTML += aiMsgWithCodeBlock('✅ Code Gegenereerd! Opdracht ' + escapeHtml(truncateForDisplay(description, MAX_OPDRACHT_DISPLAY)) + '
Geen code-blokken toegepast.
');
var errMsgM = data.error || data.data?.text || 'Kon geen code genereren';
var noKeyM = (data.data && data.data.error === 'no_api_key') || /geen.*ai.*provider|stel.*api.*key/i.test(errMsgM + '');
if (noKeyM) {
updateProjectCard({ pct: 0, status: 'Klaar', busy: false });
updateFlowDesc(['AI wordt geladen…']);
messages.innerHTML += 'AI is momenteel niet beschikbaar. Probeer het later opnieuw of neem contact op met support.
';
} else {
messages.innerHTML += '⚠️ ' + escapeHtml(errMsgM) + '
';
}
}
} else {
var errMsgM2 = data.error || data.data?.text || 'Kon geen code genereren';
var noKeyM2 = (data.data && data.data.error === 'no_api_key') || /geen.*ai.*provider|stel.*api.*key/i.test(errMsgM2 + '');
if (noKeyM2) {
updateProjectCard({ pct: 0, status: 'Klaar', busy: false });
updateFlowDesc(['AI wordt geladen…']);
messages.innerHTML += 'AI is momenteel niet beschikbaar. Probeer het later opnieuw of neem contact op met support.
';
} else {
messages.innerHTML += '⚠️ ' + escapeHtml(errMsgM2) + '
';
}
}
} catch (err) {
const thinkingDiv = document.getElementById(thinkingId);
if (thinkingDiv && thinkingDiv.parentNode) thinkingDiv.remove();
updateProjectCard({ pct: 0, status: 'Fout', busy: false });
messages.innerHTML += '❌ ' + escapeHtml(err.message) + '
';
}
scrollChatToBottom(true);
}