Performance improvements due to using chatElement instead of $('#chat'). (#4576) * Performance improvements due to using chatElement instead of $('#chat'). * Reverts change `hideSwipeButtons()` change. https://github.com/SillyTavern/SillyTavern/pull/4576#discussion_r2394996102 --------- Co-authored-by: user <user@exmaple.com>

9415185a890f5a7cc9c13af78444f6daaef2ec71

DeclineThyself <FallenHaze@tutamail.com>

Signed
Parents: 7f9cbb04c6d1b2045f65d1fc77d94657fe3d2419
1 files changed, +51 -51Showing whitespace changes
public/script.js+51 -51
@@ -1345,7 +1345,7 @@ export async function replaceCurrentChat() {
13451345}
13461346
13471347export async function showMoreMessages(messagesToLoad = null) {
13481348 const firstDisplayedMesId = $('#chat')chatElement.children('.mes').first().attr('mesid');
13491349 let messageId = Number(firstDisplayedMesId);
13501350 let count = messagesToLoad || power_user.chat_truncation || Number.MAX_SAFE_INTEGER;
13511351
@@ -1356,7 +1356,7 @@ export async function showMoreMessages(messagesToLoad = null) {
13561356 }
13571357
13581358 console.debug('Inserting messages before', messageId, 'count', count, 'chat length', chat.length);
13591359 const prevHeight = $('#chat')chatElement.prop('scrollHeight');
13601360 const isButtonInView = isElementInViewport($('#show_more_messages')[0]);
13611361
13621362 while (messageId > 0 && count > 0) {
@@ -1371,8 +1371,8 @@ export async function showMoreMessages(messagesToLoad = null) {
13711371 }
13721372
13731373 if (isButtonInView) {
13741374 const newHeight = $('#chat')chatElement.prop('scrollHeight');
13751375 $('#chat')chatElement.scrollTop(newHeight - prevHeight);
13761376 }
13771377
13781378 applyStylePins();
@@ -1385,7 +1385,7 @@ export async function printMessages() {
13851385
13861386 if (chat.length > count) {
13871387 startIndex = chat.length - count;
13881388 $('#chat')chatElement.append('<div id="show_more_messages">Show more messages</div>');
13891389 }
13901390
13911391 for (let i = startIndex; i < chat.length; i++) {
@@ -1408,8 +1408,8 @@ export async function printMessages() {
14081408 }
14091409 }
14101410
14111411 $chatElement.find('#chat .mes').removeClass('last_mes');
14121412 $chatElement.find('#chat .mes').last().addClass('last_mes');
14131413 hideSwipeButtons();
14141414 showSwipeButtons();
14151415 scrollChatToBottom();
@@ -1442,7 +1442,7 @@ export async function clearChat() {
14421442 if (is_delete_mode) {
14431443 $('#dialogue_del_mes_cancel').trigger('click');
14441444 }
14451445 $('#chat')chatElement.children().remove();
14461446 if ($('.zoomed_avatar[forChar]').length) {
14471447 console.debug('saw avatars to remove');
14481448 $('.zoomed_avatar[forChar]').remove();
@@ -1454,7 +1454,7 @@ export async function clearChat() {
14541454
14551455export async function deleteLastMessage() {
14561456 chat.length = chat.length - 1;
14571457 $('#chat')chatElement.children('.mes').last().remove();
14581458 await eventSource.emit(event_types.MESSAGE_DELETED, chat.length);
14591459}
14601460
@@ -1797,7 +1797,7 @@ function getMessageFromTemplate({
17971797 * @param {boolean} [options.rerenderMessage=true] Whether to re-render the message content (inside <c>.mes_text</c>)
17981798 */
17991799export function updateMessageBlock(messageId, message, { rerenderMessage = true } = {}) {
18001800 const messageElement = $chatElement.find(`#chat [mesid="${messageId}"]`);
18011801 if (rerenderMessage) {
18021802 const text = message?.extra?.display_text ?? message.mes;
18031803 messageElement.find('.mes_text').html(messageFormatting(text, message.name, message.is_system, message.is_user, messageId, {}, false));
@@ -1819,7 +1819,7 @@ export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
18191819 // Add image to message
18201820 if (mes.extra?.image) {
18211821 const container = messageElement.find('.mes_img_container');
18221822 const chatHeight = $('#chat')chatElement.prop('scrollHeight');
18231823 const image = messageElement.find('.mes_img');
18241824 const text = messageElement.find('.mes_text');
18251825 const isInline = !!mes.extra?.inline_image;
@@ -1827,10 +1827,10 @@ export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
18271827 if (!adjustScroll) {
18281828 return;
18291829 }
18301830 const scrollPosition = $('#chat')chatElement.scrollTop();
18311831 const newChatHeight = $('#chat')chatElement.prop('scrollHeight');
18321832 const diff = newChatHeight - chatHeight;
18331833 $('#chat')chatElement.scrollTop(scrollPosition + diff);
18341834 };
18351835 image.off('load').on('load', function () {
18361836 image.removeAttr('alt');
@@ -1877,16 +1877,16 @@ export function appendMediaToMessage(mes, messageElement, adjustScroll = true) {
18771877 const container = $('#message_video_template .mes_video_container').clone();
18781878 messageElement.find('.mes_video_container').remove();
18791879 messageElement.find('.mes_block').append(container);
18801880 const chatHeight = $('#chat')chatElement.prop('scrollHeight');
18811881 const video = container.find('.mes_video');
18821882 video.off('loadedmetadata').on('loadedmetadata', function () {
18831883 if (!adjustScroll) {
18841884 return;
18851885 }
18861886 const scrollPosition = $('#chat')chatElement.scrollTop();
18871887 const newChatHeight = $('#chat')chatElement.prop('scrollHeight');
18881888 const diff = newChatHeight - chatHeight;
18891889 $('#chat')chatElement.scrollTop(scrollPosition + diff);
18901890 });
18911891
18921892 video.attr('src', mes.extra?.video);
@@ -2041,7 +2041,7 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
20412041 // Callers push the new message to chat before calling addOneMessage
20422042 const newMessageId = typeof forceId == 'number' ? forceId : chat.length - 1;
20432043
20442044 const newMessage = $chatElement.find(`#chat [mesid="${newMessageId}"]`);
20452045 const isSmallSys = mes?.extra?.isSmallSys;
20462046
20472047 if (isSmallSys === true) {
@@ -2103,8 +2103,8 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
21032103 }
21042104
21052105 if (showSwipes) {
21062106 $chatElement.find('#chat .mes').last().addClass('last_mes');
21072107 $chatElement.find('#chat .mes').eq(-2).removeClass('last_mes');
21082108 hideSwipeButtons();
21092109 showSwipeButtons();
21102110 }
@@ -2930,7 +2930,7 @@ class StreamingProcessor {
29302930 async onFinishStreaming(messageId, text) {
29312931 this.markUIGenStopped();
29322932 await this.onProgressStreaming(messageId, text, true);
29332933 addCopyToCodeBlocks($chatElement.find(`#chat .mes[mesid="${messageId}"]`));
29342934
29352935 await this.reasoningHandler.finish(messageId);
29362936
@@ -3358,7 +3358,7 @@ class TempResponseLength {
33583358 */
33593359function removeLastMessage() {
33603360 return new Promise((resolve) => {
33613361 const lastMes = $('#chat')chatElement.children('.mes').last();
33623362 if (lastMes.length === 0) {
33633363 return resolve();
33643364 }
@@ -5122,18 +5122,18 @@ export async function duplicateCharacter() {
51225122}
51235123
51245124function setInContextMessages(msgInContextCount, type) {
51255125 $chatElement.find('#chat .mes').removeClass('lastInContext');
51265126
51275127 if (type === 'swipe' || type === 'regenerate' || type === 'continue') {
51285128 msgInContextCount++;
51295129 }
51305130
51315131 const lastMessageBlock = $chatElement.find('#chat .mes:not([is_system="true"])').eq(-msgInContextCount);
51325132 lastMessageBlock.addClass('lastInContext');
51335133
51345134 if (lastMessageBlock.length === 0) {
51355135 const firstMessageId = getFirstDisplayedMessageId();
51365136 $chatElement.find(`#chat .mes[mesid="${firstMessageId}"`).addClass('lastInContext');
51375137 }
51385138
51395139 // Update last id to chat. No metadata save on purpose, gets hopefully saved via another call
@@ -7848,7 +7848,7 @@ export function showSwipeButtons() {
78487848 };
78497849 }
78507850
78517851 const currentMessage = $('#chat')chatElement.children().filter(`[mesid="${chat.length - 1}"]`);
78527852 const swipeId = chat[chat.length - 1].swipe_id;
78537853 const swipeCounterText = formatSwipeCounter((swipeId + 1), chat[chat.length - 1].swipes.length);
78547854 const swipeRight = currentMessage.find('.swipe_right');
@@ -7994,13 +7994,13 @@ async function importCharacterChat(formData, eventTarget) {
79947994function updateViewMessageIds(startFromZero = false) {
79957995 const minId = startFromZero ? 0 : getFirstDisplayedMessageId();
79967996
79977997 $('#chat')chatElement.find('.mes').each(function (index, element) {
79987998 $(element).attr('mesid', minId + index);
79997999 $(element).find('.mesIDDisplay').text(`#${minId + index}`);
80008000 });
80018001
80028002 $chatElement.find('#chat .mes').removeClass('last_mes');
80038003 $chatElement.find('#chat .mes').last().addClass('last_mes');
80048004
80058005 updateEditArrowClasses();
80068006}
@@ -8012,14 +8012,14 @@ export function getFirstDisplayedMessageId() {
80128012}
80138013
80148014function updateEditArrowClasses() {
80158015 $chatElement.find('#chat .mes .mes_edit_up').removeClass('disabled');
80168016 $chatElement.find('#chat .mes .mes_edit_down').removeClass('disabled');
80178017
80188018 if (this_edit_mes_id !== undefined) {
80198019 const down = $chatElement.find(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_down`);
80208020 const up = $chatElement.find(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_up`);
80218021 const lastId = Number($chatElement.find('#chat .mes').last().attr('mesid'));
80228022 const firstId = Number($chatElement.find('#chat .mes').first().attr('mesid'));
80238023
80248024 if (lastId == Number(this_edit_mes_id)) {
80258025 down.addClass('disabled');
@@ -8038,7 +8038,7 @@ function updateEditArrowClasses() {
80388038export function closeMessageEditor(what = 'all') {
80398039 if (what === 'message' || what === 'all') {
80408040 if (this_edit_mes_id) {
80418041 $chatElement.find(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_cancel`).trigger('click');
80428042 }
80438043 }
80448044 if (what === 'reasoning' || what === 'all') {
@@ -8713,10 +8713,10 @@ export function swipe_right(_event = null, { source, repeated } = {}) {
87138713 easing: animation_easing,
87148714 queue: false,
87158715 complete: async function () {
87168716 const is_animation_scroll = ($('#chat')chatElement.scrollTop() >= ($('#chat')chatElement.prop('scrollHeight') - $('#chat')chatElement.outerHeight()) - 10);
87178717 //console.log(parseInt(chat[chat.length-1]['swipe_id']));
87188718 //console.log(chat[chat.length-1]['swipes'].length);
87198719 const swipeMessage = $('#chat')chatElement.find('[mesid="' + (chat.length - 1) + '"]');
87208720 if (run_generate && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) {
87218721 //shows "..." while generating
87228722 swipeMessage.find('.mes_text').html('...');
@@ -8749,12 +8749,12 @@ export function swipe_right(_event = null, { source, repeated } = {}) {
87498749 queue: false,
87508750 progress: function () {
87518751 // Scroll the chat down as the message expands
87528752 if (is_animation_scroll) $('#chat')chatElement.scrollTop($('#chat')chatElement[0].scrollHeight);
87538753 },
87548754 complete: function () {
87558755 this_mes_div.css('height', 'auto');
87568756 // Scroll the chat down to the bottom once the animation is complete
87578757 if (is_animation_scroll) $('#chat')chatElement.scrollTop($('#chat')chatElement[0].scrollHeight);
87588758 },
87598759 });
87608760 this_mes_div.children('.mes_block').transition({
@@ -10066,15 +10066,15 @@ jQuery(async function () {
1006610066 });
1006710067
1006810068 if (this_del_mes >= 0) {
1006910069 $chatElement.find(`.mes[mesid="${this_del_mes}"]`).nextAll('div').remove();
1007010070 $chatElement.find(`.mes[mesid="${this_del_mes}"]`).remove();
1007110071 chat.length = this_del_mes;
1007210072 chat_metadata['tainted'] = true;
1007310073 await saveChatConditional();
1007410074 chatElement.scrollTop(chatElement[0].scrollHeight);
1007510075 await eventSource.emit(event_types.MESSAGE_DELETED, chat.length);
1007610076 $chatElement.find('#chat .mes').removeClass('last_mes');
1007710077 $chatElement.find('#chat .mes').last().addClass('last_mes');
1007810078 } else {
1007910079 console.log('this_del_mes is not >= 0, not deleting');
1008010080 }
@@ -10179,9 +10179,9 @@ jQuery(async function () {
1017910179 return;
1018010180 }*/
1018110181
1018210182 let chatScrollPosition = $('#chat')chatElement.scrollTop();
1018310183 if (this_edit_mes_id !== undefined) {
1018410184 let mes_edited = $chatElement.find(`#chat [mesid="${this_edit_mes_id}"]`).find('.mes_edit_done');
1018510185 if (Number(edit_mes_id) == chat.length - 1) { //if the generating swipe (...)
1018610186 let run_edit = true;
1018710187 if (chat[edit_mes_id]['swipe_id'] !== undefined) {
@@ -10240,7 +10240,7 @@ jQuery(async function () {
1024010240 String(edit_textarea.val()).length,
1024110241 );
1024210242 if (Number(this_edit_mes_id) === chat.length - 1) {
1024310243 $('#chat')chatElement.scrollTop(chatScrollPosition);
1024410244 }
1024510245
1024610246 updateEditArrowClasses();
@@ -10358,7 +10358,7 @@ jQuery(async function () {
1035810358
1035910359 hideSwipeButtons();
1036010360 const targetId = Number(this_edit_mes_id) - 1;
1036110361 const target = $chatElement.find(`#chat .mes[mesid="${targetId}"]`);
1036210362 const root = $(this).closest('.mes');
1036310363
1036410364 if (root.length === 0 || target.length === 0) {
@@ -10387,7 +10387,7 @@ jQuery(async function () {
1038710387
1038810388 hideSwipeButtons();
1038910389 const targetId = Number(this_edit_mes_id) + 1;
1039010390 const target = $chatElement.find(`#chat .mes[mesid="${targetId}"]`);
1039110391 const root = $(this).closest('.mes');
1039210392
1039310393 if (root.length === 0 || target.length === 0) {
@@ -10820,7 +10820,7 @@ jQuery(async function () {
1082010820 return;
1082110821 }
1082210822 if (isEditVisible && power_user.auto_save_msg_edits === true) {
1082310823 $chatElement.find(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_done`).trigger('click');
1082410824 closeMessageEditor('reasoning');
1082510825 $('#send_textarea').trigger('focus');
1082610826 return;