Working selection models

Chat.go

@@ -394,12 +394,17 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 	var llms []LLM
 	err := edgeClient.Query(context.Background(), `
 		SELECT LLM {
+			id,
 			name,
 			context,
 			temperature,
 			modelInfo : {
 				modelID,
-				name
+				name,
+				company : {
+					name,
+					icon
+				}
 			}
 		}
 		FILTER .user = global currentUser AND .name != 'none'
@@ -408,12 +413,12 @@ func LoadModelSelectionHandler(c *fiber.Ctx) error {
 		panic(err)
 	}
 
-	for i := 0; i < len(llms); i++ {
+	//for i := 0; i < len(llms); i++ {
-		// If the modelID len is higher than 15, truncate it
+	//	// If the modelID len is higher than 15, truncate it
-		if len(llms[i].Model.ModelID) > 12 {
+	//	if len(llms[i].Model.ModelID) > 12 {
-			llms[i].Model.ModelID = llms[i].Model.ModelID[0: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(),

Request.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"encoding/json"
 	"fmt"
 	"strings"
 	"sync"
@@ -23,7 +24,15 @@ func GeneratePlaceholderHandler(c *fiber.Ctx) error {
 	// Step 1 I create a User message and send it as output with a placeholder
 	// that will make a request to GenerateMultipleMessagesHandler when loading
 	message := c.FormValue("message", "")
-	selectedLLMIds := []string{"1e5a07c4-12fe-11ef-8da6-67d29b408c53", "3cd15ca8-1433-11ef-9f22-93f2b78c78de", "95774e62-1447-11ef-bfea-33f555b75c17", "af3d8686-1447-11ef-bfea-07d880a979ff", "be7a922a-1478-11ef-a819-238de8775b87"} // TODO Hanle in the UI
+
+	var selectedLLMIds []string
+	err := json.Unmarshal([]byte(c.FormValue("selectedLLMIds")), &selectedLLMIds)
+	if err != nil {
+		// Handle the error
+		panic(err)
+	}
+
+	fmt.Println("SelectedLLMIds:", selectedLLMIds)
 
 	var selectedLLMs []LLM
 	var selectedLLM LLM

views/chat.html

@@ -25,7 +25,8 @@
                 </button-->
                 <button disabled type="submit" class="send-button button is-primary is-small"
                     hx-get="/generatePlaceholder" hx-swap="beforeend settle:200ms" hx-target="#chat-messages"
-                    id="chat-input-send-btn" class="chat-input" hx-include="[name='message']" onclick="clearTextArea()">
+                    id="chat-input-send-btn" class="chat-input" hx-include="[name='message']"
+                    hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}" onclick="clearTextArea()">
                     <span class="icon">
                         <i class="fa-solid fa-chevron-right"></i>
                     </span>

views/partials/popover-models.html

@@ -7,41 +7,55 @@
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">
         <div class="dropdown-content is-small">
             <div class="dropdown-item">
-                <table class="table is-hoverable is-fullwidth is-narrow is-small">
-                    <thead>
-                        <tr>
-                            <th class="is-size-7">Name</th>
-                            <th class="is-size-7">Model</th>
-                            <th class="is-size-7"></th>
-                            <th class="is-size-7"></th>
-                        </tr>
-                    </thead>
-                    <tbody>
                 {% for LLM in LLMs %}
-                        <tr>
+                <!-- Added "has-text" as a default class -->
-                            <td class="is-size-6">{{ LLM.Name }}</td>
+                <div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
-                            <td class="is-size-7">{{ LLM.Model.ModelID }}</td>
+                    value="{{ LLM.ID.String() }}">
-                            <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>
+                        <img src="{{ LLM.Model.Company.Icon }}" />
                     </span>
-                                </button>
+                    <span>{{ LLM.Name }}</span>
-                            </td>
+                </div>
-                            <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>
 </div>
+
+<script>
+    function toggleSelection(element) {
+        // Check if the element currently has the 'has-text-info' class
+        if (element.classList.contains('selected')) {
+            // It has 'has-text-info', so remove it and add 'has-text'
+            element.classList.add('unselected');
+            element.classList.remove('selected');
+        } else {
+            // It doesn't have 'has-text-info', so add it and remove 'has-text'
+            element.classList.remove('unselected');
+            element.classList.add('selected');
+        }
+    }
+
+    function getSelectedModelsIDs() {
+        var selectedModelsIDs = [];
+        var selectedModels = document.getElementsByClassName('selected');
+        for (var i = 0; i < selectedModels.length; i++) {
+            selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
+        }
+        return JSON.stringify(selectedModelsIDs);
+    }
+</script>
+
+<style>
+    .selected {
+        border: 2px solid #3273dc;
+        /* Bulma's primary color */
+        border-radius: 4px;
+        padding: 2px;
+    }
+
+    .unselected {
+        border-radius: 4px;
+        padding: 4px;
+    }
+</style>