fix: Minor UI Changes (#643)

* Minor UI Fixes

* Link Icon, from index.ts

* Import from components instead of svg

* Fix Sidebar and Icons

client/src/components/Nav/NavLinks.jsx

@@ -2,8 +2,6 @@ import { Menu, Transition } from '@headlessui/react';
 import { Fragment, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import SearchBar from './SearchBar';
-import TrashIcon from '../svg/TrashIcon';
-import GearIcon from '../svg/GearIcon';
 import Settings from './Settings';
 import { Download } from 'lucide-react';
 import NavLink from './NavLink';
@@ -12,9 +10,9 @@ import ClearConvos from './ClearConvos';
 import Logout from './Logout';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { cn } from '~/utils/';
-import DotsIcon from '../svg/DotsIcon';
 
 import store from '~/store';
+import { LinkIcon, DotsIcon, GearIcon, TrashIcon } from '~/components';
 
 export default function NavLinks({ clearSearch, isSearchEnabled }) {
   const [showExports, setShowExports] = useState(false);
@@ -96,6 +94,14 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                     clickHandler={() => setShowClearConvos(true)}
                   />
                 </Menu.Item>
+                <Menu.Item as="div">
+                  <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 rounded-none"
+                    svg={() => <LinkIcon />}
+                    text="Help & FAQ"
+                    clickHandler={() => window.open('https://docs.librechat.ai/', '_blank')}
+                  />
+                </Menu.Item>
                 <Menu.Item as="div">
                   <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 rounded-none"

client/src/components/Nav/NewChat.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import store from '~/store';
+import { useRecoilValue } from 'recoil';
+import { localize } from '~/localization/Translation';
 
 export default function NewChat() {
   const { newConversation } = store.useConversation();
+  const lang = useRecoilValue(store.lang);
 
   const clickHandler = () => {
     // dispatch(setInputValue(''));
@@ -30,7 +33,7 @@ export default function NewChat() {
         <line x1="12" y1="5" x2="12" y2="19" />
         <line x1="5" y1="12" x2="19" y2="12" />
       </svg>
-      New chat
+      {localize(lang, 'com_ui_new_chat')}
     </a>
   );
 }

client/src/components/Nav/index.jsx

@@ -179,7 +179,7 @@ export default function Nav({ navVisible, setNavVisible }) {
         <div className="flex h-full min-h-0 flex-col ">
           <div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
             <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
-              <div className='flex flex-row h-11'>
+              <div className='flex flex-row h-11 mb-2'>
                 <NewChat />
                 <button
                   type='button'
@@ -223,7 +223,7 @@ export default function Nav({ navVisible, setNavVisible }) {
       {!navVisible && (
         <button
           type="button"
-          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 inline-flex h-11 w-11 items-center justify-center rounded-md border border-black/10 dark:border-white/20 bg-white dark:bg-gray-800 text-black hover:text-gray-500 dark:text-white dark:hover:text-gray-400"
+          className="nav-open-button mt-1 fixed left-2 top-0.5 z-10 flex p-3 items-center gap-3 transition-colors duration-200 cursor-pointer text-sm rounded-md border bg-white dark:bg-gray-800 border-black/10 dark:border-white/20 hover:bg-gray-50 dark:hover:bg-gray-700 h-11 w-11 text-gray-900"
           onClick={toggleNavVisible}
         >
           <div className="flex items-center justify-center">