50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T256e,// Hairline UI · chat-scroll · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { ArrowDown } from "lucide-react"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * JUMP TO LATEST: a chat that follows the answer, until you * scroll away * * following pinned to the bottom while text streams in * away you scrolled up: it lets go at once, and a round * ↓ button appears * new below text arrived while you were away: the button * widens into "● Writing"; when the answer ends the * label morphs to "New reply" * back a click glides down, chasing the moving bottom, * and it follows again * * Wrap your messages. Give it a height (or flex-1) and change * followKey when someone sends, to bring them back down. * ───────────────────────────────────────────────────────── */ export interface ChatScrollProps extends React.HTMLAttributes { children: React.ReactNode; /** True while an answer streams; the button says "Writing". */ streaming?: boolean; /** Change it (e.g. to the latest message id) to jump to the bottom, e.g. after sending. */ followKey?: React.Key; /** How close to the bottom (px) still counts as at the bottom. */ threshold?: number; /** Classes for the inner content column. */ contentClassName?: string; } const EASE = "cubic-bezier(0.23,1,0.32,1)"; // A light that sweeps across the label. A mask, not a text clip, so it reaches letters that are mid-morph. const SHEEN = "text-foreground [mask-image:linear-gradient(90deg,rgb(0_0_0/0.45)_35%,#000_50%,rgb(0_0_0/0.45)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none] motion-reduce:text-foreground/70"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); export function ChatScroll({ children, streaming = false, followKey, threshold = 48, className = "", contentClassName = "", ...props }: ChatScrollProps) { const reduced = useReducedMotion(); const scrollerRef = React.useRef(null); const contentRef = React.useRef(null); const stuck = React.useRef(true); const lastTop = React.useRef(0); const touchY = React.useRef(0); const frame = React.useRef(0); const gliding = React.useRef(false); // When the person last reached for the scroll; only their own scrolling lets go of the bottom. const intent = React.useRef(0); const [away, setAway] = React.useState(false); const [unread, setUnread] = React.useState(false); const distance = () => { const el = scrollerRef.current; return el ? el.scrollHeight - el.clientHeight - el.scrollTop : 0; }; const release = () => { cancelAnimationFrame(frame.current); gliding.current = false; stuck.current = false; }; /* Glide to the bottom, re-reading it every frame because it moves while text streams in. */ const toBottom = React.useCallback( (smooth: boolean) => { const el = scrollerRef.current; if (!el) return; cancelAnimationFrame(frame.current); stuck.current = true; setAway(false); setUnread(false); if (!smooth || reduced) { el.scrollTop = el.scrollHeight; return; } gliding.current = true; const from = el.scrollTop; const start = performance.now(); const step = (now: number) => { const t = Math.min(1, (now - start) / 520); const eased = 1 - Math.pow(1 - t, 4); el.scrollTop = from + (el.scrollHeight - el.clientHeight - from) * eased; if (t < 1) frame.current = requestAnimationFrame(step); else gliding.current = false; }; frame.current = requestAnimationFrame(step); }, [reduced] ); // Start at the latest message. React.useLayoutEffect(() => { const el = scrollerRef.current; if (el) el.scrollTop = el.scrollHeight; }, []); // While following, every bit of new content keeps the bottom in view; while away, it's unread. React.useEffect(() => { const content = contentRef.current; const el = scrollerRef.current; if (!content || !el) return; const observer = new ResizeObserver(() => { if (stuck.current) { if (!gliding.current) el.scrollTop = el.scrollHeight; } else if (distance() > threshold) { setUnread(true); setAway(true); } }); observer.observe(content); return () => { observer.disconnect(); cancelAnimationFrame(frame.current); }; }, [threshold]); // A new message from the person brings them back down. const firstKey = React.useRef(followKey); React.useEffect(() => { if (followKey === firstKey.current) return; firstKey.current = followKey; toBottom(true); }, [followKey, toBottom]); const onScroll = () => { const el = scrollerRef.current; if (!el) return; const top = el.scrollTop; const d = distance(); // Upward movement counts only if the person caused it, not when content shrinks and the browser clamps. const userUp = top < lastTop.current - 1 && !gliding.current && performance.now() - intent.current < 800; lastTop.current = top; if (userUp) { release(); setAway(d > threshold); } else if (!stuck.current && d <= threshold) { // Back at the bottom: follow again. stuck.current = true; setAway(false); setUnread(false); } else if (!stuck.current) setAway(d > threshold); }; const reach = () => (intent.current = performance.now()); return (

{ reach(); if (e.deltaY < 0) release(); }} onTouchStart={(e) => { reach(); touchY.current = e.touches[0]?.clientY ?? 0; }} onTouchMove={(e) => { reach(); if ((e.touches[0]?.clientY ?? 0) > touchY.current) release(); }} onKeyDown={(e) => { reach(); if (["ArrowUp", "PageUp", "Home"].includes(e.key)) release(); }} // Dragging the scrollbar. onPointerDown={reach} className="h-full overflow-y-auto overscroll-contain outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/30" >

{children}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}\n\n@keyframes ui-ping {\n\tfrom {\n\t\ttransform: scale(1);\n\t\topacity: 0.55;\n\t}\n\tto {\n\t\ttransform: scale(2.6);\n\t\topacity: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/chat-scroll.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]