Apply Prettier formatting

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

@@ -1,3 +1,4 @@
+import { title } from "process";
 import { Handle, Position } from "reactflow";
 import ShadTooltip from "../../../../components/shadTooltipComponent";
 import { Button } from "../../../../components/ui/button";
@@ -7,7 +8,6 @@ import {
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn, groupByFamily } from "../../../../utils/utils";
 import HandleTooltips from "../HandleTooltipComponent";
-import { title } from "process";
 
 export default function HandleRenderComponent({
   left,
@@ -21,8 +21,7 @@ export default function HandleRenderComponent({
   colors,
   setFilterEdge,
   showNode,
-} :
-{
+}: {
   left: boolean;
   nodes: any;
   tooltipTitle?: string;
@@ -34,8 +33,7 @@ export default function HandleRenderComponent({
   colors: string[];
   setFilterEdge: any;
   showNode: any;
-}
-) {
+}) {
   return (
     <Button
       unstyled
@@ -79,14 +77,17 @@ export default function HandleRenderComponent({
               style={{
                 background:
                   "conic-gradient(" +
-                  colors.concat(colors[0])
+                  colors
+                    .concat(colors[0])
                     .map(
                       (color, index) =>
                         color +
                         " " +
-                        ((360 / colors.length) * (index) - (360 / (colors.length * 4))) +
+                        ((360 / colors.length) * index -
+                          360 / (colors.length * 4)) +
                         "deg " +
-                        (((360 / colors.length) * (index))+ (360 / (colors.length * 4))) +
+                        ((360 / colors.length) * index +
+                          360 / (colors.length * 4)) +
                         "deg",
                     )
                     .join(" ,") +

src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx

@@ -1,7 +1,10 @@
 import { useEffect } from "react";
 import { LogType, VertexBuildTypeAPI } from "../../types/api";
 
-const useValidationStatusString = (validationStatus: VertexBuildTypeAPI, setValidationString) => {
+const useValidationStatusString = (
+  validationStatus: VertexBuildTypeAPI,
+  setValidationString,
+) => {
   useEffect(() => {
     if (validationStatus?.data?.logs) {
       // if it is not a string turn it into a string

src/frontend/src/components/editFlowSettingsComponent/index.tsx

@@ -2,9 +2,9 @@ import React, { ChangeEvent, useState } from "react";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Textarea } from "../../components/ui/textarea";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { InputProps } from "../../types/components";
 import { cn } from "../../utils/utils";
-import useFlowsManagerStore from "../../stores/flowsManagerStore";
 
 export const EditFlowSettings: React.FC<InputProps> = ({
   name,

src/frontend/src/components/inputListComponent/index.tsx

@@ -32,7 +32,7 @@ export default function InputListComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3 w-full",
+        "flex w-full flex-col gap-3",
       )}
     >
       {value.map((singleValue, idx) => {

src/frontend/src/components/keypairListComponent/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import { KeyPairListComponentType } from "../../types/components";
 
+import { cloneDeep } from "lodash";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
-import { cloneDeep } from "lodash";
 
 export default function KeypairListComponent({
   value,

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -9,5 +9,5 @@ export default function StringReader({
     <TextModal value={string}>
       <span className="truncate">{string}</span>
     </TextModal>
-  )
+  );
 }

src/frontend/src/components/tableComponent/index.tsx

@@ -1,6 +1,7 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import cloneDeep from "lodash";
 import { ElementRef, forwardRef, useRef, useState } from "react";
 import {
   DEFAULT_TABLE_ALERT_MSG,
@@ -13,7 +14,6 @@ import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 import TableOptions from "./components/TableOptions";
 import resetGrid from "./utils/reset-grid-columns";
-import cloneDeep from "lodash";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
@@ -98,7 +98,9 @@ const TableComponent = forwardRef<
       if (props.onGridReady) props.onGridReady(params);
     };
     const onColumnMoved = (params) => {
-      const updatedColumnDefs = cloneDeep(params.columnApi.getAllGridColumns().map((col) => col.getColDef()));
+      const updatedColumnDefs = cloneDeep(
+        params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
+      );
       params.api.setGridOption("columnDefs", updatedColumnDefs);
       if (props.onColumnMoved) props.onColumnMoved(params);
     };
@@ -165,4 +167,3 @@ const TableComponent = forwardRef<
 );
 
 export default TableComponent;
-

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

@@ -76,7 +76,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <>
         <Comp
           className={
-            !unstyled ? buttonVariants({ variant, size, className }) : cn(className, "nocopy nowheel nopan nodelete nodrag noundo")
+            !unstyled
+              ? buttonVariants({ variant, size, className })
+              : cn(className, "nocopy nowheel nopan nodelete nodrag noundo")
           }
           disabled={loading || disabled}
           {...(asChild ? {} : { type: type || "button" })}
@@ -89,7 +91,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               <span className="absolute inset-0">
                 <ForwardedIconComponent
                   name={"Loader2"}
-                  className={"animate-spin m-auto h-full"}
+                  className={"m-auto h-full animate-spin"}
                 />
               </span>
             </span>

src/frontend/src/icons/Upstash/UpstashIcon.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const UpstashIcon = (props) => (
   <svg

src/frontend/src/icons/Upstash/index.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
 import UpstashIcon from "./UpstashIcon";
 
-export const UpstashSvgIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
-  (props, ref) => {
+export const UpstashSvgIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
   return <UpstashIcon ref={ref} {...props} />;
-  },
-);
+});

src/frontend/src/icons/mistral/mistralIcon.jsx

@@ -1,35 +1,197 @@
 const SvgMistralIcon = (props) => (
-    <svg version="1.1" width="32px" height="32px" viewBox="0 0 256 233" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <svg
+    version="1.1"
+    width="32px"
+    height="32px"
+    viewBox="0 0 256 233"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+  >
     <title>Mistral AI</title>
     <g>
-            <rect fill="#000000" x="186.181818" y="0" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#F7D046" x="209.454545" y="0" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="0" y="0" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="0" y="46.5454545" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="0" y="93.0909091" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="0" y="139.636364" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="0" y="186.181818" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#F7D046" x="23.2727273" y="0" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#F2A73B" x="209.454545" y="46.5454545" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#F2A73B" x="23.2727273" y="46.5454545" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="139.636364" y="46.5454545" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#F2A73B" x="162.909091" y="46.5454545" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#F2A73B" x="69.8181818" y="46.5454545" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EE792F" x="116.363636" y="93.0909091" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EE792F" x="162.909091" y="93.0909091" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EE792F" x="69.8181818" y="93.0909091" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="93.0909091" y="139.636364" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EB5829" x="116.363636" y="139.636364" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EE792F" x="209.454545" y="93.0909091" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EE792F" x="23.2727273" y="93.0909091" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="186.181818" y="139.636364" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EB5829" x="209.454545" y="139.636364" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#000000" x="186.181818" y="186.181818" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EB5829" x="23.2727273" y="139.636364" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EA3326" x="209.454545" y="186.181818" width="46.5454545" height="46.5454545"></rect>
-            <rect fill="#EA3326" x="23.2727273" y="186.181818" width="46.5454545" height="46.5454545"></rect>
+      <rect
+        fill="#000000"
+        x="186.181818"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F7D046"
+        x="209.454545"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="0"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F7D046"
+        x="23.2727273"
+        y="0"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="209.454545"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="23.2727273"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="139.636364"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="162.909091"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#F2A73B"
+        x="69.8181818"
+        y="46.5454545"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="116.363636"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="162.909091"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="69.8181818"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="93.0909091"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EB5829"
+        x="116.363636"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="209.454545"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EE792F"
+        x="23.2727273"
+        y="93.0909091"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="186.181818"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EB5829"
+        x="209.454545"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#000000"
+        x="186.181818"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EB5829"
+        x="23.2727273"
+        y="139.636364"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EA3326"
+        x="209.454545"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
+      <rect
+        fill="#EA3326"
+        x="23.2727273"
+        y="186.181818"
+        width="46.5454545"
+        height="46.5454545"
+      ></rect>
     </g>
   </svg>
 );
 export default SvgMistralIcon;
-  

src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx

@@ -188,7 +188,12 @@ export default function ChatMessage({
                           <Markdown
                             remarkPlugins={[remarkGfm, remarkMath]}
                             rehypePlugins={[rehypeMathjax]}
-                            className={cn("markdown prose flex flex-col word-break-break-word dark:prose-invert",chatMessage === "" ? "text-chat-trigger-disabled" : "text-primary")}
+                            className={cn(
+                              "markdown prose flex flex-col word-break-break-word dark:prose-invert",
+                              chatMessage === ""
+                                ? "text-chat-trigger-disabled"
+                                : "text-primary",
+                            )}
                             components={{
                               pre({ node, ...props }) {
                                 return <>{props.children}</>;
@@ -245,7 +250,9 @@ export default function ChatMessage({
                               },
                             }}
                           >
-                            {chatMessage===""?EMPTY_INPUT_SEND_MESSAGE:chatMessage}
+                            {chatMessage === ""
+                              ? EMPTY_INPUT_SEND_MESSAGE
+                              : chatMessage}
                           </Markdown>
                         ),
                       [chat.message, chatMessage],
@@ -274,7 +281,16 @@ export default function ChatMessage({
                     }
                   />
                 </button>
-                <span className={cn("prose word-break-break-word dark:prose-invert",(chatMessage!==""?EMPTY_INPUT_SEND_MESSAGE:chatMessage?"text-primary":"text-chat-trigger-disabled"))}>
+                <span
+                  className={cn(
+                    "prose word-break-break-word dark:prose-invert",
+                    chatMessage !== ""
+                      ? EMPTY_INPUT_SEND_MESSAGE
+                      : chatMessage
+                        ? "text-primary"
+                        : "text-chat-trigger-disabled",
+                  )}
+                >
                   {promptOpen
                     ? template?.split("\n")?.map((line, index) => {
                         const regex = /{([^}]+)}/g;
@@ -304,14 +320,16 @@ export default function ChatMessage({
                         }
                         return <p>{parts}</p>;
                       })
-                    : (chatMessage === "" ? EMPTY_INPUT_SEND_MESSAGE : chatMessage)
-                  }
+                    : chatMessage === ""
+                      ? EMPTY_INPUT_SEND_MESSAGE
+                      : chatMessage}
                 </span>
               </>
             ) : (
               <div className="flex flex-col">
                 <span
-                  className={`prose word-break-break-word dark:prose-invert ${chatMessage === ""
+                  className={`prose word-break-break-word dark:prose-invert ${
+                    chatMessage === ""
                       ? "text-chat-trigger-disabled"
                       : "text-primary"
                   }`}
@@ -319,7 +337,7 @@ export default function ChatMessage({
                     "chat-message-" + chat.sender_name + "-" + chatMessage
                   }
                 >
-                  {(chatMessage === "" ? EMPTY_INPUT_SEND_MESSAGE : chatMessage)}
+                  {chatMessage === "" ? EMPTY_INPUT_SEND_MESSAGE : chatMessage}
                 </span>
                 {chat.files && (
                   <div className="my-2 flex flex-col gap-5">

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

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { NodeToolbar } from "reactflow";
 import { Button } from "../../../../components/ui/button";
 import { GradientGroup } from "../../../../icons/GradientSparkles";
 import useFlowStore from "../../../../stores/flowStore";
 import { validateSelection } from "../../../../utils/reactflowUtils";
-import { useHotkeys } from "react-hotkeys-hook";
 export default function SelectionMenu({
   onClick,
   nodes,

src/frontend/src/stores/flowStore.ts

@@ -528,7 +528,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         (id) => newFlowBuildStatus[id]?.status !== BuildStatus.BUILT,
       );
 
-
       if (verticesToUpdate) {
         useFlowStore.getState().updateBuildStatus(verticesToUpdate, status);
       }
@@ -628,7 +627,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
   },
   updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
-
     const newFlowBuildStatus = { ...get().flowBuildStatus };
     nodeIdList.forEach((id) => {
       newFlowBuildStatus[id] = {

src/frontend/src/stores/flowsManagerStore.ts

@@ -268,11 +268,12 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
             title: "Could not load flows from database",
             list: [error.response?.data?.detail],
           });
-        }
-        else{
+        } else {
           useAlertStore.getState().setErrorData({
             title: "Could not load flows from database",
-            list: [error.message?? "An unexpected error occurred, please try again"],
+            list: [
+              error.message ?? "An unexpected error occurred, please try again",
+            ],
           });
         }
         throw error; // Re-throw the error so the caller can handle it if needed

src/frontend/src/types/zustand/flow/index.ts

@@ -124,7 +124,7 @@ export type FlowStoreType = {
     input_value,
     files,
     silent,
-    setLockChat
+    setLockChat,
   }: {
     setLockChat: (lock: boolean) => void;
     startNodeId?: string;

src/frontend/src/utils/buildUtils.ts

@@ -140,7 +140,7 @@ export async function buildVertices({
       onValidateNodes(verticesOrderResponse.verticesToRun);
     } catch (e) {
       useFlowStore.getState().setIsBuilding(false);
-      setLockChat(false)
+      setLockChat(false);
       return;
     }
   }