// Helvia Inbox PWA const { useState, useEffect, useCallback, useRef, useMemo, createContext, useContext } = React; const CONFIG = { API_URL: (() => { const p = new URLSearchParams(location.search); if (p.get('api')) return p.get('api').replace(/\/$/, ''); if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') { return 'http://127.0.0.1:8787'; } return 'https://api.vocal.ch'; })(), }; const STORAGE_TOKEN = 'helvia_live_token'; const STORAGE_USER = 'helvia_live_user'; // ==================== Swipe-back gesture ==================== // Détecte un swipe horizontal de gauche -> droite démarrant près du bord gauche // de l'écran et appelle onBack() à la fin du geste. Pour vues type "détail". function useSwipeBack(onBack, options = {}) { const { edgeWidth = 28, // zone de déclenchement depuis le bord gauche (px) minDistance = 70, // distance minimale à parcourir (px) maxVertical = 60, // tolérance verticale (px) pendant le swipe maxDuration = 600, // durée max du geste (ms) } = options; useEffect(() => { if (!onBack) return; let startX = 0, startY = 0, startTime = 0, tracking = false; const onStart = (e) => { const t = e.touches && e.touches[0]; if (!t) return; if (t.clientX > edgeWidth) return; startX = t.clientX; startY = t.clientY; startTime = Date.now(); tracking = true; }; const onMove = (e) => { if (!tracking) return; const t = e.touches && e.touches[0]; if (!t) return; if (Math.abs(t.clientY - startY) > maxVertical) tracking = false; }; const onEnd = (e) => { if (!tracking) return; tracking = false; const t = e.changedTouches && e.changedTouches[0]; if (!t) return; const dx = t.clientX - startX; const dy = Math.abs(t.clientY - startY); const dt = Date.now() - startTime; if (dx >= minDistance && dy <= maxVertical && dt <= maxDuration) { onBack(); } }; document.addEventListener('touchstart', onStart, { passive: true }); document.addEventListener('touchmove', onMove, { passive: true }); document.addEventListener('touchend', onEnd, { passive: true }); document.addEventListener('touchcancel', onEnd, { passive: true }); return () => { document.removeEventListener('touchstart', onStart); document.removeEventListener('touchmove', onMove); document.removeEventListener('touchend', onEnd); document.removeEventListener('touchcancel', onEnd); }; }, [onBack, edgeWidth, minDistance, maxVertical, maxDuration]); } // ==================== API ==================== const api = { token: null, async req(path, opts = {}) { const headers = { 'Content-Type': 'application/json', ...opts.headers }; if (this.token) headers.Authorization = `Bearer ${this.token}`; const resp = await fetch(`${CONFIG.API_URL}${path}`, { ...opts, headers }); if (resp.status === 401 && this.token) { // Session perdue — purge. localStorage.removeItem(STORAGE_TOKEN); localStorage.removeItem(STORAGE_USER); api.token = null; window.dispatchEvent(new CustomEvent('helvia-live-logout')); } try { return await resp.json(); } catch { return { error: 'invalid response' }; } }, get(p) { return api.req(p); }, post(p, b) { return api.req(p, { method: 'POST', body: JSON.stringify(b || {}) }); }, }; // ==================== VOICE (Twilio Voice SDK) ==================== // Le device Twilio se connecte avec un token recupere via /voice/token (API Helvia). // Si l'endpoint n'existe pas encore, on bascule en mode demo (UI sans WebRTC). const VoiceCtx = createContext(null); const useVoice = () => useContext(VoiceCtx) || {}; const VOICE_STATUS_LABEL = { offline: 'Hors ligne', connecting: 'Connexion…', ready: 'Prêt', ringing: 'Appel entrant', 'in-call': 'En appel', error: 'Erreur', demo: 'Mode démo', }; function VoiceProvider({ user, notify, children }) { const [status, setStatus] = useState('offline'); const [incoming, setIncoming] = useState(null); const [active, setActive] = useState(null); const [muted, setMuted] = useState(false); const [duration, setDuration] = useState(0); const [identity, setIdentity] = useState(null); const [demoMode, setDemoMode] = useState(false); const deviceRef = useRef(null); const timerRef = useRef(null); const startRef = useRef(null); const cleanup = useCallback(() => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } setActive(null); setIncoming(null); setMuted(false); setDuration(0); startRef.current = null; setStatus(deviceRef.current ? 'ready' : (demoMode ? 'demo' : 'offline')); }, [demoMode]); const startTimer = useCallback(() => { startRef.current = Date.now(); setDuration(0); timerRef.current = setInterval(() => { setDuration(Math.floor((Date.now() - startRef.current) / 1000)); }, 1000); }, []); const init = useCallback(async () => { if (!user) return; if (!window.Twilio) { setStatus('error'); return; } setStatus('connecting'); try { const data = await api.get('/voice/token'); if (!data || data.error || !data.token) { // Endpoint pas encore branché côté API → on bascule en mode démo // (l'UI reste fonctionnelle, les boutons d'appel afficheront un toast). setDemoMode(true); setStatus('demo'); setIdentity(user.email || 'demo'); return; } setIdentity(data.identity || user.email); if (deviceRef.current) { deviceRef.current.destroy(); deviceRef.current = null; } const device = new window.Twilio.Device(data.token, { logLevel: 1, codecPreferences: ['opus', 'pcmu'], closeProtection: 'Un appel est en cours. Voulez-vous quitter ?', edge: 'dublin', }); device.on('registered', () => setStatus('ready')); device.on('unregistered', () => setStatus('offline')); device.on('error', (err) => { setStatus('error'); const msg = err?.message || String(err); notify && notify(`Erreur voix : ${msg}`, 'error'); }); device.on('tokenWillExpire', async () => { try { const r = await api.get('/voice/token'); if (r?.token) device.updateToken(r.token); } catch (_) {} }); device.on('incoming', (call) => { const from = call.parameters?.From || 'Inconnu'; const callSid = call.parameters?.CallSid || ''; setStatus('ringing'); setIncoming({ call, from, callSid, time: new Date() }); call.on('cancel', () => cleanup()); call.on('disconnect', () => cleanup()); call.on('reject', () => cleanup()); call.on('error', () => cleanup()); }); await device.register(); deviceRef.current = device; } catch (e) { setDemoMode(true); setStatus('demo'); } }, [user, notify, cleanup]); // Auto-init dès qu'un utilisateur est connecté. useEffect(() => { if (user) init(); return () => { if (deviceRef.current) { try { deviceRef.current.destroy(); } catch(_){} deviceRef.current = null; } if (timerRef.current) clearInterval(timerRef.current); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [user]); const accept = useCallback(() => { if (!incoming?.call) return; incoming.call.accept(); setActive(incoming); setIncoming(null); setStatus('in-call'); startTimer(); }, [incoming, startTimer]); const reject = useCallback(() => { if (incoming?.call) try { incoming.call.reject(); } catch(_){} cleanup(); }, [incoming, cleanup]); const hangup = useCallback(() => { if (active?.call) try { active.call.disconnect(); } catch(_){} cleanup(); }, [active, cleanup]); const toggleMute = useCallback(() => { if (!active?.call) return; const next = !muted; try { active.call.mute(next); setMuted(next); } catch(_){} }, [active, muted]); const sendDigit = useCallback((d) => { if (active?.call) try { active.call.sendDigits(String(d)); } catch(_){} }, [active]); const makeCall = useCallback(async (to) => { if (!to) return { error: 'Numéro requis' }; // Normalisation E.164 légère let dst = String(to).trim(); if (dst.startsWith('00')) dst = '+' + dst.slice(2); if (!dst.startsWith('+')) dst = '+' + dst.replace(/[^\d]/g, ''); if (demoMode || !deviceRef.current) { notify && notify('Voix non configurée — appel simulé', 'info'); return { error: 'voice_not_configured' }; } try { const call = await deviceRef.current.connect({ params: { To: dst } }); const wrapped = { call, from: dst, to: dst, time: new Date(), outgoing: true }; setActive(wrapped); setStatus('in-call'); startTimer(); call.on('disconnect', () => cleanup()); call.on('cancel', () => cleanup()); call.on('error', () => cleanup()); return { ok: true }; } catch (e) { return { error: e.message || 'Échec appel' }; } }, [demoMode, startTimer, cleanup, notify]); const value = useMemo(() => ({ status, incoming, active, muted, duration, identity, demoMode, init, accept, reject, hangup, toggleMute, sendDigit, makeCall, }), [status, incoming, active, muted, duration, identity, demoMode, init, accept, reject, hangup, toggleMute, sendDigit, makeCall]); return {children}; } function IncomingCallOverlay() { const { incoming, accept, reject } = useVoice(); if (!incoming) return null; return (
{initials(incoming.from || '?')}
Appel entrant
{incoming.from}
); } function ActiveCallBar() { const { active, duration, muted, hangup, toggleMute } = useVoice(); if (!active) return null; const mm = String(Math.floor(duration / 60)).padStart(2, '0'); const ss = String(duration % 60).padStart(2, '0'); return (
{active.outgoing ? '→ ' : '← '}{active.from || active.to}
{mm}:{ss}
); } // ==================== ICONS ==================== const Icons = { Helvia: ({ size = 22 }) => ( ), WA: ({ size = 22 }) => ( ), Back: () => , Search: () => , More: () => , Refresh: () => , Send: () => , Template: () => , Check: () => , DoubleCheck: () => , Logout: () => , Phone: () => , Bot: () => , Chat: () => , Archive: () => , Plus: () => , Edit: () => , Dialpad: () => , UserPlus: () => , Users: () => , Globe: () => , WA: () => , Star: ({ filled }) => , PhoneIn: () => , PhoneOut: () => , PhoneMissed: () => , Voicemail: () => , Settings: () => , ArchiveBox: ({ size = 36 }) => , Devices: () => , QrCode: () => , Trash: () => , }; // ==================== SKELETON LOADER ==================== // Placeholder animé pour les écrans en cours de chargement. Le shimmer // est défini en CSS (.sk, .sk-shimmer). Le composant Skeleton dessine // une ou plusieurs lignes type "conversation" / "appel" / "stat". function Skeleton({ variant = 'row', count = 6 }) { const items = Array.from({ length: count }); if (variant === 'row') { return (
{items.map((_, i) => (
))}
); } if (variant === 'call') { return (
{items.map((_, i) => (
))}
); } if (variant === 'detail') { return (
{Array.from({ length: 4 }).map((_, i) => (
))}
); } if (variant === 'devices') { return (
{items.slice(0, 3).map((_, i) => (
))}
); } return null; } // ==================== ARCHIVES (local) ==================== const STORAGE_ARCHIVED = 'helvia_live_archived'; const loadArchived = () => { try { return new Set(JSON.parse(localStorage.getItem(STORAGE_ARCHIVED) || '[]')); } catch { return new Set(); } }; const saveArchived = (set) => { localStorage.setItem(STORAGE_ARCHIVED, JSON.stringify([...set])); }; // ==================== UTILS ==================== function fmtTime(d) { if (!d) return ''; const dt = new Date(d.includes('T') ? d : d.replace(' ', 'T') + 'Z'); const now = new Date(); const sameDay = dt.toDateString() === now.toDateString(); if (sameDay) return dt.toLocaleTimeString('fr-CH', { hour: '2-digit', minute: '2-digit' }); const diffDays = Math.floor((now - dt) / (24 * 3600 * 1000)); if (diffDays < 7) return dt.toLocaleDateString('fr-CH', { weekday: 'short' }); return dt.toLocaleDateString('fr-CH', { day: '2-digit', month: '2-digit' }); } function fmtDay(d) { if (!d) return ''; const dt = new Date(d.includes('T') ? d : d.replace(' ', 'T') + 'Z'); const today = new Date(); const y = new Date(); y.setDate(y.getDate() - 1); if (dt.toDateString() === today.toDateString()) return "Aujourd'hui"; if (dt.toDateString() === y.toDateString()) return 'Hier'; return dt.toLocaleDateString('fr-CH', { weekday: 'long', day: 'numeric', month: 'long' }); } function initials(name) { if (!name) return '?'; const parts = name.trim().split(/\s+/); if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase(); return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase(); } function avatarVariant(s) { if (!s) return ''; let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return ['', 'v1', 'v2', 'v3', 'v4'][Math.abs(h) % 5]; } function fmtPhone(n) { if (!n) return ''; const s = String(n).replace(/[^\d+]/g, ''); // Suisse : +41 XX XXX XX XX if (s.startsWith('+41') && s.length === 12) { return `+41 ${s.slice(3, 5)} ${s.slice(5, 8)} ${s.slice(8, 10)} ${s.slice(10, 12)}`; } // France : +33 X XX XX XX XX if (s.startsWith('+33') && s.length === 12) { return `+33 ${s.slice(3, 4)} ${s.slice(4, 6)} ${s.slice(6, 8)} ${s.slice(8, 10)} ${s.slice(10, 12)}`; } // Générique international : +XX(X) puis groupes de 2-3 if (s.startsWith('+') && s.length > 7) { const cc = s.slice(0, 3); const rest = s.slice(3); const groups = []; let i = 0; if (rest.length % 2 === 1) { groups.push(rest.slice(0, 3)); i = 3; } for (; i < rest.length; i += 2) groups.push(rest.slice(i, i + 2)); return `${cc} ${groups.join(' ')}`.trim(); } return s; } function fmtDuration(sec) { if (!sec) return '—'; const m = Math.floor(sec / 60); const s = sec % 60; return m ? `${m}m${s ? String(s).padStart(2, '0') + 's' : ''}` : `${s}s`; } function parseTs(d) { if (!d) return 0; return new Date(d.includes('T') ? d : d.replace(' ', 'T') + 'Z').getTime() || 0; } const CHANNEL_META = { whatsapp: { label: 'WhatsApp', css: 'ch-wa' }, widget: { label: 'Widget web', css: 'ch-widget' }, messenger: { label: 'Messenger', css: 'ch-msg' }, }; const CHANNEL_FILTERS = [ { id: 'all', label: 'Tous', icon: 'Chat' }, { id: 'whatsapp', label: 'WhatsApp', icon: 'WA' }, { id: 'widget', label: 'Widget', icon: 'Globe' }, ]; function normalizeWaConv(c) { return { uid: `wa:${c.id}`, channel: 'whatsapp', id: c.id, contact_name: c.contact_name || c.contact_number, contact_number: c.contact_number, last_message_body: c.last_message_body, last_message_at: c.last_message_at, unread_count: c.unread_count || 0, bot_enabled: c.bot_enabled, line_phone: c.line_phone, _raw: c, }; } function normalizeWidgetConv(c, widget) { let preview = 'Visiteur web'; try { if (c.origin) preview = new URL(c.origin).hostname; } catch {} return { uid: `widget:${widget.id}:${c.id}`, channel: 'widget', id: c.id, widgetId: widget.id, widgetName: widget.name, contact_name: preview, contact_number: (c.visitor_id || 'visiteur').slice(0, 12), last_message_body: `${c.messages_count || 0} message${(c.messages_count || 0) > 1 ? 's' : ''}`, last_message_at: c.last_message_at, unread_count: 0, bot_enabled: 1, line_phone: widget.phone_number, _raw: c, }; } async function fetchUnifiedConversations(lineId) { const waQ = lineId ? `?line_id=${lineId}` : ''; const [waR, widgetsR] = await Promise.all([ api.get(`/my/whatsapp/conversations${waQ}`), api.get('/my/widgets'), ]); const wa = (waR?.conversations || []).map(normalizeWaConv); const widgets = widgetsR?.widgets || []; const widgetLists = await Promise.all( widgets.map(w => api.get(`/my/widgets/${w.id}/conversations`).then(r => ({ w, convs: r?.conversations || [] })).catch(() => ({ w, convs: [] }))) ); const widgetConvs = widgetLists.flatMap(({ w, convs }) => convs.map(c => normalizeWidgetConv(c, w))); return [...wa, ...widgetConvs].sort((a, b) => parseTs(b.last_message_at) - parseTs(a.last_message_at)); } const STORAGE_FAVORITES = 'helvia_live_favorites'; const loadFavorites = () => { try { return new Set(JSON.parse(localStorage.getItem(STORAGE_FAVORITES) || '[]')); } catch { return new Set(); } }; const saveFavorites = (set) => localStorage.setItem(STORAGE_FAVORITES, JSON.stringify([...set])); const CALL_FILTERS = [ { id: 'all', label: 'Tous', icon: 'Phone' }, { id: 'inbound', label: 'Reçus', icon: 'PhoneIn' }, { id: 'outbound', label: 'Émis', icon: 'PhoneOut' }, { id: 'missed', label: 'Manqués', icon: 'PhoneMissed' }, ]; const CALL_STATUS_LABEL = { completed: 'Terminé', ringing: 'Sonne', 'in-progress': 'En cours', busy: 'Occupé', 'no-answer': 'Sans réponse', failed: 'Échoué', canceled: 'Annulé', missed: 'Manqué', }; function callPeer(call) { return call.direction === 'inbound' ? (call.from_number || '—') : (call.to_number || '—'); } function isMissedCall(call) { return ['missed', 'no-answer', 'busy', 'canceled'].includes(call.status); } // ==================== TOAST ==================== const AppCtx = createContext(null); const useApp = () => useContext(AppCtx); function Toast({ msg, type, onDone }) { useEffect(() => { const delay = type === 'error' ? 6000 : 3500; const t = setTimeout(onDone, delay); return () => clearTimeout(t); }, [onDone, type]); return
{msg}
; } // ==================== TOP BAR ==================== function TopBarWithLineSelector({ subtitle, right }) { const { lines, lineId, setLineId, embed } = useApp(); const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); document.addEventListener('touchstart', h); return () => { document.removeEventListener('mousedown', h); document.removeEventListener('touchstart', h); }; }, [open]); const current = lines.find(l => l.id === lineId) || lines[0] || null; // Auto-sélection : si pas de ligne choisie mais des lignes existent, prend la 1ère. // En embed, ne pas reselectionner si la ligne forcee n'est pas encore dans `lines`. useEffect(() => { if (embed) return; if (!lineId && lines.length > 0) setLineId(lines[0].id); }, [lines, lineId, embed]); // En embed, on masque completement la topbar (pas de selecteur, pas de titre). if (embed) return null; const fmtLineSub = (l) => { if (!l) return '—'; return l.label || l.description || l.line_label || 'Ligne WhatsApp'; }; return (
{right &&
{right}
} {open && lines.length > 1 && (
{lines.map(l => ( ))}
)}
); } // ==================== AUTH ==================== function AuthScreen({ onLogin }) { const [step, setStep] = useState('email'); const [email, setEmail] = useState(''); const [code, setCode] = useState(''); const [loading, setLoad] = useState(false); const [error, setError] = useState(''); // Magic link ?email=&code= useEffect(() => { const p = new URLSearchParams(location.search); const e = p.get('email'); const c = p.get('code'); if (e && c) { setEmail(e); setLoad(true); fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: e.toLowerCase(), code: c }), }).then(r => r.json()).then(data => { if (data.success && data.token) { history.replaceState({}, '', location.pathname); onLogin(data.token, data.user || { email: e }); } else { setStep('code'); setError(data.error || 'Lien expiré'); } }).catch(() => setError('Erreur réseau')).finally(() => setLoad(false)); } else if (e) { setEmail(e); setStep('code'); } }, []); const requestCode = async (e) => { e?.preventDefault(); if (!email.includes('@')) { setError('Email invalide'); return; } setLoad(true); setError(''); try { const r = await fetch(`${CONFIG.API_URL}/auth/request-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.toLowerCase().trim() }), }).then(x => x.json()); if (r.success) setStep('code'); else setError(r.error || 'Erreur envoi'); } catch { setError('Erreur réseau'); } finally { setLoad(false); } }; const verify = async (e) => { e?.preventDefault(); if (code.length < 4) return; setLoad(true); setError(''); try { const r = await fetch(`${CONFIG.API_URL}/auth/verify-code`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.toLowerCase(), code }), }).then(x => x.json()); if (r.success && r.token) onLogin(r.token, r.user || { email }); else setError(r.error || 'Code invalide'); } catch { setError('Erreur réseau'); } finally { setLoad(false); } }; return (
Helvia
Helvia Call · v{document.querySelector('meta[name="helvia:call:version"]')?.content || '?'}

{step === 'email' ? 'Conversations, appels & contacts en direct' : <>Entrez le code reçu à {email}}

{step === 'email' ? (
setEmail(e.target.value)} placeholder="vous@exemple.com" className="auth-splash-input" autoFocus autoComplete="email" inputMode="email" /> {error &&
{error}
}
) : (
setCode(e.target.value.replace(/\D/g, '').slice(0, 6))} placeholder="• • • • • •" className="auth-splash-input auth-splash-code" maxLength="6" autoFocus inputMode="numeric" /> {error &&
{error}
}
)}
Helvia
); } // ==================== CONV LIST ITEM ==================== function ChannelBadge({ channel }) { const meta = CHANNEL_META[channel] || { label: channel, css: 'ch-msg' }; return {meta.label}; } function ConvList({ items, onOpen, onArchive, archiveLabel }) { const [menuFor, setMenuFor] = useState(null); const longPressTimer = useRef(null); const startPress = (uid) => { longPressTimer.current = setTimeout(() => setMenuFor(uid), 500); }; const cancelPress = () => { if (longPressTimer.current) { clearTimeout(longPressTimer.current); longPressTimer.current = null; } }; return (
{items.map(c => { const name = c.contact_name || c.contact_number; const variant = avatarVariant(c.contact_number || c.contact_name); const unread = c.unread_count > 0; return (
); })} {menuFor && ( <>
setMenuFor(null)} />
)}
); } // ==================== INBOX LIST ==================== function InboxView({ onOpen }) { const { notify, lineId } = useApp(); const [convs, setConvs] = useState([]); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(''); const [searchFocused, setSearchFocused] = useState(false); const [refreshing, setRefresh] = useState(false); const [archived, setArchivedSet] = useState(() => loadArchived()); // Quand la recherche est active (focus ou texte saisi), on masque la topbar // sélecteur de ligne et on remonte la search-bar en haut. const searchActive = searchFocused || search.trim().length > 0; const toggleArchive = (uid) => { const next = new Set(archived); if (next.has(uid)) next.delete(uid); else next.add(uid); setArchivedSet(next); saveArchived(next); notify(next.has(uid) ? 'Conversation archivée' : 'Conversation désarchivée', 'success'); }; const load = useCallback(async (showSpin = true) => { if (showSpin) setLoading(true); else setRefresh(true); try { const list = await fetchUnifiedConversations(lineId); setConvs(list); } catch { notify('Erreur réseau', 'error'); } finally { setLoading(false); setRefresh(false); } }, [lineId, notify]); useEffect(() => { load(); }, [load]); useEffect(() => { const t = setInterval(() => load(false), 20000); return () => clearInterval(t); }, [load]); const filtered = useMemo(() => { let list = convs.filter(c => !archived.has(c.uid)); if (search.trim()) { const s = search.toLowerCase(); list = list.filter(c => (c.contact_name || '').toLowerCase().includes(s) || (c.contact_number || '').includes(s) || (c.last_message_body || '').toLowerCase().includes(s) || (CHANNEL_META[c.channel]?.label || '').toLowerCase().includes(s) ); } return list; }, [convs, search, archived]); const archivedCount = useMemo(() => convs.filter(c => archived.has(c.uid)).length, [convs, archived]); const unreadTotal = useMemo(() => filtered.reduce((s, c) => s + (c.unread_count || 0), 0), [filtered]); return (
{!searchActive && ( 0 ? `${unreadTotal} non lu${unreadTotal > 1 ? 's' : ''}` : 'Tous canaux'} right={( )} /> )}
{searchActive && ( )} setSearch(e.target.value)} onFocus={() => setSearchFocused(true)} onBlur={() => { if (!search.trim()) setSearchFocused(false); }} />
{loading ? ( ) : filtered.length === 0 ? (
{search ? 'Aucun résultat' : 'Aucune conversation'}
WhatsApp, widgets web et autres canaux apparaissent ici dans une seule boîte de réception.
) : ( )} {archivedCount > 0 && filtered.length > 0 && (
{archivedCount} archivée{archivedCount > 1 ? 's' : ''}
)}
); } // ==================== APPELS ==================== function CallsView({ onOpenCall }) { const { notify, lineId } = useApp(); const [calls, setCalls] = useState([]); const [loading, setLoading] = useState(true); const [filter, setFilter] = useState('all'); const [search, setSearch] = useState(''); const load = useCallback(async () => { setLoading(true); try { let url = '/my/calls?page=1&limit=50'; if (lineId) url += `&line_id=${lineId}`; if (filter === 'inbound') url += '&direction=inbound'; else if (filter === 'outbound') url += '&direction=outbound'; else if (filter === 'missed') url += '&status=missed'; const r = await api.get(url); if (r?.error) notify(r.error, 'error'); else setCalls(r.calls || []); } catch { notify('Erreur réseau', 'error'); } finally { setLoading(false); } }, [lineId, filter, notify]); useEffect(() => { load(); }, [load]); const filtered = useMemo(() => { if (!search.trim()) return calls; const s = search.toLowerCase(); return calls.filter(c => (c.from_number || '').includes(s) || (c.to_number || '').includes(s) || (c.line_phone || '').includes(s) ); }, [calls, search]); return (
setSearch(e.target.value)} />
{CALL_FILTERS.map(f => { const Ico = Icons[f.icon]; return ( ); })}
{loading ? ( ) : filtered.length === 0 ? (
Aucun appel
Entrants, sortants, manqués et messages vocaux s'affichent ici.
) : (
{filtered.map(c => { const peer = callPeer(c); const missed = isMissedCall(c); const hasVm = !!c.recording_url; const dirKey = missed ? 'missed' : c.direction; const dirLabel = missed ? 'Manqué' : c.direction === 'inbound' ? 'Reçu' : 'Émis'; return ( ); })}
)}
); } // ==================== CALL DETAIL ==================== function AudioPlayer({ src }) { const audioRef = useRef(null); const [playing, setPlaying] = useState(false); const [cur, setCur] = useState(0); const [dur, setDur] = useState(0); const [rate, setRate] = useState(1); useEffect(() => { const a = audioRef.current; if (!a) return; const onTime = () => setCur(a.currentTime || 0); const onMeta = () => setDur(a.duration || 0); const onEnd = () => { setPlaying(false); setCur(0); a.currentTime = 0; }; a.addEventListener('timeupdate', onTime); a.addEventListener('loadedmetadata', onMeta); a.addEventListener('ended', onEnd); return () => { a.removeEventListener('timeupdate', onTime); a.removeEventListener('loadedmetadata', onMeta); a.removeEventListener('ended', onEnd); }; }, []); const toggle = () => { const a = audioRef.current; if (!a) return; if (a.paused) { a.play(); setPlaying(true); } else { a.pause(); setPlaying(false); } }; const seek = (e) => { const a = audioRef.current; if (!a || !dur) return; const rect = e.currentTarget.getBoundingClientRect(); const x = (e.clientX || (e.touches && e.touches[0]?.clientX) || 0) - rect.left; const ratio = Math.max(0, Math.min(1, x / rect.width)); a.currentTime = ratio * dur; setCur(a.currentTime); }; const skip = (delta) => { const a = audioRef.current; if (!a) return; a.currentTime = Math.max(0, Math.min((a.duration || 0), a.currentTime + delta)); }; const setSpeed = (r) => { const a = audioRef.current; if (!a) return; a.playbackRate = r; setRate(r); }; const dl = () => { const link = document.createElement('a'); link.href = src; link.download = 'message-vocal.mp3'; link.target = '_blank'; link.click(); }; const pct = dur ? (cur / dur) * 100 : 0; return (