{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, mode = 'discussions' }) {
const { notify, lineId } = useApp();
const [convs, setConvs] = useState([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState('');
const [refreshing, setRefresh]= useState(false);
const [archived, setArchivedSet] = useState(() => loadArchived());
const toggleArchive = (id) => {
const next = new Set(archived);
if (next.has(id)) next.delete(id); else next.add(id);
setArchivedSet(next);
saveArchived(next);
notify(next.has(id) ? 'Conversation archivée' : 'Conversation désarchivée', 'success');
};
const load = useCallback(async (showSpin = true) => {
if (showSpin) setLoading(true); else setRefresh(true);
try {
const q = lineId ? `?line_id=${lineId}` : '';
const r = await api.get(`/my/whatsapp/conversations${q}`);
if (r?.error) notify(r.error, 'error');
else setConvs(r.conversations || []);
} 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(() => {
const isArchiveTab = mode === 'archives';
let list = convs.filter(c => isArchiveTab ? archived.has(c.id) : !archived.has(c.id));
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)
);
}
return list;
}, [convs, search, archived, mode]);
const archivedCount = useMemo(() => convs.filter(c => archived.has(c.id)).length, [convs, archived]);
const isArchiveTab = mode === 'archives';
return (
1 ? 's' : ''}` : 'Discussions'}
right={(
)} />
setSearch(e.target.value)} />
{loading ? (
) : filtered.length === 0 ? (
{search ? 'Aucun résultat' : convs.length === 0 ? 'Aucune conversation' : 'Aucune conversation filtrée'}
{convs.length === 0
? 'Les conversations WhatsApp Business apparaîtront ici dès qu’un client vous écrit.'
: 'Essayez un autre filtre ou une autre ligne.'}
) : (
)}
{!isArchiveTab && archivedCount > 0 && filtered.length > 0 && (
{archivedCount} conversation{archivedCount > 1 ? 's' : ''} archivée{archivedCount > 1 ? 's' : ''}
)}
);
}
// ==================== STATUT (activité) ====================
function StatusView() {
const { lineId, lines } = useApp();
const [convs, setConvs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(true);
const q = lineId ? `?line_id=${lineId}` : '';
api.get(`/my/whatsapp/conversations${q}`)
.then(r => setConvs(r?.conversations || []))
.finally(() => setLoading(false));
}, [lineId]);
const todayStr = new Date().toISOString().slice(0, 10);
const todayConvs = convs.filter(c => (c.last_message_at || '').startsWith(todayStr));
const totalUnread = convs.reduce((s, c) => s + (c.unread_count || 0), 0);
const botActive = convs.filter(c => c.bot_enabled === 1).length;
return (
{loading ? (
) : (
{todayConvs.length}
Conversations actives aujourd'hui
{totalUnread}
Messages non lus
{convs.length}
Conversations totales
Activité récente
{todayConvs.length === 0 && (
Aucune conversation aujourd'hui.
)}
{todayConvs.slice(0, 8).map(c => {
const name = c.contact_name || c.contact_number;
return (
{initials(name)}
{name}
{c.last_message_body || '—'}
{fmtTime(c.last_message_at)}
);
})}
)}
);
}
// ==================== RÉGLAGES ====================
function SettingsView() {
const { user, logout } = useApp();
return (
{initials(user?.name || user?.email)}
{user?.name || user?.email}
{user?.email}
Vocal WhatsApp · v1.0
);
}
// ==================== NEW MESSAGE (selector + dialer) ====================
function NewMessageView({ onClose, onOpenConv }) {
const { notify, lineId } = useApp();
const [convs, setConvs] = useState([]);
const [loading, setLoading] = useState(true);
const [search, setSearch] = useState('');
useEffect(() => {
const q = lineId ? `?line_id=${lineId}` : '';
api.get(`/my/whatsapp/conversations${q}`).then(r => {
setConvs(r?.conversations || []);
}).finally(() => setLoading(false));
}, [lineId]);
const filtered = useMemo(() => {
if (!search.trim()) return convs;
const s = search.toLowerCase();
return convs.filter(c =>
(c.contact_name || '').toLowerCase().includes(s) ||
(c.contact_number || '').includes(s)
);
}, [convs, search]);
return (
Nouveau message
Choisir un contact
setSearch(e.target.value)} autoFocus />
{loading ? (
) : filtered.length === 0 ? (
Aucun contact
L'envoi vers un nouveau numéro nécessite un template WhatsApp approuvé. Utilisez my.vocal.ch pour gérer vos templates.
) : (
{ onClose(); onOpenConv(c); }} onArchive={() => {}} archiveLabel="" />
)}
);
}
// ==================== BOTTOM NAV ====================
function BottomNav({ tab, onTab, onCompose }) {
return (
);
}
// ==================== THREAD ====================
function ThreadView({ conv, onBack }) {
const { notify } = useApp();
const [msgs, setMsgs] = useState([]);
const [loading, setLoading] = useState(true);
const [draft, setDraft] = useState('');
const [sending, setSending] = useState(false);
const [botEnabled, setBot] = useState(conv.bot_enabled === 1);
const [data, setData] = useState(conv);
const [windowOpen, setWindow] = useState(true);
const scrollRef = useRef(null);
const load = useCallback(async () => {
setLoading(true);
try {
const r = await api.get(`/my/whatsapp/conversations/${conv.id}/messages`);
if (r?.error) notify(r.error, 'error');
else {
setMsgs(r.messages || []);
if (r.conversation) {
setData(r.conversation);
setBot(r.conversation.bot_enabled === 1);
// Fenêtre 24h : si dernier message inbound > 24h on le notifie.
if (r.conversation.last_inbound_at) {
const last = new Date(r.conversation.last_inbound_at.replace(' ', 'T') + 'Z');
setWindow((Date.now() - last.getTime()) < 24 * 3600 * 1000);
}
}
}
} catch { notify('Erreur réseau', 'error'); }
finally { setLoading(false); }
}, [conv.id, notify]);
useEffect(() => { load(); }, [load]);
useEffect(() => {
const t = setInterval(load, 15000);
return () => clearInterval(t);
}, [load]);
useEffect(() => {
requestAnimationFrame(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
});
}, [msgs, loading]);
const send = async () => {
const text = draft.trim();
if (!text || sending) return;
setSending(true);
try {
const r = await api.post(`/my/whatsapp/conversations/${conv.id}/reply`,
{ body: text, take_over: botEnabled ? 1 : 0 });
if (r?.error) notify(r.error, 'error');
else {
setDraft('');
setBot(false);
load();
}
} catch { notify('Erreur envoi', 'error'); }
finally { setSending(false); }
};
const toggleBot = async () => {
const next = !botEnabled;
setBot(next);
try {
const r = await api.post(`/my/whatsapp/conversations/${conv.id}/bot`, { enabled: next ? 1 : 0 });
if (r?.error) { setBot(!next); notify(r.error, 'error'); }
else notify(next ? 'Bot activé pour ce contact' : 'Bot désactivé — vous prenez la main', 'success');
} catch { setBot(!next); notify('Erreur', 'error'); }
};
const name = data.contact_name || data.contact_number;
const variant = avatarVariant(data.contact_number || name);
// Group msgs by day
const grouped = useMemo(() => {
const out = [];
let lastDay = null;
msgs.forEach(m => {
const day = (m.created_at || '').slice(0, 10);
if (day !== lastDay) {
out.push({ kind: 'day', day, key: 'd' + day + Math.random() });
lastDay = day;
}
out.push({ kind: 'msg', m, key: m.id });
});
return out;
}, [msgs]);
return (
{initials(name)}
{name}
{data.contact_number}
{data.line_phone ? ` · via ${data.line_phone}` : ''}
{!windowOpen && (
Fenêtre 24h dépassée — vous devez utiliser un template approuvé.
)}
{loading && (
)}
{!loading && grouped.length === 0 && (
)}
{grouped.map(item => {
if (item.kind === 'day') {
return
{fmtDay(item.day)}
;
}
const m = item.m;
const out = m.direction === 'outbound';
let media = null;
if (m.media_urls) {
try {
const urls = JSON.parse(m.media_urls);
media = urls.map((u, i) => (
📎 Pièce jointe {i + 1}
));
} catch {}
}
const isRead = m.status === 'read';
const isDelivered = m.status === 'delivered' || isRead;
return (
{m.body || (m.num_media > 0 ? '📎 Média' : '')}
{media}
{m.sent_by === 'bot' && bot}
{fmtTime(m.created_at)}
{out && (
{isDelivered ? : }
)}
);
})}