:gem: [Feature] More widgets of agent info sidebar

css/default.css

@@ -15,6 +15,11 @@
     }
 }
 
+.form-control {
+    margin: 0;
+    padding: 5px 5px 5px 5px;
+}
+
 body {
     /* background-image: linear-gradient(90deg, #eef3ff, #ecf1ff); */
     background-color: #ecf1ff;

widgets/agent_info_widget.js

@@ -21,10 +21,27 @@ export class AgentInfoWidget {
         let agent_info = $("#agent-info");
         agent_info.empty();
         agent_info.append(this.widget);
+        document
+            .getElementById(`${this.system_prompt_widget_id}`)
+            .addEventListener(
+                "input",
+                function () {
+                    this.style.height = 0;
+                    this.style.height = this.scrollHeight + 3 + "px";
+                },
+                false
+            );
+        $(`#${this.system_prompt_widget_id}`)
+            .css("resize", "none")
+            .css("max-height", "200px");
+        $(`#${this.description_widget_id}`).css("resize", "none");
     }
     remove() {
         this.widget.remove();
     }
+    create_name_widget() {
+        this.widget.find(`#${this.name_widget_id}`).val(this.agent.name);
+    }
     create_model_widget() {
         this.model_widget = new AvailableModelsSelectWidget({
             widget_id: this.model_widget_id,
@@ -32,21 +49,104 @@ export class AgentInfoWidget {
         let model_widget_parent = this.widget.find(`#${this.model_widget_id}`);
         this.model_widget.spawn_in_parent(model_widget_parent, "prepend");
     }
+    create_system_prompt_widget() {
+        this.widget
+            .find(`#${this.system_prompt_widget_id}`)
+            .val(this.agent.system_prompt);
+    }
+    create_description_widget() {
+        this.widget
+            .find(`#${this.description_widget_id}`)
+            .val(this.agent.description);
+    }
+    create_temperature_widget() {
+        this.temperature_widget = new RangeNumberWidget({
+            widget_id: this.temperature_widget_id,
+            label_text: "Temperature",
+            default_val: this.agent.temperature || 0.5,
+            min_val: 0,
+            max_val: 1,
+            step_val: 0.1,
+        });
+        let temperature_widget_parent = this.widget.find(
+            `#${this.temperature_widget_id}`
+        );
+        this.temperature_widget.spawn_in_parent(temperature_widget_parent);
+    }
+    create_top_p_widget() {
+        this.top_p_widget = new RangeNumberWidget({
+            widget_id: this.top_p_widget_id,
+            label_text: "Top P",
+            default_val: this.agent.top_p || 0.9,
+            min_val: 0.0,
+            max_val: 1.0,
+            step_val: 0.01,
+        });
+        let top_p_widget_parent = this.widget.find(`#${this.top_p_widget_id}`);
+        this.top_p_widget.spawn_in_parent(top_p_widget_parent);
+    }
+    create_max_output_tokens_widget() {
+        this.max_output_tokens_widget = new RangeNumberWidget({
+            widget_id: this.max_output_tokens_widget_id,
+            label_text: "Max Output Tokens <code>(-1: auto)</code>",
+            default_val: -1,
+            min_val: -1,
+            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(
+            max_output_tokens_widget_parent
+        );
+    }
     create_widget() {
         this.widget_html = `
         <div id="${this.widget_id}">
             <!-- name -->
             <div class="form-floating mb-2">
-                <input id="${this.name_widget_id} " class="form-control" type="text"/>
+                <input id="${this.name_widget_id}" class="form-control" type="text"/>
                 <label class="form-label">Name</label>
             </div>
             <!-- model -->
             <div id="${this.model_widget_id}" class="form-floating mb-2">
                 <label class="form-label">Model</label>
             </div>
+            <!-- system prompt -->
+            <div class="form-floating mb-2">
+                <textarea id="${this.system_prompt_widget_id}" class="form-control" rows="3"></textarea>
+                <label>System Prompt</label>
+            </div>
+            <a class="btn mx-0 px-0" data-bs-toggle="collapse" href="#agent-info-advanced-settings">
+                <b>Advanced Settings</b> <i class="fa fa-chevron-down"></i>
+            </a>
+            <div class="collapse show" id="agent-info-advanced-settings">
+                <!-- description -->
+                <div class="form-floating my-2">
+                    <textarea id="${this.description_widget_id}" class="form-control" rows="1"></textarea>
+                    <label>Description</label>
+                </div>
+                <!-- temperature -->
+                <div id="${this.temperature_widget_id}" class="row mb-0"">
+                </div>
+                <!-- top_p -->
+                <div id="${this.top_p_widget_id}" class="row mb-0"">
+                </div>
+                <!-- max output tokens -->
+                <div id="${this.max_output_tokens_widget_id}" class="row mb-2">
+                </div>
+                <!-- max history messages token -->
+            </div>
         </div>
         `;
         this.widget = $(this.widget_html);
+        this.create_name_widget();
         this.create_model_widget();
+        this.create_system_prompt_widget();
+        this.create_description_widget();
+        this.create_temperature_widget();
+        this.create_top_p_widget();
+        this.create_max_output_tokens_widget();
     }
 }