From e11d90f4c750862504355a1054e4371c027993dd Mon Sep 17 00:00:00 2001 From: Akhila21-6 Date: Wed, 20 Aug 2025 18:29:13 +0530 Subject: [PATCH] feat(chatbot): add chatbot component and integrate in App --- package-lock.json | 24 +++---- package.json | 4 +- src/App.jsx | 137 ++++++++++++++++++++++++++++++------- src/components/Chatbot.jsx | 79 +++++++++++++++++++++ 4 files changed, 204 insertions(+), 40 deletions(-) create mode 100644 src/components/Chatbot.jsx diff --git a/package-lock.json b/package-lock.json index 5df1e12..08744a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,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" }, @@ -3733,9 +3733,9 @@ } }, "node_modules/react-hot-toast": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz", - "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz", + "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==", "license": "MIT", "dependencies": { "csstype": "^3.1.3", @@ -3775,9 +3775,9 @@ } }, "node_modules/react-router": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.0.tgz", - "integrity": "sha512-3FUYSwlvB/5wRJVTL/aavqHmfUKe0+Xm9MllkYgGo9eDwNdkvwlJGjpPxono1kCycLt6AnDTgjmXvK3/B4QGuw==", + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.1.tgz", + "integrity": "sha512-5cy/M8DHcG51/KUIka1nfZ2QeylS4PJRs6TT8I4PF5axVsI5JUxp0hC0NZ/AEEj8Vw7xsEoD7L/6FY+zoYaOGA==", "license": "MIT", "dependencies": { "cookie": "^1.0.1", @@ -3797,12 +3797,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.0.tgz", - "integrity": "sha512-wwGS19VkNBkneVh9/YD0pK3IsjWxQUVMDD6drlG7eJpo1rXBtctBqDyBm/k+oKHRAm1x9XWT3JFC82QI9YOXXA==", + "version": "7.8.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.1.tgz", + "integrity": "sha512-NkgBCF3sVgCiAWIlSt89GR2PLaksMpoo3HDCorpRfnCEfdtRPLiuTf+CNXvqZMI5SJLZCLpVCvcZrTdtGW64xQ==", "license": "MIT", "dependencies": { - "react-router": "7.7.0" + "react-router": "7.8.1" }, "engines": { "node": ">=20.0.0" diff --git a/package.json b/package.json index 87671d1..d400d6f 100644 --- a/package.json +++ b/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" }, diff --git a/src/App.jsx b/src/App.jsx index 41a5557..7296e23 100644 --- a/src/App.jsx +++ b/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 : ; +}; + +// Not Found Page +const NotFoundPage = () => ( +
+

404 - Page Not Found

+

The page you are looking for does not exist.

+
+); +export default function App() { return ( - + {/* Toast Notifications */} + + + {/* Public Routes */} } /> - } /> } /> } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> } /> } /> + {/* Protected Routes */} + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + {/* Catch-all for undefined routes */} + } /> + + {/* ⭐ Chatbot visible everywhere */} + ); -} \ No newline at end of file +} diff --git a/src/components/Chatbot.jsx b/src/components/Chatbot.jsx new file mode 100644 index 0000000..5d47964 --- /dev/null +++ b/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 ( +
+ {/* Chatbot button */} + + + {/* Chat window */} + {open && ( +
+
+ {messages.map((msg, i) => ( +
+ {msg.from === "user" ? "You" : "Bot"}: {msg.text} +
+ ))} +
+
+ setInput(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && sendMessage()} + placeholder="Type a message..." + /> + +
+
+ )} +
+ ); +}; + +export default Chatbot;