rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Don't overextend input textarea height on autofit

Browse Source
This commit is contained in:
Cohee
2024-07-11 21:18:26 +03:00
parent aadc8d74a2
commit c4aed23cf7
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/scripts/RossAscends-mods.js
View File

@@ -31,7 +31,7 @@ import {
SECRET_KEYS, SECRET_KEYS,
secret_state, secret_state,
} from './secrets.js'; } from './secrets.js';
import { debounce, getStringHash, isValidUrl } from './utils.js'; import { debounce, debouncedThrottle, getStringHash, isValidUrl } from './utils.js';
import { chat_completion_sources, oai_settings } from './openai.js'; import { chat_completion_sources, oai_settings } from './openai.js';
import { getTokenCountAsync } from './tokenizers.js'; import { getTokenCountAsync } from './tokenizers.js';
import { textgen_types, textgenerationwebui_settings as textgen_settings, getTextGenServer } from './textgen-settings.js'; import { textgen_types, textgenerationwebui_settings as textgen_settings, getTextGenServer } from './textgen-settings.js';
@@ -694,20 +694,23 @@ const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
* this makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height) * this makes the chat input text area resize vertically to match the text size (limited by CSS at 50% window height)
*/ */
function autoFitSendTextArea() { function autoFitSendTextArea() {
// Needs to be pulled dynamically because it is affected by font size changes
const computedStyle = window.getComputedStyle(sendTextArea);
const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight); const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight);
if (Math.ceil(sendTextArea.scrollHeight + 3) >= Math.floor(sendTextArea.offsetHeight)) { if (Math.ceil(sendTextArea.scrollHeight + 3) >= Math.floor(sendTextArea.offsetHeight)) {
// Needs to be pulled dynamically because it is affected by font size changes const sendTextAreaMinHeight = computedStyle.minHeight;
const sendTextAreaMinHeight = window.getComputedStyle(sendTextArea).getPropertyValue('min-height');
sendTextArea.style.height = sendTextAreaMinHeight; sendTextArea.style.height = sendTextAreaMinHeight;
} }
sendTextArea.style.height = sendTextArea.scrollHeight + 3 + 'px'; const maxHeight = parseInt(computedStyle.maxHeight, 10);
const newHeight = sendTextArea.scrollHeight + 3;
sendTextArea.style.height = (newHeight < maxHeight) ? `${newHeight}px` : `${maxHeight}px`;
if (!isFirefox) { if (!isFirefox) {
const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom)); const newScrollTop = Math.round(chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom));
chatBlock.scrollTop = newScrollTop; chatBlock.scrollTop = newScrollTop;
} }
} }
export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea); export const autoFitSendTextAreaDebounced = debouncedThrottle(autoFitSendTextArea, debounce_timeout.short);
// --------------------------------------------------- // ---------------------------------------------------