:zap: [Enhance] Use button to toggle endpoint and api key, and prettify available model display

apps/llm_mixer/index.html

@@ -30,28 +30,61 @@
                 <div id="messagers-container" class="container mt-3"></div>
             </div>
             <div id="user-interactions" class="container fixed-bottom mb-3">
+                <div class="row mt-2 no-gutters">
+                    <div class="col px-0">
+                            <input
+                                id="openai-endpoint"
+                                class="form-control"
+                                rows="1"
+                                placeholder="Endpoint"
+                            ></input>
+                    </div>
+                    <div class="col-auto px-0">
+                        <button id="openai-endpoint-button" class="btn">
+                            <i class="fa fa-check"></i>
+                        </button>
+                    </div>
+                    <div class="col px-0">
+                        <input
+                            id="openai-api-key"
+                            class="form-control"
+                            rows="1"
+                            placeholder="API Key"
+                        ></input>
+                    </div>
+                    <div class="col-auto px-0">
+                        <button id="openai-api-key-button" class="btn">
+                            <i class="fa fa-check"></i>
+                        </button>
+                    </div>
+                </div>
                 <div class="mt-2 row no-gutters">
                     <div class="col-auto">
+                        <button id="show-endpoint-and-key-button" class="btn px-0">
+                            <i class="fa fa-key"></i>
+                        </button>
+                    </div>
+                    <div class="col-auto px-0">
                         <select
                             class="form-select"
                             id="available-models-select"
                             title="Available Models"
                         ></select>
                     </div>
-                    <div class="col-auto px-0">
+                    <div class="col-auto">
                         <select
                             class="form-select"
                             id="temperature-select"
                             title="Temperature"
                         ></select>
                     </div>
-                    <div class="col-4">
+                    <!-- <div class="col pr-0">
                         <select
                             class="form-select"
                             id="chat-history-select"
                             title="Chat History"
                         ></select>
-                    </div>
+                    </div> -->
                 </div>
                 <div class="mt-2 row no-gutters">
                     <div class="col-auto pl-3 pr-0">
@@ -73,42 +106,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="row mt-2 no-gutters">
-                    <div class="col-auto pl-3 pr-0">
-                        <button id="prev-user-input" class="btn btn-dark">
-                            <span class="fa fa-arrow-left"></span>
-                        </button>
-                        <button id="next-user-input" class="btn btn-dark">
-                            <span class="fa fa-arrow-right"></span>
-                        </button>
-                    </div>
-                    <div class="col px-0">
-                            <input
-                                id="openai-endpoint"
-                                class="form-control"
-                                rows="1"
-                                placeholder="Endpoint"
-                            ></input>
-                    </div>
-                    <div class="col-auto px-0">
-                        <button id="openai-endpoint-button" class="btn">
-                            <i class="fa fa-check"></i>
-                        </button>
-                    </div>
-                    <div class="col px-0">
-                        <input
-                            id="openai-api-key"
-                            class="form-control"
-                            rows="1"
-                            placeholder="API Key"
-                        ></input>
-                    </div>
-                    <div class="col-auto px-0">
-                        <button id="openai-api-key-button" class="btn">
-                            <i class="fa fa-check"></i>
-                        </button>
-                    </div>
-                </div>
+
             </div>
         </div>
     </body>

apps/llm_mixer/js/buttons_binder.js

@@ -16,6 +16,8 @@ export function bind_chat_buttons() {
     openai_endpoint_binder.bind();
     let openai_api_key_binder = new OpenaiAPIKeyButtonBinder();
     openai_api_key_binder.bind();
+    let show_endpoint_and_key_binder = new ShowEndpointAndKeyButtonBinder();
+    show_endpoint_and_key_binder.bind();
 }
 
 class SendUserInputButtonBinder {
@@ -103,7 +105,7 @@ class OpenaiEndpointButtonBinder {
     constructor() {}
     bind() {
         const button = $("#openai-endpoint-button");
-        button.attr("title", "Submit OpenAI Endpoint");
+        button.attr("title", "Submit Endpoint");
         const stored_openai_endpoint = localStorage.getItem("openai_endpoint");
         if (stored_openai_endpoint) {
             $("#openai-endpoint").val(stored_openai_endpoint);
@@ -123,7 +125,7 @@ class OpenaiAPIKeyButtonBinder {
     constructor() {}
     bind() {
         const button = $("#openai-api-key-button");
-        button.attr("title", "Submit OpenAI API Key");
+        button.attr("title", "Submit API Key");
         const stored_openai_api_key = localStorage.getItem("openai_api_key");
         if (stored_openai_api_key) {
             $("#openai-api-key").val(stored_openai_api_key);
@@ -135,3 +137,28 @@ class OpenaiAPIKeyButtonBinder {
         });
     }
 }
+
+class ShowEndpointAndKeyButtonBinder {
+    constructor() {}
+    bind() {
+        const button = $("#show-endpoint-and-key-button");
+        button.attr("title", "Show endpoint and api key");
+
+        if (localStorage.getItem("openai_endpoint")) {
+            $("#openai-endpoint").parent().hide();
+            $("#openai-endpoint-button").parent().hide();
+        }
+
+        if (localStorage.getItem("openai_api_key")) {
+            $("#openai-api-key").parent().hide();
+            $("#openai-api-key-button").parent().hide();
+        }
+
+        button.click(() => {
+            $("#openai-endpoint").parent().toggle();
+            $("#openai-endpoint-button").parent().toggle();
+            $("#openai-api-key").parent().toggle();
+            $("#openai-api-key-button").parent().toggle();
+        });
+    }
+}

apps/llm_mixer/js/default.css

@@ -35,7 +35,11 @@
 }
 
 #available-models-select {
-    max-width: 250px;
+    max-width: calc(100vw - 200px);
+}
+
+#temperature-select {
+    max-width: 70px;
 }
 
 .fa-spin-fast {