solana-multiagent/components/ui/chat-message-area.jsx

57 lines
1.5 KiB
React
Raw Normal View History

2025-02-17 15:21:20 +07:00
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import { useScrollToBottom } from "@/hooks/use-scroll-to-bottom";
import { ChevronDown } from "lucide-react";
export function ScrollButton({
onClick,
alignment = "right",
className
}) {
const alignmentClasses = {
left: "left-4",
center: "left-1/2 -translate-x-1/2",
right: "right-4",
};
return (
(<Button
variant="secondary"
size="icon"
className={cn(
"absolute bottom-4 rounded-full shadow-lg hover:bg-secondary",
alignmentClasses[alignment],
className
)}
onClick={onClick}>
<ChevronDown className="h-4 w-4" />
</Button>)
);
}
export function ChatMessageArea({
children,
className,
scrollButtonAlignment = "right"
}) {
const [containerRef, showScrollButton, scrollToBottom] =
useScrollToBottom();
return (
(<ScrollArea className="flex-1 relative">
<div ref={containerRef}>
<div className={cn(className, "min-h-0")}>{children}</div>
</div>
{showScrollButton && (
<ScrollButton
onClick={scrollToBottom}
alignment={scrollButtonAlignment}
className="absolute bottom-4 rounded-full shadow-lg hover:bg-secondary" />
)}
</ScrollArea>)
);
}
ChatMessageArea.displayName = "ChatMessageArea";