File size: 3,814 Bytes
f0743f4 | 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, useId, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import * as Ariakit from '@ariakit/react';
import { Upload, Share2 } from 'lucide-react';
import { DropdownPopup, TooltipAnchor, useMediaQuery } from '@librechat/client';
import type * as t from '~/common';
import ExportModal from '~/components/Nav/ExportConversation/ExportModal';
import { ShareButton } from '~/components/Conversations/ConvoOptions';
import { useLocalize } from '~/hooks';
import store from '~/store';
export default function ExportAndShareMenu({
isSharedButtonEnabled,
}: {
isSharedButtonEnabled: boolean;
}) {
const localize = useLocalize();
const [showExports, setShowExports] = useState(false);
const [isPopoverActive, setIsPopoverActive] = useState(false);
const [showShareDialog, setShowShareDialog] = useState(false);
const menuId = useId();
const shareButtonRef = useRef<HTMLButtonElement>(null);
const exportButtonRef = useRef<HTMLButtonElement>(null);
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const conversation = useRecoilValue(store.conversationByIndex(0));
const exportable =
conversation &&
conversation.conversationId != null &&
conversation.conversationId !== 'new' &&
conversation.conversationId !== 'search';
if (exportable === false) {
return null;
}
const shareHandler = () => {
setShowShareDialog(true);
};
const exportHandler = () => {
setShowExports(true);
};
const dropdownItems: t.MenuItemProps[] = [
{
label: localize('com_ui_share'),
onClick: shareHandler,
icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
show: isSharedButtonEnabled,
/** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
hideOnClick: false,
ref: shareButtonRef,
render: (props) => <button {...props} />,
},
{
label: localize('com_endpoint_export'),
onClick: exportHandler,
icon: <Upload className="icon-md mr-2 text-text-secondary" />,
/** NOTE: THE FOLLOWING PROPS ARE REQUIRED FOR MENU ITEMS THAT OPEN DIALOGS */
hideOnClick: false,
ref: exportButtonRef,
render: (props) => <button {...props} />,
},
];
return (
<>
<DropdownPopup
portal={true}
menuId={menuId}
focusLoop={true}
unmountOnHide={true}
isOpen={isPopoverActive}
setIsOpen={setIsPopoverActive}
trigger={
<TooltipAnchor
description={localize('com_endpoint_export_share')}
render={
<Ariakit.MenuButton
id="export-menu-button"
aria-label="Export options"
className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<Share2
className="icon-md text-text-secondary"
aria-hidden="true"
focusable="false"
/>
</Ariakit.MenuButton>
}
/>
}
items={dropdownItems}
className={isSmallScreen ? '' : 'absolute right-0 top-0 mt-2'}
/>
<ExportModal
open={showExports}
onOpenChange={setShowExports}
conversation={conversation}
triggerRef={exportButtonRef}
aria-label={localize('com_ui_export_convo_modal')}
/>
<ShareButton
triggerRef={shareButtonRef}
conversationId={conversation.conversationId ?? ''}
open={showShareDialog}
onOpenChange={setShowShareDialog}
/>
</>
);
}
|