feat(GenericNode): add validation status icons and tooltips to node parameters and fix validation status state update

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);
-            setValidationStatus(jsonResponseParsed.params);
-          } else {
-            setValidationStatus("error");
-          }
         }
       } 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" ? 
+          <div>
-          <Tooltip title={
+            <Tooltip
+              title={
+                !validationStatus ? (
+                  "Validating..."
+                ) : (
                   <div className="max-h-96 overflow-auto">
-                {validationStatus}
+                    {validationStatus.params}
-              </div>}>
+                  </div>
-            <ExclamationCircleIcon className="w-5 hover:text-gray-500 hover:dark:text-gray-300" /> 
+                )
-          </Tooltip>
-          : <></>
               }
+            >
+              <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