Message Scroller

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