From c7d0444adfbaf770450080313b7fbda7aad00a74 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 14:15:59 -0300
Subject: [PATCH 1/9] Feat: Remove buttons from sideBar and create flow toolbar
 (run/share/api)

---
 src/frontend/src/App.css                      |   8 ++
 .../src/CustomNodes/GenericNode/index.tsx     |  14 +--
 .../src/components/chatComponent/index.tsx    | 106 +++++++++++++++++-
 .../components/menuBar/index.tsx              |  51 ++++++++-
 src/frontend/src/modals/exportModal/index.tsx |   6 +-
 .../extraSidebarComponent/index.tsx           |  62 +---------
 .../sideBarDraggableComponent/index.tsx       |   1 +
 src/frontend/src/style/applies.css            |   2 +-
 src/frontend/src/style/index.css              |   4 +
 src/frontend/src/utils/styleUtils.ts          |   2 +
 src/frontend/tailwind.config.js               |   2 +-
 11 files changed, 179 insertions(+), 79 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 095c63bd7..c2427fb0f 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -90,3 +90,11 @@ body {
 .jv-indent::-webkit-scrollbar-thumb:hover {
   background-color: #bbb !important;
 }
+
+.custom-hover {
+  transition: background-color 0.5s ease;
+}
+
+.custom-hover:hover {
+  background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
+}
\ No newline at end of file
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index ddfc04aef..a580684ac 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -509,10 +509,10 @@ export default function GenericNode({
                       ) : !validationStatus ? (
                         <span className="flex">{STATUS_BUILD}</span>
                       ) : (
-                        <div className="max-h-100">
+                        <div className="max-h-100 p-2">
                           <div>
                             {lastRunTime && (
-                              <div className="justify-left flex text-muted-foreground">
+                              <div className="justify-left flex text-muted-foreground font-normal">
                                 <div>{RUN_TIMESTAMP_PREFIX}</div>
                                 <div className="ml-1 text-status-blue">
                                   {lastRunTime}
@@ -520,19 +520,19 @@ export default function GenericNode({
                               </div>
                             )}
                           </div>
-                          <div className="justify-left flex text-muted-foreground">
+                          <div className="justify-left flex text-muted-foreground font-normal">
                             <div>Duration:</div>
-                            <div className="ml-1 text-status-blue">
+                            <div className="ml-1 text-status-blue mb-3">
                               {validationStatus?.data.duration}
                             </div>
                           </div>
                           <hr />
-                          <span className="flex justify-center   text-muted-foreground ">
+                          <span className="flex justify-center   text-muted-foreground mt-2 mb-2 font-semibold">
                             Output
                           </span>
-                          <div className="max-h-96 overflow-auto custom-scroll">
+                          <div className="max-h-96 overflow-auto custom-scroll font-normal">
                             {validationString.split("\n").map((line, index) => (
-                              <div key={index}>{line}</div>
+                              <div className="font-normal" key={index}>{line}</div>
                             ))}
                           </div>
                         </div>
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index da612340a..15e13fc15 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,14 +1,26 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useFlowStore from "../../stores/flowStore";
 import { ChatType } from "../../types/chat";
 import IOView from "../IOview";
 import ChatTrigger from "../ViewTriggers/chat";
+import { Transition } from "@headlessui/react";
+import ForwardedIconComponent from "../genericIconComponent";
+import { Separator } from "../ui/separator";
+import ShareModal from "../../modals/shareModal";
+import { useStoreStore } from "../../stores/storeStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { classNames } from "../../utils/utils";
+import ApiModal from "../../modals/ApiModal";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const flowState = useFlowStore((state) => state.flowState);
   const nodes = useFlowStore((state) => state.nodes);
   const hasIO = useFlowStore((state) => state.hasIO);
+  const hasStore = useStoreStore((state) => state.hasStore);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -29,16 +41,100 @@ export default function Chat({ flow }: ChatType): JSX.Element {
 
   const prevNodesRef = useRef<any[] | undefined>();
 
+  const ModalMemo = useMemo(
+    () => (
+      <ShareModal
+        is_component={false}
+        component={currentFlow!}
+        disabled={!hasApiKey || !validApiKey || !hasStore}
+      >
+        <button
+          disabled={!hasApiKey || !validApiKey || !hasStore}
+          className={classNames(
+            "relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold",
+            !hasApiKey || !validApiKey || !hasStore
+              ? "button-disable  cursor-default text-muted-foreground"
+              : ""
+          )}
+        >
+          <ForwardedIconComponent
+            name="Share3"
+            className={classNames(
+              "-m-0.5 -ml-1 h-6 w-6",
+              !hasApiKey || !validApiKey || !hasStore
+                ? "extra-side-bar-save-disable"
+                : ""
+            )}
+          />
+          Share
+        </button>
+      </ShareModal>
+    ),
+    [hasApiKey, validApiKey, currentFlow, hasStore]
+  );
+
   return (
     <>
-      <div className="flex flex-col">
-        {/* <BuildTrigger open={open} flow={flow} /> */}
-        {hasIO && (
+      <Transition
+      show={true}
+      appear={true}
+      enter="transition ease-out duration-300"
+      enterFrom="translate-y-96"
+      enterTo="translate-y-0"
+      leave="transition ease-in duration-300"
+      leaveFrom="translate-y-0"
+      leaveTo="translate-y-96"
+      >
+      <div
+        className={
+          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted  shadow-md transition-all cursor-pointer gap-7 border"
+        }
+      >
+        <div className="flex">
+          <div className="flex gap-1 text-medium-indigo  rounded-sm transition-all w-full h-full">
+          {hasIO && (
           <IOView open={open} setOpen={setOpen}>
-            <ChatTrigger />
+            <div className="relative inline-flex w-full items-center justify-center   hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold">
+              <ForwardedIconComponent
+                name="Zap"
+                className={"message-button-icon h-5 w-5 transition-all"}
+              />
+              Run
+            </div>
           </IOView>
         )}
+          </div>
+          {hasIO && (
+            <div>
+              <Separator orientation="vertical" />
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            {currentFlow && currentFlow.data && (
+              <ApiModal flow={currentFlow}>
+                  <div className={classNames("relative inline-flex w-full items-center justify-center hover:bg-hover px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-1 text-sm font-semibold")}>
+                    <ForwardedIconComponent
+                      name="Code2"
+                      className={" h-5 w-5"}
+                    />
+                    API
+                  </div>
+              </ApiModal>
+            )}
+          </div>
+          {hasStore && validApiKey && (
+            <div>
+              <Separator orientation="vertical" />
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            {hasStore && validApiKey && (
+              <div className="side-bar-button">{ModalMemo}</div>
+            )}
+          </div>
+        </div>
       </div>
+    </Transition>
     </>
   );
 }
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 9bff70924..bc5202c87 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,10 +14,13 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { cn } from "../../../../utils/utils";
+import { classNames, cn } from "../../../../utils/utils";
 import ShadTooltip from "../../../ShadTooltipComponent";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
+import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
+import ExportModal from "../../../../modals/exportModal";
+import { useStoreStore } from "../../../../stores/storeStore";
 
 export const MenuBar = ({
   removeFunction,
@@ -32,9 +35,27 @@ export const MenuBar = ({
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
   const n = useFlowStore((state) => state.nodes);
-
+  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
+  const [myOpen, mySetOpen] = useState<boolean>(false)
+
+  const ExportMemo = useMemo(
+    () => (
+      <ExportModal
+        myOpen={myOpen}
+        mySetOpen={mySetOpen}
+      >
+        <div className="flex items-center">
+          <IconComponent name="FileDown" className="header-menu-options" />
+          Export
+        </div>
+      </ExportModal>
+    ),
+    []
+  );
 
   function handleAddFlow() {
     try {
@@ -100,6 +121,30 @@ export const MenuBar = ({
               />
               Settings
             </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                uploadFlow({ newProject: false, isComponent: false }).catch(
+                  (error) => {
+                    setErrorData({
+                      title: UPLOAD_ERROR_ALERT,
+                      list: [error],
+                    });
+                  }
+                );
+              }}
+            >
+              <IconComponent name="FileUp" className="header-menu-options " />
+              Import
+            </DropdownMenuItem>
+            {(!hasApiKey || !validApiKey) && (
+              <ExportModal>
+                <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer">
+                  <IconComponent name="FileDown" className="header-menu-options" />
+                  Export
+                </div>
+              </ExportModal>
+        )}
 
             <DropdownMenuItem
               onClick={() => {
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 9fac4d0a8..e10dd6ff6 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -16,7 +16,7 @@ import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
-  (props: { children: ReactNode }, ref): JSX.Element => {
+  (props: { children: ReactNode, myOpen?: boolean, mySetOpen?: (open: boolean) => void }, ref): JSX.Element => {
     const version = useDarkStore((state) => state.version);
     const setNoticeData = useAlertStore((state) => state.setNoticeData);
     const [checked, setChecked] = useState(true);
@@ -29,6 +29,10 @@ const ExportModal = forwardRef(
     const [description, setDescription] = useState(currentFlow!.description);
     const [open, setOpen] = useState(false);
 
+    useEffect(() => {
+      console.log(open)
+    }, [open])
+
     return (
       <BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
         <BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 299507bbd..565192709 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -235,66 +235,6 @@ export default function ExtraSidebar(): JSX.Element {
 
   return (
     <div className="side-bar-arrangement">
-      <div className="side-bar-buttons-arrangement">
-        {hasStore && validApiKey && (
-          <ShadTooltip
-            content={
-              !hasApiKey || !validApiKey
-                ? "Please review your API key."
-                : "Share"
-            }
-            side="top"
-            styleClasses="cursor-default"
-          >
-            <div className="side-bar-button">{ModalMemo}</div>
-          </ShadTooltip>
-        )}
-        <div className="side-bar-button">
-          <ShadTooltip content="Import" side="top">
-            <button
-              className="extra-side-bar-buttons"
-              onClick={() => {
-                uploadFlow({ newProject: false, isComponent: false }).catch(
-                  (error) => {
-                    setErrorData({
-                      title: UPLOAD_ERROR_ALERT,
-                      list: [error],
-                    });
-                  }
-                );
-              }}
-            >
-              <IconComponent name="FileUp" className="side-bar-button-size " />
-            </button>
-          </ShadTooltip>
-        </div>
-        {(!hasApiKey || !validApiKey) && (
-          <ShadTooltip
-            content="Export"
-            side="top"
-            styleClasses="cursor-default"
-          >
-            <div className="side-bar-button">{ExportMemo}</div>
-          </ShadTooltip>
-        )}
-        <ShadTooltip content={"Code"} side="top">
-          <div className="side-bar-button">
-            {currentFlow && currentFlow.data && (
-              <ApiModal flow={currentFlow}>
-                <button className={"w-full "}>
-                  <div className={classNames("extra-side-bar-buttons")}>
-                    <IconComponent
-                      name="Code2"
-                      className={"side-bar-button-size"}
-                    />
-                  </div>
-                </button>
-              </ApiModal>
-            )}
-          </div>
-        </ShadTooltip>
-      </div>
-      <Separator />
       <div className="side-bar-search-div-placement">
         <Input
           onFocusCapture={() => handleBlur()}
@@ -318,7 +258,7 @@ export default function ExtraSidebar(): JSX.Element {
           />
         </div>
       </div>
-
+      <Separator />
       <div className="side-bar-components-div-arrangement">
         {Object.keys(dataFilter)
           .sort(sortKeys)
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index f33e97a1d..35f646d62 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -43,6 +43,7 @@ export const SidebarDraggableComponent = forwardRef(
     const deleteComponent = useFlowsManagerStore(
       (state) => state.deleteComponent
     );
+    console.log(display_name)
     const version = useDarkStore((state) => state.version);
     const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
     const popoverRef = useRef<HTMLDivElement>(null);
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index cca804fc7..348b58f9a 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -114,7 +114,7 @@
     @apply pointer-events-none;
   }
   .extra-side-bar-buttons {
-    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
+    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground transition-all duration-500 ease-in-out;
   }
   .extra-side-bar-buttons:hover {
     @apply hover:bg-muted;
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index fb4242661..0c58cb1df 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -50,6 +50,9 @@
 
     --component-icon: #d8598a;
     --flow-icon: #2f67d0;
+    --hover: #F2F4F5;
+
+    
 
     /* Colors that are shared in dark and light mode */
     --blur-shared: #151923de;
@@ -69,6 +72,7 @@
     --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
     --ice: #60A5FA;
+    --hover: #1A202E;
 
     --muted: 223 27% 11%; /* hsl(223 27% 11%) */
     --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index dc7115838..340d30ffd 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -32,6 +32,7 @@ import {
   Cpu,
   Database,
   Delete,
+  Dot,
   Download,
   DownloadCloud,
   Edit,
@@ -475,4 +476,5 @@ export const nodeIconsLucide: iconsType = {
   Bot,
   Delete,
   Command,
+  Dot,
 };
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 80a5416c3..540289fc8 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -88,7 +88,7 @@ module.exports = {
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",
         "ice": "var(--ice)",
-
+        hover: "var(--hover)",
         white: "var(--white)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",

From 2d3c341abeccd11112eb4c9dd55866245596a44c Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 14:21:33 -0300
Subject: [PATCH 2/9] Refactor: Remove dead code

---
 .../components/menuBar/index.tsx              | 20 ++-----------------
 src/frontend/src/modals/exportModal/index.tsx |  6 +-----
 .../sideBarDraggableComponent/index.tsx       |  2 +-
 3 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index bc5202c87..d4090cd19 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { classNames, cn } from "../../../../utils/utils";
+import { cn } from "../../../../utils/utils";
 import ShadTooltip from "../../../ShadTooltipComponent";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
@@ -40,22 +40,6 @@ export const MenuBar = ({
   const validApiKey = useStoreStore((state) => state.validApiKey);
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
-  const [myOpen, mySetOpen] = useState<boolean>(false)
-
-  const ExportMemo = useMemo(
-    () => (
-      <ExportModal
-        myOpen={myOpen}
-        mySetOpen={mySetOpen}
-      >
-        <div className="flex items-center">
-          <IconComponent name="FileDown" className="header-menu-options" />
-          Export
-        </div>
-      </ExportModal>
-    ),
-    []
-  );
 
   function handleAddFlow() {
     try {
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index e10dd6ff6..9fac4d0a8 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -16,7 +16,7 @@ import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
-  (props: { children: ReactNode, myOpen?: boolean, mySetOpen?: (open: boolean) => void }, ref): JSX.Element => {
+  (props: { children: ReactNode }, ref): JSX.Element => {
     const version = useDarkStore((state) => state.version);
     const setNoticeData = useAlertStore((state) => state.setNoticeData);
     const [checked, setChecked] = useState(true);
@@ -29,10 +29,6 @@ const ExportModal = forwardRef(
     const [description, setDescription] = useState(currentFlow!.description);
     const [open, setOpen] = useState(false);
 
-    useEffect(() => {
-      console.log(open)
-    }, [open])
-
     return (
       <BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
         <BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index 35f646d62..7d468b4ba 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -43,7 +43,7 @@ export const SidebarDraggableComponent = forwardRef(
     const deleteComponent = useFlowsManagerStore(
       (state) => state.deleteComponent
     );
-    console.log(display_name)
+
     const version = useDarkStore((state) => state.version);
     const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
     const popoverRef = useRef<HTMLDivElement>(null);

From 535f559bed756c20d4ff9410bbaa9b0e94a9aff7 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 14:27:31 -0300
Subject: [PATCH 3/9] Refactor: remove console.log

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx             | 1 -
 .../components/headerComponent/components/menuBar/index.tsx    | 2 +-
 src/frontend/src/style/applies.css                             | 3 +++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index a580684ac..a78362f16 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -44,7 +44,6 @@ export default function GenericNode({
   const buildFlow = useFlowStore((state) => state.buildFlow);
   const setNode = useFlowStore((state) => state.setNode);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
-  console.log(types[data.type])
   const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(data.node!.display_name);
   const [inputDescription, setInputDescription] = useState(false);
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index d4090cd19..81463bf12 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -123,7 +123,7 @@ export const MenuBar = ({
             </DropdownMenuItem>
             {(!hasApiKey || !validApiKey) && (
               <ExportModal>
-                <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer">
+                <div className="header-menubar-item">
                   <IconComponent name="FileDown" className="header-menu-options" />
                   Export
                 </div>
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 348b58f9a..579e347b2 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -116,6 +116,9 @@
   .extra-side-bar-buttons {
     @apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground transition-all duration-500 ease-in-out;
   }
+  .header-menubar-item {
+    @apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer;
+  }
   .extra-side-bar-buttons:hover {
     @apply hover:bg-muted;
   }

From 35889692a216e1a53baa2e459664a4755c5da97a Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 14:49:11 -0300
Subject: [PATCH 4/9] Refactor: Rename JSX function to improve code
 understanding

---
 src/frontend/src/components/chatComponent/index.tsx           | 2 +-
 .../src/pages/FlowPage/components/PageComponent/index.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 15e13fc15..a53184856 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -12,7 +12,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { classNames } from "../../utils/utils";
 import ApiModal from "../../modals/ApiModal";
 
-export default function Chat({ flow }: ChatType): JSX.Element {
+export default function FlowToolbar({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const flowState = useFlowStore((state) => state.flowState);
   const nodes = useFlowStore((state) => state.nodes);
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index d740129e4..91299ec6f 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -12,7 +12,6 @@ import ReactFlow, {
   updateEdge,
 } from "reactflow";
 import GenericNode from "../../../../CustomNodes/GenericNode";
-import Chat from "../../../../components/chatComponent";
 import {
   INVALID_SELECTION_ERROR_ALERT,
   UPLOAD_ALERT_LIST,
@@ -38,6 +37,7 @@ import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import SelectionMenu from "../SelectionMenuComponent";
 import ExtraSidebar from "../extraSidebarComponent";
+import FlowToolbar from "../../../../components/chatComponent";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -481,7 +481,7 @@ export default function Page({
                     }}
                   />
                 </ReactFlow>
-                {!view && <Chat flow={flow} />}
+                {!view && <FlowToolbar flow={flow} />}
               </div>
             ) : (
               <></>

From 0f45a09494afa9ef4151bc884e08d42d3b24a99f Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 18:06:52 -0300
Subject: [PATCH 5/9] Refactor: flow toolbar buttons disable intead of
 dissapear

---
 src/frontend/src/App.css                      |  3 +-
 src/frontend/src/components/IOview/index.tsx  |  8 +++-
 .../src/components/chatComponent/index.tsx    | 42 ++++++++++---------
 src/frontend/src/style/index.css              |  3 +-
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index c2427fb0f..6aa681415 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -97,4 +97,5 @@ body {
 
 .custom-hover:hover {
   background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
-}
\ No newline at end of file
+}
+
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 73f0a068e..ced31a177 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -20,7 +20,12 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 
-export default function IOView({ children, open, setOpen }): JSX.Element {
+export default function IOView({ children, open, setOpen, disable }: {
+  children: JSX.Element;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disable?: boolean;
+}): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
@@ -98,6 +103,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"}
       open={open}
       setOpen={setOpen}
+      disable={disable}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index a53184856..3d3a01562 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -51,9 +51,9 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
           className={classNames(
-            "relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold",
+            "relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold ",
             !hasApiKey || !validApiKey || !hasStore
-              ? "button-disable  cursor-default text-muted-foreground"
+              ? " button-disable text-muted-foreground  "
               : ""
           )}
         >
@@ -87,14 +87,14 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
       >
       <div
         className={
-          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted  shadow-md transition-all cursor-pointer gap-7 border"
+          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted  shadow-md transition-all gap-7 border"
         }
       >
         <div className="flex">
           <div className="flex gap-1 text-medium-indigo  rounded-sm transition-all w-full h-full">
-          {hasIO && (
-          <IOView open={open} setOpen={setOpen}>
-            <div className="relative inline-flex w-full items-center justify-center   hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold">
+          {hasIO ? (
+          <IOView open={open} setOpen={setOpen} disable={!hasIO}>
+            <div className="relative inline-flex w-full items-center justify-center   hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold transition-all">
               <ForwardedIconComponent
                 name="Zap"
                 className={"message-button-icon h-5 w-5 transition-all"}
@@ -102,14 +102,20 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
               Run
             </div>
           </IOView>
+        ) : (
+          <div className={`relative inline-flex w-full items-center justify-center transition-all duration-500 ease-in-out px-5 py-3 text-muted-foreground ease-in-out gap-1 text-sm font-semibold cursor-not-allowed`}>
+              <ForwardedIconComponent
+                name="Zap"
+                className={"message-button-icon h-5 w-5 transition-all fill-muted-foreground stroke-muted-foreground"}
+              />
+              Run
+          </div>
         )}
           </div>
-          {hasIO && (
-            <div>
-              <Separator orientation="vertical" />
-            </div>
-          )}
-          <div className="flex items-center gap-2">
+          <div>
+            <Separator orientation="vertical" />
+          </div>
+          <div className="flex items-center gap-2 cursor-pointer">
             {currentFlow && currentFlow.data && (
               <ApiModal flow={currentFlow}>
                   <div className={classNames("relative inline-flex w-full items-center justify-center hover:bg-hover px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-1 text-sm font-semibold")}>
@@ -122,15 +128,11 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
               </ApiModal>
             )}
           </div>
-          {hasStore && validApiKey && (
-            <div>
-              <Separator orientation="vertical" />
-            </div>
-          )}
+          <div>
+            <Separator orientation="vertical" />
+          </div>
           <div className="flex items-center gap-2">
-            {hasStore && validApiKey && (
-              <div className="side-bar-button">{ModalMemo}</div>
-            )}
+            <div className={`side-bar-button ${!hasApiKey || !validApiKey || !hasStore ? " cursor-not-allowed" : " cursor-pointer"}`}>{ModalMemo}</div>
           </div>
         </div>
       </div>
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 0c58cb1df..e744fb503 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -51,7 +51,7 @@
     --component-icon: #d8598a;
     --flow-icon: #2f67d0;
     --hover: #F2F4F5;
-
+    --disabled-run: #6366f1;
     
 
     /* Colors that are shared in dark and light mode */
@@ -73,6 +73,7 @@
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
     --ice: #60A5FA;
     --hover: #1A202E;
+    --disabled-run: #6366f1;
 
     --muted: 223 27% 11%; /* hsl(223 27% 11%) */
     --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */

From 55edcead5f38fa42fec131b9d987d3cf0747e8ef Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 18:15:05 -0300
Subject: [PATCH 6/9] Refactor: Increase padding on search filter

---
 src/frontend/src/style/applies.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 579e347b2..30db6155f 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -69,7 +69,7 @@
     @apply flex h-full w-[14.5rem] flex-col overflow-hidden border-r scrollbar-hide;
   }
   .side-bar-search-div-placement {
-    @apply relative mx-auto mb-2 mt-2 flex items-center;
+    @apply relative mx-auto mb-2 mt-2 flex items-center py-3;
   }
   .side-bar-components-icon {
     @apply h-6 w-4 text-ring;

From 2c6a5919f5571193363dc3dba85a3071d5d290f3 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 18:18:56 -0300
Subject: [PATCH 7/9] Refactor: Export button always on header dropdown

---
 .../components/headerComponent/components/menuBar/index.tsx    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 81463bf12..b2f1bc3e2 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -121,15 +121,12 @@ export const MenuBar = ({
               <IconComponent name="FileUp" className="header-menu-options " />
               Import
             </DropdownMenuItem>
-            {(!hasApiKey || !validApiKey) && (
               <ExportModal>
                 <div className="header-menubar-item">
                   <IconComponent name="FileDown" className="header-menu-options" />
                   Export
                 </div>
               </ExportModal>
-        )}
-
             <DropdownMenuItem
               onClick={() => {
                 undo();

From c0352388c36a6c83c882e405ce75b6c79d167551 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 20:23:55 -0300
Subject: [PATCH 8/9] Refactor: Make header toolbar align with side bar

---
 src/frontend/src/style/applies.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 30db6155f..435cfc2df 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -498,7 +498,7 @@
     @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium;
   }
   .header-menu-bar-display {
-    @apply flex max-w-[120px] cursor-pointer items-center gap-2 lg:max-w-[200px];
+    @apply flex max-w-[120px] cursor-pointer items-center gap-2 lg:max-w-[150px];
   }
   .header-menu-flow-name {
     @apply flex-1 truncate;

From a7fdd5bce7c19077716eae23ec21f6c4630cf41c Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 20:30:58 -0300
Subject: [PATCH 9/9] Refactor: change menubar width

---
 src/frontend/src/style/applies.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 435cfc2df..9f88a6c43 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -498,7 +498,7 @@
     @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium;
   }
   .header-menu-bar-display {
-    @apply flex max-w-[120px] cursor-pointer items-center gap-2 lg:max-w-[150px];
+    @apply flex max-w-[115px] cursor-pointer items-center gap-2 lg:max-w-[145px];
   }
   .header-menu-flow-name {
     @apply flex-1 truncate;