Formatting changes

src/backend/langflow/lcserve.py

@@ -3,9 +3,9 @@
 import os
 
 # Use the JCLOUD_WORKSPACE for db URL if it's provided by JCloud.
-if 'JCLOUD_WORKSPACE' in os.environ:
+if "JCLOUD_WORKSPACE" in os.environ:
     os.environ[
-        'LANGFLOW_DATABASE_URL'
+        "LANGFLOW_DATABASE_URL"
     ] = f"sqlite:///{os.environ['JCLOUD_WORKSPACE']}/langflow.db"
 
 from langflow.main import setup_app

src/frontend/src/App.tsx

@@ -118,7 +118,7 @@ export default function App() {
 
   const removeAlert = (id: string) => {
     setAlertsList((prevAlertsList) =>
-      prevAlertsList.filter((alert) => alert.id !== id),
+      prevAlertsList.filter((alert) => alert.id !== id)
     );
   };
 
@@ -138,10 +138,7 @@ export default function App() {
         <Router />
       </ErrorBoundary>
       <div></div>
-      <div
+      <div className="app-div" style={{ zIndex: 999 }}>
-        className="app-div"
-        style={{ zIndex: 999 }}
-      >
         {alertsList.map((alert) => (
           <div key={alert.id}>
             {alert.type === "error" ? (

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -169,9 +169,7 @@ export default function GenericNode({
         </div>
 
         <div className="generic-node-desc">
-          <div className="generic-node-desc-text">
+          <div className="generic-node-desc-text">{data.node.description}</div>
-            {data.node.description}
-          </div>
 
           <>
             {Object.keys(data.node.template)

src/frontend/src/alerts/error/index.tsx

@@ -43,12 +43,13 @@ export default function ErrorAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle className="error-build-message-circle" aria-hidden="true" />
+            <XCircle
+              className="error-build-message-circle"
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3">
-            <h3 className="error-build-foreground">
+            <h3 className="error-build-foreground">{title}</h3>
-              {title}
-            </h3>
             {list.length !== 0 ? (
               <div className="error-build-message-div">
                 <ul className="error-build-message-list">

src/frontend/src/alerts/success/index.tsx

@@ -38,15 +38,10 @@ export default function SuccessAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <CheckCircle2
+            <CheckCircle2 className="success-alert-icon" aria-hidden="true" />
-              className="success-alert-icon"
-              aria-hidden="true"
-            />
           </div>
           <div className="ml-3">
-            <p className="success-alert-message">
+            <p className="success-alert-message">{title}</p>
-              {title}
-            </p>
           </div>
         </div>
       </div>

src/frontend/src/components/AccordionComponent/index.tsx

@@ -18,7 +18,7 @@ export default function AccordionComponent({
   open = [],
 }: AccordionComponentType) {
   const [value, setValue] = useState(
-    open.length == 0 ? "" : getOpenAccordion(),
+    open.length == 0 ? "" : getOpenAccordion()
   );
 
   function getOpenAccordion() {

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -47,9 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
         <div className="edit-flow-arrangement">
           <span className="font-medium">Name</span>{" "}
           {isMaxLength && (
-            <span className="edit-flow-span">
+            <span className="edit-flow-span">Character limit reached</span>
-              Character limit reached
-            </span>
           )}
         </div>
         <Input

src/frontend/src/components/ExtraSidebarComponent/index.tsx

@@ -16,9 +16,7 @@ export default function ExtraSidebar() {
   return (
     <>
       <aside
-        className={` ${
+        className={` ${isStackedOpen ? "w-52" : "w-0 "} unused-side-bar-aside`}
-          isStackedOpen ? "w-52" : "w-0 "
-        } unused-side-bar-aside`}
       >
         <div className="unused-side-bar-arrangement">
           <div className="unused-side-bar-division">
@@ -71,7 +69,9 @@ export default function ExtraSidebar() {
                               <span className="flex-1">{item.name}</span>
                               <svg
                                 className={classNames(
-                                  open ? "unused-side-bar-svg-true" : "text-ring",
+                                  open
+                                    ? "unused-side-bar-svg-true"
+                                    : "text-ring",
                                   "unused-side-bar-svg"
                                 )}
                                 viewBox="0 0 20 20"

src/frontend/src/components/cardComponent/index.tsx

@@ -45,15 +45,16 @@ export const CardComponent = ({
               gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
             }
           ></span>
-          <span className="card-component-title-size">
+          <span className="card-component-title-size">{flow.name}</span>
-            {flow.name}
-          </span>
           {onDelete && (
             <Dialog>
               <DialogTrigger asChild>
-              <button className="card-component-delete-button" onClick={onDelete}>
+                <button
-                <Trash2 className="card-component-delete-icon" />
+                  className="card-component-delete-button"
-              </button>
+                  onClick={onDelete}
+                >
+                  <Trash2 className="card-component-delete-icon" />
+                </button>
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -137,7 +137,7 @@ export default function BuildTrigger({
 
   async function enforceMinimumLoadingTime(
     startTime: number,
-    minimumLoadingTime: number,
+    minimumLoadingTime: number
   ) {
     const elapsedTime = Date.now() - startTime;
     const remainingTime = minimumLoadingTime - elapsedTime;

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -15,7 +15,7 @@ export default function CodeAreaComponent({
   setNodeClass,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(
-    typeof value == "string" ? value : JSON.stringify(value),
+    typeof value == "string" ? value : JSON.stringify(value)
   );
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {

src/frontend/src/components/dropdownComponent/index.tsx

@@ -45,11 +45,7 @@ export default function Dropdown({
                 <span className="dropdown-component-display">
                   {internalValue}
                 </span>
-                <span
+                <span className={"dropdown-component-arrow"}>
-                  className={
-                    "dropdown-component-arrow"
-                  }
-                >
                   <ChevronsUpDown
                     className="dropdown-component-arrow-color"
                     aria-hidden="true"

src/frontend/src/components/floatComponent/index.tsx

@@ -30,11 +30,7 @@ export default function FloatComponent({
   }, [closePopUp]);
 
   return (
-    <div
+    <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
-      className={
-        "w-full " + (disabled ? "float-component-pointer" : "")
-      }
-    >
       <input
         onFocus={() => {
           if (disableCopyPaste) setDisableCopyPaste(true);

src/frontend/src/components/headerComponent/index.tsx

@@ -79,9 +79,7 @@ export default function Header() {
           >
             <FaGithub className="mr-2 h-5 w-5" />
             Star
-            <div className="header-github-display">
+            <div className="header-github-display">{stars}</div>
-              {stars}
-            </div>
           </a>
           <a
             href="https://twitter.com/logspace_ai"
@@ -133,9 +131,7 @@ export default function Header() {
               );
             }}
           >
-            {notificationCenter && (
+            {notificationCenter && <div className="header-notifications"></div>}
-              <div className="header-notifications"></div>
-            )}
             <Bell className="side-bar-button-size" aria-hidden="true" />
           </button>
         </div>

src/frontend/src/components/inputComponent/index.tsx

@@ -29,13 +29,7 @@ export default function InputComponent({
   }, [closePopUp]);
 
   return (
-    <div
+    <div className={disabled ? "input-component-div" : "relative"}>
-      className={
-        disabled
-          ? "input-component-div"
-          : "relative"
-      }
-    >
       <input
         value={myValue}
         onFocus={() => {

src/frontend/src/components/inputFileComponent/index.tsx

@@ -92,11 +92,7 @@ export default function InputFileComponent({
   };
 
   return (
-    <div
+    <div className={disabled ? "input-component-div" : "w-full"}>
-      className={
-        disabled ? "input-component-div" : "w-full"
-      }
-    >
       <div className="input-file-component">
         <span
           onClick={handleButtonClick}

src/frontend/src/components/textAreaComponent/index.tsx

@@ -60,7 +60,7 @@ export default function TextAreaComponent({
                   setMyValue(t);
                   onChange(t);
                 }}
-              />,
+              />
             );
           }}
         >

src/frontend/src/components/ui/accordion.tsx

@@ -47,7 +47,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className,
+      className
     )}
     {...props}
   >

src/frontend/src/components/ui/badge.tsx

@@ -25,7 +25,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
+  }
 );
 
 export interface BadgeProps

src/frontend/src/components/ui/button.tsx

@@ -30,7 +30,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -49,7 +49,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  },
+  }
 );
 Button.displayName = "Button";
 

src/frontend/src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className,
+      className
     )}
     {...props}
   >

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -28,7 +28,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   >
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className,
+      className
     )}
     {...props}
   />
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
+        className
       )}
       {...props}
     />
@@ -84,7 +84,7 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     checked={checked}
     {...props}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     {...props}
   >
@@ -148,7 +148,7 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 pl-2 text-sm font-semibold",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />

src/frontend/src/components/ui/input.tsx

@@ -11,13 +11,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+          className
         )}
         ref={ref}
         {...props}
       />
     );
-  },
+  }
 );
 Input.displayName = "Input";
 

src/frontend/src/components/ui/label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 
 const Label = React.forwardRef<

src/frontend/src/components/ui/menubar.tsx

@@ -24,7 +24,7 @@ const Menubar = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className,
+      className
     )}
     {...props}
   />
@@ -39,7 +39,7 @@ const MenubarTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className,
+      className
     )}
     {...props}
   />
@@ -57,7 +57,7 @@ const MenubarSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   >
@@ -75,7 +75,7 @@ const MenubarSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className,
+      className
     )}
     {...props}
   />
@@ -88,7 +88,7 @@ const MenubarContent = React.forwardRef<
 >(
   (
     { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref,
+    ref
   ) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
@@ -98,12 +98,12 @@ const MenubarContent = React.forwardRef<
         sideOffset={sideOffset}
         className={cn(
           "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in slide-in-from-top-1",
-          className,
+          className
         )}
         {...props}
       />
     </MenubarPrimitive.Portal>
-  ),
+  )
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
@@ -118,7 +118,7 @@ const MenubarItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
@@ -133,7 +133,7 @@ const MenubarCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     checked={checked}
     {...props}
@@ -156,7 +156,7 @@ const MenubarRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
+      className
     )}
     {...props}
   >
@@ -181,7 +181,7 @@ const MenubarLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className,
+      className
     )}
     {...props}
   />
@@ -208,7 +208,7 @@ const MenubarShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className,
+        className
       )}
       {...props}
     />

src/frontend/src/components/ui/progress.tsx

@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className,
+      className
     )}
     {...props}
   >

src/frontend/src/components/ui/separator.tsx

@@ -10,7 +10,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
+    ref
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -19,11 +19,11 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className,
+        className
       )}
       {...props}
     />
-  ),
+  )
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 

src/frontend/src/components/ui/table.tsx

@@ -55,7 +55,7 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className,
+      className
     )}
     {...props}
   />
@@ -70,7 +70,7 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className,
+      className
     )}
     {...props}
   />

src/frontend/src/components/ui/textarea.tsx

@@ -10,13 +10,13 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+          className
         )}
         ref={ref}
         {...props}
       />
     );
-  },
+  }
 );
 Textarea.displayName = "Textarea";
 

src/frontend/src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className,
+      className
     )}
     {...props}
   />

src/frontend/src/contexts/alertContext.tsx

@@ -132,7 +132,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   function removeFromNotificationList(index: string) {
     // set the notification list to a new array that filters out the alert with the matching id
     setNotificationList((prevAlertsList) =>
-      prevAlertsList.filter((alert) => alert.id !== index),
+      prevAlertsList.filter((alert) => alert.id !== index)
     );
   }
   return (

src/frontend/src/contexts/darkContext.tsx

@@ -14,7 +14,7 @@ export const darkContext = createContext<darkContextType>(initialValue);
 
 export function DarkProvider({ children }) {
   const [dark, setDark] = useState(
-    JSON.parse(window.localStorage.getItem("isDark")) ?? false,
+    JSON.parse(window.localStorage.getItem("isDark")) ?? false
   );
   useEffect(() => {
     if (dark) {

src/frontend/src/contexts/locationContext.tsx

@@ -53,7 +53,7 @@ export const locationContext = createContext<locationContextType>(initialValue);
 export function LocationProvider({ children }: { children: ReactNode }) {
   const [current, setCurrent] = useState(initialValue.current);
   const [isStackedOpen, setIsStackedOpen] = useState(
-    initialValue.isStackedOpen,
+    initialValue.isStackedOpen
   );
   const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
   const [extraNavigation, setExtraNavigation] = useState({ title: "" });

src/frontend/src/contexts/typesContext.tsx

@@ -47,7 +47,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
                 acc[c] = result.data[curr][c];
               });
               return acc;
-            }, {}),
+            }, {})
           );
           // Set the types by reducing over the keys of the result data and updating the accumulator.
           setTypes(
@@ -62,10 +62,10 @@ export function TypesProvider({ children }: { children: ReactNode }) {
                     result.data[curr][c].base_classes?.forEach((b) => {
                       acc[b] = curr;
                     });
-                  },
+                  }
                 );
                 return acc;
-              }, {}),
+              }, {})
           );
         }
         // Clear the interval if successful.
@@ -99,12 +99,12 @@ export function TypesProvider({ children }: { children: ReactNode }) {
 
   function deleteNode(idx: string) {
     reactFlowInstance.setNodes(
-      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx),
+      reactFlowInstance.getNodes().filter((n: Node) => n.id !== idx)
     );
     reactFlowInstance.setEdges(
       reactFlowInstance
         .getEdges()
-        .filter((ns) => ns.source !== idx && ns.target !== idx),
+        .filter((ns) => ns.source !== idx && ns.target !== idx)
     );
   }
   return (

src/frontend/src/contexts/undoRedoContext.tsx

@@ -52,7 +52,7 @@ export function UndoRedoProvider({ children }) {
   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.findIndex((f) => f.id === tabId)
   );
 
   useEffect(() => {
@@ -70,7 +70,7 @@ export function UndoRedoProvider({ children }) {
       let newPast = cloneDeep(old);
       newPast[tabIndex] = old[tabIndex].slice(
         old[tabIndex].length - defaultOptions.maxHistorySize + 1,
-        old[tabIndex].length,
+        old[tabIndex].length
       );
       newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
       return newPast;

src/frontend/src/controllers/API/index.ts

@@ -25,7 +25,7 @@ const GITHUB_API_URL = "https://api.github.com";
 export async function getRepoStars(owner, repo) {
   try {
     const response = await axios.get(
-      `${GITHUB_API_URL}/repos/${owner}/${repo}`,
+      `${GITHUB_API_URL}/repos/${owner}/${repo}`
     );
     return response.data.stargazers_count;
   } catch (error) {
@@ -45,7 +45,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string,
+  code: string
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await axios.post("/api/v1/validate/code", { code });
 }
@@ -128,7 +128,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType,
+  updatedFlow: FlowType
 ): Promise<FlowType> {
   try {
     const response = await axios.patch(`/api/v1/flows/${updatedFlow.id}`, {
@@ -304,7 +304,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string,
+  flowId: string
 ): Promise<BuildStatusTypeAPI> {
   return await axios.get(`/api/v1/build/${flowId}/status`);
 }
@@ -317,7 +317,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType,
+  flow: FlowType
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
 }
@@ -333,7 +333,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string,
+  id: string
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);

src/frontend/src/icons/AzLogo/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as AzSVG } from "./az_logo.svg";
 export const AzIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <AzSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/Bing/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as BingSVG } from "./bing.svg";
 export const BingIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <BingSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/FacebookMessenger/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as FacebookMessengerSVG } from "./Facebook_Messenger_log
 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <FacebookMessengerSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/IFixIt/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as IFixItSVG } from "./ifixit-seeklogo.com.svg";
 export const IFixIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <IFixItSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/Meta/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as MetaSVG } from "./meta-icon.svg";
 export const MetaIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <MetaSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/Searx/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as SearxSVG } from "./Searx_logo.svg";
 export const SearxIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SearxSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/Slack/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as SlackSVG } from "./slack-icon.svg";
 export const SlackIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <SlackSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/icons/Word/index.tsx

@@ -4,5 +4,5 @@ import { ReactComponent as WordSVG } from "./word.svg";
 export const WordIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return <WordSVG ref={ref} {...props} />;
-  },
+  }
 );

src/frontend/src/index.tsx

@@ -8,13 +8,13 @@ import ContextWrapper from "./contexts";
 import "./index.css";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <ContextWrapper>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </ContextWrapper>,
+  </ContextWrapper>
 );
 reportWebVitals();

src/frontend/src/modals/ApiModal/index.tsx

@@ -158,7 +158,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
               t.data.node.template[n].type === "code" ||
               t.data.node.template[n].type === "prompt" ||
               t.data.node.template[n].type === "file" ||
-              t.data.node.template[n].type === "int"),
+              t.data.node.template[n].type === "int")
         )
         .map((n, i) => {
           arrNodesWithValues.push(t["id"]);
@@ -182,7 +182,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
 
     const existingTweak = tweak.current.find((element) =>
-      element.hasOwnProperty(tw),
+      element.hasOwnProperty(tw)
     );
 
     if (existingTweak) {
@@ -329,7 +329,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                         "h-[60vh] w-full rounded-lg bg-muted",
                         1 == 1
                           ? "overflow-scroll overflow-x-hidden custom-scroll"
-                          : "overflow-hidden",
+                          : "overflow-hidden"
                       )}
                     >
                       {flow["data"]["nodes"].map((t: any, index) => (
@@ -370,7 +370,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                             t.data.node.template[n].type ===
                                               "file" ||
                                             t.data.node.template[n].type ===
-                                              "int"),
+                                              "int")
                                       )
                                       .map((n, i) => {
                                         //console.log(t.data.node.template[n]);
@@ -413,7 +413,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n],
+                                                              .template[n]
                                                           );
                                                         }}
                                                       />
@@ -424,7 +424,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         content={buildContent(
                                                           t.data.node.template[
                                                             n
-                                                          ].value,
+                                                          ].value
                                                         )}
                                                       >
                                                         <div>
@@ -437,14 +437,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                                 .value,
                                                               t.data,
                                                               t.data.node
-                                                                .template[n],
+                                                                .template[n]
                                                             )}
                                                             onChange={(k) => {
                                                               buildTweakObject(
                                                                 t["data"]["id"],
                                                                 k,
                                                                 t.data.node
-                                                                  .template[n],
+                                                                  .template[n]
                                                               );
                                                             }}
                                                           />
@@ -466,14 +466,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n],
+                                                              .template[n]
                                                           );
                                                         }}
                                                       />
@@ -498,7 +498,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           e,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         );
                                                       }}
                                                       size="small"
@@ -514,8 +514,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n],
+                                                        t.data.node.template[n]
-                                                      ),
+                                                      )
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -528,7 +528,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           ].value ?? ""
                                                         }
                                                         onChange={(
-                                                          k: any,
+                                                          k: any
                                                         ) => {}}
                                                         fileTypes={
                                                           t.data.node.template[
@@ -541,7 +541,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           ].suffixes
                                                         }
                                                         onFileChange={(
-                                                          k: any,
+                                                          k: any
                                                         ) => {}}
                                                       ></InputFileComponent>
                                                     </div>
@@ -556,7 +556,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n],
+                                                        t.data.node.template[n]
                                                       )}
                                                       onChange={(k) => {
                                                         buildTweakObject(
@@ -564,7 +564,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         );
                                                       }}
                                                     />
@@ -587,14 +587,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         );
                                                       }}
                                                       value={getValue(
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n],
+                                                        t.data.node.template[n]
                                                       )}
                                                     ></Dropdown>
                                                   </div>
@@ -608,7 +608,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n],
+                                                        t.data.node.template[n]
                                                       )}
                                                       onChange={(k) => {
                                                         buildTweakObject(
@@ -616,7 +616,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           k,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         );
                                                       }}
                                                     />
@@ -630,8 +630,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n],
+                                                        t.data.node.template[n]
-                                                      ),
+                                                      )
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -645,14 +645,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n],
+                                                              .template[n]
                                                           );
                                                         }}
                                                       />
@@ -667,8 +667,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                         t.data.node.template[n]
                                                           .value,
                                                         t.data,
-                                                        t.data.node.template[n],
+                                                        t.data.node.template[n]
-                                                      ),
+                                                      )
                                                     )}
                                                   >
                                                     <div className="mx-auto">
@@ -682,14 +682,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                                           t.data,
                                                           t.data.node.template[
                                                             n
-                                                          ],
+                                                          ]
                                                         )}
                                                         onChange={(k) => {
                                                           buildTweakObject(
                                                             t["data"]["id"],
                                                             k,
                                                             t.data.node
-                                                              .template[n],
+                                                              .template[n]
                                                           );
                                                         }}
                                                       />

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -47,8 +47,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           data.node.template[t].type === "code" ||
           data.node.template[t].type === "prompt" ||
           data.node.template[t].type === "file" ||
-          data.node.template[t].type === "int"),
+          data.node.template[t].type === "int")
-    ).length,
+    ).length
   );
   const [nodeValue, setNodeValue] = useState(null);
   const { closePopUp } = useContext(PopUpContext);
@@ -91,9 +91,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             {data.node?.description}
             <div className="flex pt-3">
               <Variable className="edit-node-modal-variable "></Variable>
-              <span className="edit-node-modal-span">
+              <span className="edit-node-modal-span">Parameters</span>
-                Parameters
-              </span>
             </div>
           </DialogDescription>
         </DialogHeader>
@@ -104,7 +102,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
               "edit-node-modal-box",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
-                : "overflow-hidden",
+                : "overflow-hidden"
             )}
           >
             {nodeLength > 0 && (
@@ -131,7 +129,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "code" ||
                             data.node.template[t].type === "prompt" ||
                             data.node.template[t].type === "file" ||
-                            data.node.template[t].type === "int"),
+                            data.node.template[t].type === "int")
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-10">

src/frontend/src/modals/NodeModal/components/ModalField/index.tsx

@@ -21,7 +21,7 @@ export default function ModalField({
   index,
 }) {
   const [enabled, setEnabled] = useState(
-    data.node.template[name]?.value ?? false,
+    data.node.template[name]?.value ?? false
   );
   const display =
     type === "str" ||
@@ -41,12 +41,12 @@ export default function ModalField({
           (t) =>
             t.charAt(0) !== "_" &&
             data.node.template[t].advanced &&
-            data.node.template[t].show,
+            data.node.template[t].show
         ).length -
           1 ===
           index
           ? "pb-4"
-          : "",
+          : ""
       )}
     >
       {display && (

src/frontend/src/modals/NodeModal/index.tsx

@@ -83,10 +83,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                       }}
                     />
                     <div className="node-modal-title-div">
-                      <Dialog.Title
+                      <Dialog.Title as="h3" className="node-modal-title">
-                        as="h3"
-                        className="node-modal-title"
-                      >
                         {data.type}
                       </Dialog.Title>
                     </div>
@@ -100,10 +97,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                             (t) =>
                               t.charAt(0) !== "_" &&
                               data.node.template[t].advanced &&
-                              data.node.template[t].show,
+                              data.node.template[t].show
                           ).length > limitScrollFieldsModal
                             ? "overflow-scroll overflow-x-hidden custom-scroll"
-                            : "overflow-hidden",
+                            : "overflow-hidden"
                         )}
                       >
                         <div className="node-modal-template-column">
@@ -112,7 +109,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                               (t) =>
                                 t.charAt(0) !== "_" &&
                                 data.node.template[t].advanced &&
-                                data.node.template[t].show,
+                                data.node.template[t].show
                             )
                             .map((t: string, idx) => {
                               return (

src/frontend/src/modals/chatModal/chatMessage/index.tsx

@@ -35,11 +35,7 @@ export default function ChatMessage({
         chat.isSend ? "bg-background " : "bg-input"
       )}
     >
-      <div
+      <div className={classNames("chat-message-modal-div")}>
-        className={classNames(
-          "chat-message-modal-div"
-        )}
-      >
         {!chat.isSend && (
           <div className="relative h-8 w-8">
             <img

src/frontend/src/modals/chatModal/index.tsx

@@ -362,10 +362,7 @@ export default function ChatModal({
                     <X className="h-5 w-5" />
                   </button>
                 </div>
-                <div
+                <div ref={messagesRef} className="chat-modal-dialog-history">
-                  ref={messagesRef}
-                  className="chat-modal-dialog-history"
-                >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
                       <ChatMessage

src/frontend/src/modals/exportModal/index.tsx

@@ -37,7 +37,7 @@ export default function ExportModal() {
   const [checked, setChecked] = useState(false);
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description,
+    flows.find((f) => f.id === tabId).description
   );
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -27,7 +27,7 @@ export default function FlowSettingsModal() {
   const maxLength = 50;
   const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
   const [description, setDescription] = useState(
-    flows.find((f) => f.id === tabId).description,
+    flows.find((f) => f.id === tabId).description
   );
   function setModalOpen(x: boolean) {
     setOpen(x);

src/frontend/src/modals/formModal/chatMessage/codeBlock/index.tsx

@@ -52,17 +52,11 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
         <span className="code-block-modal-span">{language}</span>
 
         <div className="flex items-center">
-          <button
+          <button className="code-block-modal-button" onClick={copyToClipboard}>
-            className="code-block-modal-button"
-            onClick={copyToClipboard}
-          >
             {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
             {isCopied ? "Copied!" : "Copy code"}
           </button>
-          <button
+          <button className="code-block-modal-button" onClick={downloadAsFile}>
-            className="code-block-modal-button"
-            onClick={downloadAsFile}
-          >
             <IconDownload size={18} />
           </button>
         </div>

src/frontend/src/modals/formModal/fileComponent/index.tsx

@@ -36,10 +36,11 @@ export default function FileCard({ fileName, content, fileType }) {
           className="h-full  w-full rounded-lg"
         />
         {isHovered && (
-          <div
+          <div className={`file-card-modal-image-div `}>
-            className={`file-card-modal-image-div `}
+            <button
-          >
+              className="file-card-modal-image-button "
-            <button className="file-card-modal-image-button " onClick={handleDownload}>
+              onClick={handleDownload}
+            >
               <DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
             </button>
           </div>
@@ -49,10 +50,7 @@ export default function FileCard({ fileName, content, fileType }) {
   }
 
   return (
-    <button
+    <button onClick={handleDownload} className="file-card-modal-button">
-      onClick={handleDownload}
-      className="file-card-modal-button"
-    >
       <div className="file-card-modal-div">
         {" "}
         {fileType === "image" ? (

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -81,7 +81,7 @@ export default function ButtonBox({
           bgColor,
           height,
           width,
-          padding,
+          padding
         )}
       >
         <div
@@ -98,7 +98,7 @@ export default function ButtonBox({
             className={classNames(
               "w-full break-words font-semibold text-background truncate-multiline",
               titleFontSize,
-              marginTop,
+              marginTop
             )}
           >
             {title}

src/frontend/src/modals/importModal/index.tsx

@@ -113,9 +113,7 @@ export default function ImportModal() {
                 size="big"
                 bgColor="bg-medium-emerald "
                 description="Prebuilt Examples"
-                icon={
+                icon={<DocumentDuplicateIcon className="document-icon" />}
-                  <DocumentDuplicateIcon className="document-icon" />
-                }
                 onClick={() => {
                   setShowExamples(true);
                   handleExamples();
@@ -127,9 +125,7 @@ export default function ImportModal() {
                 size="big"
                 bgColor="bg-almost-dark-blue "
                 description="Import from Local"
-                icon={
+                icon={<ComputerDesktopIcon className="document-icon" />}
-                  <ComputerDesktopIcon className="document-icon" />
-                }
                 onClick={() => {
                   uploadFlow();
                   setModalOpen(false);

src/frontend/src/modals/promptModal/index.tsx

@@ -80,10 +80,7 @@ export default function PromptAreaModal({
                       />
                     </div>
                     <div className="node-modal-title-div ">
-                      <Dialog.Title
+                      <Dialog.Title as="h3" className="node-modal-title">
-                        as="h3"
-                        className="node-modal-title"
-                      >
                         Edit Prompt
                       </Dialog.Title>
                     </div>

src/frontend/src/modals/textAreaModal/index.tsx

@@ -79,10 +79,7 @@ export default function TextAreaModal({
                       />
                     </div>
                     <div className="node-modal-title-div">
-                      <Dialog.Title
+                      <Dialog.Title as="h3" className="node-modal-title">
-                        as="h3"
-                        className="node-modal-title"
-                      >
                         Edit text
                       </Dialog.Title>
                     </div>

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -112,10 +112,10 @@ export default function Page({ flow }: { flow: FlowType }) {
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
   const [nodes, setNodes, onNodesChange] = useNodesState(
-    flow.data?.nodes ?? [],
+    flow.data?.nodes ?? []
   );
   const [edges, setEdges, onEdgesChange] = useEdgesState(
-    flow.data?.edges ?? [],
+    flow.data?.edges ?? []
   );
   const { setViewport } = useReactFlow();
   const edgeUpdateSuccessful = useRef(true);
@@ -158,7 +158,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         };
       });
     },
-    [onEdgesChange, setNodes, setTabsState, tabId],
+    [onEdgesChange, setNodes, setTabsState, tabId]
   );
 
   const onNodesChangeMod = useCallback(
@@ -174,7 +174,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         };
       });
     },
-    [onNodesChange, setTabsState, tabId],
+    [onNodesChange, setTabsState, tabId]
   );
 
   const onConnect = useCallback(
@@ -191,15 +191,15 @@ export default function Page({ flow }: { flow: FlowType }) {
                 : "stroke-foreground ",
             animated: params.targetHandle.split("|")[0] === "Text",
           },
-          eds,
+          eds
-        ),
+        )
       );
       setNodes((x) => {
         let newX = _.cloneDeep(x);
         return newX;
       });
     },
-    [setEdges, setNodes, takeSnapshot],
+    [setEdges, setNodes, takeSnapshot]
   );
 
   const onNodeDragStart: NodeDragHandler = useCallback(() => {
@@ -288,7 +288,7 @@ export default function Page({ flow }: { flow: FlowType }) {
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot],
+    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]
   );
 
   useEffect(() => {
@@ -304,12 +304,11 @@ export default function Page({ flow }: { flow: FlowType }) {
       takeSnapshot();
       setEdges(
         edges.filter(
-          (ns) =>
+          (ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id)
-            !mynodes.some((n) => ns.source === n.id || ns.target === n.id),
+        )
-        ),
       );
     },
-    [takeSnapshot, edges, setEdges],
+    [takeSnapshot, edges, setEdges]
   );
 
   const onEdgeUpdateStart = useCallback(() => {
@@ -323,7 +322,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    [],
+    []
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge) => {

src/frontend/src/types/tabs/index.ts

@@ -28,7 +28,7 @@ export type TabsContextType = {
   setTabsState: Dispatch<SetStateAction<TabsState>>;
   paste: (
     selection: { nodes: any; edges: any },
-    position: { x: number; y: number; paneX?: number; paneY?: number },
+    position: { x: number; y: number; paneX?: number; paneY?: number }
   ) => void;
   lastCopiedSelection: { nodes: any; edges: any };
   setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;

src/frontend/src/utils.ts

@@ -492,7 +492,7 @@ export function cn(...inputs: ClassValue[]) {
 export function measureTextHeight(
   text: string,
   width: number,
-  fontSize: number,
+  fontSize: number
 ) {
   const charHeight = fontSize;
   const lineHeight = charHeight * 1.5;
@@ -519,7 +519,7 @@ export function toCamelCase(str: string) {
     .map((word, index) =>
       index === 0
         ? word.toLowerCase()
-        : word[0].toUpperCase() + word.slice(1).toLowerCase(),
+        : word[0].toUpperCase() + word.slice(1).toLowerCase()
     )
     .join("");
 }
@@ -580,7 +580,7 @@ export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
 
 export function isValidConnection(
   { source, target, sourceHandle, targetHandle }: Connection,
-  reactFlowInstance: ReactFlowInstance,
+  reactFlowInstance: ReactFlowInstance
 ) {
   if (
     targetHandle
@@ -634,7 +634,7 @@ export function removeApiKeys(flow: FlowType): FlowType {
 
 export function updateObject<T extends Record<string, any>>(
   reference: T,
-  objectToUpdate: T,
+  objectToUpdate: T
 ): T {
   let clonedObject = _.cloneDeep(objectToUpdate);
   // Loop through each key in the object to update
@@ -665,7 +665,7 @@ export function debounce(func, wait) {
 
 export function updateTemplate(
   reference: APITemplateType,
-  objectToUpdate: APITemplateType,
+  objectToUpdate: APITemplateType
 ): APITemplateType {
   let clonedObject: APITemplateType = _.cloneDeep(reference);
 
@@ -723,7 +723,7 @@ export function toTitleCase(str: string) {
     .map((word, index) => {
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase(),
+          word[0].toUpperCase() + word.slice(1).toLowerCase()
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -735,7 +735,7 @@ export function toTitleCase(str: string) {
     .map((word, index) => {
       if (index === 0) {
         return checkUpperWords(
-          word[0].toUpperCase() + word.slice(1).toLowerCase(),
+          word[0].toUpperCase() + word.slice(1).toLowerCase()
         );
       }
       return checkUpperWords(word.toLowerCase());
@@ -912,7 +912,7 @@ export function buildTweaks(flow) {
 }
 export function validateNode(
   n: NodeType,
-  reactFlowInstance: ReactFlowInstance,
+  reactFlowInstance: ReactFlowInstance
 ): Array<string> {
   if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
     return [
@@ -938,16 +938,16 @@ export function validateNode(
             .some(
               (e) =>
                 e.targetHandle.split("|")[1] === t &&
-                e.targetHandle.split("|")[2] === n.id,
+                e.targetHandle.split("|")[2] === n.id
             )
           ? [
               `${type} is missing ${
                 template.display_name || toNormalCase(template[t].name)
               }.`,
             ]
-          : [],
+          : []
       ),
-    [] as string[],
+    [] as string[]
   );
 }
 
@@ -972,7 +972,7 @@ export function getRandomDescription(): string {
 export function getRandomName(
   retry: number = 0,
   noSpace: boolean = false,
-  maxRetries: number = 3,
+  maxRetries: number = 3
 ): string {
   const left: string[] = ADJECTIVES;
   const right: string[] = NOUNS;