Add scroll behavior options for media appending

c14fba88298867ddec8b33728cecc2bb8ebabec6

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

Parents: a47b3717023c4df1059adb0beeaacf83f7074cc6
5 files changed, +31 -17Ignore whitespace
public/script.js+11 -8
@@ -183,7 +183,7 @@ import {
183183 trimSpaces,
184184 clamp,
185185} from './scripts/utils.js';
186186import { debounce_timeout, GENERATION_TYPE_TRIGGERS, IGNORE_SYMBOL, inject_ids, MEDIA_DISPLAY, MEDIA_TYPE, SCROLL_BEHAVIOR, SWIPE_DIRECTION } from './scripts/constants.js';
187187
188188import { cancelDebouncedMetadataSave, doDailyExtensionUpdatesCheck, extension_settings, initExtensions, loadExtensionSettings, runGenerationInterceptors, saveMetadataDebounced } from './scripts/extensions.js';
189189import { COMMENT_NAME_DEFAULT, CONNECT_API_MAP, executeSlashCommandsOnChatInput, initDefaultSlashCommands, isExecutingCommandsFromChatInput, pauseScriptExecution, stopScriptExecution, UNIQUE_APIS } from './scripts/slash-commands.js';
@@ -2071,9 +2071,9 @@ export function getMediaIndex(mes) {
20712071 * Appends image or file to the message element.
20722072 * @param {ChatMessage} mes Message object
20732073 * @param {JQuery<HTMLElement>} messageElement Message element
20742074 * @param {booleanstring} [adjustScroll=truescrollBehavior] WhetherScroll tobehavior adjustwhen theadjusting scroll position after appending the media
20752075 */
20762076export function appendMediaToMessage(mes, messageElement, adjustScrollscrollBehavior = trueSCROLL_BEHAVIOR.ADJUST) {
20772077 ensureMessageMediaIsArray(mes);
20782078
20792079 const hasMedia = Array.isArray(mes?.extra?.media) && mes.extra.media.length > 0;
@@ -2084,13 +2084,16 @@ export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
20842084 const mediaBlocks = [];
20852085 const mediaPromises = [];
20862086
20872087 const chatHeight = adjustScroll && (hasMedia || hasFiles) ? chatElement.prop('scrollHeight') : 0;
20882088 const scrollPosition = (hasMedia || hasFiles) ? chatElement.scrollTop() : 0;
20892089 const doAdjustScroll = () => {
20902090 if (!hasMedia && !hasFiles) {
20912091 return;
20922092 }
20932093 if (!adjustScrollscrollBehavior === SCROLL_BEHAVIOR.NONE) {
2094+ return;
2095+ }
2096+ if (scrollBehavior === SCROLL_BEHAVIOR.KEEP) {
20942097 chatElement.scrollTop(scrollPosition);
20952098 return;
20962099 }
@@ -2397,7 +2400,7 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
23972400 swipeMessage.find('.mes_text').html(messageText).attr('title', title);
23982401 swipeMessage.find('.timestamp').text(timestamp).attr('title', `${params.extra.api} - ${params.extra.model}`);
23992402 updateReasoningUI(swipeMessage);
24002403 appendMediaToMessage(mes, swipeMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
24012404 if (power_user.timestamp_model_icon && params.extra?.api) {
24022405 insertSVGIcon(swipeMessage, params.extra);
24032406 }
@@ -2412,7 +2415,7 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
24122415 } else {
24132416 const messageId = forceId ?? chat.length - 1;
24142417 chatElement.find(`[mesid="${messageId}"] .mes_text`).append(messageText);
24152418 appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
24162419 showSwipes && hideSwipeButtons();
24172420 }
24182421
public/scripts/chats.js+5 -5
@@ -57,7 +57,7 @@ import { renderTemplateAsync } from './templates.js';
5757import { t } from './i18n.js';
5858import { humanizedDateTime } from './RossAscends-mods.js';
5959import { accountStorage } from './util/AccountStorage.js';
6060import { MEDIA_DISPLAY, MEDIA_TYPE, SCROLL_BEHAVIOR, SWIPE_DIRECTION } from './constants.js';
6161
6262/**
6363 * @typedef {Object} FileAttachment
@@ -418,7 +418,7 @@ async function deleteMessageFile(messageBlock, messageId, fileIndex) {
418418 await saveChatConditional();
419419 await deleteFileFromServer(url);
420420
421421 appendMediaToMessage(message, messageBlock, falseSCROLL_BEHAVIOR.KEEP);
422422}
423423
424424/**
@@ -489,7 +489,7 @@ function embedMessageFile(messageId, messageBlock) {
489489
490490 await populateFileAttachment(message, 'embed_file_input');
491491 await eventSource.emit(event_types.MESSAGE_FILE_EMBEDDED, messageId);
492492 appendMediaToMessage(message, messageBlock, falseSCROLL_BEHAVIOR.KEEP);
493493 await saveChatConditional();
494494 }
495495}
@@ -1022,7 +1022,7 @@ async function deleteMessageMedia(messageId, mediaIndex, messageBlock) {
10221022 }
10231023
10241024 await saveChatConditional();
10251025 appendMediaToMessage(message, messageBlock, falseSCROLL_BEHAVIOR.KEEP);
10261026}
10271027
10281028/**
@@ -1051,7 +1051,7 @@ async function switchMessageMediaDisplay(messageId, messageBlock, targetDisplay)
10511051
10521052 message.extra.media_display = targetDisplay;
10531053 await saveChatConditional();
10541054 appendMediaToMessage(message, messageBlock, falseSCROLL_BEHAVIOR.KEEP);
10551055}
10561056
10571057/**
public/scripts/constants.js+11 -0
@@ -94,6 +94,17 @@ export const MEDIA_TYPE = {
9494};
9595
9696/**
97+ * Scroll behavior options when appending media to messages.
98+ * @enum {string}
99+ * @readonly
100+ */
101+export const SCROLL_BEHAVIOR = {
102+ NONE: 'none',
103+ KEEP: 'keep',
104+ ADJUST: 'adjust',
105+};
106+
107+/**
97108 * @type {{readonly LEFT: 'left', readonly RIGHT: 'right'}}
98109 */
99110export const SWIPE_DIRECTION = {
public/scripts/extensions/caption/index.js+2 -2
@@ -10,7 +10,7 @@ import { SlashCommand } from '../../slash-commands/SlashCommand.js';
1010import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '../../slash-commands/SlashCommandArgument.js';
1111import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
1212import { callGenericPopup, Popup, POPUP_TYPE } from '../../popup.js';
1313import { MEDIA_DISPLAY, MEDIA_TYPE, SCROLL_BEHAVIOR } from '../../constants.js';
1414export { MODULE_NAME };
1515
1616const MODULE_NAME = 'caption';
@@ -692,7 +692,7 @@ jQuery(async function () {
692692 const imageIndex = Number(imageBlock.attr('data-index'));
693693 const data = getContext().chat[messageId];
694694 await captionExistingMessage(data, imageIndex);
695695 appendMediaToMessage(data, messageBlock, falseSCROLL_BEHAVIOR.KEEP);
696696 await saveChatConditional();
697697 } catch (e) {
698698 console.error('Message image recaption failed', e);
public/scripts/extensions/stable-diffusion/index.js+2 -2
@@ -52,7 +52,7 @@ import {
5252 SlashCommandArgument,
5353 SlashCommandNamedArgument,
5454} from '../../slash-commands/SlashCommandArgument.js';
5555import { debounce_timeout, MEDIA_DISPLAY, MEDIA_TYPE, SCROLL_BEHAVIOR, VIDEO_EXTENSIONS } from '../../constants.js';
5656import { SlashCommandEnumValue } from '../../slash-commands/SlashCommandEnumValue.js';
5757import { callGenericPopup, Popup, POPUP_TYPE } from '../../popup.js';
5858import { commonEnumProviders } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
@@ -4290,7 +4290,7 @@ async function sdMessageButton(e) {
42904290 message.extra.media.push(newMediaAttachment);
42914291 message.extra.media_index = message.extra.media.length - 1;
42924292
42934293 appendMediaToMessage(message, messageElement, falseSCROLL_BEHAVIOR.KEEP);
42944294
42954295 await context.saveChat();
42964296}