:gem: [Feature] New Chat Agents Sidebar

components/buttons_binder.js

@@ -32,6 +32,9 @@ export class ButtonsBinder {
         let chat_history_sidebar_toggle_button_binder =
             new ChatHistorySidebarToggleButtonBinder();
         chat_history_sidebar_toggle_button_binder.bind();
+        let chat_agents_sidebar_toggle_button_binder =
+            new ChatAgentsSidebarToggleButtonBinder();
+        chat_agents_sidebar_toggle_button_binder.bind();
         let clear_chat_history_button_binder =
             new ClearChatHistoryButtonBinder();
         clear_chat_history_button_binder.bind();
@@ -201,43 +204,46 @@ class ScreenshotButtonBinder {
 }
 
 class ChatHistorySidebarToggleButtonBinder {
-    constructor() {}
-    get_show_sidebar_storage() {
-        return localStorage.getItem("show_chat_history_sidebar");
+    constructor() {
+        this.storage_key = "show_chat_history_sidebar";
+        this.sidebar_name = "chat-history";
+    }
+    get_show_history_sidebar_storage() {
+        return localStorage.getItem(this.storage_key);
     }
     bind() {
-        const sidebar = $("#chat-history-sidebar");
-
+        const sidebar = $(`#${this.sidebar_name}-sidebar`);
         // this line is not to check value as false,
         // but to check item not existed in localStorage
-        if (!this.get_show_sidebar_storage()) {
-            localStorage.setItem("show_chat_history_sidebar", "true");
+        if (!this.get_show_history_sidebar_storage()) {
+            localStorage.setItem(this.storage_key, "true");
         }
-        if (this.get_show_sidebar_storage() === "true") {
+        if (this.get_show_history_sidebar_storage() === "true") {
             sidebar.addClass("show");
         }
 
-        const toggle_button = $("#chat-history-sidebar-toggle-button");
+        const toggle_button = $(`#${this.sidebar_name}-sidebar-toggle-button`);
         toggle_button.click(() => {
             sidebar.toggleClass("show");
             localStorage.setItem(
-                "show_chat_history_sidebar",
+                this.storage_key,
                 sidebar.hasClass("show").toString()
             );
         });
-
-        const close_button = $("#chat-history-sidebar-close-button");
+        const close_button = $(`#${this.sidebar_name}-sidebar-close-button`);
         close_button.click(() => {
             sidebar.removeClass("show");
-            localStorage.setItem("show_chat_history_sidebar", "false");
+            localStorage.setItem(this.storage_key, "false");
         });
     }
 }
 
 class ClearChatHistoryButtonBinder {
-    constructor() {}
+    constructor() {
+        this.sidebar_name = "chat-history";
+    }
     bind() {
-        const button = $("#clear-chat-history-button");
+        const button = $(`#clear-${this.sidebar_name}-button`);
         button.attr("title", "Clear chat history");
         button.click(() => {
             if (confirm("Clear chat history?")) {
@@ -249,6 +255,59 @@ class ClearChatHistoryButtonBinder {
     }
 }
 
+class ChatAgentsSidebarToggleButtonBinder {
+    constructor() {
+        this.storage_key = "show_chat_agents_sidebar";
+        this.sidebar_name = "chat-agents";
+    }
+    get_show_sidebar_storage() {
+        return localStorage.getItem(this.storage_key);
+    }
+    bind() {
+        const sidebar = $(`#${this.sidebar_name}-sidebar`);
+        // this line is not to check value as false,
+        // but to check item not existed in localStorage
+        if (!this.get_show_sidebar_storage()) {
+            localStorage.setItem(this.storage_key, "true");
+        }
+        if (this.get_show_sidebar_storage() === "true") {
+            sidebar.addClass("show");
+        }
+
+        const toggle_button = $(`#${this.sidebar_name}-sidebar-toggle-button`);
+        toggle_button.click(() => {
+            sidebar.toggleClass("show");
+            localStorage.setItem(
+                this.storage_key,
+                sidebar.hasClass("show").toString()
+            );
+        });
+
+        const close_button = $(`#${this.sidebar_name}-sidebar-close-button`);
+        close_button.click(() => {
+            sidebar.removeClass("show");
+            localStorage.setItem(this.storage_key, "false");
+        });
+    }
+}
+
+class ClearChatAgentsButtonBinder {
+    constructor() {
+        this.sidebar_name = "chat-agents";
+    }
+    bind() {
+        const button = $(`#clear-${this.sidebar_name}-button`);
+        button.attr("title", "Clear agents");
+        button.click(() => {
+            if (confirm("Clear agents?")) {
+                // chat_history_storer.clear_database();
+            } else {
+                console.log("Clear agents canceled.");
+            }
+        });
+    }
+}
+
 class AvailableModelsSelectBinder {
     constructor() {}
     bind() {

components/inputs_binder.js

@@ -69,18 +69,18 @@ class ChatHistorySidebarResizeBinder {
             this.SIDEBAR_GAP
         );
     }
-    need_to_show() {
-        let sidebar = $("#chat-history-sidebar");
+    need_to_show(sidebar_name = null) {
+        let sidebar = $(`#chat-${sidebar_name}-sidebar`);
         return (
             !sidebar.hasClass("show") &&
-            localStorage.getItem("show_chat_history_sidebar") === "true"
+            localStorage.getItem(`show_chat_${sidebar_name}_sidebar`) === "true"
         );
     }
-    resize() {
-        let sidebar = $("#chat-history-sidebar");
+    resize_sidebar(sidebar_name = null) {
+        let sidebar = $(`#chat-${sidebar_name}-sidebar`);
         let is_sidebar_show = sidebar[0].classList.contains("show");
         if (this.get_side_margin() >= this.SIDEBAR_MAX_WIDTH) {
-            if (this.need_to_show()) {
+            if (this.need_to_show(sidebar_name)) {
                 sidebar.addClass("show");
             }
             sidebar.css("max-width", this.SIDEBAR_MAX_WIDTH + "px");
@@ -92,11 +92,16 @@ class ChatHistorySidebarResizeBinder {
             sidebar.css("max-width", this.SIDEBAR_MAX_WIDTH + "px");
             sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
         } else {
-            if (this.need_to_show()) {
+            if (this.need_to_show(sidebar_name)) {
                 sidebar.addClass("show");
             }
             sidebar.css("max-width", this.get_side_margin());
             sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
         }
     }
+    resize() {
+        for (let sidebar_name of ["history", "agents"]) {
+            this.resize_sidebar(sidebar_name);
+        }
+    }
 }

css/default.css

@@ -48,10 +48,10 @@ body {
 
 .message-user,
 .message-assistant {
-    box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
+    box-shadow: 0px 0px 6px 0px rgba(122, 122, 122, 0.5);
     border-radius: 5px;
     padding: 5px 0px 5px 0px;
-    margin: 0px 0px 12px 0px;
+    margin: 0px 0px 8px 0px;
 }
 
 .message-user {
@@ -75,6 +75,7 @@ body {
     background-color: #fff5e5;
 }
 
+#chat-agents-sidebar,
 #chat-history-sidebar {
     box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
     /* background-image: linear-gradient(-45deg, #eef3ff, #e9efff); */

index.html

@@ -23,8 +23,9 @@
 </head>
 
 <body>
-        <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
-            id="chat-history-sidebar" aria-labelledby="chat-history-sidebar-label">
+
+    <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" id="chat-history-sidebar"
+        aria-labelledby="chat-history-sidebar-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="chat-history-label">
                     <a style="text-decoration: none; color:inherit;" href="#">Chat History</a>
@@ -49,6 +50,28 @@
                 </div>
             </div>
         </div>
+    <div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" id="chat-agents-sidebar"
+        aria-labelledby="chat-agents-sidebar-label">
+        <div class="offcanvas-header">
+            <button id="chat-agents-sidebar-close-button" class="btn-close">
+            </button>
+            <h5 class="offcanvas-title" id="chat-agents-label">
+                <a style="text-decoration: none; color:inherit;" href="#">Agents</a>
+            </h5>
+        </div>
+        <div class="offcanvas-body">
+            <ul id="chat-agents-sidebar-items" class="navbar-nav justify-content-end flex-grow-1">
+            </ul>
+        </div>
+        <div class="my-2 row no-gutters justify-content-start">
+            <div class="col">
+                <button id="clear-chat-agents-button" class="btn">
+                    <i class="fa fa-trash"></i>
+                </button>
+            </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">
@@ -71,7 +94,7 @@
                     </button>
                 </div>
                 <div class="col-auto">
-                    <button id="toggle-agents-sidebar-button" class="btn px-0">
+                    <button id="chat-agents-sidebar-toggle-button" class="btn px-0">
                         <i class="fa fa-user"></i>
                     </button>
                 </div>