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

feat: open sidebar popup for new users (#1308)

Browse source
This commit is contained in:
Marco Beretta 2023-12-08 04:40:23 +01:00 • committed by GitHub
parent 10ace5fa75
commit 20b93ad065
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 40 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,13 @@ import {
} from 'librechat-data-provider';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useAuthContext, useMediaQuery, useConversation, useConversations } from '~/hooks';
import {
useAuthContext,
useMediaQuery,
useConversation,
useConversations,
useLocalStorage,
} from '~/hooks';
import { TooltipProvider, Tooltip } from '~/components/ui';
import { Conversations, Pages } from '../Conversations';
import { Spinner } from '~/components';
@ -25,6 +31,7 @@ export default function Nav({ navVisible, setNavVisible }) {
const containerRef = useRef<HTMLDivElement | null>(null);
const scrollPositionRef = useRef<number | null>(null);
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const [newUser, setNewUser] = useLocalStorage('newUser', true);
useEffect(() => {
if (isSmallScreen) {
@ -142,6 +149,9 @@ export default function Nav({ navVisible, setNavVisible }) {
const toggleNavVisible = () => {
setNavVisible((prev: boolean) => !prev);
if (newUser) {
setNewUser(false);
}
};
const itemToggleNav = () => {

8
client/src/components/Nav/NavToggle.tsx
View file

@ -1,5 +1,5 @@
import { TooltipTrigger, TooltipContent } from '~/components/ui';
import { useLocalize } from '~/hooks';
import { useLocalize, useLocalStorage } from '~/hooks';
import { cn } from '~/utils';
export default function NavToggle({ onToggle, navVisible, isHovering, setIsHovering }) {
@ -7,6 +7,8 @@ export default function NavToggle({ onToggle, navVisible, isHovering, setIsHover
const transition = {
transition: 'transform 0.3s ease, opacity 0.2s ease',
};
const [newUser, setNewUser] = useLocalStorage('newUser', true);
return (
<div
className={cn(
@ -44,8 +46,8 @@ export default function NavToggle({ onToggle, navVisible, isHovering, setIsHover
/>
</div>
</div>
<TooltipContent side="right" sideOffset={4}>
{navVisible ? localize('com_nav_close_menu') : localize('com_nav_open_menu')}
<TooltipContent forceMount={newUser ? true : undefined} side="right" sideOffset={4}>
{navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')}
</TooltipContent>
</span>
</button>