58 lines
2.7 KiB
TypeScript
58 lines
2.7 KiB
TypeScript
import * as React from "react"
|
|
import {
|
|
MessageScroller as MessageScrollerPrimitive,
|
|
useMessageScroller,
|
|
useMessageScrollerScrollable,
|
|
useMessageScrollerVisibility,
|
|
} from "@shadcn/react/message-scroller"
|
|
import { ArrowDown } from "lucide-react"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>) {
|
|
return <MessageScrollerPrimitive.Provider {...props} />
|
|
}
|
|
|
|
function MessageScroller({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
|
|
return <MessageScrollerPrimitive.Root data-slot="message-scroller" className={cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className)} {...props} />
|
|
}
|
|
|
|
function MessageScrollerViewport({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
|
|
return <MessageScrollerPrimitive.Viewport data-slot="message-scroller-viewport" className={cn("size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain", className)} {...props} />
|
|
}
|
|
|
|
function MessageScrollerContent({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
|
|
return <MessageScrollerPrimitive.Content data-slot="message-scroller-content" className={cn("flex h-max min-h-full flex-col gap-4", className)} {...props} />
|
|
}
|
|
|
|
function MessageScrollerItem({ className, scrollAnchor = false, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
|
|
return <MessageScrollerPrimitive.Item data-slot="message-scroller-item" scrollAnchor={scrollAnchor} className={cn("min-w-0 shrink-0", className)} {...props} />
|
|
}
|
|
|
|
function MessageScrollerButton({ direction = "end", className, children, render, variant = "secondary", size = "icon-sm", ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Button> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
|
return (
|
|
<MessageScrollerPrimitive.Button
|
|
data-slot="message-scroller-button"
|
|
direction={direction}
|
|
className={cn("absolute inset-x-1/2 bottom-3 -translate-x-1/2 transition-opacity data-[active=false]:pointer-events-none data-[active=false]:opacity-0", className)}
|
|
render={render ?? <Button variant={variant} size={size} />}
|
|
{...props}
|
|
>
|
|
{children ?? <><ArrowDown /><span className="sr-only">滚动到最新消息</span></>}
|
|
</MessageScrollerPrimitive.Button>
|
|
)
|
|
}
|
|
|
|
export {
|
|
MessageScrollerProvider,
|
|
MessageScroller,
|
|
MessageScrollerViewport,
|
|
MessageScrollerContent,
|
|
MessageScrollerItem,
|
|
MessageScrollerButton,
|
|
useMessageScroller,
|
|
useMessageScrollerScrollable,
|
|
useMessageScrollerVisibility,
|
|
}
|