🔥 chore(chatComponent): remove unused imports and API call

The import for the postBuild function was removed as it was not being used in the BuildTrigger component. This improves the code's readability and maintainability.

🚀 feat(chatComponent): add useEffect hook to fetch build status and update state
An async function was added to fetch the build status of the flow and update the state of the isBuilt variable. This allows the component to display the correct state of the build trigger button.

👌 refactor(chatComponent): refactor useEffect hook to update isBuilt state when nodes change
The useEffect hook was refactored to update the isBuilt state when the nodes change. This ensures that the build trigger button is disabled when the nodes change, as the flow needs to be rebuilt before it can be triggered again.

🔥 chore(intComponent): remove console.log statement
The console.log statement was removed from the onKeyDown event listener in the IntComponent component. This improves the code's cleanliness and readability.

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

@@ -6,7 +6,6 @@ import { nodeColors } from "../../../utils";
 import { PopUpContext } from "../../../contexts/popUpContext";
 import ChatModal from "../../../modals/chatModal";
 import { FlowType } from "../../../types/flow";
-import { postBuild } from "../../../controllers/API";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
 import axios from "axios";
@@ -48,7 +47,6 @@ export default function BuildTrigger({
     const { flowId } = response.data;
 
     // Step 2: Use the session ID to establish an SSE connection using EventSource
-
     let validationResults = [];
     let finished = false;
     apiUrl = `/build/stream/${flowId}`;

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

@@ -1,15 +1,18 @@
-import { useEffect, useRef, useState } from "react";
-
+import { Context, useEffect, useRef, useState, useContext } from "react";
+import ReactFlow, { useNodes } from "reactflow";
 import { ChatMessageType, ChatType } from "../../types/chat";
 import ChatTrigger from "./chatTrigger";
 import BuildTrigger from "./buildTrigger";
 import ChatModal from "../../modals/chatModal";
 
-import _ from "lodash";
+import _, { set } from "lodash";
+import { getBuildStatus } from "../../controllers/API";
+import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);
   const [isBuilt, setIsBuilt] = useState(false);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (
@@ -25,6 +28,37 @@ export default function Chat({ flow }: ChatType) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
+
+  useEffect(() => {
+    // Define an async function within the useEffect hook
+    const fetchBuildStatus = async () => {
+      const response = await getBuildStatus(flow.id);
+      setIsBuilt(response.built);
+    };
+
+    // Call the async function
+    fetchBuildStatus();
+  }, [flow]);
+
+  const prevNodesRef = useRef<any[] | undefined>();
+  const nodes = useNodes();
+  useEffect(() => {
+    const prevNodes = prevNodesRef.current;
+    const currentNodes = nodes.map(
+      (node: NodeType) => node.data.node.template.value
+    );
+
+    if (
+      prevNodes &&
+      JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)
+    ) {
+      setIsBuilt(false);
+      console.log("Nodes changed");
+    }
+
+    prevNodesRef.current = currentNodes;
+  }, [nodes]);
+
   return (
     <>
       <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />

src/frontend/src/components/intComponent/index.tsx

@@ -34,7 +34,7 @@ export default function IntComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         onKeyDown={(event) => {
-          console.log(event);
+          // console.log(event);
           if (
             event.key !== "Backspace" &&
             event.key !== "Enter" &&