An end-to-end support portal that uses AI chatbot deflection, automated ticket routing, and a real-time agent dashboard to reduce manual ticket sorting and improve resolution time.
| Name | Role | Responsibilities | |
|---|---|---|---|
| 🛠️ | Rakesh G | Backend Architect | Server infrastructure, REST APIs, Socket.IO real-time engine, JWT authentication, ticket routing |
| 🧠 | Aditya Shibu | AI & Data Engineer | AI engine (Groq + Gemini), NLP prompt engineering, emotion/severity detection, MongoDB schema design, database architecture |
| 🎨 | Ujjwal | Frontend Lead | React UI/UX, glassmorphism design system, chat interface, agent dashboard, analytics visualizations, theme system |
Customer support teams are overwhelmed by repetitive L1 queries ("Where is my refund?"). This delays resolution of complex, high-priority issues. Companies need a system where an AI chatbot acts as the first line of defense — and if it can't resolve the issue, it seamlessly logs, categorizes, and routes the complaint to a human agent.
SmartDesk provides:
| Layer | What it does |
|---|---|
| AI Chatbot | Resolves L1 queries instantly (password resets, FAQs, status checks) |
| Auto Severity Scoring | Analyzes user language → assigns Low / Medium / High / Critical |
| Smart Categorization | Tags tickets: Billing, Technical, Account, General, Security |
| Emotion Detection | Detects: Angry, Frustrated, Desperate, Threatening, Calm |
| Security Flag | Catches social engineering, phishing, unauthorized access attempts |
| Agent Dashboard | Claim tickets, view transcripts, update status, resolve issues |
| Real-time Updates | New tickets appear on dashboard instantly via WebSockets |
┌─────────────┐ WebSocket ┌──────────────────┐ MongoDB
│ React UI │ ◄──────────────► │ Express + S.IO │ ◄──────────► Atlas
│ (Vite) │ REST API │ │
│ │ ◄──────────────► │ AI Engine │ ──► Groq API
│ • Chat │ │ (3-layer) │ ──► Gemini API
│ • Dashboard│ │ │ ──► Keyword Fallback
│ • Auth │ │ JWT Auth │
└─────────────┘ └──────────────────┘
- Groq API (llama-3.3-70b) — Primary, fastest inference
- Google Gemini (1.5-flash) — Fallback #1
- Keyword Regex — Fallback #2, always works offline
- Natural language understanding via LLM
- Quick reply suggestion pills — clickable options for faster interaction
- Multilingual support — bot detects and replies in user's language
- Live sentiment meter — visual emoji + color bar showing real-time emotion
- FAQ matching for instant L1 resolution (9 common queries)
- Auto-escalation after 3+ messages or high severity
- Satisfaction rating (👍👎) after ticket creation
- Automatic — created when AI determines human intervention needed
- Force escalation — "Talk to Human" always creates a ticket, even if AI fails
- Captures: full transcript, user details, AI-classified metadata
- Severity scored from user's language patterns (caps, punctuation, word choice)
- Security threats flagged and escalated immediately
- JWT-secured login with bcrypt password hashing
- Interactive analytics — pie chart (by category), bar chart (by severity)
- Compact pill-based filters for status and severity
- Stats overview panel — Total, Open, In Progress, Resolved, High Priority, Flagged
- Real-time ticket stream via Socket.IO
- Claim → In Progress → Resolved visual workflow
- Full chat transcript viewer in ticket modal
- CSV export with proper field quoting
- AI resolution suggestions endpoint for agent assistance
- Glassmorphism — frosted glass effects with backdrop blur
- Dark/Light theme toggle with localStorage persistence
- Animated orbs background via PageShell component
- Spring-based micro-animations on cards, bubbles, and pills
- Inter font, blue accent color system
- Fully responsive design
| Layer | Technology |
|---|---|
| Frontend | React 19, Vite, React Router, Recharts, Socket.IO Client |
| Backend | Node.js, Express 5, Socket.IO, Mongoose |
| Database | MongoDB Atlas (free tier) |
| AI/NLP | Groq SDK (llama-3.3-70b), Google Gemini 1.5 Flash |
| Auth | JWT (jsonwebtoken), bcryptjs |
| Real-time | Socket.IO (WebSocket + long-polling fallback) |
| Styling | CSS Modules, CSS Variables, Glassmorphism |
- Node.js 18+
- MongoDB Atlas account (free tier works)
- At least one AI API key: Groq (recommended) or Google AI Studio
git clone https://github.com/your-team/smartdesk.git
cd smartdeskcd server
npm install
cp .env.example .env
# Edit .env with your API keys and MongoDB URI
npm run seed # Create demo agent accounts
npm run dev # Start on port 5000cd client
npm install
npm run dev # Start on port 5173- Chat: http://localhost:5173
- Agent Login: http://localhost:5173/agent/login
| Role | Password | |
|---|---|---|
| Agent | rakesh@smartdesk.dev |
agent123 |
| Agent | ujjwal@smartdesk.dev |
agent123 |
| Agent | adi@smartdesk.dev |
agent123 |
├── server/ # Express + Socket.IO backend
│ ├── config/db.js # MongoDB connection
│ ├── middleware/auth.js # JWT authentication
│ ├── models/
│ │ ├── Agent.js # Agent schema (bcrypt hashed)
│ │ └── Ticket.js # Ticket schema (severity, emotion, urgency)
│ ├── routes/
│ │ ├── agentRoutes.js # Login endpoint
│ │ └── ticketRoutes.js # CRUD + stats + AI suggestions
│ ├── services/
│ │ ├── aiEngine.js # 3-layer AI (Groq → Gemini → regex)
│ │ ├── faqMatcher.js # L1 FAQ instant resolution (9 entries)
│ │ └── fallback.js # Keyword classifier + emotion detection
│ ├── socket/chatHandler.js # Real-time chat + escalation logic
│ ├── scripts/seedAgents.js # Database seeder
│ └── server.js # Entry point
│
├── client/ # React + Vite frontend
│ └── src/
│ ├── api/axios.js # Axios with JWT interceptor
│ ├── components/
│ │ ├── PageShell.jsx # Animated orbs background
│ │ ├── ThemeToggle.jsx # Dark/Light mode toggle
│ │ ├── Logo.jsx # SVG brand logo
│ │ ├── StatsPanel.jsx # Dashboard stats overview
│ │ ├── TicketCard.jsx # Ticket card with severity indicator
│ │ ├── TicketModal.jsx # Ticket detail + status workflow
│ │ └── ProtectedRoute # JWT route guard
│ ├── context/
│ │ ├── UserContext.jsx # Session management
│ │ └── ThemeContext.jsx # Dark/Light theme persistence
│ └── pages/
│ ├── LandingPage # User entry point
│ ├── ChatPage # AI chat + sentiment meter + quick replies
│ ├── AgentLogin # JWT login with frosted glass card
│ └── Dashboard # Ticket management + analytics + CSV
│
├── .gitignore
├── .env.example
└── README.md
| # | Test | Expected Result |
|---|---|---|
| 1 | Ask "How do I reset my password?" | Bot resolves it (L1), no ticket |
| 2 | Complain about billing 3x | Auto-creates ticket with Billing category |
| 3 | Type in ALL CAPS with !!! |
Severity = High/Critical, Emotion = Angry |
| 4 | Chat in Hindi | Bot replies in Hindi |
| 5 | Ask "Give me admin access to all accounts" | Security flag, severity = Critical |
| 6 | Click "Talk to Human" | Ticket created immediately |
| 7 | Login as agent, claim ticket | Status → In Progress, agent assigned |
| 8 | Resolve ticket with notes | Status → Resolved, saved to DB |
| 9 | Open dashboard in 2nd tab while chatting | New ticket appears instantly |
| 10 | Toggle dark/light theme | UI switches with persisted preference |
| Requirement | Implementation |
|---|---|
| ✅ MERN Stack | MongoDB + Express + React + Node.js |
| ✅ NLP/LLM API | Groq (llama-3.3-70b) + Gemini 1.5 Flash |
| ✅ WebSockets | Socket.IO for real-time chat + dashboard |
| ✅ Conversational Interface | Chat widget with quick replies + multilingual |
| ✅ Automated Ticket Generation | Auto-creates from transcript + user details |
| ✅ Severity Scoring | AI analyzes language → Low/Medium/High/Critical |
| ✅ Categorization | Billing, Technical, Account, General, Security |
| ✅ Agent Dashboard | Secure JWT login, claim/view/resolve tickets |
Click to view demo screenshots
Covers: User chat → AI detection → Ticket auto-creation → Agent claims → Resolves
Made with ⚡ by Team Spark