Merge branch 'zustand/io/migration' of github.com:logspace-ai/langflow into zustand/io/migration

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

@@ -324,7 +324,9 @@ export default function ParameterComponent({
           ) : (
             title
           )}
-          <span className={(info === '' ? '' : 'ml-1 ') + " text-status-red"}>{required ? " *" : ""}</span>
+          <span className={(info === "" ? "" : "ml-1 ") + " text-status-red"}>
+            {required ? " *" : ""}
+          </span>
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>

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

@@ -37,6 +37,7 @@ export default function GenericNode({
   const flowPool = useFlowStore((state) => state.flowPool);
   const buildFlow = useFlowStore((state) => state.buildFlow);
   const setNode = useFlowStore((state) => state.setNode);
+  const getBuildStatus = useFlowStore((state) => state.getBuildStatus);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(data.node!.display_name);
@@ -170,7 +171,6 @@ export default function GenericNode({
     validationStatus: validationStatusType | null
   ) => {
     const isValid = validationStatus && validationStatus.valid;
-
     if (isValid) {
       return "green-status";
     } else if (!isValid && buildStatus === BuildStatus.INACTIVE) {
@@ -179,10 +179,12 @@ export default function GenericNode({
       return "green-status";
     } else if (!isValid && buildStatus === BuildStatus.BUILT) {
       return "red-status";
-    } else if (!validationStatus) {
-      return "yellow-status";
-    } else {
+    } else if (!validationStatus && buildStatus === BuildStatus.TO_BUILD) {
+      return "green-status";
+    } else if (buildStatus === BuildStatus.BUILDING) {
       return "status-build-animation";
+    } else {
+      return "green-status";
     }
   };
 
@@ -205,6 +207,7 @@ export default function GenericNode({
     validationStatus: validationStatusType | null
   ) => {
     let isInvalid = validationStatus && !validationStatus.valid;
+
     if (buildStatus === BuildStatus.INACTIVE && isInvalid) {
       // INACTIVE should have its own class
       return "inactive-status";
@@ -224,11 +227,17 @@ export default function GenericNode({
     buildStatus: BuildStatus | undefined,
     validationStatus: validationStatusType | null
   ) => {
+    const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
+      buildStatus,
+      validationStatus
+    );
+    const baseBorderClass = getBaseBorderClass(selected);
+    const nodeSizeClass = getNodeSizeClass(showNode);
     return classNames(
-      getBaseBorderClass(selected),
-      getNodeSizeClass(showNode),
+      baseBorderClass,
+      nodeSizeClass,
       "generic-node-div",
-      getSpecificClassFromBuildStatus(buildStatus, validationStatus)
+      specificClassFromBuildStatus
     );
   };
 
@@ -265,7 +274,7 @@ export default function GenericNode({
         className={getNodeBorderClassName(
           selected,
           showNode,
-          data?.build_status,
+          getBuildStatus(data.id),
           validationStatus
         )}
       >
@@ -476,22 +485,26 @@ export default function GenericNode({
                 variant="outline"
                 className={"h-9 px-1.5"}
                 onClick={() => {
-                  if (data?.build_status === BuildStatus.BUILDING || isBuilding)
+                  if (
+                    getBuildStatus(data.id) === BuildStatus.BUILDING ||
+                    isBuilding
+                  )
                     return;
+
                   buildFlow(data.id);
                 }}
               >
                 <div>
                   <Tooltip
                     title={
-                      data?.build_status === BuildStatus.BUILDING ? (
+                      getBuildStatus(data.id) === BuildStatus.BUILDING ? (
                         <span>Building...</span>
                       ) : !validationStatus ? (
                         <span className="flex">
                           Build{" "}
                           <IconComponent
                             name="Play"
-                            className=" h-5 stroke-build-trigger stroke-2"
+                            className=" h-5 stroke-status-green stroke-2"
                           />{" "}
                           flow to validate status.
                         </span>
@@ -510,7 +523,7 @@ export default function GenericNode({
                   >
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconPlayOrPauseComponents(
-                        data?.build_status,
+                        getBuildStatus(data.id),
                         validationStatus
                       )}
                     </div>

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

@@ -394,7 +394,10 @@ export default function NodeToolbarComponent({
                   />{" "}
                   <span className="">Delete</span>{" "}
                   <span>
-                    <IconComponent name="Delete" className="text-red-300 absolute right-2 top-2 h-4 w-4"></IconComponent>
+                    <IconComponent
+                      name="Delete"
+                      className="absolute right-2 top-2 h-4 w-4 text-red-300"
+                    ></IconComponent>
                   </span>
                 </div>
               </SelectItem>

src/frontend/src/stores/flowStore.ts

@@ -416,7 +416,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
       },
     });
-    get().revertAllVerticesToBuild();
   },
   getFlow: () => {
     return {
@@ -425,26 +424,11 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       viewport: get().reactFlowInstance?.getViewport()!,
     };
   },
-  updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
-    nodeIdList.forEach((id) => {
-      const nodeToUpdate = get().nodes.find((node) => node.id === id);
-      if (nodeToUpdate) {
-        nodeToUpdate.data.build_status = status;
-        get().setNodes(get().nodes);
-      }
-    });
-  },
   updateVerticesBuild: (vertices: string[]) => {
     set({ verticesBuild: vertices });
   },
   verticesBuild: [],
-  revertAllVerticesToBuild: () => {
-    // set all vertices to TO_BUILD
-    const verticesIds = get()
-      .nodes.filter((node) => node.data.build_status === BuildStatus.BUILDING)
-      .map((node) => node.id);
-    get().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
-  },
+
   removeFromVerticesBuild: (vertices: string[]) => {
     set({
       verticesBuild: get().verticesBuild.filter(
@@ -452,6 +436,25 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       ),
     });
   },
+  updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
+    let newBuildStatus = cloneDeep(get().buildStatus);
+    // check if nodeIdList is an array
+    if (!Array.isArray(nodeIdList)) {
+      nodeIdList = [nodeIdList];
+    }
+    nodeIdList.forEach((id) => {
+      newBuildStatus[id] = status;
+    });
+    set({ buildStatus: newBuildStatus });
+  },
+  buildStatus: {},
+  getBuildStatus: (nodeId: string) => {
+    // if the node is not in the buildStatus object, set it to TO_BUILD
+    if (!get().buildStatus[nodeId]) {
+      get().buildStatus[nodeId] = BuildStatus.TO_BUILD;
+    }
+    return get().buildStatus[nodeId];
+  },
 }));
 
 export default useFlowStore;

src/frontend/src/style/applies.css

@@ -296,7 +296,7 @@
     @apply generic-node-status text-status-green;
   }
   .gray-status {
-    @apply generic-node-status text-muted-foreground;
+    @apply generic-node-status text-status-gray;
   }
 
   .red-status {

src/frontend/src/style/index.css

@@ -60,6 +60,7 @@
     --chat-send: #059669;
     --status-green: #4ade80;
     --status-blue: #2563eb;
+    --status-gray: #6b7280;
     --connection: #555;
   }
 

src/frontend/src/types/api/index.ts

@@ -1,5 +1,4 @@
 import { Edge, Node, Viewport } from "reactflow";
-import { BuildStatus } from "../../constants/enums";
 import { FlowType } from "../flow";
 //kind and class are just representative names to represent the actual structure of the object received by the API
 export type APIDataType = { [key: string]: APIKindType };
@@ -37,7 +36,6 @@ export type APIClassType = {
     | CustomFieldsType
     | boolean
     | undefined;
-  build_status?: BuildStatus;
 };
 
 export type TemplateVariableType = {

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

@@ -1,5 +1,4 @@
 import { ReactFlowJsonObject, XYPosition } from "reactflow";
-import { BuildStatus } from "../../constants/enums";
 import { APIClassType } from "../api/index";
 
 export type FlowType = {
@@ -29,7 +28,6 @@ export type NodeDataType = {
   node?: APIClassType;
   id: string;
   output_types?: string[];
-  build_status?: BuildStatus;
 };
 // FlowStyleType is the type of the style object that is used to style the
 // Flow card with an emoji and a color.

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

@@ -86,9 +86,10 @@ export type FlowStoreType = {
   unselectAll: () => void;
   buildFlow: (nodeId?: string) => Promise<void>;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
-  updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
   updateVerticesBuild: (vertices: string[]) => void;
   removeFromVerticesBuild: (vertices: string[]) => void;
-  revertAllVerticesToBuild: () => void;
   verticesBuild: string[];
+  updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
+  buildStatus: { [key: string]: BuildStatus };
+  getBuildStatus: (nodeId: string) => BuildStatus;
 };

src/frontend/src/utils/styleUtils.ts

@@ -25,6 +25,7 @@ import {
   Compass,
   Copy,
   Cpu,
+  Delete,
   Download,
   DownloadCloud,
   Edit,
@@ -117,7 +118,6 @@ import {
   X,
   XCircle,
   Zap,
-  Delete,
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -195,7 +195,7 @@ export const gradients = [
 export const nodeColors: { [char: string]: string } = {
   prompts: "#4367BF",
   models: "#AA2411",
-  llms: "#6344BE",
+  model_specs: "#6344BE",
   chains: "#FE7500",
   Document: "#7AAE42",
   list: "#9AAE42",
@@ -224,7 +224,7 @@ export const nodeColors: { [char: string]: string } = {
 export const nodeNames: { [char: string]: string } = {
   prompts: "Prompts",
   models: "Language Models",
-  llms: "Model Settings",
+  model_specs: "Model Specs",
   chains: "Chains",
   agents: "Agents",
   tools: "Tools",
@@ -296,7 +296,7 @@ export const nodeIconsLucide: iconsType = {
   chains: Link,
   memories: Cpu,
   models: Bot,
-  llms: Lightbulb,
+  model_specs: Lightbulb,
   prompts: TerminalSquare,
   tools: Wrench,
   advanced: Laptop2,

src/frontend/tailwind.config.js

@@ -80,6 +80,7 @@ module.exports = {
         "status-green": "var(--status-green)",
         "status-red": "var(--status-red)",
         "status-yellow": "var(--status-yellow)",
+        "status-gray": "var(--status-gray)",
         "success-background": "var(--success-background)",
         "success-foreground": "var(--success-foreground)",
         "beta-background": "var(--beta-background)",