Add AI chatbot for expense management advice

[Copilot]

Implements an AI-powered chatbot that provides personalized financial advice, spending pattern analysis, and savings optimization tips.

Implementation

Frontend (components/AIChatbot.tsx)

• Floating button overlay (bottom-right, authenticated users only)
• Chat interface with message history, typing indicators, auto-scroll
• Accessibility: ARIA labels, keyboard navigation, prefers-reduced-motion support
• Uses crypto.randomUUID() for message IDs to avoid collisions

Backend (app/api/chatbot/route.ts)

• Pattern-matching response engine covering:
  • Spending analysis (categories, trends, outliers)
  • Budget planning (SMART goals, 50/30/20 rule)
  • Savings strategies (subscriptions, meal planning, debt management)
  • Investment basics, transaction management
• Returns contextual advice based on keyword detection in user queries

Infrastructure

• Added Radix UI Dialog component (components/ui/dialog.tsx) for reusable modals
• Integrated into app/root/layout.tsx for all authenticated routes
• Documented in CHATBOT.md with usage examples and extension points

Example Usage

// User types: "How can I save money?"
// API returns structured advice:
{
  message: "💰 50/30/20 Rule: Allocate 50% to needs...\n📊 Track Subscriptions...",
  timestamp: "2026-01-07T03:49:45.852Z"
}

Pattern-matching system is extensible—swap generateResponse() function for OpenAI/Anthropic integration when AI API keys are available.

Security: CodeQL scan clean, input validation on API route, no persistent storage.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/ExpenseTracker/ExpenseTracker/node_modules/.bin/next build (dns block)
• o1.ingest.sentry.io
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/ExpenseTracker/ExpenseTracker/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Proposal to Add an AI Chatbot Feature to ExpenseTracker</issue_title>
<issue_description>I would love to contribute to this project by adding an AI-powered chatbot feature.
The chatbot will provide personalized advice on managing expenses, identifying spending patterns, and suggesting tips to optimize savings.
The feature can integrate seamlessly with the current system, enhancing the user experience and making the ExpenseTracker even more engaging and helpful.
Please let me know your thoughts on this idea. I’d be excited to collaborate and help take this project to the next level!

Looking forward to hearing from you.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Proposal to Add an AI Chatbot Feature to ExpenseTracker #124

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
expense-tracker-stmh	Ready	Preview, Comment	Jan 7, 2026 3:59am

[netlify]

✅ Deploy Preview for walletwatcx ready!

Name	Link
🔨 Latest commit	0db42b4
🔍 Latest deploy log	https://app.netlify.com/projects/walletwatcx/deploys/695dd9d7f4986800083eabda
😎 Deploy Preview	https://deploy-preview-127--walletwatcx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for walletwatxh ready!

Name	Link
🔨 Latest commit	0db42b4
🔍 Latest deploy log	https://app.netlify.com/projects/walletwatxh/deploys/695dd9d79340cd0008e666f1
😎 Deploy Preview	https://deploy-preview-127--walletwatxh.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.