Text area placeholder at the parameters component done

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

@@ -9,6 +9,7 @@ import { useEffect, useRef, useState } from "react";
 import InputComponent from "../../../../components/inputComponent";
 import ToggleComponent from "../../../../components/toggleComponent";
 import InputListComponent from "../../../../components/inputListComponent";
+import TextAreaComponent from "../../../../components/textAreaComponent";
 
 export default function ParameterComponent({
   left,
@@ -72,6 +73,15 @@ export default function ParameterComponent({
               }}
             />
             :
+            !data.node.template[name].multiline ? (
+              <TextAreaComponent
+                disabled={disabled}
+                value={data.node.template[name].value ?? ""}
+                onChange={(t) => {
+                  data.node.template[name].value = t;
+                }}
+              />
+            ) : 
             <InputComponent
             disabled={disabled}
             value={data.node.template[name].value ?? ""}

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -10,9 +10,10 @@ import { Handle, Position } from "reactflow";
 import { useContext, useEffect } from "react";
 import Tooltip from "../../components/TooltipComponent";
 import { typesContext } from "../../contexts/typesContext";
+import TextAreaComponent from "../../components/textAreaComponent";
 
 export default function InputNode({ data }) {
-  const {types} = useContext(typesContext);
+  const { types } = useContext(typesContext);
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
       <Tooltip title="Prefix: str">
@@ -45,13 +46,14 @@ export default function InputNode({ data }) {
         </button>
       </div>
       <div className="w-full p-5 h-full">
-        <InputComponent
-        disabled={false}
-          value=""
-          onChange={(e) => {
-            data.value = e;
-          }}
-        />
+        
+          <InputComponent
+            disabled={false}
+            value=""
+            onChange={(e) => {
+              data.value = e;
+            }}
+          />
       </div>
       <Handle
         type="target"

space_flow/src/components/textAreaComponent/index.tsx

@@ -0,0 +1,29 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { useEffect, useState } from "react";
+
+export default function TextAreaComponent({ value, onChange, disabled }) {
+  const [myValue, setMyValue] = useState(value);
+  useEffect(() => {
+    if (disabled) {
+      setMyValue([""]);
+      onChange([""]);
+    }
+  }, [disabled, onChange]);
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+      <div className="w-full flex items-center gap-3">
+        <span
+          className={
+            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            (disabled ? " bg-gray-200" : "")
+          }
+        >
+            {myValue !== "" ? myValue : 'Text empty'}
+        </span>
+        <button onClick={()=>{}}>
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+        </button>
+      </div>
+    </div>
+  );
+}