🔨 refactor(promptComponent): rename TextAreaComponentType to PromptAreaComponentType for better naming consistency and clarity

🔨 refactor(genericModal): import cloneDeep from lodash to improve code readability and maintainability
🔨 refactor(genericModal): add type annotations to validatePrompt function parameters for better code documentation
🔨 refactor(genericModal): add null check for nodeClass before modifying it in validatePrompt function
🔨 refactor(genericModal): setNodeClass and setModalOpen only if frontend_node is not an empty object in validatePrompt function
🔨 refactor(genericModal): remove console.log statement in catch block of validatePrompt function
🔨 refactor(genericModal): add type annotations to catch block of validatePrompt function for better code documentation
🔨 refactor(types): add PromptAreaComponentType to define the type of PromptAreaComponent props

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

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { TypeModal } from "../../constants/enums";
 import { postValidatePrompt } from "../../controllers/API";
 import GenericModal from "../../modals/genericModal";
-import { TextAreaComponentType } from "../../types/components";
+import { PromptAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
 
 export default function PromptAreaComponent({
@@ -14,7 +14,7 @@ export default function PromptAreaComponent({
   onChange,
   disabled,
   editNode = false,
-}: TextAreaComponentType) {
+}: PromptAreaComponentType) {
   useEffect(() => {
     if (disabled) {
       onChange("");

src/frontend/src/modals/genericModal/index.tsx

@@ -1,3 +1,4 @@
+import { cloneDeep } from "lodash";
 import { ReactNode, useContext, useEffect, useRef, useState } from "react";
 import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
@@ -130,8 +131,14 @@ export default function GenericModal({
       : "code-nohighlight";
   }
 
-  function validatePrompt(closeModal: boolean) {
-    postValidatePrompt(field_name, inputValue, nodeClass)
+  function validatePrompt(closeModal: boolean): void {
+    //nodeClass is always null on tweaks
+    if (nodeClass) {
+      const nodeClassCp = cloneDeep(nodeClass);
+      nodeClassCp["template"]["template"]["value"] = inputValue;
+      nodeClass = nodeClassCp;
+    }
+    postValidatePrompt(field_name, inputValue, nodeClass!)
       .then((apiReturn) => {
         if (apiReturn.data) {
           let inputVariables = apiReturn.data.input_variables ?? [];
@@ -140,13 +147,18 @@ export default function GenericModal({
             setNoticeData({
               title: "Your template does not have any variables.",
             });
+            setNodeClass!(apiReturn?.data?.frontend_node);
+            setModalOpen(closeModal);
           } else {
             setIsEdit(false);
             setSuccessData({
               title: "Prompt is ready",
             });
-            setNodeClass(apiReturn.data?.frontend_node);
-            setModalOpen(closeModal);
+            if (
+              JSON.stringify(apiReturn.data?.frontend_node) !==
+              JSON.stringify({})
+            )
+              setModalOpen(closeModal);
             setValue(inputValue);
           }
         } else {
@@ -157,7 +169,6 @@ export default function GenericModal({
         }
       })
       .catch((error) => {
-        console.log(error);
         setIsEdit(true);
         return setErrorData({
           title: "There is something wrong with this prompt, please review it",

src/frontend/src/types/components/index.ts

@@ -57,6 +57,16 @@ export type TextAreaComponentType = {
   editNode?: boolean;
 };
 
+export type PromptAreaComponentType = {
+  field_name?: string;
+  nodeClass?: APIClassType;
+  setNodeClass?: (value: APIClassType) => void;
+  disabled: boolean;
+  onChange: (value: string[] | string) => void;
+  value: string;
+  editNode?: boolean;
+};
+
 export type CodeAreaComponentType = {
   disabled: boolean;
   onChange: (value: string[] | string) => void;
@@ -101,18 +111,18 @@ export type TooltipComponentType = {
   children: ReactElement;
   title: string | ReactElement;
   placement?:
-    | "bottom-end"
-    | "bottom-start"
-    | "bottom"
-    | "left-end"
-    | "left-start"
-    | "left"
-    | "right-end"
-    | "right-start"
-    | "right"
-    | "top-end"
-    | "top-start"
-    | "top";
+  | "bottom-end"
+  | "bottom-start"
+  | "bottom"
+  | "left-end"
+  | "left-start"
+  | "left"
+  | "right-end"
+  | "right-start"
+  | "right"
+  | "top-end"
+  | "top-start"
+  | "top";
 };
 
 export type ProgressBarType = {