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

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

const Wizard = () => {
  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: "Hi {previousValue}, nice to meet you!",
      end: true
    }
  ];

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

export default Wizard;