diff --git a/public/css/st-tailwind.css b/public/css/st-tailwind.css index 1f0975e48..69f5843a9 100644 --- a/public/css/st-tailwind.css +++ b/public/css/st-tailwind.css @@ -494,12 +494,15 @@ } input:disabled, -textarea:disabled, -#AdvancedFormatting .disabled { +textarea:disabled { cursor: not-allowed; filter: brightness(0.5); } +#AdvancedFormatting .disabled { + filter: brightness(0.5); +} + .debug-red { border: 1px solid red !important; } diff --git a/public/index.html b/public/index.html index dffe456df..9a495629b 100644 --- a/public/index.html +++ b/public/index.html @@ -3089,14 +3089,14 @@ Story String -
+
-
+
@@ -3104,7 +3104,7 @@ Chat Start
-
+
@@ -3182,7 +3182,7 @@
-
+
-
+
@@ -3323,7 +3323,7 @@
-
+
-
+
@@ -3361,38 +3361,38 @@ System Prompt Suffix
-
+
User Message Prefix -
+
User Message Suffix -
+
Assistant Message Prefix -
+
Assistant Message Suffix -
+
System Message Prefix -
+
System Message Suffix -
+
@@ -3408,37 +3408,37 @@
First Assistant Prefix -
+
Last Assistant Prefix -
+
First User Prefix -
+
Last User Prefix -
+
System Instruction Prefix -
+
Stop Sequence -
+
User Filler Message -
+
diff --git a/public/script.js b/public/script.js index 8d9197280..6e25210ff 100644 --- a/public/script.js +++ b/public/script.js @@ -10616,10 +10616,12 @@ jQuery(async function () { } // Set the height of "autoSetHeight" textareas within the drawer to their scroll height - $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () { - await resetScrollHeight($(this)); - return; - }); + if (!CSS.supports('field-sizing', 'content')) { + $(this).closest('.drawer').find('.drawer-content textarea.autoSetHeight').each(async function () { + await resetScrollHeight($(this)); + return; + }); + } } else if (drawerWasOpenAlready) { //to close manually icon.toggleClass('closedIcon openIcon'); @@ -10691,10 +10693,12 @@ jQuery(async function () { $(this).closest('.inline-drawer').find('.inline-drawer-content').stop().slideToggle(); // Set the height of "autoSetHeight" textareas within the inline-drawer to their scroll height - $(this).closest('.inline-drawer').find('.inline-drawer-content textarea.autoSetHeight').each(async function () { - await resetScrollHeight($(this)); - return; - }); + if (!CSS.supports('field-sizing', 'content')) { + $(this).closest('.inline-drawer').find('.inline-drawer-content textarea.autoSetHeight').each(async function () { + await resetScrollHeight($(this)); + return; + }); + } }); $(document).on('click', '.inline-drawer-maximize', function () { diff --git a/public/scripts/group-chats.js b/public/scripts/group-chats.js index 83f0d0a99..8b1c60f80 100644 --- a/public/scripts/group-chats.js +++ b/public/scripts/group-chats.js @@ -1491,9 +1491,11 @@ function select_group_chats(groupId, skipAnimation) { } // Toggle textbox sizes, as input events have not fired here - $('#rm_group_chats_block .autoSetHeight').each(element => { - resetScrollHeight(element); - }); + if (!CSS.supports('field-sizing', 'content')) { + $('#rm_group_chats_block .autoSetHeight').each(element => { + resetScrollHeight(element); + }); + } eventSource.emit('groupSelected', { detail: { id: openGroupId, group: group } }); } @@ -1964,9 +1966,11 @@ function doCurMemberListPopout() { } jQuery(() => { - $(document).on('input', '#rm_group_chats_block .autoSetHeight', function () { - resetScrollHeight($(this)); - }); + if (!CSS.supports('field-sizing', 'content')) { + $(document).on('input', '#rm_group_chats_block .autoSetHeight', function () { + resetScrollHeight($(this)); + }); + } $(document).on('click', '.group_select', function () { const groupId = $(this).attr('chid') || $(this).attr('grid') || $(this).data('id'); diff --git a/public/scripts/instruct-mode.js b/public/scripts/instruct-mode.js index a1bac800c..0767fad61 100644 --- a/public/scripts/instruct-mode.js +++ b/public/scripts/instruct-mode.js @@ -7,7 +7,7 @@ import { power_user, context_presets, } from './power-user.js'; -import { regexFromString } from './utils.js'; +import { regexFromString, resetScrollHeight } from './utils.js'; /** * @type {any[]} Instruct mode presets. @@ -95,11 +95,14 @@ export async function loadInstructMode(data) { if (control.isCheckbox) { $element.prop('checked', power_user.instruct[control.property]); } else { - $element[0].innerText = (power_user.instruct[control.property]); + $element.val(power_user.instruct[control.property]); } $element.on('input', async function () { - power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerText; + power_user.instruct[control.property] = control.isCheckbox ? !!$(this).prop('checked') : $(this).val(); + if (!CSS.supports('field-sizing', 'content')) { + await resetScrollHeight($(this)); + } saveSettingsDebounced(); }); @@ -108,9 +111,6 @@ export async function loadInstructMode(data) { } }); - $('#instruct_system_sequence').css('height', 'auto'); - $('#instruct_system_suffix').css('height', 'auto'); - instruct_presets.forEach((preset) => { const name = preset.name; const option = document.createElement('option'); @@ -611,13 +611,13 @@ jQuery(() => { if (state) { $('#instruct_system_sequence_block').addClass('disabled'); $('#instruct_system_suffix_block').addClass('disabled'); - $('#instruct_system_sequence').prop('contenteditable', false); - $('#instruct_system_suffix').prop('contenteditable', false); + $('#instruct_system_sequence').prop('readOnly', true); + $('#instruct_system_suffix').prop('readOnly', true); } else { $('#instruct_system_sequence_block').removeClass('disabled'); $('#instruct_system_suffix_block').removeClass('disabled'); - $('#instruct_system_sequence').prop('contenteditable', true); - $('#instruct_system_suffix').prop('contenteditable', true); + $('#instruct_system_sequence').prop('readOnly', false); + $('#instruct_system_suffix').prop('readOnly', false); } }); @@ -663,7 +663,7 @@ jQuery(() => { if (control.isCheckbox) { $element.prop('checked', power_user.instruct[control.property]).trigger('input'); } else { - $element[0].innerText = (power_user.instruct[control.property]); + $element.val(power_user.instruct[control.property]); $element.trigger('input'); } } diff --git a/public/scripts/openai.js b/public/scripts/openai.js index 913b9c06b..c044c9796 100644 --- a/public/scripts/openai.js +++ b/public/scripts/openai.js @@ -5281,9 +5281,11 @@ $(document).ready(async function () { saveSettingsDebounced(); }); - $(document).on('input', '#openai_settings .autoSetHeight', function () { - resetScrollHeight($(this)); - }); + if (!CSS.supports('field-sizing', 'content')) { + $(document).on('input', '#openai_settings .autoSetHeight', function () { + resetScrollHeight($(this)); + }); + } if (!isMobile()) { $('#model_openrouter_select').select2({ diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index 93b974252..2eb7aaf11 100644 --- a/public/scripts/power-user.js +++ b/public/scripts/power-user.js @@ -1740,20 +1740,23 @@ async function loadContextSettings() { if (control.isCheckbox) { $element.prop('checked', power_user.context[control.property]); } else { - $element[0].innerText = power_user.context[control.property]; + $element.val(power_user.context[control.property]); } console.log(`Setting ${$element.prop('id')} to ${power_user.context[control.property]}`); // If the setting already exists, no need to duplicate it // TODO: Maybe check the power_user object for the setting instead of a flag? - $element.on('input keyup', async function () { - const value = control.isCheckbox ? !!$(this).prop('checked') : $(this)[0].innerText; + $element.on('input', async function () { + const value = control.isCheckbox ? !!$(this).prop('checked') : $(this).val(); if (control.isGlobalSetting) { power_user[control.property] = value; } else { power_user.context[control.property] = value; } - + console.log(`Setting ${$element.prop('id')} to ${value}`); + if (!CSS.supports('field-sizing', 'content')) { + await resetScrollHeight($(this)); + } saveSettingsDebounced(); }); }); @@ -1793,7 +1796,7 @@ async function loadContextSettings() { .prop('checked', control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property]) .trigger('input'); } else { - $element[0].innerText = (control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property]); + $element.val(control.isGlobalSetting ? power_user[control.property] : power_user.context[control.property]); $element.trigger('input'); } } @@ -3096,7 +3099,7 @@ $(document).ready(() => { }); $('#start_reply_with').on('input', function () { - power_user.user_prompt_bias = String($(this)[0].innerText); + power_user.user_prompt_bias = String($(this).val()); saveSettingsDebounced(); }); @@ -3628,7 +3631,7 @@ $(document).ready(() => { }); $('#custom_stopping_strings').on('input', function () { - power_user.custom_stopping_strings = String($(this)[0].innerText).trim(); + power_user.custom_stopping_strings = String($(this).val()).trim(); saveSettingsDebounced(); }); diff --git a/public/scripts/utils.js b/public/scripts/utils.js index 8f0ca59a7..fc83b4a50 100644 --- a/public/scripts/utils.js +++ b/public/scripts/utils.js @@ -2028,7 +2028,9 @@ export function toggleDrawer(drawer, expand = true) { } // Set the height of "autoSetHeight" textareas within the inline-drawer to their scroll height - content.querySelectorAll('textarea.autoSetHeight').forEach(resetScrollHeight); + if (!CSS.supports('field-sizing', 'content')) { + content.querySelectorAll('textarea.autoSetHeight').forEach(resetScrollHeight); + } } export async function fetchFaFile(name) { diff --git a/public/style.css b/public/style.css index b75b776b8..189bc39cd 100644 --- a/public/style.css +++ b/public/style.css @@ -1176,6 +1176,7 @@ textarea { textarea.autoSetHeight { max-height: 50vh; max-height: 50dvh; + field-sizing: content; } input, @@ -5454,16 +5455,6 @@ body:not(.movingUI) .drawer-content.maximized { opacity: 0.7; } -#advanced-formatting-button div[contenteditable] { +#AdvancedFormatting .autoSetHeight { overflow-wrap: anywhere; - max-height: 50vh; - max-height: 50dvh; - resize: vertical; - overflow: auto; - min-height: 1.8em; - white-space: preserve-breaks; } - -div[contenteditable] br { - display: revert; -} \ No newline at end of file