Anatomy

The component is a single centered card capped at 600px. The card has three zones stacked vertically: a header bar with the bot name and an online indicator, a scrollable message area with a minimum height of 320px, and an input row at the bottom. Bot bubbles sit on the left with a 32px icon avatar; user replies are right-aligned accent-colored bubbles with a flipped border-radius corner. The input row disappears once all steps are complete, replaced by a final confirmation bubble.

How it works

The key state is two values: `currentStep` (an integer) and `answers` (a string array). When the user submits, the input value is pushed into answers and currentStep increments. The message area renders `steps.slice(0, currentStep + 1)`, so all previous questions and answers stay visible. Each BotBubble receives a `delay` prop: steps that have already been answered mount with delay 0 (they are restoring, not revealing), while the current new step gets a 0.3s delay to feel like the bot is typing. AnimatePresence wraps the list with mode='sync' so new bubbles mount smoothly without unmounting existing ones.

How to build it in React

1. Define the steps array

   Each step is a plain object with a question string, an inputType ('text' | 'email' | 'textarea') and a placeholder. Pass the array as a prop so the chat script stays outside the component and is easy to translate or A/B test.

   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. Manage step state

   Keep currentStep and answers in useState. The submit handler validates that inputValue is not empty, appends it to answers, clears the field and increments the step. A single isComplete flag derived from currentStep >= steps.length drives what renders.

   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. Animate bot bubbles with a stagger delay

   The BotBubble component accepts a delay prop. Pass `delay={0}` for already-seen steps (they appear instantly on re-render) and `delay={0.3}` for the freshly revealed question. This tiny distinction makes the chat feel live without a fake typing indicator.

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

4. Handle keyboard submit

   For text and email inputs, attach `onKeyDown` to call handleSubmit on Enter. For textarea, also check `!e.shiftKey` so the user can add newlines with Shift+Enter before sending. Call `e.preventDefault()` on Enter in the textarea to avoid form submission or extra newlines.

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

When to use it

Reach for this pattern when the contact form is a primary conversion point and you want to lower perceived friction, such as an agency quote request, a SaaS trial signup, or a creative studio introduction. The sequential nature keeps the user focused on one question at a time. Avoid it when the form has more than six or seven steps (it becomes a chore), when fields need to be edited after submission, or when you need server-side validation per step with real-time error messages, the current implementation collects answers client-side and sends them all at once.

Used by

• Typeform, Popularized the one-question-at-a-time conversational form pattern that this component is inspired by.
• Intercom, Uses chat bubble UI flows for lead qualification and support routing directly on client websites.
• Drift, Built its entire product around conversational forms embedded as chat widgets on landing pages.

FAQ