:zap: [Enhance] Confirm before clear chat history, toggle if add new point, and change icons

components/buttons_binder.js

@@ -144,6 +144,9 @@ class AddEndpointAndApiKeyItemButtonBinder {
         const button = $("#add-endpoint-and-api-key-item-button");
         button.attr("title", "Add endpoint and api key item");
         button.click(() => {
+            if (!$("#endpoint-and-api-key-items").is(":visible")) {
+                $("#endpoint-and-api-key-items").toggle();
+            }
             endpoint_storage.add_endpoint_and_api_key_item();
         });
     }
@@ -236,7 +239,11 @@ class ClearChatHistoryButtonBinder {
         const button = $("#clear-chat-history-button");
         button.attr("title", "Clear chat history");
         button.click(() => {
-            chat_history_storer.clear_database();
+            if (confirm("Clear chat history?")) {
+                chat_history_storer.clear_database();
+            } else {
+                console.log("Clear chat history canceled.");
+            }
         });
     }
 }

index.html

@@ -51,13 +51,13 @@
             </div>
             <div class="mt-2 row no-gutters">
                 <div class="col-auto">
-                    <button id="toggle-endpoint-and-api-key-items-button" class="btn px-0">
-                        <i class="fa fa-key"></i>
+                    <button id="add-endpoint-and-api-key-item-button" class="btn px-0 ">
+                        <i class="fa fa-circle-plus"></i>
                     </button>
                 </div>
                 <div class="col-auto">
-                    <button id="add-endpoint-and-api-key-item-button" class="btn px-0 ">
-                        <i class="fa fa-circle-plus"></i>
+                    <button id="toggle-endpoint-and-api-key-items-button" class="btn px-0">
+                        <i class="fa fa-key"></i>
                     </button>
                 </div>
                 <div class="col px-0">
@@ -85,7 +85,7 @@
             <div class="mt-2 row no-gutters">
                 <div class="col-auto pr-0">
                     <button id="new-chat-session" class="btn px-0">
-                        <i class="fa fa-circle-plus"></i>
+                        <i class="fa fa-compass"></i>
                     </button>
                 </div>
                 <div class="col px-0">
@@ -98,7 +98,6 @@
                     </button>
                 </div>
             </div>
-
         </div>
     </div>
 </body>