`refactor/perf-printMessages` #3: Extracted `updateMessageItemizedPromptButton` and `getMessageHTML` from `addOneMessage` to improve readability. (#4984) * Extracted updateMessageItemizedPromptButton and getMessageHTML from addOneMessage to improve readability. * Fix types and function calls * Fixed insertBefore, insertAfter and messages without extra. * Use strict comparison operator * Use logical OR for display text fallback * Fixed newMessageId again. * Faster showMoreMessages. * removed `insertAfter` and `insertBefore` from `mes_edit_copy`, `/message-role` and `/message-name`. * Formatting fix * Refactor newMessageId --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

69b7a17c7796175edd5d679cc3cb4927cb42b3aa

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

Signed

Parents: 372db63cd537e7188dff7580b00f3293562fc6eb

public/script.js+84 -44 Viewed

     console.debug('Inserting messages before', messageId, 'count', count, 'chat length', chat.length);
     const prevHeight = chatElement.prop('scrollHeight');
-    const isButtonInView = isElementInViewport($('#show_more_messages')[0]);
+    const showMoreButton = $('#show_more_messages');
+    const isButtonInView = isElementInViewport(showMoreButton[0]);
-    while (messageId > 0 && count > 0) {
-        let newMessageId = messageId - 1;
+    const firstId = clamp(messageId - count, 0, Infinity);
-        addOneMessage(chat[newMessageId], { insertBefore: messageId >= chat.length ? null : messageId, scroll: false, forceId: newMessageId, showSwipes: false });
+    const messageElements = [];
-        count--;
+    chat.slice(firstId, messageId).forEach((message, id) => {
-        messageId--;
+        messageElements.push(addOneMessage(message, { scroll: false, forceId: firstId + id, showSwipes: false, insert: false }));
+    });
+    // This could be faster: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
+    // Fallback to chatElement if the button isn't where it's expected to be.
+    if (showMoreButton[0]) {
+        showMoreButton.after(messageElements);
+    } else {
+        chatElement.prepend(messageElements);
+    }
     refreshSwipeButtons();
-    if (messageId == 0) {
+    if (firstId === 0) {
-        $('#show_more_messages').remove();
+        showMoreButton.remove();
+    }
     if (isButtonInView) {

     const messages = targetChat.slice(startIndex);
     if (messages.length > 0) {
-        const newMessageElements = messages.map( (message, offset) => {
+        const newMessageElements = messages.map((message, offset) => {
             const i = startIndex + offset;
             const messageElement = addOneMessage(message, { scroll: false, forceId: i, showSwipes: false, insert: false });

         //Append to chat in one DOM update.
         chatElement.append(newMessageElements);
-        applyCharacterTagsToMessageDivs({ mesIds: lodash.range(startIndex, targetChat.length,  1) });
+        applyCharacterTagsToMessageDivs({ mesIds: lodash.range(startIndex, targetChat.length, 1) });
+    }
     refreshSwipeButtons(false, fade);

  * @param {boolean} isSystem If the message was sent by the system
  * @param {boolean} isUser If the message was sent by the user
  * @param {number} messageId Message index in chat array
- * @param {object} [sanitizerOverrides] DOMPurify sanitizer option overrides
+ * @param {Partial<DOMPurify.Config>} [sanitizerOverrides] DOMPurify sanitizer option overrides
  * @param {boolean} [isReasoning] If the message is reasoning output
  * @returns {string} HTML string
  */

         mes = mes.replace(new RegExp(`(^|\n)${escapeRegex(ch_name)}:`, 'g'), '$1');
+    }
-    /** @type {import('dompurify').Config & { RETURN_DOM_FRAGMENT: false; RETURN_DOM: false }} */
+    /** @type {DOMPurify.Config} */
     const config = {
         RETURN_DOM: false,
         RETURN_DOM_FRAGMENT: false,

+    }
+}
+/**
+ * Shows or hides the Prompt display button
+ * @param {ChatMessage} message Message object
+ * @param {object} options Options
+ * @param {number} [options.messageId] Message ID
+ * @param {JQuery<HTMLElement>} [options.messageElement] Message element
+ * @return {void}
+ */
+function updateMessageItemizedPromptButton(message, { messageId = chat.indexOf(message), messageElement = chatElement.find(`.mes[mesid="${messageId}"]`) }) {
+    //if we have itemized messages, and the array isn't null..
+    if (!message.is_user && Array.isArray(itemizedPrompts) && itemizedPrompts.length > 0) {
+        const itemizedPrompt = itemizedPrompts.find(x => Number(x.mesId) === Number(messageId));
+        if (itemizedPrompt) {
+            messageElement.find('.mes_prompt').show();
+        }
+    }
+}
+/**
+ * Gets messageFormatting for a ChatMessage object.
+ * @param {ChatMessage} message
+ * @param {object} options Options
+ * @param {number} [options.messageId] Message ID
+ * @returns {string} Formatted message HTML
+ */
+function getMessageTextHTML(message, { messageId = chat.indexOf(message) }) {
+    // if mes.extra.uses_system_ui is true, set an override on the sanitizer options
+    /** @type {Partial<DOMPurify.Config>} */
+    const sanitizerOverrides = message.extra?.uses_system_ui ? { MESSAGE_ALLOW_SYSTEM_UI: true } : {};
+    return messageFormatting(
+        message.extra?.display_text || message.mes,
+        message.name,
+        message.is_system,
+        message.is_user,
+        messageId,
+        sanitizerOverrides,
+        false,
+    );
+}
 /**
  * Adds a single message to the chat.

  */
 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;
+    const newMessageId = (() => {
+        if (typeof forceId === 'number') {
+            return forceId;
+        }
+        if (typeof insertBefore === 'number') {
+            return insertBefore - 1;
+        }
+        if (typeof insertAfter === 'number') {
+            return insertAfter + 1;
+        }
+        const index = chat.indexOf(mes);
+        if (index !== -1) {
+            return index;
+        }
+        return chat.length - 1;
+    })();
-    let messageText = mes.mes;
     const momentDate = timestampToMoment(mes.send_date);
     const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';
-    if (mes?.extra?.display_text) {
-        messageText = mes.extra.display_text;
-    }
     let avatarImg = getThumbnailUrl('persona', user_avatar);
-    const isSystem = mes.is_system;
     //for non-user messages
     if (!mes.is_user) {

         avatarImg = mes.force_avatar;
+    }
-    // if mes.extra.uses_system_ui is true, set an override on the sanitizer options
+    const messageHTML = getMessageTextHTML(mes, { messageId: newMessageId });
-    const sanitizerOverrides = mes.extra?.uses_system_ui ? { MESSAGE_ALLOW_SYSTEM_UI: true } : {};
-    messageText = messageFormatting(
-        messageText,
-        mes.name,
-        isSystem,
-        mes.is_user,
-        chat.indexOf(mes),
-        sanitizerOverrides,
-        false,
-    );
     let newMessage;
     if (type === 'swipe') {

         insertSVGIcon(newMessage, mes.extra);
+    }
     if (type !== 'swipe' && insert) {
         if (!insertAfter && !insertBefore) {
             chatElement.append(newMessage);

         newMessage.addClass('toolCall');
+    }
-    //if we have itemized messages, and the array isn't null..
+    updateMessageItemizedPromptButton(mes, { messageId: newMessageId, messageElement: newMessage });
-    if (!mes.is_user && Array.isArray(itemizedPrompts) && itemizedPrompts.length > 0) {
-        const itemizedPrompt = itemizedPrompts.find(x => Number(x.mesId) === Number(newMessageId));
-        if (itemizedPrompt) {
-            newMessage.find('.mes_prompt').show();
-        }
-    }
     newMessage.find('.avatar img').on('error', function () {
         $(this).hide();

     });
     appendMediaToMessage(mes, newMessage, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
-    newMessage.find('.mes_text').html(messageText);
+    newMessage.find('.mes_text').html(messageHTML);
     addCopyToCodeBlocks(newMessage);
     // Set the swipes counter for all non-user messages.

         const oldScroll = chatElement[0].scrollTop;
         const clone = structuredClone(chat[this_edit_mes_id]);
         clone.send_date = Date.now();
-        clone.mes = $(this).closest('.mes').find('.edit_textarea').val().toString();
+        const this_edit_mes_element = $(this).closest('.mes');
+        clone.mes = this_edit_mes_element.find('.edit_textarea').val().toString();
         if (power_user.trim_spaces) {
             clone.mes = clone.mes.trim();
+        }
         chat.splice(Number(this_edit_mes_id) + 1, 0, clone);
-        addOneMessage(clone, { insertAfter: this_edit_mes_id });
+        const newMessageElement = addOneMessage(clone, { insert: false });
+        this_edit_mes_element.after(newMessageElement);
         updateViewMessageIds();
         await saveChatConditional();

public/scripts/chats.js+1 -1 Viewed

     const preference = new StylesPreference(avatarId);
     const sanitizeStyles = !preference.get();
     const decodeStyleParam = { prefix: sanitizeStyles ? '#creator_notes_spoiler ' : '' };
-    /** @type {import('dompurify').Config} */
+    /** @type {DOMPurify.Config} */
     const config = {
         RETURN_DOM: false,
         RETURN_DOM_FRAGMENT: false,

public/scripts/slash-commands.js+4 -2 Viewed

     await eventSource.emit(event_types.MESSAGE_EDITED, modifyAt);
     const existingMessage = chatElement.find(`.mes[mesid="${modifyAt}"]`);
     if (existingMessage.length) {
-        addOneMessage(message, { forceId: modifyAt, insertAfter: modifyAt, scroll: false });
+        const newMessageElement = addOneMessage(message, { forceId: modifyAt, insert: false, scroll: false });
+        existingMessage.after(newMessageElement);
         existingMessage.remove();
+    }
     await eventSource.emit(event_types.MESSAGE_UPDATED, modifyAt);

     await eventSource.emit(event_types.MESSAGE_EDITED, modifyAt);
     const existingMessage = chatElement.find(`.mes[mesid="${modifyAt}"]`);
     if (existingMessage.length) {
-        addOneMessage(message, { forceId: modifyAt, insertAfter: modifyAt, scroll: false });
+        const newMessageElement = addOneMessage(message, { forceId: modifyAt, insert: false, scroll: false });
+        existingMessage.after(newMessageElement);
         existingMessage.remove();
+    }
     await eventSource.emit(event_types.MESSAGE_UPDATED, modifyAt);