:zap: [Enhance] new agent model select auto synced with available models

widgets/available_models_select_widget.js

@@ -2,6 +2,8 @@ export class AvailableModelsSelectWidget {
     constructor({ widget_id = null, widget_title = null } = {}) {
         this.widget_id = widget_id;
         this.widget_title = widget_title || "Available Models";
+        this.observer = null;
+        this.available_models_select = $("#available-models-select");
     }
     spawn_in_parent(parent, position = "append") {
         this.create_widget();
@@ -11,6 +13,7 @@ export class AvailableModelsSelectWidget {
         } else {
             parent.append(this.widget);
         }
+        this.observe_changes();
     }
     create_widget() {
         this.widget_html = `
@@ -19,11 +22,24 @@ export class AvailableModelsSelectWidget {
         this.widget = $(this.widget_html);
     }
     update_select_options() {
-        let available_models_select = $("#available-models-select");
-        let options = available_models_select.find("option");
+        let options = this.available_models_select.find("option");
         this.widget.empty();
         options.each((i, option) => {
             this.widget.append($(option).clone());
         });
     }
+    observe_changes() {
+        this.observer = new MutationObserver((mutationsList, observer) => {
+            for (let mutation of mutationsList) {
+                if (mutation.type === "childList") {
+                    this.update_select_options();
+                }
+            }
+        });
+        this.observer.observe(this.available_models_select[0], {
+            attributes: false,
+            childList: true,
+            subtree: true,
+        });
+    }
 }