/** Foodlinkk War Room — tab + popup (stream, emoji, files) */ window.WarRoomHub = (function () { var EMOJIS = ['😀','😂','🙂','😉','😍','🤝','👍','👎','🙏','🔥','✅','❌','⚠️','💡','📎','📦','🚀','💬','🧠','☕','💪','🎯','📊','🧾','🇳🇱','🌍']; function openPopup(roomQuery) { var url = '/agents/warroom/popup' + (roomQuery || ''); var w = window.open(url, 'flk-warroom', 'width=980,height=780,menubar=no,toolbar=no,location=no,status=no'); if (w) try { w.focus(); } catch (e) {} return w; } function warRoomController(opts) { opts = opts || {}; return { popupMode: !!opts.popupMode, souls: [], rooms: [], room: null, messages: [], chatSearch: '', searchOpen: false, toolsOpen: false, screenCleared: false, autoDebate: true, ceoInboxOpen: false, ceoInbox: [], ceoUnread: 0, replyTo: null, replyHighlightId: null, stickToBottom: true, showJumpLatest: false, hasMoreHistory: false, loadingHistory: false, historyTotal: 0, _loadingOlder: false, _typingScrollAt: 0, rosterCollapsed: true, a2aPausedUntil: 0, draft: '', busy: false, me: { username: '', avatar_url: '', role: '' }, lastId: 0, _poll: null, _polling: false, status: '', emojiOpen: false, mentionOpen: false, mentionQuery: '', mentionIndex: 0, emojis: EMOJIS, pendingFiles: [], typing: null, // { agent_key, display_name, text } callOpen: false, callBusy: false, callUrl: '', callSlug: '', voiceRecording: false, voiceBusy: false, speakReplies: false, voiceRoomOpen: false, voiceRoomAgents: ['herman', 'bizdev', 'finance', 'retail', 'marketing'], voiceSpeakingKey: '', voiceLastHeard: '', _voiceRec: null, _voiceStream: null, _voiceChunks: null, async init() { this.voiceRoomOpen = false; this.busy = false; this._sendLock = false; await Promise.all([this.loadMe(), this.loadSouls(), this.loadRooms()]); var params = new URLSearchParams(window.location.search || ''); var want = params.get('room'); if (want) await this.openRoom(parseInt(want, 10)); else { var wr = (this.rooms || []).find(function (r) { return r.kind === 'warroom'; }); if (wr) await this.openRoom(wr.id); else if (this.rooms.length) await this.openRoom(this.rooms[0].id); } try { var saved = localStorage.getItem('flk-warroom-a2a'); this.autoDebate = (saved === null || saved === '1' || saved === 'true'); } catch (e) { this.autoDebate = true; } this.startPoll(); this.loadCeoInbox(); if (this.autoDebate && this.room && this.room.kind === 'warroom') this.scheduleContinue(60000); }, destroy() { if (this._poll) clearInterval(this._poll); if (this._continueTimer) clearTimeout(this._continueTimer); }, async loadMe() { try { var r = await fetch('/api/auth/me').then(function (x) { return x.json(); }); var u = r.user || r || {}; this.me = { username: u.username || '', avatar_url: u.avatar_url || '', role: u.role || '', }; } catch (e) { this.me = { username: '', avatar_url: '', role: '' }; } }, async loadSouls() { try { var r = await fetch('/api/agents/souls').then(function (x) { return x.json(); }); this.souls = (r.items || r.souls || r || []).filter(function (s) { return s.is_active !== false; }); } catch (e) { this.souls = []; } this.$nextTick(function () { this.paintAvatars(); }.bind(this)); }, async loadRooms() { try { var r = await fetch('/api/agents/warroom/rooms').then(function (x) { return x.json(); }); this.rooms = r.items || []; } catch (e) { this.rooms = []; } }, warroomRoom() { return (this.rooms || []).find(function (r) { return r.kind === 'warroom'; }) || null; }, async openWarroom() { var wr = this.warroomRoom(); if (wr) return this.openRoom(wr.id); await this.loadRooms(); wr = this.warroomRoom(); if (wr) return this.openRoom(wr.id); }, async openDm(agentKey) { if (this.busy) return; this.busy = true; try { var r = await Cockpit.api('/api/agents/warroom/rooms/dm/' + encodeURIComponent(agentKey), { method: 'POST', body: '{}', }); await this.loadRooms(); if (r.room) await this.openRoom(r.room.id); } catch (e) { if (window.Cockpit) Cockpit.toast(e.message || 'DM openen mislukt', 'error'); } this.busy = false; }, async openRoom(id) { if (!id) return; id = parseInt(id, 10); this.busy = true; this.status = ''; this.typing = null; try { if (!(this.rooms || []).length) await this.loadRooms(); var meta = (this.rooms || []).find(function (r) { return Number(r.id) === id; }) || null; var r = await fetch('/api/agents/warroom/rooms/' + id + '/messages?limit=800').then(function (x) { return x.json(); }); // messages API returns {items}, NOT {room} — keep room from rooms list this.room = meta || r.room || { id: id, kind: 'warroom', title: 'War Room' }; this.messages = this.normalizeList(r.items || []); this.lastId = this.maxId(this.messages); this.historyTotal = r.total || this.messages.length; this.hasMoreHistory = !!r.has_more; this.stickToBottom = true; this.showJumpLatest = false; this.$nextTick(function () { this.paintAvatars(); this.scrollLog(true); this.focusComposer(); }.bind(this)); var last = (this.messages || [])[(this.messages || []).length - 1]; if (last && last.sender_type === 'agent' && this.room && this.room.kind === 'warroom') { if (this.autoDebate) this.scheduleContinue(120000); } } catch (e) { this.status = e.message || 'Laden mislukt'; // Still keep a usable room id so send works if (!this.room) this.room = { id: id, kind: 'warroom', title: 'War Room' }; } this.busy = false; }, normalizeList(items) { return (items || []).map(function (m) { if (m && typeof m.metadata === 'string') { try { m.metadata = JSON.parse(m.metadata); } catch (e) { m.metadata = {}; } } return m; }); }, maxId(items) { var n = 0; (items || []).forEach(function (m) { var id = Number(m && m.id); if (!isNaN(id) && id > n) n = id; }); return n; }, paintAvatars() { if (!window.AgentAvatars) return; var root = this.$root || document; root.querySelectorAll('.wr-roster [data-agent-avatar], .wr-log [data-agent-avatar]').forEach(function (el) { AgentAvatars.paint(el, el.getAttribute('data-agent-avatar'), el.getAttribute('data-agent-color')); }); }, upsertMessage(msg) { if (!msg || msg.id == null) return false; var list = this.messages || []; var idx = list.findIndex(function (m) { return String(m.id) === String(msg.id); }); if (idx >= 0) { list[idx] = msg; this.messages = list.slice(); } else { this.messages = list.concat([msg]); } var idn = Number(msg.id); if (!isNaN(idn) && idn > (this.lastId || 0)) this.lastId = idn; return true; }, mergeMessages(items) { var changed = false; var self = this; this.normalizeList(items || []).forEach(function (m) { if (self.upsertMessage(m)) changed = true; }); return changed; }, isNearBottom(el, px) { if (!el) return true; var gap = el.scrollHeight - el.scrollTop - el.clientHeight; return gap <= (px == null ? 80 : px); }, onLogScroll() { var el = this.$refs && this.$refs.wrLog; if (!el) return; var near = this.isNearBottom(el, 100); this.stickToBottom = near; this.showJumpLatest = !near; // bovenaan: oudere geschiedenis laden if (el.scrollTop < 80) this.loadOlderMessages(); }, minId(items) { var n = null; (items || []).forEach(function (m) { var id = Number(m && m.id); if (!isNaN(id) && (n === null || id < n)) n = id; }); return n; }, async loadOlderMessages() { if (!this.room || !this.room.id) return; if (this.loadingHistory || this._loadingOlder || !this.hasMoreHistory) return; if (!(this.messages || []).length) return; this._loadingOlder = true; this.loadingHistory = true; var el = this.$refs && this.$refs.wrLog; var prevHeight = el ? el.scrollHeight : 0; var prevTop = el ? el.scrollTop : 0; try { var before = this.minId(this.messages); var r = await fetch( '/api/agents/warroom/rooms/' + this.room.id + '/messages?limit=400&before_id=' + before, { credentials: 'same-origin' } ).then(function (x) { return x.json(); }); var older = this.normalizeList(r.items || []); if (older.length) { var existing = {}; (this.messages || []).forEach(function (m) { existing[String(m.id)] = true; }); var merged = older.filter(function (m) { return !existing[String(m.id)]; }) .concat(this.messages || []); this.messages = merged; this.historyTotal = r.total || this.historyTotal; this.hasMoreHistory = !!r.has_more; var self = this; this.$nextTick(function () { self.paintAvatars(); if (el) { // scrollpositie behouden na prepend el.scrollTop = el.scrollHeight - prevHeight + prevTop; } }); } else { this.hasMoreHistory = false; } } catch (e) { /* quiet */ } this.loadingHistory = false; this._loadingOlder = false; }, scrollLog(force) { var el = this.$refs && this.$refs.wrLog; if (!el) return; if (!force && !this.stickToBottom) { this.showJumpLatest = true; return; } el.scrollTop = el.scrollHeight; this.stickToBottom = true; this.showJumpLatest = false; }, jumpToLatest() { this.stickToBottom = true; this.showJumpLatest = false; this.scrollLog(true); }, startPoll() { var selfCeo = this; if (!this._ceoPoll) { this._ceoPoll = setInterval(function () { selfCeo.loadCeoInbox(); }, 20000); } var self = this; if (this._poll) clearInterval(this._poll); this._poll = setInterval(function () { self.pollNew(); }, 4000); }, async pollNew() { // Cruciaal: niet pollen tijdens send/stream → voorkomt dubbele user-bubbles if (!this.room || this._polling || this.busy) return; this._polling = true; try { var url = '/api/agents/warroom/rooms/' + this.room.id + '/messages?limit=50&after_id=' + (this.lastId || 0); var r = await fetch(url).then(function (x) { return x.json(); }); this.removeDeletedIds(r.deleted_ids || []); if (this.mergeMessages(r.items || [])) { this.$nextTick(function () { this.paintAvatars(); this.scrollLog(); }.bind(this)); } } catch (e) { /* quiet */ } this._polling = false; }, attachmentsOf(m) { var meta = (m && m.metadata) || {}; return meta.attachments || []; }, isImage(att) { var mime = (att && att.mime) || ''; var name = ((att && att.name) || '').toLowerCase(); return mime.indexOf('image/') === 0 || /\.(png|jpe?g|gif|webp)$/.test(name); }, insertEmoji(em) { this.draft = (this.draft || '') + em; this.emojiOpen = false; }, insertMention(key) { var d = this.draft || ''; var at = d.lastIndexOf('@'); if (at >= 0 && !/\s/.test(d.slice(at + 1))) { // replace partial @query this.draft = d.slice(0, at) + '@' + key + ' '; } else { this.draft = d + (d && !/\s$/.test(d) ? ' ' : '') + '@' + key + ' '; } this.mentionOpen = false; this.mentionQuery = ''; this.mentionIndex = 0; this.$nextTick(function () { var el = this.$refs && this.$refs.wrInput; if (el) { el.focus(); el.setSelectionRange(this.draft.length, this.draft.length); } }.bind(this)); }, mentionSuggestions() { if (!this.mentionOpen) return []; var q = (this.mentionQuery || '').toLowerCase(); return (this.souls || []).filter(function (s) { if (!s || !s.agent_key) return false; if (!q) return true; var key = String(s.agent_key).toLowerCase(); var name = String(s.display_name || '').toLowerCase(); return key.indexOf(q) === 0 || key.indexOf(q) >= 0 || name.indexOf(q) >= 0; }).slice(0, 8); }, onDraftInput() { if ((this.draft || '').trim()) this.pauseA2A(90000); var d = this.draft || ''; var m = /(^|\s)@([a-zA-Z0-9_-]*)$/.exec(d); if (m) { this.mentionOpen = true; this.mentionQuery = m[2] || ''; this.mentionIndex = 0; } else { this.mentionOpen = false; this.mentionQuery = ''; } }, pickMention(s) { if (!s) return; this.insertMention(s.agent_key); }, /** Roster: in #war-room → @tag; anders open DM */ selectAgent(agentKey) { if (this.room && this.room.kind === 'warroom') { this.insertMention(agentKey); return; } this.openDm(agentKey); }, async onPickFiles(ev) { var files = Array.prototype.slice.call((ev.target && ev.target.files) || []); if (ev.target) ev.target.value = ''; for (var i = 0; i < files.length; i++) { await this.uploadFile(files[i]); } }, async uploadFile(file) { if (!file) return; this.status = 'Uploaden…'; try { var fd = new FormData(); fd.append('file', file); var resp = await fetch('/api/agents/warroom/upload', { method: 'POST', body: fd, credentials: 'same-origin' }); var data = await resp.json().catch(function () { return {}; }); if (!resp.ok) throw new Error(data.detail || data.message || 'Upload mislukt'); this.pendingFiles = (this.pendingFiles || []).concat([{ url: data.url, name: data.name || file.name, mime: data.mime || file.type, size: data.size || file.size || 0, }]); this.status = ''; } catch (e) { this.status = e.message || 'Upload mislukt'; if (window.Cockpit) Cockpit.toast(this.status, 'error'); } }, removePending(idx) { this.pendingFiles = (this.pendingFiles || []).filter(function (_, i) { return i !== idx; }); }, focusComposer() { try { var el = this.$refs && this.$refs.wrInput; if (el) { el.removeAttribute('disabled'); el.readOnly = false; el.focus(); } } catch (e) {} }, canSend() { var hasText = !!(this.draft || '').trim(); var hasFiles = !!(this.pendingFiles || []).length; return !!(hasText || hasFiles); }, async ensureRoom() { if (this.room && this.room.id) return true; try { await this.loadRooms(); var wr = this.warroomRoom(); if (wr) { await this.openRoom(wr.id); } else { // fallback: known warroom id 1 await this.openRoom(1); } } catch (e) {} return !!(this.room && this.room.id); }, onEnter(e) { if (e && e.shiftKey) return; // Shift+Enter = nieuwe regel if (this.mentionOpen) { var sug = this.mentionSuggestions(); if (sug && sug.length) { if (e) e.preventDefault(); this.pickMention(sug[this.mentionIndex] || sug[0]); return; } } if (e) e.preventDefault(); this.send(); }, async send() { var text = (this.draft || '').trim(); var files = (this.pendingFiles || []).slice(); if (!text && !files.length) return; // Never get stuck behind a stale busy flag if (this._sendLock) return; this._sendLock = true; this.busy = true; this.mentionOpen = false; this.emojiOpen = false; var okRoom = await this.ensureRoom(); if (!okRoom) { this.busy = false; this._sendLock = false; this.status = 'Room niet geladen — klik ↻'; if (window.Cockpit) Cockpit.toast(this.status, 'error'); return; } // Instant UI — no waiting for network/LLM var tempId = 'local-' + Date.now(); var replySnapshot = this.replyTo ? { id: this.replyTo.id, agent_key: this.replyTo.agent_key, username: this.replyTo.username, sender_type: this.replyTo.sender_type, excerpt: this.replyTo.excerpt, label: this.replyTo.label, } : null; var replyToId = replySnapshot ? replySnapshot.id : null; var optimisticMeta = {}; if (files.length) optimisticMeta.attachments = files; if (replySnapshot) optimisticMeta.reply_to = replySnapshot; var optimistic = { id: tempId, room_id: this.room.id, sender_type: 'user', content: text || (files.length ? '(bijlage)' : ''), username: (this.me && this.me.username) || 'Jij', sender_avatar_url: (this.me && this.me.avatar_url) || null, metadata: optimisticMeta, created_at: new Date().toISOString(), }; this.draft = ''; this.pendingFiles = []; this.replyTo = null; this.replyHighlightId = replyToId; this.pauseA2A(90000); this.typing = null; this.upsertMessage(optimistic); this.status = ''; this.stickToBottom = true; this.$nextTick(function () { this.scrollLog(true); this.focusComposer(); }.bind(this)); try { var resp = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages/stream', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', Accept: 'text/event-stream' }, body: JSON.stringify({ content: text, attachments: files, reply_to_id: replyToId }), }); if (!resp.ok) { var err = await resp.json().catch(function () { return {}; }); throw new Error(err.detail || ('HTTP ' + resp.status)); } await this.consumeStream(resp); // Drop temp bubble if server user msg arrived with real id this.messages = (this.messages || []).filter(function (m) { return m.id !== tempId; }); // Herlaad recente geschiedenis (merge) zodat reply-parent niet "kwijt" raakt in de UI await this.refreshMessages({ silent: true }); if (replyToId) { var self = this; this.$nextTick(function () { self.scrollToMessage(replyToId); setTimeout(function () { self.replyHighlightId = null; }, 4000); }); } if (this.autoDebate) this.scheduleContinue(120000); } catch (e) { // Keep optimistic message; restore draft only on hard fail this.status = e.message || 'Verzenden mislukt'; if (window.Cockpit) Cockpit.toast(this.status, 'error'); } this.typing = null; this.busy = false; this._sendLock = false; this.$nextTick(function () { this.paintAvatars(); this.scrollLog(true); this.focusComposer(); }.bind(this)); }, async consumeStream(resp) { var reader = resp.body.getReader(); var decoder = new TextDecoder(); var buf = ''; while (true) { var chunk = await reader.read(); if (chunk.done) break; buf += decoder.decode(chunk.value, { stream: true }); var parts = buf.split('\n\n'); buf = parts.pop() || ''; for (var i = 0; i < parts.length; i++) { this.handleSseBlock(parts[i]); } } if (buf.trim()) this.handleSseBlock(buf); }, handleSseBlock(block) { var lines = (block || '').split('\n'); var dataLines = []; for (var i = 0; i < lines.length; i++) { if (lines[i].indexOf('data:') === 0) dataLines.push(lines[i].slice(5).trim()); } if (!dataLines.length) return; var raw = dataLines.join('\n'); var ev; try { ev = JSON.parse(raw); } catch (e) { return; } var type = ev.event || ''; if (type === 'user' && ev.message) { this.messages = (this.messages || []).filter(function (m) { return String(m.id).indexOf('local-') !== 0; }); this.upsertMessage(ev.message); this.status = 'Agent typt…'; this.$nextTick(function () { this.scrollLog(); }.bind(this)); } else if (type === 'continue_start') { this.status = 'Agents praten verder over: ' + ((ev.topic || '').slice(0, 80)); } else if (type === 'typing_start') { this.typing = { agent_key: ev.agent_key, display_name: ev.display_name || ev.agent_key, text: '', }; this.status = (this.typing.display_name || 'Agent') + ' typt…'; // alleen meescrollen als je al onderaan zit if (this.stickToBottom) this.$nextTick(function () { this.scrollLog(); }.bind(this)); else this.showJumpLatest = true; } else if (type === 'typing') { if (!this.typing || this.typing.agent_key !== ev.agent_key) { this.typing = { agent_key: ev.agent_key, display_name: (this.soulFor(ev.agent_key) || {}).display_name || ev.agent_key, text: '', }; } this.typing.text = (this.typing.text || '') + (ev.delta || ''); // force alpine refresh this.typing = Object.assign({}, this.typing); // geen jump tijdens teruglezen; max 1x / 600ms als je onderaan zit if (this.stickToBottom) { var now = Date.now(); if (now - (this._typingScrollAt || 0) > 600) { this._typingScrollAt = now; this.$nextTick(function () { this.scrollLog(); }.bind(this)); } } else { this.showJumpLatest = true; } } else if (type === 'agent' && ev.message) { this.typing = null; this.upsertMessage(ev.message); if (this.voiceRoomOpen && this.speakReplies && ev.message.content) this.speakText(ev.message.content, ev.message.agent_key); this.$nextTick(function () { this.paintAvatars(); this.scrollLog(); }.bind(this)); } else if (type === 'system' && ev.message) { this.typing = null; this.upsertMessage(ev.message); } else if (type === 'error') { this.typing = null; this.status = ev.detail || 'Streamfout'; if (window.Cockpit) Cockpit.toast(this.status, 'error'); } else if (type === 'done') { this.typing = null; if (ev.loop_break) { this.pauseA2A(180000); this.status = 'A2A pauze — onderwerp herhaalde zich'; } } }, onKey(e) { if (!this.mentionOpen) return; var sug = this.mentionSuggestions(); if (!sug.length) return; if (e.key === 'ArrowDown') { e.preventDefault(); this.mentionIndex = (this.mentionIndex + 1) % sug.length; return; } if (e.key === 'ArrowUp') { e.preventDefault(); this.mentionIndex = (this.mentionIndex - 1 + sug.length) % sug.length; return; } if (e.key === 'Tab') { e.preventDefault(); this.pickMention(sug[this.mentionIndex] || sug[0]); return; } if (e.key === 'Escape') { this.mentionOpen = false; } }, scheduleContinue(delayMs) { if (this._continueTimer) clearTimeout(this._continueTimer); if (!this.autoDebate) return; var self = this; // default: rustig tempo (~50s), niet elke paar seconden var wait = (typeof delayMs === 'number' && delayMs >= 0) ? delayMs : 50000; this._continueTimer = setTimeout(function () { self.runContinue(1); }, wait); }, toggleA2A() { this.autoDebate = !this.autoDebate; try { localStorage.setItem('flk-warroom-a2a', this.autoDebate ? '1' : '0'); } catch (e) {} if (this._continueTimer) clearTimeout(this._continueTimer); if (this.autoDebate) { this.status = 'A2A aan — agents mogen onderling verder praten'; this.scheduleContinue(8000); if (window.Cockpit) Cockpit.toast('A2A aan', 'ok'); } else { this.status = 'A2A uit — alleen reacties op jouw berichten'; this.a2aPausedUntil = 0; if (window.Cockpit) Cockpit.toast('A2A uit', 'ok'); } }, pauseA2A(ms) { this.a2aPausedUntil = Date.now() + (ms || 45000); if (this._continueTimer) clearTimeout(this._continueTimer); }, setReply(m) { if (!m || !m.id || String(m.id).indexOf('local-') === 0) return; this.replyTo = { id: m.id, agent_key: m.agent_key || null, username: m.username || null, sender_type: m.sender_type, excerpt: ((m.content || '').trim().slice(0, 160)) + (((m.content || '').length > 160) ? '…' : ''), label: this.labelForMessage(m), }; this.replyHighlightId = m.id; this.pauseA2A(90000); this.$nextTick(function () { this.scrollToMessage(m.id); this.focusComposer(); }.bind(this)); }, scrollToMessage(id) { if (id == null) return; var root = (this.$refs && this.$refs.wrLog) || document; var el = root.querySelector && root.querySelector('[data-msg-id="' + id + '"]'); if (el && el.scrollIntoView) { try { el.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (e) { el.scrollIntoView(true); } } }, async refreshMessages(opts) { opts = opts || {}; if (!this.room || !this.room.id) return; try { var r = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages?limit=800', { credentials: 'same-origin', }).then(function (x) { return x.json(); }); var items = this.normalizeList(r.items || []); if (items.length) { this.messages = items; this.lastId = this.maxId(items); this.historyTotal = r.total || items.length; this.hasMoreHistory = !!r.has_more; } if (!opts.silent) { this.$nextTick(function () { this.paintAvatars(); this.scrollLog(); }.bind(this)); } else { this.$nextTick(function () { this.paintAvatars(); }.bind(this)); } } catch (e) { /* quiet */ } }, clearReply() { this.replyTo = null; this.replyHighlightId = null; }, replyPreview(m) { var meta = (m && m.metadata) || {}; return meta.reply_to || null; }, async runContinue(turns) { if (!this.autoDebate || !this.room || this.room.kind !== 'warroom') return; if (this.busy || this._continueBusy || this._sendLock) { this.scheduleContinue(20000); return; } if (Date.now() < (this.a2aPausedUntil || 0)) { this.scheduleContinue(Math.max(10000, this.a2aPausedUntil - Date.now())); return; } // niet doorkletsen terwijl jij typt if ((this.draft || '').trim().length > 0 || this.replyTo) { this.scheduleContinue(25000); return; } this._continueBusy = true; this.status = 'A2A — agents reageren…'; try { var resp = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/continue?turns=' + (turns || 1), { method: 'POST', credentials: 'same-origin', headers: { Accept: 'text/event-stream', 'Content-Type': 'application/json' }, body: '{}', }); if (!resp.ok) throw new Error('Continue mislukt'); this.busy = true; await this.consumeStream(resp); this.busy = false; this.status = 'A2A live'; // keep conversation alive this.scheduleContinue(90000); } catch (e) { this.busy = false; this.status = 'A2A hervatten…'; this.scheduleContinue(75000); } this._continueBusy = false; }, async loadCeoInbox() { try { var r = await fetch('/api/agents/warroom/ceo-inbox?limit=40', { credentials: 'same-origin' }) .then(function (x) { return x.json(); }); this.ceoInbox = r.items || []; this.ceoUnread = r.unread || 0; } catch (e) { this.ceoInbox = this.ceoInbox || []; } }, openCeoInbox() { this.ceoInboxOpen = true; this.loadCeoInbox(); }, closeCeoInbox() { this.ceoInboxOpen = false; }, async markCeoRead(id) { try { await fetch('/api/agents/warroom/ceo-inbox/read', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(id ? { ids: [id] } : { all: true }), }); await this.loadCeoInbox(); } catch (e) {} }, async markAllCeoRead() { await this.markCeoRead(null); if (window.Cockpit) Cockpit.toast('CEO-inbox gelezen', 'ok'); }, isCeoDirect(m) { if (!m) return false; if (m.ceo_inbox_id || (m.metadata && m.metadata.ceo_direct)) return true; var c = (m.content || '').toLowerCase(); return c.indexOf('@aissa') >= 0 || c.indexOf('@ceo') >= 0 || c.indexOf('@ervoorz') >= 0; }, formatMsgTime(m) { var raw = (m && (m.created_at || m.createdAt || m.ts)) || ''; if (!raw) return ''; var d = new Date(raw); if (isNaN(d.getTime())) return ''; return d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' }); }, formatMsgDate(m) { var raw = (m && (m.created_at || m.createdAt || m.ts)) || ''; if (!raw) return ''; var d = new Date(raw); if (isNaN(d.getTime())) return ''; var today = new Date(); var yest = new Date(); yest.setDate(today.getDate() - 1); var same = function (a, b) { return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }; if (same(d, today)) return 'Vandaag'; if (same(d, yest)) return 'Gisteren'; return d.toLocaleDateString('nl-NL', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' }); }, /** Compact stamp on each bubble: 16 aug · 00:53 */ formatMsgStamp(m) { var raw = (m && (m.created_at || m.createdAt || m.ts)) || ''; if (!raw) return ''; var d = new Date(raw); if (isNaN(d.getTime())) return ''; var today = new Date(); var sameDay = d.getFullYear() === today.getFullYear() && d.getMonth() === today.getMonth() && d.getDate() === today.getDate(); var time = d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit' }); if (sameDay) return time; var date = d.toLocaleDateString('nl-NL', { day: 'numeric', month: 'short', year: d.getFullYear() !== today.getFullYear() ? 'numeric' : undefined }); return date + ' · ' + time; }, dayKey(m) { var raw = (m && (m.created_at || m.createdAt || m.ts)) || ''; if (!raw) return ''; var d = new Date(raw); if (isNaN(d.getTime())) return ''; return d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate(); }, showDaySep(idx) { var list = this.visibleMessages(); if (!list.length || idx < 0 || idx >= list.length) return false; if (idx === 0) return !!this.dayKey(list[idx]); return this.dayKey(list[idx]) !== this.dayKey(list[idx - 1]); }, visibleMessages() { if (this.screenCleared) return []; var q = (this.chatSearch || '').trim().toLowerCase(); var list = this.messages || []; if (!q) return list; return list.filter(function (m) { var hay = [ m.content || '', m.agent_key || '', m.username || '', m.display_name || '', m.sender_type || '', ].join(' ').toLowerCase(); return hay.indexOf(q) >= 0; }); }, toggleSearch() { this.searchOpen = !this.searchOpen; this.toolsOpen = false; if (this.searchOpen) { var self = this; this.$nextTick(function () { var el = self.$refs && self.$refs.wrSearch; if (el) el.focus(); }); } else { this.chatSearch = ''; } }, clearScreen() { this.screenCleared = true; this.status = 'Scherm geleegd (berichten blijven bewaard)'; if (window.Cockpit) Cockpit.toast('Chat-scherm geleegd', 'ok'); }, restoreScreen() { this.screenCleared = false; this.status = ''; this.$nextTick(function () { this.scrollLog(); }.bind(this)); }, async clearChatHistory() { if (!this.room) return; if (!window.confirm('Alle berichten in dit kanaal permanent van het scherm wissen (soft-delete)?')) return; try { var r = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages', { method: 'DELETE', credentials: 'same-origin', }).then(function (x) { return x.json().then(function (d) { return { ok: x.ok, d: d }; }); }); if (!r.ok) throw new Error((r.d && (r.d.detail || r.d.message)) || 'Wissen mislukt'); this.messages = []; this.screenCleared = false; this.lastId = 0; this.status = 'Geschiedenis gewist (' + ((r.d && r.d.cleared) || 0) + ')'; if (window.Cockpit) Cockpit.toast('Chatgeschichte gewist', 'ok'); } catch (e) { if (window.Cockpit) Cockpit.toast(e.message || 'Wissen mislukt', 'error'); } }, downloadChat(fmt) { fmt = fmt || 'txt'; var list = this.messages || []; if (!list.length) { if (window.Cockpit) Cockpit.toast('Geen berichten om te downloaden', 'info'); return; } var title = (this.room && (this.room.title || this.room.kind)) || 'war-room'; var stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-'); var filename = 'foodlinkk-' + String(title).replace(/[^\w\-]+/g, '_') + '-' + stamp; var body = ''; var mime = 'text/plain;charset=utf-8'; if (fmt === 'json') { body = JSON.stringify({ room: this.room, exported_at: new Date().toISOString(), messages: list }, null, 2); filename += '.json'; mime = 'application/json;charset=utf-8'; } else if (fmt === 'md') { body = '# ' + title + '\n\n_Geëxporteerd: ' + new Date().toLocaleString('nl-NL') + '_\n\n'; list.forEach(function (m) { var who = this.labelForMessage(m) + (m.agent_key ? (' (@' + m.agent_key + ')') : ''); var when = this.formatMsgDate(m) + ' ' + this.formatMsgTime(m); body += '### ' + who + ' · ' + when.trim() + '\n\n' + (m.content || '') + '\n\n---\n\n'; }.bind(this)); filename += '.md'; mime = 'text/markdown;charset=utf-8'; } else { body = title + '\nGeëxporteerd: ' + new Date().toLocaleString('nl-NL') + '\n' + ('='.repeat(48)) + '\n\n'; list.forEach(function (m) { var who = this.labelForMessage(m) + (m.agent_key ? (' (@' + m.agent_key + ')') : ''); var when = (this.formatMsgDate(m) + ' ' + this.formatMsgTime(m)).trim(); body += '[' + when + '] ' + who + ':\n' + (m.content || '') + '\n\n'; }.bind(this)); filename += '.txt'; } var blob = new Blob([body], { type: mime }); var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = filename; document.body.appendChild(a); a.click(); setTimeout(function () { URL.revokeObjectURL(a.href); a.remove(); }, 500); this.toolsOpen = false; if (window.Cockpit) Cockpit.toast('Download gestart (' + fmt + ')', 'ok'); }, async deleteMessage(m) { if (!this.room || !m || !m.id) return; if (!window.confirm('Bericht verwijderen?')) return; try { var r = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/messages/' + m.id, { method: 'DELETE', credentials: 'same-origin', }).then(function (x) { return x.json().then(function (d) { return { ok: x.ok, d: d }; }); }); if (!r.ok) throw new Error((r.d && (r.d.detail || r.d.message)) || 'Verwijderen mislukt'); this.messages = (this.messages || []).filter(function (x) { return x.id !== m.id; }); if (window.Cockpit) Cockpit.toast('Bericht verwijderd', 'ok'); } catch (e) { if (window.Cockpit) Cockpit.toast(e.message || 'Verwijderen mislukt', 'error'); } }, removeDeletedIds(ids) { if (!ids || !ids.length) return; var set = {}; ids.forEach(function (id) { set[String(id)] = true; }); this.messages = (this.messages || []).filter(function (m) { return !set[String(m.id)]; }); }, openVoiceRoom() { if (!this.room) { if (window.Cockpit) Cockpit.toast('Geen room geladen', 'error'); return; } if (!(this.voiceRoomAgents || []).length) { this.voiceRoomAgents = ['herman', 'bizdev', 'finance', 'retail', 'marketing']; } // voorlezen blijft uit tot gebruiker 🔊 aanzet this.voiceRoomOpen = true; this.callOpen = false; this.status = 'Voice Room open — houd 🎤 in om te praten'; this._announceVoiceRoom('join'); if (this.micNeedsHttps()) { // still open UI; mic will prompt on first PTT this.status = 'Voice Room open — voor mic: gebruik HTTPS (:8643)'; } }, closeVoiceRoom() { if (this.voiceRecording) { try { this.stopVoiceTalk(); } catch (e) {} } if (window.speechSynthesis) try { window.speechSynthesis.cancel(); } catch (e2) {} this.voiceRoomOpen = false; this.voiceSpeakingKey = ''; this._announceVoiceRoom('leave'); if (this.status && String(this.status).indexOf('Voice') === 0) this.status = ''; }, async _announceVoiceRoom(action) { if (!this.room) return; try { await fetch('/api/agents/warroom/rooms/' + this.room.id + '/voice-room', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: action || 'join', agents: this.voiceRoomAgents || [] }), }); await this.pollNew(); } catch (e) { /* quiet */ } }, toggleVoiceAgent(key) { var list = (this.voiceRoomAgents || []).slice(); var i = list.indexOf(key); if (i >= 0) { if (list.length <= 1) return; // keep at least one list.splice(i, 1); } else { list.push(key); } this.voiceRoomAgents = list; }, isVoiceAgent(key) { return (this.voiceRoomAgents || []).indexOf(key) >= 0; }, voiceAgentSouls() { var souls = (this.souls || []).slice(); if (!souls.length) { return (this.voiceRoomAgents || ['herman']).map(function (k) { return { agent_key: k, display_name: k }; }); } var prefer = ['herman','retail','bizdev','halal','finance','marketing','legal']; souls.sort(function (a, b) { var ia = prefer.indexOf(a.agent_key); var ib = prefer.indexOf(b.agent_key); if (ia < 0) ia = 99; if (ib < 0) ib = 99; return ia - ib || String(a.display_name||'').localeCompare(String(b.display_name||'')); }); return souls.slice(0, 12); }, secureWarroomUrl() { try { var u = new URL(window.location.href); if (u.protocol === 'https:') { if (u.pathname.indexOf('/agents') === 0 && u.search.indexOf('tab=') < 0) { u.searchParams.set('tab', 'warroom'); } return u.toString(); } u.protocol = 'https:'; if (u.port === '8610' || u.port === '8600') u.port = '8643'; else if (!u.port || u.port === '80') u.port = '8643'; if (u.pathname.indexOf('/warroom/popup') >= 0) { /* keep popup path */ } else { u.pathname = '/agents'; u.searchParams.set('tab', 'warroom'); } return u.toString(); } catch (e) { return 'https://10.4.7.18:8643/agents?tab=warroom'; } }, micNeedsHttps() { return !(window.isSecureContext && navigator.mediaDevices && navigator.mediaDevices.getUserMedia); }, async ensureMic() { if (!this.micNeedsHttps()) return true; this.status = 'Microfoon vereist HTTPS — open veilige War Room'; if (window.Cockpit) { Cockpit.toast('Mic werkt niet op HTTP. Open HTTPS War Room.', 'error'); } var url = this.secureWarroomUrl(); var go = window.confirm('Spraak met agents werkt via HTTPS.\n\nNu openen?\n' + url); if (go) window.open(url, '_blank'); return false; }, async startVoiceTalk(ev) { if (ev) { try { ev.preventDefault(); } catch (e0) {} } if (this.voiceRecording || this.voiceBusy || this.busy) return; if (!this.voiceRoomOpen) this.openVoiceRoom(); if (!(await this.ensureMic())) return; try { this._voiceChunks = []; this._voiceStream = await navigator.mediaDevices.getUserMedia({ audio: true }); var rec = new MediaRecorder(this._voiceStream); this._voiceRec = rec; var self = this; rec.ondataavailable = function (e) { if (e.data && e.data.size) self._voiceChunks.push(e.data); }; rec.start(200); this.voiceRecording = true; this.status = '🎤 Luisteren… laat los om te sturen'; } catch (e) { this.status = 'Microfoon geweigerd of niet beschikbaar'; if (window.Cockpit) Cockpit.toast(this.status, 'error'); this._stopVoiceStream(); } }, async stopVoiceTalk(ev) { if (ev) { try { ev.preventDefault(); } catch (e0) {} } if (!this.voiceRecording || !this._voiceRec) return; var self = this; this.voiceRecording = false; this.voiceBusy = true; this.status = 'Spraak omzetten…'; await new Promise(function (resolve) { self._voiceRec.onstop = function () { resolve(); }; try { self._voiceRec.stop(); } catch (e1) { resolve(); } }); this._stopVoiceStream(); try { var blob = new Blob(this._voiceChunks || [], { type: 'audio/webm' }); this._voiceChunks = []; if (!blob.size) throw new Error('Geen audio opgenomen'); var fd = new FormData(); fd.append('file', blob, 'warroom-voice.webm'); var r = await fetch('/api/voice/transcribe', { method: 'POST', body: fd, credentials: 'same-origin' }); var j = await r.json().catch(function () { return {}; }); if (!r.ok) throw new Error(j.detail || j.error || 'Transcriptie mislukt'); var text = (j.text || '').trim(); if (!text) throw new Error('Geen spraak herkend — probeer opnieuw'); // Stuur naar War Room (agents antwoorden zoals bij typen) this.voiceLastHeard = text; var tags = (this.voiceRoomAgents || ['herman']).map(function (k) { return '@' + k; }); // Mention selected voice-room agents so they all can answer var missing = tags.filter(function (t) { return text.toLowerCase().indexOf(t) < 0; }); if (missing.length) text = missing.join(' ') + ' ' + text; this.draft = text; this.status = 'Versturen naar Voice Room…'; if (this.voiceRoomOpen) this.voiceSpeakingKey = ''; await this.send(); this.status = this.voiceRoomOpen ? 'Voice Room — wachten op agents…' : ''; } catch (e) { this.status = e.message || 'Voice mislukt'; if (window.Cockpit) Cockpit.toast(this.status, 'error'); } this.voiceBusy = false; }, _stopVoiceStream() { try { if (this._voiceRec && this._voiceRec.state !== 'inactive') this._voiceRec.stop(); } catch (e) {} this._voiceRec = null; if (this._voiceStream) { try { this._voiceStream.getTracks().forEach(function (t) { t.stop(); }); } catch (e2) {} } this._voiceStream = null; }, speakText(text, agentKey) { if (!this.speakReplies || !text || !window.speechSynthesis) return; try { window.speechSynthesis.cancel(); var self = this; this.voiceSpeakingKey = agentKey || 'agent'; var u = new SpeechSynthesisUtterance(String(text).slice(0, 900)); u.lang = 'nl-NL'; u.rate = 1.02; var voices = window.speechSynthesis.getVoices() || []; var nl = voices.find(function (v) { return /nl/i.test(v.lang) && /google|microsoft|maarten|xander|neder/i.test(v.name); }) || voices.find(function (v) { return /nl/i.test(v.lang); }); if (nl) u.voice = nl; u.onend = function () { if (self.voiceSpeakingKey === (agentKey || 'agent')) self.voiceSpeakingKey = ''; if (self.voiceRoomOpen) self.status = 'Voice Room — jouw beurt (houd 🎤 in)'; }; window.speechSynthesis.speak(u); if (this.voiceRoomOpen) { this.status = (agentKey || 'Agent') + ' spreekt…'; } } catch (e) { /* ignore */ } }, callHref() { var id = (this.room && this.room.id) ? this.room.id : 1; var slug = 'FoodlinkkWR' + id; if (this.room && this.room.kind === 'dm' && this.room.agent_key) { slug = 'FoodlinkkDM' + this.room.agent_key + id; } return 'https://meet.ffmuc.net/' + slug; }, onCallClick() { // Runs in the same user-gesture as the navigation — always show panel. var url = this.callHref(); this.callUrl = url; this.callSlug = url.split('/').pop(); this.callOpen = true; this.status = 'Call open — nieuw tabblad of klik Deelnemen'; this.announceCall(url); }, async announceCall(url) { if (!this.room || this.callBusy) return; this.callBusy = true; try { var r = await fetch('/api/agents/warroom/rooms/' + this.room.id + '/call', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: '{}', }).then(function (x) { return x.json().then(function (d) { return { ok: x.ok, d: d }; }); }); if (r.ok && r.d && r.d.url) { this.callUrl = r.d.url; this.callSlug = r.d.slug || this.callSlug; } await this.pollNew(); } catch (e) { /* panel + tab already useful without announce */ } this.callBusy = false; }, async startCall() { // Fallback if something still calls startCall() this.onCallClick(); var url = this.callUrl || this.callHref(); window.open(url, '_blank'); }, closeCall() { this.callOpen = false; if (this.status && String(this.status).indexOf('Call') === 0) this.status = ''; }, openCallExternal() { var url = this.callUrl || this.callHref(); window.open(url, '_blank'); }, async copyCallLink() { var link = (this.callUrl || this.callHref()).split('#')[0]; try { await navigator.clipboard.writeText(link); if (window.Cockpit) Cockpit.toast('Link gekopieerd', 'ok'); } catch (e) { window.prompt('Kopieer deze call-link:', link); } }, popOut() { var q = this.room ? '?room=' + this.room.id : ''; openPopup(q); }, soulFor(key) { return (this.souls || []).find(function (s) { return s.agent_key === key; }) || null; }, labelForMessage(m) { if (m.sender_type === 'user') return m.username || this.me.username || 'Jij'; if (m.sender_type === 'agent') { var s = this.soulFor(m.agent_key); return (s && s.display_name) || m.agent_key || 'Agent'; } return 'Systeem'; }, }; } return { openPopup: openPopup, controller: warRoomController }; })(); function __flkRegisterWarRoomAlpine() { if (!window.Alpine || typeof Alpine.data !== 'function') return; if (Alpine.__flkWarRoomRegistered) return; Alpine.data('warRoomHub', function () { return WarRoomHub.controller({ popupMode: false }); }); Alpine.data('warRoomPopup', function () { return WarRoomHub.controller({ popupMode: true }); }); Alpine.__flkWarRoomRegistered = true; } document.addEventListener('alpine:init', __flkRegisterWarRoomAlpine); __flkRegisterWarRoomAlpine();