From 84c1320c827604fea0e09968cf7206f3b1f9d46d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 18 Jun 2024 00:11:13 -0300
Subject: [PATCH] Added help buttons and icons to image menu

---
 .../src/components/headerComponent/index.tsx  | 56 ++++++++++++++-----
 src/frontend/src/utils/styleUtils.ts          |  8 ++-
 2 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 5e54de42c..435215bca 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -18,7 +18,7 @@ import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useLocationStore } from "../../stores/locationStore";
 import { useStoreStore } from "../../stores/storeStore";
-import IconComponent from "../genericIconComponent";
+import IconComponent, { ForwardedIconComponent } from "../genericIconComponent";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,
@@ -214,7 +214,7 @@ export default function Header(): JSX.Element {
                   />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent>
+              <DropdownMenuContent className="mr-1 mt-1 min-w-40">
                 {!autoLogin && (
                   <>
                     <DropdownMenuLabel>
@@ -239,33 +239,61 @@ export default function Header(): JSX.Element {
                 )}
                 <DropdownMenuLabel>General</DropdownMenuLabel>
                 <DropdownMenuItem
-                  className="cursor-pointer"
+                  className="cursor-pointer gap-2"
                   onClick={() => navigate("/settings")}
                 >
+                  <ForwardedIconComponent name="Settings" className="w-4" />
                   Settings
                 </DropdownMenuItem>
                 {!autoLogin && (
                   <>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuLabel>My Account</DropdownMenuLabel>
                     {isAdmin && (
                       <DropdownMenuItem
-                        className="cursor-pointer"
+                        className="cursor-pointer gap-2"
                         onClick={() => navigate("/admin")}
                       >
+                        <ForwardedIconComponent name="Shield" className="w-4" />
                         Admin Page
                       </DropdownMenuItem>
                     )}
-                    <DropdownMenuItem
-                      className="cursor-pointer"
-                      onClick={() => {
-                        logout();
-                      }}
-                    >
-                      Sign Out
-                    </DropdownMenuItem>
                   </>
                 )}
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel>Help</DropdownMenuLabel>
+                <DropdownMenuItem
+                  className="cursor-pointer gap-2"
+                  onClick={() =>
+                    window.open("https://pre-release.langflow.org/", "_blank")
+                  }
+                >
+                  <ForwardedIconComponent name="FileText" className="w-4" />
+                  Docs
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="cursor-pointer gap-2"
+                  onClick={() =>
+                    window.open(
+                      "https://github.com/langflow-ai/langflow/discussions",
+                      "_blank",
+                    )
+                  }
+                >
+                  <ForwardedIconComponent
+                    name="MessagesSquare"
+                    className="w-4"
+                  />
+                  Discussions
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="cursor-pointer gap-2"
+                  onClick={() => {
+                    logout();
+                  }}
+                >
+                  <ForwardedIconComponent name="LogOut" className="w-4" />
+                  Log Out
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </>
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 096ae200e..8f9dfc855 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -81,6 +81,7 @@ import {
   Loader2,
   Lock,
   LogIn,
+  LogOut,
   LucideSend,
   Maximize2,
   Menu,
@@ -197,16 +198,16 @@ import { ShareIcon } from "../icons/Share";
 import { Share2Icon } from "../icons/Share2";
 import SvgSlackIcon from "../icons/Slack/SlackIcon";
 import { Streamlit } from "../icons/Streamlit";
+import { UpstashSvgIcon } from "../icons/Upstash";
 import { VectaraIcon } from "../icons/VectaraIcon";
 import { VertexAIIcon } from "../icons/VertexAI";
 import { WeaviateIcon } from "../icons/Weaviate";
 import SvgWikipedia from "../icons/Wikipedia/Wikipedia";
 import SvgWolfram from "../icons/Wolfram/Wolfram";
 import { HackerNewsIcon } from "../icons/hackerNews";
+import { MistralIcon } from "../icons/mistral";
 import { SupabaseIcon } from "../icons/supabase";
 import { iconsType } from "../types/components";
-import { MistralIcon } from "../icons/mistral";
-import { UpstashSvgIcon } from "../icons/Upstash";
 
 export const gradients = [
   "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
@@ -511,6 +512,7 @@ export const nodeIconsLucide: iconsType = {
   Ungroup,
   BookMarked,
   Minus,
+  LogOut,
   Square,
   Minimize2,
   Maximize2,
@@ -555,7 +557,7 @@ export const nodeIconsLucide: iconsType = {
   PaperclipIcon,
   Settings,
   Streamlit,
-  MistralAI:MistralIcon,
+  MistralAI: MistralIcon,
   Upstash: UpstashSvgIcon,
   PGVector: CpuIcon,
 };