Linked 2nd and 3rd levels

app/src/App.jsx

@@ -9,12 +9,18 @@ import Noncense from './components/blockchain/Noncense.jsx';
 import Intro2 from './components/blockchain/intro2.jsx';
 import Window from './components/Window.jsx';
 import Result from './components/Result.jsx';
+import HelpBot from './components/HelpBot.jsx';
 
 function App(){
     return (
         <BrowserRouter>
             <Routes>
-                <Route path="/" element={<Login />} />
+                <Route path="/" element={
+                    <>
+                    <Window />
+                    <HelpBot
+                    level={2}/>
+                    </>} />
                 {/* <Route path="/Level-1(1)" element={<Mandelbrot />} />
                 <Route path="/Level-1(2)" element={<MandelbrotFractal />} />
                 <Route path="/intro1" element={<Rain />} /> 

app/src/components/HelpBot.jsx

@@ -1,9 +1,13 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ChatBot from "react-simple-chatbot";
 import alluArjun from "../assets/alluArjun.png";
 import ohMyGoddo from "../assets/ohMyGoddo.png";
+import { useNavigate } from 'react-router-dom';
 
 const HelpBot = ({ level = 1 }) => {
+
+  const navigate = useNavigate();
+
   const getInitialSteps = (level) => {
     if (level === 1) {
       return [
@@ -100,17 +104,27 @@ const HelpBot = ({ level = 1 }) => {
           id: "hacker-input",
         user: true,
         trigger: (inputValue) => {
-          if (inputValue === 'bad munda') {
-            return 'next-level';
+          console.log(inputValue.value);
+          console.log(inputValue.value === 'bad');
+          if (inputValue.value === 'bad') {
+            console.log('correct');
+            return 'congo-msg';
           } else {
             return 'wrong-ans';
           }
         },
+      },
+      {
+        id: "congo-msg",
+        message: "Correct answer! You found the hacker!",
+        trigger: 'next-level',
       },
         {
           id: "next-level",
-          message: "Congrats, you found the hacker! Let's move on to blockchain now.",
-          trigger: 2,
+          component: (
+            <RedirectComponent navigate={navigate} />
+          ),
+          end: true,
         },
         {
           id: "wrong-ans",
@@ -177,4 +191,17 @@ const HelpBot = ({ level = 1 }) => {
   );
 };
 
+
+const RedirectComponent = ({ navigate }) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      navigate('/intro2');
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [navigate]);
+
+  return <div>Redirecting to the next level...</div>;
+};
+
 export default HelpBot;