import { useState, useRef, useEffect } from \u00ab\u00a0react\u00a0\u00bb;<\/p>\n
const SYSTEM_PROMPT = `Tu es un formateur expert et p\u00e9dagogue en P\u00f4le 2 – N\u00e9gociation \u00e0 distance et digitalisation du BTS NDRC (Brevet de Technicien Sup\u00e9rieur en N\u00e9gociation \u00e0 Distance et Relation client). Tu connais parfaitement le r\u00e9f\u00e9rentiel du BTS NDRC ainsi que la progression p\u00e9dagogique du P\u00f4le 2. Tu es aussi un expert en WordPress avec le th\u00e8me Astra et les extensions Spectra et Yoast SEO ainsi qu’en Prestashop.<\/p>\n
MISSION : Tu accompagnes les \u00e9tudiants en BTS NDRC dans leurs r\u00e9visions de la mati\u00e8re P\u00f4le 2 tout au long des deux ann\u00e9es d’\u00e9tudes pour les pr\u00e9parer aux examens. Tu r\u00e9ponds \u00e0 leurs questions, proposes des quiz et des exercices. Quand tu ne sais pas, tu les rediriges vers leurs formateurs.<\/p>\n
TONALIT\u00c9 : P\u00e9dagogique, bienveillant, encourageant. Tu utilises le vouvoiement. Tu expliques toujours les notions utilis\u00e9es. Tu cherches \u00e0 accro\u00eetre la motivation de l’apprenant.<\/p>\n
FORMAT DES R\u00c9PONSES :
\n– R\u00e9sum\u00e9 avec notions importantes en gras
\n– Listes \u00e0 puces
\n– Propositions de quiz et exercices pour v\u00e9rifier l’ancrage des savoirs
\n– Tableaux si utile<\/p>\n
PROCESSUS :
\n1. Comprendre la question (th\u00e9orie, pratique, exercice ?)
\n2. Adapter au niveau de l’\u00e9tudiant (1\u00e8re ou 2\u00e8me ann\u00e9e)
\n3. Structurer : introduction courte \u2192 d\u00e9veloppement \u2192 exemple concret \u2192 r\u00e9sum\u00e9
\n4. Toujours v\u00e9rifier la compr\u00e9hension avec une question ou un mini-exercice
\n5. Feedback bienveillant et adaptatif<\/p>\n
CONTRAINTES ABSOLUES :
\n– Respecter strictement le r\u00e9f\u00e9rentiel BTS NDRC P\u00f4le 2
\n– Ne jamais faire le travail \u00e0 la place de l’\u00e9tudiant pour un devoir \u00e9valu\u00e9
\n– Ne jamais inventer des sources, r\u00e9f\u00e9rentiels ou fonctionnalit\u00e9s
\n– Ne jamais juger l’apprenant
\n– Toujours contextualiser dans des situations professionnelles r\u00e9elles (prospection, n\u00e9gociation \u00e0 distance, CRM, e-commerce, relation client digitale)
\n– Favoriser l’apprentissage actif : toujours inclure une question, un exercice ou une mise en situation
\n– Si incertain \u2192 demander clarification. Si hors comp\u00e9tence \u2192 rediriger vers le formateur<\/p>\n
AMORCE : \u00c0 la premi\u00e8re prise de contact, saluer l’apprenant, lui demander o\u00f9 il se situe dans le programme, et lui proposer un quiz r\u00e9capitulatif ou des exercices.`;<\/p>\n
const STORAGE_KEY = \u00ab\u00a0bts_ndrc_sessions\u00a0\u00bb;<\/p>\n
function loadSessions() {
\n try {
\n const raw = localStorage.getItem(STORAGE_KEY);
\n return raw ? JSON.parse(raw) : [];
\n } catch { return []; }
\n}<\/p>\n
function saveSessions(sessions) {
\n try { localStorage.setItem(STORAGE_KEY, JSON.stringify(sessions)); } catch {}
\n}<\/p>\n
function formatDate(iso) {
\n const d = new Date(iso);
\n return d.toLocaleDateString(\u00ab\u00a0fr-FR\u00a0\u00bb, { day: \u00ab\u00a02-digit\u00a0\u00bb, month: \u00ab\u00a0short\u00a0\u00bb, hour: \u00ab\u00a02-digit\u00a0\u00bb, minute: \u00ab\u00a02-digit\u00a0\u00bb });
\n}<\/p>\n
function getPreview(messages) {
\n const first = messages.find(m => m.role === \u00ab\u00a0user\u00a0\u00bb);
\n return first ? first.content.slice(0, 48) + (first.content.length > 48 ? \u00ab\u00a0\u2026\u00a0\u00bb : \u00ab\u00a0\u00a0\u00bb) : \u00ab\u00a0Session vide\u00a0\u00bb;
\n}<\/p>\n
export default function App() {
\n const [sessions, setSessions] = useState(loadSessions);
\n const [activeId, setActiveId] = useState(null);
\n const [messages, setMessages] = useState([]);
\n const [input, setInput] = useState(\u00ab\u00a0\u00a0\u00bb);
\n const [loading, setLoading] = useState(false);
\n const [sidebarOpen, setSidebarOpen] = useState(true);
\n const bottomRef = useRef(null);
\n const fileRef = useRef(null);<\/p>\n
useEffect(() => { bottomRef.current?.scrollIntoView({ behavior: \u00ab\u00a0smooth\u00a0\u00bb }); }, [messages, loading]);<\/p>\n
const persistSession = (id, msgs) => {
\n setSessions(prev => {
\n const existing = prev.find(s => s.id === id);
\n let updated;
\n if (existing) {
\n updated = prev.map(s => s.id === id ? { …s, messages: msgs, updatedAt: new Date().toISOString() } : s);
\n } else {
\n updated = [{ id, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), messages: msgs }, …prev];
\n }
\n saveSessions(updated);
\n return updated;
\n });
\n };<\/p>\n
const newSession = async () => {
\n const id = Date.now().toString();
\n setActiveId(id);
\n setMessages([]);
\n setLoading(true);
\n setSidebarOpen(false);
\n try {
\n const res = await fetch(\u00ab\u00a0https:\/\/api.anthropic.com\/v1\/messages\u00a0\u00bb, {
\n method: \u00ab\u00a0POST\u00a0\u00bb,
\n headers: { \u00ab\u00a0Content-Type\u00a0\u00bb: \u00ab\u00a0application\/json\u00a0\u00bb },
\n body: JSON.stringify({
\n model: \u00ab\u00a0claude-sonnet-4-20250514\u00a0\u00bb,
\n max_tokens: 1000,
\n system: SYSTEM_PROMPT,
\n messages: [{ role: \u00ab\u00a0user\u00a0\u00bb, content: \u00ab\u00a0Bonjour, commence la session.\u00a0\u00bb }]
\n })
\n });
\n const data = await res.json();
\n const text = data.content?.map(b => b.text || \u00ab\u00a0\u00a0\u00bb).join(\u00ab\u00a0\u00a0\u00bb) || \u00ab\u00a0Bonjour !\u00a0\u00bb;
\n const initMsgs = [{ role: \u00ab\u00a0assistant\u00a0\u00bb, content: text }];
\n setMessages(initMsgs);
\n persistSession(id, initMsgs);
\n } catch {
\n const errMsgs = [{ role: \u00ab\u00a0assistant\u00a0\u00bb, content: \u00ab\u00a0Une erreur est survenue. Veuillez r\u00e9essayer.\u00a0\u00bb }];
\n setMessages(errMsgs);
\n persistSession(id, errMsgs);
\n }
\n setLoading(false);
\n };<\/p>\n
const openSession = (s) => {
\n setActiveId(s.id);
\n setMessages(s.messages);
\n setSidebarOpen(false);
\n };<\/p>\n
const deleteSession = (e, id) => {
\n e.stopPropagation();
\n setSessions(prev => { const u = prev.filter(s => s.id !== id); saveSessions(u); return u; });
\n if (activeId === id) { setActiveId(null); setMessages([]); }
\n };<\/p>\n
const sendMessage = async () => {
\n if (!input.trim() || loading || !activeId) return;
\n const userMsg = { role: \u00ab\u00a0user\u00a0\u00bb, content: input.trim() };
\n const newMessages = […messages, userMsg];
\n setMessages(newMessages);
\n setInput(\u00ab\u00a0\u00a0\u00bb);
\n setLoading(true);
\n try {
\n const res = await fetch(\u00ab\u00a0https:\/\/api.anthropic.com\/v1\/messages\u00a0\u00bb, {
\n method: \u00ab\u00a0POST\u00a0\u00bb,
\n headers: { \u00ab\u00a0Content-Type\u00a0\u00bb: \u00ab\u00a0application\/json\u00a0\u00bb },
\n body: JSON.stringify({
\n model: \u00ab\u00a0claude-sonnet-4-20250514\u00a0\u00bb,
\n max_tokens: 1000,
\n system: SYSTEM_PROMPT,
\n messages: newMessages
\n })
\n });
\n const data = await res.json();
\n const text = data.content?.map(b => b.text || \u00ab\u00a0\u00a0\u00bb).join(\u00ab\u00a0\u00a0\u00bb) || \u00ab\u00a0Je n’ai pas pu r\u00e9pondre.\u00a0\u00bb;
\n const finalMsgs = […newMessages, { role: \u00ab\u00a0assistant\u00a0\u00bb, content: text }];
\n setMessages(finalMsgs);
\n persistSession(activeId, finalMsgs);
\n } catch {
\n const errMsgs = […newMessages, { role: \u00ab\u00a0assistant\u00a0\u00bb, content: \u00ab\u00a0Une erreur est survenue.\u00a0\u00bb }];
\n setMessages(errMsgs);
\n persistSession(activeId, errMsgs);
\n }
\n setLoading(false);
\n };<\/p>\n
const handleKey = (e) => {
\n if (e.key === \u00ab\u00a0Enter\u00a0\u00bb && !e.shiftKey) { e.preventDefault(); sendMessage(); }
\n };<\/p>\n
const formatText = (text) => { const blue = \u00ab\u00a0#1a237e\u00a0\u00bb, lightBlue = \u00ab\u00a0#1565c0\u00a0\u00bb;<\/p>\n return (<\/p>\n {\/* Sidebar *\/}<\/p>\n
\n return text.split(\u00ab\u00a0\\n\u00a0\u00bb).map((line, i) => {
\n line = line.replace(\/\\*\\*(.*?)\\*\\*\/g, (_, m) => `${m}<\/strong>`);
\n if (\/^[-\u2022]\\s\/.test(line)) return <\/p>\n;
\n if (\/^\\d+\\.\\s\/.test(line)) return <\/p>\n;
\n if (line.trim() === \u00ab\u00a0\u00a0\u00bb) return
;
\n return <\/p>\n;
\n });
\n };<\/p>\n