feat: add drag-and-drop functionality for logit bias lists

public/index.html

@@ -6010,6 +6010,7 @@
         </div>
         <div id="openai_logit_bias_template" class="template_element">
             <div class="openai_logit_bias_form">
+                <span class="drag-handle">☰</span>
                 <input class="openai_logit_bias_text text_pole" data-i18n="[placeholder]Text or token ids" placeholder="Text or [token ids]" />
                 <input class="openai_logit_bias_value text_pole" type="number" min="-100" value="0" max="100" />
                 <i class="menu_button fa-solid fa-xmark openai_logit_bias_remove"></i>
@@ -6017,6 +6018,7 @@
         </div>
         <div id="logit_bias_template" class="template_element">
             <div class="logit_bias_form">
+                <span class="drag-handle">☰</span>
                 <input class="logit_bias_text text_pole" data-i18n="[placeholder]Type here..." placeholder="type here..." />
                 <input class="logit_bias_value text_pole" type="number" min="-100" value="0" max="100" step="0.01" />
                 <i class="menu_button fa-solid fa-xmark logit_bias_remove"></i>

public/scripts/logit-bias.js

@@ -1,6 +1,6 @@
 import { saveSettingsDebounced } from '../script.js';
 import { getTextTokens } from './tokenizers.js';
-import { uuidv4 } from './utils.js';
+import { getSortableDelay, uuidv4 } from './utils.js';
 
 export const BIAS_CACHE = new Map();
 
@@ -16,7 +16,8 @@ export function displayLogitBias(logitBias, containerSelector) {
         return;
     }
 
-    $(containerSelector).find('.logit_bias_list').empty();
+    const list = $(containerSelector).find('.logit_bias_list');
+    list.empty();
 
     for (const entry of logitBias) {
         if (entry) {
@@ -24,6 +25,27 @@ export function displayLogitBias(logitBias, containerSelector) {
         }
     }
 
+    // Check if a sortable instance exists
+    if (list.sortable('instance') !== undefined) {
+        // Destroy the instance
+        list.sortable('destroy');
+    }
+
+    // Make the list sortable
+    list.sortable({
+        delay: getSortableDelay(),
+        handle: '.drag-handle',
+        stop: function () {
+            const order = [];
+            list.children().each(function () {
+                order.unshift($(this).data('id'));
+            });
+            logitBias.sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
+            console.log('Logit bias reordered:', logitBias);
+            saveSettingsDebounced();
+        },
+    });
+
     BIAS_CACHE.delete(containerSelector);
 }
 

public/scripts/openai.js

@@ -3465,7 +3465,8 @@ function onLogitBiasPresetChange() {
     }
 
     oai_settings.bias_preset_selected = value;
-    $('.openai_logit_bias_list').empty();
+    const list =  $('.openai_logit_bias_list');
+    list.empty();
 
     for (const entry of preset) {
         if (entry) {
@@ -3473,6 +3474,27 @@ function onLogitBiasPresetChange() {
         }
     }
 
+    // Check if a sortable instance exists
+    if (list.sortable('instance') !== undefined) {
+        // Destroy the instance
+        list.sortable('destroy');
+    }
+
+    // Make the list sortable
+    list.sortable({
+        delay: getSortableDelay(),
+        handle: '.drag-handle',
+        stop: function () {
+            const order = [];
+            list.children().each(function () {
+                order.unshift(parseInt($(this).data('id')));
+            });
+            preset.sort((a, b) => order.indexOf(preset.indexOf(a)) - order.indexOf(preset.indexOf(b)));
+            console.log('Logit bias reordered:', preset);
+            saveSettingsDebounced();
+        },
+    });
+
     biasCache = undefined;
     saveSettingsDebounced();
 }