Fixed bug where the node internals are not updated at the PromptTemplate

src/frontend/src/components/promptComponent/index.tsx

@@ -6,6 +6,8 @@ import { TypeModal } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
 import { ExternalLink } from "lucide-react";
 import { postValidatePrompt } from "../../controllers/API";
+import { typesContext } from "../../contexts/typesContext";
+import * as _ from "lodash";
 
 export default function PromptAreaComponent({
   setNodeClass,
@@ -15,8 +17,10 @@ export default function PromptAreaComponent({
   disabled,
   editNode = false,
 }: TextAreaComponentType) {
-  const [myValue, setMyValue] = useState(value);
+  const [myValue, setMyValue] = useState("");
   const { openPopUp } = useContext(PopUpContext);
+  const { reactFlowInstance } = useContext(typesContext);
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -25,20 +29,21 @@ export default function PromptAreaComponent({
   }, [disabled, onChange]);
 
   useEffect(() => {
-    if (value) {
+    if (value !== "") { // only executed once
-      postValidatePrompt(myValue, nodeClass)
+      setMyValue(value);
+      postValidatePrompt(value, nodeClass)
         .then((apiReturn) => {
           if (apiReturn.data) {
             setNodeClass(apiReturn.data.frontend_node);
+            if(reactFlowInstance){
+              // need to update reactFlowInstance to re-render the nodes.
+              reactFlowInstance.setEdges(_.cloneDeep(reactFlowInstance.getEdges()));
+            }
           }
         })
         .catch((error) => {});
     }
-  }, [value]);
+  }, [reactFlowInstance]);
-
-  useEffect(() => {
-    setMyValue(value);
-  }, [value]);
 
   return (
     <div