f181d1a8 · permissionBRICK/SillyTavern

public/index.html+2 -1 Viewed

                         <div class="mes_edit_cancel menu_button  fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
                     </div>
                 </div>
                 <div class="mes_text"></div>
                 <div class="mes_img_container">
                     <div class="mes_img_controls">
                         <div title="Enlarge" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Enlarge"></div>
 +                        <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
                         <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
                     </div>
                     <img class="mes_img" src="" />

public/script.js+11 -2 Viewed

     appendMediaToMessage(message, messageElement);
+}
 -export function appendMediaToMessage(mes, messageElement) {
 +/**
 + * Appends image or file to the message element.
 + * @param {object} mes Message object
 + * @param {JQuery<HTMLElement>} messageElement Message element
 + * @param {boolean} [adjustScroll=true] Whether to adjust the scroll position after appending the media
 + */
 +export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
     // Add image to message
     if (mes.extra?.image) {
         const chatHeight = $('#chat').prop('scrollHeight');
         const image = messageElement.find('.mes_img');
         const text = messageElement.find('.mes_text');
         const isInline = !!mes.extra?.inline_image;
         image.off('load').on('load', function () {
 +            if (!adjustScroll) {
 +                return;
 +            }
             const scrollPosition = $('#chat').scrollTop();
             const newChatHeight = $('#chat').prop('scrollHeight');
             const diff = newChatHeight - chatHeight;

public/scripts/extensions/caption/index.js+12 -1 Viewed

 import { ensureImageFormatSupported, getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
 import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
 import { appendMediaToMessage, callPopup, eventSource, event_types, getRequestHeaders, saveChatConditional, saveSettingsDebounced, substituteParamsExtended } from '../../../script.js';
 import { getMessageTimeStamp } from '../../RossAscends-mods.js';
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
 import { getMultimodalCaption } from '../shared.js';

     eventSource.on(event_types.MESSAGE_SENT, onMessageEvent);
     eventSource.on(event_types.MESSAGE_FILE_EMBEDDED, onMessageEvent);
 +    $(document).on('click', '.mes_img_caption', async function () {
 +        const messageBlock = $(this).closest('.mes');
 +        const index = Number(messageBlock.attr('mesid'));
 +        const data = getContext().chat[index];
 +        await captionExistingMessage(data);
 +        appendMediaToMessage(data, messageBlock, false);
 +        await saveChatConditional();
 +    });
++
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'caption',
         callback: captionCommandCallback,
         returns: 'caption',

             </div>
         `,
     }));
++
 +    document.body.classList.add('caption');
 });

public/style.css+6 -1 Viewed

+}
 .mes_img_controls .right_menu_button {
     filter: brightness(8090%);
 +    text-shadow: 1px 1px var(--SmartThemeShadowColor) !important;
     padding: 1px;
     height: 1.25em;
     width: 1.25em;

     display: flex;
+}
 +body:not(.caption) .mes_img_caption {
 +    display: none;
 +}
++
 .img_enlarged_holder {
     /* Scaling via flex-grow and object-fit only works if we have some kind of base-height set */
     min-height: 120px;

Add button to re-caption message image