From d27d750cb2888c6c8a7980f00cb08e4c55901041 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sat, 21 Dec 2024 02:50:42 +0200
Subject: [PATCH] Use CSS resizing for send textarea

---
 public/scripts/RossAscends-mods.js | 44 +++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index 750e9cdd2..213f9f07e 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -887,14 +887,44 @@ export function initRossMods() {
         saveSettingsDebounced();
     });
 
+    const cssAutofit = CSS.supports('field-sizing', 'content');
+
+    if (cssAutofit) {
+        sendTextArea.style['fieldSizing'] = 'content';
+        sendTextArea.style['height'] = 'auto';
+
+        let lastHeight = chatBlock.offsetHeight;
+        const chatBlockResizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target !== chatBlock) {
+                    continue;
+                }
+
+                const threshold = 1;
+                const newHeight = chatBlock.offsetHeight;
+                const deltaHeight = newHeight - lastHeight;
+                const isScrollAtBottom = Math.abs(chatBlock.scrollHeight - chatBlock.scrollTop - newHeight) <= threshold;
+
+                if (!isScrollAtBottom && Math.abs(deltaHeight) > threshold) {
+                    chatBlock.scrollTop -= deltaHeight;
+                }
+                lastHeight = newHeight;
+            }
+        });
+
+        chatBlockResizeObserver.observe(chatBlock);
+    }
+
     sendTextArea.addEventListener('input', () => {
-        const hasContent = sendTextArea.value !== '';
-        const fitsCurrentSize = sendTextArea.scrollHeight <= sendTextArea.offsetHeight;
-        const isScrollbarShown = sendTextArea.clientWidth < sendTextArea.offsetWidth;
-        const isHalfScreenHeight = sendTextArea.offsetHeight >= window.innerHeight / 2;
-        const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
-        if (needsDebounce) autoFitSendTextAreaDebounced();
-        else autoFitSendTextArea();
+        if (!cssAutofit) {
+            const hasContent = sendTextArea.value !== '';
+            const fitsCurrentSize = sendTextArea.scrollHeight <= sendTextArea.offsetHeight;
+            const isScrollbarShown = sendTextArea.clientWidth < sendTextArea.offsetWidth;
+            const isHalfScreenHeight = sendTextArea.offsetHeight >= window.innerHeight / 2;
+            const needsDebounce = hasContent && (fitsCurrentSize || (isScrollbarShown && isHalfScreenHeight));
+            if (needsDebounce) autoFitSendTextAreaDebounced();
+            else autoFitSendTextArea();
+        }
         saveUserInputDebounced();
     });