"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { upsertDemoConversation, useDemoBrowserState, } from "@/lib/demo-session-store"; import type { CoachMessageSource, DemoCoachConversationRecord, } from "@/lib/types"; type CoachReplyResponse = { assistantMessage: { id: string; conversationId: string; role: "assistant"; content: string; createdAt: string; sources: CoachMessageSource[]; }; }; async function readJson(response: Response) { const payload = (await response.json()) as T | { error?: string }; if (!response.ok) { const errorPayload = payload as { error?: string }; throw new Error(errorPayload.error ?? "La requete a echoue."); } return payload as T; } function formatConversationDate(value: string | null) { if (!value) { return "Aucune activite"; } return new Intl.DateTimeFormat("fr-FR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", }).format(new Date(value)); } function formatMessageTime(value: string) { return new Intl.DateTimeFormat("fr-FR", { hour: "2-digit", minute: "2-digit", }).format(new Date(value)); } function normalizeWhitespace(value: string) { return value.replace(/\s+/g, " ").trim(); } function createConversationTitle(seed?: string) { const normalized = normalizeWhitespace(seed ?? ""); return normalized.length > 0 ? normalized.slice(0, 96).trimEnd() : "Nouvelle conversation"; } function createConversationRecord(seed?: string): DemoCoachConversationRecord { const now = new Date().toISOString(); return { id: crypto.randomUUID(), title: createConversationTitle(seed), messageCount: 0, createdAt: now, updatedAt: now, lastMessageAt: null, messages: [], }; } function SourcePill({ source }: { source: CoachMessageSource }) { const colorClass = source.kind === "knowledge" ? "bg-[rgba(23,117,186,0.08)] text-[var(--primary)]" : source.kind === "report" ? "bg-[rgba(193,22,27,0.08)] text-[var(--accent-red)]" : source.kind === "profile" ? "bg-[rgba(216,142,4,0.14)] text-[var(--accent-gold)]" : "bg-[var(--surface-soft)] text-[var(--foreground)]"; return (
{source.label} {typeof source.similarity === "number" ? ( {(source.similarity * 100).toFixed(0)}% ) : null}

{source.detail}

); } export function CoachShell() { const messagesEndRef = useRef(null); const browserState = useDemoBrowserState(); const [selectedConversationId, setSelectedConversationId] = useState( null, ); const [draft, setDraft] = useState(""); const [bootstrapping, setBootstrapping] = useState(true); const [pending, setPending] = useState(false); const [error, setError] = useState(null); const conversations = browserState.conversations; const selectedConversation = useMemo( () => conversations.find((conversation) => conversation.id === selectedConversationId) ?? null, [conversations, selectedConversationId], ); const messages = useMemo( () => selectedConversation?.messages ?? [], [selectedConversation], ); useEffect(() => { setSelectedConversationId((current) => current ?? conversations[0]?.id ?? null); setBootstrapping(false); }, [conversations]); useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [messages, pending]); function handleNewConversation() { if (pending) { return; } const nextConversation = createConversationRecord(); upsertDemoConversation(nextConversation); setSelectedConversationId(nextConversation.id); setError(null); } async function handleSubmit(event: React.FormEvent) { event.preventDefault(); const content = draft.trim(); if (!content || pending) { return; } setPending(true); setError(null); const previousDraft = draft; setDraft(""); try { const conversation = selectedConversation ?? createConversationRecord(content); if (!selectedConversation) { upsertDemoConversation(conversation); setSelectedConversationId(conversation.id); } const response = await fetch("/api/coach/reply", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ conversationId: conversation.id, history: conversation.messages, userMessage: content, onboardingPromptContext: browserState.onboarding.promptContext, actionPlanPrompt: browserState.onboarding.actionPlanPrompt, recentSessions: browserState.sessions.slice(0, 5).map((session) => ({ scenarioTitle: session.scenarioSnapshot.title, scenarioTargetSkill: session.scenarioSnapshot.targetSkill, status: session.status, updatedAt: session.updatedAt, finalAssessment: session.finalAssessment ? { summary: session.finalAssessment.summary, readiness: session.finalAssessment.readiness, actionPlan: session.finalAssessment.actionPlan, } : null, })), }), }); const payload = await readJson(response); const now = new Date().toISOString(); const userMessage = { id: crypto.randomUUID(), conversationId: conversation.id, role: "user" as const, content, createdAt: now, sources: [], }; const assistantMessage = payload.assistantMessage; const nextConversation: DemoCoachConversationRecord = { ...conversation, title: conversation.messageCount === 0 ? createConversationTitle(content) : conversation.title, messageCount: conversation.messageCount + 2, updatedAt: assistantMessage.createdAt, lastMessageAt: assistantMessage.createdAt, messages: [...conversation.messages, userMessage, assistantMessage], }; upsertDemoConversation(nextConversation); setSelectedConversationId(nextConversation.id); } catch (caughtError) { setDraft(previousDraft); setError( caughtError instanceof Error ? caughtError.message : "Le coach n'a pas pu repondre.", ); } finally { setPending(false); } } if (bootstrapping) { return (

Coach

Initialisation du coach...

); } return (

Mode coach

{selectedConversation?.title ?? "Nouvelle conversation"}

Le coach croise votre contexte, vos rapports de simulation et la base documentaire locale. En cas de source insuffisante, il le signale explicitement.

{selectedConversation ? (
{selectedConversation.messageCount} message {selectedConversation.messageCount > 1 ? "s" : ""}
) : null}
{messages.length > 0 ? (
{messages.map((message) => { const isAssistant = message.role === "assistant"; return (
{isAssistant ? "Coach" : "Vous"} • {formatMessageTime(message.createdAt)}

{message.content}

{isAssistant && message.sources.length > 0 ? (

Sources mobilisees

{message.sources.map((source) => ( ))}
) : null}
); })} {pending ? (
Coach • analyse en cours
) : null}
) : (

Coach disponible

Posez une question sur votre pratique manageriale.

Exemple : Aidez-moi a preparer un entretien difficile avec une equipe en transformation. Ou bien : Que retenir de mes derniers rapports pour mon prochain point d'equipe ?

)}
{error ? (
{error}
) : null}