AI Chat Application 😎

A modern web-based chat application with AI capabilities, featuring real-time messaging, session management, and a responsive interface.

This intelligent assistant can engage in general conversation, answer questions based on uploaded PDF documents, and perform web scraping tasks. To scrape a website, use the scrape keyword followed by the URL.

Project Structure

project/ ├── static/
|   ├── images/
│   ├── css/ 
│   │   └── styles.css
│   │   └── style.css 
│   └── js/ 
│       └── chat.js
│       └── script.js 
├── templates/ 
│   ├── chat.html 
│   ├── login.html 
│   ├── signup.html 
│   ├── password.html 
│   ├── verify.html 
│   └── reset-password.html
├── gas_furnaces/
├── .scrapy/
├── app.py
├── brain.py
├── entrypoint.sh 
├── requirements.txt 
├── Dockerfile 
├── init.sql
├── file.json
└── docker-compose.yml 

Features

• AI-Powered Chat:
  • Engage in general, context-aware conversations.
  • Ask questions about the content of uploaded PDF files.
  • Scrape data from websites using the scrape keyword and a URL.
    • Supported Sites: https://www.lennoxpros.com, https://www.ebay.com, https://www.pakwheels.com, https://www.cnn.com
    • Output Formats: JSON, CSV, XML
• User Authentication: Secure login, signup, and password reset functionality with email OTP verification and reCAPTCHA.
• Chat Session Management: Create, rename, and delete chat sessions, with history saved per session.
• Real-time Interface: A responsive chat UI with messages appearing instantly.
• Customization: Toggle between dark and light themes.
• File Uploads: Support for uploading PDF files for analysis.
• Markdown Support: Bot responses are rendered with markdown for better readability, including code blocks and lists.

Technology Stack

• Frontend:

  • HTML5
  • CSS3
  • JavaScript (Vanilla)
  • Font Awesome Icons
  • Bootstrap 5
  • Marked.js (Markdown parsing)

• Backend:

  • Python (Flask)
  • PostgreSQL
  • Flask-Bcrypt
  • SMTP Email Service
  • Docker/Docker Compose

Database Schema

-- Users Table
CREATE TABLE users
(
    id integer PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
    full_name character varying(100) NOT NULL,
    email character varying(255) NOT NULL,
    password_hash text NOT NULL,
    created_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT users_email_key UNIQUE (email)
);  

-- Chat Sessions Table
CREATE TABLE chat_sessions
(
    session_id integer PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
    user_id integer,
    created_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
    title text,
    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT chat_sessions_user_id_fkey FOREIGN KEY (user_id)
        REFERENCES public.users (id)
        ON DELETE CASCADE
);

-- Chat History Table
CREATE TABLE IF NOT EXISTS public.chat_history
(
    message_id integer PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
    chat_session_id integer NOT NULL,
    user_id integer,
    message text NOT NULL,
    sender character varying(10) NOT NULL,
    created_at timestamp without time zone DEFAULT CURRENT_TIMESTAMP,
    CONSTRAINT chat_history_chat_session_id_fkey FOREIGN KEY (chat_session_id)
        REFERENCES public.chat_sessions (session_id)
        ON DELETE CASCADE,
    CONSTRAINT chat_history_user_id_fkey FOREIGN KEY (user_id)
        REFERENCES public.users (id)
        ON DELETE CASCADE,
    CONSTRAINT chat_history_sender_check CHECK (sender::text = ANY (ARRAY['user'::character varying, 'bot'::character varying]::text[]))
);

-- Function to automatically update the 'updated_at' timestamp on row modification
CREATE OR REPLACE FUNCTION public.update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = now();
    RETURN NEW;
END;
$$ language 'plpgsql';

-- Trigger to update 'updated_at' in chat_sessions table before any update
CREATE TRIGGER trg_chat_sessions_updated_at
BEFORE UPDATE ON public.chat_sessions
FOR EACH ROW
EXECUTE PROCEDURE public.update_updated_at_column();

Setup Instructions

1. Install Dependencies:

pip install -r requirements.txt

2. Environment Variables: Create a .env file with:

FLASK_ENV= your_environment
POSTGRES_HOST=Your_host
POSTGRES_USER=your_set_user
POSTGRES_PASSWORD=your_password
SECRET_KEY=your_secret_key
SENDER_EMAIL=your_email@gmail.com
SENDER_PASSWORD=your_email_password
RECAPTCHA_SECRET_KEY=your_recaptcha_key
SMTP_SERVER=smtp.gmail.co
SMTP_PORT= your port 
GROQ_API_KEY=your_api_key
OLLAMA_API_KEY=your_api_key

3. Database Setup:

# Create PostgreSQL database
createdb user_auth

# Create and Run the SQL commands to create tables

4. Setting environment variable on powershell if needed

$env:POSTGRES_HOST="localhost"
$env:FLASK_ENV="development"
$env:POSTGRES_USER="postgres"
$env:POSTGRES_PASSWORD="your_password"
$env:POSTGRES_DB="user_auth"
$env:SECRET_KEY="your_secret_key"
$env:SENDER_EMAIL="your_email@gmail.com"
$env:SENDER_PASSWORD="your_email_password"
$env:RECAPTCHA_SECRET_KEY="your_recaptcha_key"
$env:SMTP_SERVER="smtp.gmail.com"
$env:SMTP_PORT="587"
$env:GROQ_API_KEY="your_groq_key"
$env:OLLAMA_API_KEY="your_ollama_key"

5. Run Application locally :

$env:POSTGRES_HOST="localhost"
$env:FLASK_ENV="development"
python app.py

DOCKER SETUP

Prerequisites:

• Docker
• Docker Compose

Docker commands

# Build and start containers
docker-compose up --build

# Start in detached mode
docker-compose up -d

# Stop containers
docker-compose down

# Build Docker image
docker build -t chat-app .

# Run Docker container
docker run -d -p 5000:5000 --name chat-app chat-app

# View logs
docker logs chat-app

# Enter container
docker exec -it chat-app bash

Key Features Implementation

Authentication System

• Secure password hashing with Bcrypt
• Email verification for password reset
• reCAPTCHA integration for security
• Session management

Chat Interface

• Real-time message display
• Markdown support for messages
• Dynamic session management
• File upload capability
• Theme switching

User Experience

• Responsive design for all devices
• Intuitive navigation
• Error handling and feedback
• Loading states and animations

Frontend Components

HTML Templates

• Modular template structure
• Bootstrap integration
• Font Awesome icons
• Responsive layouts

CSS Features

• Custom CSS variables for theming
• Responsive design
• Smooth animations
• Dark/Light mode support

JavaScript Functionality

• Dynamic content loading
• Real-time updates
• Event handling
• Form validation
• Theme management

Backend Routes

Authentication Routes

• /signup - User registration
• /login - User login
• /logout - User logout
• /password - Password reset initiation
• /verify - OTP verification
• /reset-password - Password reset completion

Chat Routes

• /chat - Main chat interface
• /ask - Message processing
• /upload - File upload handling
• /get_chat_history - Retrieve chat history
• /get_user_chat_sessions - Get user's chat sessions
• /start_new_chat - Create new chat session
• /rename_chat_session - Rename existing session
• /delete_chat_session - Delete chat session

Security Features

• Password hashing
• Session management
• CSRF protection
• Input validation
• Error handling
• Rate limiting

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Known Limitations

• File upload limited to PDFs
• Maximum message length: No specific limit
• Session timeout: 24 hours

Future Improvements

• Real-time notifications
• Message search functionality
• Chat export functionality