:gem: [Feature] Set available models on select when loading or updating endpoint

components/buttons_binder.js

@@ -5,11 +5,12 @@ import {
     create_new_chat_session,
     get_latest_message_content_displayer,
 } from "./chat_operator.js";
+import { setup_available_models_on_select } from "./llm_models_loader.js";
 
 import { screen_scroller } from "../storage/states.js";
 
 export class ButtonsBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         let send_user_input_binder = new SendUserInputButtonBinder();
         send_user_input_binder.bind();
@@ -102,7 +103,7 @@ class SendUserInputButtonBinder {
 }
 
 class NewChatButtonBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const button = $("#new-chat-session");
         button.attr("status", "new").attr("title", "New Chat");
@@ -113,13 +114,14 @@ class NewChatButtonBinder {
 }
 
 class OpenaiEndpointButtonBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const button = $("#openai-endpoint-button");
         button.attr("title", "Submit Endpoint");
         const stored_openai_endpoint = localStorage.getItem("openai_endpoint");
         if (stored_openai_endpoint) {
             $("#openai-endpoint").val(stored_openai_endpoint);
+            setup_available_models_on_select();
             console.log(`GET OpenAI Endpoint: ${stored_openai_endpoint}`);
         }
         button.click(() => {
@@ -128,12 +130,13 @@ class OpenaiEndpointButtonBinder {
                 "openai_endpoint",
                 $("#openai-endpoint").val()
             );
+            setup_available_models_on_select();
         });
     }
 }
 
 class OpenaiAPIKeyButtonBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const button = $("#openai-api-key-button");
         button.attr("title", "Submit API Key");
@@ -150,7 +153,7 @@ class OpenaiAPIKeyButtonBinder {
 }
 
 class ShowEndpointAndKeyButtonBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const button = $("#show-endpoint-and-key-button");
         button.attr("title", "Show endpoint and api key");
@@ -175,7 +178,7 @@ class ShowEndpointAndKeyButtonBinder {
 }
 
 class ScrollToBottomButtonBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const button = $("#scroll-to-bottom-button");
         button.attr("title", "Scroll to bottom");
@@ -187,7 +190,7 @@ class ScrollToBottomButtonBinder {
 }
 
 class ScreenshotButtonBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const button = $("#screenshot-button");
         button.attr("title", "Take screenshot for whole chat");
@@ -222,7 +225,7 @@ class ScreenshotButtonBinder {
 }
 
 class AvailableModelsSelectBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         const select = $("#available-models-select");
         select.change(() => {

components/inputs_binder.js

@@ -1,12 +1,8 @@
-import {
-    setup_hardcoded_available_models_on_select,
-    setup_temperature_on_select,
-} from "../components/llm_models_loader.js";
+import { setup_temperature_on_select } from "../components/llm_models_loader.js";
 
 export class InputsBinder {
-    constructor() {}
+    constructor() { }
     bind() {
-        setup_hardcoded_available_models_on_select();
         setup_temperature_on_select();
         let user_input_resizer = new UserInputResizer();
         user_input_resizer.bind();
@@ -17,7 +13,7 @@ export class InputsBinder {
 }
 
 class UserInputResizer {
-    constructor() {}
+    constructor() { }
     bind() {
         // https://stackoverflow.com/questions/37629860/automatically-resizing-textarea-in-bootstrap
         document.getElementById("user-input").addEventListener(
@@ -32,7 +28,7 @@ class UserInputResizer {
 }
 
 class ChatSessionContainerResizeBinder {
-    constructor() {}
+    constructor() { }
     bind() {
         this.resize();
         $(window).on("resize", this.resize);

components/llm_models_loader.js

@@ -1,7 +1,4 @@
-import {
-    request_available_models,
-    available_models,
-} from "../networks/llm_requester.js";
+import { available_models, AvailableModelsRequester } from "../networks/llm_requester.js";
 
 export async function setup_hardcoded_available_models_on_select(
     default_option = null
@@ -32,6 +29,32 @@ export async function setup_hardcoded_available_models_on_select(
 }
 
 export async function setup_available_models_on_select(default_option = null) {
+    var select = $("#available-models-select");
+    select.empty();
+    let available_models_requester = new AvailableModelsRequester();
+    await available_models_requester.get();
+    available_models.forEach((value, index) => {
+        const option = new Option(value, value);
+        select.append(option);
+    });
+    let default_model = "";
+    let local_default_model = localStorage.getItem("default_model");
+    if (
+        local_default_model && available_models.includes(local_default_model)
+    ) {
+        default_model = local_default_model;
+    } else if (available_models) {
+        default_model = available_models[0];
+        localStorage.setItem("default_model", default_model);
+    } else {
+        default_model = "";
+    }
+
+    select.val(default_model);
+    console.log(`Default model: ${select.val()}`);
+}
+
+export async function setup_working_available_models_on_select(default_option = null) {
     var select = $("#available-models-select");
     select.empty();
     await request_available_models();