// Chat — right-side internal comms overlay (Slack-lite) const CHAT_CHANNELS = [ { id: 'general', name: 'general', kind: 'public', members: 28, topic: 'Company-wide chatter.' }, { id: 'random', name: 'random', kind: 'public', members: 28, topic: 'Off-topic.' }, { id: 'announcements', name: 'announcements', kind: 'public', members: 28, topic: 'Read-only · admin posts.' }, { id: 'eng', name: 'eng', kind: 'public', members: 8, topic: 'Engineering team.' }, { id: 'design', name: 'design', kind: 'public', members: 4, topic: 'Design team.' }, { id: 'product', name: 'product', kind: 'public', members: 6, topic: 'Product team.' }, { id: 'marketing', name: 'marketing', kind: 'public', members: 5, topic: 'Marketing team.' }, { id: 'sales', name: 'sales', kind: 'public', members: 5, topic: 'Sales team.' }, { id: 'support', name: 'support', kind: 'public', members: 4, topic: 'IT Services support.' }, { id: 'people', name: 'people-ops', kind: 'public', members: 3, topic: 'HR & People.' }, { id: 'finance', name: 'finance', kind: 'private', members: 4, topic: 'Finance, contracts, payouts. Restricted.' }, { id: 'cmp-atlas-v4', name: 'cmp-atlas-v4', kind: 'public', members: 14, topic: 'Atlas v4 launch — pinned: launch checklist.' }, { id: 'incidents', name: 'incidents', kind: 'public', members: 9, topic: 'On-call & incidents.' }, ]; const CHAT_DMS = [ { id: 'dm-e2', user: 'e2', unread: 2 }, { id: 'dm-e3', user: 'e3', unread: 0 }, { id: 'dm-e20', user: 'e20', unread: 1 }, { id: 'dm-e6', user: 'e6', unread: 0 }, { id: 'dm-e8', user: 'e8', unread: 0 }, ]; // Initial unread counts on channels const CHAT_UNREAD = { 'general': 3, 'eng': 7, 'cmp-atlas-v4': 12, 'incidents': 0, 'random': 4, 'sales': 1, }; // Messages per channel const CHAT_MESSAGES = { 'general': [ { who: 'e1', when: 'yesterday 9:01 AM', text: "Morning team! Reminder we've got the May all-hands at 10am tomorrow. Davis is presenting the Atlas v4 timeline." }, { who: 'e5', when: 'yesterday 10:14 AM', text: '☕ Coffee delivery has landed in the kitchen — the Bowling Green office is officially over-caffeinated.', reactions: [{ e: '☕', n: 6 }, { e: '❤️', n: 3 }] }, { who: 'e6', when: 'yesterday 2:20 PM', text: 'Open enrollment closes Friday. Two folks haven\'t submitted — DM if you need help.' }, { who: 'e10', when: 'yesterday 4:55 PM', text: 'Atlas v4 webhook signature v2 is in canary. Looks healthy after 2 hours. Will roll wider tomorrow if metrics stay green.', reactions: [{ e: '🚀', n: 8 }, { e: '👀', n: 2 }] }, { who: 'e8', when: 'today 8:48 AM', text: 'Brand refresh — first round of explorations is in the design channel. Would love eyes from execs before we narrow.' }, { who: 'e4', when: 'today 9:12 AM', text: 'Closed Marigold Studios annual plan yesterday! Small but mighty. Renée is going to be a great reference.', reactions: [{ e: '🎉', n: 11 }, { e: '🔥', n: 4 }] }, { who: 'e1', when: 'today 10:30 AM', text: 'Q2 board pack draft is in Files → Finance. @maren and @ramon owe me edits by EOW.' }, ], 'eng': [ { who: 'e2', when: 'yesterday 8:30 AM', text: 'Standup notes: Imani on permission model finalization, Sahil on permissions UI shipping today, Jules pairing with Nadia on the job queue load test.' }, { who: 'e14', when: 'yesterday 10:00 AM', text: 'Frankfurt region is fully wired up. DPA updates merged. Ready for the Klein & Auer pilot migration.', reactions: [{ e: '🇪🇺', n: 5 }, { e: '🙌', n: 4 }] }, { who: 'e10', when: 'yesterday 3:42 PM', text: 'Heads up — race condition in workflow runner found and patched. T-2834 resolved. PR is ATL-4#1187 if anyone wants a look.' }, { who: 'e11', when: 'today 9:01 AM', text: 'New permissions UI is in staging. Filing a PR after lunch. @brennan can you scope a regression pass?' }, { who: 'e15', when: 'today 9:14 AM', text: 'Will do. I\'ll spin up the Cypress suite this afternoon.' }, { who: 'e12', when: 'today 10:08 AM', text: 'Random one — anyone else seeing intermittent webhook signature mismatches in staging? Datadog has a small spike.', reactions: [{ e: '👀', n: 2 }] }, { who: 'e10', when: 'today 10:14 AM', text: '@jules I just looked. There\'s a clock-skew issue with the canary instance. Filing as ATL-4#1192.', replyTo: 5 }, ], 'cmp-atlas-v4': [ { who: 'e5', when: 'yesterday 11:00 AM', text: '📌 Pinned: the launch readiness checklist is at the top of this channel. Update your row by EOD Wednesday.' }, { who: 'e19', when: 'yesterday 1:24 PM', text: 'Teaser microsite v3 is up. Lucia has notes from Helena — feedback channel below.', reactions: [{ e: '🔥', n: 6 }] }, { who: 'e23', when: 'yesterday 2:51 PM', text: 'Blog series outline finalized. 5 posts cadenced over 6 weeks. Will share the brief tonight.' }, { who: 'e24', when: 'today 7:30 AM', text: 'LinkedIn ABM variant A is live. Spending paced at $1.4k/day. CTR is 3.1% in the first hour — significantly above benchmark.', reactions: [{ e: '🚀', n: 8 }, { e: '📈', n: 3 }] }, { who: 'e3', when: 'today 9:10 AM', text: 'Stratoscale customer story landing tomorrow. Reviewed final, copy is :chef\'s-kiss:. @yuki shipping it.' }, { who: 'e5', when: 'today 11:42 AM', text: 'Press tour reminder: embargo is the morning of Sep 8. Briefings start the week prior. Press kit is in Files → Marketing → Atlas v4 launch assets.' }, ], 'sales': [ { who: 'e4', when: 'today 8:14 AM', text: 'Weekly: $1.06M open pipeline, $384k weighted. Junction Bank pilot SOW going out Friday — pls keep me posted on legal review.' }, { who: 'e20', when: 'today 9:30 AM', text: 'Klein & Auer redline #3 is back from their procurement team. Looks workable; sending to Ramon.' }, { who: 'e22', when: 'today 10:11 AM', text: 'Foxtail Robotics POC scoping call this afternoon. Plenum Analytics is heating up — Aria leading.' }, ], 'design': [ { who: 'e8', when: 'today 8:48 AM', text: '@here brand refresh round 2 is up. Direction A is wine-and-orange with the slash-mark as a connective metaphor; Direction B keeps the orange but goes bolder on type. Feedback by Friday.' }, { who: 'e19', when: 'today 9:10 AM', text: 'I think A reads more "operations" and B reads more "consumer". I\'d weight toward A for our ICP but B is more memorable. Hard one.' }, { who: 'e18', when: 'today 9:48 AM', text: 'What if we do A as primary brand + B as a campaign-time accent system?', replyTo: 1 }, ], 'support': [ { who: 'e7', when: 'today 7:50 AM', text: 'Overnight queue: 4 new, 2 resolved. Northbrook SSO is open and tagged urgent — Esi has it.' }, { who: 'e25', when: 'today 9:14 AM', text: 'Northbrook SSO issue isolated to JIT provisioning. Workaround issued, fix going to canary today.' }, { who: 'e26', when: 'today 10:30 AM', text: 'Pinecrest onboarding going smoothly — they\'ve added 142 of 180 seats.' }, ], 'random': [ { who: 'e21', when: 'yesterday 12:34 PM', text: 'Recipe channel? I just want to say this banana bread is dangerous.', reactions: [{ e: '🍌', n: 7 }, { e: '🥖', n: 4 }] }, { who: 'e11', when: 'today 8:55 AM', text: 'Anyone in Toronto going to RustConf this fall? Looking for a coffee buddy.' }, { who: 'e22', when: 'today 9:42 AM', text: 'Petition to add a "boop the sticker" button to the office key fobs.' }, ], 'announcements': [ { who: 'e1', when: '3 days ago', text: '🎉 We hit 99.94% SLA in April — best month on record. Owen and the support crew, you are unreal.', reactions: [{ e: '🎉', n: 18 }, { e: '🙌', n: 12 }] }, { who: 'e6', when: 'last week', text: 'Welcome to Caleb (Support) and Pratik (Sales) who joined this month! Stop by the kitchen and say hi.' }, ], 'people': [ { who: 'e6', when: 'today 9:00 AM', text: 'Open reqs: 4. We\'re tight on the senior backend role — please refer engineers you respect. Bounty doubled to $4k.' }, { who: 'e27', when: 'today 10:14 AM', text: 'New hire welcome packs are stocked. Caleb\'s laptop ships tomorrow.' }, ], 'finance': [ { who: 'e9', when: 'today 8:14 AM', text: 'May affiliate payouts batch ready for review — $23,260 across 12 partners. @maren approval needed.' }, { who: 'e28', when: 'today 9:00 AM', text: 'Q1 close docs finalized. Filed under Files → Finance.' }, ], 'incidents': [ { who: 'e14', when: 'today 6:42 AM', text: '🟢 No active incidents. Last 24h: clean. SLO budget at 99.94%.', reactions: [{ e: '🟢', n: 5 }] }, { who: 'e25', when: 'today 9:14 AM', text: 'Customer-side incident — Northbrook SSO. Acknowledged, mitigated. Postmortem to follow.' }, ], 'marketing': [ { who: 'e5', when: 'today 8:30 AM', text: 'May review numbers: $268k pipeline influenced, 4.2x ROI. Charts in /marketing > performance.' }, { who: 'e23', when: 'today 9:20 AM', text: 'Stratoscale customer story going live tomorrow. Email blast queued for 10am ET.' }, { who: 'e24', when: 'today 9:51 AM', text: 'LinkedIn ABM crushing it — early CTR on variant A is 3.1%.' }, ], 'product': [ { who: 'e3', when: 'today 8:00 AM', text: 'Reminder: customer health score kickoff is at 1pm today. Allegra owns, looping in @e7 for SLA signals.' }, { who: 'e16', when: 'today 9:14 AM', text: 'Atlas v4 PRD is current as of yesterday. Migrations section is the only open question.' }, ], }; // DM threads const CHAT_DM_THREADS = { 'dm-e2': [ { who: 'e2', when: 'today 9:08 AM', text: 'Hey — can we sync on the Atlas v4 readiness gate today? I want to make sure we\'re aligned on what blocks GA.' }, { who: 'e2', when: 'today 9:09 AM', text: 'I have 2:30 open if that works.' }, ], 'dm-e3': [ { who: 'e3', when: 'yesterday 4:12 PM', text: 'Did you see the customer health score draft? Want to chat through the signal weighting.' }, { who: 'e1', when: 'yesterday 4:18 PM', text: 'Yes! Looks great. Tomorrow 11am?' }, { who: 'e3', when: 'yesterday 4:19 PM', text: 'Done — calendar invite sent 🙏' }, ], 'dm-e20': [ { who: 'e20', when: 'today 8:50 AM', text: 'Stratoscale expansion — they\'re asking for an exec sponsor on our side. Are you good to do a brief sync with their CTO next week?' }, ], 'dm-e6': [ { who: 'e6', when: 'yesterday 5:00 PM', text: 'Wendy\'s offer letter is out. She countersigned within an hour. Start date Jun 2.' }, { who: 'e1', when: 'yesterday 5:04 PM', text: 'Amazing news. Let\'s set up the welcome lunch.' }, ], 'dm-e8': [ { who: 'e8', when: 'today 8:48 AM', text: 'Brand round 2 is up. Curious about your gut reaction before I share more broadly.' }, ], }; function ChatOverlay({ open, onClose, currentUser, initialDM }) { const D = window.HitcentsData; const [activeId, setActiveId] = useState('cmp-atlas-v4'); const [unread, setUnread] = useState(CHAT_UNREAD); const [draft, setDraft] = useState(''); const [replyTo, setReplyTo] = useState(null); // index of message being replied to const [searchQ, setSearchQ] = useState(''); const scrollRef = useRef(null); const { popped, setPopped, pos, onHeaderPointerDown } = usePopout({ x: 220, y: 80 }); // Mark active read on switch useEffect(() => { setUnread(u => ({ ...u, [activeId]: 0 })); setReplyTo(null); if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [activeId, open]); // Open a direct message with a specific person — reuse the existing thread, or spin up a new one useEffect(() => { if (!open || !initialDM || initialDM === currentUser.id) return; const dmId = 'dm-' + initialDM; if (!CHAT_DMS.find(d => d.id === dmId)) { CHAT_DMS.push({ id: dmId, user: initialDM, unread: 0 }); } if (!CHAT_DM_THREADS[dmId]) CHAT_DM_THREADS[dmId] = []; setActiveId(dmId); }, [open, initialDM, currentUser.id]); if (!open) return null; const isDM = activeId.startsWith('dm-'); const channel = isDM ? null : CHAT_CHANNELS.find(c => c.id === activeId); const dm = isDM ? CHAT_DMS.find(d => d.id === activeId) : null; const dmUser = dm ? getEmployee(dm.user) : null; const messages = isDM ? (CHAT_DM_THREADS[activeId] || []) : (CHAT_MESSAGES[activeId] || []); const totalUnread = Object.values(unread).reduce((s,n) => s+n, 0) + CHAT_DMS.reduce((s,d) => s + d.unread, 0); function send() { if (!draft.trim()) return; // Visually append a synthetic message (state-only) const newMsg = { who: currentUser.id, when: 'just now', text: draft }; if (replyTo != null) newMsg.replyTo = replyTo; if (isDM) { CHAT_DM_THREADS[activeId] = [...messages, newMsg]; } else { CHAT_MESSAGES[activeId] = [...messages, newMsg]; } setDraft(''); setReplyTo(null); setTimeout(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, 30); } function onKey(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } } return (
e.stopPropagation()} style={popped ? { left: pos.x, top: pos.y } : undefined}> {/* Sidebar */} {/* Main */}
{isDM ? : {channel?.kind === 'private' ? : '#'}} {isDM ? dmUser?.name : channel?.name} {!isDM && · {channel?.members} members}
{isDM ? dmUser?.title : channel?.topic}
{/* Channel intro */} {!isDM && (
{channel?.kind === 'private' ? : '#'}

Welcome to #{channel?.name}

{channel?.topic} Created by Maren · {channel?.members} members

)} {messages.map((m, i) => { const author = getEmployee(m.who); const ref = (m.replyTo != null && messages[m.replyTo]) ? messages[m.replyTo] : null; const refAuthor = ref ? getEmployee(ref.who) : null; // A reply always starts a fresh group (Discord-style) const showAvatar = ref ? true : (i === 0 || messages[i-1].who !== m.who || messages[i-1].replyTo != null); return (
{showAvatar && }
{ref && ( )} {showAvatar && (
{author?.name} {m.when}
)}
{m.reactions && (
{m.reactions.map(r => ( ))}
)}
); })}
{replyTo != null && messages[replyTo] && (
Replying to {getEmployee(messages[replyTo].who)?.name} {messages[replyTo].text.replace(/[*`#@]/g, '')}
)}