Jyotisha/frontend/src/hooks/use-conversation-scroll-anchor.ts

"use client";

import { useEffect, useRef, useState } from "react";
import type { RefObject } from "react";

export const conversationAnchorThreshold = 96;

type AnchorState = {
  readonly key: string;
  readonly anchored: boolean;
};

type ConversationScrollAnchor = {
  readonly anchored: boolean;
  readonly anchorToLatest: () => void;
};

export function conversationDistanceFromBottom(container: HTMLElement) {
  return container.scrollHeight - container.scrollTop - container.clientHeight;
}

export function nextAnchorState(anchored: boolean, distanceFromBottom: number, scrolledUp: boolean) {
  if (distanceFromBottom <= conversationAnchorThreshold) return true;
  return scrolledUp ? false : anchored;
}

/**
 * Owns both halves of "follow the conversation": whether the reader is
 * anchored to the bottom (a scroll listener), and landing the viewport on the
 * newest content while they are (a resize observer over the scroller's
 * children, one frame per change). Both chat surfaces use this one hook, so
 * streamed tokens never call scrollTo directly and settlement never adds a
 * second, smooth scroll on top of the follow.
 */
export function useConversationScrollAnchor(
  container: RefObject<HTMLElement | null>,
  active: boolean,
  resetKey: string,
): ConversationScrollAnchor {
  const [anchor, setAnchor] = useState<AnchorState>({ key: resetKey, anchored: true });
  const lastScrollTop = useRef(0);
  const anchoredRef = useRef(true);
  const anchored = anchor.key === resetKey ? anchor.anchored : true;

  useEffect(() => {
    anchoredRef.current = anchored;
  }, [anchored]);

  useEffect(() => {
    const element = container.current;
    if (!active || !element) return;
    lastScrollTop.current = element.scrollTop;
    let frame = 0;
    const measure = () => {
      frame = 0;
      const distance = conversationDistanceFromBottom(element);
      const scrolledUp = element.scrollTop < lastScrollTop.current;
      lastScrollTop.current = element.scrollTop;
      setAnchor((current) => {
        const currentAnchored = current.key === resetKey ? current.anchored : true;
        const next = nextAnchorState(currentAnchored, distance, scrolledUp);
        return next === currentAnchored && current.key === resetKey ? current : { key: resetKey, anchored: next };
      });
    };
    const onScroll = () => {
      if (frame) return;
      frame = window.requestAnimationFrame(measure);
    };
    element.addEventListener("scroll", onScroll, { passive: true });
    frame = window.requestAnimationFrame(measure);
    return () => {
      if (frame) window.cancelAnimationFrame(frame);
      element.removeEventListener("scroll", onScroll);
    };
  }, [active, container, resetKey]);

  // Follow: while anchored, any change in the scroller's content height lands the
  // viewport on the bottom, at most once per frame. Switching conversations
  // (resetKey) lands there immediately.
  useEffect(() => {
    const element = container.current;
    if (!active || !element) return;
    let frame = 0;
    const follow = () => {
      frame = 0;
      if (!anchoredRef.current) return;
      element.scrollTop = element.scrollHeight;
    };
    const requestFollow = () => {
      if (frame) return;
      frame = window.requestAnimationFrame(follow);
    };
    requestFollow();
    if (typeof ResizeObserver === "undefined") {
      return () => {
        if (frame) window.cancelAnimationFrame(frame);
      };
    }
    const sizes = new ResizeObserver(requestFollow);
    const observeChildren = () => {
      sizes.disconnect();
      for (const child of Array.from(element.children)) sizes.observe(child);
    };
    observeChildren();
    const children = typeof MutationObserver === "undefined"
      ? null
      : new MutationObserver(() => {
        observeChildren();
        requestFollow();
      });
    children?.observe(element, { childList: true });
    return () => {
      sizes.disconnect();
      children?.disconnect();
      if (frame) window.cancelAnimationFrame(frame);
    };
  }, [active, container, resetKey]);

  return {
    anchored,
    anchorToLatest: () => {
      const element = container.current;
      if (element) {
        const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        element.scrollTo({ top: element.scrollHeight, behavior: reduceMotion ? "auto" : "smooth" });
      }
      setAnchor({ key: resetKey, anchored: true });
    },
  };
}