LinkLine - Real-Time Chat Application

A modern, full-featured real-time chat application built with React and Firebase, featuring AI-powered chatbots, group messaging, file sharing, and RAG (Retrieval-Augmented Generation) capabilities.

🚀 Features

Core Features

• Real-Time Messaging: Instant messaging with Firebase Firestore for real-time updates
• Group Chats: Create and manage group conversations with public/private visibility
• Direct Messages: One-on-one private messaging between users
• File Sharing: Upload and share files (PDFs, images, documents) via Cloudinary integration
• User Profiles: View and manage user profiles
• Guest Mode: View-only access for 1 hour without authentication

AI-Powered Features

• ExplainBot: Use @explain to get AI-powered explanations
• HelpBot: Use @help for RAG-enhanced assistance with uploaded knowledge base
• RAG Integration: Upload documents (PDF, DOCX, PPTX, TXT, CSV) to create group-specific knowledge bases
• Context-Aware Responses: AI bots use uploaded documents to provide relevant answers

User Experience

• Dark/Light Theme: Toggle between themes
• User Visibility: Control your online/offline status
• Group Invitations: Share group invite links
• Mentions: Tag users in messages with @username
• Responsive Design: Works seamlessly on desktop and mobile devices
• Message Types: Support for text, files, and AI responses

🛠️ Tech Stack

Frontend

• React 18.3.1 - UI framework
• Vite 5.4.1 - Build tool and dev server
• React Router DOM 7.8.2 - Client-side routing
• Tailwind CSS 3.4.10 - Utility-first CSS framework
• Firebase 10.13.1 - Authentication and Firestore database
• Axios 1.8.4 - HTTP client
• Lucide React - Icon library

Backend

• FastAPI - Python web framework
• OpenAI API - GPT models for AI responses
• LangChain 0.1.16 - LLM orchestration
• Pinecone - Vector database for RAG
• Firebase Admin SDK - Server-side Firebase operations
• Uvicorn - ASGI server

Services

• Firebase Authentication - Google OAuth sign-in
• Cloudinary - File storage and CDN
• Firebase Firestore - Real-time database

📁 Project Structure

chat-app/
├── src/                          # Frontend source code
│   ├── components/              # React components
│   ├── pages/                   # Page components
│   ├── context/                 # React context providers
│   ├── config/                  # Configuration files
│   ├── services/                # Service modules
│   └── Cloudinary/              # File upload utilities
│
├── fastapi-backend/             # Python backend
│   ├── chatbot/                # Chatbot module
│   │   ├── api/                # API endpoints
│   │   ├── services/           # Business logic
│   │   └── models/             # Data models
│   └── main.py                 # FastAPI application
│
└── backend/                     # Node.js backend (legacy)

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Python 3.9+ and pip
• Firebase Account - For authentication and database
• Cloudinary Account - For file storage
• OpenAI API Key - For AI features
• Pinecone Account (optional) - For vector storage

Installation

1. Clone the Repository

git clone https://github.com/umarfarooq3488/Real-time-chat-app.git
cd chat-app

2. Frontend Setup

# Install dependencies
npm install

# Create environment file
# Create .env file in root directory with:
VITE_CLOUD_NAME=your_cloudinary_cloud_name
VITE_BOT_API_URL=http://localhost:8000

3. Backend Setup

cd fastapi-backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# Linux/Mac:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Create .env file with:
OPENAI_API_KEY=your_openai_api_key
PINECONE_API_KEY=your_pinecone_api_key
FIREBASE_SERVICE_ACCOUNT_JSON={"type":"service_account",...}

4. Firebase Configuration

1. Create a Firebase project at Firebase Console
2. Enable Authentication with Google provider
3. Create a Firestore database
4. Download service account key
5. Update src/config/firebase.js with your Firebase config

Running the Application

Frontend Development Server

npm run dev

Frontend will be available at http://localhost:5173

Backend Development Server

cd fastapi-backend
uvicorn main:app --reload --port 8000

Backend API will be available at http://localhost:8000

Production Build

# Build frontend
npm run build

# The dist/ folder contains the production build

📖 Usage Guide

Authentication

1. Click "Start Chatting Now" on the welcome page
2. Sign in with your Google account via popup
3. You'll be redirected to the main chat interface

Creating Groups

1. Navigate to the chat interface
2. Click "Create Group" button
3. Set group name, description, and visibility (public/private)
4. Share the group invite link with others

Joining Groups

• Public Groups: Visible to all users, join directly
• Private Groups: Join via invite link or request access

Using AI Features

ExplainBot

Type @explain [your question] in any group chat to get AI-powered explanations.

HelpBot with RAG

1. Upload documents to a group (group creator only)
2. Type @help [your question] in the group chat
3. The bot will use uploaded documents to provide context-aware answers

File Sharing

1. Click the attachment icon in the message input
2. Select a file (PDF, images, documents)
3. File will be uploaded to Cloudinary and shared in the chat

User Visibility

• Toggle your visibility status to control who can see you online
• Invisible users cannot send messages until they become visible

🔌 API Endpoints

Chat Endpoints

• POST /chat - Send message to AI bot (@explain or @help)
• POST /rag - RAG-based chat endpoint

Document Management

• POST /rag/knowledge-base/upload?group_id={groupId} - Upload document for knowledge base
• GET /rag/knowledge-base/info?group_id={groupId} - Get knowledge base information
• DELETE /rag/knowledge-base/clear?group_id={groupId} - Clear knowledge base
• POST /rag/knowledge-base/search?group_id={groupId} - Search knowledge base

Health Check

• GET /health - API health status
• GET / - API information

🚢 Deployment

Frontend (Netlify)

1. Connect your GitHub repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Add environment variables:
   • VITE_CLOUD_NAME
   • VITE_BOT_API_URL

Backend (Railway/Render)

1. Connect your GitHub repository
2. Set Python as runtime
3. Add environment variables:
   • OPENAI_API_KEY
   • PINECONE_API_KEY
   • FIREBASE_SERVICE_ACCOUNT_JSON
   • PORT (auto-set by platform)

🔒 Environment Variables

Frontend (.env)

VITE_CLOUD_NAME=your_cloudinary_cloud_name
VITE_BOT_API_URL=https://your-backend-url.com

Backend (.env)

OPENAI_API_KEY=sk-...
PINECONE_API_KEY=...
FIREBASE_SERVICE_ACCOUNT_JSON={"type":"service_account",...}
PINECONE_INDEX_NAME=knowledge-base

🧪 Testing

Test Document Upload

A test HTML file is included: test-upload.html

1. Open test-upload.html in a browser
2. Enter your API URL and group ID
3. Select a file and upload
4. Verify the upload in the console

📝 Features in Detail

RAG (Retrieval-Augmented Generation)

The application supports RAG for context-aware AI responses:

1. Document Upload: Group creators can upload documents (PDF, DOCX, PPTX, TXT, CSV)
2. Vector Storage: Documents are chunked and stored in Pinecone vector database
3. Semantic Search: When users ask questions with @help, the system:
   • Searches the knowledge base for relevant chunks
   • Uses retrieved context to generate accurate responses
   • Maintains conversation history per group

File Sharing

• Files are uploaded to Cloudinary
• Supports multiple file types (images, PDFs, documents)
• Files are displayed inline in chat
• PDFs can be viewed directly in the browser

Group Management

• Public Groups: Anyone can join and view
• Private Groups: Requires invitation or approval
• Group Invitations: Shareable invite links
• Group Roles: Creator and member roles

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Umar Farooq

• GitHub: @umarfarooq3488

🙏 Acknowledgments

• Firebase for authentication and real-time database
• OpenAI for AI capabilities
• Cloudinary for file storage
• Pinecone for vector database
• All open-source contributors

📞 Support

For support, open an issue in the GitHub repository.

🔄 Version History

• v1.0.0 - Initial release with core features
  • Real-time messaging
  • Group and direct messaging
  • AI bot integration
  • File sharing
  • RAG capabilities

---

Made with ❤️ using React, Firebase, and FastAPI