Add button to re-caption message image

f181d1a8476e519605f35cc2010b892e552c41dd

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 7149f46c9aaadd31b8add999c06be4a5a7ac5888
4 files changed, +32 -6Ignore whitespace
public/index.html+2 -1
@@ -5686,10 +5686,11 @@
56865686 <div class="mes_edit_cancel menu_button fa-solid fa-xmark" title="Cancel" data-i18n="[title]Cancel"></div>
56875687 </div>
56885688 </div>
56895689 <div class="mes_text"></div>
56905690 <div class="mes_img_container">
56915691 <div class="mes_img_controls">
56925692 <div title="Enlarge" class="right_menu_button fa-lg fa-solid fa-magnifying-glass mes_img_enlarge" data-i18n="[title]Enlarge"></div>
5693+ <div title="Caption" class="right_menu_button fa-lg fa-solid fa-envelope-open-text mes_img_caption" data-i18n="[title]Caption"></div>
56935694 <div title="Delete" class="right_menu_button fa-lg fa-solid fa-trash-can mes_img_delete" data-i18n="[title]Delete"></div>
56945695 </div>
56955696 <img class="mes_img" src="" />
public/script.js+12 -3
@@ -2079,14 +2079,23 @@ export function updateMessageBlock(messageId, message) {
20792079 appendMediaToMessage(message, messageElement);
20802080}
20812081
2082-export function appendMediaToMessage(mes, messageElement) {
2082+/**
2083+ * Appends image or file to the message element.
2084+ * @param {object} mes Message object
2085+ * @param {JQuery<HTMLElement>} messageElement Message element
2086+ * @param {boolean} [adjustScroll=true] Whether to adjust the scroll position after appending the media
2087+ */
2088+export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
20832089 // Add image to message
20842090 if (mes.extra?.image) {
20852091 const chatHeight = $('#chat').prop('scrollHeight');
20862092 const image = messageElement.find('.mes_img');
20872093 const text = messageElement.find('.mes_text');
20882094 const isInline = !!mes.extra?.inline_image;
20892095 image.off('load').on('load', function () {
2096+ if (!adjustScroll) {
2097+ return;
2098+ }
20902099 const scrollPosition = $('#chat').scrollTop();
20912100 const newChatHeight = $('#chat').prop('scrollHeight');
20922101 const diff = newChatHeight - chatHeight;
@@ -5636,7 +5645,7 @@ export async function renameCharacter(name = null, { silent = false, renameChats
56365645 }
56375646 }
56385647 catch (error) {
56395648 // Reloading to prevent data corruption
56405649 if (!silent) await callPopup('Something went wrong. The page will be reloaded.', 'text');
56415650 else toastr.error('Something went wrong. The page will be reloaded.', 'Rename Character');
56425651
public/scripts/extensions/caption/index.js+12 -1
@@ -1,6 +1,6 @@
11import { ensureImageFormatSupported, getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
22import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
33import { appendMediaToMessage, callPopup, eventSource, event_types, getRequestHeaders, saveChatConditional, saveSettingsDebounced, substituteParamsExtended } from '../../../script.js';
44import { getMessageTimeStamp } from '../../RossAscends-mods.js';
55import { SECRET_KEYS, secret_state } from '../../secrets.js';
66import { getMultimodalCaption } from '../shared.js';
@@ -514,6 +514,15 @@ jQuery(async function () {
514514 eventSource.on(event_types.MESSAGE_SENT, onMessageEvent);
515515 eventSource.on(event_types.MESSAGE_FILE_EMBEDDED, onMessageEvent);
516516
517+ $(document).on('click', '.mes_img_caption', async function () {
518+ const messageBlock = $(this).closest('.mes');
519+ const index = Number(messageBlock.attr('mesid'));
520+ const data = getContext().chat[index];
521+ await captionExistingMessage(data);
522+ appendMediaToMessage(data, messageBlock, false);
523+ await saveChatConditional();
524+ });
525+
517526 SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'caption',
518527 callback: captionCommandCallback,
519528 returns: 'caption',
@@ -548,4 +557,6 @@ jQuery(async function () {
548557 </div>
549558 `,
550559 }));
560+
561+ document.body.classList.add('caption');
551562});
public/style.css+6 -1
@@ -4481,7 +4481,8 @@ a {
44814481}
44824482
44834483.mes_img_controls .right_menu_button {
44844484 filter: brightness(8090%);
4485+ text-shadow: 1px 1px var(--SmartThemeShadowColor) !important;
44854486 padding: 1px;
44864487 height: 1.25em;
44874488 width: 1.25em;
@@ -4506,6 +4507,10 @@ a {
45064507 display: flex;
45074508}
45084509
4510+body:not(.caption) .mes_img_caption {
4511+ display: none;
4512+}
4513+
45094514.img_enlarged_holder {
45104515 /* Scaling via flex-grow and object-fit only works if we have some kind of base-height set */
45114516 min-height: 120px;