Upload philosophie.html

templates/philosophie.html

@@ -17,7 +17,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Styles existants (collapsible, prose, animations, etc.) */
+        /* Styles exactly as provided before (collapsible, prose, original animations, Select2 base styles) */
         .collapsible {
             cursor: pointer;
             padding: 18px;
@@ -26,7 +26,7 @@
             text-align: left;
             outline: none;
             font-size: 15px;
-            background-color: #f1f1f1; /* Base style, override below */
+            background-color: #f1f1f1;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -51,43 +51,46 @@
         #response .prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 4px solid #e5e7eb; font-style: italic; }
         #response .prose code { background-color: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.875em; }
 
-        /* Removed active/hover on .collapsible, handled by JS/Tailwind */
+        /* Original hover/active for collapsible button */
+        .active, .collapsible:hover {
+             background-color: #ddd;
+        }
 
         .content {
-            padding: 0 18px; /* Base padding, overridden by Tailwind below */
+            padding: 0 18px;
             display: none;
             overflow: hidden;
             background-color: white;
         }
 
-        /* Animations */
+        /* Original Animations */
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Added fadeOut */
         @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }
         .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
-        .animate-fadeOut { animation: fadeOut 0.3s ease-out forwards; }
+        .animate-fadeOut { animation: fadeOut 0.3s ease-out forwards; } /* Added fadeOut */
         .animate-slideUp { animation: slideUp 0.5s ease-out forwards; }
         .animate-shake { animation: shake 0.5s ease-in-out; }
-        .rotate-180 { transform: rotate(180deg); }
-        .chevron { transition: transform 0.2s ease-in-out; } /* Smooth chevron rotation */
+        .rotate-180 { transform: rotate(180deg); } /* For chevron */
+        .chevron { transition: transform 0.2s ease-in-out; } /* For chevron */
 
 
         /* Select2 Styles */
         .select2-container--default .select2-selection--single { border: 1px solid #e5e7eb !important; border-radius: 0.75rem !important; height: auto !important; padding: 0.625rem 1rem !important; background-color: white !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; display: flex !important; align-items: center !important; }
         .select2-container--default .select2-selection--single .select2-selection__rendered { color: #374151 !important; line-height: inherit !important; padding-right: 1.5rem !important; }
-        .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af !important; } /* Placeholder color */
+        .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af !important; }
         .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; transform: translateY(-50%) !important; right: 0.75rem !important; height: 1.25rem !important; width: 1.25rem !important; }
-        .select2-container--default .select2-selection--single .select2-selection__clear { font-size: 1.5rem; font-weight: bold; color: #9ca3af; margin-right: 0.5rem; } /* Style clear button */
+        .select2-container--default .select2-selection--single .select2-selection__clear { font-size: 1.5rem; font-weight: bold; color: #9ca3af; margin-right: 0.5rem; }
 
         .select2-dropdown { border: 1px solid #e5e7eb !important; border-radius: 0.75rem !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; padding: 0.25rem !important; background-color: white !important; }
         .select2-search--dropdown .select2-search__field { border: 1px solid #e5e7eb !important; border-radius: 0.375rem !important; padding: 0.5rem !important; }
-        .select2-results__options { padding: 0.25rem !important; max-height: 250px !important; } /* Limit dropdown height */
+        .select2-results__options { padding: 0.25rem !important; max-height: 250px !important; }
         .select2-results__option { padding: 0.5rem 0.75rem !important; }
         .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #ede9fe !important; color:#374151 !important; }
         .select2-container--default .select2-results__option--selected { background-color: #f3f4f6 !important; color:#374151 !important; }
         .select2-results__option .course-author { font-size: 0.875rem; color: #6b7280; display: block; margin-top: 0.25rem; }
-        .select2-container--default .select2-results__option[aria-disabled=true] { color: #9ca3af; } /* Disabled option style */
+        .select2-container--default .select2-results__option[aria-disabled=true] { color: #9ca3af; }
 
     </style>
 </head>
@@ -141,16 +144,16 @@
                             </div>
                         </div>
                         <div id="current-type-label" class="inline-flex px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-violet-50 to-indigo-50 text-violet-700 border border-violet-200">
-                            Sujet de type 1
+                            <!-- Label set by JS -->
                         </div>
                     </div>
 
                     <!-- Course Selection -->
                      <div class="space-y-3">
-                        <label for="course-select" class="block text-sm font-medium text-gray-700">Sélection du cours (Optionnel, pour contextualiser)</label>
-                            <!-- NOTE: We only need the select element. Select2 will replace it. -->
+                        <label for="course-select" class="block text-sm font-medium text-gray-700">Sélection du cours (Optionnel)</label>
                             <select id="course-select" class="w-full">
-                                <!-- Placeholder option is added via Select2 config -->
+                                <!-- Placeholder Option - Select2 will use this -->
+                                <option value="">Choisir un cours...</option>
                              </select>
                             <div class="course-meta hidden mt-2"> <!-- Meta info appears below -->
                             <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
@@ -247,13 +250,13 @@
         $courseSelect.select2({
             placeholder: 'Choisir un cours...',
             allowClear: true, // Allows removing the selection
-            data: [{ id: '', text: 'Chargement des cours...' }], // Initial loading state
+             // Keep the initial placeholder option from HTML
             templateResult: function (course) {
-                if (!course.id) { // For placeholder or loading text
+                if (!course.id) { // For placeholder
                     return course.text;
                 }
-                // Ensure data is present before accessing
-                const author = course.author || $(course.element).data('author'); // Get author from data or element
+                // Get author data attached to the option element
+                const author = $(course.element).data('author');
                 if (!author) {
                     return course.text; // Fallback if author is missing
                 }
@@ -270,7 +273,7 @@
 
         // 2. Configuration for marked (Markdown parser)
          marked.setOptions({
-            breaks: true, gfm: true, headerIds: false, // Disabled header IDs to avoid conflicts
+            breaks: true, gfm: true, headerIds: false, // headerIds: false is usually safer
             langPrefix: 'language-', smartLists: true, smartypants: true
         });
 
@@ -305,180 +308,408 @@
             $('#current-type-label').text(labelText);
         }).trigger('change'); // Trigger initially to set the label
 
-        // 7. Load Courses Function
+        // 7. Load Courses Function (with original animation indication)
         function loadCourses() {
             console.log("Attempting to load courses..."); // Debug log
             return $.ajax({
                 url: '/api/philosophy/courses',
                 method: 'GET',
-                dataType: 'json', // Expect JSON response
+                dataType: 'json',
                 beforeSend: function() {
-                   // Set loading state in Select2
-                   $courseSelect.empty().append(new Option('Chargement...', '', true, true)).prop('disabled', true).trigger('change');
-                   console.log("Set loading state for course select."); // Debug log
+                   // Original animation: Disable and add pulse class to the Select2 container
+                   $courseSelect.prop('disabled', true).next('.select2-container').addClass('animate-pulse');
+                   console.log("Set loading state (pulse) for course select."); // Debug log
+                },
+                // Remove pulse on complete, regardless of success/fail
+                complete: function() {
+                    $courseSelect.prop('disabled', false).next('.select2-container').removeClass('animate-pulse');
+                     console.log("Removed loading state (pulse)."); // Debug log
                 }
-                // No 'complete' needed here, handled in done/fail
             });
         }
 
-        // 8. Execute Course Loading and Populate Select2
+        // 8. Execute Course Loading and Populate Select2 (using append and .data())
         loadCourses()
             .done(function(courses) {
                 console.log("Courses received:", courses); // Debug log
                 if (!Array.isArray(courses)) {
                     console.error("Received data is not an array:", courses);
                     Toast.fire({ icon: 'error', title: 'Erreur Format Données', text: 'Les données des cours reçues sont invalides.' });
-                     // Set error state in Select2
-                     $courseSelect.empty().append(new Option('Erreur chargement', '', true, true)).prop('disabled', true).trigger('change');
-                    return;
+                    return; // Stop processing if data is invalid
                 }
 
-                // Prepare data for Select2, including the placeholder
-                const selectData = courses.map(course => ({
-                    id: course.id,
-                    text: course.title,
-                    author: course.author, // Include author directly in data object
-                    updated_at: course.updated_at // Include update date
-                }));
-
-                console.log("Prepared Select2 data:", selectData); // Debug log
-
-                // Re-initialize Select2 with the actual data
-                $courseSelect.empty(); // Clear previous options (like 'Loading...')
-                $courseSelect.select2({ // Initialize again with full config
-                    placeholder: 'Choisir un cours...',
-                    allowClear: true,
-                    data: selectData, // Provide the formatted data directly
-                    templateResult: function (course) {
-                        if (!course.id) return course.text;
-                        const author = course.author; // Access author directly from data
-                        if (!author) return course.text;
-                        return $(`<span>${course.text}</span><span class="course-author">Pr. ${author}</span>`);
-                    },
-                    templateSelection: function (course) {
-                        return course.text || 'Choisir un cours...';
-                    }
-                }).prop('disabled', false); // Enable the dropdown
+                // Clear existing course options (keep the placeholder)
+                $courseSelect.find('option:not([value=""])').remove();
+
+                // Add new options from fetched data
+                courses.forEach(course => {
+                    // Create a new <option> element using the Option constructor
+                    const newOption = new Option(course.title, course.id); // (text, value)
+
+                    // Attach the author and update date as data attributes TO THE OPTION
+                    $(newOption).data('author', course.author);
+                    $(newOption).data('updated_at', course.updated_at); // Store update date if needed
+
+                    // Append the new option to the original select element
+                    $courseSelect.append(newOption);
+                });
 
-                console.log("Select2 re-initialized with courses."); // Debug log
+                // IMPORTANT: Trigger change for Select2 to recognize new options
+                // Use 'change.select2' for better compatibility if needed, but 'change' usually works
+                $courseSelect.trigger('change');
+
+                console.log("Appended new options and triggered change."); // Debug log
 
             })
             .fail(function(jqXHR, textStatus, errorThrown) {
                 console.error("Failed to load courses:", textStatus, errorThrown, jqXHR.responseText); // Debug log
                 Toast.fire({
                     icon: 'error', title: 'Erreur Chargement Cours',
-                    text: 'Impossible de récupérer la liste des cours. Vérifiez la console pour les détails.'
+                    text: 'Impossible de récupérer la liste des cours.'
                 });
-                 // Set error state in Select2
-                 $courseSelect.empty().append(new Option('Erreur chargement', '', true, true)).prop('disabled', true).trigger('change');
+                 // Optionally clear or show an error message in the select itself
+                 $courseSelect.find('option:not([value=""])').remove(); // Clear any potentially added options on fail
             });
 
-        // 9. Course Selection Change Handler (to show meta info)
-        $courseSelect.on('change', function(e) {
-            const $courseMeta = $('.course-meta');
-            const selectedData = $(this).select2('data')[0]; // Get selected data object from Select2
-
-            console.log("Course selection changed:", selectedData); // Debug log
-
-            if (selectedData && selectedData.id) { // Check if a valid course is selected (not placeholder/cleared)
-                 $.ajax({
-                    url: `/api/philosophy/courses/${selectedData.id}`, // Use ID from selected data
-                    method: 'GET',
-                    beforeSend: function() {
-                        $courseMeta.addClass('animate-pulse').removeClass('hidden');
-                        $('#course-author span').text('');
-                        $('#course-date span').text('');
-                    },
-                    success: function(course) { // Use the detailed data from the second AJAX call
-                        $('#course-author span').text(`Pr. ${course.author}`);
-                        $('#course-date span').text(moment(course.updated_at).format('LL')); // Format date nicely
-                         $courseMeta.removeClass('animate-pulse').addClass('animate-fadeIn');
-                    },
-                    error: function() {
-                        $courseMeta.addClass('hidden').removeClass('animate-pulse animate-fadeIn');
-                        Toast.fire({ icon: 'error', title: 'Erreur', text: 'Impossible de charger les détails du cours sélectionné.' });
-                    }
-                });
+        // 9. Course Selection Change Handler (Original animation for meta info)
+        $courseSelect.on('change', function() {
+            const courseId = $(this).val();
+            const $courseMeta = $('.course-meta'); // Cache the element
+            const selectedOption = $(this).find('option:selected'); // Get the selected <option>
+
+             console.log("Course selection changed. ID:", courseId); // Debug log
+
+            if (courseId) {
+                 // Get data directly from the selected <option> element's data attributes
+                const author = selectedOption.data('author');
+                const updatedAt = selectedOption.data('updated_at'); // Get the date stored earlier
+
+                 if (author && updatedAt) {
+                     console.log("Displaying meta:", author, updatedAt); // Debug log
+                     // Display Meta Info using data attributes (no second AJAX needed here)
+                     $('#course-author span').text(`Pr. ${author}`);
+                     $('#course-date span').text(moment(updatedAt).format('LL')); // Format date nicely
+
+                     // Original animation: Remove hidden, add fadeIn
+                     $courseMeta.removeClass('hidden animate-fadeOut').addClass('animate-fadeIn');
+
+                    // Original subtle success Toast (uncomment if desired)
+                    /* Toast.fire({
+                        icon: 'success',
+                        title: 'Cours chargé avec succès',
+                         timer: 1500
+                     });*/
+                 } else {
+                     // Data attributes might be missing, potentially fallback to AJAX if really needed
+                     console.warn("Author or updated_at data missing from selected option.", selectedOption);
+                     // Hide meta if data is incomplete
+                     if (!$courseMeta.hasClass('hidden')) {
+                         $courseMeta.addClass('animate-fadeOut').on('animationend', function() {
+                             $(this).addClass('hidden').removeClass('animate-fadeOut animate-fadeIn');
+                             $('#course-author span').text('');
+                             $('#course-date span').text('');
+                             $(this).off('animationend');
+                         });
+                     }
+                 }
+
             } else {
-                // Course deselected or placeholder selected
+                // Course deselected (placeholder selected)
+                console.log("Course deselected."); // Debug log
+                // Original animation: Fade out if visible, then hide
                 if (!$courseMeta.hasClass('hidden')) {
-                    $courseMeta.addClass('animate-fadeOut').on('animationend', function() {
-                         $(this).addClass('hidden').removeClass('animate-fadeOut animate-fadeIn');
+                    $courseMeta.removeClass('animate-fadeIn').addClass('animate-fadeOut').on('animationend', function() {
+                         $(this).addClass('hidden').removeClass('animate-fadeOut');
                          $('#course-author span').text('');
                          $('#course-date span').text('');
-                         $(this).off('animationend');
+                         $(this).off('animationend'); // Unbind animationend
                      });
                 }
             }
         });
 
-        // 10. Submit Button Click Handler (Standard Generation)
+
+        // 10. Submit Button Click Handler (Standard Generation - Original Logic)
          $('#submit-btn').click(function() {
             const question = $('#question').val().trim();
-            if (!question) { /* Error handling as before */ return; }
-            Swal.fire({ /* Loading indicator as before */ });
+
+            if (!question) {
+                 Toast.fire({ icon: 'warning', title: 'Sujet Requis', text: 'Veuillez saisir un sujet de dissertation.' });
+                 $('#question').addClass('animate-shake border-red-500').focus();
+                 setTimeout(() => $('#question').removeClass('animate-shake border-red-500 border-gray-200'), 600); // Reset border
+                return;
+            }
+
+            // Original Sophisticated loading animation
+            Swal.fire({
+                title: 'Génération en cours',
+                html: `<div class="space-y-4"><div class="flex justify-center"><div class="w-16 h-16 relative"><div class="absolute inset-0 rounded-full border-4 border-violet-200 animate-ping"></div><div class="absolute inset-0 rounded-full border-4 border-violet-500 animate-pulse"></div></div></div><div class="text-gray-600"><p class="animate-pulse">Analyse philosophique en cours...</p><p class="text-sm mt-2 text-gray-500">Veuillez patienter quelques instants</p></div></div>`,
+                allowOutsideClick: false, showConfirmButton: false, customClass: { popup: 'rounded-2xl' }
+            });
+
             const data = { question: question, type: $('#type-select').val(), courseId: $courseSelect.val() || null };
 
             $.ajax({
                 url: '/submit_philo', method: 'POST', contentType: 'application/json', data: JSON.stringify(data),
-                success: function(data) { /* Success handling as before */ },
-                error: function(jqXHR) { /* Error handling as before */ }
+                success: function(data) {
+                    Swal.close();
+                    const htmlContent = marked.parse(data.response);
+                    $('#response > div').html(htmlContent);
+                    $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                    $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
+                    saveDissertation(question, data.response); // Save locally
+                    Toast.fire({ icon: 'success', title: 'Dissertation générée et sauvegardée', timer: 2000 });
+                },
+                error: function(jqXHR) {
+                    Swal.close();
+                    let errorMsg = 'Une erreur est survenue lors de la génération.';
+                    if (jqXHR.responseJSON && jqXHR.responseJSON.error) { errorMsg = jqXHR.responseJSON.error; }
+                    Swal.fire({ icon: 'error', title: 'Erreur de génération', text: errorMsg, customClass: { popup: 'rounded-2xl', confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg' } });
+                }
             });
         });
 
-        // 11. DeepThink Functionality (Cooldown check and AJAX call)
-        const DEEPTHINK_COOLDOWN_MS = 24 * 60 * 60 * 1000;
+        // --- START: DeepThink Functionality (Original Logic) ---
+        const DEEPTHINK_COOLDOWN_MS = 24 * 60 * 60 * 1000; // 24 hours
         const DEEPTHINK_STORAGE_KEY = 'lastDeepThinkUsage';
         const $deepThinkBtn = $('#deepthink-btn');
 
-        function checkDeepThinkCooldown() { /* Cooldown logic as before */ }
-        checkDeepThinkCooldown();
+        function checkDeepThinkCooldown() {
+            const lastUsage = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
+            if (!lastUsage) {
+                $deepThinkBtn.prop('disabled', false).attr('title', 'Utiliser DeepThink (1 fois/jour)');
+                return true; // Available
+            }
+            const lastUsageTime = parseInt(lastUsage, 10);
+            const now = Date.now();
+            const timeElapsed = now - lastUsageTime;
+            if (timeElapsed >= DEEPTHINK_COOLDOWN_MS) {
+                $deepThinkBtn.prop('disabled', false).attr('title', 'Utiliser DeepThink (1 fois/jour)');
+                return true; // Available
+            } else {
+                const remainingTime = DEEPTHINK_COOLDOWN_MS - timeElapsed;
+                const hours = Math.floor(remainingTime / (3600 * 1000));
+                const minutes = Math.floor((remainingTime % (3600 * 1000)) / (60 * 1000));
+                $deepThinkBtn.prop('disabled', true).attr('title', `DeepThink disponible dans ${hours}h ${minutes}m`);
+                return false; // Not available
+            }
+        }
+        checkDeepThinkCooldown(); // Check on load
         setInterval(checkDeepThinkCooldown, 60000); // Re-check periodically
 
+        // Click handler for DeepThink button
         $deepThinkBtn.click(function() {
-            if (!checkDeepThinkCooldown()) { /* Cooldown message */ return; }
+            if (!checkDeepThinkCooldown()) {
+                 Toast.fire({ icon: 'warning', title: 'DeepThink Non Disponible', text: $deepThinkBtn.attr('title') });
+                return;
+            }
             const question = $('#question').val().trim();
-            if (!question) { /* Error handling */ return; }
-            Swal.fire({ /* DeepThink loading indicator */ });
+            if (!question) {
+                 Toast.fire({ icon: 'warning', title: 'Sujet Requis', text: 'Veuillez saisir un sujet avant d\'utiliser DeepThink.' });
+                 $('#question').addClass('animate-shake border-red-500').focus();
+                 setTimeout(() => $('#question').removeClass('animate-shake border-red-500 border-gray-200'), 600);
+                return;
+            }
+
+             // Original DeepThink loading animation
+             Swal.fire({
+                 title: 'Génération DeepThink en cours',
+                 html: `<div class="space-y-4"><div class="flex justify-center"><div class="w-16 h-16 relative"><div class="absolute inset-0 rounded-full border-4 border-purple-200 animate-ping"></div><div class="absolute inset-0 rounded-full border-4 border-purple-500 animate-pulse"></div></div></div><div class="text-gray-600"><p class="animate-pulse">Analyse philosophique approfondie...</p><p class="text-sm mt-2 text-gray-500">Cela peut prendre un peu plus de temps</p></div></div>`,
+                 allowOutsideClick: false, showConfirmButton: false, customClass: { popup: 'rounded-2xl' }
+             });
+
             const data = { question: question, type: $('#type-select').val(), courseId: $courseSelect.val() || null };
 
             $.ajax({
                 url: '/submit_philo_deepthink', method: 'POST', contentType: 'application/json', data: JSON.stringify(data),
                 success: function(data) {
-                    /* Display result, save dissertation, update cooldown */
                     Swal.close();
                     const htmlContent = marked.parse(data.response);
                     $('#response > div').html(htmlContent);
                     $('#response').removeClass('hidden').addClass('animate-fadeIn');
                     $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
-                    saveDissertation(question + " (DeepThink)", data.response);
-                    localStorage.setItem(DEEPTHINK_STORAGE_KEY, Date.now().toString());
-                    checkDeepThinkCooldown();
+                    saveDissertation(question + " (DeepThink)", data.response); // Save locally
+                    localStorage.setItem(DEEPTHINK_STORAGE_KEY, Date.now().toString()); // Record usage
+                    checkDeepThinkCooldown(); // Update button state
                     Toast.fire({ icon: 'success', title: 'DeepThink terminé!', text: 'Dissertation générée et sauvegardée.', timer: 2500 });
                 },
-                error: function(jqXHR) { /* Error handling as before */ }
+                error: function(jqXHR) {
+                    Swal.close();
+                    let errorMsg = 'Erreur lors de la génération DeepThink.';
+                    if (jqXHR.responseJSON && jqXHR.responseJSON.error) { errorMsg = jqXHR.responseJSON.error; }
+                    Swal.fire({ icon: 'error', title: 'Erreur DeepThink', text: errorMsg, customClass: { popup: 'rounded-2xl', confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg' } });
+                }
             });
         });
+        // --- END: DeepThink Functionality ---
 
 
-        // 12. Save / Delete / Update Saved Dissertations List Functions
-        function saveDissertation(title, content) { /* Logic as before */ }
-        function deleteDissertation(index) { /* Logic with confirmation as before */ }
-        function updateSavedDissertationsList() { /* Logic with collapsible sections as before */ }
-        updateSavedDissertationsList(); // Initial load of saved dissertations
+        // --- START: Saved Dissertations (Original Logic) ---
+        function saveDissertation(title, content) {
+            let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+            const MAX_SAVED = 20; // Limit saved items
+            if (savedDissertations.length >= MAX_SAVED) { savedDissertations.shift(); }
+            savedDissertations.push({ title, content, timestamp: Date.now() });
+            localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
+            updateSavedDissertationsList();
+        }
+
+        function deleteDissertation(index) {
+             // Original confirmation dialog
+             Swal.fire({
+                 title: 'Êtes-vous sûr?', text: "Cette action est irréversible!", icon: 'warning',
+                 showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6',
+                 confirmButtonText: 'Oui, supprimer!', cancelButtonText: 'Annuler',
+                 customClass: { popup: 'rounded-2xl' }
+             }).then((result) => {
+                 if (result.isConfirmed) {
+                     let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+                     savedDissertations.splice(index, 1);
+                     localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
+                     updateSavedDissertationsList(); // Refresh list UI
+                     Toast.fire({ icon: 'success', title: 'Dissertation supprimée' });
+                 }
+             });
+        }
 
-        // 13. Copy Button Click Handler
-        $('#copy-btn').click(function() { /* Copy logic as before */ });
+        // Original function to display saved dissertations with collapsible sections
+         function updateSavedDissertationsList() {
+            const dissertationsList = $('#dissertations-list');
+            dissertationsList.empty(); // Clear current list
 
+            let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+            savedDissertations.sort((a, b) => b.timestamp - a.timestamp); // Sort newest first
+
+            if (savedDissertations.length === 0) {
+                dissertationsList.append('<p class="text-center text-gray-500 italic py-4">Aucune dissertation sauvegardée.</p>');
+                return;
+            }
+
+            savedDissertations.forEach((diss, index) => {
+                const date = moment(diss.timestamp).format('LLL');
+                const uniqueId = `diss-content-${index}`; // Unique ID for content
+
+                // Original Collapsible structure with Tailwind & custom classes
+                const $collapsibleContainer = $(`
+                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-4">
+                         <button class="collapsible bg-gray-50 hover:bg-gray-100 transition-colors duration-150 p-4 flex justify-between items-center w-full text-left focus:outline-none focus:ring-2 focus:ring-violet-300" aria-expanded="false" aria-controls="${uniqueId}">
+                             <span class="font-medium text-gray-800 flex-1 mr-4 truncate" title="${diss.title}">${diss.title}</span>
+                            <div class="flex items-center space-x-3 flex-shrink-0">
+                                 <span class="text-gray-500 text-xs">${date}</span>
+                                 <button class="delete-dissertation text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-100 transition-colors duration-150" data-index="${index}" title="Supprimer">
+                                     <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                                 </button>
+                                 <svg class="h-5 w-5 text-gray-400 transform transition-transform duration-200 chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                             </div>
+                         </button>
+                         <div id="${uniqueId}" class="content prose prose-violet max-w-none p-6 border-t border-gray-200" style="display: none;">
+                             <!-- Content added below -->
+                         </div>
+                    </div>`);
+
+                 // Add parsed markdown content to the content div
+                 $collapsibleContainer.find('.content').html(marked.parse(diss.content));
+
+                 dissertationsList.append($collapsibleContainer);
+
+                 // Event handler for the collapsible button (excluding the delete button)
+                 $collapsibleContainer.find('.collapsible').click(function(event) {
+                    if ($(event.target).closest('.delete-dissertation').length) { return; } // Ignore clicks on delete button
+
+                    const $contentDiv = $(this).next('.content');
+                    const $chevron = $(this).find('.chevron');
+                    const isExpanded = $(this).attr('aria-expanded') === 'true';
+
+                    $contentDiv.slideToggle("fast", () => { // Use slideToggle for smooth animation
+                         $(this).attr('aria-expanded', !isExpanded);
+                         $chevron.toggleClass('rotate-180', !isExpanded);
+                         // Add/remove 'active' class AFTER animation if needed for styling
+                         // $(this).toggleClass('active', !isExpanded);
+                    });
+                 });
+
+                 // Event handler for the delete button
+                 $collapsibleContainer.find('.delete-dissertation').click(function() {
+                    const indexToDelete = $(this).data('index');
+                    deleteDissertation(indexToDelete);
+                });
+            });
+        }
+        updateSavedDissertationsList(); // Initial display
+        // --- END: Saved Dissertations ---
+
+
+        // --- START: Copy Button (Original Logic) ---
+         $('#copy-btn').click(function() {
+            const responseDiv = document.querySelector('#response > div');
+            let textToCopy = '';
+            const temp = document.createElement('div');
+            temp.innerHTML = responseDiv.innerHTML;
+
+            function extractText(node) { // Original extraction logic
+                let text = '';
+                node.childNodes.forEach(child => {
+                    if (child.nodeType === 3) { text += child.textContent; }
+                    else if (child.nodeType === 1) {
+                        const isBlock = window.getComputedStyle(child).display === 'block';
+                        if (isBlock && text.length > 0 && !text.endsWith('\n\n')) { text += '\n'; }
+                        if (child.tagName === 'BR') { text += '\n'; }
+                        else if (child.tagName === 'LI') { text += '* ' + extractText(child) + '\n'; }
+                        else { text += extractText(child); }
+                        if (isBlock && !text.endsWith('\n') && child.tagName !== 'LI') { text += '\n'; }
+                    }
+                });
+                return text.replace(/\n{3,}/g, '\n\n').trim();
+            }
+            textToCopy = extractText(temp);
+
+            $(this).addClass('scale-95 bg-violet-100'); // Press animation
+
+            navigator.clipboard.writeText(textToCopy)
+                .then(() => { // Success
+                    $(this).removeClass('scale-95 bg-violet-100').addClass('bg-green-50 text-green-700 border-green-200');
+                    setTimeout(() => $(this).removeClass('bg-green-50 text-green-700 border-green-200'), 1200);
+                    Toast.fire({ icon: 'success', title: 'Copié avec succès', timer: 2000 });
+                })
+                .catch((err) => { // Fallback
+                    console.error("Clipboard API failed: ", err);
+                    try {
+                        const textarea = document.createElement('textarea');
+                        /* Fallback textarea logic as before */
+                        document.execCommand('copy');
+                        document.body.removeChild(textarea);
+                        $(this).removeClass('scale-95 bg-violet-100').addClass('bg-green-50 text-green-700 border-green-200');
+                        setTimeout(() => $(this).removeClass('bg-green-50 text-green-700 border-green-200'), 1200);
+                        Toast.fire({ icon: 'success', title: 'Copié avec succès (Fallback)', timer: 2000 });
+                    } catch (fallbackErr) { // Fallback failed
+                        console.error("Fallback copy failed: ", fallbackErr);
+                        $(this).removeClass('scale-95 bg-violet-100').addClass('bg-red-50 text-red-700 border-red-200');
+                        setTimeout(() => $(this).removeClass('bg-red-50 text-red-700 border-red-200'), 1200);
+                        Toast.fire({ icon: 'error', title: 'Erreur de copie', text: 'Impossible de copier.', timer: 3000 });
+                    }
+                });
+        });
+        // --- END: Copy Button ---
 
-        // 14. Ensure custom animation styles are present
+        // --- Animation Styles (Ensure they are present) ---
          const styleCheck = document.getElementById('custom-animations-style');
          if (!styleCheck) {
-             const style = document.createElement('style');
-             style.id = 'custom-animations-style';
-             style.textContent = ` /* Animation keyframes as before */ `;
+             const style = document.createElement('style'); style.id = 'custom-animations-style';
+             style.textContent = `
+                 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+                 @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+                 @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+                 @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }
+                 .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
+                 .animate-fadeOut { animation: fadeOut 0.3s ease-out forwards; }
+                 .animate-slideUp { animation: slideUp 0.5s ease-out forwards; }
+                 .animate-shake { animation: shake 0.5s ease-in-out; }
+                 .rotate-180 { transform: rotate(180deg); }
+                 .chevron { transition: transform 0.2s ease-in-out; }
+             `;
              document.head.appendChild(style);
          }
+         // --- END Animation Styles ---
 
     }); // --- FIN de $(document).ready ---
 </script>