Update templates/philosophie.html

templates/philosophie.html

@@ -16,34 +16,199 @@
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
   <style>
     /* Styles pour le Glow Up */
-    :root { font-family: 'Inter', sans-serif; }
+    :root { 
+      font-family: 'Inter', sans-serif;
+      /* Variables pour des transitions plus fluides */
+      --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-fast: all 0.15s ease-out;
+    }
+    
+    /* Optimisations pour le scroll fluide */
+    html {
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+    }
     
-    .collapsible { cursor: pointer; padding: 1rem; width: 100%; border: none; text-align: left; outline: none; transition: background-color 0.2s ease; }
-    .collapsible:hover { background-color: #f9fafb; }
-    .content { padding: 0 1rem; display: none; overflow: hidden; background-color: white; }
+    body {
+      /* Prévenir le reflow lors de la génération */
+      will-change: scroll-position;
+      /* Améliorer les performances sur mobile */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    
+    .collapsible { 
+      cursor: pointer; 
+      padding: 1rem; 
+      width: 100%; 
+      border: none; 
+      text-align: left; 
+      outline: none; 
+      transition: var(--transition-fast);
+      /* Optimiser pour les interactions tactiles */
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+    }
+    
+    .collapsible:hover { 
+      background-color: #f9fafb; 
+    }
+    
+    .content { 
+      padding: 0 1rem; 
+      display: none; 
+      overflow: hidden; 
+      background-color: white;
+      /* Transition plus fluide pour l'ouverture */
+      transition: var(--transition-smooth);
+    }
     
     /* Styles pour la lisibilité du Markdown généré */
-    .prose { max-width: 100% !important; }
-    #response .prose { color: #374151; word-wrap: break-word; overflow-wrap: break-word; }
-    .prose p, .prose ul, .prose ol, .prose li { line-height: 1.75; }
-    .prose h1, .prose h2, .prose h3 { margin-top: 1.5em; margin-bottom: 0.8em; line-height: 1.3; }
+    .prose { 
+      max-width: 100% !important; 
+      /* Optimiser le rendu du texte */
+      text-rendering: optimizeLegibility;
+    }
     
-    /* Animation fadeIn */
-    .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    #response .prose { 
+      color: #374151; 
+      word-wrap: break-word; 
+      overflow-wrap: break-word;
+      /* Prévenir les débordements sur mobile */
+      hyphens: auto;
+      -webkit-hyphens: auto;
+      -moz-hyphens: auto;
+    }
+    
+    .prose p, .prose ul, .prose ol, .prose li { 
+      line-height: 1.75; 
+    }
+    
+    .prose h1, .prose h2, .prose h3 { 
+      margin-top: 1.5em; 
+      margin-bottom: 0.8em; 
+      line-height: 1.3; 
+    }
+    
+    /* Animation fadeIn optimisée */
+    .animate-fadeIn { 
+      animation: fadeIn 0.4s ease-out forwards;
+      /* Utiliser GPU pour l'animation */
+      transform: translateZ(0);
+      will-change: opacity, transform;
+    }
+    
+    @keyframes fadeIn { 
+      from { 
+        opacity: 0; 
+        transform: translateY(15px) translateZ(0); 
+      } 
+      to { 
+        opacity: 1; 
+        transform: translateY(0) translateZ(0); 
+      } 
+    }
     
     /* Styles pour Select2 */
-    .select2-container--default .select2-selection--single { border: 1px solid #d1d5db; border-radius: 0.75rem; height: auto; padding: 0.75rem 1rem; background-color: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
-    .select2-container--default .select2-selection--single .select2-selection__rendered { color: #111827; line-height: inherit; padding-right: 1.5rem; }
-    .select2-results__option .course-author { font-size: 0.875rem; color: #6b7280; display: block; margin-top: 0.1rem; }
-    .select2-dropdown { border-radius: 0.75rem; border: 1px solid #d1d5db; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); }
+    .select2-container--default .select2-selection--single { 
+      border: 1px solid #d1d5db; 
+      border-radius: 0.75rem; 
+      height: auto; 
+      padding: 0.75rem 1rem; 
+      background-color: white; 
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
+    }
+    
+    .select2-container--default .select2-selection--single .select2-selection__rendered { 
+      color: #111827; 
+      line-height: inherit; 
+      padding-right: 1.5rem; 
+    }
+    
+    .select2-results__option .course-author { 
+      font-size: 0.875rem; 
+      color: #6b7280; 
+      display: block; 
+      margin-top: 0.1rem; 
+    }
+    
+    .select2-dropdown { 
+      border-radius: 0.75rem; 
+      border: 1px solid #d1d5db; 
+      box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); 
+    }
 
     /* Styles pour l'aperçu de l'image */
-    #image-preview { max-height: 200px; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
+    #image-preview { 
+      max-height: 200px; 
+      border-radius: 0.75rem; 
+      box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); 
+    }
 
     /* Cacher le marqueur par défaut de <details> */
-    summary { list-style: none; }
-    summary::-webkit-details-marker { display: none; }
+    summary { 
+      list-style: none; 
+    }
+    
+    summary::-webkit-details-marker { 
+      display: none; 
+    }
+    
+    /* Optimisations mobiles */
+    @media (max-width: 640px) {
+      /* Réduire les marges sur mobile pour plus d'espace */
+      .max-w-3xl {
+        max-width: 100%;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+      }
+      
+      /* Optimiser l'affichage des sections de contenu */
+      #response, #thinking-wrapper {
+        /* Éviter les débordements horizontaux */
+        overflow-x: hidden;
+      }
+      
+      /* Améliorer la lisibilité du texte généré */
+      .prose {
+        font-size: 0.95rem;
+        line-height: 1.6;
+      }
+      
+      /* Réduire l'animation pour économiser la batterie */
+      .animate-fadeIn {
+        animation-duration: 0.2s;
+      }
+    }
+    
+    /* Conteneur de génération avec scroll optimisé */
+    .generation-container {
+      /* Conteneur stable pour éviter les recalculs de layout */
+      contain: layout style;
+      /* Optimiser les performances de scroll */
+      transform: translateZ(0);
+    }
+    
+    /* Améliorer les performances du textarea */
+    textarea {
+      /* Éviter les reflows pendant la saisie */
+      resize: none;
+      /* Optimiser sur mobile */
+      -webkit-appearance: none;
+    }
+    
+    /* Optimiser les boutons pour le tactile */
+    button {
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+      transition: var(--transition-fast);
+    }
+    
+    /* Scroll fluide pour les éléments avec beaucoup de contenu */
+    .content-scrollable {
+      -webkit-overflow-scrolling: touch;
+      scroll-behavior: smooth;
+    }
   </style>
 </head>
 <body class="bg-gray-50 text-gray-900">
@@ -124,7 +289,7 @@
       </div>
       
       <!-- Thinking Process Section (Collapsible) -->
-      <div id="thinking-wrapper" class="hidden mt-8">
+      <div id="thinking-wrapper" class="hidden mt-8 generation-container">
         <details id="thinking-container" class="bg-white border border-gray-200 rounded-xl shadow-sm">
           <summary class="flex justify-between items-center p-4 cursor-pointer">
             <h3 class="text-md font-semibold text-gray-700">Processus de pensée de l'IA</h3>
@@ -132,14 +297,14 @@
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
             </svg>
           </summary>
-          <div id="thinking-process" class="p-4 border-t border-gray-200 text-sm text-gray-600 prose prose-sm max-w-none max-h-64 overflow-y-auto">
+          <div id="thinking-process" class="p-4 border-t border-gray-200 text-sm text-gray-600 prose prose-sm max-w-none max-h-64 overflow-y-auto content-scrollable">
             <!-- Le contenu du processus de pensée sera injecté ici -->
           </div>
         </details>
       </div>
       
       <!-- Response Section -->
-      <div id="response" class="hidden mt-6">
+      <div id="response" class="hidden mt-6 generation-container">
         <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 sm:p-8 prose prose-violet max-w-none">
           <!-- Le contenu de la réponse sera injecté ici -->
         </div>
@@ -182,6 +347,49 @@ $(document).ready(function() {
     moment.locale('fr');
     const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true });
 
+    // Variables pour optimiser le scroll
+    let isScrolling = false;
+    let scrollTimer = null;
+    let lastScrollTime = 0;
+    
+    // Fonction de scroll optimisée avec throttling
+    function smoothScrollToBottom(force = false) {
+        const now = Date.now();
+        
+        // Throttling : éviter trop d'appels de scroll
+        if (!force && now - lastScrollTime < 100) {
+            return;
+        }
+        
+        lastScrollTime = now;
+        
+        // Annuler le timer précédent s'il existe
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+        }
+        
+        // Utiliser requestAnimationFrame pour un scroll plus fluide
+        if (!isScrolling) {
+            isScrolling = true;
+            
+            requestAnimationFrame(() => {
+                // Scroll fluide vers le bas avec une marge
+                const targetScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight - 50);
+                
+                // Utiliser la méthode native pour de meilleures performances
+                window.scrollTo({
+                    top: targetScrollTop,
+                    behavior: 'smooth'
+                });
+                
+                // Marquer comme terminé après l'animation
+                scrollTimer = setTimeout(() => {
+                    isScrolling = false;
+                }, 200);
+            });
+        }
+    }
+
     // --- Gestion de l'interface ---
     $('#type-select').change(function() {
         const type = $(this).val();
@@ -210,17 +418,21 @@ $(document).ready(function() {
         }
     });
 
-    // --- Logique de Génération en Streaming ---
+    // --- Logique de Génération en Streaming Optimisée ---
     async function handleStreamedGeneration(url, options) {
         Swal.fire({ title: 'Génération en cours...', html: 'Connexion au service IA...', allowOutsideClick: false, showConfirmButton: false, didOpen: () => Swal.showLoading() });
         
         $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
-        $('#thinking-container').prop('open', false); // S'assurer que le details est fermé au début
+        $('#thinking-container').prop('open', false);
         const thinkingDiv = $('#thinking-process');
         const responseDiv = $('#response > div');
         thinkingDiv.html('');
         responseDiv.html('');
         let fullResponseText = '', fullThinkingText = '', firstChunkReceived = false;
+        
+        // Compteur pour optimiser les updates
+        let chunkCount = 0;
+        const updateFrequency = 3; // Mettre à jour tous les 3 chunks pour réduire les recalculs
 
         try {
             const response = await fetch(url, options);
@@ -241,25 +453,55 @@ $(document).ready(function() {
                 buffer += decoder.decode(value, { stream: true });
                 const lines = buffer.split('\n');
                 buffer = lines.pop();
+                
+                let shouldUpdate = false;
 
                 for (const line of lines) {
                     if (line.trim() === '') continue;
                     try {
                         const data = JSON.parse(line.trim());
+                        chunkCount++;
+                        
                         if (data.type === 'thought') {
-                            $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
+                            if (!$('#thinking-wrapper').is(':visible')) {
+                                $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
+                            }
                             fullThinkingText += data.content;
-                            thinkingDiv.html(marked.parse(fullThinkingText));
+                            shouldUpdate = true;
                         } else if (data.type === 'answer') {
-                            $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                            if (!$('#response').is(':visible')) {
+                                $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                            }
                             fullResponseText += data.content;
-                            responseDiv.html(marked.parse(fullResponseText));
+                            shouldUpdate = true;
                         } else if (data.type === 'error') {
                             throw new Error(data.content);
                         }
-                    } catch (e) { console.error("Erreur JSON parse:", line, e); }
+                    } catch (e) { 
+                        console.error("Erreur JSON parse:", line, e); 
+                    }
+                }
+                
+                // Mettre à jour le DOM moins fréquemment pour de meilleures performances
+                if (shouldUpdate && (chunkCount % updateFrequency === 0 || done)) {
+                    if (fullThinkingText) {
+                        thinkingDiv.html(marked.parse(fullThinkingText));
+                    }
+                    if (fullResponseText) {
+                        responseDiv.html(marked.parse(fullResponseText));
+                    }
+                    
+                    // Scroll optimisé vers le bas
+                    smoothScrollToBottom();
                 }
-                 $('html, body').animate({ scrollTop: $(document).height() }, 300);
+            }
+            
+            // Mise à jour finale
+            if (fullThinkingText) {
+                thinkingDiv.html(marked.parse(fullThinkingText));
+            }
+            if (fullResponseText) {
+                responseDiv.html(marked.parse(fullResponseText));
             }
 
             $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
@@ -273,6 +515,9 @@ $(document).ready(function() {
                 title = $('#question').val().trim();
             }
             saveDissertation(title, fullResponseText);
+            
+            // Scroll final pour s'assurer que tout est visible
+            smoothScrollToBottom(true);
 
         } catch (error) {
             Swal.fire({ icon: 'error', title: 'Erreur', text: error.message || "Une erreur inconnue est survenue." });
@@ -355,7 +600,7 @@ $(document).ready(function() {
                     </div>
                 </button>
                 <div class="content prose max-w-none border-t border-gray-200">
-                  <div class="inner-content p-4"></div>
+                  <div class="inner-content p-4 content-scrollable"></div>
                   <div class="p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl">
                     <button class="delete-btn text-sm text-red-600 hover:text-red-800 font-medium" data-index="${index}">Supprimer</button>
                   </div>
@@ -367,8 +612,23 @@ $(document).ready(function() {
         });
     }
     
+    // Optimiser l'ouverture des dissertations avec une transition plus fluide
     $('#dissertations-list').on('click', '.collapsible', function() {
-        $(this).next('.content').slideToggle(250);
+        const content = $(this).next('.content');
+        const isVisible = content.is(':visible');
+        
+        // Animation plus fluide avec easing
+        content.stop(true, true).slideToggle({
+            duration: 300,
+            easing: 'swing',
+            start: function() {
+                $(this).css('overflow', 'hidden');
+            },
+            complete: function() {
+                $(this).css('overflow', isVisible ? 'hidden' : 'visible');
+            }
+        });
+        
         $(this).toggleClass("active");
     });
     
@@ -389,6 +649,51 @@ $(document).ready(function() {
         });
     });
 
+    // Optimisation pour les événements de scroll sur mobile
+    let ticking = false;
+    
+    function updateScrollPosition() {
+        // Code pour gérer les changements de position de scroll si nécessaire
+        ticking = false;
+    }
+    
+    window.addEventListener('scroll', function() {
+        if (!ticking) {
+            requestAnimationFrame(updateScrollPosition);
+            ticking = true;
+        }
+    }, { passive: true });
+
+    // Optimisation du resize pour mobile
+    let resizeTimer;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(function() {
+            // Recalculer les dimensions si nécessaire
+            if (window.innerWidth <= 640) {
+                // Optimisations spécifiques mobile
+                $('body').addClass('mobile-optimized');
+            } else {
+                $('body').removeClass('mobile-optimized');
+            }
+        }, 250);
+    }, { passive: true });
+
+    // Optimisation tactile pour mobile
+    if ('ontouchstart' in window) {
+        $('body').addClass('touch-device');
+        
+        // Améliorer les interactions tactiles
+        $(document).on('touchstart', 'button, .collapsible', function() {
+            $(this).addClass('touch-active');
+        });
+        
+        $(document).on('touchend', 'button, .collapsible', function() {
+            const element = $(this);
+            setTimeout(() => element.removeClass('touch-active'), 150);
+        });
+    }
+
     // Init
     updateSavedDissertationsList();
 });