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;