From dd9b116f0a5131e3d89382a2c79da3a0ca511f51 Mon Sep 17 00:00:00 2001 From: mic Date: Mon, 2 Feb 2026 22:59:24 +0100 Subject: [PATCH] tom select added. see #603 --- pages/_lib/connection-ui.js | 66 ++++++++++++++++++++++++++++++------- 1 file changed, 54 insertions(+), 12 deletions(-) diff --git a/pages/_lib/connection-ui.js b/pages/_lib/connection-ui.js index bd52abf4..7e92efc3 100644 --- a/pages/_lib/connection-ui.js +++ b/pages/_lib/connection-ui.js @@ -16,6 +16,7 @@ * along with this program. If not, see . */ +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{