Allow editing/adding hidden reasoning blocks - Fix cancel not cancelling correctly - Allow editing/adding of hidden reasoning blocks - Make style and tooltip to show on edit that hidden reasoning is present - Update reasoning UI on edit cancel - to be sure

d9b2311e1779aa7ea1cf0c3bee1576f19bc89ffe

Wolfsblvt <wolfsblvt@gmail.com>

public/scripts/reasoning.js+13 -5 Viewed

         const displayReasoning = messageFormatting(reasoning, '', false, false, messageId, {}, true);
         this.messageReasoningContentDom.innerHTML = displayReasoning;
+        // Update tooltip for hidden reasoning edit
+        /** @type {HTMLElement} */
+        const button = this.messageDom.querySelector('.mes_edit_add_reasoning');
+        button.title = this.state === ReasoningState.Hidden ? t`Hidden reasoning - Add reasoning block` : t`Add reasoning block`;
         // Update the reasoning duration in the UI
         this.#updateReasoningTimeUI();
+    }

         const textarea = messageBlock.find('.reasoning_edit_textarea');
         textarea.remove();
-        // If we cancel, we might have to remove the reasong class again if this is an unsaved empty reasoning
-        if (!messageBlock.attr('data--reasoning-state')) {
-            messageBlock.removeClass('reasoning');
-        }
         messageBlock.find('.mes_reasoning_edit_cancel:visible').trigger('click');
+        updateReasoningUI(messageBlock);
     });
     $(document).on('click', '.mes_edit_add_reasoning', async function () {

         messageBlock.addClass('reasoning');
+        // To make hidden reasoning blocks editable, we just set them to "Done" here already.
+        // They will be done on save anyway - and on cancel the reasoning block gets rerendered too.
+        if (messageBlock.attr('data-reasoning-state') === ReasoningState.Hidden) {
+            messageBlock.attr('data-reasoning-state', ReasoningState.Done);
+        }
         // Open the reasoning area so we can actually edit it
         messageBlock.find('.mes_reasoning_details').attr('open', '');
         messageBlock.find('.mes_reasoning_edit').trigger('click');

public/style.css+10 -1 Viewed

 .mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.edit_button),
 .mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .edit_button,
 .mes_block:has(.edit_textarea):has(.reasoning_edit_textarea) .mes_reasoning_actions,
-.mes.reasoning .mes_edit_add_reasoning,
+.mes.reasoning:not([data-reasoning-state="hidden"]) .mes_edit_add_reasoning,
 .mes[data-reasoning-state="hidden"] .mes_reasoning_arrow,
 .mes[data-reasoning-state="hidden"] .mes_reasoning,
 .mes[data-reasoning-state="hidden"] .mes_reasoning_copy {
     display: none;
+}
+.mes[data-reasoning-state="hidden"] .mes_edit_add_reasoning {
+    background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
+}
+/** Hide hidden reasoning blocks - revert this selector to show them again */
+.mes.reasoning[data-reasoning-state="hidden"] .mes_reasoning_details {
+    display: none;
+}
 .mes_reasoning_details .mes_reasoning_arrow {
     position: absolute;
     top: 50%;