From fd4adcc136ce0bd7a7d0ad8d3689ab40106ea645 Mon Sep 17 00:00:00 2001
From: Adrien <adrien.bouvais.pro@gmail.com>
Date: Tue, 21 May 2024 22:25:54 +0200
Subject: [PATCH] Working selection models

---
 Chat.go                            | 19 ++++---
 Request.go                         | 11 +++-
 views/chat.html                    |  3 +-
 views/partials/popover-models.html | 84 +++++++++++++++++-------------
 4 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/Chat.go b/Chat.go
index e9dfac5..3cc0010 100644
--- a/Chat.go
+++ b/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++ {
-		// 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] + "..."
-		}
-	}
+	//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(),
diff --git a/Request.go b/Request.go
index e116fa4..d9f5a5a 100644
--- a/Request.go
+++ b/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
diff --git a/views/chat.html b/views/chat.html
index e262e56..632e6ed 100644
--- a/views/chat.html
+++ b/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>
diff --git a/views/partials/popover-models.html b/views/partials/popover-models.html
index 4402a26..9cbf9d2 100644
--- a/views/partials/popover-models.html
+++ b/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>
-                            <td class="is-size-6">{{ LLM.Name }}</td>
-                            <td class="is-size-7">{{ LLM.Model.ModelID }}</td>
-                            <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>
+                {% for LLM in LLMs %}
+                <!-- Added "has-text" as a default class -->
+                <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>
+                {% endfor %}
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</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>
\ No newline at end of file