[wip] Open reasoning editor

45d4d1bb3ef2f544f0d652f598d590067dd32348

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

Parents: 8fc880b69b88667f8120266669369dad2921e73e
4 files changed, +50 -20Showing whitespace changes
public/index.html+3 -0
@@ -6265,6 +6265,9 @@
6265 <summary class="mes_reasoning_summary">6265 <summary class="mes_reasoning_summary">
6266 <span data-i18n="Reasoning">Reasoning</span>6266 <span data-i18n="Reasoning">Reasoning</span>
6267 <div class="mes_reasoning_actions">6267 <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>
6268 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>6271 <div class="mes_reasoning_copy mes_button fa-solid fa-copy" title="Copy reasoning" data-i18n="[title]Copy reasoning"></div>
6269 <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>6272 <div class="mes_reasoning_delete mes_button fa-solid fa-trash-can" title="Remove reasoning" data-i18n="[title]Remove reasoning"></div>
6270 </div>6273 </div>
public/script.js+1 -1
@@ -11274,7 +11274,7 @@ jQuery(async function () {
1127411274
11275 $(document).keyup(function (e) {11275 $(document).keyup(function (e) {
11276 if (e.key === 'Escape') {11276 if (e.key === 'Escape') {
11277 const isEditVisible = $('#curEditTextarea').is(':visible');11277 const isEditVisible = $('#curEditTextarea').is(':visible') || $('.reasoning_edit_textarea').length;
11278 if (isEditVisible && power_user.auto_save_msg_edits === false) {11278 if (isEditVisible && power_user.auto_save_msg_edits === false) {
11279 closeMessageEditor();11279 closeMessageEditor();
11280 $('#send_textarea').focus();11280 $('#send_textarea').focus();
public/scripts/chats.js+33 -11
@@ -1474,6 +1474,18 @@ export class PromptReasoning {
1474}1474}
14751475
1476jQuery(function () {1476jQuery(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
1477 $(document).on('click', '.mes_hide', async function () {1489 $(document).on('click', '.mes_hide', async function () {
1478 const messageBlock = $(this).closest('.mes');1490 const messageBlock = $(this).closest('.mes');
1479 const messageId = Number(messageBlock.attr('mesid'));1491 const messageId = Number(messageBlock.attr('mesid'));
@@ -1629,10 +1641,24 @@ jQuery(function () {
1629 e.preventDefault();1641 e.preventDefault();
1630 });1642 });
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
1632 $(document).on('click', '.mes_edit_add_reasoning', async function () {1660 $(document).on('click', '.mes_edit_add_reasoning', async function () {
1633 const mesBlock = $(this).closest('.mes');1661 const { message, messageId } = getMessageFromJquery(this);
1634 const mesId = Number(mesBlock.attr('mesid'));
1635 const message = chat[mesId];
1636 if (!message?.extra) {1662 if (!message?.extra) {
1637 return;1663 return;
1638 }1664 }
@@ -1645,7 +1671,7 @@ jQuery(function () {
1645 message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;1671 message.extra.reasoning = PromptReasoning.REASONING_PLACEHOLDER;
1646 await saveChatConditional();1672 await saveChatConditional();
1647 closeMessageEditor();1673 closeMessageEditor();
1648 updateMessageBlock(mesId, message);1674 updateMessageBlock(messageId, message);
1649 });1675 });
16501676
1651 $(document).on('click', '.mes_reasoning_delete', async function (e) {1677 $(document).on('click', '.mes_reasoning_delete', async function (e) {
@@ -1658,21 +1684,17 @@ jQuery(function () {
1658 return;1684 return;
1659 }1685 }
16601686
1661 const mesBlock = $(this).closest('.mes');1687 const { message, messageId } = getMessageFromJquery(this);
1662 const mesId = Number(mesBlock.attr('mesid'));
1663 const message = chat[mesId];
1664 if (!message?.extra) {1688 if (!message?.extra) {
1665 return;1689 return;
1666 }1690 }
1667 message.extra.reasoning = '';1691 message.extra.reasoning = '';
1668 await saveChatConditional();1692 await saveChatConditional();
1669 updateMessageBlock(mesId, message);1693 updateMessageBlock(messageId, message);
1670 });1694 });
16711695
1672 $(document).on('pointerup', '.mes_reasoning_copy', async function () {1696 $(document).on('pointerup', '.mes_reasoning_copy', async function () {
1673 const mesBlock = $(this).closest('.mes');1697 const { message } = getMessageFromJquery(this);
1674 const mesId = Number(mesBlock.attr('mesid'));
1675 const message = chat[mesId];
1676 const reasoning = message?.extra?.reasoning;1698 const reasoning = message?.extra?.reasoning;
16771699
1678 if (!reasoning) {1700 if (!reasoning) {
public/style.css+13 -8
@@ -353,9 +353,18 @@ input[type='checkbox']:focus-visible {
353.mes_reasoning_summary {353.mes_reasoning_summary {
354 cursor: pointer;354 cursor: pointer;
355 position: relative;355 position: relative;
356 margin: 2px;
356}357}
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) {
359 display: none;368 display: none;
360}369}
361370
@@ -377,13 +386,6 @@ input[type='checkbox']:focus-visible {
377 margin-left: 0.5em;386 margin-left: 0.5em;
378}387}
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
387.mes_text i,389.mes_text i,
388.mes_text em,390.mes_text em,
389.mes_reasoning i,391.mes_reasoning i,
@@ -4213,10 +4215,12 @@ input[type="range"]::-webkit-slider-thumb {
4213 align-items: center;4215 align-items: center;
4214}4216}
42154217
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}
42194222
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}
@@ -4225,6 +4229,7 @@ input[type="range"]::-webkit-slider-thumb {
4225 opacity: 1;4229 opacity: 1;
4226}4230}
42274231
4232.reasoning_edit_textarea,
4228.edit_textarea {4233.edit_textarea {
4229 padding: 5px;4234 padding: 5px;
4230 margin: 0;4235 margin: 0;