Modify when "Add reasoning" button shows up

public/script.js

@@ -2257,6 +2257,9 @@ function getMessageFromTemplate({
     timerValue && mes.find('.mes_timer').attr('title', timerTitle).text(timerValue);
     bookmarkLink && updateBookmarkDisplay(mes);
 
+    if (reasoning) {
+        mes.addClass('reasoning');
+    }
     if (reasoningDuration) {
         updateReasoningTimeUI(mes.find('.mes_reasoning_header_title')[0], reasoningDuration, { forceEnd: true });
     }
@@ -2278,6 +2281,7 @@ export function updateMessageBlock(messageId, message) {
     const text = message?.extra?.display_text ?? message.mes;
     messageElement.find('.mes_text').html(messageFormatting(text, message.name, message.is_system, message.is_user, messageId, {}, false));
     messageElement.find('.mes_reasoning').html(messageFormatting(message.extra?.reasoning ?? '', '', false, false, messageId, {}, true));
+    messageElement.toggleClass('reasoning', !!message.extra?.reasoning);
     addCopyToCodeBlocks(messageElement);
     appendMediaToMessage(message, messageElement);
 }
@@ -3262,6 +3266,9 @@ class StreamingProcessor {
                 if (this.messageReasoningDom instanceof HTMLElement) {
                     const formattedReasoning = messageFormatting(this.reasoning, '', false, false, messageId, {}, true);
                     this.messageReasoningDom.innerHTML = formattedReasoning;
+                    if (this.reasoning) {
+                        this.messageDom.classList.add('reasoning');
+                    }
                 }
             }
 
@@ -10862,6 +10869,18 @@ jQuery(async function () {
         }
     });
 
+    $(document).on('click', '.mes_reasoning_header', function () {
+        // If we are in message edit mode and reasoning area is closed, a click opens and edits it
+        const mes = $(this).closest('.mes');
+        const mesEditArea = mes.find('#curEditTextarea');
+        if (mesEditArea.length) {
+            const summary = $(mes).find('.mes_reasoning_summary');
+            if (!summary.attr('open')) {
+                summary.find('.mes_reasoning_edit').trigger('click');
+            }
+        }
+    });
+
     $(document).on('input', '#curEditTextarea', function () {
         if (power_user.auto_save_msg_edits === true) {
             messageEditAuto($(this));
@@ -11421,6 +11440,12 @@ jQuery(async function () {
         $(this).closest('.mes').find('.mes_reasoning_edit_cancel:visible').trigger('click');
     });
 
+    $(document).on('click', '.mes_reasoning_details', function (e) {
+        if (!e.target.closest('.mes_reasoning_actions') && !e.target.closest('.mes_reasoning_header')) {
+            e.preventDefault();
+        }
+    });
+
     $(document).keyup(function (e) {
         if (e.key === 'Escape') {
             const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length > 0;

public/style.css

@@ -1129,14 +1129,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) {
+.last_mes:has(.mes_text:empty):has(.mes_reasoning_details) .mes_reasoning:not(:empty) {
     margin-bottom: var(--mes-right-spacing);
 }
 
-.last_mes .mes_text {
-    padding-right: var(--mes-right-spacing);
-}
-
 /* SWIPE RELATED STYLES*/
 
 .mes {
@@ -1358,6 +1354,7 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
     padding-left: 0;
     padding-top: 5px;
     padding-bottom: 5px;
+    padding-right: var(--mes-right-spacing);
 }
 
 br {
@@ -4252,6 +4249,11 @@ input[type="range"]::-webkit-slider-thumb {
     transition: 0.3s ease-in-out;
 }
 
+.mes_reasoning_actions {
+    margin: 0;
+    margin-top: 0.5rem;
+}
+
 .mes_edit_buttons .menu_button,
 .mes_reasoning_actions .edit_button {
     opacity: 0.5;
@@ -4298,6 +4300,10 @@ input[type="range"]::-webkit-slider-thumb {
     field-sizing: content;
 }
 
+.mes.reasoning .mes_edit_add_reasoning {
+    display: none;
+}
+
 #anchor_order {
     margin-bottom: 15px;
 }