feat: Added chatbot feature to HomePage

package.json

@@ -18,9 +18,9 @@
     "motion": "^12.23.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.5.2",
+    "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
-    "react-router-dom": "^7.6.3",
+    "react-router-dom": "^7.8.1",
     "styled-jsx": "^5.1.7",
     "tailwindcss": "^4.1.11"
   },

src/App.jsx

@@ -1,47 +1,132 @@
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import HomePage from './components/HomePage';
-import Dashboard from './components/Dashboard';
-import { TransactionProvider } from './components/TransactionContext';
-import { Toaster } from 'react-hot-toast';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { Toaster } from "react-hot-toast";
+
+// Contexts
+import { TransactionProvider } from "./components/TransactionContext";
 import { CurrencyProvider } from "./components/CurrencyContext";
-import AboutPage from './components/AboutPage';
-import ContactPage from './components/ContactPage';
-import GoalsPage from './components/GoalsPage';
-import IncomeHistoryPage from './components/IncomeHistoryPage';
+
+// Pages
+import HomePage from "./components/HomePage";
+import Dashboard from "./components/Dashboard";
+import AboutPage from "./components/AboutPage";
+import ContactPage from "./components/ContactPage";
+import GoalsPage from "./components/GoalsPage";
+import IncomeHistoryPage from "./components/IncomeHistoryPage";
 import ExpenseHistoryPage from "./components/ExpenseHistoryPage";
-import TrackExpenses from './components/TrackExpenses';
-import SmartAnalytics from './components/SmartAnalytics';
-import BudgetGoals from './components/BudgetGoals';
-import VisualReports from './components/VisualReports';
-import LoginPage from './components/LoginPage';
-import SignupPage from './components/SignupPage';
+import TrackExpenses from "./components/TrackExpenses";
+import SmartAnalytics from "./components/SmartAnalytics";
+import BudgetGoals from "./components/BudgetGoals";
+import VisualReports from "./components/VisualReports";
+import LoginPage from "./components/LoginPage";
+import SignupPage from "./components/SignupPage";
 
+// ⭐ Import chatbot
+import Chatbot from "./components/Chatbot";
 
-export default function App() {
+// Optional: Protected route wrapper
+const ProtectedRoute = ({ children }) => {
+  const isAuthenticated = localStorage.getItem("authToken"); // Example check
+  return isAuthenticated ? children : <LoginPage />;
+};
+
+// Not Found Page
+const NotFoundPage = () => (
+  <div style={{ textAlign: "center", marginTop: "50px" }}>
+    <h1>404 - Page Not Found</h1>
+    <p>The page you are looking for does not exist.</p>
+  </div>
+);
 
+export default function App() {
   return (
     <TransactionProvider>
       <CurrencyProvider>
         <Router>
-          <Toaster />
+          {/* Toast Notifications */}
+          <Toaster position="top-right" reverseOrder={false} />
+
           <Routes>
+            {/* Public Routes */}
             <Route path="/" element={<HomePage />} />
-            <Route path="/dashboard" element={<Dashboard/>} />
             <Route path="/about" element={<AboutPage />} />
             <Route path="/contact" element={<ContactPage />} />
-            <Route path="/goals" element={<GoalsPage />} />
-            <Route path="/income-history" element={<IncomeHistoryPage />} />
-            <Route path="/expense-history" element={<ExpenseHistoryPage />} />
-            <Route path="/track-expenses" element={<TrackExpenses />} /> 
-            <Route path="/smart-analytics" element={<SmartAnalytics />} /> 
-            <Route path="/budget-goals" element={<BudgetGoals />} /> 
-            <Route path="/visual-reports" element={<VisualReports />} />
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignupPage />} />
 
+            {/* Protected Routes */}
+            <Route
+              path="/dashboard"
+              element={
+                <ProtectedRoute>
+                  <Dashboard />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/goals"
+              element={
+                <ProtectedRoute>
+                  <GoalsPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/income-history"
+              element={
+                <ProtectedRoute>
+                  <IncomeHistoryPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/expense-history"
+              element={
+                <ProtectedRoute>
+                  <ExpenseHistoryPage />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/track-expenses"
+              element={
+                <ProtectedRoute>
+                  <TrackExpenses />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/smart-analytics"
+              element={
+                <ProtectedRoute>
+                  <SmartAnalytics />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/budget-goals"
+              element={
+                <ProtectedRoute>
+                  <BudgetGoals />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/visual-reports"
+              element={
+                <ProtectedRoute>
+                  <VisualReports />
+                </ProtectedRoute>
+              }
+            />
+
+            {/* Catch-all for undefined routes */}
+            <Route path="*" element={<NotFoundPage />} />
           </Routes>
+
+          {/* ⭐ Chatbot visible everywhere */}
+          <Chatbot />
         </Router>
       </CurrencyProvider>
     </TransactionProvider>
   );
-}
+}

src/components/Chatbot.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+const Chatbot = () => {
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState([
+    { from: "bot", text: "Hi! I’m your guide bot. How can I help you?" }
+  ]);
+  const [input, setInput] = useState("");
+
+  const sendMessage = () => {
+    if (input.trim() === "") return;
+    setMessages([...messages, { from: "user", text: input }]);
+    setMessages(prev => [
+      ...prev,
+      { from: "bot", text: "Thanks for your message! (Demo response)" }
+    ]);
+    setInput("");
+  };
+
+  return (
+    <div>
+      {/* Chatbot button */}
+      <button 
+        onClick={() => setOpen(!open)} 
+        style={{
+          position: "fixed",
+          bottom: "20px",
+          right: "20px",
+          padding: "10px 15px",
+          borderRadius: "50%",
+          background: "#007bff",
+          color: "white",
+          fontSize: "20px",
+          border: "none",
+          cursor: "pointer",
+          zIndex: 1000
+        }}>
+        💬
+      </button>
+
+      {/* Chat window */}
+      {open && (
+        <div style={{
+          position: "fixed",
+          bottom: "80px",
+          right: "20px",
+          width: "300px",
+          height: "400px",
+          border: "1px solid #ccc",
+          borderRadius: "10px",
+          background: "white",
+          display: "flex",
+          flexDirection: "column",
+          zIndex: 1000
+        }}>
+          <div style={{ flex: 1, padding: "10px", overflowY: "auto" }}>
+            {messages.map((msg, i) => (
+              <div key={i} style={{ margin: "5px 0", textAlign: msg.from === "user" ? "right" : "left" }}>
+                <b>{msg.from === "user" ? "You" : "Bot"}:</b> {msg.text}
+              </div>
+            ))}
+          </div>
+          <div style={{ display: "flex", borderTop: "1px solid #ccc" }}>
+            <input
+              style={{ flex: 1, padding: "5px" }}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && sendMessage()}
+              placeholder="Type a message..."
+            />
+            <button onClick={sendMessage} style={{ padding: "5px 10px" }}>Send</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Chatbot;