Rework JS + add settings btn

static/index.html

@@ -22,10 +22,16 @@
     </div>
 
     <div class="container mx-auto p-6">
-        <h1 class="text-3xl font-bold text-center mb-8">Requirements Extractor</h1>
+        <div class="relative flex justify-center items-center p-4">
+            <h1 class="text-3xl font-bold">Requirements Extractor</h1>
+            <button class="absolute right-4 btn btn-sm btn-circle btn-outline" id="settings-btn"
+                onclick="settings_modal.showModal()" title="Settings">🔧</button>
+        </div>
+
         <div id="selection-container" class="mb-6">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                <!-- Working Group -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+
+                <!-- WG selection-->
                 <div>
                     <label for="working-group-select" class="block text-sm font-medium text-gray-700 mb-2">Working
                         Group</label>
@@ -48,41 +54,36 @@
                     </select>
                 </div>
 
-                <!-- Meeting -->
+                <!-- Meeting & Action Button Group -->
                 <div>
                     <label for="meeting-select" class="block text-sm font-medium text-gray-700 mb-2">Meeting</label>
-                    <select id="meeting-select" class="w-full p-2 border border-gray-300 rounded-md">
-                        <option value="">Select a meeting</option>
-                    </select>
+                    <div class="flex items-end gap-2">
+                        <select id="meeting-select" class="w-full p-2 border border-gray-300 rounded-md">
+                            <option value="">Select a meeting</option>
+                        </select>
+                        <button id="get-tdocs-btn"
+                            class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 flex-shrink-0">
+                            Get TDocs
+                        </button>
+                    </div>
                 </div>
             </div>
-
-            <!-- Buttons -->
-            <div class="flex flex-col sm:flex-row gap-2">
-                <!-- <button id="get-meetings-btn" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
-                    Get Meetings
-                </button> -->
-                <button id="get-tdocs-btn" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
-                    Get TDocs
-                </button>
-            </div>
         </div>
 
-        <!-- Add an horizontal separation -->
         <hr>
         <!-- Tab list for subsections -->
         <div role="tablist" class="tabs tabs-border tabs-xl" id="tab-container">
-            <a role="tab" class="tab tab-active" id="doc-table-tab" onclick="switchTab('doc-table-tab')">📝
+            <a role="tab" class="tab tab-active" id="doc-table-tab">📝
                 Documents</a>
-            <a role="tab" class="tab tab-disabled" id="requirements-tab" onclick="switchTab('requirements-tab')">
+            <a role="tab" class="tab tab-disabled" id="requirements-tab">
                 <div class="flex items-center gap-1">
                     <div class="badge badge-neutral badge-outline badge-xs" id="requirements-tab-badge">0</div>
                     <span>Requirements</span>
                 </div>
             </a>
-            <a role="tab" class="tab tab-disabled" id="solutions-tab" onclick="switchTab('solutions-tab')">Group and
+            <a role="tab" class="tab tab-disabled" id="solutions-tab">Group and
                 Solve</a>
-            <a role="tab" class="tab tab-disabled" id="query-tab" onclick="switchTab('query-tab')">🔎 Find relevant
+            <a role="tab" class="tab tab-disabled" id="query-tab">🔎 Find relevant
                 requirements</a>
         </div>
 
@@ -155,7 +156,6 @@
 
             <!-- Data Table Informations -->
             <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">
                         <button id="extract-requirements-btn"
@@ -174,7 +174,7 @@
                     </button>
                 </div>
 
-                <!-- Right side: document counts -->
+                <!-- document counts -->
                 <div class="flex gap-2 items-center">
                     <span id="displayed-count" class="text-sm text-gray-700 bg-white rounded px-3 py-1 shadow">
                         0 total documents
@@ -186,7 +186,7 @@
             </div>
 
 
-            <!-- Data Table -->
+            <!-- TDoc table -->
             <div id="data-table-container" class="mb-6">
                 <table id="data-table" class="w-full bg-white rounded-lg shadow overflow-hidden">
                     <thead class="bg-gray-50">
@@ -207,13 +207,12 @@
             </div>
         </div>
 
+        <!-- Requirement list tab-->
         <div id="requirements-tab-contents" class="hidden pt-10">
-            <!-- Requirement list container -->
             <div id="requirements-container" class="mb-6">
                 <div class="flex">
                     <h2 class="text-2xl font-bold mb-4">Extracted requirement list</h2>
                     <div class="justify-end pl-5">
-                        <!--Copy ALL reqs button-->
                         <div class="tooltip" data-tip="Copy ALL requirements to clipboard">
                             <button class="btn btn-square" id="copy-all-reqs-btn" aria-label="Copy">
                                 📋
@@ -270,15 +269,6 @@
                         Categorize
                     </button>
                 </div>
-                <!-- <div class="flex flex-wrap justify-end items-center gap-6">
-                    <div class="tooltip" data-tip="Use Insight Finder's API to generate solutions">
-                        <label class="label">
-                            <span class="label-text text-base-content">Use insight finder solver</span>
-                        </label>
-                        <input type="checkbox" class="toggle toggle-primary" id="use-insight-finder-solver"
-                            checked="false" />
-                    </div>
-                </div> -->
             </div>
             <div id="categorized-requirements-container pt-10" class="mb-6">
                 <div class="flex mb-4 pt-10">
@@ -333,9 +323,54 @@
             </div>
         </div>
 
-        <script src="js/sse.js"></script>
-        <script src="js/ui-utils.js"></script>
-        <script src="js/script.js"></script>
+
+        <!--App settings modal container-->
+        <dialog id="settings_modal" class="modal">
+            <div class="modal-box w-11/12 max-w-5xl">
+                <h3 class="text-lg font-bold">Reqxtract settings</h3>
+                <p class="py-4">Enter your LLM provider URL and key to enable using private solution assessment and
+                    refining</p>
+                <div class="modal-action">
+                    <form method="dialog">
+                        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                    </form>
+                </div>
+                <h2 class="text-lg font-bold">Private generation settings</h2>
+                <form class="space-y-4">
+                    <div>
+                        <label for="provider-url" class="block mb-2 text-sm font-medium">LLM provider URL</label>
+                        <input id="settings-provider-url" name="provider-url" class="input input-bordered w-full">
+                    </div>
+
+                    <div>
+                        <label for="provider-token" class="block mb-2 text-sm font-medium">LLM provider token</label>
+                        <input id="settings-provider-token" name="provider-token" class="input input-bordered w-full"
+                            type="password">
+                    </div>
+
+                    <div>
+                        <label for="assessment-rules" class="block mb-2 text-sm font-medium">Assessment rules</label>
+                        <textarea id="settings-assessment-rules" name="assessment-rules"
+                            class="textarea textarea-bordered w-full h-48"
+                            placeholder="Enter your rules here..."></textarea>
+                    </div>
+
+                    <div>
+                        <label for="portfolio-info" class="block mb-2 text-sm font-medium">Portfolio information</label>
+                        <textarea id="settings-portfolio" name="portfolio-info"
+                            class="textarea textarea-bordered w-full h-48"
+                            placeholder="Enter your portfolio info here..."></textarea>
+                    </div>
+                </form>
+                <div class="flex">
+                    <button class="btn btn-success" id="test-btn">Save config</button>
+                </div>
+            </div>
+        </dialog>
+
+        <script type="module" src="js/sse.js"></script>
+        <script type="module" src="js/ui-utils.js"></script>
+        <script type="module" src="js/app.js"></script>
 </body>
 
 </html>

static/js/{script.js → app.js}

@@ -1,4 +1,12 @@
 
+import {
+    toggleElementsEnabled, toggleContainersVisibility, showLoadingOverlay, hideLoadingOverlay, populateSelect,
+    populateCheckboxDropdown, updateCheckboxDropdownLabel, updateSelectedFilters, populateDaisyDropdown, updateFilterLabel,
+    extractTableData, switchTab, enableTabSwitching, debounceAutoCategoryCount,
+    bindTabs, checkCanUsePrivateGen
+} from "./ui-utils.js";
+import { postWithSSE } from "./sse.js";
+
 // ==================================== Variables globales ========================================
 let requirements = [];
 
@@ -79,6 +87,7 @@ async function getTDocs() {
             'doc-table-tab-contents',
         ], true);
 
+        switchTab('doc-table-tab');
         hasRequirementsExtracted = false;
     } catch (error) {
         console.error('Error while getting TDocs:', error);
@@ -139,10 +148,10 @@ function setupFilters(data) {
     });
 
     // Status (checkbox multiselect)
-    populateCheckboxDropdown('status-options', statuses, 'status', 'status-filter-label', selectedStatus);
+    populateCheckboxDropdown('status-options', statuses, 'status', 'status-filter-label', selectedStatus, applyFilters);
 
     // Agenda (checkbox multiselect)
-    populateCheckboxDropdown('agenda-options', agendaItems, 'agenda', 'agenda-filter-label', selectedAgenda);
+    populateCheckboxDropdown('agenda-options', agendaItems, 'agenda', 'agenda-filter-label', selectedAgenda, applyFilters);
 
     // Initialisation des labels (optionnel)
     document.getElementById('doc-type-filter-label').textContent = 'Type';
@@ -180,7 +189,7 @@ function updateSelectedAndDisplayedCount() {
 /**
  * Applique les filtres au tableau
  */
-function applyFilters() {
+export function applyFilters() {
     const rows = document.querySelectorAll('#data-table tbody tr');
     rows.forEach(row => {
         const typeVal = row.getAttribute('data-type');
@@ -352,7 +361,7 @@ async function extractRequirements() {
 
         displayRequirements(requirements);
 
-        toggleContainersVisibility(['requirements-container', 'query-requirements-container'], true);
+        // toggleContainersVisibility(['requirements-container', 'query-requirements-container'], true);
         toggleContainersVisibility(['categorize-requirements-btn'], true);
 
         // we got some requirements to the other tabs can be enabled
@@ -911,7 +920,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
 
     // ===================================== Section sources ================================
 
-    createEl = (tag, properties) => {
+    const createEl = (tag, properties) => {
         const element = document.createElement(tag);
         Object.assign(element, properties);
         return element;
@@ -1099,6 +1108,7 @@ async function workflow(steps = 1) {
 // =============================================================================
 
 document.addEventListener('DOMContentLoaded', function () {
+    bindTabs();
     // Événements des boutons principaux
     // document.getElementById('get-meetings-btn').addEventListener('click', getMeetings);
     document.getElementById('working-group-select').addEventListener('change', (ev) => {
@@ -1121,7 +1131,7 @@ document.addEventListener('DOMContentLoaded', function () {
         const n_steps = document.getElementById('solution-gen-nsteps').value;
         workflow(n_steps);
     });
-        document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
+    document.getElementById('get-solutions-step-btn').addEventListener('click', () => {
         workflow(1);
     });
 });
@@ -1139,4 +1149,8 @@ document.getElementById('copy-reqs-btn').addEventListener('click', (ev) => {
     copySelectedRequirementsAsMarkdown();
 });
 
-document.getElementById('copy-all-reqs-btn').addEventListener('click', copyAllRequirementsAsMarkdown);
+document.getElementById('copy-all-reqs-btn').addEventListener('click', copyAllRequirementsAsMarkdown);
+
+document.getElementById('test-btn').addEventListener('click', _ => {
+    console.log(checkCanUsePrivateGen());
+});

static/js/sse.js

@@ -1,5 +1,3 @@
-// sse-fetch.js
-
 /**
  * Performs a POST request and handles the response as a Server-Sent Events (SSE) stream.
  * The standard EventSource API does not support POST requests, so we use fetch.
@@ -10,7 +8,7 @@
  * @param {(data: object) => void} callbacks.onMessage A function called for each message received.
  * @param {(error: Error) => void} callbacks.onError A function called if an error occurs.
  */
-async function postWithSSE(url, body, callbacks) {
+export async function postWithSSE(url, body, callbacks) {
   const { onMessage, onError } = callbacks;
 
   try {

static/js/ui-utils.js

@@ -7,7 +7,7 @@
  * @param {string[]} elementIds - Liste des IDs des éléments à activer
  * @param {boolean} enabled - true pour activer, false pour désactiver
  */
-function toggleElementsEnabled(elementIds, enabled = true) {
+export function toggleElementsEnabled(elementIds, enabled = true) {
     elementIds.forEach(id => {
         const element = document.getElementById(id);
         if (element) {
@@ -25,7 +25,7 @@ function toggleElementsEnabled(elementIds, enabled = true) {
  * @param {string[]} containerIds - Liste des IDs des conteneurs à afficher
  * @param {boolean} visible - true pour afficher, false pour masquer
  */
-function toggleContainersVisibility(containerIds, visible = true) {
+export function toggleContainersVisibility(containerIds, visible = true) {
     containerIds.forEach(id => {
         const container = document.getElementById(id);
         if (container) {
@@ -42,7 +42,7 @@ function toggleContainersVisibility(containerIds, visible = true) {
  * Affiche le loading overlay avec un message personnalisé
  * @param {string} message - Message à afficher
  */
-function showLoadingOverlay(message = 'Chargement en cours...') {
+export function showLoadingOverlay(message = 'Chargement en cours...') {
     document.getElementById('progress-text').textContent = message;
     toggleContainersVisibility(['loading-overlay'], true);
 }
@@ -50,7 +50,7 @@ function showLoadingOverlay(message = 'Chargement en cours...') {
 /**
  * Masque le loading overlay
  */
-function hideLoadingOverlay() {
+export function hideLoadingOverlay() {
     toggleContainersVisibility(['loading-overlay'], false);
 }
 
@@ -60,7 +60,7 @@ function hideLoadingOverlay() {
  * @param {Object} options - Objet avec les options {value: text}
  * @param {string} defaultText - Texte par défaut
  */
-function populateSelect(selectId, options, defaultText = 'Sélectionner...') {
+export function populateSelect(selectId, options, defaultText = 'Sélectionner...') {
     const select = document.getElementById(selectId);
     if (select) {
         select.innerHTML = `<option value="">${defaultText}</option>`;
@@ -73,7 +73,7 @@ function populateSelect(selectId, options, defaultText = 'Sélectionner...') {
     }
 }
 
-function populateCheckboxDropdown(optionsContainerId, options, filterType, labelId, selectionSet) {
+export function populateCheckboxDropdown(optionsContainerId, options, filterType, labelId, selectionSet, onSelect) {
     const container = document.getElementById(optionsContainerId);
     container.innerHTML = '';
     selectionSet.clear(); // reset all
@@ -93,6 +93,7 @@ function populateCheckboxDropdown(optionsContainerId, options, filterType, label
             } else {
                 selectionSet.delete(this.value);
             }
+
             // Gestion du label "Tous"
             updateCheckboxDropdownLabel(filterType, labelId, selectionSet, options.length);
             // Gestion du "Tous" global
@@ -100,7 +101,7 @@ function populateCheckboxDropdown(optionsContainerId, options, filterType, label
             if (allBox && allBox.checked) allBox.checked = false;
             // Si plus rien n'est coché, recoche "Tous"
             if (selectionSet.size === 0 && allBox) allBox.checked = true;
-            applyFilters();
+            onSelect?.();
         });
         container.appendChild(label);
     });
@@ -124,7 +125,7 @@ function populateCheckboxDropdown(optionsContainerId, options, filterType, label
     }
 }
 
-function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
+export function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
     const label = document.getElementById(labelId);
     if (!set.size) {
         label.textContent = type.charAt(0).toUpperCase() + type.slice(1) + " (Tous)";
@@ -135,7 +136,7 @@ function updateCheckboxDropdownLabel(type, labelId, set, totalCount) {
     }
 }
 
-function updateSelectedFilters(filterType, value, isChecked) {
+export function updateSelectedFilters(filterType, value, isChecked) {
     if (isChecked) {
         selectedFilters[filterType].add(value);
     } else {
@@ -143,7 +144,7 @@ function updateSelectedFilters(filterType, value, isChecked) {
     }
 }
 
-function populateDaisyDropdown(menuId, options, labelId, onSelect) {
+export function populateDaisyDropdown(menuId, options, labelId, onSelect) {
     const menu = document.getElementById(menuId);
     menu.innerHTML = '';
     // Option "Tous"
@@ -169,7 +170,7 @@ function populateDaisyDropdown(menuId, options, labelId, onSelect) {
     });
 }
 
-function updateFilterLabel(filterType) {
+export function updateFilterLabel(filterType) {
     const selectedCount = selectedFilters[filterType].size;
     const labelElement = document.getElementById(`${filterType}-filter-label`);
 
@@ -185,7 +186,7 @@ function updateFilterLabel(filterType) {
  * @param {Object} mapping - Mapping des colonnes {columnName: propertyName}
  * @returns {Array} Données extraites
  */
-function extractTableData(mapping) {
+export function extractTableData(mapping) {
     const tbody = document.querySelector('#data-table tbody');
     const rows = tbody.querySelectorAll('tr');
     const data = [];
@@ -222,7 +223,7 @@ const TABS = {
  * Bascule l'affichage sur le nouveau tab
  * @param {*} newTab 
  */
-function switchTab(newTab) {
+export function switchTab(newTab) {
     // Remove active tab style from all tabs
     Object.keys(TABS).forEach(tabId => {
         const tabElement = document.getElementById(tabId);
@@ -249,10 +250,20 @@ function switchTab(newTab) {
     }
 }
 
+/**
+ * Setup les boutons pour basculer vers un autre tab
+ */
+export function bindTabs() {
+    Object.keys(TABS).forEach(tabId => {
+        const tabElement = document.getElementById(tabId);
+        tabElement.addEventListener('click', _ => switchTab(tabId));
+    });
+}
+
 /**
  * Bascule l'affichage vers la tab uniquement si les requirements sont
  */
-function enableTabSwitching() {
+export function enableTabSwitching() {
     Object.keys(TABS).forEach(tabId => {
         const tab = document.getElementById(tabId);
         if (tab)
@@ -264,7 +275,20 @@ function enableTabSwitching() {
 /**
  * Change l'état d'activation du number box de choix de nb de catégories. 
  */
-function debounceAutoCategoryCount(state) {
+export function debounceAutoCategoryCount(state) {
     document.getElementById('category-count').disabled = state;
 }
 
+
+/**
+*  Vérifie si les paramètres sont bien renseignés pour utiliser la génération privée.
+*/
+export function checkCanUsePrivateGen() {
+    const provider_url = document.getElementById('settings-provider-url').value;
+    const provider_token = document.getElementById('settings-provider-token').value;
+    const assessment_rules = document.getElementById('settings-assessment-rules').value;
+    const portfolio_info = document.getElementById('settings-portfolio').value;
+
+    const isEmpty = (str) => (!str?.length);
+    return !isEmpty(provider_url) && !isEmpty(provider_token) && !isEmpty(assessment_rules) && !isEmpty(portfolio_info);
+}