From 6fc9b653f83e4332e9daa30e8d6e2aa39eb4040c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 14:51:46 -0300
Subject: [PATCH 1/5] adjust border colors and removing old save

---
 .../components/codeAreaComponent/index.tsx    |  6 +++---
 .../components/inputFileComponent/index.tsx   |  2 +-
 src/frontend/src/contexts/tabsContext.tsx     |  3 ++-
 .../src/modals/EditNodeModal/index.tsx        | 19 +++++++++----------
 .../NodeModal/components/ModalField/index.tsx | 19 +++++++++----------
 5 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 137e0917e..f668c5cdd 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -26,7 +26,7 @@ export default function CodeAreaComponent({
         disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
       }
     >
-      <div className="w-full flex items-center gap-3">
+      <div className="w-full flex items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -41,7 +41,7 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
                 INPUT_STYLE
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 INPUT_STYLE +
@@ -64,7 +64,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 01613d28e..9f801138f 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -78,7 +78,7 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              ? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
                 INPUT_STYLE
               : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 INPUT_STYLE +
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 37ac6d707..779a72b50 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -21,6 +21,7 @@ import {
   downloadFlowsFromDatabase,
   uploadFlowsToDatabase,
 } from "../controllers/API";
+import _ from "lodash";
 
 const TabsContextInitialValue: TabsContextType = {
   tabId: "",
@@ -548,7 +549,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         uploadFlows,
         uploadFlow,
         getNodeId,
-        paste,
+        paste
       }}
     >
       {children}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index d0f4c368d..402c959eb 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -64,7 +64,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
-  const { save } = useContext(TabsContext);
   const [enabled, setEnabled] = useState(null);
   if (nodeLength == 0) {
     closePopUp();
@@ -172,7 +171,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     }
                                     onChange={(t: string[]) => {
                                       data.node.template[n].value = t;
-                                      save();
+                                      
                                     }}
                                   />
                                 ) : data.node.template[n].multiline ? (
@@ -182,7 +181,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t: string) => {
                                       data.node.template[n].value = t;
-                                      save();
+                                      
                                     }}
                                   />
                                 ) : (
@@ -195,7 +194,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t) => {
                                       data.node.template[n].value = t;
-                                      save();
+                                      
                                     }}
                                   />
                                 )}
@@ -208,7 +207,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   setEnabled={(e) => {
                                     data.node.template[n].value = e;
                                     setEnabled(e);
-                                    save();
+                                    
                                   }}
                                   disabled={false}
                                 />
@@ -221,7 +220,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t) => {
                                     data.node.template[n].value = t;
-                                    save();
+                                    
                                   }}
                                 />
                               </div>
@@ -249,7 +248,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t) => {
                                     data.node.template[n].value = t;
-                                    save();
+                                    
                                   }}
                                 />
                               </div>
@@ -266,7 +265,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   suffixes={data.node.template[n].suffixes}
                                   onFileChange={(t: string) => {
                                     data.node.template[n].content = t;
-                                    save();
+                                    
                                   }}
                                 ></InputFileComponent>
                               </div>
@@ -278,7 +277,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t: string) => {
                                     data.node.template[n].value = t;
-                                    save();
+                                    
                                   }}
                                 />
                               </div>
@@ -290,7 +289,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t: string) => {
                                     data.node.template[n].value = t;
-                                    save();
+                                    
                                   }}
                                 />
                               </div>
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 0890b25a1..e8ae74aec 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -21,7 +21,6 @@ export default function ModalField({
   type,
   index,
 }) {
-  const { save } = useContext(TabsContext);
   const [enabled, setEnabled] = useState(
     data.node.template[name]?.value ?? false
   );
@@ -71,7 +70,7 @@ export default function ModalField({
               }
               onChange={(t: string[]) => {
                 data.node.template[name].value = t;
-                save();
+                
               }}
             />
           ) : data.node.template[name].multiline ? (
@@ -80,7 +79,7 @@ export default function ModalField({
               value={data.node.template[name].value ?? ""}
               onChange={(t: string) => {
                 data.node.template[name].value = t;
-                save();
+                
               }}
             />
           ) : (
@@ -90,7 +89,7 @@ export default function ModalField({
               value={data.node.template[name].value ?? ""}
               onChange={(t) => {
                 data.node.template[name].value = t;
-                save();
+                
               }}
             />
           )}
@@ -104,7 +103,7 @@ export default function ModalField({
             setEnabled={(t) => {
               data.node.template[name].value = t;
               setEnabled(t);
-              save();
+              
             }}
           />
         </div>
@@ -115,7 +114,7 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t) => {
               data.node.template[name].value = t;
-              save();
+              
             }}
           />
         </div>
@@ -134,7 +133,7 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t) => {
               data.node.template[name].value = t;
-              save();
+              
             }}
           />
         </div>
@@ -150,7 +149,7 @@ export default function ModalField({
             suffixes={data.node.template[name].suffixes}
             onFileChange={(t: string) => {
               data.node.template[name].content = t;
-              save();
+              
             }}
           ></InputFileComponent>
         </div>
@@ -161,7 +160,7 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              save();
+              
             }}
           />
         </div>
@@ -172,7 +171,7 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              save();
+              
             }}
           />
         </div>

From e0ec58bc751b435a7059ae0f235a3bb984efbb81 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 18:52:51 -0300
Subject: [PATCH 2/5] general css adjusts

---
 src/frontend/src/components/ui/button.tsx |   4 +-
 src/frontend/src/index.css                | 122 +++++++++++-----------
 2 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 7fd7f022c..d63b48ce5 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -14,9 +14,9 @@ const buttonVariants = cva(
         outline:
           "border border-input hover:bg-accent hover:text-accent-foreground",
         primary:
-          "bg-background text-secondary-foreground hover:bg-background/80",
+          "border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-muted text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
       },
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 2c00dbc22..4578a7c9b 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -3,90 +3,90 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
-	  --background: 0 0% 100%;
-	  --foreground: 222.2 47.4% 11.2%;
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
 
-	  --muted: 210 40% 96.1%;
-	  --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-	  --popover: 0 0% 100%;
-	  --popover-foreground: 222.2 47.4% 11.2%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
 
-	  --card: 0 0% 100%;
-	  --card-foreground: 222.2 47.4% 11.2%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
 
-	  --border: 214.3 31.8% 91.4%;
-	  --input: 214.3 31.8% 91.4%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
 
-	  --primary: 222.2 47.4% 11.2%;
-	  --primary-foreground: 210 40% 98%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-	  --secondary: 210 40% 96.1%;
-	  --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-	  --accent: 210 40% 96.1%;
-	  --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-	  --destructive: 0 100% 50%;
-	  --destructive-foreground: 210 40% 98%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
 
-	  --ring: 215 20.2% 65.1%;
+    --ring: 215 20.2% 65.1%;
 
-	  --radius: 0.5rem;
-	}
-
-	.dark {
-	  --background: 224 71% 4%;
-	  --foreground: 213 31% 91%;
-
-	  --muted: 223 47% 11%;
-	  --muted-foreground: 215.4 16.3% 56.9%;
-
-	  --popover: 224 71% 4%;
-	  --popover-foreground: 215 20.2% 65.1%;
-
-	  --card: 224 71% 4%;
-	  --card-foreground: 213 31% 91%;
-
-	  --border: 216 34% 17%;
-	  --input: 216 34% 17%;
-
-	  --primary: 210 40% 98%;
-	  --primary-foreground: 222.2 47.4% 1.2%;
-
-	  --secondary: 222.2 47.4% 11.2%;
-	  --secondary-foreground: 210 40% 98%;
-
-	  --accent: 216 34% 17%;
-	  --accent-foreground: 210 40% 98%;
-
-	  --destructive: 0 63% 31%;
-	  --destructive-foreground: 210 40% 98%;
-
-	  --ring: 216 34% 17%;
-
-	  --radius: 0.5rem;
-	}
+    --radius: 0.5rem;
   }
 
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
 :root {
   --background: 0 0% 100%;
   --foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 98%;
+  --muted: 210 30% 98.5%;
   --muted-foreground: 215.4 16.3% 46.9%;
   --popover: 0 0% 100%;
   --popover-foreground: 222.2 47.4% 11.2%;
   --card: 0 0% 100%;
   --card-foreground: 222.2 47.4% 11.2%;
-  --border: 214.3 31.8% 91.4%;
+  --border: 214.3 31.8% 93.4%;
   --input: 214.3 31.8% 91.4%;
-  --primary: 222.2 47.4% 18%;
+  --primary: 222.2 37.4% 18%;
   --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
+  --secondary: 210 30% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
+  --accent: 210 30% 96.1%;
+  --accent-foreground: 222.2 37.4% 11.2%;
   --destructive: 0 100% 50%;
   --destructive-foreground: 210 40% 98%;
   --ring: 215 20.2% 65.1%;

From 339ed2060ee6110c7cc6bc002027ba5821eece7d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 19:58:35 -0300
Subject: [PATCH 3/5] tooltip showing

---
 .../components/parameterComponent/index.tsx           |  5 +++--
 src/frontend/src/CustomNodes/GenericNode/index.tsx    |  5 ++++-
 .../src/components/ShadTooltipComponent/index.tsx     |  4 ++--
 .../src/components/dropdownComponent/index.tsx        | 11 ++++++-----
 src/frontend/src/modals/ApiModal/index.tsx            |  2 +-
 src/frontend/src/modals/EditNodeModal/index.tsx       |  6 +++---
 src/frontend/src/modals/importModal/index.tsx         |  7 +++----
 7 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index ae2c144a0..972082c76 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -58,7 +58,9 @@ export default function ParameterComponent({
     data.node.template[name]?.value ?? false
   );
 
-  useEffect(() => {}, [closePopUp, data.node.template]);
+  useEffect(() => {  
+    
+  }, [closePopUp, data.node.template]);
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
@@ -232,7 +234,6 @@ export default function ParameterComponent({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              
             }}
           />
         ) : left === true && type === "file" ? (
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 83d287101..396c22f63 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -59,7 +59,10 @@ export default function GenericNode({
     }
   }, []);
 
-  useEffect(() => {}, [closePopUp]);
+  useEffect(() => { 
+    console.log(data.node.template);
+     
+  }, [closePopUp, data.node.template]);
 
   const validateNode = useCallback(
     debounce(async () => {
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index 6dfde8f8f..fa0b73ba1 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -10,7 +10,7 @@ const ShadTooltip = (props) => {
     <TooltipProvider>
       <Tooltip delayDuration={props.delayDuration}>
         <TooltipTrigger asChild>{props.children}</TooltipTrigger>
-        {props.open && (
+
           <TooltipContent
             side={props.side}
             avoidCollisions={false}
@@ -18,7 +18,7 @@ const ShadTooltip = (props) => {
           >
             {props.content}
           </TooltipContent>
-        )}
+        
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 6e4325a1b..d132da14a 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -29,20 +29,21 @@ export default function Dropdown({
           <>
             <div className={editNode ? "mt-1" : "relative mt-1"}>
               <Listbox.Button
+              
                 className={
                   editNode
-                    ? "relative pr-9 arrow-hide placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
+                    ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
                       INPUT_STYLE
                     : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
                       INPUT_STYLE
                 }
               >
+                
                 <span className="block truncate w-full">{internalValue}</span>
                 <span
                   className={
-                    editNode
-                      ? "hidden"
-                      : "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+
+ "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                   }
                 >
                   <ChevronUpDownIcon
@@ -62,7 +63,7 @@ export default function Dropdown({
                 <Listbox.Options
                   className={
                     editNode
-                      ? "arrow-hide absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
+                      ? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
                       : "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
                   }
                 >
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index c34cb4afb..552da7409 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -24,7 +24,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
-import { FlowType } from "src/types/flow";
+import { FlowType } from "../../types/flow";
 import { getCurlCode, getPythonApiCode, getPythonCode } from "../../constants";
 import { EXPORT_CODE_DIALOG } from "../../constants";
 
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 402c959eb..28175682e 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -43,6 +43,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { EDIT_DIALOG_SUBTITLE } from "../../constants";
+import { Edit } from "lucide-react";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -95,8 +96,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Node</span>
-            <PencilSquareIcon
-              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
+            <Edit 
+              className="h-5 w-5 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>
@@ -289,7 +290,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t: string) => {
                                     data.node.template[n].value = t;
-                                    
                                   }}
                                 />
                               </div>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index b95b84d4e..00f17c959 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -79,14 +79,13 @@ export default function ImportModal() {
                 <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1"
+                    className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
                     onClick={() => {
                       setShowExamples(false);
                     }}
                   >
-                    <span className="sr-only">Close</span>
                     <ArrowLeftIcon
-                      className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
+                      className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
                       aria-hidden="true"
                     />
                   </button>
@@ -98,7 +97,7 @@ export default function ImportModal() {
               {showExamples ? "Select an example" : "Import"}
             </span>
             <ArrowUpTrayIcon
-              className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
+              className="h-5 w-5 text-gray-800 ml-1 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>

From 1a9ed4d94b69a92eb5c762b62f539baa5ca04179 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 21:19:27 -0300
Subject: [PATCH 4/5] Adjust on changing components on edit mode

---
 .../components/parameterComponent/index.tsx   | 78 ++++++++++---------
 .../src/CustomNodes/GenericNode/index.tsx     |  8 +-
 .../components/codeAreaComponent/index.tsx    |  5 ++
 .../src/components/floatComponent/index.tsx   |  5 ++
 .../components/menuBar/index.tsx              | 23 +++---
 .../src/components/intComponent/index.tsx     |  5 ++
 .../src/components/promptComponent/index.tsx  |  7 +-
 .../extraSidebarComponent/index.tsx           |  4 +-
 src/frontend/src/types/components/index.ts    |  2 +
 9 files changed, 77 insertions(+), 60 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 972082c76..cbb6cc874 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -39,6 +39,7 @@ export default function ParameterComponent({
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
+  const refData = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { closePopUp } = useContext(PopUpContext);
@@ -59,57 +60,57 @@ export default function ParameterComponent({
   );
 
   useEffect(() => {  
-    
   }, [closePopUp, data.node.template]);
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
+
   const [myData, setMyData] = useState(useContext(typesContext).data);
 
   useEffect(() => {
-    const groupedObj = groupByFamily(myData, tooltipTitle);
-
-    refHtml.current = groupedObj.map((item, i) => (
-      <span
-        key={i}
-        className={classNames(
-          i > 0 ? "items-center flex mt-3" : "items-center flex"
-        )}
-      >
-        <div
-          className="h-5 w-5"
-          style={{
-            color: nodeColors[item.family],
-          }}
+      const groupedObj = groupByFamily(myData, tooltipTitle);
+      refHtml.current = groupedObj.map((item, i) => (
+        <span
+          key={i}
+          className={classNames(
+            i > 0 ? "items-center flex mt-3" : "items-center flex"
+          )}
         >
-          {React.createElement(nodeIcons[item.family])}
-        </div>
-        <span className="ps-2 text-gray-950">
-          {nodeNames[item.family] ?? ""}{" "}
-          <span className={classNames(left ? "hidden" : "")}>
-            {" "}
-            -&nbsp;
-            {item.type.split(", ").length > 2
-              ? item.type.split(", ").map((el, i) => (
-                  <>
-                    <span key={i}>
-                      {i == item.type.split(", ").length - 1
-                        ? el
-                        : (el += `, `)}
-                    </span>
-                    {i % 2 == 0 && i > 0 && <br></br>}
-                  </>
-                ))
-              : item.type}
+          <div
+            className="h-5 w-5"
+            style={{
+              color: nodeColors[item.family],
+            }}
+          >
+            {React.createElement(nodeIcons[item.family])}
+          </div>
+          <span className="ps-2 text-gray-950">
+            {nodeNames[item.family] ?? ""}{" "}
+            <span className={classNames(left ? "hidden" : "")}>
+              {" "}
+              -&nbsp;
+              {item.type.split(", ").length > 2
+                ? item.type.split(", ").map((el, i) => (
+                    <>
+                      <span key={i}>
+                        {i == item.type.split(", ").length - 1
+                          ? el
+                          : (el += `, `)}
+                      </span>
+                      {i % 2 == 0 && i > 0 && <br></br>}
+                    </>
+                  ))
+                : item.type}
+            </span>
           </span>
         </span>
-      </span>
-    ));
+      ));
   }, [tooltipTitle]);
 
   return (
-    <div
+    <>
+        <div
       ref={ref}
       className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
     >
@@ -234,6 +235,7 @@ export default function ParameterComponent({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
+              
             }}
           />
         ) : left === true && type === "file" ? (
@@ -276,5 +278,7 @@ export default function ParameterComponent({
         )}
       </>
     </div>
+    </>
+
   );
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 396c22f63..a94c2a3a5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -59,11 +59,6 @@ export default function GenericNode({
     }
   }, []);
 
-  useEffect(() => { 
-    console.log(data.node.template);
-     
-  }, [closePopUp, data.node.template]);
-
   const validateNode = useCallback(
     debounce(async () => {
       try {
@@ -106,6 +101,9 @@ export default function GenericNode({
     return;
   }
 
+  useEffect(() => {  
+  }, [closePopUp, data.node.template]);
+
   return (
     <>
       <NodeToolbar>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index f668c5cdd..399ab40b2 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -20,6 +20,11 @@ export default function CodeAreaComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   return (
     <div
       className={
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 8fef867ab..aadc516ed 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -23,6 +23,11 @@ export default function FloatComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+  
   return (
     <div
       className={
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index f26069963..2087c2a8c 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -24,6 +24,7 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { Link } from "react-router-dom";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
+import { Button } from "../../../ui/button";
 
 export const MenuBar = ({ flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@@ -46,23 +47,17 @@ export const MenuBar = ({ flows, tabId }) => {
       <Link to="/">
         <ChevronLeft className="w-5" />
       </Link>
-      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 bg-background gap-0.5">
-        {/* <RenameLabel
-          value={current_flow.name}
-          setValue={(value) => {
-            if (value !== "") {
-              let newFlow = _.cloneDeep(current_flow);
-              newFlow.name = value;
-              updateFlow(newFlow);
-            }
-          }}
-          rename={rename}
-          setRename={setRename}
-        /> */}
+      <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
         <DropdownMenu>
-          <DropdownMenuTrigger className="px-1 gap-2 flex items-center">
+          <DropdownMenuTrigger >
+          <Button
+          className="gap-2 flex items-center"
+            variant="primary"
+          >
             {current_flow.name}
             <ChevronDown className="w-4 h-4" />
+          </Button>
+
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
             <DropdownMenuLabel>Edit</DropdownMenuLabel>
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 541e5de5d..4c8ecca6d 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -21,6 +21,11 @@ export default function IntComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   return (
     <div
       className={
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index df8070a2a..86ea8f301 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -1,8 +1,6 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import CodeAreaModal from "../../modals/codeAreaModal";
-import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
@@ -22,6 +20,11 @@ export default function PromptAreaComponent({
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+  
   return (
     <div
       className={
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index fd8f23dbd..84c1c16f4 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -76,7 +76,7 @@ export default function ExtraSidebar() {
   }
 
   return (
-    <div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r">
+    <div className="flex flex-col overflow-hidden scrollbar-hide h-full border-r w-[200px]">
       <div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
         <ShadTooltip delayDuration={1000} content="Import" side="top">
           <button
@@ -127,7 +127,7 @@ export default function ExtraSidebar() {
         </ShadTooltip>
       </div>
       <Separator />
-      <div className="relative mt-2 flex items-center mb-2 mx-2">
+      <div className="relative mt-2 flex items-center mb-2 mx-auto">
         <input
           type="text"
           name="search"
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 060bd6d05..1c8133637 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -6,6 +6,7 @@ import {
   SVGProps,
 } from "react";
 import { NodeDataType } from "../flow/index";
+import { typesContextType } from "../typesContext";
 export type InputComponentType = {
   value: string;
   disabled?: boolean;
@@ -38,6 +39,7 @@ export type ParameterComponentType = {
   required?: boolean;
   name?: string;
   tooltipTitle: string;
+  dataContext?: typesContextType;
 };
 export type InputListComponentType = {
   value: string[];

From 86eb9af7945b2b7cbec709c2c31878fa66d4a4f3 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 21:22:45 -0300
Subject: [PATCH 5/5] Formatting project

---
 .../components/parameterComponent/index.tsx   | 348 +++++++++---------
 .../src/CustomNodes/GenericNode/index.tsx     |   3 +-
 .../components/ShadTooltipComponent/index.tsx |  15 +-
 .../src/components/cardComponent/index.tsx    |  45 ++-
 .../components/dropdownComponent/index.tsx    |   5 +-
 .../src/components/floatComponent/index.tsx   |   2 +-
 .../components/menuBar/index.tsx              |  14 +-
 .../src/components/headerComponent/index.tsx  |   5 +-
 .../src/components/promptComponent/index.tsx  |   2 +-
 src/frontend/src/components/ui/button.tsx     |   3 +-
 src/frontend/src/constants.tsx                |   1 -
 src/frontend/src/contexts/index.tsx           |  20 +-
 src/frontend/src/contexts/tabsContext.tsx     |   2 +-
 src/frontend/src/contexts/undoRedoContext.tsx | 300 ++++++++-------
 .../src/modals/EditNodeModal/index.tsx        |  10 +-
 .../NodeModal/components/ModalField/index.tsx |   9 -
 src/frontend/src/modals/exportModal/index.tsx |   3 +-
 .../src/pages/CommunityPage/index.tsx         |  37 +-
 .../components/PageComponent/index.tsx        |  94 ++---
 src/frontend/src/pages/FlowPage/index.tsx     |  18 +-
 src/frontend/src/routes.tsx                   |  26 +-
 21 files changed, 470 insertions(+), 492 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index cbb6cc874..a5be9338c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -59,8 +59,7 @@ export default function ParameterComponent({
     data.node.template[name]?.value ?? false
   );
 
-  useEffect(() => {  
-  }, [closePopUp, data.node.template]);
+  useEffect(() => {}, [closePopUp, data.node.template]);
 
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
@@ -69,216 +68,209 @@ export default function ParameterComponent({
   const [myData, setMyData] = useState(useContext(typesContext).data);
 
   useEffect(() => {
-      const groupedObj = groupByFamily(myData, tooltipTitle);
-      refHtml.current = groupedObj.map((item, i) => (
-        <span
-          key={i}
-          className={classNames(
-            i > 0 ? "items-center flex mt-3" : "items-center flex"
-          )}
+    const groupedObj = groupByFamily(myData, tooltipTitle);
+    refHtml.current = groupedObj.map((item, i) => (
+      <span
+        key={i}
+        className={classNames(
+          i > 0 ? "items-center flex mt-3" : "items-center flex"
+        )}
+      >
+        <div
+          className="h-5 w-5"
+          style={{
+            color: nodeColors[item.family],
+          }}
         >
-          <div
-            className="h-5 w-5"
-            style={{
-              color: nodeColors[item.family],
-            }}
-          >
-            {React.createElement(nodeIcons[item.family])}
-          </div>
-          <span className="ps-2 text-gray-950">
-            {nodeNames[item.family] ?? ""}{" "}
-            <span className={classNames(left ? "hidden" : "")}>
-              {" "}
-              -&nbsp;
-              {item.type.split(", ").length > 2
-                ? item.type.split(", ").map((el, i) => (
-                    <>
-                      <span key={i}>
-                        {i == item.type.split(", ").length - 1
-                          ? el
-                          : (el += `, `)}
-                      </span>
-                      {i % 2 == 0 && i > 0 && <br></br>}
-                    </>
-                  ))
-                : item.type}
-            </span>
+          {React.createElement(nodeIcons[item.family])}
+        </div>
+        <span className="ps-2 text-gray-950">
+          {nodeNames[item.family] ?? ""}{" "}
+          <span className={classNames(left ? "hidden" : "")}>
+            {" "}
+            -&nbsp;
+            {item.type.split(", ").length > 2
+              ? item.type.split(", ").map((el, i) => (
+                  <>
+                    <span key={i}>
+                      {i == item.type.split(", ").length - 1
+                        ? el
+                        : (el += `, `)}
+                    </span>
+                    {i % 2 == 0 && i > 0 && <br></br>}
+                  </>
+                ))
+              : item.type}
           </span>
         </span>
-      ));
+      </span>
+    ));
   }, [tooltipTitle]);
 
   return (
     <>
-        <div
-      ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
-    >
-      <>
-        <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
-          {title}
-          <span className="text-red-600">{required ? " *" : ""}</span>
-        </div>
-        {left &&
-        (type === "str" ||
-          type === "bool" ||
-          type === "float" ||
-          type === "code" ||
-          type === "prompt" ||
-          type === "file" ||
-          type === "int") ? (
-          <></>
-        ) : (
-          <ShadTooltip
-            delayDuration={0}
-            content={refHtml.current}
-            side={left ? "left" : "right"}
-            open={refHtml?.current?.length > 0}
+      <div
+        ref={ref}
+        className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+      >
+        <>
+          <div
+            className={"text-sm truncate w-full " + (left ? "" : "text-end")}
           >
-            <Handle
-              type={left ? "target" : "source"}
-              position={left ? Position.Left : Position.Right}
-              id={id}
-              isValidConnection={(connection) =>
-                isValidConnection(connection, reactFlowInstance)
-              }
-              className={classNames(
-                left ? "-ml-0.5 " : "-mr-0.5 ",
-                "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
-              )}
-              style={{
-                borderColor: color,
-                top: position,
-              }}
-            ></Handle>
-          </ShadTooltip>
-        )}
-
-        {left === true &&
-        type === "str" &&
-        !data.node.template[name].options ? (
-          <div className="mt-2 w-full">
-            {data.node.template[name].list ? (
-              <InputListComponent
-                disabled={disabled}
-                value={
-                  !data.node.template[name].value ||
-                  data.node.template[name].value === ""
-                    ? [""]
-                    : data.node.template[name].value
+            {title}
+            <span className="text-red-600">{required ? " *" : ""}</span>
+          </div>
+          {left &&
+          (type === "str" ||
+            type === "bool" ||
+            type === "float" ||
+            type === "code" ||
+            type === "prompt" ||
+            type === "file" ||
+            type === "int") ? (
+            <></>
+          ) : (
+            <ShadTooltip
+              delayDuration={0}
+              content={refHtml.current}
+              side={left ? "left" : "right"}
+              open={refHtml?.current?.length > 0}
+            >
+              <Handle
+                type={left ? "target" : "source"}
+                position={left ? Position.Left : Position.Right}
+                id={id}
+                isValidConnection={(connection) =>
+                  isValidConnection(connection, reactFlowInstance)
                 }
-                onChange={(t: string[]) => {
-                  data.node.template[name].value = t;
-  
+                className={classNames(
+                  left ? "-ml-0.5 " : "-mr-0.5 ",
+                  "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
+                )}
+                style={{
+                  borderColor: color,
+                  top: position,
                 }}
-              />
-            ) : data.node.template[name].multiline ? (
-              <TextAreaComponent
+              ></Handle>
+            </ShadTooltip>
+          )}
+
+          {left === true &&
+          type === "str" &&
+          !data.node.template[name].options ? (
+            <div className="mt-2 w-full">
+              {data.node.template[name].list ? (
+                <InputListComponent
+                  disabled={disabled}
+                  value={
+                    !data.node.template[name].value ||
+                    data.node.template[name].value === ""
+                      ? [""]
+                      : data.node.template[name].value
+                  }
+                  onChange={(t: string[]) => {
+                    data.node.template[name].value = t;
+                  }}
+                />
+              ) : data.node.template[name].multiline ? (
+                <TextAreaComponent
+                  disabled={disabled}
+                  value={data.node.template[name].value ?? ""}
+                  onChange={(t: string) => {
+                    data.node.template[name].value = t;
+                  }}
+                />
+              ) : (
+                <InputComponent
+                  disabled={disabled}
+                  disableCopyPaste={true}
+                  password={data.node.template[name].password ?? false}
+                  value={data.node.template[name].value ?? ""}
+                  onChange={(t) => {
+                    data.node.template[name].value = t;
+                  }}
+                />
+              )}
+            </div>
+          ) : left === true && type === "bool" ? (
+            <div className="mt-2">
+              <ToggleComponent
                 disabled={disabled}
-                value={data.node.template[name].value ?? ""}
-                onChange={(t: string) => {
+                enabled={enabled}
+                setEnabled={(t) => {
                   data.node.template[name].value = t;
-  
+                  setEnabled(t);
                 }}
               />
-            ) : (
-              <InputComponent
+            </div>
+          ) : left === true && type === "float" ? (
+            <div className="mt-2 w-full">
+              <FloatComponent
                 disabled={disabled}
                 disableCopyPaste={true}
-                password={data.node.template[name].password ?? false}
                 value={data.node.template[name].value ?? ""}
                 onChange={(t) => {
                   data.node.template[name].value = t;
-  
                 }}
               />
-            )}
-          </div>
-        ) : left === true && type === "bool" ? (
-          <div className="mt-2">
-            <ToggleComponent
+            </div>
+          ) : left === true &&
+            type === "str" &&
+            data.node.template[name].options ? (
+            <div className="w-full">
+              <Dropdown
+                options={data.node.template[name].options}
+                onSelect={(newValue) =>
+                  (data.node.template[name].value = newValue)
+                }
+                value={data.node.template[name].value ?? "Choose an option"}
+              ></Dropdown>
+            </div>
+          ) : left === true && type === "code" ? (
+            <CodeAreaComponent
               disabled={disabled}
-              enabled={enabled}
-              setEnabled={(t) => {
+              value={data.node.template[name].value ?? ""}
+              onChange={(t: string) => {
                 data.node.template[name].value = t;
-                setEnabled(t);
-
               }}
             />
-          </div>
-        ) : left === true && type === "float" ? (
-          <div className="mt-2 w-full">
-            <FloatComponent
+          ) : left === true && type === "file" ? (
+            <InputFileComponent
               disabled={disabled}
-              disableCopyPaste={true}
               value={data.node.template[name].value ?? ""}
-              onChange={(t) => {
+              onChange={(t: string) => {
                 data.node.template[name].value = t;
+              }}
+              fileTypes={data.node.template[name].fileTypes}
+              suffixes={data.node.template[name].suffixes}
+              onFileChange={(t: string) => {
+                data.node.template[name].content = t;
+              }}
+            ></InputFileComponent>
+          ) : left === true && type === "int" ? (
+            <div className="mt-2 w-full">
+              <IntComponent
+                disabled={disabled}
+                disableCopyPaste={true}
+                value={data.node.template[name].value ?? ""}
+                onChange={(t) => {
+                  data.node.template[name].value = t;
                 }}
-            />
-          </div>
-        ) : left === true &&
-          type === "str" &&
-          data.node.template[name].options ? (
-          <div className="w-full">
-            <Dropdown
-              options={data.node.template[name].options}
-              onSelect={(newValue) =>
-                (data.node.template[name].value = newValue)
-              }
-              value={data.node.template[name].value ?? "Choose an option"}
-            ></Dropdown>
-          </div>
-        ) : left === true && type === "code" ? (
-          <CodeAreaComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[name].value = t;
-              
-            }}
-          />
-        ) : left === true && type === "file" ? (
-          <InputFileComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[name].value = t;
-            }}
-            fileTypes={data.node.template[name].fileTypes}
-            suffixes={data.node.template[name].suffixes}
-            onFileChange={(t: string) => {
-              data.node.template[name].content = t;
-              
-            }}
-          ></InputFileComponent>
-        ) : left === true && type === "int" ? (
-          <div className="mt-2 w-full">
-            <IntComponent
+              />
+            </div>
+          ) : left === true && type === "prompt" ? (
+            <PromptAreaComponent
               disabled={disabled}
-              disableCopyPaste={true}
               value={data.node.template[name].value ?? ""}
-              onChange={(t) => {
+              onChange={(t: string) => {
                 data.node.template[name].value = t;
-                
               }}
             />
-          </div>
-        ) : left === true && type === "prompt" ? (
-          <PromptAreaComponent
-            disabled={disabled}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t: string) => {
-              data.node.template[name].value = t;
-              
-            }}
-          />
-        ) : (
-          <></>
-        )}
-      </>
-    </div>
+          ) : (
+            <></>
+          )}
+        </>
+      </div>
     </>
-
   );
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index a94c2a3a5..fcebc9f8a 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -101,8 +101,7 @@ export default function GenericNode({
     return;
   }
 
-  useEffect(() => {  
-  }, [closePopUp, data.node.template]);
+  useEffect(() => {}, [closePopUp, data.node.template]);
 
   return (
     <>
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index fa0b73ba1..44ffac075 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -11,14 +11,13 @@ const ShadTooltip = (props) => {
       <Tooltip delayDuration={props.delayDuration}>
         <TooltipTrigger asChild>{props.children}</TooltipTrigger>
 
-          <TooltipContent
-            side={props.side}
-            avoidCollisions={false}
-            sticky="always"
-          >
-            {props.content}
-          </TooltipContent>
-        
+        <TooltipContent
+          side={props.side}
+          avoidCollisions={false}
+          sticky="always"
+        >
+          {props.content}
+        </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 5688eefaa..84b7d52c0 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -4,10 +4,25 @@ import { Link } from "react-router-dom";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
 import { gradients } from "../../utils";
-import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../ui/card";
+import {
+  CardTitle,
+  CardDescription,
+  CardFooter,
+  Card,
+  CardHeader,
+} from "../ui/card";
 
-
-export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => {
+export const CardComponent = ({
+  flow,
+  id,
+  onDelete,
+  button,
+}: {
+  flow: FlowType;
+  id: string;
+  onDelete?: () => void;
+  button?: JSX.Element;
+}) => {
   const { removeFlow } = useContext(TabsContext);
 
   return (
@@ -20,19 +35,14 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;
                 "rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
                 gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
               }
-            >
-            </span>
-            <span className="flex-1 truncate-doubleline">
-              {flow.name}
-            </span>
+            ></span>
+            <span className="flex-1 truncate-doubleline">{flow.name}</span>
           </div>
-          {onDelete &&
-          <button
-            onClick={onDelete}
-          >
-            <Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
-          </button>
-          }
+          {onDelete && (
+            <button onClick={onDelete}>
+              <Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
+            </button>
+          )}
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
@@ -53,10 +63,7 @@ export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType;
               <span className="text-base">&nbsp;</span>OpenAI+
             </Badge> */}
           </div>
-          {button &&
-            button
-          }
-          
+          {button && button}
         </div>
       </CardFooter>
     </Card>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index d132da14a..24021336d 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -29,7 +29,6 @@ export default function Dropdown({
           <>
             <div className={editNode ? "mt-1" : "relative mt-1"}>
               <Listbox.Button
-              
                 className={
                   editNode
                     ? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
@@ -38,12 +37,10 @@ export default function Dropdown({
                       INPUT_STYLE
                 }
               >
-                
                 <span className="block truncate w-full">{internalValue}</span>
                 <span
                   className={
-
- "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                    "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                   }
                 >
                   <ChevronUpDownIcon
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index aadc516ed..2fc80962b 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -27,7 +27,7 @@ export default function FloatComponent({
   useEffect(() => {
     setMyValue(value);
   }, [value]);
-  
+
   return (
     <div
       className={
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 2087c2a8c..b81c9ec5a 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -49,15 +49,11 @@ export const MenuBar = ({ flows, tabId }) => {
       </Link>
       <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
         <DropdownMenu>
-          <DropdownMenuTrigger >
-          <Button
-          className="gap-2 flex items-center"
-            variant="primary"
-          >
-            {current_flow.name}
-            <ChevronDown className="w-4 h-4" />
-          </Button>
-
+          <DropdownMenuTrigger>
+            <Button className="gap-2 flex items-center" variant="primary">
+              {current_flow.name}
+              <ChevronDown className="w-4 h-4" />
+            </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44">
             <DropdownMenuLabel>Edit</DropdownMenuLabel>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index f80f9c460..4d20ea5fb 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -28,10 +28,7 @@ export default function Header() {
           <span className="text-2xl ml-4">⛓️</span>
         </Link>
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
-          <MenuBar
-            flows={flows}
-            tabId={tabId}
-          />
+          <MenuBar flows={flows} tabId={tabId} />
         )}
       </div>
       <div className="flex gap-2 items-center">
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 86ea8f301..7713da8e6 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -24,7 +24,7 @@ export default function PromptAreaComponent({
   useEffect(() => {
     setMyValue(value);
   }, [value]);
-  
+
   return (
     <div
       className={
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index d63b48ce5..c70a9a293 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -15,8 +15,7 @@ const buttonVariants = cva(
           "border border-input hover:bg-accent hover:text-accent-foreground",
         primary:
           "border bg-background text-secondary-foreground hover:bg-background/80 hover:shadow-sm",
-        secondary:
-          "bg-muted text-secondary-foreground hover:bg-secondary/80",
+        secondary: "bg-muted text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
       },
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 7a599b257..14c72a581 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -129,4 +129,3 @@ export const EXPORT_CODE_DIALOG =
  */
 export const INPUT_STYLE =
   " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
-
diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index 5e874c702..61d769aa1 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -14,17 +14,17 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
     <>
       <ReactFlowProvider>
         <DarkProvider>
-            <TypesProvider>
-              <LocationProvider>
-                <AlertProvider>
-                  <TabsProvider>
-          <UndoRedoProvider>
+          <TypesProvider>
+            <LocationProvider>
+              <AlertProvider>
+                <TabsProvider>
+                  <UndoRedoProvider>
                     <PopUpProvider>{children}</PopUpProvider>
-          </UndoRedoProvider>
-                  </TabsProvider>
-                </AlertProvider>
-              </LocationProvider>
-            </TypesProvider>
+                  </UndoRedoProvider>
+                </TabsProvider>
+              </AlertProvider>
+            </LocationProvider>
+          </TypesProvider>
         </DarkProvider>
       </ReactFlowProvider>
     </>
diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx
index 779a72b50..5d2a53958 100644
--- a/src/frontend/src/contexts/tabsContext.tsx
+++ b/src/frontend/src/contexts/tabsContext.tsx
@@ -549,7 +549,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
         uploadFlows,
         uploadFlow,
         getNodeId,
-        paste
+        paste,
       }}
     >
       {children}
diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx
index 573a260e0..eed8eb870 100644
--- a/src/frontend/src/contexts/undoRedoContext.tsx
+++ b/src/frontend/src/contexts/undoRedoContext.tsx
@@ -1,4 +1,10 @@
-import { createContext, useCallback, useContext, useEffect, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { Edge, Node, useReactFlow } from "reactflow";
 import { cloneDeep } from "lodash";
 import { TabsContext } from "./tabsContext";
@@ -10,22 +16,22 @@ type undoRedoContextType = {
 };
 
 type UseUndoRedoOptions = {
-    maxHistorySize: number;
-    enableShortcuts: boolean;
-  };
-  
-  type UseUndoRedo = (options?: UseUndoRedoOptions) => {
-    undo: () => void;
-    redo: () => void;
-    takeSnapshot: () => void;
-    canUndo: boolean;
-    canRedo: boolean;
-  };
-  
-  type HistoryItem = {
-    nodes: Node[];
-    edges: Edge[];
-  };
+  maxHistorySize: number;
+  enableShortcuts: boolean;
+};
+
+type UseUndoRedo = (options?: UseUndoRedoOptions) => {
+  undo: () => void;
+  redo: () => void;
+  takeSnapshot: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+};
+
+type HistoryItem = {
+  nodes: Node[];
+  edges: Edge[];
+};
 
 const initialValue = {
   undo: () => {},
@@ -34,152 +40,144 @@ const initialValue = {
 };
 
 const defaultOptions: UseUndoRedoOptions = {
-    maxHistorySize: 100,
-    enableShortcuts: true,
-  };
+  maxHistorySize: 100,
+  enableShortcuts: true,
+};
 
 export const undoRedoContext = createContext<undoRedoContextType>(initialValue);
 
 export function UndoRedoProvider({ children }) {
-    const { tabId, flows } = useContext(TabsContext);
+  const { tabId, flows } = useContext(TabsContext);
 
-    const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
-    const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
-    const [tabIndex, setTabIndex] = useState(flows.findIndex((f) => f.id === tabId));
-  
-    useEffect(() => {
-      // whenever the flows variable changes, we need to add one array to the past and future states
-      setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
-      setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
-      setTabIndex(flows.findIndex((f) => f.id === tabId));
+  const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
+  const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));
+  const [tabIndex, setTabIndex] = useState(
+    flows.findIndex((f) => f.id === tabId)
+  );
 
-    }, [flows, tabId]);
-  
-    const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
-  
-    const takeSnapshot = useCallback(() => {
-      // push the current graph to the past state
-      console.log(past);
-      console.log(tabIndex);
+  useEffect(() => {
+    // whenever the flows variable changes, we need to add one array to the past and future states
+    setPast((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
+    setFuture((old) => flows.map((f, i) => (old[i] ? old[i] : [])));
+    setTabIndex(flows.findIndex((f) => f.id === tabId));
+  }, [flows, tabId]);
+
+  const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
+
+  const takeSnapshot = useCallback(() => {
+    // push the current graph to the past state
+    console.log(past);
+    console.log(tabIndex);
+    setPast((old) => {
+      let newPast = cloneDeep(old);
+      newPast[tabIndex] = old[tabIndex].slice(
+        old[tabIndex].length - defaultOptions.maxHistorySize + 1,
+        old[tabIndex].length
+      );
+      newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+      return newPast;
+    });
+
+    // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
+    setFuture((old) => {
+      let newFuture = cloneDeep(old);
+      newFuture[tabIndex] = [];
+      return newFuture;
+    });
+  }, [getNodes, getEdges, past, future, flows, tabId, setPast, setFuture]);
+
+  const undo = useCallback(() => {
+    // get the last state that we want to go back to
+    const pastState = past[tabIndex][past[tabIndex].length - 1];
+
+    if (pastState) {
+      // first we remove the state from the history
       setPast((old) => {
         let newPast = cloneDeep(old);
-        newPast[tabIndex] = old[tabIndex].slice(
-          old[tabIndex].length - defaultOptions.maxHistorySize + 1,
-          old[tabIndex].length
-        );
+        newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+        return newPast;
+      });
+      // we store the current graph for the redo operation
+      setFuture((old) => {
+        let newFuture = cloneDeep(old);
+        newFuture[tabIndex] = old[tabIndex];
+        newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+        return newFuture;
+      });
+      // now we can set the graph to the past state
+      setNodes(pastState.nodes);
+      setEdges(pastState.edges);
+    }
+  }, [
+    setNodes,
+    setEdges,
+    getNodes,
+    getEdges,
+    future,
+    past,
+    setFuture,
+    setPast,
+    tabIndex,
+  ]);
+
+  const redo = useCallback(() => {
+    const futureState = future[tabIndex][future[tabIndex].length - 1];
+
+    if (futureState) {
+      setFuture((old) => {
+        let newFuture = cloneDeep(old);
+        newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+        return newFuture;
+      });
+      setPast((old) => {
+        let newPast = cloneDeep(old);
+        newPast[tabIndex] = old[tabIndex];
         newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
         return newPast;
       });
-  
-      // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
-      setFuture((old) => {
-        let newFuture = cloneDeep(old);
-        newFuture[tabIndex] = [];
-        return newFuture;
-      });
-    }, [
-      getNodes,
-      getEdges,
-      past,
-      future,
-      flows,
-      tabId,
-      setPast,
-      setFuture,
-    ]);
-  
-    const undo = useCallback(() => {
-      // get the last state that we want to go back to
-      const pastState = past[tabIndex][past[tabIndex].length - 1];
-  
-      if (pastState) {
-        // first we remove the state from the history
-        setPast((old) => {
-          let newPast = cloneDeep(old);
-          newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
-          return newPast;
-        });
-        // we store the current graph for the redo operation
-        setFuture((old) => {
-          let newFuture = cloneDeep(old);
-          newFuture[tabIndex] = old[tabIndex];
-          newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
-          return newFuture;
-        });
-        // now we can set the graph to the past state
-        setNodes(pastState.nodes);
-        setEdges(pastState.edges);
+      setNodes(futureState.nodes);
+      setEdges(futureState.edges);
+    }
+  }, [
+    future,
+    past,
+    setFuture,
+    setPast,
+    setNodes,
+    setEdges,
+    getNodes,
+    getEdges,
+    future,
+    tabIndex,
+  ]);
+
+  useEffect(() => {
+    // this effect is used to attach the global event handlers
+    if (!defaultOptions.enableShortcuts) {
+      return;
+    }
+
+    const keyDownHandler = (event: KeyboardEvent) => {
+      if (
+        event.key === "z" &&
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey
+      ) {
+        redo();
+      } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault(); // prevent the default action
+        redo();
+      } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
+        undo();
       }
-    }, [
-      setNodes,
-      setEdges,
-      getNodes,
-      getEdges,
-      future,
-      past,
-      setFuture,
-      setPast,
-      tabIndex,
-    ]);
-  
-    const redo = useCallback(() => {
-      const futureState = future[tabIndex][future[tabIndex].length - 1];
-  
-      if (futureState) {
-        setFuture((old) => {
-          let newFuture = cloneDeep(old);
-          newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
-          return newFuture;
-        });
-        setPast((old) => {
-          let newPast = cloneDeep(old);
-          newPast[tabIndex] = old[tabIndex];
-          newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
-          return newPast;
-        });
-        setNodes(futureState.nodes);
-        setEdges(futureState.edges);
-      }
-    }, [
-      future,
-      past,
-      setFuture,
-      setPast,
-      setNodes,
-      setEdges,
-      getNodes,
-      getEdges,
-      future,
-      tabIndex,
-    ]);
-  
-    useEffect(() => {
-      // this effect is used to attach the global event handlers
-      if (!defaultOptions.enableShortcuts) {
-        return;
-      }
-  
-      const keyDownHandler = (event: KeyboardEvent) => {
-        if (
-          event.key === "z" &&
-          (event.ctrlKey || event.metaKey) &&
-          event.shiftKey
-        ) {
-          redo();
-        } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
-          event.preventDefault(); // prevent the default action
-          redo();
-        } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
-          undo();
-        }
-      };
-  
-      document.addEventListener("keydown", keyDownHandler);
-  
-      return () => {
-        document.removeEventListener("keydown", keyDownHandler);
-      };
-    }, [undo, redo]);
+    };
+
+    document.addEventListener("keydown", keyDownHandler);
+
+    return () => {
+      document.removeEventListener("keydown", keyDownHandler);
+    };
+  }, [undo, redo]);
   return (
     <undoRedoContext.Provider
       value={{
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 28175682e..39b4b8e62 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -96,7 +96,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Node</span>
-            <Edit 
+            <Edit
               className="h-5 w-5 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
@@ -172,7 +172,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     }
                                     onChange={(t: string[]) => {
                                       data.node.template[n].value = t;
-                                      
                                     }}
                                   />
                                 ) : data.node.template[n].multiline ? (
@@ -182,7 +181,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t: string) => {
                                       data.node.template[n].value = t;
-                                      
                                     }}
                                   />
                                 ) : (
@@ -195,7 +193,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                     value={data.node.template[n].value ?? ""}
                                     onChange={(t) => {
                                       data.node.template[n].value = t;
-                                      
                                     }}
                                   />
                                 )}
@@ -208,7 +205,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   setEnabled={(e) => {
                                     data.node.template[n].value = e;
                                     setEnabled(e);
-                                    
                                   }}
                                   disabled={false}
                                 />
@@ -221,7 +217,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t) => {
                                     data.node.template[n].value = t;
-                                    
                                   }}
                                 />
                               </div>
@@ -249,7 +244,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t) => {
                                     data.node.template[n].value = t;
-                                    
                                   }}
                                 />
                               </div>
@@ -266,7 +260,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   suffixes={data.node.template[n].suffixes}
                                   onFileChange={(t: string) => {
                                     data.node.template[n].content = t;
-                                    
                                   }}
                                 ></InputFileComponent>
                               </div>
@@ -278,7 +271,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                                   value={data.node.template[n].value ?? ""}
                                   onChange={(t: string) => {
                                     data.node.template[n].value = t;
-                                    
                                   }}
                                 />
                               </div>
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index e8ae74aec..f5f0fb668 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -70,7 +70,6 @@ export default function ModalField({
               }
               onChange={(t: string[]) => {
                 data.node.template[name].value = t;
-                
               }}
             />
           ) : data.node.template[name].multiline ? (
@@ -79,7 +78,6 @@ export default function ModalField({
               value={data.node.template[name].value ?? ""}
               onChange={(t: string) => {
                 data.node.template[name].value = t;
-                
               }}
             />
           ) : (
@@ -89,7 +87,6 @@ export default function ModalField({
               value={data.node.template[name].value ?? ""}
               onChange={(t) => {
                 data.node.template[name].value = t;
-                
               }}
             />
           )}
@@ -103,7 +100,6 @@ export default function ModalField({
             setEnabled={(t) => {
               data.node.template[name].value = t;
               setEnabled(t);
-              
             }}
           />
         </div>
@@ -114,7 +110,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
@@ -133,7 +128,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
@@ -149,7 +143,6 @@ export default function ModalField({
             suffixes={data.node.template[name].suffixes}
             onFileChange={(t: string) => {
               data.node.template[name].content = t;
-              
             }}
           ></InputFileComponent>
         </div>
@@ -160,7 +153,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
@@ -171,7 +163,6 @@ export default function ModalField({
             value={data.node.template[name].value ?? ""}
             onChange={(t: string) => {
               data.node.template[name].value = t;
-              
             }}
           />
         </div>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index a5771dd92..d60bebb72 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -20,6 +20,7 @@ import EditFlowSettings from "../../components/nameInputComponent";
 import { Label } from "../../components/ui/label";
 import { Input } from "../../components/ui/input";
 import { Textarea } from "../../components/ui/textarea";
+import { Download } from "lucide-react";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -48,7 +49,7 @@ export default function ExportModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
-            <ArrowDownTrayIcon
+            <Download
               className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
               aria-hidden="true"
             />
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 6b8322531..10f1de007 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -85,24 +85,33 @@ export default function CommunityPage() {
         </div>
       </div>
       <span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
-      Discover and learn from shared examples by the LangFlow community. We welcome new example contributions that can help our community explore new and powerful features.
+        Discover and learn from shared examples by the LangFlow community. We
+        welcome new example contributions that can help our community explore
+        new and powerful features.
       </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
-            <CardComponent key={idx} flow={flow} id={flow.id} button={<Button
-              variant="outline"
-              size="sm"
-              className="whitespace-nowrap "
-              onClick={() => {
-                addFlow(flow, true).then((id) => {
-                  navigate("/flow/" + id);
-                });
-              }}
-            >
-              <GitFork className="w-4 mr-2" />
-              Fork Example
-            </Button>}/>
+            <CardComponent
+              key={idx}
+              flow={flow}
+              id={flow.id}
+              button={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                  onClick={() => {
+                    addFlow(flow, true).then((id) => {
+                      navigate("/flow/" + id);
+                    });
+                  }}
+                >
+                  <GitFork className="w-4 mr-2" />
+                  Fork Example
+                </Button>
+              }
+            />
           ))}
       </div>
     </div>
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index a9012ca68..33dc79492 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -317,53 +317,53 @@ export default function Page({ flow }: { flow: FlowType }) {
           <div className="w-full h-full" ref={reactFlowWrapper}>
             {Object.keys(templates).length > 0 &&
             Object.keys(types).length > 0 ? (
-                <div className="w-full h-full">
-                  <ReactFlow
-                    nodes={nodes}
-                    onMove={() => {
-                      updateFlow({
-                        ...flow,
-                        data: reactFlowInstance.toObject(),
-                      });
-                    }}
-                    edges={edges}
-                    onPaneClick={() => {
-                      setDisableCopyPaste(false);
-                    }}
-                    onPaneMouseLeave={() => {
-                      setDisableCopyPaste(true);
-                    }}
-                    onNodesChange={onNodesChange}
-                    onEdgesChange={onEdgesChangeMod}
-                    onConnect={onConnect}
-                    disableKeyboardA11y={true}
-                    onLoad={setReactFlowInstance}
-                    onInit={setReactFlowInstance}
-                    nodeTypes={nodeTypes}
-                    onEdgeUpdate={onEdgeUpdate}
-                    onEdgeUpdateStart={onEdgeUpdateStart}
-                    onEdgeUpdateEnd={onEdgeUpdateEnd}
-                    onNodeDragStart={onNodeDragStart}
-                    onSelectionDragStart={onSelectionDragStart}
-                    onSelectionEnd={onSelectionEnd}
-                    onSelectionStart={onSelectionStart}
-                    onEdgesDelete={onEdgesDelete}
-                    connectionLineComponent={ConnectionLineComponent}
-                    onDragOver={onDragOver}
-                    onDrop={onDrop}
-                    onNodesDelete={onDelete}
-                    onSelectionChange={onSelectionChange}
-                    nodesDraggable={!disableCopyPaste}
-                    panOnDrag={!disableCopyPaste}
-                    zoomOnDoubleClick={!disableCopyPaste}
-                    selectNodesOnDrag={false}
-                    className="theme-attribution"
-                  >
-                    <Background className="dark:bg-gray-900" />
-                    <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
-                  </ReactFlow>
-                  <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
-                </div>
+              <div className="w-full h-full">
+                <ReactFlow
+                  nodes={nodes}
+                  onMove={() => {
+                    updateFlow({
+                      ...flow,
+                      data: reactFlowInstance.toObject(),
+                    });
+                  }}
+                  edges={edges}
+                  onPaneClick={() => {
+                    setDisableCopyPaste(false);
+                  }}
+                  onPaneMouseLeave={() => {
+                    setDisableCopyPaste(true);
+                  }}
+                  onNodesChange={onNodesChange}
+                  onEdgesChange={onEdgesChangeMod}
+                  onConnect={onConnect}
+                  disableKeyboardA11y={true}
+                  onLoad={setReactFlowInstance}
+                  onInit={setReactFlowInstance}
+                  nodeTypes={nodeTypes}
+                  onEdgeUpdate={onEdgeUpdate}
+                  onEdgeUpdateStart={onEdgeUpdateStart}
+                  onEdgeUpdateEnd={onEdgeUpdateEnd}
+                  onNodeDragStart={onNodeDragStart}
+                  onSelectionDragStart={onSelectionDragStart}
+                  onSelectionEnd={onSelectionEnd}
+                  onSelectionStart={onSelectionStart}
+                  onEdgesDelete={onEdgesDelete}
+                  connectionLineComponent={ConnectionLineComponent}
+                  onDragOver={onDragOver}
+                  onDrop={onDrop}
+                  onNodesDelete={onDelete}
+                  onSelectionChange={onSelectionChange}
+                  nodesDraggable={!disableCopyPaste}
+                  panOnDrag={!disableCopyPaste}
+                  zoomOnDoubleClick={!disableCopyPaste}
+                  selectNodesOnDrag={false}
+                  className="theme-attribution"
+                >
+                  <Background className="dark:bg-gray-900" />
+                  <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>
+                </ReactFlow>
+                <Chat flow={flow} reactFlowInstance={reactFlowInstance} />
+              </div>
             ) : (
               <></>
             )}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index a6ffc026d..61eb83ce4 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/src/frontend/src/pages/FlowPage/index.tsx
@@ -3,17 +3,19 @@ import Page from "./components/PageComponent";
 import { TabsContext } from "../../contexts/tabsContext";
 import { useParams } from "react-router-dom";
 
-export default function FlowPage(){
+export default function FlowPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);
-  const {id} = useParams();
+  const { id } = useParams();
   useEffect(() => {
     setTabId(id);
-  }, [id])
+  }, [id]);
   return (
     <div className="h-full w-full overflow-hidden">
-    {flows.length > 0 && tabId !== "" && flows.findIndex(flow => flow.id === tabId) !== -1 &&
-    <Page flow={flows.find(flow => flow.id === tabId)} />
-    }
+      {flows.length > 0 &&
+        tabId !== "" &&
+        flows.findIndex((flow) => flow.id === tabId) !== -1 && (
+          <Page flow={flows.find((flow) => flow.id === tabId)} />
+        )}
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index d1fe7a76a..c9c50bb27 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,18 +1,18 @@
-import { Route, Routes } from "react-router-dom"
+import { Route, Routes } from "react-router-dom";
 import HomePage from "./pages/MainPage";
 import FlowPage from "./pages/FlowPage";
 import CommunityPage from "./pages/CommunityPage";
 
 const Router = () => {
-    return(
-         <Routes>
-             <Route path="/" element={<HomePage/>}/>
-             <Route path="/community" element={<CommunityPage/>}/>
-             <Route path="/flow/:id/">
-                <Route path="" element={<FlowPage/>}/>
-            </Route>
-        </Routes>
-    )
- }
- 
- export default Router;
\ No newline at end of file
+  return (
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/community" element={<CommunityPage />} />
+      <Route path="/flow/:id/">
+        <Route path="" element={<FlowPage />} />
+      </Route>
+    </Routes>
+  );
+};
+
+export default Router;