message-scroller

1import { cn } from "~/lib/utils.ts";
2import IconArrowDown from "~icons/lucide/arrow-down";
3import type { Component, ComponentProps } from "solid-js";
4import { mergeProps, splitProps } from "solid-js";
5import type { ButtonProps } from "./button.tsx";
6import { Button } from "./button.tsx";
7 
8import {
9  MessageScroller as MessageScrollerPrimitive,
10  useMessageScroller,
11  useMessageScrollerScrollable,
12  useMessageScrollerVisibility,
13} from "./message-scroller-primitive.ts";
14 
15import type {
16  MessageScrollerButtonDirection,
17  MessageScrollerContentProps,
18  MessageScrollerItemProps,
19  MessageScrollerViewportProps,
20} from "./message-scroller-primitive.ts";
21 
22const MessageScrollerProvider = MessageScrollerPrimitive.Provider;
23 
24const MessageScroller: Component<ComponentProps<"div">> = (props) => {
25  const [local, others] = splitProps(props, ["class"]);
26  return (
27    <MessageScrollerPrimitive.Root
28      data-slot="message-scroller"
29      class={cn(
30        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
31        local.class,
32      )}
33      {...others}
34    />
35  );
36};
37 
38const MessageScrollerViewport: Component<MessageScrollerViewportProps> = (
39  props,
40) => {
41  const [local, others] = splitProps(props, ["class"]);
42  return (
43    <MessageScrollerPrimitive.Viewport
44      data-slot="message-scroller-viewport"
45      class={cn(
46        "data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent scroll-fade-b scrollbar-gutter-stable scrollbar-thin size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain contain-content",
47        local.class,
48      )}
49      {...others}
50    />
51  );
52};
53 
54const MessageScrollerContent: Component<MessageScrollerContentProps> = (
55  props,
56) => {
57  const [local, others] = splitProps(props, ["class"]);
58  return (
59    <MessageScrollerPrimitive.Content
60      data-slot="message-scroller-content"
61      class={cn(
62        "gap-6 flex h-max min-h-full flex-col",
63        local.class,
64      )}
65      {...others}
66    />
67  );
68};
69 
70const MessageScrollerItem: Component<MessageScrollerItemProps> = (rawProps) => {
71  const props = mergeProps({ scrollAnchor: false }, rawProps);
72  const [local, others] = splitProps(props, ["class", "scrollAnchor"]);
73  return (
74    <MessageScrollerPrimitive.Item
75      data-slot="message-scroller-item"
76      scrollAnchor={local.scrollAnchor}
77      class={cn(
78        "[contain-intrinsic-size:auto_10rem] [content-visibility:auto] min-w-0 shrink-0",
79        local.class,
80// … truncated