message-scroller

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