diff --git a/public/script.js b/public/script.js index 40e41cba7..64b8d43b3 100644 --- a/public/script.js +++ b/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; diff --git a/public/style.css b/public/style.css index b17eaeeea..c4f30be45 100644 --- a/public/style.css +++ b/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; }