update build state logic (#1468)

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

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
-import Tooltip from "../../components/TooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -44,6 +43,7 @@ export default function GenericNode({
   const [nodeDescription, setNodeDescription] = useState(
     data.node?.description!
   );
+  const buildStatus = useFlowStore((state) => state.flowBuildStatus[data.id]);
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
   const [handles, setHandles] = useState<number>(0);
@@ -280,7 +280,7 @@ export default function GenericNode({
         className={getNodeBorderClassName(
           selected,
           showNode,
-          data?.buildStatus,
+          buildStatus,
           validationStatus
         )}
       >
@@ -468,26 +468,54 @@ export default function GenericNode({
                 variant="secondary"
                 className={"group h-9 px-1.5"}
                 onClick={() => {
-                  if (data?.buildStatus === BuildStatus.BUILDING || isBuilding)
+                  if (buildStatus === BuildStatus.BUILDING || isBuilding)
                     return;
                   buildFlow(data.id);
                 }}
               >
                 <div>
-                  <Tooltip title={"Build"}>
+                  <ShadTooltip
+                    styleClasses="cursor-default"
+                    content={
+                      buildStatus === BuildStatus.BUILDING ? (
+                        <span>Building...</span>
+                      ) : !validationStatus ? (
+                        <span className="flex">
+                          Build{" "}
+                          <IconComponent
+                            name="Play"
+                            className=" h-5 stroke-status-green stroke-2"
+                          />{" "}
+                          flow to validate status.
+                        </span>
+                      ) : (
+                        <div className="max-h-96 overflow-auto">
+                          {typeof validationStatus.params === "string"
+                            ? `${durationString}\n${validationStatus.params}`
+                                .split("\n")
+                                .map((line, index) => (
+                                  <div key={index}>{line}</div>
+                                ))
+                            : durationString}
+                        </div>
+                      )
+                    }
+                    side="bottom"
+                  >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconPlayOrPauseComponents(
-                        data?.buildStatus,
+                        buildStatus,
                         validationStatus
                       )}
                     </div>
-                  </Tooltip>
+                  </ShadTooltip>
                 </div>
               </Button>
             )}
             <div className="">
-              <Tooltip
+              <ShadTooltip
-                title={
+                styleClasses="cursor-default"
+                content={
                   data?.buildStatus === BuildStatus.BUILDING ? (
                     <span>Building...</span>
                   ) : !validationStatus ? (
@@ -502,6 +530,7 @@ export default function GenericNode({
                     </div>
                   )
                 }
+                side="bottom"
               >
                 <div>
                   {renderIconStatusComponents(
@@ -509,7 +538,7 @@ export default function GenericNode({
                     validationStatus
                   )}
                 </div>
-              </Tooltip>
+              </ShadTooltip>
             </div>
           </div>
         </div>

src/frontend/src/stores/flowStore.ts

@@ -35,6 +35,7 @@ import useFlowsManagerStore from "./flowsManagerStore";
 // 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:{},
   nodes: [],
   edges: [],
   isBuilding: false,
@@ -438,21 +439,19 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     });
   },
   updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
+    const newFlowBuildStatus = { ...get().flowBuildStatus };
     nodeIdList.forEach((id) => {
-      const nodeToUpdate = get().nodes.find((node) => node.id === id);
+      newFlowBuildStatus[id] = status;
-      if (nodeToUpdate) {
-        nodeToUpdate.data.buildStatus = status;
-        set({ nodes: get().nodes });
-      }
     });
+    set({ flowBuildStatus: newFlowBuildStatus });
   },
   revertBuiltStatusFromBuilding: () => {
-    get().nodes.forEach((node) => {
+    const newFlowBuildStatus = { ...get().flowBuildStatus };
-      if (node.data.buildStatus === BuildStatus.BUILDING) {
+    Object.keys(newFlowBuildStatus).forEach((id) => {
-        node.data.buildStatus = BuildStatus.TO_BUILD;
+      if (newFlowBuildStatus[id] === BuildStatus.BUILDING) {
+        newFlowBuildStatus[id] = BuildStatus.BUILT;
       }
     });
-    set({ nodes: get().nodes });
   },
 }));
 

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

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

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

@@ -91,4 +91,5 @@ export type FlowStoreType = {
   verticesBuild: string[];
   updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
   revertBuiltStatusFromBuilding: () => void;
+  flowBuildStatus: { [key: string]: BuildStatus };
 };