Anatomía

El componente es una única tarjeta centrada limitada a 600px. La tarjeta tiene tres zonas apiladas verticalmente: una barra de cabecera con el nombre del bot y un indicador de conexión, un área de mensajes scrollable con una altura mínima de 320px, y una fila de entrada en la parte inferior. Las burbujas del bot se sitúan a la izquierda con un avatar de icono de 32px; las respuestas del usuario son burbujas con color de acento alineadas a la derecha con una esquina de border-radius invertida. La fila de entrada desaparece una vez completados todos los pasos, sustituida por una burbuja de confirmación final.

Cómo funciona

El state clave son dos valores: `currentStep` (un entero) y `answers` (un array de strings). Cuando el usuario envía, el valor del input se añade a answers y currentStep se incrementa. El área de mensajes renderiza `steps.slice(0, currentStep + 1)`, por lo que todas las preguntas y respuestas anteriores permanecen visibles. Cada BotBubble recibe una prop `delay`: los pasos ya respondidos se montan con delay 0 (se restauran, no se revelan), mientras que el nuevo paso actual recibe un delay de 0.3s para dar la sensación de que el bot está escribiendo. AnimatePresence envuelve la lista con mode='sync' para que las nuevas burbujas se monten con fluidez sin desmontar las existentes.

Cómo crearlo en React

1. Definir el array de steps

   Cada paso es un objeto simple con una question, un inputType ('text' | 'email' | 'textarea') y un placeholder. Pasa el array como prop para que el guion del chat quede fuera del componente y sea fácil de traducir o probar 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. Gestionar el state de los pasos

   Mantén currentStep y answers en useState. El handler de envío valida que inputValue no esté vacío, lo añade a answers, limpia el campo e incrementa el paso. Un único flag isComplete derivado de currentStep >= steps.length controla lo que se renderiza.

   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. Animar las burbujas del bot con un delay de stagger

   El componente BotBubble acepta una prop delay. Pasa `delay={0}` para los pasos ya vistos (aparecen al instante al re-renderizar) y `delay={0.3}` para la pregunta recién revelada. Esta pequeña distinción hace que el chat se sienta en vivo sin un indicador de escritura falso.

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

4. Gestionar el envío con el teclado

   Para los inputs text y email, asocia `onKeyDown` para llamar a handleSubmit al pulsar Enter. Para el textarea, comprueba además `!e.shiftKey` para que el usuario pueda añadir saltos de línea con Shift+Enter antes de enviar. Llama a `e.preventDefault()` al pulsar Enter en el textarea para evitar el envío del formulario o saltos de línea sobrantes.

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

Cuándo usarlo

Recurre a este patrón cuando el formulario de contacto es un punto de conversión principal y quieres reducir la fricción percibida: una solicitud de presupuesto de agencia, un alta a una prueba SaaS o la presentación de un estudio creativo. La naturaleza secuencial mantiene al usuario centrado en una pregunta a la vez. Evítalo cuando el formulario tiene más de seis o siete pasos (se vuelve pesado), cuando hay que editar los campos tras el envío, o cuando necesitas validación en el servidor por paso con mensajes de error en tiempo real, la implementación actual recopila las respuestas en el cliente y las envía todas de una vez.

Usado por

• Typeform, Popularizó el patrón de formulario conversacional de una pregunta a la vez en el que se inspira este componente.
• Intercom, Usa flujos de UI con burbujas de chat para la cualificación de leads y el enrutado del soporte directamente en los sitios de sus clientes.
• Drift, Construyó todo su producto en torno a formularios conversacionales integrados como widgets de chat en las landing pages.

FAQ