Flow Tweaks (#567)
This commit is contained in:
Gabriel Luiz Freitas Almeida
GitHub
commit
169815fd3f
25 changed files with 1129 additions and 80 deletions
|
|
@ -98,7 +98,10 @@ def instantiate_memory(node_type, class_object, params):
|
||||||
exc
|
exc
|
||||||
) or 'object has no field "conn"' in str(exc):
|
) or 'object has no field "conn"' in str(exc):
|
||||||
raise AttributeError(
|
raise AttributeError(
|
||||||
f"Failed to build connection to database. Please check your connection string and try again. Error: {exc}"
|
(
|
||||||
|
"Failed to build connection to database."
|
||||||
|
f" Please check your connection string and try again. Error: {exc}"
|
||||||
|
)
|
||||||
) from exc
|
) from exc
|
||||||
raise exc
|
raise exc
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
from abc import ABC, abstractmethod
|
from abc import ABC, abstractmethod
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
from langflow.template.field.base import TemplateField
|
from langflow.template.field.base import TemplateField
|
||||||
|
|
||||||
|
|
||||||
class FieldFormatter(ABC):
|
class FieldFormatter(ABC):
|
||||||
@abstractmethod
|
@abstractmethod
|
||||||
def format(self, field: TemplateField):
|
def format(self, field: TemplateField, name: Optional[str]) -> None:
|
||||||
pass
|
pass
|
||||||
|
|
|
||||||
252
src/frontend/package-lock.json
generated
252
src/frontend/package-lock.json
generated
|
|
@ -13,9 +13,11 @@
|
||||||
"@headlessui/react": "^1.7.10",
|
"@headlessui/react": "^1.7.10",
|
||||||
"@heroicons/react": "^2.0.15",
|
"@heroicons/react": "^2.0.15",
|
||||||
"@mui/material": "^5.11.9",
|
"@mui/material": "^5.11.9",
|
||||||
|
"@radix-ui/react-accordion": "^1.1.2",
|
||||||
"@radix-ui/react-checkbox": "^1.0.4",
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
"@radix-ui/react-dialog": "^1.0.4",
|
"@radix-ui/react-dialog": "^1.0.4",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.0.5",
|
"@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-label": "^2.0.2",
|
||||||
"@radix-ui/react-menubar": "^1.0.3",
|
"@radix-ui/react-menubar": "^1.0.3",
|
||||||
"@radix-ui/react-progress": "^1.0.3",
|
"@radix-ui/react-progress": "^1.0.3",
|
||||||
|
|
@ -27,6 +29,7 @@
|
||||||
"@tabler/icons-react": "^2.18.0",
|
"@tabler/icons-react": "^2.18.0",
|
||||||
"@tailwindcss/forms": "^0.5.3",
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
"@tailwindcss/line-clamp": "^0.4.4",
|
"@tailwindcss/line-clamp": "^0.4.4",
|
||||||
|
"accordion": "^3.0.2",
|
||||||
"ace-builds": "^1.16.0",
|
"ace-builds": "^1.16.0",
|
||||||
"add": "^2.0.6",
|
"add": "^2.0.6",
|
||||||
"ansi-to-html": "^0.7.2",
|
"ansi-to-html": "^0.7.2",
|
||||||
|
|
@ -54,7 +57,7 @@
|
||||||
"rehype-mathjax": "^4.0.2",
|
"rehype-mathjax": "^4.0.2",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"remark-math": "^5.1.1",
|
"remark-math": "^5.1.1",
|
||||||
"shadcn-ui": "^0.1.3",
|
"shadcn-ui": "^0.2.2",
|
||||||
"short-unique-id": "^4.4.4",
|
"short-unique-id": "^4.4.4",
|
||||||
"switch": "^0.0.0",
|
"switch": "^0.0.0",
|
||||||
"table": "^6.8.1",
|
"table": "^6.8.1",
|
||||||
|
|
@ -115,6 +118,20 @@
|
||||||
"node": ">=6.0.0"
|
"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": {
|
"node_modules/@babel/code-frame": {
|
||||||
"version": "7.21.4",
|
"version": "7.21.4",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
|
||||||
|
|
@ -1367,6 +1384,37 @@
|
||||||
"@babel/runtime": "^7.13.10"
|
"@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": {
|
"node_modules/@radix-ui/react-arrow": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
|
||||||
|
|
@ -1420,6 +1468,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": {
|
"node_modules/@radix-ui/react-collection": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
|
||||||
|
|
@ -1631,6 +1709,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": {
|
"node_modules/@radix-ui/react-id": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
|
||||||
|
|
@ -3107,6 +3193,39 @@
|
||||||
"node": ">= 10"
|
"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": {
|
"node_modules/@types/aria-query": {
|
||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
|
||||||
|
|
@ -3548,6 +3667,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
|
||||||
"integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
|
"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": {
|
"node_modules/ace-builds": {
|
||||||
"version": "1.16.0",
|
"version": "1.16.0",
|
||||||
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.16.0.tgz",
|
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.16.0.tgz",
|
||||||
|
|
@ -4492,6 +4616,11 @@
|
||||||
"node": ">=6"
|
"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": {
|
"node_modules/color-convert": {
|
||||||
"version": "1.9.3",
|
"version": "1.9.3",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||||
|
|
@ -6869,9 +6998,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/log-symbols/node_modules/chalk": {
|
"node_modules/log-symbols/node_modules/chalk": {
|
||||||
"version": "5.2.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
|
||||||
"integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
|
"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||||
},
|
},
|
||||||
|
|
@ -7844,11 +7973,33 @@
|
||||||
"node": "*"
|
"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": {
|
"node_modules/mj-context-menu": {
|
||||||
"version": "0.6.1",
|
"version": "0.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
|
||||||
"integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
|
"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": {
|
"node_modules/mri": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
||||||
|
|
@ -8117,9 +8268,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ora/node_modules/chalk": {
|
"node_modules/ora/node_modules/chalk": {
|
||||||
"version": "5.2.0",
|
"version": "5.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
|
||||||
"integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
|
"integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
"node": "^12.17.0 || ^14.13 || >=16.0.0"
|
||||||
},
|
},
|
||||||
|
|
@ -8216,6 +8367,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
|
||||||
"integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
|
"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": {
|
"node_modules/path-is-absolute": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||||
|
|
@ -9292,23 +9448,40 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/shadcn-ui": {
|
"node_modules/shadcn-ui": {
|
||||||
"version": "0.1.3",
|
"version": "0.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/shadcn-ui/-/shadcn-ui-0.2.2.tgz",
|
||||||
"integrity": "sha512-f6Wa4ZIxsigfOonC3yyJkPb2JXJnuGFyUn1fJJrDUHvIJOydUukcdQsZg7Lp6F6llkmfRjra1dZOo0KpSfdjuQ==",
|
"integrity": "sha512-T76EeZymSB45Yz63gkYOv9P0Ke+UA9IZenysx+975nyNzXxU7HRBgfwuHiMcrcubtOLrzRVedTLX3lcOMqDeRQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@antfu/ni": "^0.21.4",
|
||||||
"chalk": "5.2.0",
|
"chalk": "5.2.0",
|
||||||
"commander": "^10.0.0",
|
"commander": "^10.0.0",
|
||||||
|
"cosmiconfig": "^8.1.3",
|
||||||
|
"diff": "^5.1.0",
|
||||||
"execa": "^7.0.0",
|
"execa": "^7.0.0",
|
||||||
"fs-extra": "^11.1.0",
|
"fs-extra": "^11.1.0",
|
||||||
|
"https-proxy-agent": "^6.2.0",
|
||||||
"node-fetch": "^3.3.0",
|
"node-fetch": "^3.3.0",
|
||||||
"ora": "^6.1.2",
|
"ora": "^6.1.2",
|
||||||
"prompts": "^2.4.2",
|
"prompts": "^2.4.2",
|
||||||
|
"ts-morph": "^18.0.0",
|
||||||
|
"tsconfig-paths": "^4.2.0",
|
||||||
"zod": "^3.20.2"
|
"zod": "^3.20.2"
|
||||||
},
|
},
|
||||||
"bin": {
|
"bin": {
|
||||||
"shadcn-ui": "dist/index.js"
|
"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": {
|
"node_modules/shadcn-ui/node_modules/chalk": {
|
||||||
"version": "5.2.0",
|
"version": "5.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
|
||||||
|
|
@ -9328,6 +9501,35 @@
|
||||||
"node": ">=14"
|
"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": {
|
"node_modules/shebang-command": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||||
|
|
@ -9581,6 +9783,14 @@
|
||||||
"url": "https://github.com/chalk/ansi-regex?sponsor=1"
|
"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": {
|
"node_modules/strip-eof": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
|
||||||
|
|
@ -9956,6 +10166,28 @@
|
||||||
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
|
||||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
|
"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": {
|
"node_modules/tslib": {
|
||||||
"version": "2.5.3",
|
"version": "2.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,11 @@
|
||||||
"@headlessui/react": "^1.7.10",
|
"@headlessui/react": "^1.7.10",
|
||||||
"@heroicons/react": "^2.0.15",
|
"@heroicons/react": "^2.0.15",
|
||||||
"@mui/material": "^5.11.9",
|
"@mui/material": "^5.11.9",
|
||||||
|
"@radix-ui/react-accordion": "^1.1.2",
|
||||||
"@radix-ui/react-checkbox": "^1.0.4",
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
"@radix-ui/react-dialog": "^1.0.4",
|
"@radix-ui/react-dialog": "^1.0.4",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.0.5",
|
"@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-label": "^2.0.2",
|
||||||
"@radix-ui/react-menubar": "^1.0.3",
|
"@radix-ui/react-menubar": "^1.0.3",
|
||||||
"@radix-ui/react-progress": "^1.0.3",
|
"@radix-ui/react-progress": "^1.0.3",
|
||||||
|
|
@ -22,6 +24,7 @@
|
||||||
"@tabler/icons-react": "^2.18.0",
|
"@tabler/icons-react": "^2.18.0",
|
||||||
"@tailwindcss/forms": "^0.5.3",
|
"@tailwindcss/forms": "^0.5.3",
|
||||||
"@tailwindcss/line-clamp": "^0.4.4",
|
"@tailwindcss/line-clamp": "^0.4.4",
|
||||||
|
"accordion": "^3.0.2",
|
||||||
"ace-builds": "^1.16.0",
|
"ace-builds": "^1.16.0",
|
||||||
"add": "^2.0.6",
|
"add": "^2.0.6",
|
||||||
"ansi-to-html": "^0.7.2",
|
"ansi-to-html": "^0.7.2",
|
||||||
|
|
@ -49,7 +52,7 @@
|
||||||
"rehype-mathjax": "^4.0.2",
|
"rehype-mathjax": "^4.0.2",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"remark-math": "^5.1.1",
|
"remark-math": "^5.1.1",
|
||||||
"shadcn-ui": "^0.1.3",
|
"shadcn-ui": "^0.2.2",
|
||||||
"short-unique-id": "^4.4.4",
|
"short-unique-id": "^4.4.4",
|
||||||
"switch": "^0.0.0",
|
"switch": "^0.0.0",
|
||||||
"table": "^6.8.1",
|
"table": "^6.8.1",
|
||||||
|
|
|
||||||
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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -12,7 +12,9 @@ export default function CodeAreaComponent({
|
||||||
disabled,
|
disabled,
|
||||||
editNode = false,
|
editNode = false,
|
||||||
}: TextAreaComponentType) {
|
}: TextAreaComponentType) {
|
||||||
const [myValue, setMyValue] = useState(value);
|
const [myValue, setMyValue] = useState(
|
||||||
|
typeof value == "string" ? value : JSON.stringify(value)
|
||||||
|
);
|
||||||
const { openPopUp } = useContext(PopUpContext);
|
const { openPopUp } = useContext(PopUpContext);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
|
|
@ -22,7 +24,7 @@ export default function CodeAreaComponent({
|
||||||
}, [disabled, onChange]);
|
}, [disabled, onChange]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMyValue(value);
|
setMyValue(typeof value == "string" ? value : JSON.stringify(value));
|
||||||
}, [value]);
|
}, [value]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -47,7 +49,8 @@ export default function CodeAreaComponent({
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
|
? "truncate cursor-pointer placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 border-1 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE +
|
INPUT_STYLE +
|
||||||
(disabled ? " bg-gray-200" : "")
|
(disabled ? " bg-gray-200" : "")
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ export default function Dropdown({
|
||||||
onSelect,
|
onSelect,
|
||||||
editNode = false,
|
editNode = false,
|
||||||
numberOfOptions = 0,
|
numberOfOptions = 0,
|
||||||
|
apiModal = false,
|
||||||
}: DropDownComponentType) {
|
}: DropDownComponentType) {
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp } = useContext(PopUpContext);
|
||||||
|
|
||||||
|
|
@ -66,11 +67,12 @@ export default function Dropdown({
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
<Listbox.Options
|
<Listbox.Options
|
||||||
className={
|
className={classNames(
|
||||||
editNode
|
editNode
|
||||||
? "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
|
? "z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white 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-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
|
: "nowheel z-10 mt-1 max-h-60 w-full overflow-auto overflow-y rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
|
||||||
}
|
apiModal ? "w-[250px] mb-2" : "absolute"
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{options.map((option, id) => (
|
{options.map((option, id) => (
|
||||||
<Listbox.Option
|
<Listbox.Option
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,8 @@ export default function FloatComponent({
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
|
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
|
||||||
INPUT_STYLE +
|
INPUT_STYLE +
|
||||||
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
|
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
|
||||||
|
|
|
||||||
|
|
@ -98,23 +98,24 @@ export default function InputFileComponent({
|
||||||
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
|
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="w-full flex items-center gap-2">
|
<div className="w-full flex items-center">
|
||||||
<span
|
<span
|
||||||
onClick={handleButtonClick}
|
onClick={handleButtonClick}
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
|
? "truncate placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm border-1" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
: "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE +
|
INPUT_STYLE +
|
||||||
(disabled ? " bg-gray-200" : "")
|
(disabled ? " bg-gray-200 " : "")
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{myValue !== "" ? myValue : "No file"}
|
{myValue !== "" ? myValue : "No file"}
|
||||||
</span>
|
</span>
|
||||||
<button onClick={handleButtonClick}>
|
<button onClick={handleButtonClick}>
|
||||||
{!editNode && !loading && (
|
{!editNode && !loading && (
|
||||||
<FileSearch2 className="w-6 h-6 hover:text-ring" />
|
<FileSearch2 className="w-6 h-6 hover:text-ring ml-3" />
|
||||||
)}
|
)}
|
||||||
{!editNode && loading && (
|
{!editNode && loading && (
|
||||||
<span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
|
<span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ export default function InputListComponent({
|
||||||
onChange,
|
onChange,
|
||||||
disabled,
|
disabled,
|
||||||
editNode = false,
|
editNode = false,
|
||||||
|
onAddInput,
|
||||||
}: InputListComponentType) {
|
}: InputListComponentType) {
|
||||||
const [inputList, setInputList] = useState(value ?? [""]);
|
const [inputList, setInputList] = useState(value ?? [""]);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp } = useContext(PopUpContext);
|
||||||
|
|
@ -42,7 +43,8 @@ export default function InputListComponent({
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "border-[1px] truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
? "border-[1px] truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
|
: "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
|
||||||
(disabled ? " bg-gray-200" : "") +
|
(disabled ? " bg-gray-200" : "") +
|
||||||
"focus:placeholder-transparent"
|
"focus:placeholder-transparent"
|
||||||
|
|
@ -63,6 +65,7 @@ export default function InputListComponent({
|
||||||
setInputList((old) => {
|
setInputList((old) => {
|
||||||
let newInputList = _.cloneDeep(old);
|
let newInputList = _.cloneDeep(old);
|
||||||
newInputList.push("");
|
newInputList.push("");
|
||||||
|
onAddInput(newInputList);
|
||||||
return newInputList;
|
return newInputList;
|
||||||
});
|
});
|
||||||
onChange(inputList);
|
onChange(inputList);
|
||||||
|
|
@ -76,6 +79,7 @@ export default function InputListComponent({
|
||||||
setInputList((old) => {
|
setInputList((old) => {
|
||||||
let newInputList = _.cloneDeep(old);
|
let newInputList = _.cloneDeep(old);
|
||||||
newInputList.splice(idx, 1);
|
newInputList.splice(idx, 1);
|
||||||
|
onAddInput(newInputList);
|
||||||
return newInputList;
|
return newInputList;
|
||||||
});
|
});
|
||||||
onChange(inputList);
|
onChange(inputList);
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,8 @@ export default function IntComponent({
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
|
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
|
||||||
INPUT_STYLE +
|
INPUT_STYLE +
|
||||||
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
|
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ export default function PromptAreaComponent({
|
||||||
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
|
disabled ? "pointer-events-none cursor-not-allowed w-full" : " w-full"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="w-full flex items-center gap-3">
|
<div className="w-full flex items-center">
|
||||||
<span
|
<span
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
openPopUp(
|
openPopUp(
|
||||||
|
|
@ -50,7 +50,8 @@ export default function PromptAreaComponent({
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
||||||
(disabled ? " bg-gray-200" : "")
|
(disabled ? " bg-gray-200" : "")
|
||||||
}
|
}
|
||||||
|
|
@ -74,7 +75,7 @@ export default function PromptAreaComponent({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{!editNode && (
|
{!editNode && (
|
||||||
<ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
|
<ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,8 @@ export default function TextAreaComponent({
|
||||||
className={
|
className={
|
||||||
editNode
|
editNode
|
||||||
? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
|
||||||
INPUT_STYLE
|
INPUT_STYLE +
|
||||||
|
(disabled ? " bg-gray-200 " : "")
|
||||||
: "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
: "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
|
||||||
(disabled ? " bg-gray-200" : "")
|
(disabled ? " bg-gray-200" : "")
|
||||||
}
|
}
|
||||||
|
|
|
||||||
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 };
|
||||||
|
|
@ -54,7 +54,7 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
|
||||||
* @param {string} flowId - The id of the flow
|
* @param {string} flowId - The id of the flow
|
||||||
* @returns {string} - The python code
|
* @returns {string} - The python code
|
||||||
*/
|
*/
|
||||||
export const getPythonApiCode = (flow: FlowType): string => {
|
export const getPythonApiCode = (flow: FlowType, tweak?): string => {
|
||||||
const flowId = flow.id;
|
const flowId = flow.id;
|
||||||
|
|
||||||
// create a dictionary of node ids and the values is an empty dictionary
|
// 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}"
|
FLOW_ID = "${flowId}"
|
||||||
# You can tweak the flow by adding a tweaks dictionary
|
# You can tweak the flow by adding a tweaks dictionary
|
||||||
# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
|
# 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:
|
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
|
* @param {string} flowId - The id of the flow
|
||||||
* @returns {string} - The curl code
|
* @returns {string} - The curl code
|
||||||
*/
|
*/
|
||||||
export const getCurlCode = (flow: FlowType): string => {
|
export const getCurlCode = (flow: FlowType, tweak?): string => {
|
||||||
const flowId = flow.id;
|
const flowId = flow.id;
|
||||||
const tweaks = buildTweaks(flow);
|
const tweaks = buildTweaks(flow);
|
||||||
return `curl -X POST \\
|
return `curl -X POST \\
|
||||||
|
|
@ -108,27 +112,46 @@ export const getCurlCode = (flow: FlowType): string => {
|
||||||
window.location.host
|
window.location.host
|
||||||
}/api/v1/process/${flowId} \\
|
}/api/v1/process/${flowId} \\
|
||||||
-H 'Content-Type: application/json' \\
|
-H 'Content-Type: application/json' \\
|
||||||
-d '{"inputs": {"input": message}, "tweaks": ${JSON.stringify(
|
-d '{"inputs": {"input": message}, "tweaks": ${
|
||||||
tweaks,
|
tweak && tweak.length > 0
|
||||||
null,
|
? buildTweakObject(tweak)
|
||||||
2
|
: JSON.stringify(tweaks, null, 2)
|
||||||
)}}'`;
|
}}'`;
|
||||||
};
|
};
|
||||||
/**
|
/**
|
||||||
* Function to get the python code for the API
|
* Function to get the python code for the API
|
||||||
* @param {string} flowName - The name of the flow
|
* @param {string} flowName - The name of the flow
|
||||||
* @returns {string} - The python code
|
* @returns {string} - The python code
|
||||||
*/
|
*/
|
||||||
export const getPythonCode = (flow: FlowType): string => {
|
export const getPythonCode = (flow: FlowType, tweak?): string => {
|
||||||
const flowName = flow.name;
|
const flowName = flow.name;
|
||||||
const tweaks = buildTweaks(flow);
|
const tweaks = buildTweaks(flow);
|
||||||
return `from langflow import load_flow_from_json
|
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)
|
flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
|
||||||
# Now you can use it like any chain
|
# Now you can use it like any chain
|
||||||
flow("Hey, have you heard of LangFlow?")`;
|
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
|
* The base text for subtitle of Import Dialog
|
||||||
* @constant
|
* @constant
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,8 @@ import React, { useState } from "react";
|
||||||
export const PopUpContext = createContext({
|
export const PopUpContext = createContext({
|
||||||
openPopUp: (popUpElement: JSX.Element) => {},
|
openPopUp: (popUpElement: JSX.Element) => {},
|
||||||
closePopUp: () => {},
|
closePopUp: () => {},
|
||||||
|
setCloseEdit: (value: string) => {},
|
||||||
|
closeEdit: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
interface PopUpProviderProps {
|
interface PopUpProviderProps {
|
||||||
|
|
@ -22,8 +24,12 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => {
|
||||||
setPopUpElements((prevPopUps) => prevPopUps.slice(1));
|
setPopUpElements((prevPopUps) => prevPopUps.slice(1));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const [closeEdit, setCloseEdit] = useState("");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PopUpContext.Provider value={{ openPopUp, closePopUp }}>
|
<PopUpContext.Provider
|
||||||
|
value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
{popUpElements[0]}
|
{popUpElements[0]}
|
||||||
</PopUpContext.Provider>
|
</PopUpContext.Provider>
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,8 @@ const TabsContextInitialValue: TabsContextType = {
|
||||||
tabsState: {},
|
tabsState: {},
|
||||||
setTabsState: (state: TabsState) => {},
|
setTabsState: (state: TabsState) => {},
|
||||||
getNodeId: (nodeType: string) => "",
|
getNodeId: (nodeType: string) => "",
|
||||||
|
setTweak: (tweak: any) => {},
|
||||||
|
getTweak: {},
|
||||||
paste: (
|
paste: (
|
||||||
selection: { nodes: any; edges: any },
|
selection: { nodes: any; edges: any },
|
||||||
position: { x: number; y: number; paneX?: number; paneY?: number }
|
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 { templates, reactFlowInstance } = useContext(typesContext);
|
||||||
const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
|
const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
|
||||||
const [tabsState, setTabsState] = useState<TabsState>({});
|
const [tabsState, setTabsState] = useState<TabsState>({});
|
||||||
|
const [getTweak, setTweak] = useState({});
|
||||||
|
|
||||||
const newNodeId = useRef(uid());
|
const newNodeId = useRef(uid());
|
||||||
function incrementNodeId() {
|
function incrementNodeId() {
|
||||||
|
|
@ -644,6 +647,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
|
||||||
tabsState,
|
tabsState,
|
||||||
setTabsState,
|
setTabsState,
|
||||||
paste,
|
paste,
|
||||||
|
getTweak,
|
||||||
|
setTweak,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { useContext, useState } from "react";
|
import { useContext, useEffect, useRef, useState } from "react";
|
||||||
import { PopUpContext } from "../../contexts/popUpContext";
|
import { PopUpContext } from "../../contexts/popUpContext";
|
||||||
import "ace-builds/src-noconflict/mode-python";
|
import "ace-builds/src-noconflict/mode-python";
|
||||||
import "ace-builds/src-noconflict/theme-github";
|
import "ace-builds/src-noconflict/theme-github";
|
||||||
|
|
@ -26,14 +26,42 @@ import {
|
||||||
TabsTrigger,
|
TabsTrigger,
|
||||||
} from "../../components/ui/tabs";
|
} from "../../components/ui/tabs";
|
||||||
import { Check, Clipboard, Code2 } from "lucide-react";
|
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 }) {
|
export default function ApiModal({ flow }: { flow: FlowType }) {
|
||||||
const [open, setOpen] = useState(true);
|
const [open, setOpen] = useState(true);
|
||||||
const { dark } = useContext(darkContext);
|
const { dark } = useContext(darkContext);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
|
||||||
const [activeTab, setActiveTab] = useState("0");
|
const [activeTab, setActiveTab] = useState("0");
|
||||||
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
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 = () => {
|
const copyToClipboard = () => {
|
||||||
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
if (!navigator.clipboard || !navigator.clipboard.writeText) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -47,18 +75,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
||||||
}, 2000);
|
}, 2000);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
function setModalOpen(x: boolean) {
|
const pythonApiCode = getPythonApiCode(flow, tweak.current);
|
||||||
setOpen(x);
|
const curl_code = getCurlCode(flow, tweak.current);
|
||||||
if (x === false) {
|
const pythonCode = getPythonCode(flow, tweak.current);
|
||||||
closePopUp();
|
const tweaksCode = buildTweaks(flow);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const pythonApiCode = getPythonApiCode(flow);
|
|
||||||
|
|
||||||
const curl_code = getCurlCode(flow);
|
|
||||||
const pythonCode = getPythonCode(flow);
|
|
||||||
|
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{
|
{
|
||||||
name: "cURL",
|
name: "cURL",
|
||||||
|
|
@ -80,10 +100,169 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
||||||
code: pythonCode,
|
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 (
|
return (
|
||||||
<Dialog open={true} onOpenChange={setModalOpen}>
|
<Dialog open={true} onOpenChange={setModalOpen}>
|
||||||
<DialogTrigger></DialogTrigger>
|
<DialogTrigger></DialogTrigger>
|
||||||
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
|
<DialogContent className="lg:max-w-[850px] sm:max-w-[700px] h-[580px]">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle className="flex items-center">
|
<DialogTitle className="flex items-center">
|
||||||
<span className="pr-2">Code</span>
|
<span className="pr-2">Code</span>
|
||||||
|
|
@ -96,9 +275,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
<Tabs
|
<Tabs
|
||||||
defaultValue={"0"}
|
value={activeTab}
|
||||||
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
|
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
|
||||||
onValueChange={(value) => setActiveTab(value)}
|
onValueChange={(value) => {
|
||||||
|
setActiveTab(value);
|
||||||
|
if (value === "3") {
|
||||||
|
openAccordions();
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between px-2">
|
<div className="flex items-center justify-between px-2">
|
||||||
<TabsList>
|
<TabsList>
|
||||||
|
|
@ -108,29 +292,465 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
|
||||||
</TabsTrigger>
|
</TabsTrigger>
|
||||||
))}
|
))}
|
||||||
</TabsList>
|
</TabsList>
|
||||||
<div className="float-right">
|
{Number(activeTab) < 3 && (
|
||||||
<button
|
<div className="float-right">
|
||||||
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
|
<button
|
||||||
onClick={copyToClipboard}
|
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
|
||||||
>
|
onClick={copyToClipboard}
|
||||||
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
|
>
|
||||||
{isCopied ? "Copied!" : "Copy code"}
|
{isCopied ? <Check size={18} /> : <Clipboard size={15} />}
|
||||||
</button>
|
{isCopied ? "Copied!" : "Copy code"}
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{tabs.map((tab, index) => (
|
{tabs.map((tab, index) => (
|
||||||
<TabsContent
|
<TabsContent
|
||||||
value={index.toString()}
|
value={index.toString()}
|
||||||
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
|
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1"
|
||||||
|
key={index} // Remember to add a unique key prop
|
||||||
>
|
>
|
||||||
<SyntaxHighlighter
|
{index < 3 ? (
|
||||||
className="h-[400px] w-full overflow-auto"
|
<SyntaxHighlighter
|
||||||
language={tab.mode}
|
className="h-[400px] w-full overflow-auto"
|
||||||
style={oneDark}
|
language={tab.mode}
|
||||||
>
|
style={oneDark}
|
||||||
{tab.code}
|
>
|
||||||
</SyntaxHighlighter>
|
{tab.code}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
) : index === 3 ? (
|
||||||
|
<>
|
||||||
|
<div className="flex w-full h-[400px] mt-2">
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
"w-full rounded-lg bg-muted border-[1px] border-gray-200",
|
||||||
|
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 flex-col gap-5 h-fit">
|
||||||
|
<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-7 text-center">
|
||||||
|
PARAM
|
||||||
|
</TableHead>
|
||||||
|
<TableHead className="p-0 h-7 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-gray-900 text-sm">
|
||||||
|
{n}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
|
||||||
|
<div className="w-[250px] m-auto">
|
||||||
|
{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>
|
</TabsContent>
|
||||||
))}
|
))}
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
|
||||||
|
|
@ -34,12 +34,13 @@ export default function CodeAreaModal({
|
||||||
const [code, setCode] = useState(value);
|
const [code, setCode] = useState(value);
|
||||||
const { dark } = useContext(darkContext);
|
const { dark } = useContext(darkContext);
|
||||||
const { setErrorData, setSuccessData } = useContext(alertContext);
|
const { setErrorData, setSuccessData } = useContext(alertContext);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
function setModalOpen(x: boolean) {
|
function setModalOpen(x: boolean) {
|
||||||
setOpen(x);
|
setOpen(x);
|
||||||
if (x === false) {
|
if (x === false) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
setCloseEdit("editcode");
|
||||||
closePopUp();
|
closePopUp();
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,11 +38,12 @@ export default function GenericModal({
|
||||||
const [myValue, setMyValue] = useState(value);
|
const [myValue, setMyValue] = useState(value);
|
||||||
const { dark } = useContext(darkContext);
|
const { dark } = useContext(darkContext);
|
||||||
const { setErrorData, setSuccessData } = useContext(alertContext);
|
const { setErrorData, setSuccessData } = useContext(alertContext);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
function setModalOpen(x: boolean) {
|
function setModalOpen(x: boolean) {
|
||||||
setOpen(x);
|
setOpen(x);
|
||||||
if (x === false) {
|
if (x === false) {
|
||||||
|
setCloseEdit("generic");
|
||||||
closePopUp();
|
closePopUp();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,12 +16,13 @@ export default function PromptAreaModal({
|
||||||
const [myValue, setMyValue] = useState(value);
|
const [myValue, setMyValue] = useState(value);
|
||||||
const { dark } = useContext(darkContext);
|
const { dark } = useContext(darkContext);
|
||||||
const { setErrorData, setSuccessData } = useContext(alertContext);
|
const { setErrorData, setSuccessData } = useContext(alertContext);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
function setModalOpen(x: boolean) {
|
function setModalOpen(x: boolean) {
|
||||||
setOpen(x);
|
setOpen(x);
|
||||||
if (x === false) {
|
if (x === false) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
setCloseEdit("prompt");
|
||||||
closePopUp();
|
closePopUp();
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,13 @@ export default function TextAreaModal({
|
||||||
}) {
|
}) {
|
||||||
const [open, setOpen] = useState(true);
|
const [open, setOpen] = useState(true);
|
||||||
const [myValue, setMyValue] = useState(value);
|
const [myValue, setMyValue] = useState(value);
|
||||||
const { closePopUp } = useContext(PopUpContext);
|
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
|
||||||
const ref = useRef();
|
const ref = useRef();
|
||||||
function setModalOpen(x: boolean) {
|
function setModalOpen(x: boolean) {
|
||||||
setOpen(x);
|
setOpen(x);
|
||||||
if (x === false) {
|
if (x === false) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
setCloseEdit("textarea");
|
||||||
closePopUp();
|
closePopUp();
|
||||||
}, 300);
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ export type DropDownComponentType = {
|
||||||
options: string[];
|
options: string[];
|
||||||
onSelect: (value: string) => void;
|
onSelect: (value: string) => void;
|
||||||
editNode?: boolean;
|
editNode?: boolean;
|
||||||
|
apiModal?: boolean;
|
||||||
numberOfOptions?: number;
|
numberOfOptions?: number;
|
||||||
};
|
};
|
||||||
export type ParameterComponentType = {
|
export type ParameterComponentType = {
|
||||||
|
|
@ -42,6 +43,7 @@ export type InputListComponentType = {
|
||||||
onChange: (value: string[]) => void;
|
onChange: (value: string[]) => void;
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
editNode?: boolean;
|
editNode?: boolean;
|
||||||
|
onAddInput?: (value?: string[]) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type TextAreaComponentType = {
|
export type TextAreaComponentType = {
|
||||||
|
|
@ -111,6 +113,11 @@ export type RadialProgressType = {
|
||||||
color?: string;
|
color?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type AccordionComponentType = {
|
||||||
|
children?: ReactElement;
|
||||||
|
open?: string[];
|
||||||
|
trigger?: string;
|
||||||
|
};
|
||||||
export type Side = "top" | "right" | "bottom" | "left";
|
export type Side = "top" | "right" | "bottom" | "left";
|
||||||
|
|
||||||
export type ShadTooltipProps = {
|
export type ShadTooltipProps = {
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,8 @@ export type TabsContextType = {
|
||||||
) => void;
|
) => void;
|
||||||
lastCopiedSelection: { nodes: any; edges: any };
|
lastCopiedSelection: { nodes: any; edges: any };
|
||||||
setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
|
setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
|
||||||
|
setTweak: (tweak: any) => void;
|
||||||
|
getTweak: any;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type TabsState = {
|
export type TabsState = {
|
||||||
|
|
|
||||||
|
|
@ -90,6 +90,20 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
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: {
|
colors: {
|
||||||
border: "hsl(var(--border))",
|
border: "hsl(var(--border))",
|
||||||
input: "hsl(var(--input))",
|
input: "hsl(var(--input))",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue