feat(frontend): add ComponentOutput component to display output options for generic nodes

feat(types): add outputComponentType to define props for ComponentOutput component

src/frontend/src/customNodes/genericNode/components/ComponentOutput/index.tsx

@@ -0,0 +1,54 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@radix-ui/react-dropdown-menu";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import { outputComponentType } from "../../../../types/components";
+import { cn } from "../../../../utils/utils";
+import useFlowStore from "../../../../stores/flowStore";
+
+export default function ComponentOutput({
+  selected,
+  types,
+  frozen = false,
+  nodeId,
+}: outputComponentType) {
+  const setNode = useFlowStore((state) => state.setNode);
+  let displayTitle = selected ?? types[0];
+
+  if (types.length < 2) {
+    return (
+      <span className={cn(frozen ? " text-ice" : "")}>{displayTitle}</span>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <span
+          className={cn(frozen ? " text-ice" : "", "flex items-center gap-1")}
+        >
+          {displayTitle}
+          <ForwardedIconComponent name="ChevronDown" className="h-4 w-4" />
+        </span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {types.map((type) => (
+          <DropdownMenuItem
+            onSelect={() => {
+              // TODO: UDPDATE SET NODE TO NEW NODE FORM
+              setNode(nodeId, (node) => ({
+                ...node,
+                data: { ...node.data, selected: type },
+              }));
+            }}
+          >
+            {type}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -111,6 +111,13 @@ export type TextAreaComponentType = {
   readonly?: boolean;
 };
 
+export type outputComponentType = {
+  types: string[];
+  selected: string;
+  nodeId: string;
+  frozen?: boolean;
+};
+
 export type PromptAreaComponentType = {
   field_name?: string;
   nodeClass?: APIClassType;