Message Scroller

1"use client"
2
3import { ComponentProps } from "react"
4
5import {
6  MessageScroller as MessageScrollerPrimitive,
7  useMessageScroller,
8  useMessageScrollerScrollable,
9  useMessageScrollerVisibility,
10} from "@shadcn/react/message-scroller"
11import { ArrowDownIcon } from "lucide-react"
12
13import { cn } from "@/lib/utils"
14import { Button } from "@/components/ui/button"
15
16function MessageScrollerProvider(
17  props: ComponentProps<typeof MessageScrollerPrimitive.Provider>
18) {
19  return <MessageScrollerPrimitive.Provider {...props} />
20}
21
22function MessageScroller({
23  className,
24  ...props
25}: ComponentProps<typeof MessageScrollerPrimitive.Root>) {
26  return (
27    <MessageScrollerPrimitive.Root
28      data-slot="message-scroller"
29      className={cn(
30        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
31        className
32      )}
33      {...props}
34    />
35  )
36}
37
38function MessageScrollerViewport({
39  className,
40  ...props
41}: ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
42  return (
43    <MessageScrollerPrimitive.Viewport
44      data-slot="message-scroller-viewport"
45      className={cn(
46        "scroll-fade-b size-full min-h-0 min-w-0 scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
47        className
48      )}
49      {...props}
50    />
51  )
52}
53
54function MessageScrollerContent({
55  className,
56  ...props
57}: ComponentProps<typeof MessageScrollerPrimitive.Content>) {
58  return (
59    <MessageScrollerPrimitive.Content
60      data-slot="message-scroller-content"
61      className={cn("flex h-max min-h-full flex-col gap-6", className)}
62      {...props}
63    />
64  )
65}
66
67function MessageScrollerItem({
68  className,
69  scrollAnchor = false,
70  ...props
71}: ComponentProps<typeof MessageScrollerPrimitive.Item>) {
72  return (
73    <MessageScrollerPrimitive.Item
74      data-slot="message-scroller-item"
75      scrollAnchor={scrollAnchor}
76      className={cn(
77        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
78        className
79      )}
80      {...props}
81    />
82  )
83}
84
85function MessageScrollerButton({
86  direction = "end",
87  className,
88  children,
89  render,
90  variant = "secondary",
91  size = "icon-sm",
92  ...props
93}: ComponentProps<typeof MessageScrollerPrimitive.Button> &
94// … truncated