:gem: [Feature] Replace top select from available models to agents, and auto set default agent

components/buttons_binder.js

@@ -47,6 +47,8 @@ export class ButtonsBinder {
         clear_chat_agents_button_binder.bind();
         let available_models_select_binder = new AvailableModelsSelectBinder();
         available_models_select_binder.bind();
+        let agents_select_binder = new AgentsSelectBinder();
+        agents_select_binder.bind();
         let dark_theme_toggle_button_binder = new DarkThemeToggleButtonBinder();
         dark_theme_toggle_button_binder.bind();
     }
@@ -354,6 +356,17 @@ class AvailableModelsSelectBinder {
     }
 }
 
+class AgentsSelectBinder {
+    constructor() {}
+    bind() {
+        const select = $("#agents-select");
+        select.change(() => {
+            localStorage.setItem("default_agent", select.val());
+            console.log("set default_agent:", select.val());
+        });
+    }
+}
+
 class DarkThemeToggleButtonBinder {
     constructor() {
         this.storage_key = "theme";

configs/agents.json

@@ -1,6 +1,7 @@
 [
     {
         "name": "默认",
+        "index": "0",
         "description": "默认",
         "temperature": 0.5,
         "top_p": 0.9,

css/default.css

@@ -113,6 +113,11 @@ body {
 
 #available-models-select {
     max-width: calc(100vw - 200px);
+    display: none;
+}
+
+#agents-select {
+    max-width: calc(100vw - 200px);
 }
 
 #temperature-select {

index.html

@@ -98,8 +98,9 @@
                         <i class="fa fa-key"></i>
                     </button>
                 </div>
+                <select class="form-select" id="available-models-select" title="Available Models"></select>
                 <div class="col px-0">
-                    <select class="form-select" id="available-models-select" title="Available Models"></select>
+                    <select class="form-select" id="agents-select" title="Agents"></select>
                 </div>
                 <div class="col-auto">
                     <button id="scroll-to-bottom-button" class="btn px-0">

storages/agent_storage.js

@@ -8,7 +8,7 @@ class AgentStorage {
     constructor() {
         this.init_database();
         this.load_local_agents().then(() => {
-            this.create_agent_items();
+            this.fill_agents_select();
         });
     }
     init_database() {
@@ -40,7 +40,7 @@ class AgentStorage {
                 // - name, model, description, temperature, top_p, max_output_tokens, system_prompt, need_protect
                 data.forEach((agent) => {
                     this.db.agents.put({
-                        index: agent.name,
+                        index: agent.index || agent.name,
                         name: agent.name,
                         description: agent.description || "",
                         model: agent.model,
@@ -54,43 +54,39 @@ class AgentStorage {
             });
     }
 
-    generate_agent_item_html(agent) {
-        let agent_item_html = `
-        <div class="my-2 row no-gutters">
-            <button id="${agent.name}-agent-button" title="${agent.system_prompt}"  class="agent-button" type="button">
-            <i class="fa fa-arrow-circle-o-right"></i> ${agent.name}
-            </button>
-        </div>
-        `;
-        return agent_item_html;
-    }
-
-    create_agent_items() {
-        let chat_agents_sidebar_items = $("#chat-agents-sidebar-items");
-        chat_agents_sidebar_items.empty();
-        this.db.agents.each((agent) => {
-            let agent_item_html = this.generate_agent_item_html(agent);
-            chat_agents_sidebar_items.append(agent_item_html);
+    fill_agents_select() {
+        // fetch agents, and then fill agents_select
+        let agents_select = $("#agents-select");
+        agents_select.empty();
+        this.db.agents.toArray().then((agents) => {
+            let promises = agents.map((agent) => {
+                let option_name = agent.name;
+                let option_value = agent.name;
+                let option = new Option(option_name, option_value);
+                agents_select.append(option);
+            });
+            Promise.all(promises).then(() => {
+                this.set_default_agent();
+            });
         });
     }
-
     set_default_agent() {
         let storage_default_agent = localStorage.getItem("default_agent");
 
-        // let select = $("#agent-select");
+        let select = $("#agents-select");
         if (
-            storage_default_agent
-            // && select.find(`option[value="${storage_default_agent}"]`).length > 0
+            storage_default_agent &&
+            select.find(`option[value="${storage_default_agent}"]`).length > 0
         ) {
-            // select.val(storage_default_agent);
+            select.val(storage_default_agent);
             console.log(
                 "load default agent:",
                 localStorage.getItem("default_agent")
             );
         } else {
-            // let new_storage_default_agent = select.find("option:first").val();
-            // select.val(new_storage_default_agent);
-            // localStorage.setItem("default_agent", new_storage_default_agent);
+            let new_storage_default_agent = select.find("option:first").val();
+            select.val(new_storage_default_agent);
+            localStorage.setItem("default_agent", new_storage_default_agent);
             console.log(
                 "set new default agent:",
                 localStorage.getItem("default_agent")