[bug]: MessageScroller: mount-time anchors are never registered, so a same-count content swap re-anchors to a stale message #11128

import { MessageScroller } from "@shadcn/react/message-scroller"
import { useEffect, useRef, useState } from "react"

type Role = "user" | "assistant" | "typing"

interface Msg {
  id: string
  role: Role
  text: string
}

const SEED_COUNT = 20

function makeSeed(): Msg[] {
  const msgs: Msg[] = []
  for (let i = 0; i < SEED_COUNT; i++) {
    const role: Role = i % 2 === 0 ? "user" : "assistant"
    msgs.push({
      id: `seed-${i}`,
      role,
      text:
        role === "user"
          ? `Seed user message #${i}. Padded out with a bit of extra text so ` +
            `each row takes up a realistic amount of vertical space, the ` +
            `same way a real chat message would.`
          : `Seed assistant reply #${i}. Likewise padded out with a couple ` +
            `of sentences of filler content so the 20 seeded rows overflow ` +
            `the fixed-height viewport below and the page loads pre-scrolled.`,
    })
  }
  return msgs
}

function Row({ role, text }: { role: Role; text: string }) {
  const isUser = role === "user"
  const isTyping = role === "typing"
  return (
    <div
      style={{
        maxWidth: "70%",
        marginInlineStart: isUser ? "auto" : 0,
        marginInlineEnd: isUser ? 0 : "auto",
        padding: "12px 16px",
        borderRadius: 10,
        background: isTyping ? "#fef3c7" : isUser ? "#dbeafe" : "#e2e8f0",
        border: "1px solid #94a3b8",
        fontSize: 14,
        lineHeight: 1.5,
      }}
    >
      {text}
    </div>
  )
}

export default function App() {
  const [messages, setMessages] = useState<Msg[]>(() => makeSeed())
  const [sendCount, setSendCount] = useState(0)
  const [topEdgeId, setTopEdgeId] = useState<string | null>(null)
  const viewportRef = useRef<HTMLDivElement | null>(null)
  const timerRef = useRef<number | undefined>(undefined)

  // Visible readout: which row sits at the viewport's top edge right now,
  // via `document.elementFromPoint`. Runs on a light rAF loop so it also
  // catches the library's own *programmatic* scrolls, not just user input.
  useEffect(() => {
    let raf = 0
    const probe = () => {
      const vp = viewportRef.current
      if (vp) {
        const rect = vp.getBoundingClientRect()
        // Probe a few y-offsets from the top edge downward: with a flex
        // `gap` between rows, a single fixed offset can land exactly in an
        // inter-row gap (which resolves to the Content div, not a row) —
        // this still reports the row actually pinned at the top edge.
        let row: HTMLElement | null = null
        for (const dy of [2, 8, 16, 24, 32]) {
          const el = document.elementFromPoint(
            rect.left + rect.width / 2,
            rect.top + dy,
          )
          row = el?.closest<HTMLElement>("[data-message-id]") ?? null
          if (row) break
        }
        const id = row?.getAttribute("data-message-id") ?? null
        setTopEdgeId((prev) => (prev === id ? prev : id))
      }
      raf = requestAnimationFrame(probe)
    }
    raf = requestAnimationFrame(probe)
    return () => cancelAnimationFrame(raf)
  }, [])

  // Log every top-edge transition to the console for copy-pasteable evidence.
  useEffect(() => {
    console.log(
      `[top-edge] viewport top-edge row is now: ${topEdgeId ?? "(none)"}  ` +
        `(scrollTop=${viewportRef.current?.scrollTop})`,
    )
  }, [topEdgeId])

  useEffect(
    () => () => {
      window.clearTimeout(timerRef.current)
    },
    [],
  )

  const handleSend = () => {
    const n = sendCount + 1
    setSendCount(n)
    const userId = `sent-user-${n}`
    const typingId = `typing-${n}`

    console.log(`\n=== MARK: SEND #${n} click ===`)
    console.log(
      `[before-send] scrollTop=${viewportRef.current?.scrollTop} ` +
        `topEdge=${topEdgeId}`,
    )

    // Step 1: append a user row (scrollAnchor) + a transient "typing…" row.
    // This is a genuine +2 append — the library's append branch registers
    // the new user row as a handled anchor.
    setMessages((prev) => [
      ...prev,
      { id: userId, role: "user", text: `My follow-up message #${n}` },
      { id: typingId, role: "typing", text: "Typing…" },
    ])

    // Step 2: ~800ms later, replace the typing row with a reply row IN ONE
    // state update. Same array length before/after -> net-zero childList
    // mutation -> library's "item count unchanged" branch fires and
    // re-anchors to the oldest anchor it has never registered.
    timerRef.current = window.setTimeout(() => {
      console.log(`=== MARK: SEND #${n} reply arrives (net-zero swap) ===`)
      setMessages((prev) =>
        prev.map((m) =>
          m.id === typingId
            ? {
                id: `reply-${n}`,
                role: "assistant",
                text: `Reply to follow-up #${n}, arriving in one shot.`,
              }
            : m,
        ),
      )
    }, 800)
  }

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        fontFamily: "system-ui, sans-serif",
      }}
    >
      <div
        style={{
          padding: "8px 16px",
          borderBottom: "1px solid #94a3b8",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <strong>MessageScroller anchor-mount repro (@shadcn/react@0.2.1)</strong>
        <button
          type="button"
          onClick={handleSend}
          style={{ padding: "6px 16px", fontSize: 14 }}
        >
          Send
        </button>
      </div>
      <div
        style={{
          padding: "6px 16px",
          background: "#fef3c7",
          borderBottom: "1px solid #94a3b8",
          fontSize: 13,
        }}
        data-testid="top-edge-readout"
      >
        Viewport top-edge row: <code>{topEdgeId ?? "(none)"}</code>
      </div>
      <MessageScroller.Provider autoScroll defaultScrollPosition="end">
        <MessageScroller.Root
          style={{
            flex: 1,
            minHeight: 0,
            display: "flex",
            flexDirection: "column",
          }}
        >
          <MessageScroller.Viewport
            ref={viewportRef}
            style={{
              flex: 1,
              minHeight: 0,
              overflowY: "auto",
              background: "#f8fafc",
            }}
          >
            <MessageScroller.Content
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 12,
                padding: 16,
              }}
            >
              {messages.map((msg) => (
                // Docs pattern, verbatim: scrollAnchor={message.role === "user"}
                <MessageScroller.Item
                  key={msg.id}
                  messageId={msg.id}
                  scrollAnchor={msg.role === "user"}
                >
                  <Row role={msg.role} text={msg.text} />
                </MessageScroller.Item>
              ))}
            </MessageScroller.Content>
          </MessageScroller.Viewport>
        </MessageScroller.Root>
      </MessageScroller.Provider>
    </div>
  )
}

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import App from "./App"

// Logs every `Element.scrollTo(...)` call and every `element.scrollTop = x`
// write, with a short call stack, so the console output makes it obvious
// whether a scroll jump came from app code or from inside the library.
const nativeScrollTo = Element.prototype.scrollTo
Element.prototype.scrollTo = function patchedScrollTo(
  this: Element,
  ...args: Parameters<typeof nativeScrollTo>
) {
  const stack =
    new Error().stack
      ?.split("\n")
      .slice(2, 7)
      .map((line) => line.trim())
      .join(" <- ") ?? "(no stack)"
  const arg = args[0]
  const desc =
    arg && typeof arg === "object" ? JSON.stringify(arg) : String(arg)
  console.log(`[scrollTo] ${desc}\n  stack: ${stack}`)
  return nativeScrollTo.apply(this, args)
}

const scrollTopDescriptor = Object.getOwnPropertyDescriptor(
  Element.prototype,
  "scrollTop",
)
if (scrollTopDescriptor?.get && scrollTopDescriptor.set) {
  const nativeGet = scrollTopDescriptor.get
  const nativeSet = scrollTopDescriptor.set
  Object.defineProperty(Element.prototype, "scrollTop", {
    configurable: true,
    enumerable: scrollTopDescriptor.enumerable,
    get(this: Element) {
      return nativeGet.call(this)
    },
    set(this: Element, value: number) {
      const stack =
        new Error().stack
          ?.split("\n")
          .slice(2, 7)
          .map((line) => line.trim())
          .join(" <- ") ?? "(no stack)"
      console.log(`[scrollTop=] ${value}\n  stack: ${stack}`)
      nativeSet.call(this, value)
    },
  })
}

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)