Functional reasoning edit

public/script.js

@@ -5686,7 +5686,7 @@ function parseAndSaveLogprobs(data, continueFrom) {
  * @param {object} data Response data
  * @returns {string} Extracted message
  */
-function extractMessageFromData(data){
+function extractMessageFromData(data) {
     if (typeof data === 'string') {
         return data;
     }
@@ -8042,9 +8042,23 @@ function updateEditArrowClasses() {
     }
 }
 
-export function closeMessageEditor() {
+/**
-    if (this_edit_mes_id) {
+ * Closes the message editor.
-        $(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_cancel`).click();
+ * @param {'message'|'reasoning'|'all'} what What to close. Default is 'all'.
+ */
+export function closeMessageEditor(what = 'all') {
+    if (what === 'message' || what === 'all') {
+        if (this_edit_mes_id) {
+            $(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_cancel`).click();
+        }
+    }
+    if (what === 'reasoning' || what === 'all') {
+        document.querySelectorAll('.reasoning_edit_textarea').forEach((el) => {
+            const cancelButton = el.closest('.mes')?.querySelector('.mes_reasoning_edit_cancel');
+            if (cancelButton instanceof HTMLElement) {
+                cancelButton.click();
+            }
+        });
     }
 }
 
@@ -11274,14 +11288,15 @@ jQuery(async function () {
 
     $(document).keyup(function (e) {
         if (e.key === 'Escape') {
-            const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length;
+            const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length > 0;
             if (isEditVisible && power_user.auto_save_msg_edits === false) {
-                closeMessageEditor();
+                closeMessageEditor('all');
                 $('#send_textarea').focus();
                 return;
             }
             if (isEditVisible && power_user.auto_save_msg_edits === true) {
                 $(`#chat .mes[mesid="${this_edit_mes_id}"] .mes_edit_done`).click();
+                closeMessageEditor('reasoning');
                 $('#send_textarea').focus();
                 return;
             }

public/scripts/chats.js

@@ -1650,11 +1650,61 @@ jQuery(function () {
         }
 
         const reasoning = message?.extra?.reasoning;
+        const chatElement = document.getElementById('chat');
         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);
+
+        if (!CSS.supports('field-sizing', 'content')) {
+            const resetHeight = function () {
+                const scrollTop = chatElement.scrollTop;
+                textarea.style.height = '0px';
+                textarea.style.height = `${textarea.scrollHeight}px`;
+                chatElement.scrollTop = scrollTop;
+            };
+
+            textarea.addEventListener('input', resetHeight);
+            resetHeight();
+        }
+
+        textarea.focus();
+        textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+
+        const textareaRect = textarea.getBoundingClientRect();
+        const chatRect = chatElement.getBoundingClientRect();
+
+        // Scroll if textarea bottom is below visible area
+        if (textareaRect.bottom > chatRect.bottom) {
+            const scrollOffset = textareaRect.bottom - chatRect.bottom;
+            chatElement.scrollTop += scrollOffset;
+        }
+    });
+
+    $(document).on('click', '.mes_reasoning_edit_done', async function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        const { message, messageId, messageBlock } = getMessageFromJquery(this);
+        if (!message?.extra) {
+            return;
+        }
+
+        const textarea = messageBlock.find('.reasoning_edit_textarea');
+        const reasoning = String(textarea.val());
+        message.extra.reasoning = reasoning;
+        await saveChatConditional();
+        updateMessageBlock(messageId, message);
+        textarea.remove();
+    });
+
+    $(document).on('click', '.mes_reasoning_edit_cancel', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        const { messageBlock } = getMessageFromJquery(this);
+        const textarea = messageBlock.find('.reasoning_edit_textarea');
+        textarea.remove();
     });
 
     $(document).on('click', '.mes_edit_add_reasoning', async function () {

public/style.css

@@ -356,6 +356,12 @@ input[type='checkbox']:focus-visible {
     margin: 2px;
 }
 
+@supports not selector(:has(*)) {
+    .mes_reasoning_details {
+        display: none !important;
+    }
+}
+
 .mes_bias:empty,
 .mes_reasoning:empty,
 .mes_reasoning_details:has(.mes_reasoning:empty),
@@ -1089,6 +1095,10 @@ body .panelControlBar {
     /*only affects bubblechat to make it sit nicely at the bottom*/
 }
 
+.last_mes:has(.mes_text:empty):has(.mes_reasoning_details[open]) .mes_reasoning:not(:empty) {
+    margin-bottom: 30px;
+}
+
 .last_mes .mes_reasoning,
 .last_mes .mes_text {
     padding-right: 30px;