Refactor flowStore and add getInputs and getOutputs functions

src/frontend/src/components/IOview/index.tsx

@@ -10,10 +10,12 @@ import { Badge } from "../ui/badge";
 import { Textarea } from "../ui/textarea";
 
 export default function IOView(): JSX.Element {
-  const { inputIds, outputIds } = useFlowStore();
+  const inputIds = useFlowStore((state) => state.inputIds);
+  const outputIds = useFlowStore((state) => state.outputIds);
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const options = inputIds.concat(outputIds);
+  console.log(options);
   const [selectedView, setSelectedView] = useState<ReactNode>(
     handleSelectChange(options[0])
   );

src/frontend/src/components/chatComponent/index.tsx

@@ -15,9 +15,16 @@ export default function Chat({ flow }: ChatType): JSX.Element {
   const checkInputAndOutput = useFlowStore(
     (state) => state.checkInputAndOutput
   );
+  const getOutputs = useFlowStore((state) => state.getOutputs);
+  const getInputs = useFlowStore((state) => state.getInputs);
   const [showTrigger, setShowTrigger] = useState(checkInputAndOutput());
   useEffect(() => {
-    setShowTrigger(checkInputAndOutput());
+    const haveIO = checkInputAndOutput();
+    setShowTrigger(haveIO);
+    if (haveIO) {
+      getOutputs();
+      getInputs();
+    }
   }, [nodes]);
 
   useEffect(() => {
@@ -46,7 +53,9 @@ export default function Chat({ flow }: ChatType): JSX.Element {
         {showTrigger && (
           <BaseModal open={open} setOpen={setOpen}>
             <BaseModal.Trigger asChild>
-              <ChatTrigger />
+              <div onClick={() => setOpen(true)}>
+                <ChatTrigger />
+              </div>
             </BaseModal.Trigger>
             {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
             <BaseModal.Header description={CHAT_FORM_DIALOG_SUBTITLE}>

src/frontend/src/stores/flowStore.ts

@@ -330,56 +330,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       });
     });
   },
-  getInputTypes: () => {
-    let inputType: string[] = [];
-    const nodes = get().nodes;
-    nodes.forEach((node) => {
-      const nodeData: NodeDataType = node.data as NodeDataType;
-      if (isInputNode(nodeData)) {
-        // TODO remove count and ramdom key from type before pushing
-        inputType.push(nodeData.type);
-      }
-    });
-    set({ inputTypes: inputType });
-    return inputType;
-  },
-  getOutputTypes: () => {
-    let outputType: string[] = [];
-    const nodes = get().nodes;
-    nodes.forEach((node) => {
-      const nodeData: NodeDataType = node.data as NodeDataType;
-      if (isOutputNode(nodeData)) {
-        outputType.push(nodeData.type);
-      }
-    });
-    set({ outputTypes: outputType });
-    return outputType;
-  },
-  getInputIds: () => {
-    let inputIds: string[] = [];
-    const nodes = get().nodes;
-    nodes.forEach((node) => {
-      const nodeData: NodeDataType = node.data as NodeDataType;
-      if (isInputNode(nodeData)) {
-        inputIds.push(nodeData.id);
-      }
-    });
-    set({ inputIds });
-    return inputIds;
-  },
-  getOutputIds: () => {
-    let outputIds: string[] = [];
-    const nodes = get().nodes;
-
-    nodes.forEach((node) => {
-      const nodeData: NodeDataType = node.data as NodeDataType;
-      if (isOutputNode(nodeData)) {
-        outputIds.push(nodeData.id);
-      }
-    });
-    set({ outputIds });
-    return outputIds;
-  },
   buildFlow: async (nodeId?: string) => {
     function handleBuildUpdate(data: any) {
       get().addDataToFlowPool(data.data[data.id], data.id);
@@ -419,6 +369,36 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       viewport: get().reactFlowInstance?.getViewport()!,
     };
   },
+  getOutputs(): { type: string; id: string }[] {
+    let outputs: { type: string; id: string }[] = [];
+    const nodes = get().nodes;
+    nodes.forEach((node) => {
+      const nodeData: NodeDataType = node.data as NodeDataType;
+      if (isOutputNode(nodeData)) {
+        outputs.push({ type: nodeData.type, id: nodeData.id });
+      }
+    });
+    set({
+      outputIds: outputs.map((output) => output.id),
+      outputTypes: outputs.map((output) => output.type),
+    });
+    return outputs;
+  },
+  getInputs(): { type: string; id: string }[] {
+    let inputs: { type: string; id: string }[] = [];
+    const nodes = get().nodes;
+    nodes.forEach((node) => {
+      const nodeData: NodeDataType = node.data as NodeDataType;
+      if (isOutputNode(nodeData)) {
+        inputs.push({ type: nodeData.type, id: nodeData.id });
+      }
+    });
+    set({
+      inputIds: inputs.map((input) => input.id),
+      inputTypes: inputs.map((input) => input.type),
+    });
+    return inputs;
+  },
 }));
 
 export default useFlowStore;

src/frontend/src/types/flow/index.ts

@@ -9,6 +9,7 @@ export type FlowType = {
   style?: FlowStyleType;
   is_component?: boolean;
   last_tested_version?: string;
+  parent?: string;
 };
 
 export type NodeType = {

src/frontend/src/types/zustand/flow/index.ts

@@ -86,4 +86,6 @@ export type FlowStoreType = {
   buildFlow: (nodeId?: string) => Promise<void>;
   checkInputAndOutput: () => boolean;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
+  getOutputs: () => { type: string; id: string }[];
+  getInputs: () => { type: string; id: string }[];
 };

src/frontend/src/utils/storeUtils.ts

@@ -1,5 +1,7 @@
 import { cloneDeep } from "lodash";
-import { FlowType } from "../types/flow";
+import { Node } from "reactflow";
+import { FlowType, NodeDataType } from "../types/flow";
+import { isInputNode, isOutputNode } from "./reactflowUtils";
 
 export default function cloneFLowWithParent(
   flow: FlowType,
@@ -21,3 +23,18 @@ export function getTagsIds(
     .map((tag) => tagListId.find((tagObj) => tagObj.name === tag))!
     .map((tag) => tag!.id);
 }
+
+export function getInputsAndOutputs(nodes: Node[]) {
+  let inputs: { type: string; id: string }[] = [];
+  let outputs: { type: string; id: string }[] = [];
+  nodes.forEach((node) => {
+    const nodeData: NodeDataType = node.data as NodeDataType;
+    if (isOutputNode(nodeData)) {
+      outputs.push({ type: nodeData.type, id: nodeData.id });
+    }
+    if (isInputNode(nodeData)) {
+      inputs.push({ type: nodeData.type, id: nodeData.id });
+    }
+  });
+  return { inputs, outputs };
+}