[wip] Open reasoning editor

public/index.html

@@ -6265,6 +6265,9 @@
                         <summary class="mes_reasoning_summary">
                             <span data-i18n="Reasoning">Reasoning</span>
                             <div class="mes_reasoning_actions">
+                                <div class="mes_reasoning_edit_done mes_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
+                                <div class="mes_reasoning_edit_cancel mes_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
+                                <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
                                 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>
                                 <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
                             </div>

public/script.js

@@ -11274,7 +11274,7 @@ jQuery(async function () {
 
     $(document).keyup(function (e) {
         if (e.key === 'Escape') {
-            const isEditVisible = $('#curEditTextarea').is(':visible');
+            const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length;
             if (isEditVisible && power_user.auto_save_msg_edits === false) {
                 closeMessageEditor();
                 $('#send_textarea').focus();

public/scripts/chats.js

@@ -1474,6 +1474,18 @@ export class PromptReasoning {
 }
 
 jQuery(function () {
+    /**
+     * Gets a message from a jQuery element.
+     * @param {Element} element
+     * @returns {{messageId: number, message: object, messageBlock: JQuery<HTMLElement>}}
+     */
+    const getMessageFromJquery = function (element) {
+        const messageBlock = $(element).closest('.mes');
+        const messageId = Number(messageBlock.attr('mesid'));
+        const message = chat[messageId];
+        return { messageId: messageId, message, messageBlock };
+    };
+
     $(document).on('click', '.mes_hide', async function () {
         const messageBlock = $(this).closest('.mes');
         const messageId = Number(messageBlock.attr('mesid'));
@@ -1629,11 +1641,25 @@ jQuery(function () {
         e.preventDefault();
     });
 
+    $(document).on('click', '.mes_reasoning_edit', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const { message, messageBlock } = getMessageFromJquery(this);
+        if (!message?.extra) {
+            return;
+        }
+
+        const reasoning = message?.extra?.reasoning;
+        const textarea = document.createElement('textarea');
+        const reasoningBlock = messageBlock.find('.mes_reasoning');
+        textarea.classList.add('reasoning_edit_textarea');
+        textarea.value = reasoning === PromptReasoning.REASONING_PLACEHOLDER ? '' : reasoning;
+        $(textarea).insertBefore(reasoningBlock);
+    });
+
     $(document).on('click', '.mes_edit_add_reasoning', async function () {
-        const mesBlock = $(this).closest('.mes');
+        const { message, messageId } = getMessageFromJquery(this);
-        const mesId = Number(mesBlock.attr('mesid'));
+        if (!message?.extra) {
-        const message = chat[mesId];
-        if (!message?.extra){
             return;
         }
 
@@ -1645,7 +1671,7 @@ jQuery(function () {
         message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;
         await saveChatConditional();
         closeMessageEditor();
-        updateMessageBlock(mesId, message);
+        updateMessageBlock(messageId, message);
     });
 
     $(document).on('click', '.mes_reasoning_delete', async function (e) {
@@ -1658,21 +1684,17 @@ jQuery(function () {
             return;
         }
 
-        const mesBlock = $(this).closest('.mes');
+        const { message, messageId } = getMessageFromJquery(this);
-        const mesId = Number(mesBlock.attr('mesid'));
+        if (!message?.extra) {
-        const message = chat[mesId];
-        if (!message?.extra){
             return;
         }
         message.extra.reasoning = '';
         await saveChatConditional();
-        updateMessageBlock(mesId, message);
+        updateMessageBlock(messageId, message);
     });
 
     $(document).on('pointerup', '.mes_reasoning_copy', async function () {
-        const mesBlock = $(this).closest('.mes');
+        const { message } = getMessageFromJquery(this);
-        const mesId = Number(mesBlock.attr('mesid'));
-        const message = chat[mesId];
         const reasoning = message?.extra?.reasoning;
 
         if (!reasoning) {

public/style.css

@@ -353,9 +353,18 @@ input[type='checkbox']:focus-visible {
 .mes_reasoning_summary {
     cursor: pointer;
     position: relative;
+    margin: 2px;
 }
 
-.mes_reasoning_details:not([open]) .mes_reasoning_actions {
+.mes_bias:empty,
+.mes_reasoning:empty,
+.mes_reasoning_details:has(.mes_reasoning:empty),
+.mes_block:has(.edit_textarea) .mes_reasoning_details,
+.mes_reasoning_details:not([open]) .mes_reasoning_actions,
+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning,
+.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_done,
+.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_cancel,
+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.mes_reasoning_edit_done, .mes_reasoning_edit_cancel) {
     display: none;
 }
 
@@ -373,21 +382,14 @@ input[type='checkbox']:focus-visible {
     padding: 1px;
 }
 
-.mes_reasoning_summary > span {
+.mes_reasoning_summary>span {
     margin-left: 0.5em;
 }
 
-.mes_reasoning_details:has(.mes_reasoning:empty),
-.mes_block:has(.edit_textarea) .mes_reasoning_details,
-.mes_bias:empty,
-.mes_reasoning:empty {
-    display: none;
-}
-
 .mes_text i,
 .mes_text em,
 .mes_reasoning i,
-.mes_reasoning em  {
+.mes_reasoning em {
     color: var(--SmartThemeEmColor);
 }
 
@@ -408,7 +410,7 @@ input[type='checkbox']:focus-visible {
 .mes_reasoning font[color] em,
 .mes_reasoning font[color] i,
 .mes_reasoning font[color] u,
-.mes_reasoning font[color] q  {
+.mes_reasoning font[color] q {
     color: inherit;
 }
 
@@ -4213,10 +4215,12 @@ input[type="range"]::-webkit-slider-thumb {
     align-items: center;
 }
 
+.mes_reasoning_edit_cancel,
 .mes_edit_cancel.menu_button {
     background-color: var(--crimson70a);
 }
 
+.mes_reasoning_edit_done,
 .mes_edit_done.menu_button {
     background-color: var(--okGreen70a);
 }
@@ -4225,6 +4229,7 @@ input[type="range"]::-webkit-slider-thumb {
     opacity: 1;
 }
 
+.reasoning_edit_textarea,
 .edit_textarea {
     padding: 5px;
     margin: 0;