Anatomie

Le composant est une carte centrée limitée à 600px. Elle se divise en trois zones empilées : une barre d'en-tête avec le nom du bot et un indicateur en ligne, une zone de messages scrollable avec une hauteur minimale de 320px, et une ligne de saisie en bas. Les bulles du bot sont alignées à gauche avec un avatar icône de 32px ; les réponses utilisateur sont des bulles colorées alignées à droite avec un coin arrondi inversé. La zone de saisie disparaît une fois toutes les étapes franchies, remplacée par une bulle de confirmation finale.

Comment ça marche

Le state clé comprend deux valeurs : `currentStep` (un entier) et `answers` (un tableau de chaînes). Quand l'utilisateur soumet, la valeur de l'input est ajoutée aux réponses et currentStep s'incrémente. La zone de messages rend `steps.slice(0, currentStep + 1)`, gardant toutes les questions et réponses précédentes visibles. Chaque BotBubble reçoit une prop `delay` : les étapes déjà répondues se montent avec un délai de 0 (elles se restaurent, elles ne se révèlent pas), tandis que la nouvelle étape courante reçoit 0.3s pour simuler la frappe du bot. AnimatePresence enveloppe la liste avec mode='sync' pour que les nouvelles bulles s'insèrent sans démonter les existantes.

Comment le coder en React

1. Définir le tableau de steps

   Chaque étape est un objet avec une question, un inputType ('text' | 'email' | 'textarea') et un placeholder. Passe le tableau en prop pour que le script de conversation reste hors du composant, facile à traduire ou tester en A/B.

   const steps = [
     { question: "What's your name?", inputType: "text", placeholder: "Jane Doe" },
     { question: "Your email?",       inputType: "email", placeholder: "[email protected]" },
     { question: "How can we help?",  inputType: "textarea", placeholder: "Tell us…" },
   ];

2. Gérer le state des étapes

   Garde currentStep et answers dans useState. Le handler de soumission vérifie que inputValue n'est pas vide, l'ajoute aux réponses, vide le champ et incrémente l'étape. Un flag isComplete dérivé de currentStep >= steps.length pilote ce qui s'affiche.

   const [currentStep, setCurrentStep] = useState(0);
   const [answers, setAnswers] = useState<string[]>([]);
   
   const handleSubmit = () => {
     if (!inputValue.trim()) return;
     setAnswers(prev => [...prev, inputValue.trim()]);
     setInputValue("");
     setCurrentStep(prev => prev + 1);
   };

3. Animer les bulles du bot avec un délai stagger

   Le composant BotBubble accepte une prop delay. Passe `delay={0}` pour les étapes déjà vues (elles s'affichent instantanément au re-render) et `delay={0.3}` pour la question fraîchement révélée. Ce petit détail rend le chat vivant sans indicateur de frappe factice.

   <BotBubble
     text={step.question}
     delay={i === currentStep && answers.length === i ? 0.3 : 0}
   />

4. Gérer la soumission au clavier

   Pour les inputs text et email, attache `onKeyDown` pour appeler handleSubmit sur Entrée. Pour le textarea, vérifie aussi `!e.shiftKey` pour permettre les sauts de ligne avec Shift+Entrée avant d'envoyer. Appelle `e.preventDefault()` sur Entrée dans le textarea pour éviter la soumission de formulaire ou les sauts de ligne parasites.

   onKeyDown={(e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
     }
   }}

Quand l'utiliser

Ce pattern est pertinent quand le formulaire de contact est un point de conversion principal et que tu veux réduire la friction perçue : demande de devis d'une agence, inscription à un essai SaaS, présentation d'un studio créatif. La nature séquentielle garde l'utilisateur concentré sur une question à la fois. À éviter si le formulaire dépasse six ou sept étapes (ça devient fastidieux), si les champs doivent être modifiables après soumission, ou si tu as besoin d'une validation serveur par étape avec messages d'erreur en temps réel, l'implémentation actuelle collecte les réponses côté client et les envoie toutes en une fois.

Utilisé par

• Typeform, A popularisé le pattern de formulaire conversationnel une-question-à-la-fois dont ce composant s'inspire.
• Intercom, Utilise des flows en bulles de chat pour la qualification de leads et le routage du support directement sur les sites clients.
• Drift, A construit tout son produit autour de formulaires conversationnels intégrés comme widgets de chat sur les landing pages.

FAQ