Display context size for featherless models

public/scripts/textgen-models.js

@@ -242,6 +242,7 @@ export async function loadFeatherlessModels(data) {
         return;
     }
 
+    data.sort((a, b) => a.id.localeCompare(b.id));
     featherlessModels = data;
 
     if (!data.find(x => x.id === textgen_settings.featherless_model)) {
@@ -262,6 +263,8 @@ function onFeatherlessModelSelect() {
     const modelId = String($('#featherless_model').val());
     textgen_settings.featherless_model = modelId;
     $('#api_button_textgenerationwebui').trigger('click');
+    const model = featherlessModels.find(x => x.id === modelId);
+    setGenerationParamsFromPreset({ max_length: model.context_length });
 }
 
 
@@ -431,6 +434,20 @@ function getAphroditeModelTemplate(option) {
     `));
 }
 
+function getFeatherlessModelTemplate(option) {
+    const model = featherlessModels.find(x => x.id === option?.element?.value);
+
+    if (!option.id || !model) {
+        return option.text;
+    }
+
+    return $((`
+        <div class="flex-container flexFlowColumn">
+            <div><strong>${DOMPurify.sanitize(model.name)}</strong> | <span>${model.context_length || '???'} tokens</span></div>
+        </div>
+    `));
+}
+
 async function downloadOllamaModel() {
     try {
         const serverUrl = textgen_settings.server_urls[textgen_types.OLLAMA];
@@ -679,6 +696,7 @@ jQuery(function () {
             searchInputPlaceholder: 'Search models...',
             searchInputCssClass: 'text_pole',
             width: '100%',
+            templateResult: getFeatherlessModelTemplate,
         });
         providersSelect.select2({
             sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),