🔧 fix(promptComponent): fix linting issues and add missing field_name prop

🚀 feat(promptComponent): improve prompt functionality by adding missing field_name prop
Fixed some linting issues in the PromptAreaComponent and added the missing field_name prop to improve code quality and maintainability. The field_name prop was missing, which caused an error in the postValidatePrompt function. This commit also improves the prompt functionality by ensuring that the reactFlowInstance is updated and the nodes are re-rendered when the value changes.

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

@@ -10,6 +10,7 @@ import { typesContext } from "../../contexts/typesContext";
 import * as _ from "lodash";
 
 export default function PromptAreaComponent({
+  field_name,
   setNodeClass,
   nodeClass,
   value,
@@ -20,7 +21,6 @@ export default function PromptAreaComponent({
   const [myValue, setMyValue] = useState("");
   const { openPopUp } = useContext(PopUpContext);
   const { reactFlowInstance } = useContext(typesContext);
-
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -29,19 +29,22 @@ export default function PromptAreaComponent({
   }, [disabled, onChange]);
 
   useEffect(() => {
-    if (value !== "" && myValue !== value && reactFlowInstance) { // only executed once
+    if (value !== "" && myValue !== value && reactFlowInstance) {
+      // only executed once
       setMyValue(value);
-      postValidatePrompt(value, nodeClass)
+      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()));
+            reactFlowInstance.setEdges(
+              _.cloneDeep(reactFlowInstance.getEdges())
+            );
           }
         })
         .catch((error) => {});
     }
-  }, [reactFlowInstance]);
+  }, [reactFlowInstance, field_name]);
 
   return (
     <div
@@ -49,7 +52,7 @@ export default function PromptAreaComponent({
         disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
       }
     >
-      <div className="w-full flex items-center">
+      <div className="flex w-full items-center">
         <span
           onClick={() => {
             openPopUp(
@@ -70,7 +73,9 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? " input-edit-node " + " input-dialog "
-              : (disabled ? " input-disable " : "") + " input-primary " + " input-dialog "
+              : (disabled ? " input-disable " : "") +
+                " input-primary " +
+                " input-dialog "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}
@@ -79,6 +84,7 @@ export default function PromptAreaComponent({
           onClick={() => {
             openPopUp(
               <GenericModal
+                field_name={field_name}
                 type={TypeModal.PROMPT}
                 value={myValue}
                 buttonText="Check & Save"
@@ -93,7 +99,12 @@ export default function PromptAreaComponent({
             );
           }}
         >
-          {!editNode && <ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />}
+          {!editNode && (
+            <ExternalLink
+              strokeWidth={1.5}
+              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+            />
+          )}
         </button>
       </div>
     </div>