`refactor/perf-printMessages` #4: Renamed `newMessage` to `messageElement` and `newMessageId` to `messageId`. (#4985) * If insert is false, `newMessage` may not be new, so I renamed `newMessage` to `messageElement` and `newMessageId` to `messageId`. I also rearranged some constants to improve readability. * Accept 0 as valid insertAfter/insertBefore targets * Yeah whatever --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

3e40ac1c27bd4446408820f221c735afb93e8bfe

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

Signed

Parents: f8c373f55a8cdcba93c43d8a88b760ecb76ac600

public/script.js+42 -48 Viewed

  */
 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 = (() => {
+    const messageId = (() => {
         if (typeof forceId === 'number') {
             return forceId;
+        }

         return chat.length - 1;
     })();
-    const momentDate = timestampToMoment(mes.send_date);
-    const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';
     let avatarImg = getThumbnailUrl('persona', user_avatar);

             avatarImg = mes.force_avatar;
         } else if (this_chid === undefined) {
             avatarImg = system_avatar;
-        } else {
+        } else if (characters[this_chid] && characters[this_chid].avatar !== 'none') {
-            if (characters[this_chid].avatar !== 'none') {
             avatarImg = getThumbnailUrl('avatar', characters[this_chid].avatar);
         } else {
             avatarImg = default_avatar;
+        }
-        }
         //old processing:
         //if message is from system, use the name provided in the message JSONL to proceed,
         //if not system message, use name2 (char's name) to proceed

         // Special case for persona images.
         avatarImg = mes.force_avatar;
+    }
+    const momentDate = timestampToMoment(mes.send_date);
+    const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';
+    const messageHTML = getMessageTextHTML(mes, { messageId });
+    const bookmarkLink = mes?.extra?.bookmark_link;
+    const tokenCount = mes.extra?.token_count;
+    const { timerValue, timerTitle } = formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration, mes.extra?.time_to_first_token);
-    const messageHTML = getMessageTextHTML(mes, { messageId: newMessageId });
+    let messageElement;
-    let newMessage;
     if (type === 'swipe') {
         // Forbidden black magic

         mes.swipe_id ??= 0;
         mes.swipes ??= [mes.mes];
         //This keeps listeners intact.
-        newMessage = chatElement.find(`[mesid="${newMessageId}"]`);
+        messageElement = chatElement.find(`[mesid="${messageId}"]`);
     } else {
-        newMessage = messageTemplate.clone();
+        messageElement = messageTemplate.clone();
+    }
-    const { timerValue, timerTitle } = formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration, mes.extra?.time_to_first_token);
+    messageElement.attr({
-    const tokenCount = mes.extra?.token_count;
+        'mesid': messageId,
-    const bookmarkLink = mes?.extra?.bookmark_link;
-    newMessage.attr({
-        'mesid': newMessageId,
         'swipeid': mes.swipe_id ?? 0,
         'ch_name': mes.name,
         'is_user': mes.is_user,

         'type': mes.extra?.type ?? '',
     });
-    newMessage.find('.avatar img').attr('src', avatarImg);
+    messageElement.find('.avatar img').attr('src', avatarImg);
-    newMessage.find('.ch_name .name_text').text(mes.name);
+    messageElement.find('.ch_name .name_text').text(mes.name);
-    newMessage.find('.timestamp').text(timestamp).attr('title', `${mes.extra?.api ? mes.extra.api + ' - ' : ''}${mes.extra?.model ?? ''}`);
+    messageElement.find('.timestamp').text(timestamp).attr('title', `${mes.extra?.api ? mes.extra.api + ' - ' : ''}${mes.extra?.model ?? ''}`);
-    newMessage.find('.mesIDDisplay').text(`#${newMessageId}`);
+    messageElement.find('.mesIDDisplay').text(`#${messageId}`);
-    tokenCount && newMessage.find('.tokenCounterDisplay').text(`${tokenCount}t`);
+    tokenCount && messageElement.find('.tokenCounterDisplay').text(`${tokenCount}t`);
-    mes.title && newMessage.attr('title', mes.title);
+    mes.title && messageElement.attr('title', mes.title);
-    timerValue && newMessage.find('.mes_timer').attr('title', timerTitle).text(timerValue);
+    timerValue && messageElement.find('.mes_timer').attr('title', timerTitle).text(timerValue);
-    bookmarkLink && updateBookmarkDisplay(newMessage);
+    bookmarkLink && updateBookmarkDisplay(messageElement);
     if (mes.extra?.bias !== '') {
         const bias = messageFormatting(mes.extra?.bias, '', false, false, -1, {}, false);
-        newMessage.find('.mes_bias').html(bias);
+        messageElement.find('.mes_bias').html(bias);
+    }
-    updateReasoningUI(newMessage);
+    updateReasoningUI(messageElement);
     if (power_user.timestamp_model_icon && mes.extra?.api) {
-        insertSVGIcon(newMessage, mes.extra);
+        insertSVGIcon(messageElement, mes.extra);
+    }
     if (type !== 'swipe' && insert) {
-        if (!insertAfter && !insertBefore) {
+        if (typeof insertAfter === 'number' && insertAfter >= 0) {
-            chatElement.append(newMessage);
-        }
-        else if (insertAfter) {
             const target = chatElement.find(`.mes[mesid="${insertAfter}"]`);
-            $(newMessage).insertAfter(target);
+            $(messageElement).insertAfter(target);
-        } else {
+        } else if (typeof insertBefore === 'number' && insertBefore >= 0) {
             const target = chatElement.find(`.mes[mesid="${insertBefore}"]`);
-            $(newMessage).insertBefore(target);
+            $(messageElement).insertBefore(target);
+        } else {
+            chatElement.append(messageElement);
+        }
+    }
-    const isSmallSys = mes?.extra?.isSmallSys;
+    if (mes?.extra?.isSmallSys === true) {
+        messageElement.addClass('smallSysMes');
-    if (isSmallSys === true) {
-        newMessage.addClass('smallSysMes');
+    }
     if (Array.isArray(mes?.extra?.tool_invocations)) {
-        newMessage.addClass('toolCall');
+        messageElement.addClass('toolCall');
+    }
-    updateMessageItemizedPromptButton(mes, { messageId: newMessageId, messageElement: newMessage });
+    updateMessageItemizedPromptButton(mes, { messageId, messageElement });
-    newMessage.find('.avatar img').on('error', function () {
+    messageElement.find('.avatar img').on('error', function () {
         $(this).hide();
         $(this).parent().html('<div class="missing-avatar fa-solid fa-user-slash"></div>');
     });
-    appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
+    appendMediaToMessage(mes, messageElement, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
-    newMessage.find('.mes_text').html(messageHTML);
+    messageElement.find('.mes_text').html(messageHTML);
-    addCopyToCodeBlocks(newMessage);
+    addCopyToCodeBlocks(messageElement);
     // Set the swipes counter for all non-user messages.
     if (!mes.is_user) {
-        updateSwipeCounter(newMessageId, { messageElement: newMessage });
+        updateSwipeCounter(messageId, { message: mes, messageElement });
+    }
     // The caller should handle the rest after adding a message to DOM.
     if (!insert) {
-        return newMessage;
+        return messageElement;
+    }
     //last_mes should always be updated.

@@ -2592,10 +2586,10 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
2592	scrollChatToBottom({ waitForFrame: true });	2586	scrollChatToBottom({ waitForFrame: true });
2593	}	2587	}
2594		2588
2595	applyCharacterTagsToMessageDivs({ mesIds: newMessageId });	2589	applyCharacterTagsToMessageDivs({ mesIds: messageId });
2596	updateEditArrowClasses();	2590	updateEditArrowClasses();
2597		2591
2598	return newMessage;	2592	return messageElement;
2599	}	2593	}
2600		2594
2601	/**	2595	/**