/* ============================================================ Guided Workshop — Creator-as-supporter overlay (shared) The completer drives the workshop. The creator (now acting as supporter) can drop into any live module and co-pilot from the same UI: live presence, inline comment threads, pinned guidance notes, example answers from past submissions, click-to- highlight, and "take over" the active question to fill it in for the completer. Exports onto window: useSupporter(initial) hook + demo data SupporterSessionBanner sticky top banner SupporterDock floating action cluster SupporterGuidanceCard pinned creator note SupporterCoPilotBar sticky bottom bar (sup. only) SupporterTakeoverPulse "supporter is editing" cue SupporterPerspectiveTweaks tweak controls The visual chrome is themed by CSS variables declared in the host page, so the same components fit both v1 (slate-on-white) and v2 (rounded surfaces). See colors_and_type.css consumers. ============================================================ */ const { useState: supUseState, useEffect: supUseEffect, useCallback: supUseCallback, useRef: supUseRef, useMemo: supUseMemo } = React; /* ---------- Demo people ---------- */ const SUPPORTER_PEOPLE = { completer: { id: "completer", name: "Adaeze Nwosu", role: "Compliance Lead", avatar: 47, hue: "#175cd3" }, supporter: { id: "supporter", name: "Adetola Okafor", role: "Module creator", avatar: 14, hue: "#7a5af8" }, }; /* ---------- Pre-written guidance notes (authored by the creator when the module was built). Visible to both perspectives but styled as a soft hint to the completer and as a reference to the supporter. ---------- */ const SUPPORTER_GUIDANCE = { "1.1": { note: "This opening sets context — there's no answer expected here. If the completer asks what 'maturity' means, point them at 2.1 before they go further.", examples: [], examplesSource: null, keypoints: ["Skim, don't dwell"], }, "4.1": { note: "Use evidence the completer has on hand. If they're missing a register, suggest exporting from their asset management tool rather than starting from scratch.", examples: [ "Annual asset inventory + reconciliation", "Tag-and-track for items > $5k", "Quarterly disposal log signed off by Finance", ], examplesSource: { kind: "curated", label: "Curated by the module creator · visible to supporters only" }, keypoints: ["Sources of truth", "Reconciliation cadence", "Sign-off owner"], }, "4.2": { note: "Score against current maturity, not the target. People over-rate themselves here. If there's data but no defined process, that's still 'Initial' — say so.", examples: [ "Initial — data exists, no defined process", "Repeatable — process documented, owner assigned", "Defined — process measured + reviewed annually", ], examplesSource: { kind: "aggregate", label: "Anonymised from 41 submissions across 9 organisations" }, keypoints: ["Honest read", "Process, not artifacts"], }, "5.1": { note: "Open the poll and share the join code on screen. Don't read the question out loud — let people answer cold.", examples: [], examplesSource: null, keypoints: ["Open before reading", "Anonymous responses"], }, "6.1": { note: "Common over-answer. Keep it to one bottleneck, not three. If they list more than one, ask which they'd fix this quarter.", examples: [ "Inventory accuracy drift between systems", "No single owner for write-offs", "Audit trail breaks at vendor handover", ], examplesSource: { kind: "aggregate", label: "Anonymised from 28 submissions across 6 organisations" }, keypoints: ["One bottleneck", "Actionable today"], }, }; /* Demo seed comments anchored to specific item ids. */ const SUPPORTER_COMMENTS_DEMO = { "4.2": [ { who: "completer", text: "I'm not sure how to score this — we have a register but no defined process around it.", ts: "2m ago" }, { who: "supporter", text: "Honest read is 'Initial' then. The label asks about the system, not whether you have data. Pick Initial and drop a note in the comment so we remember why.", ts: "1m ago" }, { who: "completer", text: "Got it — going with Initial.", ts: "just now" }, ], "4.1": [ { who: "supporter", text: "Adaeze — when you get to this one ping me. I've got a template that'll save you 20 mins.", ts: "5m ago" }, ], }; /* ---------- Hook ---------- */ function useSupporter(initialPerspective = "completer") { const [perspective, setPerspective] = supUseState(initialPerspective); const [sessionLive, setSessionLive] = supUseState(true); const [comments, setComments] = supUseState(SUPPORTER_COMMENTS_DEMO); const [highlights, setHighlights] = supUseState({}); const [takenOverItemId, setTakenOver] = supUseState(null); const [openPanel, setOpenPanel] = supUseState(null); /* Completer-side help signals. stuckItems: Set of item ids flagged as "I'm stuck". helpRequested: { ts, note } | null when completer has summoned the creator. Feed the supporter dock + the live-sessions panel on creator-modules.html. */ const [stuckItems, setStuckItems] = supUseState(() => new Set()); const [helpRequested, setHelpRequested] = supUseState(null); const flagStuck = supUseCallback((id, note) => { setStuckItems(prev => { const n = new Set(prev); n.add(id); return n; }); if (note && note.trim()) { setComments(prev => ({ ...prev, [id]: [...(prev[id] || []), { who: "completer", text: "🚩 " + note.trim(), ts: "just now" }], })); } }, []); const unflagStuck = supUseCallback((id) => { setStuckItems(prev => { const n = new Set(prev); n.delete(id); return n; }); }, []); const requestHelp = supUseCallback((note) => { setHelpRequested({ ts: Date.now(), note: (note || "").trim() }); }, []); const cancelHelpRequest = supUseCallback(() => setHelpRequested(null), []); const me = SUPPORTER_PEOPLE[perspective]; const them = SUPPORTER_PEOPLE[perspective === "completer" ? "supporter" : "completer"]; const addComment = supUseCallback((itemId, text) => { if (!text || !text.trim()) return; setComments(prev => ({ ...prev, [itemId]: [...(prev[itemId] || []), { who: perspective, text: text.trim(), ts: "just now" }], })); }, [perspective]); const takeover = supUseCallback((itemId) => setTakenOver(itemId), []); const releaseTakeover = supUseCallback(() => setTakenOver(null), []); /* Highlight = "I'm pointing here" toggle. One per item: clicking again un-pins it. This deliberately ignores any old multi-highlight semantics so the strip can't lie about counts. */ const togglePoint = supUseCallback((itemId) => { setHighlights(prev => { const next = { ...prev }; if (next[itemId] && next[itemId].length > 0) delete next[itemId]; else next[itemId] = [{ by: perspective, label: "pointed at this question", ts: "just now" }]; return next; }); }, [perspective]); const addHighlight = togglePoint; /* legacy name */ const clearHighlights = supUseCallback((itemId) => { setHighlights(prev => { const n = { ...prev }; delete n[itemId]; return n; }); }, []); const commentCount = supUseCallback((id) => (comments[id] || []).length, [comments]); const guidanceFor = supUseCallback((id) => SUPPORTER_GUIDANCE[id] || null, []); /* Total unread badge for the supporter — counts items with completer comments */ const totalThreads = supUseMemo(() => Object.keys(comments).length, [comments]); return { perspective, setPerspective, sessionLive, setSessionLive, me, them, comments, addComment, commentCount, totalThreads, guidance: SUPPORTER_GUIDANCE, guidanceFor, highlights, addHighlight, clearHighlights, takenOverItemId, takeover, releaseTakeover, openPanel, setOpenPanel, stuckItems, flagStuck, unflagStuck, helpRequested, requestHelp, cancelHelpRequest, }; } /* ---------- Tiny presentational helpers ---------- */ function SupAvatar({ id, size = 28, ring, online = true, title }) { return ( {online && } ); } function SupIcon({ name, size = 16 }) { const stroke = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "comment": return ; case "guidance": return ; case "examples": return ; case "highlight": return ; case "takeover": return ; case "close": return ; case "send": return ; case "expand": return ; case "live": return ; case "leave": return ; case "bot": return ; default: return null; } } /* ===================================================================== SessionBanner — sticky top strip when a co-pilot session is live ===================================================================== */ function SupporterSessionBanner({ sup, moduleName = "Asset Management" }) { if (!sup.sessionLive) return null; const isCompleter = sup.perspective === "completer"; /* Tight one-line banner. Drops the module name (already in the page header) and the "module creator" subtitle (already on the Creator badge). Layout: [pulse · LIVE] [avatar pair] You & · CREATOR [End session] */ return (
You & {sup.them.name} {sup.them.id === "supporter" ? "Creator" : "Completer"}
); } /* ===================================================================== GuidanceCard — pinned, inline above question content ===================================================================== */ function SupporterGuidanceCard({ sup, itemId }) { const g = sup.guidanceFor(itemId); if (!g) return null; const isSupporter = sup.perspective === "supporter"; const [expanded, setExpanded] = supUseState(isSupporter); /* default open for supporter */ supUseEffect(() => { setExpanded(isSupporter); }, [itemId, isSupporter]); return ( ); } /* ===================================================================== Dock — floating action cluster pinned to the viewer corner Buttons: Comments [n] · Guidance · Highlight · Take over (supporter only) ===================================================================== */ function SupporterDock({ sup, itemId, position = "tr" }) { const n = sup.commentCount(itemId); const g = sup.guidanceFor(itemId); const isSupporter = sup.perspective === "supporter"; const takenOver = sup.takenOverItemId === itemId; return (
{isSupporter && ( <> )}
); } /* ===================================================================== CommentPanel — popover anchored under the dock ===================================================================== */ function SupporterCommentPanel({ sup, itemId, onClose }) { const list = sup.comments[itemId] || []; const [draft, setDraft] = supUseState(""); const inputRef = supUseRef(null); supUseEffect(() => { const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 80); return () => clearTimeout(t); }, []); const send = () => { if (!draft.trim()) return; sup.addComment(itemId, draft); setDraft(""); }; const onKey = (e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); send(); } if (e.key === "Escape") { e.stopPropagation(); onClose(); } }; const isCompleter = sup.perspective === "completer"; /* Pre-baked openers — one click pre-fills the composer so the user never stares at a blank textarea. Tuned per perspective. */ const quickReplies = isCompleter ? ["Why does this matter?", "Show me an example", "I'm stuck — can you help?"] : ["Looks good — go with that", "Let me walk you through it", "Want me to fill this in?"]; const countLabel = list.length === 0 ? "No messages yet" : list.length === 1 ? "1 message" : `${list.length} messages`; return (