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+41 -39 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_ideditMessageId The ID of the message to edit
  */
 export async function messageEdit(edit_mes_ideditMessageId) {
 -    hideSwipeButtons();
 +    const editMessage = chat[editMessageId];
 -    let chatScrollPosition = chatElement.scrollTop();
 +    if (!editMessage) {
 +        console.warn(`Message with id ${editMessageId} not found in chat array.`);
 +        return;
 +    }
++
 +    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 = edit_mes_ideditMessageId;
 +    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 });
     letconst thisMesBlockchatScrollPosition = thisMesDivchatElement.findscrollTop('.mes_block');
     letconst thisMesTextmessageBlock = thisMesBlockmessageElement.find('.mes_textmes_block');
 +    const messageText = messageBlock.find('.mes_text');
     thisMesTextmessageText.empty();
     thisMesBlockmessageBlock.find('.mes_buttons').css('display', 'none');
     thisMesBlockmessageBlock.find('.mes_edit_buttons').css('display', 'inline-flex');
     // Also edit reasoning, if it exists
     const reasoningEdit = thisMesBlockmessageBlock.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>',
 -    );
     letconst edit_textareatext = thisMesBlock.findtrimSpaces('editMessage.edit_textareames || '');
 -    edit_textarea.val(text);
 +    const $editTextArea = $(editTextArea);
 +    $editTextArea.val(text);
     const cssAutofit = CSS.supports('field-sizing', 'content');
     if (!cssAutofit) {
         edit_textarea$editTextArea.height(0);
         edit_textarea$editTextArea.height(edit_textarea[0]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);
+    }

     async function standardSwipe() {
         //If swipe_id has changed, or the source is being deleted.
         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);