From 248dfb8b5b60b6dee8acbf385f316615d1c99e1c Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Fri, 31 May 2024 08:46:09 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Resolve=20Preset=20Button?= =?UTF-8?q?=20Disappearing=20in=20Mobile=20View=20(#2935)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: Update import paths for ExportAndShareMenu component and add localization * fix: mobile view for export/share button --- .../components/Chat/ExportAndShareMenu.tsx | 27 +++++++------------ client/src/components/Chat/Header.tsx | 6 ++++- .../components/Conversations/HoverToggle.tsx | 5 +++- client/src/localization/languages/Eng.ts | 1 + 4 files changed, 20 insertions(+), 19 deletions(-) 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',