diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx index f16dd44d25..4a343ccffe 100644 --- a/client/src/components/Chat/ExportAndShareMenu.tsx +++ b/client/src/components/Chat/ExportAndShareMenu.tsx @@ -1,26 +1,18 @@ import { useState } from 'react'; import { Upload } from 'lucide-react'; import { useRecoilValue } from 'recoil'; -import { useLocation } from 'react-router-dom'; -import type { TConversation } from 'librechat-data-provider'; -import DropDownMenu from '../Conversations/DropDownMenu'; -import ShareButton from '../Conversations/ShareButton'; -import HoverToggle from '../Conversations/HoverToggle'; +import DropDownMenu from '~/components/Conversations/DropDownMenu'; +import ShareButton from '~/components/Conversations/ShareButton'; +import HoverToggle from '~/components/Conversations/HoverToggle'; +import useLocalize from '~/hooks/useLocalize'; import ExportButton from './ExportButton'; import store from '~/store'; -export default function ExportAndShareMenu() { - const location = useLocation(); +export default function ExportAndShareMenu({ className = '' }: { className?: string }) { + const localize = useLocalize(); - const activeConvo = useRecoilValue(store.conversationByIndex(0)); - const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation); + const conversation = useRecoilValue(store.conversationByIndex(0)); const [isPopoverActive, setIsPopoverActive] = useState(false); - let conversation: TConversation | null | undefined; - if (location.state?.from?.pathname.includes('/chat')) { - conversation = globalConvo; - } else { - conversation = activeConvo; - } const exportable = conversation && @@ -29,7 +21,7 @@ export default function ExportAndShareMenu() { conversation.conversationId !== 'search'; if (!exportable) { - return <>; + return null; } const isActiveConvo = exportable; @@ -39,10 +31,11 @@ export default function ExportAndShareMenu() { isActiveConvo={!!isActiveConvo} isPopoverActive={isPopoverActive} setIsPopoverActive={setIsPopoverActive} + className={className} > } - tooltip="Export/Share" + tooltip={localize('com_endpoint_export_share')} className="pointer-cursor relative z-50 flex h-[40px] min-w-4 flex-none flex-col items-center justify-center rounded-md border border-gray-100 bg-white px-3 text-left hover:bg-gray-50 focus:outline-none focus:ring-0 focus:ring-offset-0 radix-state-open:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700 sm:text-sm" > {conversation && conversation.conversationId && ( diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx index 29919e48a3..f3c0dab596 100644 --- a/client/src/components/Chat/Header.tsx +++ b/client/src/components/Chat/Header.tsx @@ -6,6 +6,7 @@ import type { ContextType } from '~/common'; import { EndpointsMenu, ModelSpecsMenu, PresetsMenu, HeaderNewChat } from './Menus'; import ExportAndShareMenu from './ExportAndShareMenu'; import HeaderOptions from './Input/HeaderOptions'; +import { useMediaQuery } from '~/hooks'; const defaultInterface = getConfigDefaults().interface; @@ -18,6 +19,8 @@ export default function Header() { [startupConfig], ); + const isSmallScreen = useMediaQuery('(max-width: 768px)'); + return (
@@ -27,8 +30,9 @@ export default function Header() { {modelSpecs?.length > 0 && } {} {interfaceConfig.presets && } + {isSmallScreen && }
- + {!isSmallScreen && }
{/* Empty div for spacing */}
diff --git a/client/src/components/Conversations/HoverToggle.tsx b/client/src/components/Conversations/HoverToggle.tsx index a63b4b5a41..aa04656c7c 100644 --- a/client/src/components/Conversations/HoverToggle.tsx +++ b/client/src/components/Conversations/HoverToggle.tsx @@ -7,23 +7,26 @@ const HoverToggle = ({ isActiveConvo, isPopoverActive, setIsPopoverActive, + className = 'absolute bottom-0 right-0 top-0', }: { children: React.ReactNode; isActiveConvo: boolean; isPopoverActive: boolean; setIsPopoverActive: (isActive: boolean) => void; + className?: string; }) => { const setPopoverActive = (value: boolean) => setIsPopoverActive(value); return (
{children} diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts index 4c22d681d1..c4e4f3fa5c 100644 --- a/client/src/localization/languages/Eng.ts +++ b/client/src/localization/languages/Eng.ts @@ -424,6 +424,7 @@ export default { com_endpoint_agent: 'Agent', com_endpoint_show_what_settings: 'Show {0} Settings', com_endpoint_export: 'Export', + com_endpoint_export_share: 'Export/Share', com_endpoint_assistant: 'Assistant', com_endpoint_use_active_assistant: 'Use Active Assistant', com_endpoint_assistant_model: 'Assistant Model',