Fix formatting issues in code

src/frontend/src/App.tsx

@@ -19,8 +19,8 @@ import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
-import { useTypesStore } from "./stores/typesStore";
 import { useStoreStore } from "./stores/storeStore";
+import { useTypesStore } from "./stores/typesStore";
 
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(

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

@@ -7,6 +7,7 @@ import { Button } from "../../components/ui/button";
 import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
 import { Textarea } from "../../components/ui/textarea";
+import Xmark from "../../components/ui/xmark";
 import { priorityFields } from "../../constants/constants";
 import { BuildStatus } from "../../constants/enums";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
@@ -20,7 +21,6 @@ import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
 import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
 import { classNames, cn, getFieldTitle } from "../../utils/utils";
 import ParameterComponent from "./components/parameterComponent";
-import Xmark from "../../components/ui/xmark";
 
 export default function GenericNode({
   data,

src/frontend/src/components/IOInputField/index.tsx

@@ -63,7 +63,7 @@ export default function IOInputField({
     }
   }
   return (
-    <div className="font-xl flex items-start h-full w-full flex-col gap-4 p-4 font-semibold">
+    <div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
       {inputType}
       {handleInputType()}
     </div>

src/frontend/src/components/IOOutputView/index.tsx

@@ -44,7 +44,7 @@ export default function IOOutputView({
     }
   }
   return (
-    <div className="font-xl flex h-full items-start w-full flex-col gap-4 p-4 font-semibold">
+    <div className="font-xl flex h-full w-full flex-col items-start gap-4 p-4 font-semibold">
       {outputType}
       {handleOutputType()}
     </div>

src/frontend/src/components/IOview/index.tsx

@@ -4,7 +4,6 @@ import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
-import { NodeType } from "../../types/flow";
 import { validateNodes } from "../../utils/reactflowUtils";
 import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
@@ -31,11 +30,10 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
   );
   const nodes = useFlowStore((state) => state.nodes).filter(
     (node) =>
-      (inputs.some((input) => input.id === node.id) ||
+      inputs.some((input) => input.id === node.id) ||
-        outputs.some((output) => output.id === node.id))
+      outputs.some((output) => output.id === node.id)
   );
-  const haveChat =
+  const haveChat = chatInput || chatOutput;
-    chatInput || chatOutput
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0
   );
@@ -289,11 +287,19 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
           </div>
           {!haveChat && (
             <div className="flex w-full justify-end pt-6">
-              <Button variant={"outline"} className="px-3 flex gap-2" onClick={() => sendMessage(1)}>
+              <Button
-                
+                variant={"outline"}
+                className="flex gap-2 px-3"
+                onClick={() => sendMessage(1)}
+              >
                 <IconComponent
                   name={isBuilding ? "Loader2" : "Play"}
-                  className={cn("h-4 w-4", isBuilding ? "animate-spin" : "fill-current text-medium-indigo")}
+                  className={cn(
+                    "h-4 w-4",
+                    isBuilding
+                      ? "animate-spin"
+                      : "fill-current text-medium-indigo"
+                  )}
                 />
                 Run Flow
               </Button>

src/frontend/src/pages/StorePage/index.tsx

@@ -21,11 +21,7 @@ import {
   SelectValue,
 } from "../../components/ui/select";
 import { AuthContext } from "../../contexts/authContext";
-import {
+import { getStoreComponents, getStoreTags } from "../../controllers/API";
-  checkHasApiKey,
-  getStoreComponents,
-  getStoreTags,
-} from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
@@ -47,9 +43,7 @@ export default function StorePage(): JSX.Element {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId
   );
-  const currentFlowId = useFlowsManagerStore(
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
-    (state) => state.currentFlowId
-  );
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
   const { id } = useParams();

src/frontend/src/stores/flowStore.ts

@@ -36,7 +36,7 @@ import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
 // this is our useStore hook that we can use in our components to get parts of the store and call actions
 const useFlowStore = create<FlowStoreType>((set, get) => ({
   flowState: undefined,
-  flowBuildStatus:{},
+  flowBuildStatus: {},
   nodes: [],
   edges: [],
   isBuilding: false,
@@ -403,7 +403,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       nodeId,
       onBuildComplete: () => {
         if (nodeId) {
-          setSuccessData({ title: `${get().nodes.find((node) => node.id === nodeId)?.data.node?.display_name} built successfully` });
+          setSuccessData({
+            title: `${
+              get().nodes.find((node) => node.id === nodeId)?.data.node
+                ?.display_name
+            } built successfully`,
+          });
         } else {
           setSuccessData({ title: FLOW_BUILD_SUCCESS_ALERT });
         }

src/frontend/src/stores/storeStore.tsx

@@ -1,7 +1,6 @@
 import { create } from "zustand";
 import { checkHasApiKey, checkHasStore } from "../controllers/API";
 import { StoreStoreType } from "../types/zustand/store";
-import useAlertStore from "./alertStore";
 
 export const useStoreStore = create<StoreStoreType>((set) => ({
   hasStore: true,

src/frontend/src/types/components/index.ts

@@ -524,7 +524,11 @@ export type chatMessagePropsType = {
   chat: ChatMessageType;
   lockChat: boolean;
   lastMessage: boolean;
-  updateChat: (chat: ChatMessageType, message: string, stream_url: string) => void;
+  updateChat: (
+    chat: ChatMessageType,
+    message: string,
+    stream_url: string
+  ) => void;
 };
 
 export type formModalPropsType = {

src/frontend/src/utils/utils.ts

@@ -58,12 +58,15 @@ export function normalCaseToSnakeCase(str: string): string {
     .join("_");
 }
 
-export function toTitleCase(str: string | undefined, isNodeField?: boolean): string {
+export function toTitleCase(
+  str: string | undefined,
+  isNodeField?: boolean
+): string {
   if (!str) return "";
   let result = str
     .split("_")
     .map((word, index) => {
-      if (isNodeField) return word
+      if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
           word[0].toUpperCase() + word.slice(1).toLowerCase()
@@ -76,7 +79,7 @@ export function toTitleCase(str: string | undefined, isNodeField?: boolean): str
   return result
     .split("-")
     .map((word, index) => {
-      if (isNodeField) return word
+      if (isNodeField) return word;
       if (index === 0) {
         return checkUpperWords(
           word[0].toUpperCase() + word.slice(1).toLowerCase()