Put keys in the more menu

Chat.go

@@ -444,7 +444,19 @@ func LoadSettingsHandler(c *fiber.Ctx) error {
 	if !checkIfLogin() {
 		return c.SendString("")
 	}
-	out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-settings.html")).Execute(pongo2.Context{"IsLogin": checkIfLogin()})
+
+	openaiExists, anthropicExists, mistralExists, groqExists, gooseaiExists, googleExists := getExistingKeys()
+
+	out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-settings.html")).Execute(pongo2.Context{
+		"IsLogin":         checkIfLogin(),
+		"OpenaiExists":    openaiExists,
+		"AnthropicExists": anthropicExists,
+		"MistralExists":   mistralExists,
+		"GroqExists":      groqExists,
+		"GooseaiExists":   gooseaiExists,
+		"GoogleExists":    googleExists,
+		"AnyExists":       openaiExists || anthropicExists || mistralExists || groqExists || gooseaiExists || googleExists,
+	})
 	if err != nil {
 		panic(err)
 	}

views/chat.html

@@ -8,7 +8,7 @@
                 id="chat-input-textarea"></textarea>
             <div class="button-group">
                 <hx hx-get="/loadSettings" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
-                <hx hx-get="/loadKeys" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
+                <!--hx hx-get="/loadKeys" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx-->
                 <hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                 <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                 <button {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%} class="button is-small"

views/partials/popover-models.html

@@ -32,18 +32,19 @@
     });
 
     document.addEventListener('keyup', function (event) {
-        if (event.key === 'Shift') {
+        // 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;
-        }
 
-        // Remove all "shiftselected" classes
+            // Remove all "shiftselected" classes
-        const elements = Array.from(document.getElementsByClassName('icon-text'));
+            const elements = Array.from(document.getElementsByClassName('icon-text'));
-        for (let i = 0; i < elements.length; i++) {
+            for (let i = 0; i < elements.length; i++) {
-            elements[i].classList.remove('shiftselected');
+                elements[i].classList.remove('shiftselected');
-        }
+            }
 
-        window.getSelection().removeAllRanges();
+            window.getSelection().removeAllRanges();
+        }
     });
 
     function toggleSelection(element) {

views/partials/popover-settings.html

@@ -1,17 +1,92 @@
 <div class="dropdown is-hoverable is-up is-right">
     <div class="dropdown-trigger">
-        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
+        <button class="button is-small {% if not AnyExists %} is-danger{% endif %}" aria-haspopup="true"
+            aria-controls="dropdown-menu4">
             <span class="icon"><i class="fa-solid fa-bars"></i></i></span>
         </button>
     </div>
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">
         <div class="dropdown-content">
             <div class="dropdown-item">
-                <a class="button is-small is-primary mb-1" href="https://artificialanalysis.ai/models" target="_blank">
+                <div class="field">
-                    Compare models
+                    <form id="api-keys-form" hx-post="/addKeys" hx-trigger="submit" hx-target="#api-keys-status">
-                </a>
+                        <div class="field has-addons">
-                <a class="button is-small is-primary mb-1" href="/signout">
+                            <p class="control has-icons-left is-expanded">
-                    Logout
+                                <input class="input is-small {% if OpenaiExists %}is-success{% endif %}" type="text"
+                                    {%if not IsLogin %}disabled{% endif %} placeholder="OpenAI API key"
+                                    name="openai_key" autocomplete="off">
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons">
+                            <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"
+                                    name="anthropic_key" autocomplete="off">
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons">
+                            <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"
+                                    name="mistral_key" autocomplete="off">
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons" title="Gemini is unavailable because of Europe">
+                            <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">
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons">
+                            <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 %}
+                                    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">
+                            <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"
+                                    autocomplete="off">
+                                <span class="icon is-small is-left">
+                                    <i class="fas fa-lock"></i>
+                                </span>
+                            </p>
+                        </div>
+                        <div class="field has-addons">
+                            <p class="control">
+                                <button {% if not IsLogin %}disabled{% endif %} type="submit" class="button is-small">
+                                    <span class="icon is-small">
+                                        <i class="fas fa-check"></i>
+                                    </span>
+                                    <span>Save keys</span>
+                                </button>
+                            </p>
+                        </div>
+                    </form>
+                    <p id="api-keys-status"></p>
+                </div>
+                <a class="button is-small mt-1" href="/signout">
+                    <span class="icon is-small">
+                        <i class="fa-solid fa-right-from-bracket"></i>
+                    </span>
+                    <span>Sign out</span>
                 </a>
             </div>
         </div>