🐛 fix: Resolve Preset Button Disappearing in Mobile View (#2935)

* refactor: Update import paths for ExportAndShareMenu component and add localization

* fix: mobile view for export/share button

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 DropDownMenu from '~/components/Conversations/DropDownMenu';
-import type { TConversation } from 'librechat-data-provider';
+import ShareButton from '~/components/Conversations/ShareButton';
-import DropDownMenu from '../Conversations/DropDownMenu';
+import HoverToggle from '~/components/Conversations/HoverToggle';
-import ShareButton from '../Conversations/ShareButton';
+import useLocalize from '~/hooks/useLocalize';
-import HoverToggle from '../Conversations/HoverToggle';
 import ExportButton from './ExportButton';
 import store from '~/store';
 
-export default function ExportAndShareMenu() {
+export default function ExportAndShareMenu({ className = '' }: { className?: string }) {
-  const location = useLocation();
+  const localize = useLocalize();
 
-  const activeConvo = useRecoilValue(store.conversationByIndex(0));
+  const conversation = useRecoilValue(store.conversationByIndex(0));
-  const globalConvo = useRecoilValue(store.conversation) ?? ({} as TConversation);
   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}
     >
       <DropDownMenu
         icon={<Upload />}
-        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 && (

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 (
     <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold dark:bg-gray-800 dark:text-white">
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
@@ -27,8 +30,9 @@ export default function Header() {
           {modelSpecs?.length > 0 && <ModelSpecsMenu modelSpecs={modelSpecs} />}
           {<HeaderOptions interfaceConfig={interfaceConfig} />}
           {interfaceConfig.presets && <PresetsMenu />}
+          {isSmallScreen && <ExportAndShareMenu className="pl-0" />}
         </div>
-        <ExportAndShareMenu />
+        {!isSmallScreen && <ExportAndShareMenu />}
       </div>
       {/* Empty div for spacing */}
       <div />

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 (
     <ToggleContext.Provider value={{ isPopoverActive, setPopoverActive }}>
       <div
         className={cn(
-          'peer absolute bottom-0 right-0 top-0 items-center gap-1.5 rounded-r-lg from-gray-500 from-gray-900 pl-2 pr-2 dark:text-white',
+          'peer items-center gap-1.5 rounded-r-lg from-gray-500 from-gray-900 pl-2 pr-2 dark:text-white',
           isPopoverActive || isActiveConvo ? 'flex' : 'hidden group-hover:flex',
           isActiveConvo
             ? 'from-gray-50 from-85% to-transparent group-hover:bg-gradient-to-l group-hover:from-gray-200 dark:from-gray-800 dark:group-hover:from-gray-800'
             : 'z-50 from-gray-200 from-gray-50 from-0% to-transparent hover:bg-gradient-to-l hover:from-gray-200 dark:from-gray-750 dark:from-gray-800 dark:hover:from-gray-800',
           isPopoverActive && !isActiveConvo ? 'from-gray-50 dark:from-gray-800' : '',
+          className,
         )}
       >
         {children}

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',