// 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.helvia.app'; })(), }; const STORAGE_TOKEN = 'helvia_live_token'; const STORAGE_USER = 'helvia_live_user'; // ==================== 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 || {}) }); }, }; // ==================== 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 }) => , }; // ==================== 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 } = 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. useEffect(() => { if (!lineId && lines.length > 0) setLineId(lines[0].id); }, [lines, lineId]); 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

{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 [channelFilter, setChannelFilter] = useState('all'); const [refreshing, setRefresh] = useState(false); const [archived, setArchivedSet] = useState(() => loadArchived()); 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 (channelFilter !== 'all') list = list.filter(c => c.channel === channelFilter); 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, channelFilter]); 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 (
0 ? `${unreadTotal} non lu${unreadTotal > 1 ? 's' : ''}` : 'Tous canaux'} right={( )} />
setSearch(e.target.value)} />
{CHANNEL_FILTERS.map(f => { const Ico = Icons[f.icon]; return ( ); })}
{loading ? (
) : filtered.length === 0 ? (
{search || channelFilter !== 'all' ? '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 (