From a755c8f44d71811a9128858f402c6689e1e1c28b Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 23 Jan 2024 17:56:37 -0300 Subject: [PATCH] Refactor flowStore and flowIOStore --- .../components/ViewTriggers/chat/index.tsx | 31 +++++++++ .../chatComponent/buildTrigger/index.tsx | 4 -- .../src/components/chatComponent/index.tsx | 69 +++++++++---------- .../src/components/newChatView/index.tsx | 25 +++---- src/frontend/src/stores/flowStore.ts | 9 ++- src/frontend/src/types/zustand/flow/index.ts | 4 +- .../src/types/zustand/flowIOStore/index.ts | 15 ---- 7 files changed, 86 insertions(+), 71 deletions(-) create mode 100644 src/frontend/src/components/ViewTriggers/chat/index.tsx diff --git a/src/frontend/src/components/ViewTriggers/chat/index.tsx b/src/frontend/src/components/ViewTriggers/chat/index.tsx new file mode 100644 index 000000000..b5365b455 --- /dev/null +++ b/src/frontend/src/components/ViewTriggers/chat/index.tsx @@ -0,0 +1,31 @@ +import { Transition } from "@headlessui/react"; + +import IconComponent from "../../genericIconComponent"; + +export default function ChatTrigger({}): JSX.Element { + return ( + + + + ); +} diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 546f8a529..9f649a77c 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx @@ -14,12 +14,9 @@ import IconComponent from "../../genericIconComponent"; export default function BuildTrigger({ open, flow, - setIsBuilt, }: { open: boolean; flow: FlowType; - setIsBuilt: any; - isBuilt: boolean; }): JSX.Element { const updateSSEData = useFlowStore((state) => state.updateSSEData); const isBuilding = useFlowStore((state) => state.isBuilding); @@ -52,7 +49,6 @@ export default function BuildTrigger({ const allNodesValid = await streamNodeData(flow); await enforceMinimumLoadingTime(startTime, minimumLoadingTime); - setIsBuilt(allNodesValid); if (!allNodesValid) { setErrorData({ title: "Oops! Looks like you missed something", diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index cbe978933..f007daab1 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -1,25 +1,27 @@ import { useEffect, useRef, useState } from "react"; import { useNodes } from "reactflow"; -import { ChatType } from "../../types/chat"; -import BuildTrigger from "./buildTrigger"; -import ChatTrigger from "./chatTrigger"; - -import * as _ from "lodash"; -import FormModal from "../../modals/formModal"; +import { CHAT_FORM_DIALOG_SUBTITLE } from "../../constants/constants"; +import BaseModal from "../../modals/baseModal"; import useFlowStore from "../../stores/flowStore"; +import { ChatType } from "../../types/chat"; import { NodeType } from "../../types/flow"; +import IOView from "../IOview"; +import ChatTrigger from "../ViewTriggers/chat"; +import IconComponent from "../genericIconComponent"; +import BuildTrigger from "./buildTrigger"; export default function Chat({ flow }: ChatType): JSX.Element { const [open, setOpen] = useState(false); - const isBuilt = useFlowStore((state) => state.isBuilt); - const setIsBuilt = useFlowStore((state) => state.setIsBuilt); const flowState = useFlowStore((state) => state.flowState); + const checkInputAndOutput = useFlowStore( + (state) => state.checkInputAndOutput + ); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if ( (event.key === "K" || event.key === "k") && (event.metaKey || event.ctrlKey) && - isBuilt + checkInputAndOutput() ) { event.preventDefault(); setOpen((oldState) => !oldState); @@ -29,39 +31,36 @@ export default function Chat({ flow }: ChatType): JSX.Element { return () => { document.removeEventListener("keydown", handleKeyDown); }; - }, [isBuilt]); + }, []); const prevNodesRef = useRef(); const nodes: NodeType[] = useNodes(); - useEffect(() => { - const prevNodes = prevNodesRef.current; - const currentNodes = nodes.map((node: NodeType) => - _.cloneDeep(node.data.node?.template) - ); - if (JSON.stringify(prevNodes) !== JSON.stringify(currentNodes)) { - setIsBuilt(false); - } - prevNodesRef.current = currentNodes; - }, [flowState, flow.id]); return ( <> -
- - {isBuilt && flowState && !!flowState?.input_keys && ( - +
+ + {checkInputAndOutput() && ( + + + + + {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */} + +
+ Chat +
+ + + + + )} -
); diff --git a/src/frontend/src/components/newChatView/index.tsx b/src/frontend/src/components/newChatView/index.tsx index 0f4a57ae1..6de401468 100644 --- a/src/frontend/src/components/newChatView/index.tsx +++ b/src/frontend/src/components/newChatView/index.tsx @@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import useAlertStore from "../../stores/alertStore"; import useFlowStore from "../../stores/flowStore"; -import useFlowIOStore from "../../stores/flowsIOStore"; import { sendAllProps } from "../../types/api"; import { ChatMessageType, @@ -19,16 +18,17 @@ import ChatMessage from "./chatMessage"; export default function newChatView(): JSX.Element { const [chatValue, setChatValue] = useState(""); const [chatHistory, setChatHistory] = useState([]); - const { reactFlowInstance } = useFlowStore(); const { flowPool, outputIds, inputIds, inputTypes, - updateNodeFlowData, + getNode, + setNode, buildFlow, + getFlow, CleanFlowPool, - } = useFlowIOStore(); + } = useFlowStore(); const { setErrorData } = useAlertStore(); const [lockChat, setLockChat] = useState(false); const messagesRef = useRef(null); @@ -75,24 +75,19 @@ export default function newChatView(): JSX.Element { }, []); async function sendMessage(count = 1): Promise { - let nodeValidationErrors = validateNodes( - reactFlowInstance!.getNodes(), - reactFlowInstance!.getEdges() - ); + const { nodes, edges } = getFlow(); + let nodeValidationErrors = validateNodes(nodes, edges); if (nodeValidationErrors.length === 0) { setLockChat(true); setChatValue(""); const chatInputId = inputIds.find((inputId) => inputId.includes("ChatInput") ); - const chatInput: NodeType = reactFlowInstance?.getNode( - chatInputId! - ) as NodeType; + const chatInput: NodeType = getNode(chatInputId!) as NodeType; if (chatInput) { - let newData = cloneDeep(chatInput.data); - newData.node!.template["message"].value = chatValue; - chatInput.data = { ...newData }; - updateNodeFlowData(chatInputId!, newData); + let newNode = cloneDeep(chatInput); + newNode.data.node!.template["message"].value = chatValue; + setNode(chatInputId!, newNode); } for (let i = 0; i < count; i++) { await buildFlow().catch((err) => { diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 5db649e4e..ed98f229e 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -157,7 +157,7 @@ const useFlowStore = create((set, get) => ({ }) ); }, - checkInputandOutput: () => { + checkInputAndOutput: () => { let has_input = false; let has_output = false; const nodes = get().nodes; @@ -427,6 +427,13 @@ const useFlowStore = create((set, get) => ({ }, }); }, + getFlow: () => { + return { + nodes: get().nodes, + edges: get().edges, + viewport: get().reactFlowInstance?.getViewport()!, + }; + }, })); export default useFlowStore; diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 1dcb72fda..1e86bce6e 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -87,5 +87,7 @@ export type FlowStoreType = { getFilterEdge: any[]; onConnect: (connection: Connection) => void; unselectAll: () => void; - buildFlow: (nodeId?: string) => void; + buildFlow: (nodeId?: string) => Promise; + checkInputAndOutput: () => boolean; + getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport }; }; diff --git a/src/frontend/src/types/zustand/flowIOStore/index.ts b/src/frontend/src/types/zustand/flowIOStore/index.ts index 1a4482a96..65833ced9 100644 --- a/src/frontend/src/types/zustand/flowIOStore/index.ts +++ b/src/frontend/src/types/zustand/flowIOStore/index.ts @@ -1,5 +1,3 @@ -import { FlowType, NodeType } from "../../flow"; - export type chatInputType = { result: string; }; @@ -21,16 +19,3 @@ export type FlowPoolObjectType = { export type FlowPoolType = { [key: string]: Array; }; - -export type flowIOStoreType = { - setOutputTypes: (outputTypes: string[]) => void; - setInputTypes: (inputTypes: string[]) => void; - setInputIds: (inputIds: string[]) => void; - setOutputIds: (outputIds: string[]) => void; - updateFlowPoolNodes: (nodes: NodeType[]) => void; - checkInputandOutput: (flow?: FlowType) => boolean; - getInputTypes: (flow?: FlowType) => string[]; - getOutputTypes: (flow?: FlowType) => string[]; - getInputIds: (flow?: FlowType) => string[]; - getOutputIds: (flow?: FlowType) => string[]; -};