Custom component

A step with a component renders any React element. The chatbot passes the steps, step, previousStep and triggerNextStep props to it, typed as CustomComponentProps. See Custom components for more.

Preview

Code

custom-component.tsx

import ChatBot, { type CustomComponentProps, type Step } from 'react-simple-chatbot';

function Summary({ steps }: CustomComponentProps) {
  return (
    <div style={{ width: '100%', lineHeight: 1.6 }}>
      <strong>Your order</strong>
      <div>Name: {steps?.name?.value}</div>
      <div>Plan: {steps?.plan?.value}</div>
    </div>
  );
}

const steps: Step[] = [
  { id: 'ask-name', message: 'What is your name?', trigger: 'name' },
  { id: 'name', user: true, trigger: 'ask-plan' },
  { id: 'ask-plan', message: 'Which plan do you want, {previousValue}?', trigger: 'plan' },
  {
    id: 'plan',
    options: [
      { label: 'Free', trigger: 'summary' },
      { label: 'Pro', trigger: 'summary' },
      { label: 'Team', trigger: 'summary' }
    ]
  },
  { id: 'summary', component: <Summary />, end: true }
];

export default function CustomComponent() {
  return <ChatBot headerTitle="Custom component" steps={steps} />;
}

How it works

• steps has the rendered steps by id, so steps.name.value is the name typed by the user and steps.plan.value is the chosen plan.
• The props are optional in CustomComponentProps, so the component reads them with optional chaining.
• DOM elements like <div /> do not receive the props, use a component to read them.