52: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"] 53: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"] 54: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"] 55: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"] 56:T2dc6,"use client" import * as React from "react" import { MessageScroller as MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from "@shadcn/react/message-scroller" import { IconArrowDown } from "@tabler/icons-react" import { cn } from "cn" import { useSizeMorph } from "@/lib/motion" import { Button } from "@/components/ui/button" function MessageScrollerProvider( props: React.ComponentProps ) { return } function MessageScroller({ className, ...props }: React.ComponentProps) { return ( ) } function MessageScrollerViewport({ className, ...props }: React.ComponentProps) { return ( ) } const MessageScrollerReadyContext = React.createContext(false) function useSpacerHold(contentRef: React.RefObject) { React.useLayoutEffect(() => { const content = contentRef.current const viewport = content?.parentElement const spacer = content?.querySelector( "[data-message-scroller-spacer]" ) if ( !content || !viewport || !spacer || typeof ResizeObserver === "undefined" ) { return } let lastScrollTop = viewport.scrollTop let spacerHeight = spacer.getBoundingClientRect().height let held = Infinity let collapsed = false let reading = false const naturalHeight = () => { const rows = Array.from(content.children).filter( (child): child is HTMLElement => child instanceof HTMLElement && child !== spacer ) const last = rows.at(-1) const padding = parseFloat(getComputedStyle(content).paddingBottom) || 0 return last ? last.offsetTop + last.offsetHeight + padding : 0 } const release = () => { collapsed = false if (held !== Infinity) { held = Infinity content.style.minHeight = "" } } const hold = (scrollTop: number) => { const floor = Math.min( held, scrollTop + viewport.clientHeight - content.offsetTop ) if (floor <= Math.max(viewport.clientHeight, naturalHeight()) + 0.5) { release() return } held = floor content.style.minHeight = `${floor}px` } const onScroll = () => { lastScrollTop = viewport.scrollTop if (collapsed && held !== Infinity) { hold(lastScrollTop) } } const onUserScroll = () => { reading = true if (!collapsed) { release() } } const onSpacer = () => { const next = spacer.getBoundingClientRect().height const shrank = next < spacerHeight - 0.5 spacerHeight = next if (next > 0.5) { collapsed = false if (reading) { return } content.style.minHeight = "" held = content.getBoundingClientRect().height content.style.minHeight = `${held}px` return } if (held !== Infinity) { collapsed = true hold(viewport.scrollTop) return } if (shrank) { const keep = lastScrollTop collapsed = true hold(keep) viewport.scrollTop = keep } } const onRows = () => { reading = false release() } const spacerObserver = new ResizeObserver(onSpacer) spacerObserver.observe(spacer) const rows = new MutationObserver(onRows) rows.observe(content, { childList: true }) viewport.addEventListener("scroll", onScroll, { passive: true }) const intents = ["wheel", "touchstart", "keydown", "pointerdown"] as const for (const type of intents) { viewport.addEventListener(type, onUserScroll, { passive: true }) } return () => { spacerObserver.disconnect() rows.disconnect() viewport.removeEventListener("scroll", onScroll) for (const type of intents) { viewport.removeEventListener(type, onUserScroll) } content.style.minHeight = "" } }, [contentRef]) } function MessageScrollerContent({ className, ref, ...props }: React.ComponentProps) { const [ready, setReady] = React.useState(false) const contentRef = React.useRef(null) useSpacerHold(contentRef) const setRef = React.useCallback( (node: HTMLDivElement | null) => { contentRef.current = node if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) React.useEffect(() => { setReady(true) }, []) return ( ) } type MessageScrollerItemProps = React.ComponentProps< typeof MessageScrollerPrimitive.Item > & { animated?: boolean } function MessageScrollerItem({ className, scrollAnchor = false, animated = true, ...props }: MessageScrollerItemProps) { const ready = React.useContext(MessageScrollerReadyContext) const [entering] = React.useState(() => animated && ready) return ( ) } function useUnseenCount(enabled: boolean) { const anchorRef = React.useRef(null) const { visibleMessageIds } = useMessageScrollerVisibility() const { end } = useMessageScrollerScrollable() const seenRef = React.useRef | null>(null) const [unseen, setUnseen] = React.useState(0) React.useEffect(() => { if (!enabled) { return } const root = anchorRef.current?.closest("[data-slot=message-scroller]") if (!root) { return } const ids = () => Array.from( root.querySelectorAll("[data-message-id]"), (node) => node.dataset.messageId ?? "" ).filter(Boolean) if (!seenRef.current) { seenRef.current = new Set(ids()) } const seen = seenRef.current const count = () => { if (!end) { for (const id of ids()) { seen.add(id) } setUnseen(0) return } for (const id of visibleMessageIds) { seen.add(id) } setUnseen(ids().filter((id) => !seen.has(id)).length) } count() const content = root.querySelector("[data-slot=message-scroller-content]") if (!content) { return } const observer = new MutationObserver(count) observer.observe(content, { childList: true }) return () => observer.disconnect() }, [enabled, end, visibleMessageIds]) return { anchorRef, unseen } } function defaultUnseenLabel(count: number) { return count === 1 ? "1 new message" : `${count} new messages` } type MessageScrollerButtonProps = React.ComponentProps< typeof MessageScrollerPrimitive.Button > & Pick, "variant"> & { showUnseen?: boolean unseenLabel?: (count: number) => React.ReactNode } function MessageScrollerButton({ direction = "end", className, children, render, variant = "outline", showUnseen = true, unseenLabel = defaultUnseenLabel, ref, ...props }: MessageScrollerButtonProps) { const counting = showUnseen && direction === "end" && children === undefined const { anchorRef, unseen } = useUnseenCount(counting) const morphRef = useSizeMorph({ axis: "width", duration: 260, }) const setRef = React.useCallback( (node: HTMLButtonElement | null) => { anchorRef.current = node const cleanup = morphRef(node) if (typeof ref === "function") { ref(node) } else if (ref) { ref.current = node } return () => { cleanup?.() anchorRef.current = null } }, [anchorRef, morphRef, ref] ) const label = counting && unseen > 0 ? unseenLabel(unseen) : null return ( ) } {...props} > {children ?? ( <> {label ? ( {label} ) : ( {direction === "end" ? "Scroll to latest" : "Scroll to start"} )} )} ) } export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } export type { MessageScrollerButtonProps, MessageScrollerItemProps } 51:["$","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","@shadcn/react@0.3.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40shadcn%2Freact","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":"@shadcn/react@0.3.1"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L52",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/button.json","https://hextaui.com/r/motion.json","https://hextaui.com/r/message.json"]}]]}],["$","$L53",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":["$","$L54",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@property --scroller-fade-start {\n\tsyntax: \"\";\n\tinherits: false;\n\tinitial-value: 0px;\n}\n\n@property --scroller-fade-end {\n\tsyntax: \"\";\n\tinherits: false;\n\tinitial-value: 0px;\n}"}]}]]}]]}]}]}]]}],["$","$L55",null,{"files":[{"path":"components/ui/message-scroller.tsx","content":"$56","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]