🔗 feat: NavLinks customization for Help & Faq URL (#1872)

* help and faq

* fix: using only one var

* revert(types.ts): showHelpAndFaq

* Update dotenv.md

* Update dotenv.md

.env.example

@@ -331,6 +331,14 @@ FIREBASE_STORAGE_BUCKET=
 FIREBASE_MESSAGING_SENDER_ID=
 FIREBASE_APP_ID=
 
+#===================================================#
+#                        UI                         #
+#===================================================#
+
+HELP_AND_FAQ_URL=https://librechat.ai
+
+# SHOW_BIRTHDAY_ICON=true
+
 #==================================================#
 #                      Others                      #
 #==================================================#
@@ -341,7 +349,5 @@ FIREBASE_APP_ID=
 # REDIS_URI=
 # USE_REDIS=
 
-# SHOW_BIRTHDAY_ICON=true
-
 # E2E_USER_EMAIL=
 # E2E_USER_PASSWORD=

api/server/routes/config.js

@@ -43,6 +43,7 @@ router.get('/', async function (req, res) {
         isBirthday() ||
         isEnabled(process.env.SHOW_BIRTHDAY_ICON) ||
         process.env.SHOW_BIRTHDAY_ICON === '',
+      helpAndFaqURL: process.env.HELP_AND_FAQ_URL || 'https://librechat.ai',
     };
 
     if (typeof process.env.CUSTOM_FOOTER === 'string') {

client/src/components/Messages/ScrollToBottom.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 
 type Props = {
   scrollHandler: React.MouseEventHandler<HTMLButtonElement>;
@@ -8,7 +8,7 @@ export default function ScrollToBottom({ scrollHandler }: Props) {
   return (
     <button
       onClick={scrollHandler}
-      className="cursor-pointer absolute rounded-full border border-white bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10  bottom-5 right-1/2 dark:text-gray-200"
+      className="absolute bottom-5 right-1/2 cursor-pointer rounded-full border border-white bg-gray-50 text-gray-600  dark:border-white/10 dark:bg-white/10 dark:text-gray-200"
     >
       <svg
         width="24"

client/src/components/Nav/NavLinks.tsx

@@ -113,14 +113,16 @@ function NavLinks() {
                     clickHandler={() => setShowFiles(true)}
                   />
                 </Menu.Item>
-                <Menu.Item as="div">
-                  <NavLink
-                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
-                    svg={() => <LinkIcon />}
-                    text={localize('com_nav_help_faq')}
-                    clickHandler={() => window.open('https://librechat.ai', '_blank')}
-                  />
-                </Menu.Item>
+                {startupConfig?.helpAndFaqURL !== '/' && (
+                  <Menu.Item as="div">
+                    <NavLink
+                      className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+                      svg={() => <LinkIcon />}
+                      text={localize('com_nav_help_faq')}
+                      clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')}
+                    />
+                  </Menu.Item>
+                )}
                 <Menu.Item as="div">
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"

docs/install/configuration/dotenv.md

@@ -30,16 +30,6 @@ For more info see:
 
 ## Server Configuration
 
-### Customization
-- Here you can change the app title and footer
-- Uncomment to add a custom footer.
-    - Uncomment and make empty "" to remove the footer.
-
-```bash
-APP_TITLE=LibreChat
-CUSTOM_FOOTER="My custom footer"
-```
-
 ### Port
 
 - The server will listen to localhost:3080 by default. You can change the target IP as you want. If you want to make this server available externally, for example to share the server with others or expose this from a Docker container, set host to 0.0.0.0 or your external IP interface. 
@@ -851,16 +841,29 @@ Mail address for from field. It is **REQUIRED** to set a value here (even if it'
 ```bash
 EMAIL_FROM=noreply@librechat.ai 
 ```
+### UI
 
-### Other
+- **Help and FAQ button:** 
 
-- **Redis:** Redis support is experimental, you may encounter some problems when using it. 
+Empty or commented `HELP_AND_FAQ_URL`, button enabled
 
-> If using Redis, you should flush the cache after changing any LibreChat settings
+`HELP_AND_FAQ_URL=https://example.com`, button enabled and goes to `https://example.com`
+
+`HELP_AND_FAQ_URL=/`, button disabled
 
 ```bash
-REDIS_URI=
-USE_REDIS=
+HELP_AND_FAQ_URL=
+```
+
+- **App title and footer:**
+
+Uncomment to add a custom footer
+
+Uncomment and make empty "" to remove the footer
+
+```bash
+APP_TITLE=LibreChat
+CUSTOM_FOOTER="My custom footer"
 ```
 
 - **Birthday Hat:** Give the AI Icon a Birthday Hat 🥳
@@ -874,3 +877,14 @@ USE_REDIS=
 ```bash
 SHOW_BIRTHDAY_ICON=true
 ```
+
+### Other
+
+- **Redis:** Redis support is experimental, you may encounter some problems when using it. 
+
+> If using Redis, you should flush the cache after changing any LibreChat settings
+
+```bash
+REDIS_URI=
+USE_REDIS=
+```

packages/data-provider/src/types.ts

@@ -210,6 +210,7 @@ export type TStartupConfig = {
   emailEnabled: boolean;
   checkBalance: boolean;
   showBirthdayIcon: boolean;
+  helpAndFaqURL: string;
   customFooter?: string;
 };