added dropdown

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

@@ -9,6 +9,7 @@ import TextAreaComponent from "../../../../components/textAreaComponent";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
 import FloatComponent from "../../../../components/floatComponent";
+import Dropdown from "../../../../components/dropdownComponent";
 
 export default function ParameterComponent({
 	left,
@@ -38,6 +39,7 @@ export default function ParameterComponent({
 	const [enabled, setEnabled] = useState(
 		data.node.template[name]?.value ?? false
 	);
+	console.log(data.node.template[name]);
 	const { reactFlowInstance } = useContext(typesContext);
 	let disabled =
 		reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
@@ -52,9 +54,9 @@ export default function ParameterComponent({
 					{title}
 					<span className="text-red-600">{required ? " *" : ""}</span>
 				</div>
-				{left && (type === "str" || type === "bool" || type === "float") ?
+				{left && (type === "str" || type === "bool" || type === "float") ? (
 					<></>
-				:
+				) : (
 					<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
 						<Handle
 							type={left ? "target" : "source"}
@@ -73,9 +75,11 @@ export default function ParameterComponent({
 							}}
 						></Handle>
 					</Tooltip>
-				}
+				)}
 
-				{left === true && type === "str" ? (
+				{left === true &&
+				type === "str" &&
+				!data.node.template[name].options ? (
 					<div className="mt-2 w-full">
 						{data.node.template[name].list ? (
 							<InputListComponent
@@ -128,6 +132,14 @@ export default function ParameterComponent({
 							data.node.template[name].value = t;
 						}}
 					/>
+				) : left === true &&
+				  type === "str" &&
+				  data.node.template[name].options ? (
+					<Dropdown
+						options={data.node.template[name].options}
+						onSelect={(newValue) => data.node.template[name].value=newValue}
+						value={data.node.template[name].value??"chose an option"}
+					></Dropdown>
 				) : (
 					<></>
 				)}

src/frontend/src/components/dropdownComponent/index.tsx

@@ -1,21 +1,22 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 
-export default function Dropdown({title, value, options, onSelect}:DropDownComponentType) {
+export default function Dropdown({value, options, onSelect}:DropDownComponentType) {
+  let [internalValue,setInternalValue] = useState(value??"choose an option")
   return (
     <>
-      <Listbox value={value} onChange={onSelect}>
+      <Listbox value={internalValue} onChange={(value)=>{
+        setInternalValue(value)
+        onSelect(value)
+      }}>
         {({ open }) => (
           <>
-            <Listbox.Label className="block text-sm font-medium text-gray-700">
-              {title}
-            </Listbox.Label>
             <div className="relative mt-1">
               <Listbox.Button className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm">
-                <span className="block truncate">{value}</span>
+                <span className="block w-max truncate">{internalValue}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon
                     className="h-5 w-5 text-gray-400"

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

@@ -12,7 +12,6 @@ export type ToggleComponentType = {
 	disabled: boolean;
 };
 export type DropDownComponentType = {
-	title: string;
 	value: string;
 	options: string[];
 	onSelect: (value: string) => void;