Chat Completion: common model sorting and grouping settings, improved NanoGPT model list (#5536) * Improve NanoGPT Model List * Update token multiplier condition to !== 1 to support showing discounts * Add Model Sorting * rework sorting to be more compact * feat: combine CC model sorting/grouping settings Co-authored-by: Copilot <copilot@github.com> * fix: adjust migration logic Co-authored-by: Copilot <copilot@github.com> * feat: implement grouping for Chutes * fix: apply review suggestions * fix: call reconnect instead of direct status check --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com> Co-authored-by: Copilot <copilot@github.com>

d327412e29847d5c38d6a66e5d48b03c22809b90

DeathStalker471 <thomasnealson85@gmail.com>

Signed

Parents: 97dba399e4791303c5474c8e53563739a9c0066e

public/index.html+31 -81 Viewed

                                 <input id="openrouter_use_fallback" type="checkbox" />
                                 <span data-i18n="Allow fallback models">Allow fallback models</span>
                             </label>
-                            <div class="marginTopBot5">
-                                <div class="inline-drawer wide100p">
-                                    <div class="inline-drawer-toggle inline-drawer-header">
-                                        <b data-i18n="OpenRouter Model Sorting">OpenRouter Model Sorting</b>
-                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                                    </div>
-                                    <div class="inline-drawer-content m-b-1">
-                                        <div class="marginTopBot5">
-                                            <label for="openrouter_sort_models" class="checkbox_label">
-                                                <select id="openrouter_sort_models">
-                                                    <option data-i18n="Alphabetically" value="alphabetically">Alphabetically</option>
-                                                    <option data-i18n="Price" value="pricing.prompt">Price (cheapest)</option>
-                                                    <option data-i18n="Context Size" value="context_length">Context Size</option>
-                                                </select>
-                                            </label>
-                                        </div>
-                                        <div class="marginTopBot5">
-                                            <label for="openrouter_group_models" class="checkbox_label">
-                                                <input id="openrouter_group_models" type="checkbox" />
-                                                <span data-i18n="Group by vendors">Group by vendors</span>
-                                            </label>
-                                            <div class="toggle-description justifyLeft wide100p">
-                                                <span data-i18n="Group by vendors Description">
-                                                    Put OpenAI models in one group, Anthropic models in other group, etc. Can be combined with sorting.
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                             <div>
                                 <h4>
                                     <span data-i18n="Model Providers">Model Providers</span>

                                     <option value="" data-i18n="-- Connect to the API --">-- Connect to the API --</option>
                                 </select>
                             </div>
-                            <div class="marginTopBot5">
-                                <div class="inline-drawer wide100p">
-                                    <div class="inline-drawer-toggle inline-drawer-header">
-                                        <b data-i18n="Electron Hub Model Sorting">Electron Hub Model Sorting</b>
-                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                                    </div>
-                                    <div class="inline-drawer-content m-b-1">
-                                        <div class="marginTopBot5">
-                                            <label for="electronhub_sort_models" class="checkbox_label">
-                                                <select id="electronhub_sort_models">
-                                                    <option data-i18n="Alphabetically" value="alphabetically">Alphabetically</option>
-                                                    <option data-i18n="Input Price" value="pricing.input">Input Price (cheapest)</option>
-                                                    <option data-i18n="Output Price" value="pricing.output">Output Price (cheapest)</option>
-                                                    <option data-i18n="Context Size" value="context_length">Context Size</option>
-                                                </select>
-                                            </label>
-                                        </div>
-                                        <div class="marginTopBot5">
-                                            <label for="electronhub_group_models" class="checkbox_label">
-                                                <input id="electronhub_group_models" type="checkbox" />
-                                                <span data-i18n="Group by vendors">Group by vendors</span>
-                                            </label>
-                                            <div class="toggle-description justifyLeft wide100p">
-                                                <span data-i18n="Group by vendors Description">
-                                                    Put OpenAI models in one group, Anthropic models in other group, etc. Can be combined with sorting.
-                                                </span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                         <div id="chutes_form" data-source="chutes">
                             <h4 data-i18n="Chutes API Key">Chutes API Key</h4>

                                     <option value="" data-i18n="-- Connect to the API --">-- Connect to the API --</option>
                                 </select>
                             </div>
-                            <div class="marginTopBot5">
-                                <div class="inline-drawer wide100p">
-                                    <div class="inline-drawer-toggle inline-drawer-header">
-                                        <b data-i18n="Chutes Model Sorting">Chutes Model Sorting</b>
-                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
-                                    </div>
-                                    <div class="inline-drawer-content m-b-1">
-                                        <div class="marginTopBot5">
-                                            <label for="chutes_sort_models" class="checkbox_label">
-                                                <select id="chutes_sort_models">
-                                                    <option data-i18n="Alphabetically" value="alphabetically">Alphabetically</option>
-                                                    <option data-i18n="Input Price" value="pricing.input">Input Price (cheapest)</option>
-                                                    <option data-i18n="Output Price" value="pricing.output">Output Price (cheapest)</option>
-                                                    <option data-i18n="Context Size" value="context_length">Context Size</option>
-                                                </select>
-                                            </label>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
                         </div>
                         <div id="nanogpt_form" data-source="nanogpt">
                             <h4 data-i18n="NanoGPT API Key">NanoGPT API Key</h4>

                                 <small data-i18n="The underlying model of your deployment. This is detected automatically when you connect.">The underlying model of your deployment. This is detected automatically when you connect.</small>
                             </div>
                         </div>
+                        <div id="model_sorting_form" data-source="openrouter,chutes,electronhub,nanogpt,aimlapi">
+                            <div class="inline-drawer wide100p">
+                                <div class="inline-drawer-toggle inline-drawer-header">
+                                    <b data-i18n="Model Sorting">Model Sorting</b>
+                                    <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
+                                </div>
+                                <div class="inline-drawer-content m-b-1">
+                                    <div class="marginTopBot5">
+                                        <label for="cc_sort_models" class="checkbox_label">
+                                            <select id="cc_sort_models">
+                                                <option data-i18n="Alphabetically" value="alphabetically">Alphabetically</option>
+                                                <option data-i18n="Prompt Price (cheapest)" value="pricing.prompt">Prompt Price (cheapest)</option>
+                                                <option data-i18n="Completion Price (cheapest)" value="pricing.completion">Completion Price (cheapest)</option>
+                                                <option data-i18n="Context Size" value="context_length">Context Size</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                    <div class="marginTopBot5">
+                                        <label for="cc_group_models" class="checkbox_label">
+                                            <input id="cc_group_models" type="checkbox" />
+                                            <span data-i18n="Group by vendors">Group by vendors</span>
+                                        </label>
+                                        <div class="toggle-description justifyLeft wide100p">
+                                            <span data-i18n="Group by vendors Description">
+                                                Put OpenAI models in one group, Anthropic models in other group, etc. Can be combined with sorting.
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         <div id="prompt_post_processing_form">
                             <h4>
                                 <span data-i18n="Prompt Post-Processing">

public/scripts/openai.js+253 -249 Viewed

     min_p: ['#min_p_openai', 'min_p_openai', false, false],
     repetition_penalty: ['#repetition_penalty_openai', 'repetition_penalty_openai', false, false],
     max_context_unlocked: ['#oai_max_context_unlocked', 'max_context_unlocked', true, false],
+    group_models: ['#cc_group_models', 'group_models', true, true],
+    sort_models: ['#cc_sort_models', 'sort_models', false, true],
     openai_model: ['#model_openai_select', 'openai_model', false, true],
     claude_model: ['#model_claude_select', 'claude_model', false, true],
     openrouter_model: ['#model_openrouter_select', 'openrouter_model', false, true],
     openrouter_use_fallback: ['#openrouter_use_fallback', 'openrouter_use_fallback', true, true],
-    openrouter_group_models: ['#openrouter_group_models', 'openrouter_group_models', false, true],
-    openrouter_sort_models: ['#openrouter_sort_models', 'openrouter_sort_models', false, true],
     openrouter_providers: ['#openrouter_providers_chat', 'openrouter_providers', false, true],
     openrouter_quantizations: ['#openrouter_quantizations_chat', 'openrouter_quantizations', false, true],
     openrouter_allow_fallbacks: ['#openrouter_allow_fallbacks', 'openrouter_allow_fallbacks', true, true],

     perplexity_model: ['#model_perplexity_select', 'perplexity_model', false, true],
     groq_model: ['#model_groq_select', 'groq_model', false, true],
     chutes_model: ['#model_chutes_select', 'chutes_model', false, true],
-    chutes_sort_models: ['#chutes_sort_models', 'chutes_sort_models', false, true],
     siliconflow_model: ['#model_siliconflow_select', 'siliconflow_model', false, true],
     siliconflow_endpoint: ['#siliconflow_endpoint', 'siliconflow_endpoint', false, true],
     minimax_model: ['#model_minimax_select', 'minimax_model', false, true],
     minimax_endpoint: ['#minimax_endpoint', 'minimax_endpoint', false, true],
     electronhub_model: ['#model_electronhub_select', 'electronhub_model', false, true],
-    electronhub_sort_models: ['#electronhub_sort_models', 'electronhub_sort_models', false, true],
-    electronhub_group_models: ['#electronhub_group_models', 'electronhub_group_models', false, true],
     nanogpt_model: ['#model_nanogpt_select', 'nanogpt_model', false, true],
     deepseek_model: ['#model_deepseek_select', 'deepseek_model', false, true],
     aimlapi_model: ['#model_aimlapi_select', 'aimlapi_model', false, true],

     group_nudge_prompt: default_group_nudge_prompt,
     scenario_format: default_scenario_format,
     personality_format: default_personality_format,
+    sort_models: 'alphabetically',
+    group_models: false,
     openai_model: 'gpt-4-turbo',
     claude_model: 'claude-sonnet-4-5',
     google_model: 'gemini-2.5-pro',

     perplexity_model: 'sonar-pro',
     groq_model: 'llama-3.3-70b-versatile',
     chutes_model: 'deepseek-ai/DeepSeek-V3-0324',
-    chutes_sort_models: 'alphabetically',
     siliconflow_model: 'deepseek-ai/DeepSeek-V3',
     siliconflow_endpoint: SILICONFLOW_ENDPOINT.GLOBAL,
     minimax_model: 'MiniMax-M2.7',
     minimax_endpoint: MINIMAX_ENDPOINT.GLOBAL,
     electronhub_model: 'gpt-4o-mini',
-    electronhub_sort_models: 'alphabetically',
-    electronhub_group_models: false,
     nanogpt_model: 'gpt-4o-mini',
     deepseek_model: 'deepseek-v4-flash',
     aimlapi_model: 'chatgpt-4o-latest',

     custom_include_headers: '',
     openrouter_model: openrouter_website_model,
     openrouter_use_fallback: false,
-    openrouter_group_models: false,
-    openrouter_sort_models: 'alphabetically',
     openrouter_providers: [],
     openrouter_quantizations: [],
     openrouter_allow_fallbacks: true,

     `));
+}
+function calculateChutesCost() {
+    if (oai_settings.chat_completion_source !== chat_completion_sources.CHUTES) {
+        return;
+    }
+    let cost = 'Unknown';
+    const model = model_list.find(x => x.id === oai_settings.chutes_model);
+    if (model?.pricing) {
+        const outputPrice = model.pricing?.output;
+        const inputPrice = model.pricing?.input;
+        if (outputPrice !== undefined && inputPrice !== undefined) {
+            const outputCost = Number(outputPrice / 1000000);
+            const inputCost = Number(inputPrice / 1000000);
+            const outputTokens = oai_settings.openai_max_tokens;
+            const inputTokens = (oai_settings.openai_max_context - outputTokens);
+            const totalCost = (outputCost * outputTokens) + (inputCost * inputTokens);
+            if (!isNaN(totalCost)) {
+                cost = '$' + totalCost.toFixed(4);
+            }
+        }
+    }
+    $('#chutes_max_prompt_cost').text(cost);
+}
 function getNanoGptModelTemplate(option) {
     const model = model_list.find(x => x.id === option?.element?.value);

     const inputPrice = model.pricing?.prompt;
     const outputPrice = model.pricing?.completion;
     let price = 'Unknown';
     if (inputPrice !== undefined && outputPrice !== undefined) {
-        // Check if both prices are 0 (free model)
         if (inputPrice === 0 && outputPrice === 0) {
             price = 'Free';
         } else {

+        }
+    }
+    const visionIcon = model.capabilities?.vision ? '<i class="fa-solid fa-eye fa-sm" title="This model supports vision"></i>' : '';
+    const reasoningIcon = model.capabilities?.reasoning ? '<i class="fa-solid fa-brain fa-sm" title="This model supports reasoning"></i>' : '';
+    const toolCallsIcon = model.capabilities?.tool_calling ? '<i class="fa-solid fa-wrench fa-sm" title="This model supports tool calling"></i>' : '';
+    let subHtml = '';
+    const sub = model.subscription;
+    if (sub) {
+        if (sub.included) {
+            let titleText = 'Included in subscription';
+            let multiplierText = '';
+            if (sub.inputTokenMultiplier && sub.inputTokenMultiplier !== 1) {
+                multiplierText = ` (${sub.inputTokenMultiplier}x)`;
+                titleText += ` - Input Multiplier: ${sub.inputTokenMultiplier}x`;
+            }
+            subHtml = ` <small title="${titleText}"><i class="fa-solid fa-crown fa-sm"></i> Sub${multiplierText}</small>`;
+        } else if (sub.note) {
+            const safeNote = DOMPurify.sanitize(sub.note);
+            subHtml = ` <small title="${safeNote}"><i class="fa-solid fa-circle-info fa-sm"></i> Not in Sub</small>`;
+        }
+    }
+    const iconsContainer = document.createElement('span');
+    iconsContainer.insertAdjacentHTML('beforeend', visionIcon);
+    iconsContainer.insertAdjacentHTML('beforeend', reasoningIcon);
+    iconsContainer.insertAdjacentHTML('beforeend', toolCallsIcon);
+    iconsContainer.insertAdjacentHTML('beforeend', subHtml);
+    const capabilities = (iconsContainer.children.length) ? ` | ${iconsContainer.innerHTML}` : '';
     const contextLength = model.context_length || 'Unknown';
+    const modelName = model.name || model.id;
     return $((`
         <div class="flex-container alignItemsBaseline" title="${DOMPurify.sanitize(model.id)}">
-            <strong>${DOMPurify.sanitize(model.id)}</strong> | ${contextLength} ctx | <small>${price}</small>
+            <strong>${DOMPurify.sanitize(modelName)}</strong> | ${contextLength} ctx | <small>${price}</small>${capabilities}
         </div>
     `));
+}
-function calculateChutesCost() {
+function getAimlapiModelTemplate(option) {
-    if (oai_settings.chat_completion_source !== chat_completion_sources.CHUTES) {
+    const model = model_list.find(x => x.id === option?.element?.value);
-        return;
-    }
-    let cost = 'Unknown';
-    const model = model_list.find(x => x.id === oai_settings.chutes_model);
-    if (model?.pricing) {
-        const outputPrice = model.pricing?.output;
-        const inputPrice = model.pricing?.input;
-        if (outputPrice !== undefined && inputPrice !== undefined) {
+    if (!option.id || !model) {
-            const outputCost = Number(outputPrice / 1000000);
+        return option.text;
-            const inputCost = Number(inputPrice / 1000000);
-            const outputTokens = oai_settings.openai_max_tokens;
-            const inputTokens = (oai_settings.openai_max_context - outputTokens);
-            const totalCost = (outputCost * outputTokens) + (inputCost * inputTokens);
-            if (!isNaN(totalCost)) {
-                cost = '$' + totalCost.toFixed(4);
-            }
-        }
+    }
-    $('#chutes_max_prompt_cost').text(cost);
+    const vendor = model.id.split('/')[0];
+    return $((`
+        <div class="flex-container flexFlowColumn" title="${DOMPurify.sanitize(model.id)}">
+            <div><strong>${DOMPurify.sanitize(model.info?.name || model.name || model.id)}</strong> | ${vendor}</div>
+        </div>
+    `));
+}
 function saveModelList(data) {

     model_list.sort((a, b) => a?.id && b?.id && a.id.localeCompare(b.id));
     if (oai_settings.chat_completion_source == chat_completion_sources.OPENROUTER) {
-        model_list = openRouterSortBy(model_list, oai_settings.openrouter_sort_models);
+        model_list = sortModelsBy(model_list, oai_settings.sort_models, chat_completion_sources.OPENROUTER);
         $('#model_openrouter_select').empty();
+        $('#model_openrouter_select').append($('<option>', { value: openrouter_website_model, text: t`Use OpenRouter website setting` }));
-        if (true === oai_settings.openrouter_group_models) {
+        if (oai_settings.group_models) {
-            appendOpenRouterOptions(openRouterGroupByVendor(model_list), oai_settings.openrouter_group_models);
+            groupModelsByVendor(model_list, chat_completion_sources.OPENROUTER).forEach((models, vendor) => {
+                const optgroup = $('<optgroup>').attr('label', vendor);
+                models.forEach((model) => {
+                    optgroup.append($('<option>', { value: model.id, text: model.name }));
+                });
+                $('#model_openrouter_select').append(optgroup);
+            });
         } else {
-            appendOpenRouterOptions(model_list);
+            model_list.forEach((model) => {
+                $('#model_openrouter_select').append($('<option>', { value: model.id, text: model.name }));
+            });
+        }
         $('#model_openrouter_select').val(oai_settings.openrouter_model).trigger('change');

+    }
     if (oai_settings.chat_completion_source == chat_completion_sources.AIMLAPI) {
+        model_list = model_list.filter(m => m.type === 'chat-completion');
+        model_list = sortModelsBy(model_list, oai_settings.sort_models, chat_completion_sources.AIMLAPI);
         $('#model_aimlapi_select').empty();
-        const chatModels = model_list.filter(m => m.type === 'chat-completion');
-        appendAimlapiOptions(aimlapiGroupByVendor(chatModels));
+        if (oai_settings.group_models) {
+            groupModelsByVendor(model_list, chat_completion_sources.AIMLAPI).forEach((models, vendor) => {
+                const optgroup = $('<optgroup>').attr('label', vendor);
+                models.forEach((model) => {
+                    optgroup.append($('<option>', { value: model.id, text: model.info?.name || model.id }));
+                });
+                $('#model_aimlapi_select').append(optgroup);
+            });
+        } else {
+            model_list.forEach((model) => {
+                $('#model_aimlapi_select').append($('<option>', { value: model.id, text: model.info?.name || model.id }));
+            });
+        }
-        if (!oai_settings.aimlapi_model && chatModels.length > 0) {
+        if (!oai_settings.aimlapi_model && model_list.length > 0) {
-            oai_settings.aimlapi_model = chatModels[0].id;
+            oai_settings.aimlapi_model = model_list[0].id;
+        }
         $('#model_aimlapi_select').val(oai_settings.aimlapi_model).trigger('change');

     if (oai_settings.chat_completion_source == chat_completion_sources.ELECTRONHUB) {
         model_list = model_list.filter(model => model?.endpoints?.includes('/v1/chat/completions'));
+        model_list = sortModelsBy(model_list, oai_settings.sort_models, chat_completion_sources.ELECTRONHUB);
-        model_list = electronHubSortBy(model_list, oai_settings.electronhub_sort_models);
         $('#model_electronhub_select').empty();
-        const groupedList = oai_settings.electronhub_group_models ? electronHubGroupByVendor(model_list) : model_list;
+        if (oai_settings.group_models) {
-        appendElectronHubOptions(groupedList, oai_settings.electronhub_group_models);
+            groupModelsByVendor(model_list, chat_completion_sources.ELECTRONHUB).forEach((models, vendor) => {
+                const optgroup = $('<optgroup>').attr('label', vendor);
+                models.forEach((model) => {
+                    optgroup.append($('<option>', { value: model.id, text: model.name }));
+                });
+                $('#model_electronhub_select').append(optgroup);
+            });
+        } else {
+            model_list.forEach((model) => {
+                $('#model_electronhub_select').append($('<option>', { value: model.id, text: model.name }));
+            });
+        }
         const selectedModel = model_list.find(model => model.id === oai_settings.electronhub_model);
         if (model_list.length > 0 && (!selectedModel || !oai_settings.electronhub_model)) {

     if (oai_settings.chat_completion_source == chat_completion_sources.CHUTES) {
         model_list = model_list.filter(model => typeof model.id === 'string' && !model.id.toLowerCase().includes('affine'));
+        model_list = sortModelsBy(model_list, oai_settings.sort_models, chat_completion_sources.CHUTES);
-        model_list = chutesSortBy(model_list, oai_settings.chutes_sort_models);
         $('#model_chutes_select').empty();
-        for (const model of model_list) {
+        if (oai_settings.group_models) {
-            const option = $('<option>').val(model.id).text(model.id);
+            groupModelsByVendor(model_list, chat_completion_sources.CHUTES).forEach((models, vendor) => {
-            option.attr('data-model', JSON.stringify(model));
+                const optgroup = $('<optgroup>').attr('label', vendor);
-            $('#model_chutes_select').append(option);
+                models.forEach((model) => {
+                    optgroup.append($('<option>', { value: model.id, text: model.id }));
+                });
+                $('#model_chutes_select').append(optgroup);
+            });
+        } else {
+            model_list.forEach((model) => {
+                $('#model_chutes_select').append($('<option>', { value: model.id, text: model.id }));
+            });
+        }
         const selectedModel = model_list.find(model => model.id === oai_settings.chutes_model);

+    }
     if (oai_settings.chat_completion_source == chat_completion_sources.NANOGPT) {
+        model_list = sortModelsBy(model_list, oai_settings.sort_models, chat_completion_sources.NANOGPT);
         $('#model_nanogpt_select').empty();
+        if (oai_settings.group_models) {
+            groupModelsByVendor(model_list, chat_completion_sources.NANOGPT).forEach((models, vendor) => {
+                const optgroup = $('<optgroup>').attr('label', vendor);
+                models.forEach((model) => {
+                    optgroup.append($('<option>', { value: model.id, text: model.name || model.id }));
+                });
+                $('#model_nanogpt_select').append(optgroup);
+            });
+        } else {
             model_list.forEach((model) => {
-            $('#model_nanogpt_select').append(
+                $('#model_nanogpt_select').append($('<option>', { value: model.id, text: model.name || model.id }));
-                $('<option>', {
-                    value: model.id,
-                    text: model.id,
-                }));
             });
+        }
         const selectedModel = model_list.find(model => model.id === oai_settings.nanogpt_model);
         if (model_list.length > 0 && (!selectedModel || !oai_settings.nanogpt_model)) {

     if (oai_settings.chat_completion_source == chat_completion_sources.DEEPSEEK) {
         $('#model_deepseek_select').empty();
         model_list.forEach((model) => {
-            $('#model_deepseek_select').append(
+            $('#model_deepseek_select').append($('<option>', { value: model.id, text: model.id }));
-                $('<option>', {
-                    value: model.id,
-                    text: model.id,
-                }));
         });
         const selectedModel = model_list.find(model => model.id === oai_settings.deepseek_model);

     if (oai_settings.chat_completion_source === chat_completion_sources.POLLINATIONS) {
         $('#model_pollinations_select').empty();
         model_list.forEach((model) => {
-            $('#model_pollinations_select').append(
+            $('#model_pollinations_select').append($('<option>', { value: model.id, text: model.id }));
-                $('<option>', {
-                    value: model.id,
-                    text: model.id,
-                }));
         });
         const selectedModel = model_list.find(model => model.id === oai_settings.pollinations_model);

+    }
+}
-function appendOpenRouterOptions(model_list, groupModels = false, sort = false) {
+/**
-    $('#model_openrouter_select').append($('<option>', { value: openrouter_website_model, text: t`Use OpenRouter website setting` }));
+ * Sorts models by the specified property for the given source.
+ * @param {object[]} data - Array of model objects
-    const appendOption = (model, parent = null) => {
+ * @param {string} property - Sort property ('alphabetically', 'context_length', 'pricing.prompt', 'pricing.completion')
-        (parent || $('#model_openrouter_select')).append(
+ * @param {string} source - Chat Completion source (e.g., 'openrouter', 'chutes', 'electronhub', 'nanogpt')
-            $('<option>', {
+ * @returns {object[]} Sorted array of model objects
-                value: model.id,
+ */
-                text: model.name,
+function sortModelsBy(data, property, source) {
-            }));
+    switch (source) {
-    };
+        case chat_completion_sources.OPENROUTER:
-    if (groupModels) {
-        model_list.forEach((models, vendor) => {
-            const optgroup = $(`<optgroup label="${vendor}">`);
-            models.forEach((model) => {
-                appendOption(model, optgroup);
-            });
-            $('#model_openrouter_select').append(optgroup);
-        });
-    } else {
-        model_list.forEach((model) => {
-            appendOption(model);
-        });
-    }
-}
-const openRouterSortBy = (data, property = 'alphabetically') => {
             return data.sort((a, b) => {
                 if (property === 'context_length') {
-            return b.context_length - a.context_length;
+                    return (b.context_length || 0) - (a.context_length || 0);
-        } else if (property === 'pricing.prompt') {
+                } else if (property === 'pricing.input' || property === 'pricing.prompt') {
-            return parseFloat(a.pricing.prompt) - parseFloat(b.pricing.prompt);
+                    return parseFloat(a.pricing?.prompt || 0) - parseFloat(b.pricing?.prompt || 0);
+                } else if (property === 'pricing.output' || property === 'pricing.completion') {
+                    return parseFloat(a.pricing?.completion || 0) - parseFloat(b.pricing?.completion || 0);
                 } else {
-            // Alphabetically
+                    return a?.name && b?.name ? a.name.localeCompare(b.name) : 0;
-            return a?.name && b?.name && a.name.localeCompare(b.name);
+                }
             });
-};
+        case chat_completion_sources.CHUTES:
-function openRouterGroupByVendor(array) {
-    return array.reduce((acc, curr) => {
-        const vendor = curr.id.split('/')[0];
-        if (!acc.has(vendor)) {
-            acc.set(vendor, []);
-        }
-        acc.get(vendor).push(curr);
-        return acc;
-    }, new Map());
-}
-function chutesSortBy(data, property = 'alphabetically') {
             return data.sort((a, b) => {
                 if (property === 'context_length') {
-            return b.context_length - a.context_length;
+                    return (b.context_length || 0) - (a.context_length || 0);
-        } else if (property === 'pricing.input') {
+                } else if (property === 'pricing.input' || property === 'pricing.prompt') {
-            const aPrice = parseFloat(a.pricing?.input || 0);
+                    return parseFloat(a.pricing?.input || 0) - parseFloat(b.pricing?.input || 0);
-            const bPrice = parseFloat(b.pricing?.input || 0);
+                } else if (property === 'pricing.output' || property === 'pricing.completion') {
-            return aPrice - bPrice;
+                    return parseFloat(a.pricing?.output || 0) - parseFloat(b.pricing?.output || 0);
-        } else if (property === 'pricing.output') {
-            const aPrice = parseFloat(a.pricing?.output || 0);
-            const bPrice = parseFloat(b.pricing?.output || 0);
-            return aPrice - bPrice;
                 } else {
-            return a?.id && b?.id && a.id.localeCompare(b.id);
+                    return a?.id && b?.id ? a.id.localeCompare(b.id) : 0;
+                }
             });
+        case chat_completion_sources.ELECTRONHUB:
+            return data.sort((a, b) => {
+                if (property === 'context_length') {
+                    return (b.tokens || 0) - (a.tokens || 0);
+                } else if (property === 'pricing.input' || property === 'pricing.prompt') {
+                    return parseFloat(a.pricing?.input || 0) - parseFloat(b.pricing?.input || 0);
+                } else if (property === 'pricing.output' || property === 'pricing.completion') {
+                    return parseFloat(a.pricing?.output || 0) - parseFloat(b.pricing?.output || 0);
+                } else {
+                    return a?.name && b?.name ? a.name.localeCompare(b.name) : 0;
+                }
-function appendElectronHubOptions(model_list, groupModels = false) {
-    const appendOption = (model, parent = null) => {
-        (parent || $('#model_electronhub_select')).append(
-            $('<option>', {
-                value: model.id,
-                text: model.name,
-            }));
-    };
-    if (groupModels) {
-        model_list.forEach((models, vendor) => {
-            const optgroup = $('<optgroup>').attr('label', vendor);
-            models.forEach((model) => {
-                appendOption(model, optgroup);
-            });
-            $('#model_electronhub_select').append(optgroup);
             });
+        case chat_completion_sources.NANOGPT:
+            return data.sort((a, b) => {
+                if (property === 'context_length') {
+                    return (b.context_length || 0) - (a.context_length || 0);
+                } else if (property === 'pricing.input' || property === 'pricing.prompt') {
+                    return parseFloat(a.pricing?.prompt || 0) - parseFloat(b.pricing?.prompt || 0);
+                } else if (property === 'pricing.output' || property === 'pricing.completion') {
+                    return parseFloat(a.pricing?.completion || 0) - parseFloat(b.pricing?.completion || 0);
                 } else {
-        model_list.forEach((model) => {
+                    return a?.name && b?.name ? a.name.localeCompare(b.name) : 0;
-            appendOption(model);
-        });
+                }
-}
+            });
+        case chat_completion_sources.AIMLAPI:
-function electronHubSortBy(data, property = 'alphabetically') {
             return data.sort((a, b) => {
                 if (property === 'context_length') {
-            return b.tokens - a.tokens;
+                    return (b.info?.contextLength || 0) - (a.info?.contextLength || 0);
-        } else if (property === 'pricing.input') {
-            return parseFloat(a.pricing.input) - parseFloat(b.pricing.input);
-        } else if (property === 'pricing.output') {
-            return parseFloat(a.pricing.output) - parseFloat(b.pricing.output);
                 } else {
-            return a?.name && b?.name && a.name.localeCompare(b.name);
+                    // No pricing information on the API. Sort alphabetically by name.
+                    return a?.info?.name && b?.info?.name ? a.info.name.localeCompare(b.info.name) : 0;
+                }
             });
+        default:
+            return data;
+    }
+}
-function electronHubGroupByVendor(array) {
+/**
+ * Groups models by vendor for the given source. If not supported, returns a map with a single entry containing all models.
+ * @param {object[]} array Array of model objects
+ * @param {string} source Chat Completion source (e.g., 'openrouter')
+ * @returns {Map<string, object[]>} Map of vendor to array of models
+ */
+function groupModelsByVendor(array, source) {
+    switch (source) {
+        case chat_completion_sources.OPENROUTER:
             return array.reduce((acc, curr) => {
-        const vendor = String(curr?.name || curr?.id || 'Other').split(':')[0].trim() || 'Other';
+                const vendor = curr.id.split('/')[0];
                 if (!acc.has(vendor)) {
                     acc.set(vendor, []);
+                }
                 acc.get(vendor).push(curr);
                 return acc;
             }, new Map());
+        case chat_completion_sources.ELECTRONHUB:
+            return array.reduce((acc, curr) => {
+                const vendor = String(curr?.name || curr?.id || 'Other').split(':')[0].trim() || 'Other';
+                if (!acc.has(vendor)) {
+                    acc.set(vendor, []);
+                }
+                acc.get(vendor).push(curr);
-function aimlapiGroupByVendor(array) {
+                return acc;
+            }, new Map());
+        case chat_completion_sources.NANOGPT:
             return array.reduce((acc, curr) => {
-        const vendor = curr.info.developer;
+                const vendorPart = /\//.test(curr.id) ? curr.id.split('/')[0] : curr.id.split('-')[0];
+                const vendor = String(vendorPart?.trim()?.toLowerCase() || 'Other');
                 if (!acc.has(vendor)) {
                     acc.set(vendor, []);
+                }
                 acc.get(vendor).push(curr);
                 return acc;
             }, new Map());
+        case chat_completion_sources.CHUTES:
+            return array.reduce((acc, curr) => {
+                const vendor = curr.id.split('/')[0];
+                if (!acc.has(vendor)) {
+                    acc.set(vendor, []);
+                }
+                acc.get(vendor).push(curr);
-function appendAimlapiOptions(model_list) {
+                return acc;
-    const appendOption = (model, parent = null) => {
+            }, new Map());
-        (parent || $('#model_aimlapi_select')).append(
+        case chat_completion_sources.AIMLAPI:
-            $('<option>', {
+            return array.reduce((acc, curr) => {
-                value: model.id,
+                const vendor = curr.info?.developer || 'Other';
-                text: model.info?.name || model.name || model.id,
+                if (!acc.has(vendor)) {
-            }));
+                    acc.set(vendor, []);
-    };
-    model_list.forEach((models, vendor) => {
-        const optgroup = $(`<optgroup label="${vendor}">`);
-        models.forEach((model) => {
-            appendOption(model, optgroup);
-        });
-        $('#model_aimlapi_select').append(optgroup);
-    });
+                }
+                acc.get(vendor).push(curr);
-function getAimlapiModelTemplate(option) {
+                return acc;
-    const model = model_list.find(x => x.id === option?.element?.value);
+            }, new Map());
+        default:
-    if (!option.id || !model) {
+            return new Map([['', array]]);
-        return option.text;
+    }
-    const vendor = model.id.split('/')[0];
-    return $((`
-        <div class="flex-container flexFlowColumn" title="${DOMPurify.sanitize(model.id)}">
-            <div><strong>${DOMPurify.sanitize(model.info?.name || model.name || model.id)}</strong> | ${vendor}</div>
-        </div>
-    `));
+}
 /**

         { oldKey: 'use_makersuite_sysprompt', oldValue: true, newKey: 'use_sysprompt', newValue: true },
         { oldKey: 'mistralai_model', oldValue: /^(mistral-medium|mistral-small)$/, newKey: 'mistralai_model', newValue: (settings.mistralai_model + '-latest') },
         { oldKey: 'deepseek_model', oldValue: /^deepseek-(chat|reasoner|coder)$/, newKey: 'deepseek_model', newValue: 'deepseek-v4-flash' },
+        { oldKey: 'openrouter_sort_models', oldValue: 'alphabetically', newKey: 'sort_models', newValue: 'alphabetically' },
+        { oldKey: 'openrouter_sort_models', oldValue: 'pricing.prompt', newKey: 'sort_models', newValue: 'pricing.prompt' },
+        { oldKey: 'openrouter_sort_models', oldValue: 'context_length', newKey: 'sort_models', newValue: 'context_length' },
+        { oldKey: 'openrouter_group_models', oldValue: true, newKey: 'group_models', newValue: true },
     ];
     for (const migration of migrateMap) {

     eventSource.emit(event_types.CHATCOMPLETION_MODEL_CHANGED, value);
+}
-async function onOpenrouterModelSortChange() {
-    await getStatusOpen();
-}
-async function onChutesModelSortChange() {
-    await getStatusOpen();
-}
-async function onElectronHubModelSortChange() {
-    await getStatusOpen();
-}
 async function onNewPresetClick() {
     const name = await Popup.show.input(t`Preset name:`, t`Hint: Use a character/group name to bind preset to a specific chat.`, oai_settings.preset_settings_openai);

         saveSettingsDebounced();
     });
-    $('#openrouter_group_models').on('input', function () {
-        oai_settings.openrouter_group_models = !!$(this).prop('checked');
-        saveSettingsDebounced();
-    });
-    $('#openrouter_sort_models').on('input', function () {
-        oai_settings.openrouter_sort_models = String($(this).val());
-        saveSettingsDebounced();
-    });
     $('#openrouter_allow_fallbacks').on('input', function () {
         oai_settings.openrouter_allow_fallbacks = !!$(this).prop('checked');
         updateOpenRouterProvidersWarning('#openrouter_providers_chat');

         saveSettingsDebounced();
     });
-    $('#electronhub_sort_models').on('input', function () {
-        oai_settings.electronhub_sort_models = String($(this).val());
-        saveSettingsDebounced();
-    });
-    $('#chutes_sort_models').on('input', function () {
-        oai_settings.chutes_sort_models = String($(this).val());
-        saveSettingsDebounced();
-    });
-    $('#electronhub_group_models').on('input', function () {
-        oai_settings.electronhub_group_models = !!$(this).prop('checked');
-        saveSettingsDebounced();
-    });
     $('#squash_system_messages').on('input', function () {
         oai_settings.squash_system_messages = !!$(this).prop('checked');
         saveSettingsDebounced();

         saveSettingsDebounced();
     });
+    $('#cc_group_models').on('input', async () => {
+        oai_settings.group_models = $('#cc_group_models').prop('checked');
+        reconnectOpenAi();
+        saveSettingsDebounced();
+    });
+    $('#cc_sort_models').on('input', async () => {
+        oai_settings.sort_models = $('#cc_sort_models').val().toString();
+        reconnectOpenAi();
+        saveSettingsDebounced();
+    });
     $('#api_button_openai').on('click', onConnectButtonClick);
     $('#openai_reverse_proxy').on('input', onReverseProxyInput);
     $('#model_openai_select').on('change', onModelChange);

     $('#vertexai_validate_service_account').on('click', onVertexAIValidateServiceAccount);
     $('#vertexai_clear_service_account').on('click', onVertexAIClearServiceAccount);
     $('#model_openrouter_select').on('change', onModelChange);
-    $('#openrouter_group_models').on('change', onOpenrouterModelSortChange);
-    $('#openrouter_sort_models').on('change', onOpenrouterModelSortChange);
-    $('#chutes_sort_models').on('change', onChutesModelSortChange);
-    $('#electronhub_group_models').on('change', onElectronHubModelSortChange);
-    $('#electronhub_sort_models').on('change', onElectronHubModelSortChange);
     $('#model_ai21_select').on('change', onModelChange);
     $('#model_mistralai_select').on('change', onModelChange);
     $('#model_cohere_select').on('change', onModelChange);