:zap: [Enhance] Enable RangeNumber widget append and real-time update, generalize widget_id, and check existance before creating modal

components/buttons_binder.js

@@ -303,8 +303,20 @@ class NewAgentButtonBinder {
         const button = $("#new-agent-button");
         button.attr("title", "New agent");
         button.click(() => {
-            let new_agent_modal_widget = new NewAgentModalWidget();
-            new_agent_modal_widget.spawn();
+            let new_agent_modal_widget_id = "new-agent-modal";
+            let new_agent_modal_widget_parent = $(
+                `#${new_agent_modal_widget_id}`
+            );
+            if (new_agent_modal_widget_parent.length <= 0) {
+                let new_agent_modal_widget = new NewAgentModalWidget({
+                    widget_id: new_agent_modal_widget_id,
+                });
+                new_agent_modal_widget.spawn();
+                new_agent_modal_widget_parent = $(
+                    `#${new_agent_modal_widget_id}`
+                );
+            }
+            new_agent_modal_widget_parent.modal("show");
         });
     }
 }

css/default.css

@@ -46,11 +46,6 @@ body {
     flex: 0 0 auto;
 }
 
-#new-agent-modal-system-prompt {
-    resize: none;
-    max-height: 200px;
-}
-
 .message-user,
 .message-assistant {
     box-shadow: 0px 0px 6px 0px rgba(122, 122, 122, 0.5);

index.html

@@ -69,8 +69,7 @@
         </div>
         <div class="offcanvas-body">
             <div class="my-0 row no-gutters">
-                <button id="new-agent-button" type="button" class="explicit-button" data-bs-toggle="modal"
-                    data-bs-target="#new-agent-modal">
+                <button id="new-agent-button" type="button" class="explicit-button">
                     <i class="fa fa-plus"></i> New Agent
                 </button>
             </div>

widgets/new_agent_modal_widget.js

@@ -1,8 +1,11 @@
 import { RangeNumberWidget } from "./range_number_widget.js";
 
 export class NewAgentModalWidget {
-    constructor() {
-        this.widget_id = "new-agent-modal";
+    constructor({ widget_id = null } = {}) {
+        this.widget_id = widget_id;
+        this.temperature_widget_id = `${this.widget_id}-temperature`;
+        this.max_output_tokens_widget_id = `${this.widget_id}-max-output-tokens`;
+        this.system_prompt_widget_id = `${this.widget_id}-system-prompt`;
     }
     spawn() {
         this.create_widget();
@@ -12,7 +15,6 @@ export class NewAgentModalWidget {
         this.widget.remove();
     }
     create_temperature_widget() {
-        this.temperature_widget_id = `${this.widget_id}-temperature`;
         this.temperature_widget = new RangeNumberWidget({
             widget_id: this.temperature_widget_id,
             label_text: "Temperature",
@@ -21,12 +23,12 @@ export class NewAgentModalWidget {
             max_val: 1,
             step_val: 0.1,
         });
-        this.temperature_widget.spawn_in_parent(
-            this.widget.find(`#${this.temperature_widget_id}`)
+        let temperature_widget_parent = this.widget.find(
+            `#${this.temperature_widget_id}`
         );
+        this.temperature_widget.spawn_in_parent(temperature_widget_parent);
     }
     create_max_output_tokens_widget() {
-        this.max_output_tokens_widget_id = `${this.widget_id}-max-output-tokens`;
         this.max_output_tokens_widget = new RangeNumberWidget({
             widget_id: this.max_output_tokens_widget_id,
             label_text: "Max Output Tokens",
@@ -35,8 +37,11 @@ export class NewAgentModalWidget {
             max_val: 32768,
             step_val: 1,
         });
+        let max_output_tokens_widget_parent = this.widget.find(
+            `#${this.max_output_tokens_widget_id}`
+        );
         this.max_output_tokens_widget.spawn_in_parent(
-            this.widget.find(`#${this.temperature_widget_id}`)
+            max_output_tokens_widget_parent
         );
     }
     create_widget() {
@@ -54,12 +59,12 @@ export class NewAgentModalWidget {
                         <!-- nickname -->
                         <div class="form-floating mb-2">
                             <input id="${this.widget_id}-nickname" class="form-control" type="text" placeholder="Nickname" />
-                            <label for="new-agent-model-nickname" class="form-label">Nickname</label>
+                            <label class="form-label">Nickname</label>
                         </div>
                         <!-- model -->
                         <div class="form-floating mb-2">
                             <select id="${this.widget_id}-model" class="form-select" type="text"></select>
-                            <label for="${this.widget_id}-model" class="form-label">Model</label>
+                            <label class="form-label">Model</label>
                         </div>
                         <!-- temperature -->
                         <div id="${this.temperature_widget_id}" class="row mb-0"">
@@ -69,9 +74,9 @@ export class NewAgentModalWidget {
                         </div>
                         <!-- system prompt -->
                         <div class="form-floating mb-2">
-                            <textarea id="${this.widget_id}-system-prompt" class="form-control" placeholder="System Prompt"
+                            <textarea id="${this.system_prompt_widget_id}" class="form-control" placeholder="System Prompt"
                                 rows="3"></textarea>
-                            <label for="${this.widget_id}-system-prompt">System Prompt</label>
+                            <label>System Prompt</label>
                         </div>
                         <!-- max token -->
                         <!-- max history messages token -->
@@ -92,7 +97,7 @@ export class NewAgentModalWidget {
     append_to_body() {
         $("body").append(this.widget);
         document
-            .getElementById("new-agent-modal-system-prompt")
+            .getElementById(`${this.system_prompt_widget_id}`)
             .addEventListener(
                 "input",
                 function () {
@@ -101,5 +106,8 @@ export class NewAgentModalWidget {
                 },
                 false
             );
+        $(`#${this.system_prompt_widget_id}`)
+            .css("resize", "none")
+            .css("max-height", "200px");
     }
 }

widgets/range_number_widget.js

@@ -53,10 +53,10 @@ export class RangeNumberWidget {
     }
     bind_update_functions() {
         let self = this;
-        this.widget.find(`#${this.widget_id}-range`).change(function () {
+        this.widget.find(`#${this.widget_id}-range`).on("input", function () {
             self.update_number_widget_value($(this).val());
         });
-        this.widget.find(`#${this.widget_id}-number`).change(function () {
+        this.widget.find(`#${this.widget_id}-number`).on("input", function () {
             self.update_range_widget_value($(this).val());
         });
     }