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: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%;