conversation

1"use client"
2 
3import type { ComponentProps } from "react"
4import { useCallback } from "react"
5import { ArrowDownIcon } from "lucide-react"
6import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom"
7 
8import { cn } from "@/lib/utils"
9import { Button } from "@/components/ui/button"
10 
11export type ConversationProps = ComponentProps<typeof StickToBottom>
12 
13export const Conversation = ({ className, ...props }: ConversationProps) => (
14  <StickToBottom
15    className={cn("relative flex-1 overflow-y-auto", className)}
16    initial="smooth"
17    resize="smooth"
18    role="log"
19    {...props}
20  />
21)
22 
23export type ConversationContentProps = ComponentProps<
24  typeof StickToBottom.Content
25>
26 
27export const ConversationContent = ({
28  className,
29  ...props
30}: ConversationContentProps) => (
31  <StickToBottom.Content className={cn("p-4", className)} {...props} />
32)
33 
34export type ConversationEmptyStateProps = Omit<
35  ComponentProps<"div">,
36  "title"
37> & {
38  title?: React.ReactNode
39  description?: React.ReactNode
40  icon?: React.ReactNode
41}
42 
43export const ConversationEmptyState = ({
44  className,
45  title = "No messages yet",
46  description = "Start a conversation to see messages here",
47  icon,
48  children,
49  ...props
50}: ConversationEmptyStateProps) => (
51  <div
52    className={cn(
53      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
54      className
55    )}
56    {...props}
57  >
58    {children ?? (
59      <>
60        {icon && <div className="text-muted-foreground">{icon}</div>}
61        <div className="space-y-1">
62          <h3 className="text-sm font-medium">{title}</h3>
63          {description && (
64            <p className="text-muted-foreground text-sm">{description}</p>
65          )}
66        </div>
67      </>
68    )}
69  </div>
70)
71 
72export type ConversationScrollButtonProps = ComponentProps<typeof Button>
73 
74export const ConversationScrollButton = ({
75  className,
76  ...props
77}: ConversationScrollButtonProps) => {
78  const { isAtBottom, scrollToBottom } = useStickToBottomContext()
79 
80  const handleScrollToBottom = useCallback(() => {
81    scrollToBottom()
82  }, [scrollToBottom])
83 
84  return (
85    !isAtBottom && (
86      <Button
87        className={cn(
88          "bg-background dark:bg-background absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full shadow-md",
89          className
90        )}
91        onClick={handleScrollToBottom}
92        size="icon"
93        type="button"
94        variant="outline"
95        {...props}
96      >
97        <ArrowDownIcon className="size-4" />
98// … truncated