Chat Message Area

1import { ChevronDown } from "lucide-react";
2import { type ComponentProps, useCallback } from "react";
3import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
4import { Button } from "@/components/ui/button";
5import { cn } from "@/lib/utils";
6 
7interface ChatMessageAreaScrollButtonProps {
8	alignment?: "left" | "center" | "right";
9	className?: string;
10}
11 
12export function ChatMessageAreaScrollButton({
13	alignment = "center",
14	className,
15}: ChatMessageAreaScrollButtonProps) {
16	const { isAtBottom, scrollToBottom } = useStickToBottomContext();
17 
18	const handleScrollToBottom = useCallback(() => {
19		scrollToBottom();
20	}, [scrollToBottom]);
21 
22	if (isAtBottom) {
23		return null;
24	}
25 
26	const alignmentClasses = {
27		left: "left-4",
28		center: "left-1/2 -translate-x-1/2",
29		right: "right-4",
30	};
31 
32	return (
33		<Button
34			variant="secondary"
35			size="icon"
36			className={cn(
37				"absolute bottom-4 rounded-full shadow-lg hover:bg-secondary",
38				alignmentClasses[alignment],
39				className,
40			)}
41			onClick={handleScrollToBottom}
42		>
43			<ChevronDown className="h-4 w-4" />
44		</Button>
45	);
46}
47 
48type ChatMessageAreaProps = ComponentProps<typeof StickToBottom>;
49 
50export function ChatMessageArea({ className, ...props }: ChatMessageAreaProps) {
51	return (
52		<StickToBottom
53			className={cn("flex-1 relative h-full overflow-y-auto", className)}
54			resize="smooth"
55			initial="smooth"
56			{...props}
57		/>
58	);
59}
60 
61type ChatMessageAreaContentProps = ComponentProps<typeof StickToBottom.Content>;
62 
63export function ChatMessageAreaContent({
64	className,
65	...props
66}: ChatMessageAreaContentProps) {
67	return (
68		<StickToBottom.Content
69			className={cn("max-w-2xl mx-auto w-full h-full py-2", className)}
70			{...props}
71		/>
72	);
73}