Working swaping llm icons

.dockerignore

@@ -0,0 +1 @@
+data/

Chat.go

@@ -3,7 +3,6 @@ package main
 import (
 	"context"
 	"encoding/json"
-	"fmt"
 	"net/url"
 	"sort"
 	"strings"
@@ -560,6 +559,7 @@ func GenerateModelPopoverHTML(refresh bool) string {
 			}
 		}
 		FILTER .user = global currentUser AND .name != 'none' AND .to_delete = false 
+		ORDER BY .position
 	`, &llms)
 	if err != nil {
 		panic(err)
@@ -614,7 +614,6 @@ func LoadSettingsHandler(c *fiber.Ctx) error {
 	user.Email = url.QueryEscape(user.Email)
 
 	stripeSubLink := "https://billing.stripe.com/p/login/test_eVa5kC1q7dogaaIcMM?prefilled_email=" + user.Email
-	fmt.Println(stripeSubLink)
 
 	openaiExists, anthropicExists, mistralExists, groqExists, gooseaiExists, googleExists := getExistingKeys()
 

LLM.go

@@ -62,10 +62,13 @@ func createLLM(c *fiber.Ctx) error {
 
 	if modelID == "custom" {
 		err := edgeClient.Execute(edgeCtx, `
+		WITH
+			countLLM := count((SELECT LLM FILTER .user = global currentUser))
 		INSERT LLM {
 			name := <str>$0,
 			context := <str>$1,
 			temperature := <float32>$2,
+			position := countLLM + 1,
 			modelInfo := (INSERT ModelInfo {
 				name := <str>$0,
 				modelID := <str>$5,
@@ -86,10 +89,13 @@ func createLLM(c *fiber.Ctx) error {
 		}
 	} else {
 		err := edgeClient.Execute(edgeCtx, `
+		WITH
+			countLLM := count((SELECT LLM FILTER .user = global currentUser))
 		INSERT LLM {
 			name := <str>$0,
 			context := <str>$1,
 			temperature := <float32>$2,
+			position := countLLM + 1,
 			modelInfo := (SELECT ModelInfo FILTER .modelID = <str>$3 LIMIT 1),
 			user := global currentUser
 		}
@@ -101,3 +107,35 @@ func createLLM(c *fiber.Ctx) error {
 
 	return c.SendString(GenerateModelPopoverHTML(true))
 }
+
+type PositionUpdate struct {
+	Position int    `json:"position"`
+	ID       string `json:"id"`
+}
+
+func updateLLMPositionBatch(c *fiber.Ctx) error {
+	var positionUpdates []PositionUpdate
+	if err := c.BodyParser(&positionUpdates); err != nil {
+		return err
+	}
+
+	for _, update := range positionUpdates {
+		idUUID, err := edgedb.ParseUUID(update.ID)
+		if err != nil {
+			panic(err)
+		}
+
+		err = edgeClient.Execute(edgeCtx, `
+			UPDATE LLM
+			FILTER .id = <uuid>$0 AND .user = global currentUser
+			SET {
+				position := <int32>$1
+			};
+		`, idUUID, int32(update.Position))
+		if err != nil {
+			panic(err)
+		}
+	}
+
+	return nil
+}

dbschema/default.esdl

@@ -86,6 +86,7 @@ module default {
         required name: str;
         required context: str;
         required temperature: float32;
+        required position: int32;
         required to_delete: bool {
             default := false;
         };

dbschema/migrations/00041-m1cmvjy.edgeql

@@ -0,0 +1,9 @@
+CREATE MIGRATION m1cmvjy3ikuh5ii6b7l7gckttjmqk554llocwqx7n4aibtzngybvoq
+    ONTO m1wlzna3nrrigx2urda3turnj6dcvcjgexeuxxqundupqet5jrkh7q
+{
+  ALTER TYPE default::LLM {
+      CREATE REQUIRED PROPERTY position: std::int32 {
+          SET REQUIRED USING (<std::int32>{0});
+      };
+  };
+};

main.go

@@ -89,6 +89,7 @@ func main() {
 	app.Get("/loadUsageKPI", LoadUsageKPIHandler)
 	app.Get("/loadKeys", LoadKeysHandler)
 	app.Get("/loadSettings", LoadSettingsHandler)
+	app.Post("/updateLLMPositionBatch", updateLLMPositionBatch)
 
 	// Authentication
 	app.Get("/signin", handleUiSignIn)

static/model-selection-menu.js

@@ -0,0 +1,54 @@
+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) {
+                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();
+}
+
+function getSelectedModelsIDs() {
+    var selectedModelsIDs = [];
+    var selectedModels = document.getElementsByClassName('selected');
+    for (var i = 0; i < selectedModels.length; i++) {
+        selectedModelsIDs.push(selectedModels[i].getAttribute('data-id'));
+    }
+    return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
+}
+
+function toggleSendButton() {
+    var selectedModels = document.getElementsByClassName('selected');
+    var sendButton = document.querySelector('button[disabled]');
+    sendButton.disabled = selectedModels.length === 0;
+}

views/layouts/main.html

@@ -14,6 +14,8 @@
 
     <script src="https://unpkg.com/htmx.org@2.0.0-beta4/dist/htmx.js"></script>
     <script src="https://unpkg.com/htmx-ext-sse@2.0.0/sse.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
+    <script src="/model-selection-menu.js"></script>
 
     <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
 </head>

views/partials/popover-models.html

@@ -8,15 +8,17 @@
     <div class="dropdown-menu" id="dropdown-menu3" role="menu">
         <div class="dropdown-content">
             <div class="dropdown-item" id="models-list">
-                {% for LLM in LLMs %}
-                <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
-                    value="{{ LLM.ID.String() }}">
-                    <span class="icon">
-                        <img src="{{ LLM.Model.Company.Icon }}" />
-                    </span>
-                    <span>{{ LLM.Name }}</span>
+                <div id="llm-list">
+                    {% for LLM in LLMs %}
+                    <div class="icon-text has-text unselected" data-id="{{ LLM.ID.String() }}" style="cursor: pointer;"
+                        onclick="toggleSelection(this)">
+                        <span class="icon">
+                            <img src="{{ LLM.Model.Company.Icon }}" />
+                        </span>
+                        <span>{{ LLM.Name }}</span>
+                    </div>
+                    {% endfor %}
                 </div>
-                {% endfor %}
                 <div class="is-flex is-justify-content-space-between mt-4">
                     <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"
@@ -85,6 +87,26 @@
 </div>
 
 <script>
+    var sortable = new Sortable(document.getElementById('llm-list'), {
+        animation: 150,
+        onEnd: function (evt) {
+            var items = evt.to.children;
+            var updates = [];
+            for (var i = 0; i < items.length; i++) {
+                var id = items[i].getAttribute('data-id');
+                var position = i + 1;
+                updates.push({ id: id, position: position });
+            }
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('POST', '/updateLLMPositionBatch', true);
+            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
+            xhr.send(JSON.stringify(updates));
+        }
+    });
+
+
+
     document.getElementById('model-name-input').addEventListener('input', function () {
         document.getElementById('confirm-create-model-button').disabled = this.value === '';
     })
@@ -102,7 +124,6 @@
         document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);
     });
 
-
     document.getElementById('temperature-slider').addEventListener('input', function () {
         document.getElementById('temperature-slider-output').innerHTML = this.value;
     })
@@ -124,12 +145,10 @@
     });
 
     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.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
             document.body.classList.remove('shift-pressed');
             lastSelectedIndex = null;
 
-            // Remove all "shiftselected" classes
             const elements = Array.from(document.getElementsByClassName('icon-text'));
             for (let i = 0; i < elements.length; i++) {
                 elements[i].classList.remove('shiftselected');
@@ -146,58 +165,6 @@
     });
 </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) {
-                    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();
-    }
-
-    function getSelectedModelsIDs() {
-        var selectedModelsIDs = [];
-        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>
-
 <style>
     .selected {
         border: 2px solid #126d0f;
@@ -248,5 +215,4 @@
         background: #ffffff;
         cursor: pointer;
     }
-</style>
-{% endif %}
+</style>