tom select added. see #603

pages/_lib/connection-ui.js

@@ -16,6 +16,7 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import './tom-select.base.js';
 import {
   prefs_default,
   integration_options_config
@@ -669,6 +670,7 @@ export async function injectConnectionUI({
       while (openaiCompModelSelect.options.length > 0) {
         openaiCompModelSelect.remove(0);
       }
+      syncTomSelect(openaiCompModelSelect);
       document.getElementById(getPrefixedId('openai_comp_use_v1')).checked = !!config.use_v1;
       document.getElementById(getPrefixedId('openai_comp_chat_name')).value = config.chat_name || '';
       // Trigger change events if needed
@@ -734,6 +736,7 @@ export async function injectConnectionUI({
           select_chatgpt_model.appendChild(option);
         }
       });
+      syncTomSelect(select_chatgpt_model);
       document.getElementById(getPrefixedId('chatgpt_model_fetch_loading')).style.display = 'none';
     });
     
@@ -776,6 +779,7 @@ export async function injectConnectionUI({
           select_google_gemini_model.appendChild(option);
         }
       });
+      syncTomSelect(select_google_gemini_model);
       document.getElementById(getPrefixedId('google_gemini_model_fetch_loading')).style.display = 'none';
     });
     
@@ -831,6 +835,7 @@ export async function injectConnectionUI({
           select_ollama_model.appendChild(option);
         }
       });
+      syncTomSelect(select_ollama_model);
       document.getElementById(getPrefixedId('ollama_model_fetch_loading')).style.display = 'none';
     } catch (error) {
       document.getElementById(getPrefixedId('ollama_model_fetch_loading')).style.display = 'none';
@@ -879,6 +884,7 @@ export async function injectConnectionUI({
           select_openai_comp_model.appendChild(option);
         }
       });
+      syncTomSelect(select_openai_comp_model);
       document.getElementById(getPrefixedId('openai_comp_model_fetch_loading')).style.display = 'none';
     });
     
@@ -933,6 +939,7 @@ export async function injectConnectionUI({
           select_anthropic_model.appendChild(option);
         }
       });
+      syncTomSelect(select_anthropic_model);
       document.getElementById(getPrefixedId('anthropic_model_fetch_loading')).style.display = 'none';
     });
     
@@ -948,6 +955,7 @@ export async function injectConnectionUI({
         option.text = modelName;
         select_openai_comp_model.appendChild(option);
         select_openai_comp_model.value = modelName;
+        syncTomSelect(select_openai_comp_model);
         select_openai_comp_model.dispatchEvent(new Event('change', { bubbles: true }));
       }
     });
@@ -961,6 +969,7 @@ export async function injectConnectionUI({
         select_openai_comp_model.remove(0);
       }
       select_openai_comp_model.value = '';
+      syncTomSelect(select_openai_comp_model);
       select_openai_comp_model.dispatchEvent(new Event('change', { bubbles: true }));
     });
   
@@ -1011,6 +1020,21 @@ export async function injectConnectionUI({
 
   updateCORSWarnings(modelId_prefix);
 
+  ['chatgpt_model', 'google_gemini_model', 'ollama_model', 'openai_comp_model', 'anthropic_model'].forEach(id => {
+    const el = document.getElementById(getPrefixedId(id));
+    if (el && !el.tomselect) {
+      new TomSelect(el, {
+        create: false,
+        maxOptions: null,
+        maxItems: 1,
+        sortField: {
+          field: "text",
+          direction: "asc"
+        }
+      });
+    }
+  });
+
   return {
     select: conntype_select,
     onTypeChange: (fn) => { onTypeChange = fn; fn(conntype_select.value, { select: conntype_select }); }
@@ -1207,6 +1231,24 @@ export function showConnectionOptions(conntype_select, modelId_prefix = '') {
 
 // From here there are internal functions
 
+function syncTomSelect(element) {
+  if (element && element.tomselect) {
+    element.tomselect.sync();
+  }
+}
+
+function toggleTomSelectDisabled(element, disabled) {
+  element.disabled = disabled;
+  if (element.tomselect) {
+    if (disabled) {
+      element.tomselect.disable();
+      element.tomselect.clear();
+    } else {
+      element.tomselect.enable();
+    }
+  }
+}
+
 function getModelEl(model, modelId_prefix) {
   return document.getElementById((modelId_prefix ? modelId_prefix : '') + model);
 }
@@ -1261,13 +1303,13 @@ function warn_ChatGPT_APIKeyEmpty(modelId_prefix) {
   if(apiKeyInput.value === ''){
     apiKeyInput.style.border = '2px solid red';
     btnFetchChatGPTModels.disabled = true;
-    modelChatGPT.disabled = true;
+    toggleTomSelectDisabled(modelChatGPT, true);
     modelChatGPT.selectedIndex = -1;
     modelChatGPT.style.border = '';
   }else{
     apiKeyInput.style.border = '';
     btnFetchChatGPTModels.disabled = false;
-    modelChatGPT.disabled = false;
+    toggleTomSelectDisabled(modelChatGPT, false);
     if((modelChatGPT.selectedIndex === -1)||(modelChatGPT.value === '')){
       modelChatGPT.style.border = '2px solid red';
     }else{
@@ -1284,13 +1326,13 @@ function warn_GoogleGemini_APIKeyEmpty(modelId_prefix) {
   if(apiKeyInput.value === ''){
     apiKeyInput.style.border = '2px solid red';
     btnFetchGoogleGeminiModels.disabled = true;
-    modelGoogleGemini.disabled = true;
+    toggleTomSelectDisabled(modelGoogleGemini, true);
     modelGoogleGemini.selectedIndex = -1;
     modelGoogleGemini.style.border = '';
   }else{
     apiKeyInput.style.border = '';
     btnFetchGoogleGeminiModels.disabled = false;
-    modelGoogleGemini.disabled = false;
+    toggleTomSelectDisabled(modelGoogleGemini, false);
     if((modelGoogleGemini.selectedIndex === -1)||(modelGoogleGemini.value === '')){
       modelGoogleGemini.style.border = '2px solid red';
     }else{
@@ -1308,14 +1350,14 @@ function warn_Ollama_HostEmpty(modelId_prefix) {
   if(hostInput.value === ''){
     hostInput.style.border = '2px solid red';
     btnFetchOllamaModels.disabled = true;
-    modelOllama.disabled = true;
+    toggleTomSelectDisabled(modelOllama, true);
     modelOllama.selectedIndex = -1;
     modelOllama.style.border = '';
     btnGiveAllUrlsPermission_ollama_api.disabled = true;
   }else{
     hostInput.style.border = '';
     btnFetchOllamaModels.disabled = false;
-    modelOllama.disabled = false;
+    toggleTomSelectDisabled(modelOllama, false);
     if((modelOllama.selectedIndex === -1)||(modelOllama.value === '')){
       modelOllama.style.border = '2px solid red';
     }else{
@@ -1334,14 +1376,14 @@ function warn_OpenAIComp_HostEmpty(modelId_prefix) {
   if(hostInput.value === ''){
     hostInput.style.border = '2px solid red';
     btnUpdateOpenAICompModels.disabled = true;
-    modelOpenAIComp.disabled = true;
+    toggleTomSelectDisabled(modelOpenAIComp, true);
     modelOpenAIComp.selectedIndex = -1;
     modelOpenAIComp.style.border = '';
     btnGiveAllUrlsPermission_openai_comp_api.disabled = true;
   }else{
     hostInput.style.border = '';
     btnUpdateOpenAICompModels.disabled = false;
-    modelOpenAIComp.disabled = false;
+    toggleTomSelectDisabled(modelOpenAIComp, false);
     if((modelOpenAIComp.selectedIndex === -1)||(modelOpenAIComp.value === '')){
       modelOpenAIComp.style.border = '2px solid red';
     }else{
@@ -1359,13 +1401,13 @@ function warn_Anthropic_APIKeyEmpty(modelId_prefix) {
   if(apiKeyInput.value === ''){
     apiKeyInput.style.border = '2px solid red';
     btnFetchAnthropicModels.disabled = true;
-    modelAnthropic.disabled = true;
+    toggleTomSelectDisabled(modelAnthropic, true);
     modelAnthropic.selectedIndex = -1;
     modelAnthropic.style.border = '';
   }else{
     apiKeyInput.style.border = '';
     btnFetchAnthropicModels.disabled = false;
-    modelAnthropic.disabled = false;
+    toggleTomSelectDisabled(modelAnthropic, false);
     if((modelAnthropic.selectedIndex === -1)||(modelAnthropic.value === '')){
       modelAnthropic.style.border = '2px solid red';
     }else{
@@ -1382,13 +1424,13 @@ function warn_Anthropic_VersionEmpty(modelId_prefix) {
   if(versionInput.value === ''){
     versionInput.style.border = '2px solid red';
     btnFetchAnthropicModels.disabled = true;
-    modelAnthropic.disabled = true;
+    toggleTomSelectDisabled(modelAnthropic, true);
     modelAnthropic.selectedIndex = -1;
     modelAnthropic.style.border = '';
   }else{
     versionInput.style.border = '';
     btnFetchAnthropicModels.disabled = false;
-    modelAnthropic.disabled = false;
+    toggleTomSelectDisabled(modelAnthropic, false);
     if((modelAnthropic.selectedIndex === -1)||(modelAnthropic.value === '')){
       modelAnthropic.style.border = '2px solid red';
     }else{