Chat Container

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { StickToBottom } from "use-stick-to-bottom"
5 
6export type ChatContainerRootProps = {
7  children: React.ReactNode
8  className?: string
9} & React.HTMLAttributes<HTMLDivElement>
10 
11export type ChatContainerContentProps = {
12  children: React.ReactNode
13  className?: string
14} & React.HTMLAttributes<HTMLDivElement>
15 
16export type ChatContainerScrollAnchorProps = {
17  className?: string
18  ref?: React.RefObject<HTMLDivElement>
19} & React.HTMLAttributes<HTMLDivElement>
20 
21function ChatContainerRoot({
22  children,
23  className,
24  ...props
25}: ChatContainerRootProps) {
26  return (
27    <StickToBottom
28      className={cn("flex overflow-y-auto", className)}
29      resize="smooth"
30      initial="instant"
31      role="log"
32      {...props}
33    >
34      {children}
35    </StickToBottom>
36  )
37}
38 
39function ChatContainerContent({
40  children,
41  className,
42  ...props
43}: ChatContainerContentProps) {
44  return (
45    <StickToBottom.Content
46      className={cn("flex w-full flex-col", className)}
47      {...props}
48    >
49      {children}
50    </StickToBottom.Content>
51  )
52}
53 
54function ChatContainerScrollAnchor({
55  className,
56  ...props
57}: ChatContainerScrollAnchorProps) {
58  return (
59    <div
60      className={cn("h-px w-full shrink-0 scroll-mt-4", className)}
61      aria-hidden="true"
62      {...props}
63    />
64  )
65}
66 
67export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor }