open pop up on input click

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -19,9 +19,24 @@ export default function CodeAreaComponent({
 		}
 	}, [disabled, onChange]);
 	return (
-		<div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"}>
+		<div
+			className={
+				disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
+			}
+		>
 			<div className="w-full flex items-center gap-3">
 				<span
+					onClick={() => {
+						openPopUp(
+							<CodeAreaModal
+								value={myValue}
+								setValue={(t: string) => {
+									setMyValue(t);
+									onChange(t);
+								}}
+							/>
+						);
+					}}
 					className={
 						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
 						(disabled ? " bg-gray-200" : "")

src/frontend/src/components/inputFileComponent/index.tsx

@@ -69,6 +69,7 @@ export default function InputFileComponent({
 		>
 			<div className="w-full flex items-center gap-3">
 				<span
+				onClick={handleButtonClick}
 					className={
 						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
 						(disabled ? " bg-gray-200" : "")

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

@@ -6,7 +6,11 @@ import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import PromptAreaModal from "../../modals/promptModal";
 
-export default function PromptAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
+export default function PromptAreaComponent({
+	value,
+	onChange,
+	disabled,
+}: TextAreaComponentType) {
 	const [myValue, setMyValue] = useState(value);
 	const { openPopUp } = useContext(PopUpContext);
 	useEffect(() => {
@@ -16,17 +20,44 @@ export default function PromptAreaComponent({ value, onChange, disabled }:TextAr
 		}
 	}, [disabled, onChange]);
 	return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"}>
+		<div
+			className={
+				disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
+			}
+		>
 			<div className="w-full flex items-center gap-3">
 				<span
+					onClick={() => {
+						openPopUp(
+							<PromptAreaModal
+								value={myValue}
+								setValue={(t: string) => {
+									setMyValue(t);
+									onChange(t);
+								}}
+							/>
+						);
+					}}
 					className={
 						"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
 						(disabled ? " bg-gray-200" : "")
 					}
 				>
-            {myValue !== "" ? myValue : 'Text empty'}
+					{myValue !== "" ? myValue : "Text empty"}
 				</span>
-        <button onClick={()=>{openPopUp(<PromptAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
+				<button
+					onClick={() => {
+						openPopUp(
+							<PromptAreaModal
+								value={myValue}
+								setValue={(t: string) => {
+									setMyValue(t);
+									onChange(t);
+								}}
+							/>
+						);
+					}}
+				>
 					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
 				</button>
 			</div>

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

@@ -16,7 +16,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <div className="w-full flex items-center gap-3">
-        <span
+        <span onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}
           className={
             "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
             (disabled ? " bg-gray-200" : "")

src/frontend/src/modals/NodeModal/index.tsx

@@ -87,7 +87,9 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 										<div className="flex h-full w-full">
 											<div className="overflow-hidden px-4 sm:p-4  w-full rounded-lg bg-white dark:bg-gray-800 shadow">
 												<div className="flex flex-col h-full gap-5">
-													{Object.keys(data.node.template)
+													{
+														//&& data.node.template[t].advanced
+														Object.keys(data.node.template)
 															.filter((t) => t.charAt(0) !== "_")
 															.map((t: string, idx) => {
 																return (
@@ -114,7 +116,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
 																		type={data.node.template[t].type}
 																	/>
 																);
-														})}
+															})
+													}
 												</div>
 											</div>
 										</div>