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))",