Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-30 15:18:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

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

* fix: mobile view for export/share button
This commit is contained in:
Danny Avila 2024-05-31 08:46:09 -04:00 • committed by GitHub
parent b8e35002f4
commit 248dfb8b5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 20 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

27
client/src/components/Chat/ExportAndShareMenu.tsx
View file

@ -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}
>
<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 && (

6
client/src/components/Chat/Header.tsx
View file

@ -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 />