Implement Real-Time Chat UI

## 📚 Overview
Develop a real-time chat interface that enables freelancers and clients to communicate instantly. This feature will support file sharing, offline syncing, and rich user interactions.

If you need coordination or clarification, use the project’s [[Telegram Group](https://t.me/+YZEXOc_LOzIyYTgx)](https://t.me/+YZEXOc_LOzIyYTgx).

---

## 🔍 Background
Real-time messaging is crucial for efficient collaboration on project milestones, resolving doubts, and offering support between clients and freelancers.

---

## 🛠 Requirements
- Create the chat component under `src/components/modules/chat`
- Integrate `socket.io-client` for real-time connection
- Store conversations offline using IndexedDB
- Enable sending/receiving of PDFs, images
- Display message status: sent, delivered, read
- Typing indicators for active participants

---

## 🔧 Implementation Plan

### 1. Create Feature Branch
```bash
git checkout -b feature-realtime-chat-[issue-number]
```

### 2. WebSocket Setup
- Use `socket.io-client` for establishing real-time connections
- Create context or hook for handling socket events

### 3. UI and UX
- Build UI using SHADCN/UI and Tailwind CSS
- Create reusable message bubble components
- Show loading placeholders while fetching history

### 4. Offline Sync
- Use IndexedDB to cache messages while offline
- Sync messages on reconnect

### 5. File Upload
- Allow sending of basic file types (PDF, PNG, JPG)
- Implement file preview component

### 6. Status Indicators
- Show status per message: sent, delivered, read
- Show typing indicators in conversation header

### 7. Testing
- Test sending/receiving messages
- Test reconnect scenarios
- Validate file size and supported formats

### 8. Commit and Push
```bash
git add .
git commit -m "Feature: Real-Time Chat Interface"
git push origin feature-realtime-chat-[issue-number]
```

---

## ✅ Definition of Done
- [ ] Real-time messaging is implemented with typing indicators
- [ ] IndexedDB offline storage is functional
- [ ] File upload works with basic limits
- [ ] Message status states are accurate
- [ ] Developer attaches screenshot of conversation interface
- [ ] Pull request meets template standards

---

## 📆 Timeframe
5 days

## 🖼️ Mockup


Start by inspecting the existing structure under src/components/modules/chat and the project's current UI conventions before planning the socket.io-client, IndexedDB, file-upload, and status-indicator work. Done means the listed messaging, offline sync, file, typing, status, reconnect, and validation behaviors work, with a conversation screenshot and tests covering the requested scenarios.

Written by the indexing model from the issue text.