merge fix dev
This commit is contained in:
Cristhian Zanforlin Lousa
commit
b3addfbeee
128 changed files with 4531 additions and 2367 deletions
385
src/frontend/package-lock.json
generated
385
src/frontend/package-lock.json
generated
|
|
@ -13,9 +13,11 @@
|
|||
"@headlessui/react": "^1.7.10",
|
||||
"@heroicons/react": "^2.0.15",
|
||||
"@mui/material": "^5.11.9",
|
||||
"@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-icons": "^1.3.0",
|
||||
"@radix-ui/react-label": "^2.0.2",
|
||||
"@radix-ui/react-menubar": "^1.0.3",
|
||||
"@radix-ui/react-progress": "^1.0.3",
|
||||
|
|
@ -27,6 +29,7 @@
|
|||
"@tabler/icons-react": "^2.18.0",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"accordion": "^3.0.2",
|
||||
"ace-builds": "^1.16.0",
|
||||
"add": "^2.0.6",
|
||||
"ansi-to-html": "^0.7.2",
|
||||
|
|
@ -34,6 +37,7 @@
|
|||
"base64-js": "^1.5.1",
|
||||
"class-variance-authority": "^0.6.0",
|
||||
"clsx": "^1.2.1",
|
||||
"dompurify": "^3.0.3",
|
||||
"esbuild": "^0.17.18",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.233.0",
|
||||
|
|
@ -53,7 +57,7 @@
|
|||
"rehype-mathjax": "^4.0.2",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-math": "^5.1.1",
|
||||
"shadcn-ui": "^0.1.3",
|
||||
"shadcn-ui": "^0.2.2",
|
||||
"short-unique-id": "^4.4.4",
|
||||
"switch": "^0.0.0",
|
||||
"table": "^6.8.1",
|
||||
|
|
@ -80,6 +84,8 @@
|
|||
"autoprefixer": "^10.4.14",
|
||||
"daisyui": "^3.1.1",
|
||||
"postcss": "^8.4.23",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.9"
|
||||
|
|
@ -114,6 +120,20 @@
|
|||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@antfu/ni": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://registry.npmjs.org/@antfu/ni/-/ni-0.21.4.tgz",
|
||||
"integrity": "sha512-O0Uv9LbLDSoEg26fnMDdDRiPwFJnQSoD4WnrflDwKCJm8Cx/0mV4cGxwBLXan5mGIrpK4Dd7vizf4rQm0QCEAA==",
|
||||
"bin": {
|
||||
"na": "bin/na.mjs",
|
||||
"nci": "bin/nci.mjs",
|
||||
"ni": "bin/ni.mjs",
|
||||
"nlx": "bin/nlx.mjs",
|
||||
"nr": "bin/nr.mjs",
|
||||
"nu": "bin/nu.mjs",
|
||||
"nun": "bin/nun.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.21.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
|
||||
|
|
@ -1212,15 +1232,15 @@
|
|||
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
|
||||
},
|
||||
"node_modules/@mui/system": {
|
||||
"version": "5.13.5",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.5.tgz",
|
||||
"integrity": "sha512-n0gzUxoZ2ZHZgnExkh2Htvo9uW2oakofgPRQrDoa/GQOWyRD0NH9MDszBwOb6AAoXZb+OV5TE7I4LeZ/dzgHYA==",
|
||||
"version": "5.13.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz",
|
||||
"integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0",
|
||||
"@babel/runtime": "^7.22.5",
|
||||
"@mui/private-theming": "^5.13.1",
|
||||
"@mui/styled-engine": "^5.13.2",
|
||||
"@mui/types": "^7.2.4",
|
||||
"@mui/utils": "^5.13.1",
|
||||
"@mui/utils": "^5.13.6",
|
||||
"clsx": "^1.2.1",
|
||||
"csstype": "^3.1.2",
|
||||
"prop-types": "^15.8.1"
|
||||
|
|
@ -1280,11 +1300,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/utils": {
|
||||
"version": "5.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz",
|
||||
"integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==",
|
||||
"version": "5.13.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz",
|
||||
"integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0",
|
||||
"@babel/runtime": "^7.22.5",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react-is": "^18.2.0",
|
||||
"prop-types": "^15.8.1",
|
||||
|
|
@ -1366,6 +1386,37 @@
|
|||
"@babel/runtime": "^7.13.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-accordion": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
|
||||
"integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-collapsible": "1.0.3",
|
||||
"@radix-ui/react-collection": "1.0.3",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-direction": "1.0.1",
|
||||
"@radix-ui/react-id": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-arrow": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
|
||||
|
|
@ -1419,6 +1470,36 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
|
||||
"integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-id": "1.0.1",
|
||||
"@radix-ui/react-presence": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
|
||||
|
|
@ -1630,6 +1711,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-icons": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
|
||||
"integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.x || ^17.x || ^18.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-id": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
|
||||
|
|
@ -3106,6 +3195,39 @@
|
|||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/@ts-morph/common": {
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.19.0.tgz",
|
||||
"integrity": "sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==",
|
||||
"dependencies": {
|
||||
"fast-glob": "^3.2.12",
|
||||
"minimatch": "^7.4.3",
|
||||
"mkdirp": "^2.1.6",
|
||||
"path-browserify": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@ts-morph/common/node_modules/brace-expansion": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
|
||||
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ts-morph/common/node_modules/minimatch": {
|
||||
"version": "7.4.6",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
|
||||
"integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
|
||||
"dependencies": {
|
||||
"brace-expansion": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/aria-query": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
|
||||
|
|
@ -3547,6 +3669,11 @@
|
|||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||
"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
|
||||
},
|
||||
"node_modules/accordion": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/accordion/-/accordion-3.0.2.tgz",
|
||||
"integrity": "sha512-jbQfFaw+57OBwPt7qSNHuW+RA8smmRwkWRS1Ozh6K/QxUspBgBV/LpdSzlY7vee8TomS6j3D33B9rIeH1qMwsA=="
|
||||
},
|
||||
"node_modules/ace-builds": {
|
||||
"version": "1.16.0",
|
||||
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.16.0.tgz",
|
||||
|
|
@ -3714,9 +3841,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/aria-query": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz",
|
||||
"integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==",
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
|
||||
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
|
|
@ -4491,6 +4618,11 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/code-block-writer": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
|
||||
"integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w=="
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
|
|
@ -5009,10 +5141,15 @@
|
|||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
|
||||
"integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ=="
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.438",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.438.tgz",
|
||||
"integrity": "sha512-x94U0FhphEsHsOloCvlsujHCvoir0ZQ73ZAs/QN4PLx98uNvyEU79F75rq1db75Bx/atvuh7KPeuxelh+xfYJw=="
|
||||
"version": "1.4.440",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz",
|
||||
"integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw=="
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
|
|
@ -6745,9 +6882,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/katex": {
|
||||
"version": "0.16.7",
|
||||
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz",
|
||||
"integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==",
|
||||
"version": "0.16.8",
|
||||
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
|
||||
"integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
|
||||
"funding": [
|
||||
"https://opencollective.com/katex",
|
||||
"https://github.com/sponsors/katex"
|
||||
|
|
@ -6863,9 +7000,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/log-symbols/node_modules/chalk": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
||||
"integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
|
||||
"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
|
||||
"engines": {
|
||||
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||
},
|
||||
|
|
@ -7838,11 +7975,33 @@
|
|||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/minimist": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
|
||||
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/mj-context-menu": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
|
||||
"integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
|
||||
},
|
||||
"node_modules/mkdirp": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
|
||||
"integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
|
||||
"bin": {
|
||||
"mkdirp": "dist/cjs/src/bin.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/mri": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
||||
|
|
@ -8111,9 +8270,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/ora/node_modules/chalk": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
||||
"integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
|
||||
"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
|
||||
"engines": {
|
||||
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||
},
|
||||
|
|
@ -8210,6 +8369,11 @@
|
|||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
|
||||
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
|
||||
},
|
||||
"node_modules/path-browserify": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
|
||||
"integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
|
||||
},
|
||||
"node_modules/path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
|
|
@ -8437,6 +8601,95 @@
|
|||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz",
|
||||
"integrity": "sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.17.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "*",
|
||||
"@prettier/plugin-pug": "*",
|
||||
"@shopify/prettier-plugin-liquid": "*",
|
||||
"@shufo/prettier-plugin-blade": "*",
|
||||
"@trivago/prettier-plugin-sort-imports": "*",
|
||||
"prettier": ">=2.2.0",
|
||||
"prettier-plugin-astro": "*",
|
||||
"prettier-plugin-css-order": "*",
|
||||
"prettier-plugin-import-sort": "*",
|
||||
"prettier-plugin-jsdoc": "*",
|
||||
"prettier-plugin-marko": "*",
|
||||
"prettier-plugin-organize-attributes": "*",
|
||||
"prettier-plugin-organize-imports": "*",
|
||||
"prettier-plugin-style-order": "*",
|
||||
"prettier-plugin-svelte": "*",
|
||||
"prettier-plugin-twig-melody": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@ianvs/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-pug": {
|
||||
"optional": true
|
||||
},
|
||||
"@shopify/prettier-plugin-liquid": {
|
||||
"optional": true
|
||||
},
|
||||
"@shufo/prettier-plugin-blade": {
|
||||
"optional": true
|
||||
},
|
||||
"@trivago/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-astro": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-css-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-import-sort": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-jsdoc": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-marko": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-attributes": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-style-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-svelte": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-twig-melody": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-format": {
|
||||
"version": "27.5.1",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
|
||||
|
|
@ -9286,23 +9539,40 @@
|
|||
}
|
||||
},
|
||||
"node_modules/shadcn-ui": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.1.3.tgz",
|
||||
"integrity": "sha512-f6Wa4ZIxsigfOonC3yyJkPb2JXJnuGFyUn1fJJrDUHvIJOydUukcdQsZg7Lp6F6llkmfRjra1dZOo0KpSfdjuQ==",
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.2.2.tgz",
|
||||
"integrity": "sha512-T76EeZymSB45Yz63gkYOv9P0Ke+UA9IZenysx+975nyNzXxU7HRBgfwuHiMcrcubtOLrzRVedTLX3lcOMqDeRQ==",
|
||||
"dependencies": {
|
||||
"@antfu/ni": "^0.21.4",
|
||||
"chalk": "5.2.0",
|
||||
"commander": "^10.0.0",
|
||||
"cosmiconfig": "^8.1.3",
|
||||
"diff": "^5.1.0",
|
||||
"execa": "^7.0.0",
|
||||
"fs-extra": "^11.1.0",
|
||||
"https-proxy-agent": "^6.2.0",
|
||||
"node-fetch": "^3.3.0",
|
||||
"ora": "^6.1.2",
|
||||
"prompts": "^2.4.2",
|
||||
"ts-morph": "^18.0.0",
|
||||
"tsconfig-paths": "^4.2.0",
|
||||
"zod": "^3.20.2"
|
||||
},
|
||||
"bin": {
|
||||
"shadcn-ui": "dist/index.js"
|
||||
}
|
||||
},
|
||||
"node_modules/shadcn-ui/node_modules/agent-base": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
|
||||
"integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
|
||||
"dependencies": {
|
||||
"debug": "^4.3.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/shadcn-ui/node_modules/chalk": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
||||
|
|
@ -9322,6 +9592,35 @@
|
|||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/shadcn-ui/node_modules/cosmiconfig": {
|
||||
"version": "8.2.0",
|
||||
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
|
||||
"integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
|
||||
"dependencies": {
|
||||
"import-fresh": "^3.2.1",
|
||||
"js-yaml": "^4.1.0",
|
||||
"parse-json": "^5.0.0",
|
||||
"path-type": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/d-fischer"
|
||||
}
|
||||
},
|
||||
"node_modules/shadcn-ui/node_modules/https-proxy-agent": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-6.2.1.tgz",
|
||||
"integrity": "sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA==",
|
||||
"dependencies": {
|
||||
"agent-base": "^7.0.2",
|
||||
"debug": "4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
|
|
@ -9575,6 +9874,14 @@
|
|||
"url": "https://github.com/chalk/ansi-regex?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-bom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
|
||||
"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/strip-eof": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
|
||||
|
|
@ -9950,6 +10257,28 @@
|
|||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
|
||||
},
|
||||
"node_modules/ts-morph": {
|
||||
"version": "18.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-18.0.0.tgz",
|
||||
"integrity": "sha512-Kg5u0mk19PIIe4islUI/HWRvm9bC1lHejK4S0oh1zaZ77TMZAEmQC0sHQYiu2RgCQFZKXz1fMVi/7nOOeirznA==",
|
||||
"dependencies": {
|
||||
"@ts-morph/common": "~0.19.0",
|
||||
"code-block-writer": "^12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tsconfig-paths": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
|
||||
"integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
|
||||
"dependencies": {
|
||||
"json5": "^2.2.2",
|
||||
"minimist": "^1.2.6",
|
||||
"strip-bom": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.5.3",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@
|
|||
"@headlessui/react": "^1.7.10",
|
||||
"@heroicons/react": "^2.0.15",
|
||||
"@mui/material": "^5.11.9",
|
||||
"@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-icons": "^1.3.0",
|
||||
"@radix-ui/react-label": "^2.0.2",
|
||||
"@radix-ui/react-menubar": "^1.0.3",
|
||||
"@radix-ui/react-progress": "^1.0.3",
|
||||
|
|
@ -22,6 +24,7 @@
|
|||
"@tabler/icons-react": "^2.18.0",
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"accordion": "^3.0.2",
|
||||
"ace-builds": "^1.16.0",
|
||||
"add": "^2.0.6",
|
||||
"ansi-to-html": "^0.7.2",
|
||||
|
|
@ -29,6 +32,7 @@
|
|||
"base64-js": "^1.5.1",
|
||||
"class-variance-authority": "^0.6.0",
|
||||
"clsx": "^1.2.1",
|
||||
"dompurify": "^3.0.3",
|
||||
"esbuild": "^0.17.18",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.233.0",
|
||||
|
|
@ -48,7 +52,7 @@
|
|||
"rehype-mathjax": "^4.0.2",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"remark-math": "^5.1.1",
|
||||
"shadcn-ui": "^0.1.3",
|
||||
"shadcn-ui": "^0.2.2",
|
||||
"short-unique-id": "^4.4.4",
|
||||
"switch": "^0.0.0",
|
||||
"table": "^6.8.1",
|
||||
|
|
@ -101,6 +105,8 @@
|
|||
"autoprefixer": "^10.4.14",
|
||||
"daisyui": "^3.1.1",
|
||||
"postcss": "^8.4.23",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.9"
|
||||
|
|
|
|||
3
src/frontend/prettier.config.js
Normal file
3
src/frontend/prettier.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require("prettier-plugin-tailwindcss")],
|
||||
};
|
||||
|
|
@ -51,6 +51,13 @@ export default function App() {
|
|||
useEffect(() => {
|
||||
// If there is an error alert open with data, add it to the alertsList
|
||||
if (errorOpen && errorData) {
|
||||
if (
|
||||
alertsList.length > 0 &&
|
||||
JSON.stringify(alertsList[alertsList.length - 1].data) ===
|
||||
JSON.stringify(errorData)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setErrorOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
|
|
@ -62,6 +69,13 @@ export default function App() {
|
|||
}
|
||||
// If there is a notice alert open with data, add it to the alertsList
|
||||
else if (noticeOpen && noticeData) {
|
||||
if (
|
||||
alertsList.length > 0 &&
|
||||
JSON.stringify(alertsList[alertsList.length - 1].data) ===
|
||||
JSON.stringify(noticeData)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setNoticeOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
|
|
@ -73,6 +87,13 @@ export default function App() {
|
|||
}
|
||||
// If there is a success alert open with data, add it to the alertsList
|
||||
else if (successOpen && successData) {
|
||||
if (
|
||||
alertsList.length > 0 &&
|
||||
JSON.stringify(alertsList[alertsList.length - 1].data) ===
|
||||
JSON.stringify(successData)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setSuccessOpen(false);
|
||||
setAlertsList((old) => {
|
||||
let newAlertsList = [
|
||||
|
|
@ -103,7 +124,7 @@ export default function App() {
|
|||
|
||||
return (
|
||||
//need parent component with width and height
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="flex h-full flex-col">
|
||||
<ErrorBoundary
|
||||
onReset={() => {
|
||||
window.localStorage.removeItem("tabsData");
|
||||
|
|
@ -118,7 +139,7 @@ export default function App() {
|
|||
</ErrorBoundary>
|
||||
<div></div>
|
||||
<div
|
||||
className="flex flex-col-reverse fixed bottom-5 left-5"
|
||||
className="fixed bottom-5 left-5 flex flex-col-reverse"
|
||||
style={{ zIndex: 999 }}
|
||||
>
|
||||
{alertsList.map((alert) => (
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import { nodeColors } from "../../../../utils";
|
|||
import ShadTooltip from "../../../../components/ShadTooltipComponent";
|
||||
import { PopUpContext } from "../../../../contexts/popUpContext";
|
||||
import ToggleShadComponent from "../../../../components/toggleShadComponent";
|
||||
import { Info } from "lucide-react";
|
||||
|
||||
export default function ParameterComponent({
|
||||
left,
|
||||
|
|
@ -36,9 +37,11 @@ export default function ParameterComponent({
|
|||
type,
|
||||
name = "",
|
||||
required = false,
|
||||
info = "",
|
||||
}: ParameterComponentType) {
|
||||
const ref = useRef(null);
|
||||
const refHtml = useRef(null);
|
||||
const infoHtml = useRef(null);
|
||||
const updateNodeInternals = useUpdateNodeInternals();
|
||||
const [position, setPosition] = useState(0);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
|
|
@ -79,6 +82,18 @@ export default function ParameterComponent({
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
infoHtml.current = (
|
||||
<div className="h-full w-full break-words">
|
||||
{info.split("\n").map((line, i) => (
|
||||
<p key={i} className="block">
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}, [info]);
|
||||
|
||||
useEffect(() => {
|
||||
const groupedObj = groupByFamily(myData, tooltipTitle);
|
||||
|
||||
|
|
@ -86,7 +101,7 @@ export default function ParameterComponent({
|
|||
<span
|
||||
key={getRandomKeyByssmm()}
|
||||
className={classNames(
|
||||
i > 0 ? "items-center flex mt-3" : "items-center flex"
|
||||
i > 0 ? "mt-3 flex items-center" : "flex items-center"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
|
|
@ -123,12 +138,25 @@ export default function ParameterComponent({
|
|||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="w-full flex flex-wrap justify-between items-center bg-muted mt-1 px-5 py-2"
|
||||
className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
|
||||
>
|
||||
<>
|
||||
<div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
|
||||
<div
|
||||
className={
|
||||
"w-full truncate text-sm" +
|
||||
(left ? "" : " text-end") +
|
||||
(info !== "" ? " flex items-center" : "")
|
||||
}
|
||||
>
|
||||
{title}
|
||||
<span className="text-destructive">{required ? " *" : ""}</span>
|
||||
<div className="">
|
||||
{info !== "" && (
|
||||
<ShadTooltip content={infoHtml.current}>
|
||||
<Info className="relative bottom-0.5 ml-2 h-3 w-3" />
|
||||
</ShadTooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{left &&
|
||||
(type === "str" ||
|
||||
|
|
@ -144,7 +172,6 @@ export default function ParameterComponent({
|
|||
delayDuration={0}
|
||||
content={refHtml.current}
|
||||
side={left ? "left" : "right"}
|
||||
open={refHtml?.current?.length > 0}
|
||||
>
|
||||
<Handle
|
||||
type={left ? "target" : "source"}
|
||||
|
|
@ -155,7 +182,7 @@ export default function ParameterComponent({
|
|||
}
|
||||
className={classNames(
|
||||
left ? "-ml-0.5 " : "-mr-0.5 ",
|
||||
"w-3 h-3 rounded-full border-2 bg-background"
|
||||
"h-3 w-3 rounded-full border-2 bg-background"
|
||||
)}
|
||||
style={{
|
||||
borderColor: color,
|
||||
|
|
@ -220,7 +247,7 @@ export default function ParameterComponent({
|
|||
) : left === true &&
|
||||
type === "str" &&
|
||||
data.node.template[name].options ? (
|
||||
<div className="w-full mt-2">
|
||||
<div className="mt-2 w-full">
|
||||
<Dropdown
|
||||
options={data.node.template[name].options}
|
||||
onSelect={handleOnNewValue}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,7 @@ import {
|
|||
} from "../../utils";
|
||||
import ParameterComponent from "./components/parameterComponent";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
import {
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
ForwardRefExoticComponent,
|
||||
ComponentType,
|
||||
SVGProps,
|
||||
ReactNode,
|
||||
} from "react";
|
||||
import { useContext, useState, useEffect, useRef } from "react";
|
||||
import { NodeDataType } from "../../types/flow";
|
||||
import { alertContext } from "../../contexts/alertContext";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
|
|
@ -23,10 +14,8 @@ import NodeModal from "../../modals/NodeModal";
|
|||
import Tooltip from "../../components/TooltipComponent";
|
||||
import { NodeToolbar } from "reactflow";
|
||||
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
|
||||
|
||||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
||||
import { useSSE } from "../../contexts/SSEContext";
|
||||
import { ReactElement } from "react-markdown/lib/react-markdown";
|
||||
|
||||
export default function GenericNode({
|
||||
data,
|
||||
|
|
@ -46,6 +35,7 @@ export default function GenericNode({
|
|||
const [validationStatus, setValidationStatus] = useState(null);
|
||||
// State for outline color
|
||||
const { sseData, isBuilding } = useSSE();
|
||||
const refHtml = useRef(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (reactFlowInstance) {
|
||||
|
|
@ -140,7 +130,7 @@ export default function GenericNode({
|
|||
)
|
||||
}
|
||||
>
|
||||
<div className="w-5 h-5 relative top-[3px]">
|
||||
<div className="relative top-[3px] h-5 w-5">
|
||||
<div
|
||||
className={classNames(
|
||||
validationStatus && validationStatus.valid
|
||||
|
|
@ -215,6 +205,7 @@ export default function GenericNode({
|
|||
? toTitleCase(data.node.template[t].name)
|
||||
: toTitleCase(t)
|
||||
}
|
||||
info={data.node.template[t].info}
|
||||
name={t}
|
||||
tooltipTitle={data.node.template[t].type}
|
||||
required={data.node.template[t].required}
|
||||
|
|
|
|||
|
|
@ -25,14 +25,14 @@ export default function SingleAlert({
|
|||
>
|
||||
{type === "error" ? (
|
||||
<div
|
||||
className="flex bg-error-background rounded-md p-3 mb-2 mx-2"
|
||||
className="mx-2 mb-2 flex rounded-md bg-error-background p-3"
|
||||
key={dropItem.id}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<h3 className="text-sm break-words font-medium text-error-foreground">
|
||||
<h3 className="break-words text-sm font-medium text-error-foreground">
|
||||
{dropItem.title}
|
||||
</h3>
|
||||
{dropItem.list ? (
|
||||
|
|
@ -72,17 +72,17 @@ export default function SingleAlert({
|
|||
</div>
|
||||
) : type === "notice" ? (
|
||||
<div
|
||||
className="flex rounded-md bg-info-background p-3 mb-2 mx-2"
|
||||
className="mx-2 mb-2 flex rounded-md bg-info-background p-3"
|
||||
key={dropItem.id}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p className="text-sm text-info-foreground font-medium">
|
||||
<p className="text-sm font-medium text-info-foreground">
|
||||
{dropItem.title}
|
||||
</p>
|
||||
<p className="mt-3 text-sm md:mt-0 md:ml-6">
|
||||
<p className="mt-3 text-sm md:ml-6 md:mt-0">
|
||||
{dropItem.link ? (
|
||||
<Link
|
||||
to={dropItem.link}
|
||||
|
|
@ -118,7 +118,7 @@ export default function SingleAlert({
|
|||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex bg-success-background p-3 mb-2 mx-2 rounded-md"
|
||||
className="mx-2 mb-2 flex rounded-md bg-success-background p-3"
|
||||
key={dropItem.id}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export default function AlertDropdown({}: AlertDropdownType) {
|
|||
return (
|
||||
<div
|
||||
ref={componentRef}
|
||||
className="z-10 py-3 pb-4 px-2 rounded-md bg-background ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
|
||||
className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-background px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
>
|
||||
<div className="flex pl-3 flex-row justify-between text-md font-medium text-foreground">
|
||||
<div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
|
||||
Notifications
|
||||
<div className="flex gap-3 pr-3 ">
|
||||
<button
|
||||
|
|
@ -36,7 +36,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
|
|||
setTimeout(clearNotificationList, 100);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-[1.1rem] h-[1.1rem]" />
|
||||
<Trash2 className="h-[1.1rem] w-[1.1rem]" />
|
||||
</button>
|
||||
<button
|
||||
className="text-foreground hover:text-status-red"
|
||||
|
|
@ -46,7 +46,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex flex-col overflow-y-scroll w-full h-full scrollbar-hide text-high-foreground">
|
||||
<div className="text-high-foreground mt-3 flex h-full w-full flex-col overflow-y-scroll scrollbar-hide">
|
||||
{notificationList.length !== 0 ? (
|
||||
notificationList.map((alertItem, index) => (
|
||||
<SingleAlert
|
||||
|
|
@ -56,7 +56,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="h-full w-full pb-16 text-ring flex justify-center items-center">
|
||||
<div className="flex h-full w-full items-center justify-center pb-16 text-ring">
|
||||
No new notifications
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function ErrorAlert({
|
|||
removeAlert(id);
|
||||
}, 500);
|
||||
}}
|
||||
className="rounded-md w-96 mt-6 shadow-xl bg-error-background p-4 cursor-pointer"
|
||||
className="mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default function NoticeAlert({
|
|||
setShow(false);
|
||||
removeAlert(id);
|
||||
}}
|
||||
className="rounded-md w-96 mt-6 shadow-xl bg-info-background p-4"
|
||||
className="mt-6 w-96 rounded-md bg-info-background p-4 shadow-xl"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
|
|
@ -44,7 +44,7 @@ export default function NoticeAlert({
|
|||
</div>
|
||||
<div className="ml-3 flex-1 md:flex md:justify-between">
|
||||
<p className="text-sm text-info-foreground">{title}</p>
|
||||
<p className="mt-3 text-sm md:mt-0 md:ml-6">
|
||||
<p className="mt-3 text-sm md:ml-6 md:mt-0">
|
||||
{link !== "" ? (
|
||||
<Link
|
||||
to={link}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default function SuccessAlert({
|
|||
setShow(false);
|
||||
removeAlert(id);
|
||||
}}
|
||||
className="rounded-md w-96 mt-6 shadow-xl bg-success-background p-4"
|
||||
className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
|
||||
>
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
|
|
|
|||
56
src/frontend/src/components/AccordionComponent/index.tsx
Normal file
56
src/frontend/src/components/AccordionComponent/index.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import { ReactElement, useContext, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
AccordionComponentType,
|
||||
ProgressBarType,
|
||||
} from "../../types/components";
|
||||
import { Progress } from "../../components/ui/progress";
|
||||
import { setInterval } from "timers/promises";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "../../components/ui/accordion";
|
||||
|
||||
export default function AccordionComponent({
|
||||
trigger,
|
||||
children,
|
||||
open = [],
|
||||
}: AccordionComponentType) {
|
||||
const [value, setValue] = useState(
|
||||
open.length == 0 ? "" : getOpenAccordion()
|
||||
);
|
||||
|
||||
function getOpenAccordion() {
|
||||
let value = "";
|
||||
open.forEach((el) => {
|
||||
if (el == trigger) {
|
||||
value = trigger;
|
||||
}
|
||||
});
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
value == "" ? setValue(trigger) : setValue("");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Accordion type="single" value={value} onValueChange={setValue}>
|
||||
<AccordionItem value={trigger} className="border-none">
|
||||
<AccordionTrigger
|
||||
onClick={() => {
|
||||
handleClick();
|
||||
}}
|
||||
className="ml-3"
|
||||
>
|
||||
{trigger}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>{children}</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
export default function CrashErrorComponent({ error, resetErrorBoundary }) {
|
||||
return (
|
||||
<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-foreground bg-opacity-50 z-50">
|
||||
<div className="bg-background max-w-4xl h-1/3 min-h-fit rounded-lg shadow-lg p-8 text-start flex flex-col justify-evenly">
|
||||
<h1 className="text-status-red text-3xl mb-4">
|
||||
<div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-foreground bg-opacity-50">
|
||||
<div className="flex h-1/3 min-h-fit max-w-4xl flex-col justify-evenly rounded-lg bg-background p-8 text-start shadow-lg">
|
||||
<h1 className="mb-4 text-3xl text-status-red">
|
||||
Oops! An unknown error has occurred.
|
||||
</h1>
|
||||
<p className="text-foreground mb-4 text-xl">
|
||||
<p className="mb-4 text-xl text-foreground">
|
||||
Please click the 'Reset Application' button to restore the
|
||||
application's state. If the error persists, please create an issue on
|
||||
our GitHub page. We apologize for any inconvenience this may have
|
||||
|
|
@ -14,7 +14,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
|
|||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={resetErrorBoundary}
|
||||
className="bg-primary hover:bg-ring text-background font-bold py-2 px-4 rounded mr-4"
|
||||
className="mr-4 rounded bg-primary px-4 py-2 font-bold text-background hover:bg-ring"
|
||||
>
|
||||
Reset Application
|
||||
</button>
|
||||
|
|
@ -22,7 +22,7 @@ export default function CrashErrorComponent({ error, resetErrorBoundary }) {
|
|||
href="https://github.com/logspace-ai/langflow/issues/new"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-status-red hover:bg-error-foreground text-background font-bold py-2 px-4 rounded"
|
||||
className="rounded bg-status-red px-4 py-2 font-bold text-background hover:bg-error-foreground"
|
||||
>
|
||||
Create Issue
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
|
|||
<div className="flex justify-between">
|
||||
<span className="font-medium">Name</span>{" "}
|
||||
{isMaxLength && (
|
||||
<span className="text-status-red animate-pulse ml-10">
|
||||
<span className="ml-10 animate-pulse text-status-red">
|
||||
Character limit reached
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -71,7 +71,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
|
|||
onChange={handleDescriptionChange}
|
||||
value={description ?? ""}
|
||||
placeholder="Flow description"
|
||||
className="max-h-[100px] mt-2 font-normal"
|
||||
className="mt-2 max-h-[100px] font-normal"
|
||||
rows={3}
|
||||
/>
|
||||
</Label>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ export default function ExtraSidebar() {
|
|||
<aside
|
||||
className={` ${
|
||||
isStackedOpen ? "w-52" : "w-0 "
|
||||
} flex-shrink-0 flex overflow-hidden flex-col border-r transition-all duration-500`}
|
||||
} flex flex-shrink-0 flex-col overflow-hidden border-r transition-all duration-500`}
|
||||
>
|
||||
<div className="w-52 border overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-background">
|
||||
<div className="flex flex-grow flex-col w-full">
|
||||
<div className="flex h-full w-52 flex-col items-start overflow-y-auto border bg-background scrollbar-hide">
|
||||
<div className="flex w-full flex-grow flex-col">
|
||||
{extraNavigation.options ? (
|
||||
<div className="p-4">
|
||||
<nav className="flex-1 space-y-1">
|
||||
|
|
@ -34,7 +34,7 @@ export default function ExtraSidebar() {
|
|||
item.href.split("/")[2] === current[4]
|
||||
? "bg-muted text-foreground"
|
||||
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
|
||||
"group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium"
|
||||
)}
|
||||
>
|
||||
<item.icon
|
||||
|
|
@ -61,7 +61,7 @@ export default function ExtraSidebar() {
|
|||
item.href.split("/")[2] === current[4]
|
||||
? "bg-muted text-foreground"
|
||||
: "bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
"group flex w-full items-center rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-1 focus:ring-ring"
|
||||
)}
|
||||
>
|
||||
<item.icon
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const TooltipReact: FC<TooltipProps> = ({
|
|||
id={selector}
|
||||
content={content}
|
||||
className={classNames(
|
||||
"!bg-white !text-xs !font-normal !text-foreground !shadow-md !opacity-100 z-[9999]",
|
||||
"z-[9999] !bg-white !text-xs !font-normal !text-foreground !opacity-100 !shadow-md",
|
||||
className
|
||||
)}
|
||||
place={position}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ShadTooltipProps } from "../../types/components";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
|
|
@ -5,18 +6,19 @@ import {
|
|||
TooltipTrigger,
|
||||
} from "../ui/tooltip";
|
||||
|
||||
const ShadTooltip = (props) => {
|
||||
const ShadTooltip = ({
|
||||
delayDuration = 500,
|
||||
side,
|
||||
content,
|
||||
children,
|
||||
}: ShadTooltipProps) => {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip delayDuration={props.delayDuration}>
|
||||
<TooltipTrigger asChild>{props.children}</TooltipTrigger>
|
||||
<Tooltip delayDuration={delayDuration}>
|
||||
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
||||
|
||||
<TooltipContent
|
||||
side={props.side}
|
||||
avoidCollisions={false}
|
||||
sticky="always"
|
||||
>
|
||||
{props.content}
|
||||
<TooltipContent side={side} avoidCollisions={false} sticky="always">
|
||||
{content}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
|
|
|||
|
|
@ -31,20 +31,20 @@ export const CardComponent = ({
|
|||
<CardTitle className="flex w-full items-center gap-4">
|
||||
<span
|
||||
className={
|
||||
"rounded-full w-7 h-7 flex items-center justify-center text-2xl " +
|
||||
"flex h-7 w-7 items-center justify-center rounded-full text-2xl " +
|
||||
gradients[parseInt(flow.id.slice(0, 12), 16) % gradients.length]
|
||||
}
|
||||
></span>
|
||||
<span className="flex-1 w-full inline-block truncate-doubleline break-words">
|
||||
<span className="inline-block w-full flex-1 break-words truncate-doubleline">
|
||||
{flow.name}
|
||||
</span>
|
||||
{onDelete && (
|
||||
<button className="flex self-start" onClick={onDelete}>
|
||||
<Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
|
||||
<Trash2 className="h-4 w-4 text-primary opacity-0 transition-all group-hover:opacity-100" />
|
||||
</button>
|
||||
)}
|
||||
</CardTitle>
|
||||
<CardDescription className="pt-2 pb-2">
|
||||
<CardDescription className="pb-2 pt-2">
|
||||
<div className="truncate-doubleline">
|
||||
{flow.description}
|
||||
{/* {flow.description} */}
|
||||
|
|
@ -53,7 +53,7 @@ export const CardComponent = ({
|
|||
</CardHeader>
|
||||
|
||||
<CardFooter>
|
||||
<div className="flex gap-2 w-full justify-between items-end">
|
||||
<div className="flex w-full items-end justify-between gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{/* <Badge variant="secondary">Agent</Badge>
|
||||
<Badge variant="secondary">
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ export default function BuildTrigger({
|
|||
>
|
||||
<div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
|
||||
<div
|
||||
className={`${eventClick} flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow bg-border cursor-pointer`}
|
||||
className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
|
||||
onClick={() => {
|
||||
handleBuild(flow);
|
||||
}}
|
||||
|
|
@ -166,7 +166,7 @@ export default function BuildTrigger({
|
|||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<button>
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
{isBuilding && progress < 1 ? (
|
||||
// Render your loading animation here when isBuilding is true
|
||||
<RadialProgressComponent
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import { useState } from "react";
|
|||
import { ChatMessageType } from "../../../types/chat";
|
||||
import { nodeColors } from "../../../utils";
|
||||
import Convert from "ansi-to-html";
|
||||
const convert = new Convert({ newline: true });
|
||||
import { MessageCircle } from "lucide-react";
|
||||
|
||||
import DOMPurify from "dompurify";
|
||||
const convert = new Convert({ newline: true });
|
||||
export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
|
||||
const [hidden, setHidden] = useState(true);
|
||||
return (
|
||||
|
|
@ -13,29 +13,30 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
|
|||
<div className="w-full text-start">
|
||||
<div
|
||||
style={{ backgroundColor: nodeColors["chat"] }}
|
||||
className=" relative text-start inline-block text-background rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
|
||||
className=" relative inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tl-none text-start text-sm font-normal text-background"
|
||||
>
|
||||
{hidden && chat.thought && chat.thought !== "" && (
|
||||
<div
|
||||
onClick={() => setHidden((prev) => !prev)}
|
||||
className="absolute top-2 right-2 cursor-pointer"
|
||||
className="absolute right-2 top-2 cursor-pointer"
|
||||
>
|
||||
<MessageCircle className="w-5 h-5 animate-bounce" />
|
||||
<MessageCircle className="h-5 w-5 animate-bounce" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{chat.thought && chat.thought !== "" && !hidden && (
|
||||
<div
|
||||
onClick={() => setHidden((prev) => !prev)}
|
||||
style={{ backgroundColor: nodeColors["thought"] }}
|
||||
className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
|
||||
className="inline-block w-full cursor-pointer px-5 pb-3 pt-3 text-start"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: convert.toHtml(chat.thought),
|
||||
__html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
{chat.thought && chat.thought !== "" && !hidden && <br></br>}
|
||||
<div
|
||||
className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
|
||||
className="w-full rounded-b-md px-4 pb-3 pr-8 pt-3"
|
||||
style={{ backgroundColor: nodeColors["chat"] }}
|
||||
>
|
||||
{chat.message}
|
||||
|
|
@ -44,7 +45,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
|
|||
</div>
|
||||
) : (
|
||||
<div className="w-full text-end">
|
||||
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black bg-input font-normal rounded-tr-none">
|
||||
<div className="inline-block w-fit max-w-[280px] overflow-hidden rounded-xl rounded-tr-none bg-input p-3 px-5 text-start text-sm font-normal text-black">
|
||||
{chat.message}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,14 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
|
|||
>
|
||||
<div className="absolute bottom-4 right-3">
|
||||
<div
|
||||
className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-round-btn-shadow hover:shadow-round-btn-shadow
|
||||
bg-border cursor-pointer"
|
||||
className="align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3
|
||||
py-1 shadow-md"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<button>
|
||||
<div className="flex gap-3">
|
||||
<MessagesSquare
|
||||
className="pth-6 w-6 fill-chat-trigger stroke-1 stroke-chat-trigger"
|
||||
className="pth-6 w-6 fill-chat-trigger stroke-chat-trigger stroke-1"
|
||||
style={{ color: "white" }}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ export default function CodeAreaComponent({
|
|||
disabled,
|
||||
editNode = false,
|
||||
}: TextAreaComponentType) {
|
||||
const [myValue, setMyValue] = useState(value);
|
||||
const [myValue, setMyValue] = useState(
|
||||
typeof value == "string" ? value : JSON.stringify(value)
|
||||
);
|
||||
const { openPopUp } = useContext(PopUpContext);
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
|
|
@ -22,16 +24,16 @@ export default function CodeAreaComponent({
|
|||
}, [disabled, onChange]);
|
||||
|
||||
useEffect(() => {
|
||||
setMyValue(value);
|
||||
setMyValue(typeof value == "string" ? value : JSON.stringify(value));
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
|
||||
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
|
||||
}
|
||||
>
|
||||
<div className="w-full flex items-center">
|
||||
<div className="flex w-full items-center">
|
||||
<span
|
||||
onClick={() => {
|
||||
openPopUp(
|
||||
|
|
@ -46,9 +48,9 @@ export default function CodeAreaComponent({
|
|||
}}
|
||||
className={
|
||||
editNode
|
||||
? "truncate cursor-pointer placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring border-1 shadow-sm text-sm bg-transparent sm:text-sm" +
|
||||
? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5 pt-0.5 text-sm text-ring shadow-sm placeholder:text-center sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
|
||||
: "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm placeholder:text-muted-foreground sm:text-sm" +
|
||||
INPUT_STYLE +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { Listbox, Transition } from "@headlessui/react";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { Fragment, useContext, useEffect, useState } from "react";
|
||||
import { DropDownComponentType } from "../../types/components";
|
||||
import { classNames } from "../../utils";
|
||||
import { INPUT_STYLE } from "../../constants";
|
||||
import { ChevronsUpDown, Check } from "lucide-react";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
||||
export default function Dropdown({
|
||||
value,
|
||||
|
|
@ -11,13 +13,17 @@ export default function Dropdown({
|
|||
onSelect,
|
||||
editNode = false,
|
||||
numberOfOptions = 0,
|
||||
apiModal = false,
|
||||
}: DropDownComponentType) {
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
|
||||
let [internalValue, setInternalValue] = useState(
|
||||
value === "" || !value ? "Choose an option" : value
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setInternalValue(value === "" || !value ? "Choose an option" : value);
|
||||
}, [value]);
|
||||
}, [closePopUp]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -34,13 +40,13 @@ export default function Dropdown({
|
|||
<Listbox.Button
|
||||
className={
|
||||
editNode
|
||||
? "relative pr-8 placeholder:text-center block w-full pt-0.5 pb-0.5 form-input rounded-md shadow-sm sm:text-sm border-ring border-1" +
|
||||
? "form-input relative block w-full rounded-md border pb-0.5 pr-8 pt-0.5 shadow-sm placeholder:text-center sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "ring-1 ring-ring placeholder:text-muted-foreground w-full py-2 pl-3 pr-10 text-left focus-visible:outline-none rounded-md border-ring shadow-sm sm:text-sm bg-background" +
|
||||
: "w-full rounded-md border py-2 pl-3 pr-10 text-left shadow-sm placeholder:text-muted-foreground focus-visible:outline-none sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
}
|
||||
>
|
||||
<span className="block bg-background truncate w-full">
|
||||
<span className="block w-full truncate bg-background">
|
||||
{internalValue}
|
||||
</span>
|
||||
<span
|
||||
|
|
@ -63,11 +69,12 @@ export default function Dropdown({
|
|||
leaveTo="opacity-0"
|
||||
>
|
||||
<Listbox.Options
|
||||
className={
|
||||
className={classNames(
|
||||
editNode
|
||||
? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
|
||||
: "nowheel absolute z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
|
||||
}
|
||||
? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
||||
: "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
|
||||
apiModal ? "mb-2 w-[250px]" : "absolute"
|
||||
)}
|
||||
>
|
||||
{options.map((option, id) => (
|
||||
<Listbox.Option
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
|
|||
import { FloatComponentType } from "../../types/components";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { INPUT_STYLE } from "../../constants";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
|
||||
export default function FloatComponent({
|
||||
value,
|
||||
|
|
@ -12,6 +13,7 @@ export default function FloatComponent({
|
|||
}: FloatComponentType) {
|
||||
const [myValue, setMyValue] = useState(value ?? "");
|
||||
const { setDisableCopyPaste } = useContext(TabsContext);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
|
||||
const step = 0.1;
|
||||
const min = 0;
|
||||
|
|
@ -26,7 +28,7 @@ export default function FloatComponent({
|
|||
|
||||
useEffect(() => {
|
||||
setMyValue(value);
|
||||
}, [value]);
|
||||
}, [closePopUp]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -56,9 +58,9 @@ export default function FloatComponent({
|
|||
value={myValue}
|
||||
className={
|
||||
editNode
|
||||
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
|
||||
? "form-input block w-full rounded-md border border-border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "focus:placeholder-transparent block w-full form-input placeholder:text-muted-foreground bg-background rounded-md border-ring shadow-sm ring-offset-input sm:text-sm" +
|
||||
: "form-input block w-full rounded-md border-border bg-background shadow-sm ring-offset-input placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
|
||||
INPUT_STYLE +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,20 +47,20 @@ export const MenuBar = ({ flows, tabId }) => {
|
|||
let current_flow = flows.find((flow) => flow.id === tabId);
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link to="/">
|
||||
<ChevronLeft className="w-4" />
|
||||
</Link>
|
||||
<div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
|
||||
<div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
className="gap-2 flex items-center max-w-[200px]"
|
||||
className="flex max-w-[200px] items-center gap-2"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>
|
||||
<div className="truncate flex-1">{current_flow.name}</div>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
<div className="flex-1 truncate">{current_flow.name}</div>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-44">
|
||||
|
|
@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
|
|||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
|
|
@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
|
|||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Settings2 className="w-4 h-4 mr-2 " />
|
||||
<Settings2 className="mr-2 h-4 w-4 " />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
|
|
@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
|
|||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Undo className="w-4 h-4 mr-2 " />
|
||||
<Undo className="mr-2 h-4 w-4 " />
|
||||
Undo
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
|
|
@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
|
|||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Redo className="w-4 h-4 mr-2 " />
|
||||
<Redo className="mr-2 h-4 w-4 " />
|
||||
Redo
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
|
|
|
|||
|
|
@ -36,23 +36,23 @@ export default function Header() {
|
|||
fetchStars();
|
||||
}, []);
|
||||
return (
|
||||
<div className="w-full h-12 flex justify-between items-center border-b bg-muted">
|
||||
<div className="flex gap-2 justify-start items-center w-96">
|
||||
<div className="flex h-12 w-full items-center justify-between border-b bg-muted">
|
||||
<div className="flex w-96 items-center justify-start gap-2">
|
||||
<Link to="/">
|
||||
<span className="text-2xl ml-4">⛓️</span>
|
||||
<span className="ml-4 text-2xl">⛓️</span>
|
||||
</Link>
|
||||
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
|
||||
<MenuBar flows={flows} tabId={tabId} />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link to="/">
|
||||
<Button
|
||||
className="gap-2"
|
||||
variant={location.pathname === "/" ? "primary" : "secondary"}
|
||||
size="sm"
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
<Home className="h-4 w-4" />
|
||||
<div className="flex-1">{USER_PROJECTS_HEADER}</div>
|
||||
</Button>
|
||||
</Link>
|
||||
|
|
@ -64,22 +64,22 @@ export default function Header() {
|
|||
}
|
||||
size="sm"
|
||||
>
|
||||
<Users2 className="w-4 h-4" />
|
||||
<Users2 className="h-4 w-4" />
|
||||
<div className="flex-1">Community Examples</div>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex justify-end px-2 w-96">
|
||||
<div className="ml-auto mr-2 flex gap-5 items-center">
|
||||
<div className="flex w-96 justify-end px-2">
|
||||
<div className="ml-auto mr-2 flex items-center gap-5">
|
||||
<a
|
||||
href="https://github.com/logspace-ai/langflow"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
|
||||
>
|
||||
<FaGithub className="h-5 w-5 mr-2" />
|
||||
<FaGithub className="mr-2 h-5 w-5" />
|
||||
Star
|
||||
<div className="ml-2 flex text-sm bg-background rounded-md rounded-l-none border px-2 h-9 -mr-px items-center justify-center">
|
||||
<div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
|
||||
{stars}
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -123,18 +123,18 @@ export default function Header() {
|
|||
openPopUp(
|
||||
<>
|
||||
<div
|
||||
className="z-10 absolute"
|
||||
className="absolute z-10"
|
||||
style={{ top: top + 34, left: left - AlertWidth }}
|
||||
>
|
||||
<AlertDropdown />
|
||||
</div>
|
||||
<div className="h-screen w-screen fixed top-0 left-0"></div>
|
||||
<div className="fixed left-0 top-0 h-screen w-screen"></div>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
>
|
||||
{notificationCenter && (
|
||||
<div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
|
||||
<div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
|
||||
)}
|
||||
<Bell className="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default function InputComponent({
|
|||
<div
|
||||
className={
|
||||
disabled
|
||||
? "relative pointer-events-none cursor-not-allowed"
|
||||
? "pointer-events-none relative cursor-not-allowed"
|
||||
: "relative"
|
||||
}
|
||||
>
|
||||
|
|
@ -46,11 +46,11 @@ export default function InputComponent({
|
|||
if (disableCopyPaste) setDisableCopyPaste(false);
|
||||
}}
|
||||
className={classNames(
|
||||
"block w-full pr-12 form-input rounded-md bg-background border-ring shadow-sm sm:text-sm focus:placeholder-transparent placeholder:text-muted-foreground",
|
||||
"form-input block w-full rounded-md border-ring bg-background pr-12 shadow-sm placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm",
|
||||
disabled ? " bg-input" : "",
|
||||
password && !pwdVisible && myValue !== "" ? "password" : "",
|
||||
editNode
|
||||
? "border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm text-center" +
|
||||
? "form-input block w-full rounded-md border border-ring pb-0.5 pt-0.5 text-center shadow-sm sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "ring-offset-input" + INPUT_STYLE,
|
||||
password && editNode ? "pr-8" : "pr-3"
|
||||
|
|
@ -65,7 +65,7 @@ export default function InputComponent({
|
|||
<button
|
||||
className={classNames(
|
||||
editNode
|
||||
? "absolute inset-y-0 right-0 pr-2 items-center text-muted-foreground"
|
||||
? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
|
||||
: "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
|
||||
)}
|
||||
onClick={() => {
|
||||
|
|
@ -82,8 +82,8 @@ export default function InputComponent({
|
|||
stroke="currentColor"
|
||||
className={classNames(
|
||||
editNode
|
||||
? "w-5 h-5 absolute bottom-0.5 right-2"
|
||||
: "w-5 h-5 absolute bottom-2 right-3"
|
||||
? "absolute bottom-0.5 right-2 h-5 w-5"
|
||||
: "absolute bottom-2 right-3 h-5 w-5"
|
||||
)}
|
||||
>
|
||||
<path
|
||||
|
|
@ -101,8 +101,8 @@ export default function InputComponent({
|
|||
stroke="currentColor"
|
||||
className={classNames(
|
||||
editNode
|
||||
? "w-5 h-5 absolute bottom-0.5 right-2"
|
||||
: "w-5 h-5 absolute bottom-2 right-3"
|
||||
? "absolute bottom-0.5 right-2 h-5 w-5"
|
||||
: "absolute bottom-2 right-3 h-5 w-5"
|
||||
)}
|
||||
>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -95,17 +95,17 @@ export default function InputFileComponent({
|
|||
return (
|
||||
<div
|
||||
className={
|
||||
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
|
||||
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
|
||||
}
|
||||
>
|
||||
<div className="w-full flex items-center gap-2">
|
||||
<div className="flex w-full items-center">
|
||||
<span
|
||||
onClick={handleButtonClick}
|
||||
className={
|
||||
editNode
|
||||
? "truncate placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm border-1" +
|
||||
? "form-input block w-full truncate rounded-md border border-ring pb-0.5 pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
|
||||
: "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
|
||||
INPUT_STYLE +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@ export default function InputFileComponent({
|
|||
<FileSearch2 strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground" />
|
||||
)}
|
||||
{!editNode && loading && (
|
||||
<span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
|
||||
<span className="loading loading-spinner loading-sm pointer-events-none h-8 pl-3"></span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,20 +5,29 @@ import { TabsContext } from "../../contexts/tabsContext";
|
|||
import _ from "lodash";
|
||||
import { INPUT_STYLE } from "../../constants";
|
||||
import { X, Plus } from "lucide-react";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
|
||||
export default function InputListComponent({
|
||||
value,
|
||||
onChange,
|
||||
disabled,
|
||||
editNode = false,
|
||||
onAddInput,
|
||||
}: InputListComponentType) {
|
||||
const [inputList, setInputList] = useState(value ?? [""]);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
setInputList([""]);
|
||||
onChange([""]);
|
||||
}
|
||||
}, [disabled, onChange]);
|
||||
|
||||
useEffect(() => {
|
||||
setInputList(value);
|
||||
}, [closePopUp]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
|
|
@ -27,15 +36,15 @@ export default function InputListComponent({
|
|||
}
|
||||
>
|
||||
{inputList.map((i, idx) => (
|
||||
<div key={idx} className="w-full flex gap-3">
|
||||
<div key={idx} className="flex w-full gap-3">
|
||||
<input
|
||||
type="text"
|
||||
value={i}
|
||||
className={
|
||||
editNode
|
||||
? "border-[1px] truncate cursor-pointer text-center placeholder:text-center text-ring block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm" +
|
||||
? "form-input block w-full cursor-pointer truncate rounded-md border-[1px] border-ring pb-0.5 pt-0.5 text-center text-ring shadow-sm placeholder:text-center sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "block w-full form-input bg-background rounded-md border-ring shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
|
||||
: "form-input block w-full rounded-md border-ring bg-background shadow-sm focus:border-ring focus:ring-ring sm:text-sm" +
|
||||
(disabled ? " bg-input" : "") +
|
||||
"focus:placeholder-transparent"
|
||||
}
|
||||
|
|
@ -44,9 +53,9 @@ export default function InputListComponent({
|
|||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList[idx] = e.target.value;
|
||||
onChange(newInputList);
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
}}
|
||||
/>
|
||||
{idx === inputList.length - 1 ? (
|
||||
|
|
@ -55,6 +64,7 @@ export default function InputListComponent({
|
|||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList.push("");
|
||||
onAddInput(newInputList);
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
|
|
@ -68,12 +78,13 @@ export default function InputListComponent({
|
|||
setInputList((old) => {
|
||||
let newInputList = _.cloneDeep(old);
|
||||
newInputList.splice(idx, 1);
|
||||
onAddInput(newInputList);
|
||||
return newInputList;
|
||||
});
|
||||
onChange(inputList);
|
||||
}}
|
||||
>
|
||||
<X className="w-4 h-4 hover:text-status-red" />
|
||||
<X className="h-4 w-4 hover:text-status-red" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { FloatComponentType } from "../../types/components";
|
|||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
import { classNames } from "../../utils";
|
||||
import { INPUT_STYLE } from "../../constants";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
|
||||
export default function IntComponent({
|
||||
value,
|
||||
|
|
@ -14,6 +15,7 @@ export default function IntComponent({
|
|||
const [myValue, setMyValue] = useState(value ?? "");
|
||||
const { setDisableCopyPaste } = useContext(TabsContext);
|
||||
const min = 0;
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
|
||||
useEffect(() => {
|
||||
if (disabled) {
|
||||
|
|
@ -24,13 +26,13 @@ export default function IntComponent({
|
|||
|
||||
useEffect(() => {
|
||||
setMyValue(value);
|
||||
}, [value]);
|
||||
}, [closePopUp]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
"w-full " +
|
||||
(disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full")
|
||||
(disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full")
|
||||
}
|
||||
>
|
||||
<input
|
||||
|
|
@ -70,9 +72,9 @@ export default function IntComponent({
|
|||
value={myValue}
|
||||
className={
|
||||
editNode
|
||||
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring shadow-sm sm:text-sm placeholder:text-muted-foreground" +
|
||||
? "form-input block w-full rounded-md border pb-0.5 pt-0.5 text-center shadow-sm placeholder:text-center placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "focus:placeholder-transparent block w-full form-input bg-background rounded-md border-ring shadow-sm ring-offset-background sm:text-sm placeholder:text-muted-foreground" +
|
||||
: "form-input block w-full rounded-md bg-background shadow-sm ring-offset-background placeholder:text-muted-foreground focus:placeholder-transparent sm:text-sm" +
|
||||
INPUT_STYLE +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ type LoadingComponentProps = {
|
|||
|
||||
export default function LoadingComponent({ remSize }: LoadingComponentProps) {
|
||||
return (
|
||||
<div role="status" className="w-min m-auto">
|
||||
<div role="status" className="m-auto w-min">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin fill-almost-medium-blue`}
|
||||
className={`w-${remSize} h-${remSize} mr-2 animate-spin fill-almost-medium-blue text-muted`}
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -22,7 +22,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
|
|||
/>
|
||||
</svg>
|
||||
<br></br>
|
||||
<span className="animate-pulse text-almost-medium-blue text-lg">
|
||||
<span className="animate-pulse text-lg text-almost-medium-blue">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default function PromptAreaComponent({
|
|||
return (
|
||||
<div
|
||||
className={
|
||||
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
|
||||
disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
|
||||
}
|
||||
>
|
||||
<div className="w-full flex items-center">
|
||||
|
|
@ -51,7 +51,7 @@ export default function PromptAreaComponent({
|
|||
editNode
|
||||
? "cursor-pointer truncate placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input text-sm rounded-md border-ring shadow-sm sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
|
||||
: "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -52,9 +52,9 @@ export default function TextAreaComponent({
|
|||
}}
|
||||
className={
|
||||
editNode
|
||||
? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input rounded-md border-ring bg-transparent shadow-sm sm:text-sm" +
|
||||
? "form-input block w-full cursor-pointer truncate rounded-md border border-ring bg-transparent pb-0.5 pt-0.5 text-ring shadow-sm placeholder:text-center sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
: "truncate block w-full text-ring px-3 py-2 rounded-md border border-ring shadow-sm sm:text-sm" +
|
||||
: "block w-full truncate rounded-md border border-ring px-3 py-2 text-ring shadow-sm sm:text-sm" +
|
||||
(disabled ? " bg-input" : "")
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ export default function ToggleComponent({
|
|||
<span
|
||||
className={classNames(
|
||||
enabled
|
||||
? "opacity-0 ease-out duration-100"
|
||||
: "opacity-100 ease-in duration-200",
|
||||
? "opacity-0 duration-100 ease-out"
|
||||
: "opacity-100 duration-200 ease-in",
|
||||
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
|
|
@ -45,8 +45,8 @@ export default function ToggleComponent({
|
|||
<span
|
||||
className={classNames(
|
||||
enabled
|
||||
? "opacity-100 ease-in duration-200"
|
||||
: "opacity-0 ease-out duration-100",
|
||||
? "opacity-100 duration-200 ease-in"
|
||||
: "opacity-0 duration-100 ease-out",
|
||||
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
59
src/frontend/src/components/ui/accordion.tsx
Normal file
59
src/frontend/src/components/ui/accordion.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||
import { ChevronDownIcon } from "@radix-ui/react-icons";
|
||||
import { cn } from "../../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("border-b", 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
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon className="h-4 w-4 text-muted-foreground transition-transform duration-200" />
|
||||
</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(
|
||||
"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="pb-4 pt-0">{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
));
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||
|
|
@ -8,7 +8,7 @@ const Card = React.forwardRef<
|
|||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg flex flex-col justify-between border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-all",
|
||||
"flex flex-col justify-between rounded-lg border bg-card text-card-foreground shadow-sm transition-all hover:shadow-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ const DropdownMenuLabel = React.forwardRef<
|
|||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 pl-2 py-1.5 text-sm font-semibold",
|
||||
"px-2 py-1.5 pl-2 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default function RenameLabel(props) {
|
|||
ref={inputRef}
|
||||
onInput={resizeInput}
|
||||
className={cn(
|
||||
"px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-ring rounded-md",
|
||||
"rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
|
||||
props.className
|
||||
)}
|
||||
onBlur={() => {
|
||||
|
|
@ -74,7 +74,7 @@ export default function RenameLabel(props) {
|
|||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn("px-2 text-left truncate", props.className)}
|
||||
className={cn("truncate px-2 text-left", props.className)}
|
||||
onDoubleClick={() => {
|
||||
setIsRename(true);
|
||||
setMyValue(props.value);
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
|
|||
<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted",
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border data-[state=inactive]:border data-[state=inactive]:border-muted data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=inactive]:hover:bg-secondary/80",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
|
|||
* @param {string} flowId - The id of the flow
|
||||
* @returns {string} - The python code
|
||||
*/
|
||||
export const getPythonApiCode = (flow: FlowType): string => {
|
||||
export const getPythonApiCode = (flow: FlowType, tweak?): string => {
|
||||
const flowId = flow.id;
|
||||
|
||||
// create a dictionary of node ids and the values is an empty dictionary
|
||||
|
|
@ -70,7 +70,11 @@ BASE_API_URL = "${window.location.protocol}//${
|
|||
FLOW_ID = "${flowId}"
|
||||
# You can tweak the flow by adding a tweaks dictionary
|
||||
# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
|
||||
TWEAKS = ${JSON.stringify(tweaks, null, 2)}
|
||||
TWEAKS = ${
|
||||
tweak && tweak.length > 0
|
||||
? buildTweakObject(tweak)
|
||||
: JSON.stringify(tweaks, null, 2)
|
||||
}
|
||||
|
||||
def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
|
||||
"""
|
||||
|
|
@ -100,7 +104,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))`;
|
|||
* @param {string} flowId - The id of the flow
|
||||
* @returns {string} - The curl code
|
||||
*/
|
||||
export const getCurlCode = (flow: FlowType): string => {
|
||||
export const getCurlCode = (flow: FlowType, tweak?): string => {
|
||||
const flowId = flow.id;
|
||||
const tweaks = buildTweaks(flow);
|
||||
return `curl -X POST \\
|
||||
|
|
@ -108,27 +112,46 @@ export const getCurlCode = (flow: FlowType): string => {
|
|||
window.location.host
|
||||
}/api/v1/process/${flowId} \\
|
||||
-H 'Content-Type: application/json' \\
|
||||
-d '{"inputs": {"input": message}, "tweaks": ${JSON.stringify(
|
||||
tweaks,
|
||||
null,
|
||||
2
|
||||
)}}'`;
|
||||
-d '{"inputs": {"input": message}, "tweaks": ${
|
||||
tweak && tweak.length > 0
|
||||
? buildTweakObject(tweak)
|
||||
: JSON.stringify(tweaks, null, 2)
|
||||
}}'`;
|
||||
};
|
||||
/**
|
||||
* Function to get the python code for the API
|
||||
* @param {string} flowName - The name of the flow
|
||||
* @returns {string} - The python code
|
||||
*/
|
||||
export const getPythonCode = (flow: FlowType): string => {
|
||||
export const getPythonCode = (flow: FlowType, tweak?): string => {
|
||||
const flowName = flow.name;
|
||||
const tweaks = buildTweaks(flow);
|
||||
return `from langflow import load_flow_from_json
|
||||
TWEAKS = ${JSON.stringify(tweaks, null, 2)}
|
||||
TWEAKS = ${
|
||||
tweak && tweak.length > 0
|
||||
? buildTweakObject(tweak)
|
||||
: JSON.stringify(tweaks, null, 2)
|
||||
}
|
||||
flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
|
||||
# Now you can use it like any chain
|
||||
flow("Hey, have you heard of LangFlow?")`;
|
||||
};
|
||||
|
||||
function buildTweakObject(tweak) {
|
||||
tweak.forEach((el) => {
|
||||
Object.keys(el).forEach((key) => {
|
||||
for (let kp in el[key]) {
|
||||
try {
|
||||
el[key][kp] = JSON.parse(el[key][kp]);
|
||||
} catch {}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const tweakString = JSON.stringify(tweak, null, 2);
|
||||
return tweakString;
|
||||
}
|
||||
|
||||
/**
|
||||
* The base text for subtitle of Import Dialog
|
||||
* @constant
|
||||
|
|
@ -148,7 +171,7 @@ export const EXPORT_CODE_DIALOG =
|
|||
* @constant
|
||||
*/
|
||||
export const INPUT_STYLE =
|
||||
"focus:tw-ring-none focus-visible:outline-none focus:ring-ring bg-background focus:outline-none";
|
||||
" focus:tw-ring-none border-border focus-visible:outline-none focus:ring-ring focus:ring-1 bg-background focus:outline-none";
|
||||
|
||||
/**
|
||||
* The base text for subtitle of code dialog
|
||||
|
|
@ -171,257 +194,6 @@ export const NAV_DISPLAY_STYLE =
|
|||
export const BUTTON_DIV_STYLE = " flex gap-2 ";
|
||||
(" focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ");
|
||||
|
||||
/**
|
||||
* Default description for the flow
|
||||
* @constant
|
||||
*/
|
||||
export const DESCRIPTIONS: string[] = [
|
||||
"Chain the Words, Master Language!",
|
||||
"Language Architect at Work!",
|
||||
"Empowering Language Engineering.",
|
||||
"Craft Language Connections Here.",
|
||||
"Create, Connect, Converse.",
|
||||
"Smart Chains, Smarter Conversations.",
|
||||
"Bridging Prompts for Brilliance.",
|
||||
"Language Models, Unleashed.",
|
||||
"Your Hub for Text Generation.",
|
||||
"Promptly Ingenious!",
|
||||
"Building Linguistic Labyrinths.",
|
||||
"LangFlow: Create, Chain, Communicate.",
|
||||
"Connect the Dots, Craft Language.",
|
||||
"Interactive Language Weaving.",
|
||||
"Generate, Innovate, Communicate.",
|
||||
"Conversation Catalyst Engine.",
|
||||
"Language Chainlink Master.",
|
||||
"Design Dialogues with LangFlow.",
|
||||
"Nurture NLP Nodes Here.",
|
||||
"Conversational Cartography Unlocked.",
|
||||
"Design, Develop, Dialogize.",
|
||||
];
|
||||
|
||||
/**
|
||||
* Adjectives for the name of the flow
|
||||
* @constant
|
||||
*
|
||||
*/
|
||||
export const ADJECTIVES: string[] = [
|
||||
"admiring",
|
||||
"adoring",
|
||||
"agitated",
|
||||
"amazing",
|
||||
"angry",
|
||||
"awesome",
|
||||
"backstabbing",
|
||||
"berserk",
|
||||
"big",
|
||||
"boring",
|
||||
"clever",
|
||||
"cocky",
|
||||
"compassionate",
|
||||
"condescending",
|
||||
"cranky",
|
||||
"desperate",
|
||||
"determined",
|
||||
"distracted",
|
||||
"dreamy",
|
||||
"drunk",
|
||||
"ecstatic",
|
||||
"elated",
|
||||
"elegant",
|
||||
"evil",
|
||||
"fervent",
|
||||
"focused",
|
||||
"furious",
|
||||
"gigantic",
|
||||
"gloomy",
|
||||
"goofy",
|
||||
"grave",
|
||||
"happy",
|
||||
"high",
|
||||
"hopeful",
|
||||
"hungry",
|
||||
"insane",
|
||||
"jolly",
|
||||
"jovial",
|
||||
"kickass",
|
||||
"lonely",
|
||||
"loving",
|
||||
"mad",
|
||||
"modest",
|
||||
"naughty",
|
||||
"nauseous",
|
||||
"nostalgic",
|
||||
"pedantic",
|
||||
"pensive",
|
||||
"prickly",
|
||||
"reverent",
|
||||
"romantic",
|
||||
"sad",
|
||||
"serene",
|
||||
"sharp",
|
||||
"sick",
|
||||
"silly",
|
||||
"sleepy",
|
||||
"small",
|
||||
"stoic",
|
||||
"stupefied",
|
||||
"suspicious",
|
||||
"tender",
|
||||
"thirsty",
|
||||
"tiny",
|
||||
"trusting",
|
||||
];
|
||||
|
||||
/**
|
||||
* Nouns for the name of the flow
|
||||
* @constant
|
||||
*
|
||||
*/
|
||||
export const NOUNS: string[] = [
|
||||
"albattani",
|
||||
"allen",
|
||||
"almeida",
|
||||
"archimedes",
|
||||
"ardinghelli",
|
||||
"aryabhata",
|
||||
"austin",
|
||||
"babbage",
|
||||
"banach",
|
||||
"bardeen",
|
||||
"bartik",
|
||||
"bassi",
|
||||
"bell",
|
||||
"bhabha",
|
||||
"bhaskara",
|
||||
"blackwell",
|
||||
"bohr",
|
||||
"booth",
|
||||
"borg",
|
||||
"bose",
|
||||
"boyd",
|
||||
"brahmagupta",
|
||||
"brattain",
|
||||
"brown",
|
||||
"carson",
|
||||
"chandrasekhar",
|
||||
"colden",
|
||||
"cori",
|
||||
"cray",
|
||||
"curie",
|
||||
"darwin",
|
||||
"davinci",
|
||||
"dijkstra",
|
||||
"dubinsky",
|
||||
"easley",
|
||||
"einstein",
|
||||
"elion",
|
||||
"engelbart",
|
||||
"euclid",
|
||||
"euler",
|
||||
"fermat",
|
||||
"fermi",
|
||||
"feynman",
|
||||
"franklin",
|
||||
"galileo",
|
||||
"gates",
|
||||
"goldberg",
|
||||
"goldstine",
|
||||
"goldwasser",
|
||||
"golick",
|
||||
"goodall",
|
||||
"hamilton",
|
||||
"hawking",
|
||||
"heisenberg",
|
||||
"heyrovsky",
|
||||
"hodgkin",
|
||||
"hoover",
|
||||
"hopper",
|
||||
"hugle",
|
||||
"hypatia",
|
||||
"jang",
|
||||
"jennings",
|
||||
"jepsen",
|
||||
"joliot",
|
||||
"jones",
|
||||
"kalam",
|
||||
"kare",
|
||||
"keller",
|
||||
"khorana",
|
||||
"kilby",
|
||||
"kirch",
|
||||
"knuth",
|
||||
"kowalevski",
|
||||
"lalande",
|
||||
"lamarr",
|
||||
"leakey",
|
||||
"leavitt",
|
||||
"lichterman",
|
||||
"liskov",
|
||||
"lovelace",
|
||||
"lumiere",
|
||||
"mahavira",
|
||||
"mayer",
|
||||
"mccarthy",
|
||||
"mcclintock",
|
||||
"mclean",
|
||||
"mcnulty",
|
||||
"meitner",
|
||||
"meninsky",
|
||||
"mestorf",
|
||||
"minsky",
|
||||
"mirzakhani",
|
||||
"morse",
|
||||
"murdock",
|
||||
"newton",
|
||||
"nobel",
|
||||
"noether",
|
||||
"northcutt",
|
||||
"noyce",
|
||||
"panini",
|
||||
"pare",
|
||||
"pasteur",
|
||||
"payne",
|
||||
"perlman",
|
||||
"pike",
|
||||
"poincare",
|
||||
"poitras",
|
||||
"ptolemy",
|
||||
"raman",
|
||||
"ramanujan",
|
||||
"ride",
|
||||
"ritchie",
|
||||
"roentgen",
|
||||
"rosalind",
|
||||
"saha",
|
||||
"sammet",
|
||||
"shaw",
|
||||
"shirley",
|
||||
"shockley",
|
||||
"sinoussi",
|
||||
"snyder",
|
||||
"spence",
|
||||
"stallman",
|
||||
"stonebraker",
|
||||
"swanson",
|
||||
"swartz",
|
||||
"swirles",
|
||||
"tesla",
|
||||
"thompson",
|
||||
"torvalds",
|
||||
"turing",
|
||||
"varahamihira",
|
||||
"visvesvaraya",
|
||||
"volhard",
|
||||
"wescoff",
|
||||
"williams",
|
||||
"wilson",
|
||||
"wing",
|
||||
"wozniak",
|
||||
"wright",
|
||||
"yalow",
|
||||
"yonath",
|
||||
];
|
||||
|
||||
/**
|
||||
* Header text for user projects
|
||||
* @constant
|
||||
|
|
|
|||
|
|
@ -78,9 +78,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
|
|||
* @param newState An object containing the new error data, including title and optional list of error messages
|
||||
*/
|
||||
function setErrorData(newState: { title: string; list?: Array<string> }) {
|
||||
setErrorDataState(newState);
|
||||
setErrorOpen(true);
|
||||
if (newState.title && newState.title !== "") {
|
||||
setErrorDataState(newState);
|
||||
setErrorOpen(true);
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
type: "error",
|
||||
|
|
@ -95,9 +95,9 @@ export function AlertProvider({ children }: { children: ReactNode }) {
|
|||
* @param newState An object containing the title of the notice and optionally a link.
|
||||
*/
|
||||
function setNoticeData(newState: { title: string; link?: string }) {
|
||||
setNoticeDataState(newState);
|
||||
setNoticeOpen(true);
|
||||
if (newState.title && newState.title !== "") {
|
||||
setNoticeDataState(newState);
|
||||
setNoticeOpen(true);
|
||||
// Add new notice to notification center
|
||||
setNotificationCenter(true);
|
||||
pushNotificationList({
|
||||
|
|
@ -113,11 +113,10 @@ export function AlertProvider({ children }: { children: ReactNode }) {
|
|||
* @param newState - A state object with a "title" property to set in the success data state.
|
||||
*/
|
||||
function setSuccessData(newState: { title: string }) {
|
||||
setSuccessDataState(newState); // update the success data state with the provided new state
|
||||
setSuccessOpen(true); // open the success alert
|
||||
|
||||
// If the new state has a "title" property, add a new success notification to the list
|
||||
if (newState.title && newState.title !== "") {
|
||||
setSuccessDataState(newState); // update the success data state with the provided new state
|
||||
setSuccessOpen(true); // open the success alert
|
||||
setNotificationCenter(true); // show the notification center
|
||||
pushNotificationList({
|
||||
// add the new notification to the list
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import React, { useState } from "react";
|
|||
export const PopUpContext = createContext({
|
||||
openPopUp: (popUpElement: JSX.Element) => {},
|
||||
closePopUp: () => {},
|
||||
setCloseEdit: (value: string) => {},
|
||||
closeEdit: "",
|
||||
});
|
||||
|
||||
interface PopUpProviderProps {
|
||||
|
|
@ -22,8 +24,12 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => {
|
|||
setPopUpElements((prevPopUps) => prevPopUps.slice(1));
|
||||
};
|
||||
|
||||
const [closeEdit, setCloseEdit] = useState("");
|
||||
|
||||
return (
|
||||
<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
|
||||
<PopUpContext.Provider
|
||||
value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}
|
||||
>
|
||||
{children}
|
||||
{popUpElements[0]}
|
||||
</PopUpContext.Provider>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ const TabsContextInitialValue: TabsContextType = {
|
|||
tabsState: {},
|
||||
setTabsState: (state: TabsState) => {},
|
||||
getNodeId: (nodeType: string) => "",
|
||||
setTweak: (tweak: any) => {},
|
||||
getTweak: {},
|
||||
paste: (
|
||||
selection: { nodes: any; edges: any },
|
||||
position: { x: number; y: number; paneX?: number; paneY?: number }
|
||||
|
|
@ -73,6 +75,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
const { templates, reactFlowInstance } = useContext(typesContext);
|
||||
const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
|
||||
const [tabsState, setTabsState] = useState<TabsState>({});
|
||||
const [getTweak, setTweak] = useState({});
|
||||
|
||||
const newNodeId = useRef(uid());
|
||||
function incrementNodeId() {
|
||||
|
|
@ -198,10 +201,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
edge.style = { stroke: "#555555" };
|
||||
});
|
||||
}
|
||||
|
||||
function updateDisplay_name(node: NodeType, template: APIClassType) {
|
||||
node.data.node.display_name = template["display_name"]
|
||||
? template["display_name"]
|
||||
: node.data.type;
|
||||
node.data.node.display_name = template["display_name"] || node.data.type;
|
||||
}
|
||||
|
||||
function updateNodeDocumentation(node: NodeType, template: APIClassType) {
|
||||
node.data.node.documentation = template["documentation"];
|
||||
}
|
||||
|
||||
function processFlowNodes(flow) {
|
||||
|
|
@ -218,6 +224,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
updateNodeEdges(flow, node, template);
|
||||
updateNodeDescription(node, template);
|
||||
updateNodeTemplate(node, template);
|
||||
updateNodeDocumentation(node, template);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -268,16 +275,20 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
/**
|
||||
* Downloads the current flow as a JSON file
|
||||
*/
|
||||
function downloadFlow(flow: FlowType, fileName?: string) {
|
||||
function downloadFlow(
|
||||
flow: FlowType,
|
||||
flowName: string,
|
||||
flowDescription?: string
|
||||
) {
|
||||
// create a data URI with the current flow data
|
||||
const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
|
||||
JSON.stringify(flow)
|
||||
JSON.stringify({ ...flow, name: flowName, description: flowDescription })
|
||||
)}`;
|
||||
|
||||
// create a link element and set its properties
|
||||
const link = document.createElement("a");
|
||||
link.href = jsonString;
|
||||
link.download = `${fileName && fileName != "" ? fileName : flows.find((f) => f.id === tabId).name}.json`;
|
||||
link.download = `${flowName && flowName != "" ? flowName : flows.find((f) => f.id === tabId).name}.json`;
|
||||
|
||||
// simulate a click on the link element to trigger the download
|
||||
link.click();
|
||||
|
|
@ -410,7 +421,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
y: insidePosition.y + n.position.y - minimumY,
|
||||
},
|
||||
data: {
|
||||
...n.data,
|
||||
..._.cloneDeep(n.data),
|
||||
id: newId,
|
||||
},
|
||||
};
|
||||
|
|
@ -640,6 +651,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
|||
tabsState,
|
||||
setTabsState,
|
||||
paste,
|
||||
getTweak,
|
||||
setTweak,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@ export async function getBuildStatus(
|
|||
export async function postBuildInit(
|
||||
flow: FlowType
|
||||
): Promise<AxiosResponse<InitTypeAPI>> {
|
||||
return await axios.post(`/api/v1/build/init`, flow);
|
||||
return await axios.post(`/api/v1/build/init/${flow.id}`, flow);
|
||||
}
|
||||
|
||||
// fetch(`/upload/${id}`, {
|
||||
|
|
|
|||
364
src/frontend/src/flow_constants.tsx
Normal file
364
src/frontend/src/flow_constants.tsx
Normal file
|
|
@ -0,0 +1,364 @@
|
|||
/**
|
||||
* Default description for the flow
|
||||
* @constant
|
||||
*/
|
||||
export const DESCRIPTIONS: string[] = [
|
||||
"Chain the Words, Master Language!",
|
||||
"Language Architect at Work!",
|
||||
"Empowering Language Engineering.",
|
||||
"Craft Language Connections Here.",
|
||||
"Create, Connect, Converse.",
|
||||
"Smart Chains, Smarter Conversations.",
|
||||
"Bridging Prompts for Brilliance.",
|
||||
"Language Models, Unleashed.",
|
||||
"Your Hub for Text Generation.",
|
||||
"Promptly Ingenious!",
|
||||
"Building Linguistic Labyrinths.",
|
||||
"Create, Chain, Communicate.",
|
||||
"Connect the Dots, Craft Language.",
|
||||
"Interactive Language Weaving.",
|
||||
"Generate, Innovate, Communicate.",
|
||||
"Conversation Catalyst Engine.",
|
||||
"Language Chainlink Master.",
|
||||
"Design Dialogues with LangFlow.",
|
||||
"Nurture NLP Nodes Here.",
|
||||
"Conversational Cartography Unlocked.",
|
||||
"Design, Develop, Dialogize.",
|
||||
"Unleashing Linguistic Creativity.",
|
||||
"Graph Your Way to Great Conversations.",
|
||||
"The Power of Language at Your Fingertips.",
|
||||
"Sculpting Language with Precision.",
|
||||
"Where Language Meets Logic.",
|
||||
"Building Intelligent Interactions.",
|
||||
"Your Passport to Linguistic Landscapes.",
|
||||
"Create, Curate, Communicate with LangFlow.",
|
||||
"Flow into the Future of Language.",
|
||||
"Mapping Meaningful Conversations.",
|
||||
"Unravel the Art of Articulation.",
|
||||
"Language Engineering Excellence.",
|
||||
"Navigate the Networks of Conversation.",
|
||||
"Crafting Conversations, One Node at a Time.",
|
||||
"The Pinnacle of Prompt Generation.",
|
||||
"Language Models, Mapped and Mastered.",
|
||||
"Powerful Prompts, Perfectly Positioned.",
|
||||
"Innovation in Interaction with LangFlow.",
|
||||
"Your Toolkit for Text Generation.",
|
||||
"Unfolding Linguistic Possibilities.",
|
||||
"Building Powerful Solutions with Language Models.",
|
||||
"Uncover Business Opportunities with NLP.",
|
||||
"Harness the Power of Conversational AI.",
|
||||
"Transform Your Business with Smart Dialogues.",
|
||||
"Craft Meaningful Interactions, Generate Value.",
|
||||
"Unleashing Business Potential through Language Engineering.",
|
||||
"Empowering Enterprises with Intelligent Interactions.",
|
||||
"Driving Innovation in Business Communication.",
|
||||
"Catalyzing Business Growth through Conversational AI.",
|
||||
"Text Generation Meets Business Transformation.",
|
||||
"Navigate the Linguistic Landscape, Discover Opportunities.",
|
||||
"Create Powerful Connections, Boost Business Value.",
|
||||
"Empowering Communication, Enabling Opportunities.",
|
||||
"Advanced NLP for Groundbreaking Business Solutions.",
|
||||
"Innovation in Interaction, Revolution in Revenue.",
|
||||
"Maximize Impact with Intelligent Conversations.",
|
||||
"Beyond Text Generation - Unleashing Business Opportunities.",
|
||||
"Unlock the Power of AI in Your Business Conversations.",
|
||||
"Crafting Dialogues that Drive Business Success.",
|
||||
"Engineered for Excellence, Built for Business.",
|
||||
];
|
||||
|
||||
/**
|
||||
* Adjectives for the name of the flow
|
||||
* @constant
|
||||
*
|
||||
*/
|
||||
export const ADJECTIVES: string[] = [
|
||||
"admiring",
|
||||
"adoring",
|
||||
"agitated",
|
||||
"amazing",
|
||||
"angry",
|
||||
"awesome",
|
||||
"backstabbing",
|
||||
"berserk",
|
||||
"big",
|
||||
"boring",
|
||||
"clever",
|
||||
"cocky",
|
||||
"compassionate",
|
||||
"condescending",
|
||||
"cranky",
|
||||
"desperate",
|
||||
"determined",
|
||||
"distracted",
|
||||
"dreamy",
|
||||
"drunk",
|
||||
"ecstatic",
|
||||
"elated",
|
||||
"elegant",
|
||||
"evil",
|
||||
"fervent",
|
||||
"focused",
|
||||
"furious",
|
||||
"gigantic",
|
||||
"gloomy",
|
||||
"goofy",
|
||||
"grave",
|
||||
"happy",
|
||||
"high",
|
||||
"hopeful",
|
||||
"hungry",
|
||||
"insane",
|
||||
"jolly",
|
||||
"jovial",
|
||||
"kickass",
|
||||
"lonely",
|
||||
"loving",
|
||||
"mad",
|
||||
"modest",
|
||||
"naughty",
|
||||
"nauseous",
|
||||
"nostalgic",
|
||||
"pedantic",
|
||||
"pensive",
|
||||
"prickly",
|
||||
"reverent",
|
||||
"romantic",
|
||||
"sad",
|
||||
"serene",
|
||||
"sharp",
|
||||
"sick",
|
||||
"silly",
|
||||
"sleepy",
|
||||
"small",
|
||||
"stoic",
|
||||
"stupefied",
|
||||
"suspicious",
|
||||
"tender",
|
||||
"thirsty",
|
||||
"tiny",
|
||||
"trusting",
|
||||
"bubbly",
|
||||
"charming",
|
||||
"cheerful",
|
||||
"comical",
|
||||
"dazzling",
|
||||
"delighted",
|
||||
"dynamic",
|
||||
"effervescent",
|
||||
"enthusiastic",
|
||||
"exuberant",
|
||||
"fluffy",
|
||||
"friendly",
|
||||
"funky",
|
||||
"giddy",
|
||||
"giggly",
|
||||
"gleeful",
|
||||
"goofy",
|
||||
"graceful",
|
||||
"grinning",
|
||||
"hilarious",
|
||||
"inquisitive",
|
||||
"joyous",
|
||||
"jubilant",
|
||||
"lively",
|
||||
"mirthful",
|
||||
"mischievous",
|
||||
"optimistic",
|
||||
"peppy",
|
||||
"perky",
|
||||
"playful",
|
||||
"quirky",
|
||||
"radiant",
|
||||
"sassy",
|
||||
"silly",
|
||||
"spirited",
|
||||
"sprightly",
|
||||
"twinkly",
|
||||
"upbeat",
|
||||
"vibrant",
|
||||
"witty",
|
||||
"zany",
|
||||
"zealous",
|
||||
];
|
||||
/**
|
||||
* Nouns for the name of the flow
|
||||
* @constant
|
||||
*
|
||||
*/
|
||||
export const NOUNS: string[] = [
|
||||
"albattani",
|
||||
"allen",
|
||||
"almeida",
|
||||
"archimedes",
|
||||
"ardinghelli",
|
||||
"aryabhata",
|
||||
"austin",
|
||||
"babbage",
|
||||
"banach",
|
||||
"bardeen",
|
||||
"bartik",
|
||||
"bassi",
|
||||
"bell",
|
||||
"bhabha",
|
||||
"bhaskara",
|
||||
"blackwell",
|
||||
"bohr",
|
||||
"booth",
|
||||
"borg",
|
||||
"bose",
|
||||
"boyd",
|
||||
"brahmagupta",
|
||||
"brattain",
|
||||
"brown",
|
||||
"carson",
|
||||
"chandrasekhar",
|
||||
"colden",
|
||||
"cori",
|
||||
"cray",
|
||||
"curie",
|
||||
"darwin",
|
||||
"davinci",
|
||||
"dijkstra",
|
||||
"dubinsky",
|
||||
"easley",
|
||||
"einstein",
|
||||
"elion",
|
||||
"engelbart",
|
||||
"euclid",
|
||||
"euler",
|
||||
"fermat",
|
||||
"fermi",
|
||||
"feynman",
|
||||
"franklin",
|
||||
"galileo",
|
||||
"gates",
|
||||
"goldberg",
|
||||
"goldstine",
|
||||
"goldwasser",
|
||||
"golick",
|
||||
"goodall",
|
||||
"hamilton",
|
||||
"hawking",
|
||||
"heisenberg",
|
||||
"heyrovsky",
|
||||
"hodgkin",
|
||||
"hoover",
|
||||
"hopper",
|
||||
"hugle",
|
||||
"hypatia",
|
||||
"jang",
|
||||
"jennings",
|
||||
"jepsen",
|
||||
"joliot",
|
||||
"jones",
|
||||
"kalam",
|
||||
"kare",
|
||||
"keller",
|
||||
"khorana",
|
||||
"kilby",
|
||||
"kirch",
|
||||
"knuth",
|
||||
"kowalevski",
|
||||
"lalande",
|
||||
"lamarr",
|
||||
"leakey",
|
||||
"leavitt",
|
||||
"lichterman",
|
||||
"liskov",
|
||||
"lovelace",
|
||||
"lumiere",
|
||||
"mahavira",
|
||||
"mayer",
|
||||
"mccarthy",
|
||||
"mcclintock",
|
||||
"mclean",
|
||||
"mcnulty",
|
||||
"meitner",
|
||||
"meninsky",
|
||||
"mestorf",
|
||||
"minsky",
|
||||
"mirzakhani",
|
||||
"morse",
|
||||
"murdock",
|
||||
"newton",
|
||||
"nobel",
|
||||
"noether",
|
||||
"northcutt",
|
||||
"noyce",
|
||||
"panini",
|
||||
"pare",
|
||||
"pasteur",
|
||||
"payne",
|
||||
"perlman",
|
||||
"pike",
|
||||
"poincare",
|
||||
"poitras",
|
||||
"ptolemy",
|
||||
"raman",
|
||||
"ramanujan",
|
||||
"ride",
|
||||
"ritchie",
|
||||
"roentgen",
|
||||
"rosalind",
|
||||
"saha",
|
||||
"sammet",
|
||||
"shaw",
|
||||
"shirley",
|
||||
"shockley",
|
||||
"sinoussi",
|
||||
"snyder",
|
||||
"spence",
|
||||
"stallman",
|
||||
"stonebraker",
|
||||
"swanson",
|
||||
"swartz",
|
||||
"swirles",
|
||||
"tesla",
|
||||
"thompson",
|
||||
"torvalds",
|
||||
"turing",
|
||||
"varahamihira",
|
||||
"visvesvaraya",
|
||||
"volhard",
|
||||
"wescoff",
|
||||
"williams",
|
||||
"wilson",
|
||||
"wing",
|
||||
"wozniak",
|
||||
"wright",
|
||||
"yalow",
|
||||
"yonath",
|
||||
"coulomb",
|
||||
"degrasse",
|
||||
"dewey",
|
||||
"edison",
|
||||
"eratosthenes",
|
||||
"faraday",
|
||||
"galton",
|
||||
"gauss",
|
||||
"herschel",
|
||||
"hubble",
|
||||
"joule",
|
||||
"kaku",
|
||||
"kepler",
|
||||
"khayyam",
|
||||
"lavoisier",
|
||||
"maxwell",
|
||||
"mendel",
|
||||
"mendeleev",
|
||||
"ohm",
|
||||
"pascal",
|
||||
"planck",
|
||||
"riemann",
|
||||
"schrodinger",
|
||||
"sagan",
|
||||
"tesla",
|
||||
"tyson",
|
||||
"volta",
|
||||
"watt",
|
||||
"weber",
|
||||
"wien",
|
||||
"zoBell",
|
||||
"zuse",
|
||||
"carroll",
|
||||
];
|
||||
9
src/frontend/src/icons/VertexAI/index.tsx
Normal file
9
src/frontend/src/icons/VertexAI/index.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React, { forwardRef } from "react";
|
||||
import { ReactComponent as VertexAISVG } from "./vertex_ai.svg";
|
||||
|
||||
export const VertexAIIcon = forwardRef<
|
||||
SVGSVGElement,
|
||||
React.PropsWithChildren<{}>
|
||||
>((props, ref) => {
|
||||
return <VertexAISVG ref={ref} {...props} />;
|
||||
});
|
||||
1
src/frontend/src/icons/VertexAI/vertex_ai.svg
Normal file
1
src/frontend/src/icons/VertexAI/vertex_ai.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 32 32" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M26.69 18.53a1 1 0 00-1.4-.22L16 25.17v.29a1 1 0 110 1.91v.05a1 1 0 00.6-.19l9.88-7.3a1 1 0 00.21-1.4z" fill="#80868b"></path><path d="M16 27.37a1 1 0 110-1.91v-.29l-9.29-6.86a1 1 0 00-1.4.22 1 1 0 00.21 1.4l9.89 7.3a1 1 0 00.59.19v-.05z" fill="#9ba0a5"></path><path d="M16 24.46a2 2 0 102 2 2 2 0 00-2-2zm0 2.91a1 1 0 111-.95 1 1 0 01-1 .95z" fill="#606368"></path><path d="M8 8.14a1 1 0 01-1-1V4.63a1 1 0 112 0v2.51a1 1 0 01-1 1z" fill="#9ba0a5"></path><circle cx="7.97" cy="16" r="1.01" fill="#9ba0a5"></circle><circle cx="7.97" cy="13.05" r="1.01" fill="#9ba0a5"></circle><circle cx="7.97" cy="10.09" r="1.01" fill="#9ba0a5"></circle><path d="M24 11.07a1 1 0 01-1-1V7.55a1 1 0 012 0v2.52a1 1 0 01-1 1z" fill="#606368"></path><circle cx="24.03" cy="16.01" r="1.01" fill="#606368"></circle><circle cx="24.03" cy="13.02" r="1.01" fill="#606368"></circle><circle cx="24.03" cy="4.63" r="1.01" fill="#606368"></circle><path d="M16 20a1 1 0 01-1-1v-2.54a1 1 0 012 0V19a1 1 0 01-1 1z" fill="#80868b"></path><circle cx="16" cy="21.93" r="1.01" fill="#80868b"></circle><circle cx="16" cy="13.51" r="1.01" fill="#80868b"></circle><circle cx="16" cy="10.56" r="1.01" fill="#80868b"></circle><path d="M20 14.05a1 1 0 01-1-1v-2.51a1 1 0 112 0v2.51a1 1 0 01-1 1z" fill="#606368"></path><circle cx="20.02" cy="7.58" r="1.01" fill="#606368"></circle><circle cx="20.02" cy="18.92" r="1.01" fill="#606368"></circle><circle cx="20.02" cy="15.97" r="1.01" fill="#606368"></circle><circle cx="11.98" cy="18.92" r="1.01" fill="#9ba0a5"></circle><circle cx="11.98" cy="10.56" r="1.01" fill="#9ba0a5"></circle><circle cx="11.98" cy="7.58" r="1.01" fill="#9ba0a5"></circle><path d="M12 17a1 1 0 01-1-1v-2.54a1 1 0 012 0V16a1 1 0 01-1 1z" fill="#9ba0a5"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import { useContext, useState } from "react";
|
||||
import { useContext, useEffect, useRef, useState } from "react";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import "ace-builds/src-noconflict/mode-python";
|
||||
import "ace-builds/src-noconflict/theme-github";
|
||||
|
|
@ -26,14 +26,42 @@ import {
|
|||
TabsTrigger,
|
||||
} from "../../components/ui/tabs";
|
||||
import { Check, Clipboard, Code2 } from "lucide-react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../../components/ui/table";
|
||||
import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils";
|
||||
import AccordionComponent from "../../components/AccordionComponent";
|
||||
import CodeAreaComponent from "../../components/codeAreaComponent";
|
||||
import Dropdown from "../../components/dropdownComponent";
|
||||
import FloatComponent from "../../components/floatComponent";
|
||||
import InputComponent from "../../components/inputComponent";
|
||||
import InputFileComponent from "../../components/inputFileComponent";
|
||||
import InputListComponent from "../../components/inputListComponent";
|
||||
import IntComponent from "../../components/intComponent";
|
||||
import PromptAreaComponent from "../../components/promptComponent";
|
||||
import TextAreaComponent from "../../components/textAreaComponent";
|
||||
import ToggleShadComponent from "../../components/toggleShadComponent";
|
||||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
||||
import { cloneDeep, filter } from "lodash";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
||||
export default function ApiModal({ flow }: { flow: FlowType }) {
|
||||
const [open, setOpen] = useState(true);
|
||||
const { dark } = useContext(darkContext);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
|
||||
const [activeTab, setActiveTab] = useState("0");
|
||||
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
||||
|
||||
const [enabled, setEnabled] = useState(null);
|
||||
const [openAccordion, setOpenAccordion] = useState([]);
|
||||
const tweak = useRef([]);
|
||||
const tweaksList = useRef([]);
|
||||
const { setTweak, getTweak } = useContext(TabsContext);
|
||||
const copyToClipboard = () => {
|
||||
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
||||
return;
|
||||
|
|
@ -47,18 +75,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
}, 2000);
|
||||
});
|
||||
};
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
closePopUp();
|
||||
}
|
||||
}
|
||||
|
||||
const pythonApiCode = getPythonApiCode(flow);
|
||||
|
||||
const curl_code = getCurlCode(flow);
|
||||
const pythonCode = getPythonCode(flow);
|
||||
|
||||
const pythonApiCode = getPythonApiCode(flow, tweak.current);
|
||||
const curl_code = getCurlCode(flow, tweak.current);
|
||||
const pythonCode = getPythonCode(flow, tweak.current);
|
||||
const tweaksCode = buildTweaks(flow);
|
||||
const tabs = [
|
||||
{
|
||||
name: "cURL",
|
||||
|
|
@ -80,10 +100,169 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
code: pythonCode,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (closeEdit !== "") {
|
||||
tweak.current = getTweak;
|
||||
if (tweak.current.length > 0) {
|
||||
setActiveTab("3");
|
||||
openAccordions();
|
||||
} else {
|
||||
startTweaks();
|
||||
}
|
||||
} else {
|
||||
startTweaks();
|
||||
}
|
||||
}, [closeEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
filterNodes();
|
||||
}, []);
|
||||
|
||||
if (Object.keys(tweaksCode).length > 0) {
|
||||
tabs.push({
|
||||
name: "Tweaks",
|
||||
mode: "python",
|
||||
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
|
||||
code: pythonCode,
|
||||
});
|
||||
}
|
||||
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
setCloseEdit("");
|
||||
setTweak([]);
|
||||
closePopUp();
|
||||
}
|
||||
}
|
||||
|
||||
function startTweaks() {
|
||||
tweak.current.push(buildTweaks(flow));
|
||||
}
|
||||
|
||||
function filterNodes() {
|
||||
let arrNodesWithValues = [];
|
||||
|
||||
flow["data"]["nodes"].forEach((t) => {
|
||||
Object.keys(t["data"]["node"]["template"])
|
||||
.filter(
|
||||
(n) =>
|
||||
n.charAt(0) !== "_" &&
|
||||
t.data.node.template[n].show &&
|
||||
(t.data.node.template[n].type === "str" ||
|
||||
t.data.node.template[n].type === "bool" ||
|
||||
t.data.node.template[n].type === "float" ||
|
||||
t.data.node.template[n].type === "code" ||
|
||||
t.data.node.template[n].type === "prompt" ||
|
||||
t.data.node.template[n].type === "file" ||
|
||||
t.data.node.template[n].type === "int")
|
||||
)
|
||||
.map((n, i) => {
|
||||
arrNodesWithValues.push(t["id"]);
|
||||
});
|
||||
});
|
||||
|
||||
tweaksList.current = arrNodesWithValues.filter((value, index, self) => {
|
||||
return self.indexOf(value) === index;
|
||||
});
|
||||
}
|
||||
|
||||
function buildTweakObject(tw, changes, template) {
|
||||
if (template.type === "float") {
|
||||
changes = parseFloat(changes);
|
||||
}
|
||||
if (template.type === "int") {
|
||||
changes = parseInt(changes);
|
||||
}
|
||||
if (template.list === true && Array.isArray(changes)) {
|
||||
changes = changes?.filter((x) => x !== "");
|
||||
}
|
||||
|
||||
const existingTweak = tweak.current.find((element) =>
|
||||
element.hasOwnProperty(tw)
|
||||
);
|
||||
|
||||
if (existingTweak) {
|
||||
existingTweak[tw][template["name"]] = changes;
|
||||
|
||||
if (existingTweak[tw][template["name"]] == template.value) {
|
||||
tweak.current.forEach((element) => {
|
||||
if (element[tw] && Object.keys(element[tw])?.length === 0) {
|
||||
tweak.current = tweak.current.filter((obj) => {
|
||||
const prop = obj[Object.keys(obj)[0]].prop;
|
||||
return prop !== undefined && prop !== null && prop !== "";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const newTweak = {
|
||||
[tw]: {
|
||||
[template["name"]]: changes,
|
||||
},
|
||||
};
|
||||
tweak.current.push(newTweak);
|
||||
}
|
||||
|
||||
const pythonApiCode = getPythonApiCode(flow, tweak.current);
|
||||
const curl_code = getCurlCode(flow, tweak.current);
|
||||
const pythonCode = getPythonCode(flow, tweak.current);
|
||||
|
||||
tabs[0].code = curl_code;
|
||||
tabs[1].code = pythonApiCode;
|
||||
tabs[2].code = pythonCode;
|
||||
|
||||
setTweak(tweak.current);
|
||||
}
|
||||
|
||||
function buildContent(value) {
|
||||
const htmlContent = (
|
||||
<div className="w-[200px]">
|
||||
<span>{value != null && value != "" ? value : "None"}</span>
|
||||
</div>
|
||||
);
|
||||
return htmlContent;
|
||||
}
|
||||
|
||||
function getValue(value, node, template) {
|
||||
let returnValue = value ?? "";
|
||||
|
||||
if (getTweak.length > 0) {
|
||||
for (const obj of getTweak) {
|
||||
Object.keys(obj).forEach((key) => {
|
||||
const value = obj[key];
|
||||
if (key == node["id"]) {
|
||||
Object.keys(value).forEach((key) => {
|
||||
if (key == template["name"]) {
|
||||
returnValue = value[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return value ?? "";
|
||||
}
|
||||
return returnValue;
|
||||
}
|
||||
|
||||
function openAccordions() {
|
||||
let accordionsToOpen = [];
|
||||
tweak.current.forEach((el) => {
|
||||
Object.keys(el).forEach((key) => {
|
||||
if (Object.keys(el[key]).length > 0) {
|
||||
accordionsToOpen.push(key);
|
||||
setOpenAccordion(accordionsToOpen);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
||||
<DialogTrigger></DialogTrigger>
|
||||
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
|
||||
<DialogContent className="h-[580px] sm:max-w-[700px] lg:max-w-[850px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Code</span>
|
||||
|
|
@ -93,9 +272,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
</DialogHeader>
|
||||
|
||||
<Tabs
|
||||
defaultValue={"0"}
|
||||
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
|
||||
onValueChange={(value) => setActiveTab(value)}
|
||||
value={activeTab}
|
||||
className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
|
||||
onValueChange={(value) => {
|
||||
setActiveTab(value);
|
||||
if (value === "3") {
|
||||
openAccordions();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<TabsList>
|
||||
|
|
@ -119,15 +303,449 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
|||
{tabs.map((tab, index) => (
|
||||
<TabsContent
|
||||
value={index.toString()}
|
||||
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
|
||||
className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
|
||||
key={index} // Remember to add a unique key prop
|
||||
>
|
||||
<SyntaxHighlighter
|
||||
className="h-[400px] w-full overflow-auto"
|
||||
language={tab.mode}
|
||||
style={oneDark}
|
||||
>
|
||||
{tab.code}
|
||||
</SyntaxHighlighter>
|
||||
{index < 3 ? (
|
||||
<SyntaxHighlighter
|
||||
className="h-[400px] w-full overflow-auto"
|
||||
language={tab.mode}
|
||||
style={oneDark}
|
||||
>
|
||||
{tab.code}
|
||||
</SyntaxHighlighter>
|
||||
) : index === 3 ? (
|
||||
<>
|
||||
<div className="mt-2 flex h-[400px] w-full">
|
||||
<div
|
||||
className={classNames(
|
||||
"w-full rounded-lg border-[1px] border-gray-200 bg-muted",
|
||||
1 == 1
|
||||
? "overflow-scroll overflow-x-hidden custom-scroll"
|
||||
: "overflow-hidden"
|
||||
)}
|
||||
>
|
||||
{flow["data"]["nodes"].map((t: any, index) => (
|
||||
<div className="px-3" key={index}>
|
||||
{tweaksList.current.includes(t["data"]["id"]) && (
|
||||
<AccordionComponent
|
||||
trigger={t["data"]["id"]}
|
||||
open={openAccordion}
|
||||
>
|
||||
<div className="flex h-fit flex-col gap-5">
|
||||
<Table className="table-fixed bg-muted outline-1">
|
||||
<TableHeader className="h-10 border-gray-200 text-xs font-medium text-gray-500">
|
||||
<TableRow className="dark:border-b-muted">
|
||||
<TableHead className="h-7 text-center">
|
||||
PARAM
|
||||
</TableHead>
|
||||
<TableHead className="h-7 p-0 text-center">
|
||||
VALUE
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="p-0">
|
||||
{Object.keys(t["data"]["node"]["template"])
|
||||
.filter(
|
||||
(n) =>
|
||||
n.charAt(0) !== "_" &&
|
||||
t.data.node.template[n].show &&
|
||||
(t.data.node.template[n].type ===
|
||||
"str" ||
|
||||
t.data.node.template[n].type ===
|
||||
"bool" ||
|
||||
t.data.node.template[n].type ===
|
||||
"float" ||
|
||||
t.data.node.template[n].type ===
|
||||
"code" ||
|
||||
t.data.node.template[n].type ===
|
||||
"prompt" ||
|
||||
t.data.node.template[n].type ===
|
||||
"file" ||
|
||||
t.data.node.template[n].type ===
|
||||
"int")
|
||||
)
|
||||
.map((n, i) => {
|
||||
//console.log(t.data.node.template[n]);
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={i}
|
||||
className="h-10 dark:border-b-muted"
|
||||
>
|
||||
<TableCell className="p-0 text-center text-sm text-gray-900">
|
||||
{n}
|
||||
</TableCell>
|
||||
<TableCell className="p-0 text-center text-xs text-gray-900 dark:text-gray-300">
|
||||
<div className="m-auto w-[250px]">
|
||||
{t.data.node.template[n]
|
||||
.type === "str" &&
|
||||
!t.data.node.template[n]
|
||||
.options ? (
|
||||
<div className="mx-auto">
|
||||
{t.data.node.template[n]
|
||||
.list ? (
|
||||
<InputListComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={
|
||||
!t.data.node.template[
|
||||
n
|
||||
].value ||
|
||||
t.data.node.template[
|
||||
n
|
||||
].value === ""
|
||||
? [""]
|
||||
: t.data.node
|
||||
.template[n]
|
||||
.value
|
||||
}
|
||||
onChange={(k) => {}}
|
||||
onAddInput={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : t.data.node.template[n]
|
||||
.multiline ? (
|
||||
<ShadTooltip
|
||||
delayDuration={1000}
|
||||
content={buildContent(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<TextAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node
|
||||
.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node
|
||||
.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : (
|
||||
<InputComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
password={
|
||||
t.data.node.template[
|
||||
n
|
||||
].password ?? false
|
||||
}
|
||||
value={getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "bool" ? (
|
||||
<div className="ml-auto">
|
||||
{" "}
|
||||
<ToggleShadComponent
|
||||
enabled={
|
||||
t.data.node.template[n]
|
||||
.value
|
||||
}
|
||||
setEnabled={(e) => {
|
||||
t.data.node.template[
|
||||
n
|
||||
].value = e;
|
||||
setEnabled(e);
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
e,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
size="small"
|
||||
disabled={false}
|
||||
/>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "file" ? (
|
||||
<ShadTooltip
|
||||
delayDuration={1000}
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<InputFileComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={
|
||||
t.data.node.template[
|
||||
n
|
||||
].value ?? ""
|
||||
}
|
||||
onChange={(
|
||||
k: any
|
||||
) => {}}
|
||||
fileTypes={
|
||||
t.data.node.template[
|
||||
n
|
||||
].fileTypes
|
||||
}
|
||||
suffixes={
|
||||
t.data.node.template[
|
||||
n
|
||||
].suffixes
|
||||
}
|
||||
onFileChange={(
|
||||
k: any
|
||||
) => {}}
|
||||
></InputFileComponent>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : t.data.node.template[n]
|
||||
.type === "float" ? (
|
||||
<div className="mx-auto">
|
||||
<FloatComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "str" &&
|
||||
t.data.node.template[n]
|
||||
.options ? (
|
||||
<div className="mx-auto">
|
||||
<Dropdown
|
||||
editNode={true}
|
||||
apiModal={true}
|
||||
options={
|
||||
t.data.node.template[n]
|
||||
.options
|
||||
}
|
||||
onSelect={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
value={getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
></Dropdown>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "int" ? (
|
||||
<div className="mx-auto">
|
||||
<IntComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "prompt" ? (
|
||||
<ShadTooltip
|
||||
delayDuration={1000}
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<PromptAreaComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : t.data.node.template[n]
|
||||
.type === "code" ? (
|
||||
<ShadTooltip
|
||||
delayDuration={1000}
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<CodeAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : t.data.node.template[n]
|
||||
.type === "Any" ? (
|
||||
"-"
|
||||
) : (
|
||||
<div className="hidden"></div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</AccordionComponent>
|
||||
)}
|
||||
|
||||
{tweaksList.current.length === 0 && (
|
||||
<>
|
||||
<div className="pt-3">
|
||||
No tweaks are available for this flow.
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/*
|
||||
<div className="flex flex-col gap-5 bg-muted">
|
||||
<Table className="table-fixed bg-muted outline-1">
|
||||
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
|
||||
<TableRow className="dark:border-b-muted">
|
||||
<TableHead className="h-5 text-center">
|
||||
TWEAK
|
||||
</TableHead>
|
||||
<TableHead className="p-0 h-5 text-center">
|
||||
VALUE
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{invoices.map((invoice) => (
|
||||
<TableRow className="p-0 text-center text-gray-900 text-sm">
|
||||
<TableCell className="p-2 text-center text-gray-900 text-sm truncate">
|
||||
{invoice.paymentStatus}
|
||||
</TableCell>
|
||||
<TableCell className="p-2 text-center text-gray-900 text-sm truncate">
|
||||
{invoice.paymentMethod}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
|||
<DialogDescription>
|
||||
{data.node?.description}
|
||||
<div className="flex pt-4">
|
||||
<Variable className="w-5 h-5 pe-1 text-muted-foreground stroke-2 "></Variable>
|
||||
<Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
|
||||
<span className="text-sm font-semibold text-primary ">
|
||||
Parameters
|
||||
</span>
|
||||
|
|
@ -98,25 +98,25 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex w-full max-h-[350px] h-fit">
|
||||
<div className="flex h-fit max-h-[350px] w-full">
|
||||
<div
|
||||
className={classNames(
|
||||
"w-full rounded-lg bg-background border-[1px] border-input",
|
||||
"w-full rounded-lg border-[1px] border-input bg-background",
|
||||
nodeLength > limitScrollFieldsModal
|
||||
? "overflow-scroll overflow-x-hidden custom-scroll"
|
||||
: "overflow-hidden"
|
||||
)}
|
||||
>
|
||||
{nodeLength > 0 && (
|
||||
<div className="flex flex-col gap-5 h-fit">
|
||||
<div className="flex h-fit flex-col gap-5">
|
||||
<Table className="table-fixed bg-muted outline-1">
|
||||
<TableHeader className="border-input text-ring text-xs font-medium h-10">
|
||||
<TableHeader className="h-10 border-input text-xs font-medium text-ring">
|
||||
<TableRow className="">
|
||||
<TableHead className="h-7 text-center">PARAM</TableHead>
|
||||
<TableHead className="p-0 h-7 text-center">
|
||||
<TableHead className="h-7 p-0 text-center">
|
||||
VALUE
|
||||
</TableHead>
|
||||
<TableHead className="text-center h-7">SHOW</TableHead>
|
||||
<TableHead className="h-7 text-center">SHOW</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="p-0">
|
||||
|
|
@ -135,12 +135,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
|
|||
)
|
||||
.map((n, i) => (
|
||||
<TableRow key={i} className="h-10 ">
|
||||
<TableCell className="p-0 text-center text-foreground text-sm">
|
||||
<TableCell className="p-0 text-center text-sm text-foreground">
|
||||
{data.node.template[n].name
|
||||
? data.node.template[n].name
|
||||
: data.node.template[n].display_name}
|
||||
</TableCell>
|
||||
<TableCell className="p-0 text-center text-foreground text-xs w-[300px] ">
|
||||
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
|
||||
{data.node.template[n].type === "str" &&
|
||||
!data.node.template[n].options ? (
|
||||
<div className="mx-auto">
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default function ModalField({
|
|||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
"flex flex-row w-full items-center justify-between",
|
||||
"flex w-full flex-row items-center justify-between",
|
||||
display ? "" : "hidden",
|
||||
Object.keys(data.node.template).filter(
|
||||
(t) =>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ import {
|
|||
classNames,
|
||||
limitScrollFieldsModal,
|
||||
nodeColors,
|
||||
nodeIcons,
|
||||
toNormalCase,
|
||||
nodeIconsLucide,
|
||||
toTitleCase,
|
||||
} from "../../utils";
|
||||
import { typesContext } from "../../contexts/typesContext";
|
||||
|
|
@ -28,7 +27,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
|
|||
}
|
||||
}
|
||||
// any to avoid type conflict
|
||||
const Icon: any = nodeIcons[types[data.type]];
|
||||
const Icon: any = nodeIconsLucide[types[data.type]];
|
||||
return (
|
||||
<Transition.Root show={open} appear={true} as={Fragment}>
|
||||
<Dialog
|
||||
|
|
@ -60,8 +59,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]">
|
||||
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
|
||||
<Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
|
||||
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md text-ring hover:text-accent-foreground"
|
||||
|
|
@ -73,11 +72,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
|
|||
<X className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-full w-full flex flex-col justify-center items-center">
|
||||
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<div className="z-10 flex w-full justify-center pb-4 shadow-sm">
|
||||
<Icon
|
||||
strokeWidth={1.5}
|
||||
className="w-10 mt-4 h-10 p-1 rounded"
|
||||
className="mt-4 h-10 w-10 rounded p-1"
|
||||
style={{
|
||||
color:
|
||||
nodeColors[types[data.type]] ?? nodeColors.unknown,
|
||||
|
|
@ -92,11 +91,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
|
|||
</Dialog.Title>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
|
||||
<div className="flex w-full h-[445px]">
|
||||
<div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
|
||||
<div className="flex h-[445px] w-full">
|
||||
<div
|
||||
className={classNames(
|
||||
"px-4 sm:p-4 w-full rounded-lg bg-background shadow",
|
||||
"w-full rounded-lg bg-background px-4 shadow sm:p-4",
|
||||
Object.keys(data.node.template).filter(
|
||||
(t) =>
|
||||
t.charAt(0) !== "_" &&
|
||||
|
|
@ -107,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
|
|||
: "overflow-hidden"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col h-full gap-5">
|
||||
<div className="flex h-full flex-col gap-5">
|
||||
{Object.keys(data.node.template)
|
||||
.filter(
|
||||
(t) =>
|
||||
|
|
@ -145,7 +144,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
|
||||
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default function ChatInput({
|
|||
lockChat
|
||||
? " bg-input text-foreground "
|
||||
: " bg-background text-foreground ",
|
||||
"form-input block w-full custom-scroll rounded-md border-ring pr-10 sm:text-sm" +
|
||||
"form-input block w-full rounded-md border-ring pr-10 custom-scroll sm:text-sm" +
|
||||
INPUT_STYLE
|
||||
)}
|
||||
placeholder={"Send a message..."}
|
||||
|
|
@ -62,7 +62,7 @@ export default function ChatInput({
|
|||
<button disabled={lockChat} onClick={() => sendMessage()}>
|
||||
{lockChat ? (
|
||||
<Lock
|
||||
className="h-5 w-5 text-ring animate-pulse"
|
||||
className="h-5 w-5 animate-pulse text-ring"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -48,12 +48,12 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
|
|||
};
|
||||
return (
|
||||
<div className="codeblock font-sans text-[16px]">
|
||||
<div className="flex items-center justify-between py-1.5 px-4">
|
||||
<div className="flex items-center justify-between px-4 py-1.5">
|
||||
<span className="text-xs lowercase text-background">{language}</span>
|
||||
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-background"
|
||||
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import remarkMath from "remark-math";
|
|||
import { CodeBlock } from "./codeBlock";
|
||||
import Convert from "ansi-to-html";
|
||||
import { User2, MessageCircle } from "lucide-react";
|
||||
|
||||
import DOMPurify from "dompurify";
|
||||
export default function ChatMessage({
|
||||
chat,
|
||||
lockChat,
|
||||
|
|
@ -31,58 +31,58 @@ export default function ChatMessage({
|
|||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
"w-full py-2 pl-2 flex",
|
||||
"flex w-full py-2 pl-2",
|
||||
chat.isSend ? "bg-background " : "bg-input"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center"
|
||||
"my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full"
|
||||
)}
|
||||
>
|
||||
{!chat.isSend && (
|
||||
<div className="relative w-8 h-8">
|
||||
<div className="relative h-8 w-8">
|
||||
<img
|
||||
className={
|
||||
"absolute transition-opacity duration-500 scale-150 " +
|
||||
"absolute scale-150 transition-opacity duration-500 " +
|
||||
(lockChat ? "opacity-100" : "opacity-0")
|
||||
}
|
||||
src={lastMessage ? AiIcon : AiIconStill}
|
||||
/>
|
||||
<img
|
||||
className={
|
||||
"absolute transition-opacity duration-500 scale-150 " +
|
||||
"absolute scale-150 transition-opacity duration-500 " +
|
||||
(lockChat ? "opacity-0" : "opacity-100")
|
||||
}
|
||||
src={AiIconStill}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{chat.isSend && <User2 className="w-6 h-6 -mb-1 text-primary " />}
|
||||
{chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />}
|
||||
</div>
|
||||
{!chat.isSend ? (
|
||||
<div className="w-full text-start flex items-center">
|
||||
<div className="w-full relative text-start inline-block text-muted-foreground text-sm font-normal">
|
||||
<div className="flex w-full items-center text-start">
|
||||
<div className="relative inline-block w-full text-start text-sm font-normal text-muted-foreground">
|
||||
{hidden && chat.thought && chat.thought !== "" && (
|
||||
<div
|
||||
onClick={() => setHidden((prev) => !prev)}
|
||||
className="absolute -top-1 -left-2 cursor-pointer"
|
||||
className="absolute -left-2 -top-1 cursor-pointer"
|
||||
>
|
||||
<MessageCircle className="w-5 h-5 animate-bounce " />
|
||||
<MessageCircle className="h-5 w-5 animate-bounce " />
|
||||
</div>
|
||||
)}
|
||||
{chat.thought && chat.thought !== "" && !hidden && (
|
||||
<div
|
||||
onClick={() => setHidden((prev) => !prev)}
|
||||
className=" text-start inline-block rounded-md text-muted-foreground h-full border border-ring
|
||||
bg-muted w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
|
||||
className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md
|
||||
border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground scrollbar-hide"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: convert.toHtml(chat.thought),
|
||||
__html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
{chat.thought && chat.thought !== "" && !hidden && <br></br>}
|
||||
<div className="w-full px-4 pb-3 pt-3 pr-8">
|
||||
<div className="w-full px-4 pb-3 pr-8 pt-3">
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<ReactMarkdown
|
||||
|
|
@ -94,7 +94,7 @@ export default function ChatMessage({
|
|||
if (children.length) {
|
||||
if (children[0] == "▍") {
|
||||
return (
|
||||
<span className="animate-pulse cursor-default mt-1">
|
||||
<span className="mt-1 animate-pulse cursor-default">
|
||||
▍
|
||||
</span>
|
||||
);
|
||||
|
|
@ -146,14 +146,14 @@ export default function ChatMessage({
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full flex items-center">
|
||||
<div className="text-start inline-block px-3 text-muted-foreground ">
|
||||
<span
|
||||
className="text-muted-foreground "
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: message.replace(/\n/g, "<br>"),
|
||||
}}
|
||||
></span>
|
||||
<div className="flex w-full items-center">
|
||||
<div className="inline-block px-3 text-start text-muted-foreground ">
|
||||
{message.split("\n").map((line, index) => (
|
||||
<span key={index} className="text-muted-foreground ">
|
||||
{line}
|
||||
<br />
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -26,21 +26,21 @@ export default function FileCard({ fileName, content, fileType }) {
|
|||
if (fileType === "image") {
|
||||
return (
|
||||
<div
|
||||
className="relative w-1/4 h-1/4"
|
||||
className="relative h-1/4 w-1/4"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<img
|
||||
src={`data:image/png;base64,${content}`}
|
||||
alt="generated image"
|
||||
className="rounded-lg w-full h-full"
|
||||
className="h-full w-full rounded-lg"
|
||||
/>
|
||||
{isHovered && (
|
||||
<div
|
||||
className={`absolute top-0 right-0 bg-muted text-foreground rounded-bl-lg px-1 text-sm font-bold `}
|
||||
className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `}
|
||||
>
|
||||
<button className="text-ring py-1 px-2 " onClick={handleDownload}>
|
||||
<DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
|
||||
<button className="px-2 py-1 text-ring " onClick={handleDownload}>
|
||||
<DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -51,25 +51,25 @@ export default function FileCard({ fileName, content, fileType }) {
|
|||
return (
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="bg-muted shadow rounded w-1/2 text-foreground hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-ring"
|
||||
className="flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg"
|
||||
>
|
||||
<div className="flex gap-2 text-current items-center w-full mr-2">
|
||||
<div className="mr-2 flex w-full items-center gap-2 text-current">
|
||||
{" "}
|
||||
{fileType === "image" ? (
|
||||
<img
|
||||
src={`data:image/png;base64,${content}`}
|
||||
alt=""
|
||||
className="w-8 h-8"
|
||||
className="h-8 w-8"
|
||||
/>
|
||||
) : (
|
||||
<File className="w-8 h-8" />
|
||||
<File className="h-8 w-8" />
|
||||
)}
|
||||
<div className="flex flex-col items-start">
|
||||
{" "}
|
||||
<div className="truncate text-sm text-current">{fileName}</div>
|
||||
<div className="truncate text-xs text-ring">{fileType}</div>
|
||||
</div>
|
||||
<DownloadCloud className="w-6 h-6 text-current ml-auto" />
|
||||
<DownloadCloud className="ml-auto h-6 w-6 text-current" />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { ChatMessageType } from "../../types/chat";
|
|||
import ChatInput from "./chatInput";
|
||||
|
||||
import _ from "lodash";
|
||||
import { getHealth } from "../../controllers/API";
|
||||
|
||||
export default function ChatModal({
|
||||
flow,
|
||||
|
|
@ -204,25 +205,27 @@ export default function ChatModal({
|
|||
handleOnClose(event);
|
||||
};
|
||||
newWs.onerror = (ev) => {
|
||||
console.log(ev, "error");
|
||||
if (flow.id === "") {
|
||||
connectWS();
|
||||
} else {
|
||||
setErrorData({
|
||||
title: "There was an error on web connection, please: ",
|
||||
list: [
|
||||
"Refresh the page",
|
||||
"Use a new flow tab",
|
||||
"Check if the backend is up",
|
||||
],
|
||||
getHealth()
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
connectWS();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setErrorData({
|
||||
// message when the backend failed
|
||||
title: "The backend is not responding. Please try again later.",
|
||||
// possible solution list
|
||||
list: [
|
||||
"Check your internet connection.",
|
||||
"Check if the backend is running.",
|
||||
],
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
ws.current = newWs;
|
||||
} catch (error) {
|
||||
if (flow.id === "") {
|
||||
connectWS();
|
||||
}
|
||||
connectWS();
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
|
@ -330,7 +333,7 @@ export default function ChatModal({
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black backdrop-blur-sm bg-opacity-80 transition-opacity" />
|
||||
<div className="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
|
|
@ -344,24 +347,24 @@ export default function ChatModal({
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all w-[690px]">
|
||||
<Dialog.Panel className=" relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all">
|
||||
<div className="relative w-full p-4">
|
||||
<button
|
||||
onClick={() => clearChat()}
|
||||
className="absolute top-2 right-10 hover:text-status-red text-muted-foreground z-30"
|
||||
className="absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red"
|
||||
>
|
||||
<Eraser className="w-4 h-4" />
|
||||
<Eraser className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setModalOpen(false)}
|
||||
className="absolute top-1.5 right-2 hover:text-status-red text-muted-foreground z-30"
|
||||
className="absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref={messagesRef}
|
||||
className="w-full h-full bg-background border-t flex-col flex items-center overflow-scroll scrollbar-hide"
|
||||
className="flex h-full w-full flex-col items-center overflow-scroll border-t bg-background scrollbar-hide"
|
||||
>
|
||||
{chatHistory.length > 0 ? (
|
||||
chatHistory.map((c, i) => (
|
||||
|
|
@ -373,19 +376,19 @@ export default function ChatModal({
|
|||
/>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center text-center align-middle">
|
||||
<span>
|
||||
👋{" "}
|
||||
<span className="text-muted-foreground text-lg">
|
||||
<span className="text-lg text-muted-foreground">
|
||||
LangFlow Chat
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<div className="bg-muted rounded-md w-2/4 px-6 py-8 border border-input">
|
||||
<div className="w-2/4 rounded-md border border-input bg-muted px-6 py-8">
|
||||
<span className="text-base text-ring">
|
||||
Start a conversation and click the agent’s thoughts{" "}
|
||||
<span>
|
||||
<MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 " />
|
||||
<MessagesSquare className="mx-1 inline h-5 w-5 animate-bounce " />
|
||||
</span>{" "}
|
||||
to inspect the chaining process.
|
||||
</span>
|
||||
|
|
@ -394,8 +397,8 @@ export default function ChatModal({
|
|||
)}
|
||||
<div ref={ref}></div>
|
||||
</div>
|
||||
<div className="w-full bg-background border-t flex-col flex items-center justify-between p-3">
|
||||
<div className="relative w-full mt-1 rounded-md shadow-sm">
|
||||
<div className="flex w-full flex-col items-center justify-between border-t bg-background p-3">
|
||||
<div className="relative mt-1 w-full rounded-md shadow-sm">
|
||||
<ChatInput
|
||||
chatValue={chatValue}
|
||||
lockChat={lockChat}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,13 @@ export default function CodeAreaModal({
|
|||
const [code, setCode] = useState(value);
|
||||
const { dark } = useContext(darkContext);
|
||||
const { setErrorData, setSuccessData } = useContext(alertContext);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||
const ref = useRef();
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
setTimeout(() => {
|
||||
setCloseEdit("editcode");
|
||||
closePopUp();
|
||||
}, 300);
|
||||
}
|
||||
|
|
@ -47,7 +48,7 @@ export default function CodeAreaModal({
|
|||
return (
|
||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
||||
<DialogTrigger></DialogTrigger>
|
||||
<DialogContent className="lg:max-w-[700px] h-[500px]">
|
||||
<DialogContent className="h-[500px] lg:max-w-[700px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Edit Code</span>
|
||||
|
|
@ -60,7 +61,7 @@ export default function CodeAreaModal({
|
|||
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex h-full w-full mt-2">
|
||||
<div className="mt-2 flex h-full w-full">
|
||||
<AceEditor
|
||||
value={code}
|
||||
mode="python"
|
||||
|
|
@ -74,7 +75,7 @@ export default function CodeAreaModal({
|
|||
onChange={(value) => {
|
||||
setCode(value);
|
||||
}}
|
||||
className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-ring "
|
||||
className="h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll "
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ export default function ExportModal() {
|
|||
const { closePopUp } = useContext(PopUpContext);
|
||||
const ref = useRef();
|
||||
const { setErrorData } = useContext(alertContext);
|
||||
const { flows, tabId, updateFlow, downloadFlow } = useContext(TabsContext);
|
||||
const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
|
||||
useContext(TabsContext);
|
||||
const [isMaxLength, setIsMaxLength] = useState(false);
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
|
|
@ -41,7 +42,7 @@ export default function ExportModal() {
|
|||
return (
|
||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="lg:max-w-[600px] h-[420px] ">
|
||||
<DialogContent className="h-[420px] lg:max-w-[600px] ">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Export</span>
|
||||
|
|
@ -81,9 +82,18 @@ export default function ExportModal() {
|
|||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (checked) downloadFlow(flows.find((f) => f.id === tabId), name);
|
||||
if (checked)
|
||||
downloadFlow(
|
||||
flows.find((f) => f.id === tabId),
|
||||
name,
|
||||
description
|
||||
);
|
||||
else
|
||||
downloadFlow(removeApiKeys(flows.find((f) => f.id === tabId)), name);
|
||||
downloadFlow(
|
||||
removeApiKeys(flows.find((f) => f.id === tabId)),
|
||||
name,
|
||||
description
|
||||
);
|
||||
|
||||
closePopUp();
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@ export default function FlowSettingsModal() {
|
|||
return (
|
||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
||||
<DialogTrigger asChild></DialogTrigger>
|
||||
<DialogContent className="lg:max-w-[600px] h-[390px]">
|
||||
<DialogContent className="h-[390px] lg:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Settings </span>
|
||||
<Settings2 className="w-4 h-4 mr-2 " />
|
||||
<Settings2 className="mr-2 h-4 w-4 " />
|
||||
</DialogTitle>
|
||||
<DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
|
|
|||
|
|
@ -38,11 +38,12 @@ export default function GenericModal({
|
|||
const [myValue, setMyValue] = useState(value);
|
||||
const { dark } = useContext(darkContext);
|
||||
const { setErrorData, setSuccessData } = useContext(alertContext);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||
const ref = useRef();
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
setCloseEdit("generic");
|
||||
closePopUp();
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +77,7 @@ export default function GenericModal({
|
|||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex h-full w-full mt-2">
|
||||
<div className="mt-2 flex h-full w-full">
|
||||
<Textarea
|
||||
ref={ref}
|
||||
className="form-input h-[300px] w-full rounded-lg border-ring focus-visible:ring-1"
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default function ButtonBox({
|
|||
<button disabled={deactivate} onClick={onClick}>
|
||||
<div
|
||||
className={classNames(
|
||||
"flex flex-col justify-center items-center rounded-lg text-center shadow border border-ring hover:shadow-lg transform hover:scale-105",
|
||||
"flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg",
|
||||
bgColor,
|
||||
height,
|
||||
width,
|
||||
|
|
@ -85,18 +85,18 @@ export default function ButtonBox({
|
|||
)}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-center ${bigCircle} bg-background/30 rounded-full mb-1`}
|
||||
className={`flex items-center justify-center ${bigCircle} mb-1 rounded-full bg-background/30`}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-center ${smallCircle} bg-background rounded-full`}
|
||||
className={`flex items-center justify-center ${smallCircle} rounded-full bg-background`}
|
||||
>
|
||||
<div className={textColor}>{icon}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-auto mb-auto">
|
||||
<div className="mb-auto mt-auto w-full">
|
||||
<h3
|
||||
className={classNames(
|
||||
"w-full font-semibold break-words text-background truncate-multiline",
|
||||
"w-full break-words font-semibold text-background truncate-multiline",
|
||||
titleFontSize,
|
||||
marginTop
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -68,15 +68,15 @@ export default function ImportModal() {
|
|||
<DialogContent
|
||||
className={classNames(
|
||||
showExamples
|
||||
? "lg:max-w-[650px] h-[600px]"
|
||||
: "lg:max-w-[650px] h-[450px]"
|
||||
? "h-[600px] lg:max-w-[650px]"
|
||||
: "h-[450px] lg:max-w-[650px]"
|
||||
)}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center">
|
||||
{showExamples && (
|
||||
<>
|
||||
<div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
|
||||
<div className="absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
||||
|
|
@ -85,7 +85,7 @@ export default function ImportModal() {
|
|||
}}
|
||||
>
|
||||
<ArrowLeftIcon
|
||||
className="h-5 w-5 text-foreground ml-1"
|
||||
className="ml-1 h-5 w-5 text-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
|
@ -97,7 +97,7 @@ export default function ImportModal() {
|
|||
{showExamples ? "Select an example" : "Import"}
|
||||
</span>
|
||||
<ArrowUpTrayIcon
|
||||
className="h-5 w-5 text-foreground ml-1"
|
||||
className="ml-1 h-5 w-5 text-foreground"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</DialogTitle>
|
||||
|
|
@ -108,12 +108,12 @@ export default function ImportModal() {
|
|||
className={classNames(
|
||||
"h-full w-full overflow-y-auto scrollbar-hide",
|
||||
showExamples && !loadingExamples
|
||||
? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
|
||||
: "flex flex-row justify-center items-center"
|
||||
? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto"
|
||||
: "flex flex-row items-center justify-center"
|
||||
)}
|
||||
>
|
||||
{!showExamples && (
|
||||
<div className="flex h-full w-full justify-evenly items-center">
|
||||
<div className="flex h-full w-full items-center justify-evenly">
|
||||
<ButtonBox
|
||||
size="big"
|
||||
bgColor="bg-medium-emerald "
|
||||
|
|
@ -145,7 +145,7 @@ export default function ImportModal() {
|
|||
</div>
|
||||
)}
|
||||
{showExamples && loadingExamples && (
|
||||
<div className="flex align-middle justify-center items-center">
|
||||
<div className="flex items-center justify-center align-middle">
|
||||
<LoadingComponent remSize={30} />
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -175,7 +175,7 @@ export default function ImportModal() {
|
|||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="w-full flex items-center justify-center mt-2">
|
||||
<div className="mt-2 flex w-full items-center justify-center">
|
||||
<a
|
||||
href="https://github.com/logspace-ai/langflow_examples"
|
||||
target="_blank"
|
||||
|
|
|
|||
|
|
@ -16,12 +16,13 @@ export default function PromptAreaModal({
|
|||
const [myValue, setMyValue] = useState(value);
|
||||
const { dark } = useContext(darkContext);
|
||||
const { setErrorData, setSuccessData } = useContext(alertContext);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||
const ref = useRef();
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
setTimeout(() => {
|
||||
setCloseEdit("prompt");
|
||||
closePopUp();
|
||||
}, 300);
|
||||
}
|
||||
|
|
@ -57,8 +58,8 @@ export default function PromptAreaModal({
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]">
|
||||
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
|
||||
<Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
|
||||
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md text-ring hover:text-accent-foreground"
|
||||
|
|
@ -70,8 +71,8 @@ export default function PromptAreaModal({
|
|||
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-full w-full flex flex-col justify-center items-center">
|
||||
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<div className="z-10 flex w-full justify-center pb-4 shadow-sm">
|
||||
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
|
||||
<DocumentTextIcon
|
||||
className="h-6 w-6 text-almost-medium-blue"
|
||||
|
|
@ -87,9 +88,9 @@ export default function PromptAreaModal({
|
|||
</Dialog.Title>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full w-full bg-accent overflow-auto p-4 gap-4 flex flex-row justify-center items-center">
|
||||
<div className="flex h-full w-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4">
|
||||
<div className="flex h-full w-full">
|
||||
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-background shadow">
|
||||
<div className="h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
|
||||
<textarea
|
||||
ref={ref}
|
||||
className="form-input h-full w-full rounded-lg border-ring"
|
||||
|
|
@ -102,7 +103,7 @@ export default function PromptAreaModal({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
|
||||
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
|
|
|
|||
|
|
@ -15,12 +15,13 @@ export default function TextAreaModal({
|
|||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [myValue, setMyValue] = useState(value);
|
||||
const { closePopUp } = useContext(PopUpContext);
|
||||
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||
const ref = useRef();
|
||||
function setModalOpen(x: boolean) {
|
||||
setOpen(x);
|
||||
if (x === false) {
|
||||
setTimeout(() => {
|
||||
setCloseEdit("textarea");
|
||||
closePopUp();
|
||||
}, 300);
|
||||
}
|
||||
|
|
@ -56,8 +57,8 @@ export default function TextAreaModal({
|
|||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8 w-[700px]">
|
||||
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
|
||||
<Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8">
|
||||
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md text-ring hover:text-accent-foreground"
|
||||
|
|
@ -69,8 +70,8 @@ export default function TextAreaModal({
|
|||
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-full w-full flex flex-col justify-center items-center">
|
||||
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
|
||||
<div className="flex h-full w-full flex-col items-center justify-center">
|
||||
<div className="z-10 flex w-full justify-center pb-4 shadow-sm">
|
||||
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10">
|
||||
<ClipboardDocumentListIcon
|
||||
className="h-6 w-6 text-almost-medium-blue"
|
||||
|
|
@ -86,9 +87,9 @@ export default function TextAreaModal({
|
|||
</Dialog.Title>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full w-full bg-input p-4 gap-4 flex flex-row justify-center items-center">
|
||||
<div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
|
||||
<div className="flex h-full w-full">
|
||||
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full rounded-lg bg-background shadow">
|
||||
<div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6">
|
||||
<textarea
|
||||
ref={ref}
|
||||
className="form-input h-full w-full rounded-lg border-ring"
|
||||
|
|
@ -101,7 +102,7 @@ export default function TextAreaModal({
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-input w-full pb-3 flex flex-row-reverse px-4">
|
||||
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@ export default function CommunityPage() {
|
|||
handleExamples();
|
||||
}, []);
|
||||
return (
|
||||
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
|
||||
<div className="w-full flex justify-between py-12 pb-2 px-6">
|
||||
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
|
||||
<div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
|
||||
<div className="flex w-full justify-between px-6 py-12 pb-2">
|
||||
<span className="flex items-center justify-center gap-2 text-2xl font-semibold">
|
||||
<Users2 className="w-6" />
|
||||
Community Examples
|
||||
</span>
|
||||
|
|
@ -50,18 +50,18 @@ export default function CommunityPage() {
|
|||
rel="noreferrer"
|
||||
>
|
||||
<Button variant="primary">
|
||||
<GithubIcon className="w-4 mr-2" />
|
||||
<GithubIcon className="mr-2 w-4" />
|
||||
Add Your Example
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span className="flex pb-8 px-6 w-[70%] text-muted-foreground">
|
||||
<span className="flex w-[70%] px-6 pb-8 text-muted-foreground">
|
||||
Discover and learn from shared examples by the LangFlow community. We
|
||||
welcome new example contributions that can help our community explore
|
||||
new and powerful features.
|
||||
</span>
|
||||
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{!loadingExamples &&
|
||||
examples.map((flow, idx) => (
|
||||
<CardComponent
|
||||
|
|
@ -79,7 +79,7 @@ export default function CommunityPage() {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<GitFork className="w-4 mr-2" />
|
||||
<GitFork className="mr-2 w-4" />
|
||||
Fork Example
|
||||
</Button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default function DisclosureComponent({
|
|||
{({ open }) => (
|
||||
<>
|
||||
<div>
|
||||
<Disclosure.Button className="select-none bg-muted w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-input">
|
||||
<Disclosure.Button className="-mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-muted px-3 py-2">
|
||||
<div className="flex gap-4">
|
||||
<Icon strokeWidth={1.5} size={22} className="text-primary " />
|
||||
<span className="flex items-center text-sm text-primary">
|
||||
|
|
|
|||
|
|
@ -348,13 +348,13 @@ export default function Page({ flow }: { flow: FlowType }) {
|
|||
<div className="flex h-full overflow-hidden">
|
||||
<ExtraSidebar />
|
||||
{/* Main area */}
|
||||
<main className="flex-1 flex">
|
||||
<main className="flex flex-1">
|
||||
{/* Primary column */}
|
||||
<div className="w-full h-full">
|
||||
<div className="w-full h-full" ref={reactFlowWrapper}>
|
||||
<div className="h-full w-full">
|
||||
<div className="h-full w-full" ref={reactFlowWrapper}>
|
||||
{Object.keys(templates).length > 0 &&
|
||||
Object.keys(types).length > 0 ? (
|
||||
<div className="w-full h-full">
|
||||
<div className="h-full w-full">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
onMove={() => {
|
||||
|
|
@ -403,8 +403,8 @@ export default function Page({ flow }: { flow: FlowType }) {
|
|||
>
|
||||
<Background className="" />
|
||||
<Controls
|
||||
className="text-primary stroke-foreground [&>button]:border-b-border hover:[&>button]:bg-border
|
||||
fill-foreground bg-muted"
|
||||
className="bg-muted fill-foreground stroke-foreground text-primary
|
||||
[&>button]:border-b-border hover:[&>button]:bg-border"
|
||||
></Controls>
|
||||
</ReactFlow>
|
||||
<Chat flow={flow} reactFlowInstance={reactFlowInstance} />
|
||||
|
|
|
|||
|
|
@ -60,48 +60,48 @@ export default function ExtraSidebar() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="w-52 flex flex-col overflow-hidden scrollbar-hide h-full border-r">
|
||||
<div className="mt-2 mb-2 w-full flex gap-2 justify-between px-2 items-center">
|
||||
<ShadTooltip delayDuration={1000} content="Import" side="top">
|
||||
<div className="flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide">
|
||||
<div className="mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2">
|
||||
<ShadTooltip content="Import" side="top">
|
||||
<button
|
||||
className="text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out relative inline-flex items-center rounded-md bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted"
|
||||
className="relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
|
||||
onClick={() => {
|
||||
// openPopUp(<ImportModal />);
|
||||
uploadFlow();
|
||||
}}
|
||||
>
|
||||
<FileUp strokeWidth={1.5} className="w-5 h-5 "></FileUp>
|
||||
<FileUp strokeWidth={1.5} className="h-5 w-5 "></FileUp>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
<ShadTooltip delayDuration={1000} content="Export" side="top">
|
||||
<ShadTooltip content="Export" side="top">
|
||||
<button
|
||||
className={classNames(
|
||||
"text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out relative inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted rounded-md"
|
||||
"relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
|
||||
)}
|
||||
onClick={(event) => {
|
||||
openPopUp(<ExportModal />);
|
||||
}}
|
||||
>
|
||||
<FileDown strokeWidth={1.5} className="w-5 h-5 "></FileDown>
|
||||
<FileDown strokeWidth={1.5} className="h-5 w-5 "></FileDown>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
<ShadTooltip delayDuration={1000} content="Code" side="top">
|
||||
<ShadTooltip content="Code" side="top">
|
||||
<button
|
||||
className={classNames(
|
||||
"text-foreground w-full justify-center shadow-sm transition-all duration-500 ease-in-out relative inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted rounded-md"
|
||||
"relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
|
||||
)}
|
||||
onClick={(event) => {
|
||||
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
|
||||
}}
|
||||
>
|
||||
<Code2 strokeWidth={1.5} className="w-5 h-5 "></Code2>
|
||||
<Code2 strokeWidth={1.5} className="h-5 w-5 "></Code2>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
<ShadTooltip delayDuration={1000} content="Save" side="top">
|
||||
<ShadTooltip content="Save" side="top">
|
||||
<button
|
||||
className="text-foreground w-full justify-center transition-all shadow-sm duration-500 ease-in-out relative inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-input hover:bg-muted rounded-md"
|
||||
className="relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out hover:bg-muted"
|
||||
onClick={(event) => {
|
||||
saveFlow(flows.find((f) => f.id === tabId));
|
||||
setSuccessData({ title: "Changes saved successfully" });
|
||||
|
|
@ -111,14 +111,14 @@ export default function ExtraSidebar() {
|
|||
<Save
|
||||
strokeWidth={1.5}
|
||||
className={
|
||||
"w-5 h-5" + (isPending ? " " : " text-muted-foreground")
|
||||
"h-5 w-5" + (isPending ? " " : " text-muted-foreground")
|
||||
}
|
||||
></Save>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="relative mt-2 flex items-center mb-2 mx-auto">
|
||||
<div className="relative mx-auto mb-2 mt-2 flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
|
|
@ -126,14 +126,14 @@ export default function ExtraSidebar() {
|
|||
placeholder="Search"
|
||||
className={
|
||||
INPUT_STYLE +
|
||||
"w-full border-1 rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
"w-full rounded-md border border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
}
|
||||
onChange={(e) => {
|
||||
handleSearchInput(e.target.value);
|
||||
setSearch(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
|
||||
<div className="absolute inset-y-0 right-0 flex items-center py-1.5 pr-3">
|
||||
{/* ! replace hash color here */}
|
||||
<Search size={20} strokeWidth={1.5} className="text-primary" />
|
||||
</div>
|
||||
|
|
@ -152,20 +152,19 @@ export default function ExtraSidebar() {
|
|||
Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown,
|
||||
}}
|
||||
>
|
||||
<div className="p-2 flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-2 p-2">
|
||||
{Object.keys(dataFilter[d])
|
||||
.sort()
|
||||
.map((t: string, k) => (
|
||||
<ShadTooltip
|
||||
content={data[d][t].display_name}
|
||||
delayDuration={1500}
|
||||
side="right"
|
||||
key={data[d][t].display_name}
|
||||
>
|
||||
<div key={k} data-tooltip-id={t}>
|
||||
<div
|
||||
draggable
|
||||
className={"cursor-grab border-l-8 rounded-l-md"}
|
||||
className={"cursor-grab rounded-l-md border-l-8"}
|
||||
style={{
|
||||
borderLeftColor:
|
||||
nodeColors[d] ?? nodeColors.unknown,
|
||||
|
|
@ -184,11 +183,11 @@ export default function ExtraSidebar() {
|
|||
);
|
||||
}}
|
||||
>
|
||||
<div className="flex w-full justify-between text-sm px-3 py-1 bg-white items-center border-dashed border-ring border-l-0 rounded-md rounded-l-none border">
|
||||
<span className="text-foreground w-full pr-1 truncate text-xs">
|
||||
<div className="flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring bg-background px-3 py-1 text-sm">
|
||||
<span className="w-full truncate pr-1 text-xs text-foreground">
|
||||
{data[d][t].display_name}
|
||||
</span>
|
||||
<Menu className="w-4 h-6 text-ring " />
|
||||
<Menu className="h-6 w-4 text-ring " />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useContext, useState } from "react";
|
||||
import { Settings2, Copy, Trash2, Menu } from "lucide-react";
|
||||
import { Settings2, Copy, Trash2, FileText } from "lucide-react";
|
||||
import { classNames } from "../../../../utils";
|
||||
import { TabsContext } from "../../../../contexts/tabsContext";
|
||||
import { useReactFlow } from "reactflow";
|
||||
|
|
@ -28,25 +28,23 @@ const NodeToolbarComponent = (props) => {
|
|||
const reactFlowInstance = useReactFlow();
|
||||
return (
|
||||
<>
|
||||
<div className="h-10 w-26">
|
||||
<div className="w-26 h-10">
|
||||
<span className="isolate inline-flex rounded-md shadow-sm">
|
||||
<ShadTooltip delayDuration={1000} content="Delete" side="top">
|
||||
<ShadTooltip content="Delete" side="top">
|
||||
<button
|
||||
className="text-foreground transition-all duration-500 ease-in-out shadow-md relative inline-flex items-center rounded-l-md bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
|
||||
className="relative inline-flex items-center rounded-l-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
|
||||
onClick={() => {
|
||||
props.deleteNode(props.data.id);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 "></Trash2>
|
||||
<Trash2 className="h-4 w-4"></Trash2>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
<ShadTooltip delayDuration={1000} content="Duplicate" side="top">
|
||||
<ShadTooltip content="Duplicate" side="top">
|
||||
<button
|
||||
className={classNames(
|
||||
nodeLength > 0
|
||||
? "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10"
|
||||
: "text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
|
||||
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
|
||||
)}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -65,26 +63,62 @@ const NodeToolbarComponent = (props) => {
|
|||
);
|
||||
}}
|
||||
>
|
||||
<Copy className="w-4 h-4 "></Copy>
|
||||
<Copy className="h-4 w-4"></Copy>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
{nodeLength > 0 && (
|
||||
<ShadTooltip delayDuration={1000} content="Edit" side="top">
|
||||
<button
|
||||
className="text-foreground transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-ring hover:bg-muted focus:z-10 rounded-r-md"
|
||||
onClick={(event) => {
|
||||
<ShadTooltip
|
||||
content={
|
||||
props.data.node.documentation === ""
|
||||
? "Coming Soon"
|
||||
: "Documentation"
|
||||
}
|
||||
side="top"
|
||||
>
|
||||
<a
|
||||
className={classNames(
|
||||
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
|
||||
(props.data.node.documentation === ""
|
||||
? " text-muted-foreground"
|
||||
: " text-foreground")
|
||||
)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={props.data.node.documentation}
|
||||
// deactivate link if no documentation is provided
|
||||
onClick={(event) => {
|
||||
if (props.data.node.documentation === "") {
|
||||
event.preventDefault();
|
||||
props.openPopUp(<EditNodeModal data={props.data} />);
|
||||
}}
|
||||
>
|
||||
<Settings2 className="w-4 h-4 "></Settings2>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
)}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FileText className="h-4 w-4 "></FileText>
|
||||
</a>
|
||||
</ShadTooltip>
|
||||
|
||||
{/* <Menu as="div" className="relative inline-block text-left z-100">
|
||||
<button className="text-gray-700 transition-all duration-500 ease-in-out shadow-md relative -ml-px inline-flex items-center bg-background px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
|
||||
<ShadTooltip content="Edit" side="top">
|
||||
<button
|
||||
className={classNames(
|
||||
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
|
||||
(nodeLength == 0
|
||||
? " text-muted-foreground"
|
||||
: " text-foreground")
|
||||
)}
|
||||
onClick={(event) => {
|
||||
if (nodeLength == 0) {
|
||||
event.preventDefault();
|
||||
}
|
||||
event.preventDefault();
|
||||
props.openPopUp(<EditNodeModal data={props.data} />);
|
||||
}}
|
||||
>
|
||||
<Settings2 className="h-4 w-4 "></Settings2>
|
||||
</button>
|
||||
</ShadTooltip>
|
||||
|
||||
{/*
|
||||
<Menu as="div" className="relative inline-block text-left z-100">
|
||||
<button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
|
||||
<div>
|
||||
<Menu.Button className="flex items-center">
|
||||
<EllipsisVerticalIcon
|
||||
|
|
@ -117,7 +151,7 @@ const NodeToolbarComponent = (props) => {
|
|||
className={classNames(
|
||||
active
|
||||
? "bg-muted text-gray-900"
|
||||
: "text-gray-700",
|
||||
: "text-foreground",
|
||||
"w-full group flex items-center px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
|
|
@ -157,7 +191,7 @@ const NodeToolbarComponent = (props) => {
|
|||
className={classNames(
|
||||
active
|
||||
? "bg-muted text-gray-900"
|
||||
: "text-gray-700",
|
||||
: "text-foreground",
|
||||
"w-full group flex items-center px-4 py-2 text-sm"
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default function FlowPage() {
|
|||
<a
|
||||
target={"_blank"}
|
||||
href="https://logspace.ai/"
|
||||
className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
|
||||
className="absolute bottom-2 left-7 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-foreground px-2 text-center font-sans text-xs tracking-wide text-secondary transition-all duration-500 ease-in-out hover:h-12"
|
||||
>
|
||||
{version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
|
||||
<div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ export default function HomePage() {
|
|||
}, []);
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="w-full h-full flex overflow-auto flex-col bg-muted px-16">
|
||||
<div className="w-full flex justify-between py-12 pb-2 px-6">
|
||||
<span className="text-2xl flex items-center justify-center gap-2 font-semibold">
|
||||
<div className="flex h-full w-full flex-col overflow-auto bg-muted px-16">
|
||||
<div className="flex w-full justify-between px-6 py-12 pb-2">
|
||||
<span className="flex items-center justify-center gap-2 text-2xl font-semibold">
|
||||
<Home className="w-6" />
|
||||
{USER_PROJECTS_HEADER}
|
||||
</span>
|
||||
|
|
@ -27,7 +27,7 @@ export default function HomePage() {
|
|||
downloadFlows();
|
||||
}}
|
||||
>
|
||||
<Download className="w-4 mr-2" />
|
||||
<Download className="mr-2 w-4" />
|
||||
Download Collection
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -36,7 +36,7 @@ export default function HomePage() {
|
|||
uploadFlows();
|
||||
}}
|
||||
>
|
||||
<Upload className="w-4 mr-2" />
|
||||
<Upload className="mr-2 w-4" />
|
||||
Upload Collection
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -47,15 +47,15 @@ export default function HomePage() {
|
|||
});
|
||||
}}
|
||||
>
|
||||
<Plus className="w-4 mr-2" />
|
||||
<Plus className="mr-2 w-4" />
|
||||
New Project
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<span className="flex pb-14 px-6 text-muted-foreground w-[60%]">
|
||||
<span className="flex w-[60%] px-6 pb-14 text-muted-foreground">
|
||||
Manage your personal projects. Download or upload your collection.
|
||||
</span>
|
||||
<div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="grid w-full gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{flows.map((flow, idx) => (
|
||||
<CardComponent
|
||||
key={idx}
|
||||
|
|
@ -68,7 +68,7 @@ export default function HomePage() {
|
|||
size="sm"
|
||||
className="whitespace-nowrap "
|
||||
>
|
||||
<ExternalLink className="w-4 mr-2" />
|
||||
<ExternalLink className="mr-2 w-4" />
|
||||
Edit Flow
|
||||
</Button>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export type APIClassType = {
|
|||
description: string;
|
||||
template: APITemplateType;
|
||||
display_name: string;
|
||||
documentation: string;
|
||||
[key: string]: Array<string> | string | APITemplateType;
|
||||
};
|
||||
export type TemplateVariableType = {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import {
|
||||
ComponentType,
|
||||
ForwardRefExoticComponent,
|
||||
ReactElement,
|
||||
ReactNode,
|
||||
SVGProps,
|
||||
} from "react";
|
||||
import { ReactElement, ReactNode } from "react";
|
||||
import { NodeDataType } from "../flow/index";
|
||||
import { typesContextType } from "../typesContext";
|
||||
export type InputComponentType = {
|
||||
|
|
@ -28,6 +22,7 @@ export type DropDownComponentType = {
|
|||
options: string[];
|
||||
onSelect: (value: string) => void;
|
||||
editNode?: boolean;
|
||||
apiModal?: boolean;
|
||||
numberOfOptions?: number;
|
||||
};
|
||||
export type ParameterComponentType = {
|
||||
|
|
@ -41,12 +36,14 @@ export type ParameterComponentType = {
|
|||
name?: string;
|
||||
tooltipTitle: string;
|
||||
dataContext?: typesContextType;
|
||||
info?: string;
|
||||
};
|
||||
export type InputListComponentType = {
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
disabled: boolean;
|
||||
editNode?: boolean;
|
||||
onAddInput?: (value?: string[]) => void;
|
||||
};
|
||||
|
||||
export type TextAreaComponentType = {
|
||||
|
|
@ -115,3 +112,17 @@ export type RadialProgressType = {
|
|||
value?: number;
|
||||
color?: string;
|
||||
};
|
||||
|
||||
export type AccordionComponentType = {
|
||||
children?: ReactElement;
|
||||
open?: string[];
|
||||
trigger?: string;
|
||||
};
|
||||
export type Side = "top" | "right" | "bottom" | "left";
|
||||
|
||||
export type ShadTooltipProps = {
|
||||
delayDuration?: number;
|
||||
side?: Side;
|
||||
content: ReactNode;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,11 @@ export type TabsContextType = {
|
|||
addFlow: (flowData?: FlowType, newProject?: boolean) => Promise<String>;
|
||||
updateFlow: (newFlow: FlowType) => void;
|
||||
incrementNodeId: () => string;
|
||||
downloadFlow: (flow: FlowType, fileName?: string) => void;
|
||||
downloadFlow: (
|
||||
flow: FlowType,
|
||||
flowName: string,
|
||||
flowDescription?: string
|
||||
) => void;
|
||||
downloadFlows: () => void;
|
||||
uploadFlows: () => void;
|
||||
uploadFlow: (newFlow?: boolean) => void;
|
||||
|
|
@ -28,6 +32,8 @@ export type TabsContextType = {
|
|||
) => void;
|
||||
lastCopiedSelection: { nodes: any; edges: any };
|
||||
setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
|
||||
setTweak: (tweak: any) => void;
|
||||
getTweak: any;
|
||||
};
|
||||
|
||||
export type TabsState = {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,3 @@
|
|||
import {
|
||||
RocketLaunchIcon,
|
||||
LinkIcon,
|
||||
CpuChipIcon,
|
||||
LightBulbIcon,
|
||||
CommandLineIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
WrenchIcon,
|
||||
ComputerDesktopIcon,
|
||||
GiftIcon,
|
||||
PaperClipIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
FingerPrintIcon,
|
||||
ScissorsIcon,
|
||||
CircleStackIcon,
|
||||
Squares2X2Icon,
|
||||
Bars3CenterLeftIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
|
||||
import { FlowType, NodeType } from "./types/flow";
|
||||
import { APITemplateType } from "./types/api";
|
||||
|
|
@ -42,7 +24,7 @@ import { SlackIcon } from "./icons/Slack";
|
|||
import { PineconeIcon } from "./icons/Pinecone";
|
||||
import clsx, { ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./constants";
|
||||
import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./flow_constants";
|
||||
import { ComponentType, SVGProps } from "react";
|
||||
import {
|
||||
Cpu,
|
||||
|
|
@ -58,12 +40,14 @@ import {
|
|||
Paperclip,
|
||||
Rocket,
|
||||
Scissors,
|
||||
FileSearch,
|
||||
TerminalSquare,
|
||||
Wand2,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { SupabaseIcon } from "./icons/supabase";
|
||||
import { MongoDBIcon } from "./icons/MongoDB";
|
||||
import { VertexAIIcon } from "./icons/VertexAI";
|
||||
|
||||
export function classNames(...classes: Array<string>) {
|
||||
return classes.filter(Boolean).join(" ");
|
||||
|
|
@ -139,6 +123,7 @@ export const nodeColors: { [char: string]: string } = {
|
|||
toolkits: "#DB2C2C",
|
||||
wrappers: "#E6277A",
|
||||
utilities: "#31A3CC",
|
||||
retrievers: "#e6b25a",
|
||||
unknown: "#9CA3AF",
|
||||
};
|
||||
|
||||
|
|
@ -157,72 +142,11 @@ export const nodeNames: { [char: string]: string } = {
|
|||
toolkits: "Toolkits",
|
||||
wrappers: "Wrappers",
|
||||
textsplitters: "Text Splitters",
|
||||
retrievers: "Retrievers",
|
||||
utilities: "Utilities",
|
||||
unknown: "Unknown",
|
||||
};
|
||||
|
||||
export const nodeIcons: {
|
||||
[char: string]: React.ForwardRefExoticComponent<
|
||||
React.SVGProps<SVGSVGElement>
|
||||
>;
|
||||
} = {
|
||||
Chroma: ChromaIcon,
|
||||
AirbyteJSONLoader: AirbyteIcon,
|
||||
// SerpAPIWrapper: SerperIcon,
|
||||
// AZLyricsLoader: AzIcon,
|
||||
Anthropic: AnthropicIcon,
|
||||
ChatAnthropic: AnthropicIcon,
|
||||
BingSearchAPIWrapper: BingIcon,
|
||||
BingSearchRun: BingIcon,
|
||||
Cohere: CohereIcon,
|
||||
CohereEmbeddings: CohereIcon,
|
||||
EverNoteLoader: EvernoteIcon,
|
||||
FacebookChatLoader: FBIcon,
|
||||
GitbookLoader: GitBookIcon,
|
||||
GoogleSearchAPIWrapper: GoogleIcon,
|
||||
GoogleSearchResults: GoogleIcon,
|
||||
GoogleSearchRun: GoogleIcon,
|
||||
HNLoader: HackerNewsIcon,
|
||||
HuggingFaceHub: HugginFaceIcon,
|
||||
HuggingFaceEmbeddings: HugginFaceIcon,
|
||||
IFixitLoader: IFixIcon,
|
||||
Meta: MetaIcon,
|
||||
Midjourney: MidjourneyIcon,
|
||||
NotionDirectoryLoader: NotionIcon,
|
||||
ChatOpenAI: OpenAiIcon,
|
||||
OpenAI: OpenAiIcon,
|
||||
OpenAIEmbeddings: OpenAiIcon,
|
||||
Pinecone: PineconeIcon,
|
||||
SupabaseVectorStore: SupabaseIcon,
|
||||
MongoDBAtlasVectorSearch: MongoDBIcon,
|
||||
// UnstructuredPowerPointLoader: PowerPointIcon, // word and powerpoint have differente styles
|
||||
Qdrant: QDrantIcon,
|
||||
// ReadTheDocsLoader: ReadTheDocsIcon, // does not work
|
||||
Searx: SearxIcon,
|
||||
SlackDirectoryLoader: SlackIcon,
|
||||
// Weaviate: WeaviateIcon, // does not work
|
||||
// WikipediaAPIWrapper: WikipediaIcon,
|
||||
// WolframAlphaQueryRun: WolframIcon,
|
||||
// WolframAlphaAPIWrapper: WolframIcon,
|
||||
// UnstructuredWordDocumentLoader: WordIcon, // word and powerpoint have differente styles
|
||||
agents: RocketLaunchIcon,
|
||||
chains: LinkIcon,
|
||||
memories: CpuChipIcon,
|
||||
llms: LightBulbIcon,
|
||||
prompts: CommandLineIcon,
|
||||
tools: WrenchIcon,
|
||||
advanced: ComputerDesktopIcon,
|
||||
chat: Bars3CenterLeftIcon,
|
||||
embeddings: FingerPrintIcon,
|
||||
documentloaders: PaperClipIcon,
|
||||
vectorstores: CircleStackIcon,
|
||||
toolkits: WrenchScrewdriverIcon,
|
||||
textsplitters: ScissorsIcon,
|
||||
wrappers: GiftIcon,
|
||||
utilities: Squares2X2Icon,
|
||||
unknown: QuestionMarkCircleIcon,
|
||||
};
|
||||
|
||||
export const nodeIconsLucide: {
|
||||
[char: string]: React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
|
|
@ -318,6 +242,12 @@ export const nodeIconsLucide: {
|
|||
SupabaseVectorStore: SupabaseIcon as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
VertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
ChatVertexAI: VertexAIIcon as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
agents: Rocket as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
|
|
@ -363,6 +293,9 @@ export const nodeIconsLucide: {
|
|||
utilities: Wand2 as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
retrievers: FileSearch as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
unknown: HelpCircle as React.ForwardRefExoticComponent<
|
||||
ComponentType<SVGProps<SVGSVGElement>>
|
||||
>,
|
||||
|
|
@ -995,5 +928,5 @@ export function getRandomKeyByssmm(): string {
|
|||
const now = new Date();
|
||||
const seconds = String(now.getSeconds()).padStart(2, "0");
|
||||
const milliseconds = String(now.getMilliseconds()).padStart(3, "0");
|
||||
return seconds + milliseconds;
|
||||
return seconds + milliseconds + Math.abs(Math.floor(Math.random() * 10001));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,12 @@ module.exports = {
|
|||
"./index.html",
|
||||
"./src/**/*.{js,ts,tsx,jsx}",
|
||||
],
|
||||
safelist: [
|
||||
"bg-status-blue",
|
||||
"bg-status-green",
|
||||
"bg-status-red",
|
||||
"bg-status-yellow",
|
||||
],
|
||||
important: true,
|
||||
theme: {
|
||||
container: {
|
||||
|
|
@ -22,6 +28,20 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
extend: {
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: { height: 0 },
|
||||
to: { height: "var(--radix-accordion-content-height)" },
|
||||
},
|
||||
"accordion-up": {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: 0 },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
colors: {
|
||||
"almost-dark-gray": "var(--almost-dark-gray)",
|
||||
"almost-light-blue": "var(--almost-light-blue)",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue