`refactor/perf-printMessages` #2: Removed `getMessageFromTemplate` (#4983) * Reduced redundant swipe code by fully updating the swipe message. * `getMessageFromTemplate` is an inconvenient function that requires more lines than it saves. It cannot be used in any other function, therefore it should not exist. This change also prevents an unnecessary call of `messageTemplate.clone` in addOneMessage when `type = 'swipe'`. ESLint. * Fixed: https://github.com/SillyTavern/SillyTavern/pull/4983#discussion_r2680379455 * Replaced ?? with &&: https://github.com/SillyTavern/SillyTavern/pull/4983#discussion_r2680366010 and removed comments. * Fixed bias check. "0" is falsy. * Remove scroll adjust early bail * Call appendMediaToMessage before updating content Because we need to preserve chatHeight and scrollPosition according to the previous swipe, not the new one --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

a9f2d559f428029964c2dfb7ccc3d429d92f67ea

DeclineThyself <235079501+DeclineThyself@users.noreply.github.com>

Signed

Parents: 491f2a3afdbb5b62f091f59a973760bb9cfd6d51

public/script.js+62 -121 Viewed

  * the value in `extra.api`.
+ *
  * @param {JQuery<HTMLElement>} mes - The message element containing the timestamp where the icon should be inserted or replaced.
- * @param {Object} extra - Contains the API and model details.
+ * @param {ChatMessageExtra} extra - Contains the API and model details.
- * @param {string} extra.api - The name of the API, used to determine which SVG to fetch.
- * @param {string} extra.model - The model name, used to check for the substring "claude".
  */
 function insertSVGIcon(mes, extra) {
     // Determine the SVG filename

     createModelImage('thinking-icon', '.mes_reasoning_header_title', true);
+}
-function getMessageFromTemplate({
-    mesId,
-    swipeId,
-    characterName,
-    isUser,
-    avatarImg,
-    bias,
-    isSystem,
-    title,
-    timerValue,
-    timerTitle,
-    bookmarkLink,
-    forceAvatar,
-    timestamp,
-    tokenCount,
-    extra,
-    type,
-}) {
-    const mes = messageTemplate.clone();
-    mes.attr({
-        'mesid': mesId,
-        'swipeid': swipeId,
-        'ch_name': characterName,
-        'is_user': isUser,
-        'is_system': !!isSystem,
-        'bookmark_link': bookmarkLink,
-        'force_avatar': !!forceAvatar,
-        'timestamp': timestamp,
-        ...(type ? { type } : {}),
-    });
-    mes.find('.avatar img').attr('src', avatarImg);
-    mes.find('.ch_name .name_text').text(characterName);
-    mes.find('.mes_bias').html(bias);
-    mes.find('.timestamp').text(timestamp).attr('title', `${extra?.api ? extra.api + ' - ' : ''}${extra?.model ?? ''}`);
-    mes.find('.mesIDDisplay').text(`#${mesId}`);
-    tokenCount && mes.find('.tokenCounterDisplay').text(`${tokenCount}t`);
-    title && mes.attr('title', title);
-    timerValue && mes.find('.mes_timer').attr('title', timerTitle).text(timerValue);
-    bookmarkLink && updateBookmarkDisplay(mes);
-    updateReasoningUI(mes);
-    if (power_user.timestamp_model_icon && extra?.api) {
-        insertSVGIcon(mes, extra);
-    }
-    return mes;
-}
 /**
  * Re-renders a message block with updated content.
  * @param {number} messageId Message ID

             chatElement.scrollTop(scrollPosition);
             return;
+        }
-        const newScrollPosition = chatElement.scrollTop();
-        if (newScrollPosition > scrollPosition) {
-            return;
-        }
         const newChatHeight = chatElement.prop('scrollHeight');
         const diff = newChatHeight - chatHeight;
         chatElement.scrollTop(scrollPosition + diff);

  * @returns {JQuery<HTMLElement>} The newly added message element
  */
 export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true, insertBefore = null, forceId = null, showSwipes = true, insert = true } = {}) {
+    // Callers push the new message to chat before calling addOneMessage
+    const newMessageId = typeof forceId == 'number' ? forceId : chat.length - 1;
     let messageText = mes.mes;
     const momentDate = timestampToMoment(mes.send_date);
     const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';

         messageText = mes.extra.display_text;
+    }
-    // Forbidden black magic
-    // This allows to use "continue" on user messages
-    if (type === 'swipe' && mes.swipe_id === undefined) {
-        mes.swipe_id = 0;
-        mes.swipes = [mes.mes];
-    }
     let avatarImg = getThumbnailUrl('persona', user_avatar);
     const isSystem = mes.is_system;
-    const title = mes.title;
     //for non-user messages
     if (!mes.is_user) {

@@ -2479,7 +2418,7 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
2479	}	2418	}
2480	}	2419	}
2481	//old processing:	2420	//old processing:
2482	//if messge is from sytem, use the name provided in the message JSONL to proceed,	2421	//if message is from system, use the name provided in the message JSONL to proceed,
2483	//if not system message, use name2 (char's name) to proceed	2422	//if not system message, use name2 (char's name) to proceed
2484	//characterName = mes.is_system \|\| mes.force_avatar ? mes.name : name2;	2423	//characterName = mes.is_system \|\| mes.force_avatar ? mes.name : name2;
2485	} else if (mes.is_user && mes.force_avatar) {	2424	} else if (mes.is_user && mes.force_avatar) {

         sanitizerOverrides,
         false,
     );
-    const bias = messageFormatting(mes.extra?.bias ?? '', '', false, false, -1, {}, false);
+    let newMessage;
-    let bookmarkLink = mes?.extra?.bookmark_link ?? '';
+    if (type === 'swipe') {
-    let params = {
+        // Forbidden black magic
-        mesId: forceId ?? chat.length - 1,
+        // This allows to use "continue" on user messages
-        swipeId: mes.swipe_id ?? 0,
+        mes.swipe_id ??= 0;
-        characterName: mes.name,
+        mes.swipes ??= [mes.mes];
-        isUser: mes.is_user,
+        //This keeps listeners intact.
-        avatarImg: avatarImg,
+        newMessage = chatElement.find(`[mesid="${newMessageId}"]`);
-        bias: bias,
+    } else {
-        isSystem: isSystem,
+        newMessage = messageTemplate.clone();
-        title: title,
+    }
-        bookmarkLink: bookmarkLink,
-        forceAvatar: mes.force_avatar,
+    const { timerValue, timerTitle } = formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration, mes.extra?.time_to_first_token);
-        timestamp: timestamp,
+    const tokenCount = mes.extra?.token_count;
-        extra: mes.extra,
+    const bookmarkLink = mes?.extra?.bookmark_link;
-        tokenCount: mes.extra?.token_count ?? 0,
-        type: mes.extra?.type ?? '',
+    newMessage.attr({
-        ...formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration, mes.extra?.time_to_first_token),
+        'mesid': newMessageId,
-    };
+        'swipeid': mes.swipe_id ?? 0,
+        'ch_name': mes.name,
+        'is_user': mes.is_user,
+        'is_system': !!mes.is_system,
+        'bookmark_link': bookmarkLink,
+        'force_avatar': !!mes.force_avatar,
+        'timestamp': timestamp,
+        // ...(type ?? { type }),
+        'type': mes.extra?.type ?? '',
+    });
+    newMessage.find('.avatar img').attr('src', avatarImg);
+    newMessage.find('.ch_name .name_text').text(mes.name);
+    newMessage.find('.timestamp').text(timestamp).attr('title', `${mes.extra?.api ? mes.extra.api + ' - ' : ''}${mes.extra?.model ?? ''}`);
+    newMessage.find('.mesIDDisplay').text(`#${newMessageId}`);
+    tokenCount && newMessage.find('.tokenCounterDisplay').text(`${tokenCount}t`);
+    mes.title && newMessage.attr('title', mes.title);
+    timerValue && newMessage.find('.mes_timer').attr('title', timerTitle).text(timerValue);
+    bookmarkLink && updateBookmarkDisplay(newMessage);
+    if (mes.extra?.bias !== '') {
+        const bias = messageFormatting(mes.extra?.bias, '', false, false, -1, {}, false);
+        newMessage.find('.mes_bias').html(bias);
+    }
+    updateReasoningUI(newMessage);
+    if (power_user.timestamp_model_icon && mes.extra?.api) {
+        insertSVGIcon(newMessage, mes.extra);
+    }
-    const renderedMessage = getMessageFromTemplate(params);
     if (type !== 'swipe' && insert) {
         if (!insertAfter && !insertBefore) {
-            chatElement.append(renderedMessage);
+            chatElement.append(newMessage);
+        }
         else if (insertAfter) {
             const target = chatElement.find(`.mes[mesid="${insertAfter}"]`);
-            $(renderedMessage).insertAfter(target);
+            $(newMessage).insertAfter(target);
         } else {
             const target = chatElement.find(`.mes[mesid="${insertBefore}"]`);
-            $(renderedMessage).insertBefore(target);
+            $(newMessage).insertBefore(target);
+        }
+    }
-    // Callers push the new message to chat before calling addOneMessage
-    const newMessageId = typeof forceId == 'number' ? forceId : chat.length - 1;
-    const newMessage = insert ? chatElement.find(`[mesid="${newMessageId}"]`) : renderedMessage;
     const isSmallSys = mes?.extra?.isSmallSys;
     if (isSmallSys === true) {

         newMessage.addClass('toolCall');
+    }
-    //shows or hides the Prompt display button
-    let mesIdToFind = type === 'swipe' ? params.mesId - 1 : params.mesId;  //Number(newMessage.attr('mesId'));
     //if we have itemized messages, and the array isn't null..
-    if (params.isUser === false && Array.isArray(itemizedPrompts) && itemizedPrompts.length > 0) {
+    if (!mes.is_user && Array.isArray(itemizedPrompts) && itemizedPrompts.length > 0) {
-        const itemizedPrompt = itemizedPrompts.find(x => Number(x.mesId) === Number(mesIdToFind));
+        const itemizedPrompt = itemizedPrompts.find(x => Number(x.mesId) === Number(newMessageId));
         if (itemizedPrompt) {
             newMessage.find('.mes_prompt').show();
+        }

         $(this).parent().html('<div class="missing-avatar fa-solid fa-user-slash"></div>');
     });
-    if (type === 'swipe') {
+    appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
-        newMessage.attr('swipeid', params.swipeId);
+    newMessage.find('.mes_text').html(messageText);
-        newMessage.find('.mes_text').html(messageText).attr('title', title);
-        newMessage.find('.timestamp').text(timestamp).attr('title', `${params.extra.api} - ${params.extra.model}`);
-        updateReasoningUI(newMessage);
-        appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
-        if (power_user.timestamp_model_icon && params.extra?.api) {
-            insertSVGIcon(newMessage, params.extra);
-        }
-        if (mes.swipe_id == mes.swipes.length - 1) {
-            newMessage.find('.mes_timer').text(params.timerValue).attr('title', params.timerTitle);
-            newMessage.find('.tokenCounterDisplay').text(`${params.tokenCount}t`);
-        } else {
-            newMessage.find('.mes_timer').empty();
-            newMessage.find('.tokenCounterDisplay').empty();
-        }
-    } else {
-        newMessage.find('.mes_text').append(messageText);
-        appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
-    }
     addCopyToCodeBlocks(newMessage);
     // Set the swipes counter for all non-user messages.
-    if (!params.isUser) {
+    if (!mes.is_user) {
         updateSwipeCounter(newMessageId, { messageElement: newMessage });
+    }