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

🖼️ style: Conversation Menu and Dialogs update (#3601)

Browse source 
* feat: new dropdown

* fix: maintain popover active when open

* fix: update DeleteButton and ShareButton component to use useState for managing dialog state

* BREAKING: style improvement of base Button component

* style: update export button

* a11y: ExportAndShareButton

* add border

* quick style fix

* fix: flick issue on convo

* fix: DropDown opens when renaming

* chore: update radix-ui/react-dropdown-menu to latest

* small fix

* style: bookmarks update

* reorder export modal

* feat: imporved dropdowns

* style: a lot of changes; header, bookmarks, export, nav, convo, convoOptions

* fix: small style issues

* fix: button

* fix: bookmarks header menu

* fix: dropdown close glitch

* feat: Improve accessibility and keyboard navigation in ModelSpec component

* fix: Nav related type issues

* style: ConvoOptions theming and focus ring

---------

Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Marco Beretta 2024-08-16 10:30:14 +02:00 • committed by GitHub
parent 7f50d2f7c0
commit 96581d56df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
62 changed files with 2627 additions and 1821 deletions
Download patch file Download diff file Expand all files Collapse all files

49
client/src/components/Nav/Nav.tsx
View file

@ -24,7 +24,13 @@ import NewChat from './NewChat';
import { cn } from '~/utils';
import store from '~/store';
const Nav = ({ navVisible, setNavVisible }) => {
const Nav = ({
navVisible,
setNavVisible,
}: {
navVisible: boolean;
setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
const localize = useLocalize();
const { conversationId } = useParams();
const { isAuthenticated } = useAuthContext();
@ -80,7 +86,9 @@ const Nav = ({ navVisible, setNavVisible }) => {
setShowLoading,
hasNextPage: searchQuery ? searchQueryRes?.hasNextPage : hasNextPage,
fetchNextPage: searchQuery ? searchQueryRes?.fetchNextPage : fetchNextPage,
isFetchingNextPage: searchQuery ? searchQueryRes?.isFetchingNextPage : isFetchingNextPage,
isFetchingNextPage: searchQuery
? searchQueryRes?.isFetchingNextPage ?? false
: isFetchingNextPage,
});
const conversations = useMemo(
@ -155,24 +163,37 @@ const Nav = ({ navVisible, setNavVisible }) => {
onMouseLeave={handleMouseLeave}
ref={containerRef}
>
<NewChat
toggleNav={itemToggleNav}
subHeaders={
<>
{isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
<BookmarkNav tags={tags} setTags={setTags} />
</>
}
/>
{isSmallScreen == true ? (
<div className="pt-3.5">
{isSearchEnabled === true && (
<SearchBar clearSearch={clearSearch} isSmallScreen={isSmallScreen} />
)}
<BookmarkNav tags={tags} setTags={setTags} />
</div>
) : (
<NewChat
toggleNav={itemToggleNav}
subHeaders={
<>
{isSearchEnabled === true && (
<SearchBar
clearSearch={clearSearch}
isSmallScreen={isSmallScreen}
/>
)}
<BookmarkNav tags={tags} setTags={setTags} />
</>
}
/>
)}
<Conversations
conversations={conversations}
moveToTop={moveToTop}
toggleNav={itemToggleNav}
/>
{(isFetchingNextPage || showLoading) && (
<Spinner
className={cn('m-1 mx-auto mb-4 h-4 w-4 text-black dark:text-white')}
/>
<Spinner className={cn('m-1 mx-auto mb-4 h-4 w-4 text-text-primary')} />
)}
</div>
<NavLinks />