agent-zero/webui/js/scroller.js

/**
 * Stop delayed or in-flight scrolling previously scheduled for an element.
 * Virtualized containers call this before replacing their children so an old
 * auto-scroll cannot override the restored viewport anchor.
 */
export function cancelPendingScroll(element) {
  if (!element) return;

  const timeoutRaw = element.dataset?.scrollerTimeout;
  const timeoutId = timeoutRaw == null ? null : Number(timeoutRaw);
  if (Number.isFinite(timeoutId)) clearTimeout(timeoutId);

  if (element.dataset?.scrollingTo != null && element.scrollTo) {
    element.scrollTo({ top: element.scrollTop, behavior: "instant" });
  }

  delete element.dataset.scrollerTimeout;
  delete element.dataset.scrollerReapplySnapshot;
  delete element.dataset.scrollingTo;
}

export class Scroller {
  constructor(
    element,
    {
      smooth = false,
      toleranceRem = 2,
      reapplyDelayMs = 0,
      reapplyToleranceRatio = 0,
      applyStabilization = false,
    } = {},
  ) {
    this.element = element;
    this.smooth = smooth;
    this.reapplyDelayMs = reapplyDelayMs;
    this.reapplyToleranceRatio = reapplyToleranceRatio;
    this.tolerance =
      toleranceRem *
      parseFloat(getComputedStyle(document.documentElement).fontSize);
    this.wasAtBottom = this.isAtBottom();
    this._scrollListener = null;

    this._resizeObserver = null;
    this._lastClientHeight = null;

    if (applyStabilization) this._initScrollStabilization();
  }

  _initScrollStabilization() {
    if (!this.element) return;

    const hasStabilizationFlag =
      this.element?.dataset?.scrollStabilization != null;
    if (hasStabilizationFlag) return;

    if (typeof ResizeObserver === "undefined") return;

    this._lastClientHeight = this.element.clientHeight;
    this._resizeObserver = new ResizeObserver(() => {
      const prevHeight = this._lastClientHeight;
      const nextHeight = this.element.clientHeight;

      if (prevHeight == null) {
        this._lastClientHeight = nextHeight;
        return;
      }

      if (nextHeight === prevHeight) return;

      const delta = nextHeight - prevHeight;
      this._lastClientHeight = nextHeight;

      const scrollTop = this._getEffectiveScrollTop();
      const bottomDistanceBefore =
        this.element.scrollHeight - scrollTop - prevHeight;
      const wasAtBottom = bottomDistanceBefore <= this.tolerance;
      this.wasAtBottom = wasAtBottom;

      if (wasAtBottom) {
        this.scrollToBottom();
        return;
      }

      if (delta !== 0) {
        this._clearScrollingTo();
        this.element.scrollTop = Math.max(0, this.element.scrollTop - delta);
      }
    });

    this._resizeObserver.observe(this.element);

    this.element.dataset.scrollStabilization = "1";
  }

  _getEffectiveScrollTop() {
    const scrollingToRaw = this.element?.dataset?.scrollingTo;
    const scrollingTo = scrollingToRaw == null ? null : Number(scrollingToRaw);
    if (Number.isFinite(scrollingTo)) return scrollingTo;
    return this.element.scrollTop;
  }

  _setScrollingTo(target) {
    this.element.dataset.scrollingTo = String(target);

    if (this._scrollListener) return;

    this._scrollListener = () => {
      const current = this.element.scrollTop;
      const activeTargetRaw = this.element?.dataset?.scrollingTo;
      const activeTarget = activeTargetRaw == null ? null : Number(activeTargetRaw);
      if (!Number.isFinite(activeTarget)) {
        this._clearScrollingTo();
        return;
      }

      if (current >= activeTarget - 1) this._clearScrollingTo();
    };

    this.element.addEventListener("scroll", this._scrollListener, {
      passive: true,
    });
  }

  _clearScrollingTo() {
    delete this.element.dataset.scrollingTo;
    if (this._scrollListener) {
      this.element.removeEventListener("scroll", this._scrollListener);
      this._scrollListener = null;
    }
  }

  isAtBottom() {
    const { scrollHeight, clientHeight } = this.element;
    const scrollTop = this._getEffectiveScrollTop();
    return scrollHeight - scrollTop - clientHeight <= this.tolerance;
  }

  _getBottomDistancePx() {
    const { scrollHeight, clientHeight } = this.element;
    const scrollTop = this._getEffectiveScrollTop();
    return scrollHeight - scrollTop - clientHeight;
  }

  scrollToBottom() {
    const target = Math.max(
      0,
      this.element.scrollHeight - this.element.clientHeight,
    );
    if (this.smooth) {
      this._setScrollingTo(target);
      this.element.scrollTo({ top: target, behavior: "smooth" });
    } else {
      this._clearScrollingTo();
      this.element.scrollTop = target;
    }
  }

  _getReapplyTimeoutId() {
    const raw = this.element?.dataset?.scrollerTimeout;
    const parsed = raw == null ? null : Number(raw);
    if (!Number.isFinite(parsed)) return null;
    return parsed;
  }

  _getReapplyScrollSnapshot() {
    const raw = this.element?.dataset?.scrollerReapplySnapshot;
    const parsed = raw == null ? null : Number(raw);
    if (!Number.isFinite(parsed)) return null;
    return parsed;
  }

  _clearReapplyTimeout() {
    const id = this._getReapplyTimeoutId();
    if (id != null) clearTimeout(id);
    delete this.element.dataset.scrollerTimeout;
    delete this.element.dataset.scrollerReapplySnapshot;
  }

  _scheduleReapplyScrollToBottom() {
    this._clearReapplyTimeout();

    const snapshot = this._getEffectiveScrollTop();
    this.element.dataset.scrollerReapplySnapshot = String(snapshot);

    const id = setTimeout(() => {
      delete this.element.dataset.scrollerTimeout;

      const expected = this._getReapplyScrollSnapshot();
      delete this.element.dataset.scrollerReapplySnapshot;
      if (expected != null && this._getEffectiveScrollTop() !== expected) return;

      if (!this.wasAtBottom) return;
      if (!this.isAtBottom()) return;

      this.scrollToBottom();
    }, this.reapplyDelayMs);

    this.element.dataset.scrollerTimeout = String(id);
  }

  reApplyScroll(instant = false) {
    this._clearReapplyTimeout();

    if (!this.wasAtBottom) return;

    if (instant) {
      this.scrollToBottom();
      return;
    }

    if (!this.isAtBottom()) {
      this.scrollToBottom();
      return;
    }

    const ratio = this.reapplyToleranceRatio;
    if (ratio <= 0) {
      if (this.reapplyDelayMs > 0) this._scheduleReapplyScrollToBottom();
      else this.scrollToBottom();
      return;
    }

    const dist = this._getBottomDistancePx();
    const tolerance = this.tolerance;
    const clampedDist = Math.max(0, Math.min(dist, tolerance));
    const progress = tolerance > 0 ? 1 - clampedDist / tolerance : 1;
    if (progress < ratio) return;

    if (this.reapplyDelayMs > 0) this._scheduleReapplyScrollToBottom();
    else this.scrollToBottom();
  }
}