Refactor: Change inputTypes and outputTypes to a only object array

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

@@ -10,8 +10,10 @@ import { Badge } from "../ui/badge";
 import { Textarea } from "../ui/textarea";
 
 export default function IOView(): JSX.Element {
-  const inputIds = useFlowStore((state) => state.inputIds);
-  const outputIds = useFlowStore((state) => state.outputIds);
+  const inputs = useFlowStore((state) => state.inputs);
+  const outputs = useFlowStore((state) => state.outputs);
+  const inputIds = inputs.map((obj) => obj.id);
+  const outputIds = outputs.map((obj) => obj.id);
   const nodes = useFlowStore((state) => state.nodes);
   const setNode = useFlowStore((state) => state.setNode);
   const options = inputIds.concat(outputIds);

src/frontend/src/components/newChatView/index.tsx

@@ -20,9 +20,8 @@ export default function newChatView(): JSX.Element {
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const {
     flowPool,
-    outputIds,
-    inputIds,
-    inputTypes,
+    outputs,
+    inputs,
     getNode,
     setNode,
     buildFlow,
@@ -33,6 +32,10 @@ export default function newChatView(): JSX.Element {
   const [lockChat, setLockChat] = useState(false);
   const messagesRef = useRef<HTMLDivElement | null>(null);
 
+  const inputTypes = inputs.map((obj) => obj.type);
+  const inputIds = inputs.map((obj) => obj.id);
+  const outputIds = outputs.map((obj) => obj.id)
+
   //build chat history
   useEffect(() => {
     const chatOutputResponses: FlowPoolObjectType[] = [];

src/frontend/src/stores/flowStore.ts

@@ -39,10 +39,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   reactFlowInstance: null,
   lastCopiedSelection: null,
   flowPool: {},
-  outputTypes: [],
-  inputTypes: [],
-  inputIds: [],
-  outputIds: [],
+  inputs: [],
+  outputs: [],
   setFlowPool: (flowPool) => {
     set({ flowPool });
   },
@@ -68,10 +66,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       nodes,
       edges: newEdges,
       flowState: undefined,
-      inputIds: inputs.map((input) => input.id),
-      outputIds: outputs.map((output) => output.id),
-      inputTypes: inputs.map((input) => input.type),
-      outputTypes: outputs.map((output) => output.type),
+      inputs,
+      outputs,
       hasIO: inputs.length > 0 && outputs.length > 0,
     });
     get().reactFlowInstance!.setViewport(viewport);
@@ -111,10 +107,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       edges: newEdges,
       nodes: newChange,
       flowState: undefined,
-      inputIds: inputs.map((input) => input.id),
-      outputIds: outputs.map((output) => output.id),
-      inputTypes: inputs.map((input) => input.type),
-      outputTypes: outputs.map((output) => output.type),
+      inputs,
+      outputs,
       hasIO: inputs.length > 0 && outputs.length > 0,
     });
 

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

@@ -35,11 +35,9 @@ export type FlowPoolType = {
 
 export type FlowStoreType = {
   flowPool: FlowPoolType;
-  inputTypes: string[];
-  outputTypes: string[];
-  inputIds: string[];
+  inputs: Array<{ type: string; id: string; }>;
+  outputs: Array<{ type: string; id: string; }>;
   hasIO: boolean;
-  outputIds: string[];
   setFlowPool: (flowPool: FlowPoolType) => void;
   addDataToFlowPool: (data: any, nodeId: string) => void;
   CleanFlowPool: () => void;