review: Fix chrome inconsistent scroll and firefox scroll to bottom

This commit is contained in:
Joe
2024-11-17 18:38:38 -08:00
parent 4c48e3cd15
commit 328e3622f2

View File

@ -699,26 +699,18 @@ const chatBlock = document.getElementById('chat');
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
/** /**
* Auto-resizes the send message textarea to fit its content, up to a maximum height defined by CSS. * Resizes the chat input textarea vertically to match its text content, up to a maximum height defined in CSS.
* This function preserves chat scroll position, resets the textarea height for accurate measurement, * Preserves scroll position in Chrome. In Firefox, the textarea grows to cover the chat history.
* calculates the required height, sets the new height, and then restores the chat scroll position.
* Firefox-specific scrolling adjustments are included for smoother behavior.
*/ */
function autoFitSendTextArea() { function autoFitSendTextArea() {
const originalScrollTop = chatBlock.scrollTop; const originalScrollBottom = chatBlock.scrollHeight - (chatBlock.scrollTop + chatBlock.offsetHeight);
const originalScrollHeight = chatBlock.scrollHeight;
sendTextArea.style.height = '1px';
const newHeight = sendTextArea.scrollHeight;
sendTextArea.style.height = '1px'; // Reset height to 1px to force recalculation of scrollHeight
const newHeight = sendTextArea.scrollHeight;
sendTextArea.style.height = `${newHeight}px`; sendTextArea.style.height = `${newHeight}px`;
// Restore chat scroll position (Firefox-specific adjustment for smoothness).
if (!isFirefox) { if (!isFirefox) {
chatBlock.scrollTop = originalScrollTop + (chatBlock.scrollHeight - originalScrollHeight); chatBlock.scrollTop = chatBlock.scrollHeight - (chatBlock.offsetHeight + originalScrollBottom);
} else {
chatBlock.scrollTo({ top: chatBlock.scrollHeight, behavior: 'auto' });
} }
} }
export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea, debounce_timeout.short); export const autoFitSendTextAreaDebounced = debounce(autoFitSendTextArea, debounce_timeout.short);