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

Merge branch 'modalRefactor' into python_custom_node_component

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-16 17:09:56 -03:00
commit 8e6e2e9708
30 changed files with 1625 additions and 1894 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/frontend/package-lock.json generated
View file

@ -147,9 +147,9 @@
} }
}, },
"node_modules/@babel/compat-data": { "node_modules/@babel/compat-data": {
"version": "7.22.6", "version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.6.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.9.tgz",
"integrity": "sha512-29tfsWTq2Ftu7MXmimyC0C5FDZv5DYxOZkh3XD3+QW4V/BYuv/LyEsjj3c0hqedEaDt6DBfDvexMKU8YevdqFg==", "integrity": "sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==",
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
} }
@ -194,10 +194,18 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@babel/core/node_modules/@nicolo-ribaudo/semver-v6": {
"version": "6.3.3",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
"integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/@babel/generator": { "node_modules/@babel/generator": {
"version": "7.22.7", "version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.7.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.9.tgz",
"integrity": "sha512-p+jPjMG+SI8yvIaxGgeW24u7q9+5+TGpZh8/CuB7RhBKd7RCy8FayNEFNNKrNK/eUcY/4ExQqLmyrvBXKsIcwQ==", "integrity": "sha512-KtLMbmicyuK2Ak/FTCJVbDnkN1SlT8/kceFTiuDiiRUUSMnHMidxSCdG4ndkTOHHpoomWe/4xkvHkEOncwjYIw==",
"dependencies": { "dependencies": {
"@babel/types": "^7.22.5", "@babel/types": "^7.22.5",
"@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/gen-mapping": "^0.3.2",
@ -209,15 +217,15 @@
} }
}, },
"node_modules/@babel/helper-compilation-targets": { "node_modules/@babel/helper-compilation-targets": {
"version": "7.22.6", "version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.6.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.9.tgz",
"integrity": "sha512-534sYEqWD9VfUm3IPn2SLcH4Q3P86XL+QvqdC7ZsFrzyyPF3T4XGiVghF6PTYNdWg6pXuoqXxNQAhbYeEInTzA==", "integrity": "sha512-7qYrNM6HjpnPHJbopxmb8hSPoZ0gsX8IvUS32JGVoy+pU9e5N0nLr1VjJoR6kA4d9dmGLxNYOjeB8sUDal2WMw==",
"dependencies": { "dependencies": {
"@babel/compat-data": "^7.22.6", "@babel/compat-data": "^7.22.9",
"@babel/helper-validator-option": "^7.22.5", "@babel/helper-validator-option": "^7.22.5",
"@nicolo-ribaudo/semver-v6": "^6.3.3",
"browserslist": "^4.21.9", "browserslist": "^4.21.9",
"lru-cache": "^5.1.1" "lru-cache": "^5.1.1",
"semver": "^6.3.1"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@ -226,6 +234,14 @@
"@babel/core": "^7.0.0" "@babel/core": "^7.0.0"
} }
}, },
"node_modules/@babel/helper-compilation-targets/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/@babel/helper-environment-visitor": { "node_modules/@babel/helper-environment-visitor": {
"version": "7.22.5", "version": "7.22.5",
"resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
@ -269,21 +285,21 @@
} }
}, },
"node_modules/@babel/helper-module-transforms": { "node_modules/@babel/helper-module-transforms": {
"version": "7.22.5", "version": "7.22.9",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.9.tgz",
"integrity": "sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==", "integrity": "sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==",
"dependencies": { "dependencies": {
"@babel/helper-environment-visitor": "^7.22.5", "@babel/helper-environment-visitor": "^7.22.5",
"@babel/helper-module-imports": "^7.22.5", "@babel/helper-module-imports": "^7.22.5",
"@babel/helper-simple-access": "^7.22.5", "@babel/helper-simple-access": "^7.22.5",
"@babel/helper-split-export-declaration": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6",
"@babel/helper-validator-identifier": "^7.22.5", "@babel/helper-validator-identifier": "^7.22.5"
"@babel/template": "^7.22.5",
"@babel/traverse": "^7.22.5",
"@babel/types": "^7.22.5"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0"
} }
}, },
"node_modules/@babel/helper-simple-access": { "node_modules/@babel/helper-simple-access": {
@ -1149,12 +1165,12 @@
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
}, },
"node_modules/@mui/private-theming": { "node_modules/@mui/private-theming": {
"version": "5.13.1", "version": "5.13.7",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.1.tgz", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz",
"integrity": "sha512-HW4npLUD9BAkVppOUZHeO1FOKUJWAwbpy0VQoGe3McUYTlck1HezGHQCfBQ5S/Nszi7EViqiimECVl9xi+/WjQ==", "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.21.0", "@babel/runtime": "^7.22.5",
"@mui/utils": "^5.13.1", "@mui/utils": "^5.13.7",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
}, },
"engines": { "engines": {
@ -1175,9 +1191,9 @@
} }
}, },
"node_modules/@mui/private-theming/node_modules/@babel/runtime": { "node_modules/@mui/private-theming/node_modules/@babel/runtime": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==", "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.13.11"
}, },
@ -1185,6 +1201,33 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@mui/private-theming/node_modules/@mui/utils": {
"version": "5.13.7",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.7.tgz",
"integrity": "sha512-/3BLptG/q0u36eYED7Nhf4fKXmcKb6LjjT7ZMwhZIZSdSxVqDqSTmATW3a56n3KEPQUXCU9TpxAfCBQhs6brVA==",
"dependencies": {
"@babel/runtime": "^7.22.5",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^18.2.1",
"prop-types": "^15.8.1",
"react-is": "^18.2.0"
},
"engines": {
"node": ">=12.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
},
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0"
}
},
"node_modules/@mui/private-theming/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/styled-engine": { "node_modules/@mui/styled-engine": {
"version": "5.13.2", "version": "5.13.2",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz",
@ -1217,9 +1260,9 @@
} }
}, },
"node_modules/@mui/styled-engine/node_modules/@babel/runtime": { "node_modules/@mui/styled-engine/node_modules/@babel/runtime": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==", "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.13.11"
}, },
@ -1272,9 +1315,9 @@
} }
}, },
"node_modules/@mui/system/node_modules/@babel/runtime": { "node_modules/@mui/system/node_modules/@babel/runtime": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==", "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.13.11"
}, },
@ -1323,9 +1366,9 @@
} }
}, },
"node_modules/@mui/utils/node_modules/@babel/runtime": { "node_modules/@mui/utils/node_modules/@babel/runtime": {
"version": "7.22.5", "version": "7.22.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
"integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==", "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
"dependencies": { "dependencies": {
"regenerator-runtime": "^0.13.11" "regenerator-runtime": "^0.13.11"
}, },
@ -1338,14 +1381,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
}, },
"node_modules/@nicolo-ribaudo/semver-v6": {
"version": "6.3.3",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
"integrity": "sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==",
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -3542,7 +3577,7 @@
"version": "16.18.12", "version": "16.18.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
"integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
"devOptional": true "dev": true
}, },
"node_modules/@types/parse-json": { "node_modules/@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
@ -5094,9 +5129,9 @@
"integrity": "sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ==" "integrity": "sha512-ae0mA+Qiqp6C29pqZX3fQgK+F91+F7wobM/v8DRzDqJdZJELXiFUx4PP4pK/mzUS0xkiSEx3Ncd9gr69jg3YsQ=="
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.440", "version": "1.4.457",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.457.tgz",
"integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==" "integrity": "sha512-/g3UyNDmDd6ebeWapmAoiyy+Sy2HyJ+/X8KyvNeHfKRFfHaA2W8oF5fxD5F3tjBDcjpwo0iek6YNgxNXDBoEtA=="
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
"version": "8.0.0", "version": "8.0.0",
@ -5588,6 +5623,7 @@
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
"os": [ "os": [
@ -8025,9 +8061,9 @@
} }
}, },
"node_modules/node-releases": { "node_modules/node-releases": {
"version": "2.0.12", "version": "2.0.13",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
"integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==" "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
}, },
"node_modules/normalize-path": { "node_modules/normalize-path": {
"version": "3.0.0", "version": "3.0.0",

13
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -1,3 +1,4 @@
import { cloneDeep } from "lodash";
import { Info } from "lucide-react"; import { Info } from "lucide-react";
import React, { useContext, useEffect, useRef, useState } from "react"; import React, { useContext, useEffect, useRef, useState } from "react";
import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
@ -13,7 +14,6 @@ import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent"; import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants"; import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components"; import { ParameterComponentType } from "../../../../types/components";
@ -32,6 +32,7 @@ export default function ParameterComponent({
left, left,
id, id,
data, data,
setData,
tooltipTitle, tooltipTitle,
title, title,
color, color,
@ -47,7 +48,6 @@ export default function ParameterComponent({
const infoHtml = useRef(null); const infoHtml = useRef(null);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0); const [position, setPosition] = useState(0);
const { closePopUp } = useContext(PopUpContext);
const { setTabsState, tabId, save } = useContext(TabsContext); const { setTabsState, tabId, save } = useContext(TabsContext);
useEffect(() => { useEffect(() => {
@ -61,15 +61,16 @@ export default function ParameterComponent({
updateNodeInternals(data.id); updateNodeInternals(data.id);
}, [data.id, position, updateNodeInternals]); }, [data.id, position, updateNodeInternals]);
useEffect(() => {}, [closePopUp, data.node.template]);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false; reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
const [myData, setMyData] = useState(useContext(typesContext).data);
const { data: myData } = useContext(typesContext);
const handleOnNewValue = (newValue: any) => { const handleOnNewValue = (newValue: any) => {
data.node.template[name].value = newValue; let newData = cloneDeep(data);
newData.node.template[name].value = newValue;
setData(newData);
// Set state to pending // Set state to pending
setTabsState((prev) => { setTabsState((prev) => {
return { return {

63
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -5,9 +5,7 @@ import ShadTooltip from "../../components/ShadTooltipComponent";
import Tooltip from "../../components/TooltipComponent"; import Tooltip from "../../components/TooltipComponent";
import { useSSE } from "../../contexts/SSEContext"; import { useSSE } from "../../contexts/SSEContext";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import NodeModal from "../../modals/NodeModal";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { import {
@ -19,17 +17,16 @@ import {
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
export default function GenericNode({ export default function GenericNode({
data, data: olddata,
selected, selected,
}: { }: {
data: NodeDataType; data: NodeDataType;
selected: boolean; selected: boolean;
}) { }) {
const [data, setData] = useState(olddata);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const showError = useRef(true); const showError = useRef(true);
const { types, deleteNode } = useContext(typesContext); const { types, deleteNode, reactFlowInstance } = useContext(typesContext);
const { closePopUp, openPopUp } = useContext(PopUpContext);
// any to avoid type conflict // any to avoid type conflict
const Icon: any = const Icon: any =
nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]]; nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
@ -37,12 +34,9 @@ export default function GenericNode({
// State for outline color // State for outline color
const { sseData, isBuilding } = useSSE(); const { sseData, isBuilding } = useSSE();
const refHtml = useRef(null); const refHtml = useRef(null);
useEffect(() => {
// useEffect(() => { olddata.node = data.node;
// if (reactFlowInstance) { }, [data, reactFlowInstance]);
// setParams(Object.values(reactFlowInstance.toObject()));
// }
// }, [save]);
// New useEffect to watch for changes in sseData and update validation status // New useEffect to watch for changes in sseData and update validation status
useEffect(() => { useEffect(() => {
@ -67,13 +61,12 @@ export default function GenericNode({
deleteNode(data.id); deleteNode(data.id);
return; return;
} }
useEffect(() => {}, [closePopUp, data.node.template]);
return ( return (
<> <>
<NodeToolbar> <NodeToolbar>
<NodeToolbarComponent <NodeToolbarComponent
data={data} data={data}
openPopUp={openPopUp} setData={setData}
deleteNode={deleteNode} deleteNode={deleteNode}
></NodeToolbarComponent> ></NodeToolbarComponent>
</NodeToolbar> </NodeToolbar>
@ -101,15 +94,6 @@ export default function GenericNode({
</ShadTooltip> </ShadTooltip>
</div> </div>
</div> </div>
<div className="round-button-div">
<button
className="relative"
onClick={(event) => {
event.preventDefault();
openPopUp(<NodeModal data={data} />);
}}
></button>
</div>
<div className="round-button-div"> <div className="round-button-div">
<div> <div>
<Tooltip <Tooltip
@ -198,6 +182,7 @@ export default function GenericNode({
!data.node.template[t].advanced ? ( !data.node.template[t].advanced ? (
<ParameterComponent <ParameterComponent
data={data} data={data}
setData={setData}
color={ color={
nodeColors[types[data.node.template[t].type]] ?? nodeColors[types[data.node.template[t].type]] ??
nodeColors[data.node.template[t].type] ?? nodeColors[data.node.template[t].type] ??
@ -242,21 +227,23 @@ export default function GenericNode({
> >
{" "} {" "}
</div> </div>
{data.node.base_classes?.length > 0 && ( {/* <div className="px-5 py-2 mt-2 text-center">
<ParameterComponent Output
data={data} </div> */}
color={nodeColors[types[data.type]] ?? nodeColors.unknown} <ParameterComponent
title={ data={data}
data.node.output_types && data.node.output_types.length > 0 setData={setData}
? data.node.output_types.join("|") color={nodeColors[types[data.type]] ?? nodeColors.unknown}
: data.type title={
} data.node.output_types && data.node.output_types.length > 0
tooltipTitle={data.node.base_classes.join("\n")} ? data.node.output_types.join("|")
id={[data.type, data.id, ...data.node.base_classes].join("|")} : data.type
type={data.node.base_classes.join("|")} }
left={false} tooltipTitle={data.node.base_classes.join("\n")}
/> id={[data.type, data.id, ...data.node.base_classes].join("|")}
)} type={data.node.base_classes.join("|")}
left={false}
/>
</> </>
</div> </div>
</div> </div>

2
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -16,6 +16,8 @@ export default function AccordionComponent({
open.length === 0 ? "" : getOpenAccordion() open.length === 0 ? "" : getOpenAccordion()
); );
console.log(open);
function getOpenAccordion() { function getOpenAccordion() {
let value = ""; let value = "";
open.forEach((el) => { open.forEach((el) => {

5
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -62,7 +62,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
/> />
</Label> </Label>
<Label> <Label>
<span className="font-medium">Description (optional)</span> <div className="edit-flow-arrangement mt-3">
<span className="font-medium ">Description (optional)</span>
</div>
<Textarea <Textarea
name="description" name="description"
id="description" id="description"

85
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -1,6 +1,5 @@
import { useContext, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import CodeAreaModal from "../../modals/codeAreaModal";
import CodeAreaModal from "../../modals/codeAreaModal/v2";
import { CodeAreaComponentType } from "../../types/components"; import { CodeAreaComponentType } from "../../types/components";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";
@ -11,11 +10,12 @@ export default function CodeAreaComponent({
disabled, disabled,
editNode = false, editNode = false,
nodeClass, nodeClass,
setNodeClass,
dynamic, dynamic,
setNodeClass,
}: CodeAreaComponentType) { }: CodeAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(
const { openPopUp } = useContext(PopUpContext); typeof value == "string" ? value : JSON.stringify(value)
);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
@ -28,61 +28,36 @@ export default function CodeAreaComponent({
}, [value]); }, [value]);
return ( return (
<div <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
className={ <CodeAreaModal
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full" dynamic={dynamic}
} value={myValue}
> nodeClass={nodeClass}
<div className="flex w-full items-center"> setNodeClass={setNodeClass}
<span setValue={(t: string) => {
onClick={() => { setMyValue(t);
openPopUp( onChange(t);
<CodeAreaModal }}
dynamic={dynamic} >
value={myValue} <div className="flex w-full items-center">
nodeClass={nodeClass} <span
setNodeClass={setNodeClass} className={
setValue={(t: string) => { editNode
setMyValue(t); ? "input-edit-node input-dialog"
onChange(t); : (disabled ? " input-disable input-ring " : "") +
}} " input-primary text-muted-foreground "
/> }
); >
}} {myValue !== "" ? myValue : "Type something..."}
className={ </span>
editNode
? "input-edit-node input-dialog "
: "input-dialog input-primary " +
(disabled ? "input-disable" : "")
}
>
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {
openPopUp(
<CodeAreaModal
key={myValue}
dynamic={dynamic}
setNodeClass={setNodeClass}
value={myValue}
nodeClass={nodeClass}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
>
{!editNode && ( {!editNode && (
<ExternalLink <ExternalLink
strokeWidth={1.5} strokeWidth={1.5}
className="ml-3 h-6 w-6 hover:text-accent-foreground" className="ml-3 h-6 w-6 hover:text-accent-foreground"
/> />
)} )}
</button> </div>
</div> </CodeAreaModal>
</div> </div>
); );
} }

7
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -1,7 +1,6 @@
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import { Check, ChevronsUpDown } from "lucide-react"; import { Check, ChevronsUpDown } from "lucide-react";
import { Fragment, useContext, useEffect, useState } from "react"; import { Fragment, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { DropDownComponentType } from "../../types/components"; import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
@ -13,15 +12,13 @@ export default function Dropdown({
numberOfOptions = 0, numberOfOptions = 0,
apiModal = false, apiModal = false,
}: DropDownComponentType) { }: DropDownComponentType) {
const { closePopUp } = useContext(PopUpContext);
let [internalValue, setInternalValue] = useState( let [internalValue, setInternalValue] = useState(
value === "" || !value ? "Choose an option" : value value === "" || !value ? "Choose an option" : value
); );
useEffect(() => { useEffect(() => {
setInternalValue(value === "" || !value ? "Choose an option" : value); setInternalValue(value === "" || !value ? "Choose an option" : value);
}, [closePopUp]); }, [value]);
return ( return (
<> <>

13
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,5 +1,4 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
@ -10,9 +9,7 @@ export default function FloatComponent({
disabled, disabled,
editNode = false, editNode = false,
}: FloatComponentType) { }: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
const { closePopUp } = useContext(PopUpContext);
const step = 0.1; const step = 0.1;
const min = 0; const min = 0;
@ -20,15 +17,10 @@ export default function FloatComponent({
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [closePopUp]);
return ( return (
<div className={"w-full " + (disabled ? "float-component-pointer" : "")}> <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
<input <input
@ -50,7 +42,7 @@ export default function FloatComponent({
} }
}} }}
max={max} max={max}
value={myValue} value={value ?? ""}
className={ className={
editNode editNode
? "input-edit-node" ? "input-edit-node"
@ -60,7 +52,6 @@ export default function FloatComponent({
editNode ? "Number 0 to 1" : "Type a number from zero to one" editNode ? "Number 0 to 1" : "Type a number from zero to one"
} }
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
/> />

37
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -6,8 +6,7 @@ import {
Settings2, Settings2,
Undo, Undo,
} from "lucide-react"; } from "lucide-react";
import { useContext } from "react"; import { useContext, useState } from "react";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { import {
DropdownMenu, DropdownMenu,
@ -26,8 +25,8 @@ import { Button } from "../../../ui/button";
export const MenuBar = ({ flows, tabId }) => { export const MenuBar = ({ flows, tabId }) => {
const { updateFlow, setTabId, addFlow } = useContext(TabsContext); const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { openPopUp } = useContext(PopUpContext);
const { undo, redo } = useContext(undoRedoContext); const { undo, redo } = useContext(undoRedoContext);
const [openSettings, setOpenSettings] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
@ -69,15 +68,17 @@ export const MenuBar = ({ flows, tabId }) => {
<Plus className="header-menu-options" /> <Plus className="header-menu-options" />
New New
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
openPopUp(<FlowSettingsModal />); setOpenSettings(true);
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Settings2 className="header-menu-options " /> <Settings2 className="header-menu-options " />
Settings Settings
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
undo(); undo();
@ -96,32 +97,12 @@ export const MenuBar = ({ flows, tabId }) => {
<Redo className="header-menu-options " /> <Redo className="header-menu-options " />
Redo Redo
</DropdownMenuItem> </DropdownMenuItem>
{/* <DropdownMenuSeparator /> */}
{/* <DropdownMenuLabel>Projects</DropdownMenuLabel> */}
{/* <DropdownMenuRadioGroup className="max-h-full overflow-scroll"
value={tabId}
onValueChange={(value) => {
setTabId(value);
}}
>
{flows.map((flow, idx) => {
return (
<Link
to={"/flow/" + flow.id}
className="flex w-full items-center"
>
<DropdownMenuRadioItem
value={flow.id}
className="flex-1 w-full inline-block truncate break-words mr-2"
>
{flow.name}
</DropdownMenuRadioItem>
</Link>
);
})}
</DropdownMenuRadioGroup> */}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<FlowSettingsModal
open={openSettings}
setOpen={setOpenSettings}
></FlowSettingsModal>
</div> </div>
</div> </div>
); );

15
src/frontend/src/components/inputComponent/index.tsx
View file

@ -1,5 +1,4 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { InputComponentType } from "../../types/components"; import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
@ -12,26 +11,19 @@ export default function InputComponent({
password, password,
editNode = false, editNode = false,
}: InputComponentType) { }: InputComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
const { closePopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
useEffect(() => {
setMyValue(value ?? "");
}, [closePopUp]);
return ( return (
<div className={disabled ? "input-component-div" : "relative"}> <div className={disabled ? "input-component-div" : "relative"}>
<input <input
value={myValue} value={value}
onFocus={() => { onFocus={() => {
if (disableCopyPaste) setDisableCopyPaste(true); if (disableCopyPaste) setDisableCopyPaste(true);
}} }}
@ -40,16 +32,13 @@ export default function InputComponent({
}} }}
className={classNames( className={classNames(
disabled ? " input-disable " : "", disabled ? " input-disable " : "",
password && !pwdVisible && myValue !== "" password && !pwdVisible && value !== "" ? " text-clip password " : "",
? " text-clip password "
: "",
editNode ? " input-edit-node " : " input-primary ", editNode ? " input-edit-node " : " input-primary ",
password && editNode ? "pr-8" : "", password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : "" password && !editNode ? "pr-10" : ""
)} )}
placeholder={password && editNode ? "Key" : "Type something..."} placeholder={password && editNode ? "Key" : "Type something..."}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
/> />

14
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -1,9 +1,8 @@
import { useContext, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components"; import { InputListComponentType } from "../../types/components";
import _ from "lodash"; import _ from "lodash";
import { Plus, X } from "lucide-react"; import { Plus, X } from "lucide-react";
import { PopUpContext } from "../../contexts/popUpContext";
export default function InputListComponent({ export default function InputListComponent({
value, value,
@ -13,7 +12,12 @@ export default function InputListComponent({
onAddInput, onAddInput,
}: InputListComponentType) { }: InputListComponentType) {
const [inputList, setInputList] = useState(value ?? [""]); const [inputList, setInputList] = useState(value ?? [""]);
const { closePopUp } = useContext(PopUpContext);
useEffect(() => {
if (value) {
setInputList(value);
}
}, [value]);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
@ -22,10 +26,6 @@ export default function InputListComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
useEffect(() => {
setInputList(value);
}, [closePopUp]);
return ( return (
<div <div
className={ className={

13
src/frontend/src/components/intComponent/index.tsx
View file

@ -1,5 +1,4 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
@ -10,22 +9,15 @@ export default function IntComponent({
disabled, disabled,
editNode = false, editNode = false,
}: FloatComponentType) { }: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
const min = 0; const min = 0;
const { closePopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [closePopUp]);
return ( return (
<div <div
className={ className={
@ -66,7 +58,7 @@ export default function IntComponent({
e.target.value = min.toString(); e.target.value = min.toString();
} }
}} }}
value={myValue} value={value ?? ""}
className={ className={
editNode editNode
? " input-edit-node " ? " input-edit-node "
@ -74,7 +66,6 @@ export default function IntComponent({
} }
placeholder={editNode ? "Integer number" : "Type an integer number"} placeholder={editNode ? "Integer number" : "Type an integer number"}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
/> />

94
src/frontend/src/components/promptComponent/index.tsx
View file

@ -1,8 +1,6 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import { TypeModal } from "../../utils";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
@ -18,7 +16,6 @@ export default function PromptAreaComponent({
editNode = false, editNode = false,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext);
const { reactFlowInstance } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
@ -39,72 +36,31 @@ export default function PromptAreaComponent({
} }
}, [value, reactFlowInstance]); }, [value, reactFlowInstance]);
// useEffect(() => {
// if (value !== "" && myValue !== value && reactFlowInstance) {
// // only executed once
// setMyValue(value);
// postValidatePrompt(field_name, value, nodeClass)
// .then((apiReturn) => {
// if (apiReturn.data) {
// setNodeClass(apiReturn.data.frontend_node);
// // need to update reactFlowInstance to re-render the nodes.
// reactFlowInstance.setEdges(
// _.cloneDeep(reactFlowInstance.getEdges())
// );
// }
// })
// .catch((error) => {});
// }
// }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass, value]);
return ( return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}> <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<div className="flex w-full items-center"> <GenericModal
<span type={"prompt"}
onClick={() => { value={myValue}
openPopUp( buttonText="Check & Save"
<GenericModal modalTitle="Edit Prompt"
type={TypeModal.PROMPT} setValue={(t: string) => {
value={myValue} setMyValue(t);
buttonText="Check & Save" onChange(t);
modalTitle="Edit Prompt" }}
setValue={(t: string) => { nodeClass={nodeClass}
setMyValue(t); setNodeClass={setNodeClass}
onChange(t); >
}} <div className="flex w-full items-center">
nodeClass={nodeClass} <span
setNodeClass={setNodeClass} className={
/> editNode
); ? "input-edit-node input-dialog"
}} : (disabled ? " input-disable text-ring " : "") +
className={ " input-primary text-muted-foreground "
editNode }
? "input-edit-node input-dialog" >
: (disabled ? " input-disable text-ring " : "") + {myValue !== "" ? myValue : "Type your prompt here..."}
" input-primary text-muted-foreground " </span>
}
>
{myValue !== "" ? myValue : "Type your prompt here"}
</span>
<button
onClick={() => {
openPopUp(
<GenericModal
field_name={field_name}
type={TypeModal.PROMPT}
value={myValue}
buttonText="Check & Save"
modalTitle="Edit Prompt"
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
/>
);
}}
>
{!editNode && ( {!editNode && (
<ExternalLink <ExternalLink
strokeWidth={1.5} strokeWidth={1.5}
@ -114,8 +70,8 @@ export default function PromptAreaComponent({
} }
/> />
)} )}
</button> </div>
</div> </GenericModal>
</div> </div>
); );
} }

65
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -1,8 +1,6 @@
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import { TypeModal } from "../../utils";
import { ExternalLink } from "lucide-react"; import { ExternalLink } from "lucide-react";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
@ -13,26 +11,19 @@ export default function TextAreaComponent({
disabled, disabled,
editNode = false, editNode = false,
}: TextAreaComponentType) { }: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value);
const { openPopUp, closePopUp } = useContext(PopUpContext);
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue("");
onChange(""); onChange("");
} }
}, [disabled, onChange]); }, [disabled, onChange]);
useEffect(() => {
setMyValue(value);
}, [closePopUp]);
return ( return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}> <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<input <input
value={myValue} value={value}
onFocus={() => { onFocus={() => {
setDisableCopyPaste(true); setDisableCopyPaste(true);
}} }}
@ -40,43 +31,37 @@ export default function TextAreaComponent({
setDisableCopyPaste(false); setDisableCopyPaste(false);
}} }}
className={ className={
editNode (editNode
? " input-edit-node " ? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : "") : " input-primary " + (disabled ? " input-disable" : "")) +
" w-full"
} }
placeholder={"Type something..."} placeholder={"Type something..."}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value); onChange(e.target.value);
}} }}
/> />
<div>
<button <GenericModal
onClick={() => { type={"text"}
openPopUp( buttonText="Finishing Editing"
<GenericModal modalTitle="Edit Text"
type={TypeModal.TEXT} value={value}
buttonText="Finishing Editing" setValue={(t: string) => {
modalTitle="Edit Text" onChange(t);
value={myValue} }}
setValue={(t: string) => { >
setMyValue(t); {!editNode && (
onChange(t); <ExternalLink
}} strokeWidth={1.5}
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/> />
); )}
}} </GenericModal>
> </div>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
</button>
</div> </div>
</div> </div>
); );

6
src/frontend/src/index.css
View file

@ -212,11 +212,11 @@ The cursor: default; property value restores the browser's default cursor style
@apply focus:placeholder-transparent focus:ring-ring focus:border-ring @apply focus:placeholder-transparent focus:ring-ring focus:border-ring
} }
.input-primary { .input-primary {
@apply bg-background block border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full; @apply bg-background text-left block border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full;
} }
.input-edit-node{ .input-edit-node{
@apply input-primary border-border placeholder:text-center pt-0.5 pb-0.5 text-center @apply input-primary border-border pt-0.5 pb-0.5
} }
.input-search{ .input-search{
@apply input-primary pr-7 mx-2 @apply input-primary pr-7 mx-2
@ -904,7 +904,7 @@ The cursor: default; property value restores the browser's default cursor style
} }
.api-modal-tabs { .api-modal-tabs {
@apply w-full h-full overflow-hidden text-center bg-muted rounded-md border @apply lg:w-full h-full overflow-hidden text-center bg-muted rounded-md border sm:w-[75vw]
} }
.api-modal-tablist-div { .api-modal-tablist-div {
@apply flex items-center justify-between px-2 @apply flex items-center justify-between px-2

1410
src/frontend/src/modals/ApiModal/index.tsx
View file

File diff suppressed because it is too large Load diff

550
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -1,5 +1,6 @@
import { cloneDeep } from "lodash";
import { Variable } from "lucide-react"; import { Variable } from "lucide-react";
import { useContext, useRef, useState } from "react"; import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
import CodeAreaComponent from "../../components/codeAreaComponent"; import CodeAreaComponent from "../../components/codeAreaComponent";
import Dropdown from "../../components/dropdownComponent"; import Dropdown from "../../components/dropdownComponent";
import FloatComponent from "../../components/floatComponent"; import FloatComponent from "../../components/floatComponent";
@ -12,15 +13,6 @@ import TextAreaComponent from "../../components/textAreaComponent";
import ToggleShadComponent from "../../components/toggleShadComponent"; import ToggleShadComponent from "../../components/toggleShadComponent";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { import {
Table, Table,
TableBody, TableBody,
@ -29,313 +21,307 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "../../components/ui/table"; } from "../../components/ui/table";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { classNames, limitScrollFieldsModal } from "../../utils"; import { classNames, limitScrollFieldsModal } from "../../utils";
import BaseModal from "../baseModal";
export default function EditNodeModal({ data }: { data: NodeDataType }) { const EditNodeModal = forwardRef(
const [open, setOpen] = useState(true); (
const [nodeLength, setNodeLength] = useState( {
Object.keys(data.node.template).filter( data,
(t) => setData,
t.charAt(0) !== "_" && nodeLength,
data.node.template[t].show && children,
(data.node.template[t].type === "str" || }: {
data.node.template[t].type === "bool" || data: NodeDataType;
data.node.template[t].type === "float" || setData: (data: NodeDataType) => void;
data.node.template[t].type === "code" || nodeLength: number;
data.node.template[t].type === "prompt" || children: ReactNode;
data.node.template[t].type === "file" || },
data.node.template[t].type === "int") ref
).length ) => {
); const [modalOpen, setModalOpen] = useState(false);
const [nodeValue, setNodeValue] = useState(null); const [myData, setMyData] = useState(data);
const { closePopUp } = useContext(PopUpContext); const { setTabsState, tabId } = useContext(TabsContext);
const { types } = useContext(typesContext); const { reactFlowInstance } = useContext(typesContext);
const ref = useRef();
const { setTabsState, tabId } = useContext(TabsContext);
const { reactFlowInstance } = useContext(typesContext);
let disabled = let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ??
false; false;
if (nodeLength == 0) {
closePopUp();
}
function setModalOpen(x: boolean) { function changeAdvanced(n) {
setOpen(x); setMyData((old) => {
if (x === false) { let newData = cloneDeep(old);
closePopUp(); newData.node.template[n].advanced = !newData.node.template[n].advanced;
return newData;
});
} }
}
function changeAdvanced(node) { const handleOnNewValue = (newValue: any, name) => {
Object.keys(data.node.template).map((n, i) => { setMyData((old) => {
if (n === node.name) { let newData = cloneDeep(old);
data.node.template[n].advanced = !data.node.template[n].advanced; newData.node.template[name].value = newValue;
} return newData;
return n; });
}); };
setNodeValue(!nodeValue);
}
const handleOnNewValue = (newValue: any, name) => { useEffect(() => {
data.node.template[name].value = newValue; setMyData(data); // reset data to what it is on node when opening modal
// Set state to pending }, [modalOpen]);
setTabsState((prev) => {
return {
...prev,
[tabId]: {
...prev[tabId],
isPending: true,
},
};
});
};
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
<DialogTrigger asChild></DialogTrigger> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<DialogContent className="sm:max-w-[600px] lg:max-w-[700px]"> <BaseModal.Header description={myData.node?.description}>
<DialogHeader> <span className="pr-2">{myData.type}</span>
<DialogTitle className="flex items-center"> <Badge variant="secondary">ID: {myData.id}</Badge>
<span className="pr-2">{data.type}</span> </BaseModal.Header>
<Badge variant="secondary">ID: {data.id}</Badge> <BaseModal.Content>
</DialogTitle> <div className="flex pb-2">
<DialogDescription asChild> <Variable className="edit-node-modal-variable "></Variable>
<div> <span className="edit-node-modal-span">Parameters</span>
{data.node?.description} </div>
<div className="flex pt-3">
<Variable className="edit-node-modal-variable "></Variable>
<span className="edit-node-modal-span">Parameters</span>
</div>
</div>
</DialogDescription>
</DialogHeader>
<div className="edit-node-modal-arrangement"> <div className="edit-node-modal-arrangement">
<div <div
className={classNames( className={classNames(
"edit-node-modal-box", "edit-node-modal-box",
nodeLength > limitScrollFieldsModal nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{nodeLength > 0 && ( {nodeLength > 0 && (
<div className="edit-node-modal-table"> <div className="edit-node-modal-table">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="edit-node-modal-table-header"> <TableHeader className="edit-node-modal-table-header">
<TableRow className=""> <TableRow className="">
<TableHead className="h-7 text-center">PARAM</TableHead> <TableHead className="h-7 text-center">PARAM</TableHead>
<TableHead className="h-7 p-0 text-center"> <TableHead className="h-7 p-0 text-center">
VALUE VALUE
</TableHead> </TableHead>
<TableHead className="h-7 text-center">SHOW</TableHead> <TableHead className="h-7 text-center">SHOW</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody className="p-0"> <TableBody className="p-0">
{Object.keys(data.node.template) {Object.keys(myData.node.template)
.filter( .filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].show && myData.node.template[t].show &&
(data.node.template[t].type === "str" || (myData.node.template[t].type === "str" ||
data.node.template[t].type === "bool" || myData.node.template[t].type === "bool" ||
data.node.template[t].type === "float" || myData.node.template[t].type === "float" ||
data.node.template[t].type === "code" || myData.node.template[t].type === "code" ||
data.node.template[t].type === "prompt" || myData.node.template[t].type === "prompt" ||
data.node.template[t].type === "file" || myData.node.template[t].type === "file" ||
data.node.template[t].type === "int") myData.node.template[t].type === "int")
) )
.map((n, i) => ( .map((n, i) => (
<TableRow key={i} className="h-10"> <TableRow key={i} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3"> <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{data.node.template[n].name {myData.node.template[n].name
? data.node.template[n].name ? myData.node.template[n].name
: data.node.template[n].display_name} : myData.node.template[n].display_name}
</TableCell> </TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground "> <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{data.node.template[n].type === "str" && {myData.node.template[n].type === "str" &&
!data.node.template[n].options ? ( !myData.node.template[n].options ? (
<div className="mx-auto"> <div className="mx-auto">
{data.node.template[n].list ? ( {myData.node.template[n].list ? (
<InputListComponent <InputListComponent
editNode={true} editNode={true}
disabled={disabled}
value={
!myData.node.template[n].value ||
myData.node.template[n].value === ""
? [""]
: myData.node.template[n].value
}
onChange={(t: string[]) => {
handleOnNewValue(t, n);
}}
/>
) : myData.node.template[n].multiline ? (
<TextAreaComponent
disabled={disabled}
editNode={true}
value={
myData.node.template[n].value ?? ""
}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
/>
) : (
<InputComponent
editNode={true}
disabled={disabled}
password={
myData.node.template[n].password ??
false
}
value={
myData.node.template[n].value ?? ""
}
onChange={(t) => {
handleOnNewValue(t, n);
}}
/>
)}
</div>
) : myData.node.template[n].type === "bool" ? (
<div className="ml-auto">
{" "}
<ToggleShadComponent
disabled={disabled} disabled={disabled}
value={ enabled={myData.node.template[n].value}
!data.node.template[n].value || setEnabled={(t) => {
data.node.template[n].value === ""
? [""]
: data.node.template[n].value
}
onChange={(t: string[]) => {
handleOnNewValue(t, n); handleOnNewValue(t, n);
}} }}
size="small"
/> />
) : data.node.template[n].multiline ? ( </div>
<TextAreaComponent ) : myData.node.template[n].type === "float" ? (
<div className="mx-auto">
<FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
value={data.node.template[n].value ?? ""} value={myData.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
/>
) : (
<InputComponent
editNode={true}
disabled={disabled}
password={
data.node.template[n].password ?? false
}
value={data.node.template[n].value ?? ""}
onChange={(t) => { onChange={(t) => {
handleOnNewValue(t, n); handleOnNewValue(t, n);
}} }}
/> />
)} </div>
</div> ) : myData.node.template[n].type === "str" &&
) : data.node.template[n].type === "bool" ? ( myData.node.template[n].options ? (
<div className="ml-auto"> <div className="mx-auto">
{" "} <Dropdown
numberOfOptions={nodeLength}
editNode={true}
options={myData.node.template[n].options}
onSelect={(t) => handleOnNewValue(t, n)}
value={
myData.node.template[n].value ??
"Choose an option"
}
></Dropdown>
</div>
) : myData.node.template[n].type === "int" ? (
<div className="mx-auto">
<IntComponent
disabled={disabled}
editNode={true}
value={myData.node.template[n].value ?? ""}
onChange={(t) => {
handleOnNewValue(t, n);
}}
/>
</div>
) : myData.node.template[n].type === "file" ? (
<div className="mx-auto">
<InputFileComponent
editNode={true}
disabled={disabled}
value={myData.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
fileTypes={
myData.node.template[n].fileTypes
}
suffixes={myData.node.template[n].suffixes}
onFileChange={(t: string) => {
handleOnNewValue(t, n);
}}
></InputFileComponent>
</div>
) : myData.node.template[n].type === "prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
field_name={n}
editNode={true}
disabled={disabled}
nodeClass={myData.node}
setNodeClass={(nodeClass) => {
myData.node = nodeClass;
}}
value={myData.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
/>
</div>
) : myData.node.template[n].type === "code" ? (
<div className="mx-auto">
<CodeAreaComponent
dynamic={
data.node.template[n].dynamic ?? false
}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
nodeClass={data.node}
disabled={disabled}
editNode={true}
value={myData.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
/>
</div>
) : myData.node.template[n].type === "Any" ? (
"-"
) : (
<div className="hidden"></div>
)}
</TableCell>
<TableCell className="p-0 text-right">
<div className="items-center text-center">
<ToggleShadComponent <ToggleShadComponent
enabled={!myData.node.template[n].advanced}
setEnabled={(e) => changeAdvanced(n)}
disabled={disabled} disabled={disabled}
enabled={data.node.template[n].value}
setEnabled={(t) => {
handleOnNewValue(t, n);
}}
size="small" size="small"
/> />
</div> </div>
) : data.node.template[n].type === "float" ? ( </TableCell>
<div className="mx-auto"> </TableRow>
<FloatComponent ))}
disabled={disabled} </TableBody>
editNode={true} </Table>
value={data.node.template[n].value ?? ""} </div>
onChange={(t) => { )}
data.node.template[n].value = t; </div>
}}
/>
</div>
) : data.node.template[n].type === "str" &&
data.node.template[n].options ? (
<div className="mx-auto">
<Dropdown
numberOfOptions={nodeLength}
editNode={true}
options={data.node.template[n].options}
onSelect={(t) => handleOnNewValue(t, n)}
value={
data.node.template[n].value ??
"Choose an option"
}
></Dropdown>
</div>
) : data.node.template[n].type === "int" ? (
<div className="mx-auto">
<IntComponent
disabled={disabled}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t) => {
handleOnNewValue(t, n);
}}
/>
</div>
) : data.node.template[n].type === "file" ? (
<div className="mx-auto">
<InputFileComponent
editNode={true}
disabled={disabled}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
fileTypes={data.node.template[n].fileTypes}
suffixes={data.node.template[n].suffixes}
onFileChange={(t: string) => {
handleOnNewValue(t, n);
}}
></InputFileComponent>
</div>
) : data.node.template[n].type === "prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
field_name={n}
editNode={true}
disabled={disabled}
nodeClass={data.node}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
/>
</div>
) : data.node.template[n].type === "code" ? (
<div className="mx-auto">
<CodeAreaComponent
dynamic={
data.node.template[n].dynamic ?? false
}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
}}
nodeClass={data.node}
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
handleOnNewValue(t, n);
}}
/>
</div>
) : data.node.template[n].type === "Any" ? (
"-"
) : (
<div className="hidden"></div>
)}
</TableCell>
<TableCell className="p-0 text-right">
<div className="items-center text-center">
<ToggleShadComponent
enabled={!data.node.template[n].advanced}
setEnabled={(e) =>
changeAdvanced(data.node.template[n])
}
disabled={disabled}
size="small"
/>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</div> </div>
</div> </BaseModal.Content>
<DialogFooter> <BaseModal.Footer>
<Button <Button
className="mt-3" className="mt-3"
onClick={() => { onClick={() => {
setData(cloneDeep(myData)); //saves data with actual state of modal
setTabsState((prev) => {
return {
...prev,
[tabId]: {
...prev[tabId],
isPending: true,
},
};
});
setModalOpen(false); setModalOpen(false);
}} }}
type="submit" type="submit"
> >
Save Changes Save Changes
</Button> </Button>
</DialogFooter> </BaseModal.Footer>
</DialogContent> </BaseModal>
</Dialog> );
); }
} );
export default EditNodeModal;

244
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -1,7 +1,6 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { import {
@ -14,150 +13,139 @@ import {
import ModalField from "./components/ModalField"; import ModalField from "./components/ModalField";
export default function NodeModal({ data }: { data: NodeDataType }) { export default function NodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [modalOpen, setModalOpen] = useState(false);
const { closePopUp } = useContext(PopUpContext);
const { types } = useContext(typesContext); const { types } = useContext(typesContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
closePopUp();
}, 300);
}
}
// any to avoid type conflict // any to avoid type conflict
const Icon: any = nodeIconsLucide[types[data.type]]; const Icon: any = nodeIconsLucide[types[data.type]];
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}> <Dialog
<Dialog open={modalOpen}
as="div" as="div"
className="relative z-10" className="relative z-10"
onClose={setModalOpen} onClose={setModalOpen}
initialFocus={ref} initialFocus={ref}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
> >
<Transition.Child <div className="node-modal-div" />
as={Fragment} </Transition.Child>
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="node-modal-div" />
</Transition.Child>
<div className="node-modal-dialog-arrangement"> <div className="node-modal-dialog-arrangement">
<div className="node-modal-dialog-div"> <div className="node-modal-dialog-div">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100" enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200" leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="node-modal-dialog-panel"> <Dialog.Panel className="node-modal-dialog-panel">
<div className=" node-modal-dialog-panel-div"> <div className=" node-modal-dialog-panel-div">
<button <button
type="button" type="button"
className="node-modal-dialog-button" className="node-modal-dialog-button"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}}
>
<span className="sr-only">Close</span>
<X className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="node-modal-dialog-icon-div">
<div className="node-modal-icon-arrangement">
<Icon
strokeWidth={1.5}
className="node-modal-icon"
style={{
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}} }}
> />
<span className="sr-only">Close</span> <div className="node-modal-title-div">
<X className="h-6 w-6" aria-hidden="true" /> <Dialog.Title as="h3" className="node-modal-title">
</button> {data.type}
</div> </Dialog.Title>
<div className="node-modal-dialog-icon-div">
<div className="node-modal-icon-arrangement">
<Icon
strokeWidth={1.5}
className="node-modal-icon"
style={{
color:
nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
/>
<div className="node-modal-title-div">
<Dialog.Title as="h3" className="node-modal-title">
{data.type}
</Dialog.Title>
</div>
</div> </div>
<div className="node-modal-template-div"> </div>
<div className="flex-max-width h-[445px]"> <div className="node-modal-template-div">
<div <div className="flex-max-width h-[445px]">
className={classNames( <div
"node-modal-template", className={classNames(
Object.keys(data.node.template).filter( "node-modal-template",
Object.keys(data.node.template).filter(
(t) =>
t.charAt(0) !== "_" &&
data.node.template[t].advanced &&
data.node.template[t].show
).length > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
)}
>
<div className="node-modal-template-column">
{Object.keys(data.node.template)
.filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
data.node.template[t].advanced && data.node.template[t].advanced &&
data.node.template[t].show data.node.template[t].show
).length > limitScrollFieldsModal )
? "overflow-scroll overflow-x-hidden custom-scroll" .map((t: string, idx) => {
: "overflow-hidden" return (
)} <ModalField
> key={idx}
<div className="node-modal-template-column"> data={data}
{Object.keys(data.node.template) title={
.filter( data.node.template[t].display_name
(t) => ? data.node.template[t].display_name
t.charAt(0) !== "_" && : data.node.template[t].name
data.node.template[t].advanced && ? toTitleCase(data.node.template[t].name)
data.node.template[t].show : toTitleCase(t)
) }
.map((t: string, idx) => { required={data.node.template[t].required}
return ( id={
<ModalField data.node.template[t].type +
key={idx} "|" +
data={data} t +
title={ "|" +
data.node.template[t].display_name data.id
? data.node.template[t].display_name }
: data.node.template[t].name name={t}
? toTitleCase(data.node.template[t].name) type={data.node.template[t].type}
: toTitleCase(t) index={idx}
} />
required={data.node.template[t].required} );
id={ })}
data.node.template[t].type +
"|" +
t +
"|" +
data.id
}
name={t}
type={data.node.template[t].type}
index={idx}
/>
);
})}
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="node-modal-button-box">
<button
type="button"
className="node-modal-button"
onClick={() => {
setModalOpen(false);
}}
>
Done
</button>
</div>
</div> </div>
</Dialog.Panel> <div className="node-modal-button-box">
</Transition.Child> <button
</div> type="button"
className="node-modal-button"
onClick={() => {
setModalOpen(false);
}}
>
Done
</button>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div> </div>
</Dialog> </div>
</Transition.Root> </Dialog>
); );
} }

94
src/frontend/src/modals/baseModal/index.tsx
View file

@ -1,4 +1,4 @@
import { ReactNode, useContext } from "react"; import { ReactNode } from "react";
import React from "react"; import React from "react";
import { import {
@ -9,14 +9,18 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { PopUpContext } from "../../contexts/popUpContext";
type ContentProps = { children: ReactNode }; type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string }; type HeaderProps = { children: ReactNode; description: string };
type FooterProps = { children: ReactNode };
type TriggerProps = { children: ReactNode };
const Content: React.FC<ContentProps> = ({ children }) => { const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>; return <div className="h-full w-full">{children}</div>;
}; };
const Trigger: React.FC<ContentProps> = ({ children }) => {
return <>{children}</>;
};
const Header: React.FC<{ children: ReactNode; description: string }> = ({ const Header: React.FC<{ children: ReactNode; description: string }> = ({
children, children,
@ -29,36 +33,80 @@ const Header: React.FC<{ children: ReactNode; description: string }> = ({
</DialogHeader> </DialogHeader>
); );
}; };
interface BaseModalProps {
children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
open: boolean;
setOpen: (open: boolean) => void;
}
function BaseModal({ open, setOpen, children }: BaseModalProps) {
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
function setModalOpen(x: boolean) { const Footer: React.FC<{ children: ReactNode }> = ({ children }) => {
setOpen(x); return <>{children}</>;
if (x === false) { };
setTimeout(() => { interface BaseModalProps {
setCloseEdit("editcode"); children: [
closePopUp(); React.ReactElement<ContentProps>,
}, 300); React.ReactElement<HeaderProps>,
} React.ReactElement<TriggerProps>?,
} React.ReactElement<FooterProps>?
];
open?: boolean;
setOpen?: (open: boolean) => void;
size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
}
function BaseModal({
open,
setOpen,
children,
size = "large",
}: BaseModalProps) {
const headerChild = React.Children.toArray(children).find( const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header (child) => (child as React.ReactElement).type === Header
); );
const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger
);
const ContentChild = React.Children.toArray(children).find( const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content (child) => (child as React.ReactElement).type === Content
); );
const ContentFooter = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Footer
);
let minWidth: string;
let height: string;
switch (size) {
case "smaller":
minWidth = "min-w-[40vw]";
height = "h-[25vh]";
break;
case "small":
minWidth = "min-w-[40vw]";
height = "h-[40vh]";
break;
case "medium":
minWidth = "min-w-[60vw]";
height = "h-[60vh]";
break;
case "large":
minWidth = "min-w-[80vw]";
height = "h-[80vh]";
break;
case "large-h-full":
minWidth = "min-w-[80vw]";
break;
default:
minWidth = "min-w-[80vw]";
height = "h-[80vh]";
break;
}
//UPDATE COLORS AND STYLE CLASSSES //UPDATE COLORS AND STYLE CLASSSES
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
<DialogContent className="min-w-[80vw]"> {triggerChild}
</DialogTrigger>
<DialogContent className={minWidth}>
{headerChild} {headerChild}
<div className="mt-2 flex h-[80vh] w-full ">{ContentChild}</div> <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
<div className="flex flex-row-reverse">{ContentFooter}</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
); );
@ -66,4 +114,6 @@ function BaseModal({ open, setOpen, children }: BaseModalProps) {
BaseModal.Content = Content; BaseModal.Content = Content;
BaseModal.Header = Header; BaseModal.Header = Header;
BaseModal.Trigger = Trigger;
BaseModal.Footer = Footer;
export default BaseModal; export default BaseModal;

177
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -1,7 +1,4 @@
// organize-imports-ignore import "ace-builds/src-noconflict/ace";
import { useContext, useEffect, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/ext-language_tools"; import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
@ -10,7 +7,7 @@ import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/ace"; import "ace-builds/src-noconflict/ace";
// import "ace-builds/webpack-resolver"; // import "ace-builds/webpack-resolver";
import { TerminalSquare } from "lucide-react"; import { TerminalSquare } from "lucide-react";
import { useContext, useState } from "react"; import { ReactNode, useContext, useEffect, useState } from "react";
import AceEditor from "react-ace"; import AceEditor from "react-ace";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
@ -24,48 +21,39 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from "../../components/ui/tabs"; } from "../../components/ui/tabs";
import BaseModal from "../baseModal";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,
setValue, setValue,
nodeClass, nodeClass,
setNodeClass, setNodeClass,
children,
dynamic, dynamic,
}: { }: {
setValue: (value: string) => void; setValue: (value: string) => void;
value: string; value: string;
nodeClass: APIClassType; nodeClass: APIClassType;
children: ReactNode;
setNodeClass: (Class: APIClassType) => void; setNodeClass: (Class: APIClassType) => void;
dynamic?: boolean; dynamic?: boolean;
}) { }) {
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const [height, setHeight] = useState(null);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const [activeTab, setActiveTab] = useState("0");
const [error, setError] = useState<{ const [error, setError] = useState<{
detail: { error: string; traceback: string }; detail: { error: string; traceback: string };
}>(null); }>(null);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
function setModalOpen(x: boolean) {
if (x === false) {
setCloseEdit("codearea");
closePopUp();
}
}
console.log(dynamic);
useEffect(() => { useEffect(() => {
setValue(code); handleClick();
}, [code, setValue]); }, [])
function handleClick() { function handleClick() {
setLoading(true);
if (!dynamic) { if (!dynamic) {
postValidateCode(code) postValidateCode(code)
.then((apiReturn) => { .then((apiReturn) => {
setLoading(false);
if (apiReturn.data) { if (apiReturn.data) {
let importsErrors = apiReturn.data.imports.errors; let importsErrors = apiReturn.data.imports.errors;
let funcErrors = apiReturn.data.function.errors; let funcErrors = apiReturn.data.function.errors;
@ -95,7 +83,6 @@ export default function CodeAreaModal({
} }
}) })
.catch((_) => { .catch((_) => {
setLoading(false);
setErrorData({ setErrorData({
title: "There is something wrong with this code, please review it", title: "There is something wrong with this code, please review it",
}); });
@ -106,109 +93,71 @@ export default function CodeAreaModal({
const { data } = apiReturn; const { data } = apiReturn;
if (data) { if (data) {
setNodeClass(data); setNodeClass(data);
setModalOpen(false); setOpen(false);
} }
}) })
.catch((err) => { .catch((err) => {
setErrorData({
title:
"There is something wrong with this code, please see the error on the errors tab",
});
console.log(err.response.data);
setError(err.response.data); setError(err.response.data);
}); });
} }
// axios.get("/api/v1/custom_component_error").catch((err) => {
// })
} }
const tabs = [{ name: "code" }, { name: "errors" }];
useEffect(() => {
// Function to be executed after the state changes
const delayedFunction = setTimeout(() => {
if (error?.detail.error !== undefined) {
//trigger to update the height, does not really apply any height
setHeight("90%");
}
//600 to happen after the transition of 500ms
}, 600);
// Cleanup function to clear the timeout if the component unmounts or the state changes again
return () => {
clearTimeout(delayedFunction);
};
}, [error, setHeight]);
const [open, setOpen] = useState(false);
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <BaseModal open={open} setOpen={setOpen}>
<DialogTrigger></DialogTrigger> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<DialogContent className="min-w-[80vw]"> <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<DialogHeader> <span className="pr-2">Edit Code</span>
<DialogTitle className="flex items-center"> <TerminalSquare
<span className="pr-2">Edit Code</span> strokeWidth={1.5}
<TerminalSquare className="h-6 w-6 pl-1 text-primary "
strokeWidth={1.5} aria-hidden="true"
className="h-6 w-6 pl-1 text-primary " />
aria-hidden="true" </BaseModal.Header>
<BaseModal.Content>
<div className="flex h-full w-full flex-col transition-all">
<div className="h-full w-full">
<AceEditor
value={code}
mode="python"
height={height ?? "100%"}
highlightActiveLine={true}
showPrintMargin={false}
fontSize={14}
showGutter
enableLiveAutocompletion
theme={dark ? "twilight" : "github"}
name="CodeEditor"
onChange={(value) => {
setCode(value);
}}
className="h-full w-full rounded-lg border-[1px] border-border custom-scroll"
/> />
</DialogTitle>
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<Tabs
defaultValue={"0"}
className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
onValueChange={(value) => setActiveTab(value)}
>
<div className="flex h-72 flex-col items-start px-2">
<TabsList>
{tabs.map((tab, index) => (
<TabsTrigger
disabled={index === 1 && error?.detail.error === undefined}
key={index}
value={index.toString()}
>
<span
className={
error?.detail.error !== undefined && index === 1
? "text-destructive"
: ""
}
>
{tab.name}
</span>
</TabsTrigger>
))}
</TabsList>
{tabs.map((tab, index) => (
<TabsContent
value={index.toString()}
className="mt-1 h-full w-full overflow-hidden px-4 pb-4"
>
{tab.name === "code" ? (
<div className="h-full w-full">
<AceEditor
value={code}
mode="python"
highlightActiveLine={true}
showPrintMargin={false}
fontSize={14}
showGutter
enableLiveAutocompletion
theme={dark ? "twilight" : "github"}
name="CodeEditor"
onChange={(value) => {
setCode(value);
}}
className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
/>
</div>
) : (
<div className="flex h-full w-full flex-col overflow-scroll bg-red-200 p-2 text-left custom-scroll">
<h1 className="text-lg text-red-600">
{error?.detail?.error}
</h1>
<span className="w-full border border-red-300"></span>
<div className="text-sm text-red-500">
{error?.detail?.traceback}
</div>
</div>
)}
</TabsContent>
))}
</div> </div>
</Tabs> <div className="flex h-fit w-full justify-end">
<DialogFooter> <Button className="mt-3" onClick={handleClick} type="submit">
<Button className="mt-3" onClick={handleClick} type="submit"> Check & Save
{/* {loading?(<Loading/>):'Check & Save'} */} </Button>
Check & Save </div>
</Button> </div>
</DialogFooter> </BaseModal.Content>
</DialogContent> </BaseModal>
</Dialog>
); );
} }

112
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,60 +1,34 @@
import { Download } from "lucide-react"; import { Download } from "lucide-react";
import { useContext, useRef, useState } from "react"; import { ReactNode, forwardRef, useContext, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox"; import { Checkbox } from "../../components/ui/checkbox";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { EXPORT_DIALOG_SUBTITLE } from "../../constants"; import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils"; import { removeApiKeys } from "../../utils";
import BaseModal from "../baseModal";
export default function ExportModal() { const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
const [open, setOpen] = useState(true);
const { closePopUp } = useContext(PopUpContext);
const ref = useRef();
const { setErrorData } = useContext(alertContext);
const { flows, tabId, updateFlow, downloadFlow, saveFlow } = const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext); useContext(TabsContext);
const [isMaxLength, setIsMaxLength] = useState(false);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
closePopUp();
}, 300);
}
}
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const [name, setName] = useState(flows.find((f) => f.id === tabId).name); const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((f) => f.id === tabId).description
); );
const [open, setOpen] = useState(false);
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <BaseModal size="smaller" open={open} setOpen={setOpen}>
<DialogTrigger asChild></DialogTrigger> <BaseModal.Trigger>{props.children}</BaseModal.Trigger>
<DialogContent className="h-[420px] lg:max-w-[600px] "> <BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
<DialogHeader> <span className="pr-2">Export</span>
<DialogTitle className="flex items-center"> <Download
<span className="pr-2">Export</span> strokeWidth={1.5}
<Download className="h-6 w-6 pl-1 text-primary "
strokeWidth={1.5} aria-hidden="true"
className="h-6 w-6 pl-1 text-foreground" />
aria-hidden="true" </BaseModal.Header>
/> <BaseModal.Content>
</DialogTitle>
<DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<EditFlowSettings <EditFlowSettings
name={name} name={name}
description={description} description={description}
@ -64,42 +38,42 @@ export default function ExportModal() {
setDescription={setDescription} setDescription={setDescription}
updateFlow={updateFlow} updateFlow={updateFlow}
/> />
<div className="flex items-center space-x-2"> <div className="mt-3 flex items-center space-x-2">
<Checkbox <Checkbox
id="terms" id="terms"
onCheckedChange={(event: boolean) => { onCheckedChange={(event: boolean) => {
setChecked(event); setChecked(event);
}} }}
/> />
<label htmlFor="terms" className="export-modal-save-api text-sm"> <label htmlFor="terms" className="export-modal-save-api text-sm ">
Save with my API keys Save with my API keys
</label> </label>
</div> </div>
</BaseModal.Content>
<DialogFooter> <BaseModal.Footer>
<Button <Button
onClick={() => { onClick={() => {
if (checked) if (checked)
downloadFlow( downloadFlow(
flows.find((f) => f.id === tabId), flows.find((f) => f.id === tabId),
name, name,
description description
); );
else else
downloadFlow( downloadFlow(
removeApiKeys(flows.find((f) => f.id === tabId)), removeApiKeys(flows.find((f) => f.id === tabId)),
name, name,
description description
); );
setOpen(false);
closePopUp(); }}
}} type="submit"
type="submit" >
> Download Flow
Download Flow </Button>
</Button> </BaseModal.Footer>
</DialogFooter> </BaseModal>
</DialogContent>
</Dialog>
); );
} });
export default ExportModal;

66
src/frontend/src/modals/flowSettingsModal/index.tsx
View file

@ -2,23 +2,18 @@ import { Settings2 } from "lucide-react";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent"; import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { SETTINGS_DIALOG_SUBTITLE } from "../../constants"; import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import BaseModal from "../baseModal";
export default function FlowSettingsModal() { export default function FlowSettingsModal({
const [open, setOpen] = useState(true); open,
const { closePopUp } = useContext(PopUpContext); setOpen,
}: {
open: boolean;
setOpen: (open: boolean) => void;
}) {
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const ref = useRef(); const ref = useRef();
const { flows, tabId, updateFlow, setTabsState, saveFlow } = const { flows, tabId, updateFlow, setTabsState, saveFlow } =
@ -28,34 +23,25 @@ export default function FlowSettingsModal() {
const [description, setDescription] = useState( const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description flows.find((f) => f.id === tabId).description
); );
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
closePopUp();
}, 300);
}
}
function handleClick() { function handleClick() {
let savedFlow = flows.find((f) => f.id === tabId); let savedFlow = flows.find((f) => f.id === tabId);
savedFlow.name = name; savedFlow.name = name;
savedFlow.description = description; savedFlow.description = description;
saveFlow(savedFlow); saveFlow(savedFlow);
setSuccessData({ title: "Changes saved successfully" }); setSuccessData({ title: "Changes saved successfully" });
closePopUp(); setOpen(false);
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <BaseModal open={open} setOpen={setOpen} size="smaller">
<DialogTrigger asChild></DialogTrigger> <BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
<DialogContent className="h-[390px] lg:max-w-[600px]"> <span className="pr-2">Settings</span>
<DialogHeader> <Settings2
<DialogTitle className="flex items-center"> strokeWidth={1.5}
<span className="pr-2">Settings </span> className="h-6 w-6 pl-1 text-primary "
<Settings2 className="mr-2 h-4 w-4 " /> aria-hidden="true"
</DialogTitle> />
<DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription> </BaseModal.Header>
</DialogHeader> <BaseModal.Content>
<EditFlowSettings <EditFlowSettings
name={name} name={name}
description={description} description={description}
@ -65,13 +51,13 @@ export default function FlowSettingsModal() {
setDescription={setDescription} setDescription={setDescription}
updateFlow={updateFlow} updateFlow={updateFlow}
/> />
</BaseModal.Content>
<DialogFooter> <BaseModal.Footer>
<Button onClick={handleClick} type="submit"> <Button onClick={handleClick} type="submit">
Save Save
</Button> </Button>
</DialogFooter> </BaseModal.Footer>
</DialogContent> </BaseModal>
</Dialog>
); );
} }

6
src/frontend/src/modals/formModal/index.tsx
View file

@ -36,7 +36,7 @@ export default function FormModal({
setOpen, setOpen,
}: { }: {
open: boolean; open: boolean;
setOpen: Function; setOpen: (open: boolean) => void;
flow: FlowType; flow: FlowType;
}) { }) {
const { tabsState, setTabsState } = useContext(TabsContext); const { tabsState, setTabsState } = useContext(TabsContext);
@ -389,8 +389,8 @@ export default function FormModal({
} }
} }
return ( return (
<Dialog open={open} onOpenChange={setModalOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger hidden></DialogTrigger>
{tabsState[flow.id].formKeysData && ( {tabsState[flow.id].formKeysData && (
<DialogContent className="min-w-[80vw]"> <DialogContent className="min-w-[80vw]">
<DialogHeader> <DialogHeader>

53
src/frontend/src/modals/genericModal/index.tsx
View file

@ -1,10 +1,9 @@
import { FileText, Variable } from "lucide-react"; import { FileText, Variable } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react"; import { ReactNode, useContext, useEffect, useRef, useState } from "react";
import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper"; import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { DialogTitle } from "../../components/ui/dialog";
import { Textarea } from "../../components/ui/textarea"; import { Textarea } from "../../components/ui/textarea";
import { import {
MAX_WORDS_HIGHLIGHT, MAX_WORDS_HIGHLIGHT,
@ -12,13 +11,10 @@ import {
TEXT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE,
} from "../../constants"; } from "../../constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidatePrompt } from "../../controllers/API"; import { postValidatePrompt } from "../../controllers/API";
import { APIClassType } from "../../types/api"; import { APIClassType } from "../../types/api";
import { import {
INVALID_CHARACTERS, INVALID_CHARACTERS,
TypeModal,
classNames, classNames,
getRandomKeyByssmm, getRandomKeyByssmm,
regexHighlight, regexHighlight,
@ -35,13 +31,15 @@ export default function GenericModal({
type, type,
nodeClass, nodeClass,
setNodeClass, setNodeClass,
children,
}: { }: {
field_name?: string; field_name?: string;
setValue: (value: string) => void; setValue: (value: string) => void;
value: string; value: string;
buttonText: string; buttonText: string;
modalTitle: string; modalTitle: string;
type: number; type: "prompt" | "text";
children: ReactNode;
nodeClass?: APIClassType; nodeClass?: APIClassType;
setNodeClass?: (Class: APIClassType) => void; setNodeClass?: (Class: APIClassType) => void;
}) { }) {
@ -51,17 +49,9 @@ export default function GenericModal({
const [inputValue, setInputValue] = useState(value); const [inputValue, setInputValue] = useState(value);
const [isEdit, setIsEdit] = useState(true); const [isEdit, setIsEdit] = useState(true);
const [wordsHighlight, setWordsHighlight] = useState([]); const [wordsHighlight, setWordsHighlight] = useState([]);
const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData, setNoticeData } = const { setErrorData, setSuccessData, setNoticeData } =
useContext(alertContext); useContext(alertContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) {
if (x === false) {
setCloseEdit("generic");
closePopUp();
}
}
const divRef = useRef(null); const divRef = useRef(null);
const divRefPrompt = useRef(null); const divRefPrompt = useRef(null);
@ -100,7 +90,7 @@ export default function GenericModal({
} }
useEffect(() => { useEffect(() => {
if (type === TypeModal.PROMPT && inputValue && inputValue != "") { if (type === "prompt" && inputValue && inputValue != "") {
checkVariables(inputValue); checkVariables(inputValue);
} }
}, [inputValue, type]); }, [inputValue, type]);
@ -170,8 +160,11 @@ export default function GenericModal({
}); });
} }
const [modalOpen, setModalOpen] = useState(false);
return ( return (
<BaseModal open={true} setOpen={setModalOpen}> <BaseModal open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header <BaseModal.Header
description={(() => { description={(() => {
switch (myModalTitle) { switch (myModalTitle) {
@ -186,14 +179,12 @@ export default function GenericModal({
} }
})()} })()}
> >
<DialogTitle className="flex items-center"> <span className="pr-2">{myModalTitle}</span>
<span className="pr-2">{myModalTitle}</span> <FileText
<FileText strokeWidth={1.5}
strokeWidth={1.5} className="h-6 w-6 pl-1 text-primary "
className="h-6 w-6 pl-1 text-primary " aria-hidden="true"
aria-hidden="true" />
/>
</DialogTitle>
</BaseModal.Header> </BaseModal.Header>
<BaseModal.Content> <BaseModal.Content>
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
@ -203,7 +194,7 @@ export default function GenericModal({
"flex h-full w-full" "flex h-full w-full"
)} )}
> >
{type === TypeModal.PROMPT && isEdit ? ( {type === "prompt" && isEdit ? (
<Textarea <Textarea
ref={divRefPrompt} ref={divRefPrompt}
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1" className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
@ -218,9 +209,9 @@ export default function GenericModal({
}} }}
placeholder="Type message here." placeholder="Type message here."
/> />
) : type === TypeModal.PROMPT && !isEdit ? ( ) : type === "prompt" && !isEdit ? (
<TextAreaContentView /> <TextAreaContentView />
) : type !== TypeModal.PROMPT ? ( ) : type !== "prompt" ? (
<Textarea <Textarea
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg focus-visible:ring-1" className="form-input h-full w-full rounded-lg focus-visible:ring-1"
@ -237,7 +228,7 @@ export default function GenericModal({
<div className="mt-6 flex h-fit w-full items-end justify-between"> <div className="mt-6 flex h-fit w-full items-end justify-between">
<div className="mb-auto flex-1"> <div className="mb-auto flex-1">
{type === TypeModal.PROMPT && ( {type === "prompt" && (
<div className=" mr-2"> <div className=" mr-2">
<div <div
ref={divRef} ref={divRef}
@ -274,7 +265,7 @@ export default function GenericModal({
))} ))}
</div> </div>
</div> </div>
<span className="mt-1 text-xs text-muted-foreground"> <span className="mt-2 text-xs text-muted-foreground">
Prompt variables can be created with any chosen name inside Prompt variables can be created with any chosen name inside
curly brackets, e.g. {"{variable_name}"} curly brackets, e.g. {"{variable_name}"}
</span> </span>
@ -284,11 +275,11 @@ export default function GenericModal({
<Button <Button
onClick={() => { onClick={() => {
switch (myModalType) { switch (myModalType) {
case 1: case "text":
setValue(inputValue); setValue(inputValue);
setModalOpen(false); setModalOpen(false);
break; break;
case 2: case "prompt":
!inputValue || inputValue === "" !inputValue || inputValue === ""
? setModalOpen(false) ? setModalOpen(false)
: validatePrompt(false); : validatePrompt(false);

14
src/frontend/src/modals/importModal/index.tsx
View file

@ -17,7 +17,6 @@ import {
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { IMPORT_DIALOG_SUBTITLE } from "../../constants"; import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { getExamples } from "../../controllers/API"; import { getExamples } from "../../controllers/API";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
@ -27,20 +26,11 @@ import ButtonBox from "./buttonBox";
export default function ImportModal() { export default function ImportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { setErrorData } = useContext(alertContext); const { setErrorData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
const [showExamples, setShowExamples] = useState(false); const [showExamples, setShowExamples] = useState(false);
const [loadingExamples, setLoadingExamples] = useState(false); const [loadingExamples, setLoadingExamples] = useState(false);
const [examples, setExamples] = useState<FlowType[]>([]); const [examples, setExamples] = useState<FlowType[]>([]);
const { uploadFlow, addFlow } = useContext(TabsContext); const { uploadFlow, addFlow } = useContext(TabsContext);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
closePopUp();
}, 300);
}
}
function handleExamples() { function handleExamples() {
setLoadingExamples(true); setLoadingExamples(true);
@ -57,8 +47,10 @@ export default function ImportModal() {
); );
} }
const [modalOpen, setModalOpen] = useState(false);
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
<DialogContent <DialogContent
className={classNames( className={classNames(

43
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -3,7 +3,6 @@ import { useContext, useState } from "react";
import ShadTooltip from "../../../../components/ShadTooltipComponent"; import ShadTooltip from "../../../../components/ShadTooltipComponent";
import { Separator } from "../../../../components/ui/separator"; import { Separator } from "../../../../components/ui/separator";
import { alertContext } from "../../../../contexts/alertContext"; import { alertContext } from "../../../../contexts/alertContext";
import { PopUpContext } from "../../../../contexts/popUpContext";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import ApiModal from "../../../../modals/ApiModal"; import ApiModal from "../../../../modals/ApiModal";
@ -19,7 +18,6 @@ import DisclosureComponent from "../DisclosureComponent";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { data } = useContext(typesContext); const { data } = useContext(typesContext);
const { openPopUp } = useContext(PopUpContext);
const { flows, tabId, uploadFlow, tabsState, saveFlow } = const { flows, tabId, uploadFlow, tabsState, saveFlow } =
useContext(TabsContext); useContext(TabsContext);
const { setSuccessData, setErrorData } = useContext(alertContext); const { setSuccessData, setErrorData } = useContext(alertContext);
@ -56,6 +54,7 @@ export default function ExtraSidebar() {
return ret; return ret;
}); });
} }
const flow = flows.find((f) => f.id === tabId);
return ( return (
<div className="side-bar-arrangement"> <div className="side-bar-arrangement">
@ -64,7 +63,6 @@ export default function ExtraSidebar() {
<button <button
className="extra-side-bar-buttons" className="extra-side-bar-buttons"
onClick={() => { onClick={() => {
// openPopUp(<ImportModal />);
uploadFlow(); uploadFlow();
}} }}
> >
@ -76,34 +74,33 @@ export default function ExtraSidebar() {
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Export" side="top"> <ShadTooltip content="Export" side="top">
<button <ExportModal>
className={classNames("extra-side-bar-buttons")} <div className={classNames("extra-side-bar-buttons")}>
onClick={(event) => { <FileDown
openPopUp(<ExportModal />); strokeWidth={1.5}
}} className="side-bar-button-size"
> ></FileDown>
<FileDown </div>
strokeWidth={1.5} </ExportModal>
className="side-bar-button-size"
></FileDown>
</button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Code" side="top"> <ShadTooltip content="Code" side="top">
<button {flow && flow.data && (
className={classNames("extra-side-bar-buttons")} <ApiModal flow={flow}>
onClick={(event) => { <div className={classNames("extra-side-bar-buttons")}>
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />); <Code2
}} strokeWidth={1.5}
> className="side-bar-button-size"
<Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2> ></Code2>
</button> </div>
</ApiModal>
)}
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Save" side="top"> <ShadTooltip content="Save" side="top">
<button <button
className="extra-side-bar-buttons" className="extra-side-bar-buttons"
onClick={(event) => { onClick={(event) => {
saveFlow(flows.find((f) => f.id === tabId)); saveFlow(flow);
setSuccessData({ title: "Changes saved successfully" }); setSuccessData({ title: "Changes saved successfully" });
}} }}
disabled={!isPending} disabled={!isPending}

170
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -6,24 +6,24 @@ import { TabsContext } from "../../../../contexts/tabsContext";
import EditNodeModal from "../../../../modals/EditNodeModal"; import EditNodeModal from "../../../../modals/EditNodeModal";
import { classNames } from "../../../../utils"; import { classNames } from "../../../../utils";
const NodeToolbarComponent = (props) => { export default function NodeToolbarComponent({ data, setData, deleteNode }) {
const [nodeLength, setNodeLength] = useState( const [nodeLength, setNodeLength] = useState(
Object.keys(props.data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
props.data.node.template[t].show && data.node.template[t].show &&
(props.data.node.template[t].type === "str" || (data.node.template[t].type === "str" ||
props.data.node.template[t].type === "bool" || data.node.template[t].type === "bool" ||
props.data.node.template[t].type === "float" || data.node.template[t].type === "float" ||
props.data.node.template[t].type === "code" || data.node.template[t].type === "code" ||
props.data.node.template[t].type === "prompt" || data.node.template[t].type === "prompt" ||
props.data.node.template[t].type === "file" || data.node.template[t].type === "file" ||
props.data.node.template[t].type === "Any" || data.node.template[t].type === "Any" ||
props.data.node.template[t].type === "int") data.node.template[t].type === "int")
).length ).length
); );
const { setLastCopiedSelection, paste } = useContext(TabsContext); const { paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
return ( return (
<> <>
@ -33,7 +33,7 @@ const NodeToolbarComponent = (props) => {
<button <button
className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
onClick={() => { onClick={() => {
props.deleteNode(props.data.id); deleteNode(data.id);
}} }}
> >
<Trash2 className="h-4 w-4"></Trash2> <Trash2 className="h-4 w-4"></Trash2>
@ -49,14 +49,14 @@ const NodeToolbarComponent = (props) => {
event.preventDefault(); event.preventDefault();
paste( paste(
{ {
nodes: [reactFlowInstance.getNode(props.data.id)], nodes: [reactFlowInstance.getNode(data.id)],
edges: [], edges: [],
}, },
{ {
x: 50, x: 50,
y: 10, y: 10,
paneX: reactFlowInstance.getNode(props.data.id).position.x, paneX: reactFlowInstance.getNode(data.id).position.x,
paneY: reactFlowInstance.getNode(props.data.id).position.y, paneY: reactFlowInstance.getNode(data.id).position.y,
} }
); );
}} }}
@ -67,25 +67,23 @@ const NodeToolbarComponent = (props) => {
<ShadTooltip <ShadTooltip
content={ content={
props.data.node.documentation === "" data.node.documentation === "" ? "Coming Soon" : "Documentation"
? "Coming Soon"
: "Documentation"
} }
side="top" side="top"
> >
<a <a
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(props.data.node.documentation === "" (data.node.documentation === ""
? " text-muted-foreground" ? " text-muted-foreground"
: " text-foreground") : " text-foreground")
)} )}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
href={props.data.node.documentation} href={data.node.documentation}
// deactivate link if no documentation is provided // deactivate link if no documentation is provided
onClick={(event) => { onClick={(event) => {
if (props.data.node.documentation === "") { if (data.node.documentation === "") {
event.preventDefault(); event.preventDefault();
} }
}} }}
@ -95,121 +93,25 @@ const NodeToolbarComponent = (props) => {
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Edit" side="top"> <ShadTooltip content="Edit" side="top">
<button <EditNodeModal
className={classNames( data={data}
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + setData={setData}
(nodeLength == 0 nodeLength={nodeLength}
? " text-muted-foreground"
: " text-foreground")
)}
onClick={(event) => {
if (nodeLength == 0) {
event.preventDefault();
}
event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />);
}}
> >
<Settings2 className="h-4 w-4 "></Settings2> <div
</button> className={classNames(
</ShadTooltip> "relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(nodeLength == 0
{/* ? " text-muted-foreground"
<Menu as="div" className="relative inline-block text-left z-100"> : " text-foreground")
<button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"> )}
<div>
<Menu.Button className="flex items-center">
<EllipsisVerticalIcon
className="w-5 h-5 "
aria-hidden="true"
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="absolute z-40 mt-2 w-56 origin-top-right rounded-md bg-background shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none top-[28px]"> <Settings2 className="h-4 w-4 "></Settings2>
<div className="py-1"> </div>
<Menu.Item> </EditNodeModal>
{({ active }) => ( </ShadTooltip>
<button
onClick={(event) => {
event.preventDefault();
props.openPopUp(
<EditNodeModal data={props.data} />
);
}}
className={classNames(
active
? "bg-muted text-gray-900"
: "text-foreground",
"w-full group flex items-center px-4 py-2 text-sm"
)}
>
<Settings
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
Edit
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
onClick={(event) => {
event.preventDefault();
console.log(
reactFlowInstance.getNode(props.data.id)
);
paste(
{
nodes: [
reactFlowInstance.getNode(props.data.id),
],
edges: [],
},
{
x: 50,
y: 10,
paneX: reactFlowInstance.getNode(props.data.id)
.position.x,
paneY: reactFlowInstance.getNode(props.data.id)
.position.y,
}
);
}}
className={classNames(
active
? "bg-muted text-gray-900"
: "text-foreground",
"w-full group flex items-center px-4 py-2 text-sm"
)}
>
<DocumentDuplicateIcon
className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
Duplicate
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</button>
</Menu> */}
</span> </span>
</div> </div>
</> </>
); );
}; }
export default NodeToolbarComponent;

1
src/frontend/src/types/components/index.ts
View file

@ -28,6 +28,7 @@ export type DropDownComponentType = {
}; };
export type ParameterComponentType = { export type ParameterComponentType = {
data: NodeDataType; data: NodeDataType;
setData: (value: NodeDataType) => void;
title: string; title: string;
id: string; id: string;
color: string; color: string;

5
src/frontend/src/utils.ts
View file

@ -59,11 +59,6 @@ export function classNames(...classes: Array<string>) {
export const limitScrollFieldsModal = 10; export const limitScrollFieldsModal = 10;
export enum TypeModal {
TEXT = 1,
PROMPT = 2,
}
export const textColors = { export const textColors = {
white: "text-white", white: "text-white",
red: "text-red-700", red: "text-red-700",

2
src/frontend/tailwind.config.js
View file

@ -132,7 +132,7 @@ module.exports = {
keyframes: { keyframes: {
slideDown: { slideDown: {
from: { height: 0 }, from: { height: 0 },
to: { height: 100 }, to: { height: "100vh" },
}, },
slideUp: { slideUp: {
from: { height: "var(--radix-accordion-content-height)" }, from: { height: "var(--radix-accordion-content-height)" },