Aller au contenu principal

Compte Rendu Complet - Refonte de la Gestion des Messages du Chat Agent

Date​

2024 - Refonte complète de l'architecture de gestion des messages 2026-02-06 - Extensions fonctionnelles et UX (commandes, formulaires, fichiers)

Problème Identifié​

Symptôme Principal​

Lors de la suppression d'une conversation, l'ID de conversation restait présent et la conversation se rechargeait automatiquement lors de l'envoi d'un nouveau message.

Causes Racines Identifiées​

  1. Gestion d'état dispersée : L'état de conversation était géré à plusieurs endroits avec des refs et des flags complexes
  2. Cache React Query mal géré : Le cache n'était pas complètement nettoyé lors des suppressions
  3. Auto-chargement problématique : Un useEffect rechargeait automatiquement la dernière conversation même après suppression
  4. Race conditions : Plusieurs états et refs pouvaient entrer en conflit
  5. Architecture complexe : La logique était concentrée dans un seul hook monolithique

Solution Implémentée​

Architecture Refondue​

1. Séparation des Responsabilités​

Nouveau hook : useConversationState

  • Gestion centralisée de l'état des conversations
  • Prévention des race conditions
  • Gestion propre du cache
  • Flag pour empêcher l'auto-chargement après suppression

Nouveau hook : useMessageState

  • Gestion centralisée des messages optimistes
  • Gestion de l'état de traitement (isProcessing)
  • Gestion des AbortControllers
  • Prévention des chunks tardifs

Hook refondu : useAgentChatLogic

  • Architecture claire et modulaire
  • Utilisation des nouveaux hooks spécialisés
  • Séparation claire des responsabilités
  • Code plus maintenable et testable

2. Améliorations du Cache React Query​

Avant :

onSuccess: (_, conversationId) => {
  queryClient.invalidateQueries({ queryKey: ["conversations"] });
  queryClient.invalidateQueries({ queryKey: ["conversation", conversationId] });
  queryClient.removeQueries({ queryKey: ["conversation", conversationId] });
};

Après :

onSuccess: (_, conversationId) => {
  // Remove immediately (before invalidation) to prevent race conditions
  queryClient.removeQueries({ queryKey: ["conversation", conversationId] });
  // Then invalidate list to refresh
  queryClient.invalidateQueries({ queryKey: ["conversations"] });
};

3. Correction du Problème d'Auto-chargement​

Avant :

  • Un useEffect rechargeait automatiquement la dernière conversation
  • Le flag isNewConversationRequestedRef n'était pas toujours respecté
  • Pas de distinction entre suppression et nouvelle conversation

Après :

  • Flag centralisé dans useConversationState
  • Vérification stricte avant auto-chargement
  • Distinction claire entre suppression et nouvelle conversation
  • Nettoyage complet du cache avant auto-chargement

4. Gestion Robuste des Suppressions​

Nouvelle logique :

  1. Marquer la conversation comme en cours de suppression
  2. Supprimer du cache immédiatement
  3. Si c'était la conversation courante, la réinitialiser
  4. Marquer le flag pour empêcher l'auto-chargement
  5. Nettoyer tous les états associés

Améliorations Visuelles​

1. Animations Subtiles​

  • Fade-in pour les nouveaux messages
  • Transitions douces sur les interactions
  • Animations de scroll optimisées avec requestAnimationFrame

2. Feedback Utilisateur Amélioré​

  • États visuels clairs pour les boutons
  • Indicateurs de chargement améliorés
  • Transitions sur les hover

3. Performance​

  • Utilisation de requestAnimationFrame pour le scroll
  • Optimisation des re-renders avec useMemo
  • Réduction des calculs inutiles

Extensions 2026-02-06​

Commandes, formulaires et guidage​

  • ✅ Commandes / avec auto‑complétion et navigation clavier
  • ✅ Tokens inline pour actions / et contexte @
  • ✅ Form builder obligatoire pour toute création d’entité
  • ✅ Champs requis alignés sur les formulaires standards
  • ✅ Formulaires désactivés si message non‑dernier
  • ✅ Statuts de formulaires ACTIVE/DONE/CANCELED

Fichiers et contexte​

  • ✅ Pièces jointes de conversation (upload, listing, suppression)
  • ✅ OCR/Extraction PDF/IMG pour enrichir le contexte IA
  • ✅ Badge “fichiers attachés” dans le message utilisateur

UX conversation​

  • ✅ Annulation de requêtes sans toast parasite
  • ✅ Nettoyage des tokens après envoi
  • ✅ Rappels d’actions dans le message utilisateur

Extensions 2026-02-07 (Form builder)​

  • ✅ Refactor UI actions en composants spécialisés (ChatRequestInfo*) + hooks
  • ✅ Centralisation du préremplissage et des champs modifiés
  • ✅ Conformité stricte < 400 lignes par fichier pour les composants agent
  • ✅ Commandes / sans champs (ex: /help) envoyées directement
  • ✅ Input non bloqué quand un formulaire est ouvert
  • ✅ Badges contexte affichent @type: libellé
  • ✅ Guard duplication contact par email (y compris email utilisateur)

Fichiers Créés​

Nouveaux Hooks​

  1. hooks/useConversationState.ts

    • Gestion centralisée de l'état des conversations
    • Méthodes : startNewConversation, selectConversation, deleteConversation, clearConversationMessages
    • Prévention des race conditions

  2. hooks/useMessageState.ts

    • Gestion centralisée des messages
    • Méthodes : addOptimisticUserMessage, startStreaming, markMessageComplete
    • Gestion des AbortControllers

Fichiers Modifiés​

  1. useAgentChatLogic.ts - Refonte complète

    • Architecture modulaire
    • Utilisation des nouveaux hooks
    • Code plus clair et maintenable

  2. useAgentChat.ts - Amélioration du cache

    • Nettoyage immédiat du cache lors des suppressions
    • Ordre d'exécution optimisé

  3. AgentMessages.tsx - Améliorations visuelles

    • Animations pour les nouveaux messages
    • Scroll optimisé

  4. AgentMessage.tsx - Améliorations visuelles

    • Transitions sur hover
    • Meilleure expérience utilisateur

  5. AgentInput.tsx - Améliorations visuelles

    • Feedback visuel amélioré
    • Animations subtiles

Architecture Finale​

useAgentChatLogic (Orchestrateur principal)
├── useConversationState (État des conversations)
│   ├── Gestion de currentConversationId
│   ├── Prévention auto-chargement
│   └── Gestion du cache
├── useMessageState (État des messages)
│   ├── Messages optimistes
│   ├── Traitement en cours (isProcessing)
│   └── AbortControllers
├── useAgentChat (API REST)
│   ├── Conversations
│   ├── Messages
│   └── Cache React Query
└── Réponse synchrone API
    ├── Completion
    └── Erreurs

Mise à jour 2026-02-08​

  • ✅ Retrait du streaming front/back.
  • ✅ Formulaires affichés sans refresh (fix cache + déduplication assistant par runId).
  • ✅ Affichage du message utilisateur immédiat (optimistic avant latence réseau).
  • ✅ Retour action unifié via metadata.actionResult (succès/erreur/warning).

Tests et Validation​

Scénarios Testés​

  1. ✅ Suppression de conversation

    • La conversation est supprimée du cache
    • L'ID est réinitialisé
    • Pas de rechargement automatique
    • Nouveau message crée une nouvelle conversation

  2. ✅ Nouvelle conversation

    • Cache nettoyé
    • Pas d'auto-chargement
    • Nouveau message fonctionne correctement

  3. ✅ Sélection de conversation

    • Chargement correct
    • Messages affichés
    • Pas de conflit avec les messages optimistes

  4. ✅ Envoi de message

    • Message optimiste affiché immédiatement
    • Streaming fonctionne
    • Message final sauvegardé
    • Pas de doublons

  5. ✅ Annulation de requête

    • AbortController fonctionne
    • État nettoyé correctement

  6. ✅ Gestion des erreurs

    • Messages d'erreur affichés
    • État nettoyé en cas d'erreur

Bénéfices de la Refonte​

1. Maintenabilité​

  • Code plus modulaire et organisé
  • Séparation claire des responsabilités
  • Plus facile à tester et déboguer

2. Robustesse​

  • Élimination des race conditions
  • Gestion propre du cache
  • Prévention des fuites de mémoire

3. Performance​

  • Optimisations du scroll
  • Réduction des re-renders
  • Gestion efficace du cache

4. Expérience Utilisateur​

  • Animations subtiles
  • Feedback visuel amélioré
  • Comportement prévisible

5. Fiabilité​

  • Problème de suppression résolu
  • Auto-chargement contrôlé
  • Gestion d'erreurs améliorée

Points d'Attention​

1. Compatibilité​

  • Tous les composants existants fonctionnent avec la nouvelle architecture
  • L'API publique reste la même

2. Migration​

  • Aucune migration nécessaire
  • Les changements sont internes

3. Tests​

  • Tous les scénarios critiques ont été testés
  • Aucune régression identifiée

Conclusion​

La refonte complète de la gestion des messages du chat agent a résolu le problème principal de rechargement après suppression tout en améliorant significativement l'architecture, la maintenabilité et l'expérience utilisateur. L'architecture modulaire facilite les futures évolutions et la maintenance du code.

Évolution livrée : commandes en / (2026-02-06)​

Le système de commandes en / est désormais livré (ex. /contact, /session, /devis, /facture, /aide) :

  • Backend : Détection du préfixe / en début de message, routage vers un flux dédié form builder (pas d’action LLM libre pour les créations).
  • Frontend : Input qui détecte / et affiche un menu de suggestions ; sélection d’une commande = token inline + formulaire structuré avec champs requis.
  • Sécurisation des données : Champs obligatoires garantis (email requis pour contact, start_date/title/location pour session). Voir AGENT_IMPROVEMENTS.md (documentation interne) et PLAN_AMELIORATIONS_CRM.md.

Évolution livrée : dual‑mode chat + fichiers (2026-02-06)​

  • Dual‑mode : séparation stricte entre actions via / et conversation libre pour éviter les détections ambiguës.
  • Fichiers de conversation : upload, listing, suppression et extraction OCR (PDF/IMG) pour enrichir le contexte de l’IA.

Prochaines Étapes Recommandées​

  1. Tests unitaires : Ajouter des tests pour les nouveaux hooks
  2. Tests d'intégration : Couvrir les scénarios critiques
  3. Documentation : Documenter les nouveaux hooks
  4. Monitoring : Surveiller les performances en production