Merge upstream/main to resolve PR #2940 conflicts

Author: zouyonghe

frontend/app/view/term/term.tsx

@@ -311,6 +311,9 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
         model.termRef.current = termWrap;
         setTermWrapInst(termWrap);
         const rszObs = new ResizeObserver(() => {
+            if (termWrap.cachedAtBottomForResize == null) {
+                termWrap.cachedAtBottomForResize = termWrap.wasRecentlyAtBottom();
+            }
             termWrap.handleResize_debounced();
         });
         rszObs.observe(connectElemRef.current);

frontend/app/view/term/termwrap.ts

@@ -106,6 +106,9 @@ export class TermWrap {
     // xterm.js paste() method triggers onData event, which can cause duplicate sends
     lastPasteData: string = "";
     lastPasteTime: number = 0;
+    lastAtBottomTime: number = Date.now();
+    lastScrollAtBottom: boolean = true;
+    cachedAtBottomForResize: boolean | null = null;
 
     constructor(
         tabId: string,
@@ -241,6 +244,19 @@ export class TermWrap {
                 this.connectElem.removeEventListener("paste", pasteHandler, true);
             },
         });
+        const viewportElem = this.connectElem.querySelector(".xterm-viewport") as HTMLElement;
+        if (viewportElem) {
+            const scrollHandler = () => {
+                const atBottom = viewportElem.scrollTop + viewportElem.clientHeight >= viewportElem.scrollHeight - 20;
+                this.setAtBottom(atBottom);
+            };
+            viewportElem.addEventListener("scroll", scrollHandler);
+            this.toDispose.push({
+                dispose: () => {
+                    viewportElem.removeEventListener("scroll", scrollHandler);
+                },
+            });
+        }
     }
 
     getZoneId(): string {
@@ -509,8 +525,29 @@ export class TermWrap {
         }
     }
 
+    setAtBottom(atBottom: boolean) {
+        if (this.lastScrollAtBottom && !atBottom) {
+            this.lastAtBottomTime = Date.now();
+        }
+        this.lastScrollAtBottom = atBottom;
+        if (atBottom) {
+            this.lastAtBottomTime = Date.now();
+        }
+    }
+
+    wasRecentlyAtBottom(): boolean {
+        if (this.lastScrollAtBottom) {
+            return true;
+        }
+        return Date.now() - this.lastAtBottomTime <= 1000;
+    }
+
     handleResize() {
         const oldTermSize = this.getTermSize();
+        const atBottom = this.cachedAtBottomForResize ?? this.wasRecentlyAtBottom();
+        if (!atBottom) {
+            this.cachedAtBottomForResize = null;
+        }
         this.fitAddon.fit();
         const newTermSize = this.getTermSize();
         if (!this.areTermSizesEqual(oldTermSize, newTermSize)) {
@@ -526,6 +563,13 @@ export class TermWrap {
             this.hasResized = true;
             this.resyncController("initial resize");
         }
+        if (atBottom) {
+            setTimeout(() => {
+                this.cachedAtBottomForResize = null;
+                this.terminal.scrollToBottom();
+                this.setAtBottom(true);
+            }, 20);
+        }
     }
 
     processAndCacheData() {