-
- {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[];
-};