rajarshi-ray16 / chat-app-with-llm

Chat Application

A real-time chat application that allows users to register, log in, and communicate with each other. Users can toggle their status between "AVAILABLE" and "BUSY". If a user is "BUSY", an LLM (Language Model) generates automated replies on their behalf.

Features

• User Registration and Login: Users can create an account and log in.
• Real-time Messaging: Users can send and receive messages in real-time using Socket.IO.
• User Status: Users can toggle their status between "AVAILABLE" and "BUSY".
• Automated Responses: When a user is "BUSY", an LLM generates responses to incoming messages.
• Chat History: Conversations are saved and can be retrieved.

Technologies Used

• Frontend: React, Axios, Socket.IO-client
• Backend: Node.js, Express, Socket.IO, Mongoose
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• LLM Integration: Axios for API calls to an external Language Model

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/chat-app.git
   cd chat-app

2. Install the dependencies for both the client and server:

   npm install
   cd frontend
   npm install
   cd ../backend
   npm install

3. Set up environment variables:

   Add in respective values in the .env file in the backend directory with the following content:

   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret
   LLM_API_URL=your_llm_api_url

   For this particular project, I have used a Gemini API, the JWT_SECRET was manually generated, and the mongo URI was for any local host.

4. Run the backend server:

   cd backend
   npm server.js

5. Run the frontend development server:

   cd frontend
   npm start

Usage

1. Register: Create a new account by providing an email and password.
2. Login: Log in with your email and password.
3. Toggle Status: Click the status button in the header to switch between "AVAILABLE" and "BUSY".
4. Send Messages: Select a user to chat with and start sending messages.
5. Receive Automated Replies: If the user you are messaging is "BUSY", you will receive automated replies generated by the LLM.

Code Overview

Frontend (Client)

• src/App.js: Main application component with routes and navigation.
• src/components/Register.js: Registration form component.
• src/components/Login.js: Login form component.
• src/components/Chat.js: Chat interface component using Socket.IO for real-time messaging.

Backend (Server)

• server.js: Entry point of the backend server.
• routes/auth.js: Routes for user authentication (register, login, logout).
• routes/chat.js: Routes for chat functionality (sending messages, querying LLM).
• models/User.js: Mongoose model for users.
• models/Message.js: Mongoose model for messages.
• models/Conversation.js: Mongoose model for conversations.
• middlewares/authMiddleware.js: Middleware for protecting routes with JWT authentication.
• controllers/authController.js: Controller for authentication logic.
• controllers/chatController.js: Controller for chat logic, including querying the LLM.

Socket.IO Integration

• Client-side: Socket.IO-client is used in Chat.js to handle real-time communication.
• Server-side: Socket.IO is integrated in server.js to handle incoming socket connections and events.

LLM Integration

The LLM is queried to generate automated responses when a user is "BUSY". This is handled in chatController.js with a 10-second timeout to ensure timely responses.