Update application/static/js/components/initialize.js

application/static/js/components/initialize.js

@@ -3,7 +3,7 @@ import requests from "./request.js";
 
 class Initialize {
     constructor(uiManager) {
-        this.convId = null; // Initialize to null
+        this.convId = null;
         this.convTitle = null;
         this.uiManager = uiManager;
         this.systemPrompt = `your response syntax should be: ###for heading### \n ** for sub heading ** \n *** for text highlight/bold text ***`;
@@ -12,18 +12,28 @@ class Initialize {
     }
 
     async initialize(model = null) {
+        // 1. Reset UI state *before* any async calls.  This is CRUCIAL.
         this.convTitle = null;
         this.convId = null;
         this.uiManager.messagesDiv.innerHTML = '';
-        // No need to clear prevChatsCont here; it's done in fetchConvs
-        await this.fetchModels(model); // Fetch models *first*
-        await this.fetchConvs();     // *Then* fetch conversations
+        this.uiManager.prevChatsCont.innerHTML = ''; // Clear conversations here
+
+        // 2. Fetch models.  Await the result.
+        await this.fetchModels(model);
+
+        // 3. Fetch conversations. Await the result.
+        await this.fetchConvs();
+
+        // 4.  The UI is now fully initialized and consistent.
     }
 
     async reInitialize(id) {
+        // 1. Reset UI state *before* any async calls.
         this.convTitle = null;
         this.convId = id;
         this.uiManager.messagesDiv.innerHTML = '';
+
+        // 2. Fetch the specific conversation.  Await the result.
         await this.fetchConv(id);
     }
 
@@ -61,7 +71,9 @@ class Initialize {
                 throw new Error(`Error fetching conversations: ${response.status} - ${errorText}`);
             }
             const data = await response.json();
-            this.uiManager.prevChatsCont.innerHTML = ''; // Clear here
+            // Clear conversations *inside* fetchConvs, before adding new ones
+            this.uiManager.prevChatsCont.innerHTML = '';
+
             for (let i = 0; i < data.length; i++) {
                 const prevChat = document.createElement('div');
                 const dict = data[i];
@@ -70,7 +82,7 @@ class Initialize {
                 prevChat.innerText = dict['title'];
                 this.uiManager.prevChatsCont.appendChild(prevChat);
 
-                // Add event listener *inside* the loop, after appending
+                // Attach event listener *after* appending to the DOM.
                 prevChat.addEventListener('click', () => {
                     this.reInitialize(prevChat.id);
                 });
@@ -99,15 +111,13 @@ class Initialize {
                 this.uiManager.models.appendChild(opt);
             }
 
-            // Set the initial model, or the first one if none provided
+            // Set the initial model. Use initialModel if provided, otherwise default to the first model.
             this.model = initialModel || data[0];
             this.uiManager.models.value = this.model; // Set selected option
 
+            // Only update this.model on change.  Do NOT re-initialize.
             this.uiManager.models.addEventListener('change', (e) => {
-                const selected = e.target.value;
-                this.model = selected;  // Update the model
-                //  this.initialize(selected); // Don't re-initialize the entire UI.
-                //  Just update this.model.  Re-initializing is too disruptive.
+                this.model = e.target.value;
             });
 
         } catch (error) {