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