// Session — demo flow: predefiniowany skrypt, user klika send, NPC odpowiada, po skrypcie auto-end const DEMO_SCRIPT = [ { user: "Hej Marek, masz chwilę? Chciałbym pogadać o czymś, co mnie zastanawia w ostatnich tygodniach.", npc: "Jasne, siadaj. Coś się stało?", }, { user: "Zauważyłem, że przez ostatnie 3 tygodnie spóźniłeś się z dwoma PR-ami i dwa razy nie byłeś na standupie. Wcześniej to nie był twój styl. Co się dzieje?", npc: "No... rzeczywiście trochę się zdarzało. Ale ten PR to nie była moja wina, reviewer siedział dwa dni. A standup... no raz zaspałem, drugi raz był dentysta.", }, { user: "Rozumiem, że były powody. Ale nie chcę rozmawiać o konkretnych przypadkach — bardziej o tym, co się u ciebie ogólnie dzieje. Wszystko ok?", npc: "(pauza) ...szczerze? Nie bardzo. Córka choruje od miesiąca, chodzę z nią po lekarzach. Żona pracuje rano, więc ja ją ogarniam. Nie chciałem tego wyciągać do pracy.", }, { user: "Dzięki, że mi to mówisz. To musi być wyczerpujące — i ogarniać pracę na 100% i troszczyć się o chore dziecko. Jak się trzymasz?", npc: "Średnio. Śpię po 5 godzin, rano jestem rozwalony. Ale staram się nie odpuszczać roboty, bo nie chcę, żeby zespół to odczuł.", }, { user: "Doceniam, że próbujesz — ale widać, że coś się sypie. Pomyślmy razem, jak to ułatwić. Co by pomogło? Zdalny tryb? Przesunięcie deadline'ów? Zdjęcie którejś z odpowiedzialności?", npc: "Najbardziej pomogłaby mi elastyczność rano — móc pracować zdalnie, zawieźć ją do lekarza i potem nadgonić po południu. I może ktoś drugi do review PR-ów, żebym nie był bottleneckiem.", }, { user: "Okej, to się da zrobić. Umawiamy się: zdalnie rano do odwołania, review rozdzielamy z Kasią. Sprawdzimy się za 2 tygodnie. I proszę — mów mi, jak się coś zmieni, zanim to znowu zacznie się sypać.", npc: "Dzięki. Naprawdę. Bałem się, że będzie pretensja, a wyszła rozmowa. Odezwę się, jak coś się zmieni.", }, ]; const Session = ({setRoute, scenario, setEndType}) => { const s = scenario || SCENARIO; // Wybierz scenariusz-skrypt na podstawie scenario.id; fallback: DEMO_SCRIPT (Marek) const scriptPack = (window.SCENARIO_SCRIPTS && s.id && window.SCENARIO_SCRIPTS[s.id]) || null; const SCRIPT = scriptPack ? scriptPack.script : DEMO_SCRIPT; const OPENING = scriptPack ? scriptPack.opening : "Hej. Mówiłeś że chcesz pogadać. O czym?"; const [messages, setMessages] = React.useState([]); const [step, setStep] = React.useState(0); // indeks do SCRIPT const [typing, setTyping] = React.useState(false); const [micOn, setMicOn] = React.useState(false); const [ended, setEnded] = React.useState(false); const [started, setStarted] = React.useState(false); const [showComplete, setShowComplete] = React.useState(false); const scroller = React.useRef(null); const userTurns = messages.filter(m=>m.who==="user").length; const totalTurns = SCRIPT.length; const isLastStep = step >= totalTurns; const currentLine = isLastStep ? null : SCRIPT[step]; React.useEffect(() => { if (scroller.current) scroller.current.scrollTop = scroller.current.scrollHeight; }, [messages, typing, showComplete]); const fmtTime = (offsetSec) => { const start = new Date(Date.now() - 8*60*1000); const t = new Date(start.getTime() + offsetSec*1000); return `${String(t.getHours()).padStart(2,"0")}:${String(t.getMinutes()).padStart(2,"0")}`; }; const startSession = () => { setStarted(true); setTyping(true); setTimeout(()=>{ setMessages([{who:"npc", text:OPENING, t:0}]); setTyping(false); }, 1200); }; const sendNext = () => { if (ended || typing || isLastStep) return; const line = SCRIPT[step]; const baseT = messages.length * 32; setMessages(m=>[...m,{who:"user", text:line.user, t:baseT}]); setTyping(true); setStep(s=>s+1); setTimeout(()=>{ setMessages(m=>[...m, {who:"npc", text:line.npc, t:baseT+20}]); setTyping(false); // Jeśli to była ostatnia linia — pokaż complete state i auto-end if (step + 1 >= totalTurns) { setTimeout(()=>{ setShowComplete(true); setTimeout(()=>end("goal-achieved"), 4200); }, 800); } }, 1100 + Math.random()*700); }; const end = (type="user-initiated") => { if (ended) return; setEnded(true); setEndType && setEndType(type); setTimeout(()=>setRoute("results"), 900); }; const initials = s.npc.name.split(" ").map(x=>x[0]).slice(0,2).join(""); // Demo preview: pokaż user co wyślesz jako następne (albo ghost bubble) const previewText = currentLine ? currentLine.user : ""; return (
{/* Slim header */}
{initials}
{s.npc.name}
{s.npc.role}
{started ? `Tura ${Math.min(userTurns+1,totalTurns)} / ${totalTurns}` : ""}
{/* Body */}
{!started && (
{initials}
{s.npc.name}
{s.npc.role}
{s.npc.mood}
DEMO · klikaj „Wyślij” żeby przejść przez rozmowę
)} {messages.map((m,i) => { const prev = messages[i-1]; const next = messages[i+1]; const firstInGroup = !prev || prev.who !== m.who; const lastInGroup = !next || next.who !== m.who; const firstNpcOrAfterUser = m.who === "npc" && firstInGroup; if (m.who==="npc") return (
{initials}
{firstNpcOrAfterUser && (
{s.npc.name.split(" ")[0]} · {fmtTime(m.t||0)}
)}
{m.text}
); return (
{firstInGroup && (
{fmtTime(m.t||0)}
)}
{m.text}
); })} {typing && (
{initials}
{s.npc.name.split(" ")[0]} pisze…
)} {showComplete && !ended && (
Rozmowa zamknięta
Dotarliście razem do konkretu — ustalenia, follow-up, zaufanie.
Generuję ocenę…
)} {ended && (
Sesja zakończona
)}
{/* Composer — demo mode: pokazuje następną wiadomość jako preview */}
{!started ? (