{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message-scroller",
  "title": "Message Scroller",
  "description": "Scroll container for chat messages that sticks to the bottom as new messages arrive.",
  "dependencies": [
    "@shadcn/react@^0.3.1",
    "lucide-react@^1.48.0"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/message-scroller/message-scroller.tsx",
      "content": "'use client'\n\nimport { MessageScroller as MessageScrollerPrimitive } from '@shadcn/react/message-scroller'\nimport { ArrowDownIcon } from 'lucide-react'\nimport type * as React from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nfunction MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>) {\n\treturn <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n\treturn (\n\t\t<MessageScrollerPrimitive.Root\n\t\t\tdata-slot=\"message-scroller\"\n\t\t\tclassName={cn('group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MessageScrollerViewport({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n\treturn (\n\t\t<MessageScrollerPrimitive.Viewport\n\t\t\tdata-slot=\"message-scroller-viewport\"\n\t\t\tclassName={cn(\n\t\t\t\t'size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MessageScrollerContent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n\treturn (\n\t\t<MessageScrollerPrimitive.Content\n\t\t\tdata-slot=\"message-scroller-content\"\n\t\t\tclassName={cn('flex h-max min-h-full flex-col gap-6', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MessageScrollerItem({\n\tclassName,\n\tscrollAnchor = false,\n\t...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n\treturn (\n\t\t<MessageScrollerPrimitive.Item\n\t\t\tdata-slot=\"message-scroller-item\"\n\t\t\tscrollAnchor={scrollAnchor}\n\t\t\tclassName={cn('min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction MessageScrollerButton({\n\tdirection = 'end',\n\tclassName,\n\tchildren,\n\trender,\n\tvariant = 'secondary',\n\tsize = 'icon-sm',\n\t...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n\tPick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {\n\treturn (\n\t\t<MessageScrollerPrimitive.Button\n\t\t\tdata-slot=\"message-scroller-button\"\n\t\t\tdata-direction={direction}\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tdirection={direction}\n\t\t\tclassName={cn(\n\t\t\t\t'absolute left-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\trender={render ?? <Button variant={variant} size={size} />}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? (\n\t\t\t\t<>\n\t\t\t\t\t<ArrowDownIcon />\n\t\t\t\t\t<span className=\"sr-only\">{direction === 'end' ? 'Scroll to end' : 'Scroll to start'}</span>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</MessageScrollerPrimitive.Button>\n\t)\n}\n\nexport {\n\tMessageScrollerProvider,\n\tMessageScroller,\n\tMessageScrollerViewport,\n\tMessageScrollerContent,\n\tMessageScrollerItem,\n\tMessageScrollerButton,\n}\nexport {\n\tuseMessageScroller,\n\tuseMessageScrollerScrollable,\n\tuseMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\n",
      "type": "registry:ui",
      "target": "components/ui/message-scroller.tsx"
    }
  ],
  "meta": {
    "new": true
  },
  "type": "registry:ui"
}