Added Creation and delete of LLM

Chat.go

@@ -43,6 +43,8 @@ func DeleteMessageHandler(c *fiber.Ctx) error {
 }
 
 func LoadChatHandler(c *fiber.Ctx) error {
+	deleteLLMtoDelete()
+
 	if checkIfLogin() {
 		if getCurrentUserKeys() == nil {
 			return c.SendString(generateEnterKeyChatHTML())
@@ -134,6 +136,7 @@ func GetMessageContentHandler(c *fiber.Ctx) error {
 		SELECT Message {
 			content,
 			llm : {
+				name,
 				modelInfo : {
 					modelID,
 					name,
@@ -153,7 +156,7 @@ func GetMessageContentHandler(c *fiber.Ctx) error {
 
 	out := "<div class='message-header'>"
 	out += "<p>"
-	out += selectedMessage.LLM.Model.Name
+	out += "<strong>" + selectedMessage.LLM.Name + "</strong> <small>" + selectedMessage.LLM.Model.ModelID + "</small>"
 	out += "	</p>"
 	out += "</div>"
 	out += "<div class='message-body'>"
@@ -222,9 +225,11 @@ func generatePricingTableChatHTML() string {
 
 	closeBtn := `
 	<div class="is-flex is-justify-content-flex-end">
-	<a class="button is-primary is-small" hx-get="/loadChat" hx-target="#chat-container" hx-swap="outerHTML"
+	<a class="button is-small is-danger is-outlined" hx-get="/loadChat" hx-target="#chat-container" hx-swap="outerHTML"
 	hx-trigger="click">
-		Close
+	<span class="icon">
+	<i class="fa-solid fa-xmark"></i>
+</span>
 	</a>
 	</div>`
 
@@ -425,10 +430,7 @@ func LoadKeysHandler(c *fiber.Ctx) error {
 	return c.SendString(out)
 }
 
-func LoadModelSelectionHandler(c *fiber.Ctx) error {
+func GenerateModelPopoverHTML(refresh bool) string {
-	if !checkIfLogin() || !checkIfHaveKey() {
-		return c.SendString("")
-	}
 	openaiExists, anthropicExists, mistralExists, groqExists, gooseaiExists, googleExists := getExistingKeys()
 
 	var llms []LLM
@@ -447,7 +449,7 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 				}
 			}
 		}
-		FILTER .user = global currentUser AND .name != 'none'
+		FILTER .user = global currentUser AND .name != 'none' AND .to_delete = false
 	`, &llms)
 	if err != nil {
 		panic(err)
@@ -460,6 +462,8 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 	//	}
 	//}
 
+	modelInfos := GetAvailableModels()
+
 	out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-models.html")).Execute(pongo2.Context{
 		"IsLogin":         checkIfLogin(),
 		"OpenaiExists":    openaiExists,
@@ -470,12 +474,20 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 		"GoogleExists":    googleExists,
 		"AnyExists":       openaiExists || anthropicExists || mistralExists || groqExists || gooseaiExists || googleExists,
 		"LLMs":            llms,
+		"ModelInfos":      modelInfos,
+		"DeleteUpdate":    refresh,
 	})
 	if err != nil {
 		panic(err)
 	}
+	return out
+}
 
-	return c.SendString(out)
+func LoadModelSelectionHandler(c *fiber.Ctx) error {
+	if !checkIfLogin() || !checkIfHaveKey() {
+		return c.SendString("")
+	}
+	return c.SendString(GenerateModelPopoverHTML(false))
 }
 
 func LoadSettingsHandler(c *fiber.Ctx) error {

LLM.go

@@ -1,31 +1,77 @@
 package main
 
 import (
+	"encoding/json"
+
 	"github.com/edgedb/edgedb-go"
-	"github.com/flosch/pongo2"
 	"github.com/gofiber/fiber/v2"
 )
 
 // LLM stuff
 func deleteLLM(c *fiber.Ctx) error {
-	id := c.FormValue("id")
+	var selectedLLMIds []string
-	idUUID, _ := edgedb.ParseUUID(id)
+	err := json.Unmarshal([]byte(c.FormValue("selectedLLMIds")), &selectedLLMIds)
+	if err != nil {
+		// Handle the error
+		panic(err)
+	}
 
+	for _, id := range selectedLLMIds {
+		idUUID, _ := edgedb.ParseUUID(id)
+		err := edgeClient.Execute(edgeCtx, `
+			UPDATE LLM
+			FILTER .id = <uuid>$0 AND .user = global currentUser
+			SET {
+				to_delete := true
+			};
+		`, idUUID)
+		if err != nil {
+			panic(err)
+		}
+	}
+
+	deleteLLMtoDelete()
+
+	return c.SendString(GenerateModelPopoverHTML(true))
+}
+
+func deleteLLMtoDelete() {
 	err := edgeClient.Execute(edgeCtx, `
-		DELETE LLM
+	delete LLM
-		FILTER .id = <uuid>$0;
+	filter .to_delete = true and not exists(
-	`, idUUID)
+		select Message filter .llm = LLM
+	);
+	`)
+	if err != nil {
+		panic(err)
+	}
+}
+
+func createLLM(c *fiber.Ctx) error {
+	name := c.FormValue("model-name-input")
+	modelID := c.FormValue("selectedLLMId")
+	temperature := c.FormValue("temperature-slider")
+	systemPrompt := c.FormValue("model-prompt-input")
+
+	// Transform the temperature to a float
+	temperatureparsed, err := json.Marshal(temperature)
+	if err != nil {
+		panic(err)
+	}
+	temperatureFloat := float32(temperatureparsed[1])
+
+	err = edgeClient.Execute(edgeCtx, `
+		INSERT LLM {
+			name := <str>$0,
+			context := <str>$1,
+			temperature := <float32>$2,
+			modelInfo := (SELECT ModelInfo FILTER .modelID = <str>$3 LIMIT 1),
+			user := global currentUser
+		}
+	`, name, systemPrompt, temperatureFloat, modelID)
 	if err != nil {
 		panic(err)
 	}
 
-	return c.SendString("")
+	return c.SendString(GenerateModelPopoverHTML(true))
-}
-
-func openLlmModal(c *fiber.Ctx) error {
-	out, err := pongo2.Must(pongo2.FromFile("views/partials/modal-llm-setting.html")).Execute(pongo2.Context{})
-	if err != nil {
-		panic(err)
-	}
-	return c.SendString(out)
 }

Request.go

@@ -32,8 +32,6 @@ func GeneratePlaceholderHandler(c *fiber.Ctx) error {
 		panic(err)
 	}
 
-	fmt.Println("SelectedLLMIds:", selectedLLMIds)
-
 	var selectedLLMs []LLM
 	var selectedLLM LLM
 

dbschema/default.esdl

@@ -78,8 +78,15 @@ module default {
         required name: str;
         required context: str;
         required temperature: float32;
-        required modelInfo: ModelInfo;
+        required to_delete: bool {
-        required user: User;
+            default := false;
+        };
+        required modelInfo: ModelInfo {
+            on target delete allow;
+        };
+        required user: User {
+            on target delete allow;
+        };
     }
 
     type Company {

dbschema/migrations/00030-m1qq2mn.edgeql

@@ -0,0 +1,12 @@
+CREATE MIGRATION m1qq2mnk2l2bepeoatd2gxq2ygi73apnxwojog2g533h36e576rx6q
+    ONTO m1cokoqujl36nbvnldmofdwszcmsp6ulre23r5gx52d65aqnr64cca
+{
+  ALTER TYPE default::LLM {
+      ALTER LINK modelInfo {
+          ON TARGET DELETE ALLOW;
+      };
+      ALTER LINK user {
+          ON TARGET DELETE ALLOW;
+      };
+  };
+};

dbschema/migrations/00031-m1q5wil.edgeql

@@ -0,0 +1,9 @@
+CREATE MIGRATION m1q5wildsqhzj62drznyoi2bahpej6errkzhol7xs2qwootecjlcdq
+    ONTO m1qq2mnk2l2bepeoatd2gxq2ygi73apnxwojog2g533h36e576rx6q
+{
+  ALTER TYPE default::LLM {
+      CREATE REQUIRED PROPERTY to_delete: std::bool {
+          SET REQUIRED USING (<std::bool>{false});
+      };
+  };
+};

dbschema/migrations/00032-m1nonmd.edgeql

@@ -0,0 +1,9 @@
+CREATE MIGRATION m1nonmddagbu3p7dcqmy3bvxkwinjfosg7iuna5xxwruig4rcnr4yq
+    ONTO m1q5wildsqhzj62drznyoi2bahpej6errkzhol7xs2qwootecjlcdq
+{
+  ALTER TYPE default::LLM {
+      ALTER PROPERTY to_delete {
+          SET default := false;
+      };
+  };
+};

main.go

@@ -77,7 +77,6 @@ func main() {
 
 	// Settings routes
 	app.Post("/addKeys", addKeys)
-	app.Get("/modal", openLlmModal)
 
 	// Popovers
 	app.Get("/loadModelSelection", LoadModelSelectionHandler)
@@ -93,6 +92,7 @@ func main() {
 
 	// LLM
 	app.Get("deleteLLM", deleteLLM)
+	app.Post("/createLLM", createLLM)
 
 	app.Get("/test", func(c *fiber.Ctx) error {
 		fmt.Println("Hello from test")

utils.go

@@ -133,3 +133,22 @@ func Message2RequestMessage(messages []Message) []RequestMessage {
 	}
 	return m
 }
+
+func GetAvailableModels() []ModelInfo {
+	// TODO Filter if key is not available
+	var models []ModelInfo
+	err := edgeClient.Query(edgeCtx, `
+		SELECT ModelInfo {
+			modelID,
+			name,
+			company : {
+				name,
+				icon
+			}
+		} FILTER .modelID != 'none'
+	`, &models)
+	if err != nil {
+		panic(err)
+	}
+	return models
+}

views/chat.html

@@ -3,7 +3,7 @@
 
     <div class="chat-input-container mb-5">
         <div class="textarea-wrapper">
-            <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea"
+            <textarea {% if not IsLogin or not HaveKey %}disabled{% endif %} class="textarea has-fixed-size"
                 placeholder="Type your message here..." name="message" oninput="toggleSendButton()"
                 id="chat-input-textarea"></textarea>
             <div class="button-group">

views/partials/popover-models.html

@@ -1,4 +1,4 @@
-<div class="dropdown is-hoverable is-up is-right">
+<div class="dropdown is-hoverable is-up is-right" id="models-dropdown">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
             <span class="icon"><i class="fa-solid fa-robot"></i></span>
@@ -6,7 +6,7 @@
     </div>
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">
         <div class="dropdown-content is-small">
-            <div class="dropdown-item">
+            <div class="dropdown-item" id="models-list">
                 {% for LLM in LLMs %}
                 <!-- Added "has-text" as a default class -->
                 <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
@@ -17,122 +17,211 @@
                     <span>{{ LLM.Name }}</span>
                 </div>
                 {% endfor %}
-                <div class="is-flex is-justify-content-flex-end">
+                <div class="is-flex is-justify-content-space-between mt-3">
-                    <button class="button is-small is-primary is-outlined mr-2">
+                    <button class="button is-small is-danger is-outlined" hx-get="/deleteLLM" hx-swap="outerHTML"
+                        hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
+                        hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
                         <span class="icon">
-                            <i class="fa-solid fa-pen"></i>
+                            <i class="fa-solid fa-xmark"></i>
-                        </span>
-                    </button>
-                    <button class="button is-small is-success is-outlined">
-                        <span class="icon">
-                            <i class="fa-solid fa-plus"></i>
                         </span>
                     </button>
+                    <div>
+                        <button disabled class="button is-small is-primary mr-2 ml-5">
+                            <span class="icon">
+                                <i class="fa-solid fa-pen"></i>
+                            </span>
+                        </button>
+                        <button class="button is-small is-success is-outlined" id="create-model-button">
+                            <span class="icon">
+                                <i class="fa-solid fa-plus"></i>
+                            </span>
+                        </button>
+                    </div>
                 </div>
+
+            </div>
+            <div class="dropdown-item is-hidden" id="models-creation">
+                <form id="create-model-form" hx-post="/createLLM" hx-target="#models-dropdown" hx-swap="outerHTML">
+                    <input class="input is-small mb-3" type="text" id="model-name-input" name="model-name-input"
+                        placeholder="Model name">
+                    <div class="select is-fullwidth is-small mb-3" id="model-id-input">
+                        <select name="selectedLLMId">
+                            {% for modelInfo in ModelInfos %}
+                            <option value="{{ modelInfo.ModelID }}">{{ modelInfo.ModelID }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <p><small>Temperature:</small></p>
+                    <input class="slider is-small mb-3" step="0.05" min="0" max="1" value="0" type="range"
+                        id="temperature-slider" name="temperature-slider">
+                    <output id="temperature-slider-output">0</output>
+                    <p><small>System prompt:</small></p>
+                    <textarea class="textarea is-small mb-5 has-fixed-size" id="model-prompt-input"
+                        name="model-prompt-input"></textarea>
+                    <div class="is-flex is-justify-content-flex-end">
+                        <button class="button is-small is-danger is-outlined mr-2" id="cancel-create-model-button"
+                            type="button">
+                            <span class="icon">
+                                <i class="fa-solid fa-xmark"></i>
+                            </span>
+                        </button>
+                        <button class="button is-small is-success is-outlined" id="create-model-button" type="submit">
+                            <span class="icon">
+                                <i class="fa-solid fa-check"></i>
+                            </span>
+                        </button>
+                    </div>
+                </form>
             </div>
         </div>
     </div>
+</div>
 
-    <script>
+<script>
-        let lastSelectedIndex = null;
+    document.getElementById('temperature-slider').addEventListener('input', function () {
+        document.getElementById('temperature-slider-output').innerHTML = this.value;
+    })
 
-        document.addEventListener('keydown', function (event) {
+    document.getElementById('create-model-button').addEventListener('click', function () {
-            if (event.key === 'Shift') {
+        document.getElementById('models-list').classList.add('is-hidden');
-                document.body.classList.add('shift-pressed');
+        document.getElementById('models-creation').classList.remove('is-hidden');
-            }
+    });
-        });
 
-        document.addEventListener('keyup', function (event) {
+    document.getElementById('cancel-create-model-button').addEventListener('click', function () {
-            // If Shift is press and id="chat-input-textarea" not focused
+        document.getElementById('models-list').classList.remove('is-hidden');
-            if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
+        document.getElementById('models-creation').classList.add('is-hidden');
-                document.body.classList.remove('shift-pressed');
+    });
-                lastSelectedIndex = null;
 
-                // Remove all "shiftselected" classes
+    document.addEventListener('keydown', function (event) {
-                const elements = Array.from(document.getElementsByClassName('icon-text'));
+        if (event.key === 'Shift') {
-                for (let i = 0; i < elements.length; i++) {
+            document.body.classList.add('shift-pressed');
-                    elements[i].classList.remove('shiftselected');
+        }
-                }
+    });
 
-                window.getSelection().removeAllRanges();
+    document.addEventListener('keyup', function (event) {
-            }
+        // If Shift is press and id="chat-input-textarea" not focused
-        });
+        if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
+            document.body.classList.remove('shift-pressed');
+            lastSelectedIndex = null;
 
-        function toggleSelection(element) {
+            // Remove all "shiftselected" classes
             const elements = Array.from(document.getElementsByClassName('icon-text'));
-            const index = elements.indexOf(element);
+            for (let i = 0; i < elements.length; i++) {
-
+                elements[i].classList.remove('shiftselected');
-            if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
-                const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
-                let allSelected = true;
-                for (let i = start; i <= end; i++) {
-                    if (!elements[i].classList.contains('selected')) {
-                        allSelected = false;
-                        break;
-                    }
-                }
-                for (let i = start; i <= end; i++) {
-                    if (allSelected) {
-                        elements[i].classList.remove('selected');
-                        elements[i].classList.add('unselected');
-                    } else {
-                        elements[i].classList.add('selected');
-                        elements[i].classList.remove('unselected');
-                    }
-                }
-                lastSelectedIndex = null;
-
-                const elements2 = Array.from(document.getElementsByClassName('icon-text'));
-                for (let i = 0; i < elements2.length; i++) {
-                    elements2[i].classList.remove('shiftselected');
-                }
-            } else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
-                lastSelectedIndex = index;
-                element.classList.toggle('shiftselected');
-            } else {
-                element.classList.toggle('selected');
-                element.classList.toggle('unselected');
             }
-            toggleSendButton();
-        }
 
-        document.addEventListener('click', function (event) {
+            window.getSelection().removeAllRanges();
-            if (event.shiftKey) {
+        }
-                event.preventDefault();
+    });
+
+    document.addEventListener('click', function (event) {
+        if (event.shiftKey) {
+            event.preventDefault();
+        }
+    });
+</script>
+
+{% if not DeleteUpdate %}
+<script>
+    let lastSelectedIndex = null;
+
+    function toggleSelection(element) {
+        const elements = Array.from(document.getElementsByClassName('icon-text'));
+        const index = elements.indexOf(element);
+
+        if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
+            const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
+            let allSelected = true;
+            for (let i = start; i <= end; i++) {
+                if (!elements[i].classList.contains('selected')) {
+                    allSelected = false;
+                    break;
+                }
             }
-        });
+            for (let i = start; i <= end; i++) {
-
+                if (allSelected) {
-        function getSelectedModelsIDs() {
+                    elements[i].classList.remove('selected');
-            var selectedModelsIDs = [];
+                    elements[i].classList.add('unselected');
-            var selectedModels = document.getElementsByClassName('selected');
+                } else {
-            for (var i = 0; i < selectedModels.length; i++) {
+                    elements[i].classList.add('selected');
-                selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
+                    elements[i].classList.remove('unselected');
+                }
             }
-            return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
+            lastSelectedIndex = null;
-        }
-    </script>
 
-    <style>
+            const elements2 = Array.from(document.getElementsByClassName('icon-text'));
-        .selected {
+            for (let i = 0; i < elements2.length; i++) {
-            border: 2px solid #126d0f;
+                elements2[i].classList.remove('shiftselected');
-            border-radius: 4px;
+            }
-            padding: 1px;
+        } else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
-            margin: 2px;
+            lastSelectedIndex = index;
+            element.classList.toggle('shiftselected');
+        } else {
+            element.classList.toggle('selected');
+            element.classList.toggle('unselected');
         }
+        toggleSendButton();
+    }
 
-        .unselected {
+    function getSelectedModelsIDs() {
-            border-radius: 4px;
+        var selectedModelsIDs = [];
-            padding: 3px;
+        var selectedModels = document.getElementsByClassName('selected');
+        for (var i = 0; i < selectedModels.length; i++) {
+            selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
         }
+        return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
+    }
+</script>
 
-        .shiftselected {
+<style>
-            background: #126d0f;
+    .selected {
-            border-radius: 4px;
+        border: 2px solid #126d0f;
-            padding: 1px;
+        border-radius: 4px;
-            margin: 2px;
+        padding: 1px;
-        }
+        margin: 2px;
+    }
 
-        .shift-pressed *::selection {
+    .unselected {
-            background: transparent;
+        border-radius: 4px;
-        }
+        padding: 3px;
-    </style>
+    }
+
+    .shiftselected {
+        background: #126d0f;
+        border-radius: 4px;
+        padding: 1px;
+        margin: 2px;
+    }
+
+    .shift-pressed *::selection {
+        background: transparent;
+    }
+
+    input[type="range"].slider {
+        -webkit-appearance: none;
+        width: 80%;
+        background: transparent;
+        border: 1px solid #2c2c2c;
+        border-radius: 4px;
+        height: 6px;
+        border-radius: 2px;
+    }
+
+    input[type="range"].slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 12px;
+        height: 12px;
+        border-radius: 2px;
+        background: #126d0f;
+        cursor: pointer;
+    }
+
+    input[type="range"].slider::-moz-range-thumb {
+        width: 16px;
+        height: 16px;
+        border-radius: 2px;
+        background: #ffffff;
+        cursor: pointer;
+    }
+</style>
+{% endif %}

views/partials/popover-settings.html

@@ -10,7 +10,7 @@
             <div class="dropdown-item">
                 <div class="field">
                     <form id="api-keys-form" hx-post="/addKeys" hx-trigger="submit" hx-target="#api-keys-status">
-                        <div class="field has-addons">
+                        <div class="field has-addons is-hidden" id="openai-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if OpenaiExists %}is-success{% endif %}" type="text"
                                     {%if not IsLogin %}disabled{% endif %} placeholder="OpenAI API key"
@@ -20,7 +20,7 @@
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons">
+                        <div class="field has-addons is-hidden" id="anthropic-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if AnthropicExists %}is-success{% endif %}" type="text"
                                     {% if not IsLogin %}disabled{% endif %} placeholder="Anthropic API key"
@@ -30,7 +30,7 @@
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons">
+                        <div class="field has-addons is-hidden" id="mistral-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if MistralExists %}is-success{% endif %}" type="text"
                                     {%if not IsLogin %}disabled{% endif %} placeholder="Mistral API key"
@@ -40,7 +40,8 @@
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons" title="Gemini is unavailable because of Europe">
+                        <div class="field has-addons is-hidden" title="Gemini is unavailable because of Europe"
+                            id="gemini-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if GoogleExists %}is-success{% endif %}" type="text"
                                     disabled placeholder="Google API key" name="google_key" autocomplete="off">
@@ -49,17 +50,17 @@
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons">
+                        <div class="field has-addons is-hidden" id="goose-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if GooseaiExists %}is-success{% endif %}" type="text"
-                                    placeholder="Gooseai API key" {%if not IsLogin %}disabled{% endif %}
+                                    {%if not IsLogin %}disabled{% endif %} placeholder="Gooseai API key"
                                     name="goose_key" autocomplete="off">
                                 <span class="icon is-small is-left">
                                     <i class="fas fa-lock"></i>
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons">
+                        <div class="field has-addons is-hidden" id="groq-field">
                             <p class="control has-icons-left is-expanded">
                                 <input class="input is-small {% if GroqExists %}is-success{% endif %}" type="text"
                                     placeholder="Groq API key" {%if not IsLogin %}disabled{% endif %} name="groq_key"
@@ -69,15 +70,23 @@
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons">
+                        <div class="field has-addons" id="save-field">
                             <p class="control">
-                                <button {% if not IsLogin %}disabled{% endif %} type="submit" class="button is-small">
+                                <button disabled id="save-keys-button" type="submit" class="button is-small">
                                     <span class="icon is-small">
                                         <i class="fas fa-check"></i>
                                     </span>
                                     <span>Save keys</span>
                                 </button>
                             </p>
+                            <p class="control">
+                                <button id="toggle-keys-button" type="button"
+                                    class="button is-small {% if not AnyExists %}is-danger{% endif %}">
+                                    <span class="icon is-small">
+                                        <i class="fa-solid fa-chevron-down"></i>
+                                    </span>
+                                </button>
+                            </p>
                         </div>
                     </form>
                     <p id="api-keys-status"></p>
@@ -98,4 +107,22 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<script>
+    document.getElementById('toggle-keys-button').addEventListener('click', function () {
+        // Do not take the id="save-field"
+        var fields = document.querySelectorAll("#api-keys-form .field.has-addons");
+        var saveButton = document.getElementById('save-keys-button');
+        var toggleIcon = this.querySelector('i');
+
+        fields.forEach(function (field) {
+            if (field.id == "save-field") return;
+            field.classList.toggle('is-hidden');
+        });
+
+        saveButton.disabled = !saveButton.disabled;
+        toggleIcon.classList.toggle('fa-chevron-up');
+        toggleIcon.classList.toggle('fa-chevron-down');
+    });
+</script>