reverse-proxy-frontend/src/features/chatbot/components/Wizard.js

import React from "react";
import PropTypes from "prop-types";
import ChatBot from "react-simple-chatbot";
import { ThemeProvider } from "styled-components";
import { useTheme } from "@material-ui/core/styles";

const Wizard = ({ dismissBot }) => {
  const theme = useTheme();

  const botTheme = {
    background: "#f5f8fb",
    fontFamily: "monospace",
    headerBgColor: theme.palette.primary.main,
    headerFontColor: "#fff",
    headerFontSize: "16px",
    botBubbleColor: theme.palette.primary.main,
    botFontColor: "#fff",
    userBubbleColor: "#fff",
    userFontColor: "#4a4a4a"
  };

  const steps = [
    {
      id: "1",
      message: "I'm the wizard.",
      trigger: "2"
    },
    {
      id: "2",
      message: "I know everything about nothing. What do you want to ask me?",
      trigger: "3"
    },
    {
      id: "3",
      message: "Please hurry. I don't have time to waste.",
      trigger: "4"
    },
    {
      id: "4",
      user: true,
      trigger: "5"
    },
    {
      id: "5",
      message: "I don't have time for that. Ask me something serious.",
      trigger: "6"
    },
    {
      id: "6",
      user: true,
      trigger: "7"
    },
    {
      id: "7",
      message:
        "I don't think I understand '{previousValue}'. You mean, like, flowers?",
      trigger: "8"
    },
    {
      id: "8",
      user: true,
      trigger: "9"
    },
    {
      id: "9",
      message: "I think you're wasting my time. Farewell!",
      end: true
    }
  ];

  const handleEnd = () => {
    setTimeout(dismissBot, 3000);
  };

  return (
    <ThemeProvider theme={botTheme}>
      <ChatBot
        handleEnd={handleEnd}
        steps={steps}
        botAvatar="public/icons/wizard.png"
        headerTitle="Zirhan"
      />
    </ThemeProvider>
  );
};

Wizard.propTypes = {
  dismissBot: PropTypes.func.isRequired
};

export default Wizard;