jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Modifies frontend chatComponent to itemize validation errors

Browse source
This commit is contained in:
Cayal Walker 2023-04-06 13:09:03 -04:00
commit c13cfd09cf
1 changed files with 35 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/frontend/src/components/chatComponent/index.tsx
View file

@ -18,6 +18,7 @@ import { classNames, nodeColors } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
import { ChatType } from "../../types/chat";
import ChatMessage from "./chatMessage";
import { NodeType } from "../../types/flow";
const _ = require("lodash");
@ -73,36 +74,44 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
useEffect(() => {
if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
}, [chatHistory]);
function validateNodes() {
if (
reactFlowInstance.getNodes().some(
(n) =>
n.data.node &&
Object.keys(n.data.node.template).some((t: any) => {
return (
n.data.node.template[t].required &&
(!n.data.node.template[t].value ||
n.data.node.template[t].value === "") &&
!reactFlowInstance
.getEdges()
.some(
(e) =>
e.targetHandle.split("|")[1] === t &&
e.targetHandle.split("|")[2] === n.id
)
);
})
)
) {
return false;
function validateNode(n: NodeType): Array<string> {
if (!n.data?.node?.template ||
!Object.keys(n.data.node.template)) {
console.warn("There is a broken node in the flow. Please submit a bug report and include your exported flow file.");
return [];
}
return true;
const { type, node: { template } } = n.data;
return Object.keys(template).reduce((errors: Array<string>, t) =>
errors.concat(
template[t].required &&
(!template[t].value ||
template[t].value === "") &&
!reactFlowInstance
.getEdges()
.some(
(e) =>
e.targetHandle.split("|")[1] === t &&
e.targetHandle.split("|")[2] === n.id
)
? [`${type} is missing ${template[t].name}.`]
: []
), [] as string[]
);
};
function validateNodes() {
return reactFlowInstance.getNodes().flatMap((n: NodeType) => validateNode(n))
}
const ref = useRef(null);
function sendMessage() {
if (chatValue !== "") {
if (validateNodes()) {
let nodeValidationErrors = validateNodes();
if (nodeValidationErrors.length === 0) {
setLockChat(true);
let message = chatValue;
setChatValue("");
@ -138,7 +147,8 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
setErrorData({
title: "Error sending message",
list: [
"Oops! Looks like you missed some required information. Please fill in all the required fields before continuing.",
"Oops! Looks like you missed some required information. Please fill in all the required fields before continuing:",
...nodeValidationErrors
],
});
}