MessageScroller

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