Better LLM selections

Chat.go

@@ -59,6 +59,7 @@ type TemplateMessage struct {
 	Hidden  bool
 	Id      string
 	Name    string
+	Model   string
 	ModelID string
 }
 
@@ -88,7 +89,8 @@ func generateChatHTML() string {
 				Content: markdownToHTML(message.Content),
 				Hidden:  !message.Selected, // Assuming Hidden is a field you want to include from Message
 				Id:      message.ID.String(),
-				Name:    message.LLM.Model.Name,
+				Name:    message.LLM.Name,
+				Model:   message.LLM.Model.Name,
 				ModelID: message.LLM.Model.ModelID,
 			}
 			templateMessages = append(templateMessages, templateMessage)

database.go

@@ -271,6 +271,7 @@ func getAllMessages() []Message {
 		content,
 		date,
 		llm : {
+			name,
 			modelInfo : {
 				modelID,
 				name,

views/partials/message-bot.html

@@ -29,7 +29,7 @@
                     {% if not message.Hidden %}
                     <div class="message-header">
                         <p>
-                            {{ message.Name }}
+                            <strong>{{ message.Name }}</strong> <small>{{ message.Model }}</small>
                         </p>
                     </div>
                     <div class="message-body">

views/partials/popover-models.html

@@ -23,20 +23,73 @@
 </div>
 
 <script>
+    let lastSelectedIndex = null;
+
+    document.addEventListener('keydown', function (event) {
+        if (event.key === 'Shift') {
+            document.body.classList.add('shift-pressed');
+        }
+    });
+
+    document.addEventListener('keyup', function (event) {
+        if (event.key === 'Shift') {
+            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');
+        }
+
+        window.getSelection().removeAllRanges();
+    });
+
     function toggleSelection(element) {
-        // Check if the element currently has the 'has-text-info' class
+        const elements = Array.from(document.getElementsByClassName('icon-text'));
-        if (element.classList.contains('selected')) {
+        const index = elements.indexOf(element);
-            // It has 'has-text-info', so remove it and add 'has-text'
+
-            element.classList.add('unselected');
+        if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
-            element.classList.remove('selected');
+            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 {
-            // It doesn't have 'has-text-info', so add it and remove 'has-text'
+                    elements[i].classList.add('selected');
-            element.classList.remove('unselected');
+                    elements[i].classList.remove('unselected');
-            element.classList.add('selected');
+                }
+            }
+            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();
     }
 
+    document.addEventListener('click', function (event) {
+        if (event.shiftKey) {
+            event.preventDefault();
+        }
+    });
+
     function getSelectedModelsIDs() {
         var selectedModelsIDs = [];
         var selectedModels = document.getElementsByClassName('selected');
@@ -49,8 +102,7 @@
 
 <style>
     .selected {
-        border: 2px solid #3273dc;
+        border: 2px solid #126d0f;
-        /* Bulma's primary color */
         border-radius: 4px;
         padding: 1px;
         margin: 2px;
@@ -60,4 +112,15 @@
         border-radius: 4px;
         padding: 3px;
     }
+
+    .shiftselected {
+        background: #126d0f;
+        border-radius: 4px;
+        padding: 1px;
+        margin: 2px;
+    }
+
+    .shift-pressed *::selection {
+        background: transparent;
+    }
 </style>