From 9b17f4e0c0ada5f4eb0a5fa155eb5fed4755a1e5 Mon Sep 17 00:00:00 2001
From: Harrison <harrison@recursal.ai>
Date: Mon, 24 Jun 2024 00:47:06 +1000
Subject: [PATCH] add search functionality for models

---
 public/index.html        |  5 +++--
 public/scripts/openai.js | 16 ++++++++--------
 public/style.css         |  1 +
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index 4c2ccdfcd..b797e5ebc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2876,11 +2876,12 @@
                             </div>
                             <h4>Enter a Model ID</h4>
                             <div class="flex-container">
-                                <input id="custom_model_id" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" placeholder="Example: gpt-3.5-turbo">
+                                <input list="model_custom_select_fill" id="custom_model_id" class="text_pole wide100p" maxlength="500" value="" autocomplete="off" placeholder="Example: gpt-3.5-turbo">
+                                <datalist id="model_custom_select_fill" class="text_pole model_custom_select"></datalist>
                             </div>
                             <h4 data-i18n="Available Models">Available Models</h4>
                             <div class="flex-container">
-                                <select id="model_custom_select" class="text_pole"></select>
+                                <select class="text_pole model_custom_select"></select>
                             </div>
                             <h4 data-i18n="Prompt Post-Processing">Prompt Post-Processing</h4>
                             <select id="custom_prompt_post_processing" class="text_pole" title="Applies additional processing to the prompt before sending it to the API." data-i18n="[title]Applies additional processing to the prompt before sending it to the API.">
diff --git a/public/scripts/openai.js b/public/scripts/openai.js
index b41c5abca..f0f3c0e73 100644
--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -1539,10 +1539,10 @@ function saveModelList(data) {
     }
 
     if (oai_settings.chat_completion_source == chat_completion_sources.CUSTOM) {
-        $('#model_custom_select').empty();
-        $('#model_custom_select').append('<option value="">None</option>');
+        $('.model_custom_select').empty();
+        $('.model_custom_select').append('<option value="">None</option>');
         model_list.forEach((model) => {
-            $('#model_custom_select').append(
+            $('.model_custom_select').append(
                 $('<option>', {
                     value: model.id,
                     text: model.id,
@@ -1551,7 +1551,7 @@ function saveModelList(data) {
         });
 
         if (!oai_settings.custom_model && model_list.length > 0) {
-            $('#model_custom_select').val(model_list[0].id).trigger('change');
+            $('.model_custom_select').val(model_list[0].id).trigger('change');
         }
     }
 }
@@ -3152,7 +3152,7 @@ async function getStatusOpen() {
     }
 
     if (oai_settings.chat_completion_source === chat_completion_sources.CUSTOM) {
-        $('#model_custom_select').empty();
+        $('.model_custom_select').empty();
         data.custom_url = oai_settings.custom_url;
         data.custom_include_headers = oai_settings.custom_include_headers;
     }
@@ -3870,7 +3870,7 @@ async function onModelChange() {
         oai_settings.groq_model = value;
     }
 
-    if (value && $(this).is('#model_custom_select')) {
+    if (value && $(this).is('.model_custom_select')) {
         console.log('Custom model changed to', value);
         oai_settings.custom_model = value;
         $('#custom_model_id').val(value).trigger('input');
@@ -4347,7 +4347,7 @@ function toggleChatCompletionForms() {
         $('#model_groq_select').trigger('change');
     }
     else if (oai_settings.chat_completion_source == chat_completion_sources.CUSTOM) {
-        $('#model_custom_select').trigger('change');
+        $('.model_custom_select').trigger('change');
     }
     $('[data-source]').each(function () {
         const validSources = $(this).data('source').split(',');
@@ -5060,7 +5060,7 @@ $(document).ready(async function () {
     $('#model_cohere_select').on('change', onModelChange);
     $('#model_perplexity_select').on('change', onModelChange);
     $('#model_groq_select').on('change', onModelChange);
-    $('#model_custom_select').on('change', onModelChange);
+    $('.model_custom_select').on('change', onModelChange);
     $('#settings_preset_openai').on('change', onSettingsPresetChange);
     $('#new_oai_preset').on('click', onNewPresetClick);
     $('#delete_oai_preset').on('click', onDeletePresetClick);
diff --git a/public/style.css b/public/style.css
index 2d6500158..4760a1533 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1146,6 +1146,7 @@ select {
     color: var(--SmartThemeBodyColor);
 }
 
+
 #send_textarea {
     min-height: calc(var(--bottomFormBlockSize) + 2px);
     height: calc(var(--bottomFormBlockSize) + 2px);