Message Scroller

1"use client";2​3import * as React from "react";4import { ArrowDownIcon, ArrowUpIcon } from "@phosphor-icons/react/ssr";5​6import { Button } from "@/components/ui/button";7import { cn } from "@/lib/utils";8​9// A conversation's scroll area. It opens at the newest message and stays pinned there while new messages arrive, until10// the reader scrolls up; then a white "Jump to latest" pill with Shadow/S appears at the bottom center. The pill only11// fades (200ms, the strong ease-out): it shows while someone is reading, and sliding would pull the eye off the text.12// The jump scrolls smoothly, or instantly with reduced motion.13​14type ScrollOptions = { behavior?: ScrollBehavior };15​16type ScrollerState = {17  isAtStart: boolean;18  isAtEnd: boolean;19  scrollable: boolean;20  viewport: HTMLDivElement | null;21  setViewport: (el: HTMLDivElement | null) => void;22  setContent: (el: HTMLDivElement | null) => void;23  update: () => void;24  scrollToEnd: (options?: ScrollOptions) => void;25  scrollToStart: (options?: ScrollOptions) => void;26};27​28const ScrollerContext = React.createContext<ScrollerState | null>(null);29​30// How close to the end still counts as reading the newest message.31const END_SLACK = 24;32​33function smoothUnlessReduced(): ScrollBehavior {34  return typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";35}36​37/** Holds a scroller's state, so controls outside the scroll area (a composer's send button) can reach it. */38function MessageScrollerProvider({ children }: { children: React.ReactNode }) {39  const [viewport, setViewport] = React.useState<HTMLDivElement | null>(null);40  const [content, setContent] = React.useState<HTMLDivElement | null>(null);41  const [edges, setEdges] = React.useState({ isAtStart: true, isAtEnd: true, scrollable: false });42  // Pinned while the reader is at the newest message; new content then keeps the view at the end.43  const pinned = React.useRef(true);44​45  const update = React.useCallback(() => {46    if (!viewport) return;47    const { scrollTop, scrollHeight, clientHeight } = viewport;48    const isAtEnd = scrollHeight - scrollTop - clientHeight <= END_SLACK;49    const next = { isAtStart: scrollTop <= 1, isAtEnd, scrollable: scrollHeight > clientHeight + 1 };50    pinned.current = isAtEnd;51    setEdges((prev) => (prev.isAtStart === next.isAtStart && prev.isAtEnd === next.isAtEnd && prev.scrollable === next.scrollable ? prev : next));52  }, [viewport]);53​54  const scrollToEnd = React.useCallback(55    (options?: ScrollOptions) => {56      if (!viewport) return;57      pinned.current = true;58      viewport.scrollTo({ top: viewport.scrollHeight, behavior: options?.behavior ?? smoothUnlessReduced() });59    },60    [viewport],61  );62​63  const scrollToStart = React.useCallback(64    (options?: ScrollOptions) => {65      if (!viewport) return;66      pinned.current = false;67      viewport.scrollTo({ top: 0, behavior: options?.behavior ?? smoothUnlessReduced() });68    },69    [viewport],70  );71​72  // Open at the newest message.73  React.useLayoutEffect(() => {74    if (!viewport) return;75    viewport.scrollTop = viewport.scrollHeight;76    update();77  }, [viewport, update]);78​79  // Keep the newest message in view as content grows, unless the reader has scrolled away.80  React.useEffect(() => {81    if (!viewport || !content) return;82    const observer = new ResizeObserver(() => {83      if (pinned.current) viewport.scrollTop = viewport.scrollHeight;84      update();85    });86    observer.observe(content);87    observer.observe(viewport);88    return () => observer.disconnect();89  }, [viewport, content, update]);90​91  const value = React.useMemo<ScrollerState>(() => ({ ...edges, viewport, setViewport, setContent, update, scrollToEnd, scrollToStart }), [edges, viewport, update, scrollToEnd, scrollToStart]);92  return <ScrollerContext.Provider value={value}>{children}</ScrollerContext.Provider>;93}94​95function useScrollerContext(part: string) {96  const context = React.useContext(ScrollerContext);97  if (!context) throw new Error(`${part} must be used inside MessageScroller.`);98  return context;99}100​101/** The scroller's position and controls: whether it is at the start or the end, and functions to jump there. */102function useMessageScroller() {103  const { isAtStart, isAtEnd, scrollToEnd, scrollToStart } = useScrollerContext("useMessageScroller");104  return { isAtStart, isAtEnd, scrollToEnd, scrollToStart };105}106​107/** Whether there is more to scroll to in each direction. */108function useMessageScrollerScrollable() {109  const { isAtStart, isAtEnd, scrollable } = useScrollerContext("useMessageScrollerScrollable");110  return { scrollable, canScrollStart: scrollable && !isAtStart, canScrollEnd: scrollable && !isAtEnd };111}112​113/** Whether an element (an unread marker, a message) is in view inside the scroller. */114function useMessageScrollerVisibility(ref: React.RefObject<Element | null>, threshold = 0.5) {115  const { viewport } = useScrollerContext("useMessageScrollerVisibility");116  const [visible, setVisible] = React.useState(false);117  React.useEffect(() => {118    const el = ref.current;119    if (!viewport || !el) return;120    const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting), { root: viewport, threshold });121    observer.observe(el);122    return () => observer.disconnect();123  }, [viewport, ref, threshold]);124  return visible;125}126​127function ScrollerRoot({ className, ...props }: React.ComponentProps<"div">) {128  return <div data-slot="message-scroller" className={cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className)} {...props} />;129}130​131function MessageScroller(props: React.ComponentProps<"div">) {132  const parent = React.useContext(ScrollerContext);133  if (parent) return <ScrollerRoot {...props} />;134  return (135    <MessageScrollerProvider>136      <ScrollerRoot {...props} />137    </MessageScrollerProvider>138  );139}140​141function MessageScrollerViewport({ className, onScroll, ...props }: React.ComponentProps<"div">) {142  const { setViewport, update } = useScrollerContext("MessageScrollerViewport");143  return (144    <div145      ref={setViewport}146      data-slot="message-scroller-viewport"147      tabIndex={0}148      role="log"149      aria-live="polite"150      onScroll={(event) => {151        update();152        onScroll?.(event);153      }}154      className={cn("size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain outline-none [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring", className)}155      {...props}156    />157  );158}159​160function MessageScrollerContent({ className, ...props }: React.ComponentProps<"div">) {161  const { setContent } = useScrollerContext("MessageScrollerContent");162  return <div ref={setContent} data-slot="message-scroller-content" className={cn("flex h-max min-h-full flex-col justify-end gap-6 p-4", className)} {...props} />;163}164​165/**166 * One entry of the conversation. `scrollAnchor` brings it to the top of the view when it mounts (the message just167 * sent, so its reply grows below it).168 */169function MessageScrollerItem({ className, scrollAnchor = false, ...props }: React.ComponentProps<"div"> & { scrollAnchor?: boolean }) {170  const { viewport } = useScrollerContext("MessageScrollerItem");171  const ref = React.useRef<HTMLDivElement>(null);172  React.useLayoutEffect(() => {173    const el = ref.current;174    if (!scrollAnchor || !viewport || !el) return;175    viewport.scrollTop += el.getBoundingClientRect().top - viewport.getBoundingClientRect().top;176  }, [scrollAnchor, viewport]);177  return <div ref={ref} data-slot="message-scroller-item" data-scroll-anchor={scrollAnchor || undefined} className={cn("min-w-0 shrink-0", className)} {...props} />;178}179​180function MessageScrollerButton({ direction = "end", className, children, variant = "secondary", size = "sm", onClick, ...props }: React.ComponentProps<typeof Button> & { direction?: "start" | "end" }) {181  const { isAtStart, isAtEnd, scrollable, scrollToEnd, scrollToStart } = useScrollerContext("MessageScrollerButton");182  const active = scrollable && (direction === "end" ? !isAtEnd : !isAtStart);183  return (184    <Button185      data-slot="message-scroller-button"186      data-direction={direction}187      data-active={active}188      aria-hidden={!active || undefined}189      tabIndex={active ? undefined : -1}190      variant={variant}191      size={size}192      onClick={(event) => {193        onClick?.(event);194        if (!event.defaultPrevented) (direction === "end" ? scrollToEnd : scrollToStart)();195      }}196      className={cn(197        "absolute left-1/2 z-10 -translate-x-1/2 gap-1.5 bg-surface px-3.5 text-body shadow-floating transition-[opacity,background-color,scale] duration-200 ease-out hover:bg-subtle data-[active=false]:pointer-events-none data-[active=false]:opacity-0 data-[direction=end]:bottom-4 data-[direction=start]:top-4 [&_svg:not([class*='size-'])]:size-4",198        className,199      )}200      {...props}201    >202      {children ?? (203        <>204          {direction === "end" ? <ArrowDownIcon weight="bold" /> : <ArrowUpIcon weight="bold" />}205          {direction === "end" ? "Jump to latest" : "Jump to first"}206        </>207      )}208    </Button>209  );210}211​212export {213  MessageScroller,214  MessageScrollerButton,215  MessageScrollerContent,216  MessageScrollerItem,217  MessageScrollerProvider,218  MessageScrollerViewport,219  useMessageScroller,220  useMessageScrollerScrollable,221  useMessageScrollerVisibility,222};