:zap: [Enhance] [WIP] Dynamicly creating NewAgentModal

components/buttons_binder.js

@@ -8,6 +8,8 @@ import {
     create_messager,
 } from "./chat_operator.js";
 
+import { NewAgentModalWidget } from "../widgets/new_agent_modal_widget.js";
+
 import { screen_scroller } from "./screen_scroller.js";
 import { chat_history_storage } from "../storages/chat_history_storage.js";
 import { endpoint_storage } from "../storages/endpoint_storage.js";
@@ -35,6 +37,8 @@ export class ButtonsBinder {
         let chat_agents_sidebar_toggle_button_binder =
             new ChatAgentsSidebarToggleButtonBinder();
         chat_agents_sidebar_toggle_button_binder.bind();
+        let new_agent_button_binder = new NewAgentButtonBinder();
+        new_agent_button_binder.bind();
         let clear_chat_history_button_binder =
             new ClearChatHistoryButtonBinder();
         clear_chat_history_button_binder.bind();
@@ -295,7 +299,14 @@ class ChatAgentsSidebarToggleButtonBinder {
 
 class NewAgentButtonBinder {
     constructor() {}
-    bind() {}
+    bind() {
+        const button = $("#new-agent-button");
+        button.attr("title", "New agent");
+        button.click(() => {
+            let new_agent_modal_widget = new NewAgentModalWidget();
+            new_agent_modal_widget.spawn();
+        });
+    }
 }
 
 class ClearChatAgentsButtonBinder {

components/inputs_binder.js

@@ -27,16 +27,6 @@ class UserInputResizer {
             },
             false
         );
-        document
-            .getElementById("new-agent-modal-system-prompt")
-            .addEventListener(
-                "input",
-                function () {
-                    this.style.height = 0;
-                    this.style.height = this.scrollHeight + 3 + "px";
-                },
-                false
-            );
     }
 }
 

index.html

@@ -85,70 +85,6 @@
             </div>
         </div>
     </div>
-    <div id="new-agent-modal" data-bs-backdrop="static" class="modal" role="dialog">
-        <div class="modal-dialog modal-dialog-centered" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title">Create New Agent</h4>
-                    <button class="btn" data-bs-dismiss="modal">
-                        <i class="fa fa-close"></i>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <!-- nickname -->
-                    <div class="form-floating mb-2">
-                        <input id="new-agent-modal-nickname" class="form-control" type="text" placeholder="Nickname" />
-                        <label for="new-agent-model-nickname" class="form-label">Nickname</label>
-                    </div>
-                    <!-- model -->
-                    <div class="form-floating mb-2">
-                        <select id="new-agent-modal-model" class="form-select" type="text"></select>
-                        <label for="new-agent-modal-model" class="form-label">Model</label>
-                    </div>
-                    <!-- temperature -->
-                    <div class="row mb-0">
-                        <label for="new-agent-modal-temperature" class="col-form-label">Temperature</label>
-                        <div class="col-sm-8 d-flex align-items-center">
-                            <input id="new-agent-modal-temperature-range" type="range" value="0" min="0" max="1"
-                                step="0.1" class="form-range" oninput="updateTemperatureNumber(this.value)" />
-                        </div>
-                        <div class="col-sm-4">
-                            <input id="new-agent-modal-temperature-number" type="number" value="0" min="0" max="1"
-                                step="0.1" class="form-control" onchange="updateTemperatureRange(this.value)" />
-                        </div>
-                    </div>
-                    <!-- max output tokens -->
-                    <div class="row mb-2">
-                        <label for="new-agent-modal-max-output-tokens" class="col-form-label">Max Output
-                            Tokens (<code>-1</code>: auto)</label>
-                        <div class="col-sm-8 d-flex align-items-center">
-                            <input id="new-agent-modal-max-output-tokens-range" type="range" value="-1" min="-1"
-                                max="32768" step="1" class="form-range"
-                                oninput="updateMaxOutputTokensNumber(this.value)" />
-                        </div>
-                        <div class="col-sm-4">
-                            <input id="new-agent-modal-max-output-tokens-number" type="number" value="-1" min="-1"
-                                max="32768" step="1" class="form-control"
-                                onchange="updateMaxOutputTokensRange(this.value)" />
-                        </div>
-                    </div>
-                    <!-- system prompt -->
-                    <div class="form-floating mb-2">
-                        <textarea id="new-agent-modal-system-prompt" class="form-control" placeholder="System Prompt"
-                            rows="3"></textarea>
-                        <label for="new-agent-modal-system-prompt">System Prompt</label>
-                    </div>
-                    <!-- max token -->
-                    <!-- max history messages token -->
-                </div>
-                <div class="modal-footer justify-content-end">
-                    <button id="new-agent-model-save-button" class="btn btn-success">Save</button>
-                    <button id="new-agent-model-close-button" class="btn btn-secondary"
-                        data-bs-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
     <div id="main-container" class="container">
         <div id="top-toolbar" class="container mt-2">
             <div class="my-1 row no-gutters justify-content-start">
@@ -209,20 +145,6 @@
         </div>
     </div>
 </body>
-<script>
-    function updateTemperatureNumber(value) {
-        document.getElementById('new-agent-modal-temperature-number').value = value;
-    }
-    function updateTemperatureRange(value) {
-        document.getElementById('new-agent-modal-temperature-range').value = value;
-    }
-    function updateMaxOutputTokensNumber(value) {
-        document.getElementById('new-agent-modal-max-output-tokens-number').value = value;
-    }
-    function updateMaxOutputTokensRange(value) {
-        document.getElementById('new-agent-modal-max-output-tokens-range').value = value;
-    }
-</script>
 <script type="module" src="./main.js"></script>
 
 </html>

storages/agents_storage.js

@@ -0,0 +1 @@
+class AgentsStorage {}

widgets/new_agent_modal_widget.js

@@ -0,0 +1,105 @@
+import { RangeNumberWidget } from "./range_number_widget.js";
+
+export class NewAgentModalWidget {
+    constructor() {
+        this.widget_id = "new-agent-modal";
+    }
+    spawn() {
+        this.create_widget();
+        this.append_to_body();
+    }
+    remove() {
+        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",
+            default_val: 0,
+            min_val: 0,
+            max_val: 1,
+            step_val: 0.1,
+        });
+        this.temperature_widget.spawn_in_parent(
+            this.widget.find(`#${this.temperature_widget_id}`)
+        );
+    }
+    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",
+            default_val: -1,
+            min_val: -1,
+            max_val: 32768,
+            step_val: 1,
+        });
+        this.max_output_tokens_widget.spawn_in_parent(
+            this.widget.find(`#${this.temperature_widget_id}`)
+        );
+    }
+    create_widget() {
+        this.widget_html = `
+        <div id="${this.widget_id}" data-bs-backdrop="static" class="modal" role="dialog">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title">Create New Agent</h4>
+                        <button class="btn" data-bs-dismiss="modal">
+                            <i class="fa fa-close"></i>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <!-- 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>
+                        </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>
+                        </div>
+                        <!-- temperature -->
+                        <div id="${this.temperature_widget_id}" class="row mb-0"">
+                        </div>
+                        <!-- max output tokens -->
+                        <div id="${this.max_output_tokens_widget_id}" class="row mb-2">
+                        </div>
+                        <!-- system prompt -->
+                        <div class="form-floating mb-2">
+                            <textarea id="${this.widget_id}-system-prompt" class="form-control" placeholder="System Prompt"
+                                rows="3"></textarea>
+                            <label for="${this.widget_id}-system-prompt">System Prompt</label>
+                        </div>
+                        <!-- max token -->
+                        <!-- max history messages token -->
+                    </div>
+                    <div class="modal-footer justify-content-end">
+                        <button id="new-agent-model-save-button" class="btn btn-success">Save</button>
+                        <button id="new-agent-model-close-button" class="btn btn-secondary"
+                            data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        `;
+        this.widget = $(this.widget_html);
+        this.create_temperature_widget();
+        this.create_max_output_tokens_widget();
+    }
+    append_to_body() {
+        $("body").append(this.widget);
+        document
+            .getElementById("new-agent-modal-system-prompt")
+            .addEventListener(
+                "input",
+                function () {
+                    this.style.height = 0;
+                    this.style.height = this.scrollHeight + 3 + "px";
+                },
+                false
+            );
+    }
+}

widgets/range_number_widget.js

@@ -0,0 +1,66 @@
+export class RangeNumberWidget {
+    constructor({
+        widget_id = null,
+        label_text = null,
+        default_val = null,
+        min_val = null,
+        max_val = null,
+        step_val = null,
+        range_col = 8,
+        number_col = 4,
+    } = {}) {
+        this.widget_id = widget_id;
+        this.label_text = label_text;
+        this.default_val = default_val;
+        this.min_val = min_val;
+        this.max_val = max_val;
+        this.step_val = step_val;
+        this.range_col = range_col;
+        this.number_col = number_col;
+    }
+    spawn_in_parent(parent) {
+        this.create_widget();
+        this.bind_update_functions();
+        this.append_to_parent(parent);
+    }
+    remove() {
+        this.widget.remove();
+    }
+    create_widget() {
+        this.widget_html = `
+        <label class="col-form-label">${this.label_text}</label>
+            <div class="col-sm-${this.range_col} d-flex align-items-center">
+                <input id="${this.widget_id}-range"
+                    type="range" value="${this.default_val}"
+                    min="${this.min_val}" max="${this.max_val}" step="${this.step_val}"
+                    class="form-range"
+                />
+            </div>
+            <div class="col-sm-${this.number_col}">
+                <input id="${this.widget_id}-number"
+                    type="number" value="${this.default_val}"
+                    min="${this.min_val}" max="${this.max_val}" step="${this.step_val}"
+                    class="form-control"
+            />
+        </div>`;
+        this.widget = $(this.widget_html);
+    }
+    update_number_widget_value(value) {
+        $(`#${this.widget_id}-number`).val(value);
+    }
+    update_range_widget_value(value) {
+        $(`#${this.widget_id}-range`).val(value);
+    }
+    bind_update_functions() {
+        let self = this;
+        this.widget.find(`#${this.widget_id}-range`).change(function () {
+            self.update_number_widget_value($(this).val());
+        });
+        this.widget.find(`#${this.widget_id}-number`).change(function () {
+            self.update_range_widget_value($(this).val());
+        });
+    }
+    append_to_parent(parent) {
+        parent.append(this.widget);
+    }
+}