File size: 3,062 Bytes
aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | import { useState } from 'react';
import {
Dialog,
Tooltip,
DialogTrigger,
TooltipContent,
TooltipTrigger,
TooltipProvider,
} from '~/components/ui';
import { Share2Icon } from 'lucide-react';
import type { TSharedLink } from 'librechat-data-provider';
import DialogTemplate from '~/components/ui/DialogTemplate';
import SharedLinkButton from './SharedLinkButton';
import ShareDialog from './ShareDialog';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function ShareButton({
conversationId,
title,
className,
appendLabel = false,
setPopoverActive,
}: {
conversationId: string;
title: string;
className?: string;
appendLabel?: boolean;
setPopoverActive: (isActive: boolean) => void;
}) {
const localize = useLocalize();
const [share, setShare] = useState<TSharedLink | null>(null);
const [open, setOpen] = useState(false);
const [isUpdated, setIsUpdated] = useState(false);
const classProp: { className?: string } = {
className: 'p-1 hover:text-black dark:hover:text-white',
};
if (className) {
classProp.className = className;
}
const renderShareButton = () => {
if (appendLabel) {
return (
<>
<Share2Icon className="h-4 w-4" /> {localize('com_ui_share')}
</>
);
}
return (
<TooltipProvider delayDuration={250}>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Share2Icon />
</span>
</TooltipTrigger>
<TooltipContent side="top" sideOffset={0}>
{localize('com_ui_share')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};
const buttons = share && (
<SharedLinkButton
share={share}
conversationId={conversationId}
setShare={setShare}
isUpdated={isUpdated}
setIsUpdated={setIsUpdated}
/>
);
const onOpenChange = (open: boolean) => {
setPopoverActive(open);
setOpen(open);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogTrigger asChild>
<button
className={cn(
'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
className,
)}
>
{renderShareButton()}
</button>
</DialogTrigger>
<DialogTemplate
buttons={buttons}
showCloseButton={true}
showCancelButton={false}
title={localize('com_ui_share_link_to_chat')}
className="max-w-[550px]"
main={
<>
<ShareDialog
setDialogOpen={setOpen}
conversationId={conversationId}
title={title}
share={share}
setShare={setShare}
isUpdated={isUpdated}
/>
</>
}
/>
</Dialog>
);
}
|