fix: Minor UI Changes (#643)

* Minor UI Fixes

* Link Icon, from index.ts

* Import from components instead of svg

* Fix Sidebar and Icons

Author: techwithanirudh

client/src/components/Input/index.jsx

@@ -135,7 +135,7 @@ export default function TextChat({ isSearchView = false }) {
 
   return (
     <>
-      <div className="fixed bottom-0 left-0 w-full md:absolute">
+      <div className="fixed bottom-0 left-0 w-full md:absolute border-transparent bg-gradient-to-b from-transparent via-white to-white pt-6 dark:border-white/20 dark:via-gray-800 dark:to-gray-800">
         <div className="relative py-2 md:mb-[-16px] md:py-4 lg:mb-[-32px]">
           <span className="flex w-full flex-col items-center justify-center gap-0 md:order-none md:m-auto md:gap-2">
             <OpenAIOptions />

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">

client/src/components/svg/DotsIcon.jsx renamed to client/src/components/svg/DotsIcon.tsx

@@ -0,0 +1,20 @@
+export default function LinkIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+      <polyline points="15 3 21 3 21 9"></polyline>
+      <line x1="10" y1="14" x2="21" y2="3"></line>
+    </svg>
+  );
+}

client/src/components/svg/LinkIcon.tsx

@@ -11,3 +11,7 @@ export { default as OpenIDIcon } from './OpenIDIcon';
 export { default as GithubIcon } from './GithubIcon';
 export { default as DiscordIcon } from './DiscordIcon';
 export { default as AnthropicIcon } from './AnthropicIcon';
+export { default as LinkIcon } from './LinkIcon';
+export { default as DotsIcon } from './DotsIcon';
+export { default as GearIcon } from './GearIcon';
+export { default as TrashIcon } from './TrashIcon';