Realtime Messaging Application

A full-stack realtime messaging application built with React (Material UI) on the frontend and Flask (Socket.IO) on the backend, featuring LLM-based message encryption.

Features

✨ Real-time messaging with WebSocket (Socket.IO)
👥 User presence - See who's online
⌨️ Typing indicators - Know when someone is typing
� LLM Encryption - Encode messages with custom prompts and models
🔓 Decrypt on demand - Right-click messages to decrypt with prompt/model
�💬 Modern UI - Built with Material UI components
🎨 User avatars - Color-coded avatars with initials
📱 Responsive design - Works on desktop and mobile
🔔 System notifications - User join/leave messages
📜 Message history - Load recent messages on join
🔐 Encrypted message indicators - Visual badges for LLM-encoded messages

Tech Stack

Frontend

• React 18
• Material UI (MUI) 5
• Socket.IO Client 4
• Emotion (styling)

Backend

• Flask 3
• Flask-SocketIO 5
• Flask-CORS
• Python-SocketIO
• Eventlet

Project Structure

FlaskChatWithLLMEncryption/
├── backend/
│   ├── app.py              # Flask server with Socket.IO
│   └── requirements.txt    # Python dependencies
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── ChatContainer.js      # Main chat layout
│   │   │   ├── ConnectionStatus.js   # Connection indicator
│   │   │   ├── LoginDialog.js        # User login modal
│   │   │   ├── MessageInput.js       # Message input field
│   │   │   ├── MessageList.js        # Messages display
│   │   │   └── UserList.js           # Online users sidebar
│   │   ├── App.js          # Main React component
│   │   └── index.js        # React entry point
│   └── package.json        # Node dependencies
└── README.md

Installation & Setup

Prerequisites

• Python 3.8+
• Node.js 16+
• npm or yarn

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment (recommended):

python -m venv venv
source venv/bin/activate  # On macOS/Linux
# or
venv\Scripts\activate     # On Windows

3. Install Python dependencies:

pip install -r requirements.txt

4. Run the Flask server:

python app.py

The backend server will start on http://localhost:5000

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install Node dependencies:

npm install

3. Start the React development server:

npm start

The frontend will start on http://localhost:3000

Usage

1. Start the backend server (Flask) first
2. Start the frontend (React)
3. Open your browser to http://localhost:3000
4. Enter your name in the login dialog
5. Start chatting!

Open multiple browser windows/tabs to test the real-time functionality.

Socket.IO Events

Client → Server

• join - User joins the chat with username
• send_message - Send a message (with optional LLM encryption metadata)
• typing - User typing status
• disconnect - User leaves

Server → Client

• connection_response - Connection confirmation
• load_messages - Initial message history
• new_message - New message broadcast (includes LLM metadata)
• user_joined - User joined notification
• user_left - User left notification
• user_typing - Typing indicator update

Message Format

{
  "id": "unique-message-id",
  "user_id": "user-id",
  "username": "John Doe",
  "text": "Message content",
  "timestamp": "2025-11-08T10:30:00",
  "llmEncoded": true,
  "prompt": "encryption-prompt",
  "modelName": "gpt-4"
}

Features in Detail

Real-time Messaging

Messages are instantly broadcast to all connected users using Socket.IO's WebSocket connection.

User Presence

The app tracks and displays all online users in the sidebar. When users join or leave, all connected clients are notified.

Typing Indicators

When a user types, other users see a "typing..." indicator that disappears after 1 second of inactivity.

LLM Encryption

Users can enable LLM Encoding mode to send encrypted messages:

1. Toggle the "LLM Encoding" switch in the message input area
2. Enter a Prompt/Key (the encryption prompt)
3. Enter a Model Name (e.g., gpt-4, claude-3)
4. Type your message and send

Messages sent with LLM encoding are marked with a 🔒 lock icon and orange border.

Message Decryption

To decrypt an LLM-encoded message:

1. Right-click on any message
2. Select "Decrypt Message" from the context menu
3. Enter the decryption prompt and model name
4. Click "Decrypt" to reveal the message

Note: Currently, decryption returns the original message as-is. Full LLM integration coming soon!

Message History

New users receive the last 50 messages when they join the chat.

Responsive Design

The UI adapts to different screen sizes using Material UI's responsive components.

Configuration

Backend

• Port: 5000 (default)
• CORS: Enabled for all origins
• Max Messages: 100 (in memory)

To change the backend port or add authentication, modify backend/app.py.

Frontend

• Socket URL: http://localhost:5000

To change the backend URL, modify the SOCKET_URL constant in frontend/src/App.js.

Development

Backend Development

The Flask server runs in debug mode by default. Changes to app.py will automatically reload the server.

Frontend Development

React's development server supports hot reloading. Changes to components will update automatically.

License

MIT License - feel free to use this project for learning or commercial purposes.