From c6b3986bc91eb5e4c48a94e565e66e1ed8423af8 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 27 Jun 2023 17:02:41 -0300 Subject: [PATCH 01/15] Adding accordion, tweaks tabs --- src/frontend/package-lock.json | 240 ++++++++- src/frontend/package.json | 5 +- .../components/AccordionComponent/index.tsx | 27 + .../components/codeAreaComponent/index.tsx | 2 +- .../components/dropdownComponent/index.tsx | 10 +- .../src/components/floatComponent/index.tsx | 2 +- .../components/inputFileComponent/index.tsx | 8 +- .../components/inputListComponent/index.tsx | 7 +- .../src/components/intComponent/index.tsx | 2 +- .../src/components/promptComponent/index.tsx | 6 +- .../components/textAreaComponent/index.tsx | 2 +- src/frontend/src/components/ui/accordion.tsx | 60 +++ src/frontend/src/modals/ApiModal/index.tsx | 498 +++++++++++++++++- src/frontend/src/types/components/index.ts | 9 + src/frontend/tailwind.config.js | 14 + 15 files changed, 851 insertions(+), 41 deletions(-) create mode 100644 src/frontend/src/components/AccordionComponent/index.tsx create mode 100644 src/frontend/src/components/ui/accordion.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 673f56f10..1c185a3b9 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -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", @@ -53,7 +56,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", @@ -114,6 +117,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", @@ -1366,6 +1383,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 +1467,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 +1708,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 +3192,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 +3666,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", @@ -4491,6 +4615,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", @@ -7838,11 +7967,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", @@ -8210,6 +8361,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", @@ -9286,23 +9442,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 +9495,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 +9777,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 +10160,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", diff --git a/src/frontend/package.json b/src/frontend/package.json index 95e826736..36c6bef58 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -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", @@ -48,7 +51,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", diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx new file mode 100644 index 000000000..1c2b41b46 --- /dev/null +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -0,0 +1,27 @@ +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, +}: AccordionComponentType) { + + return <> + + + {trigger} + + {children} + + + + +} diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 1730904e2..6fec7cd27 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -47,7 +47,7 @@ export default function CodeAreaComponent({ className={ 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" + - 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" + INPUT_STYLE + (disabled ? " bg-gray-200" : "") diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 522078629..467103eae 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -11,6 +11,7 @@ export default function Dropdown({ onSelect, editNode = false, numberOfOptions = 0, + apiModal = false }: DropDownComponentType) { let [internalValue, setInternalValue] = useState( value === "" || !value ? "Choose an option" : value @@ -62,9 +63,12 @@ export default function Dropdown({ > {options.map((option, id) => ( diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx index 2fc80962b..5f8f82242 100644 --- a/src/frontend/src/components/floatComponent/index.tsx +++ b/src/frontend/src/components/floatComponent/index.tsx @@ -57,7 +57,7 @@ export default function FloatComponent({ className={ 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" + - 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" + INPUT_STYLE + (disabled ? " bg-gray-200 dark:bg-gray-700" : "") diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx index 7b0325156..7c89302d3 100644 --- a/src/frontend/src/components/inputFileComponent/index.tsx +++ b/src/frontend/src/components/inputFileComponent/index.tsx @@ -98,23 +98,23 @@ export default function InputFileComponent({ disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" } > -
+
{myValue !== "" ? myValue : "No file"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index 4b4cd1582..160579d1a 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/src/frontend/src/components/textAreaComponent/index.tsx @@ -53,7 +53,7 @@ export default function TextAreaComponent({ className={ 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" + - 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" + (disabled ? " bg-gray-200" : "") } diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx new file mode 100644 index 000000000..9679cf1c3 --- /dev/null +++ b/src/frontend/src/components/ui/accordion.tsx @@ -0,0 +1,60 @@ +"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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 8b373c4e2..bc4ecac87 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -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,6 +26,28 @@ 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"; export default function ApiModal({ flow }: { flow: FlowType }) { const [open, setOpen] = useState(true); @@ -33,6 +55,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { const { closePopUp } = useContext(PopUpContext); const [activeTab, setActiveTab] = useState("0"); const [isCopied, setIsCopied] = useState(false); + const [enabled, setEnabled] = useState(null); + const tweak = useRef([]); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { @@ -54,10 +78,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } } - const pythonApiCode = getPythonApiCode(flow); + useEffect(() => { + console.log(tweak.current); + }, [closePopUp]); + const pythonApiCode = getPythonApiCode(flow); const curl_code = getCurlCode(flow); const pythonCode = getPythonCode(flow); + const tweaksCode = buildTweaks(flow); const tabs = [ { @@ -80,10 +108,81 @@ export default function ApiModal({ flow }: { flow: FlowType }) { code: pythonCode, }, ]; + + 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 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 (template.list === true) { + if (changes.length === 0) { + if (existingTweak[tw] && existingTweak[tw][template["name"]]) { + delete existingTweak[tw][template["name"]]; + } + } + } + + if (existingTweak[tw][template["name"]] == template.value) { + tweak.current.forEach((element) => { + if (element[tw] && element[tw][template["name"]]) { + delete element[tw][template["name"]]; + } + 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 !== ""; + }); + delete element[tw]; + } + }); + } + } else { + const newTweak = { + [tw]: { + [template["name"]]: changes, + }, + }; + tweak.current.push(newTweak); + } + + console.log(tweak.current); + } + + function buildContent(value) { + const htmlContent = ( +
+ {value != null && value != '' ? value : 'None'} +
+ ); + return htmlContent; + } + return ( - + Code @@ -103,32 +202,391 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => ( - {tab.name} + + {tab.name} + ))} -
- -
+ {Number(activeTab) < 3 && ( +
+ +
+ )}
{tabs.map((tab, index) => ( - - {tab.code} - + {index < 3 ? ( + + {tab.code} + + ) : index === 3 ? ( + <> +
+
+ {flow["data"]["nodes"].map((t: any, index) => ( +
+ +
+ + + + + PARAM + + + VALUE + + + + + {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 ( + + + {n} + + +
+ {t.data.node.template[n].type === + "str" && + !t.data.node.template[n] + .options ? ( +
+ {t.data.node.template[n] + .list ? ( + {}} + onAddInput={(k) => { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); + }} + /> + ) : t.data.node.template[n] + .multiline ? ( +
+ + {}} + /> + +
+ ) : ( + { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); + }} + /> + )} +
+ ) : t.data.node.template[n] + .type === "bool" ? ( +
+ {" "} + { + t.data.node.template[ + n + ].value = e; + setEnabled(e); + buildTweakObject( + t["data"]["id"], + e, + t.data.node.template[n] + ); + }} + size="small" + disabled={false} + /> +
+ ) + : + t.data.node.template[n] + .type === "file" ? ( + +
+ { + + }} + fileTypes={ + t.data.node.template[n] + .fileTypes + } + suffixes={ + t.data.node.template[n] + .suffixes + } + onFileChange={(k: any) => { + }} + > +
+ + + ) + : t.data.node.template[n] + .type === "float" ? ( +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> +
+ ) : t.data.node.template[n] + .type === "str" && + t.data.node.template[n] + .options ? ( +
+ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ) + } + value={ + t.data.node.template[n] + .value ?? + "Choose an option" + } + > +
+ ) : t.data.node.template[n] + .type === "int" ? ( +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[n] + ); + }} + /> +
+ ) : t.data.node.template[n] + .type === "prompt" ? ( + +
+ {}} + /> +
+ + ) : t.data.node.template[n] + .type === "code" ? ( + +
+ {}} + /> +
+ + ) : t.data.node.template[n] + .type === "Any" ? ( + "-" + ) : ( +
+ )} +
+ + + ); + })} + +
+
+ +
+ ))} + + {/* +
+ + + + + TWEAK + + + VALUE + + + + + {invoices.map((invoice) => ( + + + {invoice.paymentStatus} + + + {invoice.paymentMethod} + + + ))} + +
+
*/} +
+
+ + ) : null} ))} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 630526193..0adbdc1d3 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -28,6 +28,7 @@ export type DropDownComponentType = { options: string[]; onSelect: (value: string) => void; editNode?: boolean; + apiModal?: boolean; numberOfOptions?: number; }; export type ParameterComponentType = { @@ -47,6 +48,8 @@ export type InputListComponentType = { onChange: (value: string[]) => void; disabled: boolean; editNode?: boolean; + onAddInput?: (value?: string[]) => void; + }; export type TextAreaComponentType = { @@ -115,3 +118,9 @@ export type RadialProgressType = { value?: number; color?: string; }; + +export type AccordionComponentType = { + children?: ReactElement; + value?: string; + trigger?: string; +}; \ No newline at end of file diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index 5561b1044..50d27a3c7 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -90,6 +90,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: { border: "hsl(var(--border))", input: "hsl(var(--input))", From ebee617b52a96ab9b5981815bb88ef671c297054 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 27 Jun 2023 17:24:19 -0300 Subject: [PATCH 02/15] =?UTF-8?q?=F0=9F=94=A8=20refactor(constants.tsx):?= =?UTF-8?q?=20add=20optional=20parameter=20to=20getPythonApiCode,=20getCur?= =?UTF-8?q?lCode=20and=20getPythonCode=20functions=20to=20allow=20tweaking?= =?UTF-8?q?=20of=20the=20flow=20=E2=9C=A8=20feat(ApiModal):=20pass=20the?= =?UTF-8?q?=20tweak.current=20value=20to=20the=20getPythonApiCode,=20getCu?= =?UTF-8?q?rlCode=20and=20getPythonCode=20functions=20to=20allow=20tweakin?= =?UTF-8?q?g=20of=20the=20flow.=20Update=20the=20tabs=20with=20the=20new?= =?UTF-8?q?=20code=20after=20a=20tweak=20is=20added.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/constants.tsx | 22 ++++++++++++---------- src/frontend/src/modals/ApiModal/index.tsx | 18 +++++++++++------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index f569046ea..4cebb9b54 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -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,9 @@ 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 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: """ @@ -100,7 +102,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,22 +110,22 @@ 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 ? JSON.stringify(tweak, null, 2) : 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 ? JSON.stringify(tweak, null, 2) : 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?")`; diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index bc4ecac87..cfef3bd37 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -78,13 +78,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } } - useEffect(() => { - console.log(tweak.current); - }, [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 = [ @@ -167,6 +163,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) { 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; + console.log(tweak.current); } From 132b2e367b162db69b97ad8b3a28ecb0a880726d Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 27 Jun 2023 19:51:53 -0300 Subject: [PATCH 03/15] =?UTF-8?q?=F0=9F=90=9B=20fix(constants.tsx):=20add?= =?UTF-8?q?=20check=20for=20empty=20tweak=20array=20to=20avoid=20JSON.stri?= =?UTF-8?q?ngify=20error?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/constants.tsx | 6 +++--- src/frontend/src/modals/ApiModal/index.tsx | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 4cebb9b54..4aee27d83 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -71,7 +71,7 @@ FLOW_ID = "${flowId}" # You can tweak the flow by adding a tweaks dictionary # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}} TWEAKS = ${ - tweak ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: @@ -111,7 +111,7 @@ export const getCurlCode = (flow: FlowType, tweak?): string => { }/api/v1/process/${flowId} \\ -H 'Content-Type: application/json' \\ -d '{"inputs": {"input": message}, "tweaks": ${ - tweak ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) }}'`; }; /** @@ -124,7 +124,7 @@ export const getPythonCode = (flow: FlowType, tweak?): string => { const tweaks = buildTweaks(flow); return `from langflow import load_flow_from_json TWEAKS = ${ - tweak ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) } flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS) # Now you can use it like any chain diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index cfef3bd37..5d4241338 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -77,6 +77,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { closePopUp(); } } + const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); From 4ac1326f3a252a698df09df0e3efbd4d78c5f0b7 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 27 Jun 2023 23:35:27 -0300 Subject: [PATCH 04/15] =?UTF-8?q?=F0=9F=90=9B=20fix(AccordionComponent):?= =?UTF-8?q?=20remove=20extra=20whitespace=20in=20AccordionTrigger=20classN?= =?UTF-8?q?ame=20for=20consistent=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✨ feat(tabsContext): add setTweak and getTweak functions to TabsContext to manage tweak state 🐛 fix(ApiModal): remove unused imports and console.log statements ✨ feat(ApiModal): add functionality to get and set tweak state in TabsContext 🐛 fix(ApiModal): fix key prop warning in map function 🐛 fix(ApiModal): fix unused variable warning ✨ feat(ApiModal): add getValue function to get the value from tweak state or default value 🐛 fix(ApiModal): remove unused onChange functions 🐛 fix(ApiModal): fix key prop warning in map function 🐛 fix(ApiModal): fix unused variable warning ✨ feat(ApiModal): add functionality to get and set tweak state in TabsContext 🐛 fix(ApiModal): remove unused imports and console.log statements ✨ feat(tabsContext): add setTweak and getTweak functions to TabsContext to manage tweak state --- .../components/AccordionComponent/index.tsx | 3 +- src/frontend/src/contexts/tabsContext.tsx | 5 ++ src/frontend/src/modals/ApiModal/index.tsx | 78 ++++++++++++++----- src/frontend/src/types/tabs/index.ts | 2 + 4 files changed, 67 insertions(+), 21 deletions(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 1c2b41b46..19a811f87 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -14,10 +14,11 @@ export default function AccordionComponent({ children, }: AccordionComponentType) { + return <> - {trigger} + {trigger} {children} diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 7637699e3..1cccd4b06 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -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({}); + const [getTweak, setTweak] = useState({}); const newNodeId = useRef(uid()); function incrementNodeId() { @@ -634,6 +637,8 @@ export function TabsProvider({ children }: { children: ReactNode }) { tabsState, setTabsState, paste, + getTweak, + setTweak }} > {children} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 5d4241338..27522ece8 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -48,6 +48,8 @@ import PromptAreaComponent from "../../components/promptComponent"; import TextAreaComponent from "../../components/textAreaComponent"; import ToggleShadComponent from "../../components/toggleShadComponent"; import ShadTooltip from "../../components/ShadTooltipComponent"; +import { cloneDeep } from "lodash"; +import { TabsContext } from "../../contexts/tabsContext"; export default function ApiModal({ flow }: { flow: FlowType }) { const [open, setOpen] = useState(true); @@ -57,7 +59,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { const [isCopied, setIsCopied] = useState(false); const [enabled, setEnabled] = useState(null); const tweak = useRef([]); - + const { setTweak, getTweak } = useContext(TabsContext); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { return; @@ -78,7 +80,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } } - const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current); @@ -171,8 +172,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { tabs[0].code = curl_code; tabs[1].code = pythonApiCode; tabs[2].code = pythonCode; - - console.log(tweak.current); + + setTweak(tweak.current); } function buildContent(value) { @@ -184,6 +185,33 @@ export default function ApiModal({ flow }: { flow: FlowType }) { return htmlContent; } + function getValue(value, node, template){ + + let returnValue = value ?? ""; + + if(getTweak.length > 0){ + for (const obj of getTweak) { + // Obtém a chave do objeto interno + const key = Object.keys(obj)[0]; + // Obtém o valor do objeto interno + 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; + } + + + return ( @@ -251,7 +279,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { )} > {flow["data"]["nodes"].map((t: any, index) => ( -
+
@@ -318,7 +346,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) { : t.data.node .template[n].value } - onChange={(k) => {}} + onChange={(k) => { + + }} onAddInput={(k) => { buildTweakObject( t["data"]["id"], @@ -348,7 +378,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { .template[n] .value ?? "" } - onChange={(k) => {}} + onChange={(k) => { + }} /> @@ -361,8 +392,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { .password ?? false } value={ - t.data.node.template[n] - .value ?? "" + + getValue(t.data.node.template[n] + .value, t.data, t.data.node.template[n]) + } onChange={(k) => { buildTweakObject( @@ -420,7 +453,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) { .value ?? "" } onChange={(k: any) => { - }} fileTypes={ t.data.node.template[n] @@ -444,8 +476,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { disabled={false} editNode={true} value={ - t.data.node.template[n] - .value ?? "" + getValue(t.data.node.template[n] + .value, t.data, t.data.node.template[n]) } onChange={(k) => { buildTweakObject( @@ -468,17 +500,21 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .options } - onSelect={(k) => + onSelect={(k) =>{ + + + buildTweakObject( t["data"]["id"], k, t.data.node.template[n] ) } + + } value={ - t.data.node.template[n] - .value ?? - "Choose an option" + getValue(t.data.node.template[n] + .value, t.data, t.data.node.template[n]) } > @@ -489,8 +525,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { disabled={false} editNode={true} value={ - t.data.node.template[n] - .value ?? "" + getValue(t.data.node.template[n] + .value, t.data, t.data.node.template[n]) } onChange={(k) => { buildTweakObject( @@ -518,7 +554,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .value ?? "" } - onChange={(k) => {}} + onChange={(k) => { + }} /> @@ -539,7 +576,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .value ?? "" } - onChange={(k) => {}} + onChange={(k) => { + }} /> diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 55829d6ca..8f823535c 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -28,6 +28,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 = { From b29a54c6782f765b604d99f812d54872101e7d9f Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 28 Jun 2023 11:35:30 -0300 Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=94=A7=20fix(AccordionComponent/ind?= =?UTF-8?q?ex.tsx):=20fix=20import=20formatting=20and=20add=20missing=20se?= =?UTF-8?q?micolon=20=E2=9C=A8=20feat(AccordionComponent/index.tsx):=20add?= =?UTF-8?q?=20support=20for=20opening=20and=20closing=20accordion=20items?= =?UTF-8?q?=20on=20click=20=F0=9F=94=A7=20fix(popUpContext.tsx):=20add=20m?= =?UTF-8?q?issing=20semicolon=20and=20fix=20formatting=20=E2=9C=A8=20feat(?= =?UTF-8?q?popUpContext.tsx):=20add=20closeEdit=20state=20and=20setCloseEd?= =?UTF-8?q?it=20function=20to=20manage=20closing=20edit=20pop-up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐛 fix(ApiModal/index.tsx): add missing dependencies to useEffect to prevent stale data ✨ feat(ApiModal/index.tsx): add support for opening and closing accordion when there are tweaks present 🔧 chore(ApiModal/index.tsx): refactor getValue function to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor buildContent function to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor buildTweakObject function to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor onChange functions to improve readability and maintainability 🔧 chore(ApiModal/index.tsx): refactor value props to improve readability and maintainability 🔧 fix(codeAreaModal): add setCloseEdit function to PopUpContext to handle closing editcode 🔧 fix(promptModal): add setCloseEdit function to PopUpContext to handle closing prompt 🔧 fix(textAreaModal): add setCloseEdit function to PopUpContext to handle closing textarea 🔧 fix(components): change value prop to open prop in AccordionComponentType for better semantics --- .../components/AccordionComponent/index.tsx | 40 ++- src/frontend/src/contexts/popUpContext.tsx | 8 +- src/frontend/src/modals/ApiModal/index.tsx | 257 +++++++++++------- .../src/modals/codeAreaModal/index.tsx | 4 +- src/frontend/src/modals/promptModal/index.tsx | 3 +- .../src/modals/textAreaModal/index.tsx | 3 +- src/frontend/src/types/components/index.ts | 2 +- 7 files changed, 195 insertions(+), 122 deletions(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 19a811f87..c1174269a 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -1,5 +1,8 @@ import { ReactElement, useContext, useEffect, useRef, useState } from "react"; -import { AccordionComponentType, ProgressBarType } from "../../types/components"; +import { + AccordionComponentType, + ProgressBarType, +} from "../../types/components"; import { Progress } from "../../components/ui/progress"; import { setInterval } from "timers/promises"; import { @@ -7,22 +10,33 @@ import { AccordionContent, AccordionItem, AccordionTrigger, -} from "../../components/ui/accordion" +} from "../../components/ui/accordion"; export default function AccordionComponent({ trigger, children, + open = false, }: AccordionComponentType) { + const [value, setValue] = useState(!open ? "" : trigger); + function handleClick() { + value == "" ? setValue(trigger) : setValue(""); + } - - return <> - - - {trigger} - - {children} - - - - + return ( + <> + + + { + handleClick(); + }} + className="ml-3" + > + {trigger} + + {children} + + + + ); } diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx index 371aeefce..a59eb0f9f 100644 --- a/src/frontend/src/contexts/popUpContext.tsx +++ b/src/frontend/src/contexts/popUpContext.tsx @@ -5,12 +5,15 @@ import React, { useState } from "react"; export const PopUpContext = createContext({ openPopUp: (popUpElement: JSX.Element) => {}, closePopUp: () => {}, + setCloseEdit: (value: string) => {}, + closeEdit: "", }); interface PopUpProviderProps { children: React.ReactNode; } + const PopUpProvider = ({ children }: PopUpProviderProps) => { const [popUpElements, setPopUpElements] = useState([]); @@ -22,8 +25,11 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => { setPopUpElements((prevPopUps) => prevPopUps.slice(1)); }; + const [closeEdit, setCloseEdit] = useState(""); + + return ( - + {children} {popUpElements[0]} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 27522ece8..a41b361e8 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -54,10 +54,11 @@ 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(false); const [enabled, setEnabled] = useState(null); + const [openAccordion, setOpenAccordion] = useState(false); const tweak = useRef([]); const { setTweak, getTweak } = useContext(TabsContext); const copyToClipboard = () => { @@ -76,10 +77,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) { function setModalOpen(x: boolean) { setOpen(x); if (x === false) { + setCloseEdit(""); + setTweak([]); closePopUp(); } } - + + useEffect(() => { + if (closeEdit !== "") { + setActiveTab("3"); + setOpenAccordion(true); + } + }, [closeEdit]); + const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current); @@ -172,46 +182,42 @@ export default function ApiModal({ flow }: { flow: FlowType }) { tabs[0].code = curl_code; tabs[1].code = pythonApiCode; tabs[2].code = pythonCode; - + setTweak(tweak.current); } function buildContent(value) { const htmlContent = (
- {value != null && value != '' ? value : 'None'} + {value != null && value != "" ? value : "None"}
); return htmlContent; } - function getValue(value, node, template){ - + function getValue(value, node, template) { let returnValue = value ?? ""; - if(getTweak.length > 0){ + if (getTweak.length > 0) { for (const obj of getTweak) { // Obtém a chave do objeto interno - const key = Object.keys(obj)[0]; - // Obtém o valor do objeto interno - const value = obj[key]; - if(key == node['id']){ - Object.keys(value).forEach((key) => { - if(key == template['name']){ - returnValue = value[key]; - } - }) - } + const key = Object.keys(obj)[0]; + // Obtém o valor do objeto interno + const value = obj[key]; + if (key == node["id"]) { + Object.keys(value).forEach((key) => { + if (key == template["name"]) { + returnValue = value[key]; + } + }); } - } - else{ + } + } else { return value ?? ""; } return returnValue; } - - return ( @@ -228,9 +234,15 @@ export default function ApiModal({ flow }: { flow: FlowType }) { setActiveTab(value)} + onValueChange={(value) => { + setActiveTab(value) + + if(tweak.current.length > 0){ + setOpenAccordion(true); + } + }} >
@@ -280,7 +292,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { > {flow["data"]["nodes"].map((t: any, index) => (
- +
@@ -309,7 +324,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { "code" || t.data.node.template[n].type === "prompt" || - t.data.node.template[n].type === + t.data.node.template[n].type === "file" || t.data.node.template[n].type === "int") @@ -346,9 +361,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { : t.data.node .template[n].value } - onChange={(k) => { - - }} + onChange={(k) => {}} onAddInput={(k) => { buildTweakObject( t["data"]["id"], @@ -371,14 +384,23 @@ export default function ApiModal({ flow }: { flow: FlowType }) { )} > { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); }} /> @@ -391,12 +413,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .password ?? false } - value={ - - getValue(t.data.node.template[n] - .value, t.data, t.data.node.template[n]) - - } + value={getValue( + t.data.node.template[n] + .value, + t.data, + t.data.node.template[n] + )} onChange={(k) => { buildTweakObject( t["data"]["id"], @@ -433,52 +455,54 @@ export default function ApiModal({ flow }: { flow: FlowType }) { disabled={false} /> - ) - : - t.data.node.template[n] + ) : t.data.node.template[n] .type === "file" ? ( - + .value, + t.data, + t.data.node.template[n] + ) + )} + >
- { - }} - fileTypes={ - t.data.node.template[n] - .fileTypes - } - suffixes={ - t.data.node.template[n] - .suffixes - } - onFileChange={(k: any) => { - }} - > -
- - - ) - : t.data.node.template[n] + {}} + fileTypes={ + t.data.node.template[n] + .fileTypes + } + suffixes={ + t.data.node.template[n] + .suffixes + } + onFileChange={( + k: any + ) => {}} + > + + + ) : t.data.node.template[n] .type === "float" ? (
{ buildTweakObject( t["data"]["id"], @@ -500,22 +524,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) { t.data.node.template[n] .options } - onSelect={(k) =>{ - - - + 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]) - } + ); + }} + value={getValue( + t.data.node.template[n] + .value, + t.data, + t.data.node.template[n] + )} >
) : t.data.node.template[n] @@ -524,10 +545,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { { buildTweakObject( t["data"]["id"], @@ -542,19 +565,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); }} />
@@ -564,19 +600,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{ + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); }} />
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index f6e4b8e1c..0f9a26f33 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -34,13 +34,15 @@ 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(() => { closePopUp(); + setCloseEdit("editcode"); + }, 300); } } diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx index 8a3ce4185..f051de427 100644 --- a/src/frontend/src/modals/promptModal/index.tsx +++ b/src/frontend/src/modals/promptModal/index.tsx @@ -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); } diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx index a72f74643..4dee61385 100644 --- a/src/frontend/src/modals/textAreaModal/index.tsx +++ b/src/frontend/src/modals/textAreaModal/index.tsx @@ -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); } diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 0adbdc1d3..4c936cabe 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -121,6 +121,6 @@ export type RadialProgressType = { export type AccordionComponentType = { children?: ReactElement; - value?: string; + open?: boolean; trigger?: string; }; \ No newline at end of file From dc4d1ccd65539602199f9fefd8f1357610929cbc Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 28 Jun 2023 11:43:21 -0300 Subject: [PATCH 06/15] =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal):=20remove=20?= =?UTF-8?q?unnecessary=20div=20tag=20to=20fix=20layout=20issue=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(codeAreaModal):=20fix=20closePopUp=20functio?= =?UTF-8?q?n=20call=20placement=20to=20ensure=20proper=20functionality=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(genericModal):=20set=20closeEdit=20value=20t?= =?UTF-8?q?o=20"generic"=20to=20fix=20issue=20with=20closing=20the=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/modals/ApiModal/index.tsx | 8 +++++--- src/frontend/src/modals/codeAreaModal/index.tsx | 3 +-- src/frontend/src/modals/genericModal/index.tsx | 3 ++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index a41b361e8..76c07c5aa 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -374,8 +374,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { /> ) : t.data.node.template[n] .multiline ? ( -
- +
+ -
+ + ) : ( { - closePopUp(); setCloseEdit("editcode"); - + closePopUp(); }, 300); } } diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 6f89e24a6..8223cb3f8 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -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(); } } From ab0fcc9cb0fa12f4e6d6610ef2aff585b5cb81e3 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 28 Jun 2023 12:16:27 -0300 Subject: [PATCH 07/15] =?UTF-8?q?=F0=9F=94=A7=20chore(ApiModal):=20add=20t?= =?UTF-8?q?weak.current=20assignment=20to=20improve=20code=20readability?= =?UTF-8?q?=20and=20maintainability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/modals/ApiModal/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 76c07c5aa..b179e44b0 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -87,6 +87,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { if (closeEdit !== "") { setActiveTab("3"); setOpenAccordion(true); + tweak.current = getTweak; } }, [closeEdit]); From 4f0d928a57a159089e0c7bda6058648266e2dcd7 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 28 Jun 2023 14:07:46 -0300 Subject: [PATCH 08/15] =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal/index.tsx):?= =?UTF-8?q?=20import=20the=20'filter'=20function=20from=20lodash=20to=20fi?= =?UTF-8?q?x=20missing=20reference=20error=20=E2=9C=A8=20feat(ApiModal/ind?= =?UTF-8?q?ex.tsx):=20add=20functionality=20to=20filter=20nodes=20and=20di?= =?UTF-8?q?splay=20only=20nodes=20with=20certain=20types=20in=20the=20twea?= =?UTF-8?q?ks=20list=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20iss?= =?UTF-8?q?ue=20with=20the=20tweaks=20list=20not=20updating=20when=20the?= =?UTF-8?q?=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20f?= =?UTF-8?q?ix=20issue=20with=20the=20tweaks=20list=20not=20updating=20when?= =?UTF-8?q?=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx?= =?UTF-8?q?):=20fix=20issue=20with=20the=20tweaks=20list=20not=20updating?= =?UTF-8?q?=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/in?= =?UTF-8?q?dex.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20not=20up?= =?UTF-8?q?dating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiMo?= =?UTF-8?q?dal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20no?= =?UTF-8?q?t=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix?= =?UTF-8?q?(ApiModal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20lis?= =?UTF-8?q?t=20not=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B?= =?UTF-8?q?=20fix(ApiModal/index.tsx):=20fix=20issue=20with=20the=20tweaks?= =?UTF-8?q?=20list=20not=20updating=20when=20the=20flow=20changes=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20issue=20with=20?= =?UTF-8?q?the=20tweaks=20list=20not=20updating=20when=20the=20flow=20chan?= =?UTF-8?q?ges=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20issue=20w?= =?UTF-8?q?ith=20the=20tweaks=20list=20not=20updating=20when=20the=20flow?= =?UTF-8?q?=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20is?= =?UTF-8?q?sue=20with=20the=20tweaks=20list=20not=20updating=20when=20the?= =?UTF-8?q?=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20f?= =?UTF-8?q?ix=20issue=20with=20the=20tweaks=20list=20not=20updating=20when?= =?UTF-8?q?=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx?= =?UTF-8?q?):=20fix=20issue=20with=20the=20tweaks=20list=20not=20updating?= =?UTF-8?q?=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/in?= =?UTF-8?q?dex.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20not=20up?= =?UTF-8?q?dating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiMo?= =?UTF-8?q?dal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20no?= =?UTF-8?q?t=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix?= =?UTF-8?q?(ApiModal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20lis?= =?UTF-8?q?t=20not=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B?= =?UTF-8?q?=20fix(ApiModal/index.tsx):=20fix=20issue=20with=20the=20tweaks?= =?UTF-8?q?=20list=20not=20updating=20when=20the=20flow=20changes=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20issue=20with=20?= =?UTF-8?q?the=20tweaks=20list=20not=20updating=20when=20the=20flow=20chan?= =?UTF-8?q?ges=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20issue=20w?= =?UTF-8?q?ith=20the=20tweaks=20list=20not=20updating=20when=20the=20flow?= =?UTF-8?q?=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20is?= =?UTF-8?q?sue=20with=20the=20tweaks=20list=20not=20updating=20when=20the?= =?UTF-8?q?=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20f?= =?UTF-8?q?ix=20issue=20with=20the=20tweaks=20list=20not=20updating=20when?= =?UTF-8?q?=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx?= =?UTF-8?q?):=20fix=20issue=20with=20the=20tweaks=20list=20not=20updating?= =?UTF-8?q?=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/in?= =?UTF-8?q?dex.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20not=20up?= =?UTF-8?q?dating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiMo?= =?UTF-8?q?dal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20no?= =?UTF-8?q?t=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix?= =?UTF-8?q?(ApiModal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20lis?= =?UTF-8?q?t=20not=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B?= =?UTF-8?q?=20fix(ApiModal/index.tsx):=20fix=20issue=20with=20the=20tweaks?= =?UTF-8?q?=20list=20not=20updating=20when=20the=20flow=20changes=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20issue=20with=20?= =?UTF-8?q?the=20tweaks=20list=20not=20updating=20when=20the=20flow=20chan?= =?UTF-8?q?ges=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20issue=20w?= =?UTF-8?q?ith=20the=20tweaks=20list=20not=20updating=20when=20the=20flow?= =?UTF-8?q?=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20fix=20is?= =?UTF-8?q?sue=20with=20the=20tweaks=20list=20not=20updating=20when=20the?= =?UTF-8?q?=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx):=20f?= =?UTF-8?q?ix=20issue=20with=20the=20tweaks=20list=20not=20updating=20when?= =?UTF-8?q?=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/index.tsx?= =?UTF-8?q?):=20fix=20issue=20with=20the=20tweaks=20list=20not=20updating?= =?UTF-8?q?=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiModal/in?= =?UTF-8?q?dex.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20not=20up?= =?UTF-8?q?dating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix(ApiMo?= =?UTF-8?q?dal/index.tsx):=20fix=20issue=20with=20the=20tweaks=20list=20no?= =?UTF-8?q?t=20updating=20when=20the=20flow=20changes=20=F0=9F=90=9B=20fix?= =?UTF-8?q?(ApiModal/index.tsx):=20fix=20issue=20with=20the?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/modals/ApiModal/index.tsx | 90 ++++++++++++++++++---- 1 file changed, 73 insertions(+), 17 deletions(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index b179e44b0..ee0222ce1 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -48,7 +48,7 @@ import PromptAreaComponent from "../../components/promptComponent"; import TextAreaComponent from "../../components/textAreaComponent"; import ToggleShadComponent from "../../components/toggleShadComponent"; import ShadTooltip from "../../components/ShadTooltipComponent"; -import { cloneDeep } from "lodash"; +import { cloneDeep, filter } from "lodash"; import { TabsContext } from "../../contexts/tabsContext"; export default function ApiModal({ flow }: { flow: FlowType }) { @@ -60,6 +60,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { const [enabled, setEnabled] = useState(null); const [openAccordion, setOpenAccordion] = useState(false); const tweak = useRef([]); + const tweaksList = useRef([]); const { setTweak, getTweak } = useContext(TabsContext); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { @@ -91,11 +92,54 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } }, [closeEdit]); + + const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current); const tweaksCode = buildTweaks(flow); + useEffect(() => { + filterNodes(); + + }, []) + 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; + }); + + } + const tabs = [ { name: "cURL", @@ -238,9 +282,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) { value={activeTab} className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" onValueChange={(value) => { - setActiveTab(value) - - if(tweak.current.length > 0){ + setActiveTab(value); + + if (tweak.current.length > 0) { setOpenAccordion(true); } }} @@ -293,6 +337,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) { > {flow["data"]["nodes"].map((t: any, index) => (
+ {( + + + tweaksList.current.includes(t["data"]["id"]) && + + { - // console.log(t.data.node.template[n]); + //console.log(t.data.node.template[n]); return ( ) : t.data.node.template[n] .multiline ? ( - -
- + +
-
+
- ) : (
+ )} + + {( + tweaksList.current.length === 0 && + <> +
No tweaks are available for this flow.
+ + )} +
))} From 1251cf70a9d093d1cc948f876e8b914ab8af8527 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 28 Jun 2023 14:20:53 -0300 Subject: [PATCH 09/15] formatting --- src/frontend/src/modals/ApiModal/index.tsx | 717 +++++++++++---------- 1 file changed, 361 insertions(+), 356 deletions(-) diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index ee0222ce1..1000a52d6 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -92,8 +92,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } }, [closeEdit]); - - const pythonApiCode = getPythonApiCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current); @@ -101,43 +99,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { filterNodes(); - - }, []) - function filterNodes(){ - + }, []); + 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']) - }) - - }) + + 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; }); - } const tabs = [ @@ -337,329 +324,222 @@ export default function ApiModal({ flow }: { flow: FlowType }) { > {flow["data"]["nodes"].map((t: any, index) => (
- {( + {tweaksList.current.includes(t["data"]["id"]) && ( + +
+
+ + + + PARAM + + + VALUE + + + + + {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]); - - tweaksList.current.includes(t["data"]["id"]) && - - - -
-
- - - - PARAM - - - VALUE - - - - - {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 ( - - - {n} - - -
- {t.data.node.template[n].type === - "str" && - !t.data.node.template[n] - .options ? ( -
- {t.data.node.template[n] - .list ? ( - {}} - onAddInput={(k) => { - buildTweakObject( - t["data"]["id"], - k, + return ( + + + {n} + + +
+ {t.data.node.template[n] + .type === "str" && + !t.data.node.template[n] + .options ? ( +
+ {t.data.node.template[n] + .list ? ( + - ) : t.data.node.template[n] - .multiline ? ( - -
- {}} + onAddInput={(k) => { + buildTweakObject( + t["data"]["id"], + k, 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] + .multiline ? ( + +
+ -
- - ) : ( - { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); + }} + /> +
+ + ) : ( + { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); + }} + /> + )} +
+ ) : t.data.node.template[n] + .type === "bool" ? ( +
+ {" "} + { + setEnabled={(e) => { + t.data.node.template[ + n + ].value = e; + setEnabled(e); buildTweakObject( t["data"]["id"], - k, + e, t.data.node.template[ n ] ); }} + size="small" + disabled={false} /> - )} -
- ) : t.data.node.template[n] - .type === "bool" ? ( -
- {" "} - { - t.data.node.template[ - n - ].value = e; - setEnabled(e); - buildTweakObject( - t["data"]["id"], - e, - t.data.node.template[n] - ); - }} - size="small" - disabled={false} - /> -
- ) : t.data.node.template[n] - .type === "file" ? ( - -
- {}} - fileTypes={ - t.data.node.template[n] - .fileTypes - } - suffixes={ - t.data.node.template[n] - .suffixes - } - onFileChange={( - k: any - ) => {}} - >
- - ) : t.data.node.template[n] - .type === "float" ? ( -
- { - buildTweakObject( - t["data"]["id"], - k, - t.data.node.template[n] - ); - }} - /> -
- ) : t.data.node.template[n] - .type === "str" && - t.data.node.template[n] - .options ? ( -
- { - 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] - )} - > -
- ) : t.data.node.template[n] - .type === "int" ? ( -
- { - buildTweakObject( - t["data"]["id"], - k, - t.data.node.template[n] - ); - }} - /> -
- ) : t.data.node.template[n] - .type === "prompt" ? ( - -
- { - buildTweakObject( - t["data"]["id"], - k, + ) + )} + > +
+ -
- - ) : t.data.node.template[n] - .type === "code" ? ( - + ].value ?? "" + } + onChange={( + k: any + ) => {}} + fileTypes={ + t.data.node.template[ + n + ].fileTypes + } + suffixes={ + t.data.node.template[ + n + ].suffixes + } + onFileChange={( + k: any + ) => {}} + > +
+ + ) : t.data.node.template[n] + .type === "float" ? (
-
- - ) : t.data.node.template[n] - .type === "Any" ? ( - "-" - ) : ( -
- )} -
- - - ); - })} - -
-
- - )} - - {( - tweaksList.current.length === 0 && - <> -
No tweaks are available for this flow.
- - )} + ) : t.data.node.template[n] + .type === "str" && + t.data.node.template[n] + .options ? ( +
+ { + 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] + )} + > +
+ ) : t.data.node.template[n] + .type === "int" ? ( +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node.template[ + n + ] + ); + }} + /> +
+ ) : t.data.node.template[n] + .type === "prompt" ? ( + +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); + }} + /> +
+ + ) : t.data.node.template[n] + .type === "code" ? ( + +
+ { + buildTweakObject( + t["data"]["id"], + k, + t.data.node + .template[n] + ); + }} + /> +
+ + ) : t.data.node.template[n] + .type === "Any" ? ( + "-" + ) : ( +
+ )} +
+ + + ); + })} + + +
+ + )} + {tweaksList.current.length === 0 && ( + <> +
+ No tweaks are available for this flow. +
+ + )}
))} From c954f8d33800fcbe1361a498a7d3ba15c44a0b12 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 29 Jun 2023 10:44:32 -0300 Subject: [PATCH 10/15] =?UTF-8?q?=F0=9F=90=9B=20fix(AccordionComponent):?= =?UTF-8?q?=20fix=20the=20logic=20to=20set=20the=20initial=20value=20of=20?= =?UTF-8?q?the=20accordion=20based=20on=20the=20open=20prop=20array=20?= =?UTF-8?q?=E2=9C=A8=20feat(AccordionComponent):=20add=20support=20for=20m?= =?UTF-8?q?ultiple=20open=20accordions=20by=20changing=20the=20open=20prop?= =?UTF-8?q?=20from=20boolean=20to=20string=20array=20=F0=9F=90=9B=20fix(co?= =?UTF-8?q?nstants.tsx):=20remove=20escape=20characters=20from=20the=20JSO?= =?UTF-8?q?N=20stringified=20tweaks=20to=20fix=20parsing=20issues=20?= =?UTF-8?q?=E2=9C=A8=20feat(constants.tsx):=20add=20support=20for=20tweaks?= =?UTF-8?q?=20dictionary=20in=20the=20getCurlCode=20and=20getPythonCode=20?= =?UTF-8?q?functions=20=F0=9F=90=9B=20fix(ApiModal):=20fix=20the=20logic?= =?UTF-8?q?=20to=20set=20the=20initial=20value=20of=20the=20openAccordion?= =?UTF-8?q?=20state=20based=20on=20the=20getTweak=20array=20=E2=9C=A8=20fe?= =?UTF-8?q?at(ApiModal):=20add=20support=20for=20opening=20accordions=20ba?= =?UTF-8?q?sed=20on=20the=20getTweak=20array=20when=20switching=20to=20the?= =?UTF-8?q?=20Tweak=20tab=20=F0=9F=90=9B=20fix(ApiModal):=20fix=20the=20lo?= =?UTF-8?q?gic=20to=20filter=20and=20remove=20empty=20tweaks=20from=20the?= =?UTF-8?q?=20tweak.current=20array=20=E2=9C=A8=20feat(ApiModal):=20add=20?= =?UTF-8?q?support=20for=20adding=20new=20tweaks=20to=20the=20tweak.curren?= =?UTF-8?q?t=20array=20and=20generating=20Python=20API=20code=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal):=20fix=20the=20logic=20to=20get=20?= =?UTF-8?q?the=20value=20of=20a=20specific=20tweak=20template=20based=20on?= =?UTF-8?q?=20the=20node=20id=20and=20template=20name=20=E2=9C=A8=20feat(A?= =?UTF-8?q?piModal):=20add=20support=20for=20opening=20accordions=20based?= =?UTF-8?q?=20on=20the=20tweak.current=20array=20when=20switching=20to=20t?= =?UTF-8?q?he=20Tweak=20tab=20=F0=9F=90=9B=20fix(types):=20add=20missing?= =?UTF-8?q?=20newline=20at=20the=20end=20of=20the=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/package-lock.json | 15 ++--- .../components/AccordionComponent/index.tsx | 16 ++++- src/frontend/src/constants.tsx | 6 +- src/frontend/src/modals/ApiModal/index.tsx | 63 ++++++++++--------- src/frontend/src/types/components/index.ts | 2 +- 5 files changed, 61 insertions(+), 41 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 1c185a3b9..a4128b48e 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -3563,7 +3563,7 @@ "version": "16.18.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", - "devOptional": true + "dev": true }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -5633,6 +5633,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6992,9 +6993,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" }, @@ -8262,9 +8263,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" }, diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index c1174269a..825a2c19d 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -15,9 +15,21 @@ import { export default function AccordionComponent({ trigger, children, - open = false, + open = [], }: AccordionComponentType) { - const [value, setValue] = useState(!open ? "" : trigger); + 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(""); } diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 4aee27d83..9bfb4bcd5 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -71,7 +71,7 @@ FLOW_ID = "${flowId}" # You can tweak the flow by adding a tweaks dictionary # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}} TWEAKS = ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: @@ -111,7 +111,7 @@ export const getCurlCode = (flow: FlowType, tweak?): string => { }/api/v1/process/${flowId} \\ -H 'Content-Type: application/json' \\ -d '{"inputs": {"input": message}, "tweaks": ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) }}'`; }; /** @@ -124,7 +124,7 @@ export const getPythonCode = (flow: FlowType, tweak?): string => { const tweaks = buildTweaks(flow); return `from langflow import load_flow_from_json TWEAKS = ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) } flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS) # Now you can use it like any chain diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 1000a52d6..6f0014f33 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -58,7 +58,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { const [activeTab, setActiveTab] = useState("0"); const [isCopied, setIsCopied] = useState(false); const [enabled, setEnabled] = useState(null); - const [openAccordion, setOpenAccordion] = useState(false); + const [openAccordion, setOpenAccordion] = useState([]); const tweak = useRef([]); const tweaksList = useRef([]); const { setTweak, getTweak } = useContext(TabsContext); @@ -87,8 +87,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { if (closeEdit !== "") { setActiveTab("3"); - setOpenAccordion(true); tweak.current = getTweak; + openAccordions(); + } + else{ + startTweaks(); } }, [closeEdit]); @@ -100,6 +103,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { filterNodes(); }, []); + + function startTweaks() { + tweak.current.push(buildTweaks(flow)); + } + function filterNodes() { let arrNodesWithValues = []; @@ -176,25 +184,13 @@ export default function ApiModal({ flow }: { flow: FlowType }) { if (existingTweak) { existingTweak[tw][template["name"]] = changes; - if (template.list === true) { - if (changes.length === 0) { - if (existingTweak[tw] && existingTweak[tw][template["name"]]) { - delete existingTweak[tw][template["name"]]; - } - } - } - if (existingTweak[tw][template["name"]] == template.value) { tweak.current.forEach((element) => { - if (element[tw] && element[tw][template["name"]]) { - delete element[tw][template["name"]]; - } 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 !== ""; }); - delete element[tw]; } }); } @@ -205,6 +201,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { }, }; tweak.current.push(newTweak); + } const pythonApiCode = getPythonApiCode(flow, tweak.current); @@ -232,17 +229,16 @@ export default function ApiModal({ flow }: { flow: FlowType }) { if (getTweak.length > 0) { for (const obj of getTweak) { - // Obtém a chave do objeto interno - const key = Object.keys(obj)[0]; - // Obtém o valor do objeto interno - const value = obj[key]; - if (key == node["id"]) { - Object.keys(value).forEach((key) => { - if (key == template["name"]) { - returnValue = value[key]; - } - }); - } + 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 ?? ""; @@ -250,6 +246,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) { 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 ( @@ -270,9 +278,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" onValueChange={(value) => { setActiveTab(value); - - if (tweak.current.length > 0) { - setOpenAccordion(true); + if(value === "3"){ + openAccordions() } }} > diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 4c936cabe..347554682 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -121,6 +121,6 @@ export type RadialProgressType = { export type AccordionComponentType = { children?: ReactElement; - open?: boolean; + open?: string[]; trigger?: string; }; \ No newline at end of file From 7c777bf69206a5aaaa395307d9ba3e8087ca8b42 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 29 Jun 2023 14:17:55 -0300 Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=90=9B=20fix(ApiModal/index.tsx):?= =?UTF-8?q?=20fix=20linting=20issues=20and=20improve=20code=20readability?= =?UTF-8?q?=20=E2=9C=A8=20feat(ApiModal/index.tsx):=20add=20support=20for?= =?UTF-8?q?=20displaying=20tweaks=20code=20in=20a=20separate=20tab=20if=20?= =?UTF-8?q?there=20are=20any=20tweaks=20present?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/package-lock.json | 3 +- src/frontend/src/modals/ApiModal/index.tsx | 115 ++++++++++----------- 2 files changed, 57 insertions(+), 61 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index a4128b48e..b751823c3 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -3563,7 +3563,7 @@ "version": "16.18.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", - "dev": true + "devOptional": true }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -5633,7 +5633,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 6f0014f33..2377c212b 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -75,6 +75,55 @@ export default function ApiModal({ flow }: { flow: FlowType }) { }, 2000); }); }; + 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", + mode: "bash", + image: "https://curl.se/logo/curl-symbol-transparent.png", + code: curl_code, + }, + { + name: "Python API", + mode: "python", + image: + "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w", + code: pythonApiCode, + }, + { + name: "Python Code", + mode: "python", + image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + code: pythonCode, + }, + ]; + + useEffect(() => { + if (closeEdit !== "") { + setActiveTab("3"); + tweak.current = getTweak; + openAccordions(); + } 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) { @@ -84,26 +133,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } } - useEffect(() => { - if (closeEdit !== "") { - setActiveTab("3"); - tweak.current = getTweak; - openAccordions(); - } - else{ - startTweaks(); - } - }, [closeEdit]); - - const pythonApiCode = getPythonApiCode(flow, tweak.current); - const curl_code = getCurlCode(flow, tweak.current); - const pythonCode = getPythonCode(flow, tweak.current); - const tweaksCode = buildTweaks(flow); - - useEffect(() => { - filterNodes(); - }, []); - function startTweaks() { tweak.current.push(buildTweaks(flow)); } @@ -135,37 +164,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) { }); } - const tabs = [ - { - name: "cURL", - mode: "bash", - image: "https://curl.se/logo/curl-symbol-transparent.png", - code: curl_code, - }, - { - name: "Python API", - mode: "python", - image: - "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w", - code: pythonApiCode, - }, - { - name: "Python Code", - mode: "python", - image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", - code: pythonCode, - }, - ]; - - 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 buildTweakObject(tw, changes, template) { if (template.type === "float") { changes = parseFloat(changes); @@ -201,7 +199,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) { }, }; tweak.current.push(newTweak); - } const pythonApiCode = getPythonApiCode(flow, tweak.current); @@ -229,7 +226,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { if (getTweak.length > 0) { for (const obj of getTweak) { - Object.keys(obj).forEach(key =>{ + Object.keys(obj).forEach((key) => { const value = obj[key]; if (key == node["id"]) { Object.keys(value).forEach((key) => { @@ -238,7 +235,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } }); } - }) + }); } } else { return value ?? ""; @@ -246,16 +243,16 @@ export default function ApiModal({ flow }: { flow: FlowType }) { return returnValue; } - function openAccordions(){ + function openAccordions() { let accordionsToOpen = []; tweak.current.forEach((el) => { Object.keys(el).forEach((key) => { if (Object.keys(el[key]).length > 0) { - accordionsToOpen.push(key) + accordionsToOpen.push(key); setOpenAccordion(accordionsToOpen); } }); - }); + }); } return ( @@ -278,8 +275,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) { className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" onValueChange={(value) => { setActiveTab(value); - if(value === "3"){ - openAccordions() + if (value === "3") { + openAccordions(); } }} > From fdb998688a6603a9ad404ee9652e9085542933f8 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 29 Jun 2023 18:42:09 -0300 Subject: [PATCH 12/15] =?UTF-8?q?=F0=9F=90=9B=20fix(codeAreaComponent):=20?= =?UTF-8?q?update=20initial=20state=20of=20myValue=20to=20handle=20non-str?= =?UTF-8?q?ing=20values=20properly?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🐛 fix(constants.tsx): refactor getCurlCode and getPythonCode to use buildTweakObject function for generating tweak object 🐛 fix(ApiModal): update logic for opening accordions based on tweak.current length and closeEdit value --- .../components/codeAreaComponent/index.tsx | 4 +-- src/frontend/src/constants.tsx | 25 ++++++++++++++++--- src/frontend/src/modals/ApiModal/index.tsx | 23 ++++++++++------- 3 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 6fec7cd27..ff786ea99 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -12,7 +12,7 @@ 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,7 +22,7 @@ export default function CodeAreaComponent({ }, [disabled, onChange]); useEffect(() => { - setMyValue(value); + setMyValue(typeof value == "string" ? value : JSON.stringify(value)); }, [value]); return ( diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index 9bfb4bcd5..a20e5c6c1 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -71,7 +71,7 @@ FLOW_ID = "${flowId}" # You can tweak the flow by adding a tweaks dictionary # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}} TWEAKS = ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? buildTweakObject(tweak): JSON.stringify(tweaks, null, 2) } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: @@ -111,7 +111,7 @@ export const getCurlCode = (flow: FlowType, tweak?): string => { }/api/v1/process/${flowId} \\ -H 'Content-Type: application/json' \\ -d '{"inputs": {"input": message}, "tweaks": ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2) }}'`; }; /** @@ -124,13 +124,32 @@ export const getPythonCode = (flow: FlowType, tweak?): string => { const tweaks = buildTweaks(flow); return `from langflow import load_flow_from_json TWEAKS = ${ - tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2) + 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]); + console.log(el[key][kp]); + } + catch{} + } + }) + }); + + const tweakString = JSON.stringify(tweak, null, 2); + console.log(tweakString); + + return tweakString; +} + /** * The base text for subtitle of Import Dialog * @constant diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 2377c212b..545a26d01 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -103,9 +103,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { if (closeEdit !== "") { - setActiveTab("3"); tweak.current = getTweak; - openAccordions(); + if(tweak.current.length > 0){ + setActiveTab("3"); + openAccordions(); + } + else{ + startTweaks(); + } } else { startTweaks(); } @@ -245,14 +250,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) { 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); - } + tweak.current.forEach((el) => { + Object.keys(el).forEach((key) => { + if (Object.keys(el[key]).length > 0) { + accordionsToOpen.push(key); + setOpenAccordion(accordionsToOpen); + } + }); }); - }); } return ( From 82c469d3c29e24fe9c8e40127a46c271479f8714 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 29 Jun 2023 18:42:40 -0300 Subject: [PATCH 13/15] =?UTF-8?q?=F0=9F=94=A5=20refactor(constants.tsx):?= =?UTF-8?q?=20remove=20console.log=20statements=20for=20better=20code=20cl?= =?UTF-8?q?eanliness=20and=20performance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/constants.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index a20e5c6c1..b4a275d17 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -137,7 +137,6 @@ function buildTweakObject(tweak){ for (let kp in el[key]) { try{ el[key][kp] = JSON.parse(el[key][kp]); - console.log(el[key][kp]); } catch{} } @@ -145,8 +144,6 @@ function buildTweakObject(tweak){ }); const tweakString = JSON.stringify(tweak, null, 2); - console.log(tweakString); - return tweakString; } From b188400517c6124f439fe649d432dc8109b2bff4 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Thu, 29 Jun 2023 19:36:04 -0300 Subject: [PATCH 14/15] =?UTF-8?q?=F0=9F=90=9B=20fix(loading.py):=20improve?= =?UTF-8?q?=20error=20message=20formatting=20when=20failing=20to=20build?= =?UTF-8?q?=20connection=20to=20database=20=F0=9F=90=9B=20fix(base.py):=20?= =?UTF-8?q?add=20optional=20'name'=20parameter=20to=20the=20format=20metho?= =?UTF-8?q?d=20in=20FieldFormatter=20In=20loading.py,=20the=20error=20mess?= =?UTF-8?q?age=20when=20failing=20to=20build=20a=20connection=20to=20the?= =?UTF-8?q?=20database=20is=20now=20formatted=20in=20a=20more=20readable?= =?UTF-8?q?=20way.=20This=20improves=20the=20clarity=20of=20the=20error=20?= =?UTF-8?q?message=20and=20makes=20it=20easier=20to=20identify=20the=20cau?= =?UTF-8?q?se=20of=20the=20issue.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In base.py, the format method in FieldFormatter now accepts an optional 'name' parameter. This allows for more flexibility when formatting the field and provides the ability to include the field name in the formatting process if needed. --- src/backend/langflow/interface/initialize/loading.py | 5 ++++- .../langflow/template/frontend_node/formatter/base.py | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/backend/langflow/interface/initialize/loading.py b/src/backend/langflow/interface/initialize/loading.py index 046ca0df6..08d17d9fa 100644 --- a/src/backend/langflow/interface/initialize/loading.py +++ b/src/backend/langflow/interface/initialize/loading.py @@ -98,7 +98,10 @@ def instantiate_memory(node_type, class_object, params): exc ) or 'object has no field "conn"' in str(exc): 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 raise exc diff --git a/src/backend/langflow/template/frontend_node/formatter/base.py b/src/backend/langflow/template/frontend_node/formatter/base.py index 653480e03..67e906593 100644 --- a/src/backend/langflow/template/frontend_node/formatter/base.py +++ b/src/backend/langflow/template/frontend_node/formatter/base.py @@ -1,9 +1,10 @@ from abc import ABC, abstractmethod +from typing import Optional from langflow.template.field.base import TemplateField class FieldFormatter(ABC): @abstractmethod - def format(self, field: TemplateField): + def format(self, field: TemplateField, name: Optional[str]) -> None: pass From 60032d614626a8d416411f54ab6f9c0c78ca3182 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Thu, 29 Jun 2023 19:36:22 -0300 Subject: [PATCH 15/15] =?UTF-8?q?=F0=9F=90=9B=20fix(AccordionComponent):?= =?UTF-8?q?=20fix=20formatting=20and=20add=20missing=20semicolons=20to=20i?= =?UTF-8?q?mprove=20code=20readability=20and=20maintainability=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(codeAreaComponent):=20fix=20formatting=20and?= =?UTF-8?q?=20add=20missing=20semicolons=20to=20improve=20code=20readabili?= =?UTF-8?q?ty=20and=20maintainability=20=F0=9F=90=9B=20fix(dropdownCompone?= =?UTF-8?q?nt):=20fix=20formatting=20and=20add=20missing=20semicolons=20to?= =?UTF-8?q?=20improve=20code=20readability=20and=20maintainability=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(floatComponent):=20fix=20formatting=20and=20?= =?UTF-8?q?add=20missing=20semicolons=20to=20improve=20code=20readability?= =?UTF-8?q?=20and=20maintainability=20=F0=9F=90=9B=20fix(inputFileComponen?= =?UTF-8?q?t):=20fix=20formatting=20and=20add=20missing=20semicolons=20to?= =?UTF-8?q?=20improve=20code=20readability=20and=20maintainability=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(inputListComponent):=20fix=20formatting=20an?= =?UTF-8?q?d=20add=20missing=20semicolons=20to=20improve=20code=20readabil?= =?UTF-8?q?ity=20and=20maintainability=20=F0=9F=90=9B=20fix(intComponent):?= =?UTF-8?q?=20fix=20formatting=20and=20add=20missing=20semicolons=20to=20i?= =?UTF-8?q?mprove=20code=20readability=20and=20maintainability=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(promptComponent):=20fix=20formatting=20and?= =?UTF-8?q?=20add=20missing=20semicolons=20to=20improve=20code=20readabili?= =?UTF-8?q?ty=20and=20maintainability=20=F0=9F=90=9B=20fix(textAreaCompone?= =?UTF-8?q?nt):=20fix=20formatting=20and=20add=20missing=20semicolons=20to?= =?UTF-8?q?=20improve=20code=20readability=20and=20maintainability=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(ui/accordion.tsx):=20fix=20formatting=20and?= =?UTF-8?q?=20add=20missing=20semicolons=20to=20improve=20code=20readabili?= =?UTF-8?q?ty=20and=20maintainability?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The changes were made to fix formatting issues and add missing semicolons in the code. This improves code readability and maintainability, making it easier for developers to understand and work with the code. 🐛 fix(constants.tsx): fix formatting and indentation issues in the buildTweakObject function 🐛 fix(popUpContext.tsx): remove unnecessary empty line 🐛 fix(tabsContext.tsx): remove unnecessary empty line 🐛 fix(ApiModal/index.tsx): fix formatting and indentation issues 🐛 fix(codeAreaModal/index.tsx): fix formatting and indentation issues 🐛 fix(types/components/index.ts): remove unnecessary empty line The changes in constants.tsx fix formatting and indentation issues in the buildTweakObject function to improve code readability. The changes in popUpContext.tsx, tabsContext.tsx, ApiModal/index.tsx, codeAreaModal/index.tsx, and types/components/index.ts fix formatting and indentation issues to ensure consistent code style. --- .../components/AccordionComponent/index.tsx | 14 +++++----- .../components/codeAreaComponent/index.tsx | 7 +++-- .../components/dropdownComponent/index.tsx | 12 ++++----- .../src/components/floatComponent/index.tsx | 3 ++- .../components/inputFileComponent/index.tsx | 3 ++- .../components/inputListComponent/index.tsx | 7 ++--- .../src/components/intComponent/index.tsx | 3 ++- .../src/components/promptComponent/index.tsx | 3 ++- .../components/textAreaComponent/index.tsx | 3 ++- src/frontend/src/components/ui/accordion.tsx | 27 +++++++++---------- src/frontend/src/constants.tsx | 27 +++++++++++-------- src/frontend/src/contexts/popUpContext.tsx | 6 ++--- src/frontend/src/contexts/tabsContext.tsx | 2 +- src/frontend/src/modals/ApiModal/index.tsx | 19 +++++++------ .../src/modals/codeAreaModal/index.tsx | 2 +- src/frontend/src/types/components/index.ts | 3 +-- 16 files changed, 76 insertions(+), 65 deletions(-) diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 825a2c19d..f03a2ad5f 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -17,15 +17,17 @@ export default function AccordionComponent({ children, open = [], }: AccordionComponentType) { - const [value, setValue] = useState(open.length == 0 ? "" : getOpenAccordion()); + const [value, setValue] = useState( + open.length == 0 ? "" : getOpenAccordion() + ); - function getOpenAccordion(){ + function getOpenAccordion() { let value = ""; - open.forEach(el => { - if(el == trigger){ + open.forEach((el) => { + if (el == trigger) { value = trigger; - } - }) + } + }); return value; } diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index ff786ea99..b42f1489b 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/src/frontend/src/components/codeAreaComponent/index.tsx @@ -12,7 +12,9 @@ export default function CodeAreaComponent({ disabled, editNode = false, }: TextAreaComponentType) { - const [myValue, setMyValue] = useState(typeof value == "string" ? value : JSON.stringify(value)); + const [myValue, setMyValue] = useState( + typeof value == "string" ? value : JSON.stringify(value) + ); const { openPopUp } = useContext(PopUpContext); useEffect(() => { if (disabled) { @@ -47,7 +49,8 @@ export default function CodeAreaComponent({ className={ 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" + - INPUT_STYLE + (disabled ? " bg-gray-200 " : "") + 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" + INPUT_STYLE + (disabled ? " bg-gray-200" : "") diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index d1292525d..fab9cad93 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -13,7 +13,7 @@ export default function Dropdown({ onSelect, editNode = false, numberOfOptions = 0, - apiModal = false + apiModal = false, }: DropDownComponentType) { const { closePopUp } = useContext(PopUpContext); @@ -67,14 +67,12 @@ export default function Dropdown({ leaveTo="opacity-0" > {options.map((option, id) => ( , @@ -17,8 +16,8 @@ const AccordionItem = React.forwardRef< className={cn("border-b", className)} {...props} /> -)) -AccordionItem.displayName = "AccordionItem" +)); +AccordionItem.displayName = "AccordionItem"; const AccordionTrigger = React.forwardRef< React.ElementRef, @@ -37,8 +36,8 @@ const AccordionTrigger = React.forwardRef< -)) -AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; const AccordionContent = React.forwardRef< React.ElementRef, @@ -54,7 +53,7 @@ const AccordionContent = React.forwardRef< >
{children}
-)) -AccordionContent.displayName = AccordionPrimitive.Content.displayName +)); +AccordionContent.displayName = AccordionPrimitive.Content.displayName; -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx index b4a275d17..49eb583b7 100644 --- a/src/frontend/src/constants.tsx +++ b/src/frontend/src/constants.tsx @@ -71,7 +71,9 @@ FLOW_ID = "${flowId}" # You can tweak the flow by adding a tweaks dictionary # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}} TWEAKS = ${ - tweak && tweak.length > 0 ? buildTweakObject(tweak): JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 + ? buildTweakObject(tweak) + : JSON.stringify(tweaks, null, 2) } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: @@ -111,7 +113,9 @@ export const getCurlCode = (flow: FlowType, tweak?): string => { }/api/v1/process/${flowId} \\ -H 'Content-Type: application/json' \\ -d '{"inputs": {"input": message}, "tweaks": ${ - tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2) + tweak && tweak.length > 0 + ? buildTweakObject(tweak) + : JSON.stringify(tweaks, null, 2) }}'`; }; /** @@ -124,25 +128,26 @@ export const getPythonCode = (flow: FlowType, tweak?): string => { const tweaks = buildTweaks(flow); return `from langflow import load_flow_from_json TWEAKS = ${ - tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2) + 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 => { +function buildTweakObject(tweak) { + tweak.forEach((el) => { + Object.keys(el).forEach((key) => { for (let kp in el[key]) { - try{ + try { el[key][kp] = JSON.parse(el[key][kp]); - } - catch{} + } catch {} } - }) + }); }); - + const tweakString = JSON.stringify(tweak, null, 2); return tweakString; } diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx index a59eb0f9f..d46f51f00 100644 --- a/src/frontend/src/contexts/popUpContext.tsx +++ b/src/frontend/src/contexts/popUpContext.tsx @@ -13,7 +13,6 @@ interface PopUpProviderProps { children: React.ReactNode; } - const PopUpProvider = ({ children }: PopUpProviderProps) => { const [popUpElements, setPopUpElements] = useState([]); @@ -27,9 +26,10 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => { const [closeEdit, setCloseEdit] = useState(""); - return ( - + {children} {popUpElements[0]} diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index 5ce455273..3b20ded95 100644 --- a/src/frontend/src/contexts/tabsContext.tsx +++ b/src/frontend/src/contexts/tabsContext.tsx @@ -648,7 +648,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { setTabsState, paste, getTweak, - setTweak + setTweak, }} > {children} diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 545a26d01..5acd42ec0 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -104,11 +104,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { useEffect(() => { if (closeEdit !== "") { tweak.current = getTweak; - if(tweak.current.length > 0){ + if (tweak.current.length > 0) { setActiveTab("3"); openAccordions(); - } - else{ + } else { startTweaks(); } } else { @@ -250,14 +249,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) { 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); - } - }); + tweak.current.forEach((el) => { + Object.keys(el).forEach((key) => { + if (Object.keys(el[key]).length > 0) { + accordionsToOpen.push(key); + setOpenAccordion(accordionsToOpen); + } }); + }); } return ( diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index ec6d3d07c..bc814a9ab 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -34,7 +34,7 @@ export default function CodeAreaModal({ const [code, setCode] = useState(value); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const { closePopUp,setCloseEdit } = useContext(PopUpContext); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 4437f48e3..598f2af41 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -44,7 +44,6 @@ export type InputListComponentType = { disabled: boolean; editNode?: boolean; onAddInput?: (value?: string[]) => void; - }; export type TextAreaComponentType = { @@ -114,7 +113,7 @@ export type RadialProgressType = { color?: string; }; -export type AccordionComponentType = { +export type AccordionComponentType = { children?: ReactElement; open?: string[]; trigger?: string;