diff --git a/chatbot/README.md b/chatbot/README.md
new file mode 100644
index 0000000..ddd2aca
--- /dev/null
+++ b/chatbot/README.md
@@ -0,0 +1,22 @@
+# š¤ ExpenseFlow Chatbot
+
+A modular, rule-based chatbot to help users with:
+
+- Expense tracking tips
+- Budget explanations
+- Analytics guidance
+- App navigation
+
+## Features
+
+- Frontend-only
+- No backend dependency
+- Easily extendable to AI later
+
+## Enable Chatbot
+
+Include this script in your HTML:
+
+```html
+
+```
diff --git a/chatbot/chatbot.config.js b/chatbot/chatbot.config.js
new file mode 100644
index 0000000..094b2db
--- /dev/null
+++ b/chatbot/chatbot.config.js
@@ -0,0 +1,4 @@
+export const CHATBOT_CONFIG = {
+ enabled: true,
+ welcomeMessage: true,
+};
diff --git a/chatbot/chatbot.css b/chatbot/chatbot.css
new file mode 100644
index 0000000..224cbf4
--- /dev/null
+++ b/chatbot/chatbot.css
@@ -0,0 +1,73 @@
+#expenseflow-chatbot {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ z-index: 9999;
+ font-family: system-ui, sans-serif;
+}
+
+#chatbot-toggle {
+ background: #4f46e5;
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 24px;
+ cursor: pointer;
+}
+
+#chatbot-window {
+ position: absolute;
+ bottom: 70px;
+ right: 0;
+ width: 320px;
+ height: 420px;
+ background: #111827;
+ color: #fff;
+ border-radius: 12px;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.hidden {
+ display: none;
+}
+
+.chatbot-header {
+ padding: 12px;
+ background: #1f2933;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#chatbot-messages {
+ flex: 1;
+ padding: 10px;
+ overflow-y: auto;
+ font-size: 14px;
+}
+
+.chatbot-input {
+ display: flex;
+ padding: 8px;
+ gap: 6px;
+}
+
+.chatbot-input input {
+ flex: 1;
+ padding: 6px;
+ border-radius: 6px;
+ border: none;
+}
+
+.chatbot-input button {
+ background: #4f46e5;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ padding: 6px 10px;
+ cursor: pointer;
+}
diff --git a/chatbot/chatbot.data.js b/chatbot/chatbot.data.js
new file mode 100644
index 0000000..bc3d35e
--- /dev/null
+++ b/chatbot/chatbot.data.js
@@ -0,0 +1,25 @@
+export const chatbotKnowledge = {
+ greetings: [
+ "Hi! Iām your ExpenseFlow assistant š",
+ "Hello! Need help with expenses or budgets?",
+ ],
+
+ tips: [
+ "Track expenses daily to avoid month-end surprises.",
+ "Use budget goals to control overspending.",
+ "Review analytics weekly to spot patterns.",
+ ],
+
+ budget: {
+ setup:
+ "You can set a budget from the dashboard. This helps track monthly limits.",
+ analytics:
+ "Analytics shows where your money goes using charts and summaries.",
+ },
+
+ navigation: {
+ dashboard: "Dashboard gives you a quick overview of expenses and budgets.",
+ export: "Use the export feature to download your expense data.",
+ notifications: "Notifications alert you when you cross budget limits.",
+ },
+};
diff --git a/chatbot/chatbot.html b/chatbot/chatbot.html
new file mode 100644
index 0000000..f921bb1
--- /dev/null
+++ b/chatbot/chatbot.html
@@ -0,0 +1,21 @@
+
diff --git a/chatbot/chatbot.js b/chatbot/chatbot.js
new file mode 100644
index 0000000..e6a47c8
--- /dev/null
+++ b/chatbot/chatbot.js
@@ -0,0 +1,76 @@
+const link = document.createElement("link");
+link.rel = "stylesheet";
+link.href = "./chatbot/chatbot.css";
+document.head.appendChild(link);
+
+import { chatbotKnowledge } from "./chatbot.data.js";
+import { CHATBOT_CONFIG } from "./chatbot.config.js";
+
+fetch("./chatbot/chatbot.html")
+ .then((res) => res.text())
+ .then((html) => {
+ document.body.insertAdjacentHTML("beforeend", html);
+
+ const toggleBtn = document.getElementById("chatbot-toggle");
+ const closeBtn = document.getElementById("chatbot-close");
+ const windowEl = document.getElementById("chatbot-window");
+ const messagesEl = document.getElementById("chatbot-messages");
+ const inputEl = document.getElementById("chatbot-input");
+ const sendBtn = document.getElementById("chatbot-send");
+
+ toggleBtn.onclick = () => {
+ windowEl.style.display =
+ windowEl.style.display === "none" ? "flex" : "none";
+ };
+
+ closeBtn.onclick = () => {
+ windowEl.style.display = "none";
+ };
+
+ const addMessage = (text, type = "bot") => {
+ const msg = document.createElement("div");
+ msg.textContent = text;
+ msg.style.marginBottom = "8px";
+ msg.style.textAlign = type === "user" ? "right" : "left";
+ messagesEl.appendChild(msg);
+ messagesEl.scrollTop = messagesEl.scrollHeight;
+ };
+
+ if (CHATBOT_CONFIG.welcomeMessage) {
+ addMessage(
+ chatbotKnowledge.greetings[
+ Math.floor(Math.random() * chatbotKnowledge.greetings.length)
+ ],
+ );
+ }
+
+ const getResponse = (message) => {
+ const msg = message.toLowerCase();
+
+ if (msg.includes("tip"))
+ return chatbotKnowledge.tips[
+ Math.floor(Math.random() * chatbotKnowledge.tips.length)
+ ];
+ if (msg.includes("budget")) return chatbotKnowledge.budget.setup;
+ if (msg.includes("analytics")) return chatbotKnowledge.budget.analytics;
+ if (msg.includes("export")) return chatbotKnowledge.navigation.export;
+ if (msg.includes("notification"))
+ return chatbotKnowledge.navigation.notifications;
+ if (msg.includes("dashboard"))
+ return chatbotKnowledge.navigation.dashboard;
+
+ return "I can help with tips, budgets, analytics, exports, and navigation š";
+ };
+
+ sendBtn.onclick = () => {
+ const text = inputEl.value.trim();
+ if (!text) return;
+
+ addMessage(text, "user");
+ inputEl.value = "";
+
+ setTimeout(() => {
+ addMessage(getResponse(text));
+ }, 400);
+ };
+ });
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a380891
--- /dev/null
+++ b/index.html
@@ -0,0 +1,666 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ExpenseFlow - Smart Money Management
+
+
+
+
+
+
+
+
+
+
+
+
+