:zap: [Enhance] Copy model options to new agent models select

widgets/available_models_select_widget.js

@@ -0,0 +1,29 @@
+export class AvailableModelsSelectWidget {
+    constructor({ widget_id = null, widget_title = null } = {}) {
+        this.widget_id = widget_id;
+        this.widget_title = widget_title || "Available Models";
+    }
+    spawn_in_parent(parent, position = "append") {
+        this.create_widget();
+        this.update_select_options();
+        if (position === "prepend") {
+            parent.prepend(this.widget);
+        } else {
+            parent.append(this.widget);
+        }
+    }
+    create_widget() {
+        this.widget_html = `
+        <select class="form-select" id="${this.widget_id}-select" title="${this.widget_title}"></select>
+        `;
+        this.widget = $(this.widget_html);
+    }
+    update_select_options() {
+        let available_models_select = $("#available-models-select");
+        let options = available_models_select.find("option");
+        this.widget.empty();
+        options.each((i, option) => {
+            this.widget.append($(option).clone());
+        });
+    }
+}

widgets/new_agent_modal_widget.js

@@ -1,4 +1,5 @@
 import { RangeNumberWidget } from "./range_number_widget.js";
+import { AvailableModelsSelectWidget } from "./available_models_select_widget.js";
 
 export class NewAgentModalWidget {
     constructor({ widget_id = null } = {}) {
@@ -19,6 +20,13 @@ export class NewAgentModalWidget {
     remove() {
         this.widget.remove();
     }
+    create_model_widget() {
+        this.model_widget = new AvailableModelsSelectWidget({
+            widget_id: this.model_widget_id,
+        });
+        let model_widget_parent = this.widget.find(`#${this.model_widget_id}`);
+        this.model_widget.spawn_in_parent(model_widget_parent, "prepend");
+    }
     create_temperature_widget() {
         this.temperature_widget = new RangeNumberWidget({
             widget_id: this.temperature_widget_id,
@@ -72,8 +80,7 @@ export class NewAgentModalWidget {
                             <label>Description</label>
                         </div>
                         <!-- model -->
-                        <div class="form-floating mb-2">
-                            <select id="${this.model_widget_id}" class="form-select" type="text"></select>
+                        <div id="${this.model_widget_id}" class="form-floating mb-2">
                             <label class="form-label">Model</label>
                         </div>
                         <!-- temperature -->
@@ -100,6 +107,7 @@ export class NewAgentModalWidget {
         </div>
         `;
         this.widget = $(this.widget_html);
+        this.create_model_widget();
         this.create_temperature_widget();
         this.create_max_output_tokens_widget();
     }