implemented proxy preset manager

public/index.html

@@ -747,47 +747,69 @@
                                     </div>
                                 </div>
                                 <hr data-source="openai,claude">
-                                <div class="range-block" data-source="openai,claude">
+                                <div data-newbie-hidden class="inline-drawer wide100p" data-source="openai,claude">
-                                    <div class="range-block-title justifyLeft" data-i18n="OpenAI Reverse Proxy">
+                                    <div class="inline-drawer-toggle inline-drawer-header">
-                                        OpenAI / Claude Reverse Proxy
+                                        <b data-i18n="Reverse Proxy">Reverse Proxy</b>
+                                        <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                     </div>
-                                    <div class="toggle-description justifyLeft">
+                                    <div class="inline-drawer-content">
-                                        <span data-i18n="Alternative server URL (leave empty to use the default value).">
+                                        <div class="range-block-title justifyLeft" data-i18n="Proxy Name">
-                                            Alternative server URL (leave empty to use the default value).<br>
+                                            Proxy Name
-                                        </span>
+                                        </div>
-                                        <div id="ReverseProxyWarningMessage" class="reverse_proxy_warning">
+                                        <div class="toggle-description justifyLeft">
-                                            <b data-i18n="Remove your real OAI API Key from the API panel BEFORE typing anything into this box">
+                                            <span data-i18n="This will show up as your saved preset.">
-                                                Remove your real OAI API Key from the API panel BEFORE typing anything
+                                                This will show up as your saved preset.<br>
-                                                into this box.
+                                            </span>
-                                            </b>
+                                        </div>
-                                            <hr>
+                                        <div class="wide100p">
-                                            <b data-i18n="We cannot provide support for problems encountered while using an unofficial OpenAI proxy">
+                                            <input id="openai_reverse_proxy_name" type="text" class="text_pole" placeholder="..." maxlength="100" />
-                                                We cannot provide support for problems encountered while using an
+                                        </div>
-                                                unofficial OpenAI proxy.
+                                        <div class="range-block-title justifyLeft" data-i18n="Proxy Server URL">
-                                            </b>
+                                            Proxy Server URL
+                                        </div>
+                                        <div class="toggle-description justifyLeft">
+                                            <span data-i18n="Alternative server URL (leave empty to use the default value).">
+                                                Alternative server URL (leave empty to use the default value).<br>
+                                            </span>
+                                            <div id="ReverseProxyWarningMessage" class="reverse_proxy_warning">
+                                                <b data-i18n="Remove your real OAI API Key from the API panel BEFORE typing anything into this box">
+                                                    Remove your real OAI API Key from the API panel BEFORE typing anything
+                                                    into this box.
+                                                </b>
+                                                <hr>
+                                                <b data-i18n="We cannot provide support for problems encountered while using an unofficial OpenAI proxy">
+                                                    We cannot provide support for problems encountered while using an
+                                                    unofficial OpenAI proxy.
+                                                </b>
+                                            </div>
+                                        </div>
+                                        <div class="wide100p">
+                                            <input id="openai_reverse_proxy" type="text" class="text_pole" placeholder="https://api.openai.com/v1" maxlength="500" />
+                                            <small class="reverse_proxy_warning">
+                                                Doesn't work? Try adding <code>/v1</code> at the end!
+                                            </small>
+                                        </div>
+                                        <div class="range-block-title justifyLeft" data-i18n="Proxy Password">
+                                            Proxy Password
+                                        </div>
+                                        <div class="toggle-description justifyLeft">
+                                            <span data-i18n="Will be used as a password for the proxy instead of API key.">
+                                                Will be used as a password for the proxy instead of API key.<br>
+                                            </span>
+                                        </div>
+                                        <div class="flex-container width100p">
+                                            <input id="openai_proxy_password" type="password" class="text_pole flex1" placeholder="" maxlength="500" form="openai_form" />
+                                            <div id="openai_proxy_password_show" title="Peek a password" class="menu_button fa-solid fa-eye-slash fa-fw"></div>
+                                        </div>
+                                        <div class="openai_logit_bias_preset_form">
+                                            <select id="openai_proxy_preset">
+                                            </select>
+                                            <i id="save_proxy" class="menu_button fa-solid fa-save" title="Save Proxy" data-i18n="[title]Save Proxy"></i>
+                                            <i id="delete_proxy" class="menu_button fa-solid fa-trash" title="Delete Proxy" data-i18n="[title]Delete Proxy"></i>
                                         </div>
                                     </div>
-                                    <div class="wide100p">
-                                        <input id="openai_reverse_proxy" type="text" class="text_pole" placeholder="https://api.openai.com/v1" maxlength="500" />
-                                        <small class="reverse_proxy_warning">
-                                            Doesn't work? Try adding <code>/v1</code> at the end!
-                                        </small>
-                                    </div>
-                                </div>
-                                <div class="range-block" data-source="openai,claude">
-                                    <div class="range-block-title justifyLeft" data-i18n="Proxy Password">
-                                        Proxy Password
-                                    </div>
-                                    <div class="toggle-description justifyLeft">
-                                        <span data-i18n="Will be used as a password for the proxy instead of API key.">
-                                            Will be used as a password for the proxy instead of API key.<br>
-                                        </span>
-                                    </div>
-                                    <div class="flex-container width100p">
-                                        <input id="openai_proxy_password" type="password" class="text_pole flex1" placeholder="" maxlength="500" form="openai_form" />
-                                        <div id="openai_proxy_password_show" title="Peek a password" class="menu_button fa-solid fa-eye-slash fa-fw"></div>
-                                    </div>
                                 </div>
+                                <hr data-source="openai,claude">
                                 <div data-newbie-hidden class="range-block" data-source="openai,openrouter,mistralai,custom">
                                     <div class="range-block-title justifyLeft" data-i18n="Seed">
                                         Seed

public/script.js

@@ -93,6 +93,9 @@ import {
     chat_completion_sources,
     getChatCompletionModel,
     isOpenRouterWithInstruct,
+    proxies,
+    loadProxyPresets,
+    selected_proxy,
 } from './scripts/openai.js';
 
 import {
@@ -5650,6 +5653,9 @@ async function getSettings() {
         // Load background
         loadBackgroundSettings(settings);
 
+        // Load proxy presets
+        loadProxyPresets(settings);
+
         // Allow subscribers to mutate settings
         eventSource.emit(event_types.SETTINGS_LOADED_AFTER, settings);
 
@@ -5728,7 +5734,6 @@ async function saveSettings(type) {
     }
 
     //console.log('Entering settings with name1 = '+name1);
-
     return jQuery.ajax({
         type: 'POST',
         url: '/api/settings/save',
@@ -5756,6 +5761,8 @@ async function saveSettings(type) {
             kai_settings: kai_settings,
             oai_settings: oai_settings,
             background: background_settings,
+            proxies: proxies,
+            selected_proxy: selected_proxy,
         }, null, 4),
         beforeSend: function () { },
         cache: false,

public/scripts/openai.js

@@ -317,6 +317,15 @@ const oai_settings = {
     seed: -1,
 };
 
+export let proxies = [
+    {
+        name: 'None',
+        url: '',
+        password: '',
+    },
+];
+export let selected_proxy = proxies[0];
+
 let openai_setting_names;
 let openai_settings;
 
@@ -3809,6 +3818,110 @@ export function isImageInliningSupported() {
     }
 }
 
+/**
+ * Proxy stuff
+ */
+export function loadProxyPresets(settings) {
+    let proxyPresets = settings.proxies;
+    selected_proxy = settings.selected_proxy || selected_proxy;
+    if (!Array.isArray(proxyPresets) || proxyPresets.length === 0) {
+        proxyPresets = proxies;
+    } else {
+        proxies = proxyPresets;
+    }
+
+    $('#openai_proxy_preset').empty();
+
+    for (const preset of proxyPresets) {
+        const option = document.createElement('option');
+        option.innerText = preset.name;
+        option.value = preset.name;
+        option.selected = preset.name === 'None';
+        $('#openai_proxy_preset').append(option);
+    }
+    $('#openai_proxy_preset').val(selected_proxy.name);
+    setProxyPreset(selected_proxy.name, selected_proxy.url, selected_proxy.password);
+}
+
+function setProxyPreset(name, url, password) {
+    const preset = proxies.find(p => p.name === name);
+    if (preset) {
+        preset.url = url;
+        preset.password = password;
+        selected_proxy = preset;
+    } else {
+        let new_proxy = { name, url, password };
+        proxies.push(new_proxy);
+        selected_proxy = new_proxy;
+    }
+
+    $('#openai_reverse_proxy_name').val(name);
+    oai_settings.reverse_proxy = url;
+    $('#openai_reverse_proxy').val(oai_settings.reverse_proxy);
+    oai_settings.proxy_password = password;
+    $('#openai_proxy_password').val(oai_settings.proxy_password);
+    reconnectOpenAi();
+}
+
+function onProxyPresetChange() {
+    const value = String($('#openai_proxy_preset').find(':selected').val());
+    const selectedPreset = proxies.find(preset => preset.name === value);
+
+    if (selectedPreset) {
+        setProxyPreset(selectedPreset.name, selectedPreset.url, selectedPreset.password);
+    } else {
+        console.error(`Proxy preset "${value}" not found in proxies array.`);
+    }
+    saveSettingsDebounced();
+}
+
+$('#save_proxy').on('click', async function () {
+    const presetName = $('#openai_reverse_proxy_name').val();
+    const reverseProxy = $('#openai_reverse_proxy').val();
+    const proxyPassword = $('#openai_proxy_password').val();
+
+    setProxyPreset(presetName, reverseProxy, proxyPassword);
+    saveSettingsDebounced();
+    toastr.success('Proxy Saved');
+    if($('#openai_proxy_preset').val() !== presetName) {
+        const option = document.createElement('option');
+        option.text = presetName;
+        option.value = presetName;
+
+        $('#openai_proxy_preset').append(option);
+    }
+    $('#openai_proxy_preset').val(presetName);
+});
+
+$('#delete_proxy').on('click', async function () {
+    const presetName = $('#openai_reverse_proxy_name').val();
+    const index = proxies.findIndex(preset => preset.name === presetName);
+
+    if (index !== -1) {
+        proxies.splice(index, 1);
+        $('#openai_proxy_preset option[value="' + presetName + '"]').remove();
+
+        if (proxies.length > 0) {
+            const newIndex = Math.max(0, index - 1);
+            selected_proxy = proxies[newIndex];
+        } else {
+            selected_proxy = { name: 'None', url: '', password: '' };
+        }
+
+        $('#openai_reverse_proxy_name').val(selected_proxy.name);
+        oai_settings.reverse_proxy = selected_proxy.url;
+        $('#openai_reverse_proxy').val(selected_proxy.url);
+        oai_settings.proxy_password = selected_proxy.password;
+        $('#openai_proxy_password').val(selected_proxy.password);
+
+        saveSettingsDebounced();
+        $('#openai_proxy_preset').val(selected_proxy.name);
+        toastr.success('Proxy Deleted');
+    } else {
+        toastr.error(`Could not find proxy with name "${presetName}"`);
+    }
+});
+
 $(document).ready(async function () {
     $('#test_api_button').on('click', testApiConnection);
 
@@ -4189,4 +4302,5 @@ $(document).ready(async function () {
     $('#import_oai_preset').on('click', onImportPresetClick);
     $('#openai_proxy_password_show').on('click', onProxyPasswordShowClick);
     $('#customize_additional_parameters').on('click', onCustomizeParametersClick);
+    $('#openai_proxy_preset').on('change', onProxyPresetChange);
 });