/* global React */ const { useState, useEffect, useRef } = React; /* ---------- animated line chart ---------- */ function LineChart({ pts, max = 10, from = 'S1', to = 'S6', delta }) { const W = 320, H = 116; const ref = useRef(null); const [len, setLen] = useState(0); const [shown, setShown] = useState(false); const path = pts.map((p, i) => `${i ? 'L' : 'M'} ${(i / (pts.length - 1)) * W} ${H - (p / max) * (H - 16) - 8}`).join(' '); useEffect(() => { if (ref.current) setLen(ref.current.getTotalLength()); const t = setTimeout(() => setShown(true), 60); return () => clearTimeout(t); }, []); const lastX = W, lastY = H - (pts[pts.length - 1] / max) * (H - 16) - 8; return (
Stakeholder confidence (self-rated) {delta && ▲ {delta}}
{[0.25, 0.5, 0.75].map((g) => ( ))}
{from}{to}
); } /* ---------- animated horizontal bars ---------- */ function Bars({ items }) { const [shown, setShown] = useState(false); useEffect(() => { const t = setTimeout(() => setShown(true), 80); return () => clearTimeout(t); }, []); return (
{items.map((it, i) => (
{it.label} {it.note}
))}
); } /* ---------- scripted answers ---------- */ const ANSWERS = { progress: { q: "How is Devon progressing on his leadership goals?", body: (<>Across 4 sessions, Devon's stakeholder confidence climbed from 3 → 7 / 10. He now leads client retros solo. The one area still flagged: giving upward feedback to senior peers.), chart: , }, risk: { q: "Who's at risk of disengaging?", body: (<>Two pairings show declining momentum - fewer sessions and shorter notes. I'd nudge these this week.), chart: , }, themes: { q: "What themes came up across sessions this quarter?", body: (<>The dominant threads from 142 sessions, ranked by frequency:), chart: , }, impact: { q: "Summarise the programme's impact so far", body: (<>Strong signal this quarter - engagement and confidence both up, and managers are seeing it land in performance reviews.), chart: (
{[['+34%', 'avg confidence'], ['91%', 'session attendance'], ['4.7', 'mentee NPS-equiv']].map(([n, l]) => (
{n}
{l}
))}
), }, }; const SUGGESTIONS = ['progress', 'risk', 'themes', 'impact']; const SUGG_LABEL = { progress: "Devon's progress", risk: 'Who\u2019s at risk?', themes: 'Top themes', impact: 'Programme impact' }; function matchAnswer(text) { const t = text.toLowerCase(); if (/risk|disengag|drop|losing|inactive/.test(t)) return 'risk'; if (/theme|topic|pattern|common|across/.test(t)) return 'themes'; if (/impact|roi|summar|overall|result|working/.test(t)) return 'impact'; if (/progress|devon|goal|confidence|improv/.test(t)) return 'progress'; return 'progress'; } /* ---------- the chat demo ---------- */ function ChatDemo() { const [msgs, setMsgs] = useState([ { role: 'ai', body: (<>Hi - I'm your programme co-pilot. I've read every session across Acme's mentorship programme. Ask me anything, or try a suggestion below.) }, ]); const [typing, setTyping] = useState(false); const [input, setInput] = useState(''); const [used, setUsed] = useState([]); const scroller = useRef(null); useEffect(() => { if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [msgs, typing]); function ask(key, rawText) { if (typing) return; const a = ANSWERS[key]; const userText = rawText || a.q; setMsgs((m) => [...m, { role: 'user', body: userText }]); setInput(''); setUsed((u) => (u.includes(key) ? u : [...u, key])); setTyping(true); setTimeout(() => { setTyping(false); setMsgs((m) => [...m, { role: 'ai', body: a.body, chart: a.chart }]); }, 1100); } function submit(e) { e.preventDefault(); if (!input.trim() || typing) return; ask(matchAnswer(input), input.trim()); } const remaining = SUGGESTIONS.filter((s) => !used.includes(s)); return (
{/* header */}
Ask your programme
Acme · 142 sessions indexed
live
{/* messages */}
{msgs.map((m, i) => m.role === 'user' ? (
{m.body}
) : (
{m.body}{m.chart}
))} {typing && (
{[0, 1, 2].map((d) => )}
)}
{/* suggested prompts (no free input — this is a demo) */}
Try asking
{SUGGESTIONS.map((s) => ( ))}
); } Object.assign(window, { ChatDemo });