:gem: [Feature] Display agent items, and enable clear-agents-button

components/buttons_binder.js

@@ -13,6 +13,7 @@ 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";
+import { agent_storage } from "../storages/agent_storage.js";
 
 export class ButtonsBinder {
     constructor() {}
@@ -42,6 +43,8 @@ export class ButtonsBinder {
         let clear_chat_history_button_binder =
             new ClearChatHistoryButtonBinder();
         clear_chat_history_button_binder.bind();
+        let clear_chat_agents_button_binder = new ClearChatAgentsButtonBinder();
+        clear_chat_agents_button_binder.bind();
         let available_models_select_binder = new AvailableModelsSelectBinder();
         available_models_select_binder.bind();
         let dark_theme_toggle_button_binder = new DarkThemeToggleButtonBinder();
@@ -332,7 +335,7 @@ class ClearChatAgentsButtonBinder {
         button.attr("title", "Clear agents");
         button.click(() => {
             if (confirm("Clear agents?")) {
-                // chat_history_storage.clear_database();
+                agent_storage.clear_database();
             } else {
                 console.log("Clear agents canceled.");
             }

configs/agents.json

@@ -1,11 +1,38 @@
 [
     {
-        "name": "Summarizer",
-        "description": "Summarizes text",
+        "name": "默认",
+        "description": "默认",
         "temperature": 0.5,
         "top_p": 0.9,
         "max_output_token": -1,
-        "system_prompt": "Summarize the following text:",
+        "system_prompt": "",
+        "need_protect": false
+    },
+    {
+        "name": "总结",
+        "description": "文本总结",
+        "temperature": 0.5,
+        "top_p": 0.9,
+        "max_output_token": -1,
+        "system_prompt": "总结下面的文本：",
+        "need_protect": false
+    },
+    {
+        "name": "翻译",
+        "description": "文本翻译",
+        "temperature": 0.5,
+        "top_p": 0.9,
+        "max_output_token": -1,
+        "system_prompt": "请翻译下面的文本：",
+        "need_protect": false
+    },
+    {
+        "name": "搜索",
+        "description": "网页搜索",
+        "temperature": 0.5,
+        "top_p": 0.9,
+        "max_output_token": -1,
+        "system_prompt": "请根据下列内容搜索网页：",
         "need_protect": false
     }
 ]

storages/agent_storage.js

@@ -1,13 +1,20 @@
+class AgentStorageItem {
+    constructor(agent_storage) {
+        this.agent_storage = agent_storage;
+    }
+}
+
 class AgentStorage {
     constructor() {
         this.init_database();
-        this.load_local_agents();
-        // this.create_agent_items();
+        this.load_local_agents().then(() => {
+            this.create_agent_items();
+        });
     }
     init_database() {
         this.db = new Dexie("agents");
         this.db.version(1).stores({
-            agents: "index, name, model, temperature, max_output_tokens, system_prompt, need_protect",
+            agents: "index, name, model, description, temperature, top_p, max_output_tokens, system_prompt, need_protect",
         });
         this.db.agents.count((count) => {
             console.log(`${count} agents loaded.`);
@@ -20,7 +27,7 @@ class AgentStorage {
         this.db.agents.clear();
     }
     async load_local_agents() {
-        fetch("/agents")
+        return fetch("/agents")
             .then((response) => response.json())
             .then((data) => {
                 if (data.error) {
@@ -47,11 +54,26 @@ class AgentStorage {
             });
     }
 
-    generate_agent_item_html() {
-        let agent_item_html = ``;
+    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);
+        });
+    }
+
     set_default_agent() {
         let storage_default_agent = localStorage.getItem("default_agent");
 

storages/endpoint_storage.js

@@ -3,9 +3,10 @@ import { AvailableModelsRequester } from "../networks/llm_requester.js";
 class EndpointStorage {
     constructor() {
         this.init_database();
-        this.load_local_endpoints();
-        this.create_endpoint_and_api_key_items();
-        this.fill_available_models_select();
+        this.load_local_endpoints().then(() => {
+            this.create_endpoint_and_api_key_items();
+            this.fill_available_models_select();
+        });
     }
     init_database() {
         this.db = new Dexie("endpoints");
@@ -24,7 +25,7 @@ class EndpointStorage {
         this.db.endpoints.clear();
     }
     async load_local_endpoints() {
-        fetch("/endpoints")
+        return fetch("/endpoints")
             .then((response) => response.json())
             .then((data) => {
                 if (data.error) {