[wip] Open reasoning editor

45d4d1bb3ef2f544f0d652f598d590067dd32348

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

public/index.html+3 -0 Viewed

                         <summary class="mes_reasoning_summary">
                             <span data-i18n="Reasoning">Reasoning</span>
                             <div class="mes_reasoning_actions">
+                                <div class="mes_reasoning_edit_done mes_button fa-solid fa-check" title="Confirm" data-i18n="[title]Confirmedit"></div>
+                                <div class="mes_reasoning_edit_cancel mes_button fa-solid fa-xmark" title="Cancel edit" data-i18n="[title]Cancel edit"></div>
+                                <div class="mes_reasoning_edit mes_button fa-solid fa-pencil" title="Edit reasoning" data-i18n="[title]Edit reasoning"></div>
                                 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>
                                 <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
                             </div>

public/script.js+1 -1 Viewed

     $(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();

public/scripts/chats.js+35 -13 Viewed

+}
 jQuery(function () {
+    /**
+     * Gets a message from a jQuery element.
+     * @param {Element} element
+     * @returns {{messageId: number, message: object, messageBlock: JQuery<HTMLElement>}}
+     */
+    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'));

         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 { message, messageId } = getMessageFromJquery(this);
-        const mesId = Number(mesBlock.attr('mesid'));
+        if (!message?.extra) {
-        const message = chat[mesId];
-        if (!message?.extra){
             return;
+        }

         message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;
         await saveChatConditional();
         closeMessageEditor();
-        updateMessageBlock(mesId, message);
+        updateMessageBlock(messageId, message);
     });
     $(document).on('click', '.mes_reasoning_delete', async function (e) {

             return;
+        }
-        const mesBlock = $(this).closest('.mes');
+        const { message, messageId } = getMessageFromJquery(this);
-        const mesId = Number(mesBlock.attr('mesid'));
+        if (!message?.extra) {
-        const message = chat[mesId];
-        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 { message } = getMessageFromJquery(this);
-        const mesId = Number(mesBlock.attr('mesid'));
-        const message = chat[mesId];
         const reasoning = message?.extra?.reasoning;
         if (!reasoning) {

public/style.css+16 -11 Viewed

 .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;
+}

     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);
+}

 .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 {
4213	align-items: center;	4215	align-items: center;
4214	}	4216	}
4215		4217
		4218	.mes_reasoning_edit_cancel,
4216	.mes_edit_cancel.menu_button {	4219	.mes_edit_cancel.menu_button {
4217	background-color: var(--crimson70a);	4220	background-color: var(--crimson70a);
4218	}	4221	}
4219		4222
		4223	.mes_reasoning_edit_done,
4220	.mes_edit_done.menu_button {	4224	.mes_edit_done.menu_button {
4221	background-color: var(--okGreen70a);	4225	background-color: var(--okGreen70a);
4222	}	4226	}

     opacity: 1;
+}
+.reasoning_edit_textarea,
 .edit_textarea {
     padding: 5px;
     margin: 0;