Thread

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import { ArrowDown02Icon } from "@hugeicons/core-free-icons";
6import { HugeiconsIcon } from "@hugeicons/react";
7import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
8 
9import { cn } from "@/lib/utils";
10 
11type ThreadProps = React.ComponentProps<typeof StickToBottom>;
12 
13function Thread({
14  className,
15  resize = "smooth",
16  initial = "smooth",
17  ...props
18}: ThreadProps) {
19  return (
20    <StickToBottom
21      data-slot="thread"
22      className={cn("relative w-full h-full", className)}
23      resize={resize}
24      initial={initial}
25      {...props}
26    />
27  );
28}
29 
30type ThreadContentProps = React.ComponentProps<typeof StickToBottom.Content>;
31 
32function ThreadContent({ className, ...props }: ThreadContentProps) {
33  return (
34    <StickToBottom.Content
35      data-slot="thread-content"
36      className={cn(
37        "flex w-full flex-col gap-6 p-6",
38        className,
39      )}
40      {...props}
41    />
42  );
43}
44 
45type ThreadScrollToBottomProps = React.ComponentProps<"button"> & {
46  asChild?: boolean;
47};
48 
49function ThreadScrollToBottom({
50  asChild = false,
51  className,
52  children,
53  onClick,
54  ...props
55}: ThreadScrollToBottomProps) {
56  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
57 
58  if (isAtBottom) {
59    return null;
60  }
61 
62  const Comp = asChild ? Slot : "button";
63 
64  return (
65    <Comp
66      data-slot="thread-scroll-to-bottom"
67      type={asChild ? undefined : "button"}
68      className={cn(
69        !asChild &&
70          "absolute bottom-6 left-[50%] flex size-8 translate-x-[-50%] cursor-pointer items-center justify-center rounded-full border border-border bg-secondary text-muted-foreground shadow-sm transition-all hover:bg-border active:scale-95",
71        className,
72      )}
73      onClick={(event) => {
74        scrollToBottom();
75        onClick?.(event);
76      }}
77      {...props}
78    >
79      {children ?? (
80        <HugeiconsIcon
81          icon={ArrowDown02Icon}
82          strokeWidth={2.0}
83          className="size-4.5"
84        />
85      )}
86    </Comp>
87  );
88}
89 
90export { Thread, ThreadContent, ThreadScrollToBottom };