Modal menu placeholder

Chat.go

@@ -403,9 +403,51 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 	if !checkIfLogin() {
 		return c.SendString("")
 	}
-	// openaiExists, anthropicExists, mistralExists, groqExists := getExistingKeys()
+	openaiExists, anthropicExists, mistralExists, groqExists, gooseaiExists, googleExists := getExistingKeys()
-	// TODO: Add model selection
+
-	return c.SendString("")
+	var llms []LLM
+	err := edgeClient.Query(context.Background(), `
+		SELECT LLM {
+			name,
+			context,
+			temperature,
+			modelInfo : {
+				modelID,
+				name
+			}
+		}
+		FILTER .user = global currentUser AND .name != 'none'
+	`, &llms)
+	if err != nil {
+		fmt.Println("Error in edgeClient.Query: in LoadModelSelectionHandler")
+		log.Fatal(err)
+	}
+
+	for i := 0; i < len(llms); i++ {
+		// If the modelID len is higher than 15, truncate it
+		if len(llms[i].Model.ModelID) > 12 {
+			llms[i].Model.ModelID = llms[i].Model.ModelID[0:12] + "..."
+		}
+	}
+
+	out, err := pongo2.Must(pongo2.FromFile("views/partials/popover-models.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,
+		"LLMs":            llms,
+	})
+	if err != nil {
+		c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Error rendering template",
+		})
+	}
+
+	return c.SendString(out)
 }
 
 func LoadSettingsHandler(c *fiber.Ctx) error {

LLM.go

@@ -0,0 +1,36 @@
+package main
+
+import (
+	"fmt"
+
+	"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")
+	idUUID, _ := edgedb.ParseUUID(id)
+
+	err := edgeClient.Execute(edgeCtx, `
+		DELETE LLM
+		FILTER .id = <uuid>$0;
+	`, idUUID)
+	if err != nil {
+		fmt.Println("Error in edgeClient.Execute: in deleteLLM")
+		fmt.Println(err)
+	}
+
+	return c.SendString("")
+}
+
+func openLlmModal(c *fiber.Ctx) error {
+	out, err := pongo2.Must(pongo2.FromFile("views/partials/modal-llm-setting.html")).Execute(pongo2.Context{})
+	if err != nil {
+		c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
+			"error": "Error rendering template",
+		})
+	}
+	return c.SendString(out)
+}

main.go

@@ -73,6 +73,7 @@ func main() {
 
 	// Settings routes
 	app.Post("/addKeys", addKeys)
+	app.Get("/modal", openLlmModal)
 
 	// Popovers
 	app.Get("/loadModelSelection", LoadModelSelectionHandler)
@@ -86,6 +87,9 @@ func main() {
 	app.Get("/callback", handleCallback)
 	app.Get("/callbackSignup", handleCallbackSignup)
 
+	// LLM
+	app.Get("deleteLLM", deleteLLM)
+
 	app.Get("/test", func(c *fiber.Ctx) error {
 		fmt.Println("Hello from test")
 		return c.SendString("")

static/style.css

@@ -187,3 +187,111 @@ svg text {
 .message-bot:hover .message-button {
     opacity: 1;
 }
+
+/***** MODAL DIALOG ****/
+#modal {
+    /* Underlay covers entire screen. */
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+
+    /* Flexbox centers the .modal-content vertically and horizontally */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /* Animate when opening */
+    animation-name: fadeIn;
+    animation-duration: 150ms;
+    animation-timing-function: ease;
+}
+
+#modal>.modal-underlay {
+    /* underlay takes up the entire viewport. This is only
+	required if you want to click to dismiss the popup */
+    position: absolute;
+    z-index: -1;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+#modal>.modal-content {
+    /* Position visible dialog near the top of the window */
+    margin-top: 10vh;
+
+    /* Sizing for visible dialog */
+    width: 80%;
+    max-width: 600px;
+
+    /* Display properties for visible dialog*/
+    border: solid 1px #999;
+    border-radius: 8px;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    background-color: white;
+    padding: 20px;
+
+    /* Animate when opening */
+    animation-name: zoomIn;
+    animation-duration: 150ms;
+    animation-timing-function: ease;
+}
+
+#modal.closing {
+    /* Animate when closing */
+    animation-name: fadeOut;
+    animation-duration: 150ms;
+    animation-timing-function: ease;
+}
+
+#modal.closing>.modal-content {
+    /* Animate when closing */
+    animation-name: zoomOut;
+    animation-duration: 150ms;
+    animation-timing-function: ease;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes zoomIn {
+    0% {
+        transform: scale(0.9);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes zoomOut {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.9);
+    }
+}

views/chat.html

@@ -10,7 +10,7 @@
                 <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="/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-->
+                <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"
                     onclick="clearTextArea()" id="clear-button" hx-post="/clearChat" hx-swap="outerHTML"
                     hx-target="#chat-container" title="Clear chat">

views/partials/modal-llm-setting.html

@@ -0,0 +1,11 @@
+<div id="modal">
+    <div class="modal-underlay" hx-get="/empty" hx-target="#modal" hx-swap="outerHTML"></div>
+    <div class="modal-content">
+        <h1>Modal Dialog</h1>
+        This is the modal content.
+        You can put anything here, like text, or a form, or an image.
+        <br>
+        <br>
+        <button hx-get="/empty" hx-target="#modal" hx-swap="outerHTML">Close</button>
+    </div>
+</div>

views/partials/popover-keys.html

@@ -40,7 +40,7 @@
                                 </span>
                             </p>
                         </div>
-                        <div class="field has-addons" title="Gemini is inailable because im in Europe">
+                        <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">

views/partials/popover-models.html

@@ -5,24 +5,42 @@
         </button>
     </div>
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">
-        <div class="dropdown-content">
+        <div class="dropdown-content is-small">
             <div class="dropdown-item">
-                {% for CompanyInfo in CompanyInfos %}
+                <table class="table is-hoverable is-fullwidth is-narrow is-small">
-                <div class="content">
+                    <thead>
-                    <div class="block">
+                        <tr>
-                        {% for ModelInfo in CompanyInfo.ModelInfos %}
+                            <th class="is-size-7" style="width: 30%;">Name</th>
-                        <div class="field">
+                            <th class="is-size-7" style="width: 30%;">Model</th>
-                            <label class="custom-checkbox">
+                            <th class="is-size-7" style="width: 10%;"></th>
-                                <input {%if ModelInfo.ID in CheckedModels %}checked{% endif %} type="checkbox"
+                            <th class="is-size-7" style="width: 10%;"></th>
-                                    name="model-check-{{ ModelInfo.ID }}" value="{{ ModelInfo.ID }}" />
+                        </tr>
-                                <span class="checkmark"></span>
+                    </thead>
-                                {{ ModelInfo.Name }}
+                    <tbody>
-                            </label>
+                        {% for LLM in LLMs %}
-                        </div>
+                        <tr>
-                        {% endfor %}
+                            <td class="is-size-6">{{ LLM.Name }}</td>
-                    </div>
+                            <td class="is-size-7">{{ LLM.Model.ModelID }}</td>
-                </div>
+                            <td class="is-size-6">
+                                <button hx-get="/modal" hx-target="body" hx-swap="beforeend"
+                                    class="button is-primary is-small is-inline-block is-outlined">
+                                    <span class="icon">
+                                        <i class="fa-solid fa-gear"></i>
+                                    </span>
+                                </button>
+                            </td>
+                            <td class="is-size-6">
+                                <button class="button is-danger is-small is-inline-block  is-outlined"
+                                    style="min-width: auto;">
+                                    <span class="icon">
+                                        <i class="fa-solid fa-xmark"></i>
+                                    </span>
+                                </button>
+                            </td>
+                        </tr>
                         {% endfor %}
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>