/* global React, Icon, Avatar, Button, StatusDot, DATA */
// ============================================================
// Messagerie in-app — store temps réel + admin chat + boîte opérateur
// ============================================================
const { useState: useMsgState, useEffect: useMsgEffect, useRef: useMsgRef, useReducer } = React;
const TempMsg = (function () {
const threads = {
u3: [
{ id: 1, from: "admin", text: "Salut Sofia 👋 pense à lancer le warm-up du lot du matin avant 10h.", at: "08:12", read: true },
{ id: 2, from: "u3", text: "C'est en cours, 3/5 déjà fait 👍", at: "08:20", read: true },
{ id: 3, from: "admin", text: "Parfait, merci !", at: "08:21", read: true },
],
u4: [
{ id: 4, from: "admin", text: "Tom, la story du jour est prête à publier ?", at: "10:05", read: true },
{ id: 5, from: "u4", text: "Pas encore, je finis le warm-up d'abord", at: "10:09", read: false },
],
u7: [
{ id: 6, from: "admin", text: "Yuki, ta tâche du lot du soir est en retard, tu peux la reprendre ?", at: "20:14", read: false },
],
};
const listeners = new Set();
const emit = () => listeners.forEach((l) => l());
const stamp = () => { const d = new Date(); return [d.getHours(), d.getMinutes()].map((n) => String(n).padStart(2, "0")).join(":"); };
let seq = 100;
return {
subscribe(cb) { listeners.add(cb); return () => listeners.delete(cb); },
get(opId) { return threads[opId] || []; },
send(opId, from, text) {
if (!text || !text.trim()) return;
(threads[opId] = threads[opId] || []).push({ id: ++seq, from, text: text.trim(), at: stamp(), read: false });
emit();
},
markRead(opId, viewer) {
(threads[opId] || []).forEach((m) => {
const fromAdmin = m.from === "admin";
if ((viewer === "admin" && !fromAdmin) || (viewer === "op" && fromAdmin)) m.read = true;
});
emit();
},
unreadAdmin(opId) { return (threads[opId] || []).filter((m) => m.from !== "admin" && !m.read).length; },
unreadOp(opId) { return (threads[opId] || []).filter((m) => m.from === "admin" && !m.read).length; },
totalAdmin() { return Object.keys(threads).reduce((s, k) => s + this.unreadAdmin(k), 0); },
last(opId) { const t = threads[opId] || []; return t[t.length - 1]; },
};
})();
function useMsg() {
const [, force] = useReducer((x) => x + 1, 0);
useMsgEffect(() => TempMsg.subscribe(force), []);
return TempMsg;
}
// signal partagé : ouvre/ferme la bulle de chat flottante (bas-droite) côté opérateur
const ChatUI = (function () {
let open = false; const ls = new Set();
return { sub(cb) { ls.add(cb); return () => ls.delete(cb); }, isOpen() { return open; }, set(v) { open = v; ls.forEach(f => f()); }, toggle() { open = !open; ls.forEach(f => f()); } };
})();
function useChatUI() { const [, f] = useReducer((x) => x + 1, 0); useMsgEffect(() => ChatUI.sub(f), []); return ChatUI; }
// ---- bulle de message ----
function Bubble({ m, mine }) {
return (
);
}
function Composer({ onSend, placeholder, disabled }) {
const [text, setText] = useMsgState("");
const go = () => { if (!text.trim()) return; onSend(text); setText(""); };
return (
setText(e.target.value)} onKeyDown={(e) => e.key === "Enter" && go()}
placeholder={placeholder || "Écrire un message…"} disabled={disabled}
style={{ flex: 1, padding: "10px 13px", background: "var(--bg-2)", border: "1px solid var(--border-2)", borderRadius: 10, color: "var(--text)", fontSize: 13.5, outline: "none" }} />
);
}
function ThreadScroll({ thread, mineFrom }) {
const ref = useMsgRef(null);
useMsgEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [thread.length]);
return (
{thread.length === 0 &&
Aucun message. Démarrez la conversation 👇
}
{thread.map((m) =>
)}
Messages
Envoyez un message en direct à un opérateur pendant qu'il travaille.
{/* liste conversations */}
OPÉRATEURS
{ops.map((o) => {
const unread = msg.unreadAdmin(o.id);
const last = msg.last(o.id);
const act = o.id === sel;
return (
);
})}
{/* fil */}
{op.name}
{online ? "en ligne · en train de travailler" : "hors ligne"}
{online &&
}
{op.whatsapp &&
{React.createElement(Icon.whatsapp, { size: 17 })}}
{op.telegram &&
{React.createElement(Icon.telegram, { size: 17 })}}
msg.send(sel, "admin", t)} placeholder={`Message à ${op.name.split(" ")[0]}…`} />
);
}
// ============================================================
// OPÉRATEUR — cloche + boîte de réception + toast live
// ============================================================
function OperatorBell({ user }) {
const msg = useMsg();
const chat = useChatUI();
const [toast, setToast] = useMsgState(null);
const prev = useMsgRef(msg.unreadOp(user.id));
const unread = msg.unreadOp(user.id);
useMsgEffect(() => {
if (unread > prev.current && !chat.isOpen()) {
const last = msg.last(user.id);
setToast(last);
const t = setTimeout(() => setToast(null), 5000);
prev.current = unread;
return () => clearTimeout(t);
}
prev.current = unread;
}, [unread]);
return (
<>
{toast && (
{ chat.set(true); setToast(null); }} style={{ position: "fixed", top: 70, right: 22, zIndex: 90, width: 320, maxWidth: "90vw",
background: "var(--surface)", border: "1px solid var(--accent-line)", borderRadius: 13, boxShadow: "var(--shadow-lg)", padding: 14, cursor: "pointer", animation: "toastIn .26s ease" }}>
{React.createElement(Icon.send, { size: 13 })}
Message · ton manager
{toast.at}
{toast.text}
{open && (
{isAdmin
?
:
{React.createElement(Icon.shield, { size: 17 })}
}
{isAdmin ? peer.name : "Agence Tampro"}
{isAdmin ? "opérateur · en ligne" : "admin · en ligne"}
)}
{/* top bar */}
LIVE
Supervision · {op.name}
vous regardez son écran en direct{dev ? ` · ${dev.tag} (${dev.name})` : ""}
{/* corps */}
{dev
?
act("Tap (vous)", null, `(${p.x}, ${p.y})`) : undefined} onDown={assist ? onDown : undefined} onUp={assist ? onUp : undefined} />
{assist && }
{assist ? "contrôle partagé — clic = tap, glisser = swipe · vos actions sont transmises" : "lecture seule — vous observez sans intervenir"}
:
{React.createElement(Icon.phone, { size: 36 })}
Aucun device actif pour cet opérateur.
}
{/* panneau droit : télécommande (assist) ou feed (lecture) */}
{assist
?
{React.createElement(Icon.apps, { size: 16, color: "var(--accent)" })}
Télécommande
● vous pilotez
:
{React.createElement(Icon.list, { size: 16, color: "var(--muted)" })}
Ce qu'il fait
● live
{feed.map((a, i) => (
{a.at}
{a.label}
{a.meta && {a.meta}}
))}
}
{/* bulle de chat pour le guider */}