);
}
// ── Active thread (messages + composer) ────────────────────────────
function _friendlyDmError(e) {
const code = (e && (e.body && e.body.error)) || (e && e.message) || "";
switch (String(code)) {
case "recipient_not_found": return "That teammate isn't reachable right now.";
case "cannot_message_self": return "You can't send a message to yourself.";
case "missing_recipient": return "Pick a teammate first.";
case "empty_body": return "Type something to send.";
case "too_long": return "Message is too long (4000 chars max).";
case "dm_table_missing": return "Chat isn't fully set up on the server yet — ask the admin to run the latest migrations.";
default: return "Couldn't send: " + (code || "network error");
}
}
function ChatThread({ withId, withPerson, onBack, onSent }) {
const me = _meId();
const [msgs, setMsgs] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [draft, setDraft] = React.useState("");
const [sending, setSending] = React.useState(false);
const [sendErr, setSendErr] = React.useState("");
const scrollRef = React.useRef(null);
const endRef = React.useRef(null);
const inputRef = React.useRef(null);
// Tracks whether the user is currently parked near the bottom of
// the thread. We only auto-scroll on new messages when this is true,
// so a teammate's incoming message doesn't yank you out of the
// history you're actively reading. Updated on every scroll event.
const stickToBottomRef = React.useRef(true);
// Bumped whenever a "new message just arrived from the other side"
// — used to flash a "Jump to latest" pill if the user is scrolled up.
const [hasNewBelow, setHasNewBelow] = React.useState(false);
// Load messages on mount / when withId changes
React.useEffect(() => {
let stale = false;
setLoading(true);
setMsgs([]);
if (!withId) return;
(async () => {
try {
const data = await window.api.dm.messages(withId, 200);
if (!stale) setMsgs(Array.isArray(data) ? data : []);
} catch (e) {
console.warn("[chat] messages load failed:", e && e.message);
} finally {
if (!stale) setLoading(false);
}
})();
// Mark this thread read on open
(async () => {
try { await window.api.dm.markRead(withId); } catch {}
try { window.dispatchEvent(new CustomEvent("flowboard:dm:read", { detail: { from_user_id: withId } })); } catch {}
})();
return () => { stale = true; };
}, [withId]);
// Realtime — append new messages from the other side; also reflect
// our own sends via SSE echo (filtered by ids we've already inserted).
React.useEffect(() => {
if (!withId) return;
const onMsg = (ev) => {
const m = ev && ev.detail; if (!m || !m.id) return;
const between =
(m.sender_id === me && m.recipient_id === withId) ||
(m.sender_id === withId && m.recipient_id === me);
if (!between) return;
setMsgs(prev => prev.some(x => x.id === m.id) ? prev : [...prev, m]);
// If the new message is FROM the other user, mark read straight away
if (m.sender_id === withId) {
(async () => { try { await window.api.dm.markRead(withId); } catch {} })();
// If the user is scrolled up reading history, surface a
// "new message" pill instead of yanking them down.
if (!stickToBottomRef.current) setHasNewBelow(true);
}
};
const onDel = (ev) => {
const id = ev && ev.detail && ev.detail.id; if (!id) return;
setMsgs(prev => prev.filter(x => x.id !== id));
};
window.addEventListener("flowboard:rt:dm.message", onMsg);
window.addEventListener("flowboard:rt:dm.deleted", onDel);
return () => {
window.removeEventListener("flowboard:rt:dm.message", onMsg);
window.removeEventListener("flowboard:rt:dm.deleted", onDel);
};
}, [withId, me]);
// Track whether the user is parked near the bottom of the scroller.
// 80px tolerance is enough that a tiny scroll wheel nudge mid-message
// doesn't disable autoscroll, but a deliberate scroll-up does.
function onScroll() {
const el = scrollRef.current; if (!el) return;
const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
const nearBottom = distance < 80;
stickToBottomRef.current = nearBottom;
if (nearBottom && hasNewBelow) setHasNewBelow(false);
}
function scrollToBottom(smooth) {
const end = endRef.current; const el = scrollRef.current;
if (!end || !el) return;
// Defer to next paint so newly-inserted bubbles have laid out and
// the final scrollHeight is accurate. Setting scrollTop in the
// same tick we appended a message often lands a few pixels short.
requestAnimationFrame(() => {
try {
end.scrollIntoView({ block: "end", behavior: smooth ? "smooth" : "auto" });
} catch {
el.scrollTop = el.scrollHeight;
}
});
}
// Auto-scroll on:
// - thread switch (always pin to bottom; resets stickiness)
// - first paint after messages finish loading
// - any new message *if* the user is currently sticking to the bottom
React.useEffect(() => {
// Thread changed — reset stickiness and pin to bottom of the new thread.
stickToBottomRef.current = true;
setHasNewBelow(false);
}, [withId]);
React.useEffect(() => {
if (loading) return; // wait until messages are in
if (!stickToBottomRef.current) return;
scrollToBottom(false);
}, [loading, msgs.length, withId]);
// Auto-focus the input when a thread opens
React.useEffect(() => {
if (withId && inputRef.current) inputRef.current.focus();
}, [withId]);
async function send() {
const body = draft.trim();
if (!body || sending) return;
setSending(true);
setSendErr("");
setDraft("");
// Optimistic insert
const tempId = "tmp_" + Date.now();
const optimistic = {
id: tempId,
sender_id: me,
recipient_id: withId,
body,
created_at: new Date().toISOString(),
read_at: null,
};
setMsgs(prev => [...prev, optimistic]);
// Sending a message is an unambiguous "I want to see the latest"
// signal — pin the view back to the bottom even if the user had
// scrolled up to read history.
stickToBottomRef.current = true;
setHasNewBelow(false);
try {
const real = await window.api.dm.send(withId, body);
setMsgs(prev => prev.map(m => m.id === tempId ? real : m));
if (typeof onSent === "function") onSent(withId);
} catch (e) {
setMsgs(prev => prev.filter(m => m.id !== tempId));
setDraft(body);
const friendly = _friendlyDmError(e);
setSendErr(friendly);
// Also flash the global toast if available
if (typeof window.fbToast === "function") window.fbToast(friendly, 4000);
console.warn("[chat] send failed:", e && (e.body || e.message));
} finally {
setSending(false);
}
}
function onKey(e) {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
send();
}
}
// Auto-grow the textarea up to its CSS max-height. We don't read the
// computed style every keystroke (cheap but unnecessary) — the max
// here mirrors `.chat-input { max-height: 120px }` in chat.css. If
// the user clears the field, snap back to the single-row baseline.
function autoGrow(el) {
if (!el) return;
el.style.height = "auto";
const next = Math.min(el.scrollHeight, 120);
el.style.height = next + "px";
}
React.useEffect(() => { autoGrow(inputRef.current); }, [draft]);
// Render messages with day separators + sender grouping
const rendered = [];
let lastDay = ""; let lastSender = "";
msgs.forEach(m => {
const day = _fmtDayLabel(m.created_at);
if (day !== lastDay) {
rendered.push({ kind: "day", key: "d-" + m.id, label: day });
lastDay = day;
lastSender = "";
}
const grouped = lastSender === m.sender_id;
rendered.push({ kind: "msg", key: m.id, msg: m, grouped });
lastSender = m.sender_id;
});
return (
{(withPerson && withPerson.name) || "Unknown"}
Personal chat · auto-deletes in 7 days
{!loading && msgs.length === 0 && (
💬
Say hi to {(withPerson && withPerson.name && withPerson.name.split(" ")[0]) || "your teammate"}
Messages here are private and auto-delete after 7 days.
)}
{!loading && msgs.length > 0 && (
Messages auto-delete after 7 days
)}
{rendered.map(item => {
if (item.kind === "day") return
);
})}
{/* Sentinel — scrollIntoView({block:"end"}) targets this so the
real bottom (after gap + last bubble) is what gets revealed,
regardless of intermediate margins. */}