WIP

index.html

@@ -57,68 +57,7 @@
             </button>
         </div>
 
-        <!-- Filters -->
-        <div id="filters-container" class="mb-6 hidden">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <!-- Type Filter Dropdown -->
-                <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
-                    <div tabindex="0" role="button" class="btn w-full justify-between" id="doc-type-filter-btn">
-                        <span id="doc-type-filter-label">Type</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                        </svg>
-                    </div>
-                    <ul tabindex="0"
-                        class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-full min-w-[200px] max-h-60 overflow-y-auto"
-                        id="doc-type-filter-menu">
-                        <!-- Rempli par JS -->
-                    </ul>
-                </div>
 
-                <!-- Status Filter Dropdown -->
-                <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
-                    <div tabindex="0" role="button" class="btn w-full justify-between" id="status-dropdown-btn">
-                        <span id="status-filter-label">Status (Tous)</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                        </svg>
-                    </div>
-                    <ul tabindex="0"
-                        class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto">
-                        <li class="border-b pb-2 mb-2">
-                            <label class="flex items-center gap-2 cursor-pointer">
-                                <input type="checkbox" class="status-checkbox" value="all" checked>
-                                <span class="font-semibold">Tous</span>
-                            </label>
-                        </li>
-                        <div id="status-options" class="flex flex-col gap-1"></div>
-                    </ul>
-                </div>
-
-                <!-- Agenda Item Filter Dropdown -->
-                <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
-                    <div tabindex="0" role="button" class="btn w-full justify-between" id="agenda-dropdown-btn">
-                        <span id="agenda-filter-label">Agenda Item (Tous)</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
-                            stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                        </svg>
-                    </div>
-                    <ul tabindex="0"
-                        class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto">
-                        <li class="border-b pb-2 mb-2">
-                            <label class="flex items-center gap-2 cursor-pointer">
-                                <input type="checkbox" class="agenda-checkbox" value="all" checked>
-                                <span class="font-semibold">Tous</span>
-                            </label>
-                        </li>
-                        <div id="agenda-options" class="flex flex-col gap-1"></div>
-                    </ul>
-                </div>
-            </div>
-        </div>
 
         <!-- Add an horizontal separation -->
         <hr>
@@ -139,8 +78,74 @@
         </div>
 
         <div id="doc-table-tab-contents" class="hidden">
+            <!-- Filters -->
+            <div id="filters-container" class="mb-6 hidden pt-10">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <!-- Type Filter Dropdown -->
+                    <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
+                        <div tabindex="0" role="button" class="btn w-full justify-between" id="doc-type-filter-btn">
+                            <span id="doc-type-filter-label">Type</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                        <ul tabindex="0"
+                            class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-full min-w-[200px] max-h-60 overflow-y-auto"
+                            id="doc-type-filter-menu">
+                            <!-- Rempli par JS -->
+                        </ul>
+                    </div>
+
+                    <!-- Status Filter Dropdown -->
+                    <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
+                        <div tabindex="0" role="button" class="btn w-full justify-between" id="status-dropdown-btn">
+                            <span id="status-filter-label">Status (Tous)</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                        <ul tabindex="0"
+                            class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto">
+                            <li class="border-b pb-2 mb-2">
+                                <label class="flex items-center gap-2 cursor-pointer">
+                                    <input type="checkbox" class="status-checkbox" value="all" checked>
+                                    <span class="font-semibold">Tous</span>
+                                </label>
+                            </li>
+                            <div id="status-options" class="flex flex-col gap-1"></div>
+                        </ul>
+                    </div>
+
+                    <!-- Agenda Item Filter Dropdown -->
+                    <div class="dropdown dropdown-bottom dropdown-center w-full mb-4">
+                        <div tabindex="0" role="button" class="btn w-full justify-between" id="agenda-dropdown-btn">
+                            <span id="agenda-filter-label">Agenda Item (Tous)</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24"
+                                stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                        <ul tabindex="0"
+                            class="dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto">
+                            <li class="border-b pb-2 mb-2">
+                                <label class="flex items-center gap-2 cursor-pointer">
+                                    <input type="checkbox" class="agenda-checkbox" value="all" checked>
+                                    <span class="font-semibold">Tous</span>
+                                </label>
+                            </li>
+                            <div id="agenda-options" class="flex flex-col gap-1"></div>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
             <!-- Data Table Informations -->
-            <div class="flex justify-between items-center mb-2 pt-10" id="data-table-info-container">
+            <div class="flex justify-between items-center mb-2 pt-5" id="data-table-info-container">
                 <!-- Left side: buttons -->
                 <div class="flex gap-2 items-center">
                     <div class="tooltip" data-tip="Extract requirements from selected documents">
@@ -155,7 +160,7 @@
                             </svg>Extract Requirements
                         </button>
                     </div>
-                    <button id="download-tdocs-btn" class="text-sm rounded px-3 py-1 shadow">
+                    <button id="download-tdocs-btn" class="text-sm rounded px-3 py-1 shadow cursor-pointer">
                         📦 Download Selected TDocs
                     </button>
                 </div>
@@ -249,22 +254,47 @@
                 </div>
             </div>
             <div id="categorized-requirements-container pt-10" class="mb-6">
-                <h2 class="text-2xl font-bold mb-4 pt-10">Requirements categories list</h2>
+                <div class="flex mb-4 pt-10">
+                    <div class="justify-begin">
+                        <h2 class="text-2xl font-bold">Requirements categories list</h2>
+                    </div>
+                    <div class="justify-end pl-5">
+                        <!--Copy reqs button-->
+                        <button class="btn btn-square" id="copy-reqs-btn" aria-label="Copy">
+                            📋
+                        </button>
+                    </div>
+                </div>
                 <div id="categorized-requirements-list"></div>
             </div>
 
             <!-- Solutions Action Buttons -->
             <div id="solutions-action-buttons-container" class="mb-6 hidden">
-                <div class="flex flex-wrap gap-2 justify-center">
-                    <button id="get-solutions-btn"
-                        class="px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600">
-                        Get Solutions
-                    </button>
+                <div class="flex flex-wrap gap-2 justify-center items-center">
+                    <div class="join">
+                        <input id="category-count" type="number" class="input join-item w-24" min="1" value="3" />
+                        <button id="get-solutions-btn"
+                            class="btn join-item px-4 py-2 bg-indigo-500 text-white rounded-md hover:bg-indigo-600">
+                            Run multiple steps
+                        </button>
+                    </div>
                     <button id="get-solutions-step-btn"
                         class="px-4 py-2 bg-pink-500 text-white rounded-md hover:bg-pink-600">
                         Get Solutions (Step-by-step)
                     </button>
+                    <div class="dropdown dropdown-center">
+                        <div id="additional-gen-instr-btn" tabindex="0" role="button" class="btn m-1">🎨 Additional
+                            generation constraints</div>
+                        <div tabindex="0" class="dropdown-content card card-sm bg-base-100 z-1 w-256 shadow-md">
+                            <div class="card-body">
+                                <h3>Add additional constraints to follow when generating the solutions</h3>
+                                <textarea id="additional-gen-instr"
+                                    class="textarea textarea-bordered w-full"></textarea>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+
             </div>
 
             <!-- Solutions Container -->

static/script.js

@@ -1,13 +1,20 @@
-// Variables globales
+// ==================================== Variables globales ========================================
 let requirements = [];
+
+// Filtres
 let selectedType = ""; // "" = Tous
 let selectedStatus = new Set(); // valeurs cochées (hors "Tous")
 let selectedAgenda = new Set();
+
+// Generation de solutions
 let accordionStates = {};
 let formattedRequirements = [];
 let categorizedRequirements = [];
 let solutionsCriticizedVersions = [];
-let isRequirements = false;
+// checksum pour vérifier si les requirements séléctionnés ont changé
+let lastSelectedRequirementsChecksum = null;
+// les requirements ont ils été extraits au moins une fois ?
+let hasRequirementsExtracted = false;
 
 // =============================================================================
 // FONCTIONS UTILITAIRES POUR LA GESTION DES ÉLÉMENTS
@@ -344,7 +351,7 @@ async function getTDocs() {
             // 'data-table-info-container'
         ], true);
 
-        isRequirements = false;
+        hasRequirementsExtracted = false;
     } catch (error) {
         console.error('Erreur lors de la récupération des TDocs:', error);
         alert('Erreur lors de la récupération des TDocs');
@@ -540,7 +547,7 @@ function generateDownloadFilename() {
     if (docType && docType !== 'Tous') {
         filename = `${docType}_${filename}`;
     }
-    if (isRequirements) {
+    if (hasRequirementsExtracted) {
         filename = `requirements_${filename}`;
     }
 
@@ -608,7 +615,7 @@ async function extractRequirements() {
         // set the number of fetched requirements
         document.getElementById('requirements-tab-badge').innerText = requirements.length;
 
-        isRequirements = true;
+        hasRequirementsExtracted = true;
     } catch (error) {
         console.error('Erreur lors de l\'extraction des requirements:', error);
         alert('Erreur lors de l\'extraction des requirements');
@@ -652,7 +659,6 @@ async function categorizeRequirements(max_categories) {
         alert('Aucun requirement à catégoriser');
         return;
     }
-    console.log(max_categories);
 
     showLoadingOverlay('Catégorisation des requirements en cours...');
     toggleElementsEnabled(['categorize-requirements-btn'], false);
@@ -667,6 +673,7 @@ async function categorizeRequirements(max_categories) {
         const data = await response.json();
         categorizedRequirements = data;
         displayCategorizedRequirements(categorizedRequirements.categories);
+        clearAllSolutions();
 
         // Masquer le container de query et afficher les catégories et boutons solutions
         // toggleContainersVisibility(['query-requirements-container'], false);
@@ -692,27 +699,148 @@ function displayCategorizedRequirements(categorizedData) {
     categorizedData.forEach((category, categoryIndex) => {
         const categoryDiv = document.createElement('div');
         categoryDiv.tabIndex = 0;
+        categoryDiv.className = 'collapse collapse-arrow mb-2 border border-gray-200 rounded-lg bg-white';
 
-        categoryDiv.className = 'collapse collapse-arrow mb-6 p-4 border border-gray-200 rounded-lg bg-white';
 
-        categoryDiv.innerHTML = `
-        <div class="collapse-title font-semibold">
-            <h3 class="text-lg font-semibold mb-2 text-blue-600">${category.title}</h3>
-        </div>
-          <div class="collapse-content text-sm">
-            <div class="space-y-2">
-                ${category.requirements.map((req, reqIndex) =>
-            `<div class="p-2 bg-gray-50 rounded border-l-4 border-blue-400" data-cat-req-id="${categoryIndex}-${reqIndex}">
+        // Generate unique IDs for checkboxes
+        const globalCheckboxId = `global-checkbox-${categoryIndex}`;
+
+        const requirementsHTML = category.requirements.map((req, reqIndex) => {
+            const checkboxId = `checkbox-${categoryIndex}-${reqIndex}`;
+            return `
+                <div class="p-2 bg-gray-50 rounded border-l-4 border-blue-400 flex items-start gap-2" data-category-index="${categoryIndex}" data-cat-req-id="${reqIndex}">
+                    <input type="checkbox" class="item-checkbox" id="${checkboxId}" data-category-index="${categoryIndex}" />
+                    <label for="${checkboxId}" class="flex-1">
                         <div class="text-sm font-medium text-gray-700">${req.document}</div>
                         <div class="text-sm text-gray-600">${req.requirement}</div>
-             </div>`
-        ).join('')}
-            </div>
+                    </label>
+                </div>`;
+        }).join('');
+
+        categoryDiv.innerHTML = `
+        <div class="collapse-title font-semibold flex items-center gap-2">
+            <input type="checkbox" class="global-checkbox" id="${globalCheckboxId}" data-category-index="${categoryIndex}" />
+            <label for="${globalCheckboxId}" class="text-lg font-semibold text-blue-600">${category.title}</label>
         </div>
+        <input type="checkbox" />
+            <div class="collapse-content text-sm">
+                <div class="space-y-2">
+                    ${requirementsHTML}
+                </div>
+            </div>
         `;
 
         container.appendChild(categoryDiv);
     });
+
+    // Event delegation to handle global checkbox logic
+    container.querySelectorAll('.global-checkbox').forEach(globalCheckbox => {
+        globalCheckbox.addEventListener('change', (e) => {
+            const categoryIndex = e.target.dataset.categoryIndex;
+            const itemCheckboxes = container.querySelectorAll(`.item-checkbox[data-category-index="${categoryIndex}"]`);
+            itemCheckboxes.forEach(checkbox => {
+                checkbox.checked = e.target.checked;
+            });
+        });
+    });
+
+    // Update global checkbox state when individual checkboxes change
+    container.querySelectorAll('.item-checkbox').forEach(itemCheckbox => {
+        itemCheckbox.addEventListener('change', (e) => {
+            const categoryIndex = e.target.dataset.categoryIndex;
+            const itemCheckboxes = container.querySelectorAll(`.item-checkbox[data-category-index="${categoryIndex}"]`);
+            const globalCheckbox = container.querySelector(`.global-checkbox[data-category-index="${categoryIndex}"]`);
+
+            const allChecked = Array.from(itemCheckboxes).every(cb => cb.checked);
+            globalCheckbox.checked = allChecked;
+        });
+    });
+}
+
+/*
+* Copie les requirements séléctionnés en markdown
+*/
+function copySelectedRequirementsAsMarkdown() {
+    const selected = getSelectedRequirementsByCategory();
+
+    if (!selected || !selected.categories || selected.categories.length === 0) {
+        alert("No selected requirements to copy.");
+        return;
+    }
+
+    const lines = [];
+
+    selected.categories.forEach(category => {
+        lines.push(`### ${category.title}`);
+        category.requirements.forEach(req => {
+            lines.push(`- ${req.requirement}`);
+        });
+        lines.push(''); // Add an empty line after each category
+    });
+
+    const markdownText = lines.join('\n');
+
+    navigator.clipboard.writeText(markdownText).then(() => {
+        console.log("Markdown copied to clipboard.");
+        alert("Selected requirements copied to clipboard"); 
+    }).catch(err => {
+        console.error("Failed to copy markdown:", err);
+    });
+}
+
+/*
+* Recupère tous les requirements séléctionnés par catégorie dans l'interface.
+*/
+function getSelectedRequirementsByCategory() {
+    const container = document.getElementById('categorized-requirements-list');
+    const selected_category_ids = [];
+
+    const categoryDivs = container.querySelectorAll('.collapse');
+
+    categoryDivs.forEach((categoryDiv, categoryIndex) => {
+        // Find all checked item checkboxes within this category
+        const checkedItems = categoryDiv.querySelectorAll(`.item-checkbox[data-category-index="${categoryIndex}"]:checked`);
+
+        if (checkedItems.length > 0) {
+            // Extract requirement indexes from their parent div's data attribute
+            const checkedReqIndexes = Array.from(checkedItems).map(checkbox => {
+                const itemDiv = checkbox.closest('[data-cat-req-id]');
+                return parseInt(itemDiv.dataset.catReqId, 10);
+            });
+
+            selected_category_ids.push({
+                categoryIndex,
+                checkedReqIndexes
+            });
+        }
+    });
+
+    /// Compute a checksum to check if checked requirements changed between two generations of solutions.
+    let totalChecksum = 0;
+
+    for (const { categoryIndex, checkedReqIndexes } of selected_category_ids) {
+        const catChecksum = checkedReqIndexes.reduce(
+            (sum, val, i) => sum + (val + 1) * (i + 1) ** 2,
+            0
+        );
+        totalChecksum += (categoryIndex + 1) * catChecksum; // include category index for entropy
+    }
+
+    /// Reconstruct the schema based on the selected ids.
+    let selected_categories = {
+        categories: selected_category_ids.map(({ categoryIndex, checkedReqIndexes }) => {
+            const category = categorizedRequirements.categories[categoryIndex];
+            const requirements = checkedReqIndexes.map(i => category.requirements[i]);
+            return {
+                id: categoryIndex,
+                title: category.title,
+                requirements,
+            };
+        }),
+        requirements_checksum: totalChecksum,
+    };
+
+    return selected_categories;
 }
 
 async function searchRequirements() {
@@ -823,47 +951,54 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     const criticism = item.criticism;
 
     // Récupérer le titre de la catégorie
-    const categoryTitle = document.querySelector(`#category-${solution['Category_Id']} h2`)?.textContent || `Catégorie ${solution['Category_Id'] + 1}`;
+    const categoryTitle = categorizedRequirements.categories.find(c => c.id == solution['Category_Id']).title;
+    // const categoryTitle = document.querySelector(`#category-${solution['Category_Id']} h2`)?.textContent || `Catégorie ${solution['Category_Id'] + 1}`;
 
     // Container pour chaque solution
     const solutionCard = document.createElement('div');
-    solutionCard.className = 'border border-gray-200 rounded-md shadow-sm';
+    solutionCard.className = 'border border-gray-200 rounded-md shadow-sm solution-accordion';
     solutionCard.id = `accordion-item-${index}`;
 
     // En-tête de l'accordéon avec navigation
     const header = document.createElement('div');
     header.className = 'bg-gray-50 px-4 py-2 cursor-pointer hover:bg-gray-100 transition-colors duration-200';
+    solutionCard.setAttribute('solution-accordion-id', `${index}`)
 
     const currentVersion = versionIndex + 1;
     const totalVersions = solutionCriticizedHistory.length;
 
     header.innerHTML = `
-        <div class="flex justify-between items-center">
-            <div class="flex items-center space-x-3">
-                <h3 class="text-sm font-semibold text-gray-800">${categoryTitle}</h3>
-                <div class="flex items-center space-x-2 bg-white px-3 py-1 rounded-full border">
-                    <button class="version-btn-left w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === 1 ? 'opacity-50 cursor-not-allowed' : ''}" 
-                            data-solution-index="${solution['Category_Id']}"
-                            ${currentVersion === 1 ? 'disabled' : ''}>
-                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                        </svg>
-                    </button>
-                    <span class="text-xs font-medium text-gray-600 min-w-[60px] text-center version-indicator">Version ${currentVersion}</span>
-                    <button class="version-btn-right w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === totalVersions ? 'opacity-50 cursor-not-allowed' : ''}" 
-                            data-solution-index="${solution['Category_Id']}"
-                            ${currentVersion === totalVersions ? 'disabled' : ''}>
-                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                        </svg>
-                    </button>
-                </div>
+    <div class="flex justify-between items-center">
+        <div class="flex items-center space-x-3">
+            <h3 class="text-sm font-semibold text-gray-800">${categoryTitle}</h3>
+            <div class="flex items-center space-x-2 bg-white px-3 py-1 rounded-full border">
+                <button class="version-btn-left w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === 1 ? 'opacity-50 cursor-not-allowed' : ''}" 
+                        data-solution-index="${solution['Category_Id']}"
+                        ${currentVersion === 1 ? 'disabled' : ''}>
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                    </svg>
+                </button>
+                <span class="text-xs font-medium text-gray-600 min-w-[60px] text-center version-indicator">Version ${currentVersion}</span>
+                <button class="version-btn-right w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === totalVersions ? 'opacity-50 cursor-not-allowed' : ''}" 
+                        data-solution-index="${solution['Category_Id']}"
+                        ${currentVersion === totalVersions ? 'disabled' : ''}>
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                    </svg>
+                </button>
             </div>
-            <svg class="w-4 h-4 transform transition-transform duration-200 accordion-icon" 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 class="delete-btn text-red-500 hover:text-red-700 transition-colors" 
+                data-solution-index="${solution['Category_Id']}" id="solution-delete-btn">
+            <svg class="w-5 h-5" 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-3h4m-4 0a1 1 0 00-1 1v1h6V5a1 1 0 00-1-1m-4 0h4" />
+            </svg>
+        </button>
+        -->
+    </div>`;
+
 
     // Contenu de l'accordéon
     const content = document.createElement('div');
@@ -872,11 +1007,9 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
 
     // Vérifier l'état d'ouverture précédent
     const isOpen = accordionStates[solution['Category_Id']] || false;
-    if (!isOpen) {
+    console.log(isOpen);
+    if (!isOpen)
         content.classList.add('hidden');
-    } else {
-        header.querySelector('.accordion-icon').style.transform = 'rotate(180deg)';
-    }
 
     // Section Problem Description
     const problemSection = document.createElement('div');
@@ -1015,24 +1148,25 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     // Événement de clic pour l'accordéon (exclure les boutons de navigation)
     header.addEventListener('click', (e) => {
         // Ne pas déclencher l'accordéon si on clique sur les boutons de navigation
-        if (e.target.closest('.version-btn-left') || e.target.closest('.version-btn-right')) {
+        if (e.target.closest('.version-btn-left') || e.target.closest('.version-btn-right') || e.target.closest('#solution-delete-btn')) {
             return;
         }
 
-        const icon = header.querySelector('.accordion-icon');
+        // handling open state
         const isCurrentlyOpen = !content.classList.contains('hidden');
-
-        if (isCurrentlyOpen) {
+        accordionStates[solution['Category_Id']] = isCurrentlyOpen;
+        if (isCurrentlyOpen)
             content.classList.add('hidden');
-            icon.style.transform = 'rotate(0deg)';
-            accordionStates[solution['Category_Id']] = false;
-        } else {
+        else
             content.classList.remove('hidden');
-            icon.style.transform = 'rotate(180deg)';
-            accordionStates[solution['Category_Id']] = true;
-        }
     });
 
+    // Delete solution accordion button
+    // header.querySelector('#solution-delete-btn')?.addEventListener('click', (e) => {
+    //     e.stopPropagation();
+    //     solutionCard.remove();
+    // });
+
     // Événements de navigation pour cette catégorie spécifique
     header.querySelector('.version-btn-left')?.addEventListener('click', (e) => {
         e.stopPropagation();
@@ -1080,8 +1214,21 @@ function initializeSolutionAccordion(solutionCriticizedHistory, containerId, sta
     document.getElementById(containerId).classList.remove('hidden')
 }
 
-async function generateSolutions() {
-    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_gemini', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(categorizedRequirements) })
+// Supprime toutes les accordéons de solutions générées
+//FIXME: À terme, ne devrait pas exister
+function clearAllSolutions() {
+    accordionStates = {}
+    solutionsCriticizedVersions = []
+    document.querySelectorAll('.solution-accordion').forEach(a => a.remove());
+}
+
+async function generateSolutions(selected_categories, user_constraints) {
+    console.log(selected_categories);
+
+    let input_req = structuredClone(selected_categories);
+    input_req.user_constraints = user_constraints;
+
+    let response = await fetch('https://organizedprogrammers-reqxtract-api.hf.space/solution/search_solutions_gemini/v2', { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(input_req) })
     let responseObj = await response.json()
     return responseObj;
 }
@@ -1101,9 +1248,24 @@ async function refineSolutions(critiques) {
 async function workflow(steps = 1) {
     let soluce;
     showLoadingOverlay('Génération des solutions & critiques ....');
+
+    const selected_requirements = getSelectedRequirementsByCategory();
+    const user_constraints = document.getElementById('additional-gen-instr').value;
+
+    console.log(user_constraints);
+
+    // check if the selected requirements changed since last workflow usage
+    const requirements_changed = selected_requirements.requirements_checksum != (lastSelectedRequirementsChecksum ?? -1);
+
     for (let step = 1; step <= steps; step++) {
+        if (requirements_changed) {
+            clearAllSolutions();
+            console.log("Requirements checksum changed. Cleaning up");
+            lastSelectedRequirementsChecksum = selected_requirements.requirements_checksum;
+        }
+
         if (solutionsCriticizedVersions.length == 0) {
-            soluce = await generateSolutions();
+            soluce = await generateSolutions(selected_requirements, user_constraints ? user_constraints : null);
             await generateCriticisms(soluce)
         } else {
             let prevSoluce = solutionsCriticizedVersions[solutionsCriticizedVersions.length - 1];
@@ -1142,7 +1304,15 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
-
 // dseactiver le choix du nb de catégories lorsqu'en mode auto
 document.getElementById('auto-detect-toggle').addEventListener('change', (ev) => { debounceAutoCategoryCount(ev.target.checked) });
-debounceAutoCategoryCount(true);
+debounceAutoCategoryCount(true);
+
+// focus l'input d'instructions de gen additionelles
+document.getElementById("additional-gen-instr-btn").addEventListener('click', (ev) => {
+    document.getElementById('additional-gen-instr').focus()
+})
+
+document.getElementById('copy-reqs-btn').addEventListener('click', (ev) => {
+    copySelectedRequirementsAsMarkdown();
+});