Merge branch 'staging' into small-bookmark-updates

2025-06-05 21:59:27 +02:00 · 2024-09-10 19:05:05 +02:00
parent 5ab781ab30 e5f42253c6
commit 894b95679c
32 changed files with 1624 additions and 594 deletions
--- a/public/scripts/extensions.js
+++ b/public/scripts/extensions.js
@@ -123,6 +123,11 @@ const extension_settings = {
        /** @type {string[]} */
        custom: [],
    },
+    connectionManager: {
+        selectedProfile: '',
+        /** @type {import('./extensions/connection-manager/index.js').ConnectionProfile[]} */
+        profiles: [],
+    },
    dice: {},
    /** @type {import('./char-data.js').RegexScriptData[]} */
    regex: [],
--- a/public/scripts/extensions/connection-manager/index.js
+++ b/public/scripts/extensions/connection-manager/index.js
@@ -0,0 +1,612 @@
+import { event_types, eventSource, main_api, saveSettingsDebounced } from '../../../script.js';
+import { extension_settings, renderExtensionTemplateAsync } from '../../extensions.js';
+import { callGenericPopup, Popup, POPUP_TYPE } from '../../popup.js';
+import { SlashCommand } from '../../slash-commands/SlashCommand.js';
+import { SlashCommandAbortController } from '../../slash-commands/SlashCommandAbortController.js';
+import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
+import { commonEnumProviders, enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
+import { SlashCommandDebugController } from '../../slash-commands/SlashCommandDebugController.js';
+import { enumTypes, SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
+import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
+import { SlashCommandScope } from '../../slash-commands/SlashCommandScope.js';
+import { collapseSpaces, getUniqueName, isFalseBoolean, uuidv4 } from '../../utils.js';
+
+const MODULE_NAME = 'connection-manager';
+const NONE = '<None>';
+
+const DEFAULT_SETTINGS = {
+    profiles: [],
+    selectedProfile: null,
+};
+
+const COMMON_COMMANDS = [
+    'api',
+    'preset',
+    'api-url',
+    'model',
+];
+
+const CC_COMMANDS = [
+    ...COMMON_COMMANDS,
+    'proxy',
+];
+
+const TC_COMMANDS = [
+    ...COMMON_COMMANDS,
+    'instruct',
+    'context',
+    'instruct-state',
+    'tokenizer',
+];
+
+const FANCY_NAMES = {
+    'api': 'API',
+    'api-url': 'Server URL',
+    'preset': 'Settings Preset',
+    'model': 'Model',
+    'proxy': 'Proxy Preset',
+    'instruct-state': 'Instruct Mode',
+    'instruct': 'Instruct Template',
+    'context': 'Context Template',
+    'tokenizer': 'Tokenizer',
+};
+
+/**
+ * A wrapper for the connection manager spinner.
+ */
+class ConnectionManagerSpinner {
+    /**
+     * @type {AbortController[]}
+     */
+    static abortControllers = [];
+
+    /** @type {HTMLElement} */
+    spinnerElement;
+
+    /** @type {AbortController} */
+    abortController = new AbortController();
+
+    constructor() {
+        // @ts-ignore
+        this.spinnerElement = document.getElementById('connection_profile_spinner');
+        this.abortController = new AbortController();
+    }
+
+    start() {
+        ConnectionManagerSpinner.abortControllers.push(this.abortController);
+        this.spinnerElement.classList.remove('hidden');
+    }
+
+    stop() {
+        this.spinnerElement.classList.add('hidden');
+    }
+
+    isAborted() {
+        return this.abortController.signal.aborted;
+    }
+
+    static abort() {
+        for (const controller of ConnectionManagerSpinner.abortControllers) {
+            controller.abort();
+        }
+        ConnectionManagerSpinner.abortControllers = [];
+    }
+}
+
+/**
+ * Get named arguments for the command callback.
+ * @param {object} [args] Additional named arguments
+ * @returns {object} Named arguments
+ */
+function getNamedArguments(args = {}) {
+    // None of the commands here use underscored args, but better safe than sorry
+    return {
+        _scope: new SlashCommandScope(),
+        _abortController: new SlashCommandAbortController(),
+        _debugController: new SlashCommandDebugController(),
+        _parserFlags: {},
+        _hasUnnamedArgument: false,
+        quiet: 'true',
+        ...args,
+    };
+}
+
+/** @type {() => SlashCommandEnumValue[]} */
+const profilesProvider = () => [
+    new SlashCommandEnumValue(NONE),
+    ...extension_settings.connectionManager.profiles.map(p => new SlashCommandEnumValue(p.name, null, enumTypes.name, enumIcons.server)),
+];
+
+/**
+ * @typedef {Object} ConnectionProfile
+ * @property {string} id Unique identifier
+ * @property {string} mode Mode of the connection profile
+ * @property {string} [name] Name of the connection profile
+ * @property {string} [api] API
+ * @property {string} [preset] Settings Preset
+ * @property {string} [model] Model
+ * @property {string} [proxy] Proxy Preset
+ * @property {string} [instruct] Instruct Template
+ * @property {string} [context] Context Template
+ * @property {string} [instruct-state] Instruct Mode
+ * @property {string} [tokenizer] Tokenizer
+ */
+
+/**
+ * Finds the best match for the search value.
+ * @param {string} value Search value
+ * @returns {ConnectionProfile|null} Best match or null
+ */
+function findProfileByName(value) {
+    // Try to find exact match
+    const profile = extension_settings.connectionManager.profiles.find(p => p.name === value);
+
+    if (profile) {
+        return profile;
+    }
+
+    // Try to find fuzzy match
+    const fuse = new Fuse(extension_settings.connectionManager.profiles, { keys: ['name'] });
+    const results = fuse.search(value);
+
+    if (results.length === 0) {
+        return null;
+    }
+
+    const bestMatch = results[0];
+    return bestMatch.item;
+}
+
+/**
+ * Reads the connection profile from the commands.
+ * @param {string} mode Mode of the connection profile
+ * @param {ConnectionProfile} profile Connection profile
+ * @param {boolean} [cleanUp] Whether to clean up the profile
+ */
+async function readProfileFromCommands(mode, profile, cleanUp = false) {
+    const commands = mode === 'cc' ? CC_COMMANDS : TC_COMMANDS;
+    const opposingCommands = mode === 'cc' ? TC_COMMANDS : CC_COMMANDS;
+    for (const command of commands) {
+        try {
+            const args = getNamedArguments();
+            const result = await SlashCommandParser.commands[command].callback(args, '');
+            if (result) {
+                profile[command] = result;
+                continue;
+            }
+        } catch (error) {
+            console.error(`Failed to execute command: ${command}`, error);
+        }
+    }
+
+    if (cleanUp) {
+        for (const command of opposingCommands) {
+            if (commands.includes(command)) {
+                continue;
+            }
+
+            delete profile[command];
+        }
+    }
+}
+
+/**
+ * Creates a new connection profile.
+ * @param {string} [forceName] Name of the connection profile
+ * @returns {Promise<ConnectionProfile>} Created connection profile
+ */
+async function createConnectionProfile(forceName = null) {
+    const mode = main_api === 'openai' ? 'cc' : 'tc';
+    const id = uuidv4();
+    const profile = {
+        id,
+        mode,
+    };
+
+    await readProfileFromCommands(mode, profile);
+
+    const profileForDisplay = makeFancyProfile(profile);
+    const template = await renderExtensionTemplateAsync(MODULE_NAME, 'profile', { profile: profileForDisplay });
+    const isNameTaken = (n) => extension_settings.connectionManager.profiles.some(p => p.name === n);
+    const suggestedName = getUniqueName(collapseSpaces(`${profile.api ?? ''} ${profile.model ?? ''} - ${profile.preset ?? ''}`), isNameTaken);
+    const name = forceName ?? await callGenericPopup(template, POPUP_TYPE.INPUT, suggestedName, { rows: 2 });
+
+    if (!name) {
+        return null;
+    }
+
+    if (isNameTaken(name) || name === NONE) {
+        toastr.error('A profile with the same name already exists.');
+        return null;
+    }
+
+    profile.name = name;
+    return profile;
+}
+
+/**
+ * Deletes the selected connection profile.
+ * @returns {Promise<void>}
+ */
+async function deleteConnectionProfile() {
+    const selectedProfile = extension_settings.connectionManager.selectedProfile;
+    if (!selectedProfile) {
+        return;
+    }
+
+    const index = extension_settings.connectionManager.profiles.findIndex(p => p.id === selectedProfile);
+    if (index === -1) {
+        return;
+    }
+
+    const name = extension_settings.connectionManager.profiles[index].name;
+    const confirm = await Popup.show.confirm('Are you sure you want to delete the selected profile?', name);
+
+    if (!confirm) {
+        return;
+    }
+
+    extension_settings.connectionManager.profiles.splice(index, 1);
+    extension_settings.connectionManager.selectedProfile = null;
+    saveSettingsDebounced();
+}
+
+/**
+ * Formats the connection profile for display.
+ * @param {ConnectionProfile} profile Connection profile
+ * @returns {Object} Fancy profile
+ */
+function makeFancyProfile(profile) {
+    return Object.entries(FANCY_NAMES).reduce((acc, [key, value]) => {
+        if (!profile[key]) return acc;
+        acc[value] = profile[key];
+        return acc;
+    }, {});
+}
+
+/**
+ * Applies the connection profile.
+ * @param {ConnectionProfile} profile Connection profile
+ * @returns {Promise<void>}
+ */
+async function applyConnectionProfile(profile) {
+    if (!profile) {
+        return;
+    }
+
+    // Abort any ongoing profile application
+    ConnectionManagerSpinner.abort();
+
+    const mode = profile.mode;
+    const commands = mode === 'cc' ? CC_COMMANDS : TC_COMMANDS;
+    const spinner = new ConnectionManagerSpinner();
+    spinner.start();
+
+    for (const command of commands) {
+        if (spinner.isAborted()) {
+            throw new Error('Profile application aborted');
+        }
+
+        const argument = profile[command];
+        if (!argument) {
+            continue;
+        }
+        try {
+            const args = getNamedArguments();
+            await SlashCommandParser.commands[command].callback(args, argument);
+        } catch (error) {
+            console.error(`Failed to execute command: ${command} ${argument}`, error);
+        }
+    }
+
+    spinner.stop();
+}
+
+/**
+ * Updates the selected connection profile.
+ * @param {ConnectionProfile} profile Connection profile
+ * @returns {Promise<void>}
+ */
+async function updateConnectionProfile(profile) {
+    profile.mode = main_api === 'openai' ? 'cc' : 'tc';
+    await readProfileFromCommands(profile.mode, profile, true);
+}
+
+/**
+ * Renders the connection profile details.
+ * @param {HTMLSelectElement} profiles Select element containing connection profiles
+ */
+function renderConnectionProfiles(profiles) {
+    profiles.innerHTML = '';
+    const noneOption = document.createElement('option');
+
+    noneOption.value = '';
+    noneOption.textContent = NONE;
+    noneOption.selected = !extension_settings.connectionManager.selectedProfile;
+    profiles.appendChild(noneOption);
+
+    for (const profile of extension_settings.connectionManager.profiles) {
+        const option = document.createElement('option');
+        option.value = profile.id;
+        option.textContent = profile.name;
+        option.selected = profile.id === extension_settings.connectionManager.selectedProfile;
+        profiles.appendChild(option);
+    }
+}
+
+/**
+ * Renders the content of the details element.
+ * @param {HTMLElement} detailsContent Content element of the details
+ */
+async function renderDetailsContent(detailsContent) {
+    detailsContent.innerHTML = '';
+    if (detailsContent.classList.contains('hidden')) {
+        return;
+    }
+    const selectedProfile = extension_settings.connectionManager.selectedProfile;
+    const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+    if (profile) {
+        const profileForDisplay = makeFancyProfile(profile);
+        const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
+        detailsContent.innerHTML = template;
+    } else {
+        detailsContent.textContent = 'No profile selected';
+    }
+}
+
+(async function () {
+    extension_settings.connectionManager = extension_settings.connectionManager || structuredClone(DEFAULT_SETTINGS);
+
+    for (const key of Object.keys(DEFAULT_SETTINGS)) {
+        if (extension_settings.connectionManager[key] === undefined) {
+            extension_settings.connectionManager[key] = DEFAULT_SETTINGS[key];
+        }
+    }
+
+    const container = document.getElementById('rm_api_block');
+    const settings = await renderExtensionTemplateAsync(MODULE_NAME, 'settings');
+    container.insertAdjacentHTML('afterbegin', settings);
+
+    /** @type {HTMLSelectElement} */
+    // @ts-ignore
+    const profiles = document.getElementById('connection_profiles');
+    renderConnectionProfiles(profiles);
+
+    function toggleProfileSpecificButtons() {
+        const profileId = extension_settings.connectionManager.selectedProfile;
+        const profileSpecificButtons = ['update_connection_profile', 'reload_connection_profile', 'delete_connection_profile'];
+        profileSpecificButtons.forEach(id => document.getElementById(id).classList.toggle('disabled', !profileId));
+    }
+    toggleProfileSpecificButtons();
+
+    profiles.addEventListener('change', async function () {
+        const selectedProfile = profiles.selectedOptions[0];
+        if (!selectedProfile) {
+            // Safety net for preventing the command getting stuck
+            await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
+            return;
+        }
+
+        const profileId = selectedProfile.value;
+        extension_settings.connectionManager.selectedProfile = profileId;
+        saveSettingsDebounced();
+        await renderDetailsContent(detailsContent);
+
+        toggleProfileSpecificButtons();
+
+        // None option selected
+        if (!profileId) {
+            await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
+            return;
+        }
+
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === profileId);
+
+        if (!profile) {
+            console.log(`Profile not found: ${profileId}`);
+            return;
+        }
+
+        await applyConnectionProfile(profile);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+    });
+
+    const reloadButton = document.getElementById('reload_connection_profile');
+    reloadButton.addEventListener('click', async () => {
+        const selectedProfile = extension_settings.connectionManager.selectedProfile;
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+        if (!profile) {
+            console.log('No profile selected');
+            return;
+        }
+        await applyConnectionProfile(profile);
+        await renderDetailsContent(detailsContent);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+        toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
+    });
+
+    const createButton = document.getElementById('create_connection_profile');
+    createButton.addEventListener('click', async () => {
+        const profile = await createConnectionProfile();
+        if (!profile) {
+            return;
+        }
+        extension_settings.connectionManager.profiles.push(profile);
+        extension_settings.connectionManager.selectedProfile = profile.id;
+        saveSettingsDebounced();
+        renderConnectionProfiles(profiles);
+        await renderDetailsContent(detailsContent);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+    });
+
+    const updateButton = document.getElementById('update_connection_profile');
+    updateButton.addEventListener('click', async () => {
+        const selectedProfile = extension_settings.connectionManager.selectedProfile;
+        const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+        if (!profile) {
+            console.log('No profile selected');
+            return;
+        }
+        await updateConnectionProfile(profile);
+        await renderDetailsContent(detailsContent);
+        saveSettingsDebounced();
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
+        toastr.success('Connection profile updated', '', { timeOut: 1500 });
+    });
+
+    const deleteButton = document.getElementById('delete_connection_profile');
+    deleteButton.addEventListener('click', async () => {
+        await deleteConnectionProfile();
+        renderConnectionProfiles(profiles);
+        await renderDetailsContent(detailsContent);
+        await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
+    });
+
+    /** @type {HTMLElement} */
+    const viewDetails = document.getElementById('view_connection_profile');
+    const detailsContent = document.getElementById('connection_profile_details_content');
+    viewDetails.addEventListener('click', async () => {
+        viewDetails.classList.toggle('active');
+        detailsContent.classList.toggle('hidden');
+        await renderDetailsContent(detailsContent);
+    });
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile',
+        helpString: 'Switch to a connection profile or return the name of the current profile in no argument is provided. Use <code>&lt;None&gt;</code> to switch to no profile.',
+        returns: 'name of the profile',
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'Name of the connection profile',
+                enumProvider: profilesProvider,
+                isRequired: false,
+            }),
+        ],
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'await',
+                description: 'Wait for the connection profile to be applied before returning.',
+                isRequired: false,
+                typeList: [ARGUMENT_TYPE.BOOLEAN],
+                defaultValue: 'true',
+                enumList: commonEnumProviders.boolean('trueFalse')(),
+            }),
+        ],
+        callback: async (args, value) => {
+            if (!value || typeof value !== 'string') {
+                const selectedProfile = extension_settings.connectionManager.selectedProfile;
+                const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+                if (!profile) {
+                    return NONE;
+                }
+                return profile.name;
+            }
+
+            if (value === NONE) {
+                profiles.selectedIndex = 0;
+                profiles.dispatchEvent(new Event('change'));
+                return NONE;
+            }
+
+            const profile = findProfileByName(value);
+
+            if (!profile) {
+                return '';
+            }
+
+            const shouldAwait = !isFalseBoolean(String(args?.await));
+            const awaitPromise = new Promise((resolve) => eventSource.once(event_types.CONNECTION_PROFILE_LOADED, resolve));
+
+            profiles.selectedIndex = Array.from(profiles.options).findIndex(o => o.value === profile.id);
+            profiles.dispatchEvent(new Event('change'));
+
+            if (shouldAwait) {
+                await awaitPromise;
+            }
+
+            return profile.name;
+        },
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-list',
+        helpString: 'List all connection profile names.',
+        returns: 'list of profile names',
+        callback: () => JSON.stringify(extension_settings.connectionManager.profiles.map(p => p.name)),
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-create',
+        returns: 'name of the new profile',
+        helpString: 'Create a new connection profile using the current settings.',
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'name of the new connection profile',
+                isRequired: true,
+                typeList: [ARGUMENT_TYPE.STRING],
+            }),
+        ],
+        callback: async (_args, name) => {
+            if (!name || typeof name !== 'string') {
+                toastr.warning('Please provide a name for the new connection profile.');
+                return '';
+            }
+            const profile = await createConnectionProfile(name);
+            if (!profile) {
+                return '';
+            }
+            extension_settings.connectionManager.profiles.push(profile);
+            extension_settings.connectionManager.selectedProfile = profile.id;
+            saveSettingsDebounced();
+            renderConnectionProfiles(profiles);
+            await renderDetailsContent(detailsContent);
+            return profile.name;
+        },
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-update',
+        helpString: 'Update the selected connection profile.',
+        callback: async () => {
+            const selectedProfile = extension_settings.connectionManager.selectedProfile;
+            const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+            if (!profile) {
+                toastr.warning('No profile selected.');
+                return '';
+            }
+            await updateConnectionProfile(profile);
+            await renderDetailsContent(detailsContent);
+            saveSettingsDebounced();
+            return profile.name;
+        },
+    }));
+
+    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
+        name: 'profile-get',
+        helpString: 'Get the details of the connection profile. Returns the selected profile if no argument is provided.',
+        returns: 'object of the selected profile',
+        unnamedArgumentList: [
+            SlashCommandArgument.fromProps({
+                description: 'Name of the connection profile',
+                enumProvider: profilesProvider,
+                isRequired: false,
+            }),
+        ],
+        callback: async (_args, value) => {
+            if (!value || typeof value !== 'string') {
+                const selectedProfile = extension_settings.connectionManager.selectedProfile;
+                const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
+                if (!profile) {
+                    return '';
+                }
+                return JSON.stringify(profile);
+            }
+
+            const profile = findProfileByName(value);
+            if (!profile) {
+                return '';
+            }
+            return JSON.stringify(profile);
+        },
+    }));
+})();
--- a/public/scripts/extensions/connection-manager/manifest.json
+++ b/public/scripts/extensions/connection-manager/manifest.json
@@ -0,0 +1,11 @@
+{
+    "display_name": "Connection Profiles",
+    "loading_order": 1,
+    "requires": [],
+    "optional": [],
+    "js": "index.js",
+    "css": "style.css",
+    "author": "Cohee1207",
+    "version": "1.0.0",
+    "homePage": "https://github.com/SillyTavern/SillyTavern"
+}
--- a/public/scripts/extensions/connection-manager/profile.html
+++ b/public/scripts/extensions/connection-manager/profile.html
@@ -0,0 +1,13 @@
+<div>
+    <h2 data-i18n="Creating a Connection Profile">
+        Creating a Connection Profile
+    </h2>
+    <ul class="justifyLeft">
+        {{#each profile}}
+        <li><strong data-i18n="{{@key}}">{{@key}}:</strong>&nbsp;{{this}}</li>
+        {{/each}}
+    </ul>
+    <h3 data-i18n="Enter a name:">
+        Enter a name:
+    </h3>
+</div>
--- a/public/scripts/extensions/connection-manager/settings.html
+++ b/public/scripts/extensions/connection-manager/settings.html
@@ -0,0 +1,20 @@
+<div class="wide100p">
+    <div class="flex-container alignItemsBaseline">
+        <h3 class="margin0">
+            <span data-i18n="Connection Profile">Connection Profile</span>
+            <a href="https://docs.sillytavern.app/usage/core-concepts/connection-profiles" target="_blank" class="notes-link">
+                <span class="fa-solid fa-circle-question note-link-span"></span>
+            </a>
+        </h3>
+        <i id="connection_profile_spinner" class="fa-solid fa-spinner fa-spin hidden"></i>
+    </div>
+    <div class="flex-container">
+        <select class="text_pole flex1" id="connection_profiles"></select>
+        <i id="view_connection_profile" class="menu_button fa-solid fa-info-circle" title="View connection profile details" data-i18n="[title]View connection profile details"></i>
+        <i id="create_connection_profile" class="menu_button fa-solid fa-file-circle-plus" title="Create a new connection profile" data-i18n="[title]Create a new connection profile"></i>
+        <i id="update_connection_profile" class="menu_button fa-solid fa-save" title="Update a connection profile" data-i18n="[title]Update a connection profile"></i>
+        <i id="reload_connection_profile" class="menu_button fa-solid fa-recycle" title="Reload a connection profile" data-i18n="[title]Reload a connection profile"></i>
+        <i id="delete_connection_profile" class="menu_button fa-solid fa-trash-can" title="Delete a connection profile" data-i18n="[title]Delete a connection profile"></i>
+    </div>
+    <div id="connection_profile_details_content" class="hidden"></div>
+</div>
--- a/public/scripts/extensions/connection-manager/style.css
+++ b/public/scripts/extensions/connection-manager/style.css
@@ -0,0 +1,11 @@
+#connection_profile_details_content {
+    margin: 5px 0;
+}
+
+#connection_profile_details_content ul {
+    margin: 0;
+}
+
+#connection_profile_spinner {
+    margin-left: 5px;
+}
--- a/public/scripts/extensions/connection-manager/view.html
+++ b/public/scripts/extensions/connection-manager/view.html
@@ -0,0 +1,5 @@
+<ul>
+    {{#each profile}}
+    <li><strong data-i18n="{{@key}}">{{@key}}:</strong>&nbsp;{{this}}</li>
+    {{/each}}
+</ul>
--- a/public/scripts/extensions/shared.js
+++ b/public/scripts/extensions/shared.js
@@ -20,7 +20,7 @@ export async function getMultimodalCaption(base64Img, prompt) {

    throwIfInvalidModel(useReverseProxy);

-    const noPrefix = ['google', 'ollama', 'llamacpp'].includes(extension_settings.caption.multimodal_api);
+    const noPrefix = ['ollama', 'llamacpp'].includes(extension_settings.caption.multimodal_api);

    if (noPrefix && base64Img.startsWith('data:image/')) {
        base64Img = base64Img.split(',')[1];
@@ -28,7 +28,6 @@ export async function getMultimodalCaption(base64Img, prompt) {

    // OpenRouter has a payload limit of ~2MB. Google is 4MB, but we love democracy.
    // Ooba requires all images to be JPEGs. Koboldcpp just asked nicely.
-    const isGoogle = extension_settings.caption.multimodal_api === 'google';
    const isOllama = extension_settings.caption.multimodal_api === 'ollama';
    const isLlamaCpp = extension_settings.caption.multimodal_api === 'llamacpp';
    const isCustom = extension_settings.caption.multimodal_api === 'custom';
@@ -40,10 +39,6 @@ export async function getMultimodalCaption(base64Img, prompt) {
    if ((['google', 'openrouter'].includes(extension_settings.caption.multimodal_api) && base64Bytes > compressionLimit) || isOoba || isKoboldCpp) {
        const maxSide = 1024;
        base64Img = await createThumbnail(base64Img, maxSide, maxSide, 'image/jpeg');
-
-        if (isGoogle) {
-            base64Img = base64Img.split(',')[1];
-        }
    }

    const proxyUrl = useReverseProxy ? oai_settings.reverse_proxy : '';
--- a/public/scripts/extensions/stable-diffusion/index.js
+++ b/public/scripts/extensions/stable-diffusion/index.js
@@ -283,7 +283,6 @@ const defaultSettings = {

    // Pollinations settings
    pollinations_enhance: false,
-    pollinations_refine: false,

    // Visibility toggles
    wand_visible: false,
@@ -425,7 +424,6 @@ async function loadSettings() {
    $('#sd_novel_sm_dyn').prop('disabled', !extension_settings.sd.novel_sm);
    $('#sd_novel_decrisper').prop('checked', extension_settings.sd.novel_decrisper);
    $('#sd_pollinations_enhance').prop('checked', extension_settings.sd.pollinations_enhance);
-    $('#sd_pollinations_refine').prop('checked', extension_settings.sd.pollinations_refine);
    $('#sd_horde').prop('checked', extension_settings.sd.horde);
    $('#sd_horde_nsfw').prop('checked', extension_settings.sd.horde_nsfw);
    $('#sd_horde_karras').prop('checked', extension_settings.sd.horde_karras);
@@ -1009,11 +1007,6 @@ function onPollinationsEnhanceInput() {
    saveSettingsDebounced();
 }

-function onPollinationsRefineInput() {
-    extension_settings.sd.pollinations_refine = !!$('#sd_pollinations_refine').prop('checked');
-    saveSettingsDebounced();
-}
-
 function onHordeNsfwInput() {
    extension_settings.sd.horde_nsfw = !!$(this).prop('checked');
    saveSettingsDebounced();
@@ -1692,16 +1685,17 @@ async function loadStabilityModels() {
 }

 async function loadPollinationsModels() {
-    return [
-        {
-            value: 'flux',
-            text: 'FLUX.1 [schnell]',
-        },
-        {
-            value: 'turbo',
-            text: 'SDXL Turbo',
-        },
-    ];
+    const result = await fetch('/api/sd/pollinations/models', {
+        method: 'POST',
+        headers: getRequestHeaders(),
+    });
+
+    if (result.ok) {
+        const data = await result.json();
+        return data;
+    }
+
+    return [];
 }

 async function loadTogetherAIModels() {
@@ -2739,7 +2733,6 @@ async function generatePollinationsImage(prompt, negativePrompt, signal) {
            width: extension_settings.sd.width,
            height: extension_settings.sd.height,
            enhance: extension_settings.sd.pollinations_enhance,
-            refine: extension_settings.sd.pollinations_refine,
            seed: extension_settings.sd.seed >= 0 ? extension_settings.sd.seed : undefined,
        }),
    });
@@ -3886,7 +3879,6 @@ jQuery(async () => {
    $('#sd_novel_sm_dyn').on('input', onNovelSmDynInput);
    $('#sd_novel_decrisper').on('input', onNovelDecrisperInput);
    $('#sd_pollinations_enhance').on('input', onPollinationsEnhanceInput);
-    $('#sd_pollinations_refine').on('input', onPollinationsRefineInput);
    $('#sd_comfy_validate').on('click', validateComfyUrl);
    $('#sd_comfy_url').on('input', onComfyUrlInput);
    $('#sd_comfy_workflow').on('change', onComfyWorkflowChange);
--- a/public/scripts/extensions/stable-diffusion/settings.html
+++ b/public/scripts/extensions/stable-diffusion/settings.html
@@ -184,18 +184,12 @@
                    <a href="https://pollinations.ai">Pollinations.ai</a>
                </p>
                <div class="flex-container">
-                    <label class="flex1 checkbox_label" for="sd_pollinations_enhance">
+                    <label class="flex1 checkbox_label" for="sd_pollinations_enhance" title="Enables prompt enhancing (passes prompts through an LLM to add detail).">
                        <input id="sd_pollinations_enhance" type="checkbox" />
                        <span data-i18n="Enhance">
                            Enhance
                        </span>
                    </label>
-                    <label class="flex1 checkbox_label" for="sd_pollinations_refine">
-                        <input id="sd_pollinations_refine" type="checkbox" />
-                        <span data-i18n="Refine">
-                            Refine
-                        </span>
-                    </label>
                </div>
            </div>
            <div data-sd-source="stability">
--- a/public/scripts/instruct-mode.js
+++ b/public/scripts/instruct-mode.js
@@ -130,13 +130,15 @@ function highlightDefaultPreset() {
 /**
 * Select context template if not already selected.
 * @param {string} preset Preset name.
- * @param {boolean} quiet Suppress info message.
+ * @param {object} [options={}] Optional arguments.
+ * @param {boolean} [options.quiet=false] Suppress toast messages.
+ * @param {boolean} [options.isAuto=false] Is auto-select.
 */
-export function selectContextPreset(preset, quiet) {
+export function selectContextPreset(preset, { quiet = false, isAuto = false } = {}) {
    // If context template is not already selected, select it
    if (preset !== power_user.context.preset) {
        $('#context_presets').val(preset).trigger('change');
-        !quiet && toastr.info(`Context Template: preset "${preset}" auto-selected`);
+        !quiet && toastr.info(`Context Template: "${preset}" ${isAuto ? 'auto-' : ''}selected`);
    }

    // If instruct mode is disabled, enable it, except for default context template
@@ -152,13 +154,15 @@ export function selectContextPreset(preset, quiet) {
 /**
 * Select instruct preset if not already selected.
 * @param {string} preset Preset name.
- * @param {boolean} quiet Suppress info message.
+ * @param {object} [options={}] Optional arguments.
+ * @param {boolean} [options.quiet=false] Suppress toast messages.
+ * @param {boolean} [options.isAuto=false] Is auto-select.
 */
-export function selectInstructPreset(preset, quiet) {
+export function selectInstructPreset(preset, { quiet = false, isAuto = false } = {}) {
    // If instruct preset is not already selected, select it
    if (preset !== power_user.instruct.preset) {
        $('#instruct_presets').val(preset).trigger('change');
-        !quiet && toastr.info(`Instruct Mode: template "${preset}" auto-selected`);
+        !quiet && toastr.info(`Instruct Template: "${preset}" ${isAuto ? 'auto-' : ''}selected`);
    }

    // If instruct mode is disabled, enable it
@@ -189,7 +193,7 @@ export function autoSelectInstructPreset(modelId) {
        // If instruct preset matches the context template
        if (power_user.instruct.bind_to_context && instruct_preset.name === power_user.context.preset) {
            foundMatch = true;
-            selectInstructPreset(instruct_preset.name);
+            selectInstructPreset(instruct_preset.name, { isAuto: true });
            break;
        }
    }
@@ -203,7 +207,7 @@ export function autoSelectInstructPreset(modelId) {

                    // Stop on first match so it won't cycle back and forth between presets if multiple regexes match
                    if (regex instanceof RegExp && regex.test(modelId)) {
-                        selectInstructPreset(preset.name);
+                        selectInstructPreset(preset.name, { isAuto: true });

                        return true;
                    }
@@ -541,13 +545,13 @@ function selectMatchingContextTemplate(name) {
        // If context template matches the instruct preset
        if (context_preset.name === name) {
            foundMatch = true;
-            selectContextPreset(context_preset.name);
+            selectContextPreset(context_preset.name, { isAuto: true });
            break;
        }
    }
    if (!foundMatch) {
        // If no match was found, select default context preset
-        selectContextPreset(power_user.default_context);
+        selectContextPreset(power_user.default_context, { isAuto: true });
    }
 }

--- a/public/scripts/openai.js
+++ b/public/scripts/openai.js
@@ -47,6 +47,7 @@ import { SECRET_KEYS, secret_state, writeSecret } from './secrets.js';

 import { getEventSourceStream } from './sse-stream.js';
 import {
+    createThumbnail,
    delay,
    download,
    getBase64Async,
@@ -2440,25 +2441,52 @@ class Message {
                if (!response.ok) throw new Error('Failed to fetch image');
                const blob = await response.blob();
                image = await getBase64Async(blob);
-                if (oai_settings.chat_completion_source === chat_completion_sources.MAKERSUITE) {
-                    image = image.split(',')[1];
-                }
            } catch (error) {
                console.error('Image adding skipped', error);
                return;
            }
        }

+        image = await this.compressImage(image);
+
        const quality = oai_settings.inline_image_quality || default_settings.inline_image_quality;
        this.content = [
            { type: 'text', text: textContent },
            { type: 'image_url', image_url: { 'url': image, 'detail': quality } },
        ];

-        const tokens = await this.getImageTokenCost(image, quality);
-        this.tokens += tokens;
+        try {
+            const tokens = await this.getImageTokenCost(image, quality);
+            this.tokens += tokens;
+        } catch (error) {
+            this.tokens += Message.tokensPerImage;
+            console.error('Failed to get image token cost', error);
+        }
    }

+    /**
+     * Compress an image if it exceeds the size threshold for the current chat completion source.
+     * @param {string} image Data URL of the image.
+     * @returns {Promise<string>} Compressed image as a Data URL.
+     */
+    async compressImage(image) {
+        if ([chat_completion_sources.OPENROUTER, chat_completion_sources.MAKERSUITE].includes(oai_settings.chat_completion_source)) {
+            const sizeThreshold = 2 * 1024 * 1024;
+            const dataSize = image.length * 0.75;
+            const maxSide = 1024;
+            if (dataSize > sizeThreshold) {
+                image = await createThumbnail(image, maxSide);
+            }
+        }
+        return image;
+    }
+
+    /**
+     * Get the token cost of an image.
+     * @param {string} dataUrl Data URL of the image.
+     * @param {string} quality String representing the quality of the image. Can be 'low', 'auto', or 'high'.
+     * @returns {Promise<number>} The token cost of the image.
+     */
    async getImageTokenCost(dataUrl, quality) {
        if (quality === 'low') {
            return Message.tokensPerImage;
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -1745,7 +1745,7 @@ async function loadContextSettings() {
                power_user.context[control.property] = value;
            }
            console.log(`Setting ${$element.prop('id')} to ${value}`);
-            if (!CSS.supports('field-sizing', 'content')) {
+            if (!CSS.supports('field-sizing', 'content') && $(this).is('textarea')) {
                await resetScrollHeight($(this));
            }
            saveSettingsDebounced();
@@ -1798,7 +1798,7 @@ async function loadContextSettings() {
            for (const instruct_preset of instruct_presets) {
                // If instruct preset matches the context template
                if (instruct_preset.name === name) {
-                    selectInstructPreset(instruct_preset.name);
+                    selectInstructPreset(instruct_preset.name, { isAuto: true });
                    break;
                }
            }
--- a/public/scripts/preset-manager.js
+++ b/public/scripts/preset-manager.js
@@ -338,6 +338,7 @@ class PresetManager {
            'max_tokens_second',
            'openrouter_providers',
            'openrouter_allow_fallbacks',
+            'tabby_model',
        ];
        const settings = Object.assign({}, getSettingsByApiId(this.apiId));

--- a/public/scripts/samplerSelect.js
+++ b/public/scripts/samplerSelect.js
@@ -13,8 +13,8 @@ import { setting_names } from './textgen-settings.js';

 const TGsamplerNames = setting_names;

-const forcedOnColoring = 'filter: sepia(1) hue-rotate(59deg) contrast(1.5) saturate(3.5)';
-const forcedOffColoring = 'filter: sepia(1) hue-rotate(308deg) contrast(0.7) saturate(10)';
+const forcedOnColoring = 'color: #89db35;';
+const forcedOffColoring = 'color: #e84f62;';

 let userDisabledSamplers, userShownSamplers;

--- a/public/scripts/slash-commands.js
+++ b/public/scripts/slash-commands.js
@@ -1485,7 +1485,22 @@ export function initDefaultSlashCommands() {
    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
        name: 'listinjects',
        callback: listInjectsCallback,
-        helpString: 'Lists all script injections for the current chat.',
+        helpString: 'Lists all script injections for the current chat. Displays injects in a popup by default. Use the <code>format</code> argument to change the output format.',
+        returns: 'JSON object of script injections',
+        namedArgumentList: [
+            SlashCommandNamedArgument.fromProps({
+                name: 'format',
+                description: 'output format',
+                typeList: [ARGUMENT_TYPE.STRING],
+                isRequired: true,
+                forceEnum: true,
+                enumList: [
+                    new SlashCommandEnumValue('popup', 'Show injects in a popup.', enumTypes.enum, enumIcons.default),
+                    new SlashCommandEnumValue('chat', 'Post a system message to the chat.', enumTypes.enum, enumIcons.default),
+                    new SlashCommandEnumValue('none', 'Just return the injects as a JSON object.', enumTypes.enum, enumIcons.default),
+                ],
+            }),
+        ],
    }));
    SlashCommandParser.addCommandObject(SlashCommand.fromProps({
        name: 'flushinject',
@@ -1743,10 +1758,11 @@ function injectCallback(args, value) {
    return '';
 }

-function listInjectsCallback() {
+async function listInjectsCallback(args) {
+    const type = String(args?.format).toLowerCase().trim();
    if (!chat_metadata.script_injects || !Object.keys(chat_metadata.script_injects).length) {
-        toastr.info('No script injections for the current chat');
-        return '';
+        type !== 'none' && toastr.info('No script injections for the current chat');
+        return JSON.stringify({});
    }

    const injects = Object.entries(chat_metadata.script_injects)
@@ -1761,7 +1777,19 @@ function listInjectsCallback() {
    const messageText = `### Script injections:\n${injects}`;
    const htmlMessage = DOMPurify.sanitize(converter.makeHtml(messageText));

-    sendSystemMessage(system_message_types.GENERIC, htmlMessage);
+    switch (type) {
+        case 'none':
+            break;
+        case 'chat':
+            sendSystemMessage(system_message_types.GENERIC, htmlMessage);
+            break;
+        case 'popup':
+        default:
+            await callGenericPopup(htmlMessage, POPUP_TYPE.TEXT);
+            break;
+    }
+
+    return JSON.stringify(chat_metadata.script_injects);
 }

 /**
@@ -3398,6 +3426,7 @@ function getModelOptions(quiet) {
        { id: 'vllm_model', api: 'textgenerationwebui', type: textgen_types.VLLM },
        { id: 'aphrodite_model', api: 'textgenerationwebui', type: textgen_types.APHRODITE },
        { id: 'ollama_model', api: 'textgenerationwebui', type: textgen_types.OLLAMA },
+        { id: 'tabby_model', api: 'textgenerationwebui', type: textgen_types.TABBY },
        { id: 'model_openai_select', api: 'openai', type: chat_completion_sources.OPENAI },
        { id: 'model_claude_select', api: 'openai', type: chat_completion_sources.CLAUDE },
        { id: 'model_windowai_select', api: 'openai', type: chat_completion_sources.WINDOWAI },
@@ -3441,7 +3470,7 @@ function getModelOptions(quiet) {
        return nullResult;
    }

-    const options = Array.from(modelSelectControl.options);
+    const options = Array.from(modelSelectControl.options).filter(x => x.value);
    return { control: modelSelectControl, options };
 }

--- a/public/scripts/slash-commands/SlashCommandCommonEnumsProvider.js
+++ b/public/scripts/slash-commands/SlashCommandCommonEnumsProvider.js
@@ -33,6 +33,7 @@ export const enumIcons = {
    file: '📄',
    message: '💬',
    voice: '🎤',
+    server: '🖥️',

    true: '✔️',
    false: '❌',
--- a/public/scripts/templates/itemizationChat.html
+++ b/public/scripts/templates/itemizationChat.html
@@ -4,8 +4,8 @@
    <div id="copyPromptToClipboard" class="fa-solid fa-copy menu_button" title="Copy Prompt" data-i18n="[title]Copy Prompt"></div>
    <div id="diffPrevPrompt" class="fa-solid fa-code-compare menu_button" title="Show Prompt Differences" data-i18n="[title]Show Prompt Differences"></div>
 </h3>
+API/Model Used: {{mainApiFriendlyName}} {{#if apiUsed}}({{apiUsed}}){{/if}} {{#if modelUsed}}&ndash; {{modelUsed}}{{/if}}<br>
 Tokenizer: {{selectedTokenizer}}<br>
-API Used: {{this_main_api}}<br>
 <span class="tokenItemizingSubclass">
    Only the white numbers really matter. All numbers are estimates.
    Grey color items may not have been included in the context due to certain prompt format settings.
--- a/public/scripts/templates/itemizationText.html
+++ b/public/scripts/templates/itemizationText.html
@@ -4,8 +4,8 @@
    <div id="copyPromptToClipboard" class="fa-solid fa-copy menu_button" title="Copy Prompt" data-i18n="[title]Copy Prompt"></div>
    <div id="diffPrevPrompt" class="fa-solid fa-code-compare menu_button" title="Show Prompt Differences" data-i18n="[title]Show Prompt Differences"></div>
 </h3>
+API/Model Used: {{mainApiFriendlyName}} {{#if apiUsed}}({{apiUsed}}){{/if}} {{#if modelUsed}}&ndash; {{modelUsed}}{{/if}}<br>
 Tokenizer: {{selectedTokenizer}}<br>
-API Used: {{this_main_api}}<br>
 <span class="tokenItemizingSubclass">
    Only the white numbers really matter. All numbers are estimates.
    Grey color items may not have been included in the context due to certain prompt format settings.
--- a/public/scripts/textgen-models.js
+++ b/public/scripts/textgen-models.js
@@ -12,6 +12,7 @@ let dreamGenModels = [];
 let vllmModels = [];
 let aphroditeModels = [];
 let featherlessModels = [];
+let tabbyModels = [];
 export let openRouterModels = [];

 /**
@@ -66,6 +67,30 @@ export async function loadOllamaModels(data) {
    }
 }

+export async function loadTabbyModels(data) {
+    if (!Array.isArray(data)) {
+        console.error('Invalid Tabby models data', data);
+        return;
+    }
+
+    tabbyModels = data;
+    tabbyModels.sort((a, b) => a.id.localeCompare(b.id));
+    tabbyModels.unshift({ id: '' });
+
+    if (!tabbyModels.find(x => x.id === textgen_settings.tabby_model)) {
+        textgen_settings.tabby_model = tabbyModels[0]?.id || '';
+    }
+
+    $('#tabby_model').empty();
+    for (const model of tabbyModels) {
+        const option = document.createElement('option');
+        option.value = model.id;
+        option.text = model.id;
+        option.selected = model.id === textgen_settings.tabby_model;
+        $('#tabby_model').append(option);
+    }
+}
+
 export async function loadTogetherAIModels(data) {
    if (!Array.isArray(data)) {
        console.error('Invalid Together AI models data', data);
@@ -310,6 +335,12 @@ function onOllamaModelSelect() {
    $('#api_button_textgenerationwebui').trigger('click');
 }

+function onTabbyModelSelect() {
+    const modelId = String($('#tabby_model').val());
+    textgen_settings.tabby_model = modelId;
+    $('#api_button_textgenerationwebui').trigger('click');
+}
+
 function onOpenRouterModelSelect() {
    const modelId = String($('#openrouter_model').val());
    textgen_settings.openrouter_model = modelId;
@@ -641,6 +672,7 @@ export function initTextGenModels() {
    $('#aphrodite_model').on('change', onAphroditeModelSelect);
    $('#featherless_model').on('change', onFeatherlessModelSelect);
    $('#tabby_download_model').on('click', downloadTabbyModel);
+    $('#tabby_model').on('change', onTabbyModelSelect);

    const providersSelect = $('.openrouter_providers');
    for (const provider of OPENROUTER_PROVIDERS) {
@@ -671,6 +703,13 @@ export function initTextGenModels() {
            searchInputCssClass: 'text_pole',
            width: '100%',
        });
+        $('#tabby_model').select2({
+            placeholder: '[Currently loaded]',
+            searchInputPlaceholder: 'Search models...',
+            searchInputCssClass: 'text_pole',
+            width: '100%',
+            allowClear: true,
+        });
        $('#model_infermaticai_select').select2({
            placeholder: 'Select a model',
            searchInputPlaceholder: 'Search models...',
--- a/public/scripts/textgen-settings.js
+++ b/public/scripts/textgen-settings.js
@@ -180,6 +180,7 @@ const settings = {
    vllm_model: '',
    aphrodite_model: '',
    dreamgen_model: 'opus-v1-xl/text',
+    tabby_model: '',
    legacy_api: false,
    sampler_order: KOBOLDCPP_ORDER,
    logit_bias: [],
@@ -995,7 +996,7 @@ function tryParseStreamingError(response, decoded) {
        // No JSON. Do nothing.
    }

-    const message = data?.error?.message || data?.message;
+    const message = data?.error?.message || data?.message || data?.detail;

    if (message) {
        toastr.error(message, 'Text Completion API');
@@ -1047,6 +1048,11 @@ export function getTextGenModel() {
            return settings.featherless_model;
        case HUGGINGFACE:
            return 'tgi';
+        case TABBY:
+            if (settings.tabby_model) {
+                return settings.tabby_model;
+            }
+            break;
        default:
            return undefined;
    }
--- a/public/scripts/util/AbortReason.js
+++ b/public/scripts/util/AbortReason.js
@@ -0,0 +1,9 @@
+export class AbortReason {
+    constructor(reason) {
+        this.reason = reason;
+    }
+
+    toString() {
+        return this.reason;
+    }
+}
--- a/public/scripts/utils.js
+++ b/public/scripts/utils.js
@@ -1436,6 +1436,15 @@ export function uuidv4() {
    });
 }

+/**
+ * Collapses multiple spaces in a strings into one.
+ * @param {string} s String to process
+ * @returns {string} String with collapsed spaces
+ */
+export function collapseSpaces(s) {
+    return s.replace(/\s+/g, ' ').trim();
+}
+
 function postProcessText(text, collapse = true) {
    // Remove carriage returns
    text = text.replace(/\r/g, '');
@@ -2041,7 +2050,7 @@ export async function fetchFaFile(name) {
    style.remove();
    return [...sheet.cssRules]
        .filter(rule => rule.style?.content)
-        .map(rule => rule.selectorText.split(/,\s*/).map(selector=>selector.split('::').shift().slice(1)))
+        .map(rule => rule.selectorText.split(/,\s*/).map(selector => selector.split('::').shift().slice(1)))
    ;
 }
 export async function fetchFa() {
@@ -2068,7 +2077,7 @@ export async function showFontAwesomePicker(customList = null) {
                qry.placeholder = 'Filter icons';
                qry.autofocus = true;
                const qryDebounced = debounce(() => {
-                    const result = faList.filter(fa => fa.find(className=>className.includes(qry.value.toLowerCase())));
+                    const result = faList.filter(fa => fa.find(className => className.includes(qry.value.toLowerCase())));
                    for (const fa of faList) {
                        if (!result.includes(fa)) {
                            fas[fa].classList.add('hidden');
@@ -2090,7 +2099,7 @@ export async function showFontAwesomePicker(customList = null) {
                    opt.classList.add('menu_button');
                    opt.classList.add('fa-solid');
                    opt.classList.add(fa[0]);
-                    opt.title = fa.map(it=>it.slice(3)).join(', ');
+                    opt.title = fa.map(it => it.slice(3)).join(', ');
                    opt.dataset.result = POPUP_RESULT.AFFIRMATIVE.toString();
                    opt.addEventListener('click', () => value = fa[0]);
                    grid.append(opt);