diff --git a/public/index.html b/public/index.html index 7bb533dc7..c7cc4c617 100644 --- a/public/index.html +++ b/public/index.html @@ -6265,6 +6265,9 @@ Reasoning
+
+
+
diff --git a/public/script.js b/public/script.js index b0ed60704..b4fd28f2f 100644 --- a/public/script.js +++ b/public/script.js @@ -11274,7 +11274,7 @@ jQuery(async function () { $(document).keyup(function (e) { if (e.key === 'Escape') { - const isEditVisible = $('#curEditTextarea').is(':visible'); + const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length; if (isEditVisible && power_user.auto_save_msg_edits === false) { closeMessageEditor(); $('#send_textarea').focus(); diff --git a/public/scripts/chats.js b/public/scripts/chats.js index ef1db0732..5b2db51c5 100644 --- a/public/scripts/chats.js +++ b/public/scripts/chats.js @@ -1474,6 +1474,18 @@ export class PromptReasoning { } jQuery(function () { + /** + * Gets a message from a jQuery element. + * @param {Element} element + * @returns {{messageId: number, message: object, messageBlock: JQuery}} + */ + const getMessageFromJquery = function (element) { + const messageBlock = $(element).closest('.mes'); + const messageId = Number(messageBlock.attr('mesid')); + const message = chat[messageId]; + return { messageId: messageId, message, messageBlock }; + }; + $(document).on('click', '.mes_hide', async function () { const messageBlock = $(this).closest('.mes'); const messageId = Number(messageBlock.attr('mesid')); @@ -1629,11 +1641,25 @@ jQuery(function () { e.preventDefault(); }); + $(document).on('click', '.mes_reasoning_edit', function (e) { + e.stopPropagation(); + e.preventDefault(); + const { message, messageBlock } = getMessageFromJquery(this); + if (!message?.extra) { + return; + } + + const reasoning = message?.extra?.reasoning; + 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); + }); + $(document).on('click', '.mes_edit_add_reasoning', async function () { - const mesBlock = $(this).closest('.mes'); - const mesId = Number(mesBlock.attr('mesid')); - const message = chat[mesId]; - if (!message?.extra){ + const { message, messageId } = getMessageFromJquery(this); + if (!message?.extra) { return; } @@ -1645,7 +1671,7 @@ jQuery(function () { message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER; await saveChatConditional(); closeMessageEditor(); - updateMessageBlock(mesId, message); + updateMessageBlock(messageId, message); }); $(document).on('click', '.mes_reasoning_delete', async function (e) { @@ -1658,21 +1684,17 @@ jQuery(function () { return; } - const mesBlock = $(this).closest('.mes'); - const mesId = Number(mesBlock.attr('mesid')); - const message = chat[mesId]; - if (!message?.extra){ + const { message, messageId } = getMessageFromJquery(this); + if (!message?.extra) { return; } message.extra.reasoning = ''; await saveChatConditional(); - updateMessageBlock(mesId, message); + updateMessageBlock(messageId, message); }); $(document).on('pointerup', '.mes_reasoning_copy', async function () { - const mesBlock = $(this).closest('.mes'); - const mesId = Number(mesBlock.attr('mesid')); - const message = chat[mesId]; + const { message } = getMessageFromJquery(this); const reasoning = message?.extra?.reasoning; if (!reasoning) { diff --git a/public/style.css b/public/style.css index 2b7ce0a01..bd31aba7f 100644 --- a/public/style.css +++ b/public/style.css @@ -353,9 +353,18 @@ input[type='checkbox']:focus-visible { .mes_reasoning_summary { cursor: pointer; position: relative; + margin: 2px; } -.mes_reasoning_details:not([open]) .mes_reasoning_actions { +.mes_bias:empty, +.mes_reasoning:empty, +.mes_reasoning_details:has(.mes_reasoning:empty), +.mes_block:has(.edit_textarea) .mes_reasoning_details, +.mes_reasoning_details:not([open]) .mes_reasoning_actions, +.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning, +.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_done, +.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_cancel, +.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.mes_reasoning_edit_done, .mes_reasoning_edit_cancel) { display: none; } @@ -373,21 +382,14 @@ input[type='checkbox']:focus-visible { padding: 1px; } -.mes_reasoning_summary > span { +.mes_reasoning_summary>span { margin-left: 0.5em; } -.mes_reasoning_details:has(.mes_reasoning:empty), -.mes_block:has(.edit_textarea) .mes_reasoning_details, -.mes_bias:empty, -.mes_reasoning:empty { - display: none; -} - .mes_text i, .mes_text em, .mes_reasoning i, -.mes_reasoning em { +.mes_reasoning em { color: var(--SmartThemeEmColor); } @@ -408,7 +410,7 @@ input[type='checkbox']:focus-visible { .mes_reasoning font[color] em, .mes_reasoning font[color] i, .mes_reasoning font[color] u, -.mes_reasoning font[color] q { +.mes_reasoning font[color] q { color: inherit; } @@ -4213,10 +4215,12 @@ input[type="range"]::-webkit-slider-thumb { align-items: center; } +.mes_reasoning_edit_cancel, .mes_edit_cancel.menu_button { background-color: var(--crimson70a); } +.mes_reasoning_edit_done, .mes_edit_done.menu_button { background-color: var(--okGreen70a); } @@ -4225,6 +4229,7 @@ input[type="range"]::-webkit-slider-thumb { opacity: 1; } +.reasoning_edit_textarea, .edit_textarea { padding: 5px; margin: 0;