const { useState, useRef, useEffect, useCallback } = React; // ─── Stepper steps ────────────────────────────────────────── const CHAT_STEPS = [ { id: 'qualification', label: 'Qualification' }, { id: 'documents', label: 'Documents' }, { id: 'paiement', label: 'Paiement' }, { id: 'analyse', label: 'Analyse' }, { id: 'rapport', label: 'Rapport' } ]; function Chat({ dossierId, onPaymentComplete }) { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [isLoading, setIsLoading] = useState(false); const [checkoutUrl, setCheckoutUrl] = useState(null); const [currentStep, setCurrentStep] = useState(0); const messagesEndRef = useRef(null); const textareaRef = useRef(null); // Auto-scroll useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); // Premier message automatique useEffect(() => { if (dossierId && messages.length === 0) { sendMessage("Bonjour"); } }, [dossierId]); // Auto-resize textarea useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = 'auto'; textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + 'px'; } }, [input]); // Advance stepper based on conversation state useEffect(() => { if (checkoutUrl) setCurrentStep(2); else if (messages.length > 4) setCurrentStep(1); }, [messages.length, checkoutUrl]); const PAID_STATUTS = ['paid', 'analysing', 'building_expert', 'costing', 'reviewing', 'challenging', 'drafting', 'delivered', 'error']; const pollForPayment = useCallback((id) => { const pollInterval = setInterval(async () => { try { const res = await fetch(`/api/session/${id}`); if (!res.ok) return; const data = await res.json(); if (data.statut && PAID_STATUTS.includes(data.statut)) { clearInterval(pollInterval); if (onPaymentComplete) onPaymentComplete(); } } catch (e) { /* silence */ } }, 5000); // Cleanup after 30 min max setTimeout(() => clearInterval(pollInterval), 30 * 60 * 1000); }, [onPaymentComplete]); const sendMessage = useCallback(async (text) => { const userText = text || input.trim(); if (!userText || isLoading) return; // Sanitize input client-side const sanitized = userText .replace(//g, '>') .slice(0, 5000); if (text !== "Bonjour") { setMessages(prev => [...prev, { role: 'user', content: sanitized }]); } setInput(''); setIsLoading(true); try { const response = await fetch(`/api/session/${dossierId}/chat`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: sanitized }) }); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } const reader = response.body.getReader(); const decoder = new TextDecoder(); let assistantText = ''; let quickActions = []; setMessages(prev => [...prev, { role: 'assistant', content: '', quickActions: [] }]); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); const lines = chunk.split('\n'); for (const line of lines) { if (!line.startsWith('data: ')) continue; try { const data = JSON.parse(line.slice(6)); if (data.type === 'text') { assistantText += data.content; setMessages(prev => { const updated = [...prev]; updated[updated.length - 1] = { role: 'assistant', content: assistantText, quickActions }; return updated; }); } if (data.type === 'quick_actions' && Array.isArray(data.actions)) { quickActions = data.actions; setMessages(prev => { const updated = [...prev]; updated[updated.length - 1] = { ...updated[updated.length - 1], quickActions }; return updated; }); } if (data.type === 'tool' && data.name === 'create_checkout' && data.result?.checkoutUrl) { setCheckoutUrl(data.result.checkoutUrl); pollForPayment(dossierId); } if (data.type === 'error') { assistantText += '\n\n⚠ Erreur technique, veuillez reessayer.'; setMessages(prev => { const updated = [...prev]; updated[updated.length - 1] = { role: 'assistant', content: assistantText, quickActions: [] }; return updated; }); } } catch (e) { /* ignore non-JSON */ } } } } catch (err) { setMessages(prev => [...prev, { role: 'assistant', content: 'Erreur de connexion. Veuillez rafraichir la page et reessayer.', quickActions: [] }]); } finally { setIsLoading(false); } }, [dossierId, input, isLoading]); const handleKeyDown = useCallback((e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }, [sendMessage]); function formatText(text) { if (!text) return ''; return text .replace(/\*\*(.*?)\*\*/g, '$1') .replace(/\n/g, '
'); } return (
{/* ── Stepper ─────────────────────────────────────── */}
{CHAT_STEPS.map((step, i) => ( {i > 0 && (
)}
{i < currentStep ? '✓' : i + 1}
{step.label}
))}
{/* ── Messages ────────────────────────────────────── */}
{messages.map((msg, i) => (
{/* Avatar */}
{msg.role === 'assistant' ? 'AI' : ( )}
{/* Bubble */}
{/* Quick actions */} {msg.role === 'assistant' && msg.quickActions?.length > 0 && (
{msg.quickActions.map((action, j) => ( ))}
)}
))} {/* Typing indicator */} {isLoading && messages[messages.length - 1]?.role !== 'assistant' && (
AI
)} {/* Bouton paiement */} {checkoutUrl && (

Votre dossier est pret

Lancez l'analyse pour recevoir votre rapport par email

Payer et lancer l'analyse

Paiement securise via Stripe — Droit de retractation L221-28

)}
{/* ── Input bar ───────────────────────────────────── */}