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

Merge dev into refactor/utils

Browse source
This commit is contained in:
igorrCarvalho 2024-05-22 20:35:08 -03:00
commit b0fed4316d
165 changed files with 6452 additions and 1782 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@
"version": "0.1.2",
"dependencies": {
"@headlessui/react": "^1.7.17",
"@hookform/resolvers": "^3.3.4",
"@million/lint": "^0.0.73",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4",
@ -55,6 +56,7 @@
"react-cookie": "^4.1.1",
"react-dom": "^18.2.21",
"react-error-boundary": "^4.0.11",
"react-hook-form": "^7.51.4",
"react-icons": "^5.0.1",
"react-laag": "^2.0.5",
"react-markdown": "^8.0.7",
@ -73,10 +75,11 @@
"uuid": "^9.0.0",
"vite-plugin-svgr": "^3.2.0",
"web-vitals": "^2.1.4",
"zod": "^3.23.7",
"zustand": "^4.4.7"
},
"devDependencies": {
"@playwright/test": "^1.43.1",
"@playwright/test": "^1.44.0",
"@swc/cli": "^0.1.62",
"@swc/core": "^1.3.80",
"@tailwindcss/typography": "^0.5.9",
@ -150,6 +153,26 @@
"nun": "bin/nun.mjs"
}
},
"node_modules/@axiomhq/js": {
"version": "1.0.0-rc.3",
"resolved": "https://registry.npmjs.org/@axiomhq/js/-/js-1.0.0-rc.3.tgz",
"integrity": "sha512-Zm10TczcMLounWqC42nMkXQ7XKLqjzLrd5ia022oBKDUZqAFVg2y9d1quQVNV4FlXyg9MKDdfMjpKQRmzEGaog==",
"dependencies": {
"fetch-retry": "^6.0.0",
"uuid": "^8.3.2"
},
"engines": {
"node": ">=16"
}
},
"node_modules/@axiomhq/js/node_modules/uuid": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/@babel/code-frame": {
"version": "7.24.2",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@ -429,6 +452,40 @@
"node": ">=6.9.0"
}
},
"node_modules/@clack/core": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
"integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
"dependencies": {
"picocolors": "^1.0.0",
"sisteransi": "^1.0.5"
}
},
"node_modules/@clack/prompts": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
"integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
"bundleDependencies": [
"is-unicode-supported"
],
"dependencies": {
"@clack/core": "^0.3.3",
"is-unicode-supported": "*",
"picocolors": "^1.0.0",
"sisteransi": "^1.0.5"
}
},
"node_modules/@clack/prompts/node_modules/is-unicode-supported": {
"version": "1.3.0",
"inBundle": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@ -868,9 +925,9 @@
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
"integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
"integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
"dependencies": {
"@floating-ui/utils": "^0.2.0"
}
@ -885,9 +942,9 @@
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
"integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
"integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
@ -917,6 +974,14 @@
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/@hookform/resolvers": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.4.2.tgz",
"integrity": "sha512-1m9uAVIO8wVf7VCDAGsuGA0t6Z3m6jVGAN50HkV9vYLl0yixKK/Z1lr01vaRvYCkIKGoy1noVRxMzQYb4y/j1Q==",
"peerDependencies": {
"react-hook-form": "^7.0.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@ -999,6 +1064,17 @@
"url": "https://github.com/chalk/ansi-regex?sponsor=1"
}
},
"node_modules/@isaacs/cliui/node_modules/ansi-styles": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/@isaacs/cliui/node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@ -1034,6 +1110,22 @@
"url": "https://github.com/chalk/strip-ansi?sponsor=1"
}
},
"node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
"dependencies": {
"ansi-styles": "^6.1.0",
"string-width": "^5.0.1",
"strip-ansi": "^7.0.1"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@ -1109,6 +1201,25 @@
"node": ">=10"
}
},
"node_modules/@million/install": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@million/install/-/install-0.0.3.tgz",
"integrity": "sha512-yK8NgP+73+Tby/bmQ12B96bJ7RjsLazLtFgBed1Fg1WfTCCpHTILq79yQMSD/OWgm1tt1NYV4ELaTRM6wZOeAg==",
"dependencies": {
"@antfu/ni": "^0.21.12",
"@axiomhq/js": "1.0.0-rc.3",
"@babel/core": "^7.24.5",
"@babel/types": "^7.23.6",
"@clack/prompts": "^0.7.0",
"cli-high": "^0.4.1",
"diff": "^5.1.0",
"posthog-node": "^3.6.3",
"xycolors": "^0.1.1"
},
"bin": {
"install": "bin/index.js"
}
},
"node_modules/@million/lint": {
"version": "0.0.73",
"resolved": "https://registry.npmjs.org/@million/lint/-/lint-0.0.73.tgz",
@ -3232,14 +3343,14 @@
}
},
"node_modules/@swc/core": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.6.tgz",
"integrity": "sha512-0UC0NkgWoqd9fkHPn1NTkTsQucW8iaA1fujK2OLGp40Zg5Vr7nrwBlqruX9expVMggS4rv/3vZSAGzRm80VQ/g==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.7.tgz",
"integrity": "sha512-U4qJRBefIJNJDRCCiVtkfa/hpiZ7w0R6kASea+/KLp+vkus3zcLSB8Ub8SvKgTIxjWpwsKcZlPf5nrv4ls46SQ==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"@swc/counter": "^0.1.2",
"@swc/types": "^0.1.5"
"@swc/types": "0.1.7"
},
"engines": {
"node": ">=10"
@ -3249,16 +3360,16 @@
"url": "https://opencollective.com/swc"
},
"optionalDependencies": {
"@swc/core-darwin-arm64": "1.5.6",
"@swc/core-darwin-x64": "1.5.6",
"@swc/core-linux-arm-gnueabihf": "1.5.6",
"@swc/core-linux-arm64-gnu": "1.5.6",
"@swc/core-linux-arm64-musl": "1.5.6",
"@swc/core-linux-x64-gnu": "1.5.6",
"@swc/core-linux-x64-musl": "1.5.6",
"@swc/core-win32-arm64-msvc": "1.5.6",
"@swc/core-win32-ia32-msvc": "1.5.6",
"@swc/core-win32-x64-msvc": "1.5.6"
"@swc/core-darwin-arm64": "1.5.7",
"@swc/core-darwin-x64": "1.5.7",
"@swc/core-linux-arm-gnueabihf": "1.5.7",
"@swc/core-linux-arm64-gnu": "1.5.7",
"@swc/core-linux-arm64-musl": "1.5.7",
"@swc/core-linux-x64-gnu": "1.5.7",
"@swc/core-linux-x64-musl": "1.5.7",
"@swc/core-win32-arm64-msvc": "1.5.7",
"@swc/core-win32-ia32-msvc": "1.5.7",
"@swc/core-win32-x64-msvc": "1.5.7"
},
"peerDependencies": {
"@swc/helpers": "^0.5.0"
@ -3270,9 +3381,9 @@
}
},
"node_modules/@swc/core-darwin-arm64": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.6.tgz",
"integrity": "sha512-U4szqU03cvZOTXug5o+HQbbg16ZGwANtr7LELjw4hmWBqSTcbBVXgocyBMm1L4ngFIsqJc33D+urnnaae/NfMg==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.7.tgz",
"integrity": "sha512-bZLVHPTpH3h6yhwVl395k0Mtx8v6CGhq5r4KQdAoPbADU974Mauz1b6ViHAJ74O0IVE5vyy7tD3OpkQxL/vMDQ==",
"cpu": [
"arm64"
],
@ -3286,9 +3397,9 @@
}
},
"node_modules/@swc/core-darwin-x64": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.6.tgz",
"integrity": "sha512-k4jymBHYkbfGw8DT4bLtVsAckpp2dblyImQHRPScpvDyS4jUo4174mgy/dEnFmZVLTbuZAY876zBQyH+eJ3p4A==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.7.tgz",
"integrity": "sha512-RpUyu2GsviwTc2qVajPL0l8nf2vKj5wzO3WkLSHAHEJbiUZk83NJrZd1RVbEknIMO7+Uyjh54hEh8R26jSByaw==",
"cpu": [
"x64"
],
@ -3302,9 +3413,9 @@
}
},
"node_modules/@swc/core-linux-arm-gnueabihf": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.6.tgz",
"integrity": "sha512-ijwGEdP18vS8YmvHUIfKYDFQ5mQ1GtCxhJp+IcJlrBJE+/eSJVvEVF5WwXFQ+Hzj6tr/OOub8UcRNUaQokjh3A==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.7.tgz",
"integrity": "sha512-cTZWTnCXLABOuvWiv6nQQM0hP6ZWEkzdgDvztgHI/+u/MvtzJBN5lBQ2lue/9sSFYLMqzqff5EHKlFtrJCA9dQ==",
"cpu": [
"arm"
],
@ -3318,9 +3429,9 @@
}
},
"node_modules/@swc/core-linux-arm64-gnu": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.6.tgz",
"integrity": "sha512-6YD942jsDm64wgGNew4Q1Yh8CRI4QKWTqjzCkvlZCGV6aOw5B663WDSnUEKIoN4egeLcvSiqYYGlKMfbkkfNMw==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.7.tgz",
"integrity": "sha512-hoeTJFBiE/IJP30Be7djWF8Q5KVgkbDtjySmvYLg9P94bHg9TJPSQoC72tXx/oXOgXvElDe/GMybru0UxhKx4g==",
"cpu": [
"arm64"
],
@ -3334,9 +3445,9 @@
}
},
"node_modules/@swc/core-linux-arm64-musl": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.6.tgz",
"integrity": "sha512-Jntdd/HQAgRSQFUpmXjiU00BG08Yl5G1pgYDBXG2mPfkndGGgapRT8JPsnzfQujh9nOdWMIQDnCGU+mB4NY2Dg==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.7.tgz",
"integrity": "sha512-+NDhK+IFTiVK1/o7EXdCeF2hEzCiaRSrb9zD7X2Z7inwWlxAntcSuzZW7Y6BRqGQH89KA91qYgwbnjgTQ22PiQ==",
"cpu": [
"arm64"
],
@ -3350,9 +3461,9 @@
}
},
"node_modules/@swc/core-linux-x64-gnu": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.6.tgz",
"integrity": "sha512-cdaAyAZJvYCx0u9uadUVe4VVJOEC6GeVO5uTGo/vybCsKFn2Z8WVjGVTeHbxdp7pH2II9MRTySIv1eCCq70SOQ==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.7.tgz",
"integrity": "sha512-25GXpJmeFxKB+7pbY7YQLhWWjkYlR+kHz5I3j9WRl3Lp4v4UD67OGXwPe+DIcHqcouA1fhLhsgHJWtsaNOMBNg==",
"cpu": [
"x64"
],
@ -3366,9 +3477,9 @@
}
},
"node_modules/@swc/core-linux-x64-musl": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.6.tgz",
"integrity": "sha512-mGIs4d6/Hv/5EbP2d+2YNmIj9U5U/6CiPZsTyahQcEl+vJjNsmwDJoLex36LhxoGIUmVbbgk6cHj5DoHWNl0bQ==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.7.tgz",
"integrity": "sha512-0VN9Y5EAPBESmSPPsCJzplZHV26akC0sIgd3Hc/7S/1GkSMoeuVL+V9vt+F/cCuzr4VidzSkqftdP3qEIsXSpg==",
"cpu": [
"x64"
],
@ -3382,9 +3493,9 @@
}
},
"node_modules/@swc/core-win32-arm64-msvc": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.6.tgz",
"integrity": "sha512-ViiS2pUXy/J9RZWJXQJMuDKid0lqH9fu2piFi3IHnMWyyWPla5qHYijkeODwrdBsjc30NAHjV6jfka5SZduqiw==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.7.tgz",
"integrity": "sha512-RtoNnstBwy5VloNCvmvYNApkTmuCe4sNcoYWpmY7C1+bPR+6SOo8im1G6/FpNem8AR5fcZCmXHWQ+EUmRWJyuA==",
"cpu": [
"arm64"
],
@ -3398,9 +3509,9 @@
}
},
"node_modules/@swc/core-win32-ia32-msvc": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.6.tgz",
"integrity": "sha512-Ju5z65Nda8oYjt2Z4CGbuBLxM+98TcewLogutI69rBo5S70xunadp4ANIHcr9fZlTu/IX9mxZmUpOaHtb+/TfA==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.7.tgz",
"integrity": "sha512-Xm0TfvcmmspvQg1s4+USL3x8D+YPAfX2JHygvxAnCJ0EHun8cm2zvfNBcsTlnwYb0ybFWXXY129aq1wgFC9TpQ==",
"cpu": [
"ia32"
],
@ -3414,9 +3525,9 @@
}
},
"node_modules/@swc/core-win32-x64-msvc": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.6.tgz",
"integrity": "sha512-pkqJsdrgxyFYJA+g9a3zbl+AoxYoBtv+Rji1Fw4+Sq7CsSMWboayWNN5fKRiyi3u3nG8kxqyGi51PsKy2G4Vpg==",
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.7.tgz",
"integrity": "sha512-tp43WfJLCsKLQKBmjmY/0vv1slVywR5Q4qKjF5OIY8QijaEW7/8VwPyUyVoJZEnDgv9jKtUTG5PzqtIYPZGnyg==",
"cpu": [
"x64"
],
@ -3436,9 +3547,9 @@
"dev": true
},
"node_modules/@swc/types": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.6.tgz",
"integrity": "sha512-/JLo/l2JsT/LRd80C3HfbmVpxOAJ11FO2RCEslFrgzLltoP9j8XIbsyDcfCt2WWyX+CM96rBoNM+IToAkFOugg==",
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.7.tgz",
"integrity": "sha512-scHWahbHF0eyj3JsxG9CFJgFdFNaVQCNAimBlT6PzS3n/HptxqREjsm4OH6AN3lYcffZYSPxXW8ua2BEHp0lJQ==",
"dev": true,
"dependencies": {
"@swc/counter": "^0.1.3"
@ -4230,9 +4341,9 @@
}
},
"node_modules/@types/lodash": {
"version": "4.17.1",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
"integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
"version": "4.17.4",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
"integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
"dev": true
},
"node_modules/@types/mathjax": {
@ -4318,12 +4429,12 @@
"dev": true
},
"node_modules/@vitejs/plugin-react-swc": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.6.0.tgz",
"integrity": "sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==",
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz",
"integrity": "sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==",
"dev": true,
"dependencies": {
"@swc/core": "^1.3.107"
"@swc/core": "^1.5.7"
},
"peerDependencies": {
"vite": "^4 || ^5"
@ -4342,9 +4453,9 @@
"optional": true
},
"node_modules/ace-builds": {
"version": "1.33.2",
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.2.tgz",
"integrity": "sha512-uDqCe+XDIdnADaDrA8o+x+qAfbM6uqyDQ43QcE6qC7zBPTvQSMOSPcXW+HvjZhEc2YbVYSaxXJX1qQKPgYqi5w=="
"version": "1.34.0",
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.34.0.tgz",
"integrity": "sha512-ZQqoV76wl4guDE5zvEnxCDrvy9gzLAwu7eD4ikYj/Gdlb4+qRLbb+aOFVnweZZRsHh089V0WVaw2NMNuiiEdTw=="
},
"node_modules/acorn": {
"version": "8.11.3",
@ -4384,16 +4495,16 @@
}
},
"node_modules/ag-grid-community": {
"version": "31.3.1",
"resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.1.tgz",
"integrity": "sha512-kKnNxY8UaVoF0aUSdtzK7oGr48Wj+VrdDY5l2p9+HdF0cAo/jBEasuUYR85QbkumNyilI6UbFpO6IyCrjNQ6Iw=="
"version": "31.3.2",
"resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.2.tgz",
"integrity": "sha512-GxqFRD0OcjaVRE1gwLgoP0oERNPH8Lk8wKJ1txulsxysEQ5dZWHhiIoXXSiHjvOCVMkK/F5qzY6HNrn6VeDMTQ=="
},
"node_modules/ag-grid-react": {
"version": "31.3.1",
"resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.1.tgz",
"integrity": "sha512-MP5PhFeRhe1gWNx866Sr1C+IrJcrJ0yj8pM/ls+Be/GNmSyIcmGb0Gwbl19bOSdfL5btTkNmGY/RbwnIO4GoMQ==",
"version": "31.3.2",
"resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.2.tgz",
"integrity": "sha512-SFHN05bsXp901rIT00Fa6iQLCtyavoJiKaXEDUtAU5LMu+GTkjs/FPQBQ8754omgdDFr4NsS3Ri6QbqBne3rug==",
"dependencies": {
"ag-grid-community": "31.3.1",
"ag-grid-community": "31.3.2",
"prop-types": "^15.8.1"
},
"peerDependencies": {
@ -4508,6 +4619,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
"deprecated": "This package is no longer supported.",
"optional": true,
"dependencies": {
"delegates": "^1.0.0",
@ -4621,9 +4733,9 @@
}
},
"node_modules/axios": {
"version": "1.6.8",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
@ -4810,11 +4922,11 @@
}
},
"node_modules/braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dependencies": {
"fill-range": "^7.0.1"
"fill-range": "^7.1.1"
},
"engines": {
"node": ">=8"
@ -4963,9 +5075,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001618",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001618.tgz",
"integrity": "sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg==",
"version": "1.0.30001621",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz",
"integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==",
"funding": [
{
"type": "opencollective",
@ -5118,6 +5230,24 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/cli-high": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/cli-high/-/cli-high-0.4.1.tgz",
"integrity": "sha512-fPbkILfCVG6mfxbsJbJZQsKE5JmfgJNlfBxap52XHXjLwPDhs/OMFVFrNR7bqiavZt2r5A80+wiRHzJyzWqwEQ==",
"hasInstallScript": true,
"dependencies": {
"@clack/prompts": "^0.7.0",
"sugar-high": "^0.6.1",
"xycolors": "^0.1.1",
"yargs": "^17.7.2"
},
"bin": {
"cli-high": "bin/index.js"
},
"funding": {
"url": "https://github.com/sponsors/xinyao27"
}
},
"node_modules/cli-spinners": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
@ -5134,6 +5264,19 @@
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
"node_modules/cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
"integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
"dependencies": {
"string-width": "^4.2.0",
"strip-ansi": "^6.0.1",
"wrap-ansi": "^7.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/clone": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
@ -5787,9 +5930,9 @@
}
},
"node_modules/dompurify": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.3.tgz",
"integrity": "sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng=="
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.4.tgz",
"integrity": "sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww=="
},
"node_modules/dot-case": {
"version": "3.0.4",
@ -5817,9 +5960,9 @@
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
},
"node_modules/electron-to-chromium": {
"version": "1.4.767",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.767.tgz",
"integrity": "sha512-nzzHfmQqBss7CE3apQHkHjXW77+8w3ubGCIoEijKCJebPufREaFETgGXWTkh32t259F3Kcq+R8MZdFdOJROgYw=="
"version": "1.4.778",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.778.tgz",
"integrity": "sha512-C6q/xcUJf/2yODRxAVCfIk4j3y3LMsD0ehiE2RQNV2cxc8XU62gR6vvYh3+etSUzlgTfil+qDHI1vubpdf0TOA=="
},
"node_modules/emoji-regex": {
"version": "8.0.0",
@ -6554,6 +6697,11 @@
"node": "^12.20 || >= 14.13"
}
},
"node_modules/fetch-retry": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-6.0.0.tgz",
"integrity": "sha512-BUFj1aMubgib37I3v4q78fYo63Po7t4HUPTpQ6/QE6yK6cIQrP+W43FYToeTEyg5m2Y7eFUtijUuAv/PDlWuag=="
},
"node_modules/file-entry-cache": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@ -6618,9 +6766,9 @@
}
},
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dependencies": {
"to-regex-range": "^5.0.1"
},
@ -6779,9 +6927,9 @@
}
},
"node_modules/framer-motion": {
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.0.tgz",
"integrity": "sha512-LRfLVPEwtO9IXJCAsWvtj3XZxrdZDcTxNNkZEq30aQ8p7/wimfUkDy67TDWdtzPiyKDkqOHDhaQC6XVrQ4Fh7A==",
"version": "11.2.6",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.6.tgz",
"integrity": "sha512-XUrjjBt57e5YoHQtjwc3eNchFBuHvIgN/cS8SC4oIaAn2J/0+bLanUxXizidJKZVeHJam/JrmMnPRjYMglVn5g==",
"dependencies": {
"tslib": "^2.4.0"
},
@ -6885,6 +7033,7 @@
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
"deprecated": "This package is no longer supported.",
"optional": true,
"dependencies": {
"aproba": "^1.0.3 || ^2.0.0",
@ -6909,6 +7058,14 @@
"node": ">=6.9.0"
}
},
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
"engines": {
"node": "6.* || 8.* || >= 10.*"
}
},
"node_modules/get-intrinsic": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@ -7885,9 +8042,9 @@
}
},
"node_modules/jackspeak": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
"integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.1.2.tgz",
"integrity": "sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==",
"dependencies": {
"@isaacs/cliui": "^8.0.2"
},
@ -9309,11 +9466,11 @@
]
},
"node_modules/micromatch": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
"integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
"dependencies": {
"braces": "^3.0.2",
"braces": "^3.0.3",
"picomatch": "^2.3.1"
},
"engines": {
@ -9321,12 +9478,13 @@
}
},
"node_modules/million": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/million/-/million-3.0.6.tgz",
"integrity": "sha512-OLjRVASGOZdyZw2ctBSSOu5kb9PaxafqkueqVvw0iQtUUnTLVRk1EmtqcNAtJWCIm8wn+WGRpDbnp+5Hi8//Kg==",
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/million/-/million-3.1.1.tgz",
"integrity": "sha512-vmI3lyA3IN4QKiB0/M3uDef3lZZvgVUokWtLkc5NvxEnykY+TdSR6xatMMNDJmzMHTneayIOpc/eQu4d9Z/r2w==",
"dependencies": {
"@babel/core": "^7.23.7",
"@babel/types": "^7.23.6",
"@million/install": "^0.0.3",
"@rollup/pluginutils": "^5.1.0",
"kleur": "^4.1.5",
"undici": "^6.3.0",
@ -9650,6 +9808,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
"deprecated": "This package is no longer supported.",
"optional": true,
"dependencies": {
"are-we-there-yet": "^2.0.0",
@ -10268,9 +10427,9 @@
}
},
"node_modules/postcss-nested/node_modules/postcss-selector-parser": {
"version": "6.0.16",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
"integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@ -10810,6 +10969,21 @@
"react": ">=16.13.1"
}
},
"node_modules/react-hook-form": {
"version": "7.51.5",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.5.tgz",
"integrity": "sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-icons": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@ -11256,6 +11430,14 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/require-directory": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@ -12130,12 +12312,12 @@
}
},
"node_modules/sucrase/node_modules/glob": {
"version": "10.3.15",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
"integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
"version": "10.3.16",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.16.tgz",
"integrity": "sha512-JDKXl1DiuuHJ6fVS2FXjownaavciiHNUU4mOvV/B793RLh05vZL1rcPnCSaOgv1hDT6RDlY7AB7ZUvFYAtPgAw==",
"dependencies": {
"foreground-child": "^3.1.0",
"jackspeak": "^2.3.6",
"jackspeak": "^3.1.2",
"minimatch": "^9.0.1",
"minipass": "^7.0.4",
"path-scurry": "^1.11.0"
@ -12158,6 +12340,11 @@
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/sugar-high": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/sugar-high/-/sugar-high-0.6.1.tgz",
"integrity": "sha512-kg1qMW7WwJcueXIlHkChL/p2EWY3gf8rQmP6n5nUq2TWVqatqDTMLvViS9WgAjgyTKH5/3/b8sRwWPOOAo1zMA=="
},
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -12253,9 +12440,9 @@
}
},
"node_modules/tailwindcss/node_modules/postcss-selector-parser": {
"version": "6.0.16",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
"integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@ -12520,9 +12707,9 @@
}
},
"node_modules/undici": {
"version": "6.16.1",
"resolved": "https://registry.npmjs.org/undici/-/undici-6.16.1.tgz",
"integrity": "sha512-NeNiTT7ixpeiL1qOIU/xTVpHpVP0svmI6PwoCKaMGaI5AsHOaRdwqU/f7Fi9eyU4u03nd5U/BC8wmRMnS9nqoA==",
"version": "6.18.1",
"resolved": "https://registry.npmjs.org/undici/-/undici-6.18.1.tgz",
"integrity": "sha512-/0BWqR8rJNRysS5lqVmfc7eeOErcOP4tZpATVjJOojjHZ71gSYVAtFhEmadcIjwMIUehh5NFyKGsXCnXIajtbA==",
"engines": {
"node": ">=18.17"
}
@ -13462,16 +13649,16 @@
}
},
"node_modules/wrap-ansi": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
"integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
"dependencies": {
"ansi-styles": "^6.1.0",
"string-width": "^5.0.1",
"strip-ansi": "^7.0.1"
"ansi-styles": "^4.0.0",
"string-width": "^4.1.0",
"strip-ansi": "^6.0.0"
},
"engines": {
"node": ">=12"
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
@ -13524,62 +13711,35 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/wrap-ansi/node_modules/ansi-regex": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/ansi-regex?sponsor=1"
}
},
"node_modules/wrap-ansi/node_modules/ansi-styles": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
"integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=12"
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/wrap-ansi/node_modules/emoji-regex": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
},
"node_modules/wrap-ansi/node_modules/string-width": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
"integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
"node_modules/wrap-ansi/node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dependencies": {
"eastasianwidth": "^0.2.0",
"emoji-regex": "^9.2.2",
"strip-ansi": "^7.0.1"
"color-name": "~1.1.4"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
"node": ">=7.0.0"
}
},
"node_modules/wrap-ansi/node_modules/strip-ansi": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
"integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
"dependencies": {
"ansi-regex": "^6.0.1"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/chalk/strip-ansi?sponsor=1"
}
"node_modules/wrap-ansi/node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/wrappy": {
"version": "1.0.2",
@ -13636,6 +13796,23 @@
"node": ">=0.4"
}
},
"node_modules/xycolors": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/xycolors/-/xycolors-0.1.1.tgz",
"integrity": "sha512-BbRKWpz/87nNH4lXp6TbBFUT0QipzmJI7ksQpSpBb3ny8mGJgkiKk36bIr8VqfyTEhasEBsfbp/Cum37fIHnjA==",
"hasInstallScript": true,
"funding": {
"url": "https://github.com/sponsors/xinyao27"
}
},
"node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
"integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
"engines": {
"node": ">=10"
}
},
"node_modules/yallist": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@ -13652,6 +13829,31 @@
"node": ">= 14"
}
},
"node_modules/yargs": {
"version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
"integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
"dependencies": {
"cliui": "^8.0.1",
"escalade": "^3.1.1",
"get-caller-file": "^2.0.5",
"require-directory": "^2.1.1",
"string-width": "^4.2.3",
"y18n": "^5.0.5",
"yargs-parser": "^21.1.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/yargs-parser": {
"version": "21.1.1",
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
"integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
"engines": {
"node": ">=12"
}
},
"node_modules/yocto-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

267
src/frontend/package.json
View file

@ -1,134 +1,137 @@
{
"name": "langflow",
"version": "0.1.2",
"private": true,
"dependencies": {
"@headlessui/react": "^1.7.17",
"@million/lint": "^0.0.73",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-form": "^0.0.3",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.3",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.6",
"@tabler/icons-react": "^2.32.0",
"@tailwindcss/forms": "^0.5.6",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/axios": "^0.14.0",
"ace-builds": "^1.24.1",
"ag-grid-community": "^31.2.1",
"ag-grid-react": "^31.2.1",
"ansi-to-html": "^0.7.2",
"axios": "^1.5.0",
"base64-js": "^1.5.1",
"class-variance-authority": "^0.6.1",
"clsx": "^1.2.1",
"cmdk": "^1.0.0",
"dompurify": "^3.0.5",
"dotenv": "^16.4.5",
"esbuild": "^0.17.19",
"file-saver": "^2.0.5",
"framer-motion": "^11.0.6",
"lodash": "^4.17.21",
"lucide-react": "^0.331.0",
"million": "^3.0.6",
"moment": "^2.29.4",
"openseadragon": "^4.1.1",
"playwright": "^1.42.0",
"react": "^18.2.21",
"react-ace": "^10.1.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.21",
"react-error-boundary": "^4.0.11",
"react-icons": "^5.0.1",
"react-laag": "^2.0.5",
"react-markdown": "^8.0.7",
"react-pdf": "^7.7.1",
"react-router-dom": "^6.15.0",
"react-syntax-highlighter": "^15.5.0",
"react18-json-view": "^0.2.3",
"reactflow": "^11.9.2",
"rehype-mathjax": "^4.0.3",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"shadcn-ui": "^0.2.3",
"short-unique-id": "^4.4.4",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"uuid": "^9.0.0",
"vite-plugin-svgr": "^3.2.0",
"web-vitals": "^2.1.4",
"zustand": "^4.4.7"
},
"scripts": {
"dev:docker": "vite --host 0.0.0.0",
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
"type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
},
"simple-git-hooks": {
"pre-commit": "npx pretty-quick --staged"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:7860",
"devDependencies": {
"@playwright/test": "^1.43.1",
"@swc/cli": "^0.1.62",
"@swc/core": "^1.3.80",
"@tailwindcss/typography": "^0.5.9",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/lodash": "^4.14.197",
"@types/node": "^16.18.46",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@types/uuid": "^9.0.2",
"@vitejs/plugin-react-swc": "^3.3.2",
"autoprefixer": "^10.4.15",
"daisyui": "^4.0.4",
"eslint": "^8.57.0",
"eslint-plugin-node": "^11.1.0",
"postcss": "^8.4.29",
"prettier": "^2.8.8",
"prettier-plugin-organize-imports": "^3.2.3",
"prettier-plugin-tailwindcss": "^0.3.0",
"pretty-quick": "^3.1.3",
"simple-git-hooks": "^2.11.1",
"tailwindcss": "^3.3.3",
"tailwindcss-dotted-background": "^1.1.0",
"typescript": "^5.2.2",
"ua-parser-js": "^1.0.37",
"vite": "^4.5.2"
}
"name": "langflow",
"version": "0.1.2",
"private": true,
"dependencies": {
"@headlessui/react": "^1.7.17",
"@hookform/resolvers": "^3.3.4",
"@million/lint": "^0.0.73",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-form": "^0.0.3",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.3",
"@radix-ui/react-popover": "^1.0.6",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-tooltip": "^1.0.6",
"@tabler/icons-react": "^2.32.0",
"@tailwindcss/forms": "^0.5.6",
"@tailwindcss/line-clamp": "^0.4.4",
"@types/axios": "^0.14.0",
"ace-builds": "^1.24.1",
"ag-grid-community": "^31.2.1",
"ag-grid-react": "^31.2.1",
"ansi-to-html": "^0.7.2",
"axios": "^1.5.0",
"base64-js": "^1.5.1",
"class-variance-authority": "^0.6.1",
"clsx": "^1.2.1",
"cmdk": "^1.0.0",
"dompurify": "^3.0.5",
"dotenv": "^16.4.5",
"esbuild": "^0.17.19",
"file-saver": "^2.0.5",
"framer-motion": "^11.0.6",
"lodash": "^4.17.21",
"lucide-react": "^0.331.0",
"million": "^3.0.6",
"moment": "^2.29.4",
"openseadragon": "^4.1.1",
"playwright": "^1.42.0",
"react": "^18.2.21",
"react-ace": "^10.1.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.21",
"react-error-boundary": "^4.0.11",
"react-hook-form": "^7.51.4",
"react-icons": "^5.0.1",
"react-laag": "^2.0.5",
"react-markdown": "^8.0.7",
"react-pdf": "^7.7.1",
"react-router-dom": "^6.15.0",
"react-syntax-highlighter": "^15.5.0",
"react18-json-view": "^0.2.3",
"reactflow": "^11.9.2",
"rehype-mathjax": "^4.0.3",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"shadcn-ui": "^0.2.3",
"short-unique-id": "^4.4.4",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"uuid": "^9.0.0",
"vite-plugin-svgr": "^3.2.0",
"web-vitals": "^2.1.4",
"zod": "^3.23.7",
"zustand": "^4.4.7"
},
"scripts": {
"dev:docker": "vite --host 0.0.0.0",
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
"type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
},
"simple-git-hooks": {
"pre-commit": "npx pretty-quick --staged"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:7860",
"devDependencies": {
"@playwright/test": "^1.44.0",
"@swc/cli": "^0.1.62",
"@swc/core": "^1.3.80",
"@tailwindcss/typography": "^0.5.9",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/lodash": "^4.14.197",
"@types/node": "^16.18.46",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@types/uuid": "^9.0.2",
"@vitejs/plugin-react-swc": "^3.3.2",
"autoprefixer": "^10.4.15",
"daisyui": "^4.0.4",
"eslint": "^8.57.0",
"eslint-plugin-node": "^11.1.0",
"postcss": "^8.4.29",
"prettier": "^2.8.8",
"prettier-plugin-organize-imports": "^3.2.3",
"prettier-plugin-tailwindcss": "^0.3.0",
"pretty-quick": "^3.1.3",
"simple-git-hooks": "^2.11.1",
"tailwindcss": "^3.3.3",
"tailwindcss-dotted-background": "^1.1.0",
"typescript": "^5.2.2",
"ua-parser-js": "^1.0.37",
"vite": "^4.5.2"
}
}

53
src/frontend/src/App.css
View file

@ -11,6 +11,13 @@ body {
text-align: center;
}
.label {
user-select: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none;
}
.react-flow__node {
width: auto;
height: auto;
@ -76,6 +83,25 @@ body {
height: 8px !important;
border-radius: 10px;
}
*::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background-color: #f1f1f1 !important;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ccc !important;
border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bbb !important;
}
.jv-indent::-webkit-scrollbar-track {
background-color: #f1f1f1 !important;
@ -111,3 +137,30 @@ body {
.json-view-flow .json-view {
background-color: #bbb !important;
}
.ag-body-horizontal-scroll-viewport,
.ag-body-vertical-scroll-viewport {
cursor: auto;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 999px;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
background-color: #bbb;
}

22
src/frontend/src/App.tsx
View file

@ -19,6 +19,7 @@ import Router from "./routes";
import useAlertStore from "./stores/alertStore";
import { useDarkStore } from "./stores/darkStore";
import useFlowsManagerStore from "./stores/flowsManagerStore";
import { useFolderStore } from "./stores/foldersStore";
import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
import { useStoreStore } from "./stores/storeStore";
import { useTypesStore } from "./stores/typesStore";
@ -47,13 +48,13 @@ export default function App() {
const setGlobalVariables = useGlobalVariablesStore(
(state) => state.setGlobalVariables,
);
const setUnavailableFields = useGlobalVariablesStore(
(state) => state.setUnavaliableFields,
);
const checkHasStore = useStoreStore((state) => state.checkHasStore);
const navigate = useNavigate();
const dark = useDarkStore((state) => state.dark);
const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
const loadingFolders = useFolderStore((state) => state.loading);
const [isLoadingHealth, setIsLoadingHealth] = useState(false);
useEffect(() => {
@ -76,7 +77,7 @@ export default function App() {
setUserData(user);
setAutoLogin(true);
setLoading(false);
await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
fetchAllData();
}
})
.catch(async (error) => {
@ -84,7 +85,7 @@ export default function App() {
setAutoLogin(false);
if (isAuthenticated && !isLoginPage) {
getUser();
await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
fetchAllData();
} else {
setLoading(false);
useFlowsManagerStore.setState({ isLoading: false });
@ -100,6 +101,13 @@ export default function App() {
return () => abortController.abort();
}, []);
const fetchAllData = async () => {
setTimeout(async () => {
await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
getFoldersApi();
}, 1000);
};
const fetchData = async () => {
return new Promise<void>(async (resolve, reject) => {
if (isAuthenticated) {
@ -157,7 +165,7 @@ export default function App() {
setFetchError(false);
//This condition is necessary to avoid infinite loop on starter page when the application is not healthy
if (isLoading === true && window.location.pathname === "/") {
navigate("/flows");
navigate("/all");
window.location.reload();
}
};
@ -184,7 +192,7 @@ export default function App() {
></FetchErrorComponent>
}
{isLoading ? (
{isLoading || loadingFolders ? (
<div className="loading-page-panel">
<LoadingComponent remSize={50} />
</div>

72
src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx Normal file
View file

@ -0,0 +1,72 @@
import { useState } from "react";
import IconComponent from "../../../../components/genericIconComponent";
import { AccordionComponentType } from "../../../../types/components";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../../../ui/custom-accordion";
export default function FolderAccordionComponent({
trigger,
open = [],
keyValue,
options,
}: AccordionComponentType): JSX.Element {
const [value, setValue] = useState(
open.length === 0 ? "" : getOpenAccordion(),
);
function getOpenAccordion(): string {
let value = "";
open.forEach((el) => {
if (el == trigger) {
value = trigger;
}
});
return value;
}
function handleClick(): void {
value === "" ? setValue(keyValue!) : setValue("");
}
return (
<>
<Accordion
type="single"
className="w-full"
value={value}
onValueChange={setValue}
>
<AccordionItem value={keyValue!} className="">
<AccordionTrigger
onClick={() => {
handleClick();
}}
className="px-2"
>
{trigger}
</AccordionTrigger>
<AccordionContent>
{options!.map((option, index) => (
<div
key={index}
className="flex cursor-pointer px-2 py-1 hover:bg-muted-foreground/10"
>
<IconComponent
name={option.icon}
className="relative top-[1.5px] mr-2 h-4 w-4"
aria-hidden="true"
/>
<span className="truncate">{option.title}</span>
</div>
))}
</AccordionContent>
</AccordionItem>
</Accordion>
</>
);
}

2
src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
View file

@ -130,8 +130,8 @@ export default function AddNewVariableButton({ children }): JSX.Element {
<InputComponent
setSelectedOptions={(value) => setFields(value)}
selectedOptions={fields}
password={false}
options={availableFields()}
password={false}
placeholder="Choose a field for the variable..."
id={"apply-to-fields"}
></InputComponent>

12
src/frontend/src/components/arrayReaderComponent/index.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function ArrayReader({ array }: { array: any[] }): JSX.Element {
//TODO check array type
return (
<div>
<ul>
{array.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}

39
src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx Normal file
View file

@ -0,0 +1,39 @@
import { storeComponent } from "../../../../types/store";
import { cn } from "../../../../utils/utils";
import ForwardedIconComponent from "../../../genericIconComponent";
import ShadTooltip from "../../../shadTooltipComponent";
import { Card, CardHeader, CardTitle } from "../../../ui/card";
export default function DragCardComponent({ data }: { data: storeComponent }) {
return (
<>
<Card
draggable
//TODO check color schema
className={cn(
"group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
)}
>
<div>
<CardHeader>
<div>
<CardTitle className="flex w-full items-start justify-between gap-3 text-xl">
<ForwardedIconComponent
className={cn(
"visible flex-shrink-0",
data.is_component
? "mx-0.5 h-6 w-6 text-component-icon"
: "h-7 w-7 flex-shrink-0 text-flow-icon",
)}
name={data.is_component ? "ToyBrick" : "Group"}
/>
<div className="w-full truncate pr-3">{data.name}</div>
</CardTitle>
</div>
</CardHeader>
</div>
</Card>
</>
);
}

78
src/frontend/src/components/cardComponent/index.tsx
View file

@ -1,4 +1,6 @@
import { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { Control } from "react-hook-form";
import { getComponent, postLikeComponent } from "../../controllers/API";
import IOModal from "../../modals/IOModal";
import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
@ -22,8 +24,11 @@ import {
CardHeader,
CardTitle,
} from "../ui/card";
import { Checkbox } from "../ui/checkbox";
import { FormControl, FormField } from "../ui/form";
import Loading from "../ui/loading";
import { convertTestName } from "./utils/convert-test-name";
import DragCardComponent from "./components/dragCardComponent";
export default function CollectionCardComponent({
data,
@ -33,6 +38,8 @@ export default function CollectionCardComponent({
onClick,
onDelete,
playground,
control,
is_component,
}: {
data: storeComponent;
authorized?: boolean;
@ -41,6 +48,8 @@ export default function CollectionCardComponent({
button?: JSX.Element;
playground?: boolean;
onDelete?: () => void;
control?: Control<any, any>;
is_component?: boolean;
}) {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -70,6 +79,10 @@ export default function CollectionCardComponent({
);
const [loadingPlayground, setLoadingPlayground] = useState(false);
const selectedFlowsComponentsCards = useFlowsManagerStore(
(state) => state.selectedFlowsComponentsCards,
);
const name = data.is_component ? "Component" : "Flow";
async function getFlowData() {
@ -83,7 +96,6 @@ export default function CollectionCardComponent({
return false;
}
const { inputs, outputs } = getInputsAndOutputs(flow?.data?.nodes ?? []);
console.log(inputs, outputs);
return inputs.length > 0 || outputs.length > 0;
}
@ -178,36 +190,59 @@ export default function CollectionCardComponent({
}
}
const isSelectedCard =
selectedFlowsComponentsCards?.includes(data?.id) ?? false;
function onDragStart(event: React.DragEvent<any>) {
let image: JSX.Element = <DragCardComponent data={data} />; // <== whatever you want here
var ghost = document.createElement("div");
ghost.style.transform = "translate(-10000px, -10000px)";
ghost.style.position = "absolute";
document.body.appendChild(ghost);
event.dataTransfer.setDragImage(ghost, 0, 0);
const root = createRoot(ghost);
root.render(image);
const flow = getFlowById(data.id);
if (flow) {
event.dataTransfer.setData("flow", JSON.stringify(data));
}
}
return (
<>
<Card
onDragStart={onDragStart}
draggable
data-testid={`card-${convertTestName(data.name)}`}
//TODO check color schema
className={cn(
"group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
disabled ? "pointer-events-none opacity-50" : "",
onClick ? "cursor-pointer" : "",
isSelectedCard ? "border border-selected" : "",
)}
onClick={onClick}
>
<div>
<CardHeader>
<div>
<CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
<CardTitle className="flex w-full items-start justify-between gap-3 text-xl">
<IconComponent
className={cn(
"flex-shrink-0",
"visible flex-shrink-0",
data.is_component
? "mx-0.5 h-6 w-6 text-component-icon"
: "h-7 w-7 flex-shrink-0 text-flow-icon",
)}
name={data.is_component ? "ToyBrick" : "Group"}
/>
<ShadTooltip content={data.name}>
<div className="w-full truncate">{data.name}</div>
<div className="w-full truncate pr-3">{data.name}</div>
</ShadTooltip>
{data?.metadata !== undefined && (
<div className="flex gap-3">
<div className="flex items-center gap-3">
{data.private && (
<ShadTooltip content="Private">
<span className="flex items-center gap-1.5 text-xs text-muted-foreground">
@ -250,19 +285,29 @@ export default function CollectionCardComponent({
</div>
)}
{onDelete && data?.metadata === undefined && (
<button
className="z-50"
{control && (
<div
className="flex"
onClick={(e) => {
e.stopPropagation();
setOpenDelete(true);
}}
>
<IconComponent
name="Trash2"
className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
<FormField
control={control}
name={`${data.id}`}
defaultValue={false}
render={({ field }) => (
<FormControl>
<Checkbox
aria-label="checkbox-component"
checked={field.value}
onCheckedChange={field.onChange}
className="h-5 w-5 border border-ring data-[state=checked]:border-selected data-[state=checked]:bg-selected"
/>
</FormControl>
)}
/>
</button>
</div>
)}
</CardTitle>
</div>
@ -369,11 +414,7 @@ export default function CollectionCardComponent({
authorized ? "Delete" : "Please review your API key."
}
>
<DeleteConfirmationModal
onConfirm={() => {
onDelete();
}}
>
<DeleteConfirmationModal onConfirm={onDelete}>
<Button
variant="ghost"
size="icon"
@ -541,6 +582,7 @@ export default function CollectionCardComponent({
onConfirm={() => {
if (onDelete) onDelete();
}}
description={` ${is_component ? "component" : "flow"}`}
>
<></>
</DeleteConfirmationModal>

32
src/frontend/src/components/cardsWrapComponent/index.tsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import { useEffect, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { cn } from "../../utils/utils";
export default function CardsWrapComponent({
onFileDrop,
@ -11,6 +12,23 @@ export default function CardsWrapComponent({
dragMessage?: string;
}) {
const [isDragging, setIsDragging] = useState(false);
useEffect(() => {
// Function to handle visibility change
const handleVisibilityChange = () => {
if (document.visibilityState === "visible") {
// Reset hover state or perform any necessary actions when the tab becomes visible again
setIsDragging(false);
}
};
// Add event listener for visibility change
document.addEventListener("visibilitychange", handleVisibilityChange);
// Cleanup event listener on component unmount
return () => {
document.removeEventListener("visibilitychange", handleVisibilityChange);
};
}, []);
const dragOver = (e) => {
e.preventDefault();
@ -43,12 +61,12 @@ export default function CardsWrapComponent({
onDragEnter={dragEnter}
onDragLeave={dragLeave}
onDrop={onDrop}
className={
"h-full w-full " +
(isDragging
? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light"
: "")
}
className={cn(
"h-full w-full",
isDragging
? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light"
: "",
)}
>
{isDragging ? (
<>

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

@ -15,8 +15,8 @@ export default function FlowToolbar(): JSX.Element {
const hasIO = useFlowStore((state) => state.hasIO);
const hasStore = useStoreStore((state) => state.hasStore);
const validApiKey = useStoreStore((state) => state.validApiKey);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const hasApiKey = useStoreStore((state) => state.hasApiKey);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {

54
src/frontend/src/components/csvOutputComponent/index.tsx
View file

@ -1,7 +1,6 @@
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
import { AgGridReact } from "ag-grid-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import {
CSVError,
CSVNoDataError,
@ -11,6 +10,7 @@ import { useDarkStore } from "../../stores/darkStore";
import { FlowPoolObjectType } from "../../types/chat";
import { NodeType } from "../../types/flow";
import ForwardedIconComponent from "../genericIconComponent";
import TableComponent from "../tableComponent";
import Loading from "../ui/loading";
import { convertCSVToData } from "./helpers/convert-data-function";
@ -54,8 +54,6 @@ function CsvOutputComponent({
const [colDefs, setColDefs] = useState([]);
const [status, setStatus] = useState("loading");
var currentRowHeight: number;
var minRowHeight = 25;
const defaultColDef = useMemo(() => {
return {
width: 200,
@ -82,48 +80,6 @@ function CsvOutputComponent({
}
}, [separator]);
const getRowHeight = useCallback(() => {
return currentRowHeight;
}, []);
const onGridReady = useCallback((params: any) => {
minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
currentRowHeight = minRowHeight;
}, []);
const updateRowHeight = (params: { api: any }) => {
const bodyViewport = document.querySelector(".ag-body-viewport");
if (!bodyViewport) {
return;
}
var gridHeight = bodyViewport.clientHeight;
var renderedRowCount = params.api.getDisplayedRowCount();
if (renderedRowCount * minRowHeight >= gridHeight) {
if (currentRowHeight !== minRowHeight) {
currentRowHeight = minRowHeight;
params.api.resetRowHeights();
}
} else {
currentRowHeight = Math.floor(gridHeight / renderedRowCount);
params.api.resetRowHeights();
}
};
const onFirstDataRendered = useCallback(
(params: any) => {
updateRowHeight(params);
},
[updateRowHeight],
);
const onGridSizeChanged = useCallback(
(params: any) => {
updateRowHeight(params);
},
[updateRowHeight],
);
return (
<div className=" h-full rounded-md border bg-muted">
{status === "nodata" && (
@ -158,14 +114,10 @@ function CsvOutputComponent({
className={`${dark ? "ag-theme-balham-dark" : "ag-theme-balham"}`}
style={{ height: "100%", width: "100%" }}
>
<AgGridReact
<TableComponent
rowData={rowData}
columnDefs={colDefs}
defaultColDef={defaultColDef}
getRowHeight={getRowHeight}
onGridReady={onGridReady}
onFirstDataRendered={onFirstDataRendered}
onGridSizeChanged={onGridSizeChanged}
scrollbarWidth={8}
overlayNoRowsTemplate="No data available"
/>

21
src/frontend/src/components/dateReaderComponent/index.tsx Normal file
View file

@ -0,0 +1,21 @@
export default function DateReader({
date: dateString,
}: {
date: string;
}): JSX.Element {
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-indexed in JavaScript
const day = String(date.getDate()).padStart(2, "0");
const hours = date.getHours();
const minutes = String(date.getMinutes()).padStart(2, "0");
const ampm = hours >= 12 ? "PM" : "AM";
const hours12 = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Convert to 12-hour format
const formattedDate = `${year}-${month}-${day} ${hours12}:${minutes} ${ampm}`;
return <span>{formattedDate}</span>;
}

8
src/frontend/src/components/genericIconComponent/index.tsx
View file

@ -7,7 +7,7 @@ import Loading from "../ui/loading";
import { useEffect, useState } from "react";
const ForwardedIconComponent = memo(
export const ForwardedIconComponent = memo(
forwardRef(
(
{
@ -18,7 +18,7 @@ const ForwardedIconComponent = memo(
strokeWidth,
id = "",
}: IconComponentProps,
ref
ref,
) => {
const [showFallback, setShowFallback] = useState(false);
@ -65,8 +65,8 @@ const ForwardedIconComponent = memo(
/>
</Suspense>
);
}
)
},
),
);
export default ForwardedIconComponent;

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

@ -12,6 +12,7 @@ import { Node } from "reactflow";
import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
import { SAVED_HOVER } from "../../../../constants/constants";
import ExportModal from "../../../../modals/exportModal";
import FlowLogsModal from "../../../../modals/flowLogsModal";
import FlowSettingsModal from "../../../../modals/flowSettingsModal";
import useAlertStore from "../../../../stores/alertStore";
import useFlowStore from "../../../../stores/flowStore";
@ -34,6 +35,7 @@ export const MenuBar = ({
const redo = useFlowsManagerStore((state) => state.redo);
const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
const [openSettings, setOpenSettings] = useState(false);
const [openLogs, setOpenLogs] = useState(false);
const nodes = useFlowStore((state) => state.nodes);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const navigate = useNavigate();
@ -123,6 +125,18 @@ export const MenuBar = ({
/>
Settings
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
setOpenLogs(true);
}}
className="cursor-pointer"
>
<IconComponent
name="ScrollText"
className="header-menu-options "
/>
Logs
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
onClick={() => {
@ -132,7 +146,7 @@ export const MenuBar = ({
title: UPLOAD_ERROR_ALERT,
list: [error],
});
}
},
);
}}
>
@ -194,6 +208,7 @@ export const MenuBar = ({
open={openSettings}
setOpen={setOpenSettings}
></FlowSettingsModal>
<FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
</div>
{(currentFlow.updated_at || saveLoading) && (
<ShadTooltip
@ -213,7 +228,7 @@ export const MenuBar = ({
name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
className={cn(
"h-4 w-4",
isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
)}
/>
{printByBuildStatus()}

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

@ -59,7 +59,7 @@ export default function Header(): JSX.Element {
<Button
className="gap-2"
variant={
location.pathname === "/flows" ||
location.pathname === "/all" ||
location.pathname === "/components"
? "primary"
: "secondary"
@ -73,18 +73,7 @@ export default function Header(): JSX.Element {
<div className="hidden flex-1 md:block">{USER_PROJECTS_HEADER}</div>
</Button>
</Link>
{/* <Link to="/community">
<Button
className="gap-2"
variant={
location.pathname === "/community" ? "primary" : "secondary"
}
size="sm"
>
<IconComponent name="Users2" className="h-4 w-4" />
<div className="flex-1">Community Examples</div>
</Button>
</Link> */}
{hasStore && (
<Link to="/store">
<Button

61
src/frontend/src/components/horizontalScrollFadeComponent/index.tsx Normal file
View file

@ -0,0 +1,61 @@
import { useEffect, useRef, useState } from "react";
export default function HorizontalScrollFadeComponent({
children,
isFolder = true,
}) {
const scrollContainerRef = useRef<HTMLDivElement>(null);
const fadeContainerRef = useRef<HTMLDivElement>(null);
const [divWidth, setDivWidth] = useState<number>(0);
useEffect(() => {
const handleResize = () => {
if (scrollContainerRef.current) {
setDivWidth(scrollContainerRef.current.clientWidth);
}
};
window.addEventListener("resize", handleResize);
handleResize(); // call the function at start to get the initial width
return () => window.removeEventListener("resize", handleResize);
}, []);
useEffect(() => {
const handleScroll = () => {
if (!scrollContainerRef.current || !fadeContainerRef.current) return;
const { scrollLeft, scrollWidth, clientWidth } =
scrollContainerRef.current;
const atStart = scrollLeft === 0;
const atEnd = scrollLeft === scrollWidth - clientWidth;
const isScrollable = scrollWidth > clientWidth;
fadeContainerRef.current.classList.toggle(
"fade-left",
isScrollable && !atStart,
);
fadeContainerRef.current.classList.toggle(
"fade-right",
isScrollable && !atEnd,
);
};
const scrollContainer = scrollContainerRef.current;
if (scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll);
// Delay the initial scroll event dispatch to ensure correct calculation
scrollContainer.dispatchEvent(new Event("scroll"));
return () => scrollContainer.removeEventListener("scroll", handleScroll);
}
}, [divWidth, children]); // Depend on divWidth
return isFolder ? (
<div className="hidden w-full flex-col gap-2 lg:flex">{children}</div>
) : (
<div ref={fadeContainerRef} className="fade-container flex">
<div ref={scrollContainerRef} className="scroll-container flex gap-2">
{children}
</div>
</div>
);
}

192
src/frontend/src/components/inputComponent/components/popover/index.tsx Normal file
View file

@ -0,0 +1,192 @@
import { PopoverAnchor } from "@radix-ui/react-popover";
import useAlertStore from "../../../../stores/alertStore";
import { classNames, cn } from "../../../../utils/utils";
import ForwardedIconComponent from "../../../genericIconComponent";
import {
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "../../../ui/command";
import { Input } from "../../../ui/input";
import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
const CustomInputPopover = ({
id,
refInput,
onInputLostFocus,
selectedOption,
setSelectedOption,
selectedOptions,
setSelectedOptions,
value,
autoFocus,
disabled,
setShowOptions,
required,
className,
password,
pwdVisible,
editNode,
placeholder,
onChange,
blurOnEnter,
options,
optionsPlaceholder,
optionButton,
optionsButton,
handleKeyDown,
showOptions,
}) => {
const setErrorData = useAlertStore.getState().setErrorData;
const handleInputChange = (e) => {
if (password) {
if (
e.target.value.split("").every((char) => char === "•") &&
e.target.value !== ""
) {
setErrorData({
title: `Invalid characters: ${e.target.value}`,
list: [
"It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
],
});
}
}
onChange && onChange(e.target.value);
};
return (
<Popover modal open={showOptions} onOpenChange={setShowOptions}>
<PopoverAnchor>
<Input
id={id}
ref={refInput}
type="text"
onBlur={onInputLostFocus}
value={
(selectedOption !== "" || !onChange) && setSelectedOption
? selectedOption
: (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions
? selectedOptions?.join(", ")
: value
}
autoFocus={autoFocus}
disabled={disabled}
onClick={() => {
(((selectedOption !== "" || !onChange) && setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)) &&
setShowOptions(true);
}}
required={required}
className={classNames(
password &&
(!setSelectedOption || selectedOption === "") &&
!pwdVisible &&
value !== ""
? " text-clip password "
: "",
editNode ? " input-edit-node " : "",
password && (setSelectedOption || setSelectedOptions)
? "pr-[62.9px]"
: "",
(!password && (setSelectedOption || setSelectedOptions)) ||
(password && !(setSelectedOption || setSelectedOptions))
? "pr-8"
: "",
className!,
)}
placeholder={password && editNode ? "Key" : placeholder}
onChange={handleInputChange}
onKeyDown={(e) => {
handleKeyDown(e);
if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
}}
data-testid={editNode ? id + "-edit" : id}
/>
</PopoverAnchor>
<PopoverContentWithoutPortal
className="nocopy nopan nodelete nodrag noundo p-0"
style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
side="bottom"
align="center"
>
<Command
filter={(value, search) => {
if (
value.toLowerCase().includes(search.toLowerCase()) ||
value.includes("doNotFilter-")
)
return 1;
return 0;
}}
>
<CommandInput placeholder={optionsPlaceholder} />
<CommandList>
<CommandGroup defaultChecked={false}>
{options.map((option, id) => (
<CommandItem
className="group"
key={option + id}
value={option}
onSelect={(currentValue) => {
setSelectedOption &&
setSelectedOption(
currentValue === selectedOption ? "" : currentValue,
);
setSelectedOptions &&
setSelectedOptions(
selectedOptions?.includes(currentValue)
? selectedOptions.filter(
(item) => item !== currentValue,
)
: [...selectedOptions, currentValue],
);
!setSelectedOptions && setShowOptions(false);
}}
>
<div className="group flex w-full items-center justify-between">
<div className="flex items-center">
<div
className={cn(
"relative mr-2 h-4 w-4",
selectedOption === option ||
selectedOptions?.includes(option)
? "opacity-100"
: "opacity-0",
)}
>
<div className="absolute opacity-100 transition-all group-hover:opacity-0">
<ForwardedIconComponent
name="Check"
className="mr-2 h-4 w-4 text-primary"
aria-hidden="true"
/>
</div>
<div className="absolute opacity-0 transition-all group-hover:opacity-100">
<ForwardedIconComponent
name="X"
className="mr-2 h-4 w-4 text-status-red"
aria-hidden="true"
/>
</div>
</div>
{option}
</div>
{optionButton && optionButton(option)}
</div>
</CommandItem>
))}
{optionsButton && optionsButton}
</CommandGroup>
</CommandList>
</Command>
</PopoverContentWithoutPortal>
</Popover>
);
};
export default CustomInputPopover;

167
src/frontend/src/components/inputComponent/components/popoverObject/index.tsx Normal file
View file

@ -0,0 +1,167 @@
import { PopoverAnchor } from "@radix-ui/react-popover";
import { classNames, cn } from "../../../../utils/utils";
import ForwardedIconComponent from "../../../genericIconComponent";
import {
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "../../../ui/command";
import { Input } from "../../../ui/input";
import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
const CustomInputPopoverObject = ({
id,
refInput,
onInputLostFocus,
selectedOption,
setSelectedOption,
selectedOptions,
setSelectedOptions,
value,
autoFocus,
disabled,
setShowOptions,
required,
className,
placeholder,
onChange,
blurOnEnter,
options,
optionsPlaceholder,
optionButton,
optionsButton,
handleKeyDown,
showOptions,
}) => {
const handleInputChange = (e) => {
onChange && onChange(e.target.value);
};
return (
<Popover modal open={showOptions} onOpenChange={setShowOptions}>
<PopoverAnchor>
<Input
id={id}
ref={refInput}
type="text"
onBlur={onInputLostFocus}
value={
(selectedOption !== "" || !onChange) && setSelectedOption
? options.find((option) => option.id === selectedOption)?.name ||
""
: (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions
? selectedOptions
.map(
(optionId) =>
options.find((option) => option.id === optionId)?.name,
)
.join(", ")
: value
}
autoFocus={autoFocus}
disabled={disabled}
onClick={() => {
(((selectedOption !== "" || !onChange) && setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)) &&
setShowOptions(true);
}}
required={required}
className={classNames(className!)}
placeholder={placeholder}
onChange={handleInputChange}
onKeyDown={(e) => {
handleKeyDown(e);
if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
}}
data-testid={id}
/>
</PopoverAnchor>
<PopoverContentWithoutPortal
className="nocopy nopan nodelete nodrag noundo p-0"
style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
side="bottom"
align="center"
>
<Command
filter={(value, search) => {
if (
value.toLowerCase().includes(search.toLowerCase()) ||
value.includes("doNotFilter-")
)
return 1;
return 0;
}}
>
<CommandInput placeholder={optionsPlaceholder} />
<CommandList>
<CommandGroup defaultChecked={false}>
{options.map((option, index) => (
<CommandItem
className="group"
key={option.id}
value={option.id}
onSelect={(currentValue) => {
setSelectedOption &&
setSelectedOption(
currentValue === selectedOption ? "" : currentValue,
);
setSelectedOptions &&
setSelectedOptions(
selectedOptions?.includes(currentValue)
? selectedOptions.filter(
(item) => item !== currentValue,
)
: [...selectedOptions, currentValue],
);
!setSelectedOptions && setShowOptions(false);
}}
>
<div className="group flex w-full items-center justify-between">
<div className="flex items-center">
<div
className={cn(
"relative mr-2 h-4 w-4",
selectedOption === option.id ||
selectedOptions?.includes(option.id)
? "opacity-100"
: "opacity-0",
)}
>
<div className="absolute opacity-100 transition-all group-hover:opacity-0">
<ForwardedIconComponent
name="Check"
className="mr-2 h-4 w-4 text-primary"
aria-hidden="true"
/>
</div>
<div className="absolute opacity-0 transition-all group-hover:opacity-100">
<ForwardedIconComponent
name="X"
className="mr-2 h-4 w-4 text-status-red"
aria-hidden="true"
/>
</div>
</div>
<span data-testid={`option-${index}`}>
{option.name}{" "}
</span>
{/* Display the name property of the option */}
</div>
{optionButton && optionButton(option)}
</div>
</CommandItem>
))}
{optionsButton && optionsButton}
</CommandGroup>
</CommandList>
</Command>
</PopoverContentWithoutPortal>
</Popover>
);
};
export default CustomInputPopoverObject;

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

@ -1,20 +1,12 @@
import * as Form from "@radix-ui/react-form";
import { PopoverAnchor } from "@radix-ui/react-popover";
import { useEffect, useRef, useState } from "react";
import useAlertStore from "../../stores/alertStore";
import { InputComponentType } from "../../types/components";
import { handleKeyDown } from "../../utils/reactflowUtils";
import { classNames, cn } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
import {
Command,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "../ui/command";
import { Input } from "../ui/input";
import { Popover, PopoverContentWithoutPortal } from "../ui/popover";
import CustomInputPopover from "./components/popover";
import CustomInputPopoverObject from "./components/popoverObject";
export default function InputComponent({
autoFocus = false,
@ -39,13 +31,13 @@ export default function InputComponent({
optionsPlaceholder = "Search options...",
optionsButton,
optionButton,
objectOptions,
isObjectOption = false,
}: InputComponentType): JSX.Element {
const setErrorData = useAlertStore.getState().setErrorData;
const [pwdVisible, setPwdVisible] = useState(false);
const refInput = useRef<HTMLInputElement>(null);
const [showOptions, setShowOptions] = useState<boolean>(false);
// Clear component state
useEffect(() => {
if (disabled && value && onChange && value !== "") {
onChange("", true);
@ -93,182 +85,61 @@ export default function InputComponent({
</Form.Control>
) : (
<>
<Popover modal open={showOptions} onOpenChange={setShowOptions}>
<PopoverAnchor>
<Input
id={id}
ref={refInput}
type="text"
onBlur={onInputLostFocus}
value={
(selectedOption !== "" || !onChange) && setSelectedOption
? selectedOption
: (selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions
? selectedOptions?.join(", ")
: value
}
autoFocus={autoFocus}
disabled={disabled}
onClick={() => {
(((selectedOption !== "" || !onChange) &&
setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)) &&
setShowOptions(true);
}}
required={required}
className={classNames(
password &&
(!setSelectedOption || selectedOption === "") &&
!pwdVisible &&
value !== ""
? " text-clip password "
: "",
editNode ? " input-edit-node " : "",
password && (setSelectedOption || setSelectedOptions)
? "pr-[62.9px]"
: "",
(!password && (setSelectedOption || setSelectedOptions)) ||
(password && !(setSelectedOption || setSelectedOptions))
? "pr-8"
: "",
className!,
)}
placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => {
// if the user copies a password from another input
// it might come as ••••••••••• it causes errors
// in ascii encoding, so we need to handle it
if (password) {
// check if all chars are •
if (
e.target.value.split("").every((char) => char === "•") &&
e.target.value !== ""
) {
setErrorData({
title: `Invalid characters: ${e.target.value}`,
list: [
"It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
],
});
}
}
onChange && onChange(e.target.value);
}}
onKeyDown={(e) => {
handleKeyDown(e, value, "");
if (blurOnEnter && e.key === "Enter")
refInput.current?.blur();
}}
data-testid={editNode ? id + "-edit" : id}
/>
</PopoverAnchor>
<PopoverContentWithoutPortal
className="nocopy nopan nodelete nodrag noundo p-0"
style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
side="bottom"
avoidCollisions={false}
align="center"
>
<Command
filter={(value, search) => {
if (
value.toLowerCase().includes(search.toLowerCase()) ||
value.includes("doNotFilter-")
)
return 1; // ensures items arent filtered
return 0;
}}
>
<CommandInput placeholder={optionsPlaceholder} />
<CommandList>
<CommandGroup defaultChecked={false}>
{options.map((option, id) => (
<CommandItem
className="group"
key={option + id}
value={option}
onSelect={(currentValue) => {
setSelectedOption &&
setSelectedOption(
currentValue === selectedOption
? ""
: currentValue,
);
setSelectedOptions &&
setSelectedOptions(
selectedOptions?.includes(currentValue)
? selectedOptions.filter(
(item) => item !== currentValue,
)
: [...selectedOptions, currentValue],
);
!setSelectedOptions && setShowOptions(false);
}}
>
<div className="group flex w-full items-center justify-between">
<div className="flex items-center">
<div
className={cn(
"relative mr-2 h-4 w-4",
selectedOption === option ||
selectedOptions?.includes(option)
? "opacity-100"
: "opacity-0",
)}
>
<div className="absolute opacity-100 transition-all group-hover:opacity-0">
<ForwardedIconComponent
name="Check"
className="mr-2 h-4 w-4 text-primary"
aria-hidden="true"
/>
</div>
<div className="absolute opacity-0 transition-all group-hover:opacity-100">
<ForwardedIconComponent
name="X"
className="mr-2 h-4 w-4 text-status-red"
aria-hidden="true"
/>
</div>
</div>
{option}
</div>
{optionButton && optionButton(option)}
</div>
</CommandItem>
))}
{optionsButton && optionsButton}
</CommandGroup>
</CommandList>
</Command>
</PopoverContentWithoutPortal>
</Popover>
<div
data-testid={"popover-anchor-" + id}
className={cn(
"pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
((selectedOption !== "" || !onChange) && setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)
? ""
: "hidden",
)}
onClick={
((selectedOption !== "" || !onChange) && setSelectedOption) ||
((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions)
? (e) => {
setShowOptions((old) => !old);
e.preventDefault();
e.stopPropagation();
}
: () => {}
}
></div>
{isObjectOption ? (
// Content to render when isObjectOption is true
<CustomInputPopoverObject
refInput={refInput}
handleKeyDown={handleKeyDown}
optionButton={optionButton}
optionsButton={optionsButton}
showOptions={showOptions}
onChange={onChange}
id={`object-${id}`}
onInputLostFocus={onInputLostFocus}
selectedOption={selectedOption}
setSelectedOption={setSelectedOption}
selectedOptions={selectedOptions}
setSelectedOptions={setSelectedOptions}
options={objectOptions}
value={value}
autoFocus={autoFocus}
disabled={disabled}
setShowOptions={setShowOptions}
required={required}
placeholder={placeholder}
blurOnEnter={blurOnEnter}
optionsPlaceholder={optionsPlaceholder}
className={className}
/>
) : (
<CustomInputPopover
refInput={refInput}
handleKeyDown={handleKeyDown}
optionButton={optionButton}
optionsButton={optionsButton}
showOptions={showOptions}
onChange={onChange}
id={`popover-anchor-${id}`}
onInputLostFocus={onInputLostFocus}
selectedOption={selectedOption}
setSelectedOption={setSelectedOption}
selectedOptions={selectedOptions}
setSelectedOptions={setSelectedOptions}
value={value}
autoFocus={autoFocus}
disabled={disabled}
setShowOptions={setShowOptions}
required={required}
password={password}
pwdVisible={pwdVisible}
editNode={editNode}
placeholder={placeholder}
blurOnEnter={blurOnEnter}
options={options}
optionsPlaceholder={optionsPlaceholder}
className={className}
/>
)}
</>
)}
@ -280,8 +151,10 @@ export default function InputComponent({
)}
>
<button
onClick={() => {
onClick={(e) => {
setShowOptions(!showOptions);
e.preventDefault();
e.stopPropagation();
}}
className={cn(
selectedOption !== ""

7
src/frontend/src/components/numberReader/index.tsx Normal file
View file

@ -0,0 +1,7 @@
export default function NumberReader({
number,
}: {
number: number;
}): JSX.Element {
return <span>{number}</span>;
}

13
src/frontend/src/components/objectRender/index.tsx Normal file
View file

@ -0,0 +1,13 @@
import DictAreaModal from "../../modals/dictAreaModal";
export default function ObjectRender({ object }: { object: any }): JSX.Element {
//TODO check object type
return (
<DictAreaModal value={object}>
<div className="flex h-full w-full items-center align-middle transition-all hover:scale-105">
<div className="truncate">{JSON.stringify(object)}</div>
</div>
</DictAreaModal>
);
}

34
src/frontend/src/components/recordsOutputComponent/index.tsx Normal file
View file

@ -0,0 +1,34 @@
import { ColDef, ColGroupDef } from "ag-grid-community";
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
import { FlowPoolObjectType } from "../../types/chat";
import TableComponent from "../tableComponent";
import { extractColumnsFromRows } from "../../utils/utils";
function RecordsOutputComponent({
flowPool,
pagination,
}: {
flowPool: FlowPoolObjectType;
pagination: boolean;
}) {
const rows = flowPool?.data?.artifacts?.records ?? [];
const columns = extractColumnsFromRows(rows, "union");
const columnDefs = columns.map((col, idx) => ({
...col,
resizable: idx !== columns.length - 1,
flex: idx !== columns.length - 1 ? 1 : 2,
})) as (ColDef<any> | ColGroupDef<any>)[];
return (
<TableComponent
overlayNoRowsTemplate="No data available"
suppressRowClickSelection={true}
pagination={pagination}
columnDefs={columnDefs}
rowData={rows}
/>
);
}
export default RecordsOutputComponent;

38
src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx Normal file
View file

@ -0,0 +1,38 @@
import { Link } from "react-router-dom";
import { cn } from "../../../../utils/utils";
import { buttonVariants } from "../../../ui/button";
type SideBarButtonsComponentProps = {
items: {
href?: string;
title: string;
icon: React.ReactNode;
}[];
pathname: string;
handleOpenNewFolderModal?: () => void;
};
const SideBarButtonsComponent = ({
items,
handleOpenNewFolderModal,
}: SideBarButtonsComponentProps) => {
return (
<>
{items.map((item) => (
<Link to={item.href!}>
<div
key={item.title}
data-testid={`sidebar-nav-${item.title}`}
className={cn(
buttonVariants({ variant: "ghost" }),
"!w-[200px] cursor-pointer justify-start gap-2 border border-transparent hover:border-border hover:bg-transparent",
)}
onClick={handleOpenNewFolderModal}
>
{item.title}
</div>
</Link>
))}
</>
);
};
export default SideBarButtonsComponent;

170
src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx Normal file
View file

@ -0,0 +1,170 @@
import { useLocation } from "react-router-dom";
import { FolderType } from "../../../../pages/MainPage/entities";
import { useFolderStore } from "../../../../stores/foldersStore";
import { cn } from "../../../../utils/utils";
import DropdownButton from "../../../dropdownButtonComponent";
import IconComponent, {
ForwardedIconComponent,
} from "../../../genericIconComponent";
import { Button, buttonVariants } from "../../../ui/button";
import useFileDrop from "../../hooks/use-on-file-drop";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { handleDownloadFolderFn } from "../../../../pages/MainPage/utils/handle-download-folder";
import useAlertStore from "../../../../stores/alertStore";
type SideBarFoldersButtonsComponentProps = {
folders: FolderType[];
pathname: string;
handleChangeFolder?: (id: string) => void;
handleEditFolder?: (item: FolderType) => void;
handleDeleteFolder?: (item: FolderType) => void;
handleAddFolder?: () => void;
};
const SideBarFoldersButtonsComponent = ({
folders,
pathname,
handleAddFolder,
handleChangeFolder,
handleEditFolder,
handleDeleteFolder,
}: SideBarFoldersButtonsComponentProps) => {
const uploadFolder = useFolderStore((state) => state.uploadFolder);
const currentFolder = pathname.split("/");
const urlWithoutPath = pathname.split("/").length < 4;
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const setErrorData = useAlertStore((state) => state.setErrorData);
const checkPathName = (itemId: string) => {
if (urlWithoutPath && itemId === myCollectionId) {
return true;
}
return currentFolder.includes(itemId);
};
const location = useLocation();
const folderId = location?.state?.folderId ?? myCollectionId;
const getFolderById = useFolderStore((state) => state.getFolderById);
const handleFolderChange = (folderId: string) => {
getFolderById(folderId);
};
const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
folderId,
handleFolderChange,
);
const handleUploadFlowsToFolder = () => {
uploadFolder(folderId);
};
const handleDownloadFolder = (id: string) => {
handleDownloadFolderFn(id);
};
return (
<>
<div className="flex shrink-0 items-center justify-between">
<DropdownButton
firstButtonName="New Folder"
onFirstBtnClick={handleAddFolder!}
options={[]}
plusButton={true}
dropdownOptions={false}
/>
<Button
variant="primary"
onClick={handleUploadFlowsToFolder}
className="px-7"
>
<ForwardedIconComponent
name="Upload"
className="main-page-nav-button"
/>
Upload
</Button>
</div>
<div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
<>
{folders.map((item, index) => (
<div
onDragOver={dragOver}
onDragEnter={dragEnter}
onDragLeave={dragLeave}
onDrop={(e) => onDrop(e, item.id!)}
key={item.id}
data-testid={`sidebar-nav-${item.name}`}
className={cn(
buttonVariants({ variant: "ghost" }),
checkPathName(item.id!)
? "border border-border bg-muted hover:bg-muted"
: "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
"group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
)}
onClick={() => handleChangeFolder!(item.id!)}
>
<div className="flex w-full items-center gap-2">
<IconComponent
name={"folder"}
className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
/>
<span className="block max-w-full truncate opacity-100">
{item.name}
</span>
<div className="flex-1" />
{index > 0 && (
<Button
className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
onClick={(e) => {
handleDeleteFolder!(item);
e.stopPropagation();
e.preventDefault();
}}
variant={"ghost"}
>
<IconComponent
name={"trash"}
className=" w-4 stroke-[1.5]"
/>
</Button>
)}
{index > 0 && (
<Button
className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
onClick={(e) => {
handleEditFolder!(item);
e.stopPropagation();
e.preventDefault();
}}
variant={"ghost"}
>
<IconComponent
name={"pencil"}
className=" w-4 stroke-[1.5] text-white "
/>
</Button>
)}
<Button
className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
onClick={(e) => {
handleDownloadFolder(item.id!);
e.stopPropagation();
e.preventDefault();
}}
variant={"ghost"}
>
<IconComponent
name={"Download"}
className=" w-4 stroke-[1.5] text-white "
/>
</Button>
</div>
</div>
))}
</>
</div>
</>
);
};
export default SideBarFoldersButtonsComponent;

134
src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx Normal file
View file

@ -0,0 +1,134 @@
import {
UPLOAD_ALERT_LIST,
WRONG_FILE_ERROR_ALERT,
} from "../../../constants/alerts_constants";
import { updateFlowInDatabase } from "../../../controllers/API";
import { uploadFlowsFromFolders } from "../../../pages/MainPage/services";
import useAlertStore from "../../../stores/alertStore";
import useFlowsManagerStore from "../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../stores/foldersStore";
import { FlowType } from "../../../types/flow";
const useFileDrop = (folderId, folderChangeCallback) => {
const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
const setErrorData = useAlertStore((state) => state.setErrorData);
const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
const flows = useFlowsManagerStore((state) => state.flows);
const triggerFolderChange = (folderId) => {
if (folderChangeCallback) {
folderChangeCallback(folderId);
}
};
const handleFileDrop = async (e) => {
if (e.dataTransfer.types.some((type) => type === "Files")) {
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
const firstFile = e.dataTransfer.files[0];
if (firstFile.type === "application/json") {
uploadFormData(firstFile);
} else {
setErrorData({
title: WRONG_FILE_ERROR_ALERT,
list: [UPLOAD_ALERT_LIST],
});
}
}
}
};
const dragOver = (
e:
| React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>,
) => {
e.preventDefault();
if (e.dataTransfer.types.some((types) => types === "Files")) {
setFolderDragging(true);
}
};
const dragEnter = (
e:
| React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>,
) => {
if (e.dataTransfer.types.some((types) => types === "Files")) {
setFolderDragging(true);
}
e.preventDefault();
};
const dragLeave = (
e:
| React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>,
) => {
e.preventDefault();
if (e.target === e.currentTarget) {
setFolderDragging(false);
}
};
const onDrop = (
e:
| React.DragEvent<HTMLDivElement>
| React.DragEvent<HTMLButtonElement>
| React.DragEvent<HTMLAnchorElement>,
folderId: string,
) => {
if (e?.dataTransfer?.getData("flow")) {
const data = JSON.parse(e?.dataTransfer?.getData("flow"));
if (data) {
uploadFromDragCard(data.id, folderId);
return;
}
}
e.preventDefault();
handleFileDrop(e);
setFolderDragging(false);
};
const uploadFromDragCard = (flowId, folderId) => {
const selectedFlow = flows.find((flow) => flow.id === flowId);
if (!selectedFlow) {
throw new Error("Flow not found");
}
const updatedFlow: FlowType = {
...selectedFlow,
folder_id: folderId,
};
updateFlowInDatabase(updatedFlow).then(() => {
getFoldersApi(true);
triggerFolderChange(folderId);
});
};
const uploadFormData = (data) => {
const formData = new FormData();
formData.append("file", data);
uploadFlowsFromFolders(formData).then(() => {
getFoldersApi(true);
triggerFolderChange(folderId);
refreshFlows();
});
};
return {
dragOver,
dragEnter,
dragLeave,
onDrop,
};
};
export default useFileDrop;

71
src/frontend/src/components/sidebarComponent/index.tsx
View file

@ -1,48 +1,61 @@
import { Link, useLocation } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { FolderType } from "../../pages/MainPage/entities";
import { useFolderStore } from "../../stores/foldersStore";
import { cn } from "../../utils/utils";
import { buttonVariants } from "../ui/button";
import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
import SideBarButtonsComponent from "./components/sideBarButtons";
import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons";
interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
type SidebarNavProps = {
items: {
href: string;
href?: string;
title: string;
icon: React.ReactNode;
}[];
}
handleOpenNewFolderModal?: () => void;
handleChangeFolder?: (id: string) => void;
handleEditFolder?: (item: FolderType) => void;
handleDeleteFolder?: (item: FolderType) => void;
className?: string;
};
export default function SidebarNav({
className,
items,
handleOpenNewFolderModal,
handleChangeFolder,
handleEditFolder,
handleDeleteFolder,
...props
}: SidebarNavProps) {
const location = useLocation();
const pathname = location.pathname;
const loadingFolders = useFolderStore((state) => state.loading);
const folders = useFolderStore((state) => state.folders);
const pathValues = ["folder", "components", "flows", "all"];
const isFolderPath = pathValues.some((value) => pathname.includes(value));
return (
<nav
className={cn(
"flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
className
)}
{...props}
>
{items.map((item) => (
<Link
data-testid={`sidebar-nav-${item.title}`}
key={item.href}
to={item.href}
className={cn(
buttonVariants({ variant: "ghost" }),
pathname === item.href
? "border border-border bg-muted hover:bg-muted"
: "border border-transparent hover:border-border hover:bg-transparent",
"justify-start gap-2"
)}
>
{item.icon}
{item.title}
</Link>
))}
<nav className={cn(className)} {...props}>
<HorizontalScrollFadeComponent>
<SideBarButtonsComponent
items={items}
pathname={pathname}
handleOpenNewFolderModal={handleOpenNewFolderModal}
/>
{!loadingFolders && folders?.length > 0 && isFolderPath && (
<SideBarFoldersButtonsComponent
folders={folders}
pathname={pathname}
handleChangeFolder={handleChangeFolder}
handleEditFolder={handleEditFolder}
handleDeleteFolder={handleDeleteFolder}
handleAddFolder={handleOpenNewFolderModal}
/>
)}
</HorizontalScrollFadeComponent>
</nav>
);
}

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

@ -5,7 +5,7 @@ export const StoreGuard = ({ children }) => {
const hasStore = useStoreStore((state) => state.hasStore);
if (!hasStore) {
return <Navigate to="/flows" replace />;
return <Navigate to="/all" replace />;
}
return children;

7
src/frontend/src/components/stringReaderComponent/index.tsx Normal file
View file

@ -0,0 +1,7 @@
export default function StringReader({
string,
}: {
string: string;
}): JSX.Element {
return <span className="truncate">{string}</span>;
}

60
src/frontend/src/components/tableAutoCellRender/index.tsx Normal file
View file

@ -0,0 +1,60 @@
import { CustomCellRendererProps } from "ag-grid-react";
import { cn, isTimeStampString } from "../../utils/utils";
import ArrayReader from "../arrayReaderComponent";
import DateReader from "../dateReaderComponent";
import NumberReader from "../numberReader";
import ObjectRender from "../objectRender";
import StringReader from "../stringReaderComponent";
import { Label } from "../ui/label";
import { Badge } from "../ui/badge";
export default function TableAutoCellRender({
value,
}: CustomCellRendererProps) {
function getCellType() {
switch (typeof value) {
case "object":
if (value === null) {
return String(value);
} else if (Array.isArray(value)) {
return <ArrayReader array={value} />;
} else if (value.definitions) {
// use a custom render defined by the sender
} else {
return <ObjectRender object={value} />;
}
break;
case "string":
if (isTimeStampString(value)) {
return <DateReader date={value} />;
}
//TODO: REFACTOR FOR ANY LABEL NOT HARDCODED
else if (value === "success") {
return (
<Badge
variant="outline"
size="sq"
className={cn(
"min-w-min bg-success-background text-success-foreground hover:bg-success-background",
)}
>
{value}
</Badge>
);
} else {
return <StringReader string={value} />;
}
break;
case "number":
return <NumberReader number={value} />;
default:
return String(value);
}
}
return (
<div className="group flex h-full w-full items-center align-middle">
{getCellType()}
</div>
);
}

124
src/frontend/src/components/tableComponent/index.tsx
View file

@ -1,27 +1,119 @@
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
import { AgGridReact } from "ag-grid-react";
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
import { AgGridReact, AgGridReactProps } from "ag-grid-react";
import { ElementRef, forwardRef, useCallback } from "react";
import {
DEFAULT_TABLE_ALERT_MSG,
DEFAULT_TABLE_ALERT_TITLE,
} from "../../constants/constants";
import { useDarkStore } from "../../stores/darkStore";
import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
import { cn } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
interface TableComponentProps extends AgGridReactProps {
columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
rowData: NonNullable<AgGridReactProps["rowData"]>;
alertTitle?: string;
alertDescription?: string;
}
const TableComponent = forwardRef<
ElementRef<typeof AgGridReact>,
ComponentPropsWithoutRef<typeof AgGridReact>
>(({ ...props }, ref) => {
const dark = useDarkStore((state) => state.dark);
TableComponentProps
>(
(
{
alertTitle = DEFAULT_TABLE_ALERT_TITLE,
alertDescription = DEFAULT_TABLE_ALERT_MSG,
...props
},
ref,
) => {
const dark = useDarkStore((state) => state.dark);
var currentRowHeight: number;
var minRowHeight = 25;
return (
<div
className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col",
)} // applying the grid theme
>
<AgGridReact ref={ref} {...props} />
</div>
);
});
const getRowHeight = useCallback(() => {
return currentRowHeight;
}, []);
const onGridReady = useCallback((params: any) => {
minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
currentRowHeight = minRowHeight;
}, []);
const updateRowHeight = (params: { api: any }) => {
const bodyViewport = document.querySelector(".ag-body-viewport");
if (!bodyViewport) {
return;
}
var gridHeight = bodyViewport.clientHeight;
var renderedRowCount = params.api.getDisplayedRowCount();
if (renderedRowCount * minRowHeight >= gridHeight) {
if (currentRowHeight !== minRowHeight) {
currentRowHeight = minRowHeight;
params.api.resetRowHeights();
}
} else {
currentRowHeight = Math.floor(gridHeight / renderedRowCount);
params.api.resetRowHeights();
}
};
const onFirstDataRendered = useCallback(
(params: any) => {
updateRowHeight(params);
},
[updateRowHeight],
);
const onGridSizeChanged = useCallback(
(params: any) => {
updateRowHeight(params);
},
[updateRowHeight],
);
if (props.rowData.length === 0) {
return (
<div className="flex h-full w-full items-center justify-center rounded-md border">
<Alert variant={"default"} className="w-fit">
<ForwardedIconComponent
name="AlertCircle"
className="h-5 w-5 text-primary"
/>
<AlertTitle>{alertTitle}</AlertTitle>
<AlertDescription>{alertDescription}</AlertDescription>
</Alert>
</div>
);
}
return (
<div
className={cn(
dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
"ag-theme-shadcn flex h-full flex-col",
)} // applying the grid theme
>
<AgGridReact
{...props}
className={cn(props.className, "custom-scroll")}
getRowHeight={getRowHeight}
onGridReady={onGridReady}
onFirstDataRendered={onFirstDataRendered}
onGridSizeChanged={onGridSizeChanged}
defaultColDef={{
minWidth: 100,
}}
ref={ref}
/>
</div>
);
},
);
export default TableComponent;

110
src/frontend/src/components/tagsSelectorComponent/index.tsx
View file

@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react";
import { cn } from "../../utils/utils";
import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
import { Badge } from "../ui/badge";
export function TagsSelector({
@ -24,87 +24,37 @@ export function TagsSelector({
setSelectedTags(newArray);
};
const scrollContainerRef = useRef<HTMLDivElement>(null);
const fadeContainerRef = useRef<HTMLDivElement>(null);
const [divWidth, setDivWidth] = useState<number>(0);
useEffect(() => {
const handleResize = () => {
if (scrollContainerRef.current) {
setDivWidth(scrollContainerRef.current.clientWidth);
}
};
window.addEventListener("resize", handleResize);
handleResize(); // call the function at start to get the initial width
return () => window.removeEventListener("resize", handleResize);
}, []);
useEffect(() => {
const handleScroll = () => {
if (!scrollContainerRef.current || !fadeContainerRef.current) return;
const { scrollLeft, scrollWidth, clientWidth } =
scrollContainerRef.current;
const atStart = scrollLeft === 0;
const atEnd = scrollLeft === scrollWidth - clientWidth;
const isScrollable = scrollWidth > clientWidth;
fadeContainerRef.current.classList.toggle(
"fade-left",
isScrollable && !atStart
);
fadeContainerRef.current.classList.toggle(
"fade-right",
isScrollable && !atEnd
);
};
const scrollContainer = scrollContainerRef.current;
if (scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll);
// Delay the initial scroll event dispatch to ensure correct calculation
scrollContainer.dispatchEvent(new Event("scroll"));
return () => scrollContainer.removeEventListener("scroll", handleScroll);
}
}, [divWidth, loadingTags]); // Depend on divWidth
return (
<div ref={fadeContainerRef} className="fade-container">
<div
ref={scrollContainerRef}
className="scroll-container flex min-w-min gap-2"
>
{!loadingTags &&
tags.map((tag, idx) => (
<button
disabled={disabled}
className={
disabled
? "cursor-not-allowed"
: " overflow-hidden whitespace-nowrap"
}
onClick={() => {
updateTags(tag.name);
}}
<HorizontalScrollFadeComponent isFolder={false}>
{!loadingTags &&
tags.map((tag, idx) => (
<button
disabled={disabled}
className={
disabled
? "cursor-not-allowed"
: " overflow-hidden whitespace-nowrap"
}
onClick={() => {
updateTags(tag.name);
}}
key={idx}
data-testid={`tag-selector-${tag.name}`}
>
<Badge
key={idx}
data-testid={`tag-selector-${tag.name}`}
variant="outline"
size="sq"
className={cn(
selectedTags.some((category) => category === tag.name)
? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
: "",
)}
>
<Badge
key={idx}
variant="outline"
size="sq"
className={cn(
selectedTags.some((category) => category === tag.name)
? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
: ""
)}
>
{tag.name}
</Badge>
</button>
))}
</div>
</div>
{tag.name}
</Badge>
</button>
))}
</HorizontalScrollFadeComponent>
);
}

58
src/frontend/src/components/ui/alert.tsx Normal file
View file

@ -0,0 +1,58 @@
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../utils/utils";
const alertVariants = cva(
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
},
);
const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
));
Alert.displayName = "Alert";
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
));
AlertTitle.displayName = "AlertTitle";
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
));
AlertDescription.displayName = "AlertDescription";
export { Alert, AlertTitle, AlertDescription };

6
src/frontend/src/components/ui/checkbox.tsx
View file

@ -13,14 +13,14 @@ const Checkbox = React.forwardRef<
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<IconComponent name="Check" className="h-4 w-4" />
<IconComponent name="Check" className="h-4 w-4 stroke-2" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
@ -37,7 +37,7 @@ const CheckBoxDiv = ({
className={cn(
className,
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
checked ? "bg-primary text-primary-foreground" : ""
checked ? "bg-primary text-primary-foreground" : "",
)}
>
{checked && (

55
src/frontend/src/components/ui/custom-accordion.tsx Normal file
View file

@ -0,0 +1,55 @@
"use client";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import * as React from "react";
import { cn } from "../../utils/utils";
const Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />
));
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger asChild ref={ref} {...props}>
<div
className={cn(
" flex flex-1 cursor-pointer items-center justify-between border-[1px] py-2 text-sm font-medium data-[state=closed]:rounded-md data-[state=open]:rounded-t-md data-[state=open]:border-b-0 data-[state=open]:bg-muted [&[data-state=open]>svg]:rotate-180",
className,
)}
>
{children}
<ChevronDownIcon className="h-4 w-4 font-bold text-primary transition-transform duration-200" />
</div>
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className={cn(
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden border-[1px] text-sm data-[state=open]:rounded-b-md data-[state=open]:border-t-0 data-[state=open]:bg-muted",
className,
)}
{...props}
>
<div className="pt-0">{children}</div>
</AccordionPrimitive.Content>
));
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

176
src/frontend/src/components/ui/form.tsx Normal file
View file

@ -0,0 +1,176 @@
import * as LabelPrimitive from "@radix-ui/react-label";
import { Slot } from "@radix-ui/react-slot";
import * as React from "react";
import {
Controller,
ControllerProps,
FieldPath,
FieldValues,
FormProvider,
useFormContext,
} from "react-hook-form";
import { cn } from "../../utils/utils";
import { Label } from "./label";
const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue,
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
);
};
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState, formState } = useFormContext();
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>");
}
const { id } = itemContext;
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
};
};
type FormItemContextValue = {
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue,
);
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
);
});
FormItem.displayName = "FormItem";
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField();
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
);
});
FormLabel.displayName = "FormLabel";
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
);
});
FormControl.displayName = "FormControl";
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField();
return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
);
});
FormDescription.displayName = "FormDescription";
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
if (!body) {
return null;
}
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
{...props}
>
{body}
</p>
);
});
FormMessage.displayName = "FormMessage";
export {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
useFormField,
};

19
src/frontend/src/constants/constants.ts
View file

@ -95,6 +95,12 @@ export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
*/
export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
/**
* The base text for subtitle of Flow Logs (Menubar)
* @constant
*/
export const LOGS_DIALOG_SUBTITLE = "Check out information about your flow.";
/**
* The base text for subtitle of Code Dialog (Toolbar)
* @constant
@ -125,7 +131,6 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
export const CODE_DICT_DIALOG_SUBTITLE =
"Edit your dictionary. This dialog allows you to create your own customized dictionary. You can add as many key-value pairs as you want. While in edit mode, you can enter ({}) or ([]), and this will result in adding a new object or array.";
/**
* The base text for subtitle of Prompt Dialog
* @constant
@ -533,6 +538,8 @@ export const NOUNS: string[] = [
*/
export const USER_PROJECTS_HEADER = "My Collection";
export const DEFAULT_FOLDER = "My Projects";
/**
* Header text for admin page
* @constant
@ -727,6 +734,8 @@ export const OUTPUT_TYPES = new Set([
"JsonOutput",
"KeyPairOutput",
"StringListOutput",
"RecordsOutput",
"TableOutput",
]);
export const CHAT_FIRST_INITIAL_TEXT =
@ -746,8 +755,8 @@ export const EDIT_TEXT_MODAL_TITLE = "Edit Text";
export const EDIT_TEXT_PLACEHOLDER = "Type message here.";
export const INPUT_HANDLER_HOVER = "Avaliable input components:";
export const OUTPUT_HANDLER_HOVER = "Avaliable output components:";
export const TEXT_INPUT_MODAL_TITLE = "Text Inputs";
export const OUTPUTS_MODAL_TITLE = "Text Outputs";
export const TEXT_INPUT_MODAL_TITLE = "Inputs";
export const OUTPUTS_MODAL_TITLE = "Outputs";
export const LANGFLOW_CHAT_TITLE = "Langflow Chat";
export const CHAT_INPUT_PLACEHOLDER =
"No chat input variables found. Click to run your flow.";
@ -792,3 +801,7 @@ export const NATIVE_CATEGORIES = [
];
export const SAVE_DEBOUNCE_TIME = 300;
export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;
export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";

27
src/frontend/src/controllers/API/api.tsx
View file

@ -22,7 +22,10 @@ function ApiInterceptor() {
const interceptor = api.interceptors.response.use(
(response) => response,
async (error: AxiosError) => {
if (error.response?.status === 403 || error.response?.status === 401) {
if (
error?.response?.status === 403 ||
error?.response?.status === 401
) {
if (!autoLogin) {
if (error?.config?.url?.includes("github")) {
return Promise.reject(error);
@ -44,7 +47,7 @@ function ApiInterceptor() {
}
await clearBuildVerticesState(error);
return Promise.reject(error);
}
},
);
const isAuthorizedURL = (url) => {
@ -61,10 +64,10 @@ function ApiInterceptor() {
const parsedURL = new URL(url);
const isDomainAllowed = authorizedDomains.some(
(domain) => parsedURL.origin === new URL(domain).origin
(domain) => parsedURL.origin === new URL(domain).origin,
);
const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
parsedURL.pathname.includes(endpoint)
parsedURL.pathname.includes(endpoint),
);
return isDomainAllowed || isEndpointAllowed;
@ -77,6 +80,18 @@ function ApiInterceptor() {
// Request interceptor to add access token to every request
const requestInterceptor = api.interceptors.request.use(
(config) => {
const lastUrl = localStorage.getItem("lastUrlCalled");
if (
config?.url === lastUrl &&
config?.url !== "/health" &&
config?.method === "get"
) {
return Promise.reject("Duplicate request");
}
localStorage.setItem("lastUrlCalled", config.url ?? "");
const accessToken = cookies.get("access_token_lf");
if (accessToken && !isAuthorizedURL(config?.url)) {
config.headers["Authorization"] = `Bearer ${accessToken}`;
@ -86,7 +101,7 @@ function ApiInterceptor() {
},
(error) => {
return Promise.reject(error);
}
},
);
return () => {
@ -118,7 +133,7 @@ function ApiInterceptor() {
if (error?.config?.headers) {
delete error.config.headers["Authorization"];
error.config.headers["Authorization"] = `Bearer ${cookies.get(
"access_token_lf"
"access_token_lf",
)}`;
const response = await axios.request(error.config);
return response;

43
src/frontend/src/controllers/API/index.ts
View file

@ -1,3 +1,4 @@
import { ColDef, ColGroupDef } from "ag-grid-community";
import { AxiosRequestConfig, AxiosResponse } from "axios";
import { Edge, Node, ReactFlowJsonObject } from "reactflow";
import { BASE_URL_API } from "../../constants/constants";
@ -18,6 +19,7 @@ import { UserInputType } from "../../types/components";
import { FlowStyleType, FlowType } from "../../types/flow";
import { StoreComponentResponse } from "../../types/store";
import { FlowPoolType } from "../../types/zustand/flow";
import { extractColumnsFromRows } from "../../utils/utils";
import {
APIClassType,
BuildStatusTypeAPI,
@ -119,6 +121,7 @@ export async function saveFlowToDatabase(newFlow: {
description: string;
style?: FlowStyleType;
is_component?: boolean;
folder_id?: string;
}): Promise<FlowType> {
try {
const response = await api.post(`${BASE_URL_API}flows/`, {
@ -126,6 +129,7 @@ export async function saveFlowToDatabase(newFlow: {
data: newFlow.data,
description: newFlow.description,
is_component: newFlow.is_component,
folder_id: newFlow.folder_id === "" ? null : newFlow.folder_id,
});
if (response.status !== 201) {
@ -152,6 +156,7 @@ export async function updateFlowInDatabase(
name: updatedFlow.name,
data: updatedFlow.data,
description: updatedFlow.description,
folder_id: updatedFlow.folder_id === "" ? null : updatedFlow.folder_id,
});
if (response?.status !== 200) {
@ -992,3 +997,41 @@ export async function deleteFlowPool(
config["params"] = { flow_id: flowId };
return await api.delete(`${BASE_URL_API}monitor/builds`, config);
}
export async function multipleDeleteFlowsComponents(
flowIds: string[],
): Promise<AxiosResponse<any>> {
return await api.post(`${BASE_URL_API}flows/multiple_delete/`, {
flow_ids: flowIds,
});
}
export async function getTransactionTable(
id: string,
mode: "intersection" | "union",
params = {},
): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
const config = {};
config["params"] = { flow_id: id };
if (params) {
config["params"] = { ...config["params"], ...params };
}
const rows = await api.get(`${BASE_URL_API}monitor/transactions`, config);
const columns = extractColumnsFromRows(rows.data, mode);
return { rows: rows.data, columns };
}
export async function getMessagesTable(
id: string,
mode: "intersection" | "union",
params = {},
): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
const config = {};
config["params"] = { flow_id: id };
if (params) {
config["params"] = { ...config["params"], ...params };
}
const rows = await api.get(`${BASE_URL_API}monitor/messages`, config);
const columns = extractColumnsFromRows(rows.data, mode);
return { rows: rows.data, columns };
}

140
src/frontend/src/modals/BundleModal/component/index.tsx Normal file
View file

@ -0,0 +1,140 @@
import { useEffect, useState } from "react";
import InputComponent from "../../../components/inputComponent";
import {
FormControl,
FormField,
FormItem,
FormMessage,
} from "../../../components/ui/form";
import { Input } from "../../../components/ui/input";
import { Label } from "../../../components/ui/label";
import { Textarea } from "../../../components/ui/textarea";
import useFlowsManagerStore from "../../../stores/flowsManagerStore";
type FolderFormsProps = {
control: any;
setValue: any;
folderToEdit: any;
};
export const FolderForms = ({
control,
setValue,
folderToEdit,
}: FolderFormsProps): JSX.Element => {
const flows = useFlowsManagerStore((state) => state.flows);
const [selectedComponents, setSelectedComponents] = useState<string[]>([]);
const [selectedFlows, setSelectedFlows] = useState<string[]>([]);
const componentsList = flows
.filter((flow) => flow.is_component && flow.folder_id !== null)
.map((flow) => ({ id: flow.id, name: flow.name }));
const flowsList = flows
.filter((flow) => !flow.is_component && flow.folder_id !== null)
.map((flow) => ({ id: flow.id, name: flow.name }));
useEffect(() => {
setValue("components", selectedComponents);
setValue("flows", selectedFlows);
}, [selectedComponents, selectedFlows]);
useEffect(() => {
if (folderToEdit) {
setValue("name", folderToEdit.name);
setValue("description", folderToEdit.description);
console.log(folderToEdit);
// setSelectedComponents(folderToEdit.components);
// setSelectedFlows(folderToEdit.flows);
return;
}
setValue("name", "");
setValue("description", "");
setSelectedComponents([]);
setSelectedFlows([]);
}, [folderToEdit]);
return (
<>
<div className="flex h-full w-full flex-col gap-4 align-middle">
<Label>Folder Name</Label>
<FormField
control={control}
name="name"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
value={field.value}
onChange={field.onChange}
placeholder="Insert a name for the folder..."
></Input>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Label>Description (optional) </Label>
<FormField
control={control}
name="description"
render={({ field }) => (
<FormControl>
<Textarea
value={field.value}
onChange={field.onChange}
placeholder="Insert a description for the folder..."
></Textarea>
</FormControl>
)}
/>
<Label>Add Flows</Label>
<FormField
control={control}
name="flows"
render={() => (
<FormControl>
<InputComponent
isObjectOption
password={false}
objectOptions={flowsList}
placeholder="Choose a flow to add..."
id="input-flow"
setSelectedOptions={(value: any) => setSelectedFlows(value)}
selectedOptions={selectedFlows}
></InputComponent>
</FormControl>
)}
/>
<Label>Add Components</Label>
<FormField
control={control}
name="components"
render={() => (
<FormControl>
<InputComponent
isObjectOption
password={false}
objectOptions={componentsList}
placeholder="Choose a component to add..."
id="input-component"
setSelectedOptions={(value) => setSelectedComponents(value)}
selectedOptions={selectedComponents}
></InputComponent>
</FormControl>
)}
/>
</div>
</>
);
};
export default FolderForms;

10
src/frontend/src/modals/BundleModal/entities/index.ts Normal file
View file

@ -0,0 +1,10 @@
import { z } from "zod";
export const FolderFormsSchema = z.object({
name: z.string().min(1, {
message: "Name must be at least 1 characters.",
}),
description: z.string().optional(),
components: z.array(z.string()),
flows: z.array(z.string()),
});

53
src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx Normal file
View file

@ -0,0 +1,53 @@
import { addFolder, updateFolder } from "../../../pages/MainPage/services";
import useAlertStore from "../../../stores/alertStore";
import { useFolderStore } from "../../../stores/foldersStore";
const useFolderSubmit = (setOpen, folderToEdit) => {
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
const onSubmit = (data) => {
if (folderToEdit) {
updateFolder(data, folderToEdit?.id!).then(
() => {
setSuccessData({
title: "Folder updated successfully.",
});
getFoldersApi(true);
setOpen(false);
},
(reason) => {
if (reason) {
setErrorData({
title: `Error updating folder.`,
});
console.error(reason);
} else {
getFoldersApi(true);
setOpen(false);
}
},
);
} else {
addFolder(data).then(
() => {
setSuccessData({
title: "Folder created successfully.",
});
getFoldersApi(true);
setOpen(false);
},
() => {
setErrorData({
title: `Error creating folder.`,
});
},
);
}
};
return { onSubmit, open, setOpen };
};
export default useFolderSubmit;

79
src/frontend/src/modals/BundleModal/index.tsx Normal file
View file

@ -0,0 +1,79 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import ForwardedIconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Form } from "../../components/ui/form";
import { useFolderStore } from "../../stores/foldersStore";
import BaseModal from "../baseModal";
import FolderForms from "./component";
import { FolderFormsSchema } from "./entities";
import useFolderSubmit from "./hooks/submit-folder";
type FoldersModalProps = {
open: boolean;
setOpen: (open: boolean) => void;
};
export default function FoldersModal({
open,
setOpen,
}: FoldersModalProps): JSX.Element {
const form = useForm<z.infer<typeof FolderFormsSchema>>({
resolver: zodResolver(FolderFormsSchema),
defaultValues: {
name: "",
description: "",
components: [],
flows: [],
},
mode: "all",
});
const folderToEdit = useFolderStore((state) => state.folderToEdit);
const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
const onSubmit = (data) => {
onSubmitFolder(data);
};
return (
<>
<BaseModal size="x-small" open={open} setOpen={setOpen}>
<BaseModal.Header
description={`${folderToEdit ? "Edit a folder" : "Add a new folder"}`}
>
<span className="pr-2" data-testid="modal-title">
{folderToEdit ? "Edit" : "New"} Folder
</span>
<ForwardedIconComponent
name="Plus"
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</BaseModal.Header>
<BaseModal.Content>
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FolderForms
folderToEdit={folderToEdit}
control={form.control}
setValue={form.setValue}
/>
<Button
className="float-right mt-6"
type="submit"
disabled={!form.formState.isValid}
>
{folderToEdit ? "Edit" : "Save"} Folder
</Button>
</form>
</Form>
</div>
</BaseModal.Content>
</BaseModal>
</>
);
}

13
src/frontend/src/modals/IOModal/components/IOFieldView/index.tsx
View file

@ -4,6 +4,7 @@ import ImageViewer from "../../../../components/ImageViewer";
import CsvOutputComponent from "../../../../components/csvOutputComponent";
import InputListComponent from "../../../../components/inputListComponent";
import PdfViewer from "../../../../components/pdfViewer";
import RecordsOutputComponent from "../../../../components/recordsOutputComponent";
import {
Select,
SelectContent,
@ -47,6 +48,7 @@ export default function IOFieldView({
}
}
};
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
function handleOutputType() {
@ -204,7 +206,7 @@ export default function IOFieldView({
<SelectItem key={separator} value={separator}>
{separator}
</SelectItem>
)
),
)}
</SelectGroup>
</SelectContent>
@ -280,6 +282,15 @@ export default function IOFieldView({
/>
</>
);
case "RecordsOutput":
return (
<div className={left ? "h-56" : "h-full"}>
<RecordsOutputComponent
flowPool={flowPoolNode}
pagination={!left}
/>
</div>
);
default:
return (

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

@ -25,15 +25,21 @@ type TriggerProps = {
children: ReactNode;
asChild?: boolean;
disable?: boolean;
className?: string;
};
const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="flex h-full w-full flex-col">{children}</div>;
};
const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
const Trigger: React.FC<TriggerProps> = ({
children,
asChild,
disable,
className,
}) => {
return (
<DialogTrigger
className={asChild ? "" : "w-full"}
className={asChild ? "" : cn("w-full", className)}
hidden={children ? false : true}
disabled={disable}
asChild={asChild}
@ -113,7 +119,7 @@ function BaseModal({
switch (size) {
case "x-small":
minWidth = "min-w-[20vw]";
height = " ";
height = "h-full";
break;
case "smaller":
minWidth = "min-w-[40vw]";
@ -129,6 +135,7 @@ function BaseModal({
break;
case "small-h-full":
minWidth = "min-w-[40vw]";
height = "h-full";
break;
case "medium":
minWidth = "min-w-[60vw]";
@ -136,6 +143,8 @@ function BaseModal({
break;
case "medium-h-full":
minWidth = "min-w-[60vw]";
height = "h-full";
break;
case "large":
minWidth = "min-w-[85vw]";
@ -162,6 +171,7 @@ function BaseModal({
case "large-h-full":
minWidth = "min-w-[80vw]";
height = "h-full";
break;
default:
minWidth = "min-w-[80vw]";
@ -186,7 +196,7 @@ function BaseModal({
{headerChild}
</div>
<div
className={`flex flex-col ${height!} w-full transition-all duration-300`}
className={`flex flex-col ${height} w-full transition-all duration-300`}
>
{ContentChild}
</div>
@ -203,7 +213,7 @@ function BaseModal({
{headerChild}
</div>
<div
className={`flex flex-col ${height!} w-full transition-all duration-300`}
className={`flex flex-col ${height} w-full transition-all duration-300`}
>
{ContentChild}
</div>

11
src/frontend/src/modals/deleteConfirmationModal/index.tsx
View file

@ -17,6 +17,7 @@ export default function DeleteConfirmationModal({
asChild,
open,
setOpen,
note = "",
}: {
children: JSX.Element;
onConfirm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@ -24,6 +25,7 @@ export default function DeleteConfirmationModal({
asChild?: boolean;
open?: boolean;
setOpen?: (open: boolean) => void;
note?: string;
}) {
return (
<Dialog open={open} onOpenChange={setOpen}>
@ -43,7 +45,14 @@ export default function DeleteConfirmationModal({
</DialogTitle>
</DialogHeader>
<span>
Confirm deletion of {description ?? "component"}?<br></br>
Are you sure you want to delete the selected{" "}
{description ?? "component"}?<br></br>
{note && (
<>
{note}
<br></br>
</>
)}
Note: This action is irreversible.
</span>
<DialogFooter>

44
src/frontend/src/modals/dictAreaModal/index.tsx
View file

@ -18,6 +18,10 @@ export default function DictAreaModal({
children,
onChange,
value,
}: {
children: JSX.Element;
onChange?: (value: Object) => void;
value: Object;
}): JSX.Element {
const [open, setOpen] = useState(false);
const isDark = useDarkStore((state) => state.dark);
@ -29,9 +33,13 @@ export default function DictAreaModal({
return (
<BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header description={CODE_DICT_DIALOG_SUBTITLE}>
<span className="pr-2">Edit Dictionary</span>
<BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
<BaseModal.Header
description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
>
<span className="pr-2">
{onChange ? "Edit Dictionary" : "View Dictionary"}
</span>
<IconComponent
name="BookMarked"
className="h-6 w-6 pl-1 text-primary "
@ -44,7 +52,7 @@ export default function DictAreaModal({
theme="vscode"
dark={isDark}
className={!isDark ? "json-view-white" : "json-view-dark"}
editable
editable={!!onChange}
enableClipboard
onEdit={(edit) => {
ref.current = edit["src"];
@ -54,19 +62,21 @@ export default function DictAreaModal({
}}
src={ref.current}
/>
<div className="flex h-fit w-full justify-end">
<Button
data-testid="save-dict-button"
className="mt-3"
type="submit"
onClick={() => {
onChange(ref.current);
setOpen(false);
}}
>
Save
</Button>
</div>
{onChange && (
<div className="flex h-fit w-full justify-end">
<Button
data-testid="save-dict-button"
className="mt-3"
type="submit"
onClick={() => {
onChange(ref.current);
setOpen(false);
}}
>
Save
</Button>
</div>
)}
</div>
</BaseModal.Content>
</BaseModal>

104
src/frontend/src/modals/flowLogsModal/index.tsx Normal file
View file

@ -0,0 +1,104 @@
import { useEffect, useState } from "react";
import IconComponent from "../../components/genericIconComponent";
import { Tabs, TabsList, TabsTrigger } from "../../components/ui/tabs";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { FlowSettingsPropsType } from "../../types/components";
import { FlowType } from "../../types/flow";
import BaseModal from "../baseModal";
import TableComponent from "../../components/tableComponent";
import { getMessagesTable, getTransactionTable } from "../../controllers/API";
import {
ColDef,
ColGroupDef,
SizeColumnsToFitGridStrategy,
} from "ag-grid-community";
export default function FlowLogsModal({
open,
setOpen,
}: FlowSettingsPropsType): JSX.Element {
const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
const flows = useFlowsManagerStore((state) => state.flows);
useEffect(() => {
setName(currentFlow!.name);
setDescription(currentFlow!.description);
}, [currentFlow!.name, currentFlow!.description, open]);
const [name, setName] = useState(currentFlow!.name);
const [description, setDescription] = useState(currentFlow!.description);
const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
const [rows, setRows] = useState<any>([]);
const [activeTab, setActiveTab] = useState("Executions");
function handleClick(): void {
currentFlow!.name = name;
currentFlow!.description = description;
saveFlow(currentFlow!);
setOpen(false);
}
useEffect(() => {
if (activeTab === "Executions") {
getTransactionTable(currentFlowId, "union").then((data) => {
const { columns, rows } = data;
setColumns(columns.map((col) => ({ ...col, editable: true })));
setRows(rows);
});
} else if (activeTab === "Messages") {
getMessagesTable(currentFlowId, "union").then((data) => {
const { columns, rows } = data;
setColumns(columns.map((col) => ({ ...col, editable: true })));
setRows(rows);
});
}
}, [open, activeTab]);
const [nameLists, setNameList] = useState<string[]>([]);
useEffect(() => {
const tempNameList: string[] = [];
flows.forEach((flow: FlowType) => {
if ((flow.is_component ?? false) === false) tempNameList.push(flow.name);
});
setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
}, [flows]);
return (
<BaseModal open={open} setOpen={setOpen} size="large">
<BaseModal.Header description="Inspect component executions and monitor sent messages in the playground.">
<div className="flex w-full justify-between">
<div className="flex h-fit w-32 items-center">
<span className="pr-2">Logs</span>
<IconComponent name="ScrollText" className="mr-2 h-4 w-4 " />
</div>
<div className="flex h-fit w-32 items-center"></div>
</div>
</BaseModal.Header>
<BaseModal.Content>
<Tabs
value={activeTab}
onValueChange={setActiveTab}
className={
"text-center; inset-0 m-0 mb-2 flex flex-col self-center overflow-hidden rounded-md border bg-muted pb-1"
}
>
<TabsList>
<TabsTrigger value={"Executions"}>Executions</TabsTrigger>
<TabsTrigger value={"Messages"}>Messages</TabsTrigger>
</TabsList>
</Tabs>
<TableComponent
readOnlyEdit
className="h-max-full h-full w-full"
pagination={rows.length === 0 ? false : true}
columnDefs={columns}
autoSizeStrategy={{ type: "fitGridWidth" }}
rowData={rows}
headerHeight={rows.length === 0 ? 0 : undefined}
></TableComponent>
</BaseModal.Content>
</BaseModal>
);
}

148
src/frontend/src/modals/foldersModal/component/index.tsx Normal file
View file

@ -0,0 +1,148 @@
import { useEffect, useState } from "react";
import InputComponent from "../../../components/inputComponent";
import {
FormControl,
FormField,
FormItem,
FormMessage,
} from "../../../components/ui/form";
import { Input } from "../../../components/ui/input";
import { Label } from "../../../components/ui/label";
import { Textarea } from "../../../components/ui/textarea";
import useFlowsManagerStore from "../../../stores/flowsManagerStore";
type FolderFormsProps = {
control: any;
setValue: any;
folderToEdit: any;
};
export const FolderForms = ({
control,
setValue,
folderToEdit,
}: FolderFormsProps): JSX.Element => {
const flows = useFlowsManagerStore((state) => state.flows);
const [selectedComponents, setSelectedComponents] = useState<string[]>([]);
const [selectedFlows, setSelectedFlows] = useState<string[]>([]);
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const componentsList = flows
.filter((flow) => flow.is_component && flow.folder_id !== null)
.map((flow) => ({ id: flow.id, name: flow.name }));
const flowsList = flows
.filter((flow) => !flow.is_component && flow.folder_id !== null)
.map((flow) => ({ id: flow.id, name: flow.name }));
const componentsOnFolder = allFlows
.filter((flow) => flow.is_component && flow.folder_id === folderToEdit?.id)
.map((flow) => flow.id);
const flowsOnFolder = allFlows
.filter((flow) => !flow.is_component && flow.folder_id === folderToEdit?.id)
.map((flow) => flow.id);
useEffect(() => {
setValue("components", selectedComponents);
setValue("flows", selectedFlows);
}, [selectedComponents, selectedFlows]);
useEffect(() => {
if (folderToEdit) {
setValue("name", folderToEdit.name);
setValue("description", folderToEdit.description);
setSelectedComponents(componentsOnFolder);
setSelectedFlows(flowsOnFolder);
return;
}
setValue("name", "");
setValue("description", "");
setSelectedComponents([]);
setSelectedFlows([]);
}, [folderToEdit]);
return (
<>
<div className="flex h-full w-full flex-col gap-4 align-middle">
<Label>Folder Name</Label>
<FormField
control={control}
name="name"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
value={field.value}
onChange={field.onChange}
placeholder="Insert a name for the folder..."
></Input>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Label>Description (optional) </Label>
<FormField
control={control}
name="description"
render={({ field }) => (
<FormControl>
<Textarea
value={field.value}
onChange={field.onChange}
placeholder="Insert a description for the folder..."
></Textarea>
</FormControl>
)}
/>
{/*
<Label>Add Flows</Label>
<FormField
control={control}
name="flows"
render={() => (
<FormControl>
<InputComponent
isObjectOption
password={false}
objectOptions={flowsList}
placeholder="Choose a flow to add..."
id="input-flow"
setSelectedOptions={(value: any) => setSelectedFlows(value)}
selectedOptions={selectedFlows}
></InputComponent>
</FormControl>
)}
/>
<Label>Add Components</Label>
<FormField
control={control}
name="components"
render={() => (
<FormControl>
<InputComponent
isObjectOption
password={false}
objectOptions={componentsList}
placeholder="Choose a component to add..."
id="input-component"
setSelectedOptions={(value) => setSelectedComponents(value)}
selectedOptions={selectedComponents}
></InputComponent>
</FormControl>
)}
/> */}
</div>
</>
);
};
export default FolderForms;

10
src/frontend/src/modals/foldersModal/entities/index.ts Normal file
View file

@ -0,0 +1,10 @@
import { z } from "zod";
export const FolderFormsSchema = z.object({
name: z.string().min(1, {
message: "Name must be at least 1 characters.",
}),
description: z.string().optional(),
components: z.array(z.string()),
flows: z.array(z.string()),
});

60
src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx Normal file
View file

@ -0,0 +1,60 @@
import { useNavigate } from "react-router-dom";
import { addFolder, updateFolder } from "../../../pages/MainPage/services";
import useAlertStore from "../../../stores/alertStore";
import { useFolderStore } from "../../../stores/foldersStore";
const useFolderSubmit = (setOpen, folderToEdit) => {
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
const navigate = useNavigate();
const onSubmit = (data) => {
if (folderToEdit) {
updateFolder(data, folderToEdit?.id!).then(
() => {
setSuccessData({
title: "Folder updated successfully.",
});
getFoldersApi(true);
setOpen(false);
navigate(`all/folder/${folderToEdit.id}`, {
state: { folderId: folderToEdit.id },
});
},
//TODO: LOOK THIS ERRO MORE CAREFULLY
(reason) => {
if (reason) {
setErrorData({
title: `Error updating folder.`,
});
console.error(reason);
} else {
getFoldersApi(true);
setOpen(false);
}
},
);
} else {
addFolder(data).then(
(res) => {
setSuccessData({
title: "Folder created successfully.",
});
getFoldersApi(true);
setOpen(false);
navigate(`all/folder/${res.id}`, { state: { folderId: res.id } });
},
() => {
setErrorData({
title: `Error creating folder.`,
});
},
);
}
};
return { onSubmit, open, setOpen };
};
export default useFolderSubmit;

79
src/frontend/src/modals/foldersModal/index.tsx Normal file
View file

@ -0,0 +1,79 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import ForwardedIconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Form } from "../../components/ui/form";
import { useFolderStore } from "../../stores/foldersStore";
import BaseModal from "../baseModal";
import FolderForms from "./component";
import { FolderFormsSchema } from "./entities";
import useFolderSubmit from "./hooks/submit-folder";
type FoldersModalProps = {
open: boolean;
setOpen: (open: boolean) => void;
};
export default function FoldersModal({
open,
setOpen,
}: FoldersModalProps): JSX.Element {
const form = useForm<z.infer<typeof FolderFormsSchema>>({
resolver: zodResolver(FolderFormsSchema),
defaultValues: {
name: "",
description: "",
components: [],
flows: [],
},
mode: "all",
});
const folderToEdit = useFolderStore((state) => state.folderToEdit);
const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
const onSubmit = (data) => {
onSubmitFolder(data);
};
return (
<>
<BaseModal size="x-small" open={open} setOpen={setOpen}>
<BaseModal.Header
description={`${folderToEdit ? "Edit a folder" : "Add a new folder"}`}
>
<span className="pr-2" data-testid="modal-title">
{folderToEdit ? "Edit" : "New"} Folder
</span>
<ForwardedIconComponent
name={folderToEdit ? "Pencil" : "Plus"}
className="h-6 w-6 pl-1 text-primary "
aria-hidden="true"
/>
</BaseModal.Header>
<BaseModal.Content>
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<FolderForms
folderToEdit={folderToEdit}
control={form.control}
setValue={form.setValue}
/>
<Button
className="float-right mt-6"
type="submit"
disabled={!form.formState.isValid}
>
{folderToEdit ? "Edit" : "Save"} Folder
</Button>
</form>
</Form>
</div>
</BaseModal.Content>
</BaseModal>
</>
);
}

10
src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx
View file

@ -1,4 +1,4 @@
import { useNavigate } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import {
Card,
CardContent,
@ -6,15 +6,21 @@ import {
CardTitle,
} from "../../../../components/ui/card";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../../stores/foldersStore";
export default function NewFlowCardComponent() {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();
const location = useLocation();
const folderId = location?.state?.folderId;
const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
return (
<Card
onClick={() => {
addFlow(true).then((id) => {
navigate("/flow/" + id);
setFolderUrl(folderId ?? "");
navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
});
}}
className="h-64 w-80 cursor-pointer bg-background pt-4"

9
src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
View file

@ -1,4 +1,4 @@
import { useNavigate } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
/// <reference types="vite-plugin-svgr/client" />
//@ts-ignore
import { ReactComponent as TransferFiles } from "../../../../assets/undraw_transfer_files_re_a2a9.svg";
@ -22,6 +22,7 @@ import {
CardTitle,
} from "../../../../components/ui/card";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../../stores/foldersStore";
import { UndrawCardComponentProps } from "../../../../types/components";
import { updateIds } from "../../../../utils/reactflowUtils";
@ -30,6 +31,9 @@ export default function UndrawCardComponent({
}: UndrawCardComponentProps): JSX.Element {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();
const location = useLocation();
const folderId = location?.state?.folderId;
const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
function selectImage() {
switch (flow.name) {
@ -111,7 +115,8 @@ export default function UndrawCardComponent({
onClick={() => {
updateIds(flow.data!);
addFlow(true, flow).then((id) => {
navigate("/flow/" + id);
setFolderUrl(folderId ?? "");
navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
});
}}
className="h-64 w-80 cursor-pointer bg-background pt-4"

21
src/frontend/src/modals/newFlowModal/index.tsx
View file

@ -10,7 +10,7 @@ export default function NewFlowModal({
}: newFlowModalPropsType): JSX.Element {
const examples = useFlowsManagerStore((state) => state.examples);
examples.forEach((example) => {
examples?.forEach((example) => {
if (example.name === "Blog Writter") {
example.name = "Blog Writer";
}
@ -22,24 +22,17 @@ export default function NewFlowModal({
<span className="pr-2" data-testid="modal-title">
Get Started
</span>
{/* <IconComponent
name="Group"
className="h-6 w-6 stroke-2 text-primary "
aria-hidden="true"
/> */}
</BaseModal.Header>
<BaseModal.Content>
<div className=" mb-5 grid h-fit w-full grid-cols-3 gap-4 overflow-auto pb-6 custom-scroll">
<NewFlowCardComponent />
{/* {examples.map((example, idx) => {
return <UndrawCardComponent key={idx} flow={example} />;
})} */}
{examples.find((e) => e.name == "Basic Prompting (Hello, World)") && (
<UndrawCardComponent
key={1}
key={0}
flow={
examples.find(
(e) => e.name == "Basic Prompting (Hello, World)"
(e) => e.name == "Basic Prompting (Hello, World)",
)!
}
/>
@ -52,19 +45,19 @@ export default function NewFlowModal({
)}
{examples.find((e) => e.name == "Document QA") && (
<UndrawCardComponent
key={1}
key={2}
flow={examples.find((e) => e.name == "Document QA")!}
/>
)}
{examples.find((e) => e.name == "Blog Writer") && (
<UndrawCardComponent
key={1}
key={3}
flow={examples.find((e) => e.name == "Blog Writer")!}
/>
)}
{examples.find((e) => e.name == "Vector Store RAG") && (
<UndrawCardComponent
key={1}
key={4}
flow={examples.find((e) => e.name == "Vector Store RAG")!}
/>
)}

207
src/frontend/src/pages/MainPage/components/components/index.tsx
View file

@ -1,207 +0,0 @@
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import CollectionCardComponent from "../../../../components/cardComponent";
import CardsWrapComponent from "../../../../components/cardsWrapComponent";
import IconComponent from "../../../../components/genericIconComponent";
import PaginatorComponent from "../../../../components/paginatorComponent";
import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
import { Button } from "../../../../components/ui/button";
import {
CONSOLE_ERROR_MSG,
UPLOAD_ALERT_LIST,
WRONG_FILE_ERROR_ALERT,
} from "../../../../constants/alerts_constants";
import useAlertStore from "../../../../stores/alertStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { FlowType } from "../../../../types/flow";
export default function ComponentsComponent({
is_component = true,
}: {
is_component?: boolean;
}) {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
const isLoading = useFlowsManagerStore((state) => state.isLoading);
const flows = useFlowsManagerStore((state) => state.flows);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const [pageSize, setPageSize] = useState(20);
const [pageIndex, setPageIndex] = useState(1);
const navigate = useNavigate();
const all: FlowType[] = flows
.filter((f) => (f.is_component ?? false) === is_component)
.sort((a, b) => {
if (a?.updated_at && b?.updated_at) {
return (
new Date(b?.updated_at!).getTime() -
new Date(a?.updated_at!).getTime()
);
} else if (a?.updated_at && !b?.updated_at) {
return 1;
} else if (!a?.updated_at && b?.updated_at) {
return -1;
} else {
return (
new Date(b?.date_created!).getTime() -
new Date(a?.date_created!).getTime()
);
}
});
const start = (pageIndex - 1) * pageSize;
const end = start + pageSize;
const data: FlowType[] = all.slice(start, end);
const name = is_component ? "Component" : "Flow";
const onFileDrop = (e) => {
e.preventDefault();
if (e.dataTransfer.types.some((types) => types === "Files")) {
if (e.dataTransfer.files.item(0).type === "application/json") {
uploadFlow({
newProject: true,
file: e.dataTransfer.files.item(0)!,
isComponent: is_component,
})
.then(() => {
setSuccessData({
title: `${
is_component ? "Component" : "Flow"
} uploaded successfully`,
});
})
.catch((error) => {
setErrorData({
title: CONSOLE_ERROR_MSG,
list: [error],
});
});
} else {
setErrorData({
title: WRONG_FILE_ERROR_ALERT,
list: [UPLOAD_ALERT_LIST],
});
}
}
};
function resetFilter() {
setPageIndex(1);
setPageSize(20);
}
return (
<CardsWrapComponent
onFileDrop={onFileDrop}
dragMessage={`Drag your ${name} here`}
>
<div className="flex h-full w-full flex-col justify-between">
<div className="flex w-full flex-col gap-4">
{!isLoading && data.length === 0 ? (
<div className="mt-6 flex w-full items-center justify-center text-center">
<div className="flex-max-width h-full flex-col">
<div className="flex w-full flex-col gap-4">
<div className="grid w-full gap-4">
Flows and components can be created using Langflow.
</div>
<div className="align-center flex w-full justify-center gap-1">
<span>New?</span>
<span className="transition-colors hover:text-muted-foreground">
<button
onClick={() => {
addFlow(true).then((id) => {
navigate("/flow/" + id);
});
}}
className="underline"
>
Start Here
</button>
.
</span>
<span className="animate-pulse">🚀</span>
</div>
</div>
</div>
</div>
) : (
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
{isLoading === false && data?.length > 0 ? (
data?.map((item, idx) => (
<CollectionCardComponent
onDelete={() => {
removeFlow(item.id);
setSuccessData({
title: `${
item.is_component ? "Component" : "Flow"
} deleted successfully!`,
});
resetFilter();
}}
key={idx}
data={{ is_component: item.is_component ?? false, ...item }}
disabled={isLoading}
data-testid={"edit-flow-button-" + item.id + "-" + idx}
button={
!is_component ? (
<Link to={"/flow/" + item.id}>
<Button
tabIndex={-1}
variant="outline"
size="sm"
className="whitespace-nowrap "
data-testid={
"edit-flow-button-" + item.id + "-" + idx
}
>
<IconComponent
name="ExternalLink"
className="main-page-nav-button select-none"
/>
Edit Flow
</Button>
</Link>
) : (
<></>
)
}
onClick={
!is_component
? () => {
navigate("/flow/" + item.id);
}
: undefined
}
playground={!is_component}
/>
))
) : (
<>
<SkeletonCardComponent />
<SkeletonCardComponent />
</>
)}
</div>
)}
</div>
{!isLoading && data.length > 0 && (
<div className="relative py-6">
<PaginatorComponent
storeComponent={true}
pageIndex={pageIndex}
pageSize={pageSize}
rowsCount={[10, 20, 50, 100]}
totalRowsCount={
flows.filter((f) => (f.is_component ?? false) === is_component)
.length
}
paginate={(pageSize, pageIndex) => {
setPageIndex(pageIndex);
setPageSize(pageSize);
}}
></PaginatorComponent>
</div>
)}
</div>
</CardsWrapComponent>
);
}

303
src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx Normal file
View file

@ -0,0 +1,303 @@
import { cloneDeep } from "lodash";
import { useEffect, useMemo, useState } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
import { Link, useLocation, useNavigate } from "react-router-dom";
import CollectionCardComponent from "../../../../components/cardComponent";
import CardsWrapComponent from "../../../../components/cardsWrapComponent";
import IconComponent from "../../../../components/genericIconComponent";
import PaginatorComponent from "../../../../components/paginatorComponent";
import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
import { Button } from "../../../../components/ui/button";
import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
import useAlertStore from "../../../../stores/alertStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../../stores/foldersStore";
import { FlowType } from "../../../../types/flow";
import useFileDrop from "../../hooks/use-on-file-drop";
import { getNameByType } from "../../utils/get-name-by-type";
import { sortFlows } from "../../utils/sort-flows";
import EmptyComponent from "../emptyComponent";
import HeaderComponent from "../headerComponent";
export default function ComponentsComponent({
type = "all",
}: {
type?: string;
}) {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
const isLoading = useFlowsManagerStore((state) => state.isLoading);
const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const flowsFromFolder = useFolderStore(
(state) => state.selectedFolder?.flows,
);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const [openDelete, setOpenDelete] = useState(false);
const searchFlowsComponents = useFlowsManagerStore(
(state) => state.searchFlowsComponents,
);
const setSelectedFlowsComponentsCards = useFlowsManagerStore(
(state) => state.setSelectedFlowsComponentsCards,
);
const selectedFlowsComponentsCards = useFlowsManagerStore(
(state) => state.selectedFlowsComponentsCards,
);
const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
const [pageSize, setPageSize] = useState(20);
const [pageIndex, setPageIndex] = useState(1);
const navigate = useNavigate();
const location = useLocation();
const all: FlowType[] = sortFlows(allFlows, type);
const start = (pageIndex - 1) * pageSize;
const end = start + pageSize;
const data: FlowType[] = all?.slice(start, end);
const name = getNameByType(type);
const folderId = location?.state?.folderId;
const getFolderById = useFolderStore((state) => state.getFolderById);
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
useEffect(() => {
setFolderUrl(folderId ?? "");
setSelectedFlowsComponentsCards([]);
handleSelectAll(false);
getFolderById(folderId ? folderId : myCollectionId);
}, [location]);
useEffect(() => {
const newFlows = cloneDeep(flowsFromFolder!);
const filteredFlows = newFlows?.filter(
(f) =>
f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
f.description
.toLowerCase()
.includes(searchFlowsComponents.toLowerCase()),
);
if (searchFlowsComponents === "") {
setAllFlows(flowsFromFolder!);
}
setAllFlows(filteredFlows);
}, [searchFlowsComponents]);
const resetFilter = () => {
setPageIndex(1);
setPageSize(20);
};
const { getValues, control, setValue } = useForm();
const entireFormValues = useWatch({ control });
const methods = useForm();
const handleSelectAll = (select) => {
const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
if (select) {
Object.keys(getValues()).forEach((key) => {
if (!flowsFromFolderIds?.includes(key)) return;
setValue(key, true);
});
return;
}
Object.keys(getValues()).forEach((key) => {
setValue(key, false);
});
};
const handleSelectOptionsChange = () => {
const hasSelected = selectedFlowsComponentsCards?.length > 0;
if (!hasSelected) {
setErrorData({
title: "No items selected",
list: ["Please select items to delete"],
});
return;
}
setOpenDelete(true);
};
const handleDeleteMultiple = () => {
removeFlow(selectedFlowsComponentsCards)
.then(() => {
resetFilter();
getFoldersApi(true);
if (!folderId || folderId === myCollectionId) {
getFolderById(folderId ? folderId : myCollectionId);
}
setSuccessData({
title: "Selected items deleted successfully!",
});
})
.catch(() => {
setErrorData({
title: "Error deleting items",
list: ["Please try again"],
});
});
};
useEffect(() => {
if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
const selectedFlows: string[] = Object.keys(entireFormValues).filter(
(key) => {
if (entireFormValues[key] === true) {
return true;
}
return false;
},
);
setSelectedFlowsComponentsCards(selectedFlows);
}, [entireFormValues]);
const getDescriptionModal = useMemo(() => {
const getTypeLabel = (type) => {
const labels = {
all: "item",
component: "component",
flow: "flow",
};
return labels[type] || "";
};
const getPluralizedLabel = (type) => {
const labels = {
all: "items",
component: "components",
flow: "flows",
};
return labels[type] || "";
};
if (selectedFlowsComponentsCards?.length === 1) {
return getTypeLabel(type);
}
return getPluralizedLabel(type);
}, [selectedFlowsComponentsCards, type]);
const getTotalRowsCount = () => {
if (type === "all") return allFlows?.length;
return allFlows?.filter(
(f) => (f.is_component ?? false) === (type === "component"),
)?.length;
};
return (
<>
{allFlows?.length > 0 && (
<HeaderComponent
handleDelete={handleSelectOptionsChange}
handleSelectAll={handleSelectAll}
disableDelete={!(selectedFlowsComponentsCards?.length > 0)}
/>
)}
<CardsWrapComponent
onFileDrop={handleFileDrop}
dragMessage={`Drag your ${name} here`}
>
<div className="flex h-full w-full flex-col justify-between">
<div className="flex w-full flex-col gap-4">
{!isLoading && data?.length === 0 ? (
<EmptyComponent />
) : (
<div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
{isLoading === false && data?.length > 0 ? (
<>
{data?.map((item) => (
<FormProvider {...methods} key={item.id}>
<form>
<CollectionCardComponent
is_component={type === "component"}
data={{
is_component: item.is_component ?? false,
...item,
}}
disabled={isLoading}
data-testid={"edit-flow-button-" + item.id}
button={
!item.is_component ? (
<Link to={"/flow/" + item.id}>
<Button
tabIndex={-1}
variant="outline"
size="sm"
className="whitespace-nowrap"
data-testid={"edit-flow-button-" + item.id}
>
<IconComponent
name="ExternalLink"
className="main-page-nav-button select-none"
/>
Edit Flow
</Button>
</Link>
) : (
<></>
)
}
onClick={
!item.is_component
? () => {
navigate("/flow/" + item.id);
}
: undefined
}
playground={!item.is_component}
control={control}
/>
</form>
</FormProvider>
))}
</>
) : (
<>
<SkeletonCardComponent />
<SkeletonCardComponent />
</>
)}
</div>
)}
</div>
{!isLoading && data?.length > 0 && (
<div className="relative py-6">
<PaginatorComponent
storeComponent={true}
pageIndex={pageIndex}
pageSize={pageSize}
rowsCount={[10, 20, 50, 100]}
totalRowsCount={getTotalRowsCount()}
paginate={(pageSize, pageIndex) => {
setPageIndex(pageIndex);
setPageSize(pageSize);
}}
></PaginatorComponent>
</div>
)}
</div>
</CardsWrapComponent>
{openDelete && (
<DeleteConfirmationModal
open={openDelete}
setOpen={setOpenDelete}
onConfirm={handleDeleteMultiple}
description={getDescriptionModal}
>
<></>
</DeleteConfirmationModal>
)}
</>
);
}

41
src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx Normal file
View file

@ -0,0 +1,41 @@
import { useNavigate } from "react-router-dom";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
type EmptyComponentProps = {};
const EmptyComponent = ({}: EmptyComponentProps) => {
const addFlow = useFlowsManagerStore((state) => state.addFlow);
const navigate = useNavigate();
return (
<>
<div className="mt-6 flex w-full items-center justify-center text-center">
<div className="flex-max-width h-full flex-col">
<div className="flex w-full flex-col gap-4">
<div className="grid w-full gap-4 text-muted-foreground">
Flows and components can be created using Langflow.
</div>
<div className="align-center flex w-full justify-center gap-1 ">
<span className="text-muted-foreground">New?</span>
<span className="transition-colors hover:text-muted-foreground">
<button
onClick={() => {
addFlow(true).then((id) => {
navigate("/flow/" + id);
});
}}
className="underline"
>
Start Here
</button>
.
</span>
<span className="animate-pulse">🚀</span>
</div>
</div>
</div>
</div>
</>
);
};
export default EmptyComponent;

85
src/frontend/src/pages/MainPage/components/headerComponent/index.tsx Normal file
View file

@ -0,0 +1,85 @@
import { useState } from "react";
import IconComponent from "../../../../components/genericIconComponent";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "../../../../components/ui/select";
import { Checkbox } from "../../../../components/ui/checkbox";
import { Button } from "../../../../components/ui/button";
import { cn } from "../../../../utils/utils";
import ShadTooltip from "../../../../components/shadTooltipComponent";
type HeaderComponentProps = {
handleSelectAll: (select) => void;
handleDelete: () => void;
disableDelete: boolean;
};
const HeaderComponent = ({
handleSelectAll,
handleDelete,
disableDelete,
}: HeaderComponentProps) => {
const [shouldSelectAll, setShouldSelectAll] = useState(true);
const handleClick = () => {
handleSelectAll(shouldSelectAll);
setShouldSelectAll((prevState) => !prevState);
};
return (
<>
<div className="grid grid-cols-3 pb-5">
<div className="col-auto grid-cols-1 self-center justify-self-start">
<a onClick={handleClick} className="text-sm">
<div className="header-menu-bar-display ">
<div
className="header-menu-flow-name"
data-testid="select_all_collection"
>
<div className="flex items-center space-x-2">
<Checkbox checked={!shouldSelectAll} id="terms" />
<label
onClick={handleClick}
htmlFor="terms"
className="label cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{shouldSelectAll ? "Select All" : "Unselect All"}
</label>
</div>
</div>
</div>
</a>
</div>
<div className="col-span-2 grid-cols-1 justify-self-end">
<div>
<ShadTooltip
content={
disableDelete ? (
<span>Select items to delete</span>
) : (
<span>Delete selected items</span>
)
}
>
<button onClick={handleDelete} disabled={disableDelete}>
<IconComponent
name="Trash2"
className={cn(
"h-5 w-5 text-primary transition-all",
disableDelete ? "" : "hover:text-destructive",
)}
/>
</button>
</ShadTooltip>
</div>
</div>
</div>
</>
);
};
export default HeaderComponent;

58
src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx Normal file
View file

@ -0,0 +1,58 @@
// Modals.tsx
import IconComponent from "../../../../components/genericIconComponent";
import { Button } from "../../../../components/ui/button";
import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
import FoldersModal from "../../../../modals/foldersModal";
import NewFlowModal from "../../../../modals/newFlowModal";
import { cn } from "../../../../utils/utils";
interface ModalsProps {
openModal: boolean;
setOpenModal: (value: boolean) => void;
openFolderModal: boolean;
setOpenFolderModal: (value: boolean) => void;
openDeleteFolderModal: boolean;
setOpenDeleteFolderModal: (value: boolean) => void;
handleDeleteFolder: () => void;
}
const ModalsComponent = ({
openModal,
setOpenModal,
openFolderModal,
setOpenFolderModal,
openDeleteFolderModal,
setOpenDeleteFolderModal,
handleDeleteFolder,
}: ModalsProps) => (
<>
{openModal && <NewFlowModal open={openModal} setOpen={setOpenModal} />}
{openFolderModal && (
<FoldersModal open={openFolderModal} setOpen={setOpenFolderModal} />
)}
{openDeleteFolderModal && (
<DeleteConfirmationModal
open={openDeleteFolderModal}
setOpen={setOpenDeleteFolderModal}
onConfirm={() => {
handleDeleteFolder();
setOpenDeleteFolderModal(false);
}}
description="folder"
note={
"Deleting the selected folder will remove all associated flows and components."
}
>
<Button variant="ghost" size="icon" className={"whitespace-nowrap"}>
<IconComponent
data-testid={`delete-folder`}
name="Trash2"
className={cn("h-5 w-5")}
/>
</Button>
</DeleteConfirmationModal>
)}
</>
);
export default ModalsComponent;

49
src/frontend/src/pages/MainPage/components/myCollectionComponent/components/headerTabsSearchComponent/index.tsx Normal file
View file

@ -0,0 +1,49 @@
import { useState } from "react";
import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
import InputSearchComponent from "../inputSearchComponent";
import TabsSearchComponent from "../tabsComponent";
import { Button } from "../../../../../../components/ui/button";
import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
import useAlertStore from "../../../../../../stores/alertStore";
import { handleDownloadFolderFn } from "../../../../utils/handle-download-folder";
import { useFolderStore } from "../../../../../../stores/foldersStore";
import { useLocation } from "react-router-dom";
type HeaderTabsSearchComponentProps = {};
const HeaderTabsSearchComponent = ({}: HeaderTabsSearchComponentProps) => {
const location = useLocation();
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const folderId = location?.state?.folderId || myCollectionId;
const isLoading = useFlowsManagerStore((state) => state.isLoading);
const [tabActive, setTabActive] = useState("Flows");
const setErrorData = useAlertStore((state) => state.setErrorData);
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const handleDownloadFolder = () => {
if (allFlows.length === 0) {
setErrorData({
title: "Folder is empty",
list: [],
});
return;
}
handleDownloadFolderFn(folderId);
};
return (
<>
<div className="relative flex items-end gap-4">
<InputSearchComponent loading={isLoading} />
<TabsSearchComponent
tabsOptions={["All", "Flows", "Components"]}
setActiveTab={setTabActive}
loading={isLoading}
tabActive={tabActive}
/>
</div>
</>
);
};
export default HeaderTabsSearchComponent;

72
src/frontend/src/pages/MainPage/components/myCollectionComponent/components/inputSearchComponent/index.tsx Normal file
View file

@ -0,0 +1,72 @@
import { useState } from "react";
import { Input } from "../../../../../../components/ui/input";
import useFlowsManagerStore from "../../../../../../stores/flowsManagerStore";
import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
type InputSearchComponentProps = {
loading: boolean;
};
const InputSearchComponent = ({ loading }: InputSearchComponentProps) => {
const pagePath = window.location.pathname;
const [inputValue, setInputValue] = useState("");
const allFlows = useFlowsManagerStore((state) => state.allFlows);
const setSearchFlowsComponents = useFlowsManagerStore(
(state) => state.setSearchFlowsComponents,
);
const searchFlowsComponents = useFlowsManagerStore(
(state) => state.searchFlowsComponents,
);
const disableInputSearch =
loading ||
!allFlows ||
(allFlows?.length === 0 && searchFlowsComponents === "");
const getSearchPlaceholder = () => {
if (pagePath.includes("flows")) {
return "Search Flows";
} else if (pagePath.includes("components")) {
return "Search Components";
} else {
return "Search Flows and Components";
}
};
return (
<>
<div className="relative h-12 w-[60%]">
<Input
data-testid="search-store-input"
disabled={disableInputSearch}
placeholder={getSearchPlaceholder()}
className="absolute h-12 pl-5 pr-12"
onChange={(e) => {
setSearchFlowsComponents(e.target.value);
setInputValue(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
setSearchFlowsComponents(inputValue);
}
}}
value={inputValue}
/>
<button
disabled={loading}
className="absolute bottom-0 right-4 top-0 my-auto h-6 cursor-pointer stroke-1 text-muted-foreground"
data-testid="search-store-button"
>
<ForwardedIconComponent
name={loading ? "Loader2" : "Search"}
className={loading ? " animate-spin cursor-not-allowed" : ""}
/>
</button>
</div>
</>
);
};
export default InputSearchComponent;

77
src/frontend/src/pages/MainPage/components/myCollectionComponent/components/tabsComponent/index.tsx Normal file
View file

@ -0,0 +1,77 @@
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useFolderStore } from "../../../../../../stores/foldersStore";
type TabsSearchComponentProps = {
tabsOptions: string[];
setActiveTab: (tab: string) => void;
loading: boolean;
tabActive: string;
};
const TabsSearchComponent = ({
tabsOptions,
setActiveTab,
loading,
tabActive,
}: TabsSearchComponentProps) => {
const navigate = useNavigate();
const folderUrl = useFolderStore((state) => state.folderUrl);
const changeLocation = (tabOption) => {
const location = window.location.pathname;
let newLocation = "";
switch (tabOption) {
case "Flows":
newLocation = location.replace(/components|all/, "flows");
break;
case "Components":
newLocation = location.replace(/flows|all/, "components");
break;
default:
newLocation = location.replace(/flows|components/, "all");
break;
}
navigate(newLocation, { state: { folderId: folderUrl } });
};
useEffect(() => {
const path = window.location.pathname;
if (path.includes("components")) {
setActiveTab("Components");
} else if (path.includes("flows")) {
setActiveTab("Flows");
} else {
setActiveTab("All");
}
}, [window.location.pathname]);
return (
<>
<div className="ml-4 flex w-full gap-2 border-b border-border">
{tabsOptions.map((tabOption, index) => {
return (
<button
key={index}
data-testid={`${tabOption}-button-store`}
disabled={loading}
onClick={() => {
changeLocation(tabOption);
}}
className={
(tabActive === tabOption
? "border-b-2 border-primary p-3"
: " border-b-2 border-transparent p-3 text-muted-foreground hover:text-primary") +
(loading ? " cursor-not-allowed " : "")
}
>
{tabOption}
</button>
);
})}
</div>
</>
);
};
export default TabsSearchComponent;

19
src/frontend/src/pages/MainPage/components/myCollectionComponent/index.tsx Normal file
View file

@ -0,0 +1,19 @@
import ComponentsComponent from "../componentsComponent";
import HeaderTabsSearchComponent from "./components/headerTabsSearchComponent";
type MyCollectionComponentProps = {
key: string;
type: string;
};
const MyCollectionComponent = ({ key, type }: MyCollectionComponentProps) => {
return (
<>
<HeaderTabsSearchComponent />
<div className="mt-5 flex h-full flex-col">
<ComponentsComponent key={key} type={type} />
</div>
</>
);
};
export default MyCollectionComponent;

26
src/frontend/src/pages/MainPage/entities/index.tsx Normal file
View file

@ -0,0 +1,26 @@
import { FlowType } from "../../../types/flow";
export type FolderType = {
name: string;
description: string;
id?: string | null;
parent_id: string;
flows: FlowType[];
};
export type AddFolderType = {
name: string;
description: string;
id?: string | null;
parent_id: string;
flows?: string[];
components?: string[];
};
export type StarterProjectsType = {
name?: string;
description?: string;
flows?: FlowType[];
id: string;
parent_id: string;
};

32
src/frontend/src/pages/MainPage/hooks/use-delete-folder.tsx Normal file
View file

@ -0,0 +1,32 @@
import useAlertStore from "../../../stores/alertStore";
import { useFolderStore } from "../../../stores/foldersStore";
import { deleteFolder, getFolderById } from "../services";
const useDeleteFolder = ({ navigate, getFoldersApi }) => {
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const folderToEdit = useFolderStore((state) => state.folderToEdit);
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const handleDeleteFolder = () => {
deleteFolder(folderToEdit?.id!)
.then(() => {
setSuccessData({
title: "Folder deleted successfully.",
});
getFolderById(myCollectionId!);
getFoldersApi(true);
navigate("/all");
})
.catch((err) => {
console.error(err);
setErrorData({
title: "Error deleting folder.",
});
});
};
return { handleDeleteFolder };
};
export default useDeleteFolder;

36
src/frontend/src/pages/MainPage/hooks/use-dropdown-options.tsx Normal file
View file

@ -0,0 +1,36 @@
import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
import useAlertStore from "../../../stores/alertStore";
const useDropdownOptions = ({ uploadFlow, navigate, is_component }) => {
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const handleImportFromJSON = () => {
uploadFlow({
newProject: true,
isComponent: is_component,
})
.then((id) => {
setSuccessData({
title: `${is_component ? "Component" : "Flow"} uploaded successfully`,
});
if (!is_component) navigate("/flow/" + id);
})
.catch((error) => {
setErrorData({
title: CONSOLE_ERROR_MSG,
list: [error],
});
});
};
const dropdownOptions = [
{
name: "Import from JSON",
onBtnClick: handleImportFromJSON,
},
];
return [...dropdownOptions];
};
export default useDropdownOptions;

64
src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx Normal file
View file

@ -0,0 +1,64 @@
import { useLocation } from "react-router-dom";
import {
CONSOLE_ERROR_MSG,
UPLOAD_ALERT_LIST,
WRONG_FILE_ERROR_ALERT,
} from "../../../constants/alerts_constants";
import useAlertStore from "../../../stores/alertStore";
import { useFolderStore } from "../../../stores/foldersStore";
const useFileDrop = (uploadFlow, type) => {
const location = useLocation();
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const getFolderById = useFolderStore((state) => state.getFolderById);
const folderId = location?.state?.folderId;
const myCollectionId = useFolderStore((state) => state.myCollectionId);
const handleFileDrop = (e) => {
e.preventDefault();
if (e.dataTransfer.types.some((type) => type === "Files")) {
const file = e.dataTransfer.files.item(0);
if (file.type === "application/json") {
const reader = new FileReader();
reader.onload = (event) => {
const fileContent = event.target!.result;
const fileContentJson = JSON.parse(fileContent as string);
const is_component = fileContentJson.is_component;
uploadFlow({
newProject: true,
file: file,
isComponent: type === "all" ? null : type === "component",
})
.then(() => {
setSuccessData({
title: `${
is_component ? "Component" : "Flow"
} uploaded successfully`,
});
getFolderById(folderId ? folderId : myCollectionId);
})
.catch((error) => {
setErrorData({
title: CONSOLE_ERROR_MSG,
list: [error],
});
});
};
reader.readAsText(file);
} else {
setErrorData({
title: WRONG_FILE_ERROR_ALERT,
list: [UPLOAD_ALERT_LIST],
});
}
}
};
return [handleFileDrop];
};
export default useFileDrop;

121
src/frontend/src/pages/MainPage/index.tsx
View file

@ -1,121 +0,0 @@
import { Group, ToyBrick } from "lucide-react";
import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../components/dropdownButtonComponent";
import IconComponent from "../../components/genericIconComponent";
import PageLayout from "../../components/pageLayout";
import SidebarNav from "../../components/sidebarComponent";
import { Button } from "../../components/ui/button";
import { CONSOLE_ERROR_MSG } from "../../constants/alerts_constants";
import {
MY_COLLECTION_DESC,
USER_PROJECTS_HEADER,
} from "../../constants/constants";
import NewFlowModal from "../../modals/newFlowModal";
import useAlertStore from "../../stores/alertStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { downloadFlows } from "../../utils/reactflowUtils";
export default function HomePage(): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
);
const uploadFlows = useFlowsManagerStore((state) => state.uploadFlows);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
const setErrorData = useAlertStore((state) => state.setErrorData);
const location = useLocation();
const pathname = location.pathname;
const [openModal, setOpenModal] = useState(false);
const is_component = pathname === "/components";
const dropdownOptions = [
{
name: "Import from JSON",
onBtnClick: () => {
uploadFlow({
newProject: true,
isComponent: is_component,
})
.then((id) => {
setSuccessData({
title: `${
is_component ? "Component" : "Flow"
} uploaded successfully`,
});
if (!is_component) navigate("/flow/" + id);
})
.catch((error) => {
setErrorData({
title: CONSOLE_ERROR_MSG,
list: [error],
});
});
},
},
];
const sidebarNavItems = [
{
title: "Flows",
href: "/flows",
icon: <Group className="w-5 stroke-[1.5]" />,
},
{
title: "Components",
href: "/components",
icon: <ToyBrick className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]" />,
},
];
// Set a null id
useEffect(() => {
setCurrentFlowId("");
}, [pathname]);
const navigate = useNavigate();
// Personal flows display
return (
<PageLayout
title={USER_PROJECTS_HEADER}
description={MY_COLLECTION_DESC}
button={
<div className="flex gap-2">
<Button
variant="primary"
onClick={() => {
downloadFlows();
}}
>
<IconComponent name="Download" className="main-page-nav-button" />
Download Collection
</Button>
<Button
variant="primary"
onClick={() => {
uploadFlows();
}}
>
<IconComponent name="Upload" className="main-page-nav-button" />
Upload Collection
</Button>
<DropdownButton
firstButtonName="New Project"
onFirstBtnClick={() => setOpenModal(true)}
options={dropdownOptions}
plusButton={true}
dropdownOptions={false}
/>
</div>
}
>
<div className="flex h-full w-full space-y-8 lg:flex-row lg:space-x-8 lg:space-y-0">
<aside className="flex h-full flex-col space-y-6 lg:w-1/5">
<SidebarNav items={sidebarNavItems} />
</aside>
<div className="h-full w-full flex-1">
<Outlet />
</div>
</div>
<NewFlowModal open={openModal} setOpen={setOpenModal} />
</PageLayout>
);
}

105
src/frontend/src/pages/MainPage/pages/mainPage/index.tsx Normal file
View file

@ -0,0 +1,105 @@
import { useEffect, useState } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import DropdownButton from "../../../../components/dropdownButtonComponent";
import PageLayout from "../../../../components/pageLayout";
import SidebarNav from "../../../../components/sidebarComponent";
import {
MY_COLLECTION_DESC,
USER_PROJECTS_HEADER,
} from "../../../../constants/constants";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../../stores/foldersStore";
import ModalsComponent from "../../components/modalsComponent";
import useDeleteFolder from "../../hooks/use-delete-folder";
import useDropdownOptions from "../../hooks/use-dropdown-options";
export default function HomePage(): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId,
);
const location = useLocation();
const pathname = location.pathname;
const [openModal, setOpenModal] = useState(false);
const [openFolderModal, setOpenFolderModal] = useState(false);
const [openDeleteFolderModal, setOpenDeleteFolderModal] = useState(false);
const is_component = pathname === "/components";
const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
const setFolderToEdit = useFolderStore((state) => state.setFolderToEdit);
const navigate = useNavigate();
useEffect(() => {
setTimeout(() => {
getFoldersApi();
}, 300);
}, []);
useEffect(() => {
setCurrentFlowId("");
}, [pathname]);
const dropdownOptions = useDropdownOptions({
uploadFlow,
navigate,
is_component,
});
const { handleDeleteFolder } = useDeleteFolder({ navigate, getFoldersApi });
return (
<>
<PageLayout
title={USER_PROJECTS_HEADER}
description={MY_COLLECTION_DESC}
button={
<div className="flex gap-2">
<DropdownButton
firstButtonName="New Project"
onFirstBtnClick={() => setOpenModal(true)}
options={dropdownOptions}
plusButton={true}
dropdownOptions={false}
/>
</div>
}
>
<div className="flex h-full w-full space-y-8 md:flex-col lg:flex-row lg:space-x-8 lg:space-y-0">
<aside className="flex h-fit w-fit flex-col space-y-6">
<SidebarNav
handleOpenNewFolderModal={() => {
setFolderToEdit(null);
setOpenFolderModal(true);
}}
items={[]}
handleChangeFolder={(id: string) => {
navigate(`all/folder/${id}`, { state: { folderId: id } });
}}
handleEditFolder={(item) => {
setFolderToEdit(item);
setOpenFolderModal(true);
}}
handleDeleteFolder={(item) => {
setFolderToEdit(item);
setOpenDeleteFolderModal(true);
}}
className="w-[20vw]"
/>
</aside>
<div className="relative h-full w-full flex-1">
<Outlet />
</div>
</div>
</PageLayout>
<ModalsComponent
openModal={openModal}
setOpenModal={setOpenModal}
openFolderModal={openFolderModal}
setOpenFolderModal={setOpenFolderModal}
openDeleteFolderModal={openDeleteFolderModal}
setOpenDeleteFolderModal={setOpenDeleteFolderModal}
handleDeleteFolder={handleDeleteFolder}
/>
</>
);
}

121
src/frontend/src/pages/MainPage/services/index.ts Normal file
View file

@ -0,0 +1,121 @@
import { BASE_URL_API } from "../../../constants/constants";
import { api } from "../../../controllers/API/api";
import { FlowType } from "../../../types/flow";
import { AddFolderType, FolderType, StarterProjectsType } from "../entities";
export async function getFolders(): Promise<FolderType[]> {
try {
const response = await api.get(`${BASE_URL_API}folders/`);
return response?.data;
} catch (error) {
throw error;
}
}
export async function addFolder(data: AddFolderType): Promise<FolderType> {
const body = {
name: data.name,
description: data.description,
flows_list: data.flows ?? [],
components_list: data.components ?? [],
};
try {
const response = await api.post(`${BASE_URL_API}folders/`, body);
return response?.data;
} catch (error) {
throw error;
}
}
export async function updateFolder(
body: FolderType,
folderId: string,
): Promise<FolderType> {
try {
const response = await api.patch(
`${BASE_URL_API}folders/${folderId}`,
body,
);
return response?.data;
} catch (error) {
throw error;
}
}
export async function deleteFolder(folderId: string) {
try {
const response = await api.delete(`${BASE_URL_API}folders/${folderId}`);
return response?.data;
} catch (error) {
throw error;
}
}
export async function getFolderById(folderId: string): Promise<FolderType> {
try {
const response = await api.get(`${BASE_URL_API}folders/${folderId}`);
return response?.data;
} catch (error) {
throw error;
}
}
export async function getStarterProjects(): Promise<StarterProjectsType> {
try {
const response = await api.get(`${BASE_URL_API}folders/starter-projects`);
return response?.data;
} catch (error) {
throw error;
}
}
export async function downloadFlowsFromFolders(folderId: string): Promise<{
flows: FlowType[];
folder_name: string;
folder_description: string;
}> {
try {
const response = await api.get(
`${BASE_URL_API}folders/download/${folderId}`,
);
if (response?.status !== 200) {
throw new Error(`HTTP error! status: ${response?.status}`);
}
console.log(response.data);
return response.data;
} catch (error) {
console.error(error);
throw error;
}
}
export async function uploadFlowsFromFolders(
flows: FormData,
): Promise<FlowType[]> {
try {
const response = await api.post(`${BASE_URL_API}folders/upload/`, flows);
if (response?.status !== 201) {
throw new Error(`HTTP error! status: ${response?.status}`);
}
return response.data;
} catch (error) {
console.error(error);
throw error;
}
}
export async function moveFlowToFolder(
flowId: string,
folderId: string,
): Promise<FlowType> {
try {
const response = await api.patch(
`${BASE_URL_API}folders/move_to_folder/${flowId}/${folderId}`,
);
return response?.data;
} catch (error) {
throw error;
}
}

10
src/frontend/src/pages/MainPage/utils/get-name-by-type.ts Normal file
View file

@ -0,0 +1,10 @@
export const getNameByType = (type: string) => {
switch (type) {
case "all":
return "Component or Flow";
case "component":
return "Component";
default:
return "Flow";
}
};

23
src/frontend/src/pages/MainPage/utils/handle-download-folder.ts Normal file
View file

@ -0,0 +1,23 @@
import { useFolderStore } from "../../../stores/foldersStore";
import { downloadFlowsFromFolders } from "../services";
export function handleDownloadFolderFn(folderId: string) {
downloadFlowsFromFolders(folderId).then((data) => {
const folders = useFolderStore.getState().folders;
const folder = folders.find((f) => f.id === folderId);
data.folder_name = folder?.name || "folder";
data.folder_description = folder?.description || "";
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
JSON.stringify(data),
)}`;
const link = document.createElement("a");
link.href = jsonString;
link.download = `${data.folder_name}.json`;
link.click();
});
}

25
src/frontend/src/pages/MainPage/utils/sort-flows.ts Normal file
View file

@ -0,0 +1,25 @@
export const sortFlows = (flows, type) => {
const isComponent = type === "component";
const sortByDate = (a, b) => {
const dateA = a?.updated_at || a?.date_created;
const dateB = b?.updated_at || b?.date_created;
if (dateA && dateB) {
return new Date(dateB).getTime() - new Date(dateA).getTime();
} else if (dateA) {
return 1;
} else if (dateB) {
return -1;
} else {
return 0;
}
};
const filteredFlows =
type === "all"
? flows
: flows?.filter((f) => (f?.is_component ?? false) === isComponent);
return filteredFlows?.sort(sortByDate) ?? [];
};

33
src/frontend/src/pages/SettingsPage/index.tsx
View file

@ -8,7 +8,7 @@ import useFlowsManagerStore from "../../stores/flowsManagerStore";
export default function SettingsPage(): JSX.Element {
const pathname = location.pathname;
const setCurrentFlowId = useFlowsManagerStore(
(state) => state.setCurrentFlowId
(state) => state.setCurrentFlowId,
);
useEffect(() => {
setCurrentFlowId("");
@ -25,36 +25,7 @@ export default function SettingsPage(): JSX.Element {
/>
),
},
/* {
title: "Theme",
href: "/settings/theme",
icon: (
<ForwardedIconComponent
name="Palette"
className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
/>
),
},
{
title: "Bundles",
href: "/settings/bundles",
icon: (
<ForwardedIconComponent
name="Boxes"
className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
/>
),
},
{
title: "Integrations",
href: "/settings/integrations",
icon: (
<ForwardedIconComponent
name="Blocks"
className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
/>
),
}, */
{
title: "Global Variables",
href: "/settings/global-variables",

2
src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
View file

@ -46,7 +46,7 @@ export default function GlobalVariablesPage() {
name: string;
default_fields: string | undefined;
}[]
>();
>([]);
useEffect(() => {
const rows: Array<{

26
src/frontend/src/routes.tsx
View file

@ -10,8 +10,8 @@ import ApiKeysPage from "./pages/ApiKeysPage";
import DeleteAccountPage from "./pages/DeleteAccountPage";
import FlowPage from "./pages/FlowPage";
import LoginPage from "./pages/LoginPage";
import HomePage from "./pages/MainPage";
import ComponentsComponent from "./pages/MainPage/components/components";
import MyCollectionComponent from "./pages/MainPage/components/myCollectionComponent";
import HomePage from "./pages/MainPage/pages/mainPage";
import PlaygroundPage from "./pages/Playground";
import SettingsPage from "./pages/SettingsPage";
import GeneralPage from "./pages/SettingsPage/pages/GeneralPage";
@ -32,14 +32,18 @@ const Router = () => {
</ProtectedRoute>
}
>
<Route index element={<Navigate replace to={"flows"} />} />
<Route index element={<Navigate replace to={"all"} />} />
<Route
path="flows"
element={<ComponentsComponent key="flows" is_component={false} />}
path="flows/*"
element={<MyCollectionComponent key="flows" type="flow" />}
/>
<Route
path="components"
element={<ComponentsComponent key="components" />}
path="components/*"
element={<MyCollectionComponent key="components" type="component" />}
/>
<Route
path="all/*"
element={<MyCollectionComponent key="all" type="all" />}
/>
</Route>
<Route
@ -89,6 +93,14 @@ const Router = () => {
}
</Route>
<Route path="/flow/:id/">
<Route
path="*"
element={
<ProtectedRoute>
<FlowPage />
</ProtectedRoute>
}
/>
<Route
path=""
element={

158
src/frontend/src/stores/flowsManagerStore.ts
View file

@ -2,17 +2,16 @@ import { AxiosError } from "axios";
import { cloneDeep, debounce } from "lodash";
import { Edge, Node, Viewport, XYPosition } from "reactflow";
import { create } from "zustand";
import {
SAVE_DEBOUNCE_TIME,
STARTER_FOLDER_NAME,
} from "../constants/constants";
import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
import {
deleteFlowFromDatabase,
multipleDeleteFlowsComponents,
readFlowsFromDatabase,
saveFlowToDatabase,
updateFlowInDatabase,
uploadFlowsToDatabase,
} from "../controllers/API";
import { getStarterProjects } from "../pages/MainPage/services";
import { FlowType, NodeDataType } from "../types/flow";
import {
FlowsManagerStoreType,
@ -29,6 +28,7 @@ import {
import useAlertStore from "./alertStore";
import { useDarkStore } from "./darkStore";
import useFlowStore from "./flowStore";
import { useFolderStore } from "./foldersStore";
import { useTypesStore } from "./typesStore";
let saveTimeoutId: NodeJS.Timeout | null = null;
@ -63,6 +63,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
}));
},
flows: [],
allFlows: [],
setAllFlows: (allFlows: FlowType[]) => {
set({ allFlows });
},
setFlows: (flows: FlowType[]) => {
set({
flows,
@ -76,38 +80,39 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
refreshFlows: () => {
return new Promise<void>((resolve, reject) => {
set({ isLoading: true });
readFlowsFromDatabase()
.then((dbData) => {
if (dbData) {
const { data, flows } = processFlows(dbData, false);
get().setExamples(
flows.filter(
(f) => f.folder === STARTER_FOLDER_NAME && !f.user_id,
),
);
get().setFlows(
flows.filter(
(f) => !(f.folder === STARTER_FOLDER_NAME && !f.user_id),
),
);
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
getStarterProjects().then((starterProjects) => {
get().setExamples(starterProjects?.flows!);
readFlowsFromDatabase()
.then((dbData) => {
if (dbData) {
const { data, flows } = processFlows(dbData, false);
const starterProjectsIds = starterProjects.flows!.map(
(flow) => flow.id,
);
get().setFlows(
flows.filter((f) => !starterProjectsIds.includes(f.id)),
);
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
set({ isLoading: false });
resolve();
}
})
.catch((e) => {
set({ isLoading: false });
resolve();
}
})
.catch((e) => {
set({ isLoading: false });
useAlertStore.getState().setErrorData({
title: "Could not load flows from database",
useAlertStore.getState().setErrorData({
title: "Could not load flows from database",
});
reject(e);
});
reject(e);
});
});
});
},
autoSaveCurrentFlow: (nodes: Node[], edges: Edge[], viewport: Viewport) => {
@ -191,6 +196,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
flow?: FlowType,
override?: boolean,
position?: XYPosition,
fromDragAndDrop?: boolean,
): Promise<string | undefined> => {
if (newProject) {
let flowData = flow
@ -202,6 +208,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
if (override) {
get().deleteComponent(flow!.name);
const newFlow = createNewFlow(flowData!, flow!);
newFlow.folder_id = useFolderStore.getState().folderUrl;
const { id } = await saveFlowToDatabase(newFlow);
newFlow.id = id;
//setTimeout to prevent update state with wrong state
@ -226,6 +233,8 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
const newName = addVersionToDuplicates(newFlow, get().flows);
newFlow.name = newName;
newFlow.folder_id = useFolderStore.getState().folderUrl;
try {
const { id } = await saveFlowToDatabase(newFlow);
// Change the id to the new id.
@ -258,25 +267,47 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
);
}
},
removeFlow: async (id: string) => {
return new Promise<void>((resolve) => {
const index = get().flows.findIndex((flow) => flow.id === id);
if (index >= 0) {
deleteFlowFromDatabase(id).then(() => {
const { data, flows } = processFlows(
get().flows.filter((flow) => flow.id !== id),
);
get().setFlows(flows);
set({ isLoading: false });
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
resolve();
});
removeFlow: async (id: string | string[]) => {
return new Promise<void>((resolve, reject) => {
if (Array.isArray(id)) {
multipleDeleteFlowsComponents(id)
.then(() => {
const { data, flows } = processFlows(
get().flows.filter((flow) => !id.includes(flow.id)),
);
get().setFlows(flows);
set({ isLoading: false });
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
resolve();
})
.catch((e) => reject(e));
} else {
const index = get().flows.findIndex((flow) => flow.id === id);
if (index >= 0) {
deleteFlowFromDatabase(id)
.then(() => {
const { data, flows } = processFlows(
get().flows.filter((flow) => flow.id !== id),
);
get().setFlows(flows);
set({ isLoading: false });
useTypesStore.setState((state) => ({
data: { ...state.data, ["saved_components"]: data },
ComponentFields: extractFieldsFromComponenents({
...state.data,
["saved_components"]: data,
}),
}));
resolve();
})
.catch((e) => reject(e));
}
}
});
},
@ -299,12 +330,12 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
uploadFlow: async ({
newProject,
file,
isComponent = false,
isComponent,
position = { x: 10, y: 10 },
}: {
newProject: boolean;
file?: File;
isComponent?: boolean;
isComponent: boolean | null;
position?: XYPosition;
}): Promise<string | never> => {
return new Promise(async (resolve, reject) => {
@ -314,6 +345,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
let fileData = JSON.parse(text);
if (
newProject &&
isComponent !== null &&
((!fileData.is_component && isComponent === true) ||
(fileData.is_component !== undefined &&
fileData.is_component !== isComponent))
@ -326,7 +358,13 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
});
resolve("");
} else {
id = await get().addFlow(newProject, fileData, undefined, position);
id = await get().addFlow(
newProject,
fileData,
undefined,
position,
true,
);
resolve(id);
}
}
@ -435,6 +473,14 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
newState.setEdges(futureState.edges);
}
},
searchFlowsComponents: "",
setSearchFlowsComponents: (searchFlowsComponents: string) => {
set({ searchFlowsComponents });
},
selectedFlowsComponentsCards: [],
setSelectedFlowsComponentsCards: (selectedFlowsComponentsCards: string[]) => {
set({ selectedFlowsComponentsCards });
},
}));
export default useFlowsManagerStore;

104
src/frontend/src/stores/foldersStore.tsx Normal file
View file

@ -0,0 +1,104 @@
import { create } from "zustand";
import { DEFAULT_FOLDER } from "../constants/constants";
import {
getFolderById,
getFolders,
uploadFlowsFromFolders,
} from "../pages/MainPage/services";
import { FoldersStoreType } from "../types/zustand/folders";
import useFlowsManagerStore from "./flowsManagerStore";
export const useFolderStore = create<FoldersStoreType>((set, get) => ({
folders: [],
getFoldersApi: (refetch = false) => {
if (get()?.folders.length === 0 || refetch === true) {
get().setLoading(true);
getFolders().then(
(res) => {
set({ folders: res });
const myCollectionId = res?.find(
(f) => f.name === DEFAULT_FOLDER,
)?.id;
set({ myCollectionId });
get().setLoading(false);
useFlowsManagerStore.getState().refreshFlows();
},
() => {
set({ folders: [] });
get().setLoading(false);
},
);
}
},
setFolders: (folders) => set(() => ({ folders: folders })),
loading: false,
setLoading: (loading) => set(() => ({ loading: loading })),
getFolderById: (id) => {
get().setLoadingById(true);
if (id) {
getFolderById(id).then(
(res) => {
const setAllFlows = useFlowsManagerStore.getState().setAllFlows;
setAllFlows(res.flows);
set({ selectedFolder: res });
get().setLoadingById(false);
},
() => {
get().setLoadingById(false);
},
);
}
},
selectedFolder: null,
loadingById: false,
setLoadingById: (loading) => set(() => ({ loadingById: loading })),
getMyCollectionFolder: () => {
const folders = get().folders;
const myCollectionId = folders?.find((f) => f.name === DEFAULT_FOLDER)?.id;
if (myCollectionId) {
getFolderById(myCollectionId).then((res) => {
set({ myCollectionFlows: res });
});
}
},
setMyCollectionFlow: (folder) => set(() => ({ myCollectionFlows: folder })),
myCollectionFlows: null,
setMyCollectionId: () => {
const folders = get().folders;
const myCollectionId = folders?.find((f) => f.name === DEFAULT_FOLDER)?.id;
if (myCollectionId) {
set({ myCollectionId });
}
},
myCollectionId: "",
folderToEdit: null,
setFolderToEdit: (folder) => set(() => ({ folderToEdit: folder })),
folderUrl: "",
setFolderUrl: (url) => set(() => ({ folderUrl: url })),
folderDragging: false,
setFolderDragging: (folder) => set(() => ({ folderDragging: folder })),
folderIdDragging: "",
setFolderIdDragging: (id) => set(() => ({ folderIdDragging: id })),
uploadFolder: () => {
return new Promise<void>(() => {
const input = document.createElement("input");
input.type = "file";
input.onchange = (event: Event) => {
if (
(event.target as HTMLInputElement).files![0].type ===
"application/json"
) {
const file = (event.target as HTMLInputElement).files![0];
const formData = new FormData();
formData.append("file", file);
uploadFlowsFromFolders(formData).then(() => {
get().getFoldersApi(true);
useFlowsManagerStore.getState().refreshFlows();
});
useFlowsManagerStore.getState().setAllFlows;
}
};
input.click();
});
},
}));

14
src/frontend/src/stores/utilityStore.ts Normal file
View file

@ -0,0 +1,14 @@
import { create } from "zustand";
export const useUtilityStore = create<any>((set, get) => ({
selectedItems: [],
setSelectedItems: (itemId) => {
if (get().selectedItems.includes(itemId)) {
set({
selectedItems: get().selectedItems.filter((item) => item !== itemId),
});
} else {
set({ selectedItems: get().selectedItems.concat(itemId) });
}
},
}));

9
src/frontend/src/style/index.css
View file

@ -28,6 +28,7 @@
--ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
--round-btn-shadow: #00000063;
--ice: #31a3cc;
--selected: #2196f3;
--error-background: #fef2f2;
--error-foreground: #991b1b;
@ -50,9 +51,8 @@
--component-icon: #d8598a;
--flow-icon: #2f67d0;
--hover: #F2F4F5;
--hover: #f2f4f5;
--disabled-run: #6366f1;
/* Colors that are shared in dark and light mode */
--blur-shared: #151923de;
@ -71,9 +71,10 @@
.dark {
--background: 224 35% 7.5%; /* hsl(224 40% 10%) */
--foreground: 213 31% 80%; /* hsl(213 31% 91%) */
--ice: #60A5FA;
--hover: #1A202E;
--ice: #60a5fa;
--hover: #1a202e;
--disabled-run: #6366f1;
--selected: #2196f3;
--muted: 223 27% 11%; /* hsl(223 27% 11%) */
--muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */

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

@ -30,6 +30,8 @@ export type InputComponentType = {
setSelectedOption?: (value: string) => void;
selectedOptions?: string[];
setSelectedOptions?: (value: string[]) => void;
objectOptions?: Array<{ name: string; id: string }>;
isObjectOption?: boolean;
};
export type ToggleComponentType = {
enabled: boolean;
@ -220,6 +222,7 @@ export type AccordionComponentType = {
keyValue?: string;
openDisc?: boolean;
sideBar?: boolean;
options?: { title: string; icon: string }[];
};
export type Side = "top" | "right" | "bottom" | "left";

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

@ -17,6 +17,7 @@ export type FlowType = {
user_id?: string;
icon?: string;
icon_bg_color?: string;
folder_id?: string;
};
export type NodeType = {

19
src/frontend/src/types/zustand/flowsManager/index.ts
View file

@ -4,6 +4,8 @@ import { FlowType } from "../../flow";
export type FlowsManagerStoreType = {
getFlowById: (id: string) => FlowType | undefined;
flows: Array<FlowType>;
allFlows: Array<FlowType>;
setAllFlows: (flows: FlowType[]) => void;
setFlows: (flows: FlowType[]) => void;
currentFlow: FlowType | undefined;
currentFlowId: string;
@ -15,12 +17,12 @@ export type FlowsManagerStoreType = {
saveFlow: (flow: FlowType, silent?: boolean) => Promise<void> | undefined;
saveFlowDebounce: (
flow: FlowType,
silent?: boolean
silent?: boolean,
) => Promise<void> | undefined;
autoSaveCurrentFlow: (
nodes: Node[],
edges: Edge[],
viewport: Viewport
viewport: Viewport,
) => void;
uploadFlows: () => Promise<void>;
uploadFlow: ({
@ -31,20 +33,21 @@ export type FlowsManagerStoreType = {
}: {
newProject: boolean;
file?: File;
isComponent?: boolean;
isComponent: boolean | null;
position?: XYPosition;
}) => Promise<string | never>;
addFlow: (
newProject: boolean,
flow?: FlowType,
override?: boolean,
position?: XYPosition
position?: XYPosition,
fromDragAndDrop?: boolean,
) => Promise<string | undefined>;
deleteComponent: (key: string) => Promise<void>;
removeFlow: (id: string) => Promise<void>;
removeFlow: (id: string | string[]) => Promise<void>;
saveComponent: (
component: any,
override: boolean
override: boolean,
) => Promise<string | undefined>;
undo: () => void;
redo: () => void;
@ -52,6 +55,10 @@ export type FlowsManagerStoreType = {
examples: Array<FlowType>;
setExamples: (examples: FlowType[]) => void;
setCurrentFlow: (flow: FlowType) => void;
setSearchFlowsComponents: (search: string) => void;
searchFlowsComponents: string;
selectedFlowsComponentsCards: string[];
setSelectedFlowsComponentsCards: (selected: string[]) => void;
};
export type UseUndoRedoOptions = {

26
src/frontend/src/types/zustand/folders/index.ts Normal file
View file

@ -0,0 +1,26 @@
import { FolderType } from "../../../pages/MainPage/entities";
export type FoldersStoreType = {
folders: FolderType[];
getFoldersApi: (refetch?: boolean) => void;
setFolders: (folders: FolderType[]) => void;
loading: boolean;
setLoading: (loading: boolean) => void;
selectedFolder: FolderType | null;
getFolderById: (id: string) => void;
loadingById: boolean;
setLoadingById: (loading: boolean) => void;
getMyCollectionFolder: () => void;
myCollectionFlows: FolderType | null;
myCollectionId: string | null;
setMyCollectionId: () => void;
folderToEdit: FolderType | null;
setFolderToEdit: (folder: FolderType | null) => void;
folderUrl: string;
setFolderUrl: (folderUrl: string) => void;
folderDragging: boolean;
setFolderDragging: (set: boolean) => void;
uploadFolder: (folderId: string) => void;
folderIdDragging: string;
setFolderIdDragging: (id: string) => void;
};

1
src/frontend/src/utils/reactflowUtils.ts
View file

@ -1304,6 +1304,7 @@ export const createNewFlow = (
data: flowData,
id: "",
is_component: flow?.is_component ?? false,
folder_id: "",
};
};

9
src/frontend/src/utils/styleUtils.ts
View file

@ -53,7 +53,9 @@ import {
FileType2,
FileUp,
FlaskConical,
FolderIcon,
FolderPlus,
FolderPlusIcon,
FormInput,
Forward,
Gift,
@ -105,6 +107,7 @@ import {
SaveAll,
Scissors,
ScreenShare,
ScrollText,
Search,
Settings2,
Share,
@ -141,9 +144,8 @@ import {
XCircle,
Zap,
} from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa";
import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
import { AWSIcon } from "../icons/AWS";
import { FaDiscord } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte";
import { AnthropicIcon } from "../icons/Anthropic";
import { AstraDBIcon } from "../icons/AstraDB";
@ -385,6 +387,7 @@ export const nodeIconsLucide: iconsType = {
Keyboard: Keyboard,
embeddings: Binary,
saved_components: GradientSave,
ScrollText,
documentloaders: Paperclip,
vectorstores: Layers,
vectorsearch: TextSearch,
@ -518,5 +521,7 @@ export const nodeIconsLucide: iconsType = {
Command,
ArrowBigUp,
Dot,
FolderPlusIcon,
FolderIcon,
Discord: FaDiscord,
};

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

@ -1,9 +1,10 @@
import { ColDef, ColGroupDef } from "ag-grid-community";
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import {
APIDataType,
TemplateVariableType,
} from "../types/api";
import TableAutoCellRender from "../components/tableAutoCellRender";
import { priorityFields } from "../constants/constants";
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "../flow_constants";
import { APIDataType, TemplateVariableType } from "../types/api";
import {
groupedObjType,
nodeGroupedObjType,
@ -345,3 +346,54 @@ export function freezeObject(obj: any) {
if (!obj) return obj;
return JSON.parse(JSON.stringify(obj));
}
export function isTimeStampString(str: string): boolean {
const timestampRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3}Z)?$/;
return timestampRegex.test(str);
}
export function extractColumnsFromRows(
rows: object[],
mode: "intersection" | "union",
): (ColDef<any> | ColGroupDef<any>)[] {
const columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
if (rows.length === 0) {
return [];
}
function intersection() {
for (const key in rows[0]) {
columnsKeys[key] = {
headerName: key,
field: key,
cellRenderer: TableAutoCellRender,
filter: true,
autoHeight: true,
};
}
for (const row of rows) {
for (const key in columnsKeys) {
if (!row[key]) {
delete columnsKeys[key];
}
}
}
}
function union() {
for (const row of rows) {
for (const key in row) {
columnsKeys[key] = {
headerName: key,
field: key,
filter: true,
cellRenderer: TableAutoCellRender,
};
}
}
}
if (mode === "intersection") {
intersection();
} else {
union();
}
return Object.values(columnsKeys);
}

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

@ -5,6 +5,11 @@ import plugin from "tailwindcss/plugin";
// ! Check if removing the other module.exports made sense
module.exports = {
variants: {
extend: {
display: ["group-hover"],
},
},
darkMode: ["class"],
content: [
"app/**/*.{ts,tsx}",
@ -36,6 +41,7 @@ module.exports = {
},
animation: {
wiggle: "wiggle 150ms ease-in-out 1",
"slow-wiggle": "wiggle 500ms ease-in-out 1",
},
colors: {
"component-icon": "var(--component-icon)",
@ -88,6 +94,7 @@ module.exports = {
"chat-bot-icon": "var(--chat-bot-icon)",
"chat-user-icon": "var(--chat-user-icon)",
ice: "var(--ice)",
selected: "var(--selected)",
hover: "var(--hover)",
white: "var(--white)",
border: "hsl(var(--border))",

124
src/frontend/tests/end-to-end/actionsMainPage.spec.ts Normal file
View file

@ -0,0 +1,124 @@
import { test } from "@playwright/test";
test("select and delete all", async ({ page }) => {
await page.goto("/");
await page.waitForTimeout(2000);
let modalCount = 0;
try {
const modalTitleElement = await page?.getByTestId("modal-title");
if (modalTitleElement) {
modalCount = await modalTitleElement.count();
}
} catch (error) {
modalCount = 0;
}
while (modalCount === 0) {
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.getByTestId("icon-ChevronLeft").first().click();
await page.getByText("Select All").click();
await page.getByText("Unselect All").isVisible();
await page.getByTestId("icon-Trash2").click();
await page.getByText("Delete").last().click();
await page.waitForTimeout(1000);
await page.getByText("Selected items deleted successfully").isVisible();
});
test("search flows", async ({ page }) => {
await page.goto("/");
await page.waitForTimeout(2000);
let modalCount = 0;
try {
const modalTitleElement = await page?.getByTestId("modal-title");
if (modalTitleElement) {
modalCount = await modalTitleElement.count();
}
} catch (error) {
modalCount = 0;
}
while (modalCount === 0) {
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.getByTestId("icon-ChevronLeft").first().click();
await page.getByText("Select All").isVisible();
await page.getByText("New Project", { exact: true }).click();
await page.getByRole("heading", { name: "Memory Chatbot" }).click();
await page.getByTestId("icon-ChevronLeft").first().click();
await page.getByText("New Project", { exact: true }).click();
await page.getByRole("heading", { name: "Document QA" }).click();
await page.getByTestId("icon-ChevronLeft").first().click();
await page.getByPlaceholder("Search flows").fill("Memory Chatbot");
await page.getByText("Memory Chatbot", { exact: true }).isVisible();
await page.getByText("Document QA", { exact: true }).isHidden();
await page.getByText("Basic Prompting", { exact: true }).isHidden();
});
test("search components", async ({ page }) => {
await page.goto("/");
await page.waitForTimeout(2000);
let modalCount = 0;
try {
const modalTitleElement = await page?.getByTestId("modal-title");
if (modalTitleElement) {
modalCount = await modalTitleElement.count();
}
} catch (error) {
modalCount = 0;
}
while (modalCount === 0) {
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.getByText("Chat Input").first().click();
await page.getByTestId("icon-SaveAll").first().click();
await page.keyboard.press("Escape");
await page
.getByText("Prompt", {
exact: true,
})
.first()
.click();
await page.getByTestId("icon-SaveAll").first().click();
await page.keyboard.press("Escape");
await page
.getByText("OpenAI", {
exact: true,
})
.first()
.click();
await page.getByTestId("icon-SaveAll").first().click();
await page.keyboard.press("Escape");
await page.getByTestId("icon-ChevronLeft").first().click();
await page
.getByText("Components", {
exact: true,
})
.click();
await page.getByPlaceholder("Search components").fill("Chat Input");
await page.getByText("Chat Input", { exact: true }).isVisible();
await page.getByText("Prompt", { exact: true }).isHidden();
await page.getByText("OpenAI", { exact: true }).isHidden();
});

10
src/frontend/tests/end-to-end/auto_login.spec.ts
View file

@ -3,24 +3,24 @@ import { test } from "@playwright/test";
test.describe("Auto_login tests", () => {
test("auto_login sign in", async ({ page }) => {
await page.goto("/");
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
});
test("auto_login block_admin", async ({ page }) => {
await page.goto("/");
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
await page.goto("/login");
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
await page.goto("/admin");
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
await page.goto("/admin/login");
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
});
});

16
src/frontend/tests/end-to-end/chatInputOutput.spec.ts
View file

@ -22,7 +22,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -41,7 +41,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
}
await page
.getByTestId("input-openai_api_key")
.getByTestId("popover-anchor-input-openai_api_key")
.fill(process.env.OPENAI_API_KEY ?? "");
await page.getByText("Playground", { exact: true }).click();
await page.getByPlaceholder("Send a message...").fill("Hello, how are you?");
@ -60,8 +60,14 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
.fill(
"testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
);
await page.getByTestId("input-sender_name").nth(1).fill("TestSenderNameUser");
await page.getByTestId("input-sender_name").nth(0).fill("TestSenderNameAI");
await page
.getByTestId("popover-anchor-input-sender_name")
.nth(1)
.fill("TestSenderNameUser");
await page
.getByTestId("popover-anchor-input-sender_name")
.nth(0)
.fill("TestSenderNameAI");
await page.getByText("Playground", { exact: true }).click();
await page.getByTestId("icon-LucideSend").click();
@ -102,7 +108,7 @@ test("chat_io_teste", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}

2
src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
View file

@ -15,7 +15,7 @@ test("CodeAreaModalComponent", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}

4
src/frontend/tests/end-to-end/curl_api_generation.spec.ts
View file

@ -13,7 +13,7 @@ test("curl_api_generation", async ({ page, context }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -23,7 +23,7 @@ test("curl_api_generation", async ({ page, context }) => {
await page.getByRole("tab", { name: "cURL" }).click();
await page.getByRole("button", { name: "Copy Code" }).click();
const handle = await page.evaluateHandle(() =>
navigator.clipboard.readText()
navigator.clipboard.readText(),
);
const clipboardContent = await handle.jsonValue();
expect(clipboardContent.length).toBeGreaterThan(0);

20
src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts
View file

@ -16,14 +16,8 @@ test("shoud delete a flow", async ({ page }) => {
await page.waitForTimeout(5000);
await page.getByText("My Collection").nth(0).click();
await page.getByText("Website Content QA").first().isVisible();
await page
.getByTestId("card-website-content-qa")
.first()
.hover()
.then(async () => {
await page.getByTestId("icon-Trash2").first().click();
await page.waitForTimeout(2000);
});
await page.getByLabel("checkbox-component").first().click();
await page.getByTestId("icon-Trash2").click();
await page
.getByText("Are you sure you want to delete the selected component?")
.isVisible();
@ -41,14 +35,8 @@ test("shoud delete a component", async ({ page }) => {
await page.getByText("My Collection").nth(0).click();
await page.getByText("Components").first().click();
await page.getByText("Basic RAG").first().isVisible();
await page
.getByTestId("card-basic-rag")
.first()
.hover()
.then(async () => {
await page.getByTestId("icon-Trash2").first().click();
await page.waitForTimeout(2000);
});
await page.getByLabel("checkbox-component").first().click();
await page.getByTestId("icon-Trash2").click();
await page
.getByText("Are you sure you want to delete the selected component?")
.isVisible();

5
src/frontend/tests/end-to-end/dragAndDrop.spec.ts
View file

@ -17,7 +17,7 @@ test.describe("drag and drop test", () => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -50,9 +50,6 @@ test.describe("drag and drop test", () => {
},
);
await page.getByText("Getting Started").first().click();
await page.waitForTimeout(1000);
const genericNoda = page.getByTestId("div-generic-node");
const elementCount = await genericNoda?.count();
if (elementCount > 0) {

30
src/frontend/tests/end-to-end/dropdownComponent.spec.ts
View file

@ -15,7 +15,7 @@ test("dropDownComponent", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -78,32 +78,32 @@ test("dropDownComponent", async ({ page }) => {
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="showendpoint_url"]').click();
expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked()
await page.locator('//*[@id="showendpoint_url"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showendpoint_url"]').click();
expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked()
await page.locator('//*[@id="showendpoint_url"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="showregion_name"]').click();
expect(
await page.locator('//*[@id="showregion_name"]').isChecked()
await page.locator('//*[@id="showregion_name"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showregion_name"]').click();
expect(
await page.locator('//*[@id="showregion_name"]').isChecked()
await page.locator('//*[@id="showregion_name"]').isChecked(),
).toBeTruthy();
// showmodel_id
@ -113,7 +113,7 @@ test("dropDownComponent", async ({ page }) => {
// showmodel_id
await page.locator('//*[@id="showmodel_id"]').click();
expect(
await page.locator('//*[@id="showmodel_id"]').isChecked()
await page.locator('//*[@id="showmodel_id"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="showcache"]').click();
@ -124,32 +124,32 @@ test("dropDownComponent", async ({ page }) => {
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showcredentials_profile_name"]').click();
expect(
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked()
await page.locator('//*[@id="showcredentials_profile_name"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="showendpoint_url"]').click();
expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked()
await page.locator('//*[@id="showendpoint_url"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showendpoint_url"]').click();
expect(
await page.locator('//*[@id="showendpoint_url"]').isChecked()
await page.locator('//*[@id="showendpoint_url"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="showregion_name"]').click();
expect(
await page.locator('//*[@id="showregion_name"]').isChecked()
await page.locator('//*[@id="showregion_name"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="showregion_name"]').click();
expect(
await page.locator('//*[@id="showregion_name"]').isChecked()
await page.locator('//*[@id="showregion_name"]').isChecked(),
).toBeTruthy();
// showmodel_id
@ -159,7 +159,7 @@ test("dropDownComponent", async ({ page }) => {
// showmodel_id
await page.locator('//*[@id="showmodel_id"]').click();
expect(
await page.locator('//*[@id="showmodel_id"]').isChecked()
await page.locator('//*[@id="showmodel_id"]').isChecked(),
).toBeTruthy();
await page.getByTestId("dropdown-edit-model_id").click();

6
src/frontend/tests/end-to-end/fileUploadComponent.spec.ts
View file

@ -16,7 +16,7 @@ test("dropDownComponent", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -64,7 +64,7 @@ test("dropDownComponent", async ({ page }) => {
// Click and hold on the first element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div'
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div/div',
)
.hover();
await page.mouse.down();
@ -72,7 +72,7 @@ test("dropDownComponent", async ({ page }) => {
// Move to the second element
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div'
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div/div',
)
.hover();

32
src/frontend/tests/end-to-end/filterEdge.spec.ts
View file

@ -15,7 +15,7 @@ test("LLMChain - Tooltip", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -40,7 +40,7 @@ test("LLMChain - Tooltip", async ({ page }) => {
await page
.locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div',
)
.hover()
.then(async () => {
@ -60,17 +60,17 @@ test("LLMChain - Tooltip", async ({ page }) => {
await page.getByTitle("zoom out").click();
await page
.locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div',
)
.hover()
.then(async () => {
await expect(
page.getByTestId("tooltip-Model Specs").first()
page.getByTestId("tooltip-Model Specs").first(),
).toBeVisible();
await page.waitForTimeout(2000);
await expect(
page.getByTestId("tooltip-Model Specs").first()
page.getByTestId("tooltip-Model Specs").first(),
).toBeVisible();
await page.getByTestId("icon-Search").click();
@ -81,12 +81,12 @@ test("LLMChain - Tooltip", async ({ page }) => {
await page
.locator(
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div'
'//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div',
)
.hover()
.then(async () => {
await expect(
page.getByTestId("empty-tooltip-filter").first()
page.getByTestId("empty-tooltip-filter").first(),
).toBeVisible();
});
});
@ -106,14 +106,14 @@ test("LLMChain - Filter", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
await page.waitForTimeout(1000);
await page.getByTestId(
"input-list-plus-btn-edit_metadata_indexing_include-2"
"input-list-plus-btn-edit_metadata_indexing_include-2",
);
await page.getByTestId("blank-flow").click();
@ -136,7 +136,7 @@ test("LLMChain - Filter", async ({ page }) => {
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[4]/div/button/div/div',
)
.click();
@ -150,14 +150,14 @@ test("LLMChain - Filter", async ({ page }) => {
await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
await expect(page.getByTestId("model_specsCohere")).toBeVisible();
await expect(
page.getByTestId("model_specsGoogle Generative AI")
page.getByTestId("model_specsGoogle Generative AI"),
).toBeVisible();
await expect(
page.getByTestId("model_specsHugging Face Inference API")
page.getByTestId("model_specsHugging Face Inference API"),
).toBeVisible();
await expect(page.getByTestId("model_specsOllama")).toBeVisible();
await expect(
page.getByTestId("model_specsQianfanChatEndpoint")
page.getByTestId("model_specsQianfanChatEndpoint"),
).toBeVisible();
await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible();
await expect(page.getByTestId("model_specsVertexAI")).toBeVisible();
@ -169,7 +169,7 @@ test("LLMChain - Filter", async ({ page }) => {
await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
await expect(
page.getByTestId("model_specsAzureChatOpenAI")
page.getByTestId("model_specsAzureChatOpenAI"),
).not.toBeVisible();
await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
@ -180,13 +180,13 @@ test("LLMChain - Filter", async ({ page }) => {
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div',
)
.click();
await page
.locator(
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div'
'//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div/div/div[2]/div[7]/button/div/div',
)
.click();

22
src/frontend/tests/end-to-end/floatComponent.spec.ts
View file

@ -15,7 +15,7 @@ test("FloatComponent", async ({ page }) => {
}
while (modalCount === 0) {
await page.locator('//*[@id="new-project-btn"]').click();
await page.getByText("New Project", { exact: true }).click();
await page.waitForTimeout(5000);
modalCount = await page.getByTestId("modal-title")?.count();
}
@ -74,7 +74,7 @@ test("FloatComponent", async ({ page }) => {
await page.getByTestId("showmirostat").click();
expect(
await page.locator('//*[@id="showmirostat"]').isChecked()
await page.locator('//*[@id="showmirostat"]').isChecked(),
).toBeTruthy();
await page.getByTestId("showmirostat").click();
@ -82,22 +82,22 @@ test("FloatComponent", async ({ page }) => {
await page.getByTestId("showmirostat_eta").click();
expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked()
await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
).toBeTruthy();
await page.getByTestId("showmirostat_eta").click();
expect(
await page.locator('//*[@id="showmirostat_eta"]').isChecked()
await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
).toBeFalsy();
await page.getByTestId("showmirostat_tau").click();
expect(
await page.locator('//*[@id="showmirostat_tau"]').isChecked()
await page.locator('//*[@id="showmirostat_tau"]').isChecked(),
).toBeTruthy();
await page.getByTestId("showmirostat_tau").click();
expect(
await page.locator('//*[@id="showmirostat_tau"]').isChecked()
await page.locator('//*[@id="showmirostat_tau"]').isChecked(),
).toBeFalsy();
await page.getByTestId("showmodel").click();
@ -120,22 +120,22 @@ test("FloatComponent", async ({ page }) => {
await page.getByTestId("shownum_thread").click();
expect(
await page.locator('//*[@id="shownum_thread"]').isChecked()
await page.locator('//*[@id="shownum_thread"]').isChecked(),
).toBeTruthy();
await page.getByTestId("shownum_thread").click();
expect(
await page.locator('//*[@id="shownum_thread"]').isChecked()
await page.locator('//*[@id="shownum_thread"]').isChecked(),
).toBeFalsy();
await page.getByTestId("showrepeat_last_n").click();
expect(
await page.locator('//*[@id="showrepeat_last_n"]').isChecked()
await page.locator('//*[@id="showrepeat_last_n"]').isChecked(),
).toBeTruthy();
await page.getByTestId("showrepeat_last_n").click();
expect(
await page.locator('//*[@id="showrepeat_last_n"]').isChecked()
await page.locator('//*[@id="showrepeat_last_n"]').isChecked(),
).toBeFalsy();
await page.locator('//*[@id="saveChangesBtn"]').click();
@ -151,7 +151,7 @@ test("FloatComponent", async ({ page }) => {
// showtemperature
await page.locator('//*[@id="showtemperature"]').click();
expect(
await page.locator('//*[@id="showtemperature"]').isChecked()
await page.locator('//*[@id="showtemperature"]').isChecked(),
).toBeTruthy();
await page.locator('//*[@id="saveChangesBtn"]').click();

Some files were not shown because too many files have changed in this diff Show more