DBIT Chat Bot

An AI-powered intelligent chatbot platform for DBIT College that provides instant access to academic schedules, course details, faculty information, campus events, and official notices.

🚀 Features

Core Functionality

AI-Powered Chat Interface: Natural language processing for intelligent responses using Lovable AI
Real-time Messaging: WebSocket-based instant communication with typing indicators
Anonymous & Authenticated Sessions: Support for guest users and registered accounts with secure session tokens
Multi-Category Support: Academic, administrative, technical queries with smart routing
File Upload Support: Document processing and querying with 10MB limit
Chat History: Persistent conversation tracking for authenticated users
Quick Actions: Pre-defined common queries for faster access

User Management

Role-Based Access Control: Student, Faculty, Staff, and Admin roles with granular permissions
User Authentication: Secure login with email/password via Supabase Auth
Profile Management: Customizable user profiles with avatars, department, and year information
Session Management: Automatic token refresh and session expiration warnings
Password Security: Minimum 8 characters with uppercase, lowercase, and numbers

Admin Features

Analytics Dashboard: User metrics, message statistics, and system performance insights
Content Management: Knowledge base and FAQ management with categories
User Management: Role assignment and account administration
Event & Announcement Management: Campus-wide notifications with priority levels
Audit Logging: Complete activity tracking for security and compliance
Feedback Analytics: View and analyze user feedback on bot responses

Security

Row-Level Security (RLS): Database-level access control for all tables
Session Token Protection: Secure anonymous user sessions with UUID-based tokens
Input Validation: Comprehensive validation using Zod schemas
XSS Protection: Input sanitization and output encoding
Error Boundaries: Graceful error handling with user-friendly messages
CSRF Protection: Built-in with Supabase Auth

🛠️ Tech Stack

Frontend

React 18 with TypeScript
Vite for fast development and optimized builds
Tailwind CSS with semantic design tokens
shadcn/ui for accessible UI components
React Router v6 for client-side routing
TanStack Query for efficient data fetching and caching

Backend

Supabase for:
- PostgreSQL database with Row-Level Security
- Authentication with email/password
- Real-time subscriptions for live chat
- Storage for avatars and chat attachments
- Edge Functions for serverless logic

AI Integration

Lovable AI for intelligent response generation and context-aware conversations

📦 Installation

Clone the repository

git clone <repository-url>
cd dbit-chatbot

Install dependencies
```
npm install
```

Set up environment variables Create a .env file with:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key
VITE_SUPABASE_PROJECT_ID=your_project_id

Run database migrations
- Access your Supabase dashboard
- Go to SQL Editor
- Run migrations from supabase/migrations/ directory in order
Configure Supabase Auth
- Enable Email provider in Authentication → Providers
- Configure email templates (optional)
- Enable Leaked Password Protection (recommended)
Start development server
```
npm run dev
```
Application will be available at http://localhost:8080

🔐 Security Configuration

1. Enable Leaked Password Protection

Go to Supabase Dashboard → Authentication → Policies
Enable "Leaked Password Protection"
This prevents users from using compromised passwords from data breaches

2. Configure Admin Access

To set a user as admin, run this SQL query after they register:

UPDATE user_roles 
SET role = 'admin' 
WHERE user_id = (SELECT id FROM auth.users WHERE email = 'admin@example.com');

3. Storage Bucket Configuration

Verify storage buckets are properly configured:

avatars: Public bucket for user profile pictures
chat-attachments: Private bucket for document uploads (10MB limit)

4. Session Token Security

Anonymous users are assigned secure session tokens that:

Are stored in localStorage
Are validated via RLS policies
Expire when cleared manually
Prevent unauthorized access to other users' conversations

📱 Usage

For Students/Faculty

Guest Access
- Visit the homepage at /
- Click "Start Chatting" to begin immediately as a guest
- Your conversation is secured with a session token
Registered User Access
- Sign up at /signup with your college email
- Verify your email (if enabled)
- Access additional features:
  - Chat history across sessions
  - Profile customization
  - File uploads for document queries
  - Personalized recommendations

For Administrators

Initial Setup
- Register a normal account
- Have another admin promote your account via SQL query
- Or manually update the user_roles table
Admin Dashboard (/admin)
- View analytics and system metrics
- Manage knowledge base content
- Create and schedule announcements
- Manage campus events
- Assign user roles
- Review audit logs
- Monitor user feedback

🏗️ Project Structure

dbit-chatbot/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── admin/          # Admin-specific components
│   │   │   ├── AdminAnalytics.tsx
│   │   │   ├── AdminUsers.tsx
│   │   │   ├── AdminKnowledgeBase.tsx
│   │   │   ├── AdminEvents.tsx
│   │   │   └── AdminAnnouncements.tsx
│   │   ├── chat/           # Chat interface components
│   │   │   ├── ChatHeader.tsx
│   │   │   ├── ChatInput.tsx
│   │   │   ├── ChatSidebar.tsx
│   │   │   ├── MessageBubble.tsx
│   │   │   ├── QuickActions.tsx
│   │   │   └── TypingIndicator.tsx
│   │   ├── ui/             # shadcn/ui components
│   │   ├── ErrorBoundary.tsx
│   │   ├── ProtectedRoute.tsx
│   │   ├── PermissionGuard.tsx
│   │   └── SessionWarning.tsx
│   ├── contexts/           # React contexts
│   │   ├── AuthContext.tsx
│   │   └── ChatContext.tsx
│   ├── hooks/              # Custom React hooks
│   │   ├── useProtectedRoute.ts
│   │   ├── useRole.ts
│   │   ├── useSession.ts
│   │   ├── useTypingIndicator.ts
│   │   └── useRealtimeMessages.ts
│   ├── pages/              # Page components
│   │   ├── Index.tsx
│   │   ├── Chat.tsx
│   │   ├── Login.tsx
│   │   ├── Signup.tsx
│   │   ├── Profile.tsx
│   │   ├── Admin.tsx
│   │   ├── FAQ.tsx
│   │   ├── About.tsx
│   │   ├── Contact.tsx
│   │   └── NotFound.tsx
│   ├── services/           # API and business logic
│   │   ├── api.ts          # Base API utilities
│   │   ├── auth.ts         # Authentication service
│   │   ├── chatService.ts  # Chat operations
│   │   ├── aiService.ts    # AI integration
│   │   ├── userService.ts  # User management
│   │   ├── adminService.ts # Admin operations
│   │   ├── fileService.ts  # File upload/download
│   │   ├── cacheService.ts # Client-side caching
│   │   └── knowledgeBaseService.ts
│   ├── types/              # TypeScript type definitions
│   │   └── index.ts
│   ├── utils/              # Utility functions
│   │   ├── validation.ts   # Zod validation schemas
│   │   └── sessionToken.ts # Session management
│   ├── index.css           # Global styles and design tokens
│   ├── App.tsx             # Root component with routing
│   └── main.tsx            # Application entry point
├── supabase/
│   ├── functions/          # Edge Functions
│   │   └── chat-ai/        # AI chat integration
│   └── migrations/         # Database migrations
├── public/                 # Static assets
├── .env                    # Environment variables
├── tailwind.config.ts      # Tailwind configuration
├── vite.config.ts          # Vite configuration
└── package.json            # Dependencies and scripts

🔧 Configuration

Tailwind Design System

The application uses semantic design tokens defined in:

src/index.css - CSS variables for colors, spacing, and animations:

:root {
  --primary: 221 83% 53%;     /* Blue */
  --secondary: 215 16% 47%;    /* Slate Gray */
  --accent: 160 84% 39%;       /* Emerald */
  --background: 210 40% 98%;   /* Light Gray */
  /* ... more tokens */
}

tailwind.config.ts - Tailwind configuration with custom plugins and theme extensions

Environment Variables

VITE_SUPABASE_URL - Supabase project URL
VITE_SUPABASE_PUBLISHABLE_KEY - Supabase anonymous key
VITE_SUPABASE_PROJECT_ID - Supabase project identifier

Performance Optimizations

Code Splitting: Automatic route-based code splitting with React.lazy()
Image Optimization: WebP format with lazy loading
Caching: Client-side caching for frequently accessed data
Database Indexes: Optimized queries with proper indexing
Bundle Size: Tree-shaking and minification in production

📊 Database Schema

Core Tables

`profiles`

User profile information

id (uuid, PK)
name (text)
student_id (text, unique)
phone (text)
department (text)
year (integer)
avatar_url (text)

`user_roles`

Role-based access control

id (uuid, PK)
user_id (uuid, FK)
role (app_role enum: student, faculty, staff, admin)

`conversations`

Chat conversations

id (uuid, PK)
user_id (uuid, FK, nullable)
session_token (text, for anonymous users)
title (text)
is_active (boolean)

`messages`

Chat messages

id (uuid, PK)
conversation_id (uuid, FK)
content (text)
sender_type (text: user, bot, system)
attachments (text[])

`knowledge_base`

FAQ and knowledge articles

id (uuid, PK)
category (text)
question (text)
answer (text)
keywords (text[])

`events`

Campus events

id (uuid, PK)
title (text)
description (text)
date (timestamptz)
location (text)
category (text)

`announcements`

Official notices

id (uuid, PK)
title (text)
content (text)
priority (text: low, medium, high, urgent)
publish_date (timestamptz)
expires_at (timestamptz, nullable)

`feedback`

User feedback on bot responses

id (uuid, PK)
message_id (uuid, FK)
rating (integer)
comment (text)

`audit_logs`

System activity logs

id (uuid, PK)
user_id (uuid)
action (text)
resource_type (text)
resource_id (uuid)
details (jsonb)

Storage Buckets

avatars - User profile pictures (public, 5MB limit)
chat-attachments - Document uploads (private, 10MB limit)

Database Functions

handle_new_user() - Trigger to create profile on user registration
has_role() - Security definer function for role checking
log_admin_action() - Audit logging for admin actions
handle_updated_at() - Automatic timestamp updates

🚀 Deployment

Frontend Deployment (Lovable)

Via Lovable Platform:
- Click "Publish" in the Lovable editor
- Your app will be deployed to *.lovable.app
- Connect a custom domain in Settings → Domains
Manual Deployment:
```
npm run build
```
Deploy the dist/ folder to:
- Vercel
- Netlify
- Cloudflare Pages
- Any static hosting provider

Backend Configuration

Edge Functions: Deploy automatically to Supabase
Database Migrations: Run manually via Supabase dashboard
Environment Variables: Set in hosting platform settings

Post-Deployment Checklist

🧪 Testing

Manual Testing Checklist

Authentication

Chat Functionality

Admin Features

Security

Responsive Design

Cross-Browser Compatibility

Chrome
Firefox
Safari
Edge

🔍 Monitoring and Maintenance

Performance Monitoring

Use these tools for monitoring:

Supabase Dashboard: Database query performance, auth metrics
Browser DevTools: Network, performance profiling
Lighthouse: Accessibility, performance, SEO scores

Key Metrics to Monitor

Database query response times
Edge function execution times
Storage usage
Authentication success/failure rates
Chat message volume
User engagement metrics

Error Tracking

Client-side: Error Boundaries catch and display user-friendly messages
Server-side: Edge Function logs in Supabase dashboard
Admin: Audit logs for system activities

Regular Maintenance Tasks

Weekly:
- Review audit logs
- Monitor system performance
- Check for failed edge function calls
Monthly:
- Update knowledge base content
- Review and respond to user feedback
- Optimize slow database queries
- Update dependencies
Quarterly:
- Database backup verification
- Security audit
- Performance optimization review
- User acceptance testing

🐛 Troubleshooting

Common Issues

1. "New row violates row-level security policy"

Cause: User trying to access data they don't have permission for
Solution: Verify RLS policies and ensure user_id is set correctly

2. Session token not working for anonymous users

Cause: Session token not being sent in headers
Solution: Check that getSessionToken() is called and token is persisted

3. Messages not appearing in real-time

Cause: Realtime subscription not set up correctly
Solution: Verify that messages table is in supabase_realtime publication

4. File upload failing

Cause: File size exceeds limit or invalid file type
Solution: Check file size (<10MB) and allowed MIME types

5. Admin dashboard not accessible

Cause: User doesn't have admin role
Solution: Update user_roles table to assign admin role

📝 API Documentation

Chat Service

// Create conversation
chatService.createConversation(title: string)

// Send message
chatService.createMessage({
  conversation_id: string,
  content: string,
  sender_type: 'user' | 'bot' | 'system',
  attachments?: string[]
})

// Get messages
chatService.getMessages(conversationId: string)

Auth Service

// Sign up
auth.signUp(email, password, name, studentId, role)

// Sign in
auth.signIn(email, password)

// Sign out
auth.signOut()

// Reset password
auth.resetPassword(email)

User Service

// Get profile
userService.getProfile(userId)

// Update profile
userService.updateProfile(userId, updates)

// Upload avatar
userService.uploadAvatar(file)

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

Development Team

Project Lead: [Name]
Backend Developer: [Name]
Frontend Developer: [Name]
UI/UX Designer: [Name]

Acknowledgments

DBIT College for project support
Lovable.dev for AI integration platform
Supabase for backend infrastructure
shadcn/ui for component library

📞 Support

For Technical Support

Email: support@dbit.edu
Contact Form: /contact page in the application
Admin Support: Contact via admin dashboard

For Development Support

GitHub Issues: Report bugs and feature requests
Documentation: Lovable Docs
Supabase Docs: Supabase Documentation

🔮 Future Enhancements

Built with ❤️ for DBIT College

Powered by Lovable AI, Supabase, and React

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
public		public
src		src
supabase		supabase
.env		.env
.gitignore		.gitignore
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation