feat: Generic Callback Dialog Input for Custom Component

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

@@ -8,105 +8,184 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
 import { getCustomParameterTitle } from "@/customization/components/custom-parameter";
-import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
+import { mutateTemplate } from "@/CustomNodes/helpers/mutate-template";
+import useAlertStore from "@/stores/alertStore";
 import useFlowStore from "@/stores/flowStore";
-import { InputFieldType } from "@/types/api";
-import { cloneDeep } from "lodash";
+import { APIClassType, InputFieldType } from "@/types/api";
+import { useState } from "react";
 
-export const NodeDialog = ({
-  open,
-  onClose,
-  dialogInputs,
-  nodeId,
-}: {
+interface NodeDialogProps {
   open: boolean;
   onClose: () => void;
   dialogInputs: any;
   nodeId: string;
+  name: string;
+  nodeClass: APIClassType;
+}
+
+interface ValueObject {
+  value: string;
+}
+
+export const NodeDialog: React.FC<NodeDialogProps> = ({
+  open,
+  onClose,
+  dialogInputs,
+  nodeId,
+  name,
+  nodeClass,
 }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [fieldValues, setFieldValues] = useState<Record<string, string>>({});
+
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
 
-  const handleNewValue = (value: string, key: string) => {
-    let rawValue = value;
+  const postTemplateValue = usePostTemplateValue({
+    parameterId: name,
+    nodeId: nodeId,
+    node: nodeClass,
+  });
 
-    if (typeof value === "object" && value) {
-      rawValue = (value as { value: string }).value;
-    }
+  const { fields, functionality: submitButtonText } = dialogInputs || {};
+  const dialogNodeData = fields?.data?.node;
+  const dialogTemplate = dialogNodeData?.template || {};
+
+  const setNodeClass = (newNode: APIClassType) => {
+    const targetNode = nodes.find((node) => node.id === nodeId);
+    if (!targetNode) return;
 
-    const template = cloneDeep(dialogInputs?.fields?.data?.node?.template);
-    template[key].value = value;
+    targetNode.data.node = newNode;
+    setNode(nodeId, targetNode);
+  };
+
+  const handleErrorData = (newState: {
+    title: string;
+    list?: Array<string>;
+  }) => {
+    setErrorData(newState);
+    setIsLoading(false);
+  };
+
+  const updateFieldValue = (value: string | ValueObject, fieldKey: string) => {
+    const newValue = typeof value === "object" ? value.value : value;
+    const targetNode = nodes.find((node) => node.id === nodeId);
+    if (!targetNode || !name) return;
 
-    const newNode = cloneDeep(nodes.find((node) => node.id === nodeId));
-    if (newNode) {
-      const template = newNode.data.node.template;
-      const databaseFields = template.database_name.dialog_inputs.fields;
-      const nodeTemplate = databaseFields.data.node.template;
+    targetNode.data.node.template[name].dialog_inputs.fields.data.node.template[
+      fieldKey
+    ].value = newValue;
+    setNode(nodeId, targetNode);
+    setFieldValues((prev) => ({ ...prev, [fieldKey]: newValue }));
+
+    if (dialogTemplate[fieldKey].real_time_refresh) {
+      mutateTemplate(
+        { [fieldKey]: newValue },
+        nodeClass,
+        setNodeClass,
+        postTemplateValue,
+        handleErrorData,
+        name,
+      );
+    }
+  };
 
-      nodeTemplate[key].value = rawValue;
+  const handleCloseDialog = () => {
+    setFieldValues({});
+    const targetNode = nodes.find((node) => node.id === nodeId);
+    if (targetNode && name) {
+      const nodeTemplate = targetNode.data.node.template;
+      Object.keys(dialogTemplate).forEach((key) => {
+        nodeTemplate[name].dialog_inputs.fields.data.node.template[key].value =
+          "";
+      });
+      setNode(nodeId, targetNode);
     }
-    setNode(nodeId, newNode!);
+    setIsLoading(false);
+    onClose();
   };
 
+  const handleSubmitDialog = async () => {
+    setIsLoading(true);
+
+    await mutateTemplate(
+      fieldValues,
+      nodeClass,
+      setNodeClass,
+      postTemplateValue,
+      handleErrorData,
+      name,
+      handleCloseDialog,
+      nodeClass.tool_mode,
+    );
+
+    setTimeout(() => {
+      handleCloseDialog();
+    }, 5000);
+  };
+
+  // Render
   return (
-    <Dialog open={open} onOpenChange={onClose}>
+    <Dialog open={open} onOpenChange={handleCloseDialog}>
       <DialogContent className="max-w-[700px] gap-2 px-1 py-6">
         <DialogHeader className="px-5 pb-3">
           <DialogTitle>
             <div className="flex items-center">
-              <span className="pb-2">
-                {dialogInputs.fields?.data?.node?.display_name}
-              </span>
+              <span className="pb-2">{dialogNodeData?.display_name}</span>
             </div>
           </DialogTitle>
           <DialogDescription>
             <div className="flex items-center gap-2">
-              {dialogInputs.fields?.data?.node?.description}
+              {dialogNodeData?.description}
             </div>
           </DialogDescription>
         </DialogHeader>
 
         <div className="flex flex-col gap-5 overflow-y-auto px-5">
-          {Object.entries(dialogInputs?.fields?.data?.node?.template ?? {}).map(
-            ([key, value]) => (
-              <div key={key}>
-                <div>
-                  {getCustomParameterTitle({
-                    title:
-                      dialogInputs?.fields?.data?.node?.template[key]
-                        .display_name ?? "",
-                    nodeId,
-                    isFlexView: false,
-                  })}
-                </div>
-                <ParameterRenderComponent
-                  handleOnNewValue={(value: string) =>
-                    handleNewValue(value, key)
-                  }
-                  name={key}
-                  nodeId={nodeId}
-                  templateData={value as Partial<InputFieldType>}
-                  templateValue={
-                    dialogInputs?.fields?.data?.node?.template[key].value
-                  }
-                  editNode={false}
-                  handleNodeClass={() => {}}
-                  nodeClass={dialogInputs.fields?.data?.node}
-                  disabled={false}
-                  placeholder=""
-                  isToolMode={false}
-                />
+          {Object.entries(dialogTemplate).map(([fieldKey, fieldValue]) => (
+            <div key={fieldKey}>
+              <div>
+                {getCustomParameterTitle({
+                  title:
+                    (fieldValue as { display_name: string })?.display_name ??
+                    "",
+                  nodeId,
+                  isFlexView: false,
+                })}
               </div>
-            ),
-          )}
+              <ParameterRenderComponent
+                handleOnNewValue={(value: string) =>
+                  updateFieldValue(value, fieldKey)
+                }
+                name={fieldKey}
+                nodeId={nodeId}
+                templateData={fieldValue as Partial<InputFieldType>}
+                templateValue={fieldValues[fieldKey] || ""}
+                editNode={false}
+                handleNodeClass={() => {}}
+                nodeClass={dialogNodeData}
+                disabled={false}
+                placeholder=""
+                isToolMode={false}
+              />
+            </div>
+          ))}
         </div>
 
         <DialogFooter className="px-5 pt-3">
-          <Button variant="outline" onClick={onClose}>
+          <Button variant="secondary" onClick={handleCloseDialog}>
             Cancel
           </Button>
-          <Button>{dialogInputs.functionality}</Button>
+          <Button
+            variant="default"
+            onClick={handleSubmitDialog}
+            loading={isLoading}
+          >
+            {submitButtonText}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

src/frontend/src/components/common/fetchIconComponent/index.tsx

@@ -0,0 +1,21 @@
+import ForwardedIconComponent from "../genericIconComponent";
+
+const FetchIconComponent = ({
+  source,
+  name,
+}: {
+  source: string;
+  name: string;
+}) => {
+  return (
+    <div>
+      {source ? (
+        <img src={source} alt={name} />
+      ) : (
+        <ForwardedIconComponent name="Unknown" />
+      )}
+    </div>
+  );
+};
+
+export default FetchIconComponent;

src/frontend/src/components/common/loadingTextComponent/index.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const LoadingTextComponent = ({ text }: { text: string }) => {
+  const [dots, setDots] = useState(".");
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDots((prevDots) => (prevDots === "..." ? "" : `${prevDots}.`));
+    }, 300);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  if (!text) {
+    return null;
+  }
+
+  return <span>{`${text}${dots}`}</span>;
+};
+
+export default LoadingTextComponent;