Add per-character and per-group overrides for external media

public/index.html

@@ -4268,12 +4268,21 @@
                         </div>
                         <div id="descriptionWrapper" class="flex-container flexFlowColumn flex1">
                             <hr>
-                            <div id="description_div" class="flex-container alignitemscenter">
+                            <div id="description_div" class="title_restorable">
-                                <span data-i18n="Character Description">Description</span>
+                                <div class="flex-container alignitemscenter">
-                                <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="description_textarea" title="Expand the editor"></i>
+                                    <span data-i18n="Character Description">Description</span>
-                                <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
+                                    <i class="editor_maximize fa-solid fa-maximize right_menu_button" data-for="description_textarea" title="Expand the editor"></i>
-                                    <span class="fa-solid fa-circle-question note-link-span"></span>
+                                    <a href="https://docs.sillytavern.app/usage/core-concepts/characterdesign/#character-description" class="notes-link" target="_blank">
-                                </a>
+                                        <span class="fa-solid fa-circle-question note-link-span"></span>
+                                    </a>
+                                </div>
+                                <div id="character_open_media_overrides" class="menu_button menu_button_icon open_media_overrides" title="Click to allow/forbid the use of external media for this character." data-i18n="[title]Click to allow/forbid the use of external media for this character.">
+                                    <i id="character_media_allowed_icon" class="fa-solid fa-fw fa-link"></i>
+                                    <i id="character_media_forbidden_icon" class="fa-solid fa-fw fa-link-slash"></i>
+                                    <span data-i18n="Ext. Media">
+                                        Ext. Media
+                                    </span>
+                                </div>
                             </div>
                             <textarea id="description_textarea" data-i18n="[placeholder]Describe your character's physical and mental traits here." placeholder="Describe your character's physical and mental traits here." name="description" placeholder=""></textarea>
                             <div class="extension_token_counter">
@@ -4373,6 +4382,10 @@
                                         <div id="rm_group_scenario" class="heightFitContent margin0 menu_button fa-solid fa-scroll" title="Set a group chat scenario" data-i18n="[title]Set a group chat scenario"></div>
                                         <div id="group_favorite_button" class="heightFitContent margin0 menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
                                         <input id="rm_group_fav" type="hidden" />
+                                        <div id="group_open_media_overrides" class="heightFitContent margin0 menu_button menu_button_icon open_media_overrides" title="Click to allow/forbid the use of external media for this group." data-i18n="[title]Click to allow/forbid the use of external media for this group.">
+                                            <i id="group_media_allowed_icon" class="fa-solid fa-fw fa-link"></i>
+                                            <i id="group_media_forbidden_icon" class="fa-solid fa-fw fa-link-slash"></i>
+                                        </div>
                                         <div id="rm_group_submit" class="heightFitContent margin0 menu_button fa-solid fa-check" title="Create" data-i18n="[title]Create"></div>
                                         <div id="rm_group_restore_avatar" class="heightFitContent margin0 menu_button fa-solid fa-images" title="Restore collage avatar" data-i18n="[title]Restore collage avatar"></div>
                                         <div id="rm_group_delete" class="heightFitContent margin0 menu_button fa-solid fa-trash-can" title="Delete" data-i18n="[title]Delete"></div>
@@ -5380,6 +5393,32 @@
             <textarea name="alternate_greetings" data-i18n="[placeholder](This will be the first message from the character that starts every chat)" placeholder="(This will be the first message from the character that starts every chat)" class="text_pole textarea_compact alternate_greeting_text" maxlength="50000" value="" autocomplete="off" rows="16"></textarea>
         </div>
     </div>
+    <div id="forbid_media_override_template" class="template_element">
+        <div class="forbid_media_override flex-container flexFlowColumn">
+            <h4 data-i18n="Forbid Media Override explanation" class="margin0">
+                Ability of the current character/group to use external media in chats.
+            </h4>
+            <small data-i18n="Forbid Media Override subtitle" class="marginBot5">
+                Media: images, videos, audio. External: not hosted on the local server.
+            </small>
+            <label class="checkbox_label" for="forbid_media_override_global">
+                <input type="radio" id="forbid_media_override_global" name="forbid_media_override" />
+                <span>
+                    <span data-i18n="Use global setting">Use global setting</span>
+                    <b class="forbid_media_global_state_forbidden">(forbidden)</b>
+                    <b class="forbid_media_global_state_allowed">(allowed)</b>
+                </span>
+            </label>
+            <label class="checkbox_label" for="forbid_media_override_forbidden">
+                <input type="radio" id="forbid_media_override_forbidden" name="forbid_media_override" />
+                <span data-i18n="Always forbidden">Always forbidden</span>
+            </label>
+            <label class="checkbox_label" for="forbid_media_override_allowed">
+                <input type="radio" id="forbid_media_override_allowed" name="forbid_media_override" />
+                <span data-i18n="Always allowed">Always allowed</span>
+            </label>
+        </div>
+    </div>
     <!-- chat and input bar -->
     <div id="typing_indicator_template" class="template_element">
         <div class="typing_indicator"><span class="typing_indicator_name">CHAR</span> is typing</div>

public/script.js

@@ -208,7 +208,7 @@ import { getBackgrounds, initBackgrounds, loadBackgroundSettings, background_set
 import { hideLoader, showLoader } from './scripts/loader.js';
 import { BulkEditOverlay, CharacterContextMenu } from './scripts/BulkEditOverlay.js';
 import { loadMancerModels, loadOllamaModels, loadTogetherAIModels, loadInfermaticAIModels, loadOpenRouterModels, loadAphroditeModels, loadDreamGenModels } from './scripts/textgen-models.js';
-import { appendFileContent, hasPendingFileAttachment, populateFileAttachment, decodeStyleTags, encodeStyleTags } from './scripts/chats.js';
+import { appendFileContent, hasPendingFileAttachment, populateFileAttachment, decodeStyleTags, encodeStyleTags, isExternalMediaAllowed, getCurrentEntityId } from './scripts/chats.js';
 import { initPresetManager } from './scripts/preset-manager.js';
 import { evaluateMacros } from './scripts/macros.js';
 
@@ -324,10 +324,13 @@ DOMPurify.addHook('uponSanitizeElement', (node, _, config) => {
         return;
     }
 
-    if (!power_user.forbid_external_images) {
+    const isMediaAllowed = isExternalMediaAllowed();
+    if (isMediaAllowed) {
         return;
     }
 
+    let mediaBlocked = false;
+
     switch (node.tagName) {
         case 'AUDIO':
         case 'VIDEO':
@@ -350,6 +353,7 @@ DOMPurify.addHook('uponSanitizeElement', (node, _, config) => {
                     if (isExternalUrl(url)) {
                         console.warn('External media blocked', url);
                         node.remove();
+                        mediaBlocked = true;
                         break;
                     }
                 }
@@ -357,16 +361,37 @@ DOMPurify.addHook('uponSanitizeElement', (node, _, config) => {
 
             if (src && isExternalUrl(src)) {
                 console.warn('External media blocked', src);
+                mediaBlocked = true;
                 node.remove();
             }
 
             if (data && isExternalUrl(data)) {
                 console.warn('External media blocked', data);
+                mediaBlocked = true;
                 node.remove();
             }
         }
             break;
     }
+
+    if (mediaBlocked) {
+        const entityId = getCurrentEntityId();
+        const warningShownKey = `mediaWarningShown:${entityId}`;
+
+        if (localStorage.getItem(warningShownKey) === null) {
+            const warningToast = toastr.warning(
+                'Use the "Ext. Media" button to allow it. Click on this message to dismiss.',
+                'External media has been blocked',
+                {
+                    timeOut: 0,
+                    preventDuplicates: true,
+                    onclick: () => toastr.clear(warningToast),
+                },
+            );
+
+            localStorage.setItem(warningShownKey, 'true');
+        }
+    }
 });
 
 // API OBJECT FOR EXTERNAL WIRING
@@ -1692,7 +1717,7 @@ export async function reloadCurrentChat() {
     chat.length = 0;
 
     if (selected_group) {
-        await getGroupChat(selected_group);
+        await getGroupChat(selected_group, true);
     }
     else if (this_chid) {
         await getChat();
@@ -6899,6 +6924,12 @@ export function select_selected_character(chid) {
 
     $('#form_create').attr('actiontype', 'editcharacter');
     $('.form_create_bottom_buttons_block .chat_lorebook_button').show();
+
+    const externalMediaState = isExternalMediaAllowed();
+    $('#character_open_media_overrides').toggle(!selected_group);
+    $('#character_media_allowed_icon').toggle(externalMediaState);
+    $('#character_media_forbidden_icon').toggle(!externalMediaState);
+
     saveSettingsDebounced();
 }
 
@@ -6959,6 +6990,7 @@ function select_rm_create() {
 
     $('#form_create').attr('actiontype', 'createcharacter');
     $('.form_create_bottom_buttons_block .chat_lorebook_button').hide();
+    $('#character_open_media_overrides').hide();
 }
 
 function select_rm_characters() {

public/scripts/chats.js

@@ -5,6 +5,7 @@ import {
     addCopyToCodeBlocks,
     appendMediaToMessage,
     callPopup,
+    characters,
     chat,
     eventSource,
     event_types,
@@ -12,9 +13,14 @@ import {
     getRequestHeaders,
     hideSwipeButtons,
     name2,
+    reloadCurrentChat,
     saveChatDebounced,
+    saveSettingsDebounced,
     showSwipeButtons,
+    this_chid,
 } from '../script.js';
+import { selected_group } from './group-chats.js';
+import { power_user } from './power-user.js';
 import {
     extractTextFromHTML,
     extractTextFromMarkdown,
@@ -416,6 +422,56 @@ export function decodeStyleTags(text) {
     });
 }
 
+async function openExternalMediaOverridesDialog() {
+    const entityId = getCurrentEntityId();
+
+    if (!entityId) {
+        toastr.info('No character or group selected');
+        return;
+    }
+
+    const template = $('#forbid_media_override_template > .forbid_media_override').clone();
+    template.find('.forbid_media_global_state_forbidden').toggle(power_user.forbid_external_images);
+    template.find('.forbid_media_global_state_allowed').toggle(!power_user.forbid_external_images);
+
+    if (power_user.external_media_allowed_overrides.includes(entityId)) {
+        template.find('#forbid_media_override_allowed').prop('checked', true);
+    }
+    else if (power_user.external_media_forbidden_overrides.includes(entityId)) {
+        template.find('#forbid_media_override_forbidden').prop('checked', true);
+    }
+    else {
+        template.find('#forbid_media_override_global').prop('checked', true);
+    }
+
+    callPopup(template, 'text', '', { wide: false, large: false });
+}
+
+export function getCurrentEntityId() {
+    if (selected_group) {
+        return String(selected_group);
+    }
+
+    return characters[this_chid]?.avatar ?? null;
+}
+
+export function isExternalMediaAllowed() {
+    const entityId = getCurrentEntityId();
+    if (!entityId) {
+        return !power_user.forbid_external_images;
+    }
+
+    if (power_user.external_media_allowed_overrides.includes(entityId)) {
+        return true;
+    }
+
+    if (power_user.external_media_forbidden_overrides.includes(entityId)) {
+        return false;
+    }
+
+    return !power_user.forbid_external_images;
+}
+
 jQuery(function () {
     $(document).on('click', '.mes_hide', async function () {
         const messageBlock = $(this).closest('.mes');
@@ -511,6 +567,32 @@ jQuery(function () {
         $(this).closest('.mes').find('.mes_edit').trigger('click');
     });
 
+    $(document).on('click', '.open_media_overrides', openExternalMediaOverridesDialog);
+    $(document).on('input', '#forbid_media_override_allowed', function () {
+        const entityId = getCurrentEntityId();
+        if (!entityId) return;
+        power_user.external_media_allowed_overrides.push(entityId);
+        power_user.external_media_forbidden_overrides = power_user.external_media_forbidden_overrides.filter((v) => v !== entityId);
+        saveSettingsDebounced();
+        reloadCurrentChat();
+    });
+    $(document).on('input', '#forbid_media_override_forbidden', function () {
+        const entityId = getCurrentEntityId();
+        if (!entityId) return;
+        power_user.external_media_forbidden_overrides.push(entityId);
+        power_user.external_media_allowed_overrides = power_user.external_media_allowed_overrides.filter((v) => v !== entityId);
+        saveSettingsDebounced();
+        reloadCurrentChat();
+    });
+    $(document).on('input', '#forbid_media_override_global', function () {
+        const entityId = getCurrentEntityId();
+        if (!entityId) return;
+        power_user.external_media_allowed_overrides = power_user.external_media_allowed_overrides.filter((v) => v !== entityId);
+        power_user.external_media_forbidden_overrides = power_user.external_media_forbidden_overrides.filter((v) => v !== entityId);
+        saveSettingsDebounced();
+        reloadCurrentChat();
+    });
+
     $('#file_form_input').on('change', onFileAttach);
     $('#file_form').on('reset', function () {
         $('#file_form').addClass('displayNone');

public/scripts/group-chats.js

@@ -73,6 +73,7 @@ import {
 } from '../script.js';
 import { printTagList, createTagMapFromList, applyTagsOnCharacterSelect, tag_map } from './tags.js';
 import { FILTER_TYPES, FilterHelper } from './filters.js';
+import { isExternalMediaAllowed } from './chats.js';
 
 export {
     selected_group,
@@ -176,7 +177,7 @@ async function loadGroupChat(chatId) {
     return [];
 }
 
-export async function getGroupChat(groupId) {
+export async function getGroupChat(groupId, reload = false) {
     const group = groups.find((x) => x.id === groupId);
     const chat_id = group.chat_id;
     const data = await loadGroupChat(chat_id);
@@ -216,6 +217,10 @@ export async function getGroupChat(groupId) {
         updateChatMetadata(metadata, true);
     }
 
+    if (reload) {
+        select_group_chats(groupId, true);
+    }
+
     await eventSource.emit(event_types.CHAT_CHANGED, getCurrentChatId());
 }
 
@@ -1306,6 +1311,10 @@ function select_group_chats(groupId, skipAnimation) {
         $('#rm_group_delete').show();
         $('#rm_group_scenario').show();
         $('#group-metadata-controls .chat_lorebook_button').removeClass('disabled').prop('disabled', false);
+        $('#group_open_media_overrides').show();
+        const isMediaAllowed = isExternalMediaAllowed();
+        $('#group_media_allowed_icon').toggle(isMediaAllowed);
+        $('#group_media_forbidden_icon').toggle(!isMediaAllowed);
     } else {
         $('#rm_group_submit').show();
         if ($('#groupAddMemberListToggle .inline-drawer-content').css('display') !== 'block') {
@@ -1314,6 +1323,7 @@ function select_group_chats(groupId, skipAnimation) {
         $('#rm_group_delete').hide();
         $('#rm_group_scenario').hide();
         $('#group-metadata-controls .chat_lorebook_button').addClass('disabled').prop('disabled', true);
+        $('#group_open_media_overrides').hide();
     }
 
     updateFavButtonState(group?.fav ?? false);

public/scripts/power-user.js

@@ -255,6 +255,8 @@ let power_user = {
     auto_connect: false,
     auto_load_chat: false,
     forbid_external_images: false,
+    external_media_allowed_overrides: [],
+    external_media_forbidden_overrides: [],
 };
 
 let themes = [];
@@ -2761,22 +2763,35 @@ export function getCustomStoppingStrings(limit = undefined) {
 }
 
 $(document).ready(() => {
+    const adjustAutocompleteDebounced = debounce(() => {
+        $('.ui-autocomplete-input').each(function () {
+            const isOpen = $(this).autocomplete('widget')[0].style.display !== 'none';
+            if (isOpen) {
+                $(this).autocomplete('search');
+            }
+        });
+    });
 
-    $(window).on('resize', async () => {
+    const reportZoomLevelDebounced = debounce(() => {
-        if (isMobile()) {
-            return;
-        }
-
-        //console.log('Window resized!');
         const zoomLevel = Number(window.devicePixelRatio).toFixed(2);
         const winWidth = window.innerWidth;
         const winHeight = window.innerHeight;
         console.debug(`Zoom: ${zoomLevel}, X:${winWidth}, Y:${winHeight}`);
+    });
+
+    $(window).on('resize', async () => {
+        adjustAutocompleteDebounced();
+        setHotswapsDebounced();
+
+        if (isMobile()) {
+            return;
+        }
+
+        reportZoomLevelDebounced();
+
         if (Object.keys(power_user.movingUIState).length > 0) {
             resetMovablePanels('resize');
         }
-        // Adjust layout and styling here
-        setHotswapsDebounced();
     });
 
     // Settings that go to settings.json