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_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+12 -3 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.on('load', function () {
+        image.off('load').on('load', function () {
+            if (!adjustScroll) {
+                return;
+            }
             const scrollPosition = $('#chat').scrollTop();
             const newChatHeight = $('#chat').prop('scrollHeight');
             const diff = newChatHeight - chatHeight;

@@ -5636,7 +5645,7 @@ export async function renameCharacter(name = null, { silent = false, renameChats
5636	}	5645	}
5637	}	5646	}
5638	catch (error) {	5647	catch (error) {
5639	// Reloading to prevent data corruption	5648	// Reloading to prevent data corruption
5640	if (!silent) await callPopup('Something went wrong. The page will be reloaded.', 'text');	5649	if (!silent) await callPopup('Something went wrong. The page will be reloaded.', 'text');
5641	else toastr.error('Something went wrong. The page will be reloaded.', 'Rename Character');	5650	else toastr.error('Something went wrong. The page will be reloaded.', 'Rename Character');
5642		5651

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 { callPopup, eventSource, event_types, getRequestHeaders, saveSettingsDebounced, substituteParamsExtended } from '../../../script.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(80%);
+    filter: brightness(90%);
+    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