From 7a7efc2afa12a6407e6467418ae6861f09f05e65 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 11 Jul 2023 10:52:25 -0300
Subject: [PATCH] prompt template bug fix

---
 .../src/components/promptComponent/index.tsx  | 45 ++++++++++++-------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 4f9a56ad0..22384c299 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -4,7 +4,6 @@ import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import { TypeModal } from "../../utils";
 
-import * as _ from "lodash";
 import { ExternalLink } from "lucide-react";
 import { typesContext } from "../../contexts/typesContext";
 import { postValidatePrompt } from "../../controllers/API";
@@ -18,7 +17,7 @@ export default function PromptAreaComponent({
   disabled,
   editNode = false,
 }: TextAreaComponentType) {
-  const [myValue, setMyValue] = useState("");
+  const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
   const { reactFlowInstance } = useContext(typesContext);
   useEffect(() => {
@@ -29,22 +28,34 @@ export default function PromptAreaComponent({
   }, [disabled, onChange]);
 
   useEffect(() => {
-    if (value !== "" && myValue !== value && reactFlowInstance) {
-      // only executed once
-      setMyValue(value);
-      postValidatePrompt(field_name, value, nodeClass)
-        .then((apiReturn) => {
-          if (apiReturn.data) {
-            setNodeClass(apiReturn.data.frontend_node);
-            // need to update reactFlowInstance to re-render the nodes.
-            reactFlowInstance.setEdges(
-              _.cloneDeep(reactFlowInstance.getEdges())
-            );
-          }
-        })
-        .catch((error) => {});
+    setMyValue(value);
+    if (value !== "" && !editNode) {
+      postValidatePrompt(field_name, value, nodeClass).then((apiReturn) => {
+        if (apiReturn.data) {
+          setNodeClass(apiReturn.data.frontend_node);
+          // need to update reactFlowInstance to re-render the nodes.
+        }
+      });
     }
-  }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass, value]);
+  }, [value, reactFlowInstance]);
+
+  // useEffect(() => {
+  //   if (value !== "" && myValue !== value && reactFlowInstance) {
+  //     // only executed once
+  //     setMyValue(value);
+  //     postValidatePrompt(field_name, value, nodeClass)
+  //       .then((apiReturn) => {
+  //         if (apiReturn.data) {
+  //           setNodeClass(apiReturn.data.frontend_node);
+  //           // need to update reactFlowInstance to re-render the nodes.
+  //           reactFlowInstance.setEdges(
+  //             _.cloneDeep(reactFlowInstance.getEdges())
+  //           );
+  //         }
+  //       })
+  //       .catch((error) => {});
+  //   }
+  // }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass, value]);
 
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>