mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-23 20:00:15 +01:00
Fixes all Nav Menu related errors and bugs (#331)
* chore(client): update lucide-react package to version 0.220.0 style(client): change color of MessageHeader component text to gray-500 style(client): change color of nav-close-button to gray-400 and nav-open-button to gray-500 feat(client): add Panel component to replace svg icons in Nav component * fix: forwardRef errors in Nav Menu * refactor(SearchBar.jsx): change clearSearch prop destructuring to props destructuring refactor(SearchBar.jsx): add ref prop to SearchBar component refactor(getIcon.jsx): remove unused imports refactor(getIcon.jsx): add nullish coalescing operator to user.name and user.avatar properties * fix (NavLinks): modals no longer close on nav menu close * style(ExportModel.jsx): remove unnecessary z-index property from a div element * style(ExportModel.jsx): remove trailing whitespace in input element * refactor(Message.jsx): remove unused cancelled variable fix(Message.jsx): fix error message length exceeding 512 characters refactor(MenuItem.jsx): remove unused MenuItem component
This commit is contained in:
Danny Avila
GitHub
parent
ee2b3e4fb2
commit
ec561fcd7f
16 changed files with 230 additions and 165 deletions
|
|
@ -1,70 +1,111 @@
|
|||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import { Fragment, useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import SearchBar from './SearchBar';
|
||||
import TrashIcon from '../svg/TrashIcon';
|
||||
import { Download } from 'lucide-react';
|
||||
import NavLink from './NavLink';
|
||||
import ExportModel from './ExportConversation/ExportModel';
|
||||
import ClearConvos from './ClearConvos';
|
||||
import DarkMode from './DarkMode';
|
||||
import Logout from './Logout';
|
||||
import ExportConversation from './ExportConversation';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import { cn } from '~/utils/';
|
||||
import DotsIcon from '../svg/DotsIcon';
|
||||
|
||||
import store from '~/store';
|
||||
|
||||
export default function NavLinks({ clearSearch, isSearchEnabled }) {
|
||||
const { user, logout } = useAuthContext();
|
||||
const [showExports, setShowExports] = useState(false);
|
||||
const [showClearConvos, setShowClearConvos] = useState(false);
|
||||
const { user } = useAuthContext();
|
||||
|
||||
const conversation = useRecoilValue(store.conversation) || {};
|
||||
|
||||
const exportable =
|
||||
conversation?.conversationId &&
|
||||
conversation?.conversationId !== 'new' &&
|
||||
conversation?.conversationId !== 'search';
|
||||
|
||||
const clickHandler = () => {
|
||||
if (exportable) setShowExports(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu as="div" className="group relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
className={cn(
|
||||
'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
|
||||
open ? 'bg-gray-800' : ''
|
||||
)}
|
||||
>
|
||||
<div className="-ml-0.5 h-5 w-5 flex-shrink-0">
|
||||
<div className="relative flex">
|
||||
<img
|
||||
className="rounded-sm"
|
||||
src={
|
||||
user?.avatar || `https://avatars.dicebear.com/api/initials/${user?.name}.svg`
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
<>
|
||||
<Menu as="div" className="group relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Menu.Button
|
||||
className={cn(
|
||||
'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
|
||||
open ? 'bg-gray-800' : ''
|
||||
)}
|
||||
>
|
||||
<div className="-ml-0.5 h-5 w-5 flex-shrink-0">
|
||||
<div className="relative flex">
|
||||
<img
|
||||
className="rounded-sm"
|
||||
src={
|
||||
user?.avatar || `https://avatars.dicebear.com/api/initials/${user?.name}.svg`
|
||||
}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
|
||||
{user?.name || 'USER'}
|
||||
</div>
|
||||
<DotsIcon />
|
||||
</Menu.Button>
|
||||
<div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
|
||||
{user?.name || 'USER'}
|
||||
</div>
|
||||
<DotsIcon />
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
|
||||
<Menu.Item>
|
||||
{({}) => <>{!!isSearchEnabled && <SearchBar clearSearch={clearSearch} />}</>}
|
||||
</Menu.Item>
|
||||
<Menu.Item>{({}) => <ExportConversation />}</Menu.Item>
|
||||
|
||||
<div className="my-1.5 h-px bg-white/20" role="none"></div>
|
||||
<Menu.Item>{({}) => <DarkMode />}</Menu.Item>
|
||||
<Menu.Item>{({}) => <ClearConvos />}</Menu.Item>
|
||||
|
||||
<div className="my-1.5 h-px bg-white/20" role="none"></div>
|
||||
<Menu.Item>
|
||||
<Logout />
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
|
||||
<Menu.Item>
|
||||
{!!isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<NavLink
|
||||
className={cn(
|
||||
'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
|
||||
exportable ? 'cursor-pointer text-white' : 'cursor-not-allowed text-gray-400'
|
||||
)}
|
||||
svg={() => <Download size={16} />}
|
||||
text="Export conversation"
|
||||
clickHandler={clickHandler}
|
||||
/>
|
||||
</Menu.Item>
|
||||
<div className="my-1.5 h-px bg-white/20" role="none" />
|
||||
<Menu.Item>
|
||||
<DarkMode />
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<NavLink
|
||||
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
|
||||
svg={() => <TrashIcon />}
|
||||
text="Clear conversations"
|
||||
clickHandler={() => setShowClearConvos(true)}
|
||||
/>
|
||||
</Menu.Item>
|
||||
<div className="my-1.5 h-px bg-white/20" role="none" />
|
||||
<Menu.Item>
|
||||
<Logout />
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Menu>
|
||||
{showExports && <ExportModel open={showExports} onOpenChange={setShowExports} />}
|
||||
{showClearConvos && <ClearConvos open={showClearConvos} onOpenChange={setShowClearConvos} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue