feat: mise en place de la messagerie [#17]

Front-End/docs/messagerie-instantanee.md

@@ -0,0 +1,126 @@
+# Système de Messagerie Instantanée
+
+## Présentation
+
+Le système de messagerie instantanée de N3WT-SCHOOL permet aux utilisateurs de l'établissement (administrateurs, professeurs, parents, étudiants) de communiquer en temps réel via une interface chat moderne et intuitive.
+
+## Fonctionnalités
+
+### Chat en Temps Réel
+
+- Envoi et réception de messages instantanés
+- Notification de statut de frappe (utilisateur en train d'écrire)
+- Indicateur de statut de connexion WebSocket
+- Reconnexion automatique en cas de perte de connexion
+
+### Gestion des Conversations
+
+- Liste des conversations existantes
+- Création de nouvelles conversations
+- Recherche de destinataires par nom ou email
+- Compteur de messages non lus
+
+### Interface Utilisateur
+
+- Interface moderne en deux panneaux (conversations + chat)
+- Bulles de messages différenciées (expéditeur/destinataire)
+- Indicateurs visuels de statut de connexion
+- Recherche temps réel de contacts
+
+## Utilisation
+
+### Accès au Chat
+
+Le système de messagerie est accessible via les pages suivantes :
+
+- **Parents** : `/[locale]/parents/messagerie`
+- **Administrateurs** : Intégré dans le panneau d'administration
+
+### Créer une Conversation
+
+1. Cliquer sur le bouton "+" en haut à droite de la liste des conversations
+2. Rechercher un contact en tapant son nom ou email
+3. Sélectionner le destinataire dans les résultats
+4. La conversation se crée automatiquement
+
+### Envoyer un Message
+
+1. Sélectionner une conversation dans la liste de gauche
+2. Taper le message dans le champ de saisie en bas
+3. Appuyer sur Entrée ou cliquer sur le bouton d'envoi
+
+## Architecture Technique
+
+### Frontend (React/Next.js)
+
+**Composants principaux :**
+
+- `InstantChat` : Composant principal du chat
+- `ConnectionStatus` : Affichage du statut de connexion
+- `ConversationItem` : Élément de liste de conversation
+- `MessageBubble` : Bulle de message individuelle
+- `MessageInput` : Zone de saisie de message
+- `TypingIndicator` : Indicateur de frappe
+
+**Hook personnalisé :**
+
+- `useWebSocket` : Gestion de la connexion WebSocket et des événements
+
+### Backend (Django)
+
+**Module GestionMessagerie :**
+
+- `consumers.py` : Consumer WebSocket pour la messagerie temps réel
+- `routing.py` : Configuration des routes WebSocket
+- `urls.py` : URLs API REST pour les conversations et messages
+
+**Module GestionEmail :**
+
+- `views.py` : Vues pour l'envoi d'emails classiques
+- `urls.py` : URLs pour les fonctions email
+
+### Communication
+
+- **WebSocket** : Communication bidirectionnelle temps réel
+- **REST API** : Chargement initial des données et recherche
+- **Channels** : Gestion des groupes de conversation Django
+
+## Configuration
+
+### URLs WebSocket
+
+Les URLs sont configurées automatiquement selon l'environnement :
+
+- **Développement** : `ws://localhost:8000/ws/chat/`
+- **Production** : `wss://[domaine]/ws/chat/`
+
+### Variables d'Environnement
+
+Le système utilise les configurations standard de l'application pour :
+
+- Base de données (conversations, messages, utilisateurs)
+- Authentification (sessions Django)
+- Établissements (filtrage par établissement)
+
+## Sécurité
+
+- Authentification requise pour accéder au chat
+- Filtrage des conversations par établissement
+- Validation côté serveur de tous les messages
+- Gestion des permissions selon le rôle utilisateur
+
+## Tests
+
+Le système dispose de tests unitaires Jest couvrant :
+
+- Rendu des composants
+- Gestion des connexions WebSocket
+- Recherche de contacts
+- Envoi de messages
+- Indicateurs de frappe
+
+Exécution des tests :
+
+```bash
+npm test
+```