Make configuration persistent across sessions

static/index.html

@@ -348,9 +348,11 @@
                                         </div>
                                         <div>
                                             <p class="font-bold text-m">Quick summary:</p>
-                                            <p id="assessment-recommendation-summary">A short resumé of the patcom sayings should go there.</p>
+                                            <p id="assessment-recommendation-summary">A short resumé of the patcom
+                                                sayings should go there.</p>
                                         </div>
-                                        <button class="btn btn-info" id="read-assessment-button">Read whole assessment</button>
+                                        <button class="btn btn-info" id="read-assessment-button">Read whole
+                                            assessment</button>
                                     </div>
 
                                     <div class="divider my-1"></div>
@@ -406,50 +408,57 @@
         <!--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">Application settings</h3>
-                <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>
-                <p class="py-4">Detail your private LLM credentials under to draft and generate solution using private LLM</p>
-                <div 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">
+                <h2 class="text-xl font-bold">Application session settings</h3>
+                    <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>
+                    <p class="py-4">Detail your private LLM credentials under to draft and generate solution using
+                        private
+                        LLM</p>
+                    <div 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="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="provider-model" class="block mb-2 text-sm font-medium">Model</label>
-                        <button id="settings-fetch-models" class="btn btn-outline">Fetch models</button>
-                        <select id="settings-provider-model" name="provider-model" class="select">
-                        </select>
-                    </div>
+                        <div>
+                            <label for="provider-model" class="block mb-2 text-sm font-medium">Model</label>
+                            <button id="settings-fetch-models" class="btn btn-outline">Fetch models</button>
+                            <select id="settings-provider-model" name="provider-model" class="select">
+                            </select>
+                        </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="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>
+                            <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>
+                        <p class="py-4">⚠ 'Save configuration' to keep the current configuration across sessions.</p>
+                    </div>
+                    <div class="mt-2 space-x-2">
+                        <button class="btn btn-success" id="settings-save-btn">Save config</button>
+                        <button class="btn btn-error absolute right-5" id="settings-clear-btn">Clear saved configuration</button>
                     </div>
-                </div>
-                <div class="flex">
-                    <button class="btn btn-success" id="test-btn">Save config</button>
-                </div>
             </div>
         </dialog>
 

static/js/app.js

@@ -3,8 +3,9 @@ import {
     toggleElementsEnabled, toggleContainersVisibility, showLoadingOverlay, hideLoadingOverlay, populateSelect,
     populateCheckboxDropdown, populateDaisyDropdown, extractTableData, switchTab, enableTabSwitching, debounceAutoCategoryCount,
     bindTabs, checkPrivateLLMInfoAvailable, moveSolutionToDrafts, buildSolutionSubCategories, handleDraftRefine, renderDraftUI, populateLLMModelSelect,
-    displayFullAssessment
-} from "./ui-utils.js";
+    displayFullAssessment, handleSaveConfigFields, handleLoadConfigFields,
+    handleClearConfig
+} from "./ui.js";
 import { postWithSSE } from "./sse.js";
 
 // ==================================== Variables globales ========================================
@@ -1056,7 +1057,10 @@ document.addEventListener('DOMContentLoaded', function () {
     const refineBtn = document.getElementById('refine-btn');
     refineBtn.addEventListener('click', handleDraftRefine);
 
+    // render l'ui de draft vide
     renderDraftUI();
+
+    handleLoadConfigFields();
 });
 
 // dseactiver le choix du nb de catégories lorsqu'en mode auto
@@ -1076,6 +1080,10 @@ document.getElementById('copy-reqs-btn').addEventListener('click', (ev) => {
 // copy all requirements 
 document.getElementById('copy-all-reqs-btn').addEventListener('click', copyAllRequirementsAsMarkdown);
 
+// =============== settings events ================
+document.getElementById('settings-save-btn').addEventListener('click', handleSaveConfigFields);
+document.getElementById('settings-clear-btn').addEventListener('click', handleClearConfig);
+
 // button to fetch llm models
 document.getElementById('settings-fetch-models').addEventListener('click', _ => {
     const url = document.getElementById('settings-provider-url').value;
@@ -1084,6 +1092,8 @@ document.getElementById('settings-fetch-models').addEventListener('click', _ =>
     populateLLMModelSelect('settings-provider-model', url, token).catch(e => alert("Error while fetching models: " + e))
 });
 
+// ================== solution drafting events =============
+
 // button to open full assessment modal 
 document.getElementById('read-assessment-button').addEventListener('click', _ => {
     displayFullAssessment();

static/js/persistence.js

@@ -0,0 +1,37 @@
+// clées utilisées pour la generation avec private compute
+const CONFIG_KEYS = ["providerUrl", "providerToken", "providerModel", "assessmentRules", "businessPortfolio"];
+// clée pour marquer si la config est remplie.
+const POPULATED_CONFIG_KEY = "_config_populated";
+
+/**
+ * Récupère la configuration pour la generation avec private compute, si elle est renseignée, sinon retourne null.
+ */
+export function loadConfig() {
+    if (localStorage.getItem(POPULATED_CONFIG_KEY) != null) {
+        let configObj = {};
+        CONFIG_KEYS
+            .forEach(k => {
+                configObj[k] = localStorage.getItem(k)
+            })
+        return configObj;
+    }
+    else
+        return null;
+}
+
+/**
+ * Sauvegarde la configuration pour le private compute
+ */
+export function saveConfig(config) {
+    CONFIG_KEYS
+        .forEach(k => {
+            if (config[k])
+                localStorage.setItem(k, config[k]);
+        })
+
+    localStorage.setItem(POPULATED_CONFIG_KEY, "true");
+}
+
+export function clearConfig() {
+    localStorage.clear();
+}

static/js/{ui-utils.js → ui.js}

@@ -1,5 +1,6 @@
 import { marked } from 'https://cdnjs.cloudflare.com/ajax/libs/marked/16.1.1/lib/marked.esm.js';
 import { assessSolution, getModelList, refineSolution } from "./gen.js"
+import { clearConfig, loadConfig, saveConfig } from "./persistence.js";
 
 // =============================================================================
 // FONCTIONS UTILITAIRES POUR LA GESTION DES ÉLÉMENTS
@@ -345,23 +346,29 @@ export function debounceAutoCategoryCount(state) {
     document.getElementById('category-count').disabled = state;
 }
 
-export function getPrivateLLMInfo() {
-    const provider_url = document.getElementById('settings-provider-url').value;
-    const provider_token = document.getElementById('settings-provider-token').value;
-    const provider_model = document.getElementById('settings-provider-model').value;
-    const assessment_rules = document.getElementById('settings-assessment-rules').value;
-    const portfolio_info = document.getElementById('settings-portfolio').value;
+// ============================================================================================ Overlay des paramètres ====================================================================
 
-    return { provider_url, provider_token, provider_model, assessment_rules, portfolio_info };
+/**
+ * Récupère les valeurs des champs de config des infos LLM.
+ * @returns 
+ */
+export function getConfigFields() {
+    const providerUrl = document.getElementById('settings-provider-url').value;
+    const providerToken = document.getElementById('settings-provider-token').value;
+    const providerModel = document.getElementById('settings-provider-model').value;
+    const assessmentRules = document.getElementById('settings-assessment-rules').value;
+    const businessPortfolio = document.getElementById('settings-portfolio').value;
+
+    return { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio };
 }
 
 /**
 *  Vérifie si les paramètres sont bien renseignés pour utiliser la génération privée.
 */
 export function checkPrivateLLMInfoAvailable() {
-    const { provider_url, provider_token, provider_model, assessment_rules, portfolio_info } = getPrivateLLMInfo();
+    const { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio } = getConfigFields();
     const isEmpty = (str) => (!str?.length);
-    return !isEmpty(provider_url) && !isEmpty(provider_token) && !isEmpty(assessment_rules) && !isEmpty(portfolio_info) && !isEmpty(provider_model);
+    return !isEmpty(providerUrl) && !isEmpty(providerToken) && !isEmpty(assessmentRules) && !isEmpty(businessPortfolio) && !isEmpty(providerModel);
     // return true;
 }
 
@@ -414,7 +421,49 @@ export async function populateLLMModelSelect(selectElementId, providerUrl, apiKe
     }
 }
 
+/**
+ * Charge le contenu de la configuration locale dans les champs HTML.
+ */
+export function handleLoadConfigFields() {
+    const configuration = loadConfig();
+    if (configuration === null)
+        return;
+
+    const providerUrl = document.getElementById('settings-provider-url');
+    const providerToken = document.getElementById('settings-provider-token');
+    const providerModel = document.getElementById('settings-provider-model');
+    const assessmentRules = document.getElementById('settings-assessment-rules');
+    const businessPortfolio = document.getElementById('settings-portfolio');
 
+    providerUrl.value = configuration.providerUrl;
+    providerToken.value = configuration.providerToken;
+    assessmentRules.value = configuration.assessmentRules;
+    businessPortfolio.value = configuration.businessPortfolio;
+
+    // on doit d'abord recup les modeles avant de set la valeur
+    populateLLMModelSelect('settings-provider-model', configuration.providerUrl, configuration.providerToken).then(() => {
+        providerModel.value = configuration.providerModel;
+    }).catch(e => {
+        alert("Failed to set LLM model in model selector. Model may not be available anymore, check model in LLM settings.");
+    })
+}
+
+/**
+* Sauvegarde le contenu des champs dans la configuration locale.
+*/
+export function handleSaveConfigFields() {
+    saveConfig(getConfigFields());
+    alert("Configuration saved locally.");
+}
+
+/**
+ * Clear le contenu de la configuration stockée dans localStorage.
+ * LA CONFIGURATION DANS LES CHAMPS HTML N'EST PAS AFFECTEE.
+ */
+export function handleClearConfig() {
+    clearConfig();
+    alert("Saved configuration has been cleared. Configuration set in the fields won't be saved.");
+}
 
 // ================================================================================ Solution drafting using private LLMs ==========================================================
 
@@ -446,14 +495,15 @@ export function moveSolutionToDrafts(solution) {
 
     switchTab('draft-tab');
 
-    const { provider_url, provider_token, provider_model, assessment_rules, portfolio_info } = getPrivateLLMInfo();
+    const { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio } = getConfigFields();
 
     showLoadingOverlay("Assessing solution ....");
-    assessSolution(provider_url, provider_model, provider_token, solution, assessment_rules, portfolio_info).then(response => {
+    assessSolution(providerUrl, providerModel, providerToken, solution, assessmentRules, businessPortfolio).then(response => {
         // reset the state of the draft history
         draftHistory = [];
         draftCurrentIndex = -1;
 
+        // map from a list of insights to a selectable list of insights
         const insights = response.extracted_info.insights.map((e, idx, __) => ({ id: idx, text: e, checked: false }));
 
         // push the solution to the draft history
@@ -475,33 +525,6 @@ export function moveSolutionToDrafts(solution) {
     })
 }
 
-/**
- * SIMULATED API CALL
- * In a real app, this would be an async fetch call to a backend AI/service.
- * @param {string} previousSolution - The text of the previous solution.
- * @param {Array<string>} selectedInsights - An array of the selected insight texts.
- * @returns {object} - An object with the new solution and new insights.
- */
-function assessSolutionDraft(previousSolution, selectedInsights = []) {
-    const version = draftHistory.length + 1;
-    let newSolutionText;
-
-    if (selectedInsights.length > 0) {
-        newSolutionText = `V${version}: Based on "${previousSolution.substring(0, 30)}..." and the insights: [${selectedInsights.join(', ')}], we've refined the plan to focus more on digital outreach and local partnerships.`;
-    } else {
-        newSolutionText = `V${version}: This is an initial assessment of "${previousSolution.substring(0, 50)}...". The plan seems solid but could use more detail.`;
-    }
-
-    // Generate some random new insights
-    const newInsights = [
-        { id: `v${version}-i1`, text: `Consider social media marketing (Insight ${Math.floor(Math.random() * 100)})`, checked: false },
-        { id: `v${version}-i2`, text: `Focus on customer retention (Insight ${Math.floor(Math.random() * 100)})`, checked: false },
-        { id: `v${version}-i3`, text: `Expand the product line (Insight ${Math.floor(Math.random() * 100)})`, checked: false },
-    ];
-
-    return { newSolutionText, newInsights };
-}
-
 /**
  * Renders the timeline UI based on the current state
  * @param {Number} currentIndex - Current index for latest draft
@@ -597,19 +620,20 @@ export function handleDraftRefine() {
     }
     // ---
 
-    const { provider_url, provider_token, provider_model, assessment_rules, portfolio_info } = getPrivateLLMInfo();
+    const { providerUrl, providerToken, providerModel, assessmentRules, businessPortfolio } = getConfigFields();
 
     showLoadingOverlay('Refining and assessing ....')
 
-    refineSolution(provider_url, provider_model, provider_token, currentState.solution, selectedInsights, assessment_rules, portfolio_info)
+    refineSolution(providerUrl, providerModel, providerToken, currentState.solution, selectedInsights, assessmentRules, businessPortfolio)
         .then(newSolution => {
             const refinedSolution = newSolution;
-            return assessSolution(provider_url, provider_model, provider_token, newSolution, assessment_rules, portfolio_info)
+            return assessSolution(providerUrl, providerModel, providerToken, newSolution, assessmentRules, businessPortfolio)
                 .then(assessedResult => {
                     return { refinedSolution, assessedResult };
                 });
         })
         .then(result => {
+            // map from a list of insights to a selectable list of insights
             const newInsights = result.assessedResult.extracted_info.insights.map((e, idx, __) => ({ id: idx, text: e, checked: false }));
 
             draftHistory.push({
@@ -641,6 +665,9 @@ function jumpToDraft(index) {
     }
 }
 
+/**
+ * Displays the whole idea evaluation.
+ */
 export function displayFullAssessment() {
     const full_assessment_content = document.getElementById('read-assessment-content');
     const modal = document.getElementById('read-assessment-modal');