Validation_fix (#317)

src/backend/langflow/api/endpoints.py

@@ -1,5 +1,5 @@
-from importlib.metadata import version
 import logging
+from importlib.metadata import version
 
 from fastapi import APIRouter, HTTPException
 

src/backend/langflow/api/validate.py

@@ -54,4 +54,4 @@ def post_validate_node(node_id: str, data: dict):
         return json.dumps({"valid": True, "params": str(node._built_object_repr())})
     except Exception as e:
         logger.exception(e)
-        return json.dumps({"valid": False})
+        return json.dumps({"valid": False, "params": str(e)})

src/backend/langflow/interface/run.py

@@ -3,12 +3,12 @@ import io
 from typing import Any, Dict, List, Tuple
 
 from chromadb.errors import NotEnoughElementsException  # type: ignore
+from langchain.schema import AgentAction
 
 from langflow.api.callback import AsyncStreamingLLMCallbackHandler, StreamingLLMCallbackHandler  # type: ignore
 from langflow.cache.base import compute_dict_hash, load_cache, memoize_dict
 from langflow.graph.graph import Graph
 from langflow.utils.logger import logger
-from langchain.schema import AgentAction
 
 
 def load_langchain_object(data_graph, is_first_message=False):

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

@@ -1,4 +1,12 @@
-import { BugAntIcon, Cog6ToothIcon, ExclamationCircleIcon, InformationCircleIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  BugAntIcon,
+  CheckCircleIcon,
+  Cog6ToothIcon,
+  EllipsisHorizontalCircleIcon,
+  ExclamationCircleIcon,
+  InformationCircleIcon,
+  TrashIcon,
+} from "@heroicons/react/24/outline";
 import { classNames, nodeColors, nodeIcons, toNormalCase } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
@@ -51,11 +59,7 @@ export default function GenericNode({
           let jsonResponse = await response.json();
           let jsonResponseParsed = await JSON.parse(jsonResponse);
           console.log(jsonResponseParsed);
-          if(jsonResponseParsed.valid){
-            setValidationStatus(jsonResponseParsed.params);
-          } else {
-            setValidationStatus("error");
-          }
+          setValidationStatus(jsonResponseParsed);
         }
       } catch (error) {
         // console.error("Error validating node:", error);
@@ -70,14 +74,6 @@ export default function GenericNode({
     }
   }, [params, validateNode]);
 
-  useEffect(() => {
-    if (validationStatus !== "error") {
-      setIsValid(true);
-    } else {
-      setIsValid(false);
-    }
-  }, [validationStatus]);
-
   if (!Icon) {
     if (showError.current) {
       setErrorData({
@@ -94,7 +90,6 @@ export default function GenericNode({
   return (
     <div
       className={classNames(
-        isValid ? "animate-pulse-green" : "border-red-outline",
         selected ? "border border-blue-500" : "border dark:border-gray-700",
         "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
       )}
@@ -108,15 +103,46 @@ export default function GenericNode({
             }}
           />
           <div className="ml-2 truncate">{data.type}</div>
-          {validationStatus && validationStatus !== "error" ? 
-          <Tooltip title={
+          <div>
+            <Tooltip
+              title={
+                !validationStatus ? (
+                  "Validating..."
+                ) : (
                   <div className="max-h-96 overflow-auto">
-                {validationStatus}
-              </div>}>
-            <ExclamationCircleIcon className="w-5 hover:text-gray-500 hover:dark:text-gray-300" /> 
+                    {validationStatus.params}
+                  </div>
+                )
+              }
+            >
+              <div className="relative w-5 h-5">
+                <CheckCircleIcon
+                  className={classNames(
+                    validationStatus && validationStatus.valid
+                      ? "text-green-500 opacity-100"
+                      : "text-green-500 opacity-0 animate-spin",
+                    "absolute w-5 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
+                  )}
+                />
+                <ExclamationCircleIcon
+                  className={classNames(
+                    validationStatus && !validationStatus.valid
+                      ? "text-red-500 opacity-100"
+                      : "text-red-500 opacity-0 animate-spin",
+                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-200"
+                  )}
+                />
+                <EllipsisHorizontalCircleIcon
+                  className={classNames(
+                    !validationStatus
+                      ? "text-yellow-500 opacity-100"
+                      : "text-yellow-500 opacity-0 animate-spin",
+                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-300"
+                  )}
+                />
+              </div>
             </Tooltip>
-          : <></>
-}
+          </div>
         </div>
         <div className="flex gap-3">
           <button