:gem: [Feature] Render agent info at sidebar

index.html

@@ -65,7 +65,7 @@
                 <i class="fa fa-close"></i>
             </button>
             <h5 class="offcanvas-title" id="chat-agents-label">
-                <a style="text-decoration: none; color:inherit;" href="#">Agents</a>
+                <a style="text-decoration: none; color:inherit;"> Agent Info</a>
             </h5>
         </div>
         <div class="offcanvas-body">
@@ -74,8 +74,7 @@
                     <i class="fa fa-plus"></i> New Agent
                 </button>
             </div>
-            <ul id="chat-agents-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
-            </ul>
+            <div id="agent-info"></div>
         </div>
         <div class="my-2 row no-gutters justify-content-start">
             <div class="col">
@@ -95,11 +94,11 @@
                 </div>
                 <div class="col-auto">
                     <button id="toggle-endpoint-and-api-key-items-button" class="btn px-0">
-                        <i class="fa fa-key"></i>
+                        <i class="fa fa-fighter-jet"></i>
                     </button>
                 </div>
                 <select class="form-select" id="available-models-select" title="Available Models"></select>
-                <div class="col px-0">
+                <div class="col px-2">
                     <select class="form-select" id="agents-select" title="Agents"></select>
                 </div>
                 <div class="col-auto">
@@ -109,7 +108,7 @@
                 </div>
                 <div class="col-auto">
                     <button id="chat-agents-sidebar-toggle-button" class="btn px-0">
-                        <i class="fa fa-weixin"></i>
+                        <i class="fa fa-cog"></i>
                     </button>
                 </div>
             </div>

storages/agent_storage.js

@@ -1,3 +1,5 @@
+import { AgentInfoWidget } from "../widgets/agent_info_widget.js";
+
 class AgentStorageItem {
     constructor(agent_storage) {
         this.agent_storage = agent_storage;
@@ -67,6 +69,7 @@ class AgentStorage {
             });
             Promise.all(promises).then(() => {
                 this.set_default_agent();
+                this.set_agent_info();
             });
         });
     }
@@ -93,6 +96,19 @@ class AgentStorage {
             );
         }
     }
+    get_current_agent() {
+        let current_agent_name = $("#agents-select").val();
+        console.log("current_agent_name:", current_agent_name);
+        return this.db.agents.get(current_agent_name);
+    }
+    set_agent_info() {
+        this.get_current_agent().then((agent) => {
+            let agent_info_widget = new AgentInfoWidget({
+                agent: agent,
+            });
+            agent_info_widget.spawn();
+        });
+    }
 }
 
 export let agent_storage = new AgentStorage();

widgets/agent_info_widget.js

@@ -0,0 +1,52 @@
+import { RangeNumberWidget } from "./range_number_widget.js";
+import { AvailableModelsSelectWidget } from "./available_models_select_widget.js";
+
+export class AgentInfoWidget {
+    constructor({ agent } = {}) {
+        this.agent = agent;
+        this.widget_id = `agent-x-${this.agent.name}-x`;
+        this.name_widget_id = `${this.widget_id}-name`;
+        this.model_widget_id = `${this.widget_id}-model`;
+        this.description_widget_id = `${this.widget_id}-description`;
+        this.temperature_widget_id = `${this.widget_id}-temperature`;
+        this.top_p_widget_id = `${this.widget_id}-top-p`;
+        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();
+        this.append_to_agent_sidebar();
+    }
+    append_to_agent_sidebar() {
+        let agent_info = $("#agent-info");
+        agent_info.empty();
+        agent_info.append(this.widget);
+    }
+    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_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"/>
+                <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>
+        </div>
+        `;
+        this.widget = $(this.widget_html);
+        this.create_model_widget();
+    }
+}