Wizard bot update

private/Notes.txt

@@ -45,3 +45,5 @@ docker rename <containet_id> reverse-proxy-frontend
 
 import { makeStyles, useTheme } from "@material-ui/core/styles";
   const theme = useTheme();
+
+  https://www.flaticon.com/free-icon/wizard_2534554?term=wizard&page=1&position=64

src/features/chatbot/components/Wizard.js

@@ -1,21 +1,60 @@
 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: "0",
+      id: "1",
-      message: "Welcome to react chatbot!",
+      message: "I'm the wizard.",
-      trigger: "1"
+      trigger: "2"
     },
     {
-      id: "1",
+      id: "2",
-      message: "Bye!",
+      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 <ChatBot steps={steps} />;
+  return (
+    <ThemeProvider theme={botTheme}>
+      <ChatBot
+        steps={steps}
+        botAvatar="public/icons/wizard.png"
+        headerTitle="Zirhan"
+      />
+    </ThemeProvider>
+  );
 };
 
 export default Wizard;