[wip] Open reasoning editor

45d4d1bb3ef2f544f0d652f598d590067dd32348

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 8fc880b69b88667f8120266669369dad2921e73e
4 files changed, +55 -25Ignore whitespace
public/index.html+3 -0
@@ -6265,6 +6265,9 @@
62656265 <summary class="mes_reasoning_summary">
62666266 <span data-i18n="Reasoning">Reasoning</span>
62676267 <div class="mes_reasoning_actions">
6268+ <div class="mes_reasoning_edit_done mes_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
6269+ <div class="mes_reasoning_edit_cancel mes_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
6270+ <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
62686271 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>
62696272 <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
62706273 </div>
public/script.js+1 -1
@@ -11274,7 +11274,7 @@ jQuery(async function () {
1127411274
1127511275 $(document).keyup(function (e) {
1127611276 if (e.key === 'Escape') {
1127711277 const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length;
1127811278 if (isEditVisible && power_user.auto_save_msg_edits === false) {
1127911279 closeMessageEditor();
1128011280 $('#send_textarea').focus();
public/scripts/chats.js+35 -13
@@ -1474,6 +1474,18 @@ export class PromptReasoning {
14741474}
14751475
14761476jQuery(function () {
1477+ /**
1478+ * Gets a message from a jQuery element.
1479+ * @param {Element} element
1480+ * @returns {{messageId: number, message: object, messageBlock: JQuery<HTMLElement>}}
1481+ */
1482+ const getMessageFromJquery = function (element) {
1483+ const messageBlock = $(element).closest('.mes');
1484+ const messageId = Number(messageBlock.attr('mesid'));
1485+ const message = chat[messageId];
1486+ return { messageId: messageId, message, messageBlock };
1487+ };
1488+
14771489 $(document).on('click', '.mes_hide', async function () {
14781490 const messageBlock = $(this).closest('.mes');
14791491 const messageId = Number(messageBlock.attr('mesid'));
@@ -1629,11 +1641,25 @@ jQuery(function () {
16291641 e.preventDefault();
16301642 });
16311643
1644+ $(document).on('click', '.mes_reasoning_edit', function (e) {
1645+ e.stopPropagation();
1646+ e.preventDefault();
1647+ const { message, messageBlock } = getMessageFromJquery(this);
1648+ if (!message?.extra) {
1649+ return;
1650+ }
1651+
1652+ const reasoning = message?.extra?.reasoning;
1653+ const textarea = document.createElement('textarea');
1654+ const reasoningBlock = messageBlock.find('.mes_reasoning');
1655+ textarea.classList.add('reasoning_edit_textarea');
1656+ textarea.value = reasoning === PromptReasoning.REASONING_PLACEHOLDER ? '' : reasoning;
1657+ $(textarea).insertBefore(reasoningBlock);
1658+ });
1659+
16321660 $(document).on('click', '.mes_edit_add_reasoning', async function () {
16331661 const mesBlock{ message, messageId } = $getMessageFromJquery(this).closest('.mes');
1634- const mesId = Number(mesBlock.attr('mesid'));
1662+ if (!message?.extra) {
1635- const message = chat[mesId];
1636- if (!message?.extra){
16371663 return;
16381664 }
16391665
@@ -1645,7 +1671,7 @@ jQuery(function () {
16451671 message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;
16461672 await saveChatConditional();
16471673 closeMessageEditor();
16481674 updateMessageBlock(mesIdmessageId, message);
16491675 });
16501676
16511677 $(document).on('click', '.mes_reasoning_delete', async function (e) {
@@ -1658,21 +1684,17 @@ jQuery(function () {
16581684 return;
16591685 }
16601686
16611687 const mesBlock{ message, messageId } = $getMessageFromJquery(this).closest('.mes');
1662- const mesId = Number(mesBlock.attr('mesid'));
1688+ if (!message?.extra) {
1663- const message = chat[mesId];
1664- if (!message?.extra){
16651689 return;
16661690 }
16671691 message.extra.reasoning = '';
16681692 await saveChatConditional();
16691693 updateMessageBlock(mesIdmessageId, message);
16701694 });
16711695
16721696 $(document).on('pointerup', '.mes_reasoning_copy', async function () {
16731697 const mesBlock{ message } = $getMessageFromJquery(this).closest('.mes');
1674- const mesId = Number(mesBlock.attr('mesid'));
1675- const message = chat[mesId];
16761698 const reasoning = message?.extra?.reasoning;
16771699
16781700 if (!reasoning) {
public/style.css+16 -11
@@ -353,9 +353,18 @@ input[type='checkbox']:focus-visible {
353353.mes_reasoning_summary {
354354 cursor: pointer;
355355 position: relative;
356+ margin: 2px;
356357}
357358
358-.mes_reasoning_details:not([open]) .mes_reasoning_actions {
359+.mes_bias:empty,
360+.mes_reasoning:empty,
361+.mes_reasoning_details:has(.mes_reasoning:empty),
362+.mes_block:has(.edit_textarea) .mes_reasoning_details,
363+.mes_reasoning_details:not([open]) .mes_reasoning_actions,
364+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning,
365+.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_done,
366+.mes_reasoning_details:not(:has(.reasoning_edit_textarea)) .mes_reasoning_actions .mes_button.mes_reasoning_edit_cancel,
367+.mes_reasoning_details:has(.reasoning_edit_textarea) .mes_reasoning_actions .mes_button:not(.mes_reasoning_edit_done, .mes_reasoning_edit_cancel) {
359368 display: none;
360369}
361370
@@ -373,21 +382,14 @@ input[type='checkbox']:focus-visible {
373382 padding: 1px;
374383}
375384
376385.mes_reasoning_summary > span {
377386 margin-left: 0.5em;
378387}
379388
380-.mes_reasoning_details:has(.mes_reasoning:empty),
381-.mes_block:has(.edit_textarea) .mes_reasoning_details,
382-.mes_bias:empty,
383-.mes_reasoning:empty {
384- display: none;
385-}
386-
387389.mes_text i,
388390.mes_text em,
389391.mes_reasoning i,
390392.mes_reasoning em {
391393 color: var(--SmartThemeEmColor);
392394}
393395
@@ -408,7 +410,7 @@ input[type='checkbox']:focus-visible {
408410.mes_reasoning font[color] em,
409411.mes_reasoning font[color] i,
410412.mes_reasoning font[color] u,
411413.mes_reasoning font[color] q {
412414 color: inherit;
413415}
414416
@@ -4213,10 +4215,12 @@ input[type="range"]::-webkit-slider-thumb {
42134215 align-items: center;
42144216}
42154217
4218+.mes_reasoning_edit_cancel,
42164219.mes_edit_cancel.menu_button {
42174220 background-color: var(--crimson70a);
42184221}
42194222
4223+.mes_reasoning_edit_done,
42204224.mes_edit_done.menu_button {
42214225 background-color: var(--okGreen70a);
42224226}
@@ -4225,6 +4229,7 @@ input[type="range"]::-webkit-slider-thumb {
42254229 opacity: 1;
42264230}
42274231
4232+.reasoning_edit_textarea,
42284233.edit_textarea {
42294234 padding: 5px;
42304235 margin: 0;