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

application/static/js/components/initialize.js

@@ -1,112 +1,119 @@
+// application/static/js/initialize.js
 import requests from "./request.js";
-class Initialize{
-    constructor(uiManager){
-        this.convId;
-        this.convTitle;
+
+class Initialize {
+    constructor(uiManager) {
+        this.convId = null; // Initialize to 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 ***`;
         this.model = null;
+        this.image_captioning = this.uiManager.image_captioning; // Get from uiManager
     }
 
-    async initialize(model=null){
-        this.convTitle=null;
-        this.convId=null;
+    async initialize(model = null) {
+        this.convTitle = null;
+        this.convId = null;
         this.uiManager.messagesDiv.innerHTML = '';
-        this.uiManager.prevChatsCont.innerHTML = '';
-        await this.fetchConvs();
-        document.querySelectorAll('.prevChat').forEach((elem)=>{
-            elem.addEventListener('click', ()=>{
-                this.reInitialize(elem.id)
-            })
-        })
-        if(model!=null){
-            this.model = model;
-        } else{
-            await this.fetchModels()
-        }
+        // No need to clear prevChatsCont here; it's done in fetchConvs
+        await this.fetchModels(model); // Fetch models *first*
+        await this.fetchConvs();     // *Then* fetch conversations
     }
 
-    async reInitialize(id){
-        this.convTitle=null;
-        this.convId=id;
+    async reInitialize(id) {
+        this.convTitle = null;
+        this.convId = id;
         this.uiManager.messagesDiv.innerHTML = '';
         await this.fetchConv(id);
     }
 
-    async fetchConv(id){
+    async fetchConv(id) {
         try {
-            const response = await requests.request('POST','/fetch',{"Content-Type": "application/json"},JSON.stringify({"convId": id}),false);
-            if(!response.ok){
-                alert('error while fetching conversations')
-                return
+            const response = await requests.request('POST', '/fetch', { "Content-Type": "application/json" }, JSON.stringify({ "convId": id }), false);
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`Error fetching conversation: ${response.status} - ${errorText}`);
             }
             const data = await response.json();
             this.convTitle = data['title'];
             const arr = data['messages'];
-            for(let i=0;i<arr.length;i++){
+            for (let i = 0; i < arr.length; i++) {
                 const dict = arr[i];
-                if(dict['role']=='user'){
+                if (dict['role'] == 'user') {
                     this.uiManager.appendUserMsg(dict['content'])
                 }
-                else if(dict['role']=='assistant'){
+                else if (dict['role'] == 'assistant') {
                     this.uiManager.appendAiMsg(dict['content']);
                     this.uiManager.renderSymbols.renderAll(this.uiManager.aiP);
                 }
             }
         } catch (error) {
-            alert(`an error occured ${error}`)
-            console.log(error)
+            alert(`An error occurred: ${error}`);
+            console.error(error);
         }
     }
-    async fetchConvs(){
+
+    async fetchConvs() {
         try {
-            const response = await requests.request('GET','/convs',{"Content-Type": "application/json"},null,false);
-            if(!response.ok){
-                alert('error while fetching conversations')
-                return
+            const response = await requests.request('GET', '/convs', { "Content-Type": "application/json" }, null, false);
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`Error fetching conversations: ${response.status} - ${errorText}`);
             }
             const data = await response.json();
-            for(let i=0;i<data.length;i++){
+            this.uiManager.prevChatsCont.innerHTML = ''; // Clear here
+            for (let i = 0; i < data.length; i++) {
                 const prevChat = document.createElement('div');
                 const dict = data[i];
                 prevChat.id = dict['convId'];
                 prevChat.className = 'prevChat';
                 prevChat.innerText = dict['title'];
-                this.uiManager.prevChatsCont.appendChild(prevChat)
+                this.uiManager.prevChatsCont.appendChild(prevChat);
 
+                // Add event listener *inside* the loop, after appending
+                prevChat.addEventListener('click', () => {
+                    this.reInitialize(prevChat.id);
+                });
             }
         } catch (error) {
-            alert(`an error ocuured ${error}`)
-        }
-    }
-    async createConv(){
-        const response = await requests.request('POST', '/create', {"Content-Type": "application/json"},JSON.stringify({"system_prompt": this.systemPrompt}),false)
-        if(!response.ok){
-            alert('error while creating new Conversation')
-            return
+            alert(`An error occurred: ${error}`);
+            console.error(error);
         }
-        const data = await response.json()
-        this.convId = data['convId']
     }
-    async fetchModels(){
-        const response = await requests.request('GET', '/models', {"Content-Type": "application/json"},null,false)
-        if(!response.ok){
-            alert('error while fetching models')
-            return
-        }
-        const data = await response.json();
-        this.model = data[0];
-        this.uiManager.models.innerHTML = '';
-        for(let i=0; i<data.length;i++){
-            const opt = document.createElement('option')
-            opt.innerText = data[i];
-            this.uiManager.models.appendChild(opt)
-        }
-        this.uiManager.models.addEventListener('change', (e)=>{
-            const selected = e.target.value;
-            this.initialize(selected)
-        })
 
+
+    async fetchModels(initialModel) {
+        try {
+            const response = await requests.request('GET', '/models', { "Content-Type": "application/json" }, null, false);
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`Error fetching models: ${response.status} - ${errorText}`);
+            }
+            const data = await response.json();
+            this.uiManager.models.innerHTML = ''; // Clear existing options
+
+            for (let i = 0; i < data.length; i++) {
+                const opt = document.createElement('option');
+                opt.innerText = data[i];
+                opt.value = data[i]; // Set the value attribute
+                this.uiManager.models.appendChild(opt);
+            }
+
+            // Set the initial model, or the first one if none provided
+            this.model = initialModel || data[0];
+            this.uiManager.models.value = this.model; // Set selected option
+
+            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.
+            });
+
+        } catch (error) {
+            alert(`An error occurred: ${error}`);
+            console.error(error);
+        }
     }
 }
-export default Initialize
+export default Initialize