:recycle: [Refactor] Separate InputsBinder and CommonsLoader from main.js

commons/commons_loader.js

@@ -0,0 +1,14 @@
+export class CommonsLoader {
+    constructor() {}
+    load() {
+        load_live_js();
+    }
+}
+
+function load_live_js() {
+    if (window.location.protocol !== "https:") {
+        var script = document.createElement("script");
+        script.src = "./commons/live.js";
+        document.head.appendChild(script);
+    }
+}

components/inputs_binder.js

@@ -0,0 +1,48 @@
+import {
+    setup_available_models_on_select,
+    setup_temperature_on_select,
+} from "../components/llm_models_loader.js";
+
+export class InputsBinder {
+    constructor() {}
+    bind() {
+        setup_available_models_on_select();
+        setup_temperature_on_select();
+        let user_input_resizer = new UserInputResizer();
+        user_input_resizer.bind();
+        let chat_session_container_resize_binder =
+            new ChatSessionContainerResizeBinder();
+        chat_session_container_resize_binder.bind();
+    }
+}
+
+class UserInputResizer {
+    constructor() {}
+    bind() {
+        // https://stackoverflow.com/questions/37629860/automatically-resizing-textarea-in-bootstrap
+        document.getElementById("user-input").addEventListener(
+            "input",
+            function () {
+                this.style.height = 0;
+                this.style.height = this.scrollHeight + 3 + "px";
+            },
+            false
+        );
+    }
+}
+
+class ChatSessionContainerResizeBinder {
+    constructor() {}
+    bind() {
+        this.resize();
+        $(window).on("resize", this.resize);
+    }
+    resize() {
+        let user_interaction_height = $("#user-interactions").outerHeight(true);
+        let page_height = $(window).height();
+        $("#chat-session-container").css(
+            "max-height",
+            page_height - user_interaction_height + "px"
+        );
+    }
+}

main.js

@@ -1,49 +1,12 @@
-import {
-    setup_available_models_on_select,
-    setup_temperature_on_select,
-} from "./components/llm_models_loader.js";
 import { ButtonsBinder } from "./components/buttons_binder.js";
+import { InputsBinder } from "./components/inputs_binder.js";
+import { CommonsLoader } from "./commons/commons_loader.js";
 
-function auto_resize_user_input() {
-    // https://stackoverflow.com/questions/37629860/automatically-resizing-textarea-in-bootstrap
-    document.getElementById("user-input").addEventListener(
-        "input",
-        function () {
-            this.style.height = 0;
-            this.style.height = this.scrollHeight + 3 + "px";
-        },
-        false
-    );
-}
-
-function load_live_js() {
-    if (window.location.protocol !== "https:") {
-        var script = document.createElement("script");
-        script.src = "./common/live.js";
-        document.head.appendChild(script);
-    }
-}
-
-function setup_interactive_components() {
-    setup_available_models_on_select();
-    setup_temperature_on_select();
-    auto_resize_user_input();
+$(document).ready(function () {
     let buttons_binder = new ButtonsBinder();
     buttons_binder.bind();
-    adjust_messagers_container_max_height();
-    $(window).on("resize", adjust_messagers_container_max_height);
-}
-
-function adjust_messagers_container_max_height() {
-    var user_interaction_height = $("#user-interactions").outerHeight(true);
-    var page_height = $(window).height();
-    $("#chat-session-container").css(
-        "max-height",
-        page_height - user_interaction_height + "px"
-    );
-}
-
-$(document).ready(function () {
-    load_live_js();
-    setup_interactive_components();
+    let inputs_binder = new InputsBinder();
+    inputs_binder.bind();
+    let commons_loader = new CommonsLoader();
+    commons_loader.load();
 });