51: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"] 52: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"] 53:Tcbd,'use client'; import { useEffect, useRef, useState, type ReactNode } from 'react'; import { Button } from '@/components/creance/button/Button'; import { cx } from '@/lib/creance/cx'; import { ArrowDownIcon } from '@/lib/creance/icons'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import './MessageList.css'; const PIN_THRESHOLD = 24; export interface MessageListProps { /** The messages, oldest first. */ children: ReactNode; /** Accessible name of the scrollable region. Default "Conversation". */ label?: string; /** Text of the button shown when new content arrives while the person has scrolled up. Default "Jump to latest". */ jumpLabel?: string; /** * Read out politely when it changes, for example "Deploy Fixer replied". Streaming text is not announced * word by word; say what happened once it has. */ announcement?: string; className?: string; } /** * A scrolling column of messages that follows new content. Following pauses when the person scrolls up, * and a button brings them back. */ export function MessageList({ children, label = 'Conversation', jumpLabel = 'Jump to latest', announcement = '', className }: MessageListProps) { const scrollRef = useRef(null); const innerRef = useRef(null); const pinned = useRef(true); const jumping = useRef(false); const [hasNew, setHasNew] = useState(false); // The content grows as messages arrive and as text streams in: follow it, or offer the way back. useEffect(() => { const el = scrollRef.current; const inner = innerRef.current; if (!el || !inner) return; const follow = () => { if (pinned.current) el.scrollTop = el.scrollHeight; else if (el.scrollHeight > el.clientHeight) setHasNew(true); }; follow(); const observer = new ResizeObserver(follow); observer.observe(inner); return () => observer.disconnect(); }, []); function onScroll() { const el = scrollRef.current; if (!el) return; const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < PIN_THRESHOLD; if (jumping.current) { if (atBottom) jumping.current = false; return; } pinned.current = atBottom; if (atBottom) setHasNew(false); } function jumpToLatest() { const el = scrollRef.current; if (!el) return; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; pinned.current = true; jumping.current = !reduce; setHasNew(false); el.scrollTo({ top: el.scrollHeight, behavior: reduce ? 'auto' : 'smooth' }); } return (

{/* Focusable so keyboard users can scroll it. */} {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

{children}

{hasNew && ( )}

); } 50:["$","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":[null,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/creance-base.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"message-list/MessageList.css","content":".cr-message-list {\n position: relative;\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n}\n\n.cr-message-list__scroll {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n\n.cr-message-list__scroll:focus-visible {\n outline: var(--cr-focus-width) solid var(--cr-color-focus);\n outline-offset: calc(-1 * var(--cr-focus-width));\n}\n\n.cr-message-list__inner {\n display: flex;\n flex-direction: column;\n gap: var(--cr-space-6);\n box-sizing: border-box;\n width: 100%;\n max-width: var(--cr-message-list-width, 760px);\n margin-inline: auto;\n padding: var(--cr-space-6) var(--cr-space-4);\n}\n\n.cr-message-list__jump {\n position: absolute;\n z-index: 1;\n bottom: var(--cr-space-3);\n left: 50%;\n transform: translateX(-50%);\n box-shadow: var(--cr-shadow-md);\n}\n","type":"registry:file","target":"@components/creance/message-list/MessageList.css"},{"path":"message-list/MessageList.tsx","content":"$53","type":"registry:ui","target":"@components/creance/message-list/MessageList.tsx"}],"className":"h-[70svh] min-h-80"}]]}]