36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
interface ScrollToBottomButtonProps {
|
|
onClick: () => void;
|
|
/** Label shown next to the icon. Defaults to "回到底部". */
|
|
label?: string;
|
|
/** Tailwind classes appended to the default positioning. */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Pill-shaped floating button shown when the user has scrolled up away from
|
|
* the bottom of a streamed conversation. Click → smooth-scroll back to the
|
|
* bottom and resume auto-follow.
|
|
*
|
|
* Positioning is `absolute` — render inside a `relative` wrapper so it
|
|
* floats over the scroll container's lower-center without scrolling along
|
|
* with content.
|
|
*/
|
|
export const ScrollToBottomButton: React.FC<ScrollToBottomButtonProps> = ({
|
|
onClick,
|
|
label = "回到底部",
|
|
className = "",
|
|
}) => (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`absolute left-1/2 -translate-x-1/2 bottom-3 z-10 bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-[11px] font-bold px-3 py-1.5 rounded-full shadow-lg shadow-slate-900/10 flex items-center gap-1 transition active:scale-95 ${className}`}
|
|
aria-label={label}
|
|
>
|
|
<ChevronDown className="w-3.5 h-3.5" />
|
|
{label}
|
|
</button>
|
|
);
|