🐛 fix(parameterComponent): set disabled prop to false in TextAreaComponent to enable editing

✨ feat(GenericNode): import Zap icon from lucide-react to use in validation status tooltip
🐛 fix(textAreaComponent): import classNames from utils to fix missing import error
🐛 fix(constants): update HIGHLIGH_CSS constant to add overflow-y-hidden and max-w-[75vw] classes
🐛 fix(ApiModal): add condition to check if tweak.current exists before calling startTweaks()
✨ feat(ApiModal): import Variable icon from lucide-react to use in input variables section
🐛 fix(genericModal): import Variable icon from lucide-react to use in input variables section
🐛 fix(utils): add newline character to INVALID_CHARACTERS array
🐛 fix(tailwind.config.js): set height property to "8px" for scrollbar in custom-scroll class

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

@@ -222,7 +222,7 @@ export default function ParameterComponent({
               />
             ) : data.node.template[name].multiline ? (
               <TextAreaComponent
-                disabled={disabled}
+                disabled={false}
                 value={data.node.template[name].value ?? ""}
                 onChange={handleOnNewValue}
               />

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

@@ -16,6 +16,7 @@ import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
+import { Zap } from "lucide-react";
 
 export default function GenericNode({
   data,
@@ -117,7 +118,8 @@ export default function GenericNode({
               <Tooltip
                 title={
                   !validationStatus ? (
-                    "Validating..."
+                      <span className="flex">Build <Zap className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1" strokeWidth={1.5} /> flow to validate status.</span>
+                    
                   ) : (
                     <div className="max-h-96 overflow-auto">
                       {validationStatus.params

src/frontend/src/components/textAreaComponent/index.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
-import { TypeModal } from "../../utils";
+import { TypeModal, classNames } from "../../utils";
 
 import { ExternalLink } from "lucide-react";
 
@@ -30,34 +30,24 @@ export default function TextAreaComponent({
     <div className={disabled ? "cursor-not-allowed" : ""}>
       <div
         className={
-          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (editNode ? "w-full relative top-2" : "flex w-full items-center") +
           (disabled ? " pointer-events-none" : "")
         }
       >
-        <span
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                type={TypeModal.TEXT}
-                buttonText="Finishing Editing"
-                modalTitle="Edit Text"
-                value={myValue}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-              />
-            );
-          }}
-          className={
-            editNode
-              ? "input-edit-node input-dialog "
-              : "input-dialog input-primary " +
-                (disabled ? "input-disable" : "")
-          }
-        >
-          {myValue !== "" ? myValue : "Type something..."}
-        </span>
+
+        <input
+        value={myValue}
+        className={
+          editNode
+            ? "input-edit-node"
+            : "input-primary" + (disabled ? " input-disable " : "")
+        }
+        placeholder={"Type something..."}
+        onChange={(e) => {
+          setMyValue(e.target.value);
+          onChange(e.target.value);
+        }}
+      />
 
         <button
           onClick={() => {

src/frontend/src/constants.tsx

@@ -529,4 +529,4 @@ export const USER_PROJECTS_HEADER = "My Collection";
  *
  */
 export const HIGHLIGH_CSS =
-  "block pl-3 pr-14 py-2 w-full h-full text-sm outline-0 border-0 break-all";
+  "block pl-3 pr-14 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden max-w-[75vw]";

src/frontend/src/modals/ApiModal/index.tsx

@@ -111,7 +111,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         startTweaks();
       }
     } else {
-      startTweaks();
+      if(tweak?.current){
+        startTweaks();
+      }
     }
   }, [closeEdit]);
 
@@ -313,7 +315,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
             >
               {index < 3 ? (
                 <SyntaxHighlighter
-                  className="h-[60vh] w-full overflow-auto"
+                  className="h-[60vh] w-full overflow-auto custom-scroll"
                   language={tab.mode}
                   style={oneDark}
                 >

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

@@ -39,6 +39,7 @@ import {
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { set } from "lodash";
 import DOMPurify from "dompurify";
+import { Variable } from "lucide-react";
 
 export default function GenericModal({
   field_name = "",
@@ -206,39 +207,6 @@ export default function GenericModal({
           </DialogDescription>
         </DialogHeader>
 
-        {type == TypeModal.PROMPT &&
-          inputValue &&
-          inputValue != "" &&
-          wordsHighlight.length > 0 && (
-            <>
-              <div>
-                <span className="">Variables: </span>
-                {wordsHighlight.map((word, index) => (
-                  <ShadTooltip
-                    key={getRandomKeyByssmm() + index}
-                    content={word.replace(/[{}]/g, "")}
-                    asChild={false}
-                    delayDuration={1500}
-                  >
-                    <Badge
-                      key={index}
-                      size="lg"
-                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
-                    >
-                      <div className="relative bottom-[1px]">
-                        <span>
-                          {word.replace(/[{}]/g, "").length > 59
-                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                            : word.replace(/[{}]/g, "")}
-                        </span>
-                      </div>
-                    </Badge>
-                  </ShadTooltip>
-                ))}
-              </div>
-            </>
-          )}
-
         <div
           className={classNames(
             !isEdit ? "rounded-lg border" : "",
@@ -248,7 +216,7 @@ export default function GenericModal({
           {type == TypeModal.PROMPT && isEdit ? (
             <Textarea
               ref={ref}
-              className="form-input h-full w-full rounded-lg border-gray-300 focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+              className="form-input h-full w-full rounded-lg border-gray-300 focus-visible:ring-1 dark:border-gray-700 dark:bg-gray-900 dark:text-white custom-scroll"
               value={inputValue}
               onBlur={() => {
                 blur();
@@ -278,6 +246,45 @@ export default function GenericModal({
           )}
         </div>
 
+        
+        {type == TypeModal.PROMPT && (
+            <>
+              <div className="">
+              <div className="items-center flex flex-wrap">
+                <Variable className=" -ml-px mr-1 h-4 w-4 text-primary flex"></Variable>
+                <span className="text-md font-semibold text-primary">
+                  Input Variables: {wordsHighlight &&
+          wordsHighlight.length == 0 ? '-' : ''}
+                </span>
+
+                {wordsHighlight.map((word, index) => (
+                  <ShadTooltip
+                    key={getRandomKeyByssmm() + index}
+                    content={word.replace(/[{}]/g, "")}
+                    asChild={false}
+                    delayDuration={1500}
+                  >
+                    <Badge
+                      key={index}
+                      variant="gray" size="md"
+                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                    >
+                      <div className="relative bottom-[1px]">
+                        <span>
+                          {word.replace(/[{}]/g, "").length > 59
+                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
+                            : word.replace(/[{}]/g, "")}
+                        </span>
+                      </div>
+                    </Badge>
+                  </ShadTooltip>
+                ))}
+
+              </div>
+              </div>
+            </>
+          )}
+
         <DialogFooter>
           <Button
             className="mt-3"

src/frontend/src/utils.ts

@@ -1022,6 +1022,7 @@ export const INVALID_CHARACTERS = [
   ")",
   "[",
   "]",
+  "\n"
 ];
 
 export const regexHighlight = /\{([^}]+)\}/g;

src/frontend/tailwind.config.js

@@ -199,6 +199,7 @@ module.exports = {
         ".custom-scroll": {
           "&::-webkit-scrollbar": {
             width: "8px",
+            height: "8px"
           },
           "&::-webkit-scrollbar-track": {
             backgroundColor: "#f1f1f1",