@runtypelabs/persona 3.30.0 → 3.31.0

package/src/utils/auto-follow.test.ts

@@ -1,8 +1,11 @@
 import { describe, expect, it } from "vitest";
 
 import {
+  computeAnchorScrollState,
+  computeShrunkSpacerHeight,
   createFollowStateController,
   getScrollBottomOffset,
+  hasSelectionWithin,
   isElementNearBottom,
   resolveFollowStateFromScroll,
   resolveFollowStateFromWheel
@@ -90,6 +93,94 @@ describe("auto-follow utilities", () => {
     expect(resume.action).toBe("resume");
   });
 
+  it("detects an active selection touching the container", () => {
+    const inside = { name: "inside" } as unknown as Node;
+    const outside = { name: "outside" } as unknown as Node;
+    const container = {
+      contains: (node: Node | null) => node === inside
+    };
+
+    expect(hasSelectionWithin(null, container)).toBe(false);
+    expect(
+      hasSelectionWithin(
+        { isCollapsed: true, anchorNode: inside, focusNode: inside },
+        container
+      )
+    ).toBe(false);
+    expect(
+      hasSelectionWithin(
+        { isCollapsed: false, anchorNode: outside, focusNode: outside },
+        container
+      )
+    ).toBe(false);
+    expect(
+      hasSelectionWithin(
+        { isCollapsed: false, anchorNode: inside, focusNode: outside },
+        container
+      )
+    ).toBe(true);
+    expect(
+      hasSelectionWithin(
+        { isCollapsed: false, anchorNode: outside, focusNode: inside },
+        container
+      )
+    ).toBe(true);
+  });
+
+  it("computes anchor-top scroll geometry", () => {
+    // Anchored message deep in the transcript: spacer fills the shortfall so
+    // the target position is reachable.
+    expect(
+      computeAnchorScrollState({
+        anchorOffsetTop: 700,
+        topOffset: 16,
+        viewportHeight: 400,
+        contentHeight: 1000
+      })
+    ).toEqual({ targetScrollTop: 684, spacerHeight: 84 });
+
+    // Message near the top of the transcript: target clamps to 0.
+    expect(
+      computeAnchorScrollState({
+        anchorOffsetTop: 10,
+        topOffset: 16,
+        viewportHeight: 400,
+        contentHeight: 1000
+      }).targetScrollTop
+    ).toBe(0);
+
+    // Already enough content below: no spacer needed.
+    expect(
+      computeAnchorScrollState({
+        anchorOffsetTop: 500,
+        topOffset: 16,
+        viewportHeight: 400,
+        contentHeight: 2000
+      }).spacerHeight
+    ).toBe(0);
+  });
+
+  it("shrinks the anchor spacer as content grows, never below zero or above initial", () => {
+    const base = {
+      initialSpacerHeight: 100,
+      contentHeightAtAnchor: 1000
+    };
+
+    expect(
+      computeShrunkSpacerHeight({ ...base, currentContentHeight: 1000 })
+    ).toBe(100);
+    expect(
+      computeShrunkSpacerHeight({ ...base, currentContentHeight: 1040 })
+    ).toBe(60);
+    expect(
+      computeShrunkSpacerHeight({ ...base, currentContentHeight: 1500 })
+    ).toBe(0);
+    // Content shrank (e.g. a collapsed tool row): spacer never grows back.
+    expect(
+      computeShrunkSpacerHeight({ ...base, currentContentHeight: 900 })
+    ).toBe(100);
+  });
+
   it("resolves wheel intent for pause and resume", () => {
     expect(
       resolveFollowStateFromWheel({

package/src/utils/auto-follow.ts

@@ -110,3 +110,71 @@ export function resolveFollowStateFromWheel(
 
   return "none";
 }
+
+export type SelectionLike = Pick<Selection, "isCollapsed"> & {
+  anchorNode: Node | null;
+  focusNode: Node | null;
+};
+
+/**
+ * True when the user has a non-collapsed text selection that touches the
+ * given container. Used to pause auto-follow while the user is selecting
+ * transcript text, so the streaming scroll doesn't drag content out from
+ * under an in-progress drag-selection.
+ */
+export function hasSelectionWithin(
+  selection: SelectionLike | null,
+  container: Pick<Node, "contains">
+): boolean {
+  if (!selection || selection.isCollapsed) return false;
+  return (
+    container.contains(selection.anchorNode) ||
+    container.contains(selection.focusNode)
+  );
+}
+
+export type AnchorScrollInput = {
+  /** Top of the anchored user message, relative to the scroll content. */
+  anchorOffsetTop: number;
+  /** Desired gap kept between the anchored message and the viewport top. */
+  topOffset: number;
+  /** clientHeight of the scroll container. */
+  viewportHeight: number;
+  /** scrollHeight of the scroll container, excluding any anchor spacer. */
+  contentHeight: number;
+};
+
+/**
+ * Geometry for anchor-top ("pin the sent user message near the viewport
+ * top") scrolling. The spacer height is the extra scrollable room needed so
+ * the target scroll position is reachable before the streamed response has
+ * grown tall enough to provide it naturally.
+ */
+export function computeAnchorScrollState(input: AnchorScrollInput): {
+  targetScrollTop: number;
+  spacerHeight: number;
+} {
+  const targetScrollTop = Math.max(0, input.anchorOffsetTop - input.topOffset);
+  const spacerHeight = Math.max(
+    0,
+    targetScrollTop + input.viewportHeight - input.contentHeight
+  );
+  return { targetScrollTop, spacerHeight };
+}
+
+/**
+ * Shrink-only spacer update: as streamed content grows beneath the anchored
+ * message, the spacer gives back exactly that much room so total scroll
+ * height stays constant and nothing jumps. Never grows after anchoring.
+ */
+export function computeShrunkSpacerHeight(input: {
+  initialSpacerHeight: number;
+  contentHeightAtAnchor: number;
+  currentContentHeight: number;
+}): number {
+  const growth = Math.max(
+    0,
+    input.currentContentHeight - input.contentHeightAtAnchor
+  );
+  return Math.max(0, input.initialSpacerHeight - growth);
+}