Refactor message edit function (#4679) * Refactor message edit, show counters on last message * fix: add warnings for missing message in chat array and DOM during edit * Export messageEdit function * Formatting fix * Fix comment alignment

593fba5700563974b232b4f5e8176ee3f0b81d69

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

Signed

Parents: 20556aa3dde506601ba39fe6bcdf5c8d257855a6

public/script.js+42 -40 Viewed

     shiftUpByOne,
     shiftDownByOne,
     canUseNegativeLookbehind,
+    trimSpaces,
     clamp,
 } from './scripts/utils.js';
 import { debounce_timeout, GENERATION_TYPE_TRIGGERS, IGNORE_SYMBOL, inject_ids, SWIPE_DIRECTION } from './scripts/constants.js';

 /**
  * Create the message edit UI.
- * @param {number} edit_mes_id
+ * @param {number} editMessageId The ID of the message to edit
  */
-async function messageEdit(edit_mes_id) {
+export async function messageEdit(editMessageId) {
-    hideSwipeButtons();
+    const editMessage = chat[editMessageId];
-    let chatScrollPosition = chatElement.scrollTop();
+    if (!editMessage) {
+        console.warn(`Message with id ${editMessageId} not found in chat array.`);
+        return;
+    }
-    this_edit_mes_id = edit_mes_id;
+    const messageElement = chatElement.find(`.mes[mesid="${editMessageId}"]`);
+    if (messageElement.length === 0) {
+        console.warn(`Message element with id ${editMessageId} not found in DOM.`);
+        return;
+    }
+    this_edit_mes_id = editMessageId;
+    this_edit_mes_chname = editMessage.name || (editMessage.is_user ? name1 : name2);
-    let thisMesDiv = chatElement.children().filter(`.mes[mesid="${edit_mes_id}"]`);
+    const hideCounters = editMessageId < chat.length - 1;
+    hideSwipeButtons({ hideCounters });
-    let thisMesBlock = thisMesDiv.find('.mes_block');
+    const chatScrollPosition = chatElement.scrollTop();
-    let thisMesText = thisMesBlock.find('.mes_text');
+    const messageBlock = messageElement.find('.mes_block');
+    const messageText = messageBlock.find('.mes_text');
-    thisMesText.empty();
+    messageText.empty();
-    thisMesBlock.find('.mes_buttons').css('display', 'none');
+    messageBlock.find('.mes_buttons').css('display', 'none');
-    thisMesBlock.find('.mes_edit_buttons').css('display', 'inline-flex');
+    messageBlock.find('.mes_edit_buttons').css('display', 'inline-flex');
     // Also edit reasoning, if it exists
-    const reasoningEdit = thisMesBlock.find('.mes_reasoning_edit:visible');
+    const reasoningEdit = messageBlock.find('.mes_reasoning_edit:visible');
     if (reasoningEdit.length > 0) {
         reasoningEdit.trigger('click');
+    }
-    let text = chat[edit_mes_id]['mes'];
+    const editTextArea = document.createElement('textarea');
-    if (chat[edit_mes_id]['is_user']) {
+    editTextArea.id = 'curEditTextarea';
-        this_edit_mes_chname = name1;
+    editTextArea.className = 'edit_textarea mdHotkeys';
-    } else if (chat[edit_mes_id]['force_avatar']) {
+    messageText.append(editTextArea);
-        this_edit_mes_chname = chat[edit_mes_id]['name'];
-    } else {
-        this_edit_mes_chname = name2;
-    }
-    if (power_user.trim_spaces) {
-        text = text.trim();
-    }
-    thisMesText.append(
-        '<textarea id=\'curEditTextarea\' class=\'edit_textarea mdHotkeys\'></textarea>',
-    );
-    let edit_textarea = thisMesBlock.find('.edit_textarea');
+    const text = trimSpaces(editMessage.mes || '');
-    edit_textarea.val(text);
+    const $editTextArea = $(editTextArea);
+    $editTextArea.val(text);
     const cssAutofit = CSS.supports('field-sizing', 'content');
     if (!cssAutofit) {
-        edit_textarea.height(0);
+        $editTextArea.height(0);
-        edit_textarea.height(edit_textarea[0].scrollHeight);
+        $editTextArea.height(editTextArea.scrollHeight);
+    }
-    edit_textarea.trigger('focus');
-    const textAreaElement = /** @type {HTMLTextAreaElement} */ (edit_textarea[0]);
+    $editTextArea.trigger('focus');
     // Sets the cursor at the end of the text
-    textAreaElement.setSelectionRange(
+    editTextArea.setSelectionRange(text.length, text.length);
-        String(edit_textarea.val()).length,
-        String(edit_textarea.val()).length,
-    );
     if (Number(this_edit_mes_id) === chat.length - 1) {
         chatElement.scrollTop(chatScrollPosition);
+    }

     const thisMesText = thisMesDiv.find('.mes_block .mes_text');
     const thisMesDivHeight = thisMesDiv[0]?.scrollHeight;
     const thisMesTextHeight = thisMesText[0]?.scrollHeight;
-    if (![thisMesDiv.length, thisMesText.length].every(num => num > 0 )) {
+    if (![thisMesDiv.length, thisMesText.length].every(num => num > 0)) {
         console.error(`Message #${mesId}'s DOM element is not valid.`);
         return;
+    }

     async function standardSwipe() {
         //If swipe_id has changed, or the source is being deleted.
-        if (newSwipeId !== originalSwipeId || source == 'delete')
+        if (newSwipeId !== originalSwipeId || source == 'delete') {
-        {
             //Update the chat.
             await loadFromSwipeId(mesId, newSwipeId);
             //Transition to the new chat.

                 chat[mesId]['swipe_id'] = originalSwipeId;
                 await endSwipe();
                 return;
-            //Generate.
             } else {
+                //Generate.
                 await loadFromSwipeId(mesId, newSwipeId);
                 let run_generate = true;
                 await animateSwipe(run_generate);