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 diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 5ff5c4e58..da752486c 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", @@ -54,7 +57,7 @@ "rehype-mathjax": "^4.0.2", "remark-gfm": "^3.0.1", "remark-math": "^5.1.1", - "shadcn-ui": "^0.1.3", + "shadcn-ui": "^0.2.2", "short-unique-id": "^4.4.4", "switch": "^0.0.0", "table": "^6.8.1", @@ -115,6 +118,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", @@ -1367,6 +1384,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", @@ -1420,6 +1468,36 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -1631,6 +1709,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", @@ -3107,6 +3193,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", @@ -3548,6 +3667,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", @@ -4492,6 +4616,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", @@ -6869,9 +6998,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" }, @@ -7844,11 +7973,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", @@ -8117,9 +8268,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" }, @@ -8216,6 +8367,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", @@ -9292,23 +9448,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", @@ -9328,6 +9501,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", @@ -9581,6 +9783,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", @@ -9956,6 +10166,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 ba0e6304d..1b6808c00 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", @@ -49,7 +52,7 @@ "rehype-mathjax": "^4.0.2", "remark-gfm": "^3.0.1", "remark-math": "^5.1.1", - "shadcn-ui": "^0.1.3", + "shadcn-ui": "^0.2.2", "short-unique-id": "^4.4.4", "switch": "^0.0.0", "table": "^6.8.1", diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx new file mode 100644 index 000000000..f03a2ad5f --- /dev/null +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -0,0 +1,56 @@ +import { ReactElement, useContext, useEffect, useRef, useState } from "react"; +import { + AccordionComponentType, + ProgressBarType, +} from "../../types/components"; +import { Progress } from "../../components/ui/progress"; +import { setInterval } from "timers/promises"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "../../components/ui/accordion"; + +export default function AccordionComponent({ + trigger, + children, + open = [], +}: AccordionComponentType) { + const [value, setValue] = useState( + open.length == 0 ? "" : getOpenAccordion() + ); + + function getOpenAccordion() { + let value = ""; + open.forEach((el) => { + if (el == trigger) { + value = trigger; + } + }); + + return value; + } + + function handleClick() { + value == "" ? setValue(trigger) : setValue(""); + } + + return ( + <> + + + { + handleClick(); + }} + className="ml-3" + > + {trigger} + + {children} + + + + ); +} diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 1730904e2..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(value); + const [myValue, setMyValue] = useState( + typeof value == "string" ? value : JSON.stringify(value) + ); const { openPopUp } = useContext(PopUpContext); useEffect(() => { if (disabled) { @@ -22,7 +24,7 @@ export default function CodeAreaComponent({ }, [disabled, onChange]); useEffect(() => { - setMyValue(value); + setMyValue(typeof value == "string" ? value : JSON.stringify(value)); }, [value]); return ( @@ -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 + 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 e252e1b21..fab9cad93 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -13,6 +13,7 @@ export default function Dropdown({ onSelect, editNode = false, numberOfOptions = 0, + apiModal = false, }: DropDownComponentType) { const { closePopUp } = useContext(PopUpContext); @@ -66,11 +67,12 @@ export default function Dropdown({ leaveTo="opacity-0" > {options.map((option, id) => ( -
+
{myValue !== "" ? myValue : "No file"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index 4b4cd1582..d32a76687 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/src/frontend/src/components/textAreaComponent/index.tsx @@ -53,7 +53,8 @@ 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..684b257fc --- /dev/null +++ b/src/frontend/src/components/ui/accordion.tsx @@ -0,0 +1,59 @@ +"use client"; + +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDownIcon } from "@radix-ui/react-icons"; +import { cn } from "../../utils"; + +const Accordion = AccordionPrimitive.Root; + +const AccordionItem = React.forwardRef< + React.ElementRef, + 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/constants.tsx b/src/frontend/src/constants.tsx index f569046ea..49eb583b7 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,11 @@ BASE_API_URL = "${window.location.protocol}//${ FLOW_ID = "${flowId}" # You can tweak the flow by adding a tweaks dictionary # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}} -TWEAKS = ${JSON.stringify(tweaks, null, 2)} +TWEAKS = ${ + tweak && tweak.length > 0 + ? buildTweakObject(tweak) + : JSON.stringify(tweaks, null, 2) + } def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict: """ @@ -100,7 +104,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))`; * @param {string} flowId - The id of the flow * @returns {string} - The curl code */ -export const getCurlCode = (flow: FlowType): string => { +export const getCurlCode = (flow: FlowType, tweak?): string => { const flowId = flow.id; const tweaks = buildTweaks(flow); return `curl -X POST \\ @@ -108,27 +112,46 @@ export const getCurlCode = (flow: FlowType): string => { window.location.host }/api/v1/process/${flowId} \\ -H 'Content-Type: application/json' \\ - -d '{"inputs": {"input": message}, "tweaks": ${JSON.stringify( - tweaks, - null, - 2 - )}}'`; + -d '{"inputs": {"input": message}, "tweaks": ${ + tweak && tweak.length > 0 + ? buildTweakObject(tweak) + : JSON.stringify(tweaks, null, 2) + }}'`; }; /** * Function to get the python code for the API * @param {string} flowName - The name of the flow * @returns {string} - The python code */ -export const getPythonCode = (flow: FlowType): string => { +export const getPythonCode = (flow: FlowType, tweak?): string => { const flowName = flow.name; const tweaks = buildTweaks(flow); return `from langflow import load_flow_from_json -TWEAKS = ${JSON.stringify(tweaks, null, 2)} +TWEAKS = ${ + tweak && tweak.length > 0 + ? buildTweakObject(tweak) + : JSON.stringify(tweaks, null, 2) + } flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS) # Now you can use it like any chain flow("Hey, have you heard of LangFlow?")`; }; +function buildTweakObject(tweak) { + tweak.forEach((el) => { + Object.keys(el).forEach((key) => { + for (let kp in el[key]) { + try { + el[key][kp] = JSON.parse(el[key][kp]); + } catch {} + } + }); + }); + + const tweakString = JSON.stringify(tweak, null, 2); + return tweakString; +} + /** * The base text for subtitle of Import Dialog * @constant diff --git a/src/frontend/src/contexts/popUpContext.tsx b/src/frontend/src/contexts/popUpContext.tsx index 371aeefce..d46f51f00 100644 --- a/src/frontend/src/contexts/popUpContext.tsx +++ b/src/frontend/src/contexts/popUpContext.tsx @@ -5,6 +5,8 @@ import React, { useState } from "react"; export const PopUpContext = createContext({ openPopUp: (popUpElement: JSX.Element) => {}, closePopUp: () => {}, + setCloseEdit: (value: string) => {}, + closeEdit: "", }); interface PopUpProviderProps { @@ -22,8 +24,12 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => { setPopUpElements((prevPopUps) => prevPopUps.slice(1)); }; + const [closeEdit, setCloseEdit] = useState(""); + return ( - + {children} {popUpElements[0]} diff --git a/src/frontend/src/contexts/tabsContext.tsx b/src/frontend/src/contexts/tabsContext.tsx index afe85372d..3b20ded95 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() { @@ -644,6 +647,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 d6fff5d9f..5acd42ec0 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,14 +26,42 @@ import { TabsTrigger, } from "../../components/ui/tabs"; import { Check, Clipboard, Code2 } from "lucide-react"; +import { + Table, + TableBody, + TableCaption, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "../../components/ui/table"; +import { buildTweaks, classNames, limitScrollFieldsModal } from "../../utils"; +import AccordionComponent from "../../components/AccordionComponent"; +import CodeAreaComponent from "../../components/codeAreaComponent"; +import Dropdown from "../../components/dropdownComponent"; +import FloatComponent from "../../components/floatComponent"; +import InputComponent from "../../components/inputComponent"; +import InputFileComponent from "../../components/inputFileComponent"; +import InputListComponent from "../../components/inputListComponent"; +import IntComponent from "../../components/intComponent"; +import PromptAreaComponent from "../../components/promptComponent"; +import TextAreaComponent from "../../components/textAreaComponent"; +import ToggleShadComponent from "../../components/toggleShadComponent"; +import ShadTooltip from "../../components/ShadTooltipComponent"; +import { cloneDeep, filter } from "lodash"; +import { TabsContext } from "../../contexts/tabsContext"; export default function ApiModal({ flow }: { flow: FlowType }) { const [open, setOpen] = useState(true); const { dark } = useContext(darkContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext); const [activeTab, setActiveTab] = useState("0"); const [isCopied, setIsCopied] = useState(false); - + const [enabled, setEnabled] = useState(null); + const [openAccordion, setOpenAccordion] = useState([]); + const tweak = useRef([]); + const tweaksList = useRef([]); + const { setTweak, getTweak } = useContext(TabsContext); const copyToClipboard = () => { if (!navigator.clipboard || !navigator.clipboard.writeText) { return; @@ -47,18 +75,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) { }, 2000); }); }; - function setModalOpen(x: boolean) { - setOpen(x); - if (x === false) { - closePopUp(); - } - } - - const pythonApiCode = getPythonApiCode(flow); - - const curl_code = getCurlCode(flow); - const pythonCode = getPythonCode(flow); - + const pythonApiCode = getPythonApiCode(flow, tweak.current); + const curl_code = getCurlCode(flow, tweak.current); + const pythonCode = getPythonCode(flow, tweak.current); + const tweaksCode = buildTweaks(flow); const tabs = [ { name: "cURL", @@ -80,10 +100,169 @@ export default function ApiModal({ flow }: { flow: FlowType }) { code: pythonCode, }, ]; + + useEffect(() => { + if (closeEdit !== "") { + tweak.current = getTweak; + if (tweak.current.length > 0) { + setActiveTab("3"); + openAccordions(); + } else { + startTweaks(); + } + } else { + startTweaks(); + } + }, [closeEdit]); + + useEffect(() => { + filterNodes(); + }, []); + + if (Object.keys(tweaksCode).length > 0) { + tabs.push({ + name: "Tweaks", + mode: "python", + image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", + code: pythonCode, + }); + } + + function setModalOpen(x: boolean) { + setOpen(x); + if (x === false) { + setCloseEdit(""); + setTweak([]); + closePopUp(); + } + } + + function startTweaks() { + tweak.current.push(buildTweaks(flow)); + } + + function filterNodes() { + let arrNodesWithValues = []; + + flow["data"]["nodes"].forEach((t) => { + Object.keys(t["data"]["node"]["template"]) + .filter( + (n) => + n.charAt(0) !== "_" && + t.data.node.template[n].show && + (t.data.node.template[n].type === "str" || + t.data.node.template[n].type === "bool" || + t.data.node.template[n].type === "float" || + t.data.node.template[n].type === "code" || + t.data.node.template[n].type === "prompt" || + t.data.node.template[n].type === "file" || + t.data.node.template[n].type === "int") + ) + .map((n, i) => { + arrNodesWithValues.push(t["id"]); + }); + }); + + tweaksList.current = arrNodesWithValues.filter((value, index, self) => { + return self.indexOf(value) === index; + }); + } + + function buildTweakObject(tw, changes, template) { + if (template.type === "float") { + changes = parseFloat(changes); + } + if (template.type === "int") { + changes = parseInt(changes); + } + if (template.list === true && Array.isArray(changes)) { + changes = changes?.filter((x) => x !== ""); + } + + const existingTweak = tweak.current.find((element) => + element.hasOwnProperty(tw) + ); + + if (existingTweak) { + existingTweak[tw][template["name"]] = changes; + + if (existingTweak[tw][template["name"]] == template.value) { + tweak.current.forEach((element) => { + if (element[tw] && Object.keys(element[tw])?.length === 0) { + tweak.current = tweak.current.filter((obj) => { + const prop = obj[Object.keys(obj)[0]].prop; + return prop !== undefined && prop !== null && prop !== ""; + }); + } + }); + } + } else { + const newTweak = { + [tw]: { + [template["name"]]: changes, + }, + }; + tweak.current.push(newTweak); + } + + const pythonApiCode = getPythonApiCode(flow, tweak.current); + const curl_code = getCurlCode(flow, tweak.current); + const pythonCode = getPythonCode(flow, tweak.current); + + tabs[0].code = curl_code; + tabs[1].code = pythonApiCode; + tabs[2].code = pythonCode; + + setTweak(tweak.current); + } + + function buildContent(value) { + const htmlContent = ( +
+ {value != null && value != "" ? value : "None"} +
+ ); + return htmlContent; + } + + function getValue(value, node, template) { + let returnValue = value ?? ""; + + if (getTweak.length > 0) { + for (const obj of getTweak) { + Object.keys(obj).forEach((key) => { + const value = obj[key]; + if (key == node["id"]) { + Object.keys(value).forEach((key) => { + if (key == template["name"]) { + returnValue = value[key]; + } + }); + } + }); + } + } else { + return value ?? ""; + } + return returnValue; + } + + function openAccordions() { + let accordionsToOpen = []; + tweak.current.forEach((el) => { + Object.keys(el).forEach((key) => { + if (Object.keys(el[key]).length > 0) { + accordionsToOpen.push(key); + setOpenAccordion(accordionsToOpen); + } + }); + }); + } + return ( - + Code @@ -96,9 +275,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) { setActiveTab(value)} + onValueChange={(value) => { + setActiveTab(value); + if (value === "3") { + openAccordions(); + } + }} >
@@ -108,29 +292,465 @@ export default function ApiModal({ flow }: { flow: FlowType }) { ))} -
- -
+ {Number(activeTab) < 3 && ( +
+ +
+ )}
{tabs.map((tab, index) => ( - - {tab.code} - + {index < 3 ? ( + + {tab.code} + + ) : index === 3 ? ( + <> +
+
+ {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]); + + 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] + ); + }} + /> +
+ + ) : ( + { + 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={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. +
+ + )} +
+ ))} + + {/* +
+ + + + + TWEAK + + + VALUE + + + + + {invoices.map((invoice) => ( + + + {invoice.paymentStatus} + + + {invoice.paymentMethod} + + + ))} + +
+
*/} +
+
+ + ) : null} ))} diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index f6e4b8e1c..bc814a9ab 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -34,12 +34,13 @@ export default function CodeAreaModal({ const [code, setCode] = useState(value); const { dark } = useContext(darkContext); const { setErrorData, setSuccessData } = useContext(alertContext); - const { closePopUp } = useContext(PopUpContext); + const { closePopUp, setCloseEdit } = useContext(PopUpContext); const ref = useRef(); function setModalOpen(x: boolean) { setOpen(x); if (x === false) { setTimeout(() => { + setCloseEdit("editcode"); closePopUp(); }, 300); } 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(); } } 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 2ac6960fd..598f2af41 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -22,6 +22,7 @@ export type DropDownComponentType = { options: string[]; onSelect: (value: string) => void; editNode?: boolean; + apiModal?: boolean; numberOfOptions?: number; }; export type ParameterComponentType = { @@ -42,6 +43,7 @@ export type InputListComponentType = { onChange: (value: string[]) => void; disabled: boolean; editNode?: boolean; + onAddInput?: (value?: string[]) => void; }; export type TextAreaComponentType = { @@ -111,6 +113,11 @@ export type RadialProgressType = { color?: string; }; +export type AccordionComponentType = { + children?: ReactElement; + open?: string[]; + trigger?: string; +}; export type Side = "top" | "right" | "bottom" | "left"; export type ShadTooltipProps = { 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 = { 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))",